:root{
      --bg:#040713;
      --bg2:#081126;
      --panel:rgba(12,20,42,.54);
      --panel2:rgba(10,18,36,.74);
      --line:rgba(121,166,255,.18);
      --text:#f7f9ff;
      --muted:#9da9bf;
      --cyan:#2ce8ff;
      --blue:#4f7cff;
      --violet:#9a5cff;
      --magenta:#de51ff;
      --green:#51ffd0;
      --shadow:0 20px 80px rgba(0,0,0,.35);
      --radius:24px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100%;
      overflow-x:hidden;
      color:var(--text);
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 76% 26%, rgba(89,70,255,.18), transparent 27%),
        radial-gradient(circle at 60% 70%, rgba(0,224,255,.12), transparent 28%),
        linear-gradient(135deg,#03050d 0%,#050916 45%,#07101f 100%);
    }

    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.28;
      background-image:
        linear-gradient(rgba(117,170,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(117,170,255,.055) 1px, transparent 1px);
      background-size:52px 52px;
      mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 92%);
    }

    canvas#stars{
      position:fixed;
      inset:0;
      width:100%;
      height:100%;
      z-index:-3;
      pointer-events:none;
    }

    .noise{
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      opacity:.03;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
    }

    .orb{
      position:fixed;
      width:520px;
      height:520px;
      border-radius:50%;
      filter:blur(90px);
      opacity:.09;
      pointer-events:none;
      z-index:-2;
    }
    .orb.one{background:#305dff;top:-140px;left:-140px}
    .orb.two{background:#a246ff;right:-180px;top:25%}
    .orb.three{background:#00e5ff;left:40%;bottom:-250px}

    .page{
      width:min(1500px, calc(100% - 42px));
      margin:0 auto;
      position:relative;
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
      padding:28px 0 16px;
      position:relative;
      z-index:20;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      text-decoration:none;
      color:#fff;
      font-weight:800;
      letter-spacing:-.04em;
      font-size:clamp(20px,2vw,28px);
    }

    .brand-mark{
      width:38px;
      height:38px;
      border-radius:12px;
      background:
        linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.02)),
        linear-gradient(135deg,#1bdfff,#7354ff 55%,#e14cff);
      box-shadow:0 0 35px rgba(63,167,255,.28), inset 0 1px rgba(255,255,255,.35);
      display:grid;
      place-items:center;
      position:relative;
      overflow:hidden;
    }

    .brand-mark::before,.brand-mark::after{
      content:"";
      position:absolute;
      background:#061021;
      border-radius:8px;
      transform:rotate(45deg);
    }
    .brand-mark::before{width:16px;height:16px}
    .brand-mark::after{width:5px;height:28px;background:rgba(255,255,255,.82)}

    .brand span{
      background:linear-gradient(90deg,#fff 0%,#dbe7ff 60%,#9f72ff 84%,#33e4ff);
      -webkit-background-clip:text;
      color:transparent;
    }

    nav{
      display:flex;
      align-items:center;
      gap:8px;
    }
    nav a{
      color:#c4cde0;
      text-decoration:none;
      padding:10px 14px;
      border-radius:999px;
      font-size:14px;
      transition:.25s ease;
    }
    nav a:hover{
      color:#fff;
      background:rgba(255,255,255,.055);
    }

    .status-pill{
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px 14px;
      border:1px solid rgba(103,182,255,.22);
      border-radius:999px;
      background:rgba(6,15,32,.58);
      color:#c9d7ea;
      font-size:12px;
      letter-spacing:.13em;
      text-transform:uppercase;
      white-space:nowrap;
      backdrop-filter:blur(15px);
    }
    .status-dot{
      width:8px;height:8px;border-radius:50%;
      background:var(--cyan);
      box-shadow:0 0 0 6px rgba(44,232,255,.08),0 0 18px var(--cyan);
      animation:pulse 1.8s ease-in-out infinite;
    }

    .hero{
      display:grid;
      grid-template-columns:minmax(0,1.03fr) minmax(420px,.97fr);
      align-items:center;
      gap:60px;
      min-height:calc(100vh - 102px);
      padding:54px 0 74px;
    }

    .eyebrow{
      display:flex;
      align-items:center;
      gap:14px;
      color:#9eb5da;
      font-size:12px;
      letter-spacing:.34em;
      text-transform:uppercase;
      font-weight:800;
      margin-bottom:22px;
    }
    .eyebrow::before{
      content:"";
      width:42px;height:1px;
      background:linear-gradient(90deg,var(--cyan),transparent);
      box-shadow:0 0 12px var(--cyan);
    }

    h1{
      margin:0;
      font-size:clamp(76px,9.2vw,158px);
      line-height:.75;
      letter-spacing:-.075em;
      font-weight:950;
      text-transform:uppercase;
    }
    .coming{
      display:block;
      color:#f7f9ff;
      text-shadow:0 6px 30px rgba(105,156,255,.18);
    }
    .soon{
      display:block;
      margin-top:.16em;
      width:max-content;
      max-width:100%;
      background:linear-gradient(94deg,#b15cff 2%,#725dff 32%,#27d7ff 67%,#3efbd2 96%);
      -webkit-background-clip:text;
      color:transparent;
      filter:drop-shadow(0 0 20px rgba(93,105,255,.2));
    }

    .lead{
      max-width:720px;
      margin:34px 0 0;
      font-size:clamp(20px,2vw,31px);
      line-height:1.22;
      font-weight:650;
      letter-spacing:-.025em;
      color:#f5f7ff;
    }
    .sublead{
      margin:18px 0 0;
      color:#aab6ca;
      font-size:clamp(15px,1.25vw,19px);
      line-height:1.7;
    }
    .sublead strong{
      color:#5be9ff;
      font-weight:700;
    }

    .launch-card{
      margin-top:34px;
      border:1px solid rgba(104,166,255,.19);
      border-radius:22px;
      background:linear-gradient(145deg,rgba(11,19,39,.76),rgba(10,15,30,.48));
      box-shadow:inset 0 1px rgba(255,255,255,.035),var(--shadow);
      padding:18px 20px;
      backdrop-filter:blur(18px);
      max-width:730px;
      position:relative;
      overflow:hidden;
    }
    .launch-card::after{
      content:"";
      position:absolute;
      inset:auto -20% -2px 24%;
      height:1px;
      background:linear-gradient(90deg,transparent,var(--violet),var(--cyan),transparent);
      box-shadow:0 0 22px var(--cyan);
    }
    .launch-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      flex-wrap:wrap;
    }
    .launch-label{
      display:flex;
      gap:10px;
      align-items:center;
      text-transform:uppercase;
      letter-spacing:.22em;
      font-weight:800;
      font-size:11px;
      color:#9cadca;
    }
    .launch-label i{
      width:7px;height:7px;border-radius:50%;background:var(--violet);
      box-shadow:0 0 16px var(--violet);
    }
    .build-readout{
      font-size:12px;
      color:#5be9ff;
      font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
    }
    .progress{
      height:6px;
      background:rgba(255,255,255,.06);
      margin-top:18px;
      border-radius:99px;
      overflow:hidden;
    }
    .progress span{
      display:block;
      width:68%;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg,var(--violet),var(--blue),var(--cyan));
      box-shadow:0 0 20px rgba(44,232,255,.42);
      animation:progressGlow 2.6s ease-in-out infinite;
    }

    .signup{
      display:flex;
      gap:12px;
      margin-top:16px;
      max-width:730px;
    }
    .field{
      flex:1;
      display:flex;
      align-items:center;
      gap:11px;
      min-height:58px;
      padding:0 17px;
      border:1px solid rgba(113,167,255,.18);
      border-radius:16px;
      background:rgba(7,14,28,.64);
      backdrop-filter:blur(16px);
    }
    .field svg{width:20px;opacity:.65;flex:0 0 auto}
    .field input{
      width:100%;
      min-width:0;
      border:0;
      outline:0;
      background:transparent;
      color:#fff;
      font:inherit;
      font-size:15px;
    }
    .field input::placeholder{color:#748199}
    .notify{
      min-width:160px;
      border:0;
      border-radius:16px;
      color:#fff;
      font-weight:850;
      letter-spacing:.1em;
      text-transform:uppercase;
      cursor:pointer;
      background:linear-gradient(120deg,#1ebfff 0%,#5667ff 50%,#a64cff 100%);
      box-shadow:0 10px 34px rgba(86,103,255,.28), inset 0 1px rgba(255,255,255,.35);
      transition:transform .2s ease,filter .2s ease;
    }
    .notify:hover{transform:translateY(-2px);filter:brightness(1.12)}
    .notify:active{transform:translateY(0)}

    .microcopy{
      margin-top:10px;
      color:#6f7e96;
      font-size:12px;
      max-width:730px;
    }

    .visual{
      position:relative;
      min-height:660px;
      display:grid;
      place-items:center;
    }

    .halo{
      position:absolute;
      width:610px;height:610px;
      border-radius:50%;
      border:1px solid rgba(94,159,255,.12);
      background:
        radial-gradient(circle at center,rgba(35,178,255,.09),transparent 52%),
        repeating-radial-gradient(circle at center,transparent 0 54px,rgba(115,104,255,.065) 55px 56px);
      animation:haloRotate 24s linear infinite;
    }
    .halo::before,.halo::after{
      content:"";
      position:absolute;
      inset:9%;
      border-radius:50%;
      border:1px dashed rgba(71,226,255,.16);
    }
    .halo::after{
      inset:22%;
      border-style:solid;
      border-color:rgba(176,85,255,.13);
    }

    .cube-wrap{
      width:min(500px,74vw);
      aspect-ratio:1;
      position:relative;
      perspective:950px;
      z-index:3;
    }
    .cube{
      width:250px;height:250px;
      position:absolute;
      left:50%;top:50%;
      transform-style:preserve-3d;
      transform:translate(-50%,-50%) rotateX(-20deg) rotateY(34deg);
      animation:cubeFloat 7s ease-in-out infinite;
    }
    .face{
      position:absolute;
      inset:0;
      border:1px solid rgba(97,217,255,.44);
      background:
        linear-gradient(135deg,rgba(51,205,255,.14),rgba(93,61,255,.08) 55%,rgba(230,72,255,.08)),
        linear-gradient(rgba(255,255,255,.025),rgba(255,255,255,.008));
      box-shadow:inset 0 0 70px rgba(43,158,255,.06),0 0 34px rgba(43,158,255,.05);
      backdrop-filter:blur(2px);
    }
    .front{transform:translateZ(125px)}
    .back{transform:rotateY(180deg) translateZ(125px)}
    .right{transform:rotateY(90deg) translateZ(125px)}
    .left{transform:rotateY(-90deg) translateZ(125px)}
    .top{transform:rotateX(90deg) translateZ(125px)}
    .bottom{transform:rotateX(-90deg) translateZ(125px)}
    .face::before,.face::after{
      content:"";
      position:absolute;
      background:linear-gradient(90deg,transparent,var(--cyan),transparent);
      opacity:.42;
    }
    .face::before{height:1px;left:10%;right:10%;top:34%}
    .face::after{width:1px;top:10%;bottom:10%;left:58%;background:linear-gradient(transparent,var(--violet),transparent)}

    .core{
      width:125px;height:125px;
      position:absolute;
      left:50%;top:50%;
      transform-style:preserve-3d;
      transform:translate(-50%,-50%);
    }
    .core span{
      position:absolute;inset:0;
      border:1px solid rgba(206,101,255,.72);
      background:radial-gradient(circle,rgba(112,95,255,.17),rgba(23,221,255,.035) 68%);
      box-shadow:0 0 45px rgba(109,79,255,.16),inset 0 0 28px rgba(33,217,255,.08);
    }
    .core span:nth-child(1){transform:rotateX(0) rotateY(45deg)}
    .core span:nth-child(2){transform:rotateX(60deg) rotateY(45deg)}
    .core span:nth-child(3){transform:rotateX(-60deg) rotateY(45deg)}

    .scan{
      position:absolute;
      left:7%;right:7%;height:2px;top:28%;
      background:linear-gradient(90deg,transparent,#45e9ff,transparent);
      box-shadow:0 0 26px #45e9ff;
      animation:scan 4s ease-in-out infinite;
      z-index:4;
    }

    .ring{
      position:absolute;
      border-radius:50%;
      border:1px solid rgba(76,203,255,.15);
      z-index:1;
    }
    .ring.a{width:480px;height:160px;transform:rotate(-14deg);box-shadow:0 0 50px rgba(94,76,255,.07)}
    .ring.b{width:530px;height:220px;transform:rotate(38deg);border-color:rgba(181,69,255,.12)}
    .ring.c{width:400px;height:400px;border-style:dashed;animation:haloRotate 18s linear reverse infinite}

    .float-card{
      position:absolute;
      z-index:6;
      width:240px;
      padding:15px 16px;
      border:1px solid rgba(116,178,255,.2);
      border-radius:17px;
      background:linear-gradient(145deg,rgba(10,20,40,.78),rgba(12,16,34,.58));
      backdrop-filter:blur(18px);
      box-shadow:0 18px 60px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.04);
      display:flex;
      gap:13px;
      align-items:center;
    }
    .float-card .ico{
      width:44px;height:44px;flex:0 0 auto;
      display:grid;place-items:center;border-radius:13px;
      border:1px solid rgba(125,179,255,.18);
      background:linear-gradient(145deg,rgba(61,209,255,.14),rgba(125,78,255,.12));
      color:#74ebff;
    }
    .float-card .ico svg{width:23px;height:23px}
    .float-card strong{
      display:block;
      font-size:12px;
      letter-spacing:.13em;
      text-transform:uppercase;
      color:#eff4ff;
    }
    .float-card small{
      display:block;margin-top:5px;line-height:1.45;
      color:#8d9bb2;font-size:11px;
    }
    .card1{right:-2%;top:9%;animation:drift1 6s ease-in-out infinite}
    .card2{left:-5%;top:26%;animation:drift2 7s ease-in-out infinite}
    .card3{right:-5%;bottom:20%;animation:drift3 7.5s ease-in-out infinite}
    .card4{left:1%;bottom:5%;animation:drift1 6.6s ease-in-out infinite reverse}

    .badge{
      position:absolute;
      right:7%;
      bottom:3%;
      width:112px;
      aspect-ratio:1;
      border-radius:50%;
      border:1px solid rgba(58,225,255,.26);
      display:grid;
      place-items:center;
      text-align:center;
      font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
      font-size:9px;
      letter-spacing:.11em;
      color:#68eaff;
      box-shadow:inset 0 0 40px rgba(40,221,255,.06),0 0 35px rgba(0,0,0,.25);
    }
    .badge::before,.badge::after{
      content:"";
      position:absolute;border-radius:50%;
      border:1px dashed rgba(115,97,255,.24);
    }
    .badge::before{inset:-10px}
    .badge::after{inset:10px;border-color:rgba(89,232,255,.16)}
    .badge span{display:block;color:#fff;font-size:12px;margin-top:4px}

    .bottom-grid{
      grid-column:1/-1;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
      margin-top:-30px;
    }
    .feature{
      min-height:132px;
      padding:19px;
      border-top:1px solid rgba(106,169,255,.18);
      background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);
      position:relative;
    }
    .feature::before{
      content:"";
      position:absolute;
      top:-1px;left:0;width:52px;height:1px;
      background:linear-gradient(90deg,var(--cyan),transparent);
      box-shadow:0 0 16px rgba(44,232,255,.55);
    }
    .feature strong{display:block;font-size:14px}
    .feature p{margin:8px 0 0;color:#7f8ea6;font-size:12px;line-height:1.55}
    .num{
      float:right;
      font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
      color:rgba(111,178,255,.24);
      font-size:11px;
    }

    footer{
      border-top:1px solid rgba(121,166,255,.12);
      margin-top:28px;
      padding:22px 0 30px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:18px;
      color:#66748a;
      font-size:12px;
    }
    footer span b{color:#aebad0;font-weight:650}
    .footer-right{
      display:flex;gap:16px;align-items:center;
      font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
      text-transform:uppercase;letter-spacing:.08em;font-size:10px;
    }

    .toast{
      position:fixed;
      left:50%;
      bottom:24px;
      transform:translate(-50%,30px);
      opacity:0;
      pointer-events:none;
      padding:13px 18px;
      background:rgba(10,20,39,.92);
      border:1px solid rgba(95,220,255,.25);
      border-radius:999px;
      color:#eafcff;
      font-size:13px;
      box-shadow:0 12px 45px rgba(0,0,0,.4),0 0 25px rgba(64,220,255,.08);
      backdrop-filter:blur(18px);
      transition:.3s ease;
      z-index:50;
    }
    .toast.show{opacity:1;transform:translate(-50%,0)}

    @keyframes pulse{50%{opacity:.5;transform:scale(.78)}}
    @keyframes progressGlow{50%{filter:brightness(1.45)}}
    @keyframes haloRotate{to{transform:rotate(360deg)}}
    @keyframes cubeFloat{
      0%,100%{transform:translate(-50%,-50%) rotateX(-20deg) rotateY(34deg) translateY(0)}
      50%{transform:translate(-50%,-50%) rotateX(-16deg) rotateY(50deg) translateY(-14px)}
    }
    @keyframes scan{
      0%,100%{top:22%;opacity:.3}
      50%{top:76%;opacity:1}
    }
    @keyframes drift1{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
    @keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-9px,8px)}}
    @keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-8px)}}

    @media (max-width:1100px){
      .hero{
        grid-template-columns:1fr;
        gap:18px;
        min-height:auto;
        padding-top:74px;
      }
      .copy{max-width:900px}
      .visual{min-height:620px}
      .bottom-grid{margin-top:0}
    }

    @media (max-width:760px){
      .page{width:min(100% - 28px,1500px)}
      .topbar{align-items:flex-start}
      nav{display:none}
      .status-pill{padding:8px 10px;font-size:10px}
      .brand{font-size:20px}
      .brand-mark{width:34px;height:34px}
      .hero{padding-top:45px}
      h1{font-size:clamp(64px,23vw,110px);line-height:.79}
      .lead{font-size:21px}
      .signup{flex-direction:column}
      .notify{min-height:56px;width:100%}
      .visual{min-height:530px}
      .cube-wrap{width:360px;max-width:92vw}
      .cube{width:180px;height:180px}
      .front{transform:translateZ(90px)}
      .back{transform:rotateY(180deg) translateZ(90px)}
      .right{transform:rotateY(90deg) translateZ(90px)}
      .left{transform:rotateY(-90deg) translateZ(90px)}
      .top{transform:rotateX(90deg) translateZ(90px)}
      .bottom{transform:rotateX(-90deg) translateZ(90px)}
      .halo{width:440px;height:440px}
      .float-card{width:188px;padding:11px}
      .float-card .ico{width:36px;height:36px}
      .float-card small{display:none}
      .card1{right:0}
      .card2{left:0}
      .card3{right:0}
      .card4{left:0}
      .bottom-grid{grid-template-columns:1fr 1fr}
      footer{align-items:flex-start;flex-direction:column}
    }

    @media (max-width:480px){
      .topbar{gap:10px}
      .status-pill{display:none}
      .visual{min-height:500px}
      .float-card{width:160px}
      .float-card strong{font-size:10px}
      .badge{right:0}
      .bottom-grid{grid-template-columns:1fr}
    }

    @media (prefers-reduced-motion:reduce){
      *,*::before,*::after{
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important;
      }
    }

/* =========================================================
   Expanded site foundation
   Reusable inner-page components for builtbydouglas.com
   ========================================================= */

body.inner-page{
  min-height:100vh;
}

.topbar{
  position:relative;
}

nav a[aria-current="page"]{
  color:#fff;
  background:rgba(255,255,255,.065);
  box-shadow:inset 0 0 0 1px rgba(103,182,255,.12);
}

.site-main{
  padding:64px 0 92px;
}

.page-hero{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  gap:54px;
  align-items:end;
  min-height:390px;
  padding:48px 0 64px;
  border-bottom:1px solid rgba(121,166,255,.12);
}

.page-hero h1{
  margin:0;
  font-size:clamp(58px,8vw,126px);
  line-height:.82;
  letter-spacing:-.07em;
  text-transform:uppercase;
}

.page-hero h1 .accent{
  display:block;
  width:max-content;
  max-width:100%;
  margin-top:.16em;
  background:linear-gradient(94deg,#b15cff 2%,#725dff 32%,#27d7ff 67%,#3efbd2 96%);
  -webkit-background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 20px rgba(93,105,255,.2));
}

.page-hero-copy{
  max-width:760px;
}

.page-kicker{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
  color:#9eb5da;
  font-size:11px;
  font-weight:800;
  letter-spacing:.32em;
  text-transform:uppercase;
}

.page-kicker::before{
  content:"";
  width:42px;
  height:1px;
  background:linear-gradient(90deg,var(--cyan),transparent);
  box-shadow:0 0 12px var(--cyan);
}

.page-summary{
  margin:0;
  color:#aab6ca;
  font-size:clamp(16px,1.45vw,20px);
  line-height:1.75;
}

.page-system-card,
.glass-panel{
  border:1px solid rgba(104,166,255,.19);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(11,19,39,.76),rgba(10,15,30,.48));
  box-shadow:inset 0 1px rgba(255,255,255,.035),var(--shadow);
  backdrop-filter:blur(18px);
}

