/* 03-shell.css - 3 of 6 - Panel hover system, intro + page transition, navigation, home hero, inner page heroes.
   Order matters: these six files are one stylesheet cut at section
   boundaries, and every page links them in numeric order. A rule in a
   later file overrides an earlier one exactly as it did in the single
   file. Do not reorder the links, and do not add a seventh without
   updating check.js, which enforces the manifest. */
/* --- panel hover system --- */
.card,.package,.contact-item,.process-step,.timeline-item,.proof-item,.stat,.faq details{transition:border-color .26s ease,background-color .26s ease,box-shadow .26s ease,transform .26s cubic-bezier(.2,.8,.2,1)}
/* every panel: the edge picks up the accent */
.card:hover,.package:hover,.contact-item:hover,.process-step:hover,.timeline-item:hover,.proof-item:hover,.stat:hover,.faq details:hover{border-color:rgba(var(--accent-rgb),.32)}
/* flat-surface panels also lighten (gradient-backed ones can't, so they gain depth instead) */
.contact-item:hover,.process-step:hover,.timeline-item:hover,.proof-item:hover,.stat:hover,.faq details:hover{background-color:rgba(255,255,255,.06)}
.card:hover{box-shadow:0 16px 40px rgba(0,0,0,.30)}
/* panels you can actually click also lift */
.card.capability-card:hover,.package:hover,.faq details:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(0,0,0,.36)}
.card.capability-card:hover .text-link:after{transform:translateX(4px)}
.matrix tbody tr{transition:background-color .2s ease}
.matrix tbody tr:hover{background:rgba(var(--accent-rgb),.06)}
.card-number{display:block;color:var(--accent);font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:12px}
.icon{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(var(--accent-rgb),.15),rgba(var(--accent-deep-rgb),.12));border:1px solid rgba(var(--accent-rgb),.18);margin-bottom:18px}
.icon svg{width:23px;height:23px;stroke:var(--accent);fill:none;stroke-width:1.8}
.list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.list li{display:flex;gap:10px;color:#dfe8fa;line-height:1.55}
.list li:before{content:"";width:8px;height:8px;flex:0 0 8px;border-radius:999px;background:var(--accent);margin-top:8px}
.badge-row{display:flex;gap:8px;flex-wrap:wrap}
.badge{padding:8px 11px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05);font-size:12px;color:#dce7fa}
.note{padding:16px 18px;border-radius:18px;background:rgba(var(--accent-rgb),.06);border:1px solid rgba(var(--accent-rgb),.17);color:#dbefff}
.price{font-family:var(--font-display);font-size:42px;letter-spacing:-.03em;font-weight:900;color:#fff;margin:10px 0}
.price.scope{font-size:24px;letter-spacing:-.02em;color:var(--accent)}
.divider{height:1px;background:var(--line);margin:20px 0}

/* Intro and page transitions */
.site-intro{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,rgba(var(--accent-rgb),.08),transparent 24%),linear-gradient(180deg,rgba(4,8,22,.99),rgba(5,10,24,1));transition:.6s ease;overflow:hidden}
.site-intro.hide{opacity:0;visibility:hidden}
.dot-wave{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:-1;opacity:.42}
body.dot-wave-on .bg-orb{opacity:0}
/* Static halftone for browsers with no WebGL. initDotWave() returns null and the
   body class is never set - Brave's shields block WebGL as a fingerprinting
   surface, so Brave on Android fell back to the plain ramp and read as a
   different design rather than a quieter one. This is the same field the shader
   draws (6px pitch, concentrated up-right, clear of the headline column) with the
   travelling wave removed, so the two browsers differ in motion, not identity.
   The class is set only on success, so the enhancement can never double up. */
body:not(.dot-wave-on)::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.30;
background-image:radial-gradient(rgba(var(--accent-rgb),.55) 1px,rgba(var(--accent-rgb),0) 1px);background-size:6px 6px;
-webkit-mask-image:radial-gradient(125% 95% at 78% 12%,#000 8%,transparent 62%);
mask-image:radial-gradient(125% 95% at 78% 12%,#000 8%,transparent 62%)}
@media(prefers-reduced-motion:reduce){body:not(.dot-wave-on)::after{opacity:.22}}
.intro-shader{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:.5;-webkit-mask-image:radial-gradient(circle at center,transparent 14%,#000 44%,#000 76%,transparent 100%);mask-image:radial-gradient(circle at center,transparent 14%,#000 44%,#000 76%,transparent 100%)}
.intro-grid{position:absolute;inset:0;opacity:.16;background-image:linear-gradient(rgba(var(--accent-rgb),.14) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--accent-rgb),.14) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(circle at center,#000 34%,transparent 82%)}
.intro-shell{position:relative;width:min(330px,86vw);height:230px;display:grid;place-items:center}
.intro-shell:before,.intro-shell:after{content:"";position:absolute;border-radius:999px;border:1px solid rgba(var(--accent-rgb),.14);animation:spin 10s linear infinite}
.intro-shell:before{width:220px;height:220px}.intro-shell:after{width:170px;height:170px;animation-direction:reverse;animation-duration:8s}
.intro-logo{width:min(260px,70vw);filter:drop-shadow(0 20px 50px rgba(var(--accent-rgb),.23))}
.intro-loader{position:absolute;bottom:3px;width:180px;height:4px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.intro-loader span{display:block;width:100%;height:100%;background:var(--accent);transform-origin:left;animation:load 1.15s linear forwards}
@keyframes load{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes spin{to{transform:rotate(360deg)}}
.page-transition{position:fixed;inset:0;z-index:290;display:grid;place-items:center;background:#040816;opacity:0;visibility:hidden;transition:.35s ease}
.page-transition.active{opacity:1;visibility:visible}
.page-transition img{width:180px;filter:drop-shadow(0 18px 45px rgba(var(--accent-rgb),.18));animation:pulseLogo .75s ease infinite alternate}
@keyframes pulseLogo{to{transform:scale(1.035);opacity:.82}}

/* Navigation */
.nav{position:sticky;top:0;z-index:90;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(4,8,22,.72);backdrop-filter:blur(18px)}
.nav.scrolled{background:rgba(4,8,22,.91)}
.nav-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:900;letter-spacing:-.02em}
.brand img{width:67px;height:38px;object-fit:contain}
.brand span{display:grid;line-height:1.02}.brand small{font-family:var(--font-mono);font-size:10px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
.nav-links{display:flex;align-items:center;gap:7px}
.nav-link{padding:10px 12px;border-radius:999px;color:#d7e2f5;font-size:14px;font-weight:750}
.nav-link:hover,.nav-link.active{background:rgba(255,255,255,.07);color:#fff}
.nav-dropdown{position:relative}
.dropdown-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);width:640px;padding:14px;border-radius:24px;background:rgba(7,16,33,.97);border:1px solid var(--line);box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:.22s ease;display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.nav-dropdown:hover .dropdown-panel,.nav-dropdown:focus-within .dropdown-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop-item{padding:14px;border-radius:17px;border:1px solid transparent;display:grid;grid-template-columns:36px 1fr;gap:11px}
.drop-item:hover{background:rgba(var(--accent-rgb),.06);border-color:rgba(var(--accent-rgb),.15)}
.drop-item b{font-size:14px;display:block;color:#fff}.drop-item span:not(.drop-dot){font-size:12px;color:var(--muted);margin-top:3px;display:block}
.drop-dot{width:36px;height:36px;border-radius:12px;background:rgba(var(--accent-rgb),.14);border:1px solid rgba(var(--accent-rgb),.24);display:grid;place-items:center;text-align:center;line-height:1;color:var(--accent);font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.02em}
.menu-toggle{display:none;width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.05);cursor:pointer}
.menu-toggle span{display:block;width:18px;height:2px;background:#fff;margin:4px auto;border-radius:999px}
.mobile-nav{display:none}

/* Hero */
.hero{padding:44px 0 56px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 74% 30%,rgba(var(--accent-rgb),.14),transparent 24%),radial-gradient(circle at 86% 64%,rgba(var(--accent-deep-rgb),.12),transparent 22%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:54px;align-items:center}
.hero-copy{position:relative;z-index:2}
.hero-copy h1{font-size:clamp(40px,5vw,64px)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px}
.proof-item{padding:14px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.045)}
.proof-item strong{display:block;font-size:14px}.proof-item span{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.hero-stage{position:relative;min-height:635px}
.device-wrap{position:absolute;inset:18px 0 0;display:grid;place-items:center;perspective:1400px}
.laptop{position:relative;width:min(720px,100%);transform:rotateX(4deg) rotateY(-7deg);filter:drop-shadow(0 45px 80px rgba(0,0,0,.45))}
.laptop-screen{position:relative;width:100%;aspect-ratio:16/10;border-radius:30px;background:#08101f;border:1px solid rgba(255,255,255,.14);padding:14px}
.screen-inner{height:100%;border-radius:21px;overflow:hidden;background:#f4f8ff;position:relative}
.screen-top{height:42px;background:var(--dark);display:flex;align-items:center;gap:7px;padding:0 14px}
.screen-top>span{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.35)}
.screen-url{height:16px;flex:1;border-radius:999px;background:rgba(255,255,255,.08);margin-left:8px}
/* --mk is the mock scale: the slide is laid out at the mock's DESIGN width and
   scaled down to whatever the lid actually is, instead of reflowing into it.
   Reflowing was wrong twice over - the copy is set in px so it could not shrink,
   and a desktop mock that rewraps into one column stops depicting a desktop site.
   app.js sets --mk from a ResizeObserver; at the default 1 the calc()s collapse to
   exactly the old values (width:100%, height:100%-42px, scale(1)), so a browser
   with no ResizeObserver renders precisely what it did before. */
.screen-inner{--mk:1}
.slide{position:absolute;left:0;top:42px;right:auto;bottom:auto;width:calc(100% / var(--mk));height:calc((100% - 42px) / var(--mk));padding:18px;opacity:0;transform-origin:top left;transform:scale(var(--mk)) translateY(10px) scale(.99);transition:.6s ease;pointer-events:none}
.slide.active{opacity:1;transform:scale(var(--mk)) translateY(0) scale(1)}
.slide-label{display:inline-flex;padding:7px 10px;border-radius:999px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(var(--accent-rgb),.11);color:#1a7a3a;border:1px solid rgba(var(--accent-rgb),.18)}
.landing-layout,.corp-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:12px;margin-top:12px}
.preview-dark{border-radius:22px;background:linear-gradient(135deg,#0a0f22,#6b4dff);padding:18px;color:#fff;min-height:154px}
.preview-blue{background:linear-gradient(135deg,#08101f,#006d2c)}
.preview-green{background:linear-gradient(135deg,#00441b,var(--accent-deep))}
.preview-form,.preview-panel{border-radius:22px;background:#fff;border:1px solid rgba(7,16,31,.08);padding:14px;display:grid;gap:9px}
.mock-line{height:10px;border-radius:999px;background:#dbe5f2}.mock-line.lg{height:14px;width:76%;background:var(--accent-deep)}.mock-line.md{width:58%}.mock-line.sm{width:40%}
.mock-input{height:34px;border-radius:11px;background:#eef3fb}.mock-cta{height:38px;border-radius:12px;background:var(--accent-deep)}
.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.preview-card{height:82px;border-radius:17px;background:#fff;border:1px solid rgba(7,16,31,.08);padding:12px}
.commerce-layout{display:grid;grid-template-columns:.68fr 1.32fr .62fr;gap:10px;margin-top:12px}
.filters{border-radius:18px;background:#fff;border:1px solid rgba(7,16,31,.08);padding:10px}.filter-pill{height:24px;border-radius:999px;background:#eef4ff;margin:7px 0}
.products{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.product{border-radius:18px;background:#fff;border:1px solid rgba(7,16,31,.08);padding:9px}.product-img{height:66px;border-radius:13px;background:linear-gradient(135deg,#effff7,#edf2ff)}
.cart{border-radius:18px;background:var(--dark);padding:10px;display:grid;gap:8px}.cart-row{height:42px;border-radius:12px;background:rgba(255,255,255,.08)}.cart-checkout{height:34px;border-radius:12px;background:var(--accent-deep)}
.dashboard-top{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:12px}.kpi{border-radius:17px;background:#fff;border:1px solid rgba(7,16,31,.08);padding:12px;min-height:74px;color:var(--dark)}.kpi b{font-size:20px}
.dashboard-body{display:grid;grid-template-columns:1.1fr .9fr;gap:10px;margin-top:10px}.chart-box,.ai-box{border-radius:18px;padding:12px;min-height:140px}.chart-box{background:#fff;border:1px solid rgba(7,16,31,.08)}.ai-box{background:linear-gradient(135deg,var(--dark),#0a3d1e);color:#fff}
.chart-bars{height:88px;display:flex;gap:7px;align-items:flex-end}.chart-bars span{flex:1;border-radius:999px 999px 6px 6px;background:var(--accent-deep)}
.ai-bubble{height:28px;border-radius:11px;background:rgba(255,255,255,.09);margin:8px 0}
.screen-switcher{position:absolute;right:14px;bottom:10px;display:flex;gap:16px}.screen-switcher button{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:999px;background:rgba(7,16,31,.18);cursor:pointer}
.screen-switcher button:before{content:"";position:absolute;inset:-8px;border-radius:999px}.screen-switcher button.active{width:26px;background:var(--accent-deep)}
.laptop-base{width:112%;height:30px;background:linear-gradient(180deg,#a7b2c6,#626f86);border-radius:0 0 32px 32px;position:absolute;left:-6%;bottom:-24px;box-shadow:0 20px 40px rgba(0,0,0,.32)}
.hero-float{position:absolute;border-radius:22px;border:1px solid rgba(255,255,255,.13);background:rgba(7,16,31,.76);backdrop-filter:blur(14px);box-shadow:var(--shadow-soft);padding:15px}
.hero-float.one{left:-15px;bottom:66px;width:215px}.hero-float.two{right:-7px;top:30px;width:196px}
.hero-float strong{display:block;font-size:15px}.hero-float span{display:block;color:var(--muted);font-size:12px;margin-top:4px}

/* Inner page heroes */
.page-hero{padding:96px 0 58px;position:relative;overflow:hidden}
.page-hero-grid{display:grid;grid-template-columns:1fr .86fr;gap:48px;align-items:center}
.page-hero h1{font-size:clamp(46px,6vw,78px)}
.page-visual{min-height:450px;position:relative;display:grid;place-items:center}
.visual-shell{width:100%;border-radius:34px;padding:18px;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035));border:1px solid var(--line);box-shadow:var(--shadow);transform:rotateY(-4deg) rotateX(2deg)}
.visual-screen{min-height:380px;border-radius:24px;background:#f4f8ff;color:var(--dark);padding:18px;overflow:hidden}
.visual-nav{height:38px;border-radius:14px;background:var(--dark);margin-bottom:14px;display:flex;align-items:center;gap:7px;padding:0 12px}.visual-nav span{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.36)}
.visual-block{border-radius:20px;padding:18px;background:#fff;border:1px solid rgba(7,16,31,.08);box-shadow:0 12px 30px rgba(7,16,31,.06)}
.visual-block.dark{background:linear-gradient(135deg,var(--dark),#006d2c);color:#fff}
.visual-block.green{background:linear-gradient(135deg,#00441b,var(--accent-deep));color:#fff}
.visual-columns{display:grid;grid-template-columns:1.12fr .88fr;gap:12px}
.visual-small-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.visual-small{height:82px;border-radius:16px;background:#fff;border:1px solid rgba(7,16,31,.08)}
.visual-float{position:absolute;padding:13px 15px;border-radius:18px;background:rgba(7,16,31,.84);border:1px solid var(--line);box-shadow:var(--shadow-soft);backdrop-filter:blur(12px)}.visual-float.a{left:-14px;bottom:34px}.visual-float.b{right:-9px;top:32px}
.visual-float b{display:block}.visual-float span{display:block;color:var(--muted);font-size:12px;margin-top:3px}