/* ================================================================
   ORUKKABIBLE — style.css
   Royal navy + warm gold · 4 Bible versions · Morning & night
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

/* ── Variables ─────────────────────────────────────────── */
:root {
  --w:       #FFFFFF;
  --b900:    #060D1E;
  --b700:    #0D1A45;
  --b600:    #1A3B6B;
  --b500:    #2655A0;
  --b200:    #9AB5D8;
  --b100:    #D0DFEE;
  --b50:     #EDF3F9;
  --b20:     #F4F8FC;
  --gold:    #C89840;
  --gold-d:  #A07A2A;
  --gold-l:  #E8C870;
  --gold-bg: #FDF8EC;
  --night:   #060B18;
  --night2:  #0B1428;
  --text:    #080D1E;
  --text2:   #1A2B50;
  --muted:   #486080;
  --dim:     #7A95B0;
  --border:  rgba(26,59,107,0.12);
  --border2: rgba(26,59,107,0.24);
  --sh-sm:   0 2px 12px rgba(26,59,107,0.07);
  --sh:      0 4px 28px rgba(26,59,107,0.10);
  --sh-lg:   0 12px 56px rgba(26,59,107,0.14);
  --gold-sh: 0 4px 20px rgba(200,152,64,0.28);
  --ff-h:    'Syne', sans-serif;
  --ff-b:    'DM Sans', sans-serif;
  --max:     1160px;
  --ease:    cubic-bezier(0.16,1,0.3,1);
  --r:       10px;
  --r-lg:    18px;
  --r-xl:    28px;
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--ff-b); background:var(--w); color:var(--text); line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img,svg { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
section { padding:7rem 0; }

/* ── Layout ────────────────────────────────────────────── */
.container { max-width:var(--max); margin:0 auto; padding:0 2rem; }

/* ── Typography ────────────────────────────────────────── */
.eyebrow {
  font-family:var(--ff-h); font-size:0.68rem; font-weight:700;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--b600);
  display:flex; align-items:center; gap:0.75rem; margin-bottom:1rem;
}
.eyebrow::before { content:''; display:block; width:24px; height:1px; background:var(--gold); flex-shrink:0; }
.eyebrow--c { justify-content:center; }
.eyebrow--c::before { background:rgba(200,152,64,0.55); }
.eyebrow--w { color:rgba(255,255,255,0.55); }
.eyebrow--w::before { background:rgba(200,152,64,0.55); }
h1,h2,h3,h4 { font-family:var(--ff-h); letter-spacing:-0.02em; color:var(--text); }
h1 { font-size:clamp(2.6rem,6vw,5.2rem); font-weight:800; line-height:0.95; letter-spacing:-0.03em; }
h2 { font-size:clamp(1.9rem,3.8vw,3.1rem); font-weight:800; line-height:1.08; }
h3 { font-size:1.1rem; font-weight:700; margin-bottom:0.5rem; }
.text-gold  { color:var(--gold); }
.text-navy  { color:var(--b600); }
.text-white { color:#fff; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--ff-h); font-weight:700; font-size:0.8rem;
  letter-spacing:0.1em; text-transform:uppercase;
  padding:0.9rem 2rem; border-radius:var(--r);
  cursor:pointer; transition:all 0.3s var(--ease); border:none; line-height:1;
}
.btn-gold  { background:var(--gold); color:var(--b900); box-shadow:var(--gold-sh); }
.btn-gold:hover  { background:var(--gold-d); box-shadow:0 8px 32px rgba(200,152,64,0.4); transform:translateY(-1px); }
.btn-navy  { background:var(--b600); color:#fff; box-shadow:var(--sh); }
.btn-navy:hover  { background:var(--b700); box-shadow:var(--sh-lg); transform:translateY(-1px); }
.btn-ghost { background:transparent; color:var(--b600); border:1.5px solid var(--border2); }
.btn-ghost:hover { background:var(--b50); border-color:var(--b600); }
.btn-ghost-w { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.28); }
.btn-ghost-w:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.5); }
.btn-lg { font-size:0.88rem; padding:1.05rem 2.4rem; }
.btn-xl { font-size:1rem; padding:1.2rem 3rem; border-radius:var(--r-lg); }

