:root {
  /* ── Palette ── */
  --rust:   #be5103;  /* burnt sienna — primary */
  --amber:  #ffa800;  /* golden amber — accent */
  --rust-d: #8c3a00;  /* deep rust */
  --sand:   #c8a97a;  /* warm sand */
  --sage:   #6b8f71;  /* muted sage */
  --slate:  #7b96b2;  /* cool slate blue */
  --cream:  #f0e6d8;  /* warm off-white text */
  --ink:    #150a02;  /* near-black bg */
  --f-brand:'DM Mono',monospace;
  --f-head:'Inconsolata',monospace;
  --f-body:'Fira Mono',monospace;
}
/* ── INTRO SPLASH ── */
#intro-splash {
  position:fixed;inset:0;z-index:100000;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  background:#150a02;
  transition:opacity .85s ease,transform .85s ease;
  cursor:none;
}
#intro-splash.dismissed {
  opacity:0;
  transform:scale(1.04);
  pointer-events:none;
}
#vanta-bg {
  position:absolute;inset:0;z-index:0;
}
.intro-content {
  position:relative;z-index:1;
  text-align:left;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding-left:8vw;
  max-width:900px;
  width:100%;
}
.intro-logo-mark {
  font-family:var(--f-brand);font-size:clamp(42px,7vw,82px);
  font-weight:300;letter-spacing:-0.04em;line-height:1;
  margin-bottom:18px;
}
.lm-mono { color:rgba(240,228,210,.95); }
.lm-spatial { color:var(--amber); }
.intro-tagline {
  font-family:var(--f-head);font-size:clamp(22px,3.2vw,42px);
  font-weight:300;letter-spacing:.02em;
  color:rgba(240,228,210,.72);
  margin-bottom:28px;
}
.intro-tagline .ikey {
  font-style:normal;
  color:var(--amber);
}
.intro-mottos {
  display:flex;flex-direction:column;gap:10px;
  align-items:flex-start;
}
.intro-motto-line {
  font-family:var(--f-head);font-size:clamp(18px,2vw,24px);
  font-weight:400;letter-spacing:.04em;
  color:rgba(240,210,170,.40);
}
.mkey-1,.mkey-2,.mkey-3 {
  font-weight:600;
  color:rgba(240,228,210,.80);
}
.mkey-1 { color:var(--rust); }
.mkey-2 { color:var(--amber); }
.mkey-3 { color:var(--sand); }

/* Staggered fade-in */
.intro-logo-mark { opacity:0;animation:splashFadeUp .8s .2s ease forwards; }
.intro-tagline { opacity:0;animation:splashFadeUp .8s .5s ease forwards; }
.intro-mottos .intro-motto-line:nth-child(1) { opacity:0;animation:splashFadeUp .6s .8s ease forwards; }
.intro-mottos .intro-motto-line:nth-child(2) { opacity:0;animation:splashFadeUp .6s 1s ease forwards; }
.intro-mottos .intro-motto-line:nth-child(3) { opacity:0;animation:splashFadeUp .6s 1.2s ease forwards; }
.intro-bottom { opacity:0;animation:splashFadeUp .6s 1.5s ease forwards; }

@keyframes splashFadeUp {
  from { opacity:0;transform:translateY(16px); }
  to { opacity:1;transform:translateY(0); }
}

.intro-bottom {
  position:absolute;bottom:48px;left:0;right:0;
  z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.intro-enter-btn {
  font-family:var(--f-body);font-size:10px;letter-spacing:.25em;
  text-transform:uppercase;
  padding:14px 42px;
  background:linear-gradient(135deg,var(--rust),var(--rust-d));
  color:rgba(240,228,210,.95);
  border:1px solid rgba(190,81,3,.40);
  border-radius:40px;
  cursor:pointer;
  box-shadow:0 8px 32px rgba(140,58,0,.50),inset 0 1px 0 rgba(255,200,120,.18);
  transition:all .25s;
  display:inline-flex;align-items:center;gap:8px;
}
.intro-enter-btn:hover {
  filter:brightness(1.15);
  transform:translateY(-3px);
  box-shadow:0 12px 40px rgba(140,58,0,.65),inset 0 1px 0 rgba(255,200,120,.22);
}
.intro-enter-arrow {
  font-size:14px;
  animation:arrowBounce 1.8s ease-in-out infinite;
}
@keyframes arrowBounce {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(4px); }
}
.intro-scroll-hint {
  font-family:var(--f-body);font-size:9px;letter-spacing:.15em;
  color:rgba(240,200,150,.30);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.intro-scroll-line {
  width:1px;height:28px;
  background:linear-gradient(to bottom,rgba(190,81,3,.50),transparent);
  animation:scrollLinePulse 2s ease-in-out infinite;
}
@keyframes scrollLinePulse {
  0%,100% { opacity:.3;height:28px; }
  50% { opacity:.7;height:36px; }
}
/* Hide nav while splash is visible — cursor stays visible */
#intro-splash ~ #nav { opacity:0;pointer-events:none;transition:opacity .6s .3s; }
#intro-splash.dismissed ~ #nav { opacity:1;pointer-events:auto; }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:#301500;color:rgba(240,230,216,.95);font-family:var(--f-body);overflow-x:hidden;cursor:none;text-shadow:0 1px 4px rgba(0,0,0,.45);}

/* ── CURSOR ── */
.cur{width:7px;height:7px;background:var(--amber);border-radius:50%;position:fixed;z-index:100001;pointer-events:none;transform:translate(-50%,-50%);transition:width .18s,height .18s;mix-blend-mode:screen;}
.cur-r{width:36px;height:36px;border:1.5px solid rgba(190,81,3,.35);border-radius:50%;position:fixed;z-index:100001;pointer-events:none;transform:translate(-50%,-50%);transition:width .32s cubic-bezier(.25,1,.5,1),height .32s,border-color .28s;}
.cur.h{width:15px;height:15px;}
.cur-r.h{width:50px;height:50px;border-color:rgba(255,168,0,.55);}

/* ── PROGRESS ── */
.prog{position:fixed;top:0;left:0;height:1.5px;background:linear-gradient(90deg,var(--rust),var(--amber));z-index:9999;width:0;transition:width .05s;}

/* ── BG CANVAS ── */
#bg-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.55;}

/* ── GLASS SYSTEM ──
   Dark translucent panels — deep warm-tinted glass.
   The specular top edge is the signature detail.
   Background blobs show through; glass tints them warm.
─────────────────────────────────────────────────── */
.glass-panel{
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(22px) saturate(1.2) brightness(1.22);
  -webkit-backdrop-filter:blur(22px) saturate(1.2) brightness(1.22);
  border:1px solid rgba(255,255,255,.18);
  border-top-color:rgba(255,255,255,.38);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 20px 60px rgba(0,0,0,.45),
    0 4px 16px rgba(0,0,0,.25);
  position:relative;overflow:hidden;
}
.glass-panel::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.32) 25%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.20) 80%,transparent 100%);
}
.glass-panel::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;
  background:radial-gradient(ellipse 55% 22% at 22% 0%,rgba(255,168,0,.05) 0%,transparent 100%);
}
.glass-sm{
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(16px) saturate(1.15) brightness(1.18);
  -webkit-backdrop-filter:blur(16px) saturate(1.15) brightness(1.18);
  border:1px solid rgba(255,255,255,.16);
  border-top-color:rgba(255,255,255,.32);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.30),0 4px 14px rgba(0,0,0,.22);
}

