/* ═══════════════════════════════════════════════════════
   REMESYS ROBOTICS — SHARED DESIGN SYSTEM
   For: demo.krenx.in/school/
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Orbitron:wght@400;600;700;900&family=Baloo+2:wght@400;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  --primary: #FF6B35;
  --secondary: #00D2FF;
  --accent: #FFD700;
  --purple: #8B5CF6;
  --green: #10B981;
  --pink: #EC4899;
  --dark: #080C18;
  --darker: #050810;
  --card: #0F1623;
  --card2: #141D2E;
  --border: rgba(0,210,255,0.12);
  --border2: rgba(255,255,255,0.06);
  --text: #EEF2FF;
  --muted: #8892A4;
  --g1: linear-gradient(135deg,#FF6B35,#FFD700);
  --g2: linear-gradient(135deg,#00D2FF,#8B5CF6);
  --g3: linear-gradient(135deg,#10B981,#00D2FF);
  --g4: linear-gradient(135deg,#EC4899,#8B5CF6);
  --g5: linear-gradient(135deg,#FFD700,#FF6B35);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;}
body{background:var(--dark);color:var(--text);font-family:'Nunito',sans-serif;overflow-x:hidden;min-height:100vh;}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:var(--darker);}
::-webkit-scrollbar-thumb{background:var(--secondary);border-radius:3px;}

/* ── LOADER ── */
#loader{position:fixed;inset:0;background:var(--darker);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;transition:opacity .6s,visibility .6s;}
#loader.out{opacity:0;visibility:hidden;}
.loader-emoji{font-size:4rem;animation:bounce 1s ease-in-out infinite;}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-18px);}}
.loader-bar{width:220px;height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;}
.loader-fill{height:100%;background:var(--g2);border-radius:3px;animation:loadfill 2s ease forwards;}
@keyframes loadfill{0%{width:0%;}100%{width:100%;}}
.loader-text{font-family:'Orbitron',monospace;font-size:.8rem;color:var(--secondary);letter-spacing:.15em;text-transform:uppercase;}

/* ── PROGRESS BAR ── */
#pbar{position:fixed;top:0;left:0;height:3px;background:var(--g1);z-index:9998;width:0%;transition:width .1s;}

