/* ============================================================
   SPICY SOFI — shared design system (DA Rachelle)
   Trois ciels qui descendent · HUD de verre · HOLDING ·
   panneaux verre lisibles · règle des 3 lumières.
   Used by every page. Frame injected by /assets/da.js
   ============================================================ */
:root{
  --magenta:#FF4FA3; --amber:#FFB000; --red:#FF3B3B; --green:#3BFF8F; --blue:#63B3FF;
  --text:#F0DCE8; --ink:#2B0C16; --line:rgba(255,79,163,.28);
  --brand:'Goldman',system-ui,sans-serif;
  --data:'Press Start 2P',ui-monospace,monospace;
  --body:'Goldman',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--text);background:#07090D;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;line-height:1.7}
a{color:inherit}

/* ---------- three skies (fixed, cross-fade on scroll) ---------- */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none}
.sky.golden{background:linear-gradient(180deg,#F0CEA2,#ECA783,#EB7861,#EF644D,#E45525,#EF8422,#F2A95E)}
.sky.spicy {background:linear-gradient(180deg,#83CCCC,#B4C1C7,#CEA5AD,#E68894,#EB674E,#E66029,#EB9D9A,#E0D0CF);opacity:0}
.sky.night {background:linear-gradient(180deg,#17131A,#0D0A10,#07090D);opacity:0}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(0,0,0,.7) .5px,transparent .5px);background-size:3px 3px}

/* ---------- HUD glass ---------- */
.hud{position:fixed;inset:0;z-index:40;pointer-events:none}
.hud .corner{position:absolute;width:30px;height:30px;border:2px solid var(--magenta);opacity:.7}
.hud .corner.tl{top:16px;left:16px;border-right:0;border-bottom:0}
.hud .corner.tr{top:16px;right:16px;border-left:0;border-bottom:0}
.hud .corner.bl{bottom:16px;left:16px;border-right:0;border-top:0}
.hud .corner.br{bottom:16px;right:16px;border-left:0;border-top:0}
.telemetry{position:absolute;left:0;right:0;bottom:20px;display:flex;justify-content:space-between;
  padding:0 60px;font-family:var(--data);font-size:8px;letter-spacing:.06em;color:var(--ink);opacity:.7}
body.night .telemetry{color:var(--text)}

/* ---------- top bar ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:42;display:flex;align-items:center;justify-content:space-between;
  padding:20px 60px;pointer-events:none}
.topbar .brand{font-family:var(--brand);font-weight:700;letter-spacing:.16em;font-size:14px;color:var(--ink);
  pointer-events:auto;text-decoration:none}
.topbar nav{display:flex;gap:22px;font-size:10px;letter-spacing:.13em;pointer-events:auto;font-family:var(--brand)}
.topbar nav a{color:var(--ink);text-decoration:none;opacity:.72;transition:opacity .15s}
.topbar nav a:hover,.topbar nav a.on{opacity:1}
.status{display:inline-flex;align-items:center;gap:8px;font-family:var(--data);font-size:8px;letter-spacing:.1em;
  color:var(--ink);pointer-events:auto}
.status .korry{width:9px;height:9px;border-radius:2px;background:var(--amber);box-shadow:0 0 9px var(--amber)}
body.night .topbar .brand,body.night .topbar nav a,body.night .status{color:var(--text)}

/* ---------- heroes ---------- */
/* HOLDING hero (home, sofi-airlines) */
.hero{position:relative;z-index:10;height:100svh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;overflow:hidden}
.holotitle{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);z-index:11;font-family:var(--brand);
  font-weight:700;line-height:.9;letter-spacing:.02em;color:#fff;font-size:clamp(46px,13vw,180px);
  pointer-events:none;text-shadow:0 0 60px rgba(255,79,163,.5)}
.holotitle .l2{display:block}
#holo{position:absolute;inset:0;z-index:12;width:100%;height:100%;display:block;pointer-events:none}
.hero .role{position:relative;z-index:13;margin-top:auto;font-family:var(--brand);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;font-size:clamp(11px,2vw,15px);color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.hero .ctas{position:relative;z-index:13;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.scrollcue{position:relative;z-index:13;margin:26px 0 46px;font-family:var(--data);font-size:7px;letter-spacing:.14em;
  color:#fff;opacity:.75;display:flex;flex-direction:column;align-items:center;gap:8px}
.scrollcue .ar{animation:bob 1.7s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* simple page hero (content pages) */
.phero{position:relative;z-index:10;min-height:64svh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:14vh 24px 6vh}
.phero .eyebrow{font-family:var(--data);font-size:9px;letter-spacing:.18em;color:#fff;text-shadow:0 0 12px rgba(255,79,163,.55)}
.phero h1{font-family:var(--brand);font-weight:700;letter-spacing:.02em;line-height:.98;color:#fff;
  font-size:clamp(38px,8vw,86px);margin-top:18px;text-shadow:0 0 40px rgba(255,79,163,.35)}
.phero .sub{font-family:var(--brand);font-weight:700;color:#fff;letter-spacing:.05em;
  font-size:clamp(13px,2.2vw,18px);margin-top:16px;text-transform:uppercase}
.phero .lead{max-width:640px;margin:22px auto 0;color:#fff;opacity:.9;font-size:clamp(15px,2.1vw,18px)}

/* ---------- buttons / links ---------- */
.btn{font-family:var(--brand);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;padding:12px 20px;border-radius:8px;transition:transform .18s,box-shadow .18s;display:inline-block}
.btn.primary{background:var(--magenta);color:#1a0a12;box-shadow:0 0 20px rgba(255,79,163,.5)}
.btn.ghost{border:1px solid rgba(255,255,255,.5);color:#fff}
.btn:hover{transform:translateY(-2px)}
.link{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-family:var(--data);font-size:9px;
  letter-spacing:.1em;color:var(--magenta);text-decoration:none;border:1px solid var(--line);border-radius:8px;
  padding:11px 16px;transition:background .15s,color .15s}
.link:hover{background:var(--magenta);color:#1a0a12}

/* ---------- readable content sections (glass panels) ---------- */
.content{position:relative;z-index:10}
.sec{max-width:860px;margin:0 auto;padding:5vh 24px}
.panel{background:rgba(11,8,13,.5);border:1px solid var(--line);border-radius:16px;
  padding:clamp(24px,4vw,46px);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  box-shadow:0 20px 60px rgba(0,0,0,.35)}
.eyebrow{font-family:var(--data);font-size:9px;letter-spacing:.16em;color:var(--magenta);text-shadow:0 0 12px rgba(255,79,163,.55)}
.sec h2{font-family:var(--brand);font-weight:700;font-size:clamp(24px,4.2vw,40px);letter-spacing:.02em;
  margin-top:14px;line-height:1.08;color:#fff}
.sec h3{font-family:var(--brand);font-weight:700;font-size:clamp(18px,2.6vw,24px);margin-top:28px;color:#fff}
.sec .subh{color:var(--magenta);font-weight:700;margin-top:8px;font-size:clamp(14px,2vw,18px)}
.sec p{margin-top:16px;color:var(--text);opacity:.88;font-size:clamp(15px,1.9vw,17px);line-height:1.74}
.sec ul{margin-top:14px;padding-left:20px;color:var(--text);opacity:.88;font-size:15px;line-height:1.85}
.sec strong{color:#fff}
.sec a.inline{color:var(--magenta);text-decoration:none;border-bottom:1px solid var(--line)}
.sec a.inline:hover{border-color:var(--magenta)}

/* quick-facts grid (entity pages) */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px;margin-top:8px}
.facts h4{font-family:var(--data);font-size:8px;letter-spacing:.12em;color:var(--magenta);margin-bottom:12px}
.facts li{list-style:none;color:var(--text);opacity:.85;font-size:14px;line-height:1.9}

/* ---------- FAQ ---------- */
.faq{margin-top:20px}
.faq details{border:1px solid var(--line);border-radius:10px;background:rgba(11,8,13,.5);padding:2px 18px;margin-top:12px}
.faq summary{cursor:pointer;list-style:none;padding:16px 0;font-family:var(--brand);font-weight:700;font-size:15px;
  color:#fff;display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--magenta);font-size:20px;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 18px;color:var(--text);opacity:.82;font-size:15px;line-height:1.7}

/* ---------- blog list ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:8px}
.post{display:block;border:1px solid var(--line);border-radius:14px;background:rgba(11,8,13,.5);
  padding:24px;text-decoration:none;transition:border-color .18s,transform .18s}
.post:hover{border-color:var(--magenta);transform:translateY(-3px)}
.post .cat{font-family:var(--data);font-size:8px;letter-spacing:.1em;color:var(--magenta)}
.post h3{font-family:var(--brand);font-weight:700;color:#fff;font-size:19px;margin-top:12px;line-height:1.2}
.post p{color:var(--text);opacity:.75;font-size:14px;margin-top:10px;line-height:1.6}

/* article body */
.article{max-width:760px;margin:0 auto;padding:4vh 24px 2vh}
.article .meta{font-family:var(--data);font-size:8px;letter-spacing:.1em;color:var(--magenta);margin-bottom:10px}
.article h1{font-family:var(--brand);font-weight:700;font-size:clamp(28px,5vw,52px);line-height:1.05;color:#fff}
.article p{margin-top:18px;color:var(--text);opacity:.9;font-size:17px;line-height:1.75}
.article h2{font-family:var(--brand);font-weight:700;font-size:clamp(22px,3.6vw,30px);margin-top:40px;color:#fff}
.article ul{margin-top:16px;padding-left:20px;color:var(--text);opacity:.9;line-height:1.85}
.article a{color:var(--magenta)}
.article .cta-block{border:1px solid var(--line);border-radius:14px;background:rgba(11,8,13,.55);padding:26px;margin-top:40px}
.article .cta-block h3{font-family:var(--brand);color:#fff;font-size:20px}
.article .cta-block p{margin-top:10px;font-size:15px;opacity:.85}

/* ---------- footer ---------- */
.foot{position:relative;z-index:10;text-align:center;padding:9vh 24px 8vh;border-top:1px solid var(--line);margin-top:6vh}
.foot .socials{display:flex;gap:13px;justify-content:center;margin-bottom:22px}
.foot .socials a{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;color:var(--text);opacity:.7;transition:opacity .18s,border-color .18s,box-shadow .18s,transform .18s}
.foot .socials a:hover{opacity:1;color:var(--magenta);border-color:var(--magenta);box-shadow:0 0 16px rgba(255,79,163,.5);transform:translateY(-2px)}
.foot .socials svg{width:20px;height:20px}
.foot .socials .logo{width:30px;height:16px} .foot .socials .logo.shotgun{width:15px;height:22px}
.foot .flinks{display:flex;flex-wrap:wrap;gap:16px 22px;justify-content:center;font-family:var(--data);font-size:8px;
  letter-spacing:.08em;margin-bottom:22px}
.foot .flinks a{color:var(--text);opacity:.6;text-decoration:none}
.foot .flinks a:hover{opacity:1;color:var(--magenta)}
.foot .slogan{font-family:var(--data);font-size:8px;letter-spacing:.12em;color:var(--magenta)}
.foot .cr{font-family:var(--data);font-size:8px;line-height:2.2;letter-spacing:.06em;color:var(--text);opacity:.5;margin-top:16px}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .topbar{padding:14px 18px} .topbar nav{display:none}
  .telemetry{padding:0 16px;font-size:6px;bottom:14px} .telemetry span{white-space:nowrap}
  .hud .corner{width:22px;height:22px}
  .sec,.article{padding-left:18px;padding-right:18px}
}
@media (prefers-reduced-motion:reduce){ .scrollcue .ar{animation:none} }