/* ── PAGES ── */
.page{display:none;}
.page.active{display:block;}
.page.entering{animation:pageIn .5s ease forwards;}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.scroll-wrap{position:relative;z-index:10;}

/* ── NAV ── */
nav{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);
  z-index:9000;display:flex;align-items:center;
  background:rgba(255,255,255,0.07);
  backdrop-filter:blur(28px) saturate(1.15) brightness(1.25);
  -webkit-backdrop-filter:blur(28px) saturate(1.15) brightness(1.25);
  border:1px solid rgba(255,255,255,.18);
  border-top-color:rgba(255,255,255,.40);
  border-radius:60px;padding:10px 14px 10px 22px;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.35),0 12px 40px rgba(0,0,0,.40);
  white-space:nowrap;transition:box-shadow .3s;
}
nav:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 18px 54px rgba(8,3,0,.60);}
.nav-logo{font-family:"DM Mono",monospace;font-size:14px;font-weight:400;letter-spacing:-0.02em;color:rgba(240,228,210,.96);text-decoration:none;margin-right:32px;display:flex;align-items:center;gap:4px;cursor:none;}
.nav-logo span{color:var(--amber);}
.nav-logo em{display:inline-block;width:6px;height:6px;background:var(--rust);border-radius:50%;font-style:normal;animation:blink 3s ease infinite;margin-left:2px;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.08}}
.nav-links{display:flex;align-items:center;gap:26px;margin-right:20px;}
.nav-links a{font-family:var(--f-body);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(240,220,190,.58);text-decoration:none;transition:color .2s;position:relative;cursor:none;}
.nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:1px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .25s;}
.nav-links a:hover{color:rgba(240,228,210,.90);}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);}
.nav-links a.active{color:rgba(240,228,210,.86);}
.nav-pill{
  font-family:var(--f-body);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  padding:9px 20px;
  background:rgba(190,81,3,.20);
  border:1px solid rgba(255,168,0,.24);
  color:rgba(240,228,210,.90);border-radius:40px;cursor:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  transition:all .22s;
}
.nav-pill:hover{background:rgba(190,81,3,.34);border-color:rgba(255,168,0,.44);transform:scale(1.03);}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease;}
.reveal.in{opacity:1;transform:none;}

/* ── HERO ── */
#hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:130px 64px 0;position:relative;overflow:hidden;}
.hero-content{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;max-width:1200px;margin:0 auto;width:100%;}
.hero-kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-body);font-size:9px;letter-spacing:.35em;text-transform:uppercase;
  color:rgba(255,200,130,.82);
  border:1px solid rgba(190,81,3,.28);
  background:rgba(190,81,3,.10);
  padding:6px 14px;border-radius:40px;margin-bottom:36px;
  opacity:0;animation:fadeUp .7s .2s ease forwards;
}
.kd{width:5px;height:5px;background:var(--rust);border-radius:50%;animation:blink 2s ease infinite;}
.hero-h1{font-family:var(--f-brand);font-size:clamp(50px,7.5vw,100px);font-weight:300;letter-spacing:-0.045em;line-height:.9;margin-bottom:36px;}
.hero-h1 .l1{display:block;color:rgba(240,228,210,.96);opacity:0;animation:fadeUp .9s .4s ease forwards;}
.hero-h1 .l2{display:block;color:var(--amber);opacity:0;animation:fadeUp .9s .6s ease forwards;}
.hero-h1 .l3{display:block;color:transparent;-webkit-text-stroke:1.5px rgba(190,81,3,.70);opacity:0;animation:fadeUp .9s .8s ease forwards;}
.hero-sub{font-family:var(--f-head);font-size:15px;line-height:1.72;font-weight:400;color:rgba(240,210,170,.82);max-width:420px;margin-bottom:44px;opacity:0;animation:fadeUp .9s 1s ease forwards;}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;opacity:0;animation:fadeUp .9s 1.2s ease forwards;}
.btn-primary{
  font-family:var(--f-body);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  padding:10px 22px;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.22);
  color:rgba(240,228,210,.92);border-radius:40px;cursor:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
  transition:all .25s;
}
.btn-primary:hover{background:rgba(255,255,255,.18);transform:translateY(-2px);}
.btn-accent{
  font-family:var(--f-body);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  padding:10px 22px;
  background:linear-gradient(135deg,var(--rust),var(--rust-d));
  color:rgba(240,228,210,.95);border:1px solid rgba(190,81,3,.35);border-radius:40px;cursor:none;
  box-shadow:0 8px 28px rgba(140,58,0,.45),inset 0 1px 0 rgba(255,200,130,.18);
  transition:all .25s;
}
.btn-accent:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 14px 38px rgba(140,58,0,.55);}

