:root{
      /* Design tokens (from logo) */
      --gx-bg: #000000;        /* canvas */
      --gx-ink: #0C132A;       /* deep navy for panels */
      --gx-text: #D4DDEB;      /* primary text on dark */
      --gx-muted: #233F66;     /* secondary text / borders */
      --gx-accent: #C905AF;    /* electric magenta */
      --gx-accent-2: #9EC6E5;  /* cyan glow */
      --gx-blue: #5188BD;      /* utility */
      --gx-highlight: #F7F7FA; /* white highlights */

      --radius: 16px;
      --shadow: 0 10px 30px rgba(0,0,0,.4);
      --maxw: 1200px;
    }
    html,body{height:100%}
    body{
      margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
      background: var(--gx-bg); color: var(--gx-text); line-height:1.5;
    }
    code, kbd, pre, .mono{font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace}
    a{color:inherit; text-decoration:none}
    a:hover{ text-decoration: underline }
    .container{max-width: var(--maxw); margin-inline:auto; padding: clamp(16px, 3vw, 32px)}
    header{
      position: sticky; top:0; z-index: 20; backdrop-filter: blur(6px);
      background: linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,.5));
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .nav{display:flex; align-items:center; justify-content:space-between; gap:16px}
    .brand{display:flex; align-items:center; gap:10px; font-weight:700}
    .brand .dot{width:10px; height:10px; border-radius:999px; background: linear-gradient(90deg, var(--gx-accent-2), var(--gx-accent)); box-shadow: 0 0 20px var(--gx-accent)}
    .nav a{opacity:.85}
    .nav a:hover{opacity:1}
    .navlinks{display:flex; gap:18px; flex-wrap:wrap}
    .btn{background: linear-gradient(90deg, var(--gx-accent-2), var(--gx-accent)); color:#000; padding:10px 14px; border-radius: 999px; font-weight: 700; border:0; box-shadow: var(--shadow); cursor:pointer}
    .btn[aria-disabled="true"]{opacity:.6; pointer-events:none}

    /* hero */
    .hero{display:grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 4vw, 48px); align-items:top; padding-block: clamp(30px, 8vw, 60px)}
    .title{font-size: clamp(22px, 2.5vw, 54px); line-height:1.08; font-weight:800; letter-spacing:-.02em}
    .lead{font-size: clamp(16px, 1.6vw, 20px); opacity:.9; max-width: 62ch}
    .hero-videos{display:flex; flex-direction:column; gap:24px}
      .hero img,
      .hero video,
      .yt-consent,
      .hero .yt-iframe{width:100%; height:auto; display:flex; border-radius: var(--radius); box-shadow: 0 0 120px rgba(201,5,175,.25), 0 0 60px rgba(158,198,229,.2)}
    .yt-consent,
    .hero .yt-iframe{aspect-ratio:16/9; align-items:center; justify-content:center; flex-direction:column}
    .zoomable{cursor:zoom-in}

    /* sections */
    section{scroll-margin-top: 64px}
    .section{padding-block: clamp(40px, 8vw, 100px)}
    .h2{font-size: clamp(22px, 3vw, 32px); margin-bottom: 12px}
    .muted{color: #9BA9C4}

    .panel{background: linear-gradient(180deg, rgba(12,19,42,.7), rgba(12,19,42,.35)); border:1px solid rgba(255,255,255,.06); border-radius: var(--radius); padding: clamp(8px, 2.5vw, 8px)}

    .grid-2{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px}
    .grid-3{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:8px}
    @media (max-width: 860px){
      .hero{grid-template-columns: 1fr}
      .grid-2,.grid-3{grid-template-columns: 1fr}
    }

    ul.clean{list-style:none; padding:0; margin:0}
    ul.clean li{padding-left:28px; position:relative; margin: 10px 0}
    ul.clean li::before{content:""; position:absolute; left:0; top:9px; width:14px; height:4px; border-radius:8px; background: linear-gradient(90deg, var(--gx-accent-2), var(--gx-accent))}

    /* cards */
    .card{background: rgba(12,19,42,.45); border:1px solid rgba(255,255,255,.06); border-radius: var(--radius); overflow:hidden}
    .card .body{padding:12px}
    .eyebrow{font-size: 12px; text-transform:uppercase; letter-spacing:.14em; color:#A2B4D6}
    .caption{font-size: 13px; color:#AAB7CF}

    /* gallery */
    .gallery{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:8px}
    .gallery .thumb{background: radial-gradient(80% 100% at 0% 100%, rgba(158,198,229,.18), transparent 60%), radial-gradient(80% 100% at 100% 0%, rgba(201,5,175,.18), transparent 60%), #0B0B0E; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; aspect-ratio:1/1; cursor:zoom-in}
    .gallery img{width:100%; height:100%; object-fit:flex; display:block; transition:transform .3s}
    .gallery .thumb:hover img{transform:scale(1.05)}
    @media (max-width: 1200px){ .gallery{grid-template-columns: 1fr 1fr} }
    @media (max-width: 560px){ .gallery{grid-template-columns: 1fr} }

    /* lightbox */
    .lightbox{position:fixed; inset:0; background:rgba(0,0,0,.8); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; opacity:0; transition:opacity .3s}
    .lightbox.open{opacity:1}
    .lightbox[hidden]{display:none}
    .lightbox img{max-width:90vw; max-height:90vh; border-radius:var(--radius); box-shadow:var(--shadow); transform:scale(.9); transition:transform .3s}
    .lightbox.open img{transform:scale(1)}

    /* FAQ */
    details{background: rgba(12,19,42,.45); border:1px solid rgba(255,255,255,.06); border-radius: var(--radius); padding: 12px 12px}
    details + details{margin-top:10px}
    summary{cursor:pointer; font-weight:600}

    /* CTA */
    .cta{background: radial-gradient(100% 120% at 0% 100%, rgba(158,198,229,.2), transparent 60%), radial-gradient(100% 120% at 100% 0%, rgba(201,5,175,.2), transparent 60%)}

    /* form */
    form{display:grid; gap:12px; max-width:680px}
    label{display:grid; gap:6px; font-weight:600}
    input[type="text"], input[type="email"], select, textarea{
      background:#0B1225; color: var(--gx-highlight); border:1px solid rgba(255,255,255,.1);
      border-radius: 10px; padding: 12px 14px; font: inherit
    }
    input:focus, select:focus, textarea:focus{ outline: 2px solid transparent; box-shadow: 0 0 0 3px var(--gx-accent-2) }
    input:invalid, textarea:invalid{ border-color: #a11 }
    .inline{display:flex; gap:10px; align-items:center}
    .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

    /* accessibility focus */
    :focus-visible{ outline: 2px dashed var(--gx-accent-2); outline-offset: 2px }

    /* reduced motion */
    @media (prefers-reduced-motion: no-preference){
      .btn, .nav a{ transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease }
      .btn:hover{ transform: translateY(-1px) }
    }
  
    /* chips */
    .chips{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0}
    .chip{display:inline-flex; align-items:center; gap:8px; font-size:13px; padding:8px 10px; border-radius:999px;
      background: rgba(12,19,42,.55); border:1px solid rgba(255,255,255,.08)}
    .chip svg{width:14px; height:14px; opacity:.9}

    /* illustrated cards */
    .info-grid{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:24px}
    .info-card{background: linear-gradient(180deg, rgba(12,19,42,.7), rgba(12,19,42,.35)); border:1px solid rgba(255,255,255,.06);
      border-radius: var(--radius); padding: clamp(16px, 2.5vw, 28px)}
    .info-card h3{margin:0 0 8px; font-size: clamp(16px, 1.6vw, 20px)}
    .info-card .small{font-size:13px; color:#AAB7CF}
    .info-card blockquote{margin:12px 0 0; padding-left:12px; border-left:2px solid var(--gx-accent-2)}
    .thesis-meta{display:grid; gap:6px; margin:12px 0 0}
    .thesis-meta .k{color:#A2B4D6; font-size:12px; text-transform:uppercase; letter-spacing:.12em}
    .thesis-meta .v{font-weight:600}
    .legal-note{font-size:12px; color:#AAB7CF; margin-top:10px}
    @media (max-width: 860px){ .info-grid{grid-template-columns: 1fr} }

/* Additional styles for legal pages */
.meta{color: var(--gx-muted); font-size:14px}
.small{font-size:14px; color:#AAB7CF}
.tldr{background: rgba(12,19,42,.45); border:1px solid rgba(255,255,255,.06); padding:16px; border-radius: var(--radius); margin:20px 0}
nav.toc{margin:20px 0; padding:12px 16px; border-left:3px solid var(--gx-muted); background: rgba(12,19,42,.45); border-radius:8px}
nav.toc a{color: var(--gx-accent)}
.tldr h2{margin:0 0 8px; font-size:18px}
.tldr ul{margin:0; padding-left:18px}