:root { --abyss:#03131f; --deep:#06273b; --ocean:#0d4960; --cyan:#66e7e1; --foam:#e9fbf8; --sand:#d8b887; --line:rgba(169,236,232,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--abyss); color:var(--foam); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--cyan); color:var(--abyss); }
.site-shell { min-height:100vh; background:radial-gradient(circle at 80% 0%,rgba(44,146,164,.16),transparent 34rem),linear-gradient(180deg,#061b2a 0%,#03131f 38%,#020c13 100%); }
.wrap { width:min(1180px,calc(100% - 40px)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:40; border-bottom:1px solid var(--line); background:rgba(3,19,31,.82); backdrop-filter:blur(18px); }
.nav { height:74px; display:flex; align-items:center; gap:28px; }
.brand { display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:-.02em; }
.brand-mark { width:38px; height:38px; color:var(--cyan); }
.nav-links { margin-left:auto; display:flex; align-items:center; gap:7px; }
.nav-link { color:#b8d4d5; font-size:14px; padding:10px 13px; border-radius:999px; transition:.2s ease; }
.nav-link:hover,.nav-link:focus-visible { color:white; background:rgba(255,255,255,.08); outline:none; }
.nav-cta { border:1px solid rgba(102,231,225,.35); color:var(--cyan); }
.hero { min-height:690px; position:relative; display:flex; align-items:end; overflow:hidden; border-bottom:1px solid var(--line); }
.hero-media { position:absolute; inset:0; }
.hero-media img { width:100%; height:100%; object-fit:cover; object-position:center 45%; }
.hero-media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,12,19,.97) 0%,rgba(2,12,19,.68) 43%,rgba(2,12,19,.12) 78%),linear-gradient(0deg,#03131f 0%,transparent 45%); }
.hero-content { position:relative; z-index:2; padding:150px 0 86px; max-width:690px; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; color:var(--cyan); font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow::before { content:""; width:28px; height:1px; background:currentColor; }
h1 { margin:18px 0 24px; font-size:clamp(56px,8.5vw,118px); line-height:.88; letter-spacing:-.065em; font-weight:800; }
.hero p { max-width:610px; margin:0; color:#cae0e0; font-size:clamp(18px,2vw,22px); line-height:1.58; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.button { display:inline-flex; min-height:50px; align-items:center; justify-content:center; padding:0 22px; border:1px solid rgba(255,255,255,.24); border-radius:999px; font-weight:700; transition:.2s ease; }
.button.primary { background:var(--cyan); color:#03202a; border-color:var(--cyan); }
.button:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.2); }
.fact-band { position:relative; z-index:3; margin-top:-30px; }
.fact-grid { display:grid; grid-template-columns:repeat(4,1fr); background:rgba(6,39,59,.88); border:1px solid var(--line); border-radius:24px; backdrop-filter:blur(16px); overflow:hidden; }
.fact { padding:26px; border-right:1px solid var(--line); }
.fact:last-child { border-right:0; }
.fact strong { display:block; color:white; font-size:30px; letter-spacing:-.04em; }
.fact span { color:#91b7b9; font-size:13px; line-height:1.4; }
.section { padding:110px 0; }
.section-head { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:40px; margin-bottom:48px; }
.section h2,.page-hero h1 { margin:12px 0 0; font-size:clamp(42px,5vw,72px); line-height:.98; letter-spacing:-.045em; }
.section-head p { margin:0; color:#9fc0c2; font-size:18px; line-height:1.7; }
.journey-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.journey-card { min-height:330px; position:relative; overflow:hidden; padding:34px; border:1px solid var(--line); border-radius:28px; background:linear-gradient(145deg,rgba(15,73,96,.58),rgba(4,23,35,.82)); transition:transform .25s ease,border-color .25s ease; }
.journey-card:hover { transform:translateY(-4px); border-color:rgba(102,231,225,.48); }
.journey-card .number { color:var(--cyan); font:700 13px/1 monospace; }
.journey-card h3 { margin:88px 0 12px; font-size:34px; letter-spacing:-.035em; }
.journey-card p { max-width:520px; color:#a8c7c9; line-height:1.65; }
.journey-card .orb { position:absolute; top:-80px; right:-45px; width:230px; height:230px; border-radius:50%; background:radial-gradient(circle at 35% 35%,rgba(102,231,225,.45),rgba(0,75,100,.1) 58%,transparent 70%); }
.callout { display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:center; padding:54px; border:1px solid var(--line); border-radius:30px; background:#062435; }
.callout .big { font-size:clamp(76px,11vw,150px); font-weight:800; line-height:.8; color:var(--cyan); letter-spacing:-.08em; }
.callout h2 { font-size:clamp(34px,4vw,58px); }
.callout p { color:#a9c8ca; font-size:18px; line-height:1.72; }
.page-hero { padding:120px 0 70px; border-bottom:1px solid var(--line); background:radial-gradient(circle at 80% 20%,rgba(29,126,145,.24),transparent 31rem); }
.page-hero p { max-width:760px; color:#a9c9cb; font-size:20px; line-height:1.7; }
.content-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:22px; }
.panel { border:1px solid var(--line); border-radius:26px; padding:32px; background:rgba(6,39,59,.55); }
.panel h2,.panel h3 { margin:0 0 14px; letter-spacing:-.03em; }
.panel h2 { font-size:34px; }.panel h3 { font-size:24px; }
.panel p,.panel li { color:#aecacc; line-height:1.7; }
.panel ul { margin:0; padding-left:20px; }
.stat-list { display:grid; gap:12px; margin-top:24px; }
.stat-row { display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-top:1px solid var(--line); }
.stat-row span { color:#94b8ba; }.stat-row strong { color:var(--cyan); }
.depth-stage { display:grid; grid-template-columns:120px 1fr; min-height:210px; border-top:1px solid var(--line); }
.depth-stage:first-child { border-top:0; }
.depth-label { padding:34px 20px 34px 0; color:var(--cyan); font-weight:800; font-size:20px; }
.depth-copy { padding:32px; border-left:1px solid var(--line); position:relative; }
.depth-copy::before { content:""; position:absolute; width:9px; height:9px; border-radius:50%; background:var(--cyan); left:-5px; top:40px; box-shadow:0 0 20px var(--cyan); }
.depth-copy h2 { margin:0 0 10px; font-size:30px; }
.depth-copy p { color:#a8c7c9; line-height:1.7; }
.sound-pattern { display:flex; align-items:center; gap:8px; height:72px; }
.click-dot { width:10px; height:10px; background:var(--cyan); border-radius:50%; box-shadow:0 0 18px rgba(102,231,225,.6); }
.click-dot.lg { width:17px; height:17px; }.gap-lg { margin-left:28px; }
.threat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.threat { padding:28px; border-radius:22px; border:1px solid var(--line); background:rgba(255,255,255,.025); }
.threat b { color:var(--sand); font-size:19px; }.threat p { color:#a8c7c9; line-height:1.65; }
.source-note { padding:24px 0 70px; color:#75999c; font-size:13px; line-height:1.7; }
.source-note a { color:#a6cfcd; text-decoration:underline; text-underline-offset:3px; }
.footer { border-top:1px solid var(--line); padding:34px 0; color:#7fa3a5; }
.footer-inner { display:flex; justify-content:space-between; gap:24px; align-items:center; }
@media (max-width:850px) {
  .nav { height:auto; padding:16px 0; flex-wrap:wrap; }.nav-links { order:3; width:100%; overflow-x:auto; margin-left:0; padding-bottom:2px; }.nav-link { white-space:nowrap; }
  .hero { min-height:650px; }.hero-media::after { background:linear-gradient(0deg,#03131f 5%,rgba(2,12,19,.35) 80%); }.hero-content { padding-top:260px; }
  .fact-grid { grid-template-columns:repeat(2,1fr); }.fact:nth-child(2) { border-right:0; }.fact:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .section-head,.content-grid,.callout { grid-template-columns:1fr; }.journey-grid,.threat-grid { grid-template-columns:1fr; }.section { padding:80px 0; }.callout { padding:32px; gap:30px; }
}
@media (max-width:560px) {
  .wrap { width:min(100% - 28px,1180px); }.brand span { display:none; }.nav-cta { display:none; } h1 { font-size:56px; }
  .hero { min-height:620px; }.hero-media img { object-position:62% center; }.hero-content { padding-bottom:62px; }.hero p { font-size:17px; }
  .fact { padding:20px 18px; }.fact strong { font-size:25px; }.section { padding:68px 0; }.section-head { gap:20px; }
  .journey-card { min-height:280px; padding:26px; }.journey-card h3 { margin-top:70px; }.page-hero { padding:80px 0 54px; }
  .panel { padding:24px; }.depth-stage { grid-template-columns:82px 1fr; }.depth-copy { padding:28px 20px; }.footer-inner { flex-direction:column; align-items:flex-start; }
}