:root{
  --cream-bg:#F2EBD9;
  --cream-panel:#FAF6EA;
  --cream-band:#EBE1C8;
  --ink:#2D2B2A;
  --ink-soft:#6B6154;
  --teal:#1D8A7A;
  --teal-deep:#146157;
  --gold:#9C7A42;
  --gold-line:#C9AE7D;
  --radius-card:6px;
  --wrap:1120px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream-bg);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  .reveal, .hero-el, .steps-line{opacity:1 !important; transform:none !important;}
}
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in-view{opacity:1; transform:none;}
.js .hero-el{opacity:0; transform:translateY(10px); animation:heroIn .6s ease forwards;}
@keyframes heroIn{ to{opacity:1; transform:none;} }

/* ---------- shared ---------- */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px;}
.serif{font-family:'Cormorant Garamond', serif;}
.arabic{font-family:'Amiri', serif; direction:rtl; unicode-bidi:isolate;}
.eyebrow{
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); font-weight:600;
}
a{color:inherit; text-decoration:none;}
section{position:relative;}

.divider{
  display:flex; align-items:center; justify-content:center;
  margin:40px 0;
}
.divider .line{ height:1px; width:160px; background:var(--gold-line); }

/* geometric texture backdrop */
.pattern{
  position:absolute; inset:0; opacity:.55; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%239C7A42' stroke-width='0.7' opacity='0.35'%3E%3Cpath d='M42 2 L74 22 L74 62 L42 82 L10 62 L10 22 Z'/%3E%3Cpath d='M42 16 L60 27 L60 55 L42 66 L24 55 L24 27 Z'/%3E%3Ccircle cx='42' cy='42' r='6'/%3E%3C/g%3E%3C/svg%3E");
  background-size:84px 84px;
}