/* ── STARS BG ── */
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.star{position:absolute;background:#fff;border-radius:50%;animation:twinkle ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.1;}50%{opacity:.8;}}
.nebula{position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;}

/* ── NAV ── */
nav{position:fixed;top:0;width:100%;z-index:1000;background:rgba(5,8,16,.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border);height:68px;display:flex;align-items:center;}
.nav-inner{max-width:1440px;margin:0 auto;padding:0 2rem;width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.nav-logo{display:flex;align-items:center;gap:.75rem;text-decoration:none;}
.nav-logo-icon{width:42px;height:42px;border-radius:12px;background:var(--g1);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;}
.nav-logo-text .name{display:block;font-family:'Orbitron',monospace;font-size:1rem;font-weight:900;background:var(--g1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.1;}
.nav-logo-text .sub{display:block;font-size:.6rem;color:var(--secondary);letter-spacing:.08em;text-transform:uppercase;}
.nav-class-links{display:flex;gap:.3rem;flex-wrap:nowrap;overflow-x:auto;}
.nav-class-links a{font-size:.75rem;font-weight:800;padding:.35rem .65rem;border-radius:20px;text-decoration:none;color:var(--muted);border:1px solid transparent;transition:all .2s;white-space:nowrap;}
.nav-class-links a:hover,.nav-class-links a.active{color:var(--secondary);border-color:rgba(0,210,255,.3);background:rgba(0,210,255,.08);}
.nav-right{display:flex;align-items:center;gap:.75rem;flex-shrink:0;}
.nav-home-btn{font-size:.78rem;font-weight:800;color:var(--text);text-decoration:none;padding:.4rem .9rem;border:1px solid var(--border2);border-radius:20px;transition:all .2s;}
.nav-home-btn:hover{border-color:var(--secondary);color:var(--secondary);}
.nav-cta{background:var(--g1);border:none;color:#fff;font-family:'Nunito',sans-serif;font-weight:800;font-size:.8rem;padding:.45rem 1.1rem;border-radius:20px;cursor:pointer;transition:transform .2s,box-shadow .2s;white-space:nowrap;}
.nav-cta:hover{transform:scale(1.04);box-shadow:0 4px 20px rgba(255,107,53,.35);}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.5rem;border:none;background:none;}
.hamburger span{display:block;width:22px;height:2.5px;background:var(--text);border-radius:2px;transition:.3s;}
.mobile-nav{display:none;position:fixed;top:68px;left:0;width:100%;background:rgba(5,8,16,.97);backdrop-filter:blur(20px);padding:1.5rem;z-index:999;border-bottom:1px solid var(--border);flex-direction:column;gap:1rem;}
.mobile-nav.open{display:flex;}
.mobile-nav a{color:var(--text);text-decoration:none;font-weight:700;font-size:1rem;padding:.5rem 0;border-bottom:1px solid var(--border2);}

/* ── HERO ── */
.class-hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:6rem 2rem 3rem;position:relative;z-index:1;}
.hero-content{max-width:960px;margin:0 auto;}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(0,210,255,.08);border:1px solid rgba(0,210,255,.25);padding:.4rem 1.2rem;border-radius:30px;font-size:.78rem;font-weight:800;color:var(--secondary);letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.5rem;}
.badge-dot{width:7px;height:7px;background:var(--secondary);border-radius:50%;animation:pulse 1.5s infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(1.6);}}
.hero-title{font-family:'Baloo 2',cursive;font-size:clamp(2.6rem,7vw,5rem);font-weight:800;line-height:1.1;margin-bottom:1rem;}
.hero-title .g1{background:var(--g1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.hero-title .g2{background:var(--g2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.hero-title .g3{background:var(--g3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.hero-title .g4{background:var(--g4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.hero-sub{font-size:1.1rem;color:var(--muted);max-width:640px;margin:0 auto 2rem;line-height:1.75;}
.hero-btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.5rem;}
.btn-pri{background:var(--g1);border:none;color:#fff;font-family:'Nunito',sans-serif;font-weight:800;font-size:.95rem;padding:.8rem 1.8rem;border-radius:30px;cursor:pointer;transition:transform .2s,box-shadow .2s;}
.btn-pri:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(255,107,53,.4);}
.btn-sec{background:transparent;border:2px solid var(--secondary);color:var(--secondary);font-family:'Nunito',sans-serif;font-weight:800;font-size:.95rem;padding:.8rem 1.8rem;border-radius:30px;cursor:pointer;transition:all .2s;}
.btn-sec:hover{background:var(--secondary);color:var(--dark);}
.btn-ghost{background:transparent;border:1px solid var(--border2);color:var(--muted);font-family:'Nunito',sans-serif;font-weight:700;font-size:.88rem;padding:.65rem 1.4rem;border-radius:25px;cursor:pointer;transition:all .2s;}
.btn-ghost:hover{border-color:var(--muted);color:var(--text);}
.hero-chips{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;}
.chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--card);border:1px solid var(--border2);padding:.35rem .85rem;border-radius:20px;font-size:.78rem;font-weight:700;color:var(--muted);}
.chip .dot{width:6px;height:6px;border-radius:50%;}

/* ── SECTION CHROME ── */
.section{position:relative;z-index:1;}
.container{max-width:1380px;margin:0 auto;padding:5rem 2rem;}
.section-tag{display:inline-block;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.25);color:var(--purple);padding:.3rem .85rem;border-radius:12px;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.75rem;}
.section-title{font-family:'Baloo 2',cursive;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;line-height:1.2;margin-bottom:.75rem;}
.section-desc{color:var(--muted);font-size:.95rem;max-width:560px;margin:0 auto;line-height:1.75;}
.section-header{text-align:center;margin-bottom:3rem;}

/* ── CARDS ── */
.card{background:var(--card);border:1px solid var(--border);border-radius:20px;transition:transform .3s,box-shadow .3s;}
.card:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.4);}
.card-sm{background:var(--card2);border:1px solid var(--border2);border-radius:14px;}

/* ── GRID ── */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem;}
.grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;}
.grid-4{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.2rem;}

