/* ===========================================================
   Shadnaz
   Display: Cormorant Garamond · UI: Outfit
   Primary: #dd3939
=========================================================== */
:root{
  --primary:       #dd3939;
  --primary-deep:  #c12e2e;
  --primary-soft:  #f7e8e8;
  --primary-mist:  rgba(221,57,57,.12);

  --paper:         #faf9f8;
  --paper-2:       #f3f0ee;
  --ink:           #1a1414;
  --ink-soft:      #6a5f5f;
  --line:          rgba(26,20,20,.1);
  --white:         #ffffff;

  --char:          #141010;
  --char-2:        #221a1a;

  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Outfit", "Avenir Next", -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1120px;
  --ease: cubic-bezier(.22,.68,0,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:500;
  margin:0 0 .35em;
  letter-spacing:-.02em;
  line-height:1.1;
}
p{ margin:0 0 1em; color:var(--ink-soft); }
.eyebrow{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.7rem;
  font-weight:600;
  color:var(--primary);
  margin:0 0 1rem;
}
section{ padding:6.5rem 1.5rem; }
.section-head{ max-width:var(--container); margin:0 auto 3rem; }
.section-head h2{ font-size:clamp(2rem,4vw,3rem); max-width:18ch; }

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

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

/* ---------------- Nav ---------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:1.35rem 1.5rem;
  transition:background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.nav.scrolled{
  background:rgba(250,249,248,.9);
  backdrop-filter:blur(14px);
  padding:.85rem 1.5rem;
  box-shadow:0 1px 0 var(--line);
}
.nav-inner{
  max-width:var(--container); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; color:var(--white); transition:color .35s var(--ease); }
.nav.scrolled .brand{ color:var(--ink); }
.brand-mark{
  width:10px; height:10px; border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 0 3px var(--primary-mist);
}
.brand-word{
  font-family:var(--font-display);
  font-size:1.35rem; font-weight:500; letter-spacing:-.01em;
}

.nav-links{ display:flex; gap:2rem; }
.nav-links a{
  color:rgba(255,255,255,.82); font-size:.9rem; font-weight:500;
  position:relative; transition:color .35s var(--ease), opacity .3s;
}
.nav.scrolled .nav-links a{ color:var(--ink-soft); }
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1.5px;
  background:var(--primary); transition:right .3s var(--ease);
}
.nav-links a:hover{ color:var(--white); }
.nav.scrolled .nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ right:0; }

.nav-cta{
  background:transparent;
  border:1.5px solid rgba(255,255,255,.35);
  color:var(--white);
  padding:.55rem 1.15rem;
  font-size:.82rem; font-weight:600;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
  white-space:nowrap;
}
.nav.scrolled .nav-cta{
  background:var(--primary);
  border-color:var(--primary);
  color:var(--white);
}
.nav-cta:hover{ background:var(--primary); border-color:var(--primary); color:var(--white); }
.nav.scrolled .nav-cta:hover{ background:var(--primary-deep); border-color:var(--primary-deep); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px;
}
.nav-toggle span{ width:22px; height:1.5px; background:var(--white); transition:.3s var(--ease); }
.nav.scrolled .nav-toggle span{ background:var(--ink); }

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:7rem 1.5rem 5rem;
  overflow:hidden;
  color:var(--white);
}
.hero-media{
  position:absolute; inset:0;
  background:
    linear-gradient(160deg, #2a1515 0%, #1a1010 42%, #0f0b0b 100%);
}
.hero-wash{
  position:absolute; inset:0;
  background:
    radial-gradient(70% 55% at 70% 20%, rgba(221,57,57,.45), transparent 58%),
    radial-gradient(50% 45% at 15% 85%, rgba(221,57,57,.22), transparent 55%),
    linear-gradient(180deg, transparent 55%, rgba(10,8,8,.55) 100%);
}
.hero-orb{
  position:absolute; border-radius:50%;
  filter:blur(2px);
  animation:drift 14s ease-in-out infinite;
}
.hero-orb-a{
  width:min(52vw,420px); aspect-ratio:1;
  top:-8%; right:-6%;
  background:radial-gradient(circle at 35% 35%, #ff6b6b, var(--primary) 45%, transparent 70%);
  opacity:.55;
}
.hero-orb-b{
  width:min(40vw,300px); aspect-ratio:1;
  bottom:8%; left:-8%;
  background:radial-gradient(circle at 60% 40%, var(--primary), transparent 68%);
  opacity:.3;
  animation-delay:-4s;
}
.hero-sheen{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      -18deg,
      transparent 0,
      transparent 48px,
      rgba(255,255,255,.015) 48px,
      rgba(255,255,255,.015) 49px
    );
  pointer-events:none;
}
@keyframes drift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-3%, 4%) scale(1.05); }
}

.hero-inner{
  position:relative; z-index:1;
  max-width:760px; text-align:center;
}
.brand-hero{
  font-size:clamp(4.2rem,14vw,8.5rem);
  font-weight:500;
  letter-spacing:-.04em;
  line-height:.9;
  margin:0 0 1.2rem;
  color:var(--white);
}
.hero-copy{
  color:rgba(255,255,255,.68);
  font-size:1.05rem;
  max-width:34ch;
  margin:0 auto 2rem;
  font-weight:300;
}

.hero-actions{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 1.7rem;
  font-weight:600; font-size:.92rem;
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn-primary{
  background:var(--primary);
  color:var(--white);
  border:1.5px solid var(--primary);
}
.btn-primary:hover{ background:var(--primary-deep); border-color:var(--primary-deep); transform:translateY(-2px); }
.btn-ghost{
  border:1.5px solid rgba(255,255,255,.35);
  color:var(--white);
  background:transparent;
}
.btn-ghost:hover{ border-color:var(--white); transform:translateY(-2px); }

.scroll-cue{
  position:absolute; bottom:2rem; left:50%;
  transform:translateX(-50%);
  width:22px; height:36px;
  border:1.5px solid rgba(255,255,255,.35);
  display:flex; justify-content:center; padding-top:8px;
}
.scroll-cue span{
  width:3px; height:8px; background:var(--primary);
  animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue{
  0%{ opacity:1; transform:translateY(0); }
  100%{ opacity:0; transform:translateY(10px); }
}

/* ---------------- Reveal ---------------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.hero .reveal{ transition-delay:calc(var(--i,0) * .1s); }

/* ---------------- About ---------------- */
.about{ background:var(--paper); }
.about-inner{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns: .9fr 1.1fr; gap:4.5rem; align-items:center;
}
.about-visual{ position:relative; }
.about-panel{
  aspect-ratio:4/5;
  background:
    linear-gradient(165deg, var(--primary) 0%, #a82424 48%, var(--char) 100%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:2.2rem;
  position:relative;
  overflow:hidden;
}
.about-panel::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.2), transparent 40%),
    repeating-linear-gradient(-25deg, transparent 0, transparent 22px, rgba(255,255,255,.04) 22px, rgba(255,255,255,.04) 23px);
}
.about-year{
  position:relative;
  font-family:var(--font-display);
  font-size:clamp(3.5rem,8vw,5.5rem);
  font-weight:500;
  color:var(--white);
  line-height:.9;
  letter-spacing:-.03em;
}
.about-place{
  position:relative;
  margin-top:.6rem;
  color:rgba(255,255,255,.72);
  font-size:.85rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:500;
}
.about-text h2{ font-size:clamp(1.9rem,3.2vw,2.75rem); max-width:16ch; }
.about-text p:last-of-type{ margin-bottom:0; }

