
/* S1Qi homepage luxe refresh · 2026-09-18
   Scope: PUBLIC_HOME_HTML only. Content, links, routes and product logic are unchanged. */
:root{
  --night:#081421;--bronze:#10253a;--smoke:#29445a;--ember:#c8a264;
  --core:#f2d9a6;--gold:#c6a15f;--ondark:#fbf7ed;
  --ondark-2:rgba(251,247,237,.82);--ondark-3:rgba(251,247,237,.62);
  --paper:#f7f4ed;--paper-2:#edf0ee;--card:#fffdf8;
  --ink:#132131;--ink-2:#4f5d6c;--ink-soft:#75808b;
  --accent:#a9782c;--accent-deep:#7b531d;--halo:#ddc28f;--amber:#99651f;
  --line:rgba(19,33,49,.13);--shadow:0 18px 50px rgba(20,38,56,.10);
  --lattice:linear-gradient(135deg,rgba(198,161,95,.045),rgba(255,255,255,0) 54%,rgba(34,65,87,.035));
}
body{background:var(--paper);color:var(--ink)}

/* Quiet glass navigation. */
.nav-inner{max-width:1120px;height:72px}
.nav .logo,.nav .nav-links a{color:var(--ondark)}
.nav .nav-links a{color:rgba(251,247,237,.76)}
.nav .btn-ghost{color:var(--ondark);border-color:rgba(251,247,237,.36);background:rgba(255,255,255,.035);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav.scrolled{background:rgba(247,244,237,.90);border-bottom-color:rgba(19,33,49,.10);box-shadow:0 10px 34px rgba(16,35,54,.08)}
.nav.scrolled .logo{color:var(--ink)}
.nav.scrolled .nav-links a{color:var(--ink-2)}
.nav.scrolled .btn-ghost{color:var(--ink);border-color:rgba(19,33,49,.18);background:rgba(255,255,255,.56)}
.logo::before,.footer-brand::before{background:linear-gradient(135deg,#f1d7a2,#b8893d);box-shadow:3px 3px 0 rgba(198,161,95,.22),0 0 18px rgba(221,194,143,.22)}

/* Hero: one navy/ivory/champagne material system, with fewer moving parts. */
.hero{
  min-height:clamp(700px,100svh,960px);padding:124px 24px 118px;
  background:
    radial-gradient(46% 44% at 50% 35%,rgba(49,96,122,.58),transparent 70%),
    radial-gradient(34% 32% at 18% 18%,rgba(198,161,95,.15),transparent 70%),
    radial-gradient(38% 36% at 82% 16%,rgba(84,135,153,.16),transparent 72%),
    linear-gradient(180deg,#07121f 0%,#0b1c2d 42%,#18364b 72%,#617b82 88%,#d6d5cb 96%,var(--paper) 100%);
}
.hero::before{opacity:.14;mix-blend-mode:screen;filter:contrast(.8)}
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.026),transparent),repeating-linear-gradient(90deg,transparent 0 119px,rgba(221,194,143,.025) 120px),repeating-linear-gradient(0deg,transparent 0 119px,rgba(221,194,143,.018) 120px);-webkit-mask:linear-gradient(#000,transparent 82%);mask:linear-gradient(#000,transparent 82%)}
.scene{z-index:1}.wake{display:none}
.device{top:46%;width:min(720px,64vw);height:min(720px,64vw);transform:translate(-50%,-50%) rotate(-3deg);opacity:.72}
.spokes{top:42%;width:1100px;height:1100px;background:repeating-conic-gradient(rgba(221,194,143,.095) 0 .35deg,transparent .35deg 18deg);opacity:.28}
.rim{border-color:rgba(221,194,143,.09)}.rim-1{width:132vw;height:132vw;top:12%}.rim-2{width:114vw;height:114vw;top:19%}.rim-3{display:none}
.pillar,.glyph,.dots,.frag,.h-chain{display:none}
.sun{background:radial-gradient(closest-side,rgba(242,217,166,.34),rgba(78,131,151,.18) 42%,rgba(198,161,95,.08) 68%,transparent 100%);animation:ignite 1s ease .45s forwards,luxe-breathe 8s ease-in-out 1.5s infinite}
.seal{border-color:rgba(251,247,237,.56);box-shadow:0 0 30px rgba(221,194,143,.24),inset 0 0 24px rgba(116,164,177,.12);animation:awk .75s ease .55s forwards,luxe-seal 7s ease-in-out 1.6s infinite}
.seal::after{border-color:rgba(221,194,143,.46)}.r-core{border-color:rgba(251,247,237,.34)}
.r-script-a{background:repeating-conic-gradient(rgba(221,194,143,.52) 0 .7deg,transparent .7deg 8deg);animation:cal 1s ease .3s forwards,spin 128s linear 1.4s infinite}
.r-script-b{background:repeating-conic-gradient(rgba(133,180,193,.34) 0 .45deg,transparent .45deg 13deg);animation:cal 1s ease .4s forwards,spin 168s linear 1.4s infinite reverse}
.r-sheen{background:conic-gradient(from 0deg,transparent 0 326deg,rgba(242,217,166,.5) 347deg,transparent 360deg);animation:awk .8s ease .6s forwards,spin 32s linear 1.4s infinite}
.r-orb{border-color:rgba(221,194,143,.22);animation:awk .7s ease .5s forwards,spin 112s linear 1.4s infinite}
.r-outer{border-color:rgba(133,180,193,.16)}
.r-card s,.sat{background:linear-gradient(135deg,#fff4d9,var(--gold));box-shadow:0 0 16px rgba(242,217,166,.72)}
.r-frac1{border-top-color:rgba(221,194,143,.42);border-right-color:rgba(133,180,193,.14)}
.r-frac2{border-bottom-color:rgba(133,180,193,.38);border-left-color:rgba(133,180,193,.14)}
.r-frac3{border-left-color:rgba(251,247,237,.26)}
.sea{filter:blur(54px)}.sea-1{background:radial-gradient(closest-side,rgba(247,244,237,.96),transparent)}.sea-2{background:radial-gradient(closest-side,rgba(221,217,204,.76),transparent)}.sea-3{background:radial-gradient(closest-side,rgba(247,244,237,.84),transparent)}
@keyframes luxe-breathe{0%,100%{transform:scale(.98);opacity:.76}50%{transform:scale(1.045);opacity:1}}
@keyframes luxe-seal{0%,100%{box-shadow:0 0 26px rgba(221,194,143,.18),inset 0 0 20px rgba(116,164,177,.10)}50%{box-shadow:0 0 42px rgba(221,194,143,.30),inset 0 0 28px rgba(116,164,177,.16)}}

.hero-copy{max-width:820px}.hero-copy::before{inset:-24% -18%;background:radial-gradient(closest-side,rgba(4,13,23,.62),rgba(4,13,23,.28) 58%,transparent 79%)}
.hero-copy>*{opacity:1;animation:none;filter:none;transform:none}
.hero-eyebrow{color:#e1c792;text-shadow:0 2px 18px rgba(0,0,0,.42);font-size:12px}
h1{font-size:clamp(38px,4.65vw,64px);line-height:1.12;letter-spacing:-.025em;font-weight:650;color:#fffaf0;text-shadow:0 8px 34px rgba(0,0,0,.34);margin-top:22px}
.kicker{font-size:clamp(15px,1.6vw,20px);color:#ecd3a3;letter-spacing:.08em}.hero-sub{color:rgba(251,247,237,.78);font-size:15px}
.hero-cta{margin-top:34px}.hero-cta .btn-primary{opacity:1;color:#102033;border-color:rgba(255,248,232,.48);background:linear-gradient(135deg,#f1daa9 0%,#d2ad6b 58%,#b9893d 100%);box-shadow:0 14px 36px rgba(0,0,0,.26),0 0 0 1px rgba(255,255,255,.14) inset}
.hero-cta .btn-primary:hover{box-shadow:0 18px 42px rgba(0,0,0,.30),0 0 0 5px rgba(221,194,143,.14)}
.hero .link-cta{color:#f8f2e7;text-shadow:0 2px 16px rgba(0,0,0,.46)}.clients{color:rgba(251,247,237,.62);letter-spacing:.08em}
.scroll-hint{color:rgba(19,33,49,.54)}.scroll-hint i{border-color:rgba(19,33,49,.46)}

/* Body: cool ivory, dark ink and champagne details share one material system. */
.section{padding:94px 24px}.section.alt{background:#edf0ee}h2{color:var(--ink);letter-spacing:-.01em}
.lead,.brow p,.doc p,.faq .a{color:var(--ink-2)}
.dia::before,.tsig i,.perf .pin,.tg::before{background:linear-gradient(135deg,#e2c78f,#a9782c)}
.plan,.board,.doc{background-color:rgba(255,253,248,.96);background-image:var(--lattice);border-color:rgba(19,33,49,.10);box-shadow:var(--shadow)}
.plan::before{background:linear-gradient(90deg,#d9be84,#a9782c 48%,#6f92a1 100%)}
.plan:hover,.doc:hover{border-color:rgba(169,120,44,.42);box-shadow:0 0 0 4px rgba(198,161,95,.11),0 24px 54px rgba(20,38,56,.13)}
.plan--trial{background:rgba(255,253,248,.48);border-color:rgba(169,120,44,.38)}
.plan h3,.badge,.doc a,.advantages .adv-num{color:var(--accent-deep)}.price{color:var(--ink)}
.spec,.spec li,.brow,.faq,.faq details{border-color:var(--line)}.brow::before{background:linear-gradient(var(--accent),#6f92a1)}
.promise{background:linear-gradient(120deg,rgba(222,197,143,.16),rgba(255,253,248,.94) 58%,rgba(111,146,161,.08));border-color:rgba(169,120,44,.30)}
.promise::after{border-color:rgba(111,146,161,.22)}.badge{border-color:rgba(169,120,44,.34)}
.mobile-section-toggle,.mobile-adv-toggle{border-color:rgba(169,120,44,.38)!important;color:var(--accent-deep)!important}
.btn-primary{background:#19354b;color:#fffaf0}.btn-primary:hover{box-shadow:0 0 0 5px rgba(111,146,161,.14),0 14px 30px rgba(20,38,56,.20)}
.btn-ghost{border-color:rgba(19,33,49,.22);color:var(--ink)}.closing{background:linear-gradient(180deg,var(--paper) 0%,#e4e6e1 100%)}
footer{background:linear-gradient(180deg,#10283b 0%,#07131f 100%);border-top-color:rgba(221,194,143,.28)}

/* Mobile uses the same palette in a high-key treatment. */
@media (max-width:700px){
  .nav-inner{height:64px;padding:0 18px}.nav .logo{color:var(--ink)}
  .nav .btn-ghost{color:var(--ink);border-color:rgba(19,33,49,.18);background:rgba(255,255,255,.54);backdrop-filter:blur(12px)}
  .nav{background:rgba(247,244,237,.76);border-bottom-color:rgba(19,33,49,.07);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .hero{min-height:auto;padding:26px 20px 50px;color:var(--ink);background:radial-gradient(60% 42% at 50% 15%,rgba(111,146,161,.22),transparent 72%),radial-gradient(42% 34% at 82% 22%,rgba(221,194,143,.22),transparent 72%),linear-gradient(180deg,#f8f5ee 0%,#edf1f1 56%,var(--paper) 100%)}
  .hero::before{opacity:.055;mix-blend-mode:multiply}.hero::after{opacity:.42;background:repeating-linear-gradient(90deg,transparent 0 71px,rgba(19,33,49,.035) 72px),repeating-linear-gradient(0deg,transparent 0 71px,rgba(19,33,49,.025) 72px);-webkit-mask:linear-gradient(#000,transparent 72%);mask:linear-gradient(#000,transparent 72%)}
  .device{display:block;width:330px;height:330px;top:2%;opacity:.72;filter:none}
  .spokes{display:block;top:12%;width:520px;height:520px;opacity:.16;background:repeating-conic-gradient(rgba(19,53,75,.16) 0 .35deg,transparent .35deg 22deg)}
  .sun{background:radial-gradient(closest-side,rgba(221,194,143,.30),rgba(111,146,161,.14) 48%,transparent 100%)}
  .r-core{border-color:rgba(25,53,75,.32)}.r-card{border-color:rgba(169,120,44,.26)}
  .r-frac1{border-top-color:rgba(169,120,44,.34);border-right-color:rgba(25,53,75,.12)}.r-frac2{border-bottom-color:rgba(25,53,75,.30);border-left-color:rgba(25,53,75,.10)}.r-frac3{border-left-color:rgba(25,53,75,.24)}
  .seal{border-color:rgba(25,53,75,.34);box-shadow:0 0 28px rgba(169,120,44,.14),inset 0 0 20px rgba(111,146,161,.10)}
  .hero-copy{margin-top:176px;max-width:520px}.hero-copy::before{display:block;inset:-8% -4%;background:radial-gradient(closest-side,rgba(255,255,255,.70),rgba(255,255,255,.28) 56%,transparent 80%)}
  .hero-eyebrow{color:var(--accent-deep);text-shadow:none;letter-spacing:.24em}
  h1{font-size:clamp(31px,9.2vw,43px);color:var(--ink);text-shadow:none;line-height:1.16;margin-top:16px}
  .kicker{color:#855c22;text-shadow:none;font-size:15px;letter-spacing:.045em}.hero-sub{color:var(--ink-2);text-shadow:none;font-size:14px}
  .hero-cta{margin-top:26px;gap:11px}.hero-cta .btn.mobile-hero-only{width:100%;max-width:420px;min-height:48px;opacity:1;color:#fffaf0;border-color:#19354b;background:#19354b;box-shadow:0 12px 28px rgba(20,38,56,.17)}
  .hero .link-cta{color:var(--ink-2);text-shadow:none}.section{padding:64px 20px}.advantages{padding-top:48px;padding-bottom:48px}
  .plan-grid,.doc-grid{gap:14px}.plan,.board,.doc{border-radius:16px;box-shadow:0 12px 34px rgba(20,38,56,.08)}
}
@media (max-width:380px){.logo{font-size:16px}.nav .btn-sm{padding:7px 12px;font-size:12px}.hero{padding-left:16px;padding-right:16px}.hero-copy{margin-top:168px}h1{font-size:29px}}
@media (prefers-reduced-motion:reduce){.sun,.seal,.r-script-a,.r-script-b,.r-sheen,.r-orb{animation:none!important;opacity:1}}
