/* Home hero, "future" concept: Geist headline, a 3D network sphere that travels down
   the page (assets/hero-sphere.js), and the NOC panel as a wide frosted glass panel.
   Font sizes are left to the existing stylesheets on purpose; this file only restyles.
   Geist and Geist Mono are declared in assets/site-footer.css, which every page loads. */

.hero-future{
  --hf-red:#ff3131;--hf-glow:rgba(255,49,49,.35);--hf-ink:#eef0f4;--hf-soft:#c3c8d2;--hf-dim:#8e96a6;
  --hf-line:rgba(255,255,255,.08);--hf-line-2:rgba(255,255,255,.16);
  --hf-display:Geist,"Segoe UI",system-ui,sans-serif;
  --hf-mono:"Geist Mono",ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
}

/* Sphere canvas: sits behind the page and repaints each section's background itself,
   so the sections turn see-through while it runs. Without JS none of this applies. */
.page-sphere{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;background:#0d1012}
body.has-sphere main>section{background-color:transparent!important}

/* Layout: copy on the left with the sphere floating to its right, NOC panel full width below */
body.proper-inspired .hero.hero-future{padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(48px,6vw,80px)}
body.proper-inspired .hero.hero-future::before{display:none}
body.proper-inspired .hero.hero-future::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(var(--hf-line) 1px,transparent 1px),linear-gradient(90deg,var(--hf-line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 75% 55% at 35% 30%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 75% 55% at 35% 30%,#000 20%,transparent 75%);
}
body.proper-inspired .hero.hero-future .hero-grid{display:block}
body.proper-inspired .hero.hero-future .hero-grid>div:first-child{display:flex;flex-direction:column;gap:26px;max-width:780px}
body.proper-inspired .hero.hero-future .hero-grid>div:first-child>*{margin:0}

body.proper-inspired .hero.hero-future .eyebrow{
  display:inline-flex;align-items:center;gap:10px;width:fit-content;padding:7px 14px;border-radius:999px;
  border:1px solid var(--hf-line-2);background:rgba(8,10,14,.6);
  font-family:var(--hf-mono);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--hf-soft);
}
body.proper-inspired .hero.hero-future .eyebrow::before{
  content:"";position:static;flex:none;width:7px;height:7px;border-radius:50%;background:var(--hf-red);animation:hf-ping 1.8s infinite;
}
body.proper-inspired .hero.hero-future h1{
  font-family:var(--hf-display);font-weight:600;line-height:.98;letter-spacing:-.045em;
  max-width:none;color:var(--hf-ink);text-shadow:0 2px 30px rgba(5,6,8,.6);
  animation:hf-rise 1s cubic-bezier(.2,.7,.1,1) both;
}
body.proper-inspired .hero.hero-future h1 span{display:block;color:var(--hf-red);text-shadow:0 0 44px var(--hf-glow);animation:hf-rise 1s .12s cubic-bezier(.2,.7,.1,1) both}
/* Red colour fade across "Always connected." (plain red where text gradients are unsupported) */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  body.proper-inspired .hero.hero-future h1 span{
    width:fit-content;max-width:100%;
    background:linear-gradient(95deg,#ff3131 0%,#ff5446 45%,#ff9470 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    text-shadow:none;filter:blur(0) drop-shadow(0 0 26px rgba(255,49,49,.32));
    animation-name:hf-rise-glow;
  }
}
body.proper-inspired .hero.hero-future .lead{color:var(--hf-soft);max-width:38em}

body.proper-inspired .hero.hero-future .hero-cta{display:flex;flex-wrap:wrap;gap:12px}
body.proper-inspired .hero.hero-future .hero-cta .btn{
  display:inline-flex;align-items:center;min-height:52px;padding:0 24px;border-radius:999px;font-weight:600;
  transition:transform .2s,background .2s,box-shadow .25s;
}
body.proper-inspired .hero.hero-future .hero-cta .btn-primary{background:#dc2626;border-color:#dc2626}
body.proper-inspired .hero.hero-future .hero-cta .btn-primary:hover{background:#c21d1d;border-color:#c21d1d;transform:translateY(-1px);box-shadow:0 0 0 6px rgba(255,49,49,.16),0 14px 44px var(--hf-glow)}
body.proper-inspired .hero.hero-future .hero-cta .btn-ghost{background:rgba(255,255,255,.05);border:1px solid var(--hf-line-2);color:var(--hf-ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
body.proper-inspired .hero.hero-future .hero-cta .btn-ghost:hover{background:rgba(255,255,255,.11)}
body.proper-inspired .hero.hero-future .hero-trust{display:flex;flex-wrap:wrap;gap:10px 24px;color:var(--hf-soft)}
body.proper-inspired .hero.hero-future .hero-trust span{display:inline-flex;align-items:center;gap:9px}
body.proper-inspired .hero.hero-future .hero-trust .check{
  display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;flex:none;line-height:1;
  border:1px solid rgba(255,49,49,.55);background:rgba(255,49,49,.12);color:var(--hf-red);
}

/* NOC panel: wide frosted glass with red corner brackets */
body.proper-inspired .hero.hero-future .noc{
  position:relative;margin-top:clamp(48px,6vw,84px);padding:clamp(16px,2vw,22px);border-radius:18px;
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;
  background:rgba(14,17,24,.62);border:1px solid var(--hf-line-2);box-shadow:0 30px 80px -30px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
}
body.proper-inspired .hero.hero-future .noc::after{
  content:"";position:absolute;inset:-7px;pointer-events:none;
  --b:var(--hf-red);--l:16px;--t:2px;
  background:
    linear-gradient(var(--b),var(--b)) top left/var(--l) var(--t) no-repeat,
    linear-gradient(var(--b),var(--b)) top left/var(--t) var(--l) no-repeat,
    linear-gradient(var(--b),var(--b)) top right/var(--l) var(--t) no-repeat,
    linear-gradient(var(--b),var(--b)) top right/var(--t) var(--l) no-repeat,
    linear-gradient(var(--b),var(--b)) bottom left/var(--l) var(--t) no-repeat,
    linear-gradient(var(--b),var(--b)) bottom left/var(--t) var(--l) no-repeat,
    linear-gradient(var(--b),var(--b)) bottom right/var(--l) var(--t) no-repeat,
    linear-gradient(var(--b),var(--b)) bottom right/var(--t) var(--l) no-repeat;
}
body.proper-inspired .hero.hero-future .noc .brandmark{display:none}
body.proper-inspired .hero.hero-future .noc-top{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin:0;padding:2px 4px 4px}
body.proper-inspired .hero.hero-future .noc-title{display:flex;align-items:center;gap:12px;font-family:var(--hf-display);font-weight:600;letter-spacing:-.02em;color:var(--hf-ink)}
body.proper-inspired .hero.hero-future .noc-sub{font-family:var(--hf-mono);color:var(--hf-dim)}
body.proper-inspired .hero.hero-future .noc-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
body.proper-inspired .hero.hero-future .noc .tile{display:flex;flex-direction:column;gap:6px;padding:16px 16px 14px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--hf-line);box-shadow:none}
body.proper-inspired .hero.hero-future .noc .tile .lbl{font-family:var(--hf-mono);font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--hf-dim)}
body.proper-inspired .hero.hero-future .noc .tile .val{font-family:var(--hf-display);font-weight:600;line-height:1.05;letter-spacing:-.04em;color:var(--hf-ink)}
body.proper-inspired .hero.hero-future .noc .tile #mThreats{color:var(--hf-red);text-shadow:0 0 28px var(--hf-glow)}
body.proper-inspired .hero.hero-future .noc .noc-feed{display:flex;flex-direction:column;gap:6px;margin:0;padding:14px 16px;border-radius:14px;background:rgba(0,0,0,.38);border:1px solid var(--hf-line)}
body.proper-inspired .hero.hero-future .noc .feed-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;font-family:var(--hf-mono);font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--hf-dim)}
body.proper-inspired .hero.hero-future .noc .feed-list{height:auto;min-height:0}
body.proper-inspired .hero.hero-future .noc .feed-list li{display:grid;grid-template-columns:66px 20px minmax(0,1fr);gap:10px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--hf-line);font-family:var(--hf-mono);line-height:1.4;color:var(--hf-soft)}
body.proper-inspired .hero.hero-future .noc .feed-list li:last-child{border-bottom:0}
body.proper-inspired .hero.hero-future .noc .feed-list time{color:var(--hf-dim)}

