@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --bg:#f7fbff;
  --white:#ffffff;
  --ink:#06111a;
  --ink2:#123047;
  --muted:#5a7080;
  --navy:#04111c;
  --navy2:#08263a;
  --blue:#146CFF;
  --cyan:#17D4D1;
  --mint:#5EF0C6;
  --purple:#7A5CFF;
  --coral:#FF6B7D;
  --line:#d9e8f2;
  --shadow:0 28px 70px rgba(8,38,58,.16);
  --shadow-strong:0 40px 100px rgba(3,25,39,.28);
  --r:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Manrope",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 7% 4%,rgba(23,212,209,.08),transparent 24%),
    radial-gradient(circle at 96% 22%,rgba(122,92,255,.07),transparent 22%),
    var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
a{color:inherit}
.wrap{width:min(1220px,92%);margin:auto}
.topbar{
  background:#02080d;
  color:#d9f7fb;
  padding:9px 16px;
  text-align:center;
  font-size:.78rem;
  letter-spacing:.05em;
  font-weight:700;
}
.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(213,230,240,.92);
}
.nav{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:800;color:var(--ink)}
.logo-mark{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:white;
  font-family:"Space Grotesk",sans-serif;font-size:1.1rem;font-weight:700;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.55),transparent 23%),
    linear-gradient(145deg,var(--mint),var(--cyan) 42%,var(--blue) 70%,var(--purple));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 10px 25px rgba(20,108,255,.28),
    0 4px 0 rgba(7,74,152,.55);
  transform:perspective(500px) rotateX(6deg) rotateY(-8deg);
}
.logo span:last-child{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.06rem}
.navlinks{display:flex;align-items:center;gap:24px}
.navlinks a{font-weight:700;font-size:.91rem;text-decoration:none;color:#29495d}
.navlinks a:hover{color:var(--blue)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:13px 20px;border-radius:13px;border:0;
  font-family:"Manrope",sans-serif;font-weight:800;text-decoration:none;color:#fff;cursor:pointer;
  background:
    linear-gradient(180deg,rgba(255,255,255,.22),transparent 42%),
    linear-gradient(135deg,var(--blue),#0b7fed 55%,var(--purple));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 14px 28px rgba(20,108,255,.28),
    0 4px 0 #0757c8;
  transition:.2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{
  color:#0f2d42;background:#fff;border:1px solid #cfe0eb;
  box-shadow:0 10px 24px rgba(18,55,79,.08),0 3px 0 #d9e5ec;
}
.btn.dark{
  background:linear-gradient(180deg,#12354f,#06131f);
  box-shadow:0 14px 28px rgba(6,29,45,.25),0 4px 0 #02070b;
}
.hero{
  position:relative;overflow:hidden;color:#fff;padding:105px 0 92px;
  background:
    radial-gradient(circle at 78% 12%,rgba(23,212,209,.25),transparent 23%),
    radial-gradient(circle at 68% 86%,rgba(122,92,255,.20),transparent 28%),
    linear-gradient(135deg,#02070c 0%,#051623 46%,#0a3a56 100%);
}
.hero:before{
  content:"";position:absolute;inset:-20%;
  background:
    linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px);
  background-size:46px 46px;
  transform:perspective(900px) rotateX(64deg) translateY(15%);
}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:68px;align-items:center}
.kicker,.eyebrow{font-size:.73rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800}
.kicker{color:#6bf3e6}
.eyebrow{color:var(--blue)}
h1,h2,h3{font-family:"Space Grotesk",sans-serif}
h1{
  font-weight:700;font-size:clamp(3rem,6vw,5.9rem);line-height:.91;
  letter-spacing:-.065em;margin:.18em 0 .28em;text-wrap:balance;
}
h2{
  font-weight:700;font-size:clamp(2.2rem,4.3vw,3.8rem);line-height:.99;
  letter-spacing:-.05em;margin:.2em 0;text-wrap:balance;
}
h3{font-weight:700;letter-spacing:-.025em}
.hero .lead{font-size:1.17rem;line-height:1.7;color:#d2e8f1;max-width:720px}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin:30px 0 21px}
.micro{font-size:.84rem;color:#a8c8d4}
.visual{position:relative;min-height:550px;perspective:1200px}
.device{
  position:absolute;inset:26px 30px 24px 50px;padding:28px;border-radius:34px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.05)),
    rgba(7,28,44,.5);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    -28px 36px 85px rgba(0,0,0,.36),
    22px 30px 70px rgba(16,138,190,.14);
  backdrop-filter:blur(15px);
  transform:rotateY(-11deg) rotateX(5deg) rotateZ(-1deg);
}
.device:before{
  content:"";position:absolute;inset:12px;border-radius:25px;
  border:1px solid rgba(113,243,236,.07)
}
.threat{
  position:relative;background:linear-gradient(145deg,#07131e,#0b2435);
  border:1px solid rgba(255,255,255,.08);border-radius:19px;padding:20px;margin-top:22px;
  box-shadow:0 15px 35px rgba(0,0,0,.2)
}
.threat .bad{color:#ff7c90;font-weight:800}
.status{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:19px}
.status div{
  padding:14px;border-radius:15px;
  background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.06);color:#c3dbe4;font-size:.77rem
}
.status strong{display:block;color:#fff;font-family:"Space Grotesk";font-size:1rem}
.shield{
  position:absolute;right:-8px;bottom:34px;width:205px;height:205px;border-radius:50px;display:grid;place-items:center;
  background:
    radial-gradient(circle at 30% 18%,rgba(255,255,255,.55),transparent 24%),
    linear-gradient(145deg,var(--mint),var(--cyan) 48%,var(--blue));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.52),
    0 36px 65px rgba(0,0,0,.27),
    0 8px 0 rgba(7,94,139,.4);
  transform:rotate(6deg) translateZ(60px);
}
.shield svg{width:116px;height:116px;filter:drop-shadow(0 10px 12px rgba(0,0,0,.12))}
.quickbar{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 12px 32px rgba(12,44,66,.04)}
.quickgrid{display:grid;grid-template-columns:repeat(4,1fr)}
.quick{padding:26px;border-right:1px solid var(--line);position:relative}
.quick:before{content:"";position:absolute;left:24px;right:24px;top:0;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--purple))}
.quick:last-child{border-right:0}.quick strong{display:block;font-family:"Space Grotesk";font-weight:700;font-size:1.03rem}.quick span{font-size:.87rem;color:var(--muted)}

.section{padding:92px 0}
.section.soft{
  background:
    radial-gradient(circle at 97% 0%,rgba(23,212,209,.09),transparent 25%),
    linear-gradient(180deg,#f7fcff,#edf7fb)
}
.section.dark{
  color:#fff;
  background:
    radial-gradient(circle at 10% 8%,rgba(20,108,255,.16),transparent 25%),
    radial-gradient(circle at 90% 85%,rgba(23,212,209,.12),transparent 26%),
    linear-gradient(135deg,#030a10,#071b29 58%,#0a2f42)
}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:38px}
.section-head .copy{max-width:760px}
.section p{color:var(--muted)}
.dark p{color:#bfd6df}.dark .eyebrow{color:#71eee1}
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:21px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:21px}
.card,.resource,.story{
  position:relative;overflow:hidden;padding:29px;border-radius:var(--r);
  background:
    radial-gradient(circle at 12% 8%,rgba(23,212,209,.09),transparent 28%),
    linear-gradient(145deg,#fff,#f5fbff);
  border:1px solid #d2e4ee;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 20px 48px rgba(12,51,76,.10),
    0 5px 0 rgba(194,216,231,.6);
  transition:.22s ease;
}
.card:hover,.resource:hover,.story:hover{transform:translateY(-7px);box-shadow:0 30px 65px rgba(12,51,76,.16),0 5px 0 rgba(177,208,228,.8)}
.icon{
  width:54px;height:54px;border-radius:17px;display:grid;place-items:center;color:#0a74de;
  background:
    radial-gradient(circle at 30% 15%,rgba(255,255,255,.85),transparent 25%),
    linear-gradient(145deg,#f7ffff,#d9f4fb);
  border:1px solid #c8e8f1;
  box-shadow:0 10px 24px rgba(15,127,169,.13),0 3px 0 #c5e0e9;
}
.icon svg{width:26px;height:26px}
.card h3{font-size:1.16rem;margin:12px 0 8px}.card p{font-size:.93rem}
.bigsplit{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.photo-panel{
  min-height:490px;border-radius:32px;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 72% 20%,rgba(94,240,198,.25),transparent 26%),
    linear-gradient(150deg,#06131f,#0a4765 60%,#0b8395);
  box-shadow:var(--shadow-strong),0 8px 0 rgba(7,79,105,.28);
  transform:perspective(1000px) rotateY(4deg) rotateX(1deg)
}
.scene{position:absolute;inset:0;display:grid;place-items:center}.scene svg{width:84%;filter:drop-shadow(0 26px 34px rgba(0,0,0,.26))}
.checks{display:grid;gap:15px;margin-top:24px}.check{display:flex;gap:12px}
.checkmark{flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#effffc,#c9f7ea);color:#077a60;border:1px solid #b9eadf;font-weight:800}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{
  padding:28px;border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),#091d2c;
  border:1px solid rgba(255,255,255,.08);box-shadow:0 22px 45px rgba(0,0,0,.17)
}
.step b{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:#12384f;color:#6ff2e5;margin-bottom:17px;font-family:"Space Grotesk"}
.video-shell{display:grid;grid-template-columns:.7fr 1.3fr;gap:27px}
.video-copy{padding:35px;border-radius:25px;background:linear-gradient(145deg,#06131f,#0a3147);color:#fff;box-shadow:var(--shadow-strong)}
.video-copy p{color:#bdd4de}
.video{position:relative;padding-top:56.25%;border-radius:25px;overflow:hidden;background:#02080d;box-shadow:0 34px 75px rgba(6,36,56,.24),0 7px 0 rgba(7,74,99,.22);transform:perspective(1200px) rotateY(-2deg)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.resource a{font-weight:800;color:var(--blue);text-decoration:none}
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.story .label{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;font-weight:800;color:var(--blue)}
.form-shell{
  display:grid;grid-template-columns:.8fr 1.2fr;gap:32px;border-radius:32px;padding:42px;color:#fff;
  background:
    radial-gradient(circle at 8% 8%,rgba(23,212,209,.16),transparent 24%),
    linear-gradient(135deg,#02080d,#072033 58%,#0a4057);
  box-shadow:var(--shadow-strong),0 7px 0 rgba(6,57,82,.24)
}
.form-shell p{color:#bed5df}.contactbox{display:grid;gap:13px;margin-top:26px}.contactline{display:flex;gap:12px;color:#fff;font-weight:800;text-decoration:none}
form{
  background:linear-gradient(145deg,#fff,#f4faff);color:var(--ink);border-radius:25px;padding:29px;
  display:grid;gap:15px;border:1px solid #d4e4ed;
  box-shadow:0 24px 58px rgba(4,31,47,.15),0 5px 0 #dceaf2
}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:13px}
label{font-size:.81rem;font-weight:800;color:#314f62}
input,textarea,select{width:100%;margin-top:6px;border:1px solid #c8dce8;border-radius:11px;padding:13px 14px;font:inherit;background:#fbfdff}
input:focus,textarea:focus,select:focus{outline:3px solid rgba(20,108,255,.12);border-color:#67afff}
textarea{min-height:150px;resize:vertical}
.notice{background:#eaf8ff;border:1px solid #c7e9f3;border-radius:11px;padding:12px 14px;font-size:.82rem;color:#3f6174}
.form-result{display:none}.form-result.show{display:block;border-radius:10px;padding:13px}.form-result.ok{background:#e7f8f1;color:#176b55}.form-result.warn{background:#fff2dc;color:#7b5517}
details{background:linear-gradient(145deg,#fff,#f7fbfe);border:1px solid #d5e5ef;border-radius:15px;padding:19px 21px;margin:12px 0;box-shadow:0 8px 20px rgba(11,51,78,.05)}
summary{font-family:"Space Grotesk";font-weight:700;cursor:pointer}
.footer{background:linear-gradient(135deg,#02070b,#061722);color:#a9c3cf;padding:60px 0 35px}.footer-grid{display:grid;grid-template-columns:1.15fr .75fr .75fr;gap:36px}.footer a{color:#dceff6;text-decoration:none}.footer h4{color:#fff}.footer small{display:block;border-top:1px solid rgba(255,255,255,.08);margin-top:34px;padding-top:22px}
.pagehero{position:relative;overflow:hidden;color:#fff;padding:82px 0;background:radial-gradient(circle at 82% 18%,rgba(23,212,209,.18),transparent 24%),linear-gradient(135deg,#02080d,#07263b 62%,#0a4a61)}
.pagehero p{color:#c8dfe8;max-width:780px}.prose{max-width:890px}.prose h2{font-size:2.15rem;margin-top:2em}.prose p,.prose li{color:#526b79}
.badge-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.badge{border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:8px 12px;color:#d9eff6;font-size:.8rem;background:rgba(255,255,255,.04)}
.mobile-toggle{display:none}
@media(max-width:980px){
  .hero-grid,.bigsplit,.video-shell,.form-shell{grid-template-columns:1fr}
  .cards4,.steps{grid-template-columns:1fr 1fr}
  .resource-grid,.stories{grid-template-columns:1fr 1fr}
  .quickgrid{grid-template-columns:1fr 1fr}.visual{min-height:450px}
}
@media(max-width:720px){
  .navlinks{display:none}.mobile-toggle{display:block;border:0;background:none;font-size:1.4rem}
  .hero{padding-top:66px}.visual{min-height:400px}.device{inset:12px;transform:none}.shield{width:150px;height:150px}
  .cards4,.cards3,.steps,.resource-grid,.stories,.footer-grid,.twocol{grid-template-columns:1fr}
  .quickgrid{grid-template-columns:1fr}.section{padding:66px 0}.section-head{display:block}.form-shell{padding:22px}
  .hero-actions{flex-direction:column}.btn{width:100%}h1{font-size:2.75rem}
}

.logo-mark-pro{
  padding:6px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.95),rgba(224,240,255,.88)),
    #fff;
  border:1px solid rgba(170,203,226,.95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 10px 28px rgba(20,108,255,.22),
    0 4px 0 rgba(139,179,208,.52);
}
.logo-mark-pro svg{width:100%;height:100%;display:block;filter:drop-shadow(0 3px 5px rgba(18,72,120,.16))}

/* SEO V5 additions */
.footer-grid{grid-template-columns:1.15fr .72fr .82fr .82fr}
.topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.topic-link{text-decoration:none}
.topic-link .card{height:100%}
.topic-link .card:hover h3{color:#146CFF}
.article-meta{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 28px;color:#5a7080;font-size:.84rem}
.callout{padding:22px 24px;border-radius:18px;background:#eef8ff;border:1px solid #c9e8f4;margin:24px 0}
.callout strong{color:#071521}
.search-list{display:grid;gap:12px;margin:22px 0}
.search-list div{padding:16px 18px;border-radius:14px;background:#fff;border:1px solid #d8e7f0;box-shadow:0 6px 18px rgba(10,44,66,.05)}
@media(max-width:980px){.topic-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.topic-grid,.footer-grid{grid-template-columns:1fr}}

.availability-line{margin:14px 0 18px;font-size:1rem;line-height:1.6}

.identity-notice{border-bottom:1px solid rgba(88,178,255,.22);background:rgba(6,20,32,.96)}
.identity-notice .wrap{padding:12px 0;font-size:.88rem;line-height:1.55;color:#b9cbd6}
.identity-notice strong{color:#fff}