/* ---------------- Categories ---------------- */
.categories{ background:var(--paper-2); }
.cat-list{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
}
.cat-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.4rem;
  padding:2rem 1.6rem 2rem 0;
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease);
}
.cat-item:nth-child(odd){ padding-right:2rem; border-right:1px solid var(--line); }
.cat-item:nth-child(even){ padding-left:2rem; }
.cat-index{
  font-family:var(--font-display);
  font-size:1.5rem;
  color:var(--primary);
  font-weight:500;
  line-height:1;
  padding-top:.15rem;
}
.cat-body h3{
  font-size:1.45rem;
  margin-bottom:.4rem;
  transition:color .3s var(--ease);
}
.cat-item:hover .cat-body h3{ color:var(--primary); }
.cat-body p{ margin:0; font-size:.95rem; max-width:38ch; }

/* ---------------- App ---------------- */
.app{
  background:var(--char);
  color:var(--white);
  overflow:hidden;
  position:relative;
}
.app::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(50% 60% at 90% 50%, rgba(221,57,57,.28), transparent 60%);
  pointer-events:none;
}
.app-inner{
  position:relative;
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1.1fr .9fr; gap:4rem; align-items:center;
}
.app .eyebrow{ color:var(--primary); }
.app h2{ color:var(--white); font-size:clamp(1.9rem,3.2vw,2.75rem); max-width:14ch; }
.app p{ color:rgba(255,255,255,.65); }

