:root { --ink:#070908; --panel:#151915; --white:#fffefa; --muted:#9aa199; --line:rgba(255,255,255,.12); --yellow:#f6c514; --yellow-light:#ffe26a; --green:#7fa650; }
* { box-sizing:border-box; }
html { background:var(--ink); scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--white); font-family:Inter,"Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
.shell { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
.registration-page { position:relative; min-height:100svh; overflow:hidden; background:radial-gradient(circle at 70% 40%,rgba(127,166,80,.13),transparent 34%),var(--ink); }
.board-grid { position:fixed; inset:0; pointer-events:none; opacity:.05; background-image:linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px); background-size:76px 76px; mask-image:linear-gradient(90deg,black,transparent 68%); }
.topbar { min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.wordmark { display:flex; align-items:center; gap:12px; }
.wordmark-piece { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(246,197,20,.2); border-radius:10px; background:rgba(246,197,20,.07); }
.wordmark-piece img { width:29px; height:36px; object-fit:contain; }
.wordmark>span:last-child { display:grid; gap:2px; }
.wordmark strong { font-size:14px; letter-spacing:-.01em; }
.wordmark small { color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.live-chip { display:flex; align-items:center; gap:9px; padding:9px 12px; border:1px solid var(--line); border-radius:999px; color:#d6dad4; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.live-chip i { width:8px; height:8px; border-radius:50%; background:#e44c43; box-shadow:0 0 0 5px rgba(228,76,67,.12); animation:pulse 1.8s infinite; }
.hero { min-height:calc(100svh - 148px); display:grid; grid-template-columns:1.05fr .78fr; gap:74px; align-items:center; padding-top:54px; padding-bottom:48px; }
.hero-copy { position:relative; z-index:2; max-width:700px; }
.next-class { display:flex; align-items:center; gap:11px; width:fit-content; margin-bottom:16px; color:var(--muted); font-size:11px; }
.next-class>span { padding:7px 9px; border-radius:6px; background:rgba(246,197,20,.12); color:var(--yellow); font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.next-class strong { color:#eef1ec; text-transform:capitalize; }
.next-class small { padding-left:11px; border-left:1px solid var(--line); font-size:10px; }
.countdown { display:flex; align-items:flex-start; gap:13px; margin-bottom:30px; }
.countdown div { min-width:76px; display:grid; gap:2px; }
.countdown strong { font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif; color:var(--white); font-size:clamp(38px,4vw,58px); font-weight:800; line-height:.9; letter-spacing:-.055em; font-variant-numeric:tabular-nums; }
.countdown span { color:#717971; font-size:9px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.countdown b { margin-top:4px; color:var(--yellow); font-size:30px; font-weight:400; line-height:1; }
.eyebrow { margin:0 0 14px; color:var(--yellow); font-size:11px; font-weight:900; letter-spacing:.22em; text-transform:uppercase; }
h1 { max-width:730px; margin:0; font-size:clamp(46px,5.2vw,75px); font-weight:710; line-height:.98; letter-spacing:-.055em; }
h1 em { color:var(--yellow); font-family:Georgia,"Times New Roman",serif; font-weight:500; }
.lead { max-width:640px; margin:23px 0 26px; color:#b0b6af; font-size:16px; line-height:1.7; }
form { max-width:650px; }
form>label { display:block; margin-bottom:9px; color:#e9ece7; font-size:11px; font-weight:800; }
.form-row { display:grid; grid-template-columns:1fr auto; gap:9px; padding:7px; border:1px solid rgba(255,255,255,.16); border-radius:13px; background:rgba(255,255,255,.06); box-shadow:0 20px 50px rgba(0,0,0,.26); }
.form-row input { min-width:0; height:52px; padding:0 15px; border:0; outline:0; background:transparent; color:var(--white); font-size:15px; }
.form-row input::placeholder { color:#6f776f; }
.form-row input:focus { box-shadow:inset 0 -2px var(--yellow); }
.form-row button { height:52px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 18px; border:0; border-radius:8px; background:var(--yellow); color:var(--ink); cursor:pointer; font-size:13px; font-weight:900; transition:.18s ease; }
.form-row button:hover { background:var(--yellow-light); transform:translateY(-1px); }
.form-row button b { font-size:19px; }
.form-note { margin:10px 0 0; color:#767e76; font-size:10px; }
.form-note span { color:var(--green); }
.hp-field { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; opacity:0!important; pointer-events:none!important; }
.topics { display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }
.topics span { padding:8px 10px; border:1px solid var(--line); border-radius:6px; color:#929a91; font-size:9px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.hero-photo-wrap { position:relative; min-height:690px; }
.hero-photo { position:absolute; inset:0 12px 0 0; overflow:hidden; border-radius:7px 64px 7px 7px; background:var(--panel); box-shadow:0 35px 80px rgba(0,0,0,.42); }
.hero-photo::after { content:""; position:absolute; inset:14px; border:1px solid rgba(255,255,255,.18); border-radius:2px 49px 2px 2px; pointer-events:none; }
.hero-photo img { width:100%; height:100%; object-fit:cover; object-position:50% 37%; }
.photo-gradient { position:absolute; inset:0; background:linear-gradient(180deg,transparent 48%,rgba(4,6,5,.95) 100%); }
.photo-caption { position:absolute; left:32px; right:32px; bottom:29px; display:grid; gap:4px; }
.photo-caption small { color:var(--yellow); font-size:9px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.photo-caption strong { font-family:Georgia,"Times New Roman",serif; font-size:24px; font-weight:500; }
.photo-caption span { color:rgba(255,255,255,.58); font-size:10px; }
.move-card { position:absolute; right:-26px; top:51px; z-index:3; width:180px; display:grid; gap:5px; padding:15px; border:1px solid rgba(255,255,255,.64); border-radius:11px; background:rgba(247,246,239,.94); color:var(--ink); box-shadow:0 18px 40px rgba(0,0,0,.24); backdrop-filter:blur(12px); }
.move-card span { color:#747c73; font-size:8px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.move-card strong { font-family:Georgia,"Times New Roman",serif; color:#5d762f; font-size:20px; font-weight:600; }
.move-card small { color:#6f766e; font-size:9px; line-height:1.35; }
.photo-coordinate { position:absolute; z-index:4; display:grid; place-items:center; width:28px; height:28px; background:var(--yellow); color:var(--ink); font-size:10px; font-weight:950; }
.coordinate-a { left:-14px; bottom:42px; }
.coordinate-eight { right:-1px; top:-14px; }
.footer { min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); color:#686f68; font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.footer p { margin:0; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
@media(max-width:920px){ .hero{grid-template-columns:1fr;gap:44px;padding-top:38px}.hero-copy{max-width:760px}.hero-photo-wrap{min-height:720px}.hero-photo{inset:0}.move-card{right:14px} }
@media(max-width:620px){
  .shell{width:min(100% - 28px,520px)} .topbar{min-height:76px}.wordmark-piece{width:36px;height:36px}.wordmark-piece img{width:25px;height:32px}.wordmark small{display:none}.live-chip{padding:7px 9px;font-size:8px}
  .hero{min-height:auto;padding-top:28px;padding-bottom:30px}.next-class{display:grid;grid-template-columns:auto 1fr;gap:5px 9px}.next-class small{grid-column:2;padding-left:0;border:0}
  .countdown{gap:8px;margin-bottom:26px}.countdown div{min-width:54px}.countdown strong{font-size:39px}.countdown b{margin-top:2px;font-size:24px}h1{font-size:43px}.lead{margin-top:19px;font-size:15px}
  .form-row{grid-template-columns:1fr;padding:6px}.form-row input{height:48px}.form-row button{width:100%}.topics{margin-top:17px}.hero-photo-wrap{min-height:520px}.hero-photo{border-radius:6px 42px 6px 6px}.hero-photo img{object-position:50% 34%}
  .move-card{top:24px;right:-5px;width:157px}.coordinate-a{left:-8px}.coordinate-eight{right:-7px}.photo-caption{left:25px;bottom:23px}.footer{min-height:72px;align-items:flex-start;flex-direction:column;justify-content:center;gap:4px}
}
@media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} }

/* Thank-you route */
.thanks-page { min-height:100svh; display:grid; place-items:center; position:relative; overflow:hidden; padding:32px 20px; background:radial-gradient(circle at 50% 20%,rgba(246,197,20,.12),transparent 36%),var(--ink); }
.thanks-board { position:absolute; width:620px; height:620px; right:-280px; bottom:-260px; opacity:.07; transform:rotate(12deg); background-image:linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.4) 75%),linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.4) 75%); background-size:100px 100px; background-position:0 0,50px 50px; }
.thanks-card { position:relative; z-index:2; width:min(720px,100%); padding:46px; border:1px solid var(--line); border-radius:20px; background:rgba(17,20,17,.88); box-shadow:0 36px 90px rgba(0,0,0,.36); backdrop-filter:blur(18px); }
.success-mark { width:58px; height:58px; display:grid; place-items:center; margin-bottom:25px; border-radius:15px; background:var(--yellow); color:var(--ink); font-size:28px; font-weight:900; transform:rotate(-4deg); }
.thanks-card h1 { max-width:620px; font-size:clamp(42px,7vw,67px); }
.thanks-card>p { max-width:610px; margin:20px 0 0; color:#abb1aa; font-size:16px; line-height:1.65; }
.thanks-card>p.mail-warning { padding:13px 14px; border:1px solid rgba(246,197,20,.3); border-radius:10px; background:rgba(246,197,20,.08); color:#e4dcae; }
.next-steps { display:grid; gap:10px; margin:28px 0; }
.step { display:grid; grid-template-columns:36px 1fr; gap:13px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.035); }
.step>span { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; background:rgba(246,197,20,.12); color:var(--yellow); font-weight:900; }
.step strong { display:block; margin-bottom:3px; font-size:13px; }.step small{color:#7f877f;font-size:10px}
.whatsapp-cta { min-height:59px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 20px; border-radius:10px; background:#25d366; color:#06140a; font-size:14px; font-weight:950; transition:.18s ease; }
.whatsapp-cta:hover { background:#53e782; transform:translateY(-2px); }
.email-check { margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
.email-check>p { margin:0 0 12px; color:#c7cbc5; font-size:12px; font-weight:800; }
.check-actions { display:flex; flex-wrap:wrap; gap:8px; }
.check-actions button { padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:transparent; color:#a9afa8; cursor:pointer; font-size:10px; font-weight:850; }
.check-actions button:first-child { border-color:rgba(246,197,20,.42); color:var(--yellow); }
.check-actions button:hover { background:rgba(255,255,255,.06); }
.email-feedback { margin:13px 0 0!important; padding:12px; border-radius:8px; background:rgba(127,166,80,.13); color:#c8d7b3!important; font-size:11px!important; line-height:1.55!important; }
.thanks-footer { margin-top:20px; color:#626a62; font-size:9px; text-align:center; letter-spacing:.08em; text-transform:uppercase; }
@media(max-width:620px){ .thanks-card{padding:28px 20px;border-radius:15px}.thanks-card h1{font-size:42px}.thanks-card>p{font-size:14px}.whatsapp-cta{font-size:12px}.check-actions{display:grid}.check-actions button{text-align:left} }
