/* Tech Lynx – Green & Black. Tokens come from the brand colour sheet. */
:root{
  --bg:#05080a;--ink:#eaf2e8;--mut:#9fb0a1;
  --a1:#b6ff5c;          /* highlight of #7ED321 */
  --a2:#7ED321;          /* brand "TECH" green (RGB 126,211,33) */
  --a3:#1B5E20;          /* icon shadow green */
  --deep:#1B5E20;--a2rgb:126,211,33;
  --btn-ink:#06130a;     /* near #101820 for text on green */
  --glass:rgba(14,22,22,.6);
}
.brand span{font-weight:800}
.brand span span{color:var(--a2)}

/* hero */
.hero-txt{max-width:760px;position:relative;z-index:2}
.hero h1{margin:18px 0 16px}
.typed-wrap{color:var(--a1);font-weight:600;white-space:nowrap}
.caret{display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-.15em;background:var(--a2);box-shadow:0 0 10px var(--a2);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:54px;max-width:760px}
.stat{padding:18px 20px;border-radius:20px;background:rgba(10,16,16,.55);border:1px solid var(--line);backdrop-filter:blur(10px)}
.stat b{display:block;font-size:2.1rem;font-weight:800;line-height:1.1;background:linear-gradient(90deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:.78rem;color:var(--mut);letter-spacing:.04em}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr);margin-top:36px}}
.scrollcue{position:absolute;left:50%;bottom:26px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mut)}
.scrollcue i{width:22px;height:36px;border:1.5px solid var(--mut);border-radius:14px;position:relative}
.scrollcue i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:8px;margin-left:-1.5px;border-radius:3px;background:var(--a2);box-shadow:0 0 8px var(--a2);animation:wheel 1.6s infinite}
@media (max-height:700px){.scrollcue{display:none}}
.hero .panel-in{position:relative}

/* expanding principle panels */
.xp{display:flex;gap:14px;height:420px}
.pnl{position:relative;flex:1;border-radius:28px;padding:30px 26px;overflow:hidden;cursor:pointer;background:linear-gradient(170deg,rgba(var(--a2rgb),.1),rgba(8,12,12,.78));border:1px solid var(--line);backdrop-filter:blur(10px);transition:flex .8s var(--ease),border-color .5s,box-shadow .6s,background .6s;display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.pnl .pn{position:absolute;top:22px;left:26px;font-size:.85rem;font-weight:700;letter-spacing:.2em;color:var(--a2)}
.pnl .pi{position:absolute;top:18px;right:22px;font-size:1.9rem;color:var(--a1);width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:rgba(var(--a2rgb),.12);box-shadow:inset 0 0 0 1px rgba(var(--a2rgb),.4)}
.pnl h3{font-size:1.35rem;white-space:nowrap;transition:all .6s var(--ease)}
.pnl p{color:#c3d0c5;font-size:.95rem;max-height:0;opacity:0;overflow:hidden;transition:max-height .7s var(--ease),opacity .6s .1s,margin .6s;margin:0}
.pnl.on{flex:3.6;border-color:rgba(var(--a2rgb),.7);box-shadow:0 0 70px -12px rgba(var(--a2rgb),.7);background:linear-gradient(170deg,rgba(var(--a2rgb),.26),rgba(8,12,12,.8))}
.pnl.on h3{font-size:1.9rem}
.pnl.on p{max-height:140px;opacity:1;margin-top:12px}
.pnl:not(.on) h3{writing-mode:vertical-rl;rotate:180deg;align-self:flex-start;font-size:1.15rem;margin-bottom:6px}
@media (max-width:900px){
  .xp{flex-direction:column;height:auto}
  .pnl,.pnl.on{flex:none;padding:84px 24px 24px}
  .pnl p{max-height:none;opacity:1;margin-top:10px}
  .pnl:not(.on) h3{writing-mode:horizontal-tb;rotate:0deg;font-size:1.4rem}
  .pnl h3{white-space:normal}
}

/* portfolio tiles */
.proj{padding:0;aspect-ratio:4/3.1;background:linear-gradient(140deg,var(--g1),var(--g2));display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer}
.proj .mock{position:absolute;inset:8% 10% 34% 10%;transform:translateZ(40px);transition:transform .7s var(--ease)}
.proj .mock svg{width:100%;height:100%;fill:none;stroke:rgba(255,255,255,.55);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.proj .mock svg .f{fill:rgba(182,255,92,.55);stroke:none}
.proj:hover .mock{transform:translateZ(80px) scale(1.12) rotate(-2deg)}
.proj .pj{position:relative;padding:22px 26px;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent);transform:translateZ(30px)}
.proj .tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--btn-ink);background:var(--a2);padding:4px 12px;border-radius:99px;box-shadow:0 0 16px var(--a2)}
.proj h4{font-size:1.25rem;margin-top:10px}
.proj small{color:#c7d4c9;font-size:.78rem;opacity:.75}

/* academy promo */
.promo{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;padding:clamp(34px,5vw,64px);background:radial-gradient(100% 140% at 100% 0%,rgba(0,210,255,.3),transparent 55%),linear-gradient(135deg,#0B2C6F,#06122e 70%);border-color:rgba(0,210,255,.45)}
.promo::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(0,210,255,.22),transparent 45%)}
.promo:hover{box-shadow:0 30px 100px -30px rgba(0,210,255,.6)}
.promo h2{margin-top:10px}
.promo .cy{background:linear-gradient(90deg,#7df0ff,#00D2FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn.cyan{background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%) -160% 0/250% 100% no-repeat,linear-gradient(135deg,#7df0ff,#00D2FF);color:#04122e;--g:0,210,255;box-shadow:0 0 0 1px rgba(0,210,255,.6),0 0 24px rgba(0,210,255,.65),0 0 70px rgba(0,210,255,.35)}
.btn.cyan::before{content:"";position:absolute;inset:-4px;border-radius:inherit;z-index:-1;background:conic-gradient(from var(--a),transparent 0 62%,#00D2FF 86%,#fff 92%,transparent 96%);filter:blur(7px);animation:spin 3.2s linear infinite}
.btn.cyan:hover{background-position:160% 0,0 0;transform:translateY(-3px) scale(1.04);box-shadow:0 0 0 1px #00D2FF,0 0 36px rgba(0,210,255,.9),0 0 110px rgba(0,210,255,.5)}
.promo-art{position:relative;aspect-ratio:1;max-width:340px;justify-self:center;width:100%;transform-style:preserve-3d;transform:translateZ(60px)}
.promo-art .badge{position:absolute;inset:18%;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 70px rgba(0,210,255,.75),0 0 0 8px rgba(0,210,255,.18);animation:floaty 5s ease-in-out infinite}
.promo-art .badge img{width:66%;height:auto}
.promo-art i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(0,210,255,.5);animation:orb 9s linear infinite}
.promo-art i::after{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;border-radius:50%;background:#00D2FF;box-shadow:0 0 18px #00D2FF}
.promo-art .o2{inset:-8%;animation-duration:14s;animation-direction:reverse;opacity:.7}
.promo-art .o3{inset:-18%;animation-duration:20s;opacity:.4}
@keyframes orb{to{rotate:360deg}}
@keyframes floaty{50%{translate:0 -14px}}
@media (max-width:820px){.promo{grid-template-columns:1fr}.promo-art{max-width:220px;order:-1}}