/* ── TOPIC CARDS ── */
.topic-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:1.6rem;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s;}
.topic-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:20px 20px 0 0;}
.topic-card.c1::before{background:var(--g1);}
.topic-card.c2::before{background:var(--g2);}
.topic-card.c3::before{background:var(--g3);}
.topic-card.c4::before{background:var(--g4);}
.topic-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,.4);}
.topic-icon{font-size:2.2rem;margin-bottom:.8rem;display:block;}
.topic-title{font-family:'Baloo 2',cursive;font-size:1.15rem;font-weight:700;margin-bottom:.5rem;}
.topic-desc{color:var(--muted);font-size:.88rem;line-height:1.65;margin-bottom:1rem;}
.topic-tags{display:flex;flex-wrap:wrap;gap:.35rem;}
.tag{padding:.2rem .6rem;border-radius:8px;font-size:.7rem;font-weight:800;border:1px solid;}
.tag.t1{background:rgba(255,107,53,.08);border-color:rgba(255,107,53,.2);color:var(--primary);}
.tag.t2{background:rgba(0,210,255,.08);border-color:rgba(0,210,255,.2);color:var(--secondary);}
.tag.t3{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.2);color:var(--green);}
.tag.t4{background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.2);color:var(--purple);}
.tag.t5{background:rgba(255,215,0,.08);border-color:rgba(255,215,0,.2);color:var(--accent);}

