/* ───────────────────── ROOT + RESET ───────────────────── */
:root{
  --blue:#00d4ff;--blue-dark:#006699;--gray-900:#0a0a0a;--gray-800:#151515;
  --gray-700:#1a1a1a;--gray-600:#2a2a2a;--white:#fff;--gray-100:#ccc;
  --radius:4px;--space:1rem;--font-head:'Orbitron',sans-serif;
  --font-body:'Exo 2',sans-serif;--trans:200ms ease;
  --shadow:0 0 16px rgba(0,212,255,.25);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--gray-900);color:var(--gray-100);font:400 1rem/1.6 var(--font-body);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);color:var(--white);text-transform:uppercase;letter-spacing:.05em;margin:0 0 .5rem}
h1{font-size:clamp(2.5rem,6vw,4rem);text-shadow:0 0 20px rgba(0,212,255,.3)}
h2{font-size:clamp(1.75rem,4vw,2.5rem)}
h3{font-size:1.5rem}
p,ul,ol{margin-bottom:1rem}
a{color:var(--blue);text-decoration:none;transition:var(--trans)}
a:hover{color:var(--white);text-shadow:0 0 10px rgba(0,212,255,.5)}
strong{color:var(--white)}
code,kbd{font:700 .875rem/1 var(--font-head);padding:.125rem .4rem;border-radius:var(--radius);background:var(--gray-600);border:1px solid var(--blue-dark);color:var(--blue)}
pre{background:var(--gray-700);padding:1.5rem;border-radius:var(--radius);overflow:auto;margin-bottom:1.5rem}

/* ───────────────────── LAYOUT ───────────────────── */
.container{max-width:1400px;margin:0 auto;padding:0 var(--space)}
.main{padding-top:80px}

/* ───────────────────── HEADER / NAV ───────────────────── */
.header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(10,10,10,.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--gray-600);box-shadow:var(--shadow)}
.nav{height:80px}
.nav .container{display:flex;align-items:center;justify-content:space-between;height:100%}
.nav__logo{display:flex;align-items:center;gap:.5rem;font:900 1.25rem var(--font-head);color:var(--blue);letter-spacing:.1em}
.nav__logo:hover{color:var(--white);text-shadow:0 0 20px rgba(0,212,255,.5);transform:scale(1.05)}
.nav__menu{display:flex;gap:2rem;list-style:none}
.nav__link{position:relative;padding:.5rem 1rem;font:600 .875rem var(--font-head);color:var(--gray-100);letter-spacing:.05em;border-radius:var(--radius);transition:var(--trans)}
.nav__link:hover{color:var(--blue);background:rgba(0,212,255,.05)}
.nav__link--active{color:var(--white);background:rgba(0,212,255,.1);border:1px solid var(--blue)}
.nav__link--home{background:linear-gradient(135deg,var(--blue),#0099cc);color:var(--gray-900);box-shadow:var(--shadow)}
.nav__link--home:hover{background:linear-gradient(135deg,var(--white),var(--blue))}

/* ───────────────────── HERO ───────────────────── */
.hero{position:relative;text-align:center;padding:8rem 0 6rem;background:radial-gradient(ellipse at center,rgba(0,212,255,.05) 0,transparent 70%)}
.hero__background{position:absolute;inset:0;background:
        radial-gradient(circle at 20% 80%,rgba(0,212,255,.1)0,transparent 50%),
        radial-gradient(circle at 80% 20%,rgba(0,153,204,.1)0,transparent 50%);
  animation:bgPulse 8s ease-in-out infinite}
@keyframes bgPulse{0%,100%{opacity:.5}50%{opacity:1}}
.hero__title{background:linear-gradient(135deg,var(--blue),var(--white));-webkit-background-clip:text;color:transparent;animation:titleGlow 3s ease infinite alternate}
@keyframes titleGlow{0%{filter:drop-shadow(0 0 10px rgba(0,212,255,.3))}100%{filter:drop-shadow(0 0 20px rgba(0,212,255,.6))}}
.hero__subtitle{font-size:clamp(1.125rem,3vw,1.5rem);color:var(--gray-100);margin-bottom:4rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center}
.btn{display:inline-block;padding:.75rem 2rem;border-radius:var(--radius);font:700 .875rem var(--font-head);letter-spacing:.05em;cursor:pointer;transition:var(--trans)}
.btn--primary{background:var(--blue);color:var(--gray-900)}
.btn--primary:hover{background:var(--white)}
.btn--secondary{background:var(--gray-700);color:var(--white)}
.btn--secondary:hover{background:var(--gray-600)}

/* ───────────────────── GENERIC SECTIONS ───────────────────── */
.page-header,.introduction{padding:6rem 0 4rem;text-align:center}
.page-title,.introduction__title{margin-bottom:2rem}
.tutorial-section{margin:4rem 0}
.section-title{margin-bottom:1.5rem}
.section-index{margin:3rem 0 4rem}
.section-index__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;list-style:none}

/* ───────────────────── CARDS (Tutorials & Resources) ───────────────────── */
.tutorials-grid,.resources-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem}
.tutorial-card,.resource-card{background:var(--gray-800);border:1px solid var(--gray-600);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow);transition:var(--trans)}
.tutorial-card:hover,.resource-card:hover{transform:translateY(-4px);box-shadow:0 0 24px rgba(0,212,255,.4)}
.tutorial-card__badge{display:inline-block;margin-bottom:.5rem;padding:.125rem .5rem;border:1px solid var(--blue);border-radius:var(--radius);font:700 .625rem var(--font-head);color:var(--blue)}
.tutorial-card__title,.resource-card__title{font-size:1.125rem;margin-bottom:.5rem}
.tutorial-card__link,.resource-card__link{color:var(--white)}
.tutorial-card__description,.resource-card__description{font-size:.875rem;color:var(--gray-100)}

/* ───────────────────── TUTORIAL PAGE LAYOUT ───────────────────── */
.tutorial-layout{display:flex;flex-direction:column;gap:4rem}
.tutorial-header{text-align:center}
.tutorial-title{font-size:clamp(2rem,5vw,3rem);text-shadow:0 0 10px rgba(0,212,255,.3)}
.tutorial-content img{max-width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}
.shortcuts-table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.875rem}
.shortcuts-table th,.shortcuts-table td{border:1px solid var(--gray-600);padding:.5rem .75rem;text-align:left}
.shortcuts-table th{background:var(--gray-700);color:var(--white)}
.exercise-box,.quick-tips .tip-card,.video-card{background:var(--gray-800);border:1px solid var(--gray-600);border-radius:var(--radius);padding:1rem;margin-bottom:1rem}
.quick-tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.video-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}

/* ───────────────────── FOOTER ───────────────────── */
.footer{margin-top:6rem;padding:3rem 0;border-top:1px solid var(--gray-600);text-align:center;font-size:.875rem;color:var(--gray-100)}
.footer a{color:var(--blue)}