.page-system-card{
  padding:22px;
  position:relative;
  overflow:hidden;
}

.page-system-card::after{
  content:"";
  position:absolute;
  inset:auto -15% -1px 22%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--violet),var(--cyan),transparent);
  box-shadow:0 0 22px var(--cyan);
}

.system-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  color:#8d9bb2;
  font:11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.system-row + .system-row{
  margin-top:13px;
  padding-top:13px;
  border-top:1px solid rgba(121,166,255,.1);
}

.system-row strong{
  color:#5be9ff;
  font-weight:700;
}

.content-section{
  padding:68px 0 0;
}

.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:26px;
}

.section-head h2{
  margin:0;
  font-size:clamp(28px,3.4vw,48px);
  letter-spacing:-.045em;
}

.section-head p{
  max-width:650px;
  margin:0;
  color:#8190a8;
  line-height:1.65;
  font-size:14px;
}

.placeholder-grid,
.project-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.placeholder-card,
.project-card{
  min-height:280px;
  padding:22px;
  border:1px solid rgba(116,178,255,.16);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(10,20,40,.72),rgba(12,16,34,.5));
  box-shadow:inset 0 1px rgba(255,255,255,.035);
  position:relative;
  overflow:hidden;
}

.placeholder-card::before,
.project-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:70px;
  height:1px;
  background:linear-gradient(90deg,var(--cyan),transparent);
  box-shadow:0 0 18px rgba(44,232,255,.55);
}