/* ── Navigation ─────────────────────────────────────────── */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:0.9rem 0;
  transition:box-shadow 0.3s var(--ease), padding 0.3s;
}
#nav.scrolled { box-shadow:var(--sh-sm); padding:0.72rem 0; }
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.nav-logo { display:flex; align-items:center; gap:0.6rem; flex-shrink:0; }
.nav-logo-mark { width:34px; height:34px; background:var(--b600); border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.nav-logo-mark svg { width:18px; height:18px; }
.nav-logo-text { font-family:var(--ff-h); font-weight:800; font-size:1rem; color:var(--text); }
.nav-logo-text span { color:var(--gold); }
.nav-links { display:flex; align-items:center; gap:2rem; }
.nav-links a { font-family:var(--ff-h); font-size:0.7rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); transition:color 0.2s; }
.nav-links a:hover { color:var(--b600); }
.nav-links--open { display:flex !important; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:rgba(255,255,255,0.99); padding:1.5rem 2rem; gap:1.25rem; border-bottom:1px solid var(--border); box-shadow:0 8px 24px rgba(6,13,30,0.1); }
.nav-right { display:flex; align-items:center; gap:0.75rem; flex-shrink:0; }
.nav-price { font-family:var(--ff-h); font-size:0.72rem; font-weight:700; color:var(--b600); letter-spacing:0.04em; }
.nav-hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.nav-hamburger span { width:22px; height:1.5px; background:var(--text); display:block; }

/* ── Hero ───────────────────────────────────────────────── */
#hero {
  display:grid; grid-template-columns:1fr 1fr;
  gap:4rem; align-items:center;
  min-height:100vh; padding-top:8rem; padding-bottom:5rem;
  position:relative; overflow:hidden;
}
#hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect x='36' y='8' width='8' height='64' rx='3' fill='%231A3B6B' fill-opacity='0.035'/%3E%3Crect x='18' y='32' width='44' height='8' rx='3' fill='%231A3B6B' fill-opacity='0.035'/%3E%3C/svg%3E");
}
.hero-text { position:relative; z-index:1; }
.hero-scripture { font-family:var(--ff-h); font-size:0.75rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin-bottom:1.75rem; display:flex; align-items:center; gap:0.75rem; opacity:0.82; }
.hero-scripture::before { content:'✦'; font-size:0.85rem; }
.hero-h1 { margin-bottom:1.4rem; }
.hero-h1 .accent { color:var(--b600); display:block; }
.hero-lead { font-size:1.05rem; color:var(--muted); font-weight:300; line-height:1.82; max-width:490px; margin-bottom:1.75rem; }
.hero-price { font-family:var(--ff-h); font-size:1.4rem; font-weight:800; color:var(--text); margin-bottom:1.75rem; }
.hero-price span { font-size:0.75rem; font-weight:400; color:var(--muted); letter-spacing:0.06em; text-transform:uppercase; margin-left:0.35rem; }
.hero-actions { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:2.25rem; }
.hero-trust { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; padding-top:1.5rem; border-top:1px solid var(--border); }
.trust-pill { font-family:var(--ff-h); font-size:0.66rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:0.4rem; }
.trust-pill::before { content:'✓'; color:var(--b600); font-size:0.75rem; }
.hero-visual { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; }
.hero-text-bg { position:absolute; font-family:var(--ff-h); font-size:8rem; font-weight:800; color:var(--b600); opacity:0.035; line-height:1; user-select:none; pointer-events:none; white-space:nowrap; letter-spacing:-0.04em; }
.bracelet-wrap { position:relative; width:100%; max-width:560px; }
.bracelet-badge { position:absolute; bottom:-12px; right:10px; background:var(--b600); color:#fff; border-radius:20px; padding:0.4rem 1rem; font-family:var(--ff-h); font-size:0.62rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; box-shadow:var(--sh); }
.eq-bar { transform-box:fill-box; transform-origin:bottom; animation:eqPulse 1.4s ease-in-out infinite; }
.eq-bar:nth-child(2){animation-delay:0.18s} .eq-bar:nth-child(3){animation-delay:0.36s}
.eq-bar:nth-child(4){animation-delay:0.12s;animation-duration:1.6s} .eq-bar:nth-child(5){animation-delay:0.28s;animation-duration:1.2s} .eq-bar:nth-child(6){animation-delay:0.44s}
@keyframes eqPulse{0%,100%{transform:scaleY(1)}50%{transform:scaleY(0.3)}}
@media(prefers-reduced-motion:reduce){.eq-bar{animation:none}}

/* ── Ticker ─────────────────────────────────────────────── */
.strip { background:var(--b600); overflow:hidden; padding:0.78rem 0; }
.strip-inner { display:flex; width:max-content; animation:stripRun 34s linear infinite; }
@keyframes stripRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.si { font-family:var(--ff-h); font-size:0.67rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; white-space:nowrap; padding:0 1.75rem; color:rgba(255,255,255,0.7); }
.si.gold { color:var(--gold-l); }
.si.dot  { color:rgba(255,255,255,0.25); padding:0 0.5rem; }

/* ── Context strip ──────────────────────────────────────── */
.context-strip { background:var(--b20); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:3.5rem 0; }
.context-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; }
.context-item { padding:0 2.5rem; text-align:center; border-right:1px solid var(--border); }
.context-item:last-child { border-right:none; }
.context-icon { font-size:1.8rem; margin-bottom:0.5rem; }
.context-label { font-family:var(--ff-h); font-size:0.88rem; font-weight:700; color:var(--text); margin-bottom:0.25rem; }
.context-desc { font-size:0.82rem; color:var(--muted); font-weight:300; }

