/* Basic reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:var(--font-body);color:var(--color-text-primary);background:var(--color-bg);}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* Header */
.site-header{position:sticky;top:0;background:var(--color-surface);border-bottom:1px solid var(--color-border);z-index:20}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:700;font-family:var(--font-heading);font-size:20px}
.nav{display:flex;align-items:center;gap:32px}
.nav-group{display:flex;align-items:center;gap:20px}
.nav-label{font-size:12px;font-weight:700;text-transform:uppercase;color:var(--color-text-secondary);letter-spacing:0.5px;margin-right:4px}
.nav a{color:var(--color-text-secondary);font-weight:500;transition:color 200ms ease;font-size:14px}
.nav a:hover{color:var(--color-primary)}
.nav a:focus{outline:2px solid rgba(230,57,70,0.2);outline-offset:2px;border-radius:2px}
.menu-toggle{display:none;background:none;border:0;font-size:20px}

/* Dark mode toggle */
.dark-mode-toggle {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 7px 13px;
  margin-left: 18px;
  font-size: 18px;
  cursor: pointer;
  color: var(--color-text-primary);
  transition: background 0.2s, color 0.2s, border 0.2s;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
}
.dark-mode-toggle:hover, .dark-mode-toggle:focus {
  background: var(--color-bg);
  color: var(--color-primary);
  outline: none;
}
.toggle-icon { pointer-events: none; }

/* Mobile drawer */

/* Guides Dropdown */
.guides-group { position: relative; margin-left: 32px; }
.guides-dropdown { display: flex; align-items: center; gap: 12px; }
.guide-link { display: flex; align-items: center; gap: 6px; color: var(--color-text-secondary); font-weight: 500; font-size: 14px; transition: color 200ms ease; padding: 2px 8px; border-radius: 6px; }
.guide-link:hover, .guide-link:focus { color: var(--color-primary); background: var(--color-surface); text-decoration: none; outline: none; }
.guide-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 2px; }
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);opacity:0;pointer-events:none;transition:opacity 200ms ease;z-index:25}
.drawer-overlay.active{opacity:1;pointer-events:auto}
.mobile-drawer{position:fixed;top:0;right:0;width:320px;max-width:80%;height:100vh;background:var(--color-surface);box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform 250ms ease;z-index:30;padding:20px;display:flex;flex-direction:column;gap:12px}
.mobile-drawer[aria-hidden="false"],.mobile-drawer.open{transform:translateX(0)}
.drawer-close{background:none;border:0;font-size:28px;align-self:flex-end}
.mobile-nav a{display:block;padding:12px 0;border-bottom:1px solid var(--color-border);color:var(--color-text-primary);font-weight:600}
.mobile-nav-section{margin-bottom:16px}
.mobile-nav-section:last-child{margin-bottom:0}
.mobile-nav-title{font-size:12px;font-weight:700;text-transform:uppercase;color:var(--color-text-secondary);letter-spacing:0.5px;margin-bottom:12px;padding:8px 0;margin-top:4px}
.mobile-nav-section a{display:block;padding:12px 0;border-bottom:1px solid var(--color-border);color:var(--color-text-primary);font-weight:600;font-size:15px}
.mobile-nav-section a:last-child{border-bottom:none}

/* Hero */
.hero{padding:80px 0;background:var(--color-surface)}
.hero-inner{text-align:center}
.hero h1{font-family:var(--font-heading);font-size:52px;line-height:1.25;margin-bottom:16px;font-weight:700;letter-spacing:-0.5px}
.subhead{color:var(--color-text-secondary);font-size:18px;margin-bottom:32px;line-height:1.5;font-weight:500}

