/* ============================================================
      AI ATTENTION LAB — PLAYFUL RTS STYLE (Bright + Vibrant)
      - Big color blocks
      - Faction accents (Red/Blue/Gold/Purple)
      - “Map grid” + “tactical arcs”
      - Chunky cards, glossy buttons, fun UI chips
      ============================================================ */

    :root{
      /* RTS-ish vibrant palette */
      --navy:#0f1c3f;
      --blue:#2f6bff;
      --cyan:#2ee8ff;
      --teal:#26d7b8;

      --gold:#ffd24a;
      --orange:#ff8a2a;
      --red:#ff3b3b;
      --magenta:#ff4fd8;
      --purple:#7b4bb7;

      --stone:#f4efe6;
      --ink:#0b1020;
      --white:#ffffff;

      --card:#ffffff;
      --shadow: 0 14px 40px rgba(0,0,0,.18);
      --shadowSoft: 0 10px 26px rgba(0,0,0,.12);

      --radius-xl: 26px;
      --radius-lg: 20px;
      --radius-md: 16px;

      --maxw: 1180px;

      --gridSize: 44px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      padding-top: var(--navOffset, 0px);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color: var(--ink);
      background:
        radial-gradient(circle at 10% 10%, rgba(47,107,255,.18), transparent 40%),
        radial-gradient(circle at 90% 15%, rgba(255,210,74,.22), transparent 42%),
        radial-gradient(circle at 20% 80%, rgba(255,79,216,.18), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(38,215,184,.20), transparent 48%),
        linear-gradient(180deg, #ffffff 0%, #fff7ff 50%, #f6fbff 100%);
      line-height:1.5;
      overflow-x:hidden;
    }

    html[data-theme="dark"]{
      color-scheme: dark;
      --ink: rgba(255,255,255,.92);
      --card: rgba(18,26,54,.92);
      --shadow: 0 14px 40px rgba(0,0,0,.48);
      --shadowSoft: 0 10px 26px rgba(0,0,0,.34);
    }
    html[data-theme="dark"] body{
      background:
        radial-gradient(circle at 10% 10%, rgba(47,107,255,.22), transparent 44%),
        radial-gradient(circle at 90% 15%, rgba(255,210,74,.18), transparent 46%),
        radial-gradient(circle at 20% 80%, rgba(255,79,216,.16), transparent 50%),
        radial-gradient(circle at 85% 85%, rgba(38,215,184,.16), transparent 52%),
        linear-gradient(180deg, #070a14 0%, #0a1230 50%, #070a14 100%);
    }

    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}

    .section{position:relative;}
    footer{position:relative;}
    .hero,
    .section{scroll-margin-top: calc(var(--navOffset, 0px) + 12px);}
    .section-num{
      position:absolute;
      top: 10px;
      left: 10px;
      z-index: 80;
      font-size: 12px;
      font-weight: 1000;
      letter-spacing: .08em;
      padding: .2rem .45rem;
      border-radius: 999px;
      background: rgba(255,255,255,.78);
      border: 2px solid rgba(0,0,0,.08);
      box-shadow: var(--shadowSoft);
      color: rgba(11,16,32,.75);
      pointer-events:none;
      user-select:none;
    }

    /* Layout */
    .container{
      width:min(var(--maxw), calc(100% - 2rem));
      margin-inline:auto;
    }
    .section{padding: clamp(3.2rem, 6vw, 6rem) 0;}
    .grid{display:grid; gap: clamp(1rem, 2.6vw, 2rem);}
    .two-col{grid-template-columns: minmax(0, var(--twoColLeft, 1.15fr)) minmax(0, var(--twoColRight, .85fr));}
    .section[data-section="11"]{--twoColLeft: 1fr; --twoColRight: 1fr;}
    .section[data-section="12"]{--twoColLeft: 1fr; --twoColRight: 1fr;}
    .section[data-section="13"]{--twoColLeft: 1fr; --twoColRight: 1fr;}
    .section[data-section="14"]{--twoColLeft: 1fr; --twoColRight: 1fr;}
    .section[data-section="15"]{--twoColLeft: 1fr; --twoColRight: 1fr;}

    .section:is([data-section="11"],[data-section="12"],[data-section="13"],[data-section="14"],[data-section="15"],[data-section="16"]){
      --frameBg: rgba(244,239,230,.88);
    }

    body[data-page="home"]{
      --homeFrameBg: rgba(232,224,212,.92);
    }
    body[data-page="home"] .panel{background: var(--homeFrameBg);}
    body[data-page="home"] .shot{
      background:
        radial-gradient(circle at 20% 25%, rgba(255,210,74,.22), transparent 48%),
        radial-gradient(circle at 80% 25%, rgba(47,107,255,.18), transparent 48%),
        radial-gradient(circle at 55% 80%, rgba(38,215,184,.16), transparent 55%),
        var(--homeFrameBg);
    }
    body[data-page="home"] .section:is([data-section="11"],[data-section="12"],[data-section="13"],[data-section="14"],[data-section="15"],[data-section="16"]){
      --frameBg: var(--homeFrameBg);
    }

    html[data-theme="dark"] body[data-page="home"]{
      --homeFrameBg: rgba(18,26,54,.90);
    }
    html[data-theme="dark"] .section:is([data-section="11"],[data-section="12"],[data-section="13"],[data-section="14"],[data-section="15"],[data-section="16"]){
      --frameBg: rgba(18,26,54,.90);
    }

    /* .section[data-section="11"], .section[data-section="12"]{--twoColLeft: 1.15fr; --twoColRight: .85fr;} */
    @media (max-width: 920px){
      .two-col{grid-template-columns:1fr;}
      .two-col > .shot,
      .two-col > .hero-visual,
      .two-col > aside{order:-1;}

      .section[data-section="11"] .panel .badge,
      .section[data-section="12"] .panel .badge,
      .section[data-section="13"] .panel .badge,
      .section[data-section="14"] .panel .badge,
      .section[data-section="15"] .panel .badge{
        position: static;
        display: inline-flex;
        margin-bottom: .75rem;
      }
    }

    /* Top Nav */
    .nav{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      isolation: isolate;
      background: rgba(255,255,255,.75);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(0,0,0,.08);
    }
    html[data-theme="dark"] .nav{
      background: rgba(10,15,34,.70);
      border-bottom: 1px solid rgba(255,255,255,.10);
    }
    .nav-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:.9rem 0;
      gap:1rem;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:.7rem;
      font-weight: 900;
      letter-spacing:.02em;
    }
    .mark{
      width:42px; height:42px;
      border-radius: 14px;
      position:relative;
      box-shadow: var(--shadowSoft);
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 55%),
        linear-gradient(135deg, var(--blue), var(--magenta));
      overflow:hidden;
      border: 2px solid rgba(0,0,0,.08);
    }
    /* Map grid overlay inside logo mark */
    .mark::after{
      content:"";
      position:absolute; inset:-30%;
      background:
        radial-gradient(circle at 55% 45%, rgba(255,210,74,.55), transparent 40%),
        linear-gradient(0deg, rgba(255,255,255,.25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px);
      background-size: auto, 10px 10px, 10px 10px;
      transform: rotate(12deg);
      opacity:.9;
      pointer-events:none;
    }

    .nav-links{
      display:flex;
      gap: 1rem;
      align-items:center;
      font-weight: 800;
      color: rgba(11,16,32,.72);
    }
    .nav-links a{
      padding:.35rem .5rem;
      border-radius: 999px;
    }
    .nav-links a:hover{
      background: rgba(47,107,255,.10);
      color: rgba(11,16,32,.92);
    }
    html[data-theme="dark"] .nav-links{color: rgba(255,255,255,.78);}
    html[data-theme="dark"] .nav-links a:hover{
      background: rgba(255,255,255,.10);
      color: rgba(255,255,255,.92);
    }
    .nav-cta{
      display:flex;
      gap:.7rem;
      align-items:center;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    @media (max-width: 920px){
      .nav-links{display:none;}
    }

    /* Buttons (glossy + punchy) */
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      padding:.85rem 1.05rem;
      border-radius: 999px;
      font-weight: 900;
      border: 2px solid rgba(0,0,0,.08);
      box-shadow: var(--shadowSoft);
      transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
      will-change: transform;
      user-select:none;
    }
    .btn:active{transform: translateY(1px) scale(.99)}
    .btn:hover{transform: translateY(-1px)}
    .btn-primary{
      color: var(--ink);
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.85), rgba(255,255,255,0) 45%),
        linear-gradient(135deg, var(--gold), var(--orange));
    }
    .btn-primary:hover{filter:saturate(1.1)}
    .btn-secondary{
      color: var(--white);
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), rgba(255,255,255,0) 50%),
        linear-gradient(135deg, var(--blue), var(--purple));
    }
    .btn-ghost{
      color: rgba(11,16,32,.88);
      background: rgba(255,255,255,.72);
      border: 2px dashed rgba(0,0,0,.14);
      box-shadow:none;
    }
    .theme-toggle{
      padding: .7rem .9rem;
      font-weight: 1000;
    }

    html[data-theme="dark"] .btn-ghost{
      color: rgba(255,255,255,.88);
      background: rgba(255,255,255,.08);
      border: 2px dashed rgba(255,255,255,.20);
    }
    html[data-theme="dark"] .btn-primary{color: rgba(11,16,32,.96);}

    /* Typography */
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.35rem .65rem;
      border-radius: 999px;
      font-weight: 900;
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size:.78rem;
      background: rgba(255,255,255,.78);
      border: 2px solid rgba(0,0,0,.08);
      box-shadow: var(--shadowSoft);
    }
    .eyebrow .pip{
      width:10px; height:10px; border-radius:999px;
      background: var(--red);
      box-shadow: 0 0 0 4px rgba(255,59,59,.18);
    }

    .h1{
      font-weight: 1000;
      line-height: 1.02;
      font-size: clamp(2.4rem, 5.8vw, 3.9rem);
      margin: .9rem 0 1rem;
      letter-spacing: -0.02em;
    }
    .h2{
      font-weight: 1000;
      line-height: 1.08;
      font-size: clamp(1.75rem, 3.8vw, 2.55rem);
      margin: 0 0 .8rem;
      letter-spacing: -0.015em;
    }
    .subhead{
      font-weight: 1000;
      line-height: 1.15;
      font-size: clamp(1.15rem, 2.5vw, 1.7rem);
      margin: 0 0 .65rem;
      letter-spacing: -0.01em;
    }
    .lead{
      font-size: clamp(1.05rem, 1.6vw, 1.25rem);
      color: rgba(11,16,32,.72);
      max-width: 62ch;
      margin: 0;
    }
    html[data-theme="dark"] .lead{color: rgba(255,255,255,.82);}
    .hero[data-section="02"] .hero-card .lead + .lead{margin-top: .9rem;}
    .section[data-section="16"] .panel{ text-align: center; }
    .section[data-section="16"] .lead{ margin-inline: auto; }
    .section[data-section="16"] .list{
      display: inline-block;
      position: relative;
      left: .45rem;
      text-align: left;
      list-style-position: outside;
      padding-left: 1.25rem;
      margin: .85rem auto 0;
    }
    .section[data-section="16"] .list li{ margin: .25rem 0; }
    .muted{color: rgba(11,16,32,.68)}
    .fine{color: rgba(11,16,32,.55); font-weight: 700;}
    html[data-theme="dark"] .muted{color: rgba(255,255,255,.76)}
    html[data-theme="dark"] .fine{color: rgba(255,255,255,.62)}

    /* HERO */
    .hero{
      position: relative;
      overflow:hidden;
      padding: clamp(3.2rem, 6.5vw, 6.2rem) 0;
    }

    /* Big RTS “Map Grid” overlay */
    .hero::before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(circle at 18% 20%, rgba(47,107,255,.25), transparent 42%),
        radial-gradient(circle at 78% 28%, rgba(255,210,74,.28), transparent 45%),
        radial-gradient(circle at 22% 85%, rgba(255,79,216,.22), transparent 50%),
        linear-gradient(0deg, rgba(11,16,32,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11,16,32,.06) 1px, transparent 1px);
      background-size: auto, auto, auto, var(--gridSize) var(--gridSize), var(--gridSize) var(--gridSize);
      pointer-events:none;
      opacity:.95;
    }

    /* “Tactical arcs” */
    .hero::after{
      content:"";
      position:absolute; inset:-20%;
      background:
        radial-gradient(circle at 70% 55%, transparent 0 58%, rgba(46,232,255,.18) 58.5% 59.5%, transparent 60%),
        radial-gradient(circle at 68% 52%, transparent 0 40%, rgba(255,210,74,.18) 40.5% 41.5%, transparent 42%),
        radial-gradient(circle at 15% 75%, transparent 0 45%, rgba(255,59,59,.14) 45.5% 46.5%, transparent 47%);
      pointer-events:none;
      filter: blur(.2px);
      opacity:.9;
    }

    html[data-theme="dark"] .hero::before{opacity:.28;}
    html[data-theme="dark"] .hero::after{opacity:.38;}

    .hero-inner{position:relative; z-index:2;}

    .hero-card{
      background:
        radial-gradient(circle at 20% 15%, rgba(255,255,255,.95), rgba(255,255,255,.75) 45%, rgba(255,255,255,.55) 100%);
      border: 2px solid rgba(0,0,0,.08);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
      padding: clamp(1.25rem, 2.8vw, 2rem);
      position: relative;
      overflow:hidden;
    }

    html[data-theme="dark"] .hero-card{
      background: rgba(18,26,54,.90);
      border: 2px solid rgba(255,255,255,.10);
    }

    /* Decorative “banner” stripe */
    .hero-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg,
          rgba(47,107,255,.18) 0 20%,
          rgba(255,210,74,.20) 20% 40%,
          rgba(255,59,59,.18) 40% 60%,
          rgba(123,75,183,.18) 60% 80%,
          rgba(38,215,184,.18) 80% 100%);
      opacity:.55;
      transform: translateY(-72%);
      height: 38%;
      pointer-events:none;
    }

    .hero-cta{
      display:flex;
      flex-wrap:wrap;
      gap:.8rem;
      margin-top: 1.25rem;
    }

    /* “Faction chips” */
    .chips{
      display:flex;
      flex-wrap:wrap;
      gap:.65rem;
      margin-top: 1.1rem;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      padding:.45rem .7rem;
      border-radius: 999px;
      background: rgba(255,255,255,.75);
      border: 2px solid rgba(0,0,0,.08);
      box-shadow: var(--shadowSoft);
      font-weight: 900;
      font-size: .88rem;
    }
    html[data-theme="dark"] .chip{
      background: rgba(255,255,255,.08);
      border: 2px solid rgba(255,255,255,.12);
    }
    .flag{
      width: 14px; height: 14px;
      border-radius: 4px;
      box-shadow: 0 0 0 3px rgba(0,0,0,.06);
    }
    .f-red{background: linear-gradient(135deg, var(--red), #ff7878);}
    .f-blue{background: linear-gradient(135deg, var(--blue), #7aa0ff);}
    .f-gold{background: linear-gradient(135deg, var(--gold), #fff2a0);}
    .f-purple{background: linear-gradient(135deg, var(--purple), #b68cff);}

    /* Hero visual panel */
    .hero-visual{
      border-radius: var(--radius-xl);
      border: 2px solid rgba(0,0,0,.08);
      box-shadow: var(--shadow);
      overflow:hidden;
      min-height: 360px;
      background:
        radial-gradient(circle at 20% 25%, rgba(255,255,255,.75), transparent 40%),
        radial-gradient(circle at 80% 25%, rgba(255,210,74,.35), transparent 45%),
        radial-gradient(circle at 55% 75%, rgba(47,107,255,.30), transparent 50%),
        linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.08));
      position:relative;
    }
    html[data-theme="dark"] .hero-visual{
      border: 2px solid rgba(255,255,255,.10);
      background:
        radial-gradient(circle at 20% 25%, rgba(255,255,255,.08), transparent 44%),
        radial-gradient(circle at 80% 25%, rgba(255,210,74,.12), transparent 48%),
        radial-gradient(circle at 55% 75%, rgba(47,107,255,.16), transparent 54%),
        rgba(18,26,54,.90);
    }
    .visual-inner{
      position:absolute; inset:0;
      display:grid; place-items:center;
      text-align:center;
      padding:1.2rem;
    }
    .visual-inner strong{
      display:inline-block;
      font-size:1.05rem;
      padding:.55rem .8rem;
      border-radius: 999px;
      background: rgba(255,255,255,.82);
      border: 2px solid rgba(0,0,0,.08);
      box-shadow: var(--shadowSoft);
    }
    html[data-theme="dark"] .visual-inner strong{
      background: rgba(255,255,255,.10);
      border: 2px solid rgba(255,255,255,.12);
    }
    .visual-inner p{
      margin:.9rem 0 0;
      max-width: 52ch;
      color: rgba(11,16,32,.68);
      font-weight: 800;
    }

    /* Section panels */
    .panel{
      background: rgba(255,255,255,.82);
      border: 2px solid rgba(0,0,0,.08);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
      padding: clamp(1.2rem, 2.6vw, 1.9rem);
      position: relative;
      overflow:hidden;
    }
    html[data-theme="dark"] .panel{
      background: rgba(18,26,54,.90);
      border: 2px solid rgba(255,255,255,.10);
    }
    .section:is([data-section="11"],[data-section="12"],[data-section="13"],[data-section="14"],[data-section="15"],[data-section="16"]) .panel{background: var(--frameBg);}

    /* “Fun corner badges” */
    .badge{
      position:absolute;
      top: 14px;
      right: 14px;
      padding:.35rem .6rem;
      border-radius: 999px;
      font-weight: 1000;
      font-size:.8rem;
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.85), rgba(255,255,255,0) 50%),
        linear-gradient(135deg, var(--magenta), var(--purple));
      color: white;
      border: 2px solid rgba(0,0,0,.08);
      box-shadow: var(--shadowSoft);
    }

    /* Cards */
    .cards{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin-top: 1.4rem;
    }
    @media (max-width: 920px){
      .cards{grid-template-columns:1fr;}
    }
    .card{
      background: var(--card);
      border: 2px solid rgba(0,0,0,.08);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadowSoft);
      padding: 1.05rem;
      position:relative;
      overflow:hidden;
    }
    html[data-theme="dark"] .card{border: 2px solid rgba(255,255,255,.10);}

    .section[data-section="17"] .faq{
      display: grid;
      gap: 1.4rem;
    }
    .section[data-section="17"] .faq__item.card{
      transition: transform .14s ease, box-shadow .14s ease;
      will-change: transform;
    }
    @media (hover:hover){
      .section[data-section="17"] .faq__item.card:hover{
        transform: translateY(-4px);
        box-shadow: var(--shadow);
      }
    }
    .section[data-section="17"] .faq__item.card:focus-within{
      transform: translateY(-4px);
      box-shadow: var(--shadow);
    }
    .card::before{
      content:"";
      position:absolute; inset:-2px;
      background:
        linear-gradient(135deg, rgba(47,107,255,.14), rgba(255,79,216,.12), rgba(255,210,74,.14));
      opacity:.45;
      pointer-events:none;
    }
    .card > *{position:relative}
    .icon{
      width: 46px; height: 46px;
      border-radius: 18px;
      display:grid; place-items:center;
      font-weight: 1000;
      border: 2px solid rgba(0,0,0,.08);
      box-shadow: var(--shadowSoft);
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.85), rgba(255,255,255,0) 55%),
        linear-gradient(135deg, var(--gold), var(--orange));
      color: var(--ink);
      margin-bottom:.7rem;
    }
    .card h3{margin:.1rem 0 .35rem; font-size: 1.08rem; font-weight:1000;}
    .card p{margin:0; color: rgba(11,16,32,.72); font-weight: 700;}

    /* Framework steps */
    .steps{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
      margin-top: 1.1rem;
    }
    @media (max-width: 1000px){
      .steps{grid-template-columns: repeat(2, 1fr);}
    }
    @media (max-width: 520px){
      .steps{grid-template-columns: 1fr;}
    }
    .step{
      border-radius: var(--radius-lg);
      border: 2px solid rgba(0,0,0,.08);
      box-shadow: var(--shadowSoft);
      padding: 1rem;
      background:
        radial-gradient(circle at 20% 15%, rgba(255,255,255,.85), rgba(255,255,255,0) 52%),
        linear-gradient(135deg, rgba(47,107,255,.20), rgba(38,215,184,.16));
      position:relative;
      overflow:hidden;
    }
    .step:nth-child(2){background: radial-gradient(circle at 20% 15%, rgba(255,255,255,.85), rgba(255,255,255,0) 52%), linear-gradient(135deg, rgba(255,210,74,.24), rgba(255,138,42,.16));}
    .step:nth-child(3){background: radial-gradient(circle at 20% 15%, rgba(255,255,255,.85), rgba(255,255,255,0) 52%), linear-gradient(135deg, rgba(255,79,216,.20), rgba(123,75,183,.16));}
    .step:nth-child(4){background: radial-gradient(circle at 20% 15%, rgba(255,255,255,.85), rgba(255,255,255,0) 52%), linear-gradient(135deg, rgba(255,59,59,.20), rgba(255,210,74,.14));}
    .step .num{
      width: 38px; height: 38px;
      border-radius: 16px;
      display:inline-grid; place-items:center;
      font-weight: 1000;
      border: 2px solid rgba(0,0,0,.08);
      background: rgba(255,255,255,.8);
      box-shadow: var(--shadowSoft);
      margin-bottom:.6rem;
    }
    .step h3{margin:0 0 .35rem; font-weight:1000;}
    .step p{margin:0; color: rgba(11,16,32,.72); font-weight: 800;}

    /* Split placeholders */
    .shot{
      border-radius: var(--radius-xl);
      border: 2px dashed rgba(0,0,0,.18);
      background:
        radial-gradient(circle at 20% 25%, rgba(255,210,74,.22), transparent 48%),
        radial-gradient(circle at 80% 25%, rgba(47,107,255,.18), transparent 48%),
        radial-gradient(circle at 55% 80%, rgba(38,215,184,.16), transparent 55%),
        rgba(255,255,255,.86);
      box-shadow: var(--shadowSoft);
      min-height: 300px;
      display:grid;
      place-items:center;
      text-align:center;
      padding: 1rem;
      font-weight: 900;
      color: rgba(11,16,32,.72);
    }
    .section:is([data-section="11"],[data-section="12"],[data-section="13"],[data-section="14"],[data-section="15"],[data-section="16"]) .shot{
      background:
        radial-gradient(circle at 20% 25%, rgba(255,210,74,.22), transparent 48%),
        radial-gradient(circle at 80% 25%, rgba(47,107,255,.18), transparent 48%),
        radial-gradient(circle at 55% 80%, rgba(38,215,184,.16), transparent 55%),
        var(--frameBg);
    }
    .section[data-section="11"] .shot,
    .section[data-section="12"] .shot,
    .section[data-section="13"] .shot,
    .section[data-section="14"] .shot,
    .section[data-section="15"] .shot{border: 2px solid rgba(0,0,0,.08);}
    .section[data-section="11"] .shot img{
      width: min(440px, 100%);
      height: auto;
      margin-inline:auto;
    }
    .section[data-section="12"] .shot img{
      width: min(500px, 100%);
      height: auto;
      margin-inline:auto;
    }
    .section[data-section="13"] .shot img{
      width: min(500px, 100%);
      height: auto;
      margin-inline:auto;
    }
    .section[data-section="14"] .shot img{
      width: min(500px, 100%);
      height: auto;
      margin-inline:auto;
    }
    .section[data-section="15"] .shot img{
      width: min(550px, 100%);
      height: auto;
      margin-inline:auto;
    }
    .shot small{display:block; margin-top:.5rem; font-weight:800; color: rgba(11,16,32,.55);}

    /* Footer */
    footer{
      padding: 3rem 0;
      margin-top: 1rem;
      background:
        radial-gradient(circle at 15% 10%, rgba(47,107,255,.22), transparent 40%),
        radial-gradient(circle at 85% 20%, rgba(255,210,74,.22), transparent 45%),
        linear-gradient(135deg, var(--navy), #09102a);
      color: rgba(255,255,255,.86);
      border-top: 1px solid rgba(255,255,255,.10);
    }
    .footer-grid{
      display:grid;
      grid-template-columns: 1.2fr 1fr 1fr 1fr;
      gap: 1rem;
    }
    @media (max-width: 920px){
      .footer-grid{grid-template-columns: 1fr 1fr;}
    }
    @media (max-width: 520px){
      .footer-grid{grid-template-columns: 1fr;}
    }
    .footer-grid h4{
      margin:.2rem 0 .6rem;
      color:#ffffff;
      font-size: 1rem;
      font-weight: 1000;
    }
    .footer-grid a{
      display:block;
      padding:.2rem 0;
      color: rgba(255,255,255,.78);
      font-weight: 800;
    }
    .footer-grid a:hover{color:#ffffff; text-decoration: underline; text-underline-offset: 4px;}
    .fineprint{
      margin-top: 1.4rem;
      padding-top: 1rem;
      border-top: 1px solid rgba(255,255,255,.10);
      color: rgba(255,255,255,.65);
      font-weight: 800;
      font-size: .92rem;
    }

    /* Utility */
    .center{text-align:center;}
    .spacer{height: .35rem;}