
:root{--bg:#050816;--bg2:#081126;--panel:#0a1430cc;--panel2:#0c1938;--text:#f7f8ff;--muted:#aab4d4;--line:#243766;--violet:#7c4dff;--violet2:#a787ff;--cyan:#18d8ff;--green:#3be398;--red:#ff6482;--shadow:0 24px 80px #0009;--max:1240px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 14% 0,#221255 0,transparent 34rem),radial-gradient(circle at 86% 12%,#062b5d 0,transparent 30rem),linear-gradient(180deg,var(--bg),#061022 55%,#050816);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.55;overflow-x:hidden}.tech-grid{position:fixed;inset:0;pointer-events:none;z-index:-2;background-image:linear-gradient(#2b4b7a18 1px,transparent 1px),linear-gradient(90deg,#2b4b7a18 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,#000 0,transparent 75%)}.cursor-glow{position:fixed;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,#7c4dff15 0,#18d8ff08 35%,transparent 68%);transform:translate(-50%,-50%);pointer-events:none;z-index:-1}.container{width:min(var(--max),calc(100% - 40px));margin:auto}a{color:inherit;text-decoration:none}img{max-width:100%}.nav{position:sticky;top:0;z-index:90;border-bottom:1px solid #26365b;background:#050816cc;backdrop-filter:blur(18px)}.nav-inner{min-height:76px;display:flex;align-items:center;gap:26px}.brand img{height:42px;width:auto;display:block}.nav-links{display:flex;align-items:center;gap:23px;margin-left:auto;font-size:.92rem;color:#c6d0ec}.nav-links a,.dropbtn{transition:.2s}.nav-links a:hover,.dropbtn:hover{color:#fff}.dropdown{position:relative}.dropbtn{border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:26px 0}.dropmenu{display:none;position:absolute;top:66px;left:-18px;min-width:245px;padding:10px;border:1px solid var(--line);border-radius:16px;background:#081127f5;box-shadow:var(--shadow)}.dropdown:hover .dropmenu,.dropdown:focus-within .dropmenu{display:block}.dropmenu a{display:block;padding:10px 12px;border-radius:10px}.dropmenu a:hover{background:#ffffff09}.nav-cta{margin-left:10px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 19px;border-radius:13px;font-weight:800;border:1px solid transparent;transition:.2s;cursor:pointer}.btn-primary{background:linear-gradient(135deg,#7847ff,#5636ff);box-shadow:0 12px 34px #603cff40}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 42px #603cff66}.btn-secondary{border-color:#5e52b9;background:#0a1130aa}.mobile-toggle{display:none;background:none;border:1px solid var(--line);color:white;border-radius:10px;padding:8px 10px}.hero{padding:72px 0 44px;position:relative}.hero-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:44px;align-items:center}.eyebrow,.kicker{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#b7a6ff;font-weight:900}.hero h1{font-size:clamp(3rem,5.6vw,5.7rem);line-height:.96;letter-spacing:-.065em;margin:16px 0 22px}.gradient{background:linear-gradient(90deg,#b494ff,#7847ff 45%,#16d9ff);-webkit-background-clip:text;background-clip:text;color:transparent}.lead{font-size:1.08rem;color:var(--muted);max-width:700px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.trustline{display:flex;gap:15px;flex-wrap:wrap;color:#b8c1dc;font-size:.84rem}.trustline span:before{content:'✓';color:var(--cyan);margin-right:7px}.product-stage{position:relative;border:1px solid #295081;border-radius:28px;background:linear-gradient(145deg,#0c1635cc,#050914cc);padding:14px;box-shadow:0 30px 100px #000a,0 0 60px #1549a820;overflow:hidden}.product-stage:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#18d8ff14,transparent);transform:translateX(-100%);animation:scan 7s linear infinite}.product-stage img{position:relative;display:block;width:100%;border-radius:18px}.sys-row{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:12px}.sys{padding:10px;border:1px solid #263c68;border-radius:11px;background:#071127;color:#9fb0d2;font-size:.72rem}.sys b{display:block;color:#1ee5ff;font-size:.68rem;letter-spacing:.09em}.section{padding:66px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:26px}.section h2{font-size:clamp(2rem,3.7vw,3.4rem);line-height:1.02;letter-spacing:-.055em;margin:8px 0 10px}.section-copy{color:var(--muted);max-width:770px}.panel{border:1px solid var(--line);background:linear-gradient(180deg,#0b1530cc,#071124cc);border-radius:20px;box-shadow:0 15px 50px #0003}.cap-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.cap{padding:19px;min-height:172px}.icon{width:43px;height:43px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#703cff35,#10d9ff22);border:1px solid #40659a;color:#22dcff;font-weight:900;margin-bottom:20px}.cap h3,.sector-card h3,.article-card h3{margin:0 0 7px;font-size:1rem}.cap p,.sector-card p,.article-card p,.answer-card p{margin:0;color:var(--muted);font-size:.86rem}.platform-split{display:grid;grid-template-columns:1fr 1fr;gap:22px}.snapshot{padding:12px;overflow:hidden}.snapshot img{border-radius:15px;display:block}.bullets{display:grid;gap:12px;margin-top:20px}.bullet{display:grid;grid-template-columns:24px 1fr;gap:9px;color:#c5cee5}.bullet i{font-style:normal;color:var(--green)}.sector-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.sector-card{padding:22px;position:relative;overflow:hidden;min-height:210px}.sector-card:after{content:'';position:absolute;width:160px;height:160px;border-radius:50%;right:-70px;bottom:-80px;background:radial-gradient(circle,#7c4dff38,transparent 70%)}.sector-card .num{color:#1adfff;font:700 .72rem ui-monospace,monospace;letter-spacing:.12em}.sector-card h3{font-size:1.18rem;margin-top:28px}.sector-card a{display:inline-block;margin-top:18px;color:#ad94ff;font-weight:800;font-size:.85rem}.answer-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px}.ai-panel{padding:28px;background:radial-gradient(circle at 90% 15%,#1bdcff1f,transparent 13rem),linear-gradient(145deg,#0b1736,#0c1030)}.ai-panel .ai-orb{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;border:1px solid #5751c0;box-shadow:0 0 40px #624cff44;color:#55e9ff;font-size:1.5rem;margin-bottom:24px}.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}.answer-card{padding:18px}.answer-card strong{display:block;margin-bottom:7px}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.article-card{overflow:hidden}.article-media{height:145px;background:linear-gradient(135deg,#161b48,#073561);display:grid;place-items:center;color:#43e4ff;font-size:2.5rem;border-bottom:1px solid var(--line);position:relative}.article-media.product{background:#050a17 url('clarisec-live-validation-flow.png') center/cover no-repeat}.article-body{padding:18px}.tag{display:inline-flex;padding:4px 7px;border-radius:7px;background:#7042ff33;border:1px solid #765dcd;color:#c3b5ff;font-size:.65rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}.article-card a{display:inline-block;margin-top:15px;color:#a98cff;font-weight:800;font-size:.84rem}.faq{display:grid;gap:10px}.faq details{border:1px solid var(--line);background:#08142b;border-radius:13px;padding:0 17px}.faq summary{padding:15px 0;cursor:pointer;font-weight:800;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:'+';float:right;color:#48e6ff}.faq details[open] summary:after{content:'–'}.faq details p{color:var(--muted);padding:0 0 15px}.cta{margin:20px 0 0;padding:34px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;background:radial-gradient(circle at 80% 50%,#693cff33,transparent 24rem),linear-gradient(120deg,#0b1732,#11143c)}.cta h2{font-size:clamp(1.7rem,3vw,2.6rem);margin:0 0 6px}.footer{margin-top:66px;border-top:1px solid #273862;background:#040714;padding:42px 0 18px}.footer-grid{display:grid;grid-template-columns:1.3fr repeat(3,.8fr) 1.2fr;gap:30px}.footer-logo{height:38px}.footer p,.footer a{color:#9da9ca;font-size:.82rem}.footer h4{margin:0 0 11px}.footer-col{display:grid;align-content:start;gap:7px}.newsletter{padding:18px}.input-row{display:flex;margin-top:12px}.input-row input{flex:1;min-width:0;background:#071127;border:1px solid #29406c;color:white;padding:11px;border-radius:10px 0 0 10px}.input-row button{border:0;background:#7043ff;color:white;padding:0 13px;border-radius:0 10px 10px 0}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #26365b;margin-top:30px;padding-top:16px;color:#7f8baa;font-size:.78rem}.content-hero{padding:60px 0 38px}.content-hero-grid{display:grid;grid-template-columns:1fr .95fr;gap:34px;align-items:center}.content-hero h1{font-size:clamp(2.7rem,5vw,4.8rem);line-height:.98;letter-spacing:-.06em;margin:14px 0}.breadcrumbs{color:#7584a8;font-size:.8rem;margin-bottom:16px}.content-grid{display:grid;grid-template-columns:1fr 330px;gap:20px}.topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.topic{padding:17px}.topic b{display:block;margin-bottom:6px}.topic small{color:var(--muted)}.prose{max-width:840px}.prose h2{margin-top:45px}.prose p,.prose li{color:#bdc7e2}.prose ul{padding-left:20px}.standard-table{overflow:auto}.standard-table table{width:100%;border-collapse:collapse}.standard-table th,.standard-table td{padding:13px 12px;border-bottom:1px solid #26365b;text-align:left;vertical-align:top}.standard-table th{color:#9fefff;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}.standard-table td{font-size:.85rem;color:#b8c4e0}.standard-table td:first-child{font-weight:900;color:#c0aaff}.blog-hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px}.featured{padding:24px;display:grid;grid-template-columns:1fr .9fr;gap:20px;align-items:center}.featured img{border-radius:14px}.filters{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0}.chip{border:1px solid #30487b;background:#071127;color:#c3ccea;border-radius:10px;padding:8px 11px;font-size:.78rem}.article-page{display:grid;grid-template-columns:minmax(0,820px) 300px;gap:32px}.article-meta{color:#8795b7;font-size:.84rem}.article-page .prose h1{font-size:clamp(2.6rem,4.8vw,4.6rem);line-height:1;letter-spacing:-.055em}.sticky-side{position:sticky;top:100px;align-self:start;padding:20px}.callout{padding:20px;border-left:3px solid var(--cyan);background:#0a1731;color:#c4cee7;border-radius:0 12px 12px 0}.reveal{opacity:0;transform:translateY(18px);transition:.65s ease}.reveal.visible{opacity:1;transform:none}@keyframes scan{to{transform:translateX(100%)}}
@media(max-width:1050px){.cap-grid{grid-template-columns:repeat(3,1fr)}.sector-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1.2fr repeat(2,1fr)}.content-grid,.article-page{grid-template-columns:1fr}.sticky-side{position:static}.topic-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){.mobile-toggle{display:block;margin-left:auto}.nav-links{display:none;position:absolute;left:20px;right:20px;top:75px;background:#070e20f5;border:1px solid var(--line);border-radius:16px;padding:18px;flex-direction:column;align-items:stretch}.nav-links.open{display:flex}.nav-cta{display:none}.dropdown:hover .dropmenu{display:none}.dropbtn{padding:0}.dropmenu{position:static;box-shadow:none;margin-top:8px}.hero-grid,.platform-split,.answer-layout,.content-hero-grid,.blog-hero,.featured{grid-template-columns:1fr}.product-stage{margin-top:10px}.blog-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.cta{grid-template-columns:1fr}.content-hero{padding-top:45px}}
@media(max-width:600px){.container{width:min(var(--max),calc(100% - 26px))}.hero{padding-top:48px}.hero h1{font-size:3.15rem}.cap-grid,.sector-grid,.blog-grid,.answers,.topic-grid{grid-template-columns:1fr}.sys-row{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column}.section{padding:50px 0}.product-stage{padding:8px}.content-hero h1{font-size:3rem}}


/* ================================
   Clarisec kinetic interaction layer
   Lightweight canvas + CSS motion. No external JS dependency.
   ================================ */
.network-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:-3;pointer-events:none;opacity:.62}
.scroll-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:150;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,var(--violet),var(--cyan));box-shadow:0 0 18px #18d8ff99;pointer-events:none}
.nav{transition:min-height .28s ease,background .28s ease,box-shadow .28s ease,border-color .28s ease}
.nav.nav-scrolled{background:#040714ef;box-shadow:0 14px 40px #0006;border-bottom-color:#334776}
.nav.nav-scrolled .nav-inner{min-height:64px}
.nav-inner{transition:min-height .28s ease}

/* Hero becomes a kinetic product stage rather than a static screenshot */
.product-stage{transform-style:preserve-3d;will-change:transform;transition:transform .18s ease-out,border-color .35s ease,box-shadow .35s ease}
.product-stage:hover{border-color:#3a78b4;box-shadow:0 34px 110px #000c,0 0 70px #155ee035}
.product-stage img{transform:translateZ(24px);transition:filter .3s ease}
.product-stage:hover img{filter:saturate(1.08) contrast(1.03)}
.product-stage .sys-row{transform:translateZ(32px)}
.product-stage:after{content:'';position:absolute;inset:-35%;background:conic-gradient(from 90deg at 50% 50%,transparent 0 24%,#18d8ff12 29%,transparent 34% 67%,#7c4dff15 72%,transparent 78%);animation:stageRadar 13s linear infinite;pointer-events:none;z-index:0}
.product-stage>*{position:relative;z-index:1}
@keyframes stageRadar{to{transform:rotate(360deg)}}

.hud-chip{position:absolute;z-index:4;padding:8px 10px;border:1px solid #31558f;background:#061029db;backdrop-filter:blur(10px);border-radius:10px;color:#b8c6e6;font:700 .68rem ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.075em;box-shadow:0 10px 35px #0006;pointer-events:none;animation:hudFloat 5.5s ease-in-out infinite}
.hud-chip b{color:#36e5ff;font-weight:900}
.hud-a{top:-18px;right:9%;animation-delay:-1.3s}.hud-b{left:-22px;top:28%;animation-delay:-3.2s}.hud-c{right:-17px;bottom:18%;animation-delay:-.4s}
@keyframes hudFloat{0%,100%{transform:translate3d(0,0,28px)}50%{transform:translate3d(0,-8px,28px)}}

/* Live data ribbon */
.signal-ribbon{border-top:1px solid #203c6a;border-bottom:1px solid #203c6a;background:#061024b8;overflow:hidden;position:relative}
.signal-ribbon:before,.signal-ribbon:after{content:'';position:absolute;top:0;bottom:0;width:110px;z-index:3;pointer-events:none}
.signal-ribbon:before{left:0;background:linear-gradient(90deg,#050816,transparent)}.signal-ribbon:after{right:0;background:linear-gradient(-90deg,#050816,transparent)}
.signal-track{display:flex;width:max-content;gap:34px;padding:12px 0;animation:signalMove 29s linear infinite;color:#91a1c5;font:800 .69rem ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase}
.signal-track span{display:flex;align-items:center;gap:9px;white-space:nowrap}.signal-track i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
.signal-track b{color:#d7e6ff}.signal-ribbon:hover .signal-track{animation-play-state:paused}@keyframes signalMove{to{transform:translateX(-50%)}}

/* Mouse-position spotlight on cards */
.panel,.card,.topic,.answer-card,.sector-card,.article-card,.faq details{position:relative;overflow:hidden}
.panel:before,.card:before,.topic:before,.answer-card:before,.sector-card:before,.article-card:before,.faq details:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease;background:radial-gradient(360px circle at var(--spot-x,50%) var(--spot-y,50%),#3ce8ff13,transparent 42%);z-index:0}
.panel:hover:before,.card:hover:before,.topic:hover:before,.answer-card:hover:before,.sector-card:hover:before,.article-card:hover:before,.faq details:hover:before{opacity:1}
.panel>*,.card>*,.topic>*,.answer-card>*,.sector-card>*,.article-card>*,.faq details>*{position:relative;z-index:1}
.cap,.sector-card,.article-card,.answer-card,.topic{transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.cap:hover,.sector-card:hover,.article-card:hover,.answer-card:hover,.topic:hover{transform:translateY(-5px);border-color:#365b91;box-shadow:0 24px 60px #0005}

/* Kinetic typography / scan markers */
.eyebrow:before,.kicker:before{content:'';display:inline-block;width:18px;height:1px;background:var(--cyan);vertical-align:middle;margin-right:9px;box-shadow:0 0 9px var(--cyan)}
.gradient{background-size:200% 100%;animation:gradientDrift 7s ease-in-out infinite}@keyframes gradientDrift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.kinetic-word{display:inline-block;min-width:8.5ch;color:#d8ccff;position:relative}
.kinetic-word:after{content:'';display:inline-block;width:1px;height:.85em;background:var(--cyan);margin-left:4px;vertical-align:-.08em;animation:caretBlink .8s steps(1) infinite}@keyframes caretBlink{50%{opacity:0}}

/* Scroll depth markers */
.section{position:relative}.section-marker{position:absolute;left:max(10px,calc((100vw - var(--max))/2 - 54px));top:82px;color:#52658e;font:700 .62rem ui-monospace,monospace;letter-spacing:.12em;writing-mode:vertical-rl;transform:rotate(180deg);opacity:.78;pointer-events:none}
.section-marker:after{content:'';display:block;width:1px;height:44px;background:linear-gradient(var(--cyan),transparent);margin:8px auto 0}

/* Active nav underline follows the user's scroll position */
.nav-links a.scroll-active{color:#fff}.nav-links a.scroll-active:after{content:'';display:block;height:2px;margin-top:4px;background:linear-gradient(90deg,var(--violet),var(--cyan));box-shadow:0 0 12px #18d8ffaa}

/* Magnetic buttons keep layout stable while reacting to pointer */
.btn{will-change:transform}.btn.magnetic{transition:transform .15s ease,box-shadow .2s ease}

/* Reveal variants */
.reveal{filter:blur(5px);transform:translateY(24px) scale(.99);transition:opacity .72s cubic-bezier(.2,.7,.2,1),transform .72s cubic-bezier(.2,.7,.2,1),filter .72s ease}
.reveal.visible{filter:none;transform:none}
.reveal-stagger>*{opacity:0;transform:translateY(15px);transition:.5s ease}.reveal-stagger.visible>*{opacity:1;transform:none}.reveal-stagger.visible>*:nth-child(2){transition-delay:.06s}.reveal-stagger.visible>*:nth-child(3){transition-delay:.12s}.reveal-stagger.visible>*:nth-child(4){transition-delay:.18s}.reveal-stagger.visible>*:nth-child(5){transition-delay:.24s}.reveal-stagger.visible>*:nth-child(6){transition-delay:.30s}

/* System row has a live-data feel */
.sys{position:relative;overflow:hidden}.sys:after{content:'';position:absolute;left:10px;right:10px;bottom:5px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent);transform-origin:left;animation:sysPulse 3.2s ease-in-out infinite}.sys:nth-child(2):after{animation-delay:-.7s}.sys:nth-child(3):after{animation-delay:-1.4s}.sys:nth-child(4):after{animation-delay:-2.1s}@keyframes sysPulse{0%,100%{transform:scaleX(.14);opacity:.35}50%{transform:scaleX(1);opacity:1}}

@media(max-width:850px){.hud-chip,.section-marker{display:none}.network-canvas{opacity:.35}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.network-canvas{display:none}.signal-track,.product-stage:before,.product-stage:after,.hud-chip,.gradient,.sys:after{animation:none!important}.reveal,.reveal-stagger>*{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}.product-stage,.btn,.cap,.sector-card,.article-card,.answer-card,.topic{transition:none!important}}


/* Book-a-demo form */
.demo-panel{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:42px;align-items:start;padding:clamp(26px,4vw,48px);
  background:
    radial-gradient(circle at 86% 8%,rgba(0,209,255,.14),transparent 28rem),
    radial-gradient(circle at 12% 92%,rgba(111,60,255,.18),transparent 28rem),
    rgba(8,16,37,.82);
}
.demo-copy{position:sticky;top:120px}
.demo-points{display:grid;gap:10px;margin-top:24px;color:#aeb9d4;font-size:.94rem}
.contact-form{display:grid;gap:18px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form label{display:grid;gap:7px;color:#dce5fb;font-size:.83rem;font-weight:750}
.contact-form input,.contact-form textarea{
  width:100%;border:1px solid rgba(135,160,210,.2);border-radius:13px;
  background:rgba(6,13,31,.78);color:#fff;padding:13px 14px;font:inherit;outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s
}
.contact-form textarea{resize:vertical;min-height:132px}
.contact-form input:focus,.contact-form textarea:focus{
  border-color:rgba(49,220,255,.72);
  box-shadow:0 0 0 4px rgba(49,220,255,.08),0 0 28px rgba(111,60,255,.08);
  background:rgba(8,17,39,.96)
}
.privacy-check{display:flex!important;align-items:flex-start;gap:10px!important;color:#8e9bb9!important;line-height:1.5;font-weight:500!important}
.privacy-check input{width:16px;height:16px;margin-top:3px;accent-color:#7045ff}
.privacy-check a{color:#9a79ff;text-decoration:underline;text-underline-offset:2px}
.form-submit-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form-status{min-height:22px;color:#8e9bb9;font-size:.88rem}
.form-status.success{color:#63eca5}.form-status.error{color:#ff8ca7}
#contactSubmit:disabled{opacity:.6;cursor:wait}
@media(max-width:860px){.demo-panel{grid-template-columns:1fr}.demo-copy{position:static}}
@media(max-width:620px){.form-grid{grid-template-columns:1fr}}


/* ============================================================
   CLARISEC IMMERSIVE / DEEP-SCROLL EXPERIENCE v3
   Native scrolling only: no scroll hijacking, content remains indexable.
   ============================================================ */
:root{--scroll-p:0;--story-p:0;--story-stage:0}
body{background:#040817;isolation:isolate}
body:before{content:"";position:fixed;inset:0;z-index:-5;background:radial-gradient(circle at 50% -15%,rgba(111,60,255,.18),transparent 38rem),linear-gradient(#040817,#061025 42%,#040817 100%);pointer-events:none}
.immersive-bg{position:fixed;inset:0;z-index:-4;overflow:hidden;pointer-events:none;opacity:.9}
.grid-plane{position:absolute;left:-15vw;right:-15vw;top:18vh;height:75vh;transform:perspective(680px) rotateX(64deg) translateY(12vh);transform-origin:50% 0;background-image:linear-gradient(rgba(51,153,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(111,60,255,.10) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 58%,transparent 100%);animation:gridDrift 16s linear infinite}
@keyframes gridDrift{to{background-position:0 128px,128px 0}}
.aurora{position:absolute;width:48vw;height:48vw;border-radius:50%;filter:blur(80px);opacity:.16;mix-blend-mode:screen}.aurora-a{background:#6537ff;top:-20vw;left:-18vw;animation:auroraA 17s ease-in-out infinite alternate}.aurora-b{background:#00d1ff;right:-20vw;top:22vh;animation:auroraB 21s ease-in-out infinite alternate}@keyframes auroraA{to{transform:translate(24vw,24vh) scale(1.12)}}@keyframes auroraB{to{transform:translate(-24vw,30vh) scale(.9)}}
.data-beam{position:absolute;height:1px;width:70vw;background:linear-gradient(90deg,transparent,rgba(59,221,255,.8),rgba(124,76,255,.5),transparent);filter:drop-shadow(0 0 8px #29d9ff);opacity:.22;transform:rotate(-23deg)}.beam-a{top:24%;left:-20%;animation:beam 9s linear infinite}.beam-b{top:65%;right:-18%;animation:beam 13s linear reverse infinite}@keyframes beam{50%{transform:translateX(42vw) rotate(-23deg);opacity:.5}}
.scroll-depth{position:fixed;right:22px;top:50%;z-index:25;transform:translateY(-50%);display:grid;justify-items:end;gap:8px;color:#64749a;font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;writing-mode:vertical-rl;pointer-events:none}.scroll-depth b{color:#30dfff;font-size:11px}.scroll-depth:before{content:"";width:1px;height:78px;background:linear-gradient(transparent,#6f3cff,#31dcff,transparent);transform:scaleY(max(.05,var(--scroll-p)));transform-origin:top}
.hero{min-height:calc(100svh - 76px);display:flex;align-items:center;padding-top:clamp(56px,8vh,110px);position:relative}
.hero:before{content:"SECURE / VERIFY / TRUST";position:absolute;right:-2vw;top:14%;font:900 clamp(4rem,10vw,9rem)/.8 ui-monospace,monospace;color:transparent;-webkit-text-stroke:1px rgba(114,150,220,.055);letter-spacing:-.07em;white-space:nowrap;transform:translateX(calc(var(--scroll-p) * -10vw));pointer-events:none}
.hero .display{filter:drop-shadow(0 22px 70px rgba(111,60,255,.12))}.hero .display em{font-style:normal;background:linear-gradient(90deg,#8d6cff,#2edcff,#8d6cff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradientSweep 5s linear infinite}@keyframes gradientSweep{to{background-position:-200% 0}}
.hero-telemetry{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;margin-bottom:18px;color:#7080a4;font:700 10px/1.2 ui-monospace,monospace;letter-spacing:.08em}.hero-telemetry span{display:flex;gap:8px;align-items:center;border:1px solid rgba(90,130,210,.15);background:rgba(5,13,30,.38);padding:8px 10px;border-radius:999px}.hero-telemetry i{width:5px;height:5px;border-radius:50%;background:#36e0ff;box-shadow:0 0 11px #36e0ff;animation:blink 2s ease-in-out infinite}@keyframes blink{50%{opacity:.25}}
.product-stage{transform-style:preserve-3d;will-change:transform}.product-stage:after{content:"";position:absolute;inset:5% 7%;z-index:-1;border-radius:40px;background:radial-gradient(circle,rgba(111,60,255,.30),transparent 62%);filter:blur(36px);transform:translateZ(-80px)}
.deep-story{height:430vh;position:relative;border-top:1px solid rgba(92,133,212,.12);border-bottom:1px solid rgba(92,133,212,.12);background:linear-gradient(180deg,rgba(2,8,22,.45),rgba(5,12,30,.88) 45%,rgba(2,8,22,.5));z-index:2}
.deep-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.deep-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,86px);align-items:center}
.deep-copy>h2{max-width:650px;font-size:clamp(2.4rem,4.6vw,5rem);margin-bottom:28px;line-height:.98}
.story-chapters{position:relative;min-height:230px}.story-chapter{position:absolute;inset:0;opacity:0;transform:translateY(30px);filter:blur(7px);transition:opacity .55s ease,transform .55s ease,filter .55s ease;pointer-events:none}.story-chapter.active{opacity:1;transform:translateY(0);filter:none;pointer-events:auto}.chapter-no{color:#37ddff;font:800 10px/1.2 ui-monospace,monospace;letter-spacing:.14em;margin-bottom:12px}.story-chapter h3{font-size:clamp(1.45rem,2.2vw,2.25rem);margin:0 0 10px}.story-chapter p{max-width:580px;color:#9aa9c7;font-size:1rem}.story-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:17px}.story-tags span{border:1px solid rgba(112,151,225,.18);border-radius:999px;padding:6px 9px;color:#7586aa;font:700 9px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em}.story-progress{display:flex;gap:8px;margin-top:18px}.story-progress i{height:2px;flex:1;background:#1b2848;position:relative;overflow:hidden}.story-progress i:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#6841ff,#32dcff);transform:scaleX(0);transform-origin:left;transition:transform .3s}.story-progress i.done:before{transform:scaleX(1)}
.deep-visual{position:relative;min-height:min(68vh,680px);display:grid;place-items:center;perspective:1300px}.deep-screen{position:relative;width:min(860px,100%);border:1px solid rgba(97,140,223,.23);border-radius:28px;background:rgba(4,10,24,.86);padding:12px;box-shadow:0 50px 120px rgba(0,0,0,.5),0 0 70px rgba(79,55,255,.16),inset 0 0 0 1px rgba(255,255,255,.025);transform:rotateY(calc((var(--story-stage) - 1.5)*1.5deg)) rotateX(calc((var(--story-stage) - 1.5)*-.8deg)) scale(calc(.94 + var(--story-p)*.05));transition:transform .35s ease;overflow:hidden;z-index:3}.deep-screen img{display:block;width:100%;height:auto;border-radius:19px;filter:saturate(.96) contrast(1.02)}.screen-top{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 5px 9px;color:#64779e;font:800 9px ui-monospace,monospace;letter-spacing:.08em}.screen-top b{color:#64e6a6}.scan-line{position:absolute;left:12px;right:12px;height:1px;top:48px;background:linear-gradient(90deg,transparent,#40e7ff,transparent);box-shadow:0 0 14px #40e7ff;opacity:.75;animation:scanner 3.8s ease-in-out infinite}@keyframes scanner{50%{transform:translateY(min(45vw,480px));opacity:.28}}
.deep-hud{position:absolute;z-index:5;border:1px solid rgba(61,222,255,.2);background:rgba(3,13,30,.74);backdrop-filter:blur(12px);padding:10px 12px;border-radius:11px;box-shadow:0 15px 35px rgba(0,0,0,.25)}.deep-hud small{display:block;color:#5f7399;font:800 8px ui-monospace,monospace;letter-spacing:.12em}.deep-hud strong{color:#57e5ff;font:800 10px ui-monospace,monospace;letter-spacing:.08em}.hud-left{left:3%;bottom:5%}.hud-right{right:3%;top:11%}.signal-stack{position:absolute;right:-8%;bottom:5%;z-index:4;display:grid;gap:5px;color:#51668e;font:700 8px ui-monospace,monospace;letter-spacing:.06em}.signal-stack span{padding:5px 8px;background:rgba(4,10,24,.76);border-left:1px solid #653fff}.orbit{position:absolute;border:1px solid rgba(78,150,244,.12);border-radius:50%;z-index:1;animation:orbit 20s linear infinite}.orbit-1{width:90%;aspect-ratio:1}.orbit-2{width:70%;aspect-ratio:1;animation-direction:reverse;animation-duration:27s;border-style:dashed}.orbit-3{width:110%;aspect-ratio:1;animation-duration:36s}@keyframes orbit{to{transform:rotate(360deg)}}
.signal-marquee{overflow:hidden;border-block:1px solid rgba(90,129,206,.12);background:rgba(5,12,27,.72);padding:15px 0}.marquee-track{display:flex;align-items:center;gap:28px;width:max-content;animation:marquee 28s linear infinite;color:#7889ac;font:800 10px ui-monospace,monospace;letter-spacing:.14em}.marquee-track span{color:#a7b7d4}.marquee-track b{color:#4bdbff;font-size:15px}@keyframes marquee{to{transform:translateX(-50%)}}
.identity-pulse{padding:clamp(80px,10vw,150px) 0;position:relative}.pulse-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,90px);align-items:center}.pulse-console{border:1px solid rgba(91,139,223,.18);background:rgba(3,10,24,.78);border-radius:24px;padding:18px;box-shadow:0 35px 90px rgba(0,0,0,.28);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.console-head{display:flex;justify-content:space-between;color:#6d7fa3;font-size:9px;letter-spacing:.12em;border-bottom:1px solid rgba(103,141,210,.12);padding-bottom:12px}.console-head b{color:#66e9a4}.console-rows{display:grid}.console-rows>div{display:grid;grid-template-columns:110px 1fr auto;gap:18px;padding:13px 0;border-bottom:1px solid rgba(103,141,210,.08);font-size:10px}.console-rows code{color:#596a8d}.console-rows span{color:#b8c6df}.console-rows b{color:#36dfff;font-size:9px}.console-wave{height:72px;position:relative;overflow:hidden;margin-top:12px;background:repeating-linear-gradient(90deg,rgba(58,124,210,.08) 0 1px,transparent 1px 18px)}.console-wave:before{content:"";position:absolute;inset:30% 0 auto;height:2px;background:linear-gradient(90deg,transparent,#6e4cff,#38e2ff,#6e4cff,transparent);filter:drop-shadow(0 0 8px #38e2ff);clip-path:polygon(0 50%,5% 50%,7% 5%,9% 95%,12% 50%,23% 50%,25% 25%,27% 75%,30% 50%,46% 50%,48% 0,50% 100%,52% 50%,70% 50%,72% 15%,74% 85%,76% 50%,100% 50%);height:32px;animation:wave 4s linear infinite}@keyframes wave{to{transform:translateX(18px)}}
/* add more depth to standard sections */
main>.section{position:relative}.section-marker{opacity:.5}.panel,.card,.topic,.sector-card,.article-card{transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}.panel:hover,.card:hover,.topic:hover,.sector-card:hover,.article-card:hover{border-color:rgba(82,204,255,.25);box-shadow:0 20px 55px rgba(0,0,0,.20),0 0 28px rgba(111,60,255,.06)}
@media(max-width:980px){.deep-story{height:auto}.deep-sticky{position:relative;height:auto;padding:90px 0}.deep-grid,.pulse-grid{grid-template-columns:1fr}.story-chapters{min-height:390px}.story-chapter{position:relative;opacity:1;filter:none;transform:none;margin-bottom:30px}.story-progress{display:none}.deep-visual{min-height:auto}.scroll-depth{display:none}.deep-screen{transform:none!important}.signal-stack{display:none}.hero{min-height:auto}.grid-plane{opacity:.6}}
@media(max-width:620px){.hero-telemetry{display:none}.deep-copy>h2{font-size:2.3rem}.deep-screen{padding:8px;border-radius:18px}.deep-screen img{border-radius:12px}.orbit{display:none}.pulse-console{overflow:hidden}.console-rows>div{grid-template-columns:76px 1fr auto;gap:8px}.signal-marquee{margin-inline:-1px}}
@media(prefers-reduced-motion:reduce){.grid-plane,.aurora,.data-beam,.scan-line,.orbit,.marquee-track,.console-wave:before{animation:none!important}.deep-story{height:auto}.deep-sticky{position:relative;height:auto;padding:90px 0}.story-chapter{position:relative;opacity:1;filter:none;transform:none;margin-bottom:25px}.story-progress{display:none}.deep-screen{transform:none!important}}
