/* AppTibles marketing site — tokens sourced from /DESIGN.md */

@font-face{
  font-family:"Chewy";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/chewy.woff2") format("woff2");
}
@font-face{
  font-family:"Baloo 2";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../fonts/baloo2.woff2") format("woff2");
}
@font-face{
  font-family:"Bungee";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/bungee.woff2") format("woff2");
}

:root{
  --bg:#FAF6FF;
  --surface:#FFFFFF;
  --surface-alt:#F1ECFA;
  --text:#241C33;
  --text-muted:#6B6084;
  --outline:#241C33;
  --accent:#FF6B35;
  --accent-deep:#E44E1B;
  --accent-text:#241C33;
  --sticker:#FFC93C;
  --panel:#4B3F72;
  --panel-text:#F3EFFA;
  --rare-common:#9CA3AF;
  --rare-uncommon:#4CAF6D;
  --rare-rare:#3B9EF5;
  --rare-epic:#9B5DE5;
  --rare-legendary-a:#FFB627;
  --rare-legendary-b:#FF6B35;
  --shadow:0 6px 0 rgba(36,28,51,0.9);
  --shadow-soft:0 10px 26px rgba(36,28,51,0.14);
  --sticker-radius:6px 32px 32px 32px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1C1626; --surface:#241C33; --surface-alt:#2C2240;
    --text:#F3EFFA; --text-muted:#B4A9CC; --outline:#F3EFFA;
    --accent:#FF7A4D; --accent-deep:#FF6B35; --accent-text:#1C1626;
    --sticker:#FFD666; --panel:#2C2240; --panel-text:#F3EFFA;
    --shadow:0 6px 0 rgba(0,0,0,0.6); --shadow-soft:0 10px 30px rgba(0,0,0,0.45);
  }
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Baloo 2",system-ui,sans-serif;
  font-weight:500;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;}
::selection{background:var(--accent);color:var(--accent-text);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}
}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

/* nav */
.topnav{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:3px solid var(--outline);}
.topnav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;}
.brand-mark{display:flex;align-items:center;gap:10px;font-family:"Chewy";font-size:1.25rem;text-decoration:none;}
.brand-mark img{width:34px;height:34px;}
.nav-cta{
  font-family:"Baloo 2";font-weight:800;font-size:0.85rem;text-transform:uppercase;letter-spacing:.03em;
  border:3px solid var(--outline);border-radius:999px;padding:9px 20px;background:var(--accent);color:var(--accent-text);
  text-decoration:none;box-shadow:var(--shadow);transition:transform .12s;
}
.nav-cta:hover{transform:translateY(-2px);}

section{padding:88px 0;}
.eyebrow{font-family:"Bungee";font-size:0.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);margin:0 0 14px;}
h2.section-title{font-family:"Chewy";font-weight:400;font-size:clamp(1.9rem,4.2vw,2.7rem);margin:0 0 18px;text-wrap:balance;line-height:1.05;}
.lede{font-size:1.1rem;color:var(--text-muted);max-width:60ch;margin:0 0 8px;}
.alt{background:var(--surface-alt);}
.center{text-align:center;margin-left:auto;margin-right:auto;}

/* hero */
.hero{padding:60px 0 90px;}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:52px;align-items:center;}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;}}
.hero h1{font-family:"Chewy";font-weight:400;font-size:clamp(2.4rem,5.6vw,3.6rem);line-height:1.03;margin:0 0 20px;text-wrap:balance;}
.hero h1 .pop{color:var(--accent);}
.hero p.sub{font-size:1.15rem;color:var(--text-muted);max-width:46ch;margin:0 0 30px;}
.hero-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;}
.tag{font-family:"Baloo 2";font-weight:700;font-size:0.78rem;text-transform:uppercase;letter-spacing:.03em;border:3px solid var(--outline);border-radius:999px;padding:6px 14px;background:var(--surface);}

.transform{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;}
@media(max-width:520px){.transform{grid-template-columns:1fr;justify-items:center;}}
.sketch-card,.card-final{width:100%;max-width:220px;}
.sketch-card{background:repeating-linear-gradient(var(--surface-alt),var(--surface-alt) 27px,rgba(107,96,132,0.22) 28px);border:3px dashed var(--text-muted);border-radius:var(--sticker-radius);padding:18px 16px 14px;transform:rotate(-3deg);}
.sketch-card svg{width:100%;height:auto;}
.sketch-card .cap{font-family:"Baloo 2";font-weight:700;font-size:0.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-top:8px;text-align:center;}
.zap{text-align:center;}
.zap svg{width:38px;height:38px;margin:0 auto;}
.card-final{background:var(--panel);color:var(--panel-text);border:3px solid var(--outline);border-radius:var(--sticker-radius);box-shadow:var(--shadow-soft);padding:16px 16px 14px;transform:rotate(2deg);}
.card-final svg{width:100%;height:auto;}
.card-final .name{font-family:"Chewy";font-size:1.05rem;text-align:center;margin-top:4px;}
.card-final .stats{display:flex;justify-content:center;gap:8px;margin-top:6px;}
.card-final .stats span{font-family:"Bungee";font-size:.68rem;}

