/* Tech 1 Learning: Lessonbrook coming-soon page.
   Brand variables match tech1services.net. Always use the variables, never hardcode colors in HTML. */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/inter-latin-900-normal.woff2) format("woff2")}

:root{--bg:#020617;--panel:#0f172a;--muted:#cbd5e1;--dim:#94a3b8;--cyan:#22d3ee;--cyan2:#67e8f9;--line:rgba(255,255,255,.1);--white:#fff;--cyan-pale:#cffafe}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--white);line-height:1.5}
a{text-decoration:none;color:inherit}
.container{max-width:1180px;margin:auto;padding:0 24px}

.site-header{background:rgba(2,6,23,.95);border-bottom:1px solid var(--line)}
.nav-wrap{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:12px}
.logo-picture,.site-logo{width:220px;height:64px}
.site-logo{object-fit:contain;object-position:left center}
.brand-text{display:flex;flex-direction:column}
.brand-name{font-weight:900}
.brand-tagline{font-size:11px;letter-spacing:.22em;color:var(--cyan2);text-transform:uppercase}

.hero{position:relative;overflow:hidden;padding:96px 0 112px}
.glow{position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:520px;height:520px;border-radius:999px;background:rgba(34,211,238,.18);filter:blur(80px)}
.hero .container{position:relative}
.pill{display:inline-flex;border:1px solid rgba(103,232,249,.3);background:rgba(103,232,249,.1);color:var(--cyan-pale);border-radius:999px;padding:9px 15px;font-size:14px;margin-bottom:24px}
.hero h1{font-size:clamp(44px,7vw,76px);line-height:1.02;letter-spacing:-.05em;margin:0;font-weight:900;max-width:960px}
.hero-copy{margin:26px 0 0;color:var(--muted);font-size:18px;line-height:1.75;max-width:740px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px}

.card{border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:24px;padding:28px;margin-top:40px;max-width:740px;box-shadow:0 18px 60px rgba(0,0,0,.2)}
.card p{color:var(--muted);line-height:1.7;margin:0}
.eyebrow{color:var(--cyan2)!important;font-size:13px;font-weight:900;letter-spacing:.28em;text-transform:uppercase;margin-bottom:10px!important}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;border-radius:18px;font-weight:900;border:1px solid transparent;min-height:48px}
.btn-primary{background:var(--cyan);color:var(--bg)}
.btn-outline{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:var(--white)}
.btn:hover{filter:brightness(1.08)}

.site-footer{border-top:1px solid var(--line);padding:32px 0}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--dim)}

/* Accessibility: skip link and visible keyboard focus */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--cyan);color:var(--bg);padding:12px 18px;border-radius:999px;font-weight:700}
.skip-link:focus{left:16px;top:16px}
a:focus-visible,button:focus-visible{outline:3px solid var(--cyan2);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media(max-width:900px){.hero{padding:72px 0}.brand-text{display:none}.logo-picture,.site-logo{width:154px;height:46px}}
@media(max-width:640px){.container{padding:0 18px}.hero h1{font-size:40px}.hero-actions{flex-direction:column}.btn{width:100%}}