:root{--font-heading:"Anton","Impact","Oswald","Arial Black",sans-serif;--font-body:"Avenir Next","Trebuchet MS","Segoe UI Variable Text","Noto Sans",sans-serif;--bg-base:#0d1117;--bg-accent:#1f2937;--card:rgba(14,21,31,0.84);--card-border:rgba(255,255,255,0.16);--text-main:#f8fafc;--text-muted:#c1c9d5;--brand-hot:#ff8f2e;--brand-cold:#4dc0ff;--danger:#ff6a6a}*{box-sizing:border-box}body,html{margin:0;min-height:100%}body{font-family:var(--font-body),sans-serif;color:var(--text-main);background:radial-gradient(circle at 10% 20%,rgba(255,143,46,.22),transparent 35%),radial-gradient(circle at 85% 15%,rgba(77,192,255,.2),transparent 42%),linear-gradient(160deg,var(--bg-base) 5%,var(--bg-accent) 100%);overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 0),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 0);background-size:42px 42px;opacity:.25}.main-shell{width:min(1120px,calc(100% - 2rem));margin:0 auto;padding:2rem 0 4rem;display:grid;grid-gap:1.3rem;gap:1.3rem}.hero-panel,.result-panel,.status-panel{background:var(--card);border:1px solid var(--card-border);border-radius:24px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 25px 65px rgba(0,0,0,.35)}.hero-panel{padding:1.5rem}.logo-row{display:flex;align-items:center;gap:.9rem}.logo-mark{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;font-size:1.9rem;letter-spacing:.02em;color:#151515;background:linear-gradient(140deg,var(--brand-hot),#facc15)}.logo-mark,.logo-text span{font-family:var(--font-heading),sans-serif}.logo-text span{display:block;font-size:clamp(1.7rem,4vw,2.15rem);letter-spacing:.03em}.logo-text small{color:var(--text-muted);font-size:.82rem;letter-spacing:.05em;text-transform:uppercase}.hero-title{margin:1rem 0 .6rem;max-width:20ch;font-family:var(--font-heading),sans-serif;font-size:clamp(1.9rem,5vw,3.1rem);line-height:1;letter-spacing:.01em;display:grid;grid-gap:.25rem;gap:.25rem}.hero-title-accent{background:linear-gradient(120deg,#facc15,#ff8f2e 55%,#4dc0ff);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy{margin:0;max-width:62ch;color:var(--text-muted);line-height:1.6}.roast-form{display:grid;grid-gap:.7rem;gap:.7rem;margin-top:1.1rem}.url-input{width:100%;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(9,13,20,.62);color:var(--text-main);font-size:1rem;line-height:1.3;padding:.95rem 1rem}.url-input:focus{border-color:var(--brand-cold);outline:2px solid rgba(77,192,255,.24);outline-offset:1px}.roast-button{border:0;border-radius:12px;cursor:pointer;font-family:var(--font-heading),sans-serif;font-size:1.4rem;letter-spacing:.03em;padding:.7rem 1rem;color:#111827;background:linear-gradient(145deg,#facc15,#ff8f2e 55%,#f97316);transition:transform .16s ease,box-shadow .16s ease}.roast-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 15px 30px rgba(249,115,22,.28)}.roast-button:disabled{cursor:wait;opacity:.78}.status-panel{padding:1rem 1.2rem}.status-panel h2{margin:0;font-family:var(--font-heading),sans-serif;font-size:1.6rem;letter-spacing:.03em}.status-panel p{margin:.45rem 0 0}.status-panel.error{border-color:rgba(255,106,106,.45);background:rgba(45,14,20,.74)}.result-panel{padding:1.4rem;display:grid;grid-gap:1rem;gap:1rem}.result-header{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.result-kicker{margin:0;color:var(--brand-cold);text-transform:uppercase;letter-spacing:.08em;font-size:.75rem}.result-header h2{margin:.35rem 0 0;font-family:var(--font-heading),sans-serif;font-size:clamp(1.6rem,5vw,2.5rem);line-height:1}.result-header a{color:#fdba74;text-decoration:none;font-weight:600;padding-top:.2rem}.result-header a:hover{text-decoration:underline}.roast-card{border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:1rem;background:rgba(8,11,17,.65)}.roast-card h3{margin:0 0 .65rem;font-family:var(--font-heading),sans-serif;font-size:1.45rem;letter-spacing:.03em}.roast-card p{margin:0;white-space:pre-wrap;line-height:1.62;color:#e2e8f0}.shots-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:.45rem;gap:.45rem}.shot-frame{margin:0;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.15);aspect-ratio:16/9;background:rgba(8,11,17,.85)}.shot-frame img{width:100%;height:100%;object-fit:cover;display:block}.promo-card{margin-top:.4rem;border:1px solid rgba(250,204,21,.35);border-radius:18px;padding:1rem;background:radial-gradient(circle at 18% 20%,rgba(250,204,21,.14),transparent 44%),radial-gradient(circle at 80% 80%,rgba(249,115,22,.16),transparent 46%),rgba(11,15,23,.88)}.promo-kicker{margin:0;color:#facc15;text-transform:uppercase;letter-spacing:.08em;font-size:.73rem}.promo-card h3{margin:.35rem 0 .8rem;font-family:var(--font-heading),sans-serif;font-size:clamp(1.4rem,4vw,2rem);line-height:1}.promo-banner,.promo-hero{margin:0;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.2)}.promo-banner img,.promo-hero img{width:100%;height:auto;display:block}.promo-content{display:grid;grid-gap:.8rem;gap:.8rem;margin-top:.8rem}.promo-copy{display:grid;grid-gap:.75rem;gap:.75rem}.promo-copy p{margin:0;color:#d8e0ec;line-height:1.58}.promo-copy a{width:-moz-fit-content;width:fit-content;border-radius:10px;padding:.65rem .95rem;font-family:var(--font-heading),sans-serif;font-size:1.1rem;letter-spacing:.03em;text-decoration:none;color:#111827;background:linear-gradient(140deg,#facc15,#f97316)}.promo-copy a:hover{filter:brightness(1.05)}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}.reveal{animation:rise-in .72s cubic-bezier(.2,.8,.25,1) both}.reveal-delay-1{animation-delay:80ms}.reveal-delay-2{animation-delay:.15s}@keyframes rise-in{0%{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}@media (min-width:840px){.hero-panel{padding:2.2rem}.roast-form{grid-template-columns:1fr auto;align-items:center}.roast-card{padding:1.25rem}.promo-card{padding:1.2rem}.promo-content{grid-template-columns:320px 1fr;align-items:center;gap:1rem}}