:root{
    --char: #150e0a;
    --char-2: #1c130c;
    --umber: #271a11;
    --umber-2: #2f2013;
    --ember: #ec7a1b;
    --ember-deep: #c4530b;
    --brick: #9a2a1d;
    --brick-deep: #6f1d14;
    --cream: #f4e8d2;
    --cream-dim: #cdbfa4;
    --gold: #ddae4e;
    --line: rgba(244,232,210,0.12);
    --shadow-ember: 0 0 40px rgba(236,122,27,0.35);
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  }

  body{
    background:var(--char);
    color:var(--cream);
    font-family:'Karla', sans-serif;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  img{ max-width:100%; display:block; }

  a{ color:inherit; text-decoration:none; }

  ::selection{ background:var(--ember); color:var(--char); }

  :focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
  }

  .wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 28px;
  }

  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    text-transform:uppercase;
    letter-spacing:0.22em;
    font-size:0.72rem;
    color:var(--ember);
    font-weight:500;
  }

  h1,h2,h3{
    font-family:'Anton', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.01em;
    font-weight:400;
    line-height:0.96;
  }

  /* ---------- background ember texture ---------- */
  .grain{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:2;
    opacity:0.05;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  #embers{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
  }

  /* ---------- nav ---------- */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:50;
    padding:16px 0;
    background:linear-gradient(to bottom, rgba(21,14,10,0.95), rgba(21,14,10,0));
    transition:background 0.4s ease, padding 0.4s ease, backdrop-filter .4s ease;
  }
  header.scrolled{
    background:rgba(21,14,10,0.86);
    backdrop-filter:blur(10px);
    padding:10px 0;
    border-bottom:1px solid var(--line);
  }
  header .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .brand img{
    width:44px; height:44px;
    border-radius:50%;
    object-fit:cover;
    box-shadow:0 0 0 2px var(--ember), 0 0 18px rgba(236,122,27,0.45);
  }
  .brand span{
    font-family:'Anton', sans-serif;
    font-size:1.05rem;
    letter-spacing:0.03em;
  }
  .brand small{
    display:block;
    font-family:'JetBrains Mono', monospace;
    font-size:0.6rem;
    letter-spacing:0.15em;
    color:var(--cream-dim);
    text-transform:uppercase;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:'Anton', sans-serif;
    letter-spacing:0.04em;
    text-transform:uppercase;
    font-size:0.85rem;
    padding:13px 24px;
    border-radius:999px;
    background:linear-gradient(135deg, var(--ember), var(--ember-deep));
    color:#1a0f06;
    box-shadow:0 8px 24px -6px rgba(236,122,27,0.55);
    border:1px solid rgba(255,255,255,0.15);
    cursor:pointer;
    transition:transform 0.25s ease, box-shadow 0.25s ease;
    white-space:nowrap;
  }
  .btn:hover{
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 12px 30px -6px rgba(236,122,27,0.7);
  }
  .btn:active{ transform:translateY(0) scale(0.99); }
  .btn.small{ padding:10px 18px; font-size:0.72rem; }
  .btn svg{ width:18px; height:18px; }

  .btn.ghost{
    background:transparent;
    color:var(--cream);
    border:1px solid var(--line);
    box-shadow:none;
  }
  .btn.ghost:hover{
    border-color:var(--ember);
    color:var(--ember);
  }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:140px 28px 100px;
    isolation:isolate;
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    z-index:-1;
    background:
      radial-gradient(ellipse 60% 45% at 50% 18%, rgba(236,122,27,0.22), transparent 60%),
      radial-gradient(ellipse 70% 50% at 50% 100%, rgba(154,42,29,0.28), transparent 65%),
      var(--char);
  }
  .hero-logo{
    width:132px; height:132px;
    border-radius:50%;
    object-fit:cover;
    margin:0 auto 26px;
    box-shadow:0 0 0 3px var(--ember), 0 0 60px rgba(236,122,27,0.45), 0 20px 45px rgba(0,0,0,0.55);
    animation:float 6s ease-in-out infinite;
  }
  @keyframes float{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-10px); }
  }
  .hero .eyebrow{ display:block; margin-bottom:18px; }
  .hero h1{
    font-size:clamp(3rem, 11vw, 6.6rem);
    color:var(--cream);
  }
  .hero h1 .accent{
    color:var(--ember);
    -webkit-text-stroke:1px rgba(255,255,255,0.08);
    text-shadow:0 0 50px rgba(236,122,27,0.5);
  }
  .hero p.sub{
    max-width:520px;
    margin:26px auto 36px;
    font-size:1.05rem;
    line-height:1.6;
    color:var(--cream-dim);
  }
  .hero .cta-row{
    display:flex;
    gap:14px;
    justify-content:center;
    flex-wrap:wrap;
  }
  .hero .meta{
    margin-top:44px;
    display:flex;
    gap:26px;
    justify-content:center;
    flex-wrap:wrap;
    font-family:'JetBrains Mono', monospace;
    font-size:0.75rem;
    color:var(--cream-dim);
    letter-spacing:0.04em;
  }
  .hero .meta b{ color:var(--gold); font-weight:600; }

  .scroll-cue{
    position:absolute;
    bottom:34px; left:50%;
    transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center;
    gap:8px;
    font-family:'JetBrains Mono', monospace;
    font-size:0.62rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--cream-dim);
    opacity:0.7;
  }
  .scroll-cue .dot{
    width:1px; height:34px;
    background:linear-gradient(var(--ember), transparent);
    animation:pulseDown 1.8s ease-in-out infinite;
  }
  @keyframes pulseDown{
    0%{ opacity:0.2; transform:scaleY(0.3); transform-origin:top; }
    50%{ opacity:1; transform:scaleY(1); transform-origin:top; }
    100%{ opacity:0.2; transform:scaleY(0.3); transform-origin:top; }
  }

  /* ---------- reveal on scroll ---------- */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1);
  }
  .reveal.in{
    opacity:1;
    transform:translateY(0);
  }
  .stagger .reveal:nth-child(1){ transition-delay:0.02s; }
  .stagger .reveal:nth-child(2){ transition-delay:0.10s; }
  .stagger .reveal:nth-child(3){ transition-delay:0.18s; }
  .stagger .reveal:nth-child(4){ transition-delay:0.26s; }

  /* ---------- section shell ---------- */
  section{
    position:relative;
    padding:110px 0;
  }
  .section-head{
    text-align:center;
    max-width:640px;
    margin:0 auto 56px;
  }
  .section-head h2{
    font-size:clamp(2.2rem, 5.5vw, 3.4rem);
    margin-top:14px;
    color:var(--cream);
  }
  .section-head p{
    margin-top:16px;
    color:var(--cream-dim);
    line-height:1.6;
  }

  /* torn brush-stroke divider, echoing the shop's own poster banners */
  .brush{
    position:relative;
    background:linear-gradient(100deg, var(--brick-deep), var(--brick) 55%, var(--brick-deep));
    clip-path: polygon(0% 8%, 4% 4%, 9% 9%, 14% 3%, 20% 7%, 27% 2%, 33% 6%, 40% 1%, 47% 5%, 54% 2%, 61% 7%, 68% 3%, 75% 6%, 82% 2%, 89% 6%, 95% 3%, 100% 6%, 100% 94%, 95% 97%, 88% 93%, 82% 98%, 75% 94%, 68% 97%, 61% 93%, 54% 98%, 47% 94%, 40% 98%, 33% 94%, 27% 97%, 20% 93%, 14% 98%, 9% 94%, 4% 97%, 0% 92%);
  }

  /* ---------- features ---------- */
  .features{
    background:var(--char-2);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .feature-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
  }
  .feature-card{
    background:var(--umber);
    border:1px solid var(--line);
    border-radius:18px;
    padding:30px 22px;
    text-align:center;
    transition:transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
  }
  .feature-card:hover{
    transform:translateY(-6px);
    border-color:var(--ember);
    background:var(--umber-2);
  }
  .feature-card .ico{
    width:56px; height:56px;
    margin:0 auto 18px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, rgba(236,122,27,0.35), rgba(236,122,27,0.08));
    border:1px solid rgba(236,122,27,0.35);
  }
  .feature-card .ico svg{ width:26px; height:26px; stroke:var(--ember); }
  .feature-card h3{
    font-family:'Karla', sans-serif;
    font-weight:800;
    text-transform:none;
    font-size:1rem;
    letter-spacing:0.01em;
    margin-bottom:8px;
    color:var(--cream);
  }
  .feature-card p{
    font-size:0.85rem;
    color:var(--cream-dim);
    line-height:1.55;
  }

  /* ---------- menu ---------- */
  .menu{ background:var(--char); }
  .tabs{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-bottom:46px;
    flex-wrap:wrap;
  }
  .tab{
    font-family:'JetBrains Mono', monospace;
    font-size:0.78rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    padding:11px 22px;
    border-radius:999px;
    border:1px solid var(--line);
    background:var(--umber);
    color:var(--cream-dim);
    cursor:pointer;
    transition:all 0.25s ease;
  }
  .tab:hover{ border-color:var(--ember); color:var(--cream); }
  .tab.active{
    background:var(--ember);
    border-color:var(--ember);
    color:#1a0f06;
    font-weight:700;
  }

  .menu-panel{ display:none; }
  .menu-panel.active{ display:block; }

  .menu-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 48px;
  }
  .menu-item{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:14px;
    padding:20px 0;
    border-bottom:1px dashed var(--line);
  }
  .menu-item .num{
    font-family:'JetBrains Mono', monospace;
    color:var(--ember);
    font-size:0.72rem;
    margin-right:10px;
  }
  .menu-item .info{ flex:1; min-width:0; }
  .menu-item .name{
    font-family:'Karla', sans-serif;
    font-weight:800;
    font-size:1rem;
    color:var(--cream);
    text-transform:uppercase;
    letter-spacing:0.01em;
  }
  .menu-item .desc{
    font-size:0.82rem;
    color:var(--cream-dim);
    margin-top:5px;
    line-height:1.5;
  }
  .menu-item .price{
    font-family:'JetBrains Mono', monospace;
    font-weight:700;
    color:var(--gold);
    font-size:0.95rem;
    white-space:nowrap;
  }

  .bordas-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
    max-width:760px;
    margin:0 auto;
  }
  .borda-card{
    background:var(--umber);
    border:1px solid var(--line);
    border-radius:16px;
    padding:26px 18px;
    text-align:center;
  }
  .borda-card .name{
    font-family:'Anton', sans-serif;
    font-size:1.1rem;
    color:var(--cream);
  }
  .borda-card .price{
    font-family:'JetBrains Mono', monospace;
    color:var(--gold);
    margin-top:8px;
    font-size:1.05rem;
    font-weight:700;
  }

  .menu-note{
    text-align:center;
    margin-top:40px;
    font-family:'JetBrains Mono', monospace;
    font-size:0.78rem;
    color:var(--cream-dim);
    letter-spacing:0.02em;
  }
  .menu-note em{ color:var(--gold); font-style:normal; }

  /* ---------- info strip ---------- */
  .info-strip{
    padding:70px 0;
  }
  .info-strip .brush{
    padding:56px 40px;
  }
  .info-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:34px;
    text-align:center;
  }
  .info-grid .eyebrow{ color:var(--gold); }
  .info-grid h3{
    font-family:'Anton', sans-serif;
    font-size:1.5rem;
    margin:10px 0 8px;
    color:#fff;
  }
  .info-grid p{
    font-size:0.9rem;
    color:rgba(244,232,210,0.85);
    line-height:1.55;
  }
  .info-grid .divider{
    width:1px;
    background:rgba(244,232,210,0.25);
    justify-self:center;
    display:none;
  }

  /* ---------- gallery / signature: pizza wheel ---------- */
  .signature{
    text-align:center;
    background:var(--char-2);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .wheel-wrap{
    position:relative;
    width:min(360px, 80vw);
    height:min(360px, 80vw);
    margin:50px auto 0;
  }
  .wheel{
    width:100%; height:100%;
    border-radius:50%;
    border:2px dashed rgba(221,174,78,0.5);
    display:flex; align-items:center; justify-content:center;
    animation:spin 40s linear infinite;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .wheel-center{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:46%; height:46%;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, var(--ember), var(--ember-deep));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 60px rgba(236,122,27,0.5);
    animation:none;
  }
  .wheel-center span{
    font-family:'Anton', sans-serif;
    font-size:1.6rem;
    color:#1a0f06;
    line-height:1;
  }
  .slice-label{
    position:absolute;
    font-family:'JetBrains Mono', monospace;
    font-size:0.68rem;
    letter-spacing:0.05em;
    color:var(--cream-dim);
    background:var(--umber);
    border:1px solid var(--line);
    padding:6px 12px;
    border-radius:999px;
    white-space:nowrap;
    animation:counterspin 40s linear infinite;
  }
  @keyframes counterspin{ to{ transform:rotate(-360deg); } }

  /* ---------- final cta ---------- */
  .final-cta{
    text-align:center;
    padding:120px 0 100px;
  }
  .final-cta h2{
    font-size:clamp(2.4rem, 7vw, 4.4rem);
    color:var(--cream);
  }
  .final-cta .accent{ color:var(--ember); }
  .final-cta p{
    max-width:480px;
    margin:20px auto 38px;
    color:var(--cream-dim);
    line-height:1.6;
  }

  footer{
    border-top:1px solid var(--line);
    padding:44px 0 34px;
  }
  footer .wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
  }
  footer .brand img{ width:38px; height:38px; }
  footer .fine{
    font-family:'JetBrains Mono', monospace;
    font-size:0.7rem;
    color:var(--cream-dim);
    letter-spacing:0.04em;
    text-align:right;
  }

  .floating-order{
    position:fixed;
    right:20px; bottom:20px;
    z-index:60;
    opacity:0;
    transform:translateY(16px) scale(0.9);
    pointer-events:none;
    transition:opacity 0.3s ease, transform 0.3s ease;
  }
  .floating-order.show{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
  }

  @media (max-width: 860px){
    .feature-grid{ grid-template-columns:1fr 1fr; }
    .menu-grid{ grid-template-columns:1fr; }
    .info-grid{ grid-template-columns:1fr; gap:36px; }
    .bordas-grid{ grid-template-columns:1fr; }
  }
  @media (max-width: 520px){
    .feature-grid{ grid-template-columns:1fr; }
    .hero{ padding-top:120px; }
    .wrap{ padding:0 20px; }
  }