.placeholder-card{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.placeholder-number{
  position:absolute;
  top:18px;
  right:18px;
  color:rgba(111,178,255,.24);
  font:11px ui-monospace,SFMono-Regular,Consolas,monospace;
}

.placeholder-card h3{
  margin:0;
  font-size:21px;
}

.placeholder-card p{
  margin:10px 0 0;
  color:#7f8ea6;
  font-size:13px;
  line-height:1.6;
}

.empty-state{
  min-height:340px;
  display:grid;
  place-items:center;
  padding:40px;
  text-align:center;
}

.empty-state-inner{
  max-width:590px;
}

.empty-state .empty-icon{
  width:78px;
  height:78px;
  margin:0 auto 20px;
  display:grid;
  place-items:center;
  border-radius:22px;
  border:1px solid rgba(125,179,255,.18);
  background:linear-gradient(145deg,rgba(61,209,255,.12),rgba(125,78,255,.12));
  color:#74ebff;
  box-shadow:0 0 42px rgba(57,160,255,.08);
}

.empty-state .empty-icon svg{
  width:34px;
  height:34px;
}

.empty-state h2{
  margin:0;
  font-size:clamp(28px,4vw,42px);
  letter-spacing:-.04em;
}

.empty-state p{
  margin:14px auto 0;
  color:#8190a8;
  line-height:1.7;
}

.inline-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 18px;
  border:1px solid rgba(113,167,255,.18);
  border-radius:14px;
  color:#dce7f8;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  background:rgba(7,14,28,.64);
  transition:.22s ease;
}