/* ── SIMULATOR FRAME ── */
.sim-frame{background:var(--card);border:1px solid var(--border);border-radius:24px;overflow:hidden;}
.sim-header{background:rgba(0,0,0,.3);border-bottom:1px solid var(--border);padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.sim-header h3{font-family:'Baloo 2',cursive;font-size:1.1rem;font-weight:700;}
.sim-tabs{display:flex;gap:.3rem;overflow-x:auto;padding:.2rem 0;}
.sim-tab{background:transparent;border:1px solid var(--border2);color:var(--muted);font-family:'Nunito',sans-serif;font-size:.8rem;font-weight:700;padding:.45rem 1rem;border-radius:20px;cursor:pointer;white-space:nowrap;transition:all .2s;}
.sim-tab.active,.sim-tab:hover{background:rgba(0,210,255,.1);border-color:var(--secondary);color:var(--secondary);}
.sim-body{padding:1.5rem;}
.sim-panel{display:none;}
.sim-panel.active{display:block;}

/* ── CODE EDITOR ── */
.code-wrap{background:#0A0E1A;border:1px solid #1E2D45;border-radius:14px;overflow:hidden;}
.code-topbar{background:#0F1520;padding:.6rem 1rem;display:flex;align-items:center;gap:.5rem;border-bottom:1px solid #1E2D45;}
.dot-r{width:11px;height:11px;border-radius:50%;background:#FF5F57;}
.dot-y{width:11px;height:11px;border-radius:50%;background:#FEBC2E;}
.dot-g{width:11px;height:11px;border-radius:50%;background:#28C840;}
.file-name{margin-left:.5rem;font-family:'Space Mono',monospace;font-size:.75rem;color:#4D8FC4;}
.code-area{display:grid;grid-template-columns:1fr 1fr;}
textarea.code-in{background:transparent;border:none;color:#CDD9E5;font-family:'Space Mono',monospace;font-size:.82rem;line-height:1.7;padding:1.2rem;resize:none;height:260px;outline:none;tab-size:2;}
.code-out{background:#070B14;border-left:1px solid #1E2D45;color:#3FB950;font-family:'Space Mono',monospace;font-size:.78rem;line-height:1.7;padding:1.2rem;height:260px;overflow-y:auto;white-space:pre-wrap;}
.code-controls{background:#0F1520;border-top:1px solid #1E2D45;padding:.75rem 1rem;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;}
.run-btn{background:var(--g3);border:none;color:#fff;font-family:'Nunito',sans-serif;font-weight:800;font-size:.82rem;padding:.5rem 1.2rem;border-radius:16px;cursor:pointer;transition:transform .2s;}
.run-btn:hover{transform:scale(1.05);}
.clear-btn{background:transparent;border:1px solid var(--border2);color:var(--muted);font-family:'Nunito',sans-serif;font-weight:700;font-size:.8rem;padding:.5rem 1rem;border-radius:14px;cursor:pointer;transition:all .2s;}
.clear-btn:hover{border-color:var(--muted);color:var(--text);}
.lang-sel{background:var(--card);border:1px solid var(--border2);color:var(--text);font-family:'Nunito',sans-serif;font-size:.8rem;padding:.4rem .8rem;border-radius:12px;cursor:pointer;}
.code-status{margin-left:auto;font-size:.75rem;color:var(--muted);font-family:'Space Mono',monospace;}

/* ── ROBOT CANVAS ── */
#robotCanvas{display:block;width:100%;border-radius:12px;background:#070B14;border:1px solid var(--border);}
.robot-panel{display:grid;grid-template-columns:1fr 280px;gap:1.2rem;align-items:start;}
.ctrl-pad{display:flex;flex-direction:column;gap:.75rem;}
.ctrl-grid{display:grid;grid-template-columns:repeat(3,52px);grid-rows:repeat(3,52px);gap:6px;}
.ctrl-btn{width:52px;height:52px;background:var(--card2);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;user-select:none;-webkit-user-select:none;}
.ctrl-btn:active,.ctrl-btn.pressed{background:rgba(0,210,255,.2);border-color:var(--secondary);color:var(--secondary);transform:scale(.92);}
.ctrl-stop{font-size:.65rem;font-weight:800;font-family:'Orbitron',monospace;}
.sensor-box{background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:12px;padding:1rem;}
.sensor-row{display:flex;align-items:center;gap:.6rem;padding:.4rem 0;border-bottom:1px solid var(--border2);}
.sensor-row:last-child{border-bottom:none;}
.sensor-name{font-size:.75rem;color:var(--muted);min-width:100px;}
.sensor-val{font-size:.78rem;font-weight:800;font-family:'Space Mono',monospace;min-width:44px;text-align:right;}
.sensor-bar-wrap{flex:1;height:6px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;}
.sensor-fill{height:100%;border-radius:3px;transition:width .4s;}

/* ── QUIZ ── */
.quiz-wrap{max-width:680px;margin:0 auto;}
.quiz-meta{display:flex;gap:.8rem;margin-bottom:1.5rem;flex-wrap:wrap;}
.quiz-stat{background:var(--card2);border:1px solid var(--border2);border-radius:12px;padding:.5rem 1rem;font-size:.82rem;}
.quiz-stat strong{color:var(--secondary);}
.quiz-q{font-weight:800;font-size:1rem;margin-bottom:1rem;line-height:1.5;}
.quiz-opts{display:flex;flex-direction:column;gap:.5rem;}
.quiz-opt{background:var(--card2);border:2px solid var(--border2);color:var(--text);font-family:'Nunito',sans-serif;font-weight:700;font-size:.88rem;padding:.75rem 1.1rem;border-radius:12px;cursor:pointer;text-align:left;transition:all .2s;}
.quiz-opt:hover{border-color:var(--secondary);}
.quiz-opt.correct{border-color:var(--green);background:rgba(16,185,129,.12);}
.quiz-opt.wrong{border-color:var(--pink);background:rgba(236,72,153,.12);}
.quiz-fb{margin-top:.75rem;padding:.6rem 1rem;border-radius:10px;font-size:.84rem;font-weight:700;display:none;}
.quiz-fb.correct{background:rgba(16,185,129,.1);color:var(--green);display:block;}
.quiz-fb.wrong{background:rgba(236,72,153,.1);color:var(--pink);display:block;}

/* ── BINARY GAME ── */
.binary-display{font-family:'Orbitron',monospace;font-size:2.8rem;font-weight:900;color:var(--accent);text-align:center;letter-spacing:.1em;margin:1rem 0;}
.binary-in{background:var(--card2);border:2px solid var(--border);color:var(--text);font-family:'Orbitron',monospace;font-size:1.2rem;font-weight:700;padding:.6rem 1rem;border-radius:12px;text-align:center;width:140px;outline:none;}
.binary-in:focus{border-color:var(--secondary);}
.powers-row{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;margin-top:1rem;}
.power-cell{text-align:center;background:rgba(0,210,255,.06);border:1px solid rgba(0,210,255,.15);border-radius:8px;padding:.4rem .5rem;min-width:38px;}
.power-cell .exp{font-size:.6rem;color:var(--muted);}
.power-cell .val{font-family:'Orbitron',monospace;font-size:.85rem;color:var(--secondary);}

/* ── BLOCK CODE SIM ── */
.block-workspace{display:grid;grid-template-columns:200px 1fr;gap:1rem;height:360px;}
.block-palette{background:rgba(0,0,0,.2);border:1px solid var(--border2);border-radius:12px;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.4rem;}
.block-item{padding:.5rem .8rem;border-radius:8px;font-size:.8rem;font-weight:700;cursor:grab;user-select:none;transition:transform .15s;}
.block-item:hover{transform:scale(1.03);}
.b-move{background:rgba(0,210,255,.2);border:1px solid rgba(0,210,255,.4);color:var(--secondary);}
.b-loop{background:rgba(255,215,0,.15);border:1px solid rgba(255,215,0,.3);color:var(--accent);}
.b-sound{background:rgba(236,72,153,.15);border:1px solid rgba(236,72,153,.3);color:var(--pink);}
.b-control{background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.3);color:var(--purple);}
.b-led{background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);color:var(--green);}
.block-drop{background:rgba(0,0,0,.3);border:2px dashed rgba(255,255,255,.1);border-radius:12px;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.4rem;}
.block-drop.over{border-color:var(--secondary);}
.block-placed{display:flex;align-items:center;justify-content:space-between;padding:.4rem .7rem;border-radius:7px;font-size:.78rem;font-weight:700;}
.block-placed .del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.9rem;padding:0 .2rem;}
.block-placed .del:hover{color:var(--pink);}
.block-output{background:#070B14;border:1px solid #1E2D45;border-radius:10px;padding:1rem;font-family:'Space Mono',monospace;font-size:.78rem;color:#3FB950;height:120px;overflow-y:auto;margin-top:.75rem;white-space:pre-wrap;}

/* ── CIRCUIT CANVAS ── */
#circuitCanvas{display:block;border-radius:12px;border:1px solid var(--border);background:#070B14;cursor:crosshair;max-width:100%;}
.circuit-toolbar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.75rem;}
.ct-btn{background:var(--card2);border:2px solid var(--border2);color:var(--text);font-family:'Nunito',sans-serif;font-size:.78rem;font-weight:700;padding:.4rem .85rem;border-radius:10px;cursor:pointer;transition:all .2s;}
.ct-btn:hover,.ct-btn.active{border-color:var(--accent);color:var(--accent);}

/* ── PATTERN AI ── */
.pattern-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;max-width:250px;margin:0 auto 1rem;}
.pcell{aspect-ratio:1;border-radius:7px;cursor:pointer;transition:all .2s;border:2px solid transparent;}
.pcell.on{background:var(--secondary);border-color:rgba(0,210,255,.5);}
.pcell.off{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.05);}
.pcell:hover{transform:scale(1.1);}

/* ── PROJECT CARDS ── */
.proj-card{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;cursor:pointer;transition:transform .3s,box-shadow .3s;}
.proj-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.5);}
.proj-thumb{height:140px;display:flex;align-items:center;justify-content:center;font-size:3.5rem;position:relative;}
.proj-body{padding:1.25rem;}
.proj-level{display:inline-block;padding:.2rem .65rem;border-radius:8px;font-size:.7rem;font-weight:800;margin-bottom:.6rem;}
.level-e{background:rgba(16,185,129,.12);color:var(--green);}
.level-m{background:rgba(255,215,0,.12);color:var(--accent);}
.level-h{background:rgba(236,72,153,.12);color:var(--pink);}
.proj-title{font-family:'Baloo 2',cursive;font-size:1.05rem;font-weight:700;margin-bottom:.35rem;}
.proj-desc{color:var(--muted);font-size:.83rem;line-height:1.6;margin-bottom:.8rem;}
.proj-meta{display:flex;gap:.8rem;font-size:.75rem;color:var(--muted);}

/* ── SCHEDULE ── */
.quarter-card{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;}
.q-header{padding:1.1rem 1.4rem;display:flex;align-items:center;gap:1rem;}
.q-num{font-family:'Orbitron',monospace;font-size:2.5rem;font-weight:900;opacity:.2;}
.q-info h3{font-family:'Baloo 2',cursive;font-weight:700;font-size:1rem;}
.q-info p{font-size:.75rem;color:var(--muted);}
.q-body{padding:0 1.4rem 1.4rem;}
.week-row{display:flex;gap:.8rem;padding:.5rem 0;border-bottom:1px solid var(--border2);font-size:.83rem;align-items:flex-start;}
.week-row:last-child{border-bottom:none;}
.week-label{font-size:.7rem;font-weight:800;color:var(--muted);min-width:52px;margin-top:.1rem;}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:2000;display:none;align-items:center;justify-content:center;padding:1.5rem;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--card);border:1px solid var(--border);border-radius:22px;max-width:600px;width:100%;max-height:88vh;overflow-y:auto;padding:1.8rem;position:relative;}
.modal-close{position:absolute;top:1rem;right:1rem;background:rgba(255,255,255,.07);border:1px solid var(--border2);color:var(--text);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.modal-close:hover{background:rgba(255,107,53,.2);border-color:var(--primary);}

/* ── FAQ ── */
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:14px;margin-bottom:.6rem;overflow:hidden;}
.faq-q{padding:1.1rem 1.4rem;font-weight:700;font-size:.9rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:color .2s;}
.faq-q:hover{color:var(--secondary);}
.faq-arr{transition:transform .3s;font-size:1rem;}
.faq-item.open .faq-arr{transform:rotate(180deg);}
.faq-a{display:none;padding:0 1.4rem 1rem;color:var(--muted);font-size:.86rem;line-height:1.7;}
.faq-item.open .faq-a{display:block;}

/* ── GALLERY ── */
.gallery-item{border-radius:16px;overflow:hidden;aspect-ratio:1.5;display:flex;align-items:center;justify-content:center;font-size:3.2rem;border:1px solid var(--border);cursor:pointer;position:relative;transition:transform .3s,box-shadow .3s;}
.gallery-item:hover{transform:scale(1.03);box-shadow:0 10px 40px rgba(0,0,0,.5);}
.gallery-label{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.85));padding:.8rem;font-size:.78rem;font-weight:700;opacity:0;transition:opacity .3s;}
.gallery-item:hover .gallery-label{opacity:1;}

