:root {
    --page-bg: #060912;
    --card-bg: rgba(255,255,255,.078);
    --card-bg-strong: rgba(255,255,255,.12);
    --line: rgba(255,255,255,.14);
    --text: #f8fafc;
    --muted: #aab4c8;
    --primary: #7c3aed;
    --cyan: #06b6d4;
    --gold: #f59e0b;
    --green: #22c55e;
    --danger: #fb7185;
    --shadow: 0 30px 90px rgba(0,0,0,.48);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Inter, system-ui, sans-serif;
    color: var(--text);
    background: radial-gradient(circle at 10% 12%, rgba(124,58,237,.36), transparent 30%), radial-gradient(circle at 88% 10%, rgba(6,182,212,.28), transparent 31%), radial-gradient(circle at 48% 100%, rgba(245,158,11,.13), transparent 35%), var(--page-bg);
    overflow-x: hidden;
}

body.light-mode {
    --page-bg: #f5f7fb;
    --card-bg: rgba(255,255,255,.82);
    --card-bg-strong: rgba(255,255,255,.96);
    --line: rgba(15,23,42,.12);
    --text: #0f172a;
    --muted: #475569;
    --shadow: 0 24px 70px rgba(15,23,42,.14);
    background: radial-gradient(circle at 10% 10%, rgba(124,58,237,.16), transparent 30%), radial-gradient(circle at 88% 18%, rgba(6,182,212,.15), transparent 28%), #f5f7fb;
}