.button:hover{
  transform:translateY(-2px);
  color:#fff;
  border-color:rgba(91,233,255,.34);
}

.button.primary{
  border:0;
  color:#fff;
  background:linear-gradient(120deg,#1ebfff 0%,#5667ff 50%,#a64cff 100%);
  box-shadow:0 10px 34px rgba(86,103,255,.22),inset 0 1px rgba(255,255,255,.28);
}

.site-footer{
  margin-top:28px;
}

@media (max-width:980px){
  .page-hero{grid-template-columns:1fr;align-items:start;gap:32px}
  .page-system-card{max-width:650px}
  .placeholder-grid,.project-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:760px){
  .site-main{padding-top:28px}
  .page-hero{min-height:0;padding:34px 0 46px}
  .page-hero h1{font-size:clamp(54px,18vw,92px)}
  .section-head{align-items:flex-start;flex-direction:column}
  .placeholder-grid,.project-grid{grid-template-columns:1fr}
}


/* =========================================================
   Projects page - Teams Status Light
   ========================================================= */
.project-card-featured{
  display:flex;
  flex-direction:column;
  min-height:420px;
}

.project-card-media{
  position:relative;
  min-height:220px;
  padding:18px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));
  display:grid;
  place-items:center;
  overflow:hidden;
}

.project-card-media img{
  width:100%;
  max-height:240px;
  object-fit:contain;
  filter:drop-shadow(0 24px 45px rgba(0,0,0,.38));
}

.project-status{
  position:absolute;
  top:16px;
  left:16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(5,15,32,.85);
  border:1px solid rgba(97,210,255,.2);
  font:11px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.project-status::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#51ffd0;
  box-shadow:0 0 14px rgba(81,255,208,.7);
}

