:root{
  --bg:#020617; --card:#020617; --alt:#0c1117; --line:#334155;
  --txt:#e6eef6; --muted:#9fb3c8; --accent:#2e82ff; --btn:#2e82ff;
}
*{box-sizing:border-box} html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--txt);font:14px/1.5 'Inter',system-ui,Segoe UI,Arial}
.container{max-width:1180px;margin:0 auto;padding:20px}

.h3 {display: block;font-size: 1.17em;margin-block-start: 1em;margin-block-end: 1em;margin-inline-start: 0px;margin-inline-end: 0px;font-weight: bold;unicode-bidi: isolate;}

/* Header */
.site-header{position:sticky;top:0;z-index:10;background:rgba(10,15,20,.85);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.brand .logo{font-weight:800;font-size:22px}.brand .logo span{color:var(--accent)}
.nav a{color:var(--muted);margin-left:14px;text-decoration:none}.nav a:hover{color:#fff}

/* Hero */
.hero{padding:36px 0}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:start}
.hero-copy h1{font-size:44px;line-height:1.1;margin:.2rem 0 1rem}.accent{color:var(--accent)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-top: 50px;}
.form label{display:block;margin-bottom:6px;color:var(--muted);font-size:14px}
.input-row{display:flex;gap:8px}
input[type=url],input[type=text]{flex:1;padding:12px 14px;border-radius:10px;border:1px solid #1c2733;background:#0f172a;color:#eaf2fa;outline:none}
.btn{padding:10px 14px;border-radius:10px;border:1px solid #213040;background:transparent;color:#fff;text-decoration:none;cursor:pointer}
.btn:hover{background:#182331}
.btn-ghost{background:var(--btn);border:1px solid #243447}
.btn-xl{padding:14px 20px;font-size:18px;border-radius:12px}
.muted{color:var(--muted);font-size:12px}

/* Preview */
.preview-box{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:#0f172a;overflow:hidden;min-height:340px}
.preview-box img,.preview-box video{max-width:100%;max-height:100%}
.btn.disabled,.btn-ghost.disabled{opacity:.45;pointer-events:none}
.banner{margin-top:12px;margin-left:12px;margin-bottom:12px;text-align: center;color:var(--muted);font-size:12px}


.btn[disabled]{opacity:.45; pointer-events:none;}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.thumbs img{width:100%;height:72px;object-fit:cover;border-radius:8px;opacity:.85;cursor:pointer;border:1px solid #1a2532}
.thumbs img:hover{opacity:1}



/* Sections */
.section{padding:36px 0}
.section.alt{background:var(--alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.feature{background:#0e151c;border:1px solid #1a2532;border-radius:12px;padding:14px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.price-card{background:#0e151c;border:1px solid #1a2532;border-radius:12px;padding:14px}
.price-card.featured{outline:2px solid var(--accent)}
.cta-grid{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:16px 0}
.footer-nav a{color:var(--muted);margin-left:12px;text-decoration:none}

/* Responsive */
@media (max-width: 980px){ .hero-grid{grid-template-columns:1fr} .features-grid{grid-template-columns:1fr 1fr} .pricing-grid{grid-template-columns:1fr} }
@media (max-width: 600px){ .features-grid{grid-template-columns:1fr} }
.btn.active, .btn-ghost.active {
  opacity: 1 !important; 
  pointer-events: auto !important; 
}