/* =====================================================================
   Innovate-Ops / IoT Octopus — shared site stylesheet
   Design tokens matched 1:1 to the customer portal (Google Material / Google Sans)
   Used by every page. Do not fork per-page styles; add shared components here.
   ===================================================================== */
:root{
  /* Google-blue brand ramp (identical to portal) */
  --blue:#0b57d0; --blue2:#1a73e8; --blue3:#4285f4;
  --bg:#eef3fc; --surface:#f6f9ff; --card:#fff; --tonal:#e7eefb;
  --ink:#1a1c1e; --muted:#5f6b7d; --line:#dce4f1;
  --green:#1e8e3e; --greenbg:#e6f4ea; --yellow:#e37400; --yellowbg:#fef7e0;
  --red:#d93025; --redbg:#fce8e6; --purple:#6c4bd1; --purplebg:#ede7f6;
  --shadow:0 1px 2px rgba(11,40,102,.08),0 4px 16px rgba(11,40,102,.08);
  --shadow2:0 2px 6px rgba(11,40,102,.12),0 10px 34px rgba(11,40,102,.14);
  /* dark "intelligence" band */
  --dark:#091a36; --dark2:#0c2348; --darkline:#1c3a66;
  --r:24px; --r2:16px; --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Google Sans","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.55;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
/* W2A-FOCUS: keyboard focus ring (AA) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:84px 0}
h1,h2,h3,h4{letter-spacing:-.02em;font-weight:600}
h2{font-size:clamp(28px,3.4vw,40px);line-height:1.15}
h1.hh{font-size:clamp(28px,3.4vw,40px);line-height:1.15} /* R11: promoted hero headlines */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue2)}
.eyebrow.l{color:var(--blue3)}
.lead{font-size:18px;color:var(--muted);max-width:680px}
.center{text-align:center;max-width:740px;margin:0 auto 50px}
.center .lead{margin:14px auto 0}
.muted{color:var(--muted)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:13px 24px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;transition:.16s}
.btn.blue{background:var(--blue);color:#fff}
.btn.blue:hover{filter:brightness(1.06);box-shadow:var(--shadow2);transform:translateY(-1px)}
.btn.tonal{background:var(--tonal);color:var(--blue)}
.btn.tonal:hover{filter:brightness(.98);box-shadow:var(--shadow)}
.btn.ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28)}
.btn.ghost:hover{background:rgba(255,255,255,.2)}
.btn.white{background:#fff;color:var(--blue)}
.btn.white:hover{box-shadow:var(--shadow2);transform:translateY(-1px)}
.btn.sm{padding:9px 16px;font-size:13.5px}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
.brand{display:flex;align-items:center;gap:11px;cursor:pointer}
.brand .logo{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--blue2));display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:var(--shadow);color:#fff}
.brand .logo img{width:26px;height:26px;object-fit:contain;display:block}
.brand h1,.brand .bname{font-size:16.5px;font-weight:600;line-height:1.1}
.brand p{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:1.4px;margin-top:1px}
.menu{display:flex;gap:4px;align-items:center}
.menu a{color:var(--ink);font-size:14.5px;font-weight:500;padding:8px 13px;border-radius:999px;transition:.15s}
.menu a:hover,.menu a.on{background:var(--surface);color:var(--blue)}
.nav-cta{display:flex;gap:9px;align-items:center}
.login-link{color:var(--blue);font-weight:600;font-size:14.5px;padding:9px 14px;border-radius:999px}
.login-link:hover{background:var(--tonal)}
.burger{display:none;background:none;border:0;font-size:24px;cursor:pointer;color:var(--ink);line-height:1}
/* W-MOBTAP: 44x44 minimum touch target for the burger when it is shown */
.burger{width:44px;height:44px;align-items:center;justify-content:center;margin-right:-8px;border-radius:12px}
.burger:active{background:var(--surface)}
.mobile-menu{display:none;flex-direction:column;gap:2px;padding:8px 16px 16px;background:#fff;border-bottom:1px solid var(--line)}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:11px 12px;border-radius:12px;font-weight:500;font-size:15px}
.mobile-menu a:hover{background:var(--surface);color:var(--blue)}
.mobile-menu .btn{margin-top:8px;justify-content:center}

/* ---------- generic page hero (interior pages) ---------- */
.page-hero{background:radial-gradient(900px 420px at 80% -10%,#e3edff,transparent),var(--surface);padding:74px 0 60px;border-bottom:1px solid var(--line)}
.page-hero h2,.page-hero h1{font-size:clamp(30px,4vw,46px);line-height:1.08}
.page-hero h2 .g,.page-hero h1 .g{background:linear-gradient(120deg,var(--blue),var(--blue3));-webkit-background-clip:text;background-clip:text;color:transparent}
.page-hero .lead{margin-top:18px}
.page-hero .hero-cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}

/* ---------- status pills (portal parity) ---------- */
.pillc{font-size:11px;font-weight:600;padding:3px 11px;border-radius:999px;display:inline-flex;gap:5px;align-items:center}
.pillc.g{background:var(--greenbg);color:var(--green)} .pillc.y{background:var(--yellowbg);color:var(--yellow)} .pillc.r{background:var(--redbg);color:var(--red)} .pillc.b{background:var(--tonal);color:var(--blue)} .pillc.p{background:var(--purplebg);color:var(--purple)}

/* ---------- cards / grids ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;transition:.18s}
.card.hov:hover{box-shadow:var(--shadow2);transform:translateY(-4px);border-color:#c4d5f5}
.card .ic{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:18px;background:var(--tonal)}
.card h3{font-size:20px;margin-bottom:9px}
.card p{font-size:15px;color:var(--muted)}
.feature-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:14px}
.feature-list li{font-size:14px;display:flex;gap:9px;align-items:flex-start;color:#3c4a5c}
.feature-list li::before{content:'';width:7px;height:7px;border-radius:50%;margin-top:7px;flex:0 0 auto;background:var(--blue2)}

/* surfaces */
.s-surface{background:var(--surface)}
.s-white{background:#fff}
.s-bg{background:var(--bg)}

/* ---------- dark band ---------- */
.band-dark{background:var(--dark);color:#fff}
.band-dark .eyebrow{color:#7fb0ff}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark .lead{color:#a9c0e0}
.dcard{background:var(--dark2);border:1px solid var(--darkline);border-radius:14px;padding:18px 18px}
.dcard b{color:#eaf2ff} .dcard small,.dcard p{color:#90aacb}
/* W2A-HOVERLIFT: GPU-only card lift, pointer devices only */
@media(hover:hover){
  .sigcard,.dcard{transition:transform .18s ease,box-shadow .18s ease}
  .sigcard:hover,.dcard:hover{transform:translateY(-3px);box-shadow:var(--shadow2)}
}

/* ---------- portal-style mini shot (sanitized previews) ---------- */
.shot{background:var(--bg);border-radius:var(--r);box-shadow:var(--shadow2);border:1px solid var(--line);padding:16px}
.shot .topbar{display:flex;align-items:center;gap:8px;margin-bottom:13px;font-size:12.5px;font-weight:600;color:var(--muted)}
.shot .topbar .o{width:24px;height:24px;border-radius:8px;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px}
.shot-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 15px;margin-bottom:10px}
.shot-card .h{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:9px}
.minirow{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--surface);font-size:13px}
.minirow:last-child{border:0}.minirow .rt{margin-left:auto}
.rec{display:flex;gap:10px;align-items:flex-start;font-size:13px}
.rec .b{width:7px;height:7px;border-radius:50%;background:var(--blue2);margin-top:6px;flex:0 0 auto}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:22px 18px;position:relative}
.step .n{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.step .ic{font-size:24px;margin:13px 0 9px}
.step h4{font-size:15.5px;margin-bottom:6px}
.step p{font-size:13px;color:var(--muted)}

/* ---------- forms ---------- */
.form{display:flex;flex-direction:column;gap:4px}
.form label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:12px}
.form input,.form select,.form textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;font-size:14.5px;font-family:inherit;margin-top:6px;background:var(--surface)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--blue3);border-color:var(--blue3)}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .ok{color:var(--green);font-size:13.5px;margin-top:10px;font-weight:600}
.form .err{color:var(--red);font-size:13px;margin-top:8px}

/* ---------- video / media placeholder ---------- */
.media-slot{position:relative;border-radius:var(--r);overflow:hidden;background:linear-gradient(135deg,#0c2348,#143058);border:1px solid var(--darkline);aspect-ratio:16/10;min-height:300px;display:flex;align-items:center;justify-content:center} /* W2A-MEDIA-RATIO: fixed ratio = zero CLS when real media lands */
.media-slot .play{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-size:26px;color:#fff;cursor:pointer;transition:.2s}
.media-slot .play:hover{background:rgba(255,255,255,.28);transform:scale(1.05)}
.media-slot .cap{position:absolute;bottom:14px;left:16px;font-size:12px;color:#9cc2ff;font-weight:600}
.media-note{font-size:11.5px;color:var(--muted);margin-top:10px;text-align:center}

/* ---------- CTA band ---------- */
.cta{background:linear-gradient(120deg,var(--blue),var(--blue2) 60%,var(--blue3));color:#fff;text-align:center}
.cta h2{color:#fff}
.cta .lead{color:#dbe8ff;margin:14px auto 28px}
.cta .hero-cta{justify-content:center;display:flex;gap:12px;flex-wrap:wrap}

/* ---------- footer ---------- */
footer.site{background:#06122a;color:#8ba2c4;padding:58px 0 28px;font-size:14px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
.footbrand .brand h1,.footbrand .brand .bname{color:#fff}.footbrand .brand p{color:#7f97b8}
.footbrand p.desc{max-width:300px;margin-top:14px;color:#8ba2c4}
footer.site h5{color:#dce8fb;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
footer.site a{display:block;color:#8ba2c4;margin-bottom:9px}
footer.site a:hover{color:#fff}
.fbottom{border-top:1px solid #14264a;margin-top:38px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:#7f97b8}
.fbottom a{display:inline;color:#8ba2c4;margin:0;text-decoration:underline;text-underline-offset:2px}
.fbottom a:hover{color:#fff}

/* ---------- preview note bar ---------- */
.note{background:var(--yellowbg);border-bottom:1px solid #f5e08c;color:#7a5c00;font-size:13px;padding:9px 18px;text-align:center}

/* ---------- scroll reveal & animation ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{animation:none!important;transition:none!important}
  .card.hov:hover,.sigcard:hover,.dcard:hover,.btn:hover{transform:none!important}
  .float-tag{opacity:1!important;transform:none!important}
  .hp-kpis .hp-kpi{opacity:1!important}
  .heroback path{stroke-dashoffset:0!important}
}

/* hero data-line animation */
@keyframes dash{to{stroke-dashoffset:0}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.13);opacity:0}}
@keyframes lineglow{0%,100%{opacity:var(--lo,.5)}50%{opacity:calc(var(--lo,.5) + .12)}}
@keyframes tagrise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes kpipop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* float-tag: entrance (once) then idle float (infinite, delayed past entrance) */
.float-tag{opacity:0;animation:tagrise .5s ease forwards,floaty 6s ease-in-out infinite;animation-delay:.5s,.95s}
.float-tag.t2{animation-delay:1.1s,1.55s}

/* ---------- hero entrance choreography (load-triggered, GPU-only) ---------- */
.hero-rise{opacity:0;transform:translateY(16px);
  transition:opacity .56s cubic-bezier(.22,.61,.36,1),transform .56s cubic-bezier(.22,.61,.36,1)}
.hero-stage.in .hero-rise{opacity:1;transform:none}
.hero-stage.in .hero-rise:nth-child(1){transition-delay:0ms}
.hero-stage.in .hero-rise:nth-child(2){transition-delay:90ms}
.hero-stage.in .hero-rise:nth-child(3){transition-delay:180ms}
.hero-stage.in .hero-rise:nth-child(4){transition-delay:280ms}
@media(prefers-reduced-motion:reduce){.hero-rise{opacity:1;transform:none;transition:none}}

/* ---------- page-hero living-data glow (opt-in via .live) ---------- */
.page-hero.live{position:relative;overflow:hidden}
.page-hero.live > .wrap{position:relative;z-index:1}
.page-hero.live::after{content:'';position:absolute;inset:-20% -10% auto -10%;height:140%;
  pointer-events:none;z-index:0;
  background:radial-gradient(600px 300px at 30% 20%,rgba(66,133,244,.18),transparent 70%),
             radial-gradient(520px 280px at 75% 60%,rgba(26,115,232,.14),transparent 70%);
  animation:heroDrift 24s ease-in-out infinite;will-change:transform,opacity}
@keyframes heroDrift{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.7}
  50%{transform:translate3d(-3%,2%,0) scale(1.06);opacity:1}}
@media(prefers-reduced-motion:reduce){.page-hero.live::after{animation:none;opacity:.8}}

/* ---------- responsive ---------- */
/* Header nav collapses earlier (R6): desktop menu needs ~1150px to fit */
@media(max-width:1160px){
  .menu,.login-link{display:none}
  .burger{display:inline-flex}
}
@media(max-width:980px){
  .grid-3,.grid-4,.steps{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  section{padding:60px 0}
  .grid-3,.grid-4,.steps{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .form .row2{grid-template-columns:1fr}
  .wrap{padding:0 18px}
}
/* W-MOBTAP: comfortable 44px min touch height for small buttons on touch/phones */
@media(max-width:560px){
  .btn.sm{min-height:44px;padding-top:11px;padding-bottom:11px}
}