.project-card-body{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-top:18px;
}
.project-card-body h3{margin:0;font-size:28px;letter-spacing:-.04em;}
.project-card-body p{margin:0;color:#8fa0b8;line-height:1.65;font-size:14px}
.project-card-meta,
.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.project-card-meta span,
.tag{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(113,167,255,.18);
  background:rgba(7,14,28,.54);
  color:#c9d7ea;
  font-size:12px;
}
.project-actions{margin-top:2px}
.project-actions .button{cursor:pointer}

.project-lightbox{
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(2,5,14,.78);
  backdrop-filter:blur(18px);
  padding:26px;
  overflow:auto;
}
.project-lightbox[hidden]{display:none}
.project-lightbox-panel{
  width:min(1400px,100%);
  margin:0 auto;
  padding:28px;
  position:relative;
}
.lightbox-close{
  position:sticky;
  top:0;
  margin-left:auto;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:14px;
  border:1px solid rgba(113,167,255,.18);
  background:rgba(7,14,28,.78);
  color:#fff;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  z-index:4;
}
.lightbox-close:hover{border-color:rgba(91,233,255,.34)}

.lightbox-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(380px,.9fr);
  gap:28px;
  align-items:start;
}
.glass-subpanel{
  border:1px solid rgba(104,166,255,.16);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(14,21,41,.72),rgba(11,16,31,.54));
  box-shadow:inset 0 1px rgba(255,255,255,.03);
}
.lightbox-hero-media{
  padding:26px;
  display:grid;
  place-items:center;
  min-height:420px;
}
.lightbox-hero-media img{
  width:100%;
  max-height:440px;
  object-fit:contain;
  filter:drop-shadow(0 28px 50px rgba(0,0,0,.38));
}
.lightbox-kicker{
  color:#9eb5da;
  font-size:11px;
  font-weight:800;
  letter-spacing:.32em;
  text-transform:uppercase;
}
.lightbox-hero-copy h2{
  margin:12px 0 14px;
  font-size:clamp(34px,4vw,62px);
  line-height:.94;
  letter-spacing:-.05em;
}
.lightbox-summary{margin:0;color:#aab6ca;line-height:1.75;font-size:16px}
.status-logic{margin-top:22px;padding:18px}
.status-logic h3{margin:0 0 16px;font-size:20px}
.logic-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.logic-grid div{display:flex;flex-direction:column;gap:6px;color:#aab6ca;padding:14px;border-radius:16px;background:rgba(255,255,255,.02)}
.logic-grid strong{color:#fff;font-size:14px}
.logic-grid small{color:#7f8ea6;font-size:12px;line-height:1.5}
.logic-dot{width:14px;height:14px;border-radius:50%;display:inline-block}
.logic-dot.off{background:#4b5567;box-shadow:0 0 0 5px rgba(75,85,103,.12)}
.logic-dot.green{background:#51ffd0;box-shadow:0 0 0 5px rgba(81,255,208,.12),0 0 18px rgba(81,255,208,.45)}
.logic-dot.amber{background:#ffbf3f;box-shadow:0 0 0 5px rgba(255,191,63,.12),0 0 18px rgba(255,191,63,.35)}
.logic-dot.red{background:#ff5778;box-shadow:0 0 0 5px rgba(255,87,120,.12),0 0 18px rgba(255,87,120,.35)}

.modal-section{padding-top:42px}
.modal-section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:20px}
.modal-section-head h3{margin:0;font-size:32px;letter-spacing:-.04em}
.modal-section-head p{margin:0;max-width:620px;color:#8190a8;line-height:1.65;font-size:14px}
.gif-placeholder{
  min-height:180px;
  padding:22px;
  display:flex;
  align-items:center;
  gap:18px;
}
.gif-placeholder-icon{
  width:72px;height:72px;border-radius:18px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(44,232,255,.18),rgba(154,92,255,.18));
  border:1px solid rgba(113,167,255,.18);color:#fff;font-weight:900;letter-spacing:.14em;
}
.gif-placeholder strong{display:block;font-size:18px}
.gif-placeholder p{margin:8px 0 0;color:#8190a8;line-height:1.6}

.parts-summary-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:16px;
}
.part-summary-card{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.part-summary-card img{width:100%;height:170px;object-fit:contain;background:rgba(255,255,255,.02);border-radius:16px;padding:10px}
.part-summary-card h4{margin:0;font-size:18px;letter-spacing:-.02em}
.part-summary-card p{margin:6px 0;color:#8fa0b8;font-size:13px}
.part-summary-card a{color:#74ebff;text-decoration:none;font-size:13px;font-weight:700}
.part-summary-card a:hover{text-decoration:underline}

.parts-photo-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.gallery-card{margin:0;padding:16px}
.gallery-card img{width:100%;height:220px;object-fit:contain;background:rgba(255,255,255,.02);border-radius:16px;padding:12px}
.gallery-card figcaption{margin-top:12px;color:#cbd5e7;font-size:13px}

.build-steps{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.build-step{padding:18px;display:flex;gap:16px;align-items:flex-start}
.build-step span{flex:0 0 auto;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(44,232,255,.16),rgba(154,92,255,.18));color:#fff;font:800 14px/1 ui-monospace,SFMono-Regular,Consolas,monospace}
.build-step h4{margin:0;font-size:18px}
.build-step p{margin:8px 0 0;color:#8fa0b8;line-height:1.6;font-size:14px}

body.modal-open{overflow:hidden}

@media (max-width:1200px){
  .parts-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .parts-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .lightbox-hero-grid{grid-template-columns:1fr}
  .parts-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .parts-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .build-steps{grid-template-columns:1fr}
}
@media (max-width:760px){
  .project-lightbox{padding:12px}
  .project-lightbox-panel{padding:18px}
  .modal-section-head{flex-direction:column;align-items:flex-start}
  .logic-grid{grid-template-columns:1fr}
  .parts-summary-grid,.parts-photo-grid{grid-template-columns:1fr}
  .part-summary-card img,.gallery-card img{height:200px}
}


/* Beginner setup guide */
.setup-download-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-bottom:18px;
}
.setup-download-card{
  min-height:190px;
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-decoration:none;
  color:inherit;
  transition:.22s ease;
}
.setup-download-card:hover{
  transform:translateY(-3px);
  border-color:rgba(91,233,255,.34);
  box-shadow:0 18px 45px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.04);
}
.setup-card-number{
  color:#5be9ff;
  font:800 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.12em;
  margin-bottom:18px;
}
.setup-download-card strong{font-size:20px;letter-spacing:-.025em}
.setup-download-card small{margin-top:9px;color:#8fa0b8;line-height:1.55;font-size:13px}
.setup-download-card em{margin-top:auto;padding-top:18px;color:#74ebff;font-style:normal;font-size:12px;font-weight:800}
.beginner-callout{padding:20px;margin-bottom:18px}
.beginner-callout>strong{display:block;font-size:20px;margin-bottom:16px}
.beginner-callout>p{margin:16px 0 0;color:#8fa0b8;line-height:1.6;font-size:13px}
.value-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.value-grid div{padding:14px;border-radius:14px;background:rgba(255,255,255,.025)}
.value-grid b{display:block;color:#fff;font-size:13px}
.value-grid span{display:block;margin-top:6px;color:#7f8ea6;font-size:12px;line-height:1.5}
.beginner-steps .build-step{min-height:166px}
.build-step code,.troubleshoot-card code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#74ebff;background:rgba(44,232,255,.06);padding:2px 6px;border-radius:6px}
.troubleshoot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.troubleshoot-card{padding:18px}
.troubleshoot-card h4{margin:0;font-size:17px}
.troubleshoot-card p{margin:8px 0 0;color:#8fa0b8;line-height:1.6;font-size:13px}
@media (max-width:980px){
  .setup-download-grid{grid-template-columns:1fr}
  .value-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .value-grid,.troubleshoot-grid{grid-template-columns:1fr}
}


/* =========================================================
   Project #02 - Mini NFC NES
   ========================================================= */
.project-status.legacy::before{
  background:#ffbf3f;
  box-shadow:0 0 14px rgba(255,191,63,.65);
}
.mini-nes-card .project-card-media{
  background:
    radial-gradient(circle at 80% 18%,rgba(126,78,255,.14),transparent 36%),
    radial-gradient(circle at 18% 82%,rgba(44,232,255,.11),transparent 38%),
    rgba(5,10,25,.72);
}
.mini-nes-card .project-card-media img{max-height:270px;border-radius:13px}
.mini-nes-hero-media{background:rgba(4,8,21,.76)}
.mini-nes-hero-media img{max-height:520px;border-radius:16px}

.legacy-callout{
  display:flex;
  gap:16px;
  align-items:flex-start;
  margin-top:22px;
  padding:18px;
  border-color:rgba(255,191,63,.2);
  background:linear-gradient(145deg,rgba(45,34,11,.45),rgba(12,17,32,.58));
}
.legacy-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 11px;
  border-radius:999px;
  border:1px solid rgba(255,191,63,.28);
  color:#ffd279;
  background:rgba(255,191,63,.07);
  font:800 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.12em;
}
.legacy-callout strong{display:block;font-size:15px}
.legacy-callout p{margin:7px 0 0;color:#9a9cad;line-height:1.55;font-size:12px}

.nes-flow-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.nes-flow-card{padding:18px;position:relative;overflow:hidden}
.nes-flow-card span{color:#5be9ff;font:800 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em}
.nes-flow-card strong{display:block;margin-top:22px;font-size:18px}
.nes-flow-card p{margin:8px 0 0;color:#8fa0b8;line-height:1.6;font-size:13px}
.nes-flow-card:not(:last-child)::after{
  content:"→";
  position:absolute;
  top:14px;
  right:14px;
  color:rgba(91,233,255,.35);
  font-size:22px;
}
.nes-code-card{
  margin-top:16px;
  padding:18px;
  display:grid;
  grid-template-columns:minmax(220px,.45fr) minmax(0,1fr);
  gap:18px;
  align-items:center;
}
.nes-code-card>div span{display:block;color:#8da2c6;font:800 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.16em}
.nes-code-card>div strong{display:block;margin-top:9px;font-size:16px}
.nes-code-card pre{margin:0;padding:16px;border-radius:14px;background:#030817;overflow:auto;border:1px solid rgba(113,167,255,.12)}
.nes-code-card code{color:#76e8ff;font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace}

.nes-parts-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.nes-part-card{padding:18px;display:flex;flex-direction:column;min-height:210px}
.nes-part-card>span{color:#5be9ff;font:800 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em}
.nes-part-card h4{margin:18px 0 0;font-size:18px;letter-spacing:-.02em}
.nes-part-card p{margin:8px 0 0;color:#8fa0b8;line-height:1.55;font-size:13px}
.nes-part-card a{margin-top:auto;padding-top:16px;color:#74ebff;text-decoration:none;font-size:12px;font-weight:800}
.nes-part-card a:hover{text-decoration:underline}

.nes-diagram{padding:18px;margin:0;text-align:center}
.nes-diagram img{width:100%;max-height:760px;object-fit:contain;border-radius:16px;background:#fff}
.nes-diagram figcaption{margin-top:12px;color:#7f8ea6;font-size:12px}

.pcb-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pcb-gallery .gallery-card img{height:240px;background:rgba(255,255,255,.025)}
.pcb-note{margin-top:14px;padding:18px}
.pcb-note strong{display:block;font-size:16px}
.pcb-note p{margin:8px 0 0;color:#8fa0b8;line-height:1.6;font-size:13px}

.mini-build-steps .build-step{min-height:166px}
.nes-control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.nes-control-grid article{padding:18px}
.nes-control-grid strong{display:block;font-size:18px}
.nes-control-grid p{margin:8px 0 0;color:#8fa0b8;line-height:1.65;font-size:13px}

.mini-download-footer{
  margin-top:42px;
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.mini-download-footer h3{margin:0;font-size:28px;letter-spacing:-.035em}
.mini-download-footer p{margin:9px 0 0;max-width:760px;color:#8fa0b8;line-height:1.6;font-size:13px}
.mini-download-footer .button{flex:0 0 auto}

@media (max-width:1200px){
  .nes-flow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nes-parts-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pcb-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .nes-parts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nes-control-grid{grid-template-columns:1fr}
  .nes-code-card{grid-template-columns:1fr}
  .mini-download-footer{align-items:flex-start;flex-direction:column}
}
@media (max-width:760px){
  .legacy-callout{flex-direction:column}
  .nes-flow-grid,.nes-parts-grid,.pcb-gallery{grid-template-columns:1fr}
  .pcb-gallery .gallery-card img{height:220px}
}



/* =========================================================
   Site-wide floppy disk download counters
   ========================================================= */
.project-actions{
  align-items:center;
}

.download-meter{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:48px;
  padding:2px 0;
}

.download-meter-label{
  display:flex;
  align-items:center;
  gap:6px;
  color:#8ba0bd;
  font:800 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.18em;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  text-transform:uppercase;
}

.download-live-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#51ffd0;
  box-shadow:0 0 10px rgba(81,255,208,.8);
  animation:pulse 1.8s ease-in-out infinite;
}

.floppy-counter{
  display:flex;
  align-items:center;
  gap:5px;
}

.floppy-digit{
  width:31px;
  height:36px;
  position:relative;
  display:grid;
  place-items:center;
  border:1px solid rgba(91,233,255,.32);
  border-radius:5px 5px 7px 7px;
  clip-path:polygon(0 0,76% 0,100% 22%,100% 100%,0 100%);
  background:
    linear-gradient(145deg,rgba(12,25,48,.98),rgba(5,12,25,.98));
  box-shadow:
    inset 0 1px rgba(255,255,255,.05),
    0 0 12px rgba(44,232,255,.055);
  overflow:hidden;
}

.floppy-digit::before{
  content:"";
  position:absolute;
  top:4px;
  left:7px;
  width:16px;
  height:7px;
  border:1px solid rgba(117,178,255,.23);
  border-radius:1px;
  background:rgba(124,158,206,.13);
}

.floppy-digit::after{
  content:"";
  position:absolute;
  left:5px;
  right:5px;
  bottom:4px;
  height:16px;
  border:1px solid rgba(113,167,255,.16);
  border-radius:2px;
  background:linear-gradient(180deg,rgba(22,39,67,.9),rgba(10,19,35,.92));
}

.floppy-digit span{
  position:relative;
  z-index:2;
  transform:translateY(6px);
  color:#eafcff;
  font:900 15px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  text-shadow:0 0 12px rgba(91,233,255,.32);
}

.download-meter.is-loading .floppy-digit span{
  opacity:.42;
}

.download-meter.is-error .download-live-dot{
  background:#ffbf3f;
  box-shadow:0 0 10px rgba(255,191,63,.7);
}

.download-meter.is-error .floppy-digit span{
  color:#ffcf70;
}

@media (max-width:760px){
  .download-meter{
    width:100%;
    justify-content:flex-start;
    margin-top:2px;
  }
}

/* Mini NFC NES project demo video */
.nes-demo-video{
  margin:0;
  padding:16px;
  overflow:hidden;
}
.nes-demo-video video{
  display:block;
  width:100%;
  max-height:720px;
  margin:0 auto;
  border-radius:16px;
  background:#000;
  object-fit:contain;
  box-shadow:0 18px 48px rgba(0,0,0,.28);
}
.nes-demo-video figcaption{
  margin-top:12px;
  color:#7f8ea6;
  font-size:12px;
  text-align:center;
}

/* Mini NFC NES hero wiring preview */
.mini-nes-hero-media{
  align-content:start;
  gap:16px;
}
.mini-nes-overview-image{
  width:100%;
  max-height:none !important;
}
.mini-nes-wiring-preview{
  width:100%;
  display:block;
  position:relative;
  padding:14px;
  border:1px solid rgba(91,233,255,.22);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(8,17,34,.9),rgba(10,15,30,.74));
  color:#fff;
  text-decoration:none;
  overflow:hidden;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.mini-nes-wiring-preview:hover{
  transform:translateY(-2px);
  border-color:rgba(91,233,255,.42);
  box-shadow:0 14px 38px rgba(0,0,0,.24),0 0 26px rgba(44,232,255,.07);
}
.mini-nes-wiring-preview img{
  width:100%;
  max-height:215px;
  object-fit:contain;
  display:block;
  margin-top:28px;
  padding:6px;
  border-radius:13px;
  background:#fff;
}
.mini-nes-preview-label{
  position:absolute;
  top:13px;
  left:16px;
  color:#5be9ff;
  font:800 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.mini-nes-preview-action{
  display:block;
  margin-top:10px;
  color:#9eb5da;
  font-size:11px;
  text-align:right;
}

/* =========================================================
   Project #03 — Desktop Pet Dragon
   ========================================================= */
.project-status.fun::before{
  background:#ff9d5c;
  box-shadow:0 0 14px rgba(255,157,92,.72);
}

.dragon-card-media{
  background:
    radial-gradient(circle at 55% 42%,rgba(255,116,70,.15),transparent 38%),
    radial-gradient(circle at 32% 75%,rgba(154,92,255,.12),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));
}

.dragon-card-media img{
  max-height:265px;
  filter:drop-shadow(0 24px 38px rgba(0,0,0,.42));
}

.dragon-project-panel{
  overflow:hidden;
}

.dragon-hero-media{
  background:
    radial-gradient(circle at 50% 38%,rgba(255,120,70,.14),transparent 36%),
    linear-gradient(145deg,rgba(14,21,41,.82),rgba(11,16,31,.56));
}

.dragon-hero-media img{
  width:100%;
  max-height:520px;
  object-fit:contain;
  border-radius:18px;
}

.dragon-version-card{
  margin-top:22px;
  padding:18px;
}

.dragon-version-card span,
.dragon-info-card span{
  color:#ffad72;
  font:800 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.dragon-version-card strong{
  display:block;
  margin-top:7px;
  font-size:18px;
}

.dragon-version-card p{
  margin:8px 0 0;
  color:#8fa0b8;
  line-height:1.6;
  font-size:13px;
}

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

.dragon-feature{
  padding:18px;
}

.dragon-feature > span{
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  margin-bottom:14px;
  border-radius:11px;
  color:#fff;
  background:linear-gradient(135deg,rgba(255,137,76,.26),rgba(154,92,255,.2));
  font:800 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
}

.dragon-feature h4,
.dragon-mischief-card strong{
  margin:0;
  font-size:17px;
}

.dragon-feature p,
.dragon-mischief-card p{
  margin:8px 0 0;
  color:#8fa0b8;
  line-height:1.6;
  font-size:13px;
}

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

.dragon-mischief-card{
  padding:19px;
  min-height:150px;
}

.dragon-walk-gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.dragon-walk-gallery .gallery-card img{
  height:300px;
  background:
    radial-gradient(circle at center,rgba(255,111,62,.08),transparent 48%),
    rgba(255,255,255,.015);
}

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

.dragon-info-card{
  padding:20px;
}

.dragon-info-card strong{
  display:block;
  margin-top:9px;
  color:#eaf2ff;
  font:750 15px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;
  overflow-wrap:anywhere;
}

.dragon-info-card p{
  margin:9px 0 0;
  color:#8fa0b8;
  line-height:1.65;
  font-size:13px;
}

.dragon-download-footer{
  margin-top:42px;
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.dragon-download-footer h3{
  margin:0;
  font-size:28px;
}

.dragon-download-footer p{
  max-width:760px;
  margin:10px 0 0;
  color:#8fa0b8;
  line-height:1.65;
}

.dragon-download-footer .button{
  flex:0 0 auto;
}

@media (max-width:1100px){
  .dragon-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dragon-mischief-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:760px){
  .dragon-feature-grid,
  .dragon-mischief-grid,
  .dragon-walk-gallery,
  .dragon-info-grid{
    grid-template-columns:1fr;
  }
  .dragon-download-footer{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* Desktop Pet Dragon real preview + fun highlights */
.dragon-highlight-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}

.dragon-highlight-pill{
  padding:10px 14px;
  border:1px solid rgba(91,233,255,.20);
  border-radius:999px;
  background:linear-gradient(145deg,rgba(10,20,39,.88),rgba(7,12,24,.88));
  color:#dce8fb;
  font-size:12px;
  font-weight:700;
  line-height:1;
}

.dragon-real-gallery{
  display:grid;
  grid-template-columns:1.1fr 1.1fr .95fr;
  gap:16px;
  align-items:stretch;
}

.dragon-real-card{
  overflow:hidden;
}

.dragon-real-card img{
  display:block;
  width:100%;
  height:300px;
  object-fit:contain;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(2,8,18,.6),rgba(3,7,16,.35));
}

.dragon-real-card-tall img{
  height:520px;
}

.dragon-fun-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.dragon-fun-card{
  padding:18px;
  min-height:150px;
}

.dragon-fun-card strong{
  display:block;
  margin:0;
  color:#ffffff;
  font-size:18px;
}

.dragon-fun-card p{
  margin:10px 0 0;
  color:#8fa0b8;
  line-height:1.65;
  font-size:13px;
}

@media (max-width:1100px){
  .dragon-real-gallery{
    grid-template-columns:1fr 1fr;
  }
  .dragon-real-card-tall{
    grid-column:1 / -1;
  }
  .dragon-real-card-tall img{
    height:420px;
  }
  .dragon-fun-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .dragon-real-gallery,
  .dragon-fun-grid{
    grid-template-columns:1fr;
  }
  .dragon-real-card img,
  .dragon-real-card-tall img{
    height:auto;
    max-height:520px;
  }
}


/* Desktop Pet Dragon archive card polish */
.desktop-dragon-card{
  position:relative;
  overflow:hidden;
}

.desktop-dragon-card::before{
  content:"";
  position:absolute;
  inset:-35% -20% auto 20%;
  height:260px;
  background:radial-gradient(circle,rgba(255,116,70,.10),transparent 68%);
  pointer-events:none;
}

.dragon-card-media{
  min-height:280px;
  isolation:isolate;
  background:
    radial-gradient(circle at 62% 38%,rgba(255,124,72,.16),transparent 34%),
    radial-gradient(circle at 28% 72%,rgba(154,92,255,.14),transparent 36%),
    linear-gradient(180deg,rgba(5,14,29,.94),rgba(5,10,22,.82));
}

.dragon-card-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.18;
  background-image:
    linear-gradient(rgba(91,233,255,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,233,255,.10) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.78),transparent 96%);
}

.dragon-card-preview{
  width:100%;
  max-height:245px !important;
  object-fit:contain;
  border-radius:14px;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.38));
  transition:transform .35s ease,filter .35s ease;
}

.desktop-dragon-card:hover .dragon-card-preview{
  transform:translateY(-4px) scale(1.015);
  filter:drop-shadow(0 28px 42px rgba(0,0,0,.44));
}

.dragon-card-speech{
  position:absolute;
  right:16px;
  top:54px;
  z-index:3;
  max-width:150px;
  padding:9px 12px;
  border:1px solid rgba(255,172,120,.26);
  border-radius:14px 14px 4px 14px;
  background:rgba(9,15,29,.84);
  backdrop-filter:blur(10px);
  color:#f6f8ff;
  font-size:11px;
  font-weight:800;
  line-height:1.25;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}

.dragon-card-speech span{
  color:#ff9d72;
}

.dragon-card-abilities{
  position:absolute;
  left:16px;
  right:16px;
  bottom:14px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  z-index:3;
}

.dragon-card-abilities span{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(91,233,255,.18);
  background:rgba(5,12,26,.78);
  backdrop-filter:blur(8px);
  color:#bcd0e9;
  font:800 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.desktop-dragon-card:hover .dragon-card-abilities span{
  border-color:rgba(255,157,92,.28);
}

@media (max-width:760px){
  .dragon-card-speech{
    right:12px;
    top:52px;
    max-width:130px;
  }
  .dragon-card-abilities{
    left:12px;
    right:12px;
  }
}


/* Desktop Pet Dragon card cleanup */
.desktop-dragon-card .project-card-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.desktop-dragon-card .dragon-card-media{
  min-height:250px;
  padding:24px 18px 48px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.desktop-dragon-card .dragon-card-preview{
  width:auto;
  max-width:84%;
  max-height:220px !important;
  object-fit:contain;
  object-position:center center;
  filter:drop-shadow(0 20px 32px rgba(0,0,0,.36));
}

.desktop-dragon-card .dragon-card-abilities{
  left:18px;
  right:18px;
  bottom:12px;
  justify-content:center;
}

.desktop-dragon-card .project-actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  align-items:center;
}

.desktop-dragon-card .project-actions .button{
  width:100%;
  min-width:0;
  justify-content:center;
  text-align:center;
  padding-left:14px;
  padding-right:14px;
}

.desktop-dragon-card .project-actions .download-meter{
  grid-column:1 / -1;
  justify-content:center;
  width:100%;
  padding-top:4px;
}

.desktop-dragon-card .download-meter-label{
  writing-mode:horizontal-tb;
  transform:none;
  font-size:8px;
  letter-spacing:.16em;
}

.desktop-dragon-card .floppy-counter{
  justify-content:center;
}

.desktop-dragon-card .project-card-body p{
  margin-bottom:2px;
}

@media (max-width:760px){
  .desktop-dragon-card .dragon-card-media{
    min-height:230px;
    padding:20px 14px 50px;
  }

  .desktop-dragon-card .dragon-card-preview{
    max-width:86%;
    max-height:200px !important;
  }
}

@media (max-width:560px){
  .desktop-dragon-card .project-actions{
    grid-template-columns:1fr;
  }
}


/* Mini NFC NES photo galleries */
.mini-journey-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.mini-journey-grid .gallery-card img{
  height:250px;
  background:rgba(255,255,255,.03);
}

.mini-photo-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.mini-photo-grid .gallery-card img{
  height:230px;
  background:rgba(255,255,255,.03);
}

.nes-photo-feature{
  padding:18px;
  margin:0;
}
.nes-photo-feature img{
  display:block;
  width:100%;
  max-height:520px;
  object-fit:contain;
  border-radius:16px;
  background:rgba(255,255,255,.03);
}
.nes-photo-feature figcaption{
  margin-top:12px;
  color:#7f8ea6;
  font-size:12px;
}

@media (max-width:1100px){
  .mini-photo-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .mini-journey-grid,
  .mini-photo-grid{
    grid-template-columns:1fr;
  }
  .mini-journey-grid .gallery-card img,
  .mini-photo-grid .gallery-card img{
    height:220px;
  }
}


/* =========================================================
   Single large floppy download counter
   ========================================================= */
.project-actions{
  align-items:flex-end;
}

.download-meter{
  width:124px;
  min-width:124px;
  min-height:96px;
  padding:0;
  justify-content:center;
  align-items:flex-end;
  background:none;
  border:none;
  box-shadow:none;
}

.download-meter::before,
.download-meter::after,
.download-meter-label,
.floppy-counter,
.floppy-digit,
.floppy-digit::before,
.floppy-digit::after{
  display:none !important;
  content:none !important;
}

.download-floppy-card{
  position:relative;
  width:112px;
  aspect-ratio:1 / 1;
  background:url('/assets/images/ui/floppy-total-downloads.png') center / contain no-repeat;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.22));
  flex:0 0 auto;
}

.download-floppy-title,
.download-floppy-value{
  position:absolute;
  left:18%;
  width:64%;
  text-align:center;
  pointer-events:none;
}

.download-floppy-title{
  top:53%;
  color:#31b6ea;
  font:900 7px/1 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.2);
}

.download-floppy-title-secondary{
  top:61%;
  font-size:8px;
  letter-spacing:.10em;
}

.download-floppy-value{
  top:73%;
  color:#173b55;
  font:900 16px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.18em;
  text-indent:.18em;
}

.download-meter.is-loading .download-floppy-value{
  opacity:.72;
}

.download-meter.is-error .download-floppy-title,
.download-meter.is-error .download-floppy-title-secondary{
  color:#52c5ef;
}

.download-meter.is-error .download-floppy-value{
  color:#8a2434;
}

.desktop-dragon-card .project-actions{
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) 124px;
  align-items:end;
}

.desktop-dragon-card .project-actions .download-meter{
  grid-column:auto;
  width:124px;
  min-width:124px;
  justify-self:end;
  padding-top:0;
}

@media (max-width: 1100px){
  .desktop-dragon-card .project-actions{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .desktop-dragon-card .project-actions .download-meter{
    grid-column:1 / -1;
    justify-self:center;
  }
}

@media (max-width:760px){
  .download-meter{
    width:112px;
    min-width:112px;
    min-height:88px;
  }

  .download-floppy-card{
    width:102px;
  }

  .download-floppy-title{
    font-size:6px;
  }

  .download-floppy-title-secondary{
    font-size:7px;
  }

  .download-floppy-value{
    font-size:14px;
  }
}


/* =========================================================
   Refined straight-on floppy counter + card action alignment
   ========================================================= */
.project-card-body{
  flex:1;
}

.project-actions{
  margin-top:auto;
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:nowrap;
}

.project-actions .button{
  flex:1 1 0;
  min-width:0;
  white-space:nowrap;
  text-align:center;
  justify-content:center;
}

.download-meter{
  flex:0 0 92px;
  width:92px;
  min-width:92px;
  min-height:98px;
  padding:0;
  justify-content:center;
  align-items:flex-end;
  background:none;
  border:none;
  box-shadow:none;
}

.download-meter::before,
.download-meter::after,
.download-meter-label,
.floppy-counter,
.floppy-digit,
.floppy-digit::before,
.floppy-digit::after{
  display:none !important;
  content:none !important;
}

.download-floppy-card{
  position:relative;
  width:92px;
  aspect-ratio:480 / 540;
  background:url('/assets/images/ui/floppy-front-downloads.png') center / contain no-repeat;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.22));
  flex:0 0 auto;
}

.download-floppy-title,
.download-floppy-value{
  position:absolute;
  left:20%;
  width:60%;
  text-align:center;
  pointer-events:none;
}

.download-floppy-title{
  top:54%;
  color:#101114;
  font:800 5.8px/1.05 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  letter-spacing:.02em;
  text-transform:none;
}

.download-floppy-title-secondary{
  top:61%;
  font-size:5.4px;
}

.download-floppy-value{
  top:73%;
  color:#070809;
  font:900 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.08em;
}

.download-meter.is-loading .download-floppy-value{
  opacity:.72;
}

.download-meter.is-error .download-floppy-title,
.download-meter.is-error .download-floppy-title-secondary,
.download-meter.is-error .download-floppy-value{
  color:#111;
}

.desktop-dragon-card .project-actions{
  display:flex;
  grid-template-columns:none;
  align-items:flex-end;
  gap:12px;
}

.desktop-dragon-card .project-actions .button{
  width:auto;
  padding-left:14px;
  padding-right:14px;
}

.desktop-dragon-card .project-actions .download-meter{
  grid-column:auto;
  width:92px;
  min-width:92px;
  justify-self:auto;
  padding-top:0;
}

@media (max-width: 1180px){
  .project-actions{
    flex-wrap:wrap;
  }

  .download-meter{
    margin-left:auto;
  }
}

@media (max-width: 760px){
  .project-actions .button{
    flex:1 1 calc(50% - 6px);
  }

  .download-meter,
  .desktop-dragon-card .project-actions .download-meter{
    width:86px;
    min-width:86px;
    min-height:92px;
  }

  .download-floppy-card{
    width:86px;
  }

  .download-floppy-title{
    font-size:5.3px;
  }

  .download-floppy-title-secondary{
    font-size:5px;
  }

  .download-floppy-value{
    font-size:11px;
  }
}


/* =========================================================
   Floppy counter label-only refinement
   ========================================================= */
.download-floppy-title,
.download-floppy-title-secondary{
  display:none;
}

.download-floppy-value{
  top:56%;
  left:22%;
  width:56%;
  color:#050608;
  font:900 13px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.12em;
}

@media (max-width: 760px){
  .download-floppy-value{
    font-size:12px;
  }
}


/* =========================================================
   Floppy counter bottom alignment
   Line the bottom of the floppy up with the action buttons.
   ========================================================= */
.project-actions{
  align-items:flex-end;
}

.download-meter,
.desktop-dragon-card .project-actions .download-meter{
  align-self:flex-end;
  margin-bottom:0;
  transform:translateY(10px);
}

@media (max-width:760px){
  .download-meter,
  .desktop-dragon-card .project-actions .download-meter{
    transform:translateY(8px);
  }
}