.store-badges{ display:flex; gap:.85rem; margin-top:1.5rem; flex-wrap:wrap; }
.badge-btn{
  display:flex; align-items:center; gap:.6rem;
  background:transparent;
  border:1.5px solid rgba(255,255,255,.25);
  color:var(--white);
  padding:.85rem 1.25rem;
  cursor:pointer;
  font-family:var(--font-body); font-size:.88rem; font-weight:600;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.badge-btn:hover{
  background:var(--primary);
  border-color:var(--primary);
  transform:translateY(-2px);
}
.app-note{
  min-height:1.4em; font-size:.85rem; color:var(--primary);
  margin-top:1rem; opacity:0; transition:opacity .3s;
}
.app-note.show{ opacity:1; }

.app-visual{ display:flex; justify-content:center; }
.phone{
  width:220px; height:440px;
  background:linear-gradient(165deg, #2e2222, #161111);
  border:1px solid rgba(255,255,255,.12);
  position:relative; padding:14px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.55);
}
.phone-notch{
  width:58px; height:5px; border-radius:3px;
  background:rgba(255,255,255,.18); margin:0 auto 14px;
}
.phone-screen{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  height:calc(100% - 24px);
  padding:1.3rem 1rem;
}
.phone-brand{
  font-family:var(--font-display);
  font-size:1.5rem;
  color:var(--white);
  margin-bottom:1.2rem;
}
.phone-line{
  height:7px; background:rgba(255,255,255,.1); margin-bottom:10px;
}
.w-70{ width:70%; } .w-45{ width:45%; }
.phone-tile{
  height:72px; margin-top:1.1rem;
  background:linear-gradient(135deg, rgba(221,57,57,.35), rgba(221,57,57,.08));
  border:1px solid rgba(221,57,57,.2);
}
.phone-tile.soft{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.06);
  height:56px;
}
.phone-cta{
  margin-top:1.4rem; height:36px; width:70%;
  background:var(--primary);
}

/* ---------------- Location ---------------- */
.location{ background:var(--paper); }
.location-inner{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1.55fr 1fr; gap:0; align-items:stretch;
}
.map-wrap{ overflow:hidden; min-height:380px; filter:grayscale(.2) contrast(1.05); }
.map-wrap iframe{ width:100%; height:100%; min-height:380px; border:0; }
.location-info{
  background:var(--primary);
  color:var(--white);
  padding:2.8rem 2.2rem;
  display:flex; flex-direction:column; justify-content:center; gap:.35rem;
}
.location-info h3{ font-size:1.7rem; color:var(--white); }
.location-info p{ color:rgba(255,255,255,.8); margin-bottom:1.5rem; }
.location-info .btn-primary{
  align-self:flex-start;
  background:var(--white);
  color:var(--primary);
  border-color:var(--white);
}
.location-info .btn-primary:hover{
  background:var(--paper);
  border-color:var(--paper);
}

/* ---------------- Footer ---------------- */
.footer{ background:var(--char); color:var(--white); padding:3.2rem 1.5rem 1.5rem; }
.footer .brand{ color:var(--white); }
.footer-inner{
  max-width:var(--container); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:1.6rem; align-items:center; justify-content:space-between;
}
.footer-links{ display:flex; gap:1.8rem; }
.footer-links a{ font-size:.88rem; opacity:.7; transition:opacity .3s, color .3s; }
.footer-links a:hover{ opacity:1; color:var(--primary); }
.footer-social{ display:flex; gap:1rem; }
.footer-social a{ color:rgba(255,255,255,.7); transition:color .3s, transform .3s; }
.footer-social a:hover{ color:var(--primary); transform:translateY(-2px); }
.footer-note{
  max-width:var(--container); margin:2rem auto 0; padding-top:1.3rem;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.78rem; color:rgba(255,255,255,.4);
}

/* ---------------- Responsive ---------------- */
@media (max-width:960px){
  .about-inner{ grid-template-columns:1fr; gap:2.5rem; }
  .about-panel{ max-width:360px; }
  .cat-list{ grid-template-columns:1fr; }
  .cat-item:nth-child(odd),
  .cat-item:nth-child(even){
    padding:1.8rem 0;
    border-right:0;
  }
  .app-inner{ grid-template-columns:1fr; }
  .app-visual{ order:-1; }
  .location-inner{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; top:0; height:100vh; width:min(78vw,320px);
    background:var(--char); flex-direction:column; padding:6.5rem 2rem 2rem; gap:1.5rem;
    transform:translateX(100%); transition:transform .4s var(--ease);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ color:var(--white); font-size:1.05rem; }
  .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  section{ padding:4.5rem 1.25rem; }
  .brand-hero{ font-size:clamp(3.6rem,18vw,5.5rem); }
}