/* Nula Eats — nulaeats.com */
  :root{
    --cast-iron:#161412;
    --cast-iron-deep:#0e0c0a;
    --cast-iron-lift:#1d1a17;
    --pepper:#be3a23;
    --pepper-deep:#a83018;
    --pepper-line:rgba(190,58,35,0.55);
    --crema:#E8DCCB;
    --crema-dim:rgba(232,220,203,0.62);
    --crema-soft:rgba(232,220,203,0.32);
    --crema-faint:rgba(232,220,203,0.08);
    --clay:#8B5A4B;
    --clay-faint:rgba(139,90,75,0.22);
    --ease:cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  html,body{margin:0;padding:0;background:var(--cast-iron);color:var(--crema);overflow-x:hidden}
  body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-weight:300;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    position:relative;
  }
  ::selection{background:var(--pepper);color:var(--crema)}

  /* ── HERO BACKDROP ── */
  .backdrop{
    position:absolute; top:0; left:0; right:0;
    height:100vh; height:100dvh;
    z-index:0;
    overflow:hidden;
    background:var(--cast-iron);
  }
  .backdrop img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center 40%;
    opacity:0;
    transform:scale(1.06);
    animation:reveal 1600ms var(--ease) 100ms forwards, drift 22s var(--ease) 1600ms infinite alternate;
  }
  .backdrop::after{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse 80% 60% at 50% 45%, rgba(22,20,18,0.72) 0%, rgba(22,20,18,0.92) 65%, rgba(22,20,18,0.99) 100%),
      linear-gradient(180deg, rgba(22,20,18,0.88) 0%, rgba(22,20,18,0.78) 35%, rgba(22,20,18,0.88) 70%, rgba(22,20,18,1) 100%);
    pointer-events:none;
  }
  .backdrop::before{
    content:"";
    position:absolute; inset:0;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity:0.08;
    mix-blend-mode:overlay;
    pointer-events:none;
    z-index:1;
  }
  @keyframes reveal{ to{opacity:1; transform:scale(1.02)} }
  @keyframes drift{
    from{transform:scale(1.02) translate3d(0,0,0)}
    to  {transform:scale(1.08) translate3d(0,-1.5%,0)}
  }
  @media (prefers-reduced-motion: reduce){
    .backdrop img{animation:reveal 800ms ease forwards}
    html{scroll-behavior:auto}
  }

  /* ── HERO ── */
  .hero{
    position:relative; z-index:2;
    min-height:100vh; min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:80px 24px 64px;
  }
  .stage{
    width:100%;
    max-width:640px;
    text-align:center;
    opacity:0;
    transform:translateY(14px);
    animation:rise 1100ms var(--ease) 450ms forwards;
  }
  @keyframes rise{ to{opacity:1; transform:translateY(0)} }

  .logo{
    display:block;
    width:clamp(180px, 26vw, 280px);
    height:auto;
    margin:0 auto 28px;
    filter:drop-shadow(0 0 24px rgba(190,58,35,0.18));
  }

  .eyebrow{
    font-family:'Oswald',sans-serif;
    font-weight:500;
    font-size:11px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--pepper);
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border:1px solid var(--pepper-line);
    border-radius:999px;
    margin:0 0 36px;
    background:rgba(190,58,35,0.04);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
  .eyebrow .pulse{
    width:6px;height:6px;
    background:var(--pepper);
    border-radius:50%;
    box-shadow:0 0 0 0 rgba(190,58,35,0.6);
    animation:pulse 2.2s var(--ease) infinite;
  }
  @keyframes pulse{
    0%  {box-shadow:0 0 0 0 rgba(190,58,35,0.55)}
    70% {box-shadow:0 0 0 10px rgba(190,58,35,0)}
    100%{box-shadow:0 0 0 0 rgba(190,58,35,0)}
  }

  h1{
    font-family:'Oswald',sans-serif;
    font-weight:700;
    font-size:clamp(40px,6.4vw,72px);
    line-height:1.02;
    letter-spacing:-0.015em;
    text-transform:uppercase;
    color:var(--crema);
    margin:0 0 28px;
    text-shadow:0 2px 30px rgba(0,0,0,0.4);
  }
  h1 .accent{color:var(--pepper)}
  h1 .line{display:block}

  .lead{
    font-size:clamp(15px,1.5vw,17px);
    line-height:1.6;
    color:var(--crema-dim);
    margin:0 auto 40px;
    max-width:480px;
    font-weight:300;
  }

  /* ── FORM ── */
  .wl-form{
    display:flex;
    gap:8px;
    max-width:480px;
    margin:0 auto;
    padding:8px;
    background:rgba(22,20,18,0.55);
    border:1px solid var(--clay-faint);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-radius:4px;
    transition:border-color .25s var(--ease), background .25s var(--ease);
  }
  .wl-form:focus-within{
    border-color:var(--pepper-line);
    background:rgba(22,20,18,0.7);
  }
  .wl-form input[type=email]{
    flex:1;
    min-width:0;
    background:transparent;
    border:0;
    color:var(--crema);
    font-family:'Inter',sans-serif;
    font-weight:400;
    font-size:15px;
    padding:14px 16px;
    outline:none;
    letter-spacing:0.01em;
  }
  .wl-form input[type=email]::placeholder{color:var(--crema-soft);font-weight:300}
  .wl-form button{
    background:var(--pepper);
    color:#fff;
    border:0;
    border-radius:2px;
    font-family:'Oswald',sans-serif;
    font-weight:500;
    font-size:13px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    padding:14px 24px;
    cursor:pointer;
    transition:background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
    white-space:nowrap;
    box-shadow:0 0 0 0 rgba(190,58,35,0);
  }
  .wl-form button:hover:not(:disabled){
    background:var(--pepper-deep);
    box-shadow:0 8px 24px -8px rgba(190,58,35,0.6);
  }
  .wl-form button:active:not(:disabled){transform:translateY(1px)}
  .wl-form button:disabled{opacity:0.6;cursor:wait}

  .legal{
    font-size:11px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--crema-soft);
    margin:24px 0 0;
    font-weight:500;
    font-family:'Oswald',sans-serif;
  }
  .legal.success, .legal.error{
    display:inline-block;
    background:var(--pepper);
    color:#fff;
    padding:9px 16px 8px;
    border-radius:999px;
    letter-spacing:0.16em;
    font-weight:600;
    box-shadow:0 8px 24px -8px rgba(190,58,35,0.55);
    animation:popIn .4s var(--ease) both;
  }
  .legal.success::before{
    content:"✓";
    display:inline-block;
    margin-right:8px;
    font-weight:700;
    letter-spacing:0;
  }
  @keyframes popIn{
    from{opacity:0; transform:translateY(6px) scale(0.96)}
    to{opacity:1; transform:translateY(0) scale(1)}
  }

  .signature{
    margin-top:64px;
    font-family:'Oswald',sans-serif;
    font-weight:500;
    font-size:11px;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--crema-soft);
  }
  .signature::before, .signature::after{
    content:"";
    display:inline-block;
    width:24px; height:1px;
    background:var(--crema-faint);
    vertical-align:middle;
    margin:0 14px;
  }

  /* scroll cue */
  .scroll-cue{
    position:absolute; left:50%; bottom:28px;
    transform:translateX(-50%);
    width:1px; height:40px;
    background:linear-gradient(180deg, rgba(232,220,203,0) 0%, var(--crema-soft) 100%);
    opacity:0;
    animation:fadeIn 1s var(--ease) 1600ms forwards;
  }
  .scroll-cue::after{
    content:"";
    position:absolute; left:-2px; bottom:0;
    width:5px; height:5px;
    background:var(--pepper);
  }
  @keyframes fadeIn{to{opacity:1}}

  /* ── CONTENT SECTIONS ── */
  .section{
    position:relative; z-index:2;
    background:var(--cast-iron);
    padding:104px 24px;
    border-top:1px solid var(--crema-faint);
  }
  .section.lift{background:var(--cast-iron-lift)}
  .wrap{max-width:880px; margin:0 auto}
  .wrap.narrow{max-width:640px}

  .kicker{
    font-family:'Oswald',sans-serif;
    font-weight:500;
    font-size:11px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--pepper);
    margin:0 0 20px;
    display:flex;
    align-items:center;
    gap:12px;
  }
  .kicker::before{
    content:"";
    display:inline-block;
    width:6px; height:6px;
    background:var(--pepper);
    flex:none;
  }
  .kicker.center{justify-content:center}

  h2{
    font-family:'Oswald',sans-serif;
    font-weight:700;
    font-size:clamp(30px,4.4vw,48px);
    line-height:1.05;
    letter-spacing:-0.01em;
    text-transform:uppercase;
    color:var(--crema);
    margin:0 0 28px;
  }
  h2 .accent{color:var(--pepper)}
  .body{
    font-size:clamp(16px,1.6vw,19px);
    line-height:1.65;
    color:var(--crema-dim);
    margin:0;
    max-width:620px;
  }
  .body strong{color:var(--crema); font-weight:400}

  /* Why */
  .why .body{font-size:clamp(17px,1.9vw,22px); line-height:1.55}

  /* The Nula Way — principles */
  .principles{
    list-style:none; margin:48px 0 0; padding:0;
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:0;
    border-top:1px solid var(--crema-faint);
  }
  .principles li{
    padding:32px 32px 32px 0;
    border-bottom:1px solid var(--crema-faint);
  }
  .principles li:nth-child(odd){border-right:1px solid var(--crema-faint); padding-right:40px}
  .principles li:nth-child(even){padding-left:40px}
  .principles li:last-child:nth-child(odd){border-right:0}
  .principles h3{
    font-family:'Oswald',sans-serif;
    font-weight:600;
    font-size:clamp(19px,2.2vw,24px);
    letter-spacing:0.01em;
    text-transform:uppercase;
    color:var(--crema);
    margin:0 0 10px;
    line-height:1.15;
  }
  .principles h3 .accent{color:var(--pepper)}
  .principles p{
    margin:0;
    font-size:15.5px;
    line-height:1.6;
    color:var(--crema-dim);
  }

  /* Never list */
  .never{
    list-style:none; margin:44px 0 0; padding:0;
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px 40px;
  }
  .never li{
    display:flex; align-items:center; gap:16px;
    font-family:'Oswald',sans-serif;
    font-weight:600;
    font-size:clamp(20px,2.6vw,30px);
    text-transform:uppercase;
    letter-spacing:0.01em;
    color:var(--crema);
    padding:18px 0;
    border-bottom:1px solid var(--crema-faint);
    line-height:1.1;
  }
  .never li::before{
    content:"";
    flex:none;
    width:10px; height:10px;
    background:var(--pepper);
  }
  .never li span{color:var(--crema-soft); font-weight:500; margin-right:0.35em}

  /* Closing */
  .closing{
    background:var(--cast-iron-deep);
    text-align:center;
    padding:120px 24px 96px;
  }
  .closing .eyebrow{margin-bottom:28px}
  .closing h2{margin-bottom:16px}
  .closing .lead{margin-bottom:36px}

  footer{
    position:relative; z-index:2;
    background:var(--cast-iron-deep);
    padding:24px 24px 32px;
    text-align:center;
    font-size:11px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--crema-soft);
    font-family:'Oswald',sans-serif;
    font-weight:500;
    border-top:1px solid var(--crema-faint);
  }
  footer a{
    color:inherit;
    text-decoration:none;
    border-bottom:1px solid var(--clay-faint);
    transition:color .2s var(--ease), border-color .2s var(--ease);
  }
  footer a:hover{color:var(--crema); border-color:var(--pepper-line)}

  /* ── MOBILE ── */
  @media (max-width:720px){
    .principles{grid-template-columns:1fr}
    .principles li, .principles li:nth-child(odd), .principles li:nth-child(even){
      padding:26px 0; border-right:0;
    }
    .never{grid-template-columns:1fr; gap:0}
  }
  @media (max-width:540px){
    .hero{padding:64px 20px 72px}
    .logo{margin-bottom:36px}
    .wl-form{flex-direction:column; padding:8px}
    .wl-form button{padding:14px}
    .signature{margin-top:48px; letter-spacing:0.24em}
    .signature::before, .signature::after{width:16px; margin:0 10px}
    .section{padding:72px 20px}
    .closing{padding:88px 20px 72px}
  }