/* ============================================================
   OUTMATE HOME — global chrome
   (loads AFTER outmate.css; reuses its tokens)
   ============================================================ */

/* the home page manages its own top padding (fixed promobar+nav) */
body.home{ padding-top:0; }
.home .page{ padding-top:0; }

/* ===================== PROMO BAR ===================== */
.promobar{
  position:fixed; top:0; left:0; right:0; z-index:90;
  height:40px; background:var(--ink); color:#fff; overflow:hidden;
  display:flex; align-items:center;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.promobar .pm-track{
  display:flex; align-items:center; gap:0; white-space:nowrap;
  width:max-content; animation:scrollx 36s linear infinite;
}
.promobar:hover .pm-track{ animation-play-state:paused; }
.pm-item{ display:inline-flex; align-items:center; gap:14px; padding:0 28px; font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; }
.pm-item .badge{ background:var(--accent); color:#fff; border-radius:30px; padding:3px 10px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.pm-item .pm-cta{ color:var(--accent); text-transform:uppercase; letter-spacing:.06em; }
.pm-item .sep{ color:rgba(255,255,255,.3); }

/* ===================== NAVBAR ===================== */
.navbar{
  position:fixed; top:40px; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:14px clamp(16px,3vw,36px);
  background:rgba(231,231,231,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:background .3s, box-shadow .3s, padding .3s;
}
.navbar.scrolled{ background:rgba(255,255,255,.9); box-shadow:0 4px 24px rgba(0,0,0,.06); padding-top:10px; padding-bottom:10px; }
.nav-logo{ display:flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:700; font-size:19px; letter-spacing:-.02em; flex:0 0 auto; }
.nav-logo .mk{ width:26px; height:26px; border-radius:7px; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:14px; }
.nav-links{ display:flex; align-items:center; gap:2px; flex:1; justify-content:center; }
.nav-item{ position:relative; }
.nav-trigger{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  background:none; border:0; font-family:var(--mono); font-size:12px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink);
  padding:9px 14px; border-radius:9px; transition:background .2s;
  white-space:nowrap;
}
.nav-trigger:hover{ background:rgba(0,0,0,.05); }
.nav-trigger .chev{ font-size:9px; transition:transform .25s; opacity:.5; }

/* dropdown panel */
.nav-dd{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(8px);
  min-width:330px; background:var(--paper); border:1px solid var(--line-soft);
  border-radius:16px; box-shadow:0 24px 60px -18px rgba(0,0,0,.28);
  padding:10px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease; z-index:95;
}
/* invisible bridge so the cursor can travel from trigger to panel without losing :hover */
.nav-dd::before{
  content:""; position:absolute; left:0; right:0; top:-14px; height:14px;
}
.nav-item:hover .nav-dd,
.nav-dd:hover{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.nav-dd.wide{ min-width:380px; }
.dd-link{ display:flex; gap:13px; align-items:flex-start; padding:12px 14px; border-radius:11px; transition:background .18s; }
.dd-link:hover{ background:var(--paper-2); }
.dd-ico{ width:34px; height:34px; flex:0 0 auto; border-radius:9px; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:var(--mono); font-size:14px; }
.dd-link:hover .dd-ico{ background:var(--accent); }
.dd-txt .t{ font-family:var(--sans); font-weight:700; font-size:14px; letter-spacing:-.01em; line-height:1.2; }
.dd-txt .d{ font-family:var(--body); font-size:12px; color:var(--muted); line-height:1.4; margin-top:3px; }
.nav-cta{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }

/* ===================== MEGA MENU ===================== */
.mega-item{ position:relative; }
.mega-dd{
  position:fixed;
  left:50%; transform:translateX(-50%) translateY(-8px);
  top:calc(40px + 58px); z-index:95;
  background:#F7F7F5;
  border:1px solid var(--line-soft);
  border-radius:20px;
  box-shadow:0 8px 48px -12px rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.06);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
  width:1240px; max-width:96vw;
}
/* click-to-open: panel shows only when its .mega-item has the .open class (toggled in home.js),
   and stays open until the user clicks elsewhere or presses Escape */
.mega-item.open .mega-dd{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.mega-item.open .nav-trigger{ background:rgba(0,0,0,.05); }
.mega-item.open .nav-trigger .chev{ transform:rotate(180deg); }
.mega-inner{
  display:grid; grid-template-columns:repeat(3,255px) 320px;
  padding:24px 44px;
  gap:0;
  border-radius:20px;
  overflow:hidden;
}
.mega-col{ padding:0 16px 0 0; background:#F7F7F5; }
.mega-col:first-child{ padding-left:0; }
.mega-col:last-child{ padding-right:0; }

/* horizontal 5-tile Platform layout (no dividers, desc below) */
.mega-item:has(.mega-inner-row) .mega-dd{ width:1140px; }
.mega-inner-row{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:10px; padding:22px; background:#F7F7F5; border-radius:20px;
}
.mega-tile{
  display:flex; flex-direction:column; gap:10px;
  padding:18px 16px; border-radius:14px; background:#fff;
  border:1px solid var(--line-soft); transition:background .18s, border-color .18s, transform .18s;
}
.mega-tile:hover{ background:var(--ink); border-color:var(--ink); transform:translateY(-2px); }
.mega-tile .mt-ico{
  width:38px; height:38px; border-radius:10px; background:#F1F1F1;
  display:grid; place-items:center; font-family:var(--mono); font-size:17px; color:var(--ink);
  transition:background .18s, color .18s;
}
.mega-tile:hover .mt-ico{ background:var(--accent); color:#fff; }
.mega-tile .mt-t{ font-family:var(--sans); font-weight:700; font-size:14px; letter-spacing:-.01em; line-height:1.15; color:var(--ink); transition:color .18s; }
.mega-tile:hover .mt-t{ color:#fff; }
.mega-tile .mt-d{ font-family:var(--body); font-size:12px; color:var(--muted); line-height:1.4; transition:color .18s; }
.mega-tile:hover .mt-d{ color:rgba(255,255,255,.6); }
@media (max-width:1180px){ .mega-item:has(.mega-inner-row) .mega-dd{ width:96vw; } }

/* flat 5-card horizontal Platform layout */
.mega-item:has(.mega-inner-flat) .mega-dd{ width:1120px; }
.mega-inner-flat{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:10px;
  padding:28px 32px;
  background:#F7F7F5;
}
.mega-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  padding:18px 16px; border-radius:12px;
  text-decoration:none; color:var(--ink);
  background:#fff; border:1px solid var(--line-soft);
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.mega-card:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 12px 28px -14px rgba(0,0,0,.18); }
.mega-card .ml-ico{ width:38px; height:38px; }
.mega-card:hover .ml-ico{ background:var(--accent); color:#fff; }
.mc-t{ font-family:var(--sans); font-weight:700; font-size:14px; letter-spacing:-.01em; line-height:1.2; }
.mc-d{ font-family:var(--body); font-size:12px; color:var(--muted); line-height:1.4; }
@media (max-width:1180px){ .mega-item:has(.mega-inner-flat) .mega-dd{ width:96vw; } }
.mega-col + .mega-col{ border-left:1px solid var(--line-soft); padding-left:clamp(20px,2.6vw,36px); }
.mega-group-label{
  display:block; font-family:var(--mono); font-weight:700; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
  margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--line);
}
.mega-link{
  display:flex; align-items:flex-start; gap:11px;
  padding:11px 10px; border-radius:10px;
  text-decoration:none; color:var(--ink);
  transition:background .18s;
}
.mega-link:hover{ background:var(--paper-2); }
.ml-ico{
  width:32px; height:32px; border-radius:8px; background:#F1F1F1;
  display:grid; place-items:center; font-family:var(--mono); font-size:13px;
  flex:0 0 auto; color:var(--ink); transition:background .18s, color .18s;
}
.mega-link:hover .ml-ico{ background:var(--accent); color:#fff; }
.ml-txt{ display:flex; flex-direction:column; gap:3px; }
.ml-t{ font-family:var(--sans); font-weight:700; font-size:14px; letter-spacing:-.01em; line-height:1.2; }
.ml-d{ font-family:var(--body); font-size:12px; color:var(--muted); line-height:1.35; }

/* dark 4th column */
.mega-col-dark{ background:var(--ink); border-radius:14px; padding:clamp(16px,1.8vw,24px) !important; display:flex; flex-direction:column; gap:14px; border-left:0 !important; }
.mega-col-dark .mega-group-label{ border-bottom-color:rgba(255,255,255,.15); }
.mega-link-dark{ padding:9px 0 !important; border-radius:0 !important; }
.mega-link-dark:hover{ background:none !important; }
.mega-link-dark .ml-t{ color:#fff !important; }
.mega-link-dark .ml-d{ color:rgba(255,255,255,.5) !important; }
.mega-cta-strip{ margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.12); }

/* stats in dark col */
.mega-stat{ display:flex; flex-direction:column; gap:4px; }
.ms-n{ font-family:var(--sans); font-weight:700; font-size:clamp(22px,2.2vw,30px); letter-spacing:-.03em; color:var(--accent); line-height:.9; }
.ms-l{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.5); }

/* scrolled state offset — kept as no-op */
.navbar.scrolled .mega-dd{ top:calc(100% + 8px); }
/* mobile nav */
.nav-burger{ display:none; border:0; cursor:pointer; flex-direction:column; gap:5px; padding:8px; background:none; }
.nav-burger span{ display:block; width:24px; height:2px; border-radius:2px; background:var(--ink); transition:transform .3s ease, opacity .25s ease; }
.nav-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-menu{ display:none; }

@media (max-width:1080px){
  .nav-links{ display:none; }
  .nav-cta .btn.demo{ display:none; }
  .nav-cta .pill{ display:none; }
  .nav-burger{ display:flex; }
  .mobile-menu{
    display:block; position:fixed; inset:104px 0 0 0; z-index:85;
    background:var(--paper); padding:24px; overflow-y:auto;
    transform:translateX(100%); transition:transform .3s ease;
  }
  .mobile-menu.open{ transform:none; }
  .mm-group{ border-bottom:1px solid var(--line); padding:16px 0; }
  .mm-group h4{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 12px; }
  .mm-group a{ display:block; font-family:var(--sans); font-weight:600; font-size:17px; padding:8px 0; }
}

/* ===================== FOOTER ===================== */
.home-foot{ background:var(--dark); color:#fff; border-radius:var(--radius) var(--radius) 0 0; margin-top:var(--pad); overflow:hidden; }
.foot-hero{ padding:clamp(40px,6vw,96px) clamp(20px,4vw,72px) clamp(30px,4vw,60px); border-bottom:1px solid rgba(255,255,255,.1); }
.foot-hero h2{
  margin:0; font-family:var(--sans); font-weight:700; letter-spacing:-.04em; line-height:.92;
  font-size:clamp(34px,6.5vw,104px); text-wrap:balance; max-width:18ch;
}
.foot-cols{ display:grid; grid-template-columns:repeat(4,1fr) 1.2fr; gap:30px; padding:clamp(34px,4vw,60px) clamp(20px,4vw,72px); border-bottom:1px solid rgba(255,255,255,.1); }
.fcol h5{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#7e7e86; margin:0 0 16px; }
.fcol ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.fcol a{ font-family:var(--body); font-size:14.5px; color:#c7c7cd; transition:color .2s; }
.fcol a:hover{ color:var(--accent); }
.ai-card{ background:#15151b; border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:20px; }
.ai-card .ai-top{ display:flex; align-items:center; gap:10px; }
.ai-card .ai-dot{ width:30px; height:30px; border-radius:8px; background:var(--accent); display:grid; place-items:center; font-family:var(--mono); font-size:13px; }
.ai-card .ai-t{ font-family:var(--sans); font-weight:700; font-size:15px; }
.ai-card p{ font-family:var(--body); font-size:12.5px; color:#9c9ca3; line-height:1.45; margin:12px 0 16px; }
/* AI tools grid — defined here (not just home2.css) so it works on every page's footer */
.ai-tools{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.ai-tool{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:10px 12px; transition:background .2s, border-color .2s; text-decoration:none; }
.ai-tool:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); }
.ai-tool img{ width:18px; height:18px; object-fit:contain; flex:0 0 auto; }
.ai-tool span{ font-family:var(--sans); font-weight:600; font-size:13px; color:#fff; }
.foot-bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; padding:22px clamp(20px,4vw,72px); }
.foot-bottom .cr{ font-family:var(--mono); font-size:11px; color:#7e7e86; letter-spacing:.03em; display:flex; gap:18px; flex-wrap:wrap; }
.foot-bottom .cr a{ color:#7e7e86; }
.foot-bottom .cr a:hover{ color:var(--accent); }

@media (max-width:860px){ .foot-cols{ grid-template-columns:1fr 1fr; } .ai-card{ grid-column:1 / -1; } }
@media (max-width:520px){ .foot-cols{ grid-template-columns:1fr; } }

/* ===================== CLOSING BRAND ===================== */
.closing{ height:60vh; min-height:380px; background:#000; display:grid; place-items:center; overflow:hidden; position:relative; }
.closing .glowline{ position:absolute; left:-20%; right:-20%; height:1px; background:linear-gradient(90deg,transparent,rgba(80,70,230,.6),transparent); }
.closing .word{ font-family:var(--sans); font-weight:700; letter-spacing:-.05em; font-size:clamp(80px,24vw,420px); color:#fff; line-height:.8; position:relative; z-index:2; }
.closing .g1{ position:absolute; width:50vw; height:50vw; border-radius:50%; background:radial-gradient(circle, rgba(80,70,230,.4), transparent 60%); top:-20%; left:-10%; filter:blur(40px); }
.closing .g2{ position:absolute; width:40vw; height:40vw; border-radius:50%; background:radial-gradient(circle, rgba(60,80,220,.3), transparent 60%); bottom:-20%; right:-5%; filter:blur(40px); }

/* ===================== DYNAMIC ISLAND NAV ===================== */
.island{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  z-index:70; background:rgba(11,11,12,.9); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.14); border-radius:40px;
  display:flex; align-items:center; gap:12px; padding:8px 10px 8px 16px;
  box-shadow:0 16px 50px -12px rgba(0,0,0,.5); color:#fff;
  transition:opacity .4s, transform .4s; max-width:92vw;
}
.island.hidden{ opacity:0; pointer-events:none; transform:translateX(-50%) translateY(20px); }
.island .live{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#9c9ca3; }
.island .live .d{ width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 1.8s infinite; }
.island .isl-label{ font-family:var(--sans); font-weight:700; font-size:13px; white-space:nowrap; }
.island .isl-sub{ font-family:var(--mono); font-size:10px; color:#7e7e86; }
.island .ring{ width:34px; height:34px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; position:relative; }
.island .ring svg{ transform:rotate(-90deg); }
.island .ring .pct{ position:absolute; font-family:var(--mono); font-size:9px; }
.island .isl-dots{ display:flex; gap:5px; padding-right:6px; }
.island .isl-dots i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.25); cursor:pointer; transition:.2s; }
.island .isl-dots i.on{ background:var(--accent); transform:scale(1.3); }
@media (max-width:680px){ .island .isl-sub, .island .isl-dots{ display:none; } }

/* subpage fixed-header offset */
body:not(.home) .page{ padding-top:112px; }