:root{
      /* ===== Brand blues (tweak to match logo exactly) ===== */
      --blue-ink: #0b2f66;
      --blue-ice: #8fd0ff;
      --blue-core: #2f7cf6;
      --blue-deep: #1d4ed8;

      --page-bg: #ffffff;
      --text: #0b1220;
      --muted: rgba(11,18,32,.68);

      --container: 1180px;

      --radius-xl: 28px;
      --radius-lg: 22px;
      --radius-md: 16px;

      --ease: cubic-bezier(.2,.8,.2,1);
      --dur: 260ms;

      --shadow: 0 18px 50px rgba(0,0,0,.14);
      --shadow-soft: 0 10px 28px rgba(0,0,0,.12);

      /* Grain */
      --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");

      /* ===== Section theme tokens (LIGHT by default) ===== */
      --sec-panel-bg: linear-gradient(135deg, rgba(235,245,255,.88), rgba(255,255,255,.92));
      --sec-panel-border: rgba(11,18,32,.08);
      --sec-panel-shadow: 0 22px 55px rgba(0,0,0,.08);

      --sec-card-bg: rgba(255,255,255,.78);
      --sec-card-bg-hover: rgba(255,255,255,.92);
      --sec-card-border: rgba(29,78,216,.34);
      --sec-card-border-hover: rgba(29,78,216,.52);
      --sec-card-shadow: 0 14px 34px rgba(0,0,0,.06);
      --sec-card-shadow-hover: 0 22px 55px rgba(0,0,0,.10);

      --sec-title: rgba(11,18,32,.92);
      --sec-body: rgba(11,18,32,.62);
      --sec-body-2: rgba(11,18,32,.64);
      --sec-link: rgba(11,18,32,.72);

      --sec-pill-bg: rgba(255,255,255,.72);
      --sec-pill-border: rgba(11,18,32,.10);
      --sec-pill-shadow: 0 14px 30px rgba(0,0,0,.06);
      --sec-pill-fg: #0b1220;

      --sec-pill-blue-bg: linear-gradient(135deg, rgba(210,238,255,.92), rgba(255,255,255,.84));
      --sec-pill-blue-border: rgba(11,47,102,.14);
      --sec-pill-blue-fg: var(--blue-ink);

      --sec-media-bg: rgba(255,255,255,.55);
      --sec-media-border: rgba(11,18,32,.08);
      --sec-media-shadow: 0 26px 70px rgba(0,0,0,.10);
      --sec-media-glow: radial-gradient(640px 420px at 40% 30%, rgba(47,124,246,.14), rgba(255,255,255,0));
    }

    @media (prefers-color-scheme: dark){
      :root{
        --page-bg: #05070d;
        --text: rgba(255,255,255,.92);
        --muted: rgba(255,255,255,.70);

        --shadow: 0 18px 60px rgba(0,0,0,.55);
        --shadow-soft: 0 12px 34px rgba(0,0,0,.48);

        /* ===== Section theme tokens (DARK) ===== */
        --sec-panel-bg: linear-gradient(135deg, rgba(10,14,22,.92), rgba(5,7,13,.96));
        --sec-panel-border: rgba(255,255,255,.10);
        --sec-panel-shadow: 0 26px 70px rgba(0,0,0,.55);

        --sec-card-bg: rgba(255,255,255,.04);
        --sec-card-bg-hover: rgba(255,255,255,.06);
        --sec-card-border: rgba(143,208,255,.22);
        --sec-card-border-hover: rgba(143,208,255,.34);
        --sec-card-shadow: 0 18px 45px rgba(0,0,0,.35);
        --sec-card-shadow-hover: 0 26px 70px rgba(0,0,0,.55);

        --sec-title: rgba(255,255,255,.92);
        --sec-body: rgba(255,255,255,.70);
        --sec-body-2: rgba(255,255,255,.70);
        --sec-link: rgba(143,208,255,.88);

        --sec-pill-bg: rgba(255,255,255,.06);
        --sec-pill-border: rgba(255,255,255,.10);
        --sec-pill-shadow: 0 18px 40px rgba(0,0,0,.35);
        --sec-pill-fg: rgba(255,255,255,.92);

        --sec-pill-blue-bg: linear-gradient(135deg, rgba(143,208,255,.10), rgba(0,0,0,.34));
        --sec-pill-blue-border: rgba(143,208,255,.18);
        --sec-pill-blue-fg: var(--blue-ice);

        --sec-media-bg: rgba(0,0,0,.28);
        --sec-media-border: rgba(255,255,255,.10);
        --sec-media-shadow: 0 30px 85px rgba(0,0,0,.60);
        --sec-media-glow: radial-gradient(640px 420px at 40% 30%, rgba(143,208,255,.14), rgba(0,0,0,0));
      }
    }

    html[data-theme="light"]{
      --page-bg:#fff; --text:#0b1220; --muted:rgba(11,18,32,.68);
      --shadow: 0 18px 50px rgba(0,0,0,.14);
      --shadow-soft: 0 10px 28px rgba(0,0,0,.12);

      /* Force LIGHT tokens */
      --sec-panel-bg: linear-gradient(135deg, rgba(235,245,255,.88), rgba(255,255,255,.92));
      --sec-panel-border: rgba(11,18,32,.08);
      --sec-panel-shadow: 0 22px 55px rgba(0,0,0,.08);

      --sec-card-bg: rgba(255,255,255,.78);
      --sec-card-bg-hover: rgba(255,255,255,.92);
      --sec-card-border: rgba(29,78,216,.34);
      --sec-card-border-hover: rgba(29,78,216,.52);
      --sec-card-shadow: 0 14px 34px rgba(0,0,0,.06);
      --sec-card-shadow-hover: 0 22px 55px rgba(0,0,0,.10);

      --sec-title: rgba(11,18,32,.92);
      --sec-body: rgba(11,18,32,.62);
      --sec-body-2: rgba(11,18,32,.64);
      --sec-link: rgba(11,18,32,.72);

      --sec-pill-bg: rgba(255,255,255,.72);
      --sec-pill-border: rgba(11,18,32,.10);
      --sec-pill-shadow: 0 14px 30px rgba(0,0,0,.06);
      --sec-pill-fg: #0b1220;

      --sec-pill-blue-bg: linear-gradient(135deg, rgba(210,238,255,.92), rgba(255,255,255,.84));
      --sec-pill-blue-border: rgba(11,47,102,.14);
      --sec-pill-blue-fg: var(--blue-ink);

      --sec-media-bg: rgba(255,255,255,.55);
      --sec-media-border: rgba(11,18,32,.08);
      --sec-media-shadow: 0 26px 70px rgba(0,0,0,.10);
      --sec-media-glow: radial-gradient(640px 420px at 40% 30%, rgba(47,124,246,.14), rgba(255,255,255,0));
    }

    html[data-theme="dark"]{
      --page-bg:#05070d; --text:rgba(255,255,255,.92); --muted:rgba(255,255,255,.70);
      --shadow: 0 18px 60px rgba(0,0,0,.55);
      --shadow-soft: 0 12px 34px rgba(0,0,0,.48);

      /* Force DARK tokens */
      --sec-panel-bg: linear-gradient(135deg, rgba(10,14,22,.92), rgba(5,7,13,.96));
      --sec-panel-border: rgba(255,255,255,.10);
      --sec-panel-shadow: 0 26px 70px rgba(0,0,0,.55);

      --sec-card-bg: rgba(255,255,255,.04);
      --sec-card-bg-hover: rgba(255,255,255,.06);
      --sec-card-border: rgba(143,208,255,.22);
      --sec-card-border-hover: rgba(143,208,255,.34);
      --sec-card-shadow: 0 18px 45px rgba(0,0,0,.35);
      --sec-card-shadow-hover: 0 26px 70px rgba(0,0,0,.55);

      --sec-title: rgba(255,255,255,.92);
      --sec-body: rgba(255,255,255,.70);
      --sec-body-2: rgba(255,255,255,.70);
      --sec-link: rgba(143,208,255,.88);

      --sec-pill-bg: rgba(255,255,255,.06);
      --sec-pill-border: rgba(255,255,255,.10);
      --sec-pill-shadow: 0 18px 40px rgba(0,0,0,.35);
      --sec-pill-fg: rgba(255,255,255,.92);

      --sec-pill-blue-bg: linear-gradient(135deg, rgba(143,208,255,.10), rgba(0,0,0,.34));
      --sec-pill-blue-border: rgba(143,208,255,.18);
      --sec-pill-blue-fg: var(--blue-ice);

      --sec-media-bg: rgba(0,0,0,.28);
      --sec-media-border: rgba(255,255,255,.10);
      --sec-media-shadow: 0 30px 85px rgba(0,0,0,.60);
      --sec-media-glow: radial-gradient(640px 420px at 40% 30%, rgba(143,208,255,.14), rgba(0,0,0,0));
    }

    *{ box-sizing:border-box; }
    body{ margin:0; background:var(--page-bg); color:var(--text); }
    a{ color:inherit; }
    img{ max-width:100%; display:block; }

    .font{
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }

    .container{
      width:min(var(--container), calc(100% - 36px));
      margin:0 auto;
    }


    /* =========================================================
       Inline SVG sprite icons (premium + consistent)
    ========================================================= */
    .icon{
      width: 16px;
      height: 16px;
      display:inline-block;
      vertical-align: -2px;
      flex: 0 0 auto;
    }

    /* =========================================================
       Premium CTA (global)
    ========================================================= */
    .cta-mini{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;

      padding: 11px 14px;
      border-radius: 999px;
      font-weight: 900;
      font-size: 12.75px;
      text-decoration:none;

      color: var(--cta-fg);
      background: var(--cta-bg);
      border: 1px solid var(--cta-border);
      box-shadow: var(--cta-shadow);

      transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), filter var(--dur) var(--ease);
      white-space: nowrap;
    }

    .cta-mini:hover{
      transform: translateY(-1px);
      background: var(--cta-bg-hover);
      box-shadow: var(--cta-shadow-hover);
      filter: saturate(1.02);
    }

    .cta-mini .icon{
      transition: transform var(--dur) var(--ease);
    }
    .cta-mini:hover .icon{
      transform: translateX(2px);
    }
	