/* ── FOOTER ── */
footer{background:var(--darker);border-top:1px solid var(--border);padding:3rem 2rem 1.5rem;position:relative;z-index:1;}
.footer-grid{max-width:1380px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2rem;}
.footer-brand .logo-name{font-family:'Orbitron',monospace;font-size:.95rem;font-weight:900;background:var(--g1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.footer-brand p{color:var(--muted);font-size:.84rem;line-height:1.7;margin-top:.75rem;}
.footer-col h4{font-weight:800;font-size:.85rem;margin-bottom.85rem;color:var(--text);margin-bottom:.85rem;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;}
.footer-col a{color:var(--muted);text-decoration:none;font-size:.82rem;transition:color .2s;}
.footer-col a:hover{color:var(--secondary);}
.footer-bottom{max-width:1380px;margin:0 auto;border-top:1px solid var(--border);padding-top:1.25rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;}
.footer-bottom p{color:var(--muted);font-size:.75rem;}
.social-row{display:flex;gap:.5rem;}
.social-btn{width:34px;height:34px;border-radius:50%;background:var(--card);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:.9rem;cursor:pointer;text-decoration:none;transition:all .2s;}
.social-btn:hover{border-color:var(--secondary);background:rgba(0,210,255,.08);}

/* ── SCROLL TOP ── */
#scrollTop{position:fixed;bottom:1.5rem;right:1.5rem;width:44px;height:44px;border-radius:50%;background:var(--g1);border:none;color:#fff;font-size:1.1rem;cursor:pointer;z-index:900;opacity:0;pointer-events:none;transition:opacity .3s,transform .2s;display:flex;align-items:center;justify-content:center;}
#scrollTop.show{opacity:1;pointer-events:all;}
#scrollTop:hover{transform:scale(1.12);}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s,transform .65s;}
.reveal.vis{opacity:1;transform:translateY(0);}
.reveal-delay-1{transition-delay:.1s;}
.reveal-delay-2{transition-delay:.2s;}
.reveal-delay-3{transition-delay:.3s;}
.robot-float{animation:robotBob 3.5s ease-in-out infinite;}
@keyframes robotBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
  .nav-class-links,.nav-cta{display:none;}
  .hamburger{display:flex;}
  .code-area{grid-template-columns:1fr;}
  textarea.code-in{height:180px;}
  .code-out{border-left:none;border-top:1px solid #1E2D45;height:130px;}
  .robot-panel{grid-template-columns:1fr;}
  .block-workspace{grid-template-columns:1fr;height:auto;}
  .block-palette{flex-direction:row;overflow-x:auto;overflow-y:hidden;height:auto;flex-wrap:nowrap;}
  .footer-grid{grid-template-columns:1fr;}
  .hero-title{font-size:2.2rem;}
}
@media(max-width:480px){
  .container{padding:3.5rem 1.2rem;}
  .sim-body{padding:1rem;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .ctrl-grid{grid-template-columns:repeat(3,46px);}
  .ctrl-btn{width:46px;height:46px;}
}

/* ── UTILITY ── */
.text-center{text-align:center;}
.mt-1{margin-top:1rem;}
.mt-2{margin-top:2rem;}
.mb-1{margin-bottom:1rem;}
.divider{height:3px;width:100%;}
.divider.d1{background:var(--g1);}
.divider.d2{background:var(--g2);}
.divider.d3{background:var(--g3);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}