a { color: inherit; text-decoration: none; }
.section-padding { padding: 92px 0; }
.muted { color: var(--muted); }
.visually-hidden-custom { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.glass {
    background: var(--card-bg);
    border: 1px solid var(--line);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    box-shadow: var(--shadow);
}

.gradient-text {
    background: linear-gradient(135deg,#fff,#a78bfa 35%,#22d3ee 72%,#fde68a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body.light-mode .gradient-text {
    background: linear-gradient(135deg,#0f172a,#7c3aed 35%,#0891b2 72%,#b45309);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.navbar { padding: 16px 0; transition: .3s ease; }
.navbar.scrolled {
    background: rgba(6,9,18,.84);
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
}
body.light-mode .navbar.scrolled { background: rgba(255,255,255,.86); }
.navbar-brand { color: var(--text) !important; font-weight: 950; letter-spacing: -.04em; display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(135deg,var(--primary),var(--cyan)); box-shadow: 0 15px 35px rgba(124,58,237,.35); }
.nav-link { color: var(--muted) !important; font-weight: 850; }
.nav-link:hover { color: var(--text) !important; }

.btn-main { border: 0; color: #fff; background: linear-gradient(135deg,var(--primary),var(--cyan)); border-radius: 999px; padding: 13px 22px; font-weight: 950; box-shadow: 0 18px 45px rgba(124,58,237,.35); transition: .25s ease; }
.btn-main:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 24px 65px rgba(6,182,212,.3); }
.btn-soft { border: 1px solid var(--line); color: var(--text); background: rgba(255,255,255,.07); border-radius: 999px; padding: 13px 22px; font-weight: 950; transition: .25s ease; }
.btn-soft:hover { color: var(--text); background: rgba(255,255,255,.14); transform: translateY(-3px); }

.language-switch { display: flex; gap: 6px; padding: 5px; border: 1px solid var(--line); background: rgba(255,255,255,.07); border-radius: 999px; }
.lang-btn { border: 0; background: transparent; color: var(--muted); padding: 9px 12px; border-radius: 999px; font-weight: 950; font-size: .8rem; }
.lang-btn.active { background: linear-gradient(135deg,var(--primary),var(--cyan)); color: #fff; }
.theme-toggle { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(255,255,255,.08); color: var(--text); }

.badge-pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 9px 14px; font-size: .84rem; color: var(--text); background: rgba(255,255,255,.08); border: 1px solid var(--line); font-weight: 850; }
.hero { min-height: 100vh; padding: 132px 0 76px; }
.hero-title { font-size: clamp(2.15rem,5.1vw,5.35rem); line-height: 1; letter-spacing: -.065em; font-weight: 950; }
.hero-desc { color: var(--muted); font-size: 1.04rem; line-height: 1.76; max-width: 760px; }
.hero-panel { border-radius: 34px; overflow: hidden; position: relative; }
.code-window { background: rgba(3,7,18,.86); border: 1px solid rgba(255,255,255,.12); border-radius: 24px; overflow: hidden; }
.window-head { padding: 14px 18px; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.1); }
.dots span { width: 12px; height: 12px; display: inline-block; border-radius: 50%; margin-right: 7px; }
.dot-red { background: #fb7185; } .dot-yellow { background: #fbbf24; } .dot-green { background: #34d399; }
.code-body { padding: 22px; font-family: Consolas, monospace; color: #dbeafe; line-height: 1.7; font-size: .88rem; }
.code-comment { color: #94a3b8; }

.soft-card, .module-box, .project-card, .month-card, .stack-column, .skill-box, .system-card, .flow-step, .seo-box {
    background: linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.045));
    border: 1px solid var(--line);
    border-radius: 28px;
    height: 100%;
    padding: 26px;
    position: relative;
    overflow: hidden;
    transition: .3s ease;
}
.soft-card:hover, .project-card:hover, .stack-column:hover, .system-card:hover { transform: translateY(-7px); background: var(--card-bg-strong); }
.icon-box { width: 56px; height: 56px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(135deg,rgba(124,58,237,.3),rgba(6,182,212,.23)); font-size: 1.45rem; margin-bottom: 20px; }
.stat-card { border-radius: 24px; padding: 22px; background: rgba(255,255,255,.075); border: 1px solid var(--line); text-align: center; height: 100%; }
.stat-card h3 { font-size: 2rem; font-weight: 950; margin: 0; }
.section-title { font-size: clamp(1.85rem,3.5vw,3.55rem); letter-spacing: -.05em; font-weight: 950; line-height: 1.04; }
.section-subtitle { color: var(--muted); font-size: 1.02rem; line-height: 1.72; max-width: 890px; }
.topic-list { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.topic-list span, .mini-tag { padding: 8px 11px; border-radius: 999px; background: rgba(255,255,255,.075); border: 1px solid var(--line); color: var(--muted); font-size: .8rem; font-weight: 850; display: inline-flex; align-items: center; gap: 7px; margin: 4px; }
.tech-marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.045); padding: 18px 0; }
.marquee-track { display: flex; gap: 14px; width: max-content; animation: marquee 28s linear infinite; }
.tech-chip { padding: 11px 16px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--line); font-weight: 900; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }

.big-number { width: 52px; height: 52px; border-radius: 20px; display: grid; place-items: center; font-weight: 950; background: linear-gradient(135deg,var(--primary),var(--cyan)); color: #fff; margin-bottom: 20px; }
.lesson-flow { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
.curriculum-tabs .nav-link { border: 1px solid var(--line); border-radius: 999px; margin: 5px; background: rgba(255,255,255,.06); color: var(--muted) !important; font-weight: 950; }
.curriculum-tabs .nav-link.active { color: #fff !important; background: linear-gradient(135deg,var(--primary),var(--cyan)); border-color: transparent; }
.module-box ul, .stack-column ul, .month-card ul { color: var(--muted); line-height: 1.72; padding-left: 1.1rem; margin-bottom: 0; }
.month-card::after { content: attr(data-month); position: absolute; right: 18px; top: 8px; font-size: 4.2rem; font-weight: 950; color: rgba(255,255,255,.045); letter-spacing: -.08em; }
body.light-mode .month-card::after { color: rgba(15,23,42,.06); }
.skill-board { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; }
.skill-row { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.skill-row:last-child { border-bottom: 0; }
.accordion-item { background: transparent; border: 1px solid var(--line); border-radius: 20px !important; overflow: hidden; margin-bottom: 14px; }
.accordion-button { background: rgba(255,255,255,.065); color: var(--text); font-weight: 950; box-shadow: none !important; }
.accordion-button:not(.collapsed) { color: #fff; background: linear-gradient(135deg,rgba(124,58,237,.45),rgba(6,182,212,.25)); }
.accordion-body { color: var(--muted); background: rgba(255,255,255,.04); line-height: 1.75; }
.contact-box { border-radius: 36px; padding: 44px; background: linear-gradient(135deg,rgba(124,58,237,.28),rgba(6,182,212,.13)), var(--card-bg); border: 1px solid rgba(255,255,255,.16); overflow: hidden; position: relative; }
.contact-box::after { content: "</>"; position: absolute; right: 32px; bottom: -38px; font-size: 8rem; font-weight: 950; color: rgba(255,255,255,.065); }
.form-control, .form-select { background: rgba(255,255,255,.08); border: 1px solid var(--line); color: var(--text); border-radius: 18px; padding: 14px 16px; }
.form-control:focus, .form-select:focus { background: rgba(255,255,255,.1); color: var(--text); border-color: rgba(124,58,237,.6); box-shadow: 0 0 0 .25rem rgba(124,58,237,.18); }
.form-control::placeholder { color: rgba(167,176,195,.75); }
.form-select option { color: #0f172a; }
.hidden-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
footer { border-top: 1px solid var(--line); padding: 36px 0; color: var(--muted); }
.reveal { opacity: 0; transform: translateY(25px); transition: .7s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }
.whatsapp-float { position: fixed; right: 22px; bottom: 22px; z-index: 999; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #25d366; font-size: 2rem; box-shadow: 0 20px 50px rgba(37,211,102,.35); }
.progress-wrap { position: fixed; left: 0; top: 0; height: 4px; width: 100%; z-index: 2000; }
.progress-bar-scroll { height: 4px; width: 0; background: linear-gradient(90deg,var(--primary),var(--cyan),var(--gold)); }

@media (max-width: 991px) {
    .hero { padding-top: 116px; }
    .navbar-collapse { margin-top: 16px; padding: 18px; background: var(--card-bg-strong); border: 1px solid var(--line); border-radius: 22px; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
    .lesson-flow { grid-template-columns: 1fr 1fr; }
    .skill-board { grid-template-columns: 1fr; }
    .skill-row { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 575px) {
    .section-padding { padding: 68px 0; }
    .contact-box { padding: 28px; }
    .hero-title { letter-spacing: -.05em; font-size: 2.28rem; }
    .hero-desc { font-size: .98rem; }
    .lesson-flow { grid-template-columns: 1fr; }
}