/* =========================================================
   Vallsoft Drop — Sticker Book / Pastel Paper
   ========================================================= */
:root{
  --carbon:#000000; --paper:#ffffff; --sky:#dceeff; --concrete:#cccccc; --mist:#e9e9e9;
  --blue:#4da2ff; --mint:#55db9c; --lavender:#e9ccff;
  --ember:#fb4903; --sunburst:#ffd731; --violet:#5c4ade;

  --font-display:'Antonio','Bowlby One',ui-sans-serif,system-ui,sans-serif;
  --font-ui:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --r-card:30px; --r-card-lg:40px; --r-pill:1600px; --r-tag:20px;
  --maxw:1440px; --gap:48px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--carbon);
  font-family:var(--font-ui); font-size:15px; line-height:1.39;
  letter-spacing:-0.01em; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3{margin:0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em}

/* ---------- Marquee ---------- */
.marquee{
  background:#000; color:#fff; overflow:hidden; white-space:nowrap;
  border-block:1px solid #000; padding:10px 0;
  font-weight:700; font-size:12px; letter-spacing:.032em; text-transform:uppercase;
}
.marquee__track{display:inline-block;animation:marquee 32s linear infinite}
.marquee__track span{padding-inline:12px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Nav ---------- */
.nav{
  max-width:var(--maxw); margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.nav__logo{
  width:44px; height:44px; border-radius:var(--r-pill);
  border:1px solid #000; background:#fff; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:22px; text-decoration:none;
}
.nav__links{display:flex; gap:6px}

.pill,.btn-ghost{
  border:1px solid #000; background:#fff; color:#000;
  border-radius:var(--r-pill); padding:10px 16px;
  font-family:var(--font-ui); font-weight:700; font-size:12px;
  letter-spacing:.032em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; transition:transform .15s ease, background .15s ease;
  display:inline-flex; align-items:center; justify-content:center;
}
.pill:hover,.btn-ghost:hover{transform:translateY(-2px); background:var(--sky)}

.btn-filled{
  background:#000; color:#fff; border:1px solid #000;
  border-radius:40px; padding:11px 18px;
  font-family:var(--font-ui); font-weight:700; font-size:13px;
  letter-spacing:.03em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; transition:transform .15s ease, opacity .15s ease;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn-filled:hover{transform:translateY(-2px)}
.btn-block{width:100%; margin-top:16px; padding:16px}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; background:var(--sky);
  padding:60px 24px 80px;
}
.hero__inner{max-width:var(--maxw); margin:0 auto; position:relative; z-index:2}
.display{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(72px,15vw,200px); line-height:.8; letter-spacing:0;
  margin:0 0 24px; position:relative; z-index:2;
}
.display--stroke{
  color:transparent;
  -webkit-text-stroke:2px #000;
  text-stroke:2px #000;
}
.tagline{
  font-family:var(--font-ui); font-weight:500;
  font-size:clamp(16px,2vw,24px); line-height:1.3;
  max-width:640px; margin:0 0 32px; letter-spacing:-0.01em;
}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap}

/* Ribbon 3D (flat blue, no gradient) */
.ribbon{
  position:absolute; background:var(--blue); border:1px solid #000;
  border-radius:60% 40% 55% 45% / 55% 60% 40% 45%;
  z-index:1; pointer-events:none;
}
.ribbon--a{width:min(720px,70vw); height:min(720px,70vw); right:-12%; top:-25%; opacity:.95}
.ribbon--b{width:min(360px,40vw); height:min(360px,40vw); left:-12%; bottom:-25%; opacity:.9}

/* Stickers */
.sticker{
  position:absolute; z-index:3;
  width:64px; height:64px; border-radius:20px; border:1px solid #000;
  display:grid; place-items:center; font-size:26px; line-height:1;
  font-family:var(--font-ui); font-weight:700;
}
.sticker--ember{background:var(--ember); color:#fff; transform:rotate(-12deg); top:6%; right:12%}
.sticker--sun{background:var(--sunburst); color:#000; transform:rotate(10deg); top:46%; right:24%; width:52px; height:52px; font-size:22px}
.sticker--violet{background:var(--violet); color:#fff; transform:rotate(-6deg); top:64%; right:4%; width:58px; height:58px; font-size:22px}

/* ---------- Section ---------- */
.section{padding:80px 24px}
.section--white{background:var(--paper)}
.section--gray{background:var(--concrete)}
.section__inner{max-width:1000px; margin:0 auto}

.h-section{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(48px,8vw,110px); line-height:.8;
  margin:0 0 32px; letter-spacing:0;
}

/* ---------- Form upload ---------- */
.upload{
  background:#fff; border:1px solid #000; border-radius:var(--r-card);
  padding:24px;
}
.dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; cursor:pointer;
  background:var(--sky); border:1px solid #000; border-radius:var(--r-card-lg);
  padding:48px 24px; transition:background .15s ease;
}
.dropzone:hover{background:var(--lavender)}
.dropzone__icon{
  width:56px; height:56px; border-radius:var(--r-pill);
  background:#fff; border:1px solid #000; display:grid; place-items:center;
  font-size:28px; font-weight:700; margin-bottom:4px;
}
.dropzone__title{font-weight:700; font-size:24px; letter-spacing:-0.01em}
.dropzone__hint{font-size:13px; color:#333; letter-spacing:.01em}
.dropzone input[type=file]{display:none}

.filename{
  margin-top:12px; font-size:13px; font-weight:500;
  color:#000; min-height:1.2em; word-break:break-all;
}

.alert{
  background:var(--ember); color:#fff; border:1px solid #000;
  border-radius:var(--r-tag); padding:12px 16px; font-size:13px; font-weight:700;
  margin-bottom:16px; letter-spacing:.01em;
}

/* ---------- Result ---------- */
.result{
  background:#fff; border:1px solid #000; border-radius:var(--r-card);
  padding:24px; margin-bottom:24px;
}
.badge{
  display:inline-block; padding:6px 12px; border-radius:var(--r-pill);
  border:1px solid #000; font-size:12px; font-weight:700;
  letter-spacing:.032em; text-transform:uppercase;
}
.badge--mint{background:var(--mint)}

.result__title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(32px,4vw,48px); line-height:.85; margin:16px 0 20px;
}

.meta{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px; margin:0 0 20px;
}
.meta div{
  background:var(--mist); border:1px solid #000; border-radius:var(--r-tag);
  padding:12px;
}
.meta dt{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.032em;
  margin-bottom:4px; color:#333;
}
.meta dd{margin:0; font-size:14px; font-weight:500; word-break:break-all}

.field{display:block}
.field__label{
  display:block; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.032em; margin-bottom:8px;
}
.copyrow{display:flex; gap:8px}
.copyrow input{
  flex:1; min-width:0;
  border:1px solid #000; border-radius:var(--r-pill);
  padding:12px 16px; font-size:13px; font-family:ui-monospace,monospace;
  background:var(--sky);
}
.copyrow .btn-ghost{flex-shrink:0}

.sig{
  margin:16px 0 0; padding:12px; border:1px solid #000;
  border-radius:var(--r-tag); background:var(--lavender);
  font-size:12px; word-break:break-all;
}
.sig span{
  display:block; font-weight:700; text-transform:uppercase;
  letter-spacing:.032em; font-size:10px; margin-bottom:4px;
}
.hint{font-size:12px; color:#333; margin:12px 0 0}

/* ---------- How-to grid ---------- */
.grid3{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
}
.card{
  background:#fff; border:1px solid #000; border-radius:var(--r-card);
  padding:24px;
}
.card__num{
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:16px; border:1px solid #000;
  font-family:var(--font-display); font-weight:700; font-size:22px;
  margin-bottom:16px;
}
.card h3{
  font-family:var(--font-display); font-weight:700;
  font-size:32px; line-height:.9; margin-bottom:8px;
}
.card p{margin:0; font-size:14px; line-height:1.5}

/* ---------- Footer ---------- */
.footer{
  background:#000; color:#fff; text-align:center;
  padding:24px; font-size:12px; letter-spacing:.032em; text-transform:uppercase;
}
.footer p{margin:0}

/* ---------- Message page ---------- */
.msgpage{min-height:100vh; background:var(--sky)}
.msgwrap{display:grid; place-items:center; padding:60px 24px; min-height:60vh}
.msgcard{
  background:#fff; border:1px solid #000; border-radius:var(--r-card-lg);
  padding:40px; max-width:560px; text-align:left;
}
.msgcode{
  font-size:12px; font-weight:700; letter-spacing:.032em;
  text-transform:uppercase; margin:16px 0 8px;
}
.msgtitle{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(40px,7vw,72px); line-height:.82; margin:0 0 16px;
}
.msgtext{font-size:15px; margin:0 0 24px; line-height:1.5}

/* ---------- Responsive ---------- */
@media (max-width:720px){
  .nav__links{display:none}
  .sticker--sun,.sticker--violet{display:none}
  .ribbon--a{right:-40%}
  .section{padding:60px 16px}
  .hero{padding:40px 16px 60px}
}