:root{
  --paper:#fffdf5;
  --ink:#10213b;
  --yellow:#ffd338;
  --yellow-deep:#f2b900;
  --blue:#156fd1;
  --blue-deep:#0d4b9c;
  --green:#35ad68;
  --pink:#ef5b8d;
  --orange:#f29c4b;
  --violet:#7f66cf;
  --red:#df4a47;
  --line:#d9d9ce;
  --muted:#667081;
  --shadow:0 18px 45px rgba(16,33,59,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    linear-gradient(rgba(16,33,59,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,33,59,.025) 1px,transparent 1px),
    var(--paper);
  background-size:28px 28px;
  font-family:Arial,Helvetica,sans-serif;
}
a{color:inherit;text-decoration:none}
main{overflow:hidden}
.site-header{
  width:min(1200px,calc(100% - 40px));
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px 0;
  position:relative;
  z-index:20
}
.wordmark{display:flex;flex-direction:column;gap:2px}
.wordmark strong{font-size:1.05rem}
.wordmark span{font-size:.7rem;color:var(--muted);font-weight:700;letter-spacing:.04em}
nav{display:flex;align-items:center;gap:24px;font-size:.86rem;font-weight:800}
nav a:hover{color:var(--blue)}
.nav-buy{background:var(--ink);color:white;padding:11px 17px;border-radius:999px}
.hero{
  width:min(1200px,calc(100% - 40px));
  margin:auto;
  min-height:750px;
  display:grid;
  grid-template-columns:1.04fr .96fr;
  align-items:center;
  gap:56px;
  padding:55px 0 100px;
}
.field-label,.mini-label,.eyebrow{
  display:inline-block;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.field-label{background:#111;color:white;border-radius:8px;padding:10px 14px;transform:rotate(-1deg);margin-bottom:24px}
h1,h2,h3,p{margin-top:0}
h1{
  font-size:clamp(3.5rem,6.4vw,7rem);
  line-height:.88;
  letter-spacing:-.055em;
  margin-bottom:28px;
}
h1 span{color:var(--blue)}
h1 em{font-style:normal;color:var(--yellow-deep);text-shadow:2px 2px 0 #fff,4px 4px 0 var(--ink)}
.hero-lead{max-width:690px;font-size:1.16rem;line-height:1.72;color:var(--muted)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0}
.button{
  display:inline-flex;align-items:center;gap:12px;justify-content:center;
  min-height:54px;padding:0 22px;border-radius:14px;border:2px solid var(--ink);
  font-weight:900;box-shadow:5px 5px 0 var(--ink);transition:.16s transform,.16s box-shadow
}
.button:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.button-yellow{background:var(--yellow)}
.button-paper{background:white}
.hero-facts{display:flex;gap:10px;flex-wrap:wrap}
.hero-facts span{background:white;border:1px solid var(--line);padding:10px 13px;border-radius:999px;font-size:.76rem;font-weight:700}
.hero-facts strong{color:var(--blue);font-size:1rem}
.hero-lab{
  margin:0;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
}
.hero-lab img{
  display:block;
  width:100%;
  max-width:560px;
  height:auto;
  border-radius:28px;
  filter:drop-shadow(0 18px 30px rgba(16,33,59,.14));
}

.intro-strip{
  background:var(--ink);color:white;padding:70px max(24px,calc((100vw - 1050px)/2));
  text-align:center
}
.intro-strip p{font-size:clamp(1.4rem,2.3vw,2.15rem);line-height:1.45;font-weight:800;margin-bottom:15px}
.intro-strip strong{color:var(--yellow);font-size:1.05rem}
.specimens-section,.translator,.inside-book,.memo-section,.ai-section,.final-cta,.faq{
  padding:110px max(24px,calc((100vw - 1200px)/2))
}
.section-head{display:grid;grid-template-columns:1.05fr .75fr;gap:60px;align-items:end;margin-bottom:46px}
.section-head h2,.translator h2,.inside-book h2,.memo-card h2,.ai-copy h2,.final-cta h2{
  font-size:clamp(2.7rem,4.7vw,5.3rem);line-height:.96;letter-spacing:-.045em;margin-bottom:0
}
.section-head>p{color:var(--muted);line-height:1.75;margin-bottom:5px}
.eyebrow{color:var(--blue);margin-bottom:14px}
.specimen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.specimen-card{
  position:relative;background:white;border:2px solid var(--ink);border-radius:18px;padding:26px;box-shadow:6px 6px 0 var(--ink);
  transition:.18s transform
}
.specimen-card:hover{transform:translateY(-5px) rotate(-.4deg)}
.specimen-card:before{content:"";position:absolute;left:0;right:0;top:0;height:9px;border-radius:16px 16px 0 0;background:var(--accent)}
.specimen-card.green{--accent:var(--green)}.specimen-card.blue{--accent:var(--blue)}.specimen-card.pink{--accent:var(--pink)}
.specimen-card.orange{--accent:var(--orange)}.specimen-card.violet{--accent:var(--violet)}.specimen-card.yellow{--accent:var(--yellow)}
.specimen-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.specimen-top span{background:#111;color:white;padding:7px 9px;border-radius:6px;font-size:.67rem;font-weight:900}
.specimen-top b{font-size:1.35rem}
.specimen-card h3{font-size:1.6rem;line-height:1.04;margin-bottom:14px}
.specimen-card>p{color:var(--muted);line-height:1.62;min-height:104px}
.specimen-meta{display:flex;justify-content:space-between;gap:10px;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);padding:12px 0;margin:18px 0;font-size:.68rem;font-weight:800}
.specimen-card blockquote{margin:0;padding:14px;background:#f8f8f1;border-left:5px solid var(--accent);font-size:.78rem;line-height:1.55;font-weight:700}
.translator{background:#eaf3ff}
.translator-title{text-align:center;max-width:840px;margin:0 auto 44px}
.translator-title>span{display:inline-block;background:var(--blue);color:white;padding:8px 12px;border-radius:7px;font-size:.7rem;font-weight:900;letter-spacing:.1em}
.translator-title p{color:var(--muted)}
.translation-board{max-width:1000px;margin:auto;border:2px solid var(--ink);border-radius:24px;background:white;box-shadow:8px 8px 0 var(--yellow);overflow:hidden}
.translation-row{display:grid;grid-template-columns:1fr 70px 1.25fr;align-items:center;gap:18px;padding:24px 28px;border-bottom:1px dashed #b9c4d1}
.translation-row:last-child{border-bottom:0}
.original{font-size:1.12rem;font-weight:900}
.arrow{text-align:center;font-size:2rem;color:var(--blue);font-weight:900}
.translation{color:var(--muted);line-height:1.55}
.inside-book{display:grid;grid-template-columns:1fr .84fr;gap:80px;align-items:center;background:#fffdf7}
.inside-copy>p:not(.eyebrow){color:var(--muted);line-height:1.75;font-size:1.04rem}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}
.check-grid span{background:#f5f7f0;border:1px solid var(--line);border-radius:10px;padding:12px;font-weight:800;font-size:.8rem}
.field-sheet{position:relative;background:white;border:2px solid var(--ink);padding:42px 34px 28px;border-radius:12px;box-shadow:8px 8px 0 var(--blue);transform:rotate(1deg)}
.tape{position:absolute;top:-16px;width:88px;height:28px;background:rgba(247,207,121,.75);transform:rotate(-7deg)}
.tape-left{left:35px}.tape-right{right:35px;transform:rotate(8deg)}
.sheet-label{display:inline-block;background:#111;color:white;padding:8px 10px;border-radius:5px;font-size:.68rem;font-weight:900}
.field-sheet h3{font-size:2rem;border-bottom:2px dashed var(--ink);padding-bottom:14px;margin:14px 0 8px}
.sheet-line{display:grid;grid-template-columns:165px 1fr;gap:15px;padding:15px 0;border-bottom:1px solid #e3e3da}
.sheet-line span{color:var(--muted);line-height:1.5}
.stars{color:var(--yellow-deep)!important;font-size:1.1rem}
.memo-section{display:grid;grid-template-columns:1fr 1fr;gap:28px;background:#f7f3e8}
.memo-card,.notebook-card{padding:42px;border:2px solid var(--ink);border-radius:22px;background:white;box-shadow:6px 6px 0 var(--ink)}
.memo-card{background:#fff6a9}
.memo-card h2{font-size:clamp(2rem,3.5vw,3.7rem)}
.memo-card p,.notebook-card p{line-height:1.7;color:#4f5968}
.notebook-card{position:relative;background:#fff}
.spiral{display:block;color:var(--blue);letter-spacing:10px;margin-bottom:18px}
.notebook-card h3{font-size:2rem;margin-bottom:12px}
.fake-lines{height:110px;margin-top:20px;background:repeating-linear-gradient(transparent 0 25px,#d6dce4 25px 26px)}
.ai-section{display:grid;grid-template-columns:.75fr 1.25fr;align-items:center;gap:80px;background:#fff9e8}
.ai-copy h2{margin-bottom:24px}
.ai-copy>p:not(.eyebrow){font-size:1.05rem;line-height:1.8;color:var(--muted)}
.ai-note{margin-top:24px;padding:18px 20px;border:2px dashed var(--blue);border-radius:14px;background:white;font-size:.83rem;font-style:italic}
.ai-characters{position:relative;height:360px}
.mini-creature{position:absolute;bottom:45px;width:150px;height:175px;border:4px solid var(--ink);border-radius:48%;box-shadow:5px 5px 0 var(--ink)}
.yellow-mini{left:30px;background:var(--yellow);transform:rotate(-8deg)}
.blue-mini{right:30px;background:var(--blue);transform:rotate(8deg)}
.mini-creature:before,.mini-creature:after{content:"";position:absolute;top:45px;width:42px;height:54px;background:white;border:3px solid var(--ink);border-radius:50%}
.mini-creature:before{left:30px}.mini-creature:after{right:30px}
.coffee{position:absolute;left:50%;top:40px;transform:translateX(-50%);font-size:5rem}
.final-cta{text-align:center;background:var(--blue);color:white}
.final-cta h2{margin:18px 0}
.final-cta p{font-size:1.05rem;color:#dcecff}
.final-badge{display:inline-block;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);padding:9px 13px;border-radius:7px;font-size:.72rem;font-weight:900;transform:rotate(-1deg)}
.button-big{margin-top:22px;background:var(--yellow);color:var(--ink);font-size:1rem}
.faq{background:var(--paper)}
.faq-list{max-width:930px}
details{border-top:2px solid var(--ink)}
details:last-child{border-bottom:2px solid var(--ink)}
summary{display:flex;justify-content:space-between;gap:20px;padding:24px 3px;cursor:pointer;list-style:none;font-size:1.1rem;font-weight:900}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";display:grid;place-items:center;min-width:34px;height:34px;border:2px solid var(--ink);border-radius:50%;background:var(--yellow)}
details[open] summary:after{content:"−"}
details p{max-width:760px;color:var(--muted);line-height:1.75;padding:0 45px 24px 3px}
footer{display:flex;justify-content:space-between;gap:30px;align-items:center;padding:42px max(24px,calc((100vw - 1200px)/2));background:#0d1728;color:white}
footer p{margin:5px 0 0;color:#aab5c4;font-size:.76rem}
footer>a{color:var(--yellow);font-weight:900}
.mobile-buy{display:none}

@media(max-width:980px){
  .hero{grid-template-columns:1fr}
  .hero-lab{min-height:0}
  .specimen-grid{grid-template-columns:repeat(2,1fr)}
  .inside-book,.ai-section{grid-template-columns:1fr}
  .section-head{grid-template-columns:1fr}
}
@media(max-width:680px){
  .site-header{width:min(100% - 28px,1200px)}
  nav a:not(.nav-buy){display:none}
  .hero{width:min(100% - 30px,1200px);padding:42px 0 70px}
  h1{font-size:clamp(3rem,15vw,4.5rem)}
  .hero-lab{min-height:0}
  .specimens-section,.translator,.inside-book,.memo-section,.ai-section,.final-cta,.faq{padding:75px 18px}
  .specimen-grid,.memo-section{grid-template-columns:1fr}
  .specimen-card>p{min-height:0}
  .translation-row{grid-template-columns:1fr;padding:20px}
  .arrow{transform:rotate(90deg)}
  .check-grid{grid-template-columns:1fr}
  .sheet-line{grid-template-columns:1fr;gap:5px}
  .ai-characters{height:290px}
  .mini-creature{width:110px;height:135px}
  .mini-creature:before,.mini-creature:after{width:30px;height:39px;top:36px}
  .mini-creature:before{left:22px}.mini-creature:after{right:22px}
  footer{align-items:flex-start;flex-direction:column;padding-bottom:92px}
  .mobile-buy{
    position:fixed;left:12px;right:12px;bottom:12px;z-index:50;
    display:flex;align-items:center;justify-content:center;min-height:52px;
    background:var(--yellow);border:2px solid var(--ink);border-radius:14px;
    box-shadow:4px 4px 0 var(--ink);font-weight:900
  }
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}