:root{
  --night:#050A1F;--night2:#08112B;--mint:#66F2B4;--mint2:#74E6C0;
  --violet:#7C4DFF;--violet2:#8E5CFF;--coral:#FF9B7A;--coral2:#FFA88F;
  --ivory:#F7F3EE;--white:#FCFAF7;--grey:#A9B0C3;--ink:#101426;
  --border:rgba(255,255,255,.15);--dark-card:rgba(12,18,43,.68);
  --grad:linear-gradient(105deg,#66F2B4 0%,#63d9cf 28%,#7C4DFF 72%,#9657ff 100%);
  --shadow:0 24px 80px rgba(1,4,15,.32);
  --radius:24px;--container:1320px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--night)}
body{margin:0;font-family:Inter,Geist,"SF Pro Display","Segoe UI",Arial,sans-serif;color:#fff;background:var(--night);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,textarea,select{font:inherit}
button,a{cursor:pointer}
a{text-decoration:none;color:inherit}
svg{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.container{width:min(calc(100% - 96px),var(--container));margin-inline:auto;position:relative;z-index:2}
.wide-container{width:min(calc(100% - 64px),1420px)}
.dark-section{position:relative;background:radial-gradient(circle at 12% 7%,#101a3a 0%,#050a1f 44%,#02040d 100%);overflow:hidden}
.light-section{position:relative;background:radial-gradient(circle at 50% 0%,#fff 0%,#faf7f2 60%,#f5efe8 100%);color:var(--ink)}
.coral{color:var(--coral)}
.site-header{position:absolute;z-index:30;left:50%;top:0;transform:translateX(-50%);width:min(calc(100% - 96px),var(--container));height:104px;display:flex;align-items:center;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:650;font-size:38px;letter-spacing:-.04em;color:#fff}
.brand img{width:46px;height:46px;object-fit:contain}
.desktop-nav{display:flex;align-items:center;gap:44px;margin-left:auto;margin-right:50px;font-size:16px;color:rgba(255,255,255,.84)}
.desktop-nav a{transition:.25s}
.desktop-nav a:hover{color:#fff}
.button{border:0;min-height:58px;padding:0 30px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:12px;color:#fff;font-weight:650;font-size:17px;letter-spacing:-.015em;transition:transform .2s,box-shadow .2s,border-color .2s;background:transparent}
.button:hover{transform:translateY(-2px)}
.button-small{min-height:50px;padding:0 27px;font-size:16px}
.button-gradient{background:var(--grad);box-shadow:0 12px 35px rgba(91,72,255,.25),inset 0 1px 0 rgba(255,255,255,.35)}
.button-gradient:hover{box-shadow:0 16px 44px rgba(91,72,255,.35),inset 0 1px 0 rgba(255,255,255,.45)}
.button-outline{border:1px solid rgba(255,255,255,.36);background:rgba(5,10,31,.35);backdrop-filter:blur(10px)}
.menu-toggle{display:none;background:transparent;border:0;color:white;padding:8px}
.menu-toggle span{display:block;width:27px;height:2px;background:#fff;margin:6px 0}
.eyebrow{display:inline-flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.17);background:rgba(5,10,31,.32);border-radius:999px;padding:9px 18px;color:rgba(255,255,255,.82);font-size:15px;backdrop-filter:blur(12px)}
.pulse{width:10px;height:10px;border-radius:50%;background:var(--mint);box-shadow:0 0 16px var(--mint)}
.hero{min-height:1024px;padding-top:104px}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:260px;background:linear-gradient(to bottom,transparent,rgba(1,3,13,.75));pointer-events:none}
.hero-grid{min-height:920px;display:grid;grid-template-columns:49% 51%;align-items:center}
.hero-copy{padding-top:20px;z-index:4}
.hero h1{margin:34px 0 24px;font-size:clamp(55px,5.1vw,78px);line-height:1.08;letter-spacing:-.045em;font-weight:650;max-width:760px;text-wrap:balance}
.hero-lead{color:rgba(255,255,255,.77);font-size:20px;line-height:1.75;margin:0 0 36px}
.hero-actions{display:flex;gap:16px;align-items:center}
.hero-actions .button{min-width:218px}
.micro-trust{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.73);margin:29px 0 40px;font-size:15px}
.micro-trust svg{color:var(--mint);font-size:24px}
.trust-pills{display:flex;gap:14px;flex-wrap:wrap}
.trust-pills span,.cta-pills span{display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(8,13,35,.35);padding:13px 17px;color:rgba(255,255,255,.74);font-size:14px;backdrop-filter:blur(12px)}
.trust-pills svg,.cta-pills svg{color:var(--mint);font-size:21px}
.hero-media{position:absolute;right:-98px;bottom:-12px;width:67%;z-index:1;pointer-events:none}
.hero-media:before{content:"";position:absolute;inset:12% 6% 0 15%;background:radial-gradient(circle,rgba(124,77,255,.22),transparent 60%);filter:blur(25px)}
.hero-media img{display:block;width:100%;height:auto;mask-image:radial-gradient(ellipse 94% 93% at 56% 57%,#000 72%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 94% 93% at 56% 57%,#000 72%,transparent 100%)}
.hero-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.18}
.orb-one{width:420px;height:420px;background:#294fdd;left:-140px;top:140px}
.orb-two{width:360px;height:360px;background:#7c4dff;right:260px;bottom:100px}
.section-head{max-width:900px;margin-inline:auto}
.section-head.centered{text-align:center}
.section-head h2{font-size:clamp(48px,4.6vw,70px);line-height:1.08;letter-spacing:-.045em;margin:25px 0 20px;font-weight:630}
.section-head p{margin:0;color:rgba(255,255,255,.68);font-size:20px;line-height:1.65}
.section-head.dark-text p{color:#4c5672}
.workflow{padding:92px 0 82px;min-height:980px}
.workflow .section-head h2{max-width:1050px;margin-inline:auto;margin-top:28px}
.section-glow{position:absolute;width:500px;height:500px;left:50%;top:270px;transform:translateX(-50%);filter:blur(90px);opacity:.15}
.glow-violet{background:#6343ff}
.steps-grid{margin-top:54px;display:grid;grid-template-columns:repeat(4,1fr);gap:62px;position:relative}
.step-card{height:326px;border:1px solid rgba(255,255,255,.26);border-radius:22px;padding:26px 28px;background:linear-gradient(155deg,rgba(18,23,51,.78),rgba(8,12,32,.68));box-shadow:inset 0 1px 0 rgba(255,255,255,.04);position:relative;z-index:2}
.step-number{display:grid;place-items:center;width:55px;height:55px;border:1px solid currentColor;border-radius:50%;font-size:22px;font-weight:650;opacity:.94}
.step-icon{font-size:54px;margin:36px 0 24px}
.step-card h3{font-size:20px;line-height:1.28;margin:0 0 12px;letter-spacing:-.02em}
.step-card p{margin:0;color:rgba(255,255,255,.65);font-size:15px;line-height:1.65}
.mint-card{color:var(--mint)}.violet-card{color:#a069ff}.blue-card{color:#817cff}.coral-card{color:var(--coral)}
.step-card h3,.step-card p{color:#fff}.step-card p{color:rgba(255,255,255,.65)}
.connector{position:absolute;top:132px;height:1px;background:linear-gradient(90deg,rgba(124,77,255,.15),#7c4dff,rgba(124,77,255,.15));z-index:1;box-shadow:0 0 12px #7c4dff}
.connector:before,.connector:after{content:"";position:absolute;top:-4px;width:9px;height:9px;border-radius:50%;background:#8e76ff;box-shadow:0 0 15px #7c4dff}
.connector:before{left:-3px}.connector:after{right:-3px}
.connector-1{left:23.4%;width:7.6%}.connector-2{left:48.2%;width:7.6%}.connector-3{left:73.2%;width:7.6%}
.document-row{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:52px}
.document-row>div{height:92px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(12,18,43,.55);display:flex;align-items:center;padding:0 22px;gap:17px;color:rgba(255,255,255,.85)}
.document-row>div>svg:first-child{font-size:35px;color:var(--mint)}
.document-row>div:nth-child(2)>svg:first-child,.document-row>div:nth-child(2) .doc-check{color:#a564ff}
.document-row>div:nth-child(3)>svg:first-child,.document-row>div:nth-child(3) .doc-check{color:#7c7cff}
.document-row>div:nth-child(4)>svg:first-child,.document-row>div:nth-child(4) .doc-check{color:var(--coral)}
.doc-check{margin-left:auto;color:var(--mint);font-size:25px}
.section-signature{display:flex;justify-content:center;align-items:center;gap:12px;margin:70px 0 0;color:rgba(255,255,255,.68)}
.section-signature svg{font-size:28px;color:var(--mint)}
.interface-section{padding:38px 0 75px;min-height:1080px}
.interface-kicker{display:inline-block;background:linear-gradient(90deg,#ece8ff,#f5f1ff);color:#39415a;padding:7px 16px;border-radius:9px;font-size:14px;margin-bottom:2px}
.interface-section .section-head{max-width:1100px}
.interface-section .section-head h2{font-size:clamp(44px,4vw,64px);margin-top:18px}
.interface-stage{position:relative;margin-top:35px;display:grid;grid-template-columns:205px 1fr;gap:48px;align-items:center}
.callouts{display:flex;flex-direction:column;gap:30px;z-index:2}
.callouts article{background:rgba(255,255,255,.72);border:1px solid rgba(16,20,38,.11);border-radius:18px;padding:20px 18px 18px;box-shadow:0 12px 32px rgba(48,42,35,.08);position:relative}
.callouts article:after{content:"";position:absolute;right:-50px;top:50%;width:45px;border-top:2px dotted var(--violet)}
.callouts article:nth-child(2):after{border-color:#29bc99}.callouts article:nth-child(3):after{border-color:#ff7652}
.callout-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;margin-bottom:18px}
.callout-icon svg{font-size:27px}
.violet-bg{background:#eee8ff;color:#7c4dff}.mint-bg{background:#dbfaef;color:#1c9f80}.coral-bg{background:#ffe4db;color:#ff6f49}.blue-bg{background:#e8f3ff;color:#5b91e7}
.callouts h3{font-size:16px;margin:0 0 7px}.callouts p{font-size:13px;color:#46516e;margin:0;line-height:1.55}
.app-window{height:742px;background:rgba(255,255,255,.83);border:1px solid rgba(16,20,38,.14);border-radius:18px;box-shadow:0 26px 60px rgba(37,32,27,.14);display:grid;grid-template-columns:220px minmax(470px,1fr) 245px;overflow:hidden;backdrop-filter:blur(18px)}
.app-sidebar{border-right:1px solid #e8e5e2;padding:23px 16px;display:flex;flex-direction:column;background:rgba(252,250,247,.75)}
.app-brand{display:flex;align-items:center;gap:9px;font-size:22px;margin:0 8px 18px}.app-brand img{width:31px;height:31px}
.patient-select{border:1px solid #dfdcda;border-radius:9px;padding:10px 12px;color:#74809b;font-size:11px;display:grid;grid-template-columns:1fr auto}.patient-select span{grid-column:1;font-size:13px;color:#20283e;margin-top:2px}.patient-select b{grid-row:1/3;grid-column:2;align-self:center;color:#39415a;font-size:18px}
.side-title{display:flex;align-items:center;justify-content:space-between;margin:14px 1px 9px;color:#69758f;font-size:12px}.side-title button{border:1px solid #d9d6d4;background:#fff;border-radius:6px;padding:5px 9px;font-size:10px;color:#29324a}
.doc-list{display:flex;flex-direction:column;gap:8px}.doc-list button{position:relative;text-align:left;background:#fff;border:1px solid #e0ddda;border-radius:8px;padding:10px 9px 28px;color:#20263b}.doc-list button.active{border-color:#c8c2ff;background:#fbfaff;box-shadow:0 0 0 1px rgba(124,77,255,.05)}
.doc-list b{display:block;font-size:11px}.doc-list small{display:block;font-size:9px;color:#6d7891;margin-top:4px}.doc-list em{position:absolute;right:7px;bottom:6px;font-style:normal;background:#e7f9f1;color:#269a79;padding:3px 6px;border-radius:999px;font-size:8px}.doc-list em.valid{background:#e9f8f2}.doc-list em.missing{background:#fff0ea;color:#f06742}
.settings{margin-top:auto;border:0;background:transparent;color:#5b6781;display:flex;align-items:center;gap:8px;font-size:12px;padding:8px}.settings svg{font-size:18px}
.app-main{display:grid;grid-template-rows:60px 1fr 54px;min-width:0;background:rgba(255,255,255,.56)}
.app-toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid #ebe8e5}.app-toolbar>div:first-child{display:flex;align-items:center;gap:12px}.app-toolbar h3{margin:0;font-size:18px}.app-toolbar span{background:#e4f8ef;color:#269778;border-radius:999px;font-size:9px;padding:5px 9px}.toolbar-icons{display:flex;gap:8px}.toolbar-icons button{width:31px;height:31px;display:grid;place-items:center;border:1px solid #e0ddda;background:#fff;border-radius:8px;color:#25304a}.toolbar-icons svg{font-size:16px}
.document-sheet{margin:12px 16px;border:1px solid #e3e0dd;border-radius:12px;background:#fff;overflow:hidden;padding:0 18px}.document-sheet article{padding:13px 0;border-bottom:1px solid #e8e5e2}.document-sheet article:last-child{border-bottom:0}.document-sheet h4{font-size:12px;margin:0 0 7px;display:flex;align-items:center;color:#171d30}.document-sheet h4 span{margin-left:auto;background:#e6f9f1;color:#24987a;padding:3px 8px;border-radius:999px;font-size:8px;font-weight:500}.document-sheet h4 span.warn{background:#fff0ea;color:#ec6641}.document-sheet h4 svg{margin-left:9px;color:#5a6ca1;font-size:15px}.document-sheet p{font-size:10px;line-height:1.55;color:#333b50;margin:0}.document-sheet dl{display:flex;gap:38px;margin:0}.document-sheet dt{font-size:9px;color:#75809a}.document-sheet dd{font-size:10px;margin:1px 0 0;color:#20283e}
.app-status{border-top:1px solid #e9e6e3;display:flex;align-items:center;justify-content:space-between;padding:0 18px;color:#45516e}.app-status span:first-child{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center}.app-status span:first-child svg{grid-row:1/3;color:#23a980;font-size:22px}.app-status b{font-size:9px}.app-status small{font-size:8px;color:#7b8498;display:block}.app-status span:last-child{text-align:right}
.app-inspector{border-left:1px solid #e8e5e2;padding:68px 14px 16px;background:rgba(252,250,247,.72)}
.inspector-card{border:1px solid #e3e0dd;border-radius:11px;background:#fff;padding:12px;margin-bottom:12px}.inspector-card h4{font-size:12px;margin:0 0 10px}.inspector-card button{position:relative;width:100%;min-height:48px;border:1px solid #e9e6e3;background:#fff;border-radius:8px;margin-top:7px;text-align:left;padding:7px 22px 7px 43px;color:#222a3f}.source-dot{position:absolute;left:8px;top:8px;width:28px;height:28px;border-radius:8px;display:grid;place-items:center}.source-dot svg{font-size:15px}.inspector-card b{display:block;font-size:9px}.inspector-card small{display:block;font-size:8px;color:#79839a}.inspector-card button i{position:absolute;right:8px;top:15px;font-style:normal}.inspector-card a{display:block;font-size:9px;color:#5e57ee;margin-top:12px}.missing-card{height:160px}.missing-card h4{display:flex;justify-content:space-between}.missing-card h4 span{color:#f16843;background:#fff0ea;border-radius:50%;width:19px;height:19px;display:grid;place-items:center}.missing-card p{position:relative;padding-left:15px}.missing-card p i{position:absolute;left:0;top:5px;width:6px;height:6px;border-radius:50%;background:#ff734d}.missing-card p b{font-size:9px}.missing-card p small{font-size:8px;color:#8a92a4}.validate-button,.copy-button{width:100%;height:45px;border-radius:8px;font-size:10px;display:flex;align-items:center;justify-content:center;gap:7px}.validate-button{border:0;background:var(--grad);color:#fff}.copy-button{border:1px solid #aab1c1;background:#fff;color:#37415c;margin-top:10px}
.base-section{padding:90px 0 66px;min-height:1030px}
.base-grid,.security-grid{display:grid;grid-template-columns:66% 34%;gap:88px;align-items:start}
.base-copy h2,.security-copy h2{font-size:clamp(52px,4.6vw,70px);line-height:1.04;letter-spacing:-.045em;margin:0 0 19px;font-weight:630}
.base-copy>p,.security-copy>p{max-width:700px;font-size:20px;line-height:1.72;color:rgba(255,255,255,.76);margin:0}
.base-visual{height:470px;margin-top:25px;overflow:hidden;position:relative}
.base-visual img{width:100%;height:100%;object-fit:cover;object-position:center 74%;mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 91%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 91%,transparent 100%)}
.architecture-pill,.local-pill{display:inline-flex;align-items:center;gap:13px;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:12px 20px;background:rgba(255,255,255,.07);margin:0 0 0 80px;color:rgba(255,255,255,.82);font-size:15px;backdrop-filter:blur(12px)}
.architecture-pill svg{font-size:25px}.architecture-pill b{font-weight:500;background:linear-gradient(90deg,var(--mint),#c06cff);-webkit-background-clip:text;background-clip:text;color:transparent}.architecture-pill i{font-style:normal;color:#fff}
.feature-stack{display:flex;flex-direction:column;gap:16px;margin-top:15px}
.feature-stack article{min-height:147px;border:1px solid rgba(255,255,255,.16);border-radius:22px;background:linear-gradient(145deg,rgba(15,23,49,.76),rgba(7,12,31,.64));display:flex;align-items:center;gap:22px;padding:22px 26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.round-icon,.summary-icon{flex:0 0 auto;width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05)}
.round-icon svg{font-size:50px}.mint-icon{color:var(--mint)}.blue-icon{color:#77b6ff}.violet-icon{color:#9c58ff}.coral-icon{color:var(--coral)}
.feature-stack h3{font-size:21px;margin:0 0 4px}.feature-stack p{font-size:16px;line-height:1.45;color:rgba(255,255,255,.68);margin:0}
.architecture-flow,.data-flow{min-height:164px;margin-top:26px;border:1px solid rgba(255,255,255,.15);border-radius:20px;background:rgba(9,15,37,.57);display:grid;grid-template-columns:1.15fr .3fr 1.05fr .3fr 1.1fr;align-items:center;padding:25px 45px}
.architecture-flow>div,.data-flow>div{display:flex;align-items:center;gap:24px}.flow-icon{font-size:73px}.mint-stroke{color:var(--mint)}.violet-stroke{color:#975aff}.architecture-flow b,.data-flow b{font-size:17px}.architecture-flow small,.data-flow small{display:block;color:rgba(255,255,255,.63);font-size:14px;line-height:1.55;margin-top:5px}.flow-arrow{font-size:31px;letter-spacing:4px;text-align:center}.mint-arrow{color:var(--mint)}.violet-arrow{color:#9b5cff}.flow-brand img{width:78px;height:78px}.flow-brand b{font-size:29px}
.security-section{padding:95px 0 70px;min-height:1030px}
.section-label{display:inline-block;border:1px solid rgba(255,255,255,.16);border-radius:999px;color:#ad83ff;padding:7px 18px;margin-bottom:24px;font-size:14px}
.security-copy h2{max-width:760px}.security-copy>p{max-width:690px}
.security-device{height:390px;margin-top:10px;overflow:hidden}.security-device img{width:100%;height:100%;object-fit:cover;object-position:center 72%;mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 95%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 95%,transparent 100%)}
.local-pill{margin:0 0 0 0}.local-pill svg{color:#fff;font-size:22px}.local-pill i{width:8px;height:8px;background:var(--mint);border-radius:50%;box-shadow:0 0 12px var(--mint)}
.data-flow{margin-top:30px}
.faq-section{padding:45px 0 88px;min-height:1020px}
.light-eyebrow{color:#52617c;background:rgba(255,255,255,.52);border-color:rgba(16,20,38,.10)}
.light-eyebrow svg{color:#26ad8b}
.faq-section .section-head h2{font-size:clamp(47px,4.1vw,64px);margin-top:23px}
.faq-section .section-head p{font-size:20px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 31px;margin-top:56px}
.faq-card{border:1px solid rgba(16,20,38,.13);border-radius:18px;background:rgba(255,255,255,.48);overflow:hidden;box-shadow:0 6px 24px rgba(55,47,38,.025)}
.faq-card button{width:100%;height:92px;border:0;border-bottom:1px solid rgba(16,20,38,.11);background:transparent;display:flex;align-items:center;padding:0 26px;gap:24px;color:var(--ink);text-align:left}
.faq-index{flex:0 0 auto;width:45px;height:45px;border-radius:12px;display:grid;place-items:center;background:#050a1f;color:var(--mint);font-size:22px;font-weight:700;box-shadow:inset 0 0 18px rgba(124,77,255,.22)}
.faq-card button b{font-size:18px;letter-spacing:-.02em}.faq-card button svg{margin-left:auto;font-size:28px;color:#4a5571;transition:.25s}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease}.faq-card.open .faq-answer{max-height:120px}.faq-card.open button svg{transform:rotate(45deg)}
.faq-answer p{margin:0;padding:19px 27px 23px;color:#596684;font-size:17px;line-height:1.65}
.faq-summary{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(16,20,38,.13);border-radius:22px;background:rgba(255,255,255,.42);margin-top:42px;min-height:196px;box-shadow:inset 0 -16px 35px rgba(124,77,255,.035)}
.faq-summary article{display:flex;align-items:center;gap:24px;padding:35px 45px;position:relative}.faq-summary article:not(:last-child):after{content:"";position:absolute;right:0;top:30%;height:40%;width:1px;background:rgba(16,20,38,.14)}
.summary-icon{width:85px;height:85px;box-shadow:0 6px 18px rgba(35,31,27,.08);background:rgba(255,255,255,.55)}.summary-icon svg{font-size:45px}.faq-summary h3{font-size:18px;margin:0 0 6px}.faq-summary p{margin:0;color:#5d6986;font-size:16px}
.cta-section{min-height:1000px;padding-top:93px;background:radial-gradient(ellipse at 50% 0%,#0e1636 0%,#050a1f 48%,#02040d 100%)}
.cta-content{text-align:center;padding-top:45px}
.cta-content h2{font-size:clamp(56px,5.2vw,78px);line-height:1.02;letter-spacing:-.05em;margin:0 0 25px;font-weight:630}
.cta-content p{color:rgba(255,255,255,.72);font-size:18px;line-height:1.75;margin:0}
.cta-actions{display:flex;justify-content:center;gap:22px;margin-top:44px}.cta-actions .button{min-width:320px;height:72px;font-size:21px}.cta-pills{display:flex;justify-content:center;gap:35px;margin-top:54px}.cta-pills span{padding:14px 25px;min-width:200px;justify-content:center}
.cta-arc{position:absolute;left:50%;top:72px;transform:translateX(-50%);width:min(66vw,940px);height:390px;border:1px solid rgba(115,116,255,.35);border-bottom:0;border-radius:50% 50% 0 0 / 100% 100% 0 0;box-shadow:0 -6px 30px rgba(124,77,255,.24),inset 0 14px 38px rgba(65,102,255,.10);opacity:.88}
.cta-arc:before,.cta-arc:after{content:"";position:absolute;top:61px;width:8px;height:8px;background:#777cff;border-radius:50%;box-shadow:0 0 16px #777cff}.cta-arc:before{left:19px}.cta-arc:after{right:19px}
.gradient-rule{position:absolute;left:0;right:0;top:675px;height:2px;background:linear-gradient(90deg,#66f2b4,#7aa7ff,#a85cff,#ff9b7a);box-shadow:0 0 18px rgba(124,77,255,.7)}
.site-footer{position:absolute;left:50%;transform:translateX(-50%);bottom:60px;height:245px;border-top:0;display:grid;grid-template-columns:1fr 1.4fr;align-items:start;padding-top:35px}
.footer-brand{font-size:50px}.footer-brand img{width:64px;height:64px}.site-footer nav{display:flex;justify-content:flex-end;gap:56px;padding-top:24px;color:rgba(255,255,255,.82)}.link-button{border:0;background:transparent;color:inherit;padding:0}.site-footer p{grid-column:1/3;border-top:1px solid rgba(255,255,255,.12);padding-top:35px;margin:26px 0 0;color:rgba(255,255,255,.4)}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .75s ease,transform .75s ease}.reveal.is-visible{opacity:1;transform:none}.reveal-delay{transition-delay:.15s}
@media (max-width:1180px){
  .container{width:min(calc(100% - 54px),var(--container))}.site-header{width:calc(100% - 54px)}
  .desktop-nav{gap:25px;margin-right:25px}.hero-grid{grid-template-columns:55% 45%}.hero-media{right:-160px;width:75%}.hero h1{font-size:58px}
  .steps-grid{gap:30px}.connector{display:none}.document-row{gap:18px}.document-row>div{padding:0 15px;font-size:14px}
  .interface-stage{grid-template-columns:170px 1fr;gap:26px}.app-window{grid-template-columns:190px minmax(420px,1fr) 220px}.callouts article:after{right:-27px;width:23px}
  .base-grid,.security-grid{grid-template-columns:60% 40%;gap:45px}.feature-stack article{padding:18px}.round-icon{width:72px;height:72px}.round-icon svg{font-size:42px}
  .architecture-flow,.data-flow{padding:20px 28px}.flow-brand b{font-size:24px}.cta-pills{gap:16px}.site-footer nav{gap:30px}
}
@media (max-width:960px){
  .desktop-nav,.site-header>.button-small{display:none}.menu-toggle{display:block}.site-header.open .desktop-nav{display:flex;position:absolute;top:82px;left:0;right:0;margin:0;padding:24px;flex-direction:column;align-items:flex-start;background:rgba(5,10,31,.96);border:1px solid rgba(255,255,255,.12);border-radius:16px;backdrop-filter:blur(18px)}
  .hero{min-height:1080px}.hero-grid{display:block;min-height:auto;padding-top:100px}.hero-copy{max-width:720px}.hero-media{position:relative;width:115%;right:auto;left:-7%;bottom:auto;margin-top:-10px}.hero:after{height:120px}
  .steps-grid{grid-template-columns:1fr 1fr}.document-row{grid-template-columns:1fr 1fr}
  .interface-stage{display:block}.callouts{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:24px}.callouts article:after{display:none}.app-window{height:680px;grid-template-columns:180px 1fr}.app-inspector{display:none}
  .base-grid,.security-grid{grid-template-columns:1fr}.feature-stack{display:grid;grid-template-columns:1fr 1fr}.base-visual,.security-device{height:450px}.architecture-pill{margin-left:0}
  .architecture-flow,.data-flow{grid-template-columns:1fr;gap:20px;text-align:center}.architecture-flow>div,.data-flow>div{justify-content:center}.flow-arrow{transform:rotate(90deg)}
  .faq-summary article{padding:25px 22px}.summary-icon{width:68px;height:68px}.summary-icon svg{font-size:36px}.cta-actions .button{min-width:270px}.cta-pills{flex-wrap:wrap}.site-footer{grid-template-columns:1fr}.site-footer nav{justify-content:flex-start;flex-wrap:wrap}.site-footer p{grid-column:1}
}
@media (max-width:700px){
  .container,.wide-container{width:calc(100% - 32px)}.site-header{width:calc(100% - 32px);height:82px}.brand{font-size:30px}.brand img{width:38px;height:38px}
  .hero{padding-top:82px;min-height:980px}.hero-grid{padding-top:65px}.eyebrow{font-size:12px;padding:8px 12px}.hero h1{font-size:46px;margin-top:24px}.hero-lead{font-size:17px;line-height:1.65}.hero-actions{flex-direction:column;align-items:stretch}.hero-actions .button{width:100%}.trust-pills{display:grid;grid-template-columns:1fr}.hero-media{width:150%;left:-28%;margin-top:0}
  .workflow,.base-section,.security-section,.faq-section{padding:70px 0}.section-head h2,.base-copy h2,.security-copy h2,.cta-content h2{font-size:42px}.section-head p,.base-copy>p,.security-copy>p{font-size:17px}
  .steps-grid{grid-template-columns:1fr;gap:18px}.step-card{height:auto;min-height:270px}.document-row{grid-template-columns:1fr;gap:12px}.section-signature{margin-top:45px}
  .interface-section{padding:28px 0 60px}.interface-section .section-head h2{font-size:38px}.callouts{grid-template-columns:1fr}.app-window{height:640px;grid-template-columns:1fr}.app-sidebar{display:none}.app-main{grid-column:1}.document-sheet{margin:10px}.app-toolbar{padding:0 13px}.document-sheet dl{gap:14px;flex-wrap:wrap}
  .feature-stack{grid-template-columns:1fr}.base-visual,.security-device{height:330px}.feature-stack article{min-height:125px}.architecture-pill{font-size:12px;padding:10px 14px;flex-wrap:wrap}.architecture-flow,.data-flow{padding:24px 16px}.flow-icon{font-size:56px}
  .faq-grid{grid-template-columns:1fr;gap:15px;margin-top:35px}.faq-card button{height:auto;min-height:88px;padding:17px}.faq-card button b{font-size:16px}.faq-answer p{font-size:15px}.faq-summary{grid-template-columns:1fr}.faq-summary article:not(:last-child):after{right:10%;left:10%;top:auto;bottom:0;width:auto;height:1px}.faq-summary article{padding:24px}
  .cta-section{min-height:950px;padding-top:65px}.cta-content{padding-top:30px}.cta-content p{font-size:16px}.cta-actions{flex-direction:column}.cta-actions .button{min-width:0;width:100%;height:62px;font-size:17px}.cta-pills{flex-direction:column;align-items:stretch;margin-top:35px}.cta-pills span{min-width:0}.cta-arc{width:105vw;height:280px}.gradient-rule{top:645px}.site-footer{bottom:30px;height:245px;padding-top:20px}.footer-brand{font-size:39px}.footer-brand img{width:52px;height:52px}.site-footer nav{gap:18px 25px;font-size:14px}.site-footer p{font-size:13px;padding-top:22px;margin-top:20px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.button{transition:none}}

/* Desktop alignment against the 1491 × 1055 reference frames */
@media (min-width:1181px){
  :root{--container:1351px}
  .container{width:min(calc(100% - 140px),var(--container))}
  .site-header{width:calc(100% - 108px);height:104px}
  .brand{font-size:37px;gap:12px}
  .brand img{width:44px;height:44px}
  .desktop-nav{gap:47px;margin-right:50px;font-size:15px}
  .button-small{min-height:49px;padding-inline:30px}

  /* Hero */
  .hero{height:1055px;min-height:1055px;padding-top:104px}
  .hero .container{width:min(calc(100% - 120px),1371px)}
  .hero-grid{height:951px;min-height:951px;grid-template-columns:52% 48%;align-items:center}
  .hero-copy{padding-top:0;transform:translateY(-75px)}
  .hero .eyebrow{font-size:14px;padding:9px 17px}
  .hero h1{font-size:58px;line-height:1.13;max-width:705px;margin:31px 0 34px;letter-spacing:-.043em;text-wrap:initial}
  .hero-lead{font-size:18px;line-height:1.72;margin-bottom:49px}
  .hero-actions .button{min-width:226px;min-height:60px}
  .micro-trust{margin:28px 0 38px}
  .trust-pills span{padding:12px 16px;font-size:13px}
  .hero-media{width:1150px;right:-125px;bottom:50px}
  .hero-media:before,.hero-media:after{display:none}
  .hero-media img{mask-image:none;-webkit-mask-image:none}

  /* Shared typography */
  .section-head{max-width:1120px}
  .section-head h2{font-size:58px;line-height:1.08}
  .section-head p{font-size:18px;line-height:1.65}

  /* Workflow */
  .workflow{height:1055px;min-height:1055px;padding:96px 0 64px}
  .workflow .section-head{max-width:1220px}
  .workflow .section-head h2{font-size:58px;white-space:nowrap;margin-top:26px;margin-bottom:20px}
  .workflow .section-head p{font-size:18px}
  .steps-grid{margin-top:65px;gap:64px}
  .step-card{height:328px;border-radius:22px;padding:25px 27px}
  .step-card h3{font-size:19px}
  .step-card p{font-size:14.5px;line-height:1.55}
  .step-icon{margin:35px 0 22px}
  .document-row{margin-top:63px;gap:36px}
  .document-row>div{height:94px}
  .section-signature{margin-top:75px}

  /* Product interface */
  .interface-section{height:1055px;min-height:1055px;padding:25px 0 54px}
  .wide-container{width:min(calc(100% - 68px),1423px)}
  .interface-kicker{font-size:13px;padding:7px 15px;margin-bottom:0}
  .interface-section .section-head{max-width:1250px}
  .interface-section .section-head h2{font-size:48px;white-space:nowrap;margin:18px 0 9px;letter-spacing:-.04em}
  .interface-section .section-head p{font-size:17px;line-height:1.55}
  .interface-stage{width:1329px;margin-top:37px;grid-template-columns:178px 1fr;gap:53px}
  .callouts{gap:30px;transform:translateY(29px)}
  .callouts article{border-radius:17px;padding:17px 15px 16px}
  .callout-icon{width:48px;height:48px;margin-bottom:14px}
  .callouts h3{font-size:15px}
  .callouts p{font-size:12.5px;line-height:1.55}
  .callouts article:after{right:-54px;width:48px}
  .app-window{height:735px;grid-template-columns:215px minmax(470px,1fr) 240px}

  /* Local processing and security */
  .base-section,.security-section{height:1055px;min-height:1055px}
  .base-section>.container,.security-section>.container{width:min(calc(100% - 170px),1321px)}
  .base-section{padding:104px 0 52px}
  .security-section{padding:55px 0 52px}
  .base-grid,.security-grid{grid-template-columns:minmax(0,820px) minmax(0,388px);gap:68px}
  .base-copy h2,.security-copy h2{font-size:56px;line-height:1.08;margin-bottom:17px;letter-spacing:-.04em}
  .base-copy>p,.security-copy>p{font-size:18px;line-height:1.65;max-width:650px}
  .base-copy{position:relative;top:9px}
  .base-visual{position:relative;top:35px;width:900px;height:439px;margin:30px 0 0 -68px}
  .security-device{position:relative;top:39px;width:855px;height:396px;margin:8px 0 0 -40px}
  .architecture-pill{margin-left:78px;padding:11px 19px;font-size:14px}
  .local-pill{margin-left:0;padding:11px 19px;font-size:14px}
  .feature-stack{gap:13px;margin-top:7px}
  .base-section .feature-stack{margin-top:-5px}
  .security-section .feature-stack{margin-top:44px}
  .feature-stack article{min-height:149px;padding:20px 23px;gap:20px;border-radius:20px}
  .round-icon{width:78px;height:78px}
  .round-icon svg{font-size:45px}
  .feature-stack h3{font-size:19px}
  .feature-stack p{font-size:15px;line-height:1.45}
  .architecture-flow,.data-flow{min-height:160px;margin-top:42px;padding:23px 38px}
  .security-section .data-flow{margin-top:20px}
  .flow-icon{font-size:68px}
  .flow-brand img{width:72px;height:72px}
  .flow-brand b{font-size:27px}
  .architecture-flow b,.data-flow b{font-size:16px}
  .architecture-flow small,.data-flow small{font-size:13px}

  /* FAQ */
  .faq-section{height:1055px;min-height:1055px;padding:45px 0 58px}
  .faq-section>.container{width:min(calc(100% - 156px),1335px)}
  .faq-section .section-head{max-width:1220px}
  .faq-section .section-head h2{font-size:58px;white-space:nowrap;margin:35px 0 16px}
  .faq-section .section-head p{font-size:18px}
  .faq-grid{gap:30px;margin-top:76px}
  .faq-card button{height:93px;padding-inline:25px}
  .faq-index{width:45px;height:45px}
  .faq-card button b{font-size:17px}
  .faq-answer p{padding:18px 26px 22px;font-size:16px;line-height:1.55}
  .faq-card.open button svg{transform:none}
  .faq-summary{margin-top:82px;min-height:194px}
  .faq-summary article{padding:32px 42px;gap:22px}
  .summary-icon{width:82px;height:82px}
  .summary-icon svg{font-size:42px}
  .faq-summary h3{font-size:17px}
  .faq-summary p{font-size:15px}

  /* Closing CTA */
  .cta-section{height:1055px;min-height:1055px;padding-top:88px}
  .cta-content{padding-top:71px}
  .cta-content h2{font-size:70px;line-height:1.06;margin-bottom:22px}
  .cta-content p{font-size:17px;line-height:1.65}
  .cta-actions{margin-top:56px}
  .cta-actions .button{min-width:318px;height:70px;font-size:20px}
  .cta-pills{margin-top:69px;gap:34px}
  .cta-pills span{padding:13px 24px}
  .cta-arc{top:84px;width:min(64vw,915px);height:365px}
  .gradient-rule{top:708px}
  .site-footer{bottom:38px;width:min(calc(100% - 170px),1321px);height:250px;padding-top:48px}
  .footer-brand{font-size:48px}
  .footer-brand img{width:62px;height:62px}
  .site-footer nav{gap:56px;padding-top:34px}
  .footer-brand,.site-footer nav{position:relative;top:-18px}
  .site-footer p{padding-top:35px;margin-top:17px}
}

/* ─────────────────────────────────────────────────────────────
   Apple-like motion & depth pass
   ───────────────────────────────────────────────────────────── */
:root{
  --pointer-x:50%;
  --pointer-y:38%;
  --hero-tilt-x:0deg;
  --hero-tilt-y:0deg;
  --hero-shift-x:0px;
  --hero-shift-y:0px;
  --glass:rgba(8,13,35,.58);
  --glass-border:rgba(255,255,255,.14);
  --ease-apple:cubic-bezier(.22,1,.36,1);
}
body{background:#02040d}
.page-noise{position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.018;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}
.scroll-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:200;pointer-events:none;background:rgba(255,255,255,.03)}
.scroll-progress span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--mint),#79a8ff,var(--violet),var(--coral));box-shadow:0 0 16px rgba(124,77,255,.72);will-change:transform}

.site-header{position:fixed;top:14px;height:76px;padding:0 10px 0 18px;border:1px solid transparent;border-radius:24px;transition:width .55s var(--ease-apple),height .55s var(--ease-apple),background .45s ease,border-color .45s ease,box-shadow .45s ease,backdrop-filter .45s ease,top .45s var(--ease-apple);will-change:transform,background;transform:translateX(-50%) translateZ(0)}
.site-header.is-scrolled{top:10px;width:min(calc(100% - 30px),1190px);height:68px;background:rgba(5,10,31,.68);border-color:rgba(255,255,255,.13);box-shadow:0 18px 60px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(24px) saturate(150%)}
.site-header .brand,.site-header .brand img,.site-header .desktop-nav,.site-header .button-small{transition:all .5s var(--ease-apple)}
.site-header.is-scrolled .brand{font-size:31px}.site-header.is-scrolled .brand img{width:38px;height:38px}.site-header.is-scrolled .desktop-nav{font-size:14px}.site-header.is-scrolled .button-small{min-height:44px}
.desktop-nav a{position:relative;padding:10px 0}
.desktop-nav a:after{content:"";position:absolute;left:50%;right:50%;bottom:4px;height:1px;background:linear-gradient(90deg,var(--mint),var(--violet));transition:left .35s var(--ease-apple),right .35s var(--ease-apple);box-shadow:0 0 10px rgba(124,77,255,.7)}
.desktop-nav a:hover:after{left:0;right:0}

.button{position:relative;isolation:isolate;overflow:hidden;transition:transform .45s var(--ease-apple),box-shadow .45s var(--ease-apple),border-color .35s ease,background .35s ease}
.button:before{content:"";position:absolute;inset:1px;border-radius:inherit;z-index:-1;background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 38% 68%,rgba(255,255,255,.08));opacity:.55;pointer-events:none}
.button:after{content:"";position:absolute;top:-120%;left:-45%;width:38%;height:340%;transform:rotate(24deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);transition:left .8s var(--ease-apple);pointer-events:none}
.button:hover:after{left:120%}
.button:hover{transform:translateY(-3px) scale(1.015)}
.button:active{transform:translateY(-1px) scale(.985);transition-duration:.12s}
.button-gradient{background-size:180% 180%;animation:gradientDrift 9s ease-in-out infinite;box-shadow:0 16px 44px rgba(91,72,255,.26),0 0 0 1px rgba(255,255,255,.12) inset,0 1px 0 rgba(255,255,255,.5) inset}
.button-outline{background:rgba(6,11,31,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 34px rgba(0,0,0,.13);backdrop-filter:blur(18px) saturate(130%)}
.button-outline:hover{border-color:rgba(255,255,255,.58);background:rgba(13,20,48,.58)}

.dark-section{background:
  radial-gradient(ellipse 54% 46% at 82% 23%,rgba(91,79,246,.10),transparent 74%),
  radial-gradient(ellipse 42% 38% at 13% 8%,rgba(35,69,151,.20),transparent 72%),
  linear-gradient(145deg,#09112a 0%,#050a1f 42%,#02040d 100%)}
.dark-section:before{content:"";position:absolute;inset:-30%;pointer-events:none;background:radial-gradient(circle at var(--pointer-x) var(--pointer-y),rgba(106,109,255,.075),transparent 24%);opacity:.8;transition:opacity .4s ease}
.light-section:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--pointer-x) var(--pointer-y),rgba(124,77,255,.055),transparent 26%)}

.hero{isolation:isolate;background:
  radial-gradient(ellipse 55% 64% at 78% 44%,rgba(68,76,187,.19),transparent 70%),
  radial-gradient(ellipse 42% 50% at 10% 22%,rgba(32,72,145,.20),transparent 72%),
  radial-gradient(circle at 66% 84%,rgba(124,77,255,.10),transparent 24%),
  linear-gradient(142deg,#08122e 0%,#050a1f 44%,#01030b 100%)}
.hero:before{z-index:0;background:radial-gradient(circle 350px at var(--pointer-x) var(--pointer-y),rgba(125,101,255,.14),transparent 75%);opacity:1;transition:none}
.hero:after{z-index:8;height:320px;background:linear-gradient(to bottom,transparent 0%,rgba(1,3,13,.36) 52%,#02040d 100%)}
.hero-grid{z-index:3}
.hero-gridlines{position:absolute;inset:0;z-index:0;opacity:.08;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:78px 78px;mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 68%,transparent 100%);transform:perspective(700px) rotateX(65deg) translateY(36%);transform-origin:center bottom}
.hero-particles{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.82}
.hero-aurora{position:absolute;border-radius:999px;filter:blur(76px);pointer-events:none;z-index:0;mix-blend-mode:screen;will-change:transform}
.hero-aurora-mint{width:430px;height:210px;right:13%;bottom:13%;background:rgba(102,242,180,.15);animation:auroraMint 13s ease-in-out infinite alternate}
.hero-aurora-violet{width:520px;height:290px;right:2%;top:19%;background:rgba(124,77,255,.17);animation:auroraViolet 16s ease-in-out infinite alternate}
.hero-copy{position:relative;z-index:7}
.hero-copy:before{content:"";position:absolute;width:420px;height:420px;left:-180px;top:-110px;background:radial-gradient(circle,rgba(76,100,221,.15),transparent 68%);filter:blur(20px);pointer-events:none}
.hero-eyebrow{position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.06)}
.hero-eyebrow:after{content:"";position:absolute;inset:-100% auto -100% -25%;width:20%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);animation:eyebrowSweep 6.5s ease-in-out infinite}
.pulse{position:relative;animation:pulseCore 2.6s ease-in-out infinite}
.pulse:after{content:"";position:absolute;inset:-7px;border:1px solid rgba(102,242,180,.5);border-radius:50%;animation:pulseRing 2.6s ease-out infinite}
.hero h1{font-weight:590;text-shadow:0 2px 30px rgba(0,0,0,.22)}
.hero h1>span:first-child{display:inline-block;animation:titleBreathe 8s ease-in-out infinite}
.hero-gradient-text{display:inline-block;color:#fff;background:linear-gradient(92deg,#fff 0%,#fff 36%,#bdeee3 54%,#b3a8ff 77%,#fff 100%);background-size:230% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:titleGradient 8s ease-in-out infinite}
.hero-gradient-text .coral{-webkit-text-fill-color:var(--coral);filter:drop-shadow(0 0 15px rgba(255,155,122,.24))}
.hero-lead{max-width:610px;text-wrap:balance}
.micro-trust{width:max-content;padding:5px 11px 5px 2px;border-radius:999px;transition:background .3s ease}
.micro-trust:hover{background:rgba(255,255,255,.035)}
.trust-pills span,.cta-pills span{position:relative;overflow:hidden;transition:transform .45s var(--ease-apple),background .4s ease,border-color .4s ease,box-shadow .4s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.trust-pills span:before,.cta-pills span:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 15%,rgba(255,255,255,.09) 50%,transparent 85%);transform:translateX(-120%);animation:pillSheen 9s ease-in-out infinite}
.trust-pills span:nth-child(2):before,.cta-pills span:nth-child(2):before{animation-delay:2.6s}.trust-pills span:nth-child(3):before,.cta-pills span:nth-child(3):before{animation-delay:5.2s}
.trust-pills span:hover,.cta-pills span:hover{transform:translateY(-4px);background:rgba(15,23,52,.62);border-color:rgba(255,255,255,.24);box-shadow:0 16px 34px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08)}

.hero-media{z-index:4;perspective:1400px;transform-style:preserve-3d;will-change:transform;transform:translate3d(var(--hero-shift-x),var(--hero-shift-y),0) rotateX(var(--hero-tilt-x)) rotateY(var(--hero-tilt-y));transition:transform .3s ease-out}
.hero-media:before{display:block!important;content:"";position:absolute!important;inset:18% 9% 4% 20%!important;background:radial-gradient(ellipse,rgba(73,86,255,.28),rgba(102,242,180,.08) 36%,transparent 70%)!important;filter:blur(45px)!important;opacity:.92;animation:haloBreathe 7s ease-in-out infinite}
.hero-halo{position:absolute;z-index:-3;left:18%;right:2%;top:20%;bottom:8%;border-radius:50%;background:radial-gradient(ellipse,rgba(95,96,255,.20),transparent 69%);filter:blur(25px);animation:haloBreathe 7s ease-in-out infinite}
.hero-ring{position:absolute;z-index:-2;left:43%;top:47%;border:1px solid rgba(128,114,255,.22);border-radius:50%;filter:drop-shadow(0 0 9px rgba(124,77,255,.4));transform:translate(-50%,-50%) rotate(-14deg);pointer-events:none}
.hero-ring:before,.hero-ring:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#8f80ff;box-shadow:0 0 18px 4px rgba(124,77,255,.74)}
.hero-ring:before{left:9%;top:18%}.hero-ring:after{right:11%;bottom:19%;background:var(--mint);box-shadow:0 0 18px 4px rgba(102,242,180,.58)}
.hero-ring-one{width:430px;height:430px;animation:ringSpin 25s linear infinite}
.hero-ring-two{width:550px;height:315px;border-color:rgba(102,242,180,.10);animation:ringSpinReverse 32s linear infinite}
.hero-beam{position:absolute;z-index:-1;left:21%;right:2%;bottom:8%;height:36%;background:conic-gradient(from 252deg at 50% 100%,transparent 0deg,rgba(94,112,255,.08) 13deg,transparent 29deg);filter:blur(7px);transform-origin:50% 100%;animation:beamSweep 10s ease-in-out infinite}
.hero-scene-float{position:relative;will-change:transform;animation:heroFloat 7s ease-in-out infinite;filter:drop-shadow(0 42px 70px rgba(0,0,0,.26))}
.hero-scene-float img{position:relative;z-index:2}
.hero-sheen{position:absolute;z-index:3;inset:7% 2% 11% 19%;pointer-events:none;overflow:hidden;mask-image:linear-gradient(128deg,transparent 0%,#000 20%,#000 70%,transparent 100%)}
.hero-sheen:before{content:"";position:absolute;top:-20%;left:-25%;width:13%;height:145%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);filter:blur(2px);animation:sceneSheen 8.5s ease-in-out infinite}
.scroll-cue{position:absolute;z-index:12;left:50%;bottom:25px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;color:rgba(255,255,255,.45);font-size:10px;letter-spacing:.16em;text-transform:uppercase;transition:color .3s ease}
.scroll-cue:hover{color:rgba(255,255,255,.82)}
.scroll-cue span{width:24px;height:38px;border:1px solid rgba(255,255,255,.23);border-radius:999px;position:relative;background:rgba(255,255,255,.02);backdrop-filter:blur(8px)}
.scroll-cue span:after{content:"";position:absolute;left:50%;top:8px;width:3px;height:7px;border-radius:99px;background:var(--mint);transform:translateX(-50%);box-shadow:0 0 12px var(--mint);animation:scrollDot 2.2s ease-in-out infinite}

/* Cards and product UI: quiet continuous motion */
.step-card,.document-row>div,.feature-stack article,.architecture-flow,.data-flow,.faq-card,.faq-summary,.app-window,.callouts article{transition:transform .55s var(--ease-apple),border-color .4s ease,box-shadow .55s var(--ease-apple),background .4s ease}
.step-card,.feature-stack article,.document-row>div{overflow:hidden}
.step-card:before,.feature-stack article:before,.document-row>div:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% -20%,currentColor,transparent 45%);opacity:.025;transition:opacity .4s ease}
.step-card:hover,.feature-stack article:hover,.document-row>div:hover{transform:translateY(-8px);border-color:rgba(255,255,255,.34);box-shadow:0 28px 65px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.07)}
.step-card:hover:before,.feature-stack article:hover:before,.document-row>div:hover:before{opacity:.07}
.step-card:nth-of-type(1) .step-icon{animation:iconFloat 5.4s ease-in-out infinite}.step-card:nth-of-type(2) .step-icon{animation:iconFloat 5.8s ease-in-out .7s infinite}.step-card:nth-of-type(3) .step-icon{animation:iconFloat 5.1s ease-in-out 1.4s infinite}.step-card:nth-of-type(4) .step-icon{animation:iconFloat 6.1s ease-in-out 2.1s infinite}
.step-number{box-shadow:inset 0 0 18px rgba(255,255,255,.025);animation:numberGlow 5s ease-in-out infinite}
.connector{background-size:200% 100%;animation:connectorFlow 2.8s linear infinite}
.connector:before{animation:nodePulse 2.8s ease-in-out infinite}.connector:after{animation:nodePulse 2.8s ease-in-out 1.4s infinite}
.document-row>div{position:relative}.document-row>div svg:first-child{animation:iconFloat 6s ease-in-out infinite}.document-row>div:nth-child(2) svg:first-child{animation-delay:.7s}.document-row>div:nth-child(3) svg:first-child{animation-delay:1.4s}.document-row>div:nth-child(4) svg:first-child{animation-delay:2.1s}
.section-signature svg{animation:shieldBreathe 3.4s ease-in-out infinite}

.interface-section{overflow:hidden}
.interface-stage{perspective:1600px}
.app-window{position:relative;transform:rotateX(.35deg) rotateY(-.35deg);box-shadow:0 34px 90px rgba(52,42,34,.16),0 2px 0 rgba(255,255,255,.9) inset;animation:windowHover 9s ease-in-out infinite}
.app-window:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 15%,rgba(255,255,255,.45) 31%,transparent 45%);transform:translateX(-130%);animation:windowSheen 12s ease-in-out infinite}
.app-window:hover{transform:translateY(-5px) rotateX(.35deg) rotateY(-.35deg);box-shadow:0 45px 115px rgba(52,42,34,.20),0 2px 0 rgba(255,255,255,.9) inset}
.callouts article:hover{transform:translateX(6px) translateY(-3px);box-shadow:0 20px 48px rgba(48,42,35,.13)}
.callout-icon,.round-icon,.summary-icon{animation:iconHalo 6s ease-in-out infinite}.callouts article:nth-child(2) .callout-icon,.feature-stack article:nth-child(2) .round-icon{animation-delay:1.2s}.callouts article:nth-child(3) .callout-icon,.feature-stack article:nth-child(3) .round-icon{animation-delay:2.4s}.feature-stack article:nth-child(4) .round-icon{animation-delay:3.6s}

.feature-stack article{position:relative;backdrop-filter:blur(18px) saturate(120%)}
.feature-stack article:hover{background:linear-gradient(140deg,rgba(19,28,61,.82),rgba(6,11,30,.74))}
.architecture-flow,.data-flow{position:relative;overflow:hidden;backdrop-filter:blur(15px)}
.architecture-flow:after,.data-flow:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.035) 50%,transparent 65%);transform:translateX(-100%);animation:flowSheen 10s ease-in-out infinite}
.flow-arrow{animation:flowPulse 2.8s ease-in-out infinite;filter:drop-shadow(0 0 8px currentColor)}
.base-visual img,.security-device img{animation:deviceFloat 8s ease-in-out infinite;filter:drop-shadow(0 35px 50px rgba(0,0,0,.24))}
.local-pill i{animation:statusBlink 2.5s ease-in-out infinite}

.faq-card:hover{transform:translateY(-5px);box-shadow:0 22px 55px rgba(48,42,35,.10);border-color:rgba(16,20,38,.17)}
.faq-index{box-shadow:0 8px 22px rgba(18,24,54,.18);transition:transform .45s var(--ease-apple)}
.faq-card:hover .faq-index{transform:scale(1.06) rotate(-2deg)}
.faq-summary{position:relative;overflow:hidden;box-shadow:0 22px 70px rgba(53,43,35,.08)}
.faq-summary:before{content:"";position:absolute;width:360px;height:220px;left:-70px;bottom:-130px;background:radial-gradient(circle,rgba(102,242,180,.16),transparent 70%);filter:blur(30px);animation:summaryGlow 9s ease-in-out infinite alternate}
.faq-summary:after{content:"";position:absolute;width:390px;height:240px;right:-100px;bottom:-150px;background:radial-gradient(circle,rgba(124,77,255,.14),transparent 70%);filter:blur(34px);animation:summaryGlow 11s ease-in-out 1s infinite alternate-reverse}
.faq-summary article{position:relative;z-index:1}

.cta-arc{animation:arcBreathe 7s ease-in-out infinite}
.cta-arc:before{animation:orbitSparkLeft 7s ease-in-out infinite}.cta-arc:after{animation:orbitSparkRight 7s ease-in-out infinite}
.gradient-rule{background-size:220% 100%;animation:gradientRule 7s linear infinite}
.cta-content h2{background:linear-gradient(92deg,#fff 0%,#fff 58%,#c6bfff 82%,#fff 100%);background-size:230% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:titleGradient 9s ease-in-out infinite}
.cta-content h2 .coral{-webkit-text-fill-color:var(--coral)}

@keyframes gradientDrift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes auroraMint{0%{transform:translate3d(-20px,12px,0) rotate(-7deg) scale(.9)}100%{transform:translate3d(55px,-28px,0) rotate(5deg) scale(1.18)}}
@keyframes auroraViolet{0%{transform:translate3d(25px,-18px,0) rotate(4deg) scale(1)}100%{transform:translate3d(-65px,38px,0) rotate(-7deg) scale(1.22)}}
@keyframes eyebrowSweep{0%,42%{left:-25%;opacity:0}52%{opacity:1}68%,100%{left:125%;opacity:0}}
@keyframes pulseCore{0%,100%{transform:scale(.9);box-shadow:0 0 12px var(--mint)}50%{transform:scale(1.08);box-shadow:0 0 24px var(--mint)}}
@keyframes pulseRing{0%{transform:scale(.4);opacity:.8}80%,100%{transform:scale(1.65);opacity:0}}
@keyframes titleBreathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.08)}}
@keyframes titleGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes pillSheen{0%,25%{transform:translateX(-125%)}45%,100%{transform:translateX(125%)}}
@keyframes haloBreathe{0%,100%{transform:scale(.94);opacity:.62}50%{transform:scale(1.08);opacity:1}}
@keyframes ringSpin{to{transform:translate(-50%,-50%) rotate(346deg)}}
@keyframes ringSpinReverse{to{transform:translate(-50%,-50%) rotate(-374deg)}}
@keyframes beamSweep{0%,100%{transform:rotate(-8deg);opacity:.3}50%{transform:rotate(10deg);opacity:.8}}
@keyframes heroFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-12px,0) scale(1.006)}}
@keyframes sceneSheen{0%,25%{left:-25%;opacity:0}36%{opacity:1}58%,100%{left:125%;opacity:0}}
@keyframes scrollDot{0%{transform:translate(-50%,0);opacity:0}25%{opacity:1}75%{opacity:1}100%{transform:translate(-50%,13px);opacity:0}}
@keyframes iconFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(1deg)}}
@keyframes numberGlow{0%,100%{box-shadow:inset 0 0 18px rgba(255,255,255,.025),0 0 0 rgba(255,255,255,0)}50%{box-shadow:inset 0 0 22px rgba(255,255,255,.05),0 0 18px rgba(124,77,255,.08)}}
@keyframes connectorFlow{to{background-position:200% 0}}
@keyframes nodePulse{0%,100%{transform:scale(.8);opacity:.55}50%{transform:scale(1.35);opacity:1}}
@keyframes shieldBreathe{0%,100%{filter:drop-shadow(0 0 0 rgba(102,242,180,0))}50%{filter:drop-shadow(0 0 10px rgba(102,242,180,.5))}}
@keyframes windowHover{0%,100%{transform:translateY(0) rotateX(.35deg) rotateY(-.35deg)}50%{transform:translateY(-4px) rotateX(.2deg) rotateY(.15deg)}}
@keyframes windowSheen{0%,30%{transform:translateX(-130%);opacity:0}40%{opacity:.75}65%,100%{transform:translateX(130%);opacity:0}}
@keyframes iconHalo{0%,100%{box-shadow:0 6px 18px rgba(35,31,27,.08)}50%{box-shadow:0 10px 28px rgba(102,93,255,.16)}}
@keyframes flowSheen{0%,35%{transform:translateX(-110%)}65%,100%{transform:translateX(110%)}}
@keyframes flowPulse{0%,100%{opacity:.55;transform:translateX(0)}50%{opacity:1;transform:translateX(4px)}}
@keyframes deviceFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes statusBlink{0%,100%{opacity:.45;box-shadow:0 0 5px var(--mint)}50%{opacity:1;box-shadow:0 0 16px var(--mint)}}
@keyframes summaryGlow{to{transform:translate(80px,-28px) scale(1.15)}}
@keyframes arcBreathe{0%,100%{opacity:.62;filter:brightness(.9)}50%{opacity:1;filter:brightness(1.2)}}
@keyframes orbitSparkLeft{0%,100%{transform:translate(0,0)}50%{transform:translate(55px,-48px)}}
@keyframes orbitSparkRight{0%,100%{transform:translate(0,0)}50%{transform:translate(-55px,-48px)}}
@keyframes gradientRule{to{background-position:220% 0}}

@media (min-width:1181px){
  .site-header{width:calc(100% - 108px);height:80px;top:14px}
  .site-header.is-scrolled{height:68px;width:min(calc(100% - 30px),1190px)}
  .hero-grid{grid-template-columns:50% 50%}
  .hero-copy{transform:translateY(-68px)}
  .hero h1{font-size:64px;line-height:1.07;max-width:760px;margin:30px 0 31px;letter-spacing:-.05em}
  .hero-lead{font-size:18px;line-height:1.7;margin-bottom:43px}
  .hero-media{width:1215px;right:-144px;bottom:24px}
  .scroll-cue{bottom:22px}
}

@media (max-width:1180px){
  .site-header{top:10px;height:72px}
  .hero-media{transform:none}
  .hero-ring-one{width:360px;height:360px}.hero-ring-two{width:470px;height:275px}
  .scroll-cue{display:none}
}

@media (max-width:960px){
  .site-header{width:calc(100% - 30px);padding-inline:12px;background:rgba(5,10,31,.24);backdrop-filter:blur(12px)}
  .site-header.is-scrolled{width:calc(100% - 20px)}
  .site-header.open .desktop-nav{top:80px;background:rgba(5,10,31,.86);box-shadow:0 24px 70px rgba(0,0,0,.34)}
  .hero-gridlines{opacity:.045;background-size:52px 52px}
  .hero-media{transform:none!important}
  .hero-ring{display:none}
  .hero-beam{opacity:.35}
  .app-window{animation:none;transform:none}
}

@media (max-width:700px){
  .page-noise{opacity:.012}
  .site-header{top:7px;height:68px;border-radius:19px}
  .site-header.is-scrolled{top:6px;height:62px}
  .site-header.is-scrolled .brand{font-size:27px}.site-header.is-scrolled .brand img{width:34px;height:34px}
  .hero{min-height:1020px}
  .hero-copy:before{width:270px;height:270px;left:-130px;top:-60px}
  .hero h1{font-size:47px;line-height:1.02;letter-spacing:-.052em}
  .hero-gradient-text{background-size:300% auto}
  .hero-media{width:158%;left:-31%;margin-top:12px}
  .hero-aurora-mint{width:260px;height:150px;right:-25%;bottom:16%}.hero-aurora-violet{width:310px;height:210px;right:-20%;top:47%}
  .hero-actions .button{min-height:58px}
  .trust-pills span{justify-content:flex-start}
  .step-card:hover,.feature-stack article:hover,.document-row>div:hover,.faq-card:hover{transform:none}
  .callouts article:hover{transform:none}
  .base-visual img,.security-device img{animation-duration:10s}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
  .hero-particles{display:none}.hero-media{transform:none!important}.page-noise{display:none}
}
.static-preview *, .static-preview *::before, .static-preview *::after{animation-play-state:paused!important}
.static-preview .hero-particles{display:none}
.static-preview .reveal{opacity:1!important;transform:none!important}
@media (min-width:1181px){
  .hero-grid{grid-template-columns:55% 45%}
  .hero h1{font-size:60px;max-width:780px}
  .hero-media{width:1175px;right:-158px}
}

/* ─────────────────────────────────────────────────────────────
   Performance pass — static Apple-like depth, no ambient motion
   ───────────────────────────────────────────────────────────── */
:root{
  --pointer-x:72%;
  --pointer-y:34%;
  --hero-tilt-x:0deg;
  --hero-tilt-y:0deg;
  --hero-shift-x:0px;
  --hero-shift-y:0px;
}

/* Continuous effects were intentionally removed. */
*,*::before,*::after{
  animation:none!important;
}
.page-noise,.scroll-progress,.hero-particles,.hero-ring,.hero-beam,.hero-sheen,.scroll-cue{
  display:none!important;
}

/* Avoid expensive compositing during scroll. */
.site-header,.hero-media,.hero-aurora,.app-window,.base-visual img,.security-device img{
  will-change:auto!important;
}
.site-header,.site-header.is-scrolled,.button-outline,.eyebrow,.trust-pills span,.cta-pills span,
.app-window,.architecture-pill,.local-pill,.architecture-flow,.data-flow{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.dark-section::before,.light-section::after{
  display:none!important;
}

/* Header stays refined, but changes only once on scroll. */
.site-header{
  transition:top .24s ease,height .24s ease,width .24s ease,background-color .24s ease,border-color .24s ease,box-shadow .24s ease!important;
}
.site-header .brand,.site-header .brand img,.site-header .desktop-nav,.site-header .button-small{
  transition:font-size .24s ease,width .24s ease,height .24s ease,min-height .24s ease!important;
}
.site-header.is-scrolled{
  background:rgba(5,10,31,.94)!important;
  box-shadow:0 14px 42px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.07)!important;
}

/* Hover is immediate and restrained rather than magnetic. */
.button{
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background-color .2s ease!important;
}
.button::after{display:none!important}
.button:hover{transform:translateY(-2px)!important}
.button:active{transform:translateY(0)!important}
.button-gradient{
  background-position:50% 50%!important;
  background-size:100% 100%!important;
}
.trust-pills span,.cta-pills span,.step-card,.document-types>div,.feature-stack article,.faq-card,.faq-summary article{
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background-color .2s ease!important;
}
.trust-pills span::before,.cta-pills span::before,.architecture-flow::after,.data-flow::after,
.faq-summary::before,.faq-summary::after,.cta-arc::before,.cta-arc::after{
  display:none!important;
}

/* Spectacular hero through static lighting and composition, not motion. */
.hero{
  background:
    radial-gradient(ellipse 58% 70% at 80% 45%,rgba(78,85,205,.24),transparent 68%),
    radial-gradient(ellipse 38% 48% at 9% 17%,rgba(31,75,151,.20),transparent 72%),
    radial-gradient(circle at 68% 82%,rgba(124,77,255,.13),transparent 25%),
    linear-gradient(142deg,#08122e 0%,#050a1f 45%,#01030b 100%)!important;
}
.hero-gridlines{opacity:.045!important}
.hero-aurora{
  filter:blur(68px)!important;
  mix-blend-mode:normal!important;
  transform:none!important;
}
.hero-aurora-mint{right:11%!important;bottom:8%!important;opacity:.7}
.hero-aurora-violet{right:0!important;top:16%!important;opacity:.72}
.hero-copy::before{filter:blur(32px)!important;opacity:.75}
.hero h1>span:first-child,.hero-gradient-text{
  transform:none!important;
  filter:none!important;
  background-position:48% 50%!important;
}
.hero-media{
  transform:none!important;
  transition:none!important;
  perspective:none!important;
}
.hero-media::before{
  animation:none!important;
  filter:blur(42px)!important;
  opacity:.82!important;
}
.hero-halo{
  animation:none!important;
  filter:blur(30px)!important;
  opacity:.78!important;
}
.hero-scene-float{
  transform:none!important;
  filter:drop-shadow(0 42px 55px rgba(0,0,0,.22));
}
.hero-scene-float img{transform:none!important}

/* Entry motion occurs once and remains lightweight. */
.reveal{
  transform:translateY(12px)!important;
  transition:opacity .42s ease,transform .42s ease!important;
}
.reveal.is-visible{transform:none!important}
.reveal-delay{transition-delay:.06s!important}

/* Remove costly blur-based decoration lower in the page. */
.section-glow,.cta-arc{
  filter:none!important;
}
.base-visual img,.security-device img{
  transform:none!important;
  filter:drop-shadow(0 28px 38px rgba(0,0,0,.20))!important;
}
.flow-arrow,.local-pill i,.round-icon,.step-icon,.step-number,.app-window{
  transform:none!important;
}

@media (max-width:780px){
  .hero-aurora{filter:blur(48px)!important;opacity:.45!important}
  .site-header{background:rgba(5,10,31,.94)!important}
}

/* Additional compositing safeguards. */
.hero-orb,.hero-aurora,.hero-copy::before{display:none!important}
.hero-media::before{
  filter:none!important;
  background:radial-gradient(ellipse at 56% 58%,rgba(77,84,219,.22),rgba(102,242,180,.05) 38%,transparent 72%)!important;
  opacity:.82!important;
}
.hero-halo{
  filter:none!important;
  background:radial-gradient(ellipse,rgba(95,96,255,.15),transparent 68%)!important;
}
.feature-stack article,.site-header.open .desktop-nav{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.hero-scene-float,.base-visual img,.security-device img{
  filter:none!important;
}

/* ─────────────────────────────────────────────────────────────
   Refinement pass — full-height hero + richer static backgrounds
   ───────────────────────────────────────────────────────────── */
body{
  background:
    radial-gradient(72% 46% at 12% -6%, rgba(102,242,180,.05), transparent 62%),
    radial-gradient(48% 34% at 100% 18%, rgba(124,77,255,.06), transparent 60%),
    #02040d!important;
}

.hero,
.workflow,
.interface-section,
.base-section,
.security-section,
.faq-section,
.cta-section{
  position:relative;
  overflow:hidden;
}

.hero{
  background:
    radial-gradient(circle at 10% 18%, rgba(255,255,255,.08) 0 1px, transparent 1.7px),
    radial-gradient(circle at 17% 74%, rgba(102,242,180,.18) 0 1.3px, transparent 2px),
    radial-gradient(circle at 83% 26%, rgba(124,77,255,.20) 0 1.2px, transparent 2px),
    radial-gradient(circle at 72% 84%, rgba(255,255,255,.07) 0 1px, transparent 1.6px),
    radial-gradient(ellipse 60% 74% at 82% 46%, rgba(80,90,215,.24), transparent 68%),
    radial-gradient(ellipse 42% 56% at 8% 16%, rgba(31,75,151,.18), transparent 72%),
    linear-gradient(145deg,#08122e 0%,#050a1f 46%,#01030b 100%)!important;
}

.workflow{
  background:
    radial-gradient(circle at 9% 16%, rgba(255,255,255,.07) 0 1px, transparent 1.7px),
    radial-gradient(circle at 88% 14%, rgba(102,242,180,.16) 0 1.2px, transparent 2px),
    radial-gradient(circle at 16% 83%, rgba(124,77,255,.20) 0 1.3px, transparent 2px),
    radial-gradient(circle at 78% 74%, rgba(255,255,255,.07) 0 1px, transparent 1.6px),
    radial-gradient(ellipse at 14% 20%, rgba(102,242,180,.06), transparent 20%),
    radial-gradient(ellipse at 86% 82%, rgba(124,77,255,.07), transparent 22%),
    linear-gradient(180deg,#06102a 0%,#050a1f 52%,#030712 100%)!important;
}

.interface-section{
  background:
    radial-gradient(circle at 9% 18%, rgba(124,77,255,.11) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 90% 20%, rgba(102,242,180,.11) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 18% 76%, rgba(255,155,122,.09) 0 1px, transparent 1.6px),
    radial-gradient(circle at 84% 82%, rgba(16,20,38,.08) 0 1px, transparent 1.6px),
    radial-gradient(ellipse at 10% 18%, rgba(124,77,255,.05), transparent 24%),
    radial-gradient(ellipse at 90% 84%, rgba(102,242,180,.05), transparent 22%),
    radial-gradient(circle at 50% 0%, #fff 0%, #faf7f2 60%, #f5efe8 100%)!important;
}

.base-section,
.security-section,
.cta-section{
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.07) 0 1px, transparent 1.7px),
    radial-gradient(circle at 89% 24%, rgba(102,242,180,.16) 0 1.2px, transparent 2px),
    radial-gradient(circle at 18% 86%, rgba(124,77,255,.18) 0 1.3px, transparent 2px),
    radial-gradient(circle at 80% 78%, rgba(255,255,255,.07) 0 1px, transparent 1.6px),
    radial-gradient(ellipse at 11% 20%, rgba(102,242,180,.06), transparent 18%),
    radial-gradient(ellipse at 86% 76%, rgba(124,77,255,.07), transparent 22%),
    linear-gradient(180deg,#06102a 0%,#050a1f 55%,#02040d 100%)!important;
}

.faq-section{
  background:
    radial-gradient(circle at 10% 15%, rgba(124,77,255,.08) 0 1px, transparent 1.6px),
    radial-gradient(circle at 88% 18%, rgba(102,242,180,.15) 0 1.2px, transparent 2px),
    radial-gradient(circle at 22% 84%, rgba(255,255,255,.07) 0 1px, transparent 1.6px),
    radial-gradient(circle at 76% 78%, rgba(255,155,122,.12) 0 1.2px, transparent 2px),
    radial-gradient(ellipse at 14% 18%, rgba(124,77,255,.06), transparent 18%),
    radial-gradient(ellipse at 86% 82%, rgba(102,242,180,.06), transparent 20%),
    linear-gradient(180deg,#f7f3ee 0%,#fbf8f3 54%,#f4ede7 100%)!important;
}

.hero-gridlines{
  opacity:.055!important;
  background-size:72px 72px!important;
}

@media (min-width: 981px){
  .hero{
    min-height:100svh!important;
    padding-top:0!important;
  }

  .hero-grid{
    min-height:100svh!important;
    height:100svh!important;
    grid-template-columns:minmax(0,44%) minmax(0,56%)!important;
    align-items:stretch!important;
  }

  .hero-copy{
    align-self:center!important;
    padding-top:132px!important;
    padding-bottom:74px!important;
    transform:none!important;
  }

  .hero-media{
    position:absolute!important;
    top:0!important;
    bottom:0!important;
    right:-7vw!important;
    width:min(60vw,1040px)!important;
    height:100%!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:flex-end!important;
  }

  .hero-halo{
    left:16%!important;
    right:-2%!important;
    top:10%!important;
    bottom:0!important;
  }

  .hero-scene-float{
    height:100%!important;
    width:100%!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:flex-end!important;
  }

  .hero-scene-float img{
    width:auto!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:right bottom!important;
  }
}

@media (min-width: 981px) and (max-width: 1320px){
  .hero-grid{grid-template-columns:minmax(0,47%) minmax(0,53%)!important}
  .hero-media{width:min(63vw,980px)!important;right:-11vw!important}
}

@media (max-width: 980px){
  .hero{
    background:
      radial-gradient(circle at 12% 16%, rgba(255,255,255,.08) 0 1px, transparent 1.6px),
      radial-gradient(circle at 85% 28%, rgba(124,77,255,.18) 0 1.2px, transparent 1.9px),
      radial-gradient(circle at 18% 82%, rgba(102,242,180,.14) 0 1.2px, transparent 1.9px),
      radial-gradient(ellipse 70% 60% at 72% 52%, rgba(80,90,215,.18), transparent 68%),
      linear-gradient(145deg,#08122e 0%,#050a1f 46%,#01030b 100%)!important;
  }

  .hero-grid{
    min-height:auto!important;
    height:auto!important;
  }

  .hero-media{
    width:146%!important;
    left:-24%!important;
  }
}

/* ─────────────────────────────────────────────────────────────
   V3 refinement — right-flush hero, visible ambient details, fixed-open FAQ
   ───────────────────────────────────────────────────────────── */
body{position:relative;isolation:isolate}
header.site-header,main{position:relative;z-index:2}

.ambient-layer{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.ambient-glow,
.ambient-spark{
  position:absolute;
  border-radius:999px;
}
.ambient-glow{
  opacity:.6;
  filter:blur(58px);
  will-change:transform,opacity;
  animation:ambientDrift 18s ease-in-out infinite alternate;
}
.ambient-glow-mint{background:radial-gradient(circle,rgba(102,242,180,.26) 0%, rgba(102,242,180,.1) 42%, transparent 72%)}
.ambient-glow-violet{background:radial-gradient(circle,rgba(124,77,255,.26) 0%, rgba(124,77,255,.1) 42%, transparent 72%)}
.ambient-glow-coral{background:radial-gradient(circle,rgba(255,155,122,.24) 0%, rgba(255,155,122,.08) 42%, transparent 72%)}
.ambient-glow-blue{background:radial-gradient(circle,rgba(107,160,255,.24) 0%, rgba(107,160,255,.08) 42%, transparent 72%)}
.glow-a{width:340px;height:340px;left:-90px;top:10%;animation-duration:22s}
.glow-b{width:420px;height:420px;right:-120px;top:28%;animation-duration:26s;animation-delay:-7s}
.glow-c{width:280px;height:280px;left:12%;bottom:8%;animation-duration:19s;animation-delay:-11s}
.glow-d{width:360px;height:360px;right:18%;bottom:-100px;animation-duration:24s;animation-delay:-4s}

.ambient-spark{
  width:6px;
  height:6px;
  background:rgba(255,255,255,.75);
  box-shadow:0 0 12px rgba(255,255,255,.45), 0 0 32px rgba(124,77,255,.22);
  opacity:.45;
  animation:sparkle 8s ease-in-out infinite;
  will-change:transform,opacity;
}
.ambient-spark::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:26px;height:1px;
  transform:translate(-50%,-50%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  opacity:.7;
}
.s1{left:8%;top:14%;animation-delay:-1s}.s2{left:18%;top:39%;animation-delay:-3s}.s3{left:29%;top:72%;animation-delay:-5s}
.s4{left:39%;top:18%;animation-delay:-1.5s}.s5{left:52%;top:58%;animation-delay:-6s}.s6{left:63%;top:27%;animation-delay:-2s}
.s7{left:74%;top:74%;animation-delay:-4.5s}.s8{left:86%;top:16%;animation-delay:-7s}.s9{left:91%;top:46%;animation-delay:-2.8s}
.s10{left:12%;top:87%;animation-delay:-5.3s}.s11{left:48%;top:85%;animation-delay:-3.8s}.s12{left:69%;top:9%;animation-delay:-6.6s}

@keyframes ambientDrift{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.42}
  50%{opacity:.62}
  100%{transform:translate3d(24px,-18px,0) scale(1.08);opacity:.5}
}
@keyframes sparkle{
  0%,100%{transform:translate3d(0,0,0) scale(.9);opacity:.28}
  35%{opacity:.72}
  50%{transform:translate3d(0,-8px,0) scale(1.1);opacity:.88}
  80%{opacity:.42}
}

/* Slight section-local accent lines / lights */
.hero::after,
.workflow::after,
.base-section::after,
.security-section::after,
.cta-section::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(102,242,180,.15) 18%, rgba(124,77,255,.2) 52%, rgba(255,155,122,.15) 84%, transparent 100%);
  opacity:.75;
  pointer-events:none;
}

/* Make the hero visual really hug the right side of the viewport */
@media (min-width: 981px){
  .hero-media{
    right:0!important;
    width:min(63vw,1120px)!important;
  }
  .hero-scene-float{
    justify-content:flex-end!important;
  }
  .hero-scene-float img{
    height:100%!important;
    width:auto!important;
    max-width:none!important;
    transform:translateX(5.5%)!important;
    object-position:right bottom!important;
  }
}
@media (min-width:981px) and (max-width:1320px){
  .hero-media{width:min(66vw,1040px)!important}
  .hero-scene-float img{transform:translateX(7%)!important}
}

/* FAQ should stay open and not be collapsible */
.faq-card button{
  cursor:default!important;
  pointer-events:none!important;
}
.faq-card button svg{
  transform:none!important;
  color:#7e8aa7!important;
}
.faq-answer{
  max-height:none!important;
  overflow:visible!important;
}
.faq-card.open .faq-answer{max-height:none!important}

@media (prefers-reduced-motion: reduce){
  .ambient-glow,
  .ambient-spark{animation:none!important}
}

@media (max-width:980px){
  .ambient-layer{opacity:.9}
  .ambient-glow{filter:blur(42px)}
  .ambient-spark{width:5px;height:5px}
}

/* ─────────────────────────────────────────────────────────────
   V4 polish — strict 100vh hero, visible animated background lights, FAQ heads
   ───────────────────────────────────────────────────────────── */

/* Section content above decorative layers */
.hero > .container,
.workflow > .container,
.interface-section > .container,
.base-section > .container,
.security-section > .container,
.faq-section > .container,
.cta-section > .container,
.site-footer{
  position:relative;
  z-index:2;
}

/* More visible ambient lighting inside sections */
.hero::before,
.workflow::before,
.interface-section::before,
.base-section::before,
.security-section::before,
.faq-section::before,
.cta-section::before{
  content:""!important;
  display:block!important;
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:1!important;
}

.hero::before,
.workflow::before,
.base-section::before,
.security-section::before,
.cta-section::before{
  background:
    radial-gradient(3px 3px at 8% 18%, rgba(255,255,255,.82), transparent 56%),
    radial-gradient(4px 4px at 17% 68%, rgba(102,242,180,.85), transparent 58%),
    radial-gradient(3px 3px at 31% 26%, rgba(124,77,255,.75), transparent 56%),
    radial-gradient(3px 3px at 46% 79%, rgba(255,255,255,.65), transparent 56%),
    radial-gradient(4px 4px at 61% 22%, rgba(102,242,180,.7), transparent 58%),
    radial-gradient(3px 3px at 76% 61%, rgba(124,77,255,.76), transparent 56%),
    radial-gradient(3px 3px at 89% 16%, rgba(255,255,255,.85), transparent 56%),
    radial-gradient(340px 220px at 11% 18%, rgba(102,242,180,.08), transparent 62%),
    radial-gradient(380px 280px at 88% 24%, rgba(124,77,255,.10), transparent 66%),
    radial-gradient(280px 180px at 72% 82%, rgba(255,155,122,.07), transparent 64%);
  animation:sectionLights 18s ease-in-out infinite alternate;
}

.interface-section::before,
.faq-section::before{
  background:
    radial-gradient(3px 3px at 9% 18%, rgba(124,77,255,.28), transparent 58%),
    radial-gradient(3px 3px at 84% 19%, rgba(102,242,180,.28), transparent 58%),
    radial-gradient(3px 3px at 15% 78%, rgba(255,155,122,.24), transparent 58%),
    radial-gradient(3px 3px at 79% 74%, rgba(124,77,255,.18), transparent 58%),
    radial-gradient(240px 180px at 12% 20%, rgba(124,77,255,.045), transparent 62%),
    radial-gradient(240px 180px at 88% 80%, rgba(102,242,180,.05), transparent 62%);
  animation:sectionLightsSoft 22s ease-in-out infinite alternate;
}

@keyframes sectionLights{
  0%{transform:translate3d(0,0,0);opacity:.82}
  50%{opacity:1}
  100%{transform:translate3d(10px,-8px,0);opacity:.88}
}
@keyframes sectionLightsSoft{
  0%{transform:translate3d(0,0,0);opacity:.95}
  100%{transform:translate3d(-8px,8px,0);opacity:1}
}

/* Hero constrained to viewport height and image hard-aligned right */
@media (min-width:981px){
  .hero{
    height:100svh!important;
    min-height:760px!important;
    max-height:100svh!important;
    padding-top:0!important;
  }
  .hero-grid{
    height:100%!important;
    min-height:100%!important;
    max-height:100%!important;
    align-items:center!important;
  }
  .hero-copy{
    align-self:center!important;
    padding-top:108px!important;
    padding-bottom:56px!important;
  }
  .hero-media{
    top:0!important;
    bottom:0!important;
    right:-1px!important;
    left:auto!important;
    width:min(64vw,1120px)!important;
    height:100%!important;
    overflow:hidden!important;
  }
  .hero-scene-float{
    width:100%!important;
    height:100%!important;
    align-items:flex-end!important;
    justify-content:flex-end!important;
    overflow:visible!important;
  }
  .hero-scene-float img{
    width:auto!important;
    height:100%!important;
    max-width:none!important;
    flex:none!important;
    object-fit:contain!important;
    object-position:right bottom!important;
    transform:translateX(9.5%)!important;
    margin-right:-2px!important;
  }
}
@media (min-width:981px) and (max-width:1280px){
  .hero{min-height:720px!important}
  .hero-media{width:min(67vw,1060px)!important}
  .hero-scene-float img{transform:translateX(12%)!important}
}
@media (max-width:980px){
  .hero{min-height:980px!important;max-height:none!important;height:auto!important}
}

/* FAQ header without button */
.faq-card .faq-head{
  width:100%;
  min-height:92px;
  border-bottom:1px solid rgba(16,20,38,.11);
  display:flex;
  align-items:center;
  padding:0 26px;
  gap:24px;
  color:var(--ink);
  text-align:left;
}
.faq-card .faq-head b{font-size:18px;letter-spacing:-.02em}
@media (max-width:900px){
  .faq-card .faq-head{min-height:88px;padding:17px}
  .faq-card .faq-head b{font-size:16px}
}

/* Previous button styling disabled if any remains */
.faq-card button{display:none!important}

@media (prefers-reduced-motion: reduce){
  .hero::before,
  .workflow::before,
  .interface-section::before,
  .base-section::before,
  .security-section::before,
  .faq-section::before,
  .cta-section::before{
    animation:none!important;
  }
}

/* ─────────────────────────────────────────────────────────────
   V5 final alignment + stronger animated section lights
   ───────────────────────────────────────────────────────────── */

/* The fixed ambient page layer was hidden by section backgrounds.
   Use section-level lighting instead. */
.ambient-layer{display:none!important}

/* HERO: exact viewport height on desktop, starts at the top, no extra height */
@media (min-width:981px){
  .hero{
    height:100vh!important;
    min-height:740px!important;
    max-height:100vh!important;
    padding-top:0!important;
  }

  .hero-grid.container{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    height:100%!important;
    min-height:100%!important;
    grid-template-columns:minmax(0,43%) minmax(0,57%)!important;
    padding-left:max(40px, calc((100vw - var(--container)) / 2))!important;
    padding-right:0!important;
    align-items:center!important;
  }

  .hero-copy{
    padding-top:110px!important;
    padding-bottom:42px!important;
    padding-right:clamp(28px, 4vw, 74px)!important;
    transform:none!important;
    align-self:center!important;
  }

  .hero-media{
    position:relative!important;
    right:0!important;
    left:auto!important;
    bottom:auto!important;
    top:auto!important;
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
    display:flex!important;
    justify-content:flex-end!important;
    align-items:flex-end!important;
  }

  .hero-scene-float{
    width:100%!important;
    height:100%!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:flex-end!important;
    overflow:hidden!important;
  }

  .hero-scene-float img{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:right bottom!important;
    transform:translateX(4.5%)!important;
    margin-right:-1.2vw!important;
    display:block!important;
  }

  .hero-halo{
    left:22%!important;
    right:-6%!important;
    top:16%!important;
    bottom:4%!important;
  }
}

@media (min-width:981px) and (max-width:1280px){
  .hero{min-height:700px!important}
  .hero-grid.container{grid-template-columns:minmax(0,46%) minmax(0,54%)!important}
  .hero-scene-float img{transform:translateX(7%)!important;margin-right:-2vw!important}
}

@media (max-width:980px){
  .hero{min-height:980px!important;height:auto!important;max-height:none!important}
}

/* Stronger visible animated background lights INSIDE each section */
.dark-section::before,
.light-section::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  opacity:1!important;
}

.dark-section::before{
  background:
    radial-gradient(4px 4px at 8% 15%, rgba(255,255,255,.95), transparent 58%),
    radial-gradient(5px 5px at 17% 61%, rgba(102,242,180,.95), transparent 58%),
    radial-gradient(4px 4px at 28% 24%, rgba(124,77,255,.9), transparent 58%),
    radial-gradient(4px 4px at 43% 82%, rgba(255,255,255,.82), transparent 58%),
    radial-gradient(5px 5px at 57% 19%, rgba(102,242,180,.9), transparent 58%),
    radial-gradient(4px 4px at 73% 63%, rgba(124,77,255,.9), transparent 58%),
    radial-gradient(4px 4px at 89% 14%, rgba(255,255,255,.98), transparent 58%),
    radial-gradient(5px 5px at 92% 46%, rgba(255,155,122,.95), transparent 58%),
    radial-gradient(320px 220px at 12% 18%, rgba(102,242,180,.12), transparent 68%),
    radial-gradient(420px 280px at 86% 22%, rgba(124,77,255,.18), transparent 70%),
    radial-gradient(340px 220px at 75% 78%, rgba(255,155,122,.12), transparent 70%),
    radial-gradient(300px 200px at 26% 82%, rgba(107,160,255,.12), transparent 68%);
  animation:glowFieldDark 12s ease-in-out infinite alternate!important;
}

.light-section::before{
  background:
    radial-gradient(4px 4px at 9% 18%, rgba(124,77,255,.32), transparent 58%),
    radial-gradient(4px 4px at 84% 19%, rgba(102,242,180,.34), transparent 58%),
    radial-gradient(4px 4px at 18% 74%, rgba(255,155,122,.28), transparent 58%),
    radial-gradient(4px 4px at 77% 77%, rgba(124,77,255,.26), transparent 58%),
    radial-gradient(250px 180px at 11% 18%, rgba(124,77,255,.08), transparent 68%),
    radial-gradient(260px 190px at 88% 82%, rgba(102,242,180,.08), transparent 68%),
    radial-gradient(220px 160px at 52% 10%, rgba(255,155,122,.06), transparent 68%);
  animation:glowFieldLight 14s ease-in-out infinite alternate!important;
}

@keyframes glowFieldDark{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.92}
  50%{opacity:1}
  100%{transform:translate3d(12px,-10px,0) scale(1.015);opacity:1}
}
@keyframes glowFieldLight{
  0%{transform:translate3d(0,0,0);opacity:.96}
  100%{transform:translate3d(-10px,8px,0);opacity:1}
}

/* make the points sparkle a bit more */
.hero .hero-aurora,
.workflow .hero-aurora,
.base-section .hero-aurora,
.security-section .hero-aurora,
.cta-section .hero-aurora{display:block!important}

@media (prefers-reduced-motion: reduce){
  .dark-section::before,
  .light-section::before{animation:none!important}
}

/* ─────────────────────────────────────────────────────────────
   V6 verified hero composition + visible animated lights
   ───────────────────────────────────────────────────────────── */

@media (min-width:981px){
  .hero{
    height:100vh!important;
    min-height:740px!important;
    max-height:100vh!important;
    padding:0!important;
  }

  .hero-grid.container{
    width:min(calc(100% - 96px),var(--container))!important;
    max-width:var(--container)!important;
    margin-inline:auto!important;
    padding:0!important;
    height:100%!important;
    min-height:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,48%) minmax(0,52%)!important;
    align-items:center!important;
  }

  .hero-copy{
    position:relative!important;
    z-index:8!important;
    padding-top:96px!important;
    padding-bottom:24px!important;
    padding-right:20px!important;
    transform:none!important;
  }

  /* Detached from the content container so it can touch the viewport edge. */
  .hero-media{
    position:absolute!important;
    inset:0 0 0 auto!important;
    width:auto!important;
    height:100%!important;
    z-index:3!important;
    overflow:visible!important;
    display:block!important;
  }

  .hero-scene-float{
    width:auto!important;
    height:100%!important;
    display:block!important;
    overflow:visible!important;
  }

  .hero-scene-float img{
    display:block!important;
    width:auto!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:right center!important;
    transform:none!important;
    margin:0!important;
  }

  .hero-halo{
    z-index:2!important;
    left:18%!important;
    right:0!important;
    top:10%!important;
    bottom:0!important;
  }
}

@media (min-width:981px) and (max-height:820px){
  .hero{min-height:680px!important}
  .hero-copy{padding-top:78px!important}
  .hero h1{font-size:clamp(48px,4.6vw,68px)!important;margin-top:24px!important;margin-bottom:18px!important}
  .hero-lead{font-size:17px!important;line-height:1.58!important;margin-bottom:24px!important}
  .micro-trust{margin:20px 0 25px!important}
}

/* Lights are above image/background but below copy. */
.dark-section::before,
.light-section::before{
  display:block!important;
}
.hero::before{z-index:6!important;mix-blend-mode:screen!important}
.workflow::before,
.base-section::before,
.security-section::before,
.cta-section::before{z-index:1!important;mix-blend-mode:screen!important}
.interface-section::before,
.faq-section::before{z-index:1!important;mix-blend-mode:multiply!important}

.dark-section::before{
  background:
    radial-gradient(5px 5px at 7% 14%, rgba(255,255,255,1), transparent 58%),
    radial-gradient(7px 7px at 16% 58%, rgba(102,242,180,1), transparent 58%),
    radial-gradient(5px 5px at 27% 24%, rgba(124,77,255,1), transparent 58%),
    radial-gradient(5px 5px at 42% 80%, rgba(255,255,255,.95), transparent 58%),
    radial-gradient(7px 7px at 56% 18%, rgba(102,242,180,1), transparent 58%),
    radial-gradient(5px 5px at 72% 62%, rgba(124,77,255,1), transparent 58%),
    radial-gradient(5px 5px at 88% 13%, rgba(255,255,255,1), transparent 58%),
    radial-gradient(7px 7px at 92% 46%, rgba(255,155,122,1), transparent 58%),
    radial-gradient(380px 250px at 11% 18%, rgba(102,242,180,.18), transparent 68%),
    radial-gradient(520px 340px at 86% 24%, rgba(124,77,255,.26), transparent 70%),
    radial-gradient(390px 240px at 74% 80%, rgba(255,155,122,.17), transparent 70%),
    radial-gradient(350px 230px at 25% 82%, rgba(107,160,255,.17), transparent 68%)!important;
  animation:glowFieldDarkStrong 9s ease-in-out infinite alternate!important;
}

.light-section::before{
  background:
    radial-gradient(5px 5px at 8% 18%, rgba(124,77,255,.42), transparent 58%),
    radial-gradient(5px 5px at 84% 18%, rgba(102,242,180,.45), transparent 58%),
    radial-gradient(5px 5px at 18% 74%, rgba(255,155,122,.38), transparent 58%),
    radial-gradient(5px 5px at 78% 76%, rgba(124,77,255,.35), transparent 58%),
    radial-gradient(300px 210px at 10% 18%, rgba(124,77,255,.11), transparent 68%),
    radial-gradient(300px 210px at 89% 80%, rgba(102,242,180,.11), transparent 68%),
    radial-gradient(260px 190px at 52% 9%, rgba(255,155,122,.09), transparent 68%)!important;
  animation:glowFieldLightStrong 11s ease-in-out infinite alternate!important;
}

@keyframes glowFieldDarkStrong{
  0%{transform:translate3d(-8px,8px,0) scale(1);opacity:.82}
  35%{opacity:1}
  70%{opacity:.9}
  100%{transform:translate3d(18px,-15px,0) scale(1.035);opacity:1}
}
@keyframes glowFieldLightStrong{
  0%{transform:translate3d(8px,-6px,0) scale(1);opacity:.86}
  100%{transform:translate3d(-16px,12px,0) scale(1.025);opacity:1}
}

/* Final hero framing after visual QA */
@media (min-width:981px){
  .hero-scene-float img{
    transform:translateX(12%)!important;
  }
  .hero::after{
    z-index:7!important;
    height:100%!important;
    background:linear-gradient(90deg,rgba(3,7,21,.52) 0%,rgba(3,7,21,.24) 34%,transparent 57%)!important;
  }
}

/* Header overlays the 100vh hero; it must not consume document height. */
.site-header{
  position:absolute!important;
  top:0!important;
}
.site-header{
  z-index:30!important;
}

/* ─────────────────────────────────────────────────────────────
   V7 — viewport-anchored hero media (verified on common screens)
   ───────────────────────────────────────────────────────────── */
@media (min-width:981px){
  /* Critical: the media is nested in .container in the DOM. Making the grid
     non-positioned anchors the absolute media to .hero, not to the container. */
  .hero-grid.container{
    position:static!important;
  }

  .hero-media{
    position:absolute!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:auto!important;
    height:100%!important;
    width:auto!important;
    margin:0!important;
  }

  .hero-scene-float,
  .hero-scene-float img{
    height:100%!important;
  }

  .hero-scene-float img{
    width:auto!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:right center!important;
    transform:translateX(10%)!important;
    margin:0!important;
  }
}

/* ─────────────────────────────────────────────────────────────
   V8 — product-first information hierarchy
   ───────────────────────────────────────────────────────────── */
body.v8{font-size:17px}
body.v8 .site-header{width:min(calc(100% - 72px),1380px)!important}
body.v8 .desktop-nav{gap:38px;margin-right:42px;font-size:17px;font-weight:520}
body.v8 .desktop-nav a{color:rgba(255,255,255,.86)}
body.v8 .button-small{font-size:16px;min-height:52px}

/* Hero: keep the appliance, but make the software outcome legible. */
body.v8 .hero h1{font-size:clamp(54px,4.6vw,76px);max-width:790px}
body.v8 .hero-lead{max-width:690px;font-size:19px;line-height:1.64;margin-bottom:30px}
body.v8 .micro-trust{font-size:16px;margin:25px 0 30px}
body.v8 .trust-pills span{font-size:15px;padding:12px 16px;background:rgba(8,13,35,.64)}


/* Workflow */
body.v8 .workflow{height:auto!important;min-height:0!important;padding:105px 0 95px!important}
body.v8 .workflow .section-head{max-width:980px}
body.v8 .workflow .section-head h2{font-size:clamp(48px,4.3vw,64px)!important;white-space:normal!important}
body.v8 .workflow .section-head p{font-size:18px;max-width:820px;margin-inline:auto}
body.v8 .steps-grid{gap:26px;margin-top:58px}
body.v8 .step-card{height:360px;padding:26px 25px}
body.v8 .step-card h3{font-size:21px;color:#fff}
body.v8 .step-card p{font-size:16px;line-height:1.56}
body.v8 .step-icon{margin:28px 0 20px}
body.v8 .source-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
body.v8 .source-chips span{font-size:11px;padding:5px 8px;border:1px solid rgba(102,242,180,.22);border-radius:999px;color:#aef4d7;background:rgba(102,242,180,.07)}
body.v8 .connector{top:143px}
body.v8 .document-row{gap:20px;margin-top:40px}
body.v8 .document-row>div{height:88px;font-size:16px}
body.v8 .section-signature{display:none}

/* Central product proof: significantly larger and easier to read. */
body.v8 .interface-section{height:auto!important;min-height:0!important;padding:82px 0 105px!important;background:linear-gradient(180deg,#fbf8f3 0%,#f7f3ee 100%)!important}
body.v8 .interface-section>.wide-container{width:min(calc(100% - 40px),1500px)!important;max-width:none!important}
body.v8 .interface-section .section-head{max-width:1120px}
body.v8 .interface-section .section-head h2{font-size:clamp(44px,4vw,60px)!important;white-space:normal!important;margin:18px 0 12px!important}
body.v8 .interface-section .section-head p{font-size:18px;line-height:1.55;max-width:920px;margin-inline:auto}
body.v8 .interface-stage{width:100%!important;max-width:1460px;margin:42px auto 0!important;grid-template-columns:205px minmax(0,1fr)!important;gap:25px!important;align-items:center}
body.v8 .callouts{gap:22px;transform:none!important}
body.v8 .callouts article{min-height:150px;padding:16px 15px;border-radius:17px}
body.v8 .callouts h3{font-size:15px;line-height:1.3}
body.v8 .callouts p{font-size:13px;line-height:1.5}
body.v8 .callout-icon{width:44px;height:44px;margin-bottom:12px}
body.v8 .callouts article:after{right:-27px;width:23px}
body.v8 .app-window{height:790px!important;grid-template-columns:220px minmax(530px,1fr) 265px!important;border-radius:20px;box-shadow:0 32px 80px rgba(37,32,27,.17)}
body.v8 .app-brand{font-size:23px}
body.v8 .patient-select{font-size:12px}
body.v8 .patient-select span{font-size:14px}
body.v8 .side-title{font-size:13px}
body.v8 .doc-list b{font-size:12px}
body.v8 .doc-list small{font-size:10px}
body.v8 .doc-list em{font-size:9px}
body.v8 .app-toolbar h3{font-size:19px}
body.v8 .app-toolbar span{font-size:10px}
body.v8 .document-sheet{margin:14px 18px;padding:0 20px}
body.v8 .document-sheet article{padding:14px 0}
body.v8 .document-sheet h4{font-size:13px;margin-bottom:8px}
body.v8 .document-sheet h4 span{font-size:9px}
body.v8 .document-sheet p{font-size:12px;line-height:1.55}
body.v8 .document-sheet dt{font-size:10px}
body.v8 .document-sheet dd{font-size:11px}
body.v8 .app-status b{font-size:10px}
body.v8 .app-status small{font-size:9px}
body.v8 .app-inspector{padding:66px 15px 16px}
body.v8 .inspector-card h4{font-size:13px}
body.v8 .inspector-card b{font-size:10px}
body.v8 .inspector-card small{font-size:9px}
body.v8 .inspector-card a{font-size:10px}
body.v8 .validate-button,body.v8 .copy-button{height:48px;font-size:11px}

/* Adaptation to cabinet habits */
body.v8 .adaptation-section{position:relative;padding:105px 0 110px;background:linear-gradient(180deg,#f7f3ee 0%,#fcfaf7 100%)!important;border-top:1px solid rgba(16,20,38,.08)}
body.v8 .adaptation-layout{display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);gap:70px;align-items:center}
body.v8 .adaptation-copy h2{font-size:clamp(44px,4vw,60px);line-height:1.08;letter-spacing:-.045em;margin:18px 0 22px;color:var(--ink)}
body.v8 .adaptation-copy>p{font-size:18px;line-height:1.65;color:#4c5672;max-width:600px}
body.v8 .pilot-note{margin-top:28px;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:9px 11px;padding:14px 16px;border:1px solid rgba(16,20,38,.1);border-radius:15px;background:#fff;color:#4b5671;font-size:14px}
body.v8 .pilot-note .pulse{width:8px;height:8px}
body.v8 .pilot-note b{color:var(--ink)}
body.v8 .adapt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
body.v8 .adapt-grid article{min-height:225px;padding:25px;border:1px solid rgba(16,20,38,.1);border-radius:20px;background:rgba(255,255,255,.78);box-shadow:0 16px 38px rgba(48,42,35,.06)}
body.v8 .adapt-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;margin-bottom:21px}
body.v8 .adapt-icon svg{font-size:28px}
body.v8 .adapt-grid h3{margin:0 0 11px;color:var(--ink);font-size:19px;line-height:1.3;letter-spacing:-.02em}
body.v8 .adapt-grid p{margin:0;color:#59647d;font-size:15px;line-height:1.58}

/* One single, compact local-data section. */
body.v8 .local-section{position:relative;padding:105px 0 92px;min-height:0!important;background:linear-gradient(180deg,#050a1f 0%,#030715 100%)!important}
body.v8 .local-layout{display:grid;grid-template-columns:minmax(0,43%) minmax(0,57%);gap:62px;align-items:center}
body.v8 .local-copy h2{font-size:clamp(46px,4.2vw,64px);line-height:1.06;letter-spacing:-.045em;margin:23px 0 20px}
body.v8 .local-copy>p{font-size:18px;line-height:1.65;color:rgba(255,255,255,.74);max-width:620px}
body.v8 .local-device-card{position:relative;height:325px;margin-top:28px;border:1px solid rgba(255,255,255,.12);border-radius:22px;overflow:hidden;background:radial-gradient(circle at 55% 30%,rgba(124,77,255,.14),transparent 45%),rgba(8,13,35,.54)}
body.v8 .local-device-card img{width:100%;height:100%;object-fit:cover;object-position:center 70%}
body.v8 .local-device-card>div{position:absolute;left:20px;bottom:18px;display:flex;flex-direction:column;padding:10px 14px;border-radius:12px;background:rgba(5,10,31,.84);border:1px solid rgba(255,255,255,.12)}
body.v8 .local-device-card b{font-size:16px}
body.v8 .local-device-card span{font-size:12px;color:rgba(255,255,255,.66)}
body.v8 .local-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
body.v8 .local-feature-grid article{min-height:205px;padding:24px 22px;border:1px solid rgba(255,255,255,.13);border-radius:20px;background:linear-gradient(145deg,rgba(15,20,45,.76),rgba(8,12,32,.58))}
body.v8 .local-feature-grid .round-icon{width:64px;height:64px;margin-bottom:20px}
body.v8 .local-feature-grid h3{margin:0 0 9px;font-size:20px}
body.v8 .local-feature-grid p{margin:0;font-size:15px;line-height:1.55;color:rgba(255,255,255,.68)}
body.v8 .local-flow{min-height:150px;margin-top:42px;padding:24px 32px;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:rgba(8,13,35,.48);display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:22px}
body.v8 .local-flow>div{display:flex;align-items:center;gap:17px}
body.v8 .local-flow b{display:block;font-size:16px}
body.v8 .local-flow small{display:block;font-size:13px;line-height:1.45;color:rgba(255,255,255,.62)}
body.v8 .local-flow .flow-icon{font-size:58px}
body.v8 .local-flow .flow-brand img{width:62px;height:62px}

/* FAQ: six concrete, always-open answers. */
body.v8 .faq-section{height:auto!important;min-height:0!important;padding:100px 0 105px!important}
body.v8 .faq-section .section-head{max-width:1000px}
body.v8 .faq-section .section-head h2{font-size:clamp(46px,4.1vw,60px)!important;white-space:normal!important;margin:28px 0 14px!important}
body.v8 .faq-section .section-head p{font-size:18px;line-height:1.55}
body.v8 .faq-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:55px}
body.v8 .faq-card{background:rgba(255,255,255,.72)}
body.v8 .faq-card .faq-head{min-height:78px;padding:0 22px;gap:18px}
body.v8 .faq-card .faq-head b{font-size:17px}
body.v8 .faq-index{width:40px;height:40px;flex:none}
body.v8 .faq-answer p{padding:18px 22px 22px;font-size:16px;line-height:1.58}

/* Pilot CTA and compact, structured footer. */
body.v8 .cta-section{height:auto!important;min-height:0!important;padding:100px 0 0!important;background:radial-gradient(ellipse at 50% 0%,#101a3a 0%,#050a1f 48%,#02040d 100%)!important}
body.v8 .cta-content{padding-top:0!important;text-align:center;max-width:1040px;margin-inline:auto}
body.v8 .cta-content .eyebrow{margin-bottom:28px}
body.v8 .cta-content h2{font-size:clamp(52px,4.7vw,70px)!important;line-height:1.05;margin:0 0 24px!important}
body.v8 .cta-content>p{font-size:18px;line-height:1.65;max-width:900px;margin:0 auto;color:rgba(255,255,255,.72)}
body.v8 .cta-actions{margin-top:40px}
body.v8 .cta-actions .button{min-width:280px;height:66px;font-size:18px}
body.v8 .cta-pills{margin-top:42px;gap:20px;justify-content:center}
body.v8 .cta-pills span{font-size:14px}
body.v8 .cta-arc{top:30px;height:360px;opacity:.55}
body.v8 .site-footer-v8{position:relative;z-index:3;margin-top:88px;border-top:1px solid rgba(255,255,255,.11);background:rgba(2,4,13,.48)}
body.v8 .footer-v8-inner{display:grid;grid-template-columns:minmax(280px,1.2fr) 1fr 1fr;gap:70px;padding:48px 0 38px}
body.v8 .footer-v8-brand .brand{font-size:34px}
body.v8 .footer-v8-brand .brand img{width:42px;height:42px}
body.v8 .footer-v8-brand p{margin:15px 0 0;max-width:330px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.58)}
body.v8 .footer-v8-nav,body.v8 .footer-v8-legal{display:grid;align-content:start;gap:12px;padding-top:5px}
body.v8 .footer-v8-nav a,body.v8 .footer-v8-legal a{font-size:15px;color:rgba(255,255,255,.68)}
body.v8 .footer-v8-nav a:hover,body.v8 .footer-v8-legal a:hover{color:#fff}
body.v8 .footer-v8-bottom{display:flex;justify-content:space-between;gap:20px;padding:20px 0 24px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:rgba(255,255,255,.45)}

@media (max-width:1180px){
  body.v8 .interface-stage{grid-template-columns:1fr!important}
  body.v8 .callouts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  body.v8 .callouts article{min-height:132px}
  body.v8 .callouts article:after{display:none}
  body.v8 .app-window{grid-template-columns:200px minmax(470px,1fr) 245px!important;height:760px!important}
  body.v8 .adaptation-layout,body.v8 .local-layout{gap:38px}
}

@media (max-width:980px){
  body.v8 .site-header{width:calc(100% - 28px)!important}
  body.v8 .hero-media{display:block!important}
  body.v8 .hero-scene-float{height:auto!important}
  body.v8 .hero-scene-float img{height:auto!important;width:150%!important;max-width:none!important;transform:translateX(-18%)!important}
  body.v8 .steps-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  body.v8 .connector{display:none}
  body.v8 .document-row{grid-template-columns:repeat(2,1fr)}
  body.v8 .app-window{grid-template-columns:1fr!important;height:700px!important}
  body.v8 .app-sidebar,body.v8 .app-inspector{display:none!important}
  body.v8 .adaptation-layout,body.v8 .local-layout{grid-template-columns:1fr}
  body.v8 .adaptation-copy>p,body.v8 .local-copy>p{max-width:none}
  body.v8 .footer-v8-inner{grid-template-columns:1fr 1fr;gap:34px}
  body.v8 .footer-v8-brand{grid-column:1/-1}
}

@media (max-width:700px){
  body.v8{font-size:16px}
  body.v8 .hero h1{font-size:43px}
  body.v8 .hero-lead{font-size:17px}
  body.v8 .workflow,body.v8 .interface-section,body.v8 .adaptation-section,body.v8 .local-section,body.v8 .faq-section{padding:72px 0!important}
  body.v8 .steps-grid,body.v8 .document-row,body.v8 .adapt-grid,body.v8 .local-feature-grid,body.v8 .faq-grid{grid-template-columns:1fr}
  body.v8 .step-card{height:auto;min-height:305px}
  body.v8 .callouts{grid-template-columns:1fr}
  body.v8 .app-window{height:640px!important}
  body.v8 .local-flow{grid-template-columns:1fr;gap:18px;text-align:left}
  body.v8 .local-flow .flow-arrow{display:none}
  body.v8 .cta-section{padding-top:72px!important}
  body.v8 .cta-actions{flex-direction:column}
  body.v8 .cta-actions .button{width:100%;min-width:0}
  body.v8 .footer-v8-inner{grid-template-columns:1fr}
  body.v8 .footer-v8-brand{grid-column:auto}
  body.v8 .footer-v8-bottom{flex-direction:column}
}
body.legal-page{min-height:100vh;background:radial-gradient(circle at 15% 10%,#101a3a 0%,#050a1f 48%,#02040d 100%);padding:42px}
.legal-shell{width:min(100%,900px);margin:0 auto}
.legal-shell article{margin-top:80px;padding:42px;border:1px solid rgba(255,255,255,.14);border-radius:24px;background:rgba(8,13,35,.72)}
.legal-shell h1{font-size:52px;letter-spacing:-.04em;margin:0 0 24px}
.legal-shell p{font-size:18px;line-height:1.7;color:rgba(255,255,255,.72)}
.legal-shell .button{margin-top:20px}

/* V8.1 QA refinements */
@media (min-width:981px){
  body.v8 .hero-grid.container{
    width:min(calc(100% - 96px),1480px)!important;
    max-width:1480px!important;
    grid-template-columns:minmax(0,51%) minmax(0,49%)!important;
  }
}
body.v8 .source-chips{position:absolute;left:25px;bottom:20px;margin-top:0}
@media (max-width:700px){
  body.v8 .micro-trust{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:11px;font-size:15px;line-height:1.45;max-width:100%}
  body.v8 .micro-trust svg{margin-top:1px}
}


/* v9 cleanup: hero overlay card removed; let the scene breathe more */
.hero-media .hero-scene-float img{transform:translateX(2.5%) scale(1.03)!important}
@media (max-width:980px){.hero-media .hero-scene-float img{transform:none!important;scale:1.02}}

/* ─────────────────────────────────────────────────────────────
   V10 — kiné wording + interface gallery grounded on supplied references
   ───────────────────────────────────────────────────────────── */
body.v8 .interface-stage-v10{
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:26px;
  align-items:start;
}
body.v8 .interface-gallery{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr);
  gap:22px;
  align-items:start;
}
body.v8 .gallery-main-card,
body.v8 .gallery-mini-card{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(17,22,40,.10);
  border-radius:24px;
  box-shadow:0 24px 60px rgba(37,32,27,.14);
  overflow:hidden;
}
body.v8 .gallery-main-card{padding:18px 18px 16px}
body.v8 .gallery-topline{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;flex-wrap:wrap}
body.v8 .gallery-badge{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;background:rgba(105,239,191,.16);color:#188866;font-weight:700;font-size:13px}
body.v8 .gallery-meta{font-size:13px;color:#6f7890;letter-spacing:-.01em}
body.v8 .gallery-main-card img,
body.v8 .gallery-mini-card img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid rgba(17,22,40,.08)}
body.v8 .gallery-caption{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:14px 4px 2px}
body.v8 .gallery-caption b{display:block;font-size:20px;color:#131a30;letter-spacing:-.02em}
body.v8 .gallery-caption span{display:block;max-width:440px;font-size:14px;line-height:1.55;color:#626c84}
body.v8 .gallery-side-column{display:grid;gap:22px}
body.v8 .gallery-mini-card{padding:14px}
body.v8 .mini-card-head{padding:2px 2px 12px}
body.v8 .mini-card-head b{display:block;font-size:17px;line-height:1.2;color:#141b31;margin-bottom:5px}
body.v8 .mini-card-head span{display:block;font-size:13px;line-height:1.45;color:#6d7690}
body.v8 .callouts article h3{font-size:19px;line-height:1.2}
body.v8 .callouts article p{font-size:14px;line-height:1.55;color:#67718a}
body.v8 .faq-card .faq-answer p{font-size:15px;line-height:1.65;color:#667087}
body.v8 .site-header .desktop-nav a{font-size:16px}
body.v8 .site-header .desktop-nav{gap:34px}
body.v8 .hero-lead,
body.v8 .section-head p,
body.v8 .adaptation-copy p,
body.v8 .local-copy p,
body.v8 .cta-copy p{font-size:18px;line-height:1.62}

/* give the interface section even more centrality */
body.v8 .interface-section>.wide-container{width:min(calc(100% - 40px),1560px)!important}
body.v8 .interface-section{padding-bottom:118px!important}

/* keep the older html mock styles from affecting anything visible */
body.v8 .app-window{display:none!important}

@media (max-width: 1180px){
  body.v8 .interface-stage-v10{grid-template-columns:1fr;gap:24px}
  body.v8 .callouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  body.v8 .callouts article:after{display:none!important}
  body.v8 .interface-gallery{grid-template-columns:1fr}
  body.v8 .gallery-side-column{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 820px){
  body.v8 .callouts{grid-template-columns:1fr}
  body.v8 .gallery-side-column{grid-template-columns:1fr}
  body.v8 .gallery-main-card{padding:14px}
  body.v8 .gallery-topline{margin-bottom:10px}
  body.v8 .gallery-meta{font-size:12px}
  body.v8 .gallery-caption{display:block;padding-top:12px}
  body.v8 .gallery-caption b{margin-bottom:6px;font-size:18px}
  body.v8 .hero-lead,
  body.v8 .section-head p,
  body.v8 .adaptation-copy p,
  body.v8 .local-copy p,
  body.v8 .cta-copy p{font-size:16px}
}

/* ─────────────────────────────────────────────────────────────
   V11 — pain-first hierarchy and bilan initial as primary proof
   ───────────────────────────────────────────────────────────── */
body.v8 .dilemma-section{
  position:relative;
  padding:105px 0 110px;
  background:
    radial-gradient(420px 260px at 10% 16%,rgba(124,77,255,.07),transparent 70%),
    radial-gradient(360px 240px at 88% 82%,rgba(102,242,180,.08),transparent 70%),
    linear-gradient(180deg,#fcfaf7 0%,#f7f3ee 100%)!important;
  border-bottom:1px solid rgba(16,20,38,.08);
}
body.v8 .dilemma-layout{
  display:grid;
  grid-template-columns:minmax(0,44%) minmax(0,56%);
  gap:72px;
  align-items:center;
}
body.v8 .dilemma-copy h2{
  margin:18px 0 22px;
  color:var(--ink);
  font-size:clamp(44px,4vw,60px);
  line-height:1.07;
  letter-spacing:-.045em;
}
body.v8 .dilemma-copy>p{
  margin:0;
  max-width:640px;
  color:#4e5973;
  font-size:18px;
  line-height:1.66;
}
body.v8 .dilemma-proof{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:17px;
  align-items:center;
  margin-top:30px;
  padding:18px 20px;
  border:1px solid rgba(16,20,38,.10);
  border-radius:18px;
  background:rgba(255,255,255,.76);
  box-shadow:0 16px 38px rgba(48,42,35,.06);
}
body.v8 .dilemma-proof>span{
  font-size:31px;
  line-height:1;
  font-weight:760;
  letter-spacing:-.04em;
  color:#6a50f2;
  white-space:nowrap;
}
body.v8 .dilemma-proof p{
  margin:0;
  color:#69738a;
  font-size:13px;
  line-height:1.5;
}
body.v8 .dilemma-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
body.v8 .dilemma-card{
  position:relative;
  min-height:390px;
  padding:28px 27px;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(16,20,38,.10);
  box-shadow:0 22px 52px rgba(48,42,35,.08);
}
body.v8 .dilemma-card::after{
  content:"";
  position:absolute;
  width:210px;
  height:210px;
  right:-75px;
  bottom:-90px;
  border-radius:50%;
  opacity:.55;
  pointer-events:none;
}
body.v8 .dilemma-before{
  background:linear-gradient(160deg,#fffaf7 0%,#fff2ec 100%);
}
body.v8 .dilemma-before::after{background:radial-gradient(circle,rgba(255,155,122,.24),transparent 68%)}
body.v8 .dilemma-after{
  background:linear-gradient(160deg,#f8fffc 0%,#ecfbf5 100%);
}
body.v8 .dilemma-after::after{background:radial-gradient(circle,rgba(102,242,180,.26),transparent 68%)}
body.v8 .dilemma-label{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:720;
  letter-spacing:.01em;
}
body.v8 .dilemma-before .dilemma-label{color:#c45235;background:rgba(255,155,122,.17)}
body.v8 .dilemma-after .dilemma-label{color:#168565;background:rgba(102,242,180,.19)}
body.v8 .dilemma-card h3{
  position:relative;
  z-index:1;
  margin:22px 0 25px;
  color:var(--ink);
  font-size:26px;
  line-height:1.18;
  letter-spacing:-.035em;
}
body.v8 .dilemma-card ul{
  position:relative;
  z-index:1;
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:17px;
}
body.v8 .dilemma-card li{
  position:relative;
  padding-left:24px;
  color:#556078;
  font-size:15px;
  line-height:1.55;
}
body.v8 .dilemma-card li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:10px;
  height:10px;
  border-radius:50%;
  box-shadow:0 0 0 5px rgba(124,77,255,.07);
}
body.v8 .dilemma-before li::before{background:var(--coral)}
body.v8 .dilemma-after li::before{background:var(--mint)}

/* Bilan initial is now the dominant product proof. */
body.v8 .interface-gallery{
  grid-template-columns:minmax(0,1.48fr) minmax(300px,.52fr)!important;
}
body.v8 .gallery-main-card{padding:18px 18px 17px}
body.v8 .gallery-main-card img{aspect-ratio:1672/941;object-fit:cover;object-position:center top}
body.v8 .gallery-mini-card img{aspect-ratio:1672/941;object-fit:cover;object-position:center top}
body.v8 .gallery-caption b{font-size:21px}
body.v8 .gallery-caption span{font-size:14px}
body.v8 .callouts article{
  min-height:177px!important;
  padding:18px 17px!important;
}
body.v8 .callouts article h3{font-size:18px!important}
body.v8 .callouts article p{font-size:14px!important}

/* FAQ has eight concise answers. */
body.v8 .faq-card .faq-head{min-height:82px}
body.v8 .faq-answer p{min-height:78px}

@media (max-width:1180px){
  body.v8 .dilemma-layout{grid-template-columns:1fr;gap:38px}
  body.v8 .dilemma-copy>p{max-width:820px}
  body.v8 .dilemma-cards{max-width:920px;margin-inline:auto}
  body.v8 .interface-gallery{grid-template-columns:1fr!important}
  body.v8 .gallery-side-column{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  body.v8 .dilemma-section{padding:72px 0!important}
  body.v8 .dilemma-cards{grid-template-columns:1fr}
  body.v8 .dilemma-card{min-height:0;padding:24px 22px}
  body.v8 .dilemma-copy h2{font-size:40px}
  body.v8 .dilemma-copy>p{font-size:16px}
  body.v8 .dilemma-proof{grid-template-columns:1fr;gap:8px}
  body.v8 .dilemma-proof>span{font-size:28px}
  body.v8 .gallery-side-column{grid-template-columns:1fr}
  body.v8 .faq-answer p{min-height:0}
}

/* ─────────────────────────────────────────────────────────────
   V12 — simplified product slider and inline contact form
   ───────────────────────────────────────────────────────────── */
body.v8 .dilemma-proof{grid-template-columns:minmax(150px,220px) 1fr}
body.v8 .dilemma-proof>span{font-size:24px;line-height:1.1;letter-spacing:-.025em}

body.v8 .interface-section{
  padding:88px 0 104px!important;
}
body.v8 .interface-section>.wide-container{
  width:min(calc(100% - 48px),1480px)!important;
}
body.v8 .interface-promises{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin:30px auto 36px;
}
body.v8 .interface-promises span{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:0 16px;
  border:1px solid rgba(16,20,38,.1);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#4f5a74;
  font-size:14px;
  box-shadow:0 8px 24px rgba(34,28,24,.045);
}
body.v8 .interface-promises svg{font-size:19px;color:var(--violet)}
body.v8 .interface-promises span:nth-child(2) svg{color:#199d7b}
body.v8 .interface-promises span:nth-child(3) svg{color:#e96746}

body.v8 .product-slider{
  position:relative;
  max-width:1350px;
  margin:0 auto;
}
body.v8 .slider-stage{
  position:relative;
  display:grid;
  grid-template-columns:56px minmax(0,1fr) 56px;
  gap:16px;
  align-items:center;
}
body.v8 .slider-viewport{
  position:relative;
  aspect-ratio:1672/941;
  overflow:hidden;
  border-radius:26px;
  border:1px solid rgba(16,20,38,.12);
  background:#fff;
  box-shadow:0 28px 78px rgba(43,35,29,.16);
}
body.v8 .slider-slide{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transform:translateX(18px) scale(.992);
  transition:opacity .34s ease,transform .42s cubic-bezier(.22,1,.36,1),visibility .34s;
}
body.v8 .slider-slide.is-active{
  opacity:1;
  visibility:visible;
  transform:none;
}
body.v8 .slider-slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}
body.v8 .slider-arrow{
  width:54px;
  height:54px;
  border:1px solid rgba(16,20,38,.12);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.9);
  color:#222b43;
  box-shadow:0 12px 32px rgba(32,26,23,.1);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
body.v8 .slider-arrow:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(32,26,23,.14);border-color:rgba(124,77,255,.25)}
body.v8 .slider-arrow span{font-size:34px;line-height:1;transform:translateY(-1px)}
body.v8 .slider-copy{
  display:grid;
  grid-template-columns:minmax(280px,.8fr) minmax(380px,1.2fr);
  gap:28px;
  align-items:start;
  padding:22px 74px 20px;
}
body.v8 .slider-copy>div{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center}
body.v8 .slider-count{font-size:12px;font-weight:750;color:#7564e8;background:#eeeaff;border-radius:999px;padding:6px 9px}
body.v8 .slider-copy h3{margin:0;color:#151c31;font-size:22px;line-height:1.2;letter-spacing:-.025em}
body.v8 .slider-copy p{margin:0;color:#657089;font-size:15px;line-height:1.6}
body.v8 .slider-thumbnails{
  display:flex;
  gap:10px;
  overflow-x:auto;
  scrollbar-width:thin;
  padding:4px 72px 12px;
  scroll-snap-type:x proximity;
}
body.v8 .slider-thumbnails button{
  flex:0 0 152px;
  scroll-snap-align:center;
  border:1px solid rgba(16,20,38,.1);
  border-radius:14px;
  background:rgba(255,255,255,.72);
  padding:7px;
  color:#4f5870;
  text-align:left;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
body.v8 .slider-thumbnails button:hover{transform:translateY(-2px)}
body.v8 .slider-thumbnails button.is-active{border-color:rgba(124,77,255,.58);box-shadow:0 0 0 3px rgba(124,77,255,.09),0 10px 25px rgba(42,34,30,.09);background:#fff}
body.v8 .slider-thumbnails img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center top;border-radius:8px;margin-bottom:7px}
body.v8 .slider-thumbnails span{display:block;padding:0 3px 2px;font-size:12px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

body.v8 .contact-section{
  height:auto!important;
  min-height:0!important;
  padding:96px 0 0!important;
  background:radial-gradient(ellipse at 28% 12%,#101a3a 0%,#050a1f 48%,#02040d 100%)!important;
}
body.v8 .contact-layout{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(520px,1.15fr);
  gap:78px;
  align-items:center;
  padding-bottom:88px;
}
body.v8 .contact-copy h2{
  margin:24px 0 18px;
  font-size:clamp(48px,4.8vw,72px);
  line-height:1.04;
  letter-spacing:-.045em;
  font-weight:630;
}
body.v8 .contact-copy>p{max-width:610px;color:rgba(255,255,255,.72);font-size:18px;line-height:1.65}
body.v8 .contact-points{display:grid;gap:13px;margin-top:32px}
body.v8 .contact-points span{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.76);font-size:15px}
body.v8 .contact-points svg{font-size:22px;color:var(--mint)}
body.v8 .contact-form-card{
  position:relative;
  z-index:3;
  background:#fcfaf7;
  color:var(--ink);
  border-radius:26px;
  padding:30px;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 32px 90px rgba(0,0,0,.3);
}
body.v8 .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
body.v8 .contact-form-card label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:700;color:#313a52}
body.v8 .contact-form-card .form-full{grid-column:1/-1}
body.v8 .contact-form-card input,
body.v8 .contact-form-card select,
body.v8 .contact-form-card textarea{
  width:100%;
  border:1px solid #ddd9d4;
  border-radius:12px;
  background:#fff;
  padding:13px 14px;
  color:#171d30;
  outline:none;
  resize:vertical;
  transition:border-color .2s ease,box-shadow .2s ease;
}
body.v8 .contact-form-card input:focus,
body.v8 .contact-form-card select:focus,
body.v8 .contact-form-card textarea:focus{border-color:#7c4dff;box-shadow:0 0 0 4px rgba(124,77,255,.09)}
body.v8 .form-submit{width:100%;margin-top:18px}
body.v8 .form-note{margin:12px 0 0;text-align:center;color:#7a8296;font-size:12px}
body.v8 .form-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
body.v8 .form-feedback{display:grid;gap:4px;margin-bottom:18px;padding:13px 15px;border-radius:12px;font-size:13px}
body.v8 .form-feedback.success{background:#e5f8ef;color:#17785e;border:1px solid #bfead9}
body.v8 .form-feedback.error{background:#fff0ea;color:#a23f26;border:1px solid #ffd3c5}
body.v8 .form-feedback strong{font-size:14px}
body.v8 .contact-section .site-footer-v8{margin-top:0}
body.v8 .contact-section .cta-arc{opacity:.45;top:-80px}

@media (max-width:1180px){
  body.v8 .contact-layout{grid-template-columns:1fr;gap:42px;max-width:900px}
  body.v8 .contact-copy{text-align:center}
  body.v8 .contact-copy>p{margin-inline:auto}
  body.v8 .contact-points{max-width:470px;margin:28px auto 0;text-align:left}
}
@media (max-width:820px){
  body.v8 .interface-section>.wide-container{width:min(calc(100% - 28px),1480px)!important}
  body.v8 .interface-promises{display:grid;grid-template-columns:1fr;max-width:430px;margin-bottom:26px}
  body.v8 .slider-stage{display:block}
  body.v8 .slider-arrow{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:44px;height:44px;background:rgba(255,255,255,.92)}
  body.v8 .slider-arrow:hover{transform:translateY(-50%)}
  body.v8 .slider-prev{left:8px}
  body.v8 .slider-next{right:8px}
  body.v8 .slider-viewport{border-radius:18px}
  body.v8 .slider-copy{grid-template-columns:1fr;padding:18px 6px 16px;gap:10px}
  body.v8 .slider-copy>div{grid-template-columns:auto 1fr}
  body.v8 .slider-copy h3{font-size:19px}
  body.v8 .slider-copy p{font-size:14px}
  body.v8 .slider-thumbnails{padding:2px 2px 12px}
  body.v8 .slider-thumbnails button{flex-basis:126px}
  body.v8 .contact-section{padding-top:72px!important}
  body.v8 .contact-layout{padding-bottom:62px}
  body.v8 .contact-copy h2{font-size:42px}
  body.v8 .contact-form-card{padding:22px 18px;border-radius:20px}
  body.v8 .form-grid{grid-template-columns:1fr}
  body.v8 .contact-form-card .form-full{grid-column:auto}
}

/* ─────────────────────────────────────────────────────────────
   V13 — performance pass
   Continuous full-screen effects and expensive compositing are disabled.
   The visual identity remains through static gradients and lightweight hover states.
   ───────────────────────────────────────────────────────────── */
html{scroll-behavior:auto!important}
body.v8 *,body.v8 *::before,body.v8 *::after{
  animation:none!important;
  will-change:auto!important;
}
body.v8 *{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
body.v8 .ambient-layer,
body.v8 .page-noise,
body.v8 .scroll-progress,
body.v8 .hero-gridlines,
body.v8 .section-glow{
  display:none!important;
}
body.v8 .dark-section::before,
body.v8 .light-section::before{
  animation:none!important;
  transform:none!important;
  filter:none!important;
  opacity:.72!important;
}
body.v8 .hero-aurora,
body.v8 .hero-orb,
body.v8 .hero-copy::before,
body.v8 .hero-media::before,
body.v8 .hero-halo,
body.v8 .faq-summary::before,
body.v8 .faq-summary::after{
  filter:none!important;
  animation:none!important;
  will-change:auto!important;
}
body.v8 .hero-aurora{opacity:.32!important;mix-blend-mode:normal!important}
body.v8 .hero-orb{opacity:.08!important}
body.v8 .site-header,
body.v8 .site-header.is-scrolled{
  background:rgba(5,10,31,.96)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.20)!important;
  transition:top .18s ease,height .18s ease,width .18s ease,background-color .18s ease,border-color .18s ease!important;
}
body.v8 .button-gradient{
  background-size:100% 100%!important;
  background-position:center!important;
}
body.v8 .pulse::after,
body.v8 .hero-eyebrow::after,
body.v8 .architecture-flow::after,
body.v8 .data-flow::after,
body.v8 .app-window::after{
  display:none!important;
}
body.v8 .reveal{
  opacity:0;
  transform:translateY(8px)!important;
  transition:opacity .28s ease,transform .28s ease!important;
}
body.v8 .reveal.is-visible{
  opacity:1;
  transform:none!important;
}
body.v8 .reveal-delay{transition-delay:.03s!important}
body.v8 .slider-slide{
  display:none!important;
  position:absolute!important;
  inset:0!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  transition:none!important;
}
body.v8 .slider-slide.is-active{display:block!important}
body.v8 .slider-viewport{contain:layout paint style}
body.v8 .slider-slide img{contain:paint}
body.v8 main>section:not(.hero){
  content-visibility:auto;
  contain-intrinsic-size:auto 900px;
}
body.v8 .hero-scene-float,
body.v8 .hero-scene-float img,
body.v8 .local-device-card img{
  filter:none!important;
  transform:none!important;
}
body.v8 .step-card:hover,
body.v8 .adapt-grid article:hover,
body.v8 .local-feature-grid article:hover,
body.v8 .faq-card:hover{
  transform:none!important;
}
@media (max-width:820px){
  body.v8 .dark-section::before,
  body.v8 .light-section::before{opacity:.48!important}
  body.v8 .reveal{opacity:1!important;transform:none!important;transition:none!important}
}
@media (prefers-reduced-motion:reduce){
  body.v8 .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ─────────────────────────────────────────────────────────────
   V14 — lightweight living lights + smoother scrolling
   Only small transform/opacity layers animate while their section is visible.
   ───────────────────────────────────────────────────────────── */
html{
  scroll-behavior:smooth!important;
  scroll-padding-top:88px;
}

/* Avoid first-entry rendering hitches while scrolling. */
body.v8 main>section:not(.hero){
  content-visibility:visible!important;
  contain-intrinsic-size:none!important;
}

body.v8 main>section{
  position:relative;
  isolation:isolate;
}
body.v8 main>section > .container,
body.v8 main>section > .site-footer-v8{
  position:relative;
  z-index:2;
}
body.v8 .section-light-field{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  contain:strict;
}
body.v8 .section-light-orb{
  position:absolute;
  display:block;
  width:clamp(190px,22vw,390px);
  aspect-ratio:1;
  border-radius:50%;
  opacity:.26;
  transform:translate3d(0,0,0) scale(1);
  animation:none!important;
}
body.v8 .dark-section .section-light-orb--a{
  left:-8%;
  top:8%;
  background:radial-gradient(circle,rgba(102,242,180,.28) 0%,rgba(102,242,180,.10) 34%,rgba(102,242,180,0) 70%);
}
body.v8 .dark-section .section-light-orb--b{
  right:-7%;
  bottom:3%;
  width:clamp(230px,27vw,470px);
  background:radial-gradient(circle,rgba(124,77,255,.32) 0%,rgba(124,77,255,.11) 38%,rgba(124,77,255,0) 72%);
}
body.v8 .dark-section .section-light-orb--c{
  left:48%;
  top:12%;
  width:clamp(120px,12vw,220px);
  opacity:.18;
  background:radial-gradient(circle,rgba(255,155,122,.30) 0%,rgba(255,155,122,.08) 42%,rgba(255,155,122,0) 74%);
}
body.v8 .light-section .section-light-orb--a{
  left:-7%;
  top:10%;
  background:radial-gradient(circle,rgba(124,77,255,.18) 0%,rgba(124,77,255,.06) 38%,rgba(124,77,255,0) 72%);
}
body.v8 .light-section .section-light-orb--b{
  right:-8%;
  bottom:2%;
  width:clamp(230px,27vw,470px);
  background:radial-gradient(circle,rgba(102,242,180,.20) 0%,rgba(102,242,180,.06) 40%,rgba(102,242,180,0) 74%);
}
body.v8 .light-section .section-light-orb--c{
  left:51%;
  top:8%;
  width:clamp(110px,11vw,210px);
  opacity:.15;
  background:radial-gradient(circle,rgba(255,155,122,.20) 0%,rgba(255,155,122,.05) 44%,rgba(255,155,122,0) 76%);
}

body.v8 .lights-active .section-light-orb{
  will-change:transform,opacity!important;
}
body.v8 .lights-active .section-light-orb--a{
  animation:dossiLightA 11s ease-in-out infinite alternate!important;
}
body.v8 .lights-active .section-light-orb--b{
  animation:dossiLightB 14s ease-in-out -4s infinite alternate!important;
}
body.v8 .lights-active .section-light-orb--c{
  animation:dossiLightC 9s ease-in-out -2s infinite alternate!important;
}
@keyframes dossiLightA{
  0%{transform:translate3d(-10px,8px,0) scale(.96);opacity:.20}
  55%{opacity:.34}
  100%{transform:translate3d(42px,-24px,0) scale(1.08);opacity:.27}
}
@keyframes dossiLightB{
  0%{transform:translate3d(16px,12px,0) scale(1);opacity:.21}
  45%{opacity:.36}
  100%{transform:translate3d(-38px,-28px,0) scale(1.06);opacity:.28}
}
@keyframes dossiLightC{
  0%{transform:translate3d(0,0,0) scale(.92);opacity:.10}
  50%{opacity:.23}
  100%{transform:translate3d(22px,18px,0) scale(1.12);opacity:.16}
}

/* Keep the movement visible but restrained on mobile. */
@media (max-width:820px){
  body.v8 .section-light-orb{opacity:.20;width:240px}
  body.v8 .section-light-orb--c{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  body.v8 .lights-active .section-light-orb{animation:none!important;will-change:auto!important}
}
html.is-wheel-smoothing{scroll-behavior:auto!important}

/* Static contact: direct mail link, no form. */
.contact-mail-card{
  position:relative;
  align-self:center;
  min-height:440px;
  padding:52px 48px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(15,23,55,.94),rgba(7,12,33,.92));
  box-shadow:0 28px 80px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.07);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden;
}
.contact-mail-card::before{
  content:"";
  position:absolute;
  width:340px;
  height:340px;
  right:-170px;
  top:-170px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(124,77,255,.22),transparent 68%);
  pointer-events:none;
}
.contact-mail-icon{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:20px;
  color:var(--mint);
  background:rgba(102,242,180,.1);
  border:1px solid rgba(102,242,180,.22);
  margin-bottom:24px;
}
.contact-mail-icon svg{font-size:31px}
.contact-mail-kicker{
  color:var(--mint);
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.09em;
  margin-bottom:10px;
}
.contact-mail-card h3{
  margin:0 0 16px;
  font-size:clamp(28px,2.5vw,40px);
  line-height:1.08;
  letter-spacing:-.035em;
}
.contact-mail-card>p{
  max-width:560px;
  margin:0 0 30px;
  color:rgba(255,255,255,.72);
  font-size:17px;
  line-height:1.65;
}
.contact-mail-button{min-width:235px}
.contact-mail-address{
  margin-top:22px;
  color:#fff;
  font-weight:650;
  text-decoration:underline;
  text-decoration-color:rgba(102,242,180,.5);
  text-underline-offset:5px;
}
.contact-mail-card small{
  margin-top:13px;
  color:rgba(255,255,255,.48);
  font-size:13px;
}
@media (max-width:780px){
  .contact-mail-card{min-height:0;padding:34px 25px;border-radius:22px}
  .contact-mail-card h3{font-size:29px}
  .contact-mail-card>p{font-size:15px}
  .contact-mail-button{width:100%;min-width:0}
}