/* If the arrow is inside a button/link row, this keeps it aligned nicely */
.cta-mini .icon{
  width: 1.1em;
  height: 1.1em;
}

/* ===========================
   Optional: if index.html is missing the mini CTA styling
   (keeps functionality same; only visual)
   =========================== */
:root{
  --cta-bg: #111827;
  --cta-fg: #ffffff;
  --cta-bg-hover: #0b1220;
  --cta-ring: rgba(17,24,39,.25);
}

.cta-mini{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .85rem;
  border-radius: 999px;
  background: var(--cta-bg);
  color: var(--cta-fg);
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
}

.cta-mini:hover{ background: var(--cta-bg-hover); }

.cta-mini:focus{ outline: none; }
.cta-mini:focus-visible{
  box-shadow: 0 0 0 4px var(--cta-ring);
}

    /* =========================================================
       HEADER + HERO (unchanged)
    ========================================================= */
    .header{
      position:fixed;
      top:18px;
      left:50%;
      transform:translateX(-50%);
      width:min(var(--container), calc(100% - 28px));
      z-index:9999;
    }

    .header__bar{
      position:relative;
      display:flex;
      align-items:center;
      gap:14px;
      padding:12px 18px;
      border-radius: var(--radius-xl);
      background: transparent;
      border: 1px solid transparent;
      box-shadow:none;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
      color: rgba(255,255,255,.92);
      transition:
        background var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease),
        color var(--dur) var(--ease),
        transform var(--dur) var(--ease);
      overflow:hidden;
    }

    .header__bar::before{
      content:"";
      position:absolute; inset:-40%;
      background-image: var(--grain);
      opacity:0;
      mix-blend-mode: overlay;
      pointer-events:none;
      transform: rotate(8deg);
      transition: opacity var(--dur) var(--ease);
    }

    .header.is-scrolled .header__bar{
      transform: translateY(-2px);
      box-shadow: var(--shadow);
      border-color: rgba(11,47,102,.14);
      background: linear-gradient(135deg, rgba(210,238,255,.86), rgba(120,180,255,.70));
      color: var(--blue-ink);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .header.is-scrolled .header__bar::before{ opacity:.22; }

    @media (prefers-color-scheme: dark){
      .header.is-scrolled .header__bar{
        border-color: rgba(143,208,255,.16);
        background: linear-gradient(135deg, rgba(0,0,0,.80), rgba(14,18,30,.86));
        color: var(--blue-ice);
      }
    }
    html[data-theme="dark"] .header.is-scrolled .header__bar{
      border-color: rgba(143,208,255,.16);
      background: linear-gradient(135deg, rgba(0,0,0,.80), rgba(14,18,30,.86));
      color: var(--blue-ice);
    }
    html[data-theme="light"] .header.is-scrolled .header__bar{
      border-color: rgba(11,47,102,.14);
      background: linear-gradient(135deg, rgba(210,238,255,.86), rgba(120,180,255,.70));
      color: var(--blue-ink);
    }

    .logo{
      display:flex; align-items:center; gap:10px;
      min-width: 190px;
      text-decoration:none;
      font-weight:850;
      letter-spacing:.2px;
      white-space:nowrap;
    }
    .logo__mark{ width:34px; height:34px; display:grid; place-items:center; }
    .logo__text{ font-size:16.5px; opacity:.95; }

    .nav{
      display:flex; align-items:center; gap:10px;
      flex:1;
      justify-content:center;
    }
    .nav a{
      text-decoration:none;
      font-size:16.5px;
      font-weight:680;
      opacity:.92;
      padding:10px 10px;
      border-radius:999px;
      transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
    }
    .nav a:hover{
      opacity:1;
      background: rgba(255,255,255,.10);
      transform: translateY(-1px);
    }
    .header.is-scrolled .nav a:hover{ background: rgba(11,47,102,.08); }
    @media (prefers-color-scheme: dark){
      .header.is-scrolled .nav a:hover{ background: rgba(143,208,255,.12); }
    }
    html[data-theme="dark"] .header.is-scrolled .nav a:hover{ background: rgba(143,208,255,.12); }

    .actions{
      margin-left:auto;
      display:flex; align-items:center; gap:10px;
      justify-content:flex-end;
    }

    .pill{
      display:inline-flex; align-items:center; gap:10px;
      padding:10px 14px;
      border-radius:999px;
      font-weight:760;
      font-size:13px;
      text-decoration:none;
      border:1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.10);
      transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
      white-space:nowrap;
    }
    .pill:hover{ transform:translateY(-1px); background: rgba(255,255,255,.14); }
    .pill--solid{
      background: rgba(255,255,255,.92);
      color:#0b1a33;
      border-color: rgba(255,255,255,0);
    }
    .pill--solid:hover{ background:#fff; }

    .iconbtn{
      width:42px; height:42px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.10);
      display:grid; place-items:center;
      cursor:pointer;
      transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
    }
    .iconbtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.14); }

    .header.is-scrolled .pill{
      border-color: rgba(11,47,102,.14);
      background: rgba(255,255,255,.40);
    }
    .header.is-scrolled .pill--solid{
      background: rgba(11,47,102,.10);
      color: inherit;
      border-color: rgba(11,47,102,.14);
    }
    .header.is-scrolled .iconbtn{
      border-color: rgba(11,47,102,.14);
      background: rgba(255,255,255,.38);
    }
    @media (prefers-color-scheme: dark){
      .header.is-scrolled .pill{
        border-color: rgba(143,208,255,.18);
        background: rgba(0,0,0,.22);
      }
      .header.is-scrolled .pill--solid{
        background: rgba(143,208,255,.12);
        color: inherit;
        border-color: rgba(143,208,255,.18);
      }
      .header.is-scrolled .iconbtn{
        border-color: rgba(143,208,255,.18);
        background: rgba(0,0,0,.22);
      }
    }
    html[data-theme="dark"] .header.is-scrolled .pill{
      border-color: rgba(143,208,255,.18);
      background: rgba(0,0,0,.22);
    }
    html[data-theme="dark"] .header.is-scrolled .pill--solid{
      background: rgba(143,208,255,.12);
      color: inherit;
      border-color: rgba(143,208,255,.18);
    }
    html[data-theme="dark"] .header.is-scrolled .iconbtn{
      border-color: rgba(143,208,255,.18);
      background: rgba(0,0,0,.22);
    }

    .actions__group{
  display:flex; align-items:center; gap:10px;
  white-space:nowrap;
  overflow:hidden;
  max-width: 900px;
  transition:
    max-width 420ms var(--ease),
    opacity 260ms var(--ease),
    transform 260ms var(--ease);
}

    .searchwrap{
      display:flex; align-items:center; gap:10px;
      transform-origin: 100% 50%;
      opacity:0;
      transform: translateY(-2px) scaleX(.92);
      pointer-events:none;
      max-width:0;
      overflow:hidden;
      transition:
        max-width 420ms var(--ease),
        opacity 260ms var(--ease),
        transform 420ms var(--ease);
    }

    .header.search-open .actions__group{
	  max-width: 0;
      opacity:0;
      pointer-events:none;
      transform: translateY(-6px);
    }
    .header.search-open .searchwrap{
      opacity:1;
      transform: translateY(0) scaleX(1);
      pointer-events:auto;
      max-width: 440px;
    }

    .search{
      width: min(560px, 46vw);
      height:44px;
      border-radius:14px;
      padding:0 14px;
      outline:none;
      font-size:14px;
      border:1px solid rgba(255,255,255,.28);
      background: rgba(0,0,0,.34);
      color: rgba(255,255,255,.92);
    }
    .search::placeholder{ color: rgba(255,255,255,.70); }

    .searchclose{
      width:30px; height:30px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.10);
      display:grid; place-items:center;
      cursor:pointer;
      transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
      flex: 0 0 auto;
    }
    .searchclose:hover{ transform: translateY(-1px); background: rgba(255,255,255,.14); }

    .header.is-scrolled .search{
      background: rgba(255,255,255,.58);
      border-color: rgba(11,47,102,.16);
      color:#081a38;
    }
    .header.is-scrolled .search::placeholder{ color: rgba(8,26,56,.55); }
    @media (prefers-color-scheme: dark){
      .header.is-scrolled .search{
        background: rgba(0,0,0,.32);
        border-color: rgba(143,208,255,.22);
        color: rgba(255,255,255,.92);
      }
      .header.is-scrolled .search::placeholder{ color: rgba(255,255,255,.72); }
    }
    html[data-theme="dark"] .header.is-scrolled .search{
      background: rgba(0,0,0,.32);
      border-color: rgba(143,208,255,.22);
      color: rgba(255,255,255,.92);
    }
    html[data-theme="dark"] .header.is-scrolled .search::placeholder{ color: rgba(255,255,255,.72); }

    .hero{
      position:relative;
      min-height:100vh;
      display:grid;
      place-items:center;
      padding: 122px 18px 64px;
      overflow:hidden;
      background:#05070d;
    }
    .hero__video{
      position:absolute; inset:0;
      width:100%; height:100%;
      object-fit:cover;
      filter: saturate(1.03) contrast(1.02);
      transform: scale(1.02);
    }
    .hero__overlay{
      position:absolute; inset:0;
      background:
        radial-gradient(900px 520px at 50% 36%, rgba(47,124,246,.18), rgba(0,0,0,.36)),
        linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.58));
    }
    .hero__overlay::before{
      content:"";
      position:absolute; inset:-40%;
      background-image: var(--grain);
      opacity:.10;
      mix-blend-mode: overlay;
      pointer-events:none;
      transform: rotate(-8deg);
    }

    .hero__content{
      position:relative;
      width:min(1040px, 100%);
      text-align:center;
      color: rgba(255,255,255,.94);
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:16px;
      padding: 0 8px;
      animation: fadeUp 720ms var(--ease) 120ms both;
    }

    .badge{
      display:inline-flex; align-items:center; gap:10px;
      padding:10px 14px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.20);
      background: rgba(255,255,255,.08);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      font-size:12.5px;
      font-weight:760;
      letter-spacing:.2px;
    }
    .badge i{
      width:7px; height:7px; border-radius:999px;
      background: linear-gradient(135deg, var(--blue-ice), var(--blue-core));
      display:inline-block;
      box-shadow: 0 0 0 6px rgba(47,124,246,.12);
    }

    .hero h1{
      margin:0;
      font-size: clamp(38px, 4.4vw, 66px);
      line-height:1.05;
      letter-spacing:-0.03em;
      font-weight:860;
      text-shadow: 0 12px 40px rgba(0,0,0,.32);
    }
    .hero p{
      margin:0;
      max-width:780px;
      font-size: clamp(14px, 1.35vw, 18px);
      line-height:1.65;
      color: rgba(255,255,255,.82);
      text-shadow: 0 10px 34px rgba(0,0,0,.28);
    }

    .ctas{
      margin-top:6px;
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      justify-content:center;
    }
    .cta{
      display:inline-flex; align-items:center; gap:10px;
      padding:12px 18px;
      border-radius:999px;
      font-weight:820;
      font-size:13.5px;
      text-decoration:none;
      white-space:nowrap;
      transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }
    .cta--primary{
      background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.84));
      color:#0b1a33;
      box-shadow: 0 18px 44px rgba(0,0,0,.26);
    }
    .cta--primary:hover{ transform:translateY(-1px); box-shadow: 0 24px 58px rgba(0,0,0,.32); }
    .cta--secondary{
      background: rgba(255,255,255,.08);
      color: rgba(255,255,255,.92);
      border:1px solid rgba(255,255,255,.22);
      box-shadow: 0 12px 32px rgba(0,0,0,.18);
    }
    .cta--secondary:hover{ transform:translateY(-1px); background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.28); }

    @keyframes fadeUp{
      from{ opacity:0; transform: translateY(12px); }
      to{ opacity:1; transform: translateY(0); }
    }

    /* =========================================================
       SECTION 2: ATS / Track Detect Protect
       ✅ Now LIGHT in light-mode, DARK in dark-mode (consistent)
    ========================================================= */
    .tdp{
      padding: 62px 0 74px;
      background: var(--page-bg);
    }

    .tdp__panel{
      position:relative;
      border-radius: var(--radius-xl);
      overflow:hidden;
      border: 1px solid var(--sec-panel-border);
      background: var(--sec-panel-bg);
      box-shadow: var(--sec-panel-shadow);
      padding: 42px;
    }
    .tdp__panel::before{
      content:"";
      position:absolute; inset:-40%;
      background-image: var(--grain);
      opacity:.10;
      mix-blend-mode: overlay;
      pointer-events:none;
      transform: rotate(10deg);
    }

    .tdp__header{
      position:relative;
      text-align:center;
      margin-bottom: 26px;
    }
    .tdp__header h2{
      margin:0;
      font-size: clamp(22px, 2.1vw, 30px);
      letter-spacing:-0.02em;
      font-weight: 950;
      color: var(--sec-title);
    }
    .tdp__header .subname{
      margin-top: 6px;
      font-weight: 780;
      font-size: 13.5px;
      color: var(--sec-body);
    }

    .tdp__tagline{
      margin-top: 14px;
      display:flex;
      justify-content:center;
      gap: 10px;
      flex-wrap:wrap;
    }
    .tagpill{
      display:inline-flex; align-items:center;
      padding: 10px 14px;
      border-radius: 999px;
      font-weight: 950;
      font-size: 18px;
      letter-spacing: -.01em;
      background: var(--sec-pill-bg);
      border: 1px solid var(--sec-pill-border);
      box-shadow: var(--sec-pill-shadow);
      color: var(--sec-pill-fg);
    }
    .tagpill--blue{
      color: var(--sec-pill-blue-fg);
      background: var(--sec-pill-blue-bg);
      border-color: var(--sec-pill-blue-border);
    }

    .tdp__grid{
      position:relative;
      display:grid;
      grid-template-columns: 360px 1fr;
      gap: 34px;
      align-items:center;
    }

    .cards{
      display:flex;
      flex-direction:column;
      gap: 18px;
    }

    .card{
      border-radius: var(--radius-lg);
      background: var(--sec-card-bg);
      border: 1px solid var(--sec-card-border);
      padding: 22px 22px;
      box-shadow: var(--sec-card-shadow);
      transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
      will-change: transform;
    }
    .card h3{
      margin:0 0 8px;
      font-size:18px;
      font-weight: 950;
      color: var(--sec-title);
    }
    .card p{
      margin:0 0 18px;
      color: var(--sec-body-2);
      line-height:1.55;
      font-size:13.5px;
    }
    .card a{
      display:inline-flex; align-items:center; gap:10px;
      font-weight: 900;
      font-size: 12.5px;
      color: var(--sec-link);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .card:hover{
      transform: translateY(-4px);
      box-shadow: var(--sec-card-shadow-hover);
      background: var(--sec-card-bg-hover);
      border-color: var(--sec-card-border-hover);
    }

    .media{
      position:relative;
      border-radius: var(--radius-xl);
      overflow:hidden;
      background: var(--sec-media-bg);
      border: 1px solid var(--sec-media-border);
      box-shadow: var(--sec-media-shadow);
      min-height: 420px;
      opacity:0;
      transform: translateY(12px);
      transition: opacity 720ms var(--ease), transform 720ms var(--ease);
      will-change: opacity, transform;
    }
    .media::before{
      content:"";
      position:absolute; inset:0;
      background:
        var(--sec-media-glow),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.06));
      pointer-events:none;
    }
    .media::after{
      content:"";
      position:absolute; inset:-35%;
      background-image: var(--grain);
      opacity:.10;
      mix-blend-mode: overlay;
      pointer-events:none;
      transform: rotate(-8deg);
    }
    .media img{
      width:100%;
      height:100%;
      object-fit:cover;
      transform: scale(1.02);
    }

    .reveal{
      opacity:0;
      transform: translateY(10px);
      transition: opacity 720ms var(--ease), transform 720ms var(--ease);
      will-change: opacity, transform;
    }
    .reveal.in{ opacity:1; transform: translateY(0); }
    .media.in{ opacity:1; transform: translateY(0); }

    .reveal[data-delay="1"]{ transition-delay: 80ms; }
    .reveal[data-delay="2"]{ transition-delay: 140ms; }
    .reveal[data-delay="3"]{ transition-delay: 200ms; }

    /* =========================================================
       SECTION 3: Mission-Ready (now uses SAME theme rules as section 2)
       ✅ Light mode = light cards + dark text
       ✅ Dark mode  = dark cards + light text
    ========================================================= */
    .mission{
      padding: 68px 0 84px;
      background: var(--page-bg);
    }

    .mission__head{
      text-align:center;
      margin-bottom: 34px;
    }
    .mission__head h2{
      margin:0;
      font-size: clamp(26px, 2.7vw, 40px);
      letter-spacing: -0.02em;
      font-weight: 950;
      color: var(--sec-title);
    }
    .mission__head p{
      margin: 10px auto 0;
      max-width: 720px;
      line-height: 1.55;
      color: var(--sec-body);
      font-size: 14.5px;
    }

    .mission__grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    .mcard{
      border-radius: var(--radius-xl);
      padding: 18px;
      background: var(--sec-card-bg);
      border: 1px solid var(--sec-panel-border);
      box-shadow: var(--sec-panel-shadow);
      transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
      position:relative;
      overflow:hidden;
    }
    .mcard::before{
      content:"";
      position:absolute; inset:-40%;
      background-image: var(--grain);
      opacity:.06;
      mix-blend-mode: overlay;
      pointer-events:none;
      transform: rotate(10deg);
    }
    .mcard:hover{
      transform: translateY(-4px);
      background: var(--sec-card-bg-hover);
      border-color: var(--sec-card-border-hover);
      box-shadow: var(--sec-card-shadow-hover);
    }

    .mcard__img{
      border-radius: 18px;
      overflow:hidden;
      background: #000;
      aspect-ratio: 16 / 10;
      position:relative;
    }
    .mcard__img::after{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(520px 320px at 50% 25%, rgba(47,124,246,.18), rgba(0,0,0,0)),
        linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.10));
      pointer-events:none;
    }
    .mcard__img img{
      width:100%; height:100%;
      object-fit: cover;
      transform: scale(1.02);
    }

    .mcard__body{
      text-align:center;
      padding: 16px 10px 6px;
      position:relative;
    }
    .mcard__body h3{
      margin: 10px 0 6px;
      font-size: 16px;
      font-weight: 950;
      letter-spacing: -.01em;
      color: var(--sec-title);
    }
    .mcard__body p{
      margin: 0 auto 14px;
      max-width: 320px;
      font-size: 13.5px;
      line-height: 1.55;
      color: var(--sec-body);
    }

    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding: 12px 18px;
      border-radius: 14px;
      font-weight: 900;
      font-size: 13px;
      text-decoration:none;

      /* Use theme-aware look via tokens */
      background: linear-gradient(135deg, rgba(11,47,102,.94), rgba(10,42,92,.94));
      color: rgba(255,255,255,.92);
      box-shadow: 0 16px 40px rgba(11,47,102,.22);
      border: 1px solid rgba(255,255,255,.10);

      transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
    }
    .btn:hover{
      transform: translateY(-1px);
      box-shadow: 0 22px 58px rgba(11,47,102,.30);
      filter: brightness(1.02);
    }

    /* In dark mode, button aligns with section tokens */
    @media (prefers-color-scheme: dark){
      .btn{
        background: linear-gradient(135deg, rgba(143,208,255,.20), rgba(0,0,0,.35));
        color: var(--blue-ice);
        box-shadow: 0 22px 65px rgba(0,0,0,.55);
        border-color: rgba(143,208,255,.18);
      }
      .btn:hover{
        box-shadow: 0 30px 85px rgba(0,0,0,.65);
        filter: none;
      }
    }
    html[data-theme="dark"] .btn{
      background: linear-gradient(135deg, rgba(143,208,255,.20), rgba(0,0,0,.35));
      color: var(--blue-ice);
      box-shadow: 0 22px 65px rgba(0,0,0,.55);
      border-color: rgba(143,208,255,.18);
    }

    /* =========================================================
       Responsive
    ========================================================= */
    @media (max-width: 980px){
      .tdp__grid{ grid-template-columns: 1fr; }
      .media{ min-height: 360px; }
      .nav{ justify-content:flex-start; }
      .mission__grid{ grid-template-columns: 1fr; }
    }
    @media (max-width: 920px){
      .logo__text{ display:none; }
      .actions .pill{ display:none; }
      .nav{ gap:6px; justify-content:flex-start; }
      .search{ width: min(520px, 58vw); }
    }
    @media (max-width: 680px){
      .nav{ display:none; }
      .tdp__panel{ padding: 22px; }
      .tagpill{ font-size: 16px; }
      .search{ width: 64vw; }
	  /* Search open: give full room + keep close visible */
	  .header.search-open .logo{ display:none; }
	  .header.search-open .actions{
	  margin-left:0;
	  width:100%;
	  justify-content:center;
	  }
      .header.search-open .searchwrap{ max-width: 100%; }
      .header.search-open .search{
        width:100%;
        flex: 1 1 auto;
        min-width:0;
      }
    }

    @media (prefers-reduced-motion: reduce){
      *{ transition:none !important; animation:none !important; }
    }
	/* =========================================================
       SECTION 4: Range of Services (video bg) — kept from last version
    ========================================================= */
    .services{
      position: relative;
      padding: 88px 0 86px;
      overflow:hidden;
      background: #03050b;
      color: rgba(255,255,255,.92);
    }

    .services__video{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit: cover;
      filter: contrast(1.03) saturate(1.02);
      transform: scale(1.02);
      opacity: .92;
    }

    .services__overlay{
      position:absolute;
      inset:0;
      background:
        radial-gradient(900px 520px at 18% 18%, rgba(47,124,246,.18), rgba(0,0,0,.44)),
        radial-gradient(900px 520px at 85% 50%, rgba(143,208,255,.10), rgba(0,0,0,.62)),
        linear-gradient(180deg, rgba(0,0,0,.52), rgba(0,0,0,.70));
      pointer-events:none;
    }

    .services__overlay::before{
      content:"";
      position:absolute; inset:-35%;
      background-image: var(--grain);
      opacity: .12;
      mix-blend-mode: overlay;
      transform: rotate(-8deg);
      pointer-events:none;
    }

    .services__content{ position:relative; z-index: 1; }

    .services__grid{
      display:grid;
      grid-template-columns: 1.25fr .9fr;
      gap: 34px;
      align-items: start;
    }

    .kicker{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .18em;
      text-transform: uppercase;
      opacity: .92;
      margin-bottom: 12px;
    }
    .kicker .dot{
      width: 8px; height:8px;
      border-radius:999px;
      background: linear-gradient(135deg, var(--blue-ice), var(--blue-core));
      box-shadow: 0 0 0 7px rgba(47,124,246,.14);
    }

    .services__title{
      margin:0;
      font-size: clamp(30px, 3.4vw, 44px);
      letter-spacing: -0.02em;
      font-weight: 950;
      line-height: 1.05;
      text-shadow: 0 20px 60px rgba(0,0,0,.45);
    }

    .services__desc{
      margin: 10px 0 22px;
      max-width: 680px;
      color: rgba(255,255,255,.78);
      line-height: 1.65;
      font-size: 14.5px;
      text-shadow: 0 16px 52px rgba(0,0,0,.40);
    }

    .svc-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .svc{
      position:relative;
      border-radius: 18px;
      padding: 16px 16px 16px;
      background: rgba(10,14,22,.56);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: 0 22px 60px rgba(0,0,0,.38);
      transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
      overflow:hidden;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .svc::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(480px 240px at 20% 20%, rgba(47,124,246,.14), rgba(0,0,0,0)),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18));
      pointer-events:none;
    }
    .svc::after{
      content:"";
      position:absolute; inset:-30%;
      background-image: var(--grain);
      opacity:.10;
      mix-blend-mode: overlay;
      pointer-events:none;
      transform: rotate(10deg);
    }

    .svc:hover{
      transform: translateY(-3px);
      background: rgba(10,14,22,.66);
      border-color: rgba(143,208,255,.18);
      box-shadow: 0 30px 85px rgba(0,0,0,.55);
    }

    .svc__top{
      position:relative;
      display:flex;
      align-items:flex-start;
      gap: 12px;
      margin-bottom: 8px;
    }

    .svc__num{
      width: 26px;
      height: 26px;
      border-radius: 10px;
      display:grid;
      place-items:center;
      font-weight: 950;
      font-size: 12px;
      color: rgba(255,255,255,.92);
      background: rgba(143,208,255,.12);
      border: 1px solid rgba(143,208,255,.18);
      box-shadow: 0 18px 44px rgba(0,0,0,.38);
      flex: 0 0 auto;
    }

    .svc__icon{
      width: 34px;
      height: 34px;
      border-radius: 14px;
      display:grid;
      place-items:center;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: 0 18px 44px rgba(0,0,0,.35);
      flex: 0 0 auto;
    }
    .svc__icon svg{ opacity:.95; }

    .svc__name{
      margin: 0;
      font-weight: 950;
      font-size: 13.75px;
      line-height: 1.2;
    }

    .svc__body{
      position:relative;
      margin:0;
      color: rgba(255,255,255,.74);
      font-size: 12.75px;
      line-height: 1.55;
    }

    .callout{
      border-radius: 20px;
      padding: 22px 22px;
      background: rgba(10,14,22,.60);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: 0 30px 85px rgba(0,0,0,.52);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      overflow:hidden;
      position:relative;
    }
    .callout::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(720px 360px at 30% 30%, rgba(47,124,246,.16), rgba(0,0,0,0)),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
      pointer-events:none;
    }
    .callout::after{
      content:"";
      position:absolute; inset:-30%;
      background-image: var(--grain);
      opacity:.10;
      mix-blend-mode: overlay;
      pointer-events:none;
      transform: rotate(-8deg);
    }

    .callout h3{
      position:relative;
      margin:0 0 10px;
      font-size: clamp(22px, 2.3vw, 30px);
      letter-spacing: -0.02em;
      font-weight: 950;
    }

    .callout p{
      position:relative;
      margin:0;
      color: rgba(255,255,255,.80);
      line-height: 1.7;
      font-size: 13.75px;
    }

    .services__bottom{
      margin-top: 18px;
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap: 12px;
      flex-wrap: wrap;
    }
    .services__bottom small{
      color: rgba(255,255,255,.72);
      font-weight: 700;
      letter-spacing: .01em;
    }

    /* =========================================================
       Reveal animation
    ========================================================= */
    .reveal{
      opacity:0;
      transform: translateY(10px);
      transition: opacity 720ms var(--ease), transform 720ms var(--ease);
      will-change: opacity, transform;
    }
    .reveal.in{ opacity:1; transform: translateY(0); }
    .reveal[data-delay="1"]{ transition-delay: 90ms; }
    .reveal[data-delay="2"]{ transition-delay: 160ms; }
    .reveal[data-delay="3"]{ transition-delay: 230ms; }

    .media.in{ opacity:1; transform: translateY(0); }

    /* =========================================================
       Responsive
    ========================================================= */
    @media (max-width: 980px){
      .sec2 .tdp__grid{ grid-template-columns: 1fr; }
      .sec2 .media{ min-height: 360px; }
      .mission__grid{ grid-template-columns: 1fr; }
      .services__grid{ grid-template-columns: 1fr; }
      .svc-grid{ grid-template-columns: 1fr; }
    }
    @media (max-width: 920px){
      .logo__text{ display:none; }
      .actions .pill{ display:none; }
      .nav{ gap:6px; justify-content:flex-start; }
      .search{ width: min(520px, 58vw); }
    }
    @media (max-width: 680px){
      .nav{ display:none; }
      .sec2 .tdp__panel{ padding: 22px; }
      .sec2 .tagpill{ font-size: 16px; }
      .search{ width: 64vw; }
      .services{ padding: 74px 0 78px; }
      .svc{ padding: 16px 14px; }
    }

    @media (prefers-reduced-motion: reduce){
      *{ transition:none !important; animation:none !important; }
    }

    /* =========================================================
       SECTION 5: Integration (theme-aware; reuses Section 2/3 tokens)
       NOTE: Added styles only — existing CSS left unchanged.
    ========================================================= */
    .integration{
      padding: 70px 0 86px;
      background: var(--page-bg);
    }

    .integration__panel{
      position:relative;
      border-radius: var(--radius-xl);
      overflow:hidden;
      border: 1px solid var(--sec-panel-border);
      background: var(--sec-panel-bg);
      box-shadow: var(--sec-panel-shadow);
      padding: 42px;
    }
    .integration__panel::before{
      content:"";
      position:absolute; inset:-40%;
      background-image: var(--grain);
      opacity:.10;
      mix-blend-mode: overlay;
      pointer-events:none;
      transform: rotate(10deg);
    }

    .integration__grid{
      position:relative;
      display:grid;
      grid-template-columns: 1fr 480px;
      gap: 28px;
      align-items:start;
    }

    .integration__kicker{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--sec-body);
    }
    .integration__kicker .dot{
      width: 8px; height:8px;
      border-radius:999px;
      background: linear-gradient(135deg, var(--blue-ice), var(--blue-core));
      box-shadow: 0 0 0 7px rgba(47,124,246,.14);
      flex: 0 0 auto;
    }

    .integration h2{
      margin: 12px 0 10px;
      font-size: clamp(26px, 2.8vw, 42px);
      line-height: 1.06;
      letter-spacing: -0.02em;
      font-weight: 950;
      color: var(--sec-title);
    }

    .integration__lead{
      margin:0 0 14px;
      max-width: 720px;
      color: var(--sec-body);
      line-height: 1.65;
      font-size: 14.5px;
    }

    .integration__note{
      margin:0;
      padding: 12px 14px;
      border-radius: 16px;
      background: var(--sec-pill-bg);
      border: 1px solid var(--sec-pill-border);
      box-shadow: var(--sec-pill-shadow);
      color: var(--sec-pill-fg);
      font-weight: 900;
      font-size: 13.25px;
      line-height: 1.45;
    }

    .integration__actions{
      margin-top: 14px;
      display:flex;
      gap: 10px;
      flex-wrap:wrap;
      align-items:center;
    }

    .integration__actions .pill{
      border-color: var(--sec-pill-border);
      background: var(--sec-pill-bg);
      color: var(--sec-pill-fg);
    }
    .integration__actions .pill:hover{
      background: var(--sec-card-bg-hover);
      border-color: var(--sec-card-border-hover);
    }

    .integration__aside{
      display:flex;
      flex-direction:column;
      gap: 14px;
    }

    .integration__listcard{
      border-radius: var(--radius-xl);
      background: var(--sec-card-bg);
      border: 1px solid var(--sec-card-border);
      box-shadow: var(--sec-card-shadow);
      padding: 18px;
      overflow:hidden;
      position:relative;
    }

    .integration__listcard::before{
      content:"";
      position:absolute; inset:-40%;
      background-image: var(--grain);
      opacity:.06;
      mix-blend-mode: overlay;
      pointer-events:none;
      transform: rotate(-8deg);
    }

    .integration__listcard h3{
      position:relative;
      margin:0 0 12px;
      font-size: 14px;
      font-weight: 950;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--sec-body);
    }

    .integration__list{
      position:relative;
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .integration__item{
      display:flex;
      align-items:center;
      gap: 12px;
      padding: 12px 12px;
      border-radius: 18px;
      background: transparent;
      border: 1px solid var(--sec-panel-border);
      transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
      text-decoration:none;
      color: inherit;
      min-width:0;
    }

    .integration__item:hover{
      transform: translateY(-2px);
      background: var(--sec-card-bg-hover);
      border-color: var(--sec-card-border-hover);
      box-shadow: var(--sec-card-shadow);
    }

    .integration__ico{
      width: 38px;
      height: 38px;
      border-radius: 14px;
      display:grid;
      place-items:center;
      background: var(--sec-pill-blue-bg);
      border: 1px solid var(--sec-pill-blue-border);
      box-shadow: var(--sec-pill-shadow);
      flex: 0 0 auto;
    }

    .integration__ico .icon{ width: 18px; height: 18px; }

    .integration__text{
      display:flex;
      flex-direction:column;
      gap: 4px;
      flex: 1 1 auto;
      min-width:0;
    }

    .integration__row{
      display:flex;
      align-items:center;
      gap: 8px;
      flex-wrap:wrap;
      min-width:0;
    }

    .integration__name{
      font-weight: 950;
      color: var(--sec-title);
      font-size: 13.75px;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    .integration__meta{
      color: var(--sec-body);
      font-weight: 750;
      font-size: 12.75px;
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    .integration__tag{
      display:inline-flex;
      align-items:center;
      padding: 7px 10px;
      border-radius: 999px;
      background: var(--sec-pill-bg);
      border: 1px solid var(--sec-pill-border);
      box-shadow: var(--sec-pill-shadow);
      color: var(--sec-pill-fg);
      font-weight: 900;
      font-size: 11px;
      letter-spacing: .06em;
      text-transform: uppercase;
      line-height: 1;
      flex: 0 0 auto;
    }

    .integration__chev{
      width: 16px;
      height: 16px;
      opacity: .7;
      flex: 0 0 auto;
      transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
    }

    .integration__item:hover .integration__chev{
      transform: translateX(2px);
      opacity: .92;
    }

    .integration__chipbox{
      border-radius: var(--radius-xl);
      background: var(--sec-card-bg);
      border: 1px solid var(--sec-panel-border);
      box-shadow: var(--sec-panel-shadow);
      padding: 18px;
      position:relative;
      overflow:hidden;
    }

    .integration__chipbox::before{
      content:"";
      position:absolute; inset:-40%;
      background-image: var(--grain);
      opacity:.06;
      mix-blend-mode: overlay;
      pointer-events:none;
      transform: rotate(10deg);
    }

    .integration__chipbox h3{
      position:relative;
      margin:0 0 10px;
      font-size: 14px;
      font-weight: 950;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--sec-body);
    }

    .integration__chips{
      position:relative;
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
    }

    .integration__chip{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 999px;
      background: var(--sec-pill-bg);
      border: 1px solid var(--sec-pill-border);
      box-shadow: var(--sec-pill-shadow);
      color: var(--sec-pill-fg);
      font-weight: 850;
      font-size: 13px;
      line-height: 1;
    }

    .integration__chip--blue{
      background: var(--sec-pill-blue-bg);
      border-color: var(--sec-pill-blue-border);
      color: var(--sec-pill-blue-fg);
    }

    @media (max-width: 980px){
      .integration__grid{ grid-template-columns: 1fr; }
      .integration__panel{ padding: 22px; }
      .integration__list{ grid-template-columns: 1fr; }
    }



    /* =========================================================
       FOOTER (theme-aware; premium + clean)
       NOTE: Added styles only — existing CSS left unchanged.
    ========================================================= */
    .sitefooter{
      padding: 78px 0 18px;
      background: var(--page-bg);
    }

    .sitefooter__panel{
      position:relative;
      border-radius: var(--radius-xl);
      overflow:hidden;
      border: 1px solid var(--sec-panel-border);
      background: var(--sec-panel-bg);
      box-shadow: var(--sec-panel-shadow);
      padding: 34px;
    }

    .sitefooter__panel::before{
      content:"";
      position:absolute; inset:-40%;
      background-image: var(--grain);
      opacity:.08;
      mix-blend-mode: overlay;
      pointer-events:none;
      transform: rotate(10deg);
    }

    .sitefooter__grid{
      position:relative;
      display:grid;
      grid-template-columns: 1.05fr .9fr 1.25fr;
      gap: 24px;
      align-items:start;
    }

    .sitefooter__brand{
      display:flex;
      flex-direction:column;
      gap: 14px;
      padding: 10px 6px;
    }

    .sitefooter__logo{
      display:flex;
      align-items:center;
      gap: 14px;
      text-decoration:none;
      color: inherit;
    }

    .sitefooter__mark{
      width: 72px;
      height: 72px;
      border-radius: 22px;
      display:grid;
      place-items:center;
      background: var(--sec-pill-blue-bg);
      border: 1px solid var(--sec-pill-blue-border);
      box-shadow: var(--sec-pill-shadow);
      flex: 0 0 auto;
    }

    .sitefooter__mark svg{ width: 46px; height: 46px; }

    .sitefooter__brandtext{
      display:flex;
      flex-direction:column;
      gap: 4px;
      min-width:0;
    }

    .sitefooter__brandtext strong{
      font-weight: 950;
      letter-spacing: -0.01em;
      color: var(--sec-title);
      font-size: 16px;
      line-height: 1.2;
    }

    .sitefooter__brandtext span{
      color: var(--sec-body);
      font-weight: 720;
      font-size: 13.5px;
      line-height: 1.35;
      max-width: 36ch;
    }

    .sitefooter__cta{
      display:flex;
      flex-direction:column;
      gap: 10px;
      align-items:flex-start;
      margin-top: 6px;
    }

    /* Footer pills: reuse existing .pill but theme-aware */
    .sitefooter .pill{
      border-color: var(--sec-pill-border);
      background: var(--sec-pill-bg);
      color: var(--sec-pill-fg);
      box-shadow: var(--sec-pill-shadow);
    }

    .sitefooter .pill:hover{
      background: var(--sec-card-bg-hover);
      border-color: var(--sec-card-border-hover);
      transform: translateY(-1px);
    }

    .sitefooter .pill--solid{
      background: linear-gradient(135deg, rgba(11,47,102,.94), rgba(10,42,92,.94));
      color: rgba(255,255,255,.92);
      border-color: rgba(255,255,255,.10);
      box-shadow: 0 16px 44px rgba(11,47,102,.22);
    }

    @media (prefers-color-scheme: dark){
      .sitefooter .pill--solid{
        background: linear-gradient(135deg, rgba(143,208,255,.20), rgba(0,0,0,.35));
        color: var(--blue-ice);
        border-color: rgba(143,208,255,.18);
        box-shadow: 0 22px 65px rgba(0,0,0,.55);
      }
    }
    html[data-theme="dark"] .sitefooter .pill--solid{
      background: linear-gradient(135deg, rgba(143,208,255,.20), rgba(0,0,0,.35));
      color: var(--blue-ice);
      border-color: rgba(143,208,255,.18);
      box-shadow: 0 22px 65px rgba(0,0,0,.55);
    }

    /* Links column (single column for links) */
    .sitefooter__links{
      padding: 10px 6px;
      display:flex;
      flex-direction:column;
      gap: 14px;
    }

    .sitefooter__links h4{
      margin:0 0 10px;
      font-size: 14px;
      font-weight: 950;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--sec-body);
    }

    .sitefooter__linkgroups{
      display:grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .sitefooter__group strong{
      display:block;
      font-weight: 950;
      color: var(--sec-title);
      font-size: 13.75px;
      margin-bottom: 8px;
    }

    .sitefooter__group a{
      display:block;
      padding: 8px 10px;
      border-radius: 12px;
      text-decoration:none;
      color: var(--sec-link);
      font-weight: 800;
      font-size: 13px;
      transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
      border: 1px solid transparent;
      width: fit-content;
      max-width: 100%;
    }

    .sitefooter__group a:hover{
      background: var(--sec-pill-bg);
      border-color: var(--sec-pill-border);
      transform: translateY(-1px);
    }

    /* Contact form */
    .sitefooter__formcard{
      border-radius: var(--radius-xl);
      background: var(--sec-card-bg);
      border: 1px solid var(--sec-card-border);
      box-shadow: var(--sec-card-shadow);
      padding: 18px;
      position:relative;
      overflow:hidden;
    }

    .sitefooter__formcard::before{
      content:"";
      position:absolute; inset:-40%;
      background-image: var(--grain);
      opacity:.06;
      mix-blend-mode: overlay;
      pointer-events:none;
      transform: rotate(-8deg);
    }

    .sitefooter__formhead{
      position:relative;
      margin-bottom: 12px;
    }

    .sitefooter__formhead h4{
      margin:0;
      font-size: 14px;
      font-weight: 950;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--sec-body);
    }

    .sitefooter__form{
      position:relative;
      display:flex;
      flex-direction:column;
      gap: 12px;
    }

    .frow{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .flabel{
      display:block;
      font-weight: 900;
      font-size: 12.75px;
      color: var(--sec-title);
      margin: 0 0 6px;
    }

    .flabel .req{ color: rgba(220,38,38,.95); }

    .finput, .fselect{
      width:100%;
      height: 44px;
      border-radius: 14px;
      padding: 0 14px;
      border: 1px solid var(--sec-panel-border);
      background: rgba(255,255,255,.72);
      color: var(--sec-title);
      outline:none;
      font-size: 13.5px;
      font-weight: 700;
      transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
    }

    @media (prefers-color-scheme: dark){
      .finput, .fselect{
        background: rgba(0,0,0,.22);
        border-color: rgba(255,255,255,.12);
        color: rgba(255,255,255,.92);
      }
    }
    html[data-theme="dark"] .finput,
    html[data-theme="dark"] .fselect{
      background: rgba(0,0,0,.22);
      border-color: rgba(255,255,255,.12);
      color: rgba(255,255,255,.92);
    }

    .finput::placeholder{ color: var(--sec-body); opacity: .85; }

    .finput:focus,
    .fselect:focus{
      border-color: var(--sec-card-border-hover);
      box-shadow: 0 0 0 4px rgba(47,124,246,.18);
      background: rgba(255,255,255,.84);
    }

    @media (prefers-color-scheme: dark){
      .finput:focus,
      .fselect:focus{
        box-shadow: 0 0 0 4px rgba(143,208,255,.16);
        background: rgba(0,0,0,.28);
      }
    }
    html[data-theme="dark"] .finput:focus,
    html[data-theme="dark"] .fselect:focus{
      box-shadow: 0 0 0 4px rgba(143,208,255,.16);
      background: rgba(0,0,0,.28);
    }

    .sitefooter__submit{
      width:100%;
      height: 46px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(135deg, rgba(11,47,102,.94), rgba(10,42,92,.94));
      color: rgba(255,255,255,.92);
      font-weight: 950;
      letter-spacing: .01em;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      box-shadow: 0 16px 44px rgba(11,47,102,.22);
      transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
    }

    .sitefooter__submit:hover{
      transform: translateY(-1px);
      box-shadow: 0 22px 58px rgba(11,47,102,.30);
      filter: brightness(1.02);
    }

    @media (prefers-color-scheme: dark){
      .sitefooter__submit{
        background: linear-gradient(135deg, rgba(143,208,255,.20), rgba(0,0,0,.35));
        color: var(--blue-ice);
        border-color: rgba(143,208,255,.18);
        box-shadow: 0 22px 65px rgba(0,0,0,.55);
      }
      .sitefooter__submit:hover{
        box-shadow: 0 30px 85px rgba(0,0,0,.65);
        filter: none;
      }
    }
    html[data-theme="dark"] .sitefooter__submit{
      background: linear-gradient(135deg, rgba(143,208,255,.20), rgba(0,0,0,.35));
      color: var(--blue-ice);
      border-color: rgba(143,208,255,.18);
      box-shadow: 0 22px 65px rgba(0,0,0,.55);
    }

    .sitefooter__status{
      min-height: 18px;
      font-weight: 850;
      font-size: 12.75px;
      color: var(--sec-body);
      margin-top: 2px;
    }

    .sitefooter__bottom{
      margin-top: 14px;
      padding: 14px 10px 0;
      display:flex;
      flex-wrap:wrap;
      gap: 10px 16px;
      align-items:center;
      justify-content:center;
      color: var(--sec-body);
      font-weight: 750;
      font-size: 13px;
    }

    .sitefooter__bottom .sep{ opacity: .45; }

    .sitefooter__bottom address{
      font-style: normal;
      margin:0;
    }

    @media (max-width: 980px){
      .sitefooter{ padding: 60px 0 16px; }
      .sitefooter__panel{ padding: 22px; }
      .sitefooter__grid{ grid-template-columns: 1fr; }
      .frow{ grid-template-columns: 1fr; }
      .sitefooter__cta{ flex-direction: row; flex-wrap:wrap; }
    }



    /* =========================================================
       SECTION 6: Partner With Us (theme-aware; premium + clean)
       NOTE: Added styles only — existing CSS left unchanged.
    ========================================================= */
    .partner{
      padding: 76px 0 84px;
      background: var(--page-bg);
    }

    .partner__panel{
      position:relative;
      border-radius: var(--radius-xl);
      overflow:hidden;
      border: 1px solid var(--sec-panel-border);
      background: var(--sec-panel-bg);
      box-shadow: var(--sec-panel-shadow);
      padding: 34px;
    }

    .partner__panel::before{
      content:"";
      position:absolute; inset:-40%;
      background-image: var(--grain);
      opacity:.08;
      mix-blend-mode: overlay;
      pointer-events:none;
      transform: rotate(10deg);
    }

    .partner__grid{
      position:relative;
      display:grid;
      grid-template-columns: 1.05fr 1fr;
      gap: 28px;
      align-items:stretch;
    }

    .partner__content{
      padding: 10px 8px;
      display:flex;
      flex-direction:column;
      gap: 12px;
      justify-content:center;
    }

    .partner__badge{
      width: fit-content;
      display:inline-flex;
      align-items:center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 999px;
      font-weight: 950;
      font-size: 13px;
      color: rgba(255,255,255,.94);
      background: linear-gradient(135deg, rgba(47,124,246,.96), rgba(29,78,216,.92));
      box-shadow: 0 14px 36px rgba(29,78,216,.22);
      border: 1px solid rgba(255,255,255,.14);
    }

    .partner__badge::before{
      content:"";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--blue-ice), rgba(255,255,255,.88));
      box-shadow: 0 0 0 7px rgba(47,124,246,.16);
    }

    .partner h2{
      margin: 10px 0 6px;
      font-size: clamp(28px, 3.2vw, 46px);
      line-height: 1.06;
      letter-spacing: -0.02em;
      font-weight: 950;
      color: var(--sec-title);
    }

    .partner p{
      margin:0;
      max-width: 60ch;
      color: var(--sec-body);
      line-height: 1.65;
      font-size: 14.5px;
    }

    .partner__actions{
      margin-top: 12px;
      display:flex;
      gap: 12px;
      flex-wrap:wrap;
      align-items:center;
    }

    .partner__btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 12px 18px;
      border-radius: 999px;
      font-weight: 950;
      font-size: 13.5px;
      text-decoration:none;
      white-space:nowrap;

      background: linear-gradient(135deg, rgba(11,47,102,.94), rgba(10,42,92,.94));
      color: rgba(255,255,255,.92);
      box-shadow: 0 16px 44px rgba(11,47,102,.22);
      border: 1px solid rgba(255,255,255,.10);

      transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
    }

    .partner__btn:hover{
      transform: translateY(-1px);
      box-shadow: 0 22px 58px rgba(11,47,102,.30);
      filter: brightness(1.02);
    }

    @media (prefers-color-scheme: dark){
      .partner__btn{
        background: linear-gradient(135deg, rgba(143,208,255,.20), rgba(0,0,0,.35));
        color: var(--blue-ice);
        border-color: rgba(143,208,255,.18);
        box-shadow: 0 22px 65px rgba(0,0,0,.55);
      }
      .partner__btn:hover{
        box-shadow: 0 30px 85px rgba(0,0,0,.65);
        filter: none;
      }
    }
    html[data-theme="dark"] .partner__btn{
      background: linear-gradient(135deg, rgba(143,208,255,.20), rgba(0,0,0,.35));
      color: var(--blue-ice);
      border-color: rgba(143,208,255,.18);
      box-shadow: 0 22px 65px rgba(0,0,0,.55);
    }

    .partner__media{
      border-radius: var(--radius-xl);
      overflow:hidden;
      background: var(--sec-media-bg);
      border: 1px solid var(--sec-media-border);
      box-shadow: var(--sec-media-shadow);
      min-height: 380px;
      position:relative;
    }

    .partner__media::before{
      content:"";
      position:absolute; inset:0;
      background:
        var(--sec-media-glow),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.10));
      pointer-events:none;
    }

    .partner__media::after{
      content:"";
      position:absolute; inset:-35%;
      background-image: var(--grain);
      opacity:.10;
      mix-blend-mode: overlay;
      pointer-events:none;
      transform: rotate(-8deg);
    }

    .partner__media img{
      width:100%;
      height:100%;
      object-fit: cover;
      transform: scale(1.02);
    }

    @media (max-width: 980px){
      .partner{ padding: 64px 0 72px; }
      .partner__panel{ padding: 22px; }
      .partner__grid{ grid-template-columns: 1fr; }
      .partner__media{ min-height: 280px; }
      .partner__content{ padding: 0; }
    }
	/* =========================================================
   MOBILE/TABLET NAV — APPEND (FIXES scroll + theme)
========================================================= */

