:root{--sky:#bfe8ff;--sky2:#fff3d6;--ink:#2f2446;--soft:#5b4d73;--accent:#b8400f;--accent-bg:#ff9a62;--card:#fff;--line:#f0dfc8;--bg:#fffaf0;--green:#7fd18b}
@media(prefers-color-scheme:dark){:root{--sky:#2a3a66;--sky2:#3b2f5c;--ink:#fbeedd;--soft:#cdbfe0;--accent:#ffb08a;--accent-bg:#ff9a62;--card:#33264a;--line:#4a3a66;--bg:#241a33}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.65 ui-rounded,"Nunito","Avenir Next",system-ui,-apple-system,"Segoe UI",sans-serif}
.wrap{max-width:60rem;margin:0 auto;padding:0 1rem}
a{color:var(--accent)}a:focus-visible,button:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
header{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.2rem;padding:.8rem 0}
header .brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.25rem;color:var(--ink);text-decoration:none}
header .brand img{width:40px;height:40px;border-radius:10px}
header nav{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;margin-left:auto;align-items:center}
header nav a{color:var(--ink);text-decoration:none;font-weight:600}header nav a:hover{text-decoration:underline}
.lang{border:2px solid var(--ink);border-radius:99px;padding:.1rem .8rem;font-size:.95rem}
.hero{background:linear-gradient(var(--sky),var(--sky2));text-align:center;overflow:hidden}
.hero .wrap{padding-top:1rem}
.hero h1{font-size:clamp(2.2rem,7vw,4rem);line-height:1.1;margin:.3em 0 .2em}
.hero h1 span{display:block;color:var(--accent)}
.hero p.lead{font-size:1.3rem;max-width:36rem;margin:.5rem auto 1.2rem;color:var(--soft)}
.hero svg{display:block;width:100%;height:auto;max-width:56rem;margin:1rem auto 0}
.btn{display:inline-block;background:var(--accent-bg);color:#2f2446;font-weight:800;padding:.8rem 1.6rem;border-radius:99px;border:0;font-size:1.1rem}
.soon{cursor:default}
.badge{display:inline-block;background:var(--card);border:2px solid var(--line);color:var(--ink);padding:.15rem .8rem;border-radius:99px;font-size:.95rem;margin:.2rem}
section{padding:3rem 0}
h2{font-size:clamp(1.6rem,4vw,2.3rem);line-height:1.2;margin:0 0 .6em}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.card{background:var(--card);border:2px solid var(--line);border-radius:22px;padding:1.1rem 1.3rem}
.card h3{margin:.2em 0}.card .ico{font-size:2.2rem}
.steps .num{display:inline-grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--accent-bg);color:#2f2446;font-weight:800}
.shots{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
.slot{aspect-ratio:9/19;border:3px dashed var(--line);border-radius:22px;display:grid;place-items:center;text-align:center;padding:.8rem;color:var(--soft);font-size:.9rem;background:var(--card)}
.band{background:var(--card);border-block:2px solid var(--line)}
ul.tick{list-style:none;padding:0}ul.tick li{padding-left:1.9rem;position:relative;margin:.5rem 0}
ul.tick li:before{content:"\2713";position:absolute;left:0;color:#1d7a35;font-weight:800}
@media(prefers-color-scheme:dark){ul.tick li:before{color:var(--green)}}
details{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:.7rem 1.1rem;margin:.7rem 0}
summary{font-weight:700;cursor:pointer}
.todo{background:#fff2b8;color:#4a3a00;border-radius:6px;padding:0 .3rem;font-weight:700}
.page{padding:2rem 0 3rem;max-width:44rem}
.cta{text-align:center}
footer{border-top:2px solid var(--line);padding:1.5rem 0 2.5rem;color:var(--soft);font-size:.95rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}footer a{color:var(--soft)}
@media(prefers-reduced-motion:no-preference){.float{animation:fl 6s ease-in-out infinite}@keyframes fl{50%{transform:translateY(-8px)}}}