/* Tech Lynx Academy – Navy & Cyan. Tokens come from the brand colour sheet. */
:root{
  --bg:#030a1c;--ink:#e9f2ff;--mut:#9db3d6;
  --a1:#7df0ff;          /* light highlight of #00D2FF */
  --a2:#00D2FF;          /* brand bright cyan */
  --a3:#2f7bff;          /* mid blue for gradients on dark (navy #0B2C6F is the surface colour) */
  --deep:#0B2C6F;--a2rgb:0,210,255;
  --btn-ink:#031230;
  --glass:rgba(8,22,52,.6);--line:rgba(140,190,255,.14);
}
header.top.solid{background:rgba(3,10,28,.66)}
.brand .badge{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;box-shadow:0 0 22px rgba(0,210,255,.55);transition:transform .5s var(--ease)}
.brand:hover .badge{transform:rotateY(180deg) scale(1.08)}
.brand .badge img.mark{height:auto;width:30px;filter:none}
.brand:hover img.mark{transform:none}
.brand .bt{display:flex;flex-direction:column;line-height:1.05}
.brand .bt span{font-weight:800;letter-spacing:.06em}
.brand .bt em{font-style:normal;color:var(--a2)}
.brand .bt small{font-size:.62rem;letter-spacing:.42em;color:var(--mut);font-weight:600;margin-top:3px}
#loader .lbadge{display:grid;place-items:center;width:104px;height:104px;border-radius:50%;background:#fff;margin:0 auto 18px;box-shadow:0 0 50px rgba(0,210,255,.7);animation:lpulse 1.6s ease-in-out infinite}
#loader .lbadge img{width:68px;margin:0;filter:none;animation:none}

/* hero */
.hero-txt{max-width:780px;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}}
.motto{display:flex;flex-wrap:wrap;gap:12px;margin-top:46px}
.motto span{padding:.55em 1.3em;border-radius:99px;font-weight:700;font-size:.95rem;letter-spacing:.04em;border:1px solid rgba(0,210,255,.4);background:rgba(0,210,255,.08);color:var(--a1);box-shadow:0 0 22px -6px rgba(0,210,255,.6);animation:mot 4s ease-in-out infinite;animation-delay:calc(var(--k)*.5s)}
@keyframes mot{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px);box-shadow:0 0 34px -2px rgba(0,210,255,.8)}}
.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}

/* five principles */
.five{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.five .card{padding:28px 22px}
.five .card h3{font-size:1.1rem}
.five .card p{font-size:.86rem}
@media (max-width:1100px){.five{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.five{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.five{grid-template-columns:1fr}}

/* finder chips */
.finder{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding:18px 24px;margin-bottom:28px;border-radius:24px;background:rgba(0,210,255,.06);border:1px dashed rgba(0,210,255,.4)}
.finder .fl{font-weight:600;color:var(--a1);font-size:.92rem}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:.6em 1.2em;border-radius:99px;border:1px solid rgba(0,210,255,.45);background:rgba(3,18,48,.6);cursor:pointer;font-size:.85rem;font-weight:500;transition:all .35s var(--ease)}
.chip:hover{background:var(--a2);color:var(--btn-ink);box-shadow:0 0 28px rgba(0,210,255,.7);transform:translateY(-3px)}
.card.pulse{animation:pulse 1.8s var(--ease)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,210,255,.9)}30%{box-shadow:0 0 0 14px rgba(0,210,255,.25),0 0 90px rgba(0,210,255,.8);border-color:var(--a2)}100%{box-shadow:0 0 0 30px rgba(0,210,255,0)}}

/* course cards */
.meta{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px;transform:translateZ(20px)}
.meta span{font-size:.74rem;padding:.35em .9em;border-radius:99px;background:rgba(0,210,255,.1);border:1px solid rgba(0,210,255,.25);color:var(--a1)}
#cgrid .card{display:flex;flex-direction:column}
#cgrid .card .btn{margin-top:auto;align-self:flex-start;transform:translateZ(40px)}
#cgrid .card p{margin-bottom:0}

/* faq */
.fq{border-radius:22px;background:var(--glass);border:1px solid var(--line);margin-bottom:14px;backdrop-filter:blur(10px);transition:border-color .4s,box-shadow .4s}
.fq:hover,.fq.open{border-color:rgba(0,210,255,.55);box-shadow:0 0 40px -10px rgba(0,210,255,.5)}
.fq button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 28px;border:0;background:none;cursor:pointer;text-align:left;font-weight:600;font-size:1.05rem}
.fq button .i{font-size:1.3rem;color:var(--a2);transition:transform .5s var(--ease);rotate:90deg}
.fq.open button .i{rotate:-90deg}
.fq .fa{max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.fq .fa p{padding:0 28px 26px;color:var(--mut)}