:root{
  --navpanel-bg: var(--sec-panel-bg);
  --navpanel-border: var(--sec-panel-border);
  --navpanel-shadow: var(--shadow);
  --navpanel-text: var(--sec-title);
  --navpanel-hover: var(--sec-pill-bg);
  --navoverlay: rgba(0,0,0,.35);
}
@media (prefers-color-scheme: dark){ :root{ --navoverlay: rgba(0,0,0,.55); } }
html[data-theme="dark"]{ --navoverlay: rgba(0,0,0,.55); }
html[data-theme="light"]{ --navoverlay: rgba(0,0,0,.35); }

.navbtn{ display:none; }

.nav__overlay{
  position: fixed;
  inset: 0;
  background: var(--navoverlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9998; /* below header (9999) */
}

body.nav-locked{ overflow:hidden; }

@media (max-width: 980px){
  .navbtn{ display:grid; }

  /* ✅ CRITICAL FIX:
     your scrolled state adds transform on .header__bar, which breaks fixed menu by clipping it.
     Remove transform on mobile and keep the "lift" by moving the header top instead. */
  .header{ transition: top var(--dur) var(--ease); }
  .header.is-scrolled{ top: 16px; } /* was 18px + bar translateY(-2px) */

  .header.is-scrolled .header__bar{
    transform: none !important;     /* prevents fixed menu becoming "fixed inside" the bar */
  }

  /* When menu is open, never clip it */
  .header.nav-open .header__bar{
    overflow: visible;
  }

  /* Mobile nav panel (fixed, theme-aware) */
  #primaryNav{
    display:none;
    position: fixed;
    left: 14px;
    right: 14px;
    top: var(--nav-top, 86px);
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border-radius: 18px;

    background: var(--navpanel-bg);
    border: 1px solid var(--navpanel-border);
    box-shadow: var(--navpanel-shadow);

    color: var(--navpanel-text);
    z-index: 10000;
  }

  .header.nav-open #primaryNav{ display:flex; }

  #primaryNav a{
    color: inherit;
    text-decoration: none;
    font-size: 14px;
    font-weight: 850;
    padding: 12px 12px;
    border-radius: 14px;
    opacity: 1;
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
  }

  #primaryNav a:hover{
    background: var(--navpanel-hover);
    transform: translateY(-1px);
  }
}
}