/* rarity chip (shared) */
.rarity-chip{font-family:"Baloo 2";font-weight:800;font-size:0.74rem;text-transform:uppercase;letter-spacing:.04em;border:2.5px solid var(--outline);border-radius:999px;padding:6px 14px 6px 10px;display:inline-flex;align-items:center;gap:6px;}
.rarity-chip.common{background:var(--rare-common);color:#241C33;}
.rarity-chip.uncommon{background:var(--rare-uncommon);color:#FFFDF9;}
.rarity-chip.rare{background:var(--rare-rare);color:#FFFDF9;}
.rarity-chip.epic{background:var(--rare-epic);color:#FFFDF9;}
.rarity-chip.legendary{background:linear-gradient(120deg,var(--rare-legendary-a),var(--rare-legendary-b));color:#241C33;}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px;}
@media(max-width:820px){.steps{grid-template-columns:1fr;}}
.step{background:var(--surface);border:3px solid var(--outline);border-radius:var(--sticker-radius);padding:26px 24px;}
.step .num{font-family:"Bungee";font-size:1.5rem;color:var(--accent-deep);margin:0 0 10px;}
.step h3{font-family:"Baloo 2";font-weight:800;font-size:1.15rem;margin:0 0 8px;}
.step p{font-size:0.95rem;color:var(--text-muted);margin:0;}

/* positioning */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px;}
@media(max-width:760px){.compare{grid-template-columns:1fr;}}
.compare-card{border:3px solid var(--outline);border-radius:var(--sticker-radius);padding:24px;}
.compare-card.old{background:var(--surface-alt);}
.compare-card.new{background:var(--panel);color:var(--panel-text);}
.compare-card h4{font-family:"Baloo 2";font-weight:800;font-size:1rem;text-transform:uppercase;letter-spacing:.03em;margin:0 0 12px;}
.compare-card ul{margin:0;padding-left:20px;display:grid;gap:8px;font-size:0.95rem;}

/* rarity showcase */
.rarity-strip{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
.rarity-note{margin-top:22px;background:var(--surface);border:3px solid var(--outline);border-radius:var(--sticker-radius);padding:18px 22px;max-width:60ch;}

/* email capture */
.capture{background:var(--panel);color:var(--panel-text);border-top:3px solid var(--outline);border-bottom:3px solid var(--outline);}
.capture .wrap{max-width:640px;text-align:center;}
.capture h2{color:var(--panel-text);}
.capture .lede{color:rgba(243,239,250,0.82);margin:0 auto 30px;}
.capture-form{display:flex;flex-direction:column;gap:16px;align-items:center;}
.capture-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%;}
.capture-recaptcha{transform:scale(0.95);}
.capture-form input[type="email"]{
  flex:1;min-width:220px;font-family:"Baloo 2";font-weight:600;font-size:1rem;
  padding:14px 18px;border-radius:999px;border:3px solid var(--outline);background:var(--bg);color:var(--text);
}
.capture-form input[type="email"]::placeholder{color:var(--text-muted);}
.capture-form input[type="email"]:focus-visible{outline:3px solid var(--sticker);outline-offset:2px;}
.btn{
  font-family:"Baloo 2";font-weight:800;font-size:0.92rem;text-transform:uppercase;letter-spacing:.03em;
  border:3px solid var(--outline);border-radius:999px;padding:14px 26px;cursor:pointer;
  background:var(--accent);color:var(--accent-text);box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(36,28,51,0.9);}
.btn:focus-visible{outline:3px solid var(--sticker);outline-offset:3px;}
.capture-fine{font-size:0.8rem;color:rgba(243,239,250,0.65);margin-top:14px;}
.capture-status{margin-top:16px;font-family:"Baloo 2";font-weight:700;display:none;}
.capture-status.show{display:block;}
.capture-status.ok{color:var(--sticker);}
.capture-status.err{color:#FFADA1;}

/* footer */
footer{padding:44px 0 40px;}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
footer .fmark{display:flex;align-items:center;gap:10px;font-family:"Chewy";font-size:1.1rem;}
footer .fmark img{width:28px;height:28px;}
footer small{color:var(--text-muted);font-size:0.8rem;}