/* ── How it works ────────────────────────────────────────── */
#how { background:var(--w); }
.how-header { text-align:center; max-width:600px; margin:0 auto 4.5rem; }
.how-header p { font-size:1rem; color:var(--muted); font-weight:300; line-height:1.78; margin-top:1rem; }
.steps { display:grid; grid-template-columns:1fr 1fr 1fr; gap:2px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.step { background:var(--w); padding:2.5rem 2.25rem; transition:background 0.3s; }
.step:hover { background:var(--b20); }
.step-num { font-family:var(--ff-h); font-size:0.62rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); margin-bottom:1.25rem; display:flex; align-items:center; gap:0.6rem; }
.step-num::before { content:''; display:block; width:18px; height:1px; background:var(--gold); }
.step-icon-box { width:52px; height:52px; background:var(--b50); border:1px solid var(--border); border-radius:var(--r); display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; }
.step-icon-box svg { width:24px; height:24px; }
.step p { font-size:0.88rem; color:var(--muted); font-weight:300; line-height:1.75; }

/* ── 4 Bible versions ────────────────────────────────────── */
#versions { background:var(--b20); }
.versions-header { text-align:center; max-width:620px; margin:0 auto 4rem; }
.versions-header p { font-size:1rem; color:var(--muted); font-weight:300; margin-top:1rem; }
.versions-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.version-card { background:var(--w); border:1px solid var(--border); border-radius:var(--r-lg); padding:2.25rem 2rem; position:relative; overflow:hidden; transition:all 0.3s var(--ease); box-shadow:var(--sh-sm); }
.version-card:hover { transform:translateY(-4px); box-shadow:var(--sh); border-color:var(--b200); }
.version-card.featured { border-color:var(--gold); border-width:1.5px; }
.version-card.featured:hover { box-shadow:0 8px 32px rgba(200,152,64,0.2); }
.version-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--border); transition:background 0.3s; }
.version-card.featured::before { background:var(--gold); }
.version-card:not(.featured):hover::before { background:var(--b600); }
.version-badge { display:inline-block; font-family:var(--ff-h); font-size:0.58rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; background:var(--b50); border:1px solid var(--border); color:var(--b600); border-radius:20px; padding:0.2rem 0.7rem; margin-bottom:1.1rem; }
.version-card.featured .version-badge { background:var(--gold-bg); border-color:rgba(200,152,64,0.3); color:var(--gold-d); }
.version-abbr { font-family:var(--ff-h); font-size:2.4rem; font-weight:800; color:var(--b600); line-height:1; margin-bottom:0.35rem; letter-spacing:-0.03em; }
.version-card.featured .version-abbr { color:var(--gold); }
.version-name { font-family:var(--ff-h); font-size:0.72rem; font-weight:700; color:var(--muted); margin-bottom:0.75rem; letter-spacing:0.03em; }
.version-year { font-family:var(--ff-h); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--dim); margin-bottom:0.85rem; }
.version-desc { font-size:0.82rem; color:var(--muted); font-weight:300; line-height:1.7; }