/* =========================================================
   PRODUCTS PAGE (premium + plain + theme-aware)
   ========================================================= */
  .page{
    padding-top: 108px; /* fixed header offset */
  }
  @media (max-width: 520px){
    .page{ padding-top: 98px; }
  }

  /* =========================================================
     HALF VIDEO HERO (Products)
     ========================================================= */
  .hero-half{
    position: relative;
    width: 100%;
    height: 50vh;           /* half screen height */
    min-height: 360px;
    max-height: 600px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    background:
      radial-gradient(900px 520px at 22% 28%, rgba(47,124,246,.20), rgba(0,0,0,0)),
      linear-gradient(135deg, rgba(11,47,102,.18), rgba(255,255,255,0));
  }
  @media (max-width: 520px){
    .hero-half{ min-height: 300px; }
  }

  .hero-half__video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit: cover;
    transform: scale(1.02);
    filter: saturate(1.05) contrast(1.02);
  }

  .hero-half::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.14) 52%, rgba(0,0,0,.34) 100%),
      radial-gradient(760px 420px at 30% 30%, rgba(143,208,255,.22), rgba(0,0,0,0));
    opacity: .78;
    pointer-events:none;
  }
  html[data-theme="light"] .hero-half::before{
    opacity: .62;
  }

  .hero-half::after{
    content:"";
    position:absolute;
    inset:-35%;
    background-image: var(--grain);
    opacity:.06;
    mix-blend-mode: overlay;
    pointer-events:none;
    transform: rotate(10deg);
  }

  .hero-half__inner{
    position: relative;
    z-index: 2;
    padding: 28px 0 30px;
  }

  .hero-half__inner h1{
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: clamp(28px, 3.4vw, 54px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    font-weight: 950;
    color: var(--sec-title);
    padding: 14px 18px;
    border-radius: 18px;
    background: var(--sec-pill-bg);
    border: 1px solid var(--sec-pill-border);
    box-shadow: var(--sec-pill-shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  @media (prefers-reduced-motion: reduce){
    .hero-half__video{ display:none; }
    .hero-half{
      background:
        radial-gradient(900px 520px at 22% 28%, rgba(47,124,246,.22), rgba(0,0,0,0)),
        linear-gradient(135deg, rgba(11,47,102,.35), rgba(0,0,0,0));
    }
  }

  .products{
    padding: 42px 0 84px;
    background: var(--page-bg);
  }

  .products__panel{
    position:relative;
    border-radius: var(--radius-xl);
    overflow:hidden;
    border: 1px solid var(--sec-panel-border);
    background: var(--sec-panel-bg);
    box-shadow: var(--sec-panel-shadow);
    padding: 34px;
  }
  .products__panel::before{
    content:"";
    position:absolute; inset:-40%;
    background-image: var(--grain);
    opacity:.08;
    mix-blend-mode: overlay;
    pointer-events:none;
    transform: rotate(10deg);
  }

  .products__head{
    position:relative;
    display:flex;
    flex-direction:column;
    gap: 10px;
    text-align:center;
    margin-bottom: 18px;
  }
  .products__head h1,
  .products__head h2{
    margin:0;
    font-size: clamp(30px, 3.2vw, 48px);
    line-height: 1.07;
    letter-spacing:-0.02em;
    font-weight: 950;
    color: var(--sec-title);
  }
  .products__head p{
    margin:0 auto;
    max-width: 78ch;
    color: var(--sec-body);
    line-height: 1.7;
    font-size: 14.75px;
  }

  .products__kicker{
    display:flex;
    justify-content:center;
    gap: 10px;
    flex-wrap:wrap;
    margin-bottom: 4px;
  }
  .products__kicker .tagpill{
    font-size: 13.5px;
    padding: 10px 14px;
  }

  .products__toolbar{
    position:relative;
    margin-top: 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 14px;
    flex-wrap:wrap;
  }

  .ptabs{
    display:flex;
    gap: 10px;
    flex-wrap:wrap;
    justify-content:center;
    flex: 1;
  }
  .ptab{
    appearance:none;
    border: 1px solid var(--sec-pill-border);
    background: var(--sec-pill-bg);
    color: var(--sec-pill-fg);
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 900;
    font-size: 13px;
    cursor:pointer;
    box-shadow: var(--sec-pill-shadow);
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), filter var(--dur) var(--ease);
    white-space:nowrap;
  }
  .ptab:hover{ transform: translateY(-1px); filter: saturate(1.02); }
  .ptab.is-active{
    background: var(--sec-pill-blue-bg);
    border-color: var(--sec-pill-blue-border);
    color: var(--sec-pill-blue-fg);
  }

  .pactions{
    display:flex;
    gap: 10px;
    align-items:center;
    justify-content:center;
  }

  .pgrid{
    position:relative;
    margin-top: 22px;
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
  }

  .pcard{
    grid-column: span 4;
    border-radius: var(--radius-lg);
    background: var(--sec-card-bg);
    border: 1px solid var(--sec-card-border);
    box-shadow: var(--sec-card-shadow);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-height: 340px;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
    will-change: transform;
    position:relative;
  }
  .pcard:hover{
    transform: translateY(-4px);
    background: var(--sec-card-bg-hover);
    border-color: var(--sec-card-border-hover);
    box-shadow: var(--sec-card-shadow-hover);
  }

  .pmedia{
    position:relative;
    height: 178px;
    background: var(--sec-media-bg);
    border-bottom: 1px solid var(--sec-media-border);
    overflow:hidden;
  }
  .pmedia::before{
    content:"";
    position:absolute; inset:0;
    background:
      var(--sec-media-glow),
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.06));
    pointer-events:none;
  }
  .pmedia::after{
    content:"";
    position:absolute; inset:-35%;
    background-image: var(--grain);
    opacity:.08;
    mix-blend-mode: overlay;
    pointer-events:none;
    transform: rotate(-8deg);
  }
  .pmedia img{
    width:100%; height:100%;
    object-fit:cover;
    transform: scale(1.02);
    filter: saturate(1.02) contrast(1.02);
  }

  .pbody{
    padding: 18px 18px 16px;
    display:flex;
    flex-direction:column;
    gap: 10px;
    flex:1;
  }

  .pmeta{
    display:flex;
    flex-wrap:wrap;
    gap: 8px;
    align-items:center;
    justify-content:flex-start;
  }
  .pchip{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid var(--sec-pill-border);
    background: rgba(255,255,255,.35);
    font-weight: 900;
    font-size: 12px;
    color: var(--sec-title);
  }
  @media (prefers-color-scheme: dark){
    .pchip{ background: rgba(0,0,0,.22); }
  }
  html[data-theme="dark"] .pchip{ background: rgba(0,0,0,.22); }

  .pcard h3{
    margin:0;
    font-size: 16.5px;
    font-weight: 950;
    letter-spacing: -.01em;
    color: var(--sec-title);
  }
  .pcard p{
    margin:0;
    color: var(--sec-body);
    line-height: 1.6;
    font-size: 13.5px;
  }

  .pfoot{
    margin-top:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    flex-wrap:wrap;
    padding-top: 6px;
  }
  .pprice{
    font-weight: 950;
    font-size: 12.75px;
    color: var(--sec-body);
  }

  .pcard .cta-mini{
    padding: 10px 12px;
    font-size: 12.25px;
  }

  /* Locked state */
  .pcard--locked .pmedia,
  .pcard--locked .pbody{
    filter: blur(7px);
    opacity: .58;
  }
  .pcard--locked:hover{
    transform:none;
    box-shadow: var(--sec-card-shadow);
  }

  .plock{
    position:absolute;
    inset: 10px;
    border-radius: calc(var(--radius-lg) - 8px);
    display:grid;
    place-items:center;
    pointer-events:none;
  }
  .plock__box{
    pointer-events:auto;
    display:flex;
    flex-direction:column;
    gap: 10px;
    align-items:center;
    text-align:center;
    padding: 14px 14px;
    border-radius: 18px;
    border: 1px solid var(--sec-panel-border);
    background: rgba(255,255,255,.70);
    box-shadow: 0 18px 50px rgba(0,0,0,.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    max-width: 240px;
  }
  @media (prefers-color-scheme: dark){
    .plock__box{
      background: rgba(0,0,0,.40);
      border-color: rgba(255,255,255,.12);
      box-shadow: 0 26px 70px rgba(0,0,0,.55);
    }
  }
  html[data-theme="dark"] .plock__box{
    background: rgba(0,0,0,.40);
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 26px 70px rgba(0,0,0,.55);
  }

  .plock__icon{
    width: 42px; height: 42px;
    border-radius: 14px;
    display:grid; place-items:center;
    background: linear-gradient(135deg, rgba(47,124,246,.18), rgba(255,255,255,.55));
    border: 1px solid rgba(29,78,216,.20);
  }
  @media (prefers-color-scheme: dark){
    .plock__icon{
      background: linear-gradient(135deg, rgba(143,208,255,.12), rgba(0,0,0,.40));
      border-color: rgba(143,208,255,.20);
    }
  }
  html[data-theme="dark"] .plock__icon{
    background: linear-gradient(135deg, rgba(143,208,255,.12), rgba(0,0,0,.40));
    border-color: rgba(143,208,255,.20);
  }

  .plock__title{
    font-weight: 950;
    color: var(--sec-title);
    letter-spacing: -.01em;
  }
  .plock__sub{
    font-weight: 800;
    font-size: 12.75px;
    color: var(--sec-body);
    line-height: 1.5;
  }

  .plock__actions{
    display:flex;
    gap: 10px;
    flex-wrap:wrap;
    justify-content:center;
  }
  .plock__actions a{
    pointer-events:auto;
  }

  /* Responsive */
  @media (max-width: 1080px){
    .pcard{ grid-column: span 6; }
  }
  @media (max-width: 680px){
    .products__panel{ padding: 22px; }
    .pcard{ grid-column: span 12; }
    .pmedia{ height: 170px; }
  }

  /* Small help row */
  .products__note{
    position:relative;
    margin-top: 18px;
    display:flex;
    justify-content:center;
  }
  .pnote{
    width:min(860px, 100%);
    border-radius: 18px;
    border: 1px solid var(--sec-panel-border);
    background: rgba(255,255,255,.55);
    padding: 14px 16px;
    display:flex;
    gap: 12px;
    align-items:flex-start;
    justify-content:space-between;
    box-shadow: 0 12px 34px rgba(0,0,0,.06);
  }
  @media (prefers-color-scheme: dark){
    .pnote{ background: rgba(0,0,0,.28); box-shadow: 0 20px 55px rgba(0,0,0,.45); }
  }
  html[data-theme="dark"] .pnote{ background: rgba(0,0,0,.28); box-shadow: 0 20px 55px rgba(0,0,0,.45); }

  .pnote strong{ color: var(--sec-title); font-weight: 950; }
  .pnote span{ color: var(--sec-body); font-weight: 750; font-size: 13.25px; line-height: 1.55; }
  .pnote .pnote__cta{ margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; }


/* === Theme-aware compact multi-select dropdown (DROP-IN) === */
.multiselect{ position: relative; }

/* Default/light: align with your inputs/selects */
.multiselect{
  --ms-text: var(--sec-title);
  --ms-border: var(--sec-panel-border);
  --ms-surface-2: rgba(255,255,255,.92);     /* white panel in light */
  --ms-hover: rgba(11,18,32,.06);
}

/* Force LIGHT when user explicitly sets light (even if system is dark) */
html[data-theme="light"] .multiselect{
  --ms-text: var(--sec-title);
  --ms-border: var(--sec-panel-border);
  --ms-surface-2: rgba(255,255,255,.92);
  --ms-hover: rgba(11,18,32,.06);
}

/* Dark theme (explicit toggle) */
html[data-theme="dark"] .multiselect{
  --ms-text: rgba(255,255,255,.92);
  --ms-border: rgba(255,255,255,.14);
  --ms-surface-2: rgba(0,0,0,.72);          /* ✅ more solid in dark */
  --ms-hover: rgba(255,255,255,.08);
}

/* System dark ONLY when not explicitly forced to light */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .multiselect{
    --ms-text: rgba(255,255,255,.92);
    --ms-border: rgba(255,255,255,.14);
    --ms-surface-2: rgba(0,0,0,.92);        /* ✅ more solid in dark */
    --ms-hover: rgba(255,255,255,.08);
  }
}