/* ── HERO VISUAL ── */
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;opacity:0;animation:fadeIn .9s 1.4s ease forwards;}
.phone-mock{
  width:240px;height:480px;border-radius:36px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  position:relative;overflow:hidden;
  animation:floatPhone 5s ease-in-out infinite;
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(28px) saturate(1.15) brightness(1.22);
  -webkit-backdrop-filter:blur(28px) saturate(1.15) brightness(1.22);
  border:1px solid rgba(255,255,255,.18);
  border-top-color:rgba(255,255,255,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 40px 90px rgba(8,3,0,.55),
    0 8px 24px rgba(8,3,0,.30);
}
@keyframes floatPhone{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-16px) rotate(1deg)}}
.phone-notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:80px;height:8px;background:rgba(190,81,3,.14);border-radius:20px;}
.phone-sphere{width:140px;height:140px;}
.phone-sphere svg{width:100%;height:100%;animation:spinSlow 30s linear infinite;}
@keyframes spinSlow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.phone-brand{font-family:var(--f-brand);font-size:18px;font-weight:300;letter-spacing:-0.03em;color:rgba(240,228,210,.92);}
.phone-brand span{color:var(--amber);}
.phone-tag{font-family:var(--f-body);font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:rgba(240,200,140,.38);}
.chip-orbit{position:absolute;pointer-events:none;}
.oc{
  position:absolute;font-family:var(--f-body);font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  padding:7px 14px;border-radius:40px;white-space:nowrap;color:rgba(240,220,185,.78);
  background:rgba(21,10,2,.45);
  backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(255,255,255,.16);
  border-top-color:rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.oc1{top:-20px;right:60px;border-left:3px solid var(--rust);animation:f1 4s ease-in-out infinite;}
.oc2{top:140px;right:-60px;border-left:3px solid var(--slate);animation:f2 5s .5s ease-in-out infinite;}
.oc3{bottom:100px;right:-40px;border-left:3px solid var(--sage);animation:f1 4.5s 1s ease-in-out infinite;}
.oc4{bottom:0;left:20px;border-left:3px solid var(--sand);animation:f2 3.8s .3s ease-in-out infinite;}
.oc5{top:80px;left:-20px;border-left:3px solid var(--amber);animation:f1 4.2s .8s ease-in-out infinite;}
@keyframes f1{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes f2{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}

.scroll-hint{position:absolute;bottom:40px;left:64px;z-index:2;display:flex;align-items:center;gap:12px;font-family:var(--f-body);font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:rgba(190,81,3,.50);opacity:0;animation:fadeIn 1s 2.2s ease forwards;}
.sh-line{width:1px;height:44px;background:linear-gradient(to bottom,rgba(190,81,3,.55),transparent);animation:scrollPulse 2s ease infinite;}
@keyframes scrollPulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── HERO BAR ── */
.hero-bar{position:relative;z-index:2;margin-top:80px;max-width:1200px;margin-left:auto;margin-right:auto;}
.hero-bar-inner{
  display:flex;
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(20px) saturate(1.15);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);
  border:1px solid rgba(255,255,255,.12);
  border-top-color:rgba(255,255,255,.22);
  border-radius:24px;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 36px rgba(8,3,0,.38);
}
.hbar-item{flex:1;padding:22px 36px;border-right:1px solid rgba(255,255,255,.07);display:flex;gap:18px;align-items:center;opacity:0;animation:fadeIn .6s ease forwards;transition:background .2s;}
.hbar-item:last-child{border-right:none;}
.hbar-item:hover{background:rgba(190,81,3,.06);}
.hbar-item:nth-child(1){animation-delay:1.6s}.hbar-item:nth-child(2){animation-delay:1.75s}.hbar-item:nth-child(3){animation-delay:1.9s}.hbar-item:nth-child(4){animation-delay:2.05s}
.hbar-n{font-family:var(--f-brand);font-size:26px;font-weight:300;letter-spacing:-0.03em;line-height:1;}
.n1{color:var(--rust)}.n2{color:var(--slate)}.n3{color:var(--sage)}.n4{color:var(--amber)}
.hbar-l{font-family:var(--f-body);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(240,200,150,.55);}
.hbar-d{font-family:var(--f-head);font-size:13px;font-weight:600;color:rgba(240,228,210,.85);margin-top:2px;}

/* ── SECTION UTILITIES ── */
.section-wrap{padding:80px 64px;max-width:1200px;margin:0 auto;}
.sec-eye-row{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
.sec-eye{font-family:var(--f-body);font-size:9px;letter-spacing:.35em;text-transform:uppercase;color:rgba(190,81,3,.60);}
.sec-eye-line{flex:1;height:1px;background:linear-gradient(to right,rgba(190,81,3,.18),transparent);}
.plat-badge{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--f-body);font-size:9px;letter-spacing:.28em;text-transform:uppercase;padding:7px 16px;border-radius:40px;
  color:rgba(240,220,180,.78);
  background:rgba(21,10,2,.40);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.14);border-top-color:rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.bdot{width:5px;height:5px;border-radius:50%;animation:blink 2s ease infinite;}
.pb-vision .bdot{background:var(--slate);}
.pb-ios .bdot{background:var(--rust);}
.plat-title{font-family:var(--f-brand);font-size:clamp(32px,4vw,56px);font-weight:300;letter-spacing:-0.04em;line-height:1;color:rgba(240,228,210,.92);}
.plat-title span{color:var(--amber);}

/* ── STACKING APP CARDS ── */
.stack-section{padding:0 64px 220px;}
.scard-wrap{position:sticky;height:100vh;display:flex;align-items:center;justify-content:center;}
.sw-1{top:72px;}.sw-2{top:96px;}.sw-3{top:120px;}.sw-4{top:144px;}
.scard{
  width:100%;max-width:940px;border-radius:28px;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;min-height:520px;
  position:relative;
  background:rgba(10,4,0,0.55);
  backdrop-filter:blur(36px) saturate(1.4) brightness(0.82);
  -webkit-backdrop-filter:blur(36px) saturate(1.4) brightness(0.82);
  border:1px solid rgba(255,255,255,.10);
  border-top-color:rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 32px 90px rgba(8,3,0,.55),
    0 8px 24px rgba(8,3,0,.28);
  transition:transform .4s ease;
}
.scard::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;z-index:10;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.40) 30%,rgba(255,255,255,.22) 70%,transparent 100%);
}
.scard-visual{position:relative;min-height:520px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-direction:column;gap:16px;}
.sv-expressif{background:rgba(255,255,255,0.04);}
.sv-dansez{background:rgba(255,255,255,0.04);}
.sv-gif{background:rgba(255,255,255,0.04);}
.sv-monito{background:rgba(255,255,255,0.04);}
.scard-app-icon{
  position:relative;z-index:2;width:96px;height:96px;border-radius:22px;
  display:flex;align-items:center;justify-content:center;font-size:40px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  box-shadow:0 16px 40px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.35);
  backdrop-filter:blur(10px);
  animation:floatIcon 4s ease-in-out infinite;
}
@keyframes floatIcon{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.scard-vis-label{
  position:absolute;bottom:24px;left:24px;
  font-family:var(--f-body);font-size:9px;letter-spacing:.25em;text-transform:uppercase;
  padding:6px 14px;border-radius:40px;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);color:rgba(240,220,190,.70);
}
.scard-num{position:absolute;top:20px;right:24px;font-family:var(--f-brand);font-size:72px;font-weight:300;color:rgba(255,255,255,.04);letter-spacing:-0.06em;line-height:1;}
.scard-body{
  padding:52px;display:flex;flex-direction:column;justify-content:center;
  border-left:1px solid rgba(255,255,255,.08);
  background:rgba(8,3,0,0.45);
  position:relative;
}
.scard-body::before{
  content:'';position:absolute;top:0;bottom:0;left:0;width:1px;
  background:linear-gradient(to bottom,rgba(255,255,255,.18) 0%,rgba(255,255,255,.04) 50%,rgba(255,255,255,.12) 100%);
}
.scard-platform{font-family:var(--f-body);font-size:9px;letter-spacing:.28em;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:8px;color:rgba(190,81,3,.70);}
.platform-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.scard-name{font-family:var(--f-brand);font-size:38px;font-weight:300;letter-spacing:-0.035em;line-height:1;color:rgba(240,228,210,.95);margin-bottom:16px;}
.scard-tagline{font-family:var(--f-head);font-size:13px;letter-spacing:.02em;font-weight:600;margin-bottom:14px;color:var(--amber);}
.scard-desc{font-family:var(--f-head);font-size:14px;font-weight:400;line-height:1.72;color:rgba(240,210,170,.80);margin-bottom:26px;}
.scard-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:30px;}
.scard-tag{
  font-family:var(--f-body);font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  padding:5px 12px;border-radius:40px;
  border:1px solid rgba(190,81,3,.28);
  color:rgba(200,140,80,.72);
  background:rgba(190,81,3,.10);
}
.scard-rating{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
.stars{color:var(--amber);font-size:11px;letter-spacing:1px;}
.rating-n{font-family:var(--f-body);font-size:9px;color:rgba(240,200,140,.36);}
.scard-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-body);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  padding:12px 24px;border-radius:40px;cursor:none;text-decoration:none;
  background:rgba(190,81,3,.18);
  border:1px solid rgba(255,168,0,.26);
  color:rgba(240,228,210,.90);
  box-shadow:inset 0 1px 0 rgba(255,200,100,.14);
  transition:all .22s;
}
.scard-cta::after{content:'↗';}
.scard-cta:hover{background:rgba(190,81,3,.30);border-color:rgba(255,168,0,.44);transform:translateY(-2px);}