/* URL input */
.url-form{display:flex;flex-direction:column;align-items:center;gap:8px}
.input-group{display:flex;width:90%;max-width:700px;background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-md);overflow:hidden;border:1px solid var(--color-border);transition:box-shadow 200ms ease}
.input-group input{flex:1;padding:16px 18px;border:0;font-size:16px;outline:none;font-weight:500;background:var(--color-surface);color:var(--color-text-primary);}
.input-group input:focus{outline:none}
.input-group:focus-within{box-shadow:0 4px 16px rgba(230,57,70,0.32);border-color:rgba(230,57,70,0.5)}
.input-group button{background:var(--color-primary);color:#fff;border:0;padding:0 24px;display:flex;align-items:center;justify-content:center;font-weight:700;min-width:140px;cursor:pointer;transition:background-color 200ms ease,transform 150ms ease;font-size:15px}
.input-group button:hover:not(:disabled){background:#D62828;transform:translateY(-1px)}
.input-group button:active:not(:disabled){transform:translateY(0)}
.input-group button:disabled{opacity:0.5;cursor:not-allowed}
.btn-text{display:inline-block}
.spinner{width:18px;height:18px;display:none}
.input-group button.loading .spinner{display:inline-block;animation:spin 1s linear infinite}
.input-group button.loading .btn-text{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

.input-help{color:var(--color-text-secondary);font-size:13px;margin-top:8px;font-weight:500}
.input-error{color:#B91C1C;font-size:13px;margin-top:6px}

/* Result panel */
.result-panel{margin-top:20px;display:flex;gap:16px;align-items:flex-start;max-width:900px;margin-left:auto;margin-right:auto;background:var(--color-surface);border-radius:12px;padding:16px;border:1px solid var(--color-border);box-shadow:0 2px 12px rgba(0,0,0,0.18);opacity:0;transform:translateY(-6px);transition:opacity 300ms ease,transform 300ms ease;pointer-events:none}
.result-panel.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.thumbnail{width:280px;height:157px;background:linear-gradient(90deg,#e2e8f0,#cbd5e1);border-radius:8px;flex-shrink:0}
.meta{flex:1}
.meta h3{font-size:18px;margin-bottom:6px}
.meta p{color:var(--color-text-secondary);font-size:14px;margin-bottom:12px}
.qualities{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.quality{background:var(--color-surface);border:1px solid var(--color-border);padding:8px 12px;border-radius:999px;font-weight:600;color:var(--color-text-primary)}
.quality.active{background:var(--color-primary);color:#fff;border-color:transparent}
.download-btn{display:inline-block;background:var(--color-primary);color:#fff;padding:12px 16px;border-radius:8px;font-weight:700}

/* Sections */
.section-title{font-family:var(--font-heading);font-size:32px;margin-bottom:24px;text-align:center;font-weight:700}
.platforms-section{padding:48px 0}
.platform-chips{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center;margin:0 auto;background:transparent}
.chip{background:var(--color-surface);border:1px solid var(--color-border);padding:10px 16px;border-radius:999px;font-weight:600;color:var(--color-text-primary);display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;cursor:pointer;transition:background-color 200ms ease,box-shadow 150ms ease,transform 150ms ease;font-size:14px;text-decoration:none}
.chip:hover{background:#E5E7EB;box-shadow:var(--shadow-md);transform:translateY(-2px)}
.chip:active{transform:translateY(0)}
.chip:focus{outline:2px solid rgba(230,57,70,0.2);outline-offset:2px}
.chip-icon{width:20px;height:20px;display:block;flex-shrink:0}
.how-it-works{padding:64px 0;background:transparent}
.steps-grid{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}
.step{background:var(--color-surface);padding:20px;border-radius:12px;text-align:center;flex:0 0 240px;box-sizing:border-box;box-shadow:0 2px 12px rgba(0,0,0,0.18);}
.step-number{font-size:56px;color:rgba(230,57,70,0.14);font-weight:900;margin-bottom:12px;line-height:1}
.step h3{font-size:18px;font-weight:700;margin-bottom:10px;color:var(--color-text-primary)}
.step p{color:var(--color-text-secondary);font-size:14px;line-height:1.6}
.connector{flex:0 0 56px;display:flex;align-items:center;justify-content:center}
.connector-line{display:block;width:100%;height:4px;background:linear-gradient(90deg,rgba(0,0,0,0.06),transparent);border-radius:2px}

/* Input success state (check) */
.input-success{width:34px;height:34px;border-radius:999px;background:var(--color-surface);color:#059669;display:inline-flex;align-items:center;justify-content:center;margin-left:8px;transform:scale(0);transition:transform 180ms ease;flex:0 0 auto}
.input-success.show{transform:scale(1)}

/* Features */
.features-section{padding:64px 0}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature-card{background:var(--color-surface);border:1px solid var(--color-border);padding:28px 24px;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,0.18);text-align:left}
.feature-card h3{font-size:18px;font-weight:700;margin-bottom:8px;color:var(--color-text-primary)}
.feature-card p{font-size:14px;color:var(--color-text-secondary);line-height:1.6}
.feature-icon{font-size:44px;color:var(--color-primary);margin-bottom:16px}

/* FAQ */
.faq-section{padding:64px 0}
.faq-list{max-width:800px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--color-border);padding:18px 0;background:var(--color-surface);box-shadow:0 2px 12px rgba(0,0,0,0.10);}
.faq-question{width:100%;text-align:left;background:none;border:0;padding:8px 0;font-size:16px;font-weight:700;display:flex;justify-content:space-between;align-items:center;cursor:pointer;color:var(--color-text-primary);}
.faq-question:hover:not([aria-expanded="true"]){color:var(--color-primary)}
.faq-question:focus{outline:2px solid rgba(230,57,70,0.2);outline-offset:2px}
.faq-question::after{content:'+';font-weight:700;color:var(--color-text-secondary);margin-left:12px;display:inline-block;transition:transform 220ms ease,color 220ms ease;transform-origin:center;font-size:22px}
.faq-question[aria-expanded="true"]::after{transform:rotate(45deg);color:var(--color-primary)}
.faq-answer{padding:12px 0;color:var(--color-text-secondary);max-height:0;overflow:hidden;opacity:0;transform:translateY(-6px);transition:max-height 300ms ease,opacity 220ms ease,transform 220ms ease;font-size:14px;line-height:1.6;background:var(--color-surface);box-shadow:0 2px 12px rgba(0,0,0,0.10);}
.faq-question[aria-expanded="true"] + .faq-answer{max-height:500px;opacity:1;transform:translateY(0)}

/* Footer */
.site-footer{margin-top:80px;padding:64px 0 40px;background:var(--color-footer-bg);color:#fff}
.footer-inner{display:block}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;align-items:start;padding-bottom:24px}
.footer-grid .logo{color:#fff;font-size:22px;font-weight:700}
.tagline{color:rgba(255,255,255,0.8);margin-top:10px;font-size:13px;line-height:1.6}
.footer-grid h4{color:#fff;margin-bottom:12px;font-size:16px;font-weight:700}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{margin-bottom:8px}
.footer-grid a{color:rgba(255,255,255,0.85);transition:color 200ms ease;font-size:13px}
.footer-grid a:hover{color:#fff}
.footer-bottom{text-align:center;color:rgba(255,255,255,0.65);padding-top:20px;border-top:1px solid rgba(255,255,255,0.08);margin-top:20px;font-size:13px}

/* Footer Guides */
.guides-col h4 { color: #fff; margin-bottom: 12px; font-size: 16px; font-weight: 700; }
.footer-guides { list-style: none; padding: 0; margin: 0; }
.footer-guides li { margin-bottom: 8px; }
.footer-guides .guide-link { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,0.85); font-weight: 500; font-size: 14px; transition: color 200ms ease; }
.footer-guides .guide-link:hover { color: #fff; text-decoration: underline; }
.footer-guides .guide-icon { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 2px; }

/* Skip link & sr-only-focusable */
.skip-link{position:absolute;left:8px;top:8px;background:#111827;color:#fff;padding:8px 12px;border-radius:6px;transform:translateY(-120%);transition:transform 160ms ease;z-index:60}
.sr-only-focusable:focus,.sr-only-focusable:active{transform:translateY(0)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Interaction enhancements */
.feature-card{transition:transform 180ms ease,box-shadow 180ms ease}
.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.chip{transition:transform 150ms ease,box-shadow 150ms ease}
.chip:focus{outline:2px solid rgba(37,99,235,0.14);outline-offset:3px}
.quality{cursor:pointer}
.quality:focus{outline:2px solid rgba(37,99,235,0.12);outline-offset:3px}

/* Tablet breakpoint */
@media (max-width:900px){
  .header-inner{height:56px}
  .logo{font-size:18px}
  .nav{flex-wrap:wrap;gap:16px;font-size:13px}
  .nav-group{gap:12px}
  .nav-label{font-size:11px}
  .nav a{font-size:13px}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .steps-grid{gap:16px}
  .step{flex:0 0 200px;padding:16px}
  .step-number{font-size:48px}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .container{padding:0 20px}
  .section-title{font-size:28px}
  .subhead{font-size:16px}
}

/* Mobile breakpoint */
@media (max-width:640px){
  .container{padding:0 16px}
  .header-inner{height:56px}
  .logo{font-size:18px}
  .nav{display:none}
  .nav-group{display:flex}
  .menu-toggle{display:block;font-size:24px;cursor:pointer}
  .hero h1{font-size:32px;line-height:1.2;margin-bottom:12px}
  .subhead{font-size:15px;margin-bottom:24px}
  .input-group{width:100%;flex-direction:column;padding:0;box-shadow:none;border:none}
  .input-group input{padding:14px 16px;border:1px solid var(--color-border);border-radius:8px;margin-bottom:8px;font-size:15px}
  .input-group button{width:100%;padding:14px 16px;border-radius:8px;min-width:auto}
  .input-success{order:1;margin:0;align-self:flex-start}
  .section-title{font-size:24px;margin-bottom:20px}
  .hero{padding:40px 0}
  .steps-grid{flex-direction:column;gap:20px;align-items:stretch}
  .step{flex:0 0 auto;width:100%;padding:16px;order:1}
  .step-number{font-size:40px;margin-bottom:8px}
  .connector{display:none;order:0}
  .features-grid{grid-template-columns:1fr;gap:16px}
  .feature-card{padding:20px 16px}
  .feature-icon{font-size:36px;margin-bottom:12px}
  .feature-card h3{font-size:16px}
  .feature-card p{font-size:13px}
  .platforms-section{padding:32px 0}
  .chip{padding:8px 12px;font-size:13px}
  .chip-icon{width:18px;height:18px}
  .faq-section{padding:40px 0}
  .faq-item{padding:14px 0}
  .faq-question{font-size:15px;padding:0}
  .faq-question::after{font-size:20px}
  .faq-answer{padding:10px 0;font-size:13px}
  .thumbnail{width:140px;height:80px}
  .result-panel{flex-direction:column;align-items:center;padding:12px;gap:12px}
  .meta h3{font-size:16px}
  .meta p{font-size:13px}
  .qualities{gap:6px}
  .quality{padding:6px 10px;font-size:12px}
  .download-actions .download-btn{width:100%;display:block;padding:12px 16px}
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .footer-grid .logo{font-size:18px}
  .footer-grid h4{font-size:14px;margin-bottom:10px}
  .footer-grid a{font-size:12px}
  .footer-bottom{font-size:12px;padding-top:16px}
}