/* ==========================================================================
   IPRevealed homepage — Network & Privacy Intelligence dashboard (V3).
   Tokens reused from style.css :root (--navy --ink --muted --blue --teal --bg
   --white --border --radius --radius-sm --container --shadow-sm --shadow-md
   --font-mono). No new palette introduced.
   ========================================================================== */

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.home-section-head{max-width:640px;margin:0 0 26px}
.home-section-head-tight{margin-bottom:18px}
.home-kicker{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.home-section-head h2{font-size:clamp(21px,2.3vw,27px);margin:0 0 6px}
.home-section-head p{color:var(--muted);font-size:14px;margin:0;line-height:1.55}

/* ==========================================================================
   Hero — asymmetric two-column composition. Deep navy, static low-contrast
   technical motif.
   ========================================================================== */
/* padding-top must clear the fixed .site-header (74px, .site-nav{height:74px} in the
   global stylesheet — no body/#main top-offset exists anywhere to reserve space for it,
   confirmed by searching style.css). Unlike every other page's hero, the homepage hero
   has no breadcrumb above its first content, so the eyebrow sits directly in the fixed
   header's overlay zone unless padding-top exceeds 74px on its own. 100px = 74px header
   clearance + ~26px genuine breathing room. */
.home-hero{position:relative;background:var(--navy);color:#fff;padding:100px 0 26px;overflow:hidden}
.home-hero-motif{position:absolute;inset:0;pointer-events:none;opacity:.5}
.home-hero-motif svg{width:100%;height:100%}
.home-hero-motif-line{stroke:rgba(255,255,255,.05);stroke-width:1}
.home-hero-motif-tick{fill:rgba(37,99,235,.18)}
.home-hero-motif-dot{fill:rgba(15,143,131,.35)}

.home-hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:start}

.home-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#9DB4D6;margin-bottom:14px}
.home-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);display:inline-block}

.home-hero-primary h1{font-size:clamp(29px,3.8vw,44px);line-height:1.08;color:#fff;margin:0 0 10px}
.home-lede{font-size:15.5px;line-height:1.55;color:#C4D0E0;max-width:52ch;margin:0 0 18px}

/* Hero primary/secondary CTA pair — same visual language as the buttons used
   throughout the diagnostic tools (.wrt-btn/.dlt-btn): solid blue primary,
   bordered ghost secondary. */
.home-hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.home-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);padding:0 22px;height:46px;font-weight:700;font-size:14.5px;cursor:pointer;text-align:center}
.home-btn-primary{background:var(--blue);color:#fff;border:1px solid var(--blue)}
.home-btn-primary:hover{background:#1d4fc4}
.home-btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28)}
.home-btn-ghost:hover{border-color:var(--teal);color:var(--teal)}

/* ==========================================================================
   Network Command Bar — final-CTA instance only (V3: removed from hero).
   ========================================================================== */