/* ── GALLERY ── */
#gallery{padding:40px 0 80px;overflow:hidden;}
.gal-header{padding:0 64px 48px;display:flex;align-items:flex-end;justify-content:space-between;max-width:1200px;margin:0 auto;}
.gal-eyebrow{font-family:var(--f-body);font-size:9px;letter-spacing:.35em;text-transform:uppercase;color:rgba(190,81,3,.55);display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.gal-eyebrow::before{content:'';width:24px;height:1px;background:rgba(190,81,3,.22);}
.gal-title{font-family:var(--f-brand);font-size:clamp(28px,4vw,52px);font-weight:300;letter-spacing:-0.04em;line-height:1;color:rgba(240,228,210,.90);}
.gal-title span{color:var(--amber);}
.gal-link{font-family:var(--f-body);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(190,81,3,.48);text-decoration:none;display:flex;align-items:center;gap:8px;transition:color .2s,gap .2s;}
.gal-link::after{content:'→'}.gal-link:hover{color:var(--amber);gap:14px;}
.mrow{overflow:hidden;position:relative;}
.mrow::before,.mrow::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;}
.mrow::before{left:0;background:linear-gradient(to right,rgba(15,5,0,.90),transparent);}
.mrow::after{right:0;background:linear-gradient(to left,rgba(15,5,0,.90),transparent);}
.mtrack{display:flex;gap:14px;width:max-content;}
.mtrack.fwd{animation:mfwd 36s linear infinite;padding:0 7px 14px;}
.mtrack.rev{animation:mrev 42s linear infinite;padding:0 7px 14px;}
@keyframes mfwd{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mrev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mitem{width:300px;height:190px;border-radius:20px;overflow:hidden;flex-shrink:0;cursor:none;position:relative;}
.mitem-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--f-body);font-size:9px;letter-spacing:.15em;text-transform:uppercase;transition:transform .4s;color:rgba(240,210,160,.42);}
.mitem:hover .mitem-inner{transform:scale(1.06);}
.mi1{background:linear-gradient(135deg,#7a3820,#be5103,#4a1408);}
.mi2{background:linear-gradient(150deg,#2a3e52,#3a6078,#0e1a24);}
.mi3{background:linear-gradient(120deg,#324428,#4e6a38,#141c0e);}
.mi4{background:linear-gradient(140deg,#7a2016,#be3828,#4a0808);}
.mi5{background:linear-gradient(135deg,#52401e,#886630,#281a06);}
.mi6{background:linear-gradient(155deg,#2a3e4e,#3e6258,#0e1a1c);}
.mi7{background:linear-gradient(130deg,#7a3614,#be5818,#401606);}
.mi8{background:linear-gradient(145deg,#5e2030,#8c3848,#220c10);}
.mbadge{
  position:absolute;bottom:12px;left:14px;
  font-family:var(--f-body);font-size:8px;letter-spacing:.18em;text-transform:uppercase;
  padding:4px 10px;border-radius:40px;
  background:rgba(21,10,2,.44);border:1px solid rgba(255,255,255,.14);
  color:rgba(240,200,140,.58);
  backdrop-filter:blur(8px);
}

/* ── FOOTER ── */
footer{padding:56px 64px 40px;margin:0 auto 48px;border-radius:28px;max-width:1200px;}
.ft-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:24px;}
.ft-logo{font-family:"DM Mono",monospace;font-size:18px;font-weight:300;letter-spacing:-0.02em;color:rgba(240,228,210,.88);margin-bottom:12px;}
.ft-logo span{color:var(--amber);}
.ft-sub{font-family:var(--f-head);font-size:13px;line-height:1.7;color:rgba(240,200,160,.70);max-width:230px;}
.ft-col-title{font-family:var(--f-body);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(232,148,82,.88);margin-bottom:16px;}
.ft-links{display:flex;flex-direction:column;gap:10px;}
.ft-links a{font-family:var(--f-head);font-size:14px;font-weight:400;color:rgba(240,200,160,.72);text-decoration:none;transition:color .2s;cursor:none;}
.ft-links a:hover{color:var(--amber);}
.ft-bot{display:flex;align-items:center;justify-content:space-between;}
.ft-copy{font-family:var(--f-body);font-size:9px;letter-spacing:.1em;color:rgba(190,81,3,.28);}
.ft-badges{display:flex;gap:6px;}
.fbt{font-family:var(--f-body);font-size:8px;letter-spacing:.15em;padding:4px 10px;border:1px solid rgba(190,81,3,.18);border-radius:40px;color:rgba(200,140,80,.34);}

/* ── INNER PAGES ── */
.ip-hero{min-height:55vh;display:flex;flex-direction:column;justify-content:center;padding:140px 64px 60px;position:relative;max-width:1200px;margin:0 auto;}
.ip-eyebrow{font-family:var(--f-body);font-size:9px;letter-spacing:.35em;text-transform:uppercase;color:rgba(190,81,3,.52);display:flex;align-items:center;gap:10px;margin-bottom:20px;}
.ip-eyebrow::before{content:'';width:24px;height:1px;background:rgba(190,81,3,.22);}
.ip-h1{font-family:var(--f-brand);font-size:clamp(40px,6vw,80px);font-weight:300;letter-spacing:-0.04em;line-height:.95;color:rgba(240,228,210,.92);margin-bottom:24px;}
.ip-h1 span{color:var(--amber);}
.ip-sub{font-family:var(--f-head);font-size:16px;font-weight:400;line-height:1.7;color:rgba(240,200,160,.80);max-width:500px;}
.about-grid{padding:10px 64px 60px;display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1200px;margin:0 auto;}
.info-card{border-radius:24px;padding:40px;}
.ic-label{font-family:var(--f-body);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(190,81,3,.48);margin-bottom:16px;}
.ic-body{font-family:var(--f-head);font-size:15px;font-weight:400;line-height:1.75;color:rgba(240,210,170,.85);}
.ic-body em{color:var(--amber);font-style:normal;}
.skills-wrap{padding:0 64px 60px;max-width:1200px;margin:0 auto;}
.skills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.sk-card{border-radius:20px;padding:24px 22px;position:relative;overflow:hidden;cursor:none;transition:transform .3s;}
.sk-card:hover{transform:translateY(-4px) scale(1.02);}
.sk-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;}
.sk1::before{background:var(--sand)}.sk2::before{background:var(--slate)}.sk3::before{background:var(--sage)}.sk4::before{background:var(--rust)}
.sk-name{font-family:var(--f-head);font-size:14px;font-weight:700;color:rgba(240,228,210,.92);margin-bottom:5px;}
.sk-desc{font-family:var(--f-body);font-size:9px;letter-spacing:.06em;color:rgba(240,190,120,.58);}
.quote-wrap{padding:0 64px 60px;max-width:1200px;margin:0 auto;}
.quote-card{border-radius:24px;padding:52px 56px;position:relative;overflow:hidden;}
.q-mark{font-family:var(--f-brand);font-size:160px;font-weight:300;line-height:1;color:rgba(190,81,3,.06);position:absolute;top:-10px;left:28px;}
.q-text{font-family:var(--f-brand);font-size:20px;font-weight:300;line-height:1.6;color:rgba(240,228,210,.88);letter-spacing:-0.02em;position:relative;z-index:1;}
.q-text em{color:var(--amber);font-style:normal;}
.q-sig{font-family:var(--f-body);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(190,81,3,.36);margin-top:24px;position:relative;z-index:1;}
.tl-wrap{padding:0 64px 80px;max-width:1200px;margin:0 auto;}
.tl-title{font-family:var(--f-brand);font-size:clamp(24px,3vw,40px);font-weight:300;letter-spacing:-0.03em;color:rgba(240,228,210,.76);margin-bottom:40px;}
.tl-title span{color:var(--amber);}
.tl-items{display:flex;flex-direction:column;}
.tl-item{display:grid;grid-template-columns:120px 1fr;gap:32px;padding:32px 0;border-bottom:1px solid rgba(255,255,255,.06);position:relative;}
.tl-item::before{content:'';position:absolute;left:108px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.06);}
.tl-item::after{content:'';position:absolute;left:102px;top:42px;width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(190,81,3,.60);background:transparent;}
.tl-yr{font-family:var(--f-brand);font-size:12px;letter-spacing:.05em;color:rgba(190,81,3,.75);padding-top:2px;}
.tl-name{font-family:var(--f-head);font-size:17px;font-weight:700;color:rgba(240,228,210,.74);margin-bottom:6px;}
.tl-desc{font-family:var(--f-head);font-size:13px;line-height:1.7;color:rgba(240,200,150,.55);}
.contact-wrap{padding:10px 64px 80px;display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1200px;margin:0 auto;}
.contact-info{border-radius:24px;padding:40px;}
.ci-section{margin-bottom:28px;}
.ci-lbl{font-family:var(--f-body);font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:rgba(240,200,150,.60);margin-bottom:8px;}
.ci-val{font-family:var(--f-head);font-size:15px;font-weight:600;color:var(--amber);text-decoration:none;transition:color .2s;}
.ci-val:hover{color:rgba(240,228,210,.95);}
.contact-form{border-radius:24px;padding:40px;display:flex;flex-direction:column;gap:16px;}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.cf-group{display:flex;flex-direction:column;gap:7px;}
.cf-lbl{font-family:var(--f-body);font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:rgba(240,200,150,.65);}
.cf-in,.cf-ta{font-family:var(--f-body);font-size:13px;background:rgba(21,10,2,.40);border:1px solid rgba(190,81,3,.28);padding:12px 15px;color:rgba(240,228,210,.90);outline:none;border-radius:12px;transition:border-color .2s,background .2s;}
.cf-in::placeholder,.cf-ta::placeholder{color:rgba(190,140,80,.35);}
.cf-in:focus,.cf-ta:focus{border-color:rgba(255,168,0,.40);background:rgba(21,10,2,.52);}
.cf-ta{min-height:120px;resize:vertical;}
.cf-btn{font-family:var(--f-body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:14px 32px;background:linear-gradient(135deg,var(--rust),var(--rust-d));color:rgba(240,228,210,.95);border:1px solid rgba(190,81,3,.30);border-radius:40px;cursor:none;align-self:flex-start;transition:all .22s;box-shadow:0 8px 24px rgba(140,58,0,.42),inset 0 1px 0 rgba(255,200,120,.16);}
.cf-btn:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 14px 34px rgba(140,58,0,.52);}
.journal-grid{padding:10px 64px 80px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;max-width:1200px;margin:0 auto;}
.jcard{border-radius:22px;overflow:hidden;cursor:none;transition:transform .35s cubic-bezier(.25,1,.5,1),box-shadow .35s;}
.jcard:hover{transform:translateY(-8px) scale(1.01);box-shadow:0 40px 80px rgba(8,3,0,.55);}
.jcard.featured{grid-column:span 2;}
.jcard-img{height:200px;position:relative;overflow:hidden;}
.jcard.featured .jcard-img{height:260px;}
.ji1{background:linear-gradient(135deg,#6a3018,#be5103,#401006);}
.ji2{background:linear-gradient(135deg,#243848,#3a6080,#0c1820);}
.ji3{background:linear-gradient(135deg,#243c20,#3e6238,#0c1808);}
.ji4{background:linear-gradient(135deg,#6a2010,#a83020,#380808);}
.ji5{background:linear-gradient(135deg,#503c18,#806028,#281408);}
.jimg-tag{position:absolute;top:14px;left:16px;font-family:var(--f-body);font-size:8px;letter-spacing:.2em;text-transform:uppercase;padding:5px 12px;border-radius:40px;background:rgba(21,10,2,.44);border:1px solid rgba(255,255,255,.14);color:rgba(240,210,160,.65);backdrop-filter:blur(8px);}
.jcard-body{padding:24px 26px 28px;}
.jmeta{font-family:var(--f-body);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(190,81,3,.52);margin-bottom:10px;display:flex;gap:10px;align-items:center;}
.jdot{width:3px;height:3px;background:rgba(190,81,3,.40);border-radius:50%;}
.jtitle{font-family:var(--f-head);font-size:16px;font-weight:700;color:rgba(240,228,210,.92);line-height:1.35;margin-bottom:10px;}
.jcard.featured .jtitle{font-size:21px;}
.jexcerpt{font-family:var(--f-head);font-size:13px;font-weight:400;color:rgba(240,200,150,.75);line-height:1.7;}
.jcard-read{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-body);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-top:14px;text-decoration:none;transition:gap .2s;}
.jcard-read::after{content:'→'}.jcard-read:hover{gap:12px;}

@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

@media(max-width:960px){
  nav{padding:10px 14px;border-radius:40px;}.nav-links{display:none;}
  #hero,.section-wrap,.stack-section,.gal-header,.about-grid,.skills-wrap,.quote-wrap,.tl-wrap,.contact-wrap,.journal-grid,.ip-hero{padding-left:20px;padding-right:20px;}
  .hero-content{grid-template-columns:1fr;}.hero-visual{display:none;}
  .hero-bar-inner{flex-wrap:wrap;}.hbar-item{flex:0 0 50%;border-bottom:1px solid rgba(255,255,255,.06);}
  .scard{grid-template-columns:1fr;min-height:auto;}.scard-visual{min-height:240px;}.scard-body{padding:32px 28px;}
  .about-grid,.contact-wrap{grid-template-columns:1fr;}.skills-grid{grid-template-columns:1fr 1fr;}
  .journal-grid{grid-template-columns:1fr;}.jcard.featured{grid-column:auto;}
  footer{margin:0 16px 32px;padding:36px 20px 28px;}
  .ft-top{grid-template-columns:1fr;gap:28px;}
  .ft-bot{flex-wrap:wrap;gap:12px;justify-content:center;text-align:center;}
  .ft-badges{flex-wrap:wrap;justify-content:center;}
}

/* ── HIDE CUSTOM CURSOR ON TOUCH DEVICES ── */
@media(hover:none),(pointer:coarse){
  body{cursor:auto;}
  body *{cursor:auto;}
  .cur,.cur-r{display:none!important;}
}

/* ══ PARALLAX LAYERS ══ */
.parallax-slow   { transform: translateY(var(--py-slow, 0px)); transition: transform .05s linear; }
.parallax-medium { transform: translateY(var(--py-med,  0px)); transition: transform .05s linear; }
.parallax-fast   { transform: translateY(var(--py-fast, 0px)); transition: transform .05s linear; }

/* ══ SCARD VISUAL — show blobs through glass ══ */
.scard-visual {
  backdrop-filter: blur(0px) !important;
  -webkit-backdrop-filter: blur(0px) !important;
  background: rgba(255,255,255,0.04) !important;
}

/* ══ GALLERY ITEMS WITH IMAGES ══ */
.mitem { cursor: pointer !important; }
.mitem img { width:100%;height:100%;object-fit:cover;display:block;border-radius:20px; }
.mitem-overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 60%);border-radius:20px; }
.mitem-play { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;backdrop-filter:blur(8px); }

/* ══ LIGHTBOX ══ */
#lightbox {
  display:none;position:fixed;inset:0;z-index:99000;
  background:rgba(0,0,0,.88);backdrop-filter:blur(20px);
  align-items:center;justify-content:center;
}
#lightbox.open { display:flex; }
#lightbox-inner {
  position:relative;max-width:90vw;max-height:90vh;
  border-radius:20px;overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.8);
  animation:lbIn .3s cubic-bezier(.25,1,.5,1) forwards;
}
@keyframes lbIn { from{opacity:0;transform:scale(.88)} to{opacity:1;transform:scale(1)} }
#lightbox img, #lightbox video { max-width:90vw;max-height:82vh;display:block;border-radius:20px; }
#lightbox-close {
  position:absolute;top:14px;right:14px;
  width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.25);
  color:white;font-size:18px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;backdrop-filter:blur(8px);z-index:2;transition:background .2s;
}
#lightbox-close:hover { background:rgba(190,81,3,.6); }
#lightbox-caption {
  position:absolute;bottom:0;left:0;right:0;padding:16px 20px;
  background:linear-gradient(to top,rgba(0,0,0,.7),transparent);
  font-family:var(--f-body);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.7);border-radius:0 0 20px 20px;
}

.learn-more-btn {
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-body);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  padding:6px 16px;border-radius:100px;
  background:rgba(255,168,0,.12);border:1px solid rgba(255,168,0,.28);
  color:rgba(255,168,0,.85);text-decoration:none;cursor:none;
  margin-bottom:14px;margin-top:4px;
  transition:background .2s,border-color .2s;
  width:fit-content;
}
.learn-more-btn:hover { background:rgba(255,168,0,.22);border-color:rgba(255,168,0,.5); }

/* ══ APP PAGE FAQ STACKING ══ */
/* ══ APP PAGES — split layout ══ */
.app-split { display:grid;grid-template-columns:1fr 1fr;min-height:100vh;padding-top:80px;max-width:1200px;margin:0 auto; }

/* LEFT — sticky panel */
.app-left {
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 52px 0 72px;
}
.app-hero-eye { font-family:var(--f-body);font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,168,0,.45);margin-bottom:16px;display:flex;align-items:center;gap:10px; }
.app-hero-eye::before { content:'';width:18px;height:1px;background:rgba(255,168,0,.3); }
.app-icon-wrap { width:88px;height:88px;border-radius:22px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:40px;margin-bottom:28px;box-shadow:0 12px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.25); }
.app-hero-h1 { font-family:var(--f-brand);font-size:clamp(38px,4.5vw,64px);font-weight:300;letter-spacing:-.045em;line-height:.92;margin-bottom:16px;color:rgba(240,228,210,.96); }
.app-hero-h1 span { color:var(--amber); }
.app-hero-sub { font-family:var(--f-head);font-size:13px;line-height:1.76;color:rgba(240,210,160,.82);margin-bottom:28px; }
.app-tags-row { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:28px; }
.app-tag { font-family:var(--f-body);font-size:8px;letter-spacing:.16em;text-transform:uppercase;padding:5px 12px;border-radius:100px;border:1px solid rgba(255,255,255,.14);color:rgba(240,220,170,.55);background:rgba(255,255,255,.05); }
.app-cta-row { display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:28px; }
.app-cta-primary { font-family:var(--f-body);font-size:9px;letter-spacing:.2em;text-transform:uppercase;padding:10px 22px;background:linear-gradient(135deg,var(--rust),var(--rust-d));color:rgba(240,228,210,.95);border:1px solid rgba(190,81,3,.35);border-radius:40px;cursor:none;box-shadow:0 6px 20px rgba(140,58,0,.38);transition:all .22s;text-decoration:none;display:inline-flex;align-items:center;gap:5px; }
.app-cta-primary:hover { filter:brightness(1.12);transform:translateY(-2px); }
.app-cta-ghost { font-family:var(--f-body);font-size:9px;letter-spacing:.2em;text-transform:uppercase;padding:9px 20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:rgba(240,228,210,.65);border-radius:40px;cursor:none;transition:all .22s; }
.app-cta-ghost:hover { background:rgba(255,255,255,.13);transform:translateY(-2px); }
.app-meta { font-family:var(--f-body);font-size:9px;letter-spacing:.12em;color:rgba(255,168,0,.30);margin-top:8px; }

/* Divider between left and right */
.app-left::after { content:'';position:absolute;top:10%;right:0;width:1px;height:80%;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.10) 30%,rgba(255,255,255,.10) 70%,transparent); }

/* RIGHT — scrollable FAQ */
.app-right { padding:100px 72px 100px 52px;position:relative; }
.faq-title { font-family:var(--f-brand);font-size:clamp(20px,2.5vw,30px);font-weight:300;letter-spacing:-.03em;color:rgba(240,228,210,.88);margin-bottom:28px; }
.faq-title span { color:var(--amber); }
.faq-list { display:flex;flex-direction:column;gap:8px; }
.faq-item {
  border-radius:18px;padding:22px 26px;cursor:pointer;
  transition:background .2s;
  background:rgba(10,4,0,0.52);
  backdrop-filter:blur(32px) saturate(1.4) brightness(0.88);
  -webkit-backdrop-filter:blur(32px) saturate(1.4) brightness(0.88);
  border:1px solid rgba(255,255,255,.09);
  border-top-color:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 24px rgba(0,0,0,.28);
}
.faq-item:hover { background:rgba(20,8,0,0.60); }
.faq-q { display:flex;justify-content:space-between;align-items:center;gap:16px; }
.faq-q-txt { font-family:var(--f-head);font-size:13px;font-weight:600;color:rgba(240,228,210,.85); }
.faq-arrow { font-size:14px;color:rgba(255,168,0,.55);transition:transform .3s;flex-shrink:0;font-style:normal; }
.faq-a { font-family:var(--f-head);font-size:12px;line-height:1.78;color:rgba(240,210,160,.80);max-height:0;overflow:hidden;transition:max-height .38s ease,padding-top .28s; }
.faq-item.open .faq-a { max-height:200px;padding-top:14px; }
.faq-item.open .faq-arrow { transform:rotate(45deg);color:var(--amber); }
.faq-item.open { border-color:rgba(255,168,0,.18);border-top-color:rgba(255,168,0,.28); }



/* ══ CONTACT TABS ══ */
.ct-panel { display:none; }
.ct-panel.visible { display:grid !important; grid-template-columns:1fr 1.4fr; gap:20px; align-items:start; padding:0 64px 80px; max-width:1200px;margin:0 auto; }
.ct-tab {
  font-family:var(--f-body);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  padding:9px 22px;border-radius:100px;border:none;cursor:pointer;
  background:transparent;color:rgba(240,210,160,.45);transition:all .22s;
}
.ct-tab.active {
  background:linear-gradient(135deg,var(--rust),var(--rust-d));
  color:rgba(240,228,210,.95);
  box-shadow:0 4px 14px rgba(140,58,0,.35);
}
.ct-tab:hover:not(.active) { color:rgba(240,228,210,.75); }

/* ══ APP SCREENSHOTS ══ */
.app-screenshots { padding:60px 72px 80px;max-width:1200px;margin:0 auto; }
.app-screenshots-title {
  font-family:var(--f-body);font-size:9px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,168,0,.45);margin-bottom:24px;display:flex;align-items:center;gap:10px;
}
.app-screenshots-title::before { content:'';width:18px;height:1px;background:rgba(255,168,0,.3); }
.app-screenshots-grid {
  display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:16px;
}
.app-screenshot-placeholder {
  aspect-ratio:9/16;border-radius:20px;overflow:hidden;position:relative;
  background:rgba(255,255,255,.04);
  border:none;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;
}
.app-screenshot-placeholder img {
  width:100%;height:100%;object-fit:contain;display:block;border-radius:20px;
}
.app-screenshot-label {
  font-family:var(--f-body);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,168,0,.30);
}
.app-screenshot-icon { font-size:24px;opacity:.3; }
@media(max-width:960px){
  .app-screenshots { padding:40px 20px 60px; }
  .app-screenshots-grid { grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); }
}

/* Contact info */
.ci-section { margin-bottom:20px; }
.ci-lbl { font-family:var(--f-body);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:rgba(240,200,150,.60);margin-bottom:5px; }
.ci-val { font-family:var(--f-head);font-size:14px;color:rgba(240,228,210,.75);text-decoration:none;transition:color .2s;cursor:none; }
.ci-val:hover { color:var(--amber); }

/* Form */
.cf-2col { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.cf-group { display:flex;flex-direction:column;gap:6px; }
.cf-select { appearance:none;-webkit-appearance:none; }
.cf-select option { background:#2a0e00;color:rgba(240,228,210,.9); }

/* Chips */
.cf-chips { display:flex;flex-wrap:wrap;gap:7px;margin-top:4px; }
.cf-chip {
  font-family:var(--f-body);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 15px;border-radius:100px;
  border:1px solid rgba(255,168,0,.18);
  color:rgba(240,210,160,.50);
  background:rgba(255,255,255,.04);
  cursor:pointer;transition:all .2s;
}
.cf-chip:hover { border-color:rgba(255,168,0,.40);color:rgba(240,228,210,.80); }
.cf-chip.selected {
  background:rgba(190,81,3,.22);
  border-color:rgba(255,168,0,.50);
  color:rgba(255,200,120,.95);
  box-shadow:inset 0 1px 0 rgba(255,200,100,.12);
}

/* Success */
.cf-success {
  display:flex;align-items:center;gap:14px;
  padding:18px 22px;border-radius:14px;
  background:rgba(61,107,90,.18);
  border:1px solid rgba(61,107,90,.35);
  animation:fadeUp .4s ease forwards;
}
.cf-success-icon {
  width:32px;height:32px;border-radius:50%;
  background:rgba(61,107,90,.35);
  display:flex;align-items:center;justify-content:center;
  color:rgba(120,200,150,.90);font-size:16px;flex-shrink:0;
}

/* ══ CUSTOM GLASS DROPDOWN ══ */
.cf-dropdown { position:relative; }
.cf-dd-trigger {
  font-family:var(--f-body);font-size:13px;
  background:rgba(21,10,2,.40);border:1px solid rgba(190,81,3,.18);
  padding:12px 15px;color:rgba(240,228,210,.86);border-radius:12px;
  display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;transition:border-color .2s,background .2s;
  user-select:none;
}
.cf-dd-trigger:hover { border-color:rgba(255,168,0,.30);background:rgba(21,10,2,.52); }
.cf-dropdown.open .cf-dd-trigger { border-color:rgba(255,168,0,.40);background:rgba(21,10,2,.52); }
.cf-dd-arrow { font-size:18px;color:rgba(190,81,3,.50);transition:transform .25s;line-height:1; }
.cf-dropdown.open .cf-dd-arrow { transform:rotate(90deg);color:var(--amber); }
.cf-dd-val { color:rgba(190,81,3,.40); }
.cf-dd-val.picked { color:rgba(240,228,210,.86); }
.cf-dd-list {
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:100;
  background:rgba(18,7,0,.92);
  backdrop-filter:blur(32px) saturate(1.5) brightness(0.95);
  -webkit-backdrop-filter:blur(32px) saturate(1.5) brightness(0.95);
  border:1px solid rgba(255,168,0,.18);border-radius:14px;overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);
  max-height:0;overflow:hidden;
  transition:max-height .32s cubic-bezier(.25,1,.5,1),opacity .25s;
  opacity:0;pointer-events:none;
}
.cf-dropdown.open .cf-dd-list { max-height:400px;opacity:1;pointer-events:all;overflow-y:auto; }
.cf-dd-item {
  font-family:var(--f-head);font-size:13px;padding:12px 18px;
  color:rgba(240,210,160,.65);cursor:pointer;
  transition:background .18s,color .18s;
  border-bottom:1px solid rgba(255,168,0,.06);
}
.cf-dd-item:last-child { border-bottom:none; }
.cf-dd-item:hover { background:rgba(190,81,3,.15);color:rgba(240,228,210,.90); }
.cf-dd-item.chosen { background:rgba(190,81,3,.20);color:var(--amber); }

/* ══ OS NAME CASING FIX ══
   Many labels use text-transform:uppercase which breaks iOS/macOS/visionOS.
   These overrides preserve correct casing on elements that show OS names. */
.scard-platform { text-transform:none; }
.app-hero-eye { text-transform:none; }
.plat-badge { text-transform:none; }
.app-tag { text-transform:none; }
.oc { text-transform:none; }
.fbt { text-transform:none; }
.hbar-l { text-transform:none; }

/* ══ EXPRESSIF RICH PAGE ══ */
.exp-hero { padding:140px 64px 60px;display:flex;align-items:center;gap:60px;min-height:90vh;max-width:1200px;margin:0 auto; }
.exp-hero-left { flex:1;max-width:520px; }
.exp-hero-right { flex:1;display:flex;justify-content:center; }
.exp-hero-right .app-screenshot-placeholder { max-width:600px; }
.exp-tagline { font-family:var(--f-head);font-size:clamp(18px,2.5vw,28px);font-weight:300;line-height:1.5;color:rgba(240,210,170,.80);margin-bottom:32px; }
.exp-tagline em { color:var(--amber);font-style:normal; }

.exp-section { padding:40px 64px;max-width:1200px;margin:0 auto; }
.exp-section-title { font-family:var(--f-brand);font-size:clamp(20px,3vw,40px);font-weight:300;letter-spacing:-.03em;color:rgba(240,228,210,.88);margin-bottom:12px; }
.exp-section-title span { color:var(--amber); }
.exp-section-sub { font-family:var(--f-head);font-size:14px;line-height:1.7;color:rgba(240,210,160,.72);max-width:640px;margin-bottom:36px; }

.exp-features { display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px; }
.exp-feature {
  border-radius:20px;padding:28px 26px;
  background:rgba(10,4,0,0.52);backdrop-filter:blur(32px) saturate(1.4) brightness(0.88);
  border:1px solid rgba(255,255,255,.09);border-top-color:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 24px rgba(0,0,0,.28);
  transition:transform .3s,border-color .2s;
}
.exp-feature:hover { transform:translateY(-4px);border-color:rgba(255,168,0,.22); }
.exp-feature-icon { font-size:28px;margin-bottom:14px; }
.exp-feature-name { font-family:var(--f-head);font-size:15px;font-weight:700;color:rgba(240,228,210,.85);margin-bottom:6px; }
.exp-feature-desc { font-family:var(--f-head);font-size:12px;line-height:1.7;color:rgba(240,210,160,.72); }

.exp-dual { display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:40px; }
.exp-dual-card {
  border-radius:22px;padding:36px 32px;
  background:rgba(10,4,0,0.52);backdrop-filter:blur(32px) saturate(1.4) brightness(0.88);
  border:1px solid rgba(255,255,255,.09);border-top-color:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 24px rgba(0,0,0,.28);
}
.exp-dual-label { font-family:var(--f-body);font-size:11px;letter-spacing:.3em;color:rgba(255,168,0,.50);margin-bottom:14px; }
.exp-dual-title { font-family:var(--f-head);font-size:18px;font-weight:700;color:rgba(240,228,210,.88);margin-bottom:10px; }
.exp-dual-list { list-style:none;padding:0; }
.exp-dual-list li { font-family:var(--f-head);font-size:15px;line-height:1.8;color:rgba(240,210,160,.58);padding-left:16px;position:relative; }
.exp-dual-list li::before { content:'';position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--amber);opacity:.5; }

/* ── visionOS Carousel ── */
.vos-carousel {
  position:relative;
  width:100%;
  max-width:100%;
  margin:0 auto;
  overflow:hidden;
  border-radius:22px;
  box-sizing:border-box;
}
.vos-carousel-track {
  display:-webkit-box;
  display:flex;
  -webkit-transition:transform .55s cubic-bezier(.4,0,.2,1);
  transition:transform .55s cubic-bezier(.4,0,.2,1);
  width:100%;
}
.vos-slide {
  width:100%;
  min-width:100%;
  max-width:100%;
  -webkit-flex-shrink:0;
  flex-shrink:0;
  position:relative;
  box-sizing:border-box;
}
.vos-slide img {
  width:100%;height:auto;display:block;
  border-radius:22px;
  max-width:100%;
}
.vos-arrow {
  position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;border:none;
  background:rgba(10,4,0,.65);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:rgba(240,228,210,.90);font-size:24px;
  cursor:pointer;z-index:3;
  -webkit-transition:background .2s,transform .2s;transition:background .2s,transform .2s;
  display:-webkit-flex;display:flex;
  -webkit-align-items:center;align-items:center;
  -webkit-justify-content:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.12);
}
.vos-arrow:hover { background:rgba(190,81,3,.45);transform:translateY(-50%) scale(1.08); }
.vos-arrow-l { left:16px; }
.vos-arrow-r { right:16px; }
.vos-dots {
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;z-index:3;
}
.vos-dot {
  width:10px;height:10px;border-radius:50%;border:none;
  background:rgba(240,228,210,.25);cursor:pointer;
  transition:background .25s,transform .25s;
}
.vos-dot.active { background:var(--amber);transform:scale(1.25); }
.vos-dot:hover:not(.active) { background:rgba(240,228,210,.50); }

/* ── iOS Phone Showcase ── */
.ios-showcase {
  display:-webkit-flex;
  display:flex;
  -webkit-justify-content:center;
  justify-content:center;
  -webkit-align-items:flex-end;
  align-items:flex-end;
  gap:28px;
  max-width:750px;
  margin:0 auto;
  -webkit-perspective:900px;
  perspective:900px;
}
.ios-phone {
  width:28%;
  max-width:200px;
  -webkit-flex-shrink:0;
  flex-shrink:0;
  -webkit-transition:-webkit-transform .4s cubic-bezier(.25,1,.5,1);
  transition:transform .4s cubic-bezier(.25,1,.5,1);
}
.ios-phone:first-child { -webkit-transform:rotateY(6deg);transform:rotateY(6deg); }
.ios-phone:last-child { -webkit-transform:rotateY(-6deg);transform:rotateY(-6deg); }
.ios-phone-center { width:32%;max-width:220px; }
.ios-phone:first-child:hover,
.ios-phone:last-child:hover { -webkit-transform:rotateY(0) translateY(-8px);transform:rotateY(0) translateY(-8px); }
.ios-phone-center:hover { -webkit-transform:translateY(-8px);transform:translateY(-8px); }
.ios-phone-bezel {
  background:transparent;
  border-radius:28px;
  padding:0;
  overflow:hidden;
  position:relative;
}
.ios-phone-notch {
  display:none;
}
.ios-phone-bezel img {
  width:100%;height:auto;display:block;
  border-radius:20px;
  max-width:100%;
}
.ios-phone-label {
  text-align:center;margin-top:14px;
  font-family:var(--f-body);font-size:9px;letter-spacing:.25em;
  text-transform:uppercase;color:rgba(240,200,150,.45);
}

/* ── FAQ wrap ── */
.exp-faq-wrap {
  border-radius:24px;
  padding:40px 44px;
  background:rgba(10,4,0,0.40);backdrop-filter:blur(32px) saturate(1.4) brightness(0.88);
  border:1px solid rgba(255,255,255,.08);border-top-color:rgba(255,255,255,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 32px rgba(0,0,0,.25);
  max-width:800px;
}
.exp-faq-header { margin-bottom:28px; }

.exp-formats { display:flex;flex-wrap:wrap;gap:10px; }
.exp-format-chip {
  font-family:var(--f-body);font-size:10px;letter-spacing:.12em;
  padding:10px 20px;border-radius:100px;
  background:rgba(190,81,3,.10);border:1px solid rgba(255,168,0,.22);
  color:rgba(255,200,130,.80);
  transition:background .2s,border-color .2s;
}
.exp-format-chip:hover { background:rgba(190,81,3,.20);border-color:rgba(255,168,0,.40); }

/* ══ RESPONSIVE VIDEO EMBED ══ */
.video-container {
  position:relative;
  width:100%;
  padding-bottom:56.25%; /* 16:9 */
  height:0;
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:#000;
}
.video-container iframe {
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  border:none;
  border-radius:20px;
}

@media(max-width:960px){
  .exp-hero { flex-direction:column;padding:120px 20px 40px; }
  .exp-section { padding:28px 20px; }
  .exp-dual { grid-template-columns:1fr; }
  .ios-showcase { gap:12px; }
  .ios-phone { width:30%;max-width:none; }
  .ios-phone-center { width:34%;max-width:none; }
  .ios-phone:first-child,.ios-phone:last-child { -webkit-transform:rotateY(0);transform:rotateY(0); }
  .vos-arrow { width:36px;height:36px;font-size:18px; }
  .exp-faq-wrap { padding:28px 20px; }
}
@media(max-width:560px){
  .ios-showcase { gap:8px; }
  .ios-phone-bezel { border-radius:18px;padding:5px; }
  .ios-phone-bezel img { border-radius:14px; }
  .ios-phone-notch { width:50px;height:14px;border-radius:0 0 8px 8px; }
}