:root{
  --primary: 262 83% 58%;
  --primary-foreground: 0 0% 100%;
  --accent: 12 88% 59%;
  --bg: 0 0% 100%;
  --surface: 240 20% 98%;
  --fg: 222 47% 11%;
  --muted: 222 15% 45%;
  --border: 222 15% 90%;
  --radius: 14px;
  --shadow: 0 8px 30px hsl(222 47% 11% / .08);
  --gradient: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:hsl(var(--fg));background:hsl(var(--bg));line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:700;line-height:1.2;letter-spacing:-0.02em}
h1{font-size:clamp(2rem,5vw,3.5rem)}
h2{font-size:clamp(1.5rem,3.5vw,2.25rem);margin-bottom:1rem}
h3{font-size:1.25rem;margin-bottom:.5rem}
a{color:hsl(var(--primary));text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 1.25rem}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:hsl(var(--bg)/.95);backdrop-filter:blur(10px);border-bottom:1px solid hsl(var(--border))}
.nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;gap:1rem}
.logo{font-family:'Fraunces',serif;font-size:1.4rem;font-weight:700;color:hsl(var(--fg));display:flex;align-items:center;gap:.4rem;text-decoration:none}
.logo-mark{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.6rem}
.site-header nav ul{display:flex;list-style:none;gap:.25rem;align-items:center}
.site-header nav a{padding:.5rem .9rem;border-radius:8px;color:hsl(var(--fg));font-weight:500;font-size:.95rem;text-decoration:none;transition:background .2s}
.site-header nav a:hover,.site-header nav a.active{background:hsl(var(--surface));color:hsl(var(--primary))}
.nav-toggle{display:none;background:none;border:0;font-size:1.6rem;cursor:pointer;color:hsl(var(--fg))}
@media(max-width:860px){
  .site-header nav{display:none;position:absolute;top:100%;left:0;right:0;background:hsl(var(--bg));border-bottom:1px solid hsl(var(--border))}
  .site-header nav.open{display:block}
  .site-header nav ul{flex-direction:column;padding:1rem;align-items:stretch}
  .nav-toggle{display:block}
}

/* Hero */
.hero{padding:4rem 0 3rem;text-align:center;background:radial-gradient(ellipse at top, hsl(var(--primary)/.08), transparent 60%)}
.hero p.lead{font-size:1.15rem;color:hsl(var(--muted));max-width:640px;margin:1rem auto 2rem}
.platform-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.5rem}
.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem;background:hsl(var(--surface));border:1px solid hsl(var(--border));border-radius:999px;font-size:.85rem;color:hsl(var(--muted))}

/* Downloader form */
.downloader{max-width:720px;margin:0 auto;padding:.5rem;background:white;border-radius:var(--radius);box-shadow:var(--shadow);display:flex;gap:.5rem;flex-wrap:wrap}
.downloader input[type=url]{flex:1;min-width:200px;padding:1rem 1.1rem;border:0;border-radius:10px;font-size:1rem;font-family:inherit;background:transparent;outline:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem 1.75rem;border:0;border-radius:10px;font-weight:600;font-size:1rem;cursor:pointer;font-family:inherit;text-decoration:none;transition:transform .15s,box-shadow .15s}
.btn-primary{background:var(--gradient);color:white;box-shadow:0 4px 14px hsl(var(--primary)/.3)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px hsl(var(--primary)/.4);text-decoration:none;color:white}
.btn-ghost{background:hsl(var(--surface));color:hsl(var(--fg))}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}

/* Sections */
section.section{padding:3.5rem 0}
section.section.alt{background:hsl(var(--surface))}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
@media(max-width:860px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}.grid-2{grid-template-columns:1fr}}
@media(max-width:540px){.grid-3,.grid-4{grid-template-columns:1fr}}

.card{background:white;border:1px solid hsl(var(--border));border-radius:var(--radius);padding:1.5rem;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card .icon{width:46px;height:46px;border-radius:12px;background:var(--gradient);color:white;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1rem}
.muted{color:hsl(var(--muted))}
.section-head{text-align:center;max-width:680px;margin:0 auto 2.5rem}
.section-head p{color:hsl(var(--muted));font-size:1.05rem}

/* Steps */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding:1.5rem 1.5rem 1.5rem 4rem;background:white;border-radius:var(--radius);border:1px solid hsl(var(--border))}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:1rem;top:1.25rem;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--gradient);color:white;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'Fraunces',serif}