.cmdbar{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:12px;max-width:560px}
.cmdbar-label{display:block;font-size:12.5px;font-weight:700;color:#fff;margin:0 0 8px}
.cmdbar-row{display:flex;gap:9px}
.cmdbar-input{flex:1;min-width:0;background:#fff;border:1px solid transparent;border-radius:var(--radius-sm);padding:11px 13px;font:600 14px var(--font-mono);color:var(--ink)}
.cmdbar-input::placeholder{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:400;color:var(--muted)}
.cmdbar-input:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.cmdbar-submit{flex-shrink:0;background:var(--blue);color:#fff;border:0;border-radius:var(--radius-sm);padding:0 20px;font-weight:700;font-size:14px;cursor:pointer;transition:background .15s}
.cmdbar-submit:hover{background:#1d4fc4}
.cmdbar-message{min-height:16px;margin:8px 2px 0;font-size:12.5px;color:#9DB4D6}
.cmdbar-message:not(:empty){color:#F2C572}

.cmdbar-examples{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:11px}
.cmdbar-examples-label{font-size:12px;color:#8296B3;margin-right:2px}
.cmdbar-example{background:transparent;border:1px solid rgba(255,255,255,.18);color:#C4D0E0;border-radius:999px;padding:4px 11px;font:600 12px var(--font-mono);cursor:pointer;transition:border-color .15s,color .15s}
.cmdbar-example:hover{border-color:var(--teal);color:#fff}

.cmdbar-compact{background:rgba(255,255,255,.06);max-width:640px;margin:18px auto 0}
.cmdbar-compact .cmdbar-row{gap:9px}

/* ==========================================================================
   Your Connection console.
   ========================================================================== */
.connection-console{position:relative;background:#0C1B2E;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:18px;box-shadow:0 16px 36px rgba(0,0,0,.26)}
.connection-console-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.connection-console-title{font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#9DB4D6}
.connection-console-status{font-size:12px;font-weight:600;color:var(--teal)}

.connection-console-body{border-top:1px solid rgba(255,255,255,.1);padding-top:13px}
.connection-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.connection-field-label{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#7C90AB}
.connection-field-value{font:700 20px var(--font-mono);color:#fff;word-break:break-word;overflow-wrap:anywhere}
.connection-field-value-sm{font-size:14px;word-break:break-word}
.connection-field-ip{margin-bottom:13px}
.connection-field-row{display:flex;gap:16px;flex-wrap:wrap}
.connection-field-row .connection-field{flex:1;min-width:90px}
.connection-asn-badge{display:inline-block;align-self:flex-start;margin-top:2px;background:rgba(37,99,235,.22);color:#BFD2FA;font:700 11px var(--font-mono);letter-spacing:.02em;white-space:nowrap;padding:2px 8px;border-radius:999px}
.connection-asn-badge[hidden]{display:none}

.connection-console-error{font-size:13px;color:#C4D0E0;margin:0;padding-top:13px;border-top:1px solid rgba(255,255,255,.1)}

.connection-console-actions{display:flex;gap:9px;margin-top:16px}
.connection-action-btn{flex:1;text-align:center;border-radius:var(--radius-sm);padding:10px 13px;font-size:13px;font-weight:700;cursor:pointer;border:1px solid rgba(255,255,255,.18);background:transparent;color:#fff;transition:border-color .15s,opacity .15s}
.connection-action-btn:disabled{opacity:.4;cursor:default}
.connection-action-btn-primary{background:var(--blue);border-color:var(--blue)}
.connection-action-btn-primary[aria-disabled="true"]{opacity:.4;pointer-events:none}
.connection-action-btn:not(:disabled):not(.connection-action-btn-primary):hover{border-color:var(--teal)}
.connection-action-btn-primary:hover{background:#1d4fc4}

/* ==========================================================================
   Connection status strip — five compact, honest state cells directly under
   the hero. Untested diagnostics always read "Not tested"; IPv4/IPv6 read
   Available/Inconclusive only, never a fabricated Unavailable.
   ========================================================================== */
.home-status{padding:26px 0 34px}
.home-status-grid{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--white)}
.home-status-cell{flex:1 1 180px;min-width:0;padding:11px 16px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:4px}
.home-status-cell:last-child{border-right:0}
.home-status-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.home-status-value{font:700 15px var(--font-mono);color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-status-value-state[data-state="available"]{color:#0A6B61}
.home-status-value-state[data-state="inconclusive"]{color:var(--muted);font-weight:600}
.home-status-value-untested{font:700 11px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}
.home-status-cta{font-size:11px;font-weight:600;color:var(--muted)}
.home-status-cta:hover{color:var(--blue);text-decoration:underline}

/* ==========================================================================
   Privacy Diagnostics — DNS Leak Test + WebRTC Leak Test, premium two-card
   treatment. Specific real capabilities, not generic icon cards.
   ========================================================================== */
.home-privacy{padding:0 0 34px}
.home-privacy-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.home-privacy-card{background:var(--navy);color:#fff;border-radius:var(--radius);padding:20px 22px}
.home-privacy-eyebrow{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#9DB4D6;margin-bottom:6px}
.home-privacy-card h3{color:#fff;font-size:17px;margin:0 0 8px}
.home-privacy-statement{color:#C4D0E0;font-size:13px;line-height:1.5;margin:0 0 14px}

/* Restrained abstract diagnostic-pattern preview — structural, not a fabricated result.
   No addresses, counts or verdicts; teal marks "authoritative/first-party" only, the same
   meaning it carries in the real DNS/WebRTC tools. */
.home-privacy-preview{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:12px}
.hpp-modes{display:flex;gap:6px;margin-bottom:10px}
.hpp-mode{font:700 10px var(--font-mono);text-transform:uppercase;letter-spacing:.03em;color:#7C90AB;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:3px 10px}
.hpp-mode.is-active{color:#fff;border-color:var(--teal);background:rgba(15,143,131,.16)}
.hpp-converge{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.hpp-converge-in{display:flex;gap:3px;height:6px;flex:0 0 40px}
.hpp-converge-in span{flex:1;background:rgba(255,255,255,.18);border-radius:3px}
.hpp-converge-arrow{color:#7C90AB;font-size:12px}
.hpp-converge-out{display:flex;height:8px;flex:0 0 20px}
.hpp-converge-out span{flex:1;background:var(--teal);border-radius:4px}
.hpp-compare{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.hpp-compare-node{font:700 11.5px var(--font-mono);color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:5px 10px}
.hpp-compare-arrow{color:#7C90AB;font-size:14px}
.hpp-caption{display:block;font:600 10.5px var(--font-mono);color:#7C90AB}

.home-privacy-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.home-privacy-tags span{font-size:11px;font-weight:600;color:#C4D0E0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:3px 10px}

.home-privacy-cta{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:#fff}
.home-privacy-card:hover .home-privacy-cta{color:var(--teal)}

/* DNS + WebRTC move to a light supporting surface; VPN Leak Test keeps the dark flagship treatment above */
.home-privacy-card:not(.home-privacy-card-lead){background:var(--white);color:var(--ink);border:1px solid var(--border)}
.home-privacy-card:not(.home-privacy-card-lead) .home-privacy-eyebrow{color:var(--muted)}
.home-privacy-card:not(.home-privacy-card-lead) h3{color:var(--navy)}
.home-privacy-card:not(.home-privacy-card-lead) .home-privacy-statement{color:var(--muted)}
.home-privacy-card:not(.home-privacy-card-lead) .home-privacy-preview{background:var(--bg);border:1px solid var(--border)}
.home-privacy-card:not(.home-privacy-card-lead) .home-privacy-tags span{color:var(--navy);background:var(--bg);border:1px solid var(--border)}
.home-privacy-card:not(.home-privacy-card-lead) .home-privacy-cta{color:var(--blue)}
.home-privacy-card:not(.home-privacy-card-lead):hover .home-privacy-cta{color:#1D4FC4}
.home-privacy-card:not(.home-privacy-card-lead) .hpp-mode{color:var(--muted);border-color:var(--border)}
.home-privacy-card:not(.home-privacy-card-lead) .hpp-mode.is-active{color:var(--navy);border-color:var(--teal);background:rgba(15,143,131,.12)}
.home-privacy-card:not(.home-privacy-card-lead) .hpp-converge-in span{background:#D7E0EC}
.home-privacy-card:not(.home-privacy-card-lead) .hpp-converge-arrow{color:var(--muted)}
.home-privacy-card:not(.home-privacy-card-lead) .hpp-compare-node{color:var(--navy);border-color:var(--border);background:var(--white)}
.home-privacy-card:not(.home-privacy-card-lead) .hpp-caption{color:var(--muted)}

/* ==========================================================================
   IP Intelligence — positions the network-identity concepts (ASN, prefix,
   RDAP, reverse DNS, routing, RPKI) without duplicating the full IP Lookup
   page. Example report only — never presented as the visitor's own data.
   ========================================================================== */
.home-intel{padding:0 0 36px}
.home-intel-panel{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px}
.home-intel-preview-label{display:block;font-size:12.5px;font-weight:700;color:var(--navy);margin-bottom:2px}
.home-intel-preview-sub{display:block;font:600 11px var(--font-mono);color:var(--muted);margin:0 0 12px}
.home-intel-facts{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.home-intel-facts > div{padding:9px 14px;border-bottom:1px solid var(--border);background:var(--bg)}
.home-intel-facts > div:nth-child(odd){border-right:1px solid var(--border)}
.home-intel-facts > div:nth-last-child(-n+2){border-bottom:0}
.home-intel-facts dt{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin:0 0 3px}
.home-intel-facts dd{font:700 13px var(--font-mono);color:var(--navy);margin:0;word-break:break-word}
.home-intel-facts-primary{margin-bottom:8px}
.home-intel-facts-primary dd{font-size:14.5px}
.home-intel-facts-secondary{opacity:.82}
.home-intel-facts-secondary dd{font-size:12px;font-weight:600}
.home-intel-copy p{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 16px}
.home-intel-cta{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14.5px;color:var(--blue)}
.home-intel-cta:hover{text-decoration:underline}

/* ---- Product identity band: Observed / Enriched / Interpreted - lightweight, no CTA ---- */
.home-identity{padding:34px 0;background:var(--white);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.home-identity-head{text-align:center;margin:0 0 26px}
.home-identity-head h2{margin:0;font-size:clamp(19px,2vw,24px);font-weight:700;letter-spacing:-.01em;color:var(--navy)}
.home-identity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.home-identity-col{padding:0 28px}
.home-identity-col:first-child{padding-left:0}
.home-identity-col:last-child{padding-right:0}
.home-identity-col + .home-identity-col{border-left:1px solid var(--border)}
.home-identity-node{display:block;width:6px;height:6px;border-radius:50%;background:var(--teal);margin-bottom:10px}
.home-identity-tag{display:block;font:700 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.home-identity-col h3{margin:0 0 6px;font-size:15px;font-weight:700;color:var(--navy)}
.home-identity-col p{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}
@media(max-width:860px){
	.home-identity-grid{grid-template-columns:1fr;gap:22px}
	.home-identity-col{padding:0}
	.home-identity-col:first-child,.home-identity-col:last-child{padding:0}
	.home-identity-col + .home-identity-col{border-left:0;border-top:1px solid var(--border);padding-top:20px}
}

/* ==========================================================================
   Shared deterministic mini-visualization components — reused by the
   Network Lab minor grid.
   ========================================================================== */
/* ==========================================================================
   UX2-D.4 - Network Planning lab. Featured Subnet Calculator (compacted) plus
   five supporting modules, each with a deterministic CSS mini-visualization.
   HTML + CSS only, no JS. Section-scoped (#network-lab).
   ========================================================================== */
.home-lab{padding:46px 0;background:var(--bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
#network-lab .home-section-head{max-width:600px;margin:0 0 22px}
#network-lab .home-section-head p{margin:9px 0 0;font-size:14px;line-height:1.55;color:var(--muted)}

.home-lab-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:stretch}

/* --- Featured: Subnet Calculator --- */
.home-lab-primary{display:flex;flex-direction:column;background:linear-gradient(180deg,#0E2138,#0A1725);color:#fff;border:1px solid rgba(122,170,240,.16);border-radius:var(--radius);padding:20px;position:relative;overflow:hidden;transition:border-color .14s ease,box-shadow .14s ease}
.home-lab-primary:hover{border-color:rgba(122,170,240,.42);box-shadow:0 14px 30px rgba(7,19,33,.26)}
.home-lab-primary:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.home-lab-primary-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8FB6EE;margin-bottom:8px}
.home-lab-primary-label{margin:0 0 13px;font:700 16px/1.2 var(--font-mono);color:#fff}
.home-lab-primary-demo{display:flex;flex-direction:column;gap:2px;margin-bottom:13px}
.home-lab-primary-demo-cidr{font:700 19px var(--font-mono);color:#fff;letter-spacing:-.01em}
.home-lab-primary-demo-verb{font-size:11.5px;color:#7C90AB}
.home-lab-primary-demo-cidr-result{color:#5FE0D2}
.home-lab-anatomy{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);padding:13px 14px 8px;margin-bottom:12px}
.home-lab-anatomy-track{position:relative;height:6px;border-radius:3px;background:rgba(255,255,255,.16);margin:0 6px 20px}
.home-lab-anatomy-tick{position:absolute;top:-4px;width:2px;height:14px;background:#7C90AB}
.home-lab-anatomy-tick.is-start{left:0}
.home-lab-anatomy-tick.is-end{left:100%}
.home-lab-anatomy-tick i{position:absolute;top:19px;font:700 9.5px var(--font-mono);color:#8296B3;white-space:nowrap;font-style:normal}
.home-lab-anatomy-tick.is-start i{left:0}
.home-lab-anatomy-tick.is-end i{right:0}
.home-lab-anatomy-marker{position:absolute;top:-6px;width:3px;height:18px;border-radius:2px;background:#5FE0D2}
.home-lab-anatomy-marker i{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);font:700 10px var(--font-mono);color:#5FE0D2;white-space:nowrap;font-style:normal}
.home-lab-primary-metrics{display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:12px}
.home-lab-primary-metrics span{font-size:11px;color:#9DB4D6}
.home-lab-primary-metrics b{font:700 12.5px var(--font-mono);color:#fff;margin-right:3px}
.home-lab-primary-desc{color:#C4D0E0;font-size:13px;line-height:1.5;max-width:42ch;margin:0 0 13px}
.home-lab-primary-cta{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;color:#fff}
.home-lab-primary:hover .home-lab-primary-cta{color:#5FE0D2}

/* --- Supporting modules --- */
.home-lab-minor-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:space-between}
.home-lab-minor{display:flex;flex-direction:column;gap:8px;background:var(--white);border:1px solid var(--border);border-radius:14px;padding:14px;min-width:0;transition:border-color .14s ease,transform .14s ease,box-shadow .14s ease}
.home-lab-minor:hover{border-color:#BCD1F5;transform:translateY(-2px);box-shadow:0 10px 22px rgba(7,19,33,.10)}
.home-lab-minor:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.home-lab-minor-wide{grid-column:1/-1}
.home-lab-minor h3{margin:0;font-size:13px;font-weight:700;line-height:1.3;color:var(--navy);overflow-wrap:anywhere}
.home-lab-minor-example{font-size:11.5px;line-height:1.5;color:var(--muted)}
.home-lab-minor-cta{margin-top:auto;font-size:12px;font-weight:700;color:var(--blue);overflow-wrap:anywhere}
.home-lab-minor:hover .home-lab-minor-cta{color:#1D4FC4}

/* --- Mini-visualizations (decorative; every fact is also in the text) --- */
.home-lab-viz{display:flex;align-items:center;justify-content:center;height:44px;padding:8px 10px;border-radius:9px;background:#F6F8FB;border:1px solid #E6EDF6}
.home-lab-minor-wide .home-lab-viz{height:48px}
.viz-vlsm{display:flex;gap:3px;width:100%;height:10px}
.viz-vlsm i{background:var(--blue);border-radius:2px}
.viz-vlsm i:last-child{background:var(--teal)}
.viz-split{display:flex;gap:3px;width:100%;height:10px}
.viz-split i{flex:1;background:var(--blue);border-radius:2px}
.viz-convert{display:flex;flex-direction:column;align-items:center;gap:1px;font:600 9px/1.4 var(--font-mono);color:var(--ink);text-align:center}
.viz-convert-arrow{color:var(--blue);font-size:11px}
.viz-convert-b{color:var(--muted)}
.viz-overlap{position:relative;width:100%;height:22px}
.viz-overlap i{position:absolute;height:8px;border-radius:4px}
.viz-overlap-a{top:1px;left:0;width:68%;background:#C2D6F8}
.viz-overlap-b{bottom:1px;right:0;width:56%;background:#C2D6F8}
.viz-overlap-x{top:7px;left:44%;width:24%;background:var(--blue)}
.viz-converge{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%}
.viz-converge-in{display:flex;gap:4px;width:76%}
.viz-converge-in i{flex:1;height:6px;background:var(--border);border-radius:3px}
.viz-converge-out{width:40%}
.viz-converge-out i{display:block;height:8px;background:var(--blue);border-radius:4px}

@media(max-width:560px){
	.home-lab-minor-grid{grid-template-columns:1fr}
	.home-lab-minor-wide{grid-column:auto}
	.home-lab-primary-demo-cidr{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
	.home-lab-primary,.home-lab-minor{transition:none}
	.home-lab-minor:hover{transform:none}
}

/* ==========================================================================
   Trust / methodology — compact horizontal evidence strip. flex:1 on each
   item scales cleanly from 3 to 5 items with no per-count CSS needed.
   ========================================================================== */
.home-trust{padding:26px 0}
.home-trust .home-section-head{max-width:780px}
.home-trust .home-section-head p{margin-top:8px}
.home-trust-link{color:var(--blue);font-weight:600;white-space:nowrap}
.home-trust-link:hover,.home-trust-link:focus-visible{text-decoration:underline}
.home-trust-strip{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:14px 0}
.home-trust-item{flex:1 1 150px}
.home-trust-item h3{font-size:13px;margin:0 0 3px}
.home-trust-item p{color:var(--muted);font-size:12.5px;line-height:1.45;margin:0}
.home-trust-divider{width:1px;align-self:stretch;background:var(--border)}

/* ==========================================================================
   Final CTA — compact, decisive.
   ========================================================================== */
.home-final-cta{padding:0 0 32px}
.home-final-cta-box{background:var(--navy);border-radius:var(--radius);padding:20px 26px;text-align:center}
.home-final-cta-box h2{color:#fff;font-size:clamp(18px,2vw,22px);margin:0 0 6px}
.home-final-cta-text{color:#C4D0E0;font-size:13.5px;margin:0 0 14px}
.home-final-cta-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;margin-bottom:0}
.home-final-cta-link{font-weight:700;font-size:13.5px;color:#fff;display:inline-flex;align-items:center;gap:4px}
.home-final-cta-link:hover{color:var(--teal)}
.home-final-cta-box .cmdbar{margin:12px auto 0;text-align:left}

/* ==========================================================================
   Responsive: 1024 / 768 / 480.
   ========================================================================== */
@media(max-width:1024px){
	.home-hero-grid{grid-template-columns:1fr;gap:32px}
	.home-hero-console{max-width:520px}
	.home-lab-grid{grid-template-columns:1fr}
	.home-privacy-grid{grid-template-columns:1fr}
	.home-intel-panel{grid-template-columns:1fr}
	.home-trust-strip{row-gap:18px}
}

@media(max-width:768px){
	.home-hero{padding:90px 0 22px}
	.home-hero-primary h1{font-size:27px}
	.home-hero-ctas{flex-direction:column;align-items:stretch}
	.cmdbar-row{flex-direction:column}
	.cmdbar-submit{padding:11px}
	.home-status-grid{flex-direction:column}
	.home-status-cell{flex:none;padding:18px 20px;border-right:0!important;border-bottom:1px solid var(--border)}
	.home-status-cell:last-child{border-bottom:0}
	.home-trust-strip{flex-direction:column;gap:14px}
	.home-trust-divider{display:none}
	.home-intel-facts{grid-template-columns:1fr}
	.home-intel-facts > div{border-right:0!important}
	.home-intel-facts > div:nth-last-child(-n+2){border-bottom:1px solid var(--border)}
	.home-intel-facts > div:last-child{border-bottom:0}
	.home-final-cta-box{padding:26px 20px}
	.home-final-cta-actions{flex-direction:column;gap:12px}
	.connection-field-value{overflow-wrap:anywhere}
}

@media(max-width:480px){
	.home-hero-primary h1{font-size:24px}
	.home-lede{font-size:14.5px}
	.home-hero-ctas .home-btn{width:100%}
	.cmdbar{padding:13px;max-width:100%}
	.connection-console{padding:15px}
	.connection-field-value{font-size:17px}
	.connection-console-actions{flex-direction:column}
	.home-lab-primary{padding:18px}
	.home-lab-primary-demo-cidr{font-size:17px}
	.cmdbar-examples{gap:6px}
	.home-privacy-card{padding:18px}
	.home-intel-panel{padding:18px}
}

@media(prefers-reduced-motion:reduce){
	.cmdbar-submit,.cmdbar-example,.connection-action-btn,.home-lab-minor,.home-btn,.home-privacy-cta{transition:none}
}


/* ==========================================================================
   UX2-D homepage V1 additions. Tokens only, no new palette. Appended so the
   V3 base rules above remain the source of truth for everything they define.
   ========================================================================== */

/* ---- Hero: compact IP-lookup entry (routes to /ip-lookup/?ip=) ---- */
.home-hero-iplookup{margin:16px 0 0;max-width:440px}
.home-hero-iplookup-label{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#9DB4D6;margin:0 0 7px}
.home-hero-iplookup-row{display:flex;gap:9px}
.home-hero-iplookup-input{flex:1;min-width:0;background:#fff;border:1px solid transparent;border-radius:var(--radius-sm);padding:0 13px;height:44px;font:600 14px var(--font-mono);color:var(--ink)}
.home-hero-iplookup-input::placeholder{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:400;color:var(--muted)}
.home-hero-iplookup-input:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.home-hero-iplookup-btn{flex-shrink:0;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius-sm);padding:0 18px;height:44px;font-weight:700;font-size:13.5px;cursor:pointer}
.home-hero-iplookup-btn:hover{border-color:var(--teal);color:var(--teal)}

/* ---- Hero: trust strip below the two-column composition ---- */
.home-hero-trust{position:relative;list-style:none;margin:32px 0 0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.12);display:grid;grid-template-columns:repeat(4,1fr);gap:18px 24px}
.home-hero-trust li{min-width:0}
.home-hero-trust-term{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#9DB4D6;margin-bottom:5px}
.home-hero-trust-desc{display:block;font-size:12.5px;line-height:1.5;color:#C4D0E0}

/* ---- Explore Our Tools: dark compact 10-tool discovery grid (UX2-D.3) ---- */
.home-explore{
	position:relative;overflow:hidden;
	margin:0 0 34px;padding:32px 0 36px;
	background:
		radial-gradient(760px 320px at 78% 0%,rgba(37,99,235,.14),rgba(37,99,235,0) 62%),
		linear-gradient(180deg,#0C1D33,#0A1726);
	color:#EAF0F8;
	border-top:1px solid rgba(122,170,240,.16);border-bottom:1px solid rgba(122,170,240,.16);
}
.home-explore-head{
	display:flex;align-items:baseline;justify-content:space-between;gap:16px 20px;flex-wrap:wrap;
	margin:0 0 16px;
}
.home-explore-head h2{margin:0;font-size:clamp(20px,2.2vw,26px);color:#fff;line-height:1.2}
.home-explore-all{
	flex:none;font-size:13px;font-weight:700;color:#8FB6EE;white-space:nowrap;text-decoration:none;
}
.home-explore-all:hover,.home-explore-all:focus-visible{color:#fff;text-decoration:underline}

.home-explore-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.home-explore-filter{
	font:600 12.5px inherit;letter-spacing:.01em;cursor:pointer;
	padding:7px 14px;border-radius:999px;
	color:#B9C9E0;background:rgba(255,255,255,.04);border:1px solid rgba(122,170,240,.22);
	transition:color .12s,background .12s,border-color .12s;
}
.home-explore-filter:hover{color:#fff;border-color:rgba(122,170,240,.45)}
.home-explore-filter.is-active{color:#0A1726;background:#8FB6EE;border-color:#8FB6EE}
.home-explore-filter:focus-visible{outline:2px solid #8FE3D9;outline-offset:2px}

.home-explore-grid{
	list-style:none;margin:0;padding:0;
	display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;
}
.home-explore-card{min-width:0}
.home-explore-card[hidden]{display:none}
.home-explore-card > a{
	display:flex;flex-direction:column;gap:6px;height:100%;
	padding:14px 14px 15px;
	border:1px solid rgba(122,170,240,.2);border-radius:13px;
	background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
	text-decoration:none;
	transition:border-color .14s,box-shadow .14s,background .14s;
}
.home-explore-card > a:hover,.home-explore-card > a:focus-visible{
	border-color:rgba(143,182,238,.55);
	box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 0 1px rgba(143,182,238,.18);
	background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
}
.home-explore-card > a:focus-visible{outline:2px solid #8FE3D9;outline-offset:2px}

.home-explore-icon{
	width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
	border-radius:10px;border:1px solid rgba(122,170,240,.28);background:rgba(122,170,240,.1);
	margin-bottom:2px;
}
.home-explore-icon svg{width:20px;height:20px}
.home-explore-icon-ip{color:#7FB0F5;border-color:rgba(127,176,245,.4);background:rgba(127,176,245,.12)}
.home-explore-icon-privacy{color:#6FD9CC;border-color:rgba(111,217,204,.4);background:rgba(111,217,204,.12)}
.home-explore-icon-plan{color:#E7B968;border-color:rgba(231,185,104,.4);background:rgba(231,185,104,.12)}

/* subtle category accent - reuses the same hues already used on each card's own icon */
.home-explore-card[data-explore-cat="connection"] > a{border-top-color:rgba(111,217,204,.4)}
.home-explore-card[data-explore-cat="planning"] > a{border-top-color:rgba(231,185,104,.4)}
.home-explore-card[data-explore-cat="connection"] > a:hover{border-color:rgba(111,217,204,.55)}
.home-explore-card[data-explore-cat="planning"] > a:hover{border-color:rgba(231,185,104,.55)}

/* IP Lookup is the site's core identity tool - very slight priority over the rest of the grid */
.home-explore-card.is-featured > a{border-top:2px solid rgba(127,176,245,.65)}
.home-explore-card.is-featured .home-explore-icon{box-shadow:0 0 0 1px rgba(127,176,245,.4)}

.home-explore-card-name{font-size:13.5px;font-weight:700;color:#F4F7FC;line-height:1.3;overflow-wrap:anywhere}
.home-explore-card-desc{font-size:12px;line-height:1.45;color:#9DB2CE}

@media(max-width:1180px){.home-explore-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:940px){.home-explore-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.home-explore-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.home-explore-grid{grid-template-columns:1fr}}

/* ---- Privacy Diagnostics: VPN Leak Test lead (full width) + DNS + WebRTC ---- */
.home-privacy-grid{grid-template-columns:1fr 1fr}
.home-privacy-card-lead{grid-row:span 1;grid-column:1 / -1;display:grid;grid-template-columns:1.2fr 1fr;gap:20px 26px;align-items:start}
.home-privacy-card-lead h3{font-size:19px}
.home-privacy-card-lead .home-privacy-eyebrow{grid-column:1 / -1}
.home-privacy-card-lead .home-privacy-statement{grid-column:1;margin-bottom:0}
.home-privacy-card-lead .home-privacy-preview{grid-column:2;grid-row:2 / 5;margin-bottom:0;align-self:stretch}
.home-privacy-card-lead .home-privacy-tags{grid-column:1;margin:12px 0 0}
.home-privacy-card-lead .home-privacy-cta{grid-column:1}
.hpp-signals{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:7px}
.hpp-signals li{display:flex;align-items:center;gap:8px;font:600 11.5px var(--font-mono);color:#C4D0E0}
.hpp-signals li span{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(15,143,131,.18);flex:none}

/* ---- Network Planning: lightweight workflow story ---- */
#network-lab .home-workflow{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0}
#network-lab .home-workflow li{position:relative;display:flex;align-items:center;gap:7px;padding-right:16px}
#network-lab .home-workflow li:not(:last-child)::after{content:"";width:16px;height:1px;background:var(--border)}
#network-lab .home-workflow-num{font:700 10px var(--font-mono);letter-spacing:.03em;color:var(--blue);background:rgba(37,99,235,.10);border-radius:5px;padding:2px 5px}
#network-lab .home-workflow-step{font-size:12.5px;font-weight:600;color:var(--ink)}
#network-lab .home-workflow-note{margin:0 0 22px;font-size:12.5px;color:var(--muted)}
@media(max-width:640px){
	#network-lab .home-workflow li{padding-right:12px;gap:6px}
	#network-lab .home-workflow li:not(:last-child)::after{width:10px}
}

@media(max-width:1024px){
	.home-hero-trust{grid-template-columns:1fr 1fr;gap:16px 24px;margin-top:28px}
	.home-explore-groups{grid-template-columns:1fr;gap:24px}
	.home-privacy-grid{grid-template-columns:1fr 1fr}
	.home-privacy-card-lead{grid-column:1 / -1;grid-template-columns:1fr}
	.home-privacy-card-lead .home-privacy-preview{grid-column:1;grid-row:auto;margin:12px 0 0}
	.home-privacy-card-lead .home-privacy-tags{margin-top:12px}
}

@media(max-width:768px){
	.home-hero-iplookup-row{flex-direction:column;align-items:stretch}
	.home-hero-iplookup-btn{height:44px}
	.home-hero-trust{grid-template-columns:1fr;gap:14px;margin-top:24px}
	.home-explore-head{flex-direction:column;align-items:flex-start;gap:6px}
	.home-explore-list-planning{grid-template-columns:1fr}
	.home-privacy-grid{grid-template-columns:1fr}
	.home-workflow{gap:6px}
	.home-workflow-step{font-size:12px;padding:4px 10px}
}

@media(max-width:480px){
	.home-hero-iplookup{max-width:100%}
	.home-privacy-card-lead{padding:18px}
}


/* ==========================================================================
   UX2-D hero v3 - "Your Connection" card: connection data (left) beside a
   large local vector Earth globe (right). Globe = inline SVG built once at
   build time from Natural Earth 110m coastlines (public domain), orthographic
   Atlantic view. Flags = local per-country SVG in assets/flags/ (flag-icons,
   MIT + simplified redraws). Zero runtime third-party requests.
   ========================================================================== */

.connection-console-v2{
	background:linear-gradient(180deg,#0E2138,#0A1826);
	border:1px solid rgba(122,170,240,.22);
	box-shadow:0 20px 48px rgba(0,0,0,.32),0 0 0 1px rgba(122,170,240,.06),inset 0 1px 0 rgba(255,255,255,.04);
	padding:18px;
}
.connection-console-v2 .connection-console-title{color:#C4D6F2;letter-spacing:.04em}
.connection-console-v2 .connection-console-status{
	font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
	color:#9DB4D6;background:rgba(157,180,214,.12);border:1px solid rgba(157,180,214,.28);
	border-radius:999px;padding:2px 9px;
}
.connection-console-v3.is-detected .connection-console-status{
	color:#8FE3D9;background:rgba(15,143,131,.18);border-color:rgba(15,143,131,.45);
}

/* data + globe split */
.connection-console-split{
	display:grid;grid-template-columns:minmax(0,44%) minmax(0,56%);gap:14px;align-items:center;
	margin-top:14px;padding-top:14px;border-top:1px solid rgba(122,170,240,.14);
}
.connection-console-data{min-width:0}
.connection-console-v3 .connection-console-body{
	border-top:0;padding-top:0;display:flex;flex-direction:column;gap:11px;
}
.connection-console-v3 .connection-field{gap:3px}
.connection-console-v3 .connection-field-ip{margin:0}
.connection-console-v3 .connection-field-value{font-size:19px}
.connection-console-v3 .connection-field-value-sm{font-size:13.5px}
.connection-console-v3 .connection-asn-badge:empty{display:none}

/* country + graphical flag */
.connection-country-value{display:inline-flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.connection-country-flag{
	width:22px;height:16px;flex:none;border-radius:2px;object-fit:cover;
	box-shadow:0 0 0 1px rgba(255,255,255,.16);
}
.connection-country-flag[hidden]{display:none}
.connection-city-field[hidden]{display:none}
#connection-city{overflow-wrap:anywhere;word-break:break-word}
.connection-console-geo-note{
	display:block;margin:3px 0 0;font-size:10px;font-weight:600;letter-spacing:.02em;
	text-transform:uppercase;color:#7C90AB;
}

/* large vector Earth */
.connection-console-earth{
	position:relative;display:flex;justify-content:center;align-items:center;
	min-width:0;align-self:stretch;
}
.cc-earth{width:100%;max-width:340px;height:auto;filter:drop-shadow(0 10px 30px rgba(37,99,235,.30))}
.cc-earth-halo{transform-box:fill-box;transform-origin:center;animation:ccEarthPulse 3.4s ease-in-out infinite}
@keyframes ccEarthPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.62;transform:scale(1.4)}}

.connection-console-v3 .connection-console-error{
	margin:12px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);
	font-size:13px;color:#C4D0E0;
}

@media(max-width:1024px){.home-hero-console{max-width:560px}}
@media(max-width:768px){
	.connection-console-split{grid-template-columns:1fr;gap:16px}
	.connection-console-data{order:1}
	.connection-console-earth{order:2}
	.cc-earth{max-width:260px}
}
@media(max-width:480px){
	.connection-console-v2{padding:15px}
	.cc-earth{max-width:208px}
	.connection-console-v3 .connection-field-value{font-size:17px;overflow-wrap:anywhere}
	.connection-console-actions{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.cc-earth-halo{animation:none;opacity:.5}}

/* ==========================================================================
   UX2-E1 - hero left-control premium polish (CSS only; front-page.php unchanged).
   Scoped to .home-hero-ctas / .home-hero-iplookup* - the shared .home-btn-primary
   token and the final-CTA / cmdbar are NOT touched. No JS. Native form semantics
   preserved: GET /ip-lookup/?ip=<value>, IPv4 + IPv6.
   ========================================================================== */

/* --- Primary CTA: "Check my connection ->" --- */
.home-hero-ctas .home-btn-primary{
	height:54px;
	padding:0 30px;
	gap:10px;
	border-radius:15px;
	font-size:15px;
	font-weight:700;
	letter-spacing:.005em;
	background:var(--blue);
	border:1px solid rgba(255,255,255,.12);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 26px rgba(7,19,33,.30);
	transition:background .14s ease,transform .14s ease,box-shadow .14s ease;
}
.home-hero-ctas .home-btn-primary::after{
	content:"\2192";
	font-size:16px;
	line-height:1;
	transition:transform .14s ease;
}
.home-hero-ctas .home-btn-primary:hover{
	background:#3B7BF0;
	transform:translateY(-1px);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 32px rgba(7,19,33,.36);
}
.home-hero-ctas .home-btn-primary:hover::after{transform:translateX(2px)}
.home-hero-ctas .home-btn-primary:active{transform:translateY(0)}
.home-hero-ctas .home-btn-primary:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

/* --- IP lookup: one integrated control --- */
.home-hero-iplookup{margin:20px 0 0;max-width:480px}
.home-hero-iplookup-label{margin:0 0 8px}
.home-hero-iplookup-row{
	display:flex;
	align-items:stretch;
	gap:0;
	height:58px;
	background:#fff;
	border:1px solid #D4DEEA;
	border-radius:15px;
	box-shadow:0 8px 22px rgba(7,19,33,.16);
	overflow:hidden;
	transition:border-color .14s ease,box-shadow .14s ease;
}
.home-hero-iplookup-row:focus-within{
	border-color:var(--blue);
	box-shadow:0 0 0 3px rgba(37,99,235,.18),0 8px 22px rgba(7,19,33,.16);
}
.home-hero-iplookup-input{
	flex:1;
	min-width:0;
	height:auto;
	background:transparent;
	border:0;
	border-radius:0;
	padding:0 14px 0 18px;
	font:400 16px var(--font-mono);
	color:var(--ink);
}
.home-hero-iplookup-input::placeholder{
	font-family:var(--font-mono);
	font-weight:400;
	color:#8A97A8;
}
.home-hero-iplookup-input:focus-visible{outline:0}
.home-hero-iplookup-btn{
	flex:none;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	min-width:158px;
	height:auto;
	background:transparent;
	color:var(--navy);
	border:0;
	border-left:1px solid #D8E2EE;
	border-radius:0;
	padding:0 20px;
	font-weight:600;
	font-size:14px;
	transition:background .14s ease;
}
.home-hero-iplookup-btn::after{
	content:"\2192";
	font-size:15px;
	line-height:1;
	transition:transform .14s ease;
}
.home-hero-iplookup-btn:hover{
	background:#EEF3FB;
	color:var(--navy);
	border-left-color:#D8E2EE;
}
.home-hero-iplookup-btn:hover::after{transform:translateX(2px)}
.home-hero-iplookup-btn:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

@media(max-width:768px){
	.home-hero-iplookup-row{flex-direction:row;height:58px}
	.home-hero-iplookup-btn{height:auto}
}
@media(max-width:520px){
	.home-hero-iplookup{max-width:100%}
	.home-hero-iplookup-row{flex-direction:column;height:auto;overflow:visible}
	.home-hero-iplookup-input{height:48px;border-bottom:1px solid #D8E2EE}
	.home-hero-iplookup-btn{width:100%;min-width:0;height:46px;border-left:0;justify-content:center}
	.home-hero-iplookup-row:focus-within{box-shadow:0 8px 22px rgba(7,19,33,.16)}
}
@media(prefers-reduced-motion:reduce){
	.home-hero-ctas .home-btn-primary,
	.home-hero-ctas .home-btn-primary::after,
	.home-hero-iplookup-row,
	.home-hero-iplookup-btn,
	.home-hero-iplookup-btn::after{transition:none}
	.home-hero-ctas .home-btn-primary:hover{transform:none}
}

/* ==========================================================================
   HOME-HERO-V3.2 - balanced 50/50 premium hero. Equal editorial (left) and
   Network Location Surface (right) columns; the reused first-party
   Natural-Earth globe is a premium element CONTAINED in the right half, not
   a full-bleed map. assets/js/home.js drives #cc-globe-marker from /v1/me
   location.latitude/longitude - JS UNCHANGED. No external map/library/
   request, no gradient blob. Tokens only. Source of truth for the hero;
   overrides the V3 base + UX2-D + UX2-E1 hero rules above.
   ========================================================================== */

.home-hero{padding:84px 0 40px}
.home-hero-motif{opacity:.55}
.home-hero-motif-line{stroke:rgba(255,255,255,.045)}

/* true 50 / 50 - engages only when there is room (see the <=1100 stack) */
.home-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:start}
/* optical vertical balance: nudge the shorter left group toward the panel's mid */
.home-hero-primary{min-width:0;margin-top:clamp(2px,1.3vw,18px)}

.home-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:#93A9CC;margin-bottom:18px}
.home-eyebrow .dot{width:7px;height:7px;background:var(--teal);box-shadow:0 0 0 4px rgba(15,143,131,.16)}

.home-hero-primary h1{font-size:clamp(33px,3.4vw,48px);line-height:1.08;letter-spacing:-.015em;color:#fff;margin:0 0 15px}
.home-lede{font-size:15px;line-height:1.58;color:#B7C4D8;max-width:47ch;margin:0 0 16px}

/* Primary CTA - precise, content-width */
.home-hero-ctas{gap:14px}
.home-hero-ctas .home-btn-primary{height:49px;padding:0 18px;gap:8px;border-radius:10px;font-size:13.5px;font-weight:700;letter-spacing:0;background:var(--blue);border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 20px -8px rgba(7,19,33,.5);transition:background .14s ease,transform .14s ease,box-shadow .14s ease}
.home-hero-ctas .home-btn-primary::after{content:"\2192";font-size:15px;line-height:1;transition:transform .14s ease}
.home-hero-ctas .home-btn-primary:hover{background:#3B7BF0;transform:translateY(-1px);box-shadow:0 12px 26px -8px rgba(7,19,33,.55)}
.home-hero-ctas .home-btn-primary:hover::after{transform:translateX(3px)}
.home-hero-ctas .home-btn-primary:active{transform:translateY(0)}
.home-hero-ctas .home-btn-primary:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

/* Secondary utility - clearly secondary to the primary CTA */
.home-hero-iplookup{margin:20px 0 0;max-width:420px}
.home-hero-iplookup-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;color:#8296B3;margin:0 0 8px}
.home-hero-iplookup-row{display:flex;align-items:stretch;gap:0;height:50px;background:#fff;border:1px solid #C9D5E3;border-radius:11px;box-shadow:0 4px 14px -6px rgba(7,19,33,.24);overflow:hidden;transition:border-color .14s ease,box-shadow .14s ease}
.home-hero-iplookup-row:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.16)}
.home-hero-iplookup-input{flex:1;min-width:0;height:auto;background:transparent;border:0;border-radius:0;padding:0 12px 0 15px;font:400 14px var(--font-mono);color:var(--ink)}
.home-hero-iplookup-input::placeholder{font-family:var(--font-mono);font-weight:400;color:#94A0B1}
.home-hero-iplookup-input:focus-visible{outline:0}
.home-hero-iplookup-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;height:auto;background:#F1F5FA;color:var(--navy);border:0;border-left:1px solid #DCE5EF;border-radius:0;padding:0 15px;font-weight:600;font-size:12.5px;transition:background .14s ease}
.home-hero-iplookup-btn::after{content:"\2192";font-size:14px;line-height:1;transition:transform .14s ease}
.home-hero-iplookup-btn:hover{background:#E6EDF6;color:var(--navy)}
.home-hero-iplookup-btn:hover::after{transform:translateX(2px)}
.home-hero-iplookup-btn:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

/* ================= Right: one Network Location Surface ================= */
.home-hero-console{max-width:none;min-width:0}
.home-hero .connection-console{background:#0B1E34;border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:4px 22px 16px;box-shadow:0 24px 58px -28px rgba(0,0,0,.6)}
.home-hero .connection-console-head{margin:0;padding:14px 0 12px;border-bottom:1px solid rgba(255,255,255,.08);align-items:center}
.home-hero .connection-console-title{font:700 11.5px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:#93A9CC}
.home-hero .connection-console-status{display:inline-flex;align-items:center;gap:7px;font:700 10px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#8296B3;background:none;border:0;border-radius:0;padding:0}
.home-hero .connection-console-status::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:#5C708C}
.home-hero .connection-console-v3.is-detected .connection-console-status{color:#8FE3D9;background:none;border:0;padding:0}
.home-hero .connection-console-v3.is-detected .connection-console-status::before{background:#4FD1C0;box-shadow:0 0 0 3px rgba(79,209,192,.16)}

.home-hero #connection-body{gap:0;padding:0;display:block}

/* globe: a contained premium element, ~24% smaller than V3.1 */
.home-hero .cc-map{padding:10px 0 2px;text-align:center}
.home-hero .cc-earth{display:block;width:100%;max-width:clamp(198px,18vw,261px);height:auto;margin:0 auto;filter:drop-shadow(0 14px 34px rgba(37,99,235,.22))}
.home-hero .cc-map-cap{display:block;margin-top:2px;font:700 9px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:#63788F}

/* metadata band: one shared keyline strip, never cards - MUST stay above the fold */
.home-hero .cc-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
.home-hero .cc-fact{display:flex;flex-direction:column;gap:7px;min-width:0;padding:0 18px}
.home-hero .cc-fact:first-child{padding-left:0}
.home-hero .cc-fact:last-child{padding-right:0}
.home-hero .cc-fact + .cc-fact{border-left:1px solid rgba(255,255,255,.09)}
.home-hero .cc-fact .connection-field-label{font:700 9px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:#7C90AB;margin:0}
.home-hero .cc-fact .connection-field-value{font:700 16px var(--font-mono);color:#fff;letter-spacing:-.01em;overflow-wrap:anywhere}
.home-hero .cc-asn{overflow-wrap:anywhere}
.home-hero .cc-asn:empty{display:none}
.home-hero .cc-fact-sub{font:600 11.5px var(--font-mono);color:#B4C3D8;letter-spacing:0;overflow-wrap:anywhere}
.home-hero .connection-console-geo-note{margin:0;text-transform:none;letter-spacing:0}
.home-hero .connection-console-v3:not(.is-detected) .connection-field-value{color:#63789A}

.home-hero .connection-country-value{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0}
.home-hero .connection-country-flag{width:18px;height:13px;flex:none;margin-right:7px;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.home-hero .connection-city-field{display:inline}
.home-hero .connection-city-field[hidden]{display:none}
.home-hero .connection-city-field::after{content:",\00a0"}

.home-hero .connection-console-error{margin:12px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:#C4D0E0}

/* -------- tablet / stacked: single column below 1100 -------- */
@media(max-width:1100px){
	.home-hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
	.home-hero-primary{display:contents}
	.home-eyebrow{order:1}
	.home-hero-primary h1{order:2;max-width:18ch}
	.home-lede{order:3;max-width:60ch}
	.home-hero-ctas{order:4;margin-bottom:28px}
	.home-hero-console{order:5;max-width:560px;margin-bottom:24px}
	.home-hero-iplookup{order:6;max-width:420px;margin-top:0}
}
@media(max-width:768px){
	.home-hero{padding:86px 0 30px}
	.home-hero-primary h1{font-size:clamp(25px,7vw,32px);max-width:none}
	.home-hero-primary h1 br{display:none}
	.home-hero-ctas .home-btn-primary{width:100%}
	.home-hero-console{max-width:100%}
	.home-hero-iplookup{max-width:100%}
	.home-hero .cc-earth{max-width:252px}
}
@media(max-width:560px){
	.home-hero .cc-facts{grid-template-columns:1fr}
	.home-hero .cc-fact{padding:12px 0;gap:6px}
	.home-hero .cc-fact:first-child{padding-top:12px}
	.home-hero .cc-fact + .cc-fact{border-left:0;border-top:1px solid rgba(255,255,255,.08)}
	.home-hero .cc-earth{max-width:223px}
}
@media(prefers-reduced-motion:reduce){
	.home-hero-ctas .home-btn-primary,
	.home-hero-ctas .home-btn-primary::after,
	.home-hero-iplookup-row,
	.home-hero-iplookup-btn,
	.home-hero-iplookup-btn::after{transition:none}
	.home-hero-ctas .home-btn-primary:hover{transform:none}
}

/* ==========================================================================
   Connection explorer: interactive globe -> approximate network-location view.
   State classes on #connection-console (globe / transitioning / location /
   returning). No map library, no new request; the globe + marker are untouched.
   ========================================================================== */
.home-hero .cc-explore{position:relative}
.home-hero .cc-explore-trigger{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:0;border:0;background:none;cursor:pointer;appearance:none;-webkit-appearance:none}
.home-hero .cc-explore-trigger[hidden]{display:none}
.home-hero .cc-explore-trigger:focus-visible{outline:3px solid var(--teal);outline-offset:-3px;border-radius:16px}
.home-hero .cc-explore .cc-earth{transition:transform .3s ease,opacity .3s ease,filter .18s ease}
.home-hero .cc-explore-trigger:hover ~ .cc-map .cc-earth,
.home-hero .cc-explore-trigger:focus-visible ~ .cc-map .cc-earth{filter:drop-shadow(0 16px 36px rgba(79,209,192,.36))}
.home-hero .cc-explore-hint{position:absolute;left:50%;bottom:26px;z-index:3;transform:translateX(-50%) translateY(4px);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;pointer-events:none;font:700 9px var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:#8CF7E9;background:rgba(8,20,34,.85);border:1px solid rgba(79,209,192,.32);border-radius:999px;padding:5px 11px;opacity:0;transition:opacity .16s ease,transform .16s ease}
.home-hero .cc-explore-trigger:hover ~ .cc-explore-hint,
.home-hero .cc-explore-trigger:focus-visible ~ .cc-explore-hint{opacity:1;transform:translateX(-50%) translateY(0)}
.home-hero .cc-explore-trigger[hidden] ~ .cc-explore-hint{display:none}

.home-hero .connection-console.is-transitioning .cc-earth{transform:scale(1.1);opacity:0}

.home-hero .cc-loc{display:none}
.home-hero .connection-console.is-exploring .cc-explore-trigger,
.home-hero .connection-console.is-exploring .cc-map,
.home-hero .connection-console.is-exploring .cc-explore-hint{display:none}
.home-hero .connection-console.is-exploring .cc-loc{display:block;animation:ccLocIn .42s ease both}
@keyframes ccLocIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.home-hero .connection-console.is-returning .cc-map{animation:ccFadeIn .32s ease both}
@keyframes ccFadeIn{from{opacity:0}to{opacity:1}}

.home-hero .cc-loc-bar{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;padding:6px 0 10px}
.home-hero .cc-loc-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:3px 2px;margin:0;cursor:pointer;font:700 11px var(--font-mono);letter-spacing:.03em;color:#8FB6EE}
.home-hero .cc-loc-back:hover{color:#fff}
.home-hero .cc-loc-back:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}
.home-hero .cc-loc-eyebrow{font:700 9px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:#63788F}
.home-hero .cc-loc-map{max-width:380px;margin:2px auto 0;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#0A1B2E}
.home-hero .cc-loc-map svg{display:block;width:100%;height:auto}
.home-hero .cc-loc-place{margin:13px 0 0;font:700 17px var(--font-mono);color:#fff;letter-spacing:-.01em;overflow-wrap:anywhere}
.home-hero .cc-loc-note{margin:5px 0 0;font:600 11.5px var(--font-mono);color:#B4C3D8;letter-spacing:0}
.home-hero .cc-loc-note-sub{margin-top:7px;font-weight:400;line-height:1.5;color:#7C90AB}

@media(max-width:560px){
	.home-hero .cc-loc-place{font-size:15px}
	.home-hero .cc-explore-hint{font-size:8px;bottom:10px;letter-spacing:.06em}
}
@media(prefers-reduced-motion:reduce){
	.home-hero .cc-explore .cc-earth,
	.home-hero .cc-explore-hint,
	.home-hero .cc-loc-back{transition:none}
	.home-hero .connection-console.is-transitioning .cc-earth{transform:none;opacity:1}
	.home-hero .connection-console.is-exploring .cc-loc,
	.home-hero .connection-console.is-returning .cc-map{animation:none}
}
/* ==========================================================================
   Phase 3.4 — Homepage Network Location Explorer (ccx-*). Lives inside the
   Connection Console; shown only when #connection-console.is-exploring.
   Geography DOM is built lazily by home.js on first activation.
   ========================================================================== */
.home-hero .ccx{display:none;margin:2px 0 0}
.home-hero .connection-console.is-exploring .cc-facts,
.home-hero .connection-console.is-exploring .cc-map,
.home-hero .connection-console.is-exploring .cc-explore-trigger,
.home-hero .connection-console.is-exploring .cc-explore-hint{display:none}
.home-hero .connection-console.is-exploring .ccx{display:block;animation:ccLocIn .42s ease both}

.home-hero .ccx-bar{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;padding:6px 0 9px}
.home-hero .ccx-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 2px;margin:0;cursor:pointer;font:700 11px var(--font-mono);letter-spacing:.03em;color:#8FB6EE;min-height:40px}
.home-hero .ccx-back:hover{color:#fff}
.home-hero .ccx-back:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}
.home-hero .ccx-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:3px 5px;font:700 10.5px var(--font-mono);color:#7E93B4}
.home-hero .ccx-crumbs[hidden]{display:none}
.home-hero .ccx-crumb{padding:4px 6px;font:inherit;color:#7E93B4;background:none;border:1px solid transparent;border-radius:5px;cursor:pointer}
.home-hero .ccx-crumb:hover{color:#fff;background:rgba(255,255,255,.06)}
.home-hero .ccx-crumb:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.home-hero .ccx-crumb[aria-current="true"]{color:#EAF1FA;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.home-hero .ccx-crumb-sep{color:#55708F}

.home-hero .ccx-stage{position:relative;border:1px solid #24375A;border-radius:12px;overflow:hidden;background:#050C16}
.home-hero .ccx-map{display:block;width:100%;height:auto;aspect-ratio:2/1}
.home-hero .ccx-ocean{fill:#050C16}
.home-hero .ccx-grid{transition:opacity .45s ease}
.home-hero .ccx-grid line{stroke:#6E86A8;stroke-opacity:.09;stroke-width:.4}
.home-hero .ccx-map[data-geo^="country"] .ccx-grid{opacity:.45}
.home-hero .ccx-map[data-geo^="region"] .ccx-grid,
.home-hero .ccx-map[data-geo^="local"] .ccx-grid{opacity:0}

.home-hero .ccx-geo{transition:opacity .55s ease}
.home-hero .ccx-geo path{vector-effect:non-scaling-stroke}
.home-hero .ccx-geo-world path{fill:#18243C;stroke:#33507C;stroke-opacity:.55;stroke-width:.6;stroke-linejoin:round}
.home-hero .ccx-geo-country path{fill:#1F3255;fill-opacity:.58;stroke:#5B79A6;stroke-opacity:.95;stroke-width:.9;stroke-linejoin:round}
.home-hero .ccx-geo-local path{fill:none;stroke:#86A6D0;stroke-opacity:1;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.home-hero .ccx-geo-ma-rivers path{stroke:#3E5C89;stroke-opacity:.8;stroke-width:.7}
.home-hero .ccx-geo-country,
.home-hero .ccx-geo-local{opacity:0}
.home-hero .ccx-map[data-geo="world"] .ccx-geo-world{opacity:1}
.home-hero .ccx-map[data-geo^="country"] .ccx-geo-world{opacity:.22}
.home-hero .ccx-map[data-geo^="region"] .ccx-geo-world,
.home-hero .ccx-map[data-geo^="local"] .ccx-geo-world{opacity:.15}
.home-hero .ccx-map[data-geo="country-ma"] .ccx-geo-ma,
.home-hero .ccx-map[data-geo="region-ma"] .ccx-geo-ma,
.home-hero .ccx-map[data-geo="local-ma"] .ccx-geo-ma{opacity:1}
.home-hero .ccx-map[data-geo="country-us"] .ccx-geo-us{opacity:1}
.home-hero .ccx-map[data-geo="country-us"] .ccx-geo-us path{fill-opacity:.66}
.home-hero .ccx-map[data-geo="region-ma"] .ccx-geo-ma-rivers,
.home-hero .ccx-map[data-geo="local-ma"] .ccx-geo-ma-rivers{opacity:1}
.home-hero .ccx-map[data-geo="region-ma"] .ccx-geo-ma-local{opacity:.55}
.home-hero .ccx-map[data-geo="local-ma"] .ccx-geo-ma-local{opacity:1}
/* deep zoom: local 10m coastline is the authoritative line; suppress the 50m
   national coastline stroke (keep the land fill) so there is ONE coastal read. */
.home-hero .ccx-map[data-geo="local-ma"] .ccx-geo-ma path{fill-opacity:.42;stroke:none}

.home-hero .ccx-halo{fill:var(--teal);fill-opacity:.16;stroke:none}
.home-hero .ccx-halo-broad{fill-opacity:.08}
.home-hero .ccx-halo-country{fill-opacity:.06}
.home-hero .ccx-area{transition:opacity .55s ease}
.home-hero .ccx-node-halo{fill:var(--teal);fill-opacity:.16;stroke:none}
.home-hero .ccx-node{fill:#86E8DC}
.home-hero .ccx-node.is-faint{fill-opacity:.55}

.home-hero .ccx-labels{opacity:0;transition:opacity .4s ease}
.home-hero .ccx-map[data-geo^="region"] .ccx-labels,
.home-hero .ccx-map[data-geo^="local"] .ccx-labels,
.home-hero .ccx-map[data-geo="country-us"] .ccx-labels{opacity:1}
.home-hero .ccx-city-label{fill:#E4F2EE;font-family:var(--font-mono);font-weight:600;letter-spacing:.03em;paint-order:stroke;stroke:#08131F;stroke-width:2.4;stroke-opacity:.72;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.home-hero .ccx-ref-label{fill:#9FB6D6;fill-opacity:.82;font-family:var(--font-mono);font-weight:500;letter-spacing:.02em;paint-order:stroke;stroke:#0A1520;stroke-width:2;stroke-opacity:.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.home-hero .ccx-ocean-label{fill:#55708F;font-family:var(--font-mono);font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.home-hero .ccx-country-label{fill:#7C97BE;fill-opacity:.7;font-family:var(--font-mono);font-weight:700;letter-spacing:.28em;text-transform:uppercase}

.home-hero .ccx-status{position:absolute;left:0;right:0;bottom:0;margin:0;padding:8px 12px;font:600 11px var(--font-mono);letter-spacing:.02em;color:#9DB1CE;background:linear-gradient(to top,rgba(5,12,22,.92),rgba(5,12,22,0))}
.home-hero .ccx-status[hidden]{display:none}

.home-hero .ccx-panel{margin:14px 0 0}
.home-hero .ccx-panel[hidden]{display:none}
.home-hero .ccx-place{margin:0;font:700 clamp(18px,2vw,22px)/1.15 var(--font-mono);letter-spacing:-.01em;color:#fff;overflow-wrap:anywhere}
.home-hero .ccx-place-sub{margin:4px 0 0;font:600 12.5px var(--font-mono);color:#B4C3D8;overflow-wrap:anywhere}
.home-hero .ccx-place-sub[hidden]{display:none}
.home-hero .ccx-metrics{display:flex;flex-wrap:wrap;gap:12px 34px;margin:12px 0 0}
.home-hero .ccx-metric{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:3px;margin:0}
.home-hero .ccx-metric[hidden]{display:none}
.home-hero .ccx-metric-value{margin:0;font:700 15px var(--font-mono);color:#EAF1FA}
.home-hero .ccx-metric-value.ccx-mono{font-size:13px}
.home-hero .ccx-metric-label{font:600 9px var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:#7E93B4}
.home-hero .ccx-note{margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);font:400 11.5px/1.55 var(--font-mono);color:#8DA0BC}

@media(max-width:560px){
	.home-hero .ccx-map{aspect-ratio:3/2}
	.home-hero .ccx-metrics{gap:12px 22px}
}
@media(prefers-reduced-motion:reduce){
	.home-hero .ccx-geo,
	.home-hero .ccx-grid,
	.home-hero .ccx-labels,
	.home-hero .ccx-area{transition:none}
	.home-hero .connection-console.is-exploring .ccx{animation:none}
}
