@font-face{font-family:"Poppins";src:url("fonts/poppins-regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-medium.woff") format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-bold.woff") format("woff");font-weight:700;font-display:swap}
:root{
  --night:#14295C; --sky:#1C7FA6; --signal:#E8731A; --sun:#F7C948; --paper:#FFFFFF; --ink:#1E2A3A; --mist:#EAF3F8;
  --radius-lg:28px; --radius-sm:12px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;font-size:1.0625rem}
img{max-width:100%;height:auto;display:block}
a{color:var(--sky)}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}
.wrap{width:min(1080px,100% - 2.5rem);margin-inline:auto}

/* hero */
.hero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(170deg,var(--night) 0%,#16477F 55%,var(--sky) 100%)}
.hero__net{position:absolute;inset:0;width:100%;height:100%;opacity:.35;pointer-events:none}
.hero__grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center;padding:4.5rem 0 5rem}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.08;margin:0 0 1.1rem;font-weight:700;letter-spacing:-.01em}
.hero p.lede{font-size:1.15rem;max-width:34ch;margin:0 0 2rem;color:#DCEAF5}
.byte{justify-self:center;width:min(360px,80%);aspect-ratio:1;border-radius:50%;background:#fff;border:14px solid var(--signal);box-shadow:0 0 0 10px rgba(247,201,72,.25),0 30px 80px rgba(0,0,0,.35);overflow:hidden}
.byte img{width:100%;height:100%;object-fit:cover;transform:scale(1.18) translateY(4%)}

.download{display:inline-flex;align-items:center;gap:.75rem;background:var(--sun);color:var(--night);text-decoration:none;font-weight:700;font-size:1.2rem;padding:1rem 1.8rem;border-radius:999px;box-shadow:0 6px 0 #C99A1C;transition:transform .12s ease,box-shadow .12s ease}
.download:hover{transform:translateY(2px);box-shadow:0 4px 0 #C99A1C}
.download:active{transform:translateY(6px);box-shadow:0 0 0 #C99A1C}
.download svg{width:1.4em;height:1.4em;flex:none}
.meta{display:block;margin-top:.9rem;font-size:.95rem;color:#BFD7EA}
.thanks{margin-top:1.4rem;padding:1rem 1.2rem;border-radius:var(--radius-sm);background:rgba(255,255,255,.12);border-left:5px solid var(--sun);max-width:38ch}
.thanks[hidden]{display:none}
.thanks strong{color:var(--sun)}

/* inside */
.inside{padding:5rem 0 3.5rem}
.inside h2,.book h2{font-size:clamp(1.6rem,3vw,2.2rem);color:var(--night);margin:0 0 .6rem;line-height:1.2}
.inside > .wrap > p{max-width:60ch;margin:0 0 2.5rem}
.sheets{list-style:none;margin:0;padding:1.5rem 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.sheet{margin:0}
.sheet img{border-radius:6px;background:#fff;box-shadow:0 2px 4px rgba(20,41,92,.12),0 14px 30px rgba(20,41,92,.18);border:1px solid #DDE5EE}
.sheets li:nth-child(1) img{transform:rotate(-3deg)}
.sheets li:nth-child(2) img{transform:rotate(2deg) translateY(-8px)}
.sheets li:nth-child(3) img{transform:rotate(-1.5deg)}
.sheets li:nth-child(4) img{transform:rotate(3deg) translateY(-6px)}
.sheet figcaption{margin-top:1.2rem;font-weight:500;font-size:.98rem;color:var(--night);text-align:center}
.list{margin:3rem 0 0;padding:1.6rem 1.8rem;background:var(--mist);border-radius:var(--radius-lg);columns:2;column-gap:2.5rem}
.list li{break-inside:avoid;margin:.25rem 0 .25rem 1.1rem}
.list li::marker{color:var(--signal)}
.inside .wrap .tip{margin:2rem 0 0;max-width:62ch;font-size:1rem}

/* book */
.book{padding:3.5rem 0 5rem}
.book__card{display:grid;grid-template-columns:220px 1fr;gap:2.5rem;align-items:center;background:var(--night);color:#fff;border-radius:var(--radius-lg);padding:2.5rem}
.book__card h2{color:#fff}
.book__card img{border-radius:8px;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.book__card p{color:#DCEAF5;max-width:52ch}
.buttons{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.4rem}
.btn{display:inline-block;text-decoration:none;font-weight:700;padding:.8rem 1.4rem;border-radius:999px;border:2px solid #fff;color:#fff}
.btn--solid{background:var(--signal);border-color:var(--signal)}
.btn:hover{background:#fff;color:var(--night);border-color:#fff}

/* footer + legal */
footer{border-top:1px solid #DDE5EE;padding:2rem 0;font-size:.92rem;color:#5B6878}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
footer nav a{margin-right:1.2rem;color:#5B6878}
.legal{padding:3.5rem 0 4rem;max-width:72ch}
.legal h1{color:var(--night);font-size:2rem;margin:0 0 1.5rem}
.legal h2{color:var(--night);font-size:1.2rem;margin:2rem 0 .5rem}
.legal .note{background:#FFF4D6;border-left:5px solid var(--sun);padding:1rem 1.2rem;border-radius:8px;font-size:.95rem}
.legal mark{background:#FFE7A3;padding:0 .2em;border-radius:3px}
.back{display:inline-block;margin-bottom:1.5rem;font-weight:500}

@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr;gap:2.5rem;padding:3rem 0 3.5rem}
  .byte{width:min(240px,65%);order:-1;border-width:10px}
  .sheets{grid-template-columns:repeat(2,1fr)}
  .list{columns:1}
  .book__card{grid-template-columns:1fr;text-align:left;padding:1.8rem}
  .book__card img{width:160px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.sheet img{transform:none!important}}