/* FAQ */
.faq details{background:white;border:1px solid hsl(var(--border));border-radius:12px;padding:1rem 1.25rem;margin-bottom:.75rem}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::after{content:'+';font-size:1.5rem;color:hsl(var(--primary));transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:.75rem;color:hsl(var(--muted))}

/* Result panel */
#result{margin-top:1.5rem}
.result-card{background:white;border:1px solid hsl(var(--border));border-radius:var(--radius);padding:1.5rem;display:flex;gap:1.5rem;flex-wrap:wrap}
.result-card .thumb{width:200px;border-radius:10px;overflow:hidden;background:hsl(var(--surface));aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.result-card .thumb img{width:100%;height:100%;object-fit:cover}
.result-card .info{flex:1;min-width:240px}
.result-card .title{font-weight:600;margin-bottom:.5rem;font-family:'Fraunces',serif;font-size:1.15rem}
.formats{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.format-btn{padding:.6rem 1rem;border:1px solid hsl(var(--border));border-radius:8px;background:white;color:hsl(var(--fg));text-decoration:none;font-weight:500;font-size:.9rem;display:inline-flex;align-items:center;gap:.4rem;transition:all .15s}
.format-btn:hover{border-color:hsl(var(--primary));color:hsl(var(--primary));text-decoration:none}
.format-btn.primary{background:var(--gradient);color:white;border:0}
.format-btn.primary:hover{color:white;opacity:.9}
.error-msg{padding:1rem 1.25rem;background:hsl(0 80% 96%);border:1px solid hsl(0 80% 85%);color:hsl(0 70% 35%);border-radius:10px;margin-top:1rem}
.loading{display:inline-block;width:18px;height:18px;border:2.5px solid hsl(var(--primary)/.25);border-top-color:hsl(var(--primary));border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Ads */
.ad-slot{margin:2rem auto;text-align:center;max-width:100%;overflow:hidden;min-height:50px}
.ad-slot::before{content:'Advertisement';display:block;font-size:.7rem;color:hsl(var(--muted));text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem}
.ad-slot:empty{display:none}
.ad-slot:has(> *:empty){display:none}

/* Footer */
.site-footer{margin-top:4rem;background:hsl(var(--surface));padding:3rem 0 1.5rem;border-top:1px solid hsl(var(--border))}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
.site-footer h4{font-family:'Inter',sans-serif;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:hsl(var(--muted));margin-bottom:1rem;font-weight:600}
.site-footer ul{list-style:none}
.site-footer ul li{margin-bottom:.5rem}
.site-footer ul a{color:hsl(var(--fg));font-size:.95rem}
.copyright{padding-top:1.5rem;border-top:1px solid hsl(var(--border));text-align:center;color:hsl(var(--muted));font-size:.85rem}

/* Blog */
.post-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:860px){.post-list{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.post-list{grid-template-columns:1fr}}
.post-card{background:white;border:1px solid hsl(var(--border));border-radius:var(--radius);overflow:hidden;transition:transform .2s,box-shadow .2s}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.post-card .post-img{aspect-ratio:16/9;background:var(--gradient);display:flex;align-items:center;justify-content:center;color:white;font-family:'Fraunces',serif;font-size:1.5rem;padding:1rem;text-align:center}
.post-card .post-body{padding:1.25rem}
.post-card h3{margin-bottom:.5rem}
.post-card a{color:hsl(var(--fg))}
.post-card .meta{font-size:.8rem;color:hsl(var(--muted));margin-bottom:.5rem}
article.blog-post{max-width:760px;margin:0 auto;padding:2rem 0}
article.blog-post h2,article.blog-post h3{margin-top:2rem}
article.blog-post p{margin-bottom:1rem}
article.blog-post ul{margin:1rem 0 1rem 1.5rem}
.breadcrumb{font-size:.85rem;color:hsl(var(--muted));margin-bottom:1rem}
.breadcrumb a{color:hsl(var(--muted))}