/* ── Features ────────────────────────────────────────────── */
#features { background:var(--w); }
.section-header { margin-bottom:4rem; }
.section-header p { font-size:1rem; color:var(--muted); font-weight:300; max-width:500px; margin-top:1rem; }
.section-header--c { text-align:center; }
.section-header--c p { margin-left:auto; margin-right:auto; }
.features-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.feat { background:var(--b20); border:1px solid var(--border); border-radius:var(--r-lg); padding:2rem 1.75rem; transition:all 0.3s var(--ease); box-shadow:var(--sh-sm); }
.feat:hover { background:var(--w); transform:translateY(-3px); box-shadow:var(--sh); border-color:var(--b200); }
.feat-icon { width:46px; height:46px; background:var(--w); border:1px solid var(--border); border-radius:var(--r); display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; }
.feat-icon svg { width:22px; height:22px; }
.feat p { font-size:0.82rem; color:var(--muted); font-weight:300; line-height:1.7; }

/* ── Morning & Night section ─────────────────────────────── */
#devotion {
  background:var(--night);
  position:relative; overflow:hidden; padding:8rem 0;
}
#devotion::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 7% 18%, rgba(255,255,255,0.62) 0%,transparent 100%),
    radial-gradient(1px 1px at 19% 74%, rgba(255,255,255,0.42) 0%,transparent 100%),
    radial-gradient(2px 2px at 33% 11%, rgba(255,255,255,0.5) 0%,transparent 100%),
    radial-gradient(1px 1px at 46% 58%, rgba(255,255,255,0.38) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 59% 26%, rgba(255,255,255,0.58) 0%,transparent 100%),
    radial-gradient(1px 1px at 69% 84%, rgba(255,255,255,0.34) 0%,transparent 100%),
    radial-gradient(2px 2px at 79% 7%, rgba(255,255,255,0.52) 0%,transparent 100%),
    radial-gradient(1px 1px at 89% 50%, rgba(255,255,255,0.38) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 23% 46%, rgba(255,255,255,0.44) 0%,transparent 100%),
    radial-gradient(1px 1px at 53% 90%, rgba(255,255,255,0.48) 0%,transparent 100%),
    radial-gradient(2px 2px at 76% 24%, rgba(255,255,255,0.4) 0%,transparent 100%),
    radial-gradient(1px 1px at 39% 36%, rgba(255,255,255,0.34) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 93% 66%, rgba(255,255,255,0.44) 0%,transparent 100%),
    radial-gradient(1px 1px at 6% 56%, rgba(255,255,255,0.48) 0%,transparent 100%),
    radial-gradient(1px 1px at 63% 5%, rgba(255,255,255,0.38) 0%,transparent 100%);
}
#devotion::after {
  content:''; position:absolute; bottom:-10%; left:20%; right:20%;
  height:80%; pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%, rgba(200,152,64,0.1), transparent 60%);
}
.devotion-grid { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; position:relative; z-index:1; }
.devotion-text h2 { color:#fff; margin-bottom:1.25rem; }
.devotion-text h2 .accent { color:var(--gold); display:block; }
.devotion-lead { font-size:1rem; color:rgba(255,255,255,0.6); font-weight:300; line-height:1.85; max-width:460px; margin-bottom:2rem; }
.devotion-scripture {
  background:rgba(200,152,64,0.09); border:1px solid rgba(200,152,64,0.2);
  border-left:3px solid var(--gold); border-radius:0 var(--r) var(--r) 0;
  padding:1.1rem 1.4rem; margin-bottom:2.25rem;
}
.devotion-scripture p { font-size:0.88rem; color:rgba(255,255,255,0.65); font-weight:300; line-height:1.78; font-style:italic; }
.devotion-scripture cite { font-size:0.7rem; color:var(--gold); font-family:var(--ff-h); letter-spacing:0.08em; text-transform:uppercase; font-style:normal; margin-top:0.4rem; display:block; }
.devotion-feats { display:flex; flex-direction:column; gap:0.85rem; margin-bottom:2.25rem; }
.dev-feat { display:flex; align-items:flex-start; gap:0.9rem; }
.dev-feat-icon { width:32px; height:32px; background:rgba(26,59,107,0.4); border:1px solid rgba(26,59,107,0.6); border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.dev-feat-icon svg { width:16px; height:16px; }
.dev-feat-title { font-family:var(--ff-h); font-size:0.82rem; font-weight:700; color:#fff; margin-bottom:0.18rem; }
.dev-feat-desc { font-size:0.78rem; color:rgba(255,255,255,0.5); font-weight:300; line-height:1.55; }
/* Cross illustration */
.devotion-visual { display:flex; align-items:center; justify-content:center; }
.cross-wrap { position:relative; width:280px; height:280px; }
.cross-glow { position:absolute; inset:-30px; background:radial-gradient(circle at 50% 50%, rgba(200,152,64,0.14), transparent 65%); border-radius:50%; animation:crossGlow 3.5s ease-in-out infinite; }
@keyframes crossGlow{0%,100%{opacity:0.7}50%{opacity:1}}
.cross-wrap svg { width:100%; height:100%; }

/* ── Verse band ──────────────────────────────────────────── */
.verse-band { background:var(--b900); padding:2.75rem 0; text-align:center; position:relative; overflow:hidden; }
.verse-band::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect x='36' y='8' width='8' height='64' rx='3' fill='%231A3B6B' fill-opacity='0.22'/%3E%3Crect x='18' y='32' width='44' height='8' rx='3' fill='%231A3B6B' fill-opacity='0.22'/%3E%3C/svg%3E");
}
.verse-text { font-size:clamp(1rem,2.5vw,1.6rem); color:var(--gold); font-style:italic; font-family:var(--ff-b); font-weight:300; margin-bottom:0.6rem; position:relative; }
.verse-ref { font-family:var(--ff-h); font-size:0.65rem; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.25); position:relative; }

/* ── Use cases ───────────────────────────────────────────── */
#usecases { background:var(--b20); }
.uc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.uc { background:var(--w); border:1px solid var(--border); border-radius:var(--r-lg); padding:2rem 1.75rem; transition:all 0.3s var(--ease); box-shadow:var(--sh-sm); }
.uc:hover { box-shadow:var(--sh); transform:translateY(-3px); border-color:var(--b200); }
.uc.featured { background:var(--night); border-color:rgba(200,152,64,0.3); }
.uc.featured:hover { border-color:var(--gold); }
.uc.featured h3 { color:#fff; }
.uc.featured p { color:rgba(255,255,255,0.52); }
.uc.featured .uc-tag { background:rgba(200,152,64,0.12); color:var(--gold); border-color:rgba(200,152,64,0.3); }
.uc-icon { font-size:1.8rem; margin-bottom:1rem; display:block; }
.uc p { font-size:0.84rem; color:var(--muted); font-weight:300; line-height:1.72; }
.uc-tag { display:inline-block; margin-top:1rem; font-family:var(--ff-h); font-size:0.58rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--b600); background:var(--b50); border:1px solid var(--border); border-radius:20px; padding:0.2rem 0.7rem; }

/* ── Tech specs ──────────────────────────────────────────── */
#specs { background:var(--w); }
.specs-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }
.specs-table-wrap { margin-top:1.5rem; }
.specs-table-wrap table { width:100%; border-collapse:collapse; }
.specs-table-wrap tr { border-bottom:1px solid var(--border); }
.specs-table-wrap td { padding:0.88rem 0; vertical-align:top; font-size:0.9rem; }
.specs-table-wrap td:first-child { font-family:var(--ff-h); font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); width:42%; }
.specs-table-wrap td:last-child { color:var(--text2); }
.spec-chip { display:inline-block; background:var(--b50); border:1px solid var(--border); border-radius:4px; padding:0.16rem 0.55rem; font-family:var(--ff-h); font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--b600); margin-left:0.45rem; }
.specs-card { background:var(--b900); border-radius:var(--r-xl); padding:3rem 2.5rem; position:relative; overflow:hidden; }
.specs-card::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect x='36' y='8' width='8' height='64' rx='3' fill='%231A3B6B' fill-opacity='0.25'/%3E%3Crect x='18' y='32' width='44' height='8' rx='3' fill='%231A3B6B' fill-opacity='0.25'/%3E%3C/svg%3E");
}
.sc-content { position:relative; }
.sc-verse { font-size:0.78rem; color:var(--gold); font-style:italic; text-align:center; margin-bottom:1.5rem; opacity:0.8; line-height:1.65; }
.sc-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.85rem; margin-bottom:2rem; }
.sc-stat { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.07); border-radius:var(--r); padding:1.1rem; text-align:center; }
.sc-num { font-family:var(--ff-h); font-size:1.9rem; font-weight:800; color:var(--gold); line-height:1; margin-bottom:0.22rem; }
.sc-label { font-family:var(--ff-h); font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.35); }
.sc-price { text-align:center; padding:1.25rem 0 0; border-top:1px solid rgba(255,255,255,0.07); margin-top:0.5rem; }
.sc-price-big { font-family:var(--ff-h); font-size:3rem; font-weight:800; color:#fff; line-height:1; }
.sc-price-sub { font-size:0.72rem; color:rgba(255,255,255,0.35); margin-bottom:1.25rem; text-transform:uppercase; letter-spacing:0.1em; font-family:var(--ff-h); }

/* ── App section ─────────────────────────────────────────── */
#app { background:var(--b20); }
.app-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.app-text p { font-size:1rem; color:var(--muted); font-weight:300; line-height:1.82; margin-top:1rem; }
.app-badges { display:flex; gap:0.85rem; flex-wrap:wrap; margin-top:2rem; }
.app-badge { display:flex; align-items:center; gap:0.75rem; background:var(--b900); color:#fff; border-radius:var(--r); padding:0.65rem 1.2rem; transition:background 0.2s; }
.app-badge:hover { background:var(--b700); }
.app-badge-icon { font-size:1.35rem; }
.app-badge-sub  { font-size:0.6rem; color:rgba(255,255,255,0.55); display:block; }
.app-badge-name { font-family:var(--ff-h); font-size:0.8rem; font-weight:700; }
.app-phone-wrap { display:flex; justify-content:center; }
.app-phone { width:210px; background:var(--night); border-radius:32px; border:2px solid rgba(26,59,107,0.35); overflow:hidden; box-shadow:0 24px 60px rgba(26,59,107,0.18); }
.ap-nb { height:20px; background:var(--night); display:flex; align-items:center; justify-content:center; }
.ap-ntch { width:54px; height:4px; background:#1A2030; border-radius:2px; }
.ap-screen { background:#060B18; padding:12px; display:flex; flex-direction:column; min-height:380px; }
.ap-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.ap-logo { font-family:var(--ff-h); font-size:13px; font-weight:700; color:#E8EEF8; }
.ap-logo span { color:var(--gold); }
.ap-bell { width:26px; height:26px; background:#0D1530; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; }
.ap-now { background:#0D1530; border-radius:10px; padding:10px; margin-bottom:8px; border:1px solid rgba(200,152,64,0.14); }
.ap-lbl { font-size:8px; color:#486080; text-transform:uppercase; letter-spacing:0.1em; font-family:var(--ff-h); margin-bottom:3px; }
.ap-ver { font-size:9px; color:var(--gold); font-family:var(--ff-h); font-weight:700; letter-spacing:0.1em; margin-bottom:2px; }
.ap-name { font-size:10px; color:#E8EEF8; font-weight:500; }
.ap-prog { background:#0D1530; border-radius:3px; height:2.5px; margin:7px 0 3px; }
.ap-prog-fill { background:var(--gold); width:28%; height:2.5px; border-radius:3px; }
.ap-ctls { display:flex; justify-content:space-around; align-items:center; margin-top:6px; }
.ap-btn { width:28px; height:28px; background:#0D1530; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; color:#E8EEF8; }
.ap-btn.p { background:var(--b600); font-size:12px; }
.ap-list { margin-top:8px; }
.ap-list-hd { font-size:8px; color:#486080; text-transform:uppercase; letter-spacing:0.1em; font-family:var(--ff-h); margin-bottom:6px; }
.ap-row { display:flex; align-items:center; justify-content:space-between; padding:5px 0; border-bottom:1px solid #0D1530; }
.ap-book { color:#E8EEF8; font-size:9px; font-weight:500; }
.ap-ch { color:#486080; font-size:8px; }
.ap-ver-tag { background:rgba(200,152,64,0.15); color:var(--gold); font-family:var(--ff-h); font-size:7px; letter-spacing:0.08em; padding:1px 5px; border-radius:3px; text-transform:uppercase; }

/* ── Guarantee strip ─────────────────────────────────────── */
.guarantee-strip { background:var(--b50); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:2.5rem 0; }
.guarantee-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.guarantee-item { padding:0 2rem; text-align:center; border-right:1px solid var(--border); }
.guarantee-item:last-child { border-right:none; }
.guarantee-icon { font-size:1.5rem; margin-bottom:0.5rem; }
.guarantee-title { font-family:var(--ff-h); font-size:0.8rem; font-weight:700; color:var(--text); margin-bottom:0.22rem; }
.guarantee-desc { font-size:0.75rem; color:var(--muted); font-weight:300; }

/* ── FAQ ─────────────────────────────────────────────────── */
#faq { background:var(--b20); }
.faq-cols { display:grid; grid-template-columns:1fr 1fr; gap:0 3.5rem; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-btn { width:100%; background:none; border:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:1.1rem 0; text-align:left; gap:1rem; }
.faq-q { font-family:var(--ff-h); font-size:0.88rem; font-weight:700; color:var(--text); line-height:1.4; flex:1; }
.faq-ic { width:22px; height:22px; border-radius:50%; border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--b600); flex-shrink:0; transition:all 0.3s var(--ease); font-weight:700; line-height:1; }
.faq-item.open .faq-ic { background:var(--b600); color:#fff; border-color:var(--b600); transform:rotate(45deg); }
.faq-ans { max-height:0; overflow:hidden; transition:max-height 0.4s var(--ease), padding 0.3s; }
.faq-item.open .faq-ans { max-height:300px; }
.faq-ans-inner { padding:0 0 1.25rem; font-size:0.87rem; color:var(--muted); font-weight:300; line-height:1.82; }

/* ── Order CTA ───────────────────────────────────────────── */
#order { background:var(--b900); padding:9rem 0; position:relative; overflow:hidden; text-align:center; }
#order::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect x='36' y='8' width='8' height='64' rx='3' fill='%231A3B6B' fill-opacity='0.28'/%3E%3Crect x='18' y='32' width='44' height='8' rx='3' fill='%231A3B6B' fill-opacity='0.28'/%3E%3C/svg%3E");
}
.order-inner { position:relative; }
.order-icon { font-size:2.8rem; margin-bottom:1.5rem; opacity:0.85; }
.order-scripture { font-size:0.8rem; color:var(--gold); font-style:italic; margin-bottom:2.75rem; font-family:var(--ff-b); font-weight:300; opacity:0.8; }
.order-inner h2 { color:#fff; font-size:clamp(1.9rem,4.5vw,3.5rem); margin-bottom:1rem; }
.order-inner > p { font-size:1rem; color:rgba(255,255,255,0.5); font-weight:300; max-width:480px; margin:0 auto 0.75rem; line-height:1.82; }
.order-price { font-family:var(--ff-h); font-size:1.6rem; font-weight:800; color:var(--gold); margin-bottom:2.25rem; }
.order-note { font-family:var(--ff-h); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.22); margin-top:1.1rem; }

/* ── Footer ──────────────────────────────────────────────── */
#footer { background:var(--night2); border-top:1px solid rgba(255,255,255,0.05); padding:4rem 0 2rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3.5rem; }
.f-logo { display:flex; align-items:center; gap:0.6rem; margin-bottom:1rem; }
.f-logo-mark { width:32px; height:32px; background:var(--b600); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.f-logo-name { font-family:var(--ff-h); font-weight:800; font-size:0.95rem; color:#fff; }
.f-logo-name span { color:var(--gold); }
.f-tag { font-size:0.82rem; color:rgba(255,255,255,0.32); line-height:1.7; max-width:220px; }
.f-verse { font-size:0.78rem; color:var(--gold); font-style:italic; opacity:0.4; margin-top:1.25rem; line-height:1.6; }
.f-col-title { font-family:var(--ff-h); font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.35); margin-bottom:1.1rem; }
.f-links { display:flex; flex-direction:column; gap:0.65rem; }
.f-links a { font-size:0.83rem; color:rgba(255,255,255,0.4); transition:color 0.2s; }
.f-links a:hover { color:var(--gold); }
.f-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:1.75rem; border-top:1px solid rgba(255,255,255,0.05); flex-wrap:wrap; gap:1rem; }
.f-copy { font-size:0.7rem; color:rgba(255,255,255,0.2); font-family:var(--ff-h); letter-spacing:0.05em; }
.f-legal { display:flex; gap:1.4rem; }
.f-legal a { font-size:0.7rem; color:rgba(255,255,255,0.2); transition:color 0.2s; font-family:var(--ff-h); }
.f-legal a:hover { color:var(--gold); }

/* ── Reveal ──────────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(26px); transition:opacity 0.85s var(--ease),transform 0.85s var(--ease); }
.reveal.revealed { opacity:1; transform:translateY(0); }
.rd1{transition-delay:0.1s} .rd2{transition-delay:0.2s} .rd3{transition-delay:0.3s} .rd4{transition-delay:0.4s}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:1080px) {
  #hero { grid-template-columns:1fr; gap:3rem; min-height:auto; padding-top:7rem; }
  .hero-visual { order:-1; }
  .bracelet-wrap { max-width:440px; margin:0 auto; }
  .context-grid { grid-template-columns:1fr; }
  .context-item { border-right:none; border-bottom:1px solid var(--border); padding:1.5rem 0; }
  .context-item:last-child { border-bottom:none; }
  .steps { grid-template-columns:1fr; }
  .step:not(:last-child) { border-bottom:1px solid var(--border); }
  .versions-grid { grid-template-columns:1fr 1fr; }
  .features-grid { grid-template-columns:1fr 1fr; }
  .devotion-grid { grid-template-columns:1fr; gap:4rem; }
  .devotion-visual { order:-1; }
  .uc-grid { grid-template-columns:1fr 1fr; }
  .specs-grid { grid-template-columns:1fr; gap:3rem; }
  .app-grid { grid-template-columns:1fr; gap:3rem; }
  .app-phone-wrap { order:-1; }
  .guarantee-grid { grid-template-columns:1fr 1fr; gap:1.5rem; }
  .guarantee-item { border-right:none; }
  .faq-cols { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2.5rem; }
}
@media(max-width:768px) {
  section { padding:5rem 0; }
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .nav-price { display:none; }
  .versions-grid { grid-template-columns:1fr 1fr; }
  .features-grid { grid-template-columns:1fr 1fr; }
  .uc-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .f-bottom { flex-direction:column; text-align:center; }
}
@media(max-width:480px) {
  .container { padding:0 1.25rem; }
  h1 { font-size:2.5rem; }
  .hero-actions { flex-direction:column; align-items:flex-start; }
  .versions-grid { grid-template-columns:1fr; }
  .features-grid { grid-template-columns:1fr; }
  .guarantee-grid { grid-template-columns:1fr; }
}