/* Button: keep chevron right next to "Please Select" */
.multiselect__btn{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--ms-text);
}

.multiselect__value{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multiselect__chev{
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  opacity: .8;
  transition: transform .18s ease, opacity .18s ease;
}

.multiselect[data-open="true"] .multiselect__chev{
  transform: rotate(180deg);
  opacity: 1;
}

/* Required helper input stays invisible */
.multiselect__required{
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

/* Panel */
.multiselect__panel{
  position: absolute;
  left: 0; right: 0;
  z-index: 50;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--ms-border);
  background: var(--ms-surface-2);
  color: var(--ms-text);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  max-height: 240px;
  overflow: auto;
  display: none;
}

/* Slightly stronger shadow in dark for readability */
html[data-theme="dark"] .multiselect__panel{
  box-shadow: 0 22px 65px rgba(0,0,0,.55);
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .multiselect__panel{
    box-shadow: 0 22px 65px rgba(0,0,0,.55);
  }
}

/* Open upwards for footer */
.multiselect--up .multiselect__panel{
  bottom: calc(100% + 8px);
}

.multiselect[data-open="true"] .multiselect__panel{ display: block; }

/* Compact options */
.multiselect__panel .opt{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  border-radius: 10px;
  cursor: pointer;
}

.multiselect__panel .opt:hover{
  background: var(--ms-hover);
}

.multiselect__panel input[type="checkbox"]{
  accent-color: var(--blue-core, #2f7cf6);
}

/* Mobile */
@media (max-width: 820px){
  .multiselect__panel{ max-height: 200px; }

  /* Optional: on mobile open downward to avoid footer clipping */
  .multiselect--up .multiselect__panel{
    bottom: auto;
    top: calc(100% + 8px);
  }
}