body.proper-inspired .hero.hero-future .hero-stats .s b{font-family:var(--hf-display);font-weight:600;line-height:1;letter-spacing:-.05em}
body.proper-inspired .hero.hero-future .hero-stats .s span{font-family:var(--hf-mono);letter-spacing:.13em}

@keyframes hf-ping{0%{box-shadow:0 0 0 0 rgba(255,49,49,.6)}100%{box-shadow:0 0 0 9px rgba(255,49,49,0)}}
@keyframes hf-rise{from{opacity:0;transform:translateY(.35em);filter:blur(10px)}}
@keyframes hf-rise-glow{from{opacity:0;transform:translateY(.35em);filter:blur(10px) drop-shadow(0 0 0 rgba(255,49,49,0))}}

@media(max-width:1000px){
  body.proper-inspired .hero.hero-future .noc{grid-template-columns:minmax(0,1fr)}
}
/* Phones: the NOC panel stays hidden, as on the original mobile layout, and the copy gets more air.
   Font sizes are untouched; only spacing, tracking and line height change. */
@media(max-width:860px){
  body.proper-inspired .hero.hero-future .noc{display:none}
}
@media(max-width:480px){
  body.proper-inspired .hero.hero-future .eyebrow{gap:8px;padding:6px 12px;letter-spacing:.05em;border-radius:14px}
  body.proper-inspired .hero.hero-future h1{line-height:1.04;letter-spacing:-.03em}
  body.proper-inspired .hero.hero-future .lead{text-shadow:0 1px 14px rgba(5,6,8,.85)}
}
@media(max-width:359px){
  body.proper-inspired .hero.hero-future .eyebrow{letter-spacing:0;padding-inline:10px}
}
@media(prefers-reduced-motion:reduce){
  body.proper-inspired .hero.hero-future h1,
  body.proper-inspired .hero.hero-future h1 span,
  body.proper-inspired .hero.hero-future .eyebrow::before{animation:none}
}