:root{
    --bg:#04070a;
    --bg-deep:#02040a;
    --ink:#eef6f0;
    --muted:#a7bcb0;
    --faint:#6f877a;
    --green:#22c55e;
    --green-2:#4ade80;
    --green-3:#86efac;
    --teal:#2dd4bf;
    --glass:linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.028) 55%, rgba(34,197,94,.05));
    --glass-strong:linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.05) 60%, rgba(34,197,94,.07));
    --stroke:rgba(255,255,255,.13);
    --stroke-green:rgba(74,222,128,.35);
    --shadow:0 24px 60px rgba(0,0,0,.55);
    --glow:0 0 44px rgba(34,197,94,.28);
    --radius:22px;
    --font-display:"Sora", system-ui, sans-serif;
    --font-body:"Manrope", system-ui, sans-serif;
    --font-mono:"JetBrains Mono", ui-monospace, monospace;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--ink);
    background:
      radial-gradient(1100px 620px at 85% -10%, rgba(34,197,94,.16), transparent 60%),
      radial-gradient(900px 560px at -10% 22%, rgba(45,212,191,.09), transparent 55%),
      radial-gradient(1000px 700px at 50% 115%, rgba(34,197,94,.10), transparent 60%),
      linear-gradient(180deg, #060b10 0%, var(--bg) 34%, var(--bg-deep) 100%);
    background-color:var(--bg);
    overflow-x:hidden;
    line-height:1.6;
  }
  ::selection{background:rgba(34,197,94,.45); color:#04150a}
  img{max-width:100%; display:block}
  a{color:inherit}
  button{font-family:inherit}
  .wrap{width:min(1200px, 100% - 40px); margin-inline:auto}
  section{position:relative}

  /* ---------- ambient background layers ---------- */
  .bg-photo{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:url('/images/img-b71e7e06a5.jpg') center 18%/cover no-repeat;
    opacity:.14;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 88%);
            mask-image:linear-gradient(180deg, #000 0%, transparent 88%);
  }
  .bg-grid{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:linear-gradient(rgba(134,239,172,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(134,239,172,.055) 1px, transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(720px 480px at 50% 12%, #000 30%, transparent 78%);
            mask-image:radial-gradient(720px 480px at 50% 12%, #000 30%, transparent 78%);
  }
  .orb{position:absolute; border-radius:50%; filter:blur(70px); z-index:0; pointer-events:none}
  .orb-a{width:420px;height:420px; background:rgba(34,197,94,.22); top:-120px; right:-80px}
  .orb-b{width:300px;height:300px; background:rgba(45,212,191,.14); top:340px; left:-140px}

  /* ---------- glass primitives ---------- */
  .glass{
    background:var(--glass);
    border:1px solid var(--stroke);
    border-radius:var(--radius);
    backdrop-filter:blur(18px) saturate(150%);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
    box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.14);
  }
  .tilt{transform-style:preserve-3d; will-change:transform; transition:box-shadow .35s ease, border-color .35s ease}
  .tilt:hover{border-color:var(--stroke-green); box-shadow:var(--shadow), var(--glow), inset 0 1px 0 rgba(255,255,255,.16)}

  /* ---------- nav ---------- */
  header{
    position:fixed; top:14px; left:0; right:0; z-index:60;
  }
  .nav{
    display:flex; align-items:center; gap:18px;
    padding:10px 12px 10px 14px;
    border-radius:18px;
  }
  .brand{
    display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0;
    background:#ffffff; padding:6px 16px 6px 7px; border-radius:14px;
    box-shadow:0 10px 26px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.9), 0 0 22px rgba(34,197,94,.22);
  }
  .brand-logo{
    height:40px; width:40px; object-fit:contain; border-radius:50%; background:#ffffff;
    flex:none;
  }
  .brand-name{font-family:var(--font-display); font-weight:800; font-size:1.06rem; letter-spacing:.01em; white-space:nowrap; color:#0b120d}
  .brand-name em{font-style:normal; color:#16a34a}
  .brand-tag{display:block; font-family:var(--font-mono); font-size:.58rem; letter-spacing:.13em; text-transform:uppercase; color:#5f7165; font-weight:600; line-height:1.3}
  .nav-links{display:flex; gap:4px; margin-left:auto}
  .nav-links a{
    text-decoration:none; font-weight:600; font-size:.92rem; color:var(--muted);
    padding:9px 13px; border-radius:11px; transition:.25s;
  }
  .nav-links a:hover{color:var(--ink); background:rgba(255,255,255,.07)}
  .nav-cta{
    margin-left:6px; text-decoration:none; font-weight:800; font-size:.9rem; color:#04150a;
    background:linear-gradient(135deg, var(--green-2), var(--green));
    padding:11px 18px; border-radius:12px; box-shadow:0 8px 24px rgba(34,197,94,.35);
    transition:.25s; white-space:nowrap;
  }
  .nav-cta:hover{transform:translateY(-1px); box-shadow:0 12px 30px rgba(34,197,94,.5)}
  .menu-btn{
    display:none; margin-left:auto; background:rgba(255,255,255,.06); border:1px solid var(--stroke);
    color:var(--ink); border-radius:11px; padding:9px 12px; cursor:pointer;
  }
  .menu-btn svg{width:20px;height:20px;display:block}

  /* ---------- hero ---------- */
  .hero{padding:158px 0 84px; overflow:hidden}
  .hero-inner{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center}
  .pill{
    display:inline-flex; align-items:center; gap:9px;
    font-family:var(--font-mono); font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
    color:var(--green-3); padding:8px 14px; border-radius:999px;
    background:rgba(34,197,94,.10); border:1px solid rgba(74,222,128,.32);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  }
  .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green-2); box-shadow:0 0 10px var(--green-2); animation:pulse 2.2s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
  h1{
    font-family:var(--font-display); font-weight:800; line-height:1.04; letter-spacing:-.015em;
    font-size:clamp(2.5rem, 5.4vw, 4.3rem); margin:22px 0 0;
  }
  h1 .word-green{
    background:linear-gradient(92deg, #86efac 0%, #4ade80 45%, #22c55e 80%, #2dd4bf 115%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 0 26px rgba(74,222,128,.35));
  }
  .hero-sub{color:var(--muted); font-size:1.13rem; margin:20px 0 0; max-width:34rem; font-weight:500}
  .hero-sub strong{color:var(--ink)}
  .hero-line{
    margin:18px 0 0; font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:var(--ink);
  }
  .hero-line::before{content:""; display:inline-block; width:30px; height:2px; background:var(--green-2); box-shadow:0 0 9px var(--green-2); vertical-align:middle; margin-right:12px}
  .hero-line em{font-style:normal; color:var(--green-2)}
  .hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
  .btn{
    display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:800; font-size:.98rem;
    padding:15px 26px; border-radius:14px; transition:.25s; cursor:pointer; border:1px solid transparent;
  }
  .btn svg{width:18px;height:18px}
  .btn-primary{background:linear-gradient(135deg, var(--green-2), var(--green) 60%, #16a34a); color:#03140a; box-shadow:0 14px 34px rgba(34,197,94,.38)}
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 20px 44px rgba(34,197,94,.5)}
  .btn-glass{background:rgba(255,255,255,.06); color:var(--ink); border-color:var(--stroke); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
  .btn-glass:hover{background:rgba(255,255,255,.11); transform:translateY(-2px)}
  .hero-points{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:30px; color:var(--muted); font-size:.92rem; font-weight:600}
  .hero-points span{display:inline-flex; align-items:center; gap:8px}
  .hero-points svg{width:16px;height:16px;color:var(--green-2); flex:none}

  .hero-stage{position:relative; perspective:1200px}
  .logo-panel{
    position:relative; padding:30px 26px 24px; border-radius:28px;
    transform-style:preserve-3d;
    background:#ffffff; border:1px solid rgba(255,255,255,.95);
    box-shadow:0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.6), 0 0 54px rgba(34,197,94,.22), inset 0 1px 0 #ffffff;
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .logo-panel::before{
    content:""; position:absolute; inset:-38px; border-radius:44px; z-index:-1;
    background:radial-gradient(closest-side, rgba(34,197,94,.38), rgba(34,197,94,.08) 55%, transparent 75%);
    filter:blur(12px);
  }
  .logo-img{width:100%; max-width:400px; margin:0 auto; height:auto; border-radius:50%; background:#ffffff; box-shadow:none; filter:drop-shadow(0 14px 22px rgba(0,0,0,.16))}
  .logo-ring{
    position:absolute; inset:-16px; border-radius:38px; border:1px dashed rgba(134,239,172,.30);
    pointer-events:none;
  }
  .logo-tag{text-align:center; font-family:var(--font-mono); font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#5f7165; margin:4px 0 2px}
  .chip{
    position:absolute; z-index:3; display:flex; align-items:center; gap:9px;
    padding:10px 15px; border-radius:14px; font-weight:800; font-size:.85rem; color:var(--ink);
    background:linear-gradient(150deg, rgba(20,32,26,.82), rgba(10,18,14,.78));
    border:1px solid rgba(134,239,172,.30);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    box-shadow:0 16px 34px rgba(0,0,0,.5), 0 0 22px rgba(34,197,94,.16);
    transform:translateZ(46px);
  }
  .chip svg{width:17px;height:17px;color:var(--green-2)}
  .chip small{display:block; font-weight:600; color:var(--muted); font-size:.7rem; letter-spacing:.02em}
  .chip-1{top:6%; left:-26px}
  .chip-2{top:-22px; right:-10px}
  .chip-3{bottom:104px; left:-24px}
  .float-slow{animation:floaty 7s ease-in-out infinite}
  .float-med{animation:floaty 5.6s ease-in-out infinite reverse}
  @keyframes floaty{0%,100%{margin-top:0}50%{margin-top:-11px}}

  /* ---------- marquee ---------- */
  .marquee-zone{padding:6px 0 10px; position:relative; z-index:2}
  .marquee{
    overflow:hidden; border-radius:16px; padding:13px 0;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .marquee-track{display:flex; gap:0; width:max-content; animation:scrollX 30s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
  .marquee-track span{
    font-family:var(--font-mono); font-size:.82rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
    color:var(--muted); padding:0 26px; white-space:nowrap; display:inline-flex; align-items:center; gap:26px;
  }
  .marquee-track span::after{content:""; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 9px var(--green-2)}
  @keyframes scrollX{to{transform:translateX(-50%)}}

  /* ---------- section scaffolding ---------- */
  .section{padding:88px 0 10px}
  .sec-head{max-width:720px; margin-bottom:40px; position:relative; z-index:2}
  .sec-kicker{
    font-family:var(--font-mono); font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
    color:var(--green-2); display:inline-flex; align-items:center; gap:10px;
  }
  .sec-kicker::before{content:""; width:26px; height:1px; background:var(--green-2); box-shadow:0 0 8px var(--green-2)}
  h2{font-family:var(--font-display); font-weight:800; font-size:clamp(1.8rem, 3.6vw, 2.6rem); line-height:1.12; letter-spacing:-.01em; margin:14px 0 12px}
  .sec-head p{color:var(--muted); font-size:1.05rem; margin:0; font-weight:500}

  /* ---------- categories ---------- */
  .cat-grid{display:grid; grid-template-columns:repeat(6, 1fr); gap:20px; position:relative; z-index:2}
  .cat-card{
    grid-column:span 2; overflow:hidden; border-radius:var(--radius); text-decoration:none;
    display:flex; flex-direction:column; padding:0;
  }
  .cat-card:nth-child(4){grid-column:2 / span 2}
  .cat-card:nth-child(5){grid-column:4 / span 2}
  .cat-media{position:relative; height:168px; overflow:hidden; flex:none}
  .cat-media img{width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .6s ease}
  .cat-card:hover .cat-media img{transform:scale(1.09)}
  .cat-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(3,10,6,.88))}
  .cat-icon{
    position:absolute; left:18px; bottom:14px; z-index:2; width:46px; height:46px; border-radius:13px;
    display:grid; place-items:center; color:#04150a;
    background:linear-gradient(135deg, var(--green-2), var(--green));
    box-shadow:0 10px 24px rgba(34,197,94,.45);
  }
  .cat-icon svg{width:23px; height:23px}
  .cat-count{
    position:absolute; top:14px; right:14px; z-index:2; font-family:var(--font-mono); font-size:.7rem; font-weight:600;
    color:var(--green-3); background:rgba(2,12,6,.62); border:1px solid rgba(134,239,172,.3);
    padding:6px 10px; border-radius:999px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  }
  .cat-body{padding:20px 22px 24px; display:flex; flex-direction:column; gap:9px; flex:1}
  .cat-body h3{font-family:var(--font-display); font-size:1.16rem; font-weight:700; margin:0; line-height:1.25}
  .cat-body p{color:var(--muted); font-size:.94rem; margin:0; font-weight:500; flex:1}
  .cat-link{font-weight:800; font-size:.9rem; color:var(--green-2); display:inline-flex; align-items:center; gap:7px}
  .cat-link svg{width:15px; height:15px; transition:transform .25s}
  .cat-card:hover .cat-link svg{transform:translateX(4px)}

  /* ---------- articles ---------- */
  .tools{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:26px; position:relative; z-index:2}
  .filters{display:flex; flex-wrap:wrap; gap:8px}
  .filter-btn{
    border:1px solid var(--stroke); background:rgba(255,255,255,.05); color:var(--muted);
    font-weight:700; font-size:.87rem; padding:10px 16px; border-radius:999px; cursor:pointer;
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:.22s;
  }
  .filter-btn:hover{color:var(--ink); border-color:rgba(255,255,255,.3)}
  .filter-btn.active{
    background:linear-gradient(135deg, var(--green-2), var(--green)); color:#04150a; border-color:transparent;
    box-shadow:0 8px 22px rgba(34,197,94,.35);
  }
  .search-box{
    margin-left:auto; display:flex; align-items:center; gap:9px; padding:0 16px; height:44px; min-width:min(280px, 100%);
    border-radius:999px;
  }
  .search-box svg{width:17px; height:17px; color:var(--faint); flex:none}
  .search-box input{
    background:none; border:0; outline:0; color:var(--ink); font:inherit; font-size:.93rem; width:100%; font-weight:600;
  }
  .search-box input::placeholder{color:var(--faint)}
  .art-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; position:relative; z-index:2}
  .art-card{overflow:hidden; display:flex; flex-direction:column; cursor:pointer; padding:0; text-align:left; width:100%; color:var(--ink); font:inherit; appearance:none}
  .art-media{position:relative; height:172px; overflow:hidden; flex:none}
  .art-media img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
  .art-card:hover .art-media img{transform:scale(1.08)}
  .art-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(3,10,6,.75))}
  .art-cat{
    position:absolute; left:14px; bottom:12px; z-index:2; font-family:var(--font-mono); font-size:.66rem; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase; color:#04150a; background:linear-gradient(135deg, var(--green-2), var(--green));
    padding:6px 11px; border-radius:999px;
  }
  .art-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; flex:1}
  .art-body h3{font-family:var(--font-display); font-size:1.08rem; font-weight:700; line-height:1.35; margin:0}
  .art-body p{color:var(--muted); font-size:.92rem; margin:0; font-weight:500; flex:1}
  .art-meta{display:flex; align-items:center; gap:14px; color:var(--faint); font-size:.8rem; font-weight:700; font-family:var(--font-mono)}
  .art-meta span{display:inline-flex; align-items:center; gap:6px}
  .art-meta svg{width:14px; height:14px}
  .art-read{color:var(--green-2); font-family:var(--font-body); font-weight:800; font-size:.86rem; margin-left:auto; display:inline-flex; gap:6px; align-items:center}
  .art-read svg{width:14px; height:14px; transition:transform .25s}
  .art-card:hover .art-read svg{transform:translateX(3px)}
  .no-results{grid-column:1 / -1; text-align:center; padding:44px 20px; color:var(--muted); font-weight:600}


  .free-banner{display:flex; gap:16px; align-items:flex-start; padding:20px 22px; margin-bottom:22px; position:relative; z-index:2}
  .free-banner-badge{font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.12em; color:#04150a; background:linear-gradient(135deg, var(--green-2), var(--green)); padding:8px 13px; border-radius:999px; flex:none; box-shadow:0 8px 22px rgba(34,197,94,.35)}
  .free-banner p{margin:2px 0 0; color:var(--muted); font-weight:500; font-size:.98rem}
  .free-banner p strong{color:var(--ink)}
  .art-free{position:absolute; top:12px; right:12px; z-index:2; font-family:var(--font-mono); font-size:.64rem; font-weight:700; letter-spacing:.1em; color:#04150a; background:linear-gradient(135deg, var(--green-2), var(--green)); padding:6px 10px; border-radius:999px; box-shadow:0 6px 16px rgba(0,0,0,.35)}
  @media (max-width:600px){ .free-banner{flex-direction:column; gap:10px} }
  /* ---------- learning path ---------- */
  .path-strip{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:12px; align-items:stretch; margin:6px 0 8px; position:relative; z-index:2}
  .path-step{padding:20px 20px 18px; text-align:left; display:flex; gap:14px; align-items:flex-start; text-decoration:none}
  .path-step .p-num{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;font-family:var(--font-mono);font-weight:700;font-size:.85rem;color:#04150a;background:linear-gradient(135deg,var(--green-2),var(--green));box-shadow:0 8px 20px rgba(34,197,94,.35)}
  .path-step h3{font-family:var(--font-display);font-size:1rem;margin:0 0 4px}
  .path-step p{color:var(--muted);font-size:.86rem;margin:0;font-weight:500;line-height:1.45}
  .path-arrow{display:grid;place-items:center;color:var(--green-2);font-size:1.1rem}
  @media(max-width:760px){.path-strip{grid-template-columns:1fr}.path-arrow{transform:rotate(90deg);padding:2px 0}}

  /* ---------- labs ---------- */
  .lab-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; position:relative; z-index:2}
  .lab-card{overflow:hidden; display:flex; flex-direction:column; cursor:pointer; padding:0; text-align:left; width:100%; color:var(--ink); font:inherit; appearance:none}
  .lab-top{padding:20px 22px 0; display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
  .lab-badge{font-family:var(--font-mono);font-size:.64rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#04150a;background:linear-gradient(135deg,var(--green-2),var(--green));padding:6px 10px;border-radius:999px}
  .lab-free{font-family:var(--font-mono);font-size:.64rem;font-weight:700;letter-spacing:.09em;color:var(--green-3);border:1px solid rgba(74,222,128,.35);padding:6px 10px;border-radius:999px;background:rgba(34,197,94,.08)}
  .lab-body{padding:14px 22px 22px; display:flex; flex-direction:column; gap:10px; flex:1}
  .lab-body h3{font-family:var(--font-display);font-size:1.06rem;font-weight:700;line-height:1.35;margin:0}
  .lab-body p{color:var(--muted);font-size:.92rem;margin:0;font-weight:500;flex:1}
  .lab-meta{display:flex;flex-wrap:wrap;gap:10px 14px;color:var(--faint);font-size:.79rem;font-weight:700;font-family:var(--font-mono)}
  .lab-cta{color:var(--green-2);font-weight:800;font-size:.88rem;display:inline-flex;gap:6px;align-items:center}
  .path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:2}
  .path-card{padding:24px}
  .path-card-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
  .path-card h3{font-family:var(--font-display);font-size:1.12rem;margin:0 0 8px;line-height:1.3}
  .path-desc{color:var(--muted);font-size:.92rem;font-weight:500;margin:0 0 14px}
  .skill-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
  .skill-tags span{font-size:.76rem;font-weight:700;color:var(--green-3);background:rgba(34,197,94,.09);border:1px solid rgba(74,222,128,.26);padding:6px 10px;border-radius:999px}
  .path-steps-list{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:12px}
  .path-steps-list li{display:flex;gap:11px;color:var(--muted);font-size:.9rem;font-weight:500;line-height:1.5}
  .path-steps-list a{color:var(--green-2);font-weight:800;text-decoration:none;white-space:nowrap}
  .tick-btn{width:26px;height:26px;border-radius:50%;flex:none;border:1.5px solid rgba(134,239,172,.45);background:rgba(255,255,255,.05);color:transparent;cursor:pointer;font-weight:900;font-size:.8rem;display:grid;place-items:center;margin-top:1px;transition:.2s}
  .tick-btn.done{background:linear-gradient(135deg,var(--green-2),var(--green));color:#04150a;border-color:transparent}
  .path-prog-label{color:var(--faint);font-family:var(--font-mono);font-size:.75rem;font-weight:700;margin:6px 0 0}
  @media(max-width:1020px){.path-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:600px){.path-grid{grid-template-columns:1fr}}
  .level-badge{font-family:var(--font-mono);font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px}
  .level-easy{color:#bbf7d0;background:rgba(34,197,94,.18);border:1px solid rgba(74,222,128,.45)}
  .level-intermediate{color:#fef08a;background:rgba(234,179,8,.14);border:1px solid rgba(250,204,21,.4)}
  .level-tough{color:#fecaca;background:rgba(239,68,68,.13);border:1px solid rgba(248,113,113,.4)}
  .lab-num{font-family:var(--font-mono);font-weight:800;font-size:.78rem;color:var(--green-3);letter-spacing:.06em}
  .reader-body ol{margin:0 0 16px;padding-left:22px}
  .reader-body ol li{margin-bottom:9px}
  .lab-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;position:relative;z-index:2}
  .lab-filter-btn{border:1px solid var(--stroke);background:rgba(255,255,255,.05);color:var(--muted);font-weight:700;font-size:.86rem;padding:10px 16px;border-radius:999px;cursor:pointer;transition:.22s}
  .lab-filter-btn.active{background:linear-gradient(135deg,var(--green-2),var(--green));color:#04150a;border-color:transparent;box-shadow:0 8px 22px rgba(34,197,94,.35)}
  @media(max-width:1020px){.lab-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:600px){.lab-grid{grid-template-columns:1fr}}

  /* ---------- quizzes ---------- */
  .quiz-shell{padding:clamp(20px,3.5vw,34px); position:relative; z-index:2}
  .quiz-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
  .quiz-tab{border:1px solid var(--stroke);background:rgba(255,255,255,.05);color:var(--muted);font-weight:800;font-size:.88rem;padding:11px 17px;border-radius:999px;cursor:pointer;transition:.22s}
  .quiz-tab.active{background:linear-gradient(135deg,var(--green-2),var(--green));color:#04150a;border-color:transparent;box-shadow:0 8px 22px rgba(34,197,94,.35)}
  .quiz-progress-wrap{height:9px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:14px 0 18px}
  .quiz-progress{height:100%;background:linear-gradient(90deg,var(--green-2),var(--teal));border-radius:999px;transition:width .35s ease}
  .quiz-meta-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-family:var(--font-mono);font-size:.78rem;font-weight:700;letter-spacing:.04em}
  .quiz-question{font-family:var(--font-display);font-size:clamp(1.15rem,2.4vw,1.45rem);font-weight:700;line-height:1.35;margin:6px 0 16px}
  .quiz-options{display:grid;gap:11px}
  .quiz-opt{text-align:left;width:100%;padding:15px 17px;border-radius:14px;border:1px solid var(--stroke);background:rgba(255,255,255,.05);color:var(--ink);font-weight:700;font-size:.96rem;cursor:pointer;transition:.2s;display:flex;gap:11px;align-items:center}
  .quiz-opt:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08)}
  .quiz-opt.correct{border-color:rgba(74,222,128,.7);background:rgba(34,197,94,.16);color:#dcfce7}
  .quiz-opt.wrong{border-color:rgba(248,113,113,.6);background:rgba(239,68,68,.13)}
  .quiz-opt:disabled{cursor:default;opacity:1}
  .quiz-feedback{margin-top:16px;padding:15px 17px;border-radius:13px;font-weight:600;font-size:.94rem;line-height:1.55;display:none}
  .quiz-feedback.show{display:block}
  .quiz-feedback.good{background:rgba(34,197,94,.12);border:1px solid rgba(74,222,128,.35);color:#dcfce7}
  .quiz-feedback.bad{background:rgba(239,68,68,.10);border:1px solid rgba(248,113,113,.35);color:#fecaca}
  .quiz-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
  .quiz-next{border:0;cursor:pointer}
  .quiz-result{text-align:center;padding:12px 6px 6px}
  .quiz-score-big{font-family:var(--font-display);font-size:clamp(2.6rem,6vw,3.6rem);font-weight:800;line-height:1;margin:10px 0 6px}
  .quiz-score-big em{font-style:normal;color:var(--green-2)}
  .quiz-result p{color:var(--muted);font-weight:500;max-width:32rem;margin:8px auto 0}
  .quiz-intro p{color:var(--muted);font-weight:500;margin:0 0 6px;max-width:38rem}

  /* ---------- roadmap finder ---------- */
  .finder-cta-banner{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:20px 22px;margin-bottom:26px;position:relative;z-index:2}
  .finder-cta-banner h3{font-family:var(--font-display);font-size:1.12rem;margin:0 0 4px}
  .finder-cta-banner p{color:var(--muted);font-weight:500;margin:0;max-width:38rem;font-size:.95rem}
  .finder-shell{padding:clamp(20px,3.5vw,34px);position:relative;z-index:2}
  .finder-step-label{font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--green-2)}
  .finder-title{font-family:var(--font-display);font-size:clamp(1.35rem,2.8vw,1.8rem);font-weight:800;line-height:1.25;margin:10px 0 8px}
  .finder-sub{color:var(--muted);font-weight:500;margin:0 0 18px;max-width:40rem}
  .finder-tracks{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  @media(max-width:640px){.finder-tracks{grid-template-columns:1fr}}
  .finder-track-btn{text-align:left;padding:20px;border-radius:16px;border:1px solid var(--stroke);background:rgba(255,255,255,.05);color:var(--ink);cursor:pointer;transition:.22s;display:flex;gap:14px;align-items:flex-start;width:100%}
  .finder-track-btn:hover{border-color:rgba(74,222,128,.6);background:rgba(34,197,94,.10);transform:translateY(-2px)}
  .finder-track-icon{width:48px;height:48px;border-radius:13px;flex:none;display:grid;place-items:center;font-size:1.35rem;background:linear-gradient(135deg,var(--green-2),var(--green));color:#04150a}
  .finder-track-btn strong{font-family:var(--font-display);font-size:1.02rem;display:block;margin-bottom:3px}
  .finder-track-btn span{color:var(--muted);font-size:.9rem;font-weight:500;line-height:1.5;display:block}
  .finder-intro-icon{font-size:2.2rem;margin-bottom:6px}
  .finder-options{display:grid;gap:11px}
  .finder-opt{text-align:left;width:100%;padding:15px 17px;border-radius:14px;border:1px solid var(--stroke);background:rgba(255,255,255,.05);color:var(--ink);font-weight:700;font-size:.96rem;cursor:pointer;transition:.2s;display:flex;gap:11px;align-items:center}
  .finder-opt:hover{border-color:rgba(74,222,128,.65);background:rgba(34,197,94,.12)}
  .finder-opt-letter{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;background:rgba(34,197,94,.16);border:1px solid rgba(74,222,128,.4);color:var(--green-3);font-family:var(--font-mono);font-size:.8rem;font-weight:800}
  .finder-back{background:none;border:0;color:var(--muted);font-weight:700;cursor:pointer;padding:8px 4px;font-size:.9rem}
  .finder-back:hover{color:var(--ink)}
  .rec-grid{display:grid;gap:16px;margin-top:6px}
  .rec-card{padding:22px;border-radius:18px;border:1px solid rgba(74,222,128,.32);background:linear-gradient(150deg,rgba(34,197,94,.10),rgba(255,255,255,.04))}
  .rec-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:8px}
  .rec-rank{font-family:var(--font-mono);font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#04150a;background:linear-gradient(135deg,var(--green-2),var(--green));padding:6px 11px;border-radius:999px}
  .rec-rank.alt{background:rgba(255,255,255,.10);color:var(--green-3);border:1px solid rgba(74,222,128,.4)}
  .rec-card h3{font-family:var(--font-display);font-size:1.22rem;margin:0;line-height:1.3}
  .rec-card .rec-desc{color:var(--muted);font-weight:500;margin:0 0 12px}
  .rec-why{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:13px 15px;margin-bottom:14px}
  .rec-why strong{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green-2);margin-bottom:6px}
  .rec-why ul{margin:0;padding-left:18px;color:#d7e9dc}
  .rec-why li{margin-bottom:5px;font-size:.93rem}
  .rec-skills-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
  .rec-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
  .rec-actions .btn{padding:12px 18px;font-size:.9rem}
  .theme-light .finder-shell{color:var(--ink)}

  /* ---------- mission ---------- */
  .mission-panel{padding:clamp(28px, 5vw, 54px); text-align:center; overflow:hidden}
  .mission-badge{
    display:inline-flex; flex-direction:column; align-items:center;
    background:#ffffff; padding:20px 34px 16px; border-radius:20px; margin:0 auto 16px;
    box-shadow:0 22px 48px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.85), 0 0 34px rgba(34,197,94,.20);
  }
  .mission-badge img{width:104px; height:104px; object-fit:contain; border-radius:50%; background:#ffffff}
  .mission-badge-name{font-family:var(--font-display); font-weight:800; font-size:1.3rem; color:#0b120d; margin:10px 0 0; letter-spacing:.01em; line-height:1.2}
  .mission-badge-name em{font-style:normal; color:#16a34a}
  .mission-panel .logo-small{width:118px; margin:0 auto 8px; border-radius:16px; background:transparent; box-shadow:0 14px 34px rgba(0,0,0,.45)}
  .mission-quote{
    font-family:var(--font-display); font-weight:700; font-size:clamp(1.45rem, 3.2vw, 2.15rem);
    line-height:1.3; max-width:46rem; margin:16px auto 8px;
  }
  .mission-quote em{font-style:normal; color:var(--green-2)}
  .mission-panel > p{color:var(--muted); max-width:38rem; margin:10px auto 0; font-weight:500}
  .pillars{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:34px; text-align:left}
  .pillar{padding:22px; border-radius:18px}
  .pillar .p-icon{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:rgba(34,197,94,.14); border:1px solid rgba(74,222,128,.3); color:var(--green-2); margin-bottom:13px}
  .pillar .p-icon svg{width:21px; height:21px}
  .pillar h3{font-family:var(--font-display); font-size:1.02rem; margin:0 0 6px}
  .pillar p{color:var(--muted); font-size:.9rem; margin:0; font-weight:500}

  /* ---------- services ---------- */
  .svc-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; position:relative; z-index:2}
  .svc-card{padding:26px 24px}
  .svc-icon{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:rgba(34,197,94,.13); border:1px solid rgba(74,222,128,.3); color:var(--green-2); margin-bottom:16px}
  .svc-icon svg{width:24px; height:24px}
  .svc-card h3{font-family:var(--font-display); font-size:1.05rem; margin:0 0 8px; line-height:1.3}
  .svc-card p{color:var(--muted); font-size:.91rem; margin:0 0 18px; font-weight:500}
  .soon{
    font-family:var(--font-mono); font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
    color:var(--green-3); border:1px dashed rgba(74,222,128,.45); padding:6px 11px; border-radius:999px; display:inline-block;
  }


  .svc-cta{display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:800; font-size:.88rem; color:#04150a; background:linear-gradient(135deg, var(--green-2), var(--green)); padding:11px 17px; border-radius:11px; box-shadow:0 8px 22px rgba(34,197,94,.32); transition:.25s}
  .svc-cta:hover{transform:translateY(-2px); box-shadow:0 13px 28px rgba(34,197,94,.45)}
  .svc-cta svg{width:16px; height:16px}
  .svc-card{display:flex; flex-direction:column}
  .svc-card p{flex:1}
  /* ---------- CTA ---------- */
  .cta-panel{
    padding:clamp(30px, 5vw, 52px); display:grid; grid-template-columns:1.2fr .8fr; gap:34px; align-items:center; overflow:hidden;
  }
  .cta-panel h2{margin-top:0}
  .cta-panel p{color:var(--muted); font-weight:500; margin:0; max-width:32rem}
  .cta-side{display:flex; flex-direction:column; gap:14px}
  .cta-link{
    display:flex; align-items:center; gap:14px; text-decoration:none; padding:16px 18px; border-radius:16px;
    transition:.25s;
  }
  .cta-link:hover{border-color:var(--stroke-green); transform:translateY(-2px)}
  .cta-link .cl-icon{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg, var(--green-2), var(--green)); color:#04150a; flex:none}
  .cta-link .cl-icon svg{width:22px; height:22px}
  .cta-link strong{display:block; font-family:var(--font-display); font-size:.98rem}
  .cta-link span{color:var(--muted); font-size:.85rem; font-weight:600}


  .logo-name{font-family:var(--font-display); font-weight:800; font-size:clamp(1.7rem, 3.4vw, 2.15rem); text-align:center; margin:18px 0 2px; letter-spacing:.01em; color:#0b120d}
  .logo-name em{font-style:normal; color:#16a34a}
  .foot-badge{
    display:inline-flex; align-items:center; gap:10px;
    background:#ffffff; padding:7px 16px 7px 8px; border-radius:14px;
    box-shadow:0 10px 26px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.9), 0 0 20px rgba(34,197,94,.18);
  }
  .foot-name{font-family:var(--font-display); font-weight:800; font-size:1.05rem; margin:0; color:#0b120d; white-space:nowrap}
  .foot-name em{font-style:normal; color:#16a34a}
  /* ---------- founder ---------- */
  .founder-panel{
    padding:clamp(24px, 4vw, 44px); display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(24px, 4vw, 46px); align-items:center; overflow:hidden;
  }
  .founder-stage{position:relative; perspective:1000px; max-width:380px}
  .founder-frame{position:relative; padding:12px; border-radius:28px; transform-style:preserve-3d}
  .founder-frame::before{
    content:""; position:absolute; inset:-26px; border-radius:40px; z-index:-1;
    background:radial-gradient(closest-side, rgba(34,197,94,.34), rgba(34,197,94,.07) 55%, transparent 75%);
    filter:blur(10px);
  }
  .founder-frame img{width:100%; height:auto; border-radius:19px; box-shadow:0 26px 50px rgba(0,0,0,.5)}
  .founder-chip{
    position:absolute; left:50%; bottom:-17px; transform:translateX(-50%) translateZ(40px); white-space:nowrap;
    display:flex; align-items:center; gap:9px; padding:10px 17px; border-radius:999px;
    font-weight:800; font-size:.85rem; color:var(--ink);
    background:linear-gradient(150deg, rgba(20,32,26,.9), rgba(10,18,14,.88));
    border:1px solid rgba(134,239,172,.35);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    box-shadow:0 16px 34px rgba(0,0,0,.5), 0 0 22px rgba(34,197,94,.18);
  }
  .founder-chip svg{width:16px; height:16px; color:var(--green-2)}
  .founder-role{
    font-family:var(--font-mono); font-size:.74rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--green-2);
  }
  .founder-panel h2{margin:10px 0 4px}
  .founder-panel .founder-name-note{color:var(--muted); font-weight:600; margin:0 0 16px}
  .founder-panel .founder-about{color:var(--muted); font-weight:500; margin:0 0 14px; max-width:36rem}
  .founder-panel .founder-about strong{color:var(--ink)}
  .founder-facts{display:flex; flex-wrap:wrap; gap:9px; margin:20px 0 6px}
  .fact{
    font-size:.83rem; font-weight:700; color:var(--green-3); padding:8px 13px; border-radius:999px;
    background:rgba(34,197,94,.09); border:1px solid rgba(74,222,128,.28);
  }
  .founder-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px}

  /* ---------- social buttons ---------- */
  .social-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
  .social-btn{
    width:45px; height:45px; border-radius:13px; display:grid; place-items:center; color:var(--muted);
    background:rgba(255,255,255,.05); border:1px solid var(--stroke); text-decoration:none;
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:.25s;
  }
  .social-btn svg{width:20px; height:20px}
  .social-btn:hover{
    color:#04150a; background:linear-gradient(135deg, var(--green-2), var(--green));
    transform:translateY(-2px); box-shadow:0 10px 24px rgba(34,197,94,.4); border-color:transparent;
  }
  .contact-cards{display:grid; gap:14px; margin-top:26px}
  .contact-note{color:var(--faint); font-size:.86rem; font-weight:600; margin-top:14px}

  /* ---------- footer ---------- */
  footer{margin-top:96px; padding:0 0 34px; position:relative; z-index:2}
  .foot{padding:30px 30px 24px; border-radius:24px}
  .foot-top{display:flex; flex-wrap:wrap; gap:26px; align-items:flex-start; justify-content:space-between}
  .foot-logo{height:42px; width:42px; object-fit:contain; border-radius:50%; background:#ffffff; flex:none}
  .foot p{color:var(--muted); max-width:24rem; font-size:.93rem; font-weight:500; margin:12px 0 0}
  .foot-nav{display:flex; gap:44px; flex-wrap:wrap}
  .foot-nav h4{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--faint); margin:4px 0 12px}
  .foot-nav ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
  .foot-nav a{color:var(--muted); text-decoration:none; font-weight:600; font-size:.93rem}
  .foot-nav a:hover{color:var(--green-2)}
  .foot-bottom{
    border-top:1px solid rgba(255,255,255,.08); margin-top:26px; padding-top:20px;
    display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; color:var(--faint); font-size:.85rem; font-weight:600;
  }
  .foot-bottom .motto{color:var(--green-2); font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em}

  /* ---------- reader modal ---------- */
  .reader-backdrop{
    position:fixed; inset:0; z-index:90; background:rgba(1,4,3,.72);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    opacity:0; pointer-events:none; transition:opacity .3s;
  }
  .reader-backdrop.open{opacity:1; pointer-events:auto}
  .reader{
    position:fixed; inset:0; z-index:95; display:grid; place-items:end center; pointer-events:none;
  }
  .reader[hidden]{display:none}
  .reader-sheet{
    width:min(860px, 100%); max-height:92dvh; overflow-y:auto; pointer-events:auto;
    border-radius:26px 26px 0 0; transform:translateY(40px); opacity:0; transition:.38s cubic-bezier(.2,.8,.25,1);
    background:linear-gradient(160deg, rgba(16,26,21,.96), rgba(7,13,10,.97));
  }
  .reader.open .reader-sheet{transform:translateY(0); opacity:1}
  .reader-hero{position:relative; height:250px}
  .reader-hero img{width:100%; height:100%; object-fit:cover}
  .reader-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(2,8,5,.25), rgba(5,12,8,.94))}
  .reader-close{
    position:absolute; top:16px; right:16px; z-index:3; width:42px; height:42px; border-radius:50%;
    border:1px solid var(--stroke); background:rgba(3,10,6,.65); color:var(--ink); cursor:pointer;
    display:grid; place-items:center; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  }
  .reader-close svg{width:19px; height:19px}
  .reader-head{position:absolute; left:0; right:0; bottom:0; padding:22px clamp(20px, 5vw, 44px); z-index:2}
  .reader-head h3{font-family:var(--font-display); font-size:clamp(1.4rem, 3.4vw, 2rem); line-height:1.2; margin:10px 0 8px}
  .reader-body{padding:30px clamp(20px, 5vw, 44px) 46px; color:#cfe0d4; font-size:1.02rem}
  .reader-body h4{font-family:var(--font-display); color:var(--ink); font-size:1.18rem; margin:28px 0 8px}
  .reader-body h4:first-child{margin-top:0}
  .reader-body p{margin:0 0 14px}
  .reader-body ul{margin:0 0 16px; padding-left:20px}
  .reader-body li{margin-bottom:7px}
  .reader-body code{
    font-family:var(--font-mono); font-size:.86em; background:rgba(34,197,94,.13); color:var(--green-3);
    padding:2px 7px; border-radius:6px; border:1px solid rgba(74,222,128,.22);
  }
  .reader-body pre{
    background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.1); border-radius:14px;
    padding:16px 18px; overflow-x:auto; margin:0 0 18px;
  }
  .reader-body pre code{background:none; border:0; padding:0; color:#d9f5e2; font-size:.86rem; line-height:1.65; display:block}
  .takeaway{
    margin-top:26px; padding:20px 22px; border-radius:16px;
    background:rgba(34,197,94,.09); border:1px solid rgba(74,222,128,.32);
  }
  .takeaway strong{display:block; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green-2); margin-bottom:7px}
  .takeaway p{margin:0; color:var(--ink); font-weight:600}
  body.locked{overflow:hidden}

  /* ---------- reveal (content is always visible; motion handled by tilt/hover) ---------- */
  .reveal{opacity:1; transform:none}


  /* ---------- WHITE + GREEN + BLACK mixed theme ---------- */
  .theme-light{
    --ink:#0e1a11; --muted:#3f5747; --faint:#677d6c;
    --glass:linear-gradient(150deg, rgba(255,255,255,.96), rgba(255,255,255,.82) 55%, rgba(34,197,94,.07));
    --glass-strong:linear-gradient(150deg, #ffffff, rgba(240,253,244,.9));
    --stroke:rgba(14,70,34,.16); --stroke-green:rgba(22,163,74,.5);
    --shadow:0 18px 44px rgba(13,54,27,.13); --glow:0 0 34px rgba(34,197,94,.18);
    background:linear-gradient(180deg,#ffffff 0%,#f2f9f3 55%,#e9f5ec 100%);
    color:var(--ink);
  }
  .theme-light .sec-kicker{color:#15803d}
  .theme-light .sec-kicker::before{background:#16a34a;box-shadow:0 0 8px rgba(22,163,74,.6)}
  .theme-light .glass{backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
  .theme-light .filter-btn,.theme-light .lab-filter-btn{background:rgba(255,255,255,.75)}
  .theme-light .filter-btn:hover,.theme-light .lab-filter-btn:hover{border-color:rgba(14,70,34,.4);color:var(--ink)}
  .theme-light .search-box input{color:var(--ink)}
  .theme-light .art-card,.theme-light .lab-card,.theme-light .cat-card{color:var(--ink)}
  .theme-light .fact{background:rgba(34,197,94,.12);color:#166534}
  .theme-light .pillar .p-icon{background:rgba(34,197,94,.14)}
  .theme-light .svc-cta,.theme-light .btn-primary{color:#04150a}
  .theme-light .soon{color:#15803d;border-color:rgba(22,163,74,.5)}
  .theme-dark-sec{background:linear-gradient(180deg,#05090a,#04070a)}
  /* nav de-crowding: single-line brand at desktop widths */
  @media (max-width:1440px){ .brand-tag{display:none} .brand{flex:none} }


  .theme-light .level-easy{color:#166534;background:rgba(34,197,94,.16)}
  .theme-light .level-intermediate{color:#854d0e;background:rgba(234,179,8,.18)}
  .theme-light .level-tough{color:#991b1b;background:rgba(239,68,68,.12)}
  .theme-light .lab-num{color:#15803d}
  .theme-light .lab-free{color:#15803d;background:rgba(34,197,94,.10)}
  .theme-light .btn-glass{color:var(--ink);background:rgba(255,255,255,.72)}
  .theme-light .tick-btn{border-color:rgba(22,163,74,.5);background:#fff}

  /* ---------- student tools ---------- */
  .tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;position:relative;z-index:2;align-items:start}
  @media(max-width:900px){.tools-grid{grid-template-columns:1fr}}
  .tool-card{padding:clamp(22px,3vw,30px)}
  .tool-card h3{font-family:var(--font-display);font-size:1.16rem;margin:0 0 6px;line-height:1.3}
  .tool-card > p{color:var(--muted);font-weight:500;margin:0 0 18px;font-size:.95rem}
  .tool-label{display:block;font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
  .tool-input-row{display:flex;gap:10px;flex-wrap:wrap}
  .tool-input,.tool-select{
    flex:1;min-width:180px;width:100%;padding:13px 15px;border-radius:12px;font:inherit;font-weight:600;font-size:.98rem;
    color:var(--ink);background:rgba(127,160,140,.08);border:1px solid var(--stroke);outline:none;transition:border-color .2s, box-shadow .2s;
  }
  .tool-input:focus,.tool-select:focus{border-color:rgba(22,163,74,.6);box-shadow:0 0 0 3px rgba(34,197,94,.18)}
  .tool-toggle{flex:none;padding:12px 18px;font-size:.9rem}
  .meter-wrap{height:12px;border-radius:999px;background:rgba(127,160,140,.18);overflow:hidden;margin:18px 0 9px}
  .meter-fill{height:100%;width:0%;border-radius:999px;background:#ef4444;transition:width .35s ease,background-color .35s ease}
  .meter-label{font-weight:800;font-size:.98rem;font-family:var(--font-display)}
  .meter-advice{color:var(--muted);font-weight:500;font-size:.92rem;margin:5px 0 0;min-height:1.4em}
  .check-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
  .check-list li{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-weight:600;font-size:.92rem;line-height:1.45}
  .check-list .ck{width:21px;height:21px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:.72rem;font-weight:900;border:1.5px solid rgba(127,160,140,.55);color:transparent;margin-top:1px;transition:.2s}
  .check-list li.ok{color:var(--ink)}
  .check-list li.ok .ck{background:linear-gradient(135deg,var(--green-2),var(--green));color:#04150a;border-color:transparent}
  .check-list li.bad{color:#b91c1c}
  .check-list li.bad .ck{border-color:rgba(239,68,68,.6);color:#dc2626;background:rgba(239,68,68,.08)}
  .tool-note{margin-top:20px;padding:15px 17px;border-radius:13px;background:rgba(239,68,68,.07);border:1px solid rgba(248,113,113,.35);font-size:.9rem;font-weight:600;line-height:1.55}
  .tool-note strong{color:#b91c1c}
  .base-results{display:grid;gap:10px;margin-top:18px}
  .base-row{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:12px 15px;border-radius:12px;border:1px solid var(--stroke);background:rgba(127,160,140,.06)}
  .base-row .b-name{font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);flex:none}
  .base-row .b-val{font-family:var(--font-mono);font-weight:700;font-size:1rem;word-break:break-all;text-align:right}
  .tool-error{display:none;margin-top:14px;padding:12px 15px;border-radius:11px;background:rgba(239,68,68,.09);border:1px solid rgba(248,113,113,.4);color:#b91c1c;font-weight:700;font-size:.9rem}
  .tool-error.show{display:block}
  .base-explain{display:grid;gap:10px;margin-top:20px}
  .base-explain p{margin:0;color:var(--muted);font-weight:500;font-size:.93rem}
  .base-explain p strong{color:var(--ink)}
  .worked{margin-top:16px;padding:15px 17px;border-radius:13px;background:rgba(34,197,94,.09);border:1px solid rgba(74,222,128,.32);font-size:.93rem;font-weight:500;line-height:1.6}
  .worked strong{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:#15803d;margin-bottom:6px}
  .worked code{font-family:var(--font-mono);font-size:.88em;background:rgba(34,197,94,.14);padding:2px 7px;border-radius:6px;border:1px solid rgba(74,222,128,.25);color:var(--ink)}

  /* ---------- feedback ---------- */
  .feedback-panel{padding:clamp(24px,4vw,40px);position:relative;z-index:2}
  .feedback-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(24px,4vw,44px);align-items:start}
  @media(max-width:900px){.feedback-grid{grid-template-columns:1fr}}
  .feedback-intro h3{font-family:var(--font-display);font-size:1.28rem;line-height:1.3;margin:0 0 10px}
  .feedback-intro p{color:var(--muted);font-weight:500;margin:0 0 16px;font-size:.97rem}
  .feedback-points{list-style:none;margin:0;padding:0;display:grid;gap:12px}
  .feedback-points li{display:flex;gap:11px;align-items:flex-start;color:var(--muted);font-weight:600;font-size:.94rem;line-height:1.5}
  .feedback-points li strong{color:var(--ink)}
  .feedback-points .fp-ic{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,var(--green-2),var(--green));color:#04150a;font-size:.78rem;font-weight:900;margin-top:1px}
  .fb-form{display:grid;gap:16px}
  .fb-field{display:grid;gap:7px}
  .fb-label{font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .fb-label span{text-transform:none;letter-spacing:0;font-family:var(--font-body);font-weight:600;color:var(--faint)}
  .fb-input,.fb-select,.fb-textarea{width:100%;padding:13px 15px;border-radius:12px;font:inherit;font-weight:600;font-size:.98rem;color:var(--ink);background:rgba(127,160,140,.08);border:1px solid var(--stroke);outline:none;transition:border-color .2s,box-shadow .2s}
  .fb-textarea{min-height:132px;resize:vertical;line-height:1.55}
  .fb-input:focus,.fb-select:focus,.fb-textarea:focus{border-color:rgba(22,163,74,.6);box-shadow:0 0 0 3px rgba(34,197,94,.18)}
  .fb-input::placeholder,.fb-textarea::placeholder{color:var(--faint);font-weight:500}
  .fb-stars{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
  .fb-star{width:48px;height:48px;border-radius:13px;border:1px solid var(--stroke);background:rgba(127,160,140,.07);color:#b6c8bb;font-size:1.65rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.2s;padding:0}
  .fb-star:hover{transform:translateY(-2px);border-color:rgba(245,179,1,.65);color:#f5b301}
  .fb-star.active{color:#f5b301;border-color:rgba(245,179,1,.7);background:rgba(245,179,1,.12);box-shadow:0 8px 20px rgba(245,179,1,.18)}
  .fb-rating-text{font-weight:700;font-size:.92rem;color:var(--muted);margin-left:4px}
  .fb-error{display:none;padding:13px 15px;border-radius:11px;background:rgba(239,68,68,.09);border:1px solid rgba(248,113,113,.45);color:#b91c1c;font-weight:700;font-size:.92rem;line-height:1.5}
  .fb-error.show{display:block}
  .fb-success{display:none;padding:13px 15px;border-radius:11px;background:rgba(34,197,94,.12);border:1px solid rgba(74,222,128,.5);color:#166534;font-weight:700;font-size:.92rem;line-height:1.5}
  .fb-success.show{display:block}
  .fb-submit{width:100%;justify-content:center;border:0}
  .fb-note{color:var(--faint);font-size:.86rem;font-weight:600;margin:0;text-align:center;line-height:1.5}
  @media(min-width:761px) and (max-width:1560px){.nav-links{gap:2px}.nav-links a{padding:8px 6px;font-size:.82rem}.nav{gap:8px}.brand{padding:6px 12px 6px 6px}.brand-name{font-size:.98rem}}
  @media(min-width:761px) and (max-width:1180px){.nav-links a{padding:8px 5px;font-size:.78rem}}

  /* ---------- responsive ---------- */
  @media (max-width:1280px){
    .nav{gap:10px}
    .nav-links a{padding:8px 8px; font-size:.85rem}
    .brand{padding:6px 12px 6px 6px; flex:none}
    .brand-name{font-size:.98rem}
    .brand-tag{font-size:.52rem}
    .nav-cta{padding:10px 13px; font-size:.85rem}
  }
  @media (max-width:1560px){ .nav-cta{display:none} }
  @media (max-width:1020px){
    .cat-grid{grid-template-columns:repeat(2, 1fr)}
    .cat-card, .cat-card:nth-child(4), .cat-card:nth-child(5){grid-column:auto}
    .art-grid{grid-template-columns:repeat(2, 1fr)}
    .svc-grid{grid-template-columns:repeat(2, 1fr)}
    .pillars{grid-template-columns:repeat(2, 1fr)}
    .hero-inner{grid-template-columns:1fr; gap:64px}
    .hero-stage{max-width:520px}
    .cta-panel{grid-template-columns:1fr}
    .founder-panel{grid-template-columns:1fr}
    .founder-stage{max-width:340px}
  }
  @media (max-width:760px){
    .nav-links{
      display:none; position:absolute; top:calc(100% + 10px); left:0; right:0;
      flex-direction:column; align-items:stretch; padding:12px; gap:4px;
      background:linear-gradient(160deg, rgba(14,24,19,.97), rgba(6,12,9,.97));
      border:1px solid var(--stroke); border-radius:18px; box-shadow:var(--shadow);
    }
    .nav-links.open{display:flex}
    .nav-links a{padding:13px 14px}
    .nav-cta{display:none}
    .menu-btn{display:block}
    .brand-tag{display:none}
    .hero{padding-top:128px}
    .chip-1{left:-4px}
    .chip-2{right:-4px}
    .search-box{margin-left:0; flex:1}
  }
  @media (max-width:600px){
    .cat-grid, .art-grid, .svc-grid, .pillars{grid-template-columns:1fr}
    .wrap{width:calc(100% - 28px)}
    .section{padding-top:64px}
    .reader-hero{height:200px}
    .chip small{display:none}
    .chip{font-size:.78rem; padding:8px 12px}
  }
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
    html{scroll-behavior:auto}
    .reveal{opacity:1; transform:none}
  }
/* === TRACKS START === */
.pick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:8px}
.pick-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:20px;border-radius:18px;cursor:pointer;color:inherit;font:inherit;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.pick-card:hover{transform:translateY(-4px)}
.pick-card strong{font-size:1.05rem;line-height:1.25}
.pick-card small{opacity:.75;line-height:1.4}
.pick-card.selected{border-color:var(--green);box-shadow:0 0 0 2px var(--green),0 18px 40px rgba(34,197,94,.25)}
.pick-panel{margin-top:22px;padding:28px;border-radius:20px}
.pick-panel h3{font-size:1.5rem;margin:6px 0 8px}
.pick-panel .track-counts{margin:10px 0}
.pick-first{margin:6px 0 14px}
.pick-note{margin-top:14px;font-size:.9rem;opacity:.75}
.track-hero-sec{padding-top:36px}
.crumbs{font-size:.9rem;opacity:.8;margin-bottom:14px}
.crumbs a{color:var(--green-3)}
.track-hero{display:grid;grid-template-columns:340px 1fr;gap:0;overflow:hidden;border-radius:22px;padding:0}
.track-hero-img{width:100%;height:100%;min-height:280px;object-fit:cover}
.track-hero-body{padding:30px}
.track-hero-body h1{font-size:2rem;line-height:1.15;margin:8px 0 12px}
.track-counts{font-size:1rem}
.track-outcomes{margin-top:20px;padding:24px 28px;border-radius:20px}
.track-outcomes h2{font-size:1.25rem;margin-bottom:12px}
.track-outcomes ul{display:grid;grid-template-columns:1fr 1fr;gap:8px 26px;list-style:none;padding:0;margin:0}
.track-outcomes li{padding-left:24px;position:relative;line-height:1.45}
.track-outcomes li::before{content:"\2713";position:absolute;left:0;color:var(--green-2);font-weight:700}
.track-list{display:flex;flex-direction:column;gap:12px}
.track-row{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:16px;text-decoration:none;color:inherit;transition:transform .2s ease,border-color .2s ease}
.track-row:hover{transform:translateY(-2px);border-color:var(--green)}
.track-num{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;background:linear-gradient(135deg,var(--green-2),var(--green));color:#06250f}
.track-row-body{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.track-row-body strong{line-height:1.3}
.track-row-body small{opacity:.75;line-height:1.45}
.track-row-meta{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.track-row-meta small{opacity:.7}
.track-more{margin-top:20px}
.track-quiz{margin-top:26px;padding:26px 28px;border-radius:20px;display:flex;align-items:center;gap:20px;justify-content:space-between}
.track-quiz h2{font-size:1.3rem;margin-bottom:8px}
.track-minis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.track-mini{padding:18px;border-radius:16px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:4px}
.track-mini small{opacity:.75}
@media (max-width:820px){
  .track-hero{grid-template-columns:1fr}
  .track-hero-img{min-height:180px;max-height:220px}
  .track-outcomes ul{grid-template-columns:1fr}
  .track-quiz{flex-direction:column;align-items:flex-start}
  .track-row{align-items:flex-start}
  .track-row-meta{align-items:flex-start}
}
/* === TRACKS END === */

/* === AWARDS POLISH START (design-system/MASTER.md) === */
:root{
  --hairline:rgba(255,255,255,.07);
  --hairline-dark:rgba(4,20,10,.09);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
}
::selection{background:var(--green); color:#03140a}
html{scrollbar-width:thin; scrollbar-color:rgba(34,197,94,.45) #060a08}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#060a08}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16); border-radius:8px; border:2px solid #060a08}
::-webkit-scrollbar-thumb:hover{background:rgba(34,197,94,.55)}
body{-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
h1,h2{text-wrap:balance}
:focus-visible{outline:2px solid var(--green-2); outline-offset:3px; border-radius:6px}

/* scroll progress */
.tt-progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:200; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg, var(--green), var(--green-3)); box-shadow:0 0 12px rgba(34,197,94,.6); pointer-events:none}

/* header state + active nav */
.nav{transition:box-shadow .35s var(--ease-out), background .35s var(--ease-out)}
.nav.tt-scrolled{box-shadow:0 18px 44px rgba(0,0,0,.5), 0 0 0 1px var(--hairline)}
.nav-links a.tt-active{background:rgba(34,197,94,.16); color:var(--ink); box-shadow:inset 0 0 0 1px rgba(74,222,128,.35)}
.theme-light .nav-links a.tt-active{color:#0b120d}

/* tactile buttons */
.btn{transition:transform .18s var(--ease-spring), box-shadow .3s var(--ease-out), background .3s var(--ease-out)}
.btn:active{transform:scale(.97) !important}
.btn-primary{position:relative; overflow:hidden}
.btn-primary::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform:translateX(-120%); transition:transform .7s var(--ease-out); pointer-events:none}
.btn-primary:hover::after{transform:translateX(120%)}
.tt-magnetic{transition:transform .45s var(--ease-spring), box-shadow .3s var(--ease-out) !important; will-change:transform}

/* cursor-tracked card spotlight */
.cat-card,.pick-card,.path-card,.svc-card,.tool-card,.art-card,.lab-card,.track-row,.track-mini,.pillar,.path-step{position:relative}
.cat-card::before,.pick-card::before,.path-card::before,.svc-card::before,.tool-card::before,.art-card::before,.lab-card::before,.track-row::before,.track-mini::before,.pillar::before,.path-step::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(74,222,128,.15), rgba(74,222,128,.05) 42%, transparent 68%);
  opacity:0; transition:opacity .35s var(--ease-out);
}
.tt-spot::before{opacity:1}
.cat-card:hover,.pick-card:hover,.path-card:hover,.svc-card:hover,.tool-card:hover,.art-card:hover,.lab-card:hover{border-color:rgba(74,222,128,.35)}

/* editorial reveal v2 — only when JS motion is on (html.tt-motion set in head) */
html.tt-motion .reveal{opacity:0; transform:translateY(16px) scale(.98); clip-path:inset(0 0 10% 0); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out), clip-path .8s var(--ease-out)}
html.tt-motion .reveal.in{opacity:1; transform:none; clip-path:inset(0 0 0 0)}

/* hero: living network canvas + intro */
.hero{isolation:isolate}
.tt-net{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.85}
.hero .bg-photo,.hero .bg-grid{z-index:0}
.hero-inner{position:relative; z-index:2}
@keyframes ttRise{from{opacity:0; transform:translateY(22px); clip-path:inset(0 0 12% 0)} to{opacity:1; transform:none; clip-path:inset(0 0 0 0)}}
html.tt-motion .hero-inner>div:first-child>*{animation:ttRise .9s var(--ease-out) both}
html.tt-motion .hero-inner>div:first-child>*:nth-child(2){animation-delay:.08s}
html.tt-motion .hero-inner>div:first-child>*:nth-child(3){animation-delay:.16s}
html.tt-motion .hero-inner>div:first-child>*:nth-child(4){animation-delay:.24s}
html.tt-motion .hero-inner>div:first-child>*:nth-child(5){animation-delay:.32s}
html.tt-motion .hero-stage{animation:ttRise 1s var(--ease-out) .2s both}

/* section hairlines + ambient depth on dark sections */
.theme-dark-sec{border-top:1px solid var(--hairline)}
.marquee:hover .marquee-track{animation-play-state:paused}

/* light-theme cards: same spotlight, subtler */
.theme-light .tt-spot::before{background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(22,163,74,.12), rgba(22,163,74,.04) 42%, transparent 68%)}

@media (prefers-reduced-motion: reduce){
  .tt-net{display:none}
  html.tt-motion .reveal{opacity:1; transform:none; clip-path:none; transition:none}
  html.tt-motion .hero-inner>div:first-child>*,html.tt-motion .hero-stage{animation:none}
  .btn:active{transform:none !important}
}
/* === AWARDS POLISH END === */