/* Tech-Net Consulting Group — shared stylesheet, "Cinematic Dark" design system (all pages). Progressive enhancement rule: NOTHING is hidden by default. Hidden-before-reveal states exist only under html.js (class set by an inline script in ) and carry a pure-CSS failsafe, so content appears even if site.js never runs. Homepage-only film layers, proof bar, migration scene and chapter numerals live in home.css. */ /* ---------- 1. TOKENS ---------- */ :root{ color-scheme:dark; --bg:#050a14; --bg-2:#070e1b; --bg-3:#0b1626; --bg-deep:#03070e; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16); --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.07); --text:#eaf3fa; --muted:#a7b9cb; --dim:#8a9db1; --brand:#0a7fa5; --brand-2:#19b5d8; --glow:#5ee7ff; --glow-rgb:94,231,255; --live:#2fe07a; --live-2:#1fbf5f; --live-ink:#03140a; --amber:#f5c451; --red:#ff6b6b; --orange:#ff9a4d; --violet:#7aa7ff; --r-sm:10px; --r:18px; --r-lg:28px; --r-pill:999px; --sh-1:0 1px 0 rgba(255,255,255,.06) inset,0 20px 50px -20px rgba(0,0,0,.7); --sh-2:0 1px 0 rgba(255,255,255,.08) inset,0 40px 90px -30px rgba(0,0,0,.85); --sh-glow:0 0 0 1px rgba(var(--glow-rgb),.35),0 0 40px -6px rgba(var(--glow-rgb),.45); --ff-d:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --ff-b:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --ff-m:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace; --ease:cubic-bezier(.2,.7,.2,1); --nav-h:76px; --lh:48px; /* legacy token names still referenced by a few inline styles; they resolve to dark values. Green is reserved for Live Support, so the legacy "green" aliases map to cyan/blue. */ --ink:var(--text); --ink2:var(--muted); --mute:var(--dim); --cream:var(--bg); --paper:var(--bg-2); --sand:var(--bg-3); --rule:var(--line); --teal:#4fd0ee; --gold:var(--amber); --green:var(--glow); --teal-lt:rgba(79,208,238,.16); --green-lt:rgba(91,141,255,.18); --gold-lt:rgba(245,196,81,.15); --red-lt:rgba(255,107,107,.12); --fd:var(--ff-d); --fb:var(--ff-b); --fm:var(--ff-m); } /* ---------- 2. BASE ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ff-b);font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden} img,svg,video,canvas{display:block;max-width:100%} img{height:auto} a{color:inherit;text-decoration:none} h1,h2,h3,h4,p,ul{margin:0} ul{padding:0;list-style:none} strong,b{font-weight:600} button,input,select,textarea{font:inherit;color:inherit} ::selection{background:rgba(var(--glow-rgb),.3);color:#fff} :focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:6px} main{display:block} .wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 24px} .ic{display:inline-block;vertical-align:-.18em;width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none} .sprite{position:absolute;overflow:hidden} .skip{position:absolute;left:12px;top:-60px;z-index:2000;background:var(--glow);color:#03121c;font-weight:600;padding:.6rem 1rem;border-radius:8px;transition:top .2s} .skip:focus{top:12px} .progress{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,var(--brand),var(--glow));z-index:1200;pointer-events:none} h1{font-family:var(--ff-d);font-weight:600;font-size:clamp(2.55rem,4.9vw,4.5rem);line-height:1.03;letter-spacing:-.04em;color:#fff;text-wrap:balance} h1 .ty{display:block;margin-top:.12em;padding-bottom:.08em;background:linear-gradient(95deg,#fff 0%,#9af0ff 28%,#38c6e8 62%,#5b8dff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 28px rgba(var(--glow-rgb),.28))} h3{font-family:var(--ff-d);font-weight:600;font-size:1.22rem;line-height:1.25;letter-spacing:-.015em;color:#fff} h4{font-family:var(--ff-d);font-weight:600;color:#fff;letter-spacing:-.01em} /* ---------- 3. BUTTONS ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--ff-b);font-weight:600;font-size:.95rem;line-height:1;padding:.95rem 1.5rem;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s,background .25s,border-color .25s} .btn-gold{background:linear-gradient(135deg,#8df0ff 0%,#38c6e8 55%,#19a9cf 100%);color:#03121c;box-shadow:0 0 0 1px rgba(var(--glow-rgb),.5),0 10px 40px -8px rgba(var(--glow-rgb),.55)} .btn-gold:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(var(--glow-rgb),.8),0 16px 50px -6px rgba(var(--glow-rgb),.75)} .btn-ink,.btn-ol{background:var(--glass);border-color:var(--line-2);color:var(--text);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .btn-ink:hover,.btn-ol:hover{transform:translateY(-2px);border-color:rgba(var(--glow-rgb),.6);background:rgba(var(--glow-rgb),.08);box-shadow:0 0 30px -8px rgba(var(--glow-rgb),.5)} .btn:active{transform:translateY(0)} .btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none} .btn-sm{padding:.7rem 1.15rem;font-size:.85rem} .btn-live{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(180deg,var(--live),var(--live-2));color:var(--live-ink);font-family:var(--ff-m);font-weight:600;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;line-height:1;padding:.68rem .95rem;border-radius:var(--r-pill);white-space:nowrap;box-shadow:0 0 0 1px rgba(47,224,122,.55),0 0 26px -4px rgba(47,224,122,.55);transition:transform .25s var(--ease),box-shadow .25s} .btn-live:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(47,224,122,.9),0 0 36px -2px rgba(47,224,122,.8)} .ldot{width:7px;height:7px;border-radius:50%;background:var(--live-ink);box-shadow:0 0 0 0 rgba(3,20,10,.5);flex:none} /* ---------- 4. NAV ---------- */ #nav{position:fixed;inset:0 0 auto 0;z-index:1000;height:var(--nav-h);display:flex;align-items:center;background:linear-gradient(180deg,rgba(5,10,20,.8),rgba(5,10,20,0));border-bottom:1px solid transparent;transition:background .3s,border-color .3s,backdrop-filter .3s} #nav.sc{background:rgba(5,10,20,.74);-webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);border-bottom-color:var(--line)} .ni{display:flex;align-items:center;justify-content:space-between;gap:1.5rem} /* Logo: the PNG is dark teal + gray on transparent with empty padding. Crop to the artwork box (388x128 inside 420x198) and lift it to luminous cyan / soft white. */ .brand{display:block;flex:none;height:var(--lh);width:calc(var(--lh)*3.031);overflow:hidden;border-radius:4px} .brand img{display:block;max-width:none;height:calc(var(--lh)*1.5469);width:auto;margin:calc(var(--lh)*-.1406) 0 0 calc(var(--lh)*-.125);filter:brightness(1.75) saturate(1.05) drop-shadow(0 0 10px rgba(var(--glow-rgb),.35))} .nm{display:flex;align-items:center;gap:1.3rem} .nm a{position:relative;font-size:.86rem;font-weight:500;color:var(--muted);padding:.4rem 0;white-space:nowrap;transition:color .2s} .nm a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:linear-gradient(90deg,transparent,var(--glow),transparent);transform:scaleX(0);transition:transform .3s var(--ease)} .nm a:hover,.nm a.on{color:#fff} .nm a:hover::after,.nm a.on::after{transform:scaleX(1)} .nr{display:flex;align-items:center;gap:.75rem} .nphone{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--ff-m);font-size:.78rem;font-weight:500;color:var(--text);white-space:nowrap;padding:.4rem .2rem} .nphone .ic{color:var(--glow)} .nphone:hover{color:var(--glow)} .btn-assess{padding:.62rem 1rem;font-size:.8rem} .hb{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0 10px;background:var(--glass);border:1px solid var(--line-2);border-radius:12px;cursor:pointer} .hb span{display:block;height:2px;background:var(--text);border-radius:2px;transition:transform .3s var(--ease),opacity .2s} .hb[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hb[aria-expanded="true"] span:nth-child(2){opacity:0} .hb[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mob{display:none;position:fixed;top:var(--nav-h);left:0;right:0;z-index:999;max-height:calc(100vh - var(--nav-h));overflow:auto;padding:1rem 24px 1.75rem;text-align:center;background:rgba(5,10,20,.96);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);border-bottom:1px solid var(--line)} .mob.op{display:block} .mob li{border-bottom:1px solid var(--line)} .mob li a{display:flex;justify-content:center;align-items:center;gap:.5rem;padding:.95rem 0;font-family:var(--ff-d);font-size:1.1rem;font-weight:500;color:var(--text)} .mob .mphone{color:var(--glow)} .mob .btn-live{margin-top:1.25rem} /* ---------- 5. HERO (shared: gradient + aurora + grid + grain; no canvas/video here) ---------- */ .hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:56vh;padding:calc(var(--nav-h) + 3.5rem) 0 4.5rem;overflow:hidden; background:radial-gradient(1200px 700px at 78% 38%,rgba(10,127,165,.34),transparent 62%),radial-gradient(900px 600px at 8% 105%,rgba(25,80,190,.28),transparent 60%),linear-gradient(180deg,#040812 0%,#061020 55%,var(--bg) 100%)} .hero-bg,.hero-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .hero-bg{z-index:0;overflow:hidden} .aurora{position:absolute;inset:-10%;filter:blur(70px);opacity:.9;translate:calc(var(--px,0)*26px) calc(var(--py,0)*18px)} .aurora i{position:absolute;border-radius:50%;will-change:transform} .aurora .a1{width:46%;height:52%;left:52%;top:6%;background:radial-gradient(closest-side,rgba(25,181,216,.5),transparent);animation:drift1 26s ease-in-out infinite alternate} .aurora .a2{width:40%;height:50%;left:-6%;top:48%;background:radial-gradient(closest-side,rgba(40,90,220,.42),transparent);animation:drift2 32s ease-in-out infinite alternate} .aurora .a3{width:34%;height:40%;left:36%;top:-14%;background:radial-gradient(closest-side,rgba(110,80,230,.26),transparent);animation:drift3 38s ease-in-out infinite alternate} @keyframes drift1{to{transform:translate3d(-14%,12%,0) scale(1.18)}} @keyframes drift2{to{transform:translate3d(18%,-16%,0) scale(1.1)}} @keyframes drift3{to{transform:translate3d(10%,22%,0) scale(1.25)}} .hero-dots{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 75% 65% at 60% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 75% 65% at 60% 40%,#000 20%,transparent 75%)} .hero-fx{z-index:3;overflow:hidden} .hero-fx .grain{position:absolute;inset:-50%;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.1s steps(1) infinite} @keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-4%,3%)}34%{transform:translate(3%,-5%)}51%{transform:translate(-6%,-2%)}68%{transform:translate(5%,4%)}85%{transform:translate(-2%,6%)}100%{transform:translate(0,0)}} .hero-fx .vig{position:absolute;inset:0;background:radial-gradient(ellipse 120% 90% at 50% 40%,transparent 55%,rgba(2,5,10,.78) 100%),linear-gradient(90deg,rgba(4,8,18,.72) 0%,rgba(4,8,18,.35) 38%,transparent 60%),linear-gradient(180deg,transparent 72%,var(--bg) 100%)} .hero .wrap{position:static} .hero-in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:4rem;align-items:center} .hero-in.one{grid-template-columns:minmax(0,1fr);max-width:900px} .hero-copy{position:relative;z-index:4} .hero-inner h1{font-size:clamp(2.25rem,4.3vw,3.7rem)} .kicker{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--ff-m);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--glow);padding:.5rem .9rem;border:1px solid rgba(var(--glow-rgb),.28);border-radius:var(--r-pill);background:rgba(var(--glow-rgb),.06);margin-bottom:1.3rem} .kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--glow);box-shadow:0 0 12px var(--glow);flex:none} .sub{color:var(--muted);font-size:1.08rem;line-height:1.7} .sub strong{color:var(--text);font-weight:600} .sub a{color:var(--teal);font-weight:600;text-decoration:underline;text-decoration-color:rgba(var(--glow-rgb),.4);text-underline-offset:.2em} .hero .sub{max-width:40rem;margin-top:1.6rem;font-size:clamp(1.02rem,1.25vw,1.16rem)} .hacts{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.1rem} .hbadges{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;margin-top:2rem;padding-top:1.3rem;border-top:1px solid var(--line)} .hbadge{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--ff-m);font-size:.7rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .hbadge i{width:6px;height:6px;border-radius:50%;background:var(--glow);box-shadow:0 0 10px var(--glow);flex:none} .hero-vis{position:relative;z-index:4;max-width:560px;width:100%;margin-left:auto} .hframe{position:relative;z-index:1;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--sh-2),0 0 120px -30px rgba(var(--glow-rgb),.5);aspect-ratio:5/4.4;translate:calc(var(--px,0)*-10px) calc(var(--py,0)*-8px);background:var(--bg-3)} .hframe img{width:100%;height:100%;object-fit:cover;filter:saturate(.5) brightness(.6) contrast(1.1)} .hframe::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(10,127,165,.45),rgba(5,10,20,.2) 45%,rgba(5,10,20,.85) 100%),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)} .hyrs,.hstat{position:absolute;z-index:4;background:rgba(8,16,30,.72);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--line-2);box-shadow:var(--sh-2)} .hyrs{top:-22px;right:-14px;border-radius:var(--r);padding:.9rem 1.15rem;text-align:left;translate:calc(var(--px,0)*16px) calc(var(--py,0)*12px)} .hyrs b{display:block;font-family:var(--ff-d);font-size:2rem;font-weight:600;letter-spacing:-.03em;line-height:1;color:#fff} .hyrs span{font-family:var(--ff-m);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .hstat{left:-36px;bottom:-44px;width:min(340px,86%);border-radius:var(--r);padding:1.15rem 1.25rem 1.1rem;translate:calc(var(--px,0)*22px) calc(var(--py,0)*16px)} .hstat .t{font-family:var(--ff-m);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--glow)} .hstat .n{font-family:var(--ff-d);font-weight:600;font-size:1.05rem;margin:.2rem 0 .9rem;color:#fff} .hstat .m{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:.8rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .hstat .m b{display:block;font-family:var(--ff-d);font-size:1.35rem;font-weight:600;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums} .hstat .m span{font-size:.7rem;color:var(--muted)} .hstat .s{display:flex;align-items:center;gap:.5rem;margin-top:.8rem;font-size:.78rem;color:var(--glow);font-weight:500} .hstat .s i{width:8px;height:8px;border-radius:50%;background:var(--glow);box-shadow:0 0 0 0 rgba(var(--glow-rgb),.6);flex:none} .hero-two{padding-bottom:7rem} .hero-form{align-items:flex-start;min-height:0;padding-bottom:3rem} .sec-top{padding-top:calc(var(--nav-h) + 4rem)!important;background:radial-gradient(900px 420px at 80% 0,rgba(10,127,165,.22),transparent 65%)} /* ---------- 6. PARTNER STRIP (+ marquee when site.js enables it) ---------- */ .pstrip-sec{padding:4rem 0 1rem} .sec + .pstrip-sec,.pstrip-sec + .sec{border-top:0} .pstrip-t{text-align:center;font-family:var(--ff-m);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:1.6rem} .pmarq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .pbadges{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;padding:4px 24px} .pbadge{display:inline-flex;align-items:center;gap:.65rem;padding:.8rem 1.25rem;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--glass);white-space:nowrap;flex:none;transition:border-color .3s,background .3s} .pbadge:hover{border-color:var(--line-2);background:var(--glass-2)} .pbadge i{width:9px;height:9px;border-radius:3px;flex:none} .pbadge b{font-family:var(--ff-d);font-weight:600;font-size:1rem;color:#fff;letter-spacing:-.01em} .pbadge span{font-size:.8rem;color:var(--muted)} .pmarq.is-marquee .pbadges{flex-wrap:nowrap;justify-content:flex-start;width:max-content;padding-left:0;padding-right:0;gap:0;animation:marq 42s linear infinite} .pmarq.is-marquee .pbadge{margin-right:.9rem} .pmarq.is-marquee:hover .pbadges,.pmarq.is-marquee:focus-within .pbadges{animation-play-state:paused} @keyframes marq{to{transform:translate3d(-50%,0,0)}} /* ---------- 7. SECTIONS ---------- */ .sec{position:relative;padding:clamp(4.5rem,9vw,8rem) 0} .sec.alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .sec.alt::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(700px 360px at 50% 0,rgba(10,127,165,.16),transparent 70%)} .sec>.wrap{position:relative} .hero-inner + .sec{padding-top:clamp(3rem,6vw,5rem)} .sec-h{text-align:center;max-width:820px;margin:0 auto 3.2rem} .sec-h .sub{max-width:640px;margin:1.1rem auto 0} .sec-h.left{text-align:left;margin:0 0 2.2rem;max-width:none} .sec-h.left .sub{margin-left:0} .sec-cta{text-align:center;margin-top:2.5rem} .lbl{display:inline-block;font-family:var(--ff-m);font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--glow);margin-bottom:1.1rem} .h2{font-family:var(--ff-d);font-weight:600;font-size:clamp(2rem,4.1vw,3.35rem);line-height:1.06;letter-spacing:-.035em;color:#fff;text-wrap:balance} .teal,.mark{background:linear-gradient(95deg,#9af0ff,#38c6e8 55%,#5b8dff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .mark{text-decoration:underline;text-decoration-color:rgba(var(--glow-rgb),.45);text-decoration-thickness:2px;text-underline-offset:.16em} /* ---------- 8. CARDS (cursor-follow glow) ---------- */ .card{position:relative;isolation:isolate;overflow:hidden;display:block;padding:1.75rem;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));box-shadow:var(--sh-1);transition:transform .45s var(--ease),border-color .3s,box-shadow .45s} .card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(var(--glow-rgb),.15),transparent 60%);opacity:0;transition:opacity .4s} .card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(var(--glow-rgb),.95),transparent 65%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .4s} .card:hover::before,.card:hover::after,.card:focus-visible::before,.card:focus-visible::after{opacity:1} .card.hov:hover{transform:translateY(-5px);box-shadow:var(--sh-2),0 0 60px -20px rgba(var(--glow-rgb),.35)} .card p{color:var(--muted);font-size:.96rem;margin-top:.6rem} .e{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;margin-bottom:1.15rem;color:var(--glow);font-size:1.25rem;background:linear-gradient(180deg,rgba(var(--glow-rgb),.16),rgba(var(--glow-rgb),.04));border:1px solid rgba(var(--glow-rgb),.28);box-shadow:0 0 24px -6px rgba(var(--glow-rgb),.5),0 1px 0 rgba(255,255,255,.12) inset;transition:transform .45s var(--ease),box-shadow .3s;flex:none} .card:hover .e{transform:translateY(-2px) scale(1.06);box-shadow:0 0 34px -2px rgba(var(--glow-rgb),.75),0 1px 0 rgba(255,255,255,.16) inset} .more{display:inline-flex;align-items:center;margin-top:1.2rem;font-size:.86rem;font-weight:600;color:var(--teal);transition:letter-spacing .3s var(--ease),color .2s} .card:hover .more{letter-spacing:.02em;color:var(--glow)} .three{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem} .sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem} .sgrid.has-feat{grid-template-columns:repeat(3,1fr)} .sgrid .feat{grid-column:span 2;background:radial-gradient(520px 260px at 100% 0,rgba(10,127,165,.4),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border-color:rgba(var(--glow-rgb),.25)} .sgrid .feat h3{font-size:1.6rem;letter-spacing:-.025em} .sgrid .feat p{font-size:1.05rem;max-width:30rem} .scard{display:flex;flex-direction:column;align-items:flex-start} .scard p{flex:1} .igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem} .igrid .scard{display:grid;grid-template-columns:auto 1fr;column-gap:1.1rem;align-items:center} .igrid .scard .e{grid-row:span 2;margin:0} .igrid .scard .more{margin-top:.25rem} .stepn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;margin-bottom:1.15rem;font-family:var(--ff-m);font-weight:600;font-size:1rem;color:var(--glow);border:1px solid rgba(var(--glow-rgb),.4);background:rgba(var(--glow-rgb),.07);transition:background .5s,color .5s,box-shadow .5s} .imore{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;padding:1.25rem 1.6rem} .imore>b{font-family:var(--ff-m);font-size:.72rem!important;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .pills{display:flex;gap:.6rem;flex-wrap:wrap;flex:1} .pill{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .95rem;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--glass);font-size:.86rem;font-weight:500;color:var(--text)} .pill .ic{color:var(--glow)} /* ---------- 9. TESTIMONIALS / SERVICE AREA ---------- */ .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem} .tc{padding:2rem} .tc .bd{display:flex;flex-direction:column;height:100%} .stars{color:var(--amber);letter-spacing:.2em;font-size:.95rem;text-shadow:0 0 14px rgba(245,196,81,.5)} .tq{flex:1;margin:1.1rem 0 1.6rem;font-family:var(--ff-d);font-size:1.12rem;line-height:1.55;color:var(--text);letter-spacing:-.005em} .ta{display:flex;align-items:center;gap:.85rem;padding-top:1.2rem;border-top:1px solid var(--line)} .av{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;font-family:var(--ff-m);font-size:.8rem;font-weight:600;color:#fff;border:1px solid var(--line-2);flex:none} .ta b{display:block;font-size:.95rem;color:#fff} .ta small{display:block;font-size:.8rem;color:var(--muted)} .citystrip{max-width:980px;margin:0 auto;text-align:center;color:var(--muted);font-size:.98rem;line-height:3} .citystrip a{display:inline-block;line-height:1;padding:.62rem 1.05rem;margin:0 .1rem;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--glass);color:var(--text);font-weight:500;font-size:.92rem;transition:border-color .25s,background .25s,box-shadow .25s,transform .25s var(--ease)} .citystrip a:hover{border-color:rgba(var(--glow-rgb),.7);background:rgba(var(--glow-rgb),.1);box-shadow:0 0 26px -6px rgba(var(--glow-rgb),.6);transform:translateY(-2px)} /* ---------- 10. PROSE, CHECKLISTS ---------- */ .prose{max-width:860px;margin:0 auto} .prose h1{font-size:clamp(2.2rem,4vw,3.2rem);margin-bottom:1.4rem} .prose h2{font-family:var(--ff-d);font-weight:600;font-size:clamp(1.45rem,2.4vw,1.9rem);line-height:1.15;letter-spacing:-.025em;color:#fff;margin:3rem 0 1rem;padding-top:2rem;border-top:1px solid var(--line)} .prose>h2:first-child{margin-top:0;padding-top:0;border-top:0} .prose p{color:var(--muted);font-size:1.03rem;line-height:1.85;margin-bottom:1.1rem} .prose p strong,.prose p b{color:var(--text)} .prose a{color:var(--teal);font-weight:600;text-decoration:underline;text-decoration-color:rgba(var(--glow-rgb),.4);text-decoration-thickness:1px;text-underline-offset:.22em;transition:color .2s} .prose a:hover{color:var(--glow);text-decoration-color:var(--glow)} .prose .three{margin:1.25rem 0 1.5rem} .prose .three .card p{font-size:.92rem;line-height:1.65;margin-bottom:0} .prose .fine{font-size:.82rem;color:var(--dim)} .chk{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin:1.25rem 0 1.75rem} .chk div{position:relative;display:flex;align-items:flex-start;gap:.75rem;padding:.8rem 1rem;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--glass);font-size:.93rem;font-weight:500;line-height:1.45;color:var(--text)} .chk div::before{content:"";flex:none;width:20px;height:20px;margin-top:.05rem;border-radius:50%;background:rgba(var(--glow-rgb),.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235ee7ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.8 10.4 2.8 2.8 5.6-6'/%3E%3C/svg%3E") center/20px no-repeat;box-shadow:0 0 0 1px rgba(var(--glow-rgb),.35)} /* ---------- 11. CONTACT + FORM + MAP ---------- */ .cg{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:4rem;align-items:start;width:100%} .cg .sub{margin:1.2rem 0 2rem} .cg h1{font-size:clamp(2.4rem,4.5vw,3.6rem)} .cd2{display:flex;align-items:center;gap:1rem;padding:.9rem 0;border-top:1px solid var(--line)} .cd2 .e{margin:0;width:44px;height:44px;border-radius:12px;font-size:1.1rem} .cd2 small{display:block;font-family:var(--ff-m);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .cd2 small.plain{font-family:var(--ff-b);font-size:.82rem;letter-spacing:0;text-transform:none;color:var(--muted)} .cd2 b{font-weight:500;color:var(--text)} .cd2 a:hover{color:var(--glow)} .sup{margin-top:1.5rem;border-color:rgba(47,224,122,.28);background:linear-gradient(180deg,rgba(47,224,122,.08),rgba(47,224,122,.015))} .sup h4{font-size:1.1rem} .sup p{margin:.4rem 0 1.1rem} .fbox{padding:clamp(1.5rem,3vw,2.4rem);border-color:var(--line-2);background:linear-gradient(180deg,rgba(18,32,54,.82),rgba(8,15,28,.82));box-shadow:var(--sh-2),0 0 120px -40px rgba(var(--glow-rgb),.4)} .fbox h3{font-size:1.5rem;margin-bottom:1.4rem} .fr{margin-bottom:1rem;min-width:0} .fr2{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .fr label,.rf label{display:block;font-family:var(--ff-m);font-size:.66rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem} .fr input,.fr select,.fr textarea,.rf select,.tin{display:block;width:100%;padding:.85rem 1rem;font-size:.95rem;color:var(--text);background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:var(--r-sm);outline:none;transition:border-color .2s,box-shadow .2s,background .2s;-webkit-appearance:none;appearance:none} .fr select,.rf select,select.tin{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23a7b9cb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.4rem} select option{background:#0b1626;color:var(--text)} .fr textarea{min-height:120px;resize:vertical} .fr ::placeholder,.tin::placeholder{color:var(--dim);opacity:1} .fr input:hover,.fr select:hover,.fr textarea:hover,.rf select:hover,.tin:hover{border-color:rgba(255,255,255,.28)} .fr input:focus,.fr select:focus,.fr textarea:focus,.rf select:focus,.tin:focus{border-color:var(--glow);background:rgba(var(--glow-rgb),.05);box-shadow:0 0 0 3px rgba(var(--glow-rgb),.2)} .fsub{width:100%;margin-top:.4rem;padding:1.1rem 1.5rem;font-size:1rem} .fsub:disabled{opacity:.7;cursor:progress} .ferr{display:none;margin-top:.9rem;padding:.9rem 1rem;background:var(--red-lt);border:1px solid var(--red);border-radius:var(--r-sm);font-size:.85rem;line-height:1.6} .falt{margin-top:1.1rem!important;text-align:center;font-size:.85rem!important;color:var(--muted)} .falt a{color:var(--teal);font-weight:600} .falt a:hover{color:var(--glow)} .fok{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;margin-bottom:1rem;font-size:2rem;color:var(--glow);background:rgba(var(--glow-rgb),.1);border:1px solid rgba(var(--glow-rgb),.4);box-shadow:0 0 50px -8px rgba(var(--glow-rgb),.6)} .mapframe{padding:0;overflow:hidden;border-color:var(--line-2);background:var(--bg-3);box-shadow:var(--sh-2),0 0 100px -40px rgba(var(--glow-rgb),.45)} .mapframe iframe{display:block;width:100%;height:400px;border:0;filter:invert(.92) hue-rotate(180deg) saturate(.75) brightness(.95) contrast(.92)} .mapframe::after{opacity:0!important} /* ---------- 12. CTA BAND (every inner page: #cta; homepage closing band adds .cta-t in home.css) ---------- */ #cta,.ctaband{padding:clamp(1rem,3vw,2rem) 0 clamp(4.5rem,9vw,7rem)} .sec.alt + #cta{padding-top:clamp(4rem,8vw,6rem)} .ci2,.ctaband-in{position:relative;isolation:isolate;overflow:hidden;padding:clamp(2.2rem,5vw,4rem);border-radius:calc(var(--r-lg) + 8px);border:1px solid rgba(var(--glow-rgb),.28);background:radial-gradient(900px 420px at 50% 130%,rgba(10,127,165,.75),transparent 70%),radial-gradient(500px 300px at 12% 0,rgba(60,90,230,.35),transparent 70%),linear-gradient(180deg,#0a1628,#060d1a);box-shadow:var(--sh-2),0 0 160px -50px rgba(var(--glow-rgb),.7)} .ci2::before,.ctaband-in::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 50% 100%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 100%,#000 10%,transparent 70%)} .ci2{display:flex;justify-content:space-between;align-items:center;gap:2.5rem;flex-wrap:wrap} .ci2 h2{font-family:var(--ff-d);font-weight:600;font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1.08;letter-spacing:-.035em;color:#fff;text-wrap:balance} .ci2 p{margin-top:.9rem;max-width:560px;color:#c4d3e2;font-size:1.02rem;line-height:1.7} .ci2 .hacts{margin-top:0} /* ---------- 13. FOOTER ---------- */ footer{background:var(--bg-deep);border-top:1px solid var(--line);padding:4.5rem 0 2rem;font-size:.9rem;color:var(--muted)} .fg5{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:2.5rem} .brand-f{--lh:40px;margin-bottom:1.2rem} footer p{line-height:1.7;max-width:26rem} .fcon{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;margin-top:1.3rem} .fcon a{display:inline-flex;align-items:center;gap:.4rem;color:var(--text);transition:color .2s} .fcon a:hover{color:var(--glow)} .fcon .ph{font-family:var(--ff-d);font-size:1.35rem;font-weight:600;color:#fff;letter-spacing:-.01em} .fmail{display:block;font-size:.8rem;color:var(--dim)} .flive,.fcon a.flive{color:var(--live);font-weight:600;margin-top:.3rem} .flive:hover,.fcon a.flive:hover{color:#7ff0ae} .fc h4{font-family:var(--ff-m);font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:1.1rem} .fc li{margin-bottom:.55rem} .fc a{color:var(--muted);transition:color .2s} .fc a:hover{color:#fff} .fbot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:3.5rem;padding-top:1.6rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--dim)} /* ---------- 14. PRICING ESTIMATOR ---------- */ .calc-gate{position:relative} .calc-content{transition:filter .5s,opacity .5s} .calc-gate.locked .calc-content{filter:blur(7px) saturate(.6);opacity:.5;pointer-events:none;user-select:none} .calc-lock{display:none;position:absolute;inset:0;z-index:5;align-items:flex-start;justify-content:center;padding:clamp(1.5rem,6vw,5rem) 1rem 1rem} .calc-gate.locked .calc-lock{display:flex} .calc-lock-inner{position:sticky;top:calc(var(--nav-h) + 24px);max-width:540px;padding:2.4rem 2rem;text-align:center;border-color:rgba(var(--glow-rgb),.35);background:linear-gradient(180deg,rgba(16,30,52,.96),rgba(7,14,27,.96));box-shadow:var(--sh-2),var(--sh-glow)} .calc-lock-inner .e{width:60px;height:60px;border-radius:18px;font-size:1.6rem;margin-bottom:1rem} .calc-lock-inner h3{font-size:1.5rem;margin-bottom:.7rem} .calc-lock-inner p{font-size:.95rem;line-height:1.7;margin:0 0 1.3rem} .calc-lock-inner .fineprint{font-family:var(--ff-m);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:1rem 0 0} .calc-already{display:inline-block;background:none;border:0;border-bottom:1px solid rgba(var(--glow-rgb),.5);padding:.2rem 0;margin-top:1.1rem;font-family:var(--ff-m);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);cursor:pointer;transition:color .2s,border-color .2s} .calc-already:hover{color:var(--glow);border-color:var(--glow)} .calc-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1.5rem;align-items:start} .calc-in{padding:2rem} .calc-in h3{margin-bottom:1.6rem} .calc-out{display:flex;flex-direction:column;gap:1.1rem} .rf{margin-bottom:1.5rem} .rf label.rfl{display:flex;justify-content:space-between;align-items:baseline} .rf .v{font-family:var(--ff-d);font-size:1.35rem;font-weight:600;letter-spacing:-.02em;text-transform:none;color:var(--glow);font-variant-numeric:tabular-nums} .rf input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:22px;margin:0;background:transparent;cursor:pointer} .rf input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--brand),rgba(var(--glow-rgb),.55));box-shadow:0 0 0 1px var(--line-2)} .rf input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--brand),rgba(var(--glow-rgb),.55));box-shadow:0 0 0 1px var(--line-2)} .rf input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;border:2px solid #03121c;background:var(--glow);box-shadow:0 0 0 1px rgba(var(--glow-rgb),.7),0 0 18px rgba(var(--glow-rgb),.7)} .rf input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;border:2px solid #03121c;background:var(--glow);box-shadow:0 0 0 1px rgba(var(--glow-rgb),.7),0 0 18px rgba(var(--glow-rgb),.7)} .rng{display:flex;justify-content:space-between;font-family:var(--ff-m);font-size:.66rem;color:var(--dim);margin-top:.35rem} .note,.inote{padding:.95rem 1.1rem;border-radius:var(--r-sm);border:1px solid rgba(245,196,81,.28);background:rgba(245,196,81,.07);font-size:.86rem;line-height:1.6;color:var(--muted)} .note b{color:var(--text)} .inote{position:relative;padding-left:2.9rem;border-color:rgba(var(--glow-rgb),.28);background:rgba(var(--glow-rgb),.06);margin:0} .inote::before{content:"";position:absolute;left:1rem;top:.95rem;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235ee7ff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1V17h6v-.2c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2z'/%3E%3C/svg%3E") center/contain no-repeat} .inote:empty{display:none} .cmp{overflow:visible;padding:1.5rem 1.6rem} .cmp-tn{border-color:rgba(var(--glow-rgb),.45);background:radial-gradient(520px 240px at 100% 0,rgba(10,127,165,.42),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:var(--sh-2),0 0 70px -28px rgba(var(--glow-rgb),.6)} .cmp-ih{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01))} .ribbon{position:absolute;top:-11px;left:1.4rem;z-index:2;padding:.32rem .75rem;border-radius:var(--r-pill);background:linear-gradient(135deg,#8df0ff,#38c6e8);color:#03121c;font-family:var(--ff-m);font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 6px 20px -4px rgba(var(--glow-rgb),.6)} .cmp-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--line)} .cmp-hd h4{display:flex;align-items:center;gap:.55rem;font-size:1.12rem} .cmp-hd h4 .ic{color:var(--glow)} .cmp-bf .cmp-hd h4 .ic{color:var(--red)} .cmp-ih .cmp-hd h4 .ic{color:var(--muted)} .cmp-hd small{display:block;margin-top:.3rem;font-family:var(--ff-m);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)} .cmp-price{text-align:right;flex:none} .cmp-price b{display:block;font-family:var(--ff-d);font-size:1.5rem;font-weight:600;letter-spacing:-.025em;white-space:nowrap;font-variant-numeric:tabular-nums} .cmp-price span{font-family:var(--ff-m);font-size:.64rem;color:var(--dim)} .cmp-tn .cmp-price b{color:var(--glow);text-shadow:0 0 24px rgba(var(--glow-rgb),.45)} .cmp-bf .cmp-price b{color:var(--red)} .cmp-ih .cmp-price b{color:var(--text)} .cmp-list{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem} .cmp-list div{display:flex;align-items:flex-start;gap:.5rem;font-size:.88rem;line-height:1.45;color:var(--muted)} .cmp-list .ic{margin-top:.12rem;width:1.05em;height:1.05em;stroke-width:2.2} .cmp-tn .cmp-list div{color:var(--text)} .cmp-tn .cmp-list .ic{color:var(--glow)} .cmp-bf .cmp-list .ic{color:var(--red)} .cmp-ih .cmp-list .ic{color:var(--amber)} .savings{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;padding:1.6rem 1.75rem;border-color:rgba(var(--glow-rgb),.35);background:radial-gradient(600px 260px at 0 120%,rgba(10,127,165,.7),transparent 70%),linear-gradient(180deg,#0a1628,#060d1a)} .savings .k{font-family:var(--ff-m);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .savings .big{font-family:var(--ff-d);font-size:clamp(1.7rem,3vw,2.4rem);font-weight:600;letter-spacing:-.035em;line-height:1.1;margin:.35rem 0;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff 30%,#7ddff5);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .savings p{margin:0;font-size:.9rem;color:#c4d3e2} .savings p b{color:#fff} /* ---------- 15. SECURITY-SCORE QUIZ ---------- */ .quiz{max-width:780px;margin:0 auto;padding:clamp(1.5rem,4vw,2.75rem);border-color:var(--line-2);background:linear-gradient(180deg,rgba(18,32,54,.8),rgba(8,15,28,.8));box-shadow:var(--sh-2),0 0 120px -40px rgba(var(--glow-rgb),.4)} .qbar{height:6px;border-radius:3px;background:rgba(255,255,255,.08);box-shadow:0 0 0 1px var(--line);overflow:hidden;margin-bottom:2rem} .qbar>div{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--brand),var(--glow));box-shadow:0 0 16px rgba(var(--glow-rgb),.7);transition:width .5s var(--ease)} #q-count{font-family:var(--ff-m);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--glow);margin-bottom:.8rem} .qq{font-family:var(--ff-d);font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:600;letter-spacing:-.02em;line-height:1.3;color:#fff;margin-bottom:1.6rem} .qopts{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.8rem} .qopt{display:flex;align-items:center;gap:1rem;padding:.95rem 1.1rem;border-radius:14px;border:1px solid var(--line-2);background:rgba(255,255,255,.035);font-size:1rem;color:var(--text);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s,transform .25s var(--ease)} .qopt:hover{border-color:rgba(var(--glow-rgb),.55);background:rgba(var(--glow-rgb),.06);transform:translateX(3px)} .qopt.sel{border-color:var(--glow);background:rgba(var(--glow-rgb),.11);box-shadow:0 0 0 3px rgba(var(--glow-rgb),.16),0 0 40px -12px rgba(var(--glow-rgb),.6)} .qopt .qi{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:12px;font-size:1.1rem;color:var(--glow);background:rgba(var(--glow-rgb),.09);border:1px solid rgba(var(--glow-rgb),.25)} .qopt.sel .qi{background:var(--glow);color:#03121c;border-color:var(--glow)} .qnav{display:flex;justify-content:space-between;align-items:center;gap:1rem} .qnav .btn:only-child,.qnav #quiz-next{margin-left:auto} .qres{text-align:center} .qgrade{display:inline-flex;align-items:center;justify-content:center;width:clamp(130px,26vw,170px);height:clamp(130px,26vw,170px);border-radius:50%;font-family:var(--ff-d);font-size:clamp(4.5rem,11vw,6.2rem);font-weight:700;letter-spacing:-.04em;line-height:1;border:2px solid currentColor;background:radial-gradient(closest-side,rgba(255,255,255,.07),transparent);box-shadow:0 0 70px -10px currentColor,0 0 30px -12px currentColor inset;text-shadow:0 0 34px currentColor} .ga{color:var(--glow)}.gb{color:var(--violet)}.gc{color:var(--amber)}.gd{color:var(--orange)}.gf{color:var(--red)} .qlbl{font-family:var(--ff-m);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text);margin:1.4rem 0 .9rem} .qdesc{max-width:560px;margin:0 auto 1.6rem;color:var(--muted);font-size:1.02rem;line-height:1.7} #quiz-recs{text-align:left;margin-bottom:1.8rem;padding:1.2rem 1.4rem;border-radius:var(--r-sm);border:1px solid rgba(var(--glow-rgb),.28);background:rgba(var(--glow-rgb),.06);font-size:.98rem;line-height:1.65;color:var(--muted)} #quiz-recs b{color:var(--text)} .qacts{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap} /* ---------- 16. TOOLS / NEWS / STATUS ---------- */ .tgrid2{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:1.75rem} .tool{padding:0;display:flex;flex-direction:column} .tool .hd{display:flex;align-items:center;gap:.8rem;padding:1rem 1.3rem;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(var(--glow-rgb),.09),transparent 70%)!important} .tool .hd .e,.nh .e,.wc-hd .e{width:38px;height:38px;border-radius:11px;margin:0;font-size:1.05rem} .tool .hd b{font-family:var(--ff-d);font-size:1.06rem;color:#fff;letter-spacing:-.01em} .tool .bd{padding:1.3rem;flex:1} .tool .bd>p{margin:0 0 1rem;font-size:.9rem;line-height:1.6} .tin{padding:.75rem .9rem;font-size:.92rem} .tin-row{display:flex;gap:.5rem} .tin-row .tin:first-child{flex:1;min-width:0} .tin-row select.tin{width:92px;flex:none;padding-right:2rem;background-position:right .7rem center} .tbtn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;margin-top:.8rem;padding:.8rem 1rem;border-radius:var(--r-pill);border:1px solid rgba(var(--glow-rgb),.4);background:rgba(var(--glow-rgb),.08);color:var(--glow);font-weight:600;font-size:.9rem;cursor:pointer;transition:background .2s,box-shadow .2s,transform .25s var(--ease)} .tbtn:hover{background:rgba(var(--glow-rgb),.16);box-shadow:0 0 30px -8px rgba(var(--glow-rgb),.6);transform:translateY(-1px)} .tbtn:disabled{opacity:.6;cursor:wait;transform:none} .tres{min-height:64px;margin-top:.8rem;padding:.9rem 1rem;border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(0,0,0,.35);font-family:var(--ff-m);font-size:.78rem;line-height:1.8;color:var(--muted);word-break:break-word} .tres b{color:var(--text);font-weight:500} .dnsrow{padding:.2rem 0;border-bottom:1px solid var(--line)} .dnsrow:last-child{border-bottom:0} .tnote{min-height:1rem;margin-top:.6rem;text-align:center;font-family:var(--ff-m);font-size:.7rem;color:var(--dim)} .spd{display:flex;gap:.6rem} .spd div{flex:1;min-width:0;padding:.85rem .4rem;text-align:center;border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(0,0,0,.3)} .spd b{display:block;font-family:var(--ff-d);font-size:1.6rem;font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--glow);font-variant-numeric:tabular-nums} .spd span{font-family:var(--ff-m);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)} .pw-track{height:8px;margin:.8rem 0 .5rem;border-radius:4px;background:rgba(255,255,255,.08);box-shadow:0 0 0 1px var(--line);overflow:hidden} #pw-bar{height:100%;width:0;border-radius:4px;transition:width .3s,background .3s} #pw-label{min-height:1rem;font-family:var(--ff-m);font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase} #pw-tips{margin-top:.3rem;font-size:.82rem;color:var(--muted)} .fix{display:block;margin-bottom:.55rem;padding:.75rem .9rem;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--glass);font-size:.86rem;line-height:1.55;color:var(--muted)} .fix:last-child{margin-bottom:0} .fix b{display:inline-flex;align-items:center;gap:.45rem;color:var(--text)} .fix b .ic{color:var(--glow)} .help{text-align:center;padding:1.75rem;border-color:var(--line-2)} .help p{margin:0 0 1.1rem;font-size:1.02rem;color:var(--text)} .help-acts{display:flex;gap:.9rem;justify-content:center;align-items:center;flex-wrap:wrap} .ng{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start} .nh{display:flex;align-items:center;gap:.85rem;margin-bottom:1.3rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)} .nh b{display:block;font-family:var(--ff-d);font-size:1.1rem;color:#fff;letter-spacing:-.01em} .nh small{display:block;margin-top:.15rem;font-family:var(--ff-m);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)} .nload{padding:1.5rem;text-align:center;font-size:.9rem;color:var(--muted)} .newsrow{display:block;margin-bottom:.55rem;padding:.8rem 1rem;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--glass);transition:border-color .2s,background .2s,transform .25s var(--ease)} .newsrow:hover{border-color:rgba(var(--glow-rgb),.5);background:rgba(var(--glow-rgb),.06);transform:translateX(3px)} .newsrow .nt{display:block;font-size:.92rem;font-weight:500;line-height:1.45;color:var(--text)} .newsrow .nd{display:block;margin-top:.25rem;font-family:var(--ff-m);font-size:.66rem;color:var(--dim)} .strow{display:flex;align-items:center;gap:.75rem;margin-bottom:.55rem;padding:.8rem 1rem;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--glass)} .sname{flex:1;min-width:0;font-size:.92rem;font-weight:500;color:var(--text)} .sok{padding:.3rem .6rem;border-radius:var(--r-pill);border:1px solid rgba(var(--glow-rgb),.35);background:rgba(var(--glow-rgb),.08);font-family:var(--ff-m);font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--glow);white-space:nowrap} .slink{font-family:var(--ff-m);font-size:.66rem;color:var(--muted);white-space:nowrap} .slink:hover{color:var(--glow)} .nlinks{display:flex;gap:.5rem 1.2rem;flex-wrap:wrap;margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line)} .nlinks a{font-family:var(--ff-m);font-size:.7rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);border-bottom:1px solid rgba(var(--glow-rgb),.4)} .nlinks a:hover{color:var(--glow);border-color:var(--glow)} /* ---------- 17. WHY CLOUD ---------- */ .wc{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem} .wc>.card{padding:clamp(1.5rem,3vw,2.4rem)} .wc .yes{border-color:rgba(var(--glow-rgb),.4);background:radial-gradient(620px 300px at 100% 0,rgba(10,127,165,.38),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:var(--sh-2),0 0 90px -34px rgba(var(--glow-rgb),.6)} .wc .no{border-color:rgba(255,107,107,.22);background:linear-gradient(180deg,rgba(255,107,107,.05),rgba(255,255,255,.012))} .wc-hd{display:flex;align-items:center;gap:.9rem;margin-bottom:1.6rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line)} .wc-hd b{display:block;font-family:var(--ff-d);font-size:1.3rem;font-weight:600;letter-spacing:-.02em;color:#fff} .wc-hd small{display:block;margin-top:.15rem;font-family:var(--ff-m);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase} .yes .wc-hd small{color:var(--glow)} .no .wc-hd small{color:var(--dim)} .no .wc-hd .e{color:var(--red);background:rgba(255,107,107,.1);border-color:rgba(255,107,107,.3);box-shadow:none} .wcl{display:flex;flex-direction:column;gap:1.15rem} .wci{display:flex;gap:.85rem} .wci i{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;margin-top:.1rem;border-radius:50%;font-style:normal;font-size:.78rem;font-weight:700;line-height:1} .yes .wci i{color:var(--glow);background:rgba(var(--glow-rgb),.12);box-shadow:0 0 0 1px rgba(var(--glow-rgb),.4)} .no .wci i{color:var(--red);background:rgba(255,107,107,.1);box-shadow:0 0 0 1px rgba(255,107,107,.4)} .wci b{display:block;font-size:1rem;color:var(--text)} .wci p{margin-top:.2rem;font-size:.9rem;line-height:1.6} .rw{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.5rem} .rw .card{padding:1.75rem} .rw .card.good{border-color:rgba(var(--glow-rgb),.35);background:linear-gradient(180deg,rgba(var(--glow-rgb),.1),rgba(var(--glow-rgb),.02))!important} .rw .card.bad{border-color:rgba(255,107,107,.35);background:linear-gradient(180deg,rgba(255,107,107,.1),rgba(255,107,107,.02))!important} .rw .card.bad .e{color:var(--red);background:rgba(255,107,107,.1);border-color:rgba(255,107,107,.3);box-shadow:none} .rw b{display:block;font-family:var(--ff-d);font-size:1.15rem;font-weight:600;letter-spacing:-.015em;color:#fff} .rw p{font-size:.95rem;line-height:1.65} /* ---------- 18. FAQ (card grid without JS; site.js upgrades it to an accordion) ---------- */ .fq{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:1040px;margin:0 auto} .fq .card{padding:1.6rem} .fq b{display:block;font-family:var(--ff-d);font-size:1.12rem;font-weight:600;line-height:1.35;letter-spacing:-.015em;color:#fff} .fq p{font-size:.96rem;line-height:1.7} .fq.is-acc{grid-template-columns:1fr;max-width:860px;gap:.75rem} .fq.is-acc .card{padding:0} .fq.is-acc .fqb{display:flex;justify-content:space-between;align-items:center;gap:1.25rem;width:100%;padding:1.25rem 1.5rem;background:none;border:0;text-align:left;cursor:pointer} .fq.is-acc .fqb b{flex:1} .fq.is-acc .fqico{position:relative;flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);background:var(--glass);transition:transform .35s var(--ease),background .25s,border-color .25s} .fq.is-acc .fqico::before,.fq.is-acc .fqico::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;border-radius:2px;background:var(--glow)} .fq.is-acc .fqico::after{transform:rotate(90deg);transition:transform .35s var(--ease)} .fq.is-acc .card.open{border-color:rgba(var(--glow-rgb),.4);box-shadow:var(--sh-1),0 0 60px -26px rgba(var(--glow-rgb),.55)} .fq.is-acc .card.open .fqico{background:rgba(var(--glow-rgb),.14);border-color:rgba(var(--glow-rgb),.5);transform:rotate(180deg)} .fq.is-acc .card.open .fqico::after{transform:rotate(0)} .fq.is-acc .fqp{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)} .fq.is-acc .card.open .fqp{grid-template-rows:1fr} .fq.is-acc .fqp>div{overflow:hidden;min-height:0} .fq.is-acc .fqp p{margin:0;padding:0 1.5rem 1.4rem} .fq.is-acc .fqb:hover b{color:var(--glow)} /* ---------- 19. MOTION (only when allowed) ---------- */ @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} .ldot{animation:livepulse 1.8s ease-out infinite} .hstat .s i{animation:okpulse 2.2s ease-out infinite} @keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(3,20,10,.55)}100%{box-shadow:0 0 0 7px rgba(3,20,10,0)}} @keyframes okpulse{0%{box-shadow:0 0 0 0 rgba(94,231,255,.6)}100%{box-shadow:0 0 0 9px rgba(94,231,255,0)}} /* Reveal: the hidden state exists ONLY under html.js. If site.js never confirms (html.js-ok), the rv-failsafe animation shows everything after 2.5s anyway; the inline script also drops the js class after 3s as a second failsafe. */ html.js [data-reveal]{transition:opacity .9s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms),filter .9s var(--ease) var(--d,0ms)} html.js [data-reveal]:not(.in){opacity:0;transform:translateY(30px);filter:blur(6px)} html.js:not(.js-ok) [data-reveal]:not(.in){animation:rv-failsafe .6s ease 2.5s forwards} @keyframes rv-failsafe{to{opacity:1;transform:none;filter:none}} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition-duration:.01ms!important} } @media print{html.js [data-reveal]{opacity:1!important;transform:none!important;filter:none!important}#nav,.mob,.hero-fx,.progress{display:none!important}} /* ---------- 20. RESPONSIVE ---------- */ @media (max-width:1259px){ .nm{display:none} .hb{display:flex} } @media (max-width:1100px){ .sgrid,.sgrid.has-feat{grid-template-columns:repeat(3,1fr)} .sgrid .feat{grid-column:span 3} .hero-in{gap:2.5rem} .hstat{left:-12px} .fg5{grid-template-columns:1fr 1fr 1fr} .fg5>div:first-child{grid-column:1/-1} .tgrid2{grid-template-columns:1fr 1fr} .cmp-list{grid-template-columns:1fr} } @media (max-width:960px){ .hero-in{grid-template-columns:1fr;gap:4.5rem} .hero-in.one{gap:0} .hero-vis{margin:0 auto;max-width:520px} .hframe{aspect-ratio:5/3.6} .hero-fx .vig{background:radial-gradient(ellipse 140% 90% at 50% 40%,transparent 50%,rgba(2,5,10,.75) 100%),linear-gradient(180deg,rgba(4,8,18,.55) 0%,rgba(4,8,18,.25) 45%,transparent 60%),linear-gradient(180deg,transparent 80%,var(--bg) 100%)} .cg{grid-template-columns:1fr;gap:3rem} .three,.tgrid,.igrid{grid-template-columns:1fr 1fr} .tgrid .tc:last-child,.three .card:last-child:nth-child(odd){grid-column:1/-1} .calc-grid,.ng,.wc,.rw,.fq{grid-template-columns:1fr} .cmp-list{grid-template-columns:1fr 1fr} .ci2{flex-direction:column;align-items:flex-start} } @media (max-width:860px){.btn-assess{display:none}} @media (max-width:720px){ :root{--nav-h:64px;--lh:40px} .wrap{padding:0 16px} .mob{padding-left:16px;padding-right:16px} .nphone{display:none} .nr{gap:.5rem} .btn-live{font-size:.62rem;padding:.6rem .7rem;gap:.4rem;letter-spacing:.03em} .mob .btn-live,.sup .btn-live,.help .btn-live{font-size:.7rem;padding:.8rem 1.1rem} .hb{width:40px;height:40px} .hero{min-height:0;padding:calc(var(--nav-h) + 2.25rem) 0 3.5rem} .hero-two{padding-bottom:4rem} .kicker{font-size:.6rem;letter-spacing:.06em;gap:.4rem;padding:.45rem .7rem} .btn{white-space:normal;text-align:center;line-height:1.25;max-width:100%} .calc-lock-inner{padding:2rem 1.25rem} .hacts .btn{flex:1 1 auto} .hyrs{right:-4px;top:-26px} .hstat{position:relative;left:auto;bottom:auto;width:auto;margin:-56px 12px 0} .hframe{aspect-ratio:5/4} .sgrid,.sgrid.has-feat,.three,.tgrid,.igrid,.tgrid2,.chk,.cmp-list{grid-template-columns:1fr} .sgrid .feat,.tgrid .tc:last-child,.three .card:last-child:nth-child(odd){grid-column:auto} .sgrid .feat h3{font-size:1.35rem} .fg5{grid-template-columns:1fr 1fr;gap:2rem} .fbot{flex-direction:column} .citystrip{line-height:2.9} .cmp-hd{flex-direction:column;gap:.6rem} .cmp-price{text-align:left} .savings{flex-direction:column;align-items:flex-start} .ci2 .hacts{width:100%} .mapframe iframe{height:320px} .strow{flex-wrap:wrap} .fq.is-acc .fqb{padding:1.1rem 1.15rem} .fq.is-acc .fqp p{padding:0 1.15rem 1.2rem} } @media (max-width:460px){ .fr2{grid-template-columns:1fr;gap:0} .fg5{gap:2rem 1rem} h1{font-size:2.45rem} .hero-inner h1,.cg h1{font-size:2.1rem} .qnav .btn{padding:.85rem 1.1rem} }