:root{
    --bg: #F7F8FA;
    --surface: #FFFFFF;
    --ink: #10141B;
    --ink-soft: #4B5563;
    --line: #E4E7EC;

    /* division colors */
    --c-games: #7C3AED;
    --c-games-soft: #F2ECFE;
    --c-tools: #2451FF;
    --c-tools-soft: #EAF0FF;
    --c-guard: #0FA36B;
    --c-guard-soft: #E7F9F1;

    --radius: 16px;
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{ font-family:'Space Grotesk',sans-serif; margin:0; letter-spacing:-0.01em; }
  .mono{ font-family:'JetBrains Mono',monospace; }
  a{ color:inherit; }
  .wrap{ max-width:1160px; margin:0 auto; padding:0 32px; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }

  /* NAV */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(247,248,250,0.85); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  nav.wrap{ display:flex; align-items:center; justify-content:space-between; height:72px; }
  .brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px; }
  .brand-mark{
    width:28px; height:28px; border-radius:8px;
    background: conic-gradient(from 200deg, var(--c-games), var(--c-tools), var(--c-guard), var(--c-games));
    flex-shrink:0;
  }
  nav ul{ list-style:none; display:flex; gap:32px; margin:0; padding:0; }
  nav ul a{ text-decoration:none; font-size:14px; font-weight:500; color:var(--ink-soft); transition:color .15s; }
  nav ul a:hover{ color:var(--ink); }
  .nav-cta{
    background:var(--ink); color:#fff; padding:9px 18px; border-radius:8px; font-size:14px;
    font-weight:600; text-decoration:none; white-space:nowrap;
    transition: transform .18s ease, box-shadow .18s ease;
    display:inline-block;
  }
  .nav-cta:hover{ transform:translateY(-2px); box-shadow:0 8px 18px -8px rgba(16,20,27,0.5); }
  .nav-cta:active{ transform:translateY(0) scale(0.96); }
  .nav-links-wrap{ display:flex; align-items:center; gap:36px; }

  /* HERO */
  .hero{ padding:100px 0 56px; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500;
    color:var(--ink-soft); background:var(--surface); border:1px solid var(--line);
    padding:6px 12px; border-radius:100px; margin-bottom:28px;
  }
  .hero h1{ font-size:clamp(38px,5.4vw,64px); line-height:1.06; max-width:820px; font-weight:700; }
  .hero p.lead{ margin-top:24px; font-size:18px; line-height:1.6; color:var(--ink-soft); max-width:560px; }
  .hero-actions{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }
  .btn-primary{
    background:var(--ink); color:#fff; padding:13px 24px; border-radius:9px; text-decoration:none;
    font-weight:600; font-size:14.5px; display:inline-block;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(16,20,27,0.5); }
  .btn-primary:active{ transform:translateY(0) scale(0.97); box-shadow:none; }
  .btn-secondary{
    background:transparent; color:var(--ink); padding:13px 24px; border-radius:9px; text-decoration:none;
    font-weight:600; font-size:14.5px; border:1px solid var(--line); display:inline-block;
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
  }
  .btn-secondary:hover{ transform:translateY(-2px); border-color:var(--ink); background:var(--surface); }
  .btn-secondary:active{ transform:translateY(0) scale(0.97); }

  /* HERO MARQUEE — subtle animated replacement for the old ledger */
  .hero-marquee{
    margin-top:64px; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius); overflow:hidden; padding:22px 0;
    box-shadow:0 1px 2px rgba(16,20,27,0.04), 0 16px 36px -20px rgba(16,20,27,0.16);
  }
  .marquee-track{ display:flex; width:max-content; }
  /* .marquee-track{ display:flex; width:max-content; animation: marquee 22s linear infinite; } */
  .marquee-track span{
    display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif;
    font-size:16px; font-weight:600; color:var(--ink-soft); white-space:nowrap; padding:0px 28px;
  }
  .marquee-track span .dot{ width:0px; height:0px; border-radius:50%; }
  @keyframes marquee{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-50%); }
  }
  .hero-marquee:hover .marquee-track{ animation-play-state: paused; }

  /* SECTION HEAD */
  section{ padding:130px 0; }
  .section-head{ max-width:620px; margin-bottom:72px; margin-top:8px; }
  .section-head .kicker{ font-size:16px; font-weight:700; letter-spacing:0.02em; text-transform:uppercase; margin-bottom:18px; }
  .section-head h2{ font-size:clamp(28px,3.4vw,38px); font-weight:700; }
  .section-head p{ margin-top:20px; color:var(--ink-soft); font-size:16px; line-height:1.6; }

  /* DIVISIONS CAROUSEL (Microsoft-style story + logo tabs) */
  .carousel{ position:relative; }
  .story{
    display:none;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden;
    box-shadow:0 1px 2px rgba(16,20,27,0.04), 0 20px 44px -24px rgba(16,20,27,0.18);
  }
  .story.active{ display:grid; grid-template-columns: 1fr 1fr; min-height:420px; }
  .story-content{ padding:44px 48px; display:flex; flex-direction:column; justify-content:center; }
  .story-badge{
    display:inline-flex; align-items:center; justify-content:center;
    padding:8px 16px; border-radius:8px; color:#fff; font-weight:700; font-size:14px;
    width:fit-content; margin-bottom:24px;
  }
  .story h3{ font-size:25px; font-weight:700; line-height:1.25; margin-bottom:14px; max-width:420px; }
  .story-content p.desc{ color:var(--ink-soft); font-size:15px; line-height:1.65; margin:0 0 24px; max-width:420px; }
  .story .tags-label{ font-size:12.5px; font-weight:600; color:#9AA3AF; margin-bottom:14px; }
  .story .tags{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:32px; }
  .story .tags span{ font-size:13.5px; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
  .story-cta{
    background:var(--ink); color:#fff; padding:12px 22px; border-radius:9px;
    font-weight:600; font-size:14px; text-decoration:none; width:fit-content; display:inline-block;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .story-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(16,20,27,0.5); }
  .story-cta:active{ transform:translateY(0) scale(0.97); }
  .story-visual{ position:relative; overflow:hidden; height:100%; }

  /* Games visual: cluster of tiles */
  .v-games{ background: var(--c-games-soft); }
  .v-games .tile{ position:absolute; border-radius:10px; background:var(--c-games); opacity:0.85; }

  /* Toolstack visual: grid of dots representing 275 tools */
  .v-tools{ background: var(--c-tools-soft); display:flex; align-items:center; padding:40px; }
  .dot-grid{ display:grid; grid-template-columns: repeat(15, 1fr); gap:6px; width:100%; }
  .dot-grid span{ width:100%; aspect-ratio:1; border-radius:2px; background:var(--c-tools); opacity:0.18; }
  .dot-grid span.on{ opacity:0.9; }

  /* Guard visual: reuse ticker feel */
  .v-guard{ background: var(--c-guard-soft); display:flex; flex-direction:column; align-items:stretch; justify-content:center; padding:40px 44px; gap:14px; }
  .v-guard .grow{ display:flex; align-items:center; gap:10px; font-size:13px; background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:12px 14px; }
  .v-guard .grow .gdot{ width:7px; height:7px; border-radius:50%; background:var(--c-guard); flex-shrink:0; }
  .v-guard .grow .gtxt{ color:var(--ink); }

  /* Tabs row under the carousel */
  .tabs{ display:flex; border-top:1px solid var(--line); margin-top:0; margin-bottom:24px; overflow-x:auto; }
  .tab{
    flex:1; min-width:170px; display:flex; align-items:center; gap:12px;
    padding:20px 18px; background:transparent; border:none; border-bottom:3px solid transparent;
    cursor:pointer; font-family:'Inter',sans-serif; font-size:14px; font-weight:600;
    color:var(--ink-soft); text-align:left; transition:color .15s, border-color .15s, background-color .15s;
  }
  .tab:hover{ color:var(--ink); background:var(--bg); }
  .tab.active{ color:var(--ink); border-bottom-color: var(--ink); }
  .tab-badge{
    width:30px; height:30px; border-radius:7px; color:#fff; font-size:11px; font-weight:700;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition: transform .18s ease;
  }
  .tab:hover .tab-badge{ transform: scale(1.1) rotate(-4deg); }

  /* BLOG POSTERS */
  .blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .blog-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column;
    transition: box-shadow .2s, transform .2s;
  }
  .blog-card:hover{ box-shadow:0 14px 30px -18px rgba(16,20,27,0.22); transform:translateY(-2px); }
  .blog-poster{ height:150px; position:relative; }
  .blog-poster .ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0.5; }
  .blog-body{ padding:20px; display:flex; flex-direction:column; gap:8px; flex:1; }
  .blog-tag{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; }
  .blog-body h3{ font-size:16.5px; font-weight:600; line-height:1.3; }
  .blog-body p{ font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.55; }
  .blog-meta{ font-size:12px; color:#9AA3AF; margin-top:auto; padding-top:6px; }

  /* FAQ */
  .faq-list{ display:flex; flex-direction:column; border-top:1px solid var(--line); margin-top:8px; }
  .faq-item{ border-bottom:1px solid var(--line); padding:28px 4px; }
  .faq-item summary{
    display:flex; justify-content:space-between; align-items:center; gap:20px;
    cursor:pointer; font-weight:600; font-size:16px; list-style:none;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-icon{ font-size:22px; line-height:1; color:var(--ink-soft); font-weight:400; transition:transform .2s; flex-shrink:0; }
  .faq-item[open] .faq-icon{ transform:rotate(45deg); }
  .faq-item .faq-answer p{ margin:14px 0 0; color:var(--ink-soft); font-size:14.5px; line-height:1.65; max-width:640px; }

  /* CTA */
  .cta{
    background:var(--ink); color:#fff; border-radius:20px; padding:64px 48px;
    display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
    margin-bottom:16px;
  }
  .cta h2{ font-size:clamp(26px,3vw,34px); max-width:460px; }
  .cta p{ color:#AEB6C2; margin-top:12px; font-size:15px; max-width:420px; }
  .cta .btn-primary{ background:#fff; color:var(--ink); }
  .cta .btn-primary:hover{ box-shadow:0 10px 22px -10px rgba(0,0,0,0.4); }

  footer{ border-top:1px solid var(--line); padding:56px 0; margin-top:24px; }
  .foot-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; }
  .foot-row .fbrand{ font-size:13px; color:var(--ink-soft); }
  .foot-row .flinks{ display:flex; gap:32px; list-style:none; padding:0; margin:0; }
  .foot-row .flinks a{ font-size:13px; color:var(--ink-soft); text-decoration:none; }
  .foot-row .flinks a:hover{ color:var(--ink); }

  @media (max-width:860px){
    nav ul{ display:none; }
    .story.active{ grid-template-columns:1fr; min-height:auto; }
    .story-visual{ order:-1; height:180px; }
    .story-content{ padding:32px 28px; }
    .tabs{ flex-wrap:nowrap; }
    .tab{ min-width:150px; }
    .blog-grid{ grid-template-columns:1fr; }
    .cta{ padding:40px 28px; }
  }