.hero .pattern{
  -webkit-mask-image:radial-gradient(ellipse 500px 420px at 50% 300px, transparent 60%, black 100%);
  mask-image:radial-gradient(ellipse 500px 420px at 50% 300px, transparent 60%, black 100%);
}
header{
  position:sticky; top:0; z-index:40;
  background:rgba(242,235,217,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--gold-line);
  transition:box-shadow .3s ease;
}
header.scrolled{box-shadow:0 6px 20px -12px rgba(45,43,42,.25);}
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px; max-width:var(--wrap); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand-word{font-family:'Cormorant Garamond', serif; font-weight:700; font-size:36px; color:var(--ink);}
.brand-word .waw{color:var(--teal); font-family:'Amiri', serif;}
.nav-links{display:flex; align-items:center;}
.nav-links a{
  font-size:14.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); transition:color .2s; padding:0 18px;
}
.nav-links a:first-child{padding-left:0;}
.nav-links a:last-child{padding-right:0;}
.nav-links .sep{width:1px; height:13px; background:var(--gold-line);}
.nav-links a:hover{color:var(--teal-deep);}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 24px; font-size:14px; font-weight:600; letter-spacing:.01em;
  border-radius:3px; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
  border:1px solid transparent;
}
.btn-primary{background:var(--teal); color:#fff;}
.btn-primary:hover{background:var(--teal-deep); transform:translateY(-1px); box-shadow:0 6px 16px rgba(29,138,122,.28);}
.btn-ghost{border-color:var(--gold-line); color:var(--ink);}
.btn-ghost:hover{border-color:var(--gold); background:rgba(156,122,66,.06); transform:translateY(-1px); box-shadow:0 6px 16px rgba(45,43,42,.12);}

/* ---------- hero ---------- */
.hero{padding:76px 32px 40px; overflow:hidden;}
.ticket{
  position:relative; max-width:820px; margin:0 auto;
  background:var(--cream-panel);
  border:1px solid var(--gold-line);
  border-radius:var(--radius-card);
  padding:56px 48px 48px;
  text-align:center;
  box-shadow:none;
  animation:rise .7s ease both;
}
@keyframes rise{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
.ticket::before, .ticket::after{
  content:''; position:absolute; left:24px; right:24px; height:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='16'%3E%3Ccircle cx='10' cy='8' r='8' fill='%23F2EBD9'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-size:20px 16px;
}
.ticket::before{top:-8px;}
.ticket::after{bottom:-8px;}
.ticket-inner-border{
  position:absolute; inset:10px; border:1px solid var(--gold-line); border-radius:3px; pointer-events:none;
}
.hero-arabic{
  font-size:44px; line-height:1.9; color:var(--ink); margin:14px 0 22px;
}
@media (min-width:600px){ .hero-arabic{ font-size:56px; } }
.hero-rule{width:120px; height:1px; background:var(--gold-line); margin:0 auto 20px;}
.hero-sub{
  font-size:14.5px; color:var(--ink-soft); margin:0 auto 32px; white-space:nowrap;
}
@media (min-width:600px){ .hero-sub{ font-size:16px; } }
.hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.hero-note{margin-top:22px; font-size:12.5px; color:var(--ink-soft); letter-spacing:.03em;}

/* arch scene */
.arch-scene{
  display:flex; justify-content:center; margin-top:36px; position:relative; z-index:1;
}
.arch-scene svg{width:100%; max-width:420px; height:auto; display:block;}

/* ---------- problem ---------- */
.section{padding:88px 32px;}
.section-head{max-width:640px; margin:0 auto 44px; text-align:center;}
.section-head h2{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:clamp(28px,4vw,38px); margin-bottom:14px;}
.section-head p{color:var(--ink-soft); font-size:16px;}

.problem-body{max-width:720px; margin:0 auto; text-align:center; color:var(--ink-soft); font-size:16.5px; margin-bottom:36px;}
.problem-list{max-width:640px; margin:0 auto; display:grid; gap:16px;}
.problem-list li{
  display:flex; align-items:flex-start; font-size:15.5px; color:var(--ink);
  background:var(--cream-panel); border:1px solid var(--gold-line); border-radius:var(--radius-card);
  padding:16px 20px;
}
.problem-list li .bullet-mark{
  width:18px; height:18px; flex:none; margin-top:3px; margin-right:16px;
}
.problem-list li .bullet-mark svg{display:block; width:100%; height:100%;}

/* ---------- how it works ---------- */
.steps{
  max-width:760px; margin:0 auto; position:relative;
}
.steps-line{
  position:absolute; left:27px; top:14px; bottom:14px; width:1px;
  background:var(--gold-line); opacity:.6;
  transform:scaleY(0); transform-origin:top;
  transition:transform 1.1s ease;
}
.steps.in-view .steps-line{transform:scaleY(1);}
.step{display:flex; gap:24px; padding:20px 0; align-items:flex-start;}
.step-num{
  flex:none; width:56px; height:56px; border-radius:50%;
  border:1.4px solid var(--teal); color:var(--teal); background:var(--cream-panel);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond', serif; font-size:22px; font-weight:700;
  position:relative; z-index:1;
}
.step h3{font-size:17px; font-weight:700; margin-bottom:4px;}
.step p{color:var(--ink-soft); font-size:15px;}
.step-note{text-align:center; margin-top:28px; font-size:18px; color:var(--gold); font-style:italic; font-weight:600;}

/* ---------- differentiation ---------- */
.diff-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; max-width:1040px; margin:0 auto 20px;
}
.diff-card{
  background:var(--cream-panel); border:1px solid var(--gold-line); border-radius:var(--radius-card);
  padding:26px 22px; transition:transform .2s ease, box-shadow .2s ease;
}
.diff-card:hover{transform:translateY(-3px); box-shadow:0 16px 30px -20px rgba(45,43,42,.35);}
.diff-card .rule{width:28px; height:2px; background:var(--teal); margin-bottom:16px;}
.diff-card h3{font-size:16px; font-weight:700; margin-bottom:8px;}
.diff-card p{font-size:14.5px; color:var(--ink-soft);}
.diff-featured{
  max-width:1040px; margin:0 auto 20px;
  background:var(--teal); border-radius:var(--radius-card);
  padding:38px 40px;
}
.diff-featured .rule{width:32px; height:2px; background:#fff; margin-bottom:18px;}
.diff-featured h3{font-family:'Cormorant Garamond', serif; font-size:26px; font-weight:700; color:#fff; margin-bottom:10px;}
.diff-featured p{font-size:19px; font-weight:600; color:#fff; line-height:1.5;}
@media (min-width:900px){ .diff-featured p{white-space:nowrap;} }

/* ---------- pricing ---------- */
.pricing-band{background:var(--cream-band);}
.price-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:24px; max-width:920px; margin:0 auto;}
.price-card{
  background:var(--cream-panel); border:1px solid var(--gold-line); border-radius:var(--radius-card);
  padding:32px 26px; text-align:center; position:relative;
}
.price-card.featured{border-color:var(--teal); box-shadow:0 18px 40px -24px rgba(29,138,122,.4);}
.price-tag{font-family:'Cormorant Garamond', serif; font-size:24px; font-weight:700; margin-bottom:6px;}
.price-desc{font-size:14px; color:var(--ink-soft); margin-bottom:18px;}
.price-soon{
  display:inline-block; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold-line); border-radius:20px; padding:4px 12px;
}
.pricing-foot{text-align:center; margin-top:32px; font-size:14px; color:var(--ink-soft);}

/* ---------- demo ---------- */
.demo-frame{
  max-width:760px; margin:0 auto; aspect-ratio:16/9; height:0; padding-bottom:56.25%; background:var(--ink);
  border-radius:var(--radius-card); border:1px solid var(--gold-line);
  position:relative; overflow:hidden;
}
.demo-frame .play-btn{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.demo-frame .pattern{position:absolute; inset:0;}
.demo-frame .pattern{opacity:.15;}
.play-btn{
  width:64px; height:64px; border-radius:50%; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:22px; position:relative; z-index:1;
  box-shadow:0 10px 30px rgba(29,138,122,.5);
}
.demo-caption{text-align:center; margin-top:18px; color:var(--ink-soft); font-size:13.5px; font-style:italic;}

/* ---------- waitlist ---------- */
.waitlist{
  background:var(--teal); color:#fff; text-align:center; padding:80px 32px;
  position:relative; overflow:hidden;
}
.waitlist .pattern{opacity:.12; filter:invert(1);}
.waitlist-arabic{font-family:'Amiri', serif; direction:rtl; font-size:30px; margin-bottom:10px; position:relative;}
.waitlist h2{font-family:'Cormorant Garamond', serif; font-size:clamp(26px,4vw,34px); margin-bottom:28px; position:relative;}
.waitlist-form{
  display:flex; justify-content:center; gap:10px; max-width:440px; margin:0 auto; flex-wrap:wrap; position:relative;
}
.waitlist-form input{
  flex:1; min-width:220px; padding:13px 16px; border-radius:3px; border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.08); color:#fff; font-family:'Inter',sans-serif; font-size:14px;
}
.waitlist-form input::placeholder{color:rgba(255,255,255,.65);}
.waitlist-form .btn-primary{background:var(--ink); }
.waitlist-form .btn-primary:hover{background:#000;}
.waitlist-message{font-family:'Inter',sans-serif; font-size:15px; margin-top:18px; position:relative;}

/* ---------- footer ---------- */
footer{padding:40px 32px; border-top:1px solid var(--gold-line);}
.foot-row{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px;
  max-width:var(--wrap); margin:0 auto;
}
.foot-links{display:flex; font-size:13.5px; color:var(--ink-soft);}
.foot-links a{margin-right:26px;}
.foot-links a:last-child{margin-right:0;}
.foot-copy{font-size:12.5px; color:var(--ink-soft);}

@media (max-width:720px){
  nav{padding:14px 20px;}
  .nav-links{display:none;}
  .hero{padding:52px 16px 24px;}
  .ticket{padding:40px 22px 34px;}
  .section{padding:64px 20px;}
  .steps-line{left:23px;}
  .step-num{width:46px; height:46px; font-size:18px;}
  .foot-row{flex-direction:column; text-align:center;}
  .diff-grid{grid-template-columns:1fr;}
  .diff-featured{padding:28px 24px;}
  .diff-featured p{font-size:16px;}
  .hero-sub{white-space:normal; font-size:15px; max-width:420px; margin-left:auto; margin-right:auto;}
}
@media (min-width:721px) and (max-width:980px){
  .diff-grid{grid-template-columns:repeat(2,1fr);}
}