/* ================================================================
   AiCruzz — Professional Design System v2
   Clean, refined, modern dark SaaS — like Vercel / Linear / Stripe
   ================================================================ */

@import url('https://fonts.bunny.net/css?family=inter:300,400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:           #0a0a0a;
  --bg-raised:    #111111;
  --bg-card:      #141414;
  --bg-hover:     #1c1c1c;
  --border:       rgba(255,255,255,0.08);
  --border-hover: rgba(255,255,255,0.15);
  --text:         #ebebeb;
  --text-2:       #a1a1a1;
  --text-3:       #666;
  --text-4:       #3d3d3d;
  --blue:         #3b82f6;
  --blue-hover:   #2563eb;
  --blue-muted:   rgba(59,130,246,0.1);
  --green:        #22c55e;
  --red:          #ef4444;
  --orange:       #f97316;
  --radius-sm:    6px;
  --radius:       10px;
  --radius-lg:    14px;
  --radius-xl:    20px;
  --font: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono: "JetBrains Mono","Fira Code","Courier New",monospace;
}

html { scroll-behavior:smooth; font-size:16px; }
body {
  background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; padding-top:60px;
}
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font-family:inherit; }
img { max-width:100%; display:block; }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#2a2a2a; border-radius:4px; }

/* ── LAYOUT ── */
.container { max-width:1120px; margin:0 auto; padding:0 32px; }
.section    { padding:80px 0; }
.section-sm { padding:48px 0; }

/* ── NAVBAR ── */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:200; height:60px;
  background:rgba(10,10,10,0.9); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border); display:flex; align-items:center;
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:1120px; margin:0 auto; padding:0 32px; }
.nav-logo { font-size:17px; font-weight:700; letter-spacing:-0.3px; color:var(--text); cursor:pointer; }
.nav-logo span { color:var(--blue); }
.nav-links { display:flex; align-items:center; }
.nav-link { font-size:14px; color:var(--text-3); padding:6px 13px; border-radius:var(--radius-sm); transition:color .15s,background .15s; cursor:pointer; }
.nav-link:hover { color:var(--text); background:rgba(255,255,255,0.05); }
.nav-link.active { color:var(--text-2); }
.nav-actions { display:flex; gap:8px; align-items:center; }
.btn-ghost { background:transparent; color:var(--text-3); border:1px solid var(--border); padding:7px 15px; border-radius:var(--radius-sm); font-size:13px; font-weight:500; cursor:pointer; transition:all .15s; }
.btn-ghost:hover { color:var(--text); border-color:var(--border-hover); background:var(--bg-hover); }
.btn-solid { background:var(--text); color:var(--bg); border:none; padding:8px 17px; border-radius:var(--radius-sm); font-size:13px; font-weight:600; cursor:pointer; transition:background .15s; }
.btn-solid:hover { background:#cfcfcf; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.hamburger span { width:20px; height:1.5px; background:var(--text-3); transition:.3s; }
.mobile-menu { display:none; position:fixed; top:60px; left:0; right:0; background:var(--bg-raised); border-bottom:1px solid var(--border); padding:10px 14px; z-index:199; flex-direction:column; gap:2px; }
.mobile-menu.open { display:flex; }
.mobile-link { padding:10px 13px; font-size:14px; color:var(--text-2); border-radius:var(--radius-sm); transition:all .15s; }
.mobile-link:hover { background:var(--bg-hover); color:var(--text); }

/* ── BUTTONS ── */
.btn-primary { background:var(--blue); color:#fff; border:none; padding:11px 22px; border-radius:var(--radius-sm); font-size:14px; font-weight:600; cursor:pointer; transition:background .15s,transform .1s; display:inline-flex; align-items:center; gap:7px; }
.btn-primary:hover { background:var(--blue-hover); transform:translateY(-1px); }
.btn-secondary { background:transparent; color:var(--text); border:1px solid var(--border-hover); padding:11px 22px; border-radius:var(--radius-sm); font-size:14px; font-weight:500; cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; gap:7px; }
.btn-secondary:hover { background:var(--bg-hover); }
.btn-outline { background:transparent; color:var(--text-2); border:1px solid var(--border); padding:7px 14px; border-radius:var(--radius-sm); font-size:13px; font-weight:500; cursor:pointer; transition:all .15s; }
.btn-outline:hover { color:var(--text); border-color:var(--border-hover); background:var(--bg-hover); }
.btn-sm { padding:6px 13px !important; font-size:13px !important; }
.btn-full { width:100%; justify-content:center; }

/* ── HERO ── */
.hero {
  min-height:calc(100vh - 60px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:60px 32px 80px; text-align:center; position:relative; overflow:hidden;
}
.hero::before { content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06) 30%,rgba(255,255,255,0.06) 70%,transparent); }
.hero-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:500; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-3); margin-bottom:28px; }
.hero-eyebrow-dot { width:5px; height:5px; border-radius:50%; background:var(--green); flex-shrink:0; }
.hero-title { font-size:clamp(34px,5vw,64px); font-weight:700; line-height:1.1; letter-spacing:-0.03em; color:var(--text); margin-bottom:18px; max-width:760px; }
.hero-title em { font-style:normal; color:var(--text-3); font-weight:400; }
.hero-sub { font-size:16px; font-weight:400; color:var(--text-2); line-height:1.75; max-width:480px; margin:0 auto 38px; }
.hero-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:60px; }
.hero-proof { display:flex; align-items:center; gap:40px; padding-top:28px; border-top:1px solid var(--border); flex-wrap:wrap; justify-content:center; }
.hero-proof-num { font-size:20px; font-weight:700; letter-spacing:-0.02em; color:var(--text); }
.hero-proof-lbl { font-size:12px; color:var(--text-3); margin-top:2px; }

/* ── SECTION HEADER ── */
.label { display:inline-block; font-size:11px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-4); margin-bottom:12px; }
.section-title { font-size:clamp(22px,2.8vw,36px); font-weight:700; letter-spacing:-0.025em; line-height:1.18; color:var(--text); margin-bottom:12px; }
.section-desc { font-size:15px; color:var(--text-2); line-height:1.7; max-width:460px; }

/* ── CARDS ── */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; transition:border-color .2s,background .2s; }
.card:hover { border-color:var(--border-hover); background:var(--bg-hover); }
.card-icon { width:38px; height:38px; border-radius:var(--radius); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:17px; margin-bottom:14px; background:var(--bg-raised); }
.card-title { font-size:15px; font-weight:600; color:var(--text); margin-bottom:7px; }
.card-desc  { font-size:13px; color:var(--text-2); line-height:1.65; }
.card-link  { font-size:13px; color:var(--blue); margin-top:12px; display:inline-block; }
.card-link:hover { text-decoration:underline; }

/* ── PRICING ── */
.price-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xl); padding:26px; position:relative; transition:border-color .2s; }
.price-card:hover { border-color:var(--border-hover); }
.price-card.featured { background:var(--bg-raised); border-color:rgba(255,255,255,0.13); }
.price-card.featured::after { content:"Most popular"; position:absolute; top:-1px; right:22px; background:var(--blue); color:#fff; font-size:11px; font-weight:600; letter-spacing:.03em; padding:4px 11px; border-radius:0 0 5px 5px; }
.price-tier   { font-size:12px; font-weight:600; color:var(--text-3); margin-bottom:10px; text-transform:uppercase; letter-spacing:.04em; }
.price-amount { font-size:38px; font-weight:700; letter-spacing:-0.03em; line-height:1; }
.price-amount sup { font-size:16px; vertical-align:super; font-weight:500; }
.price-period { font-size:12px; color:var(--text-4); margin:5px 0 18px; }
.price-divider { height:1px; background:var(--border); margin:18px 0; }
.price-feature { display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--text-2); margin-bottom:9px; line-height:1.5; }
.price-check { width:15px; height:15px; border-radius:50%; border:1px solid rgba(34,197,94,0.25); display:flex; align-items:center; justify-content:center; font-size:8px; color:var(--green); flex-shrink:0; margin-top:2px; }

/* ── VIDEO CARDS ── */
.video-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; transition:border-color .2s,transform .2s; }
.video-card:hover { border-color:var(--border-hover); transform:translateY(-2px); }
.video-thumb { height:140px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; font-size:38px; background:var(--bg-raised); }
.video-thumb-overlay { position:absolute; inset:0; background:rgba(0,0,0,0); display:flex; align-items:center; justify-content:center; transition:.2s; }
.video-card:hover .video-thumb-overlay { background:rgba(0,0,0,.5); }
.play-btn { width:38px; height:38px; border-radius:50%; background:var(--blue); display:flex; align-items:center; justify-content:center; font-size:13px; opacity:0; transform:scale(.8); transition:.2s; }
.video-card:hover .play-btn { opacity:1; transform:scale(1); }
.video-info { padding:13px; }
.video-title { font-size:13px; font-weight:500; color:var(--text); margin-bottom:5px; }
.video-meta { font-size:11px; color:var(--text-3); display:flex; gap:7px; flex-wrap:wrap; }
.badge { font-size:10px; padding:2px 7px; border-radius:4px; font-weight:500; }
.badge-cinematic { background:rgba(59,130,246,.1); color:#93c5fd; }
.badge-anime     { background:rgba(168,85,247,.1);  color:#c084fc; }
.badge-cartoon   { background:rgba(249,115,22,.1);  color:#fb923c; }
.badge-realistic { background:rgba(34,197,94,.1);   color:#86efac; }
.badge-avatar    { background:rgba(20,184,166,.1);   color:#5eead4; }
.badge-animation { background:rgba(234,179,8,.1);    color:#fde047; }

/* ── FORMS ── */
.form-group { margin-bottom:14px; }
.form-label { display:block; font-size:12px; font-weight:500; color:var(--text-2); margin-bottom:5px; }
.form-input { width:100%; background:var(--bg-raised); border:1px solid var(--border); color:var(--text); border-radius:var(--radius-sm); padding:9px 12px; font-size:14px; outline:none; transition:border .15s; }
.form-input:focus { border-color:rgba(255,255,255,.22); }
.form-input::placeholder { color:var(--text-4); }
.form-textarea { resize:vertical; min-height:100px; line-height:1.6; }
.form-select { appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23555' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; }

/* ── TOGGLE ── */
.toggle-row { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border); }
.toggle-row:last-child { border-bottom:none; }
.toggle { width:38px; height:21px; border-radius:999px; background:#2a2a2a; cursor:pointer; transition:.2s; position:relative; flex-shrink:0; }
.toggle.on { background:var(--blue); }
.toggle::after { content:""; width:15px; height:15px; border-radius:50%; background:#fff; position:absolute; top:3px; left:3px; transition:.2s; }
.toggle.on::after { left:20px; }

/* ── RANGE ── */
.range-wrapper { display:flex; align-items:center; gap:10px; }
input[type=range] { flex:1; accent-color:var(--blue); cursor:pointer; }
.range-val { font-size:13px; font-weight:600; min-width:38px; text-align:right; color:var(--text); }

/* ── STYLE GRID ── */
.style-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.style-btn { background:var(--bg-raised); border:1px solid var(--border); color:var(--text-3); padding:9px 6px; border-radius:var(--radius-sm); font-size:12px; font-weight:500; cursor:pointer; transition:all .15s; text-align:center; }
.style-btn:hover,.style-btn.active { border-color:var(--blue); color:var(--blue); background:var(--blue-muted); }

/* ── AUTH ── */
.auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.auth-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xl); padding:36px; width:100%; max-width:420px; }
.auth-title { font-size:22px; font-weight:700; text-align:center; margin-bottom:5px; }
.auth-sub   { text-align:center; color:var(--text-2); font-size:14px; margin-bottom:26px; }
.divider { text-align:center; color:var(--text-4); font-size:12px; margin:14px 0; position:relative; }
.divider::before,.divider::after { content:""; position:absolute; top:50%; width:calc(50% - 26px); height:1px; background:var(--border); }
.divider::before { left:0; } .divider::after { right:0; }
.social-btn { width:100%; padding:10px; background:var(--bg-raised); border:1px solid var(--border); color:var(--text-2); border-radius:var(--radius-sm); font-size:13px; cursor:pointer; transition:all .15s; margin-bottom:8px; }
.social-btn:hover { border-color:var(--border-hover); color:var(--text); }
.auth-footer { text-align:center; margin-top:16px; font-size:13px; color:var(--text-3); }
.auth-link   { color:var(--blue); cursor:pointer; }

/* ── DASHBOARD ── */
#sidebar { position:fixed; left:0; top:60px; bottom:0; width:224px; background:var(--bg-raised); border-right:1px solid var(--border); display:flex; flex-direction:column; z-index:100; overflow-y:auto; }
.sidebar-section { padding:14px 14px 4px; font-size:10px; font-weight:600; color:var(--text-4); text-transform:uppercase; letter-spacing:.08em; }
.sidebar-item { display:flex; align-items:center; gap:9px; padding:8px 11px; font-size:13px; color:var(--text-3); cursor:pointer; border-radius:var(--radius-sm); margin:1px 8px; transition:all .15s; text-decoration:none; }
.sidebar-item:hover { background:var(--bg-hover); color:var(--text-2); }
.sidebar-item.active { background:var(--bg-hover); color:var(--text); }
.sidebar-icon { font-size:14px; width:18px; text-align:center; flex-shrink:0; }
.sidebar-badge { margin-left:auto; font-size:10px; background:rgba(255,255,255,.06); color:var(--text-3); padding:2px 6px; border-radius:999px; font-weight:600; }
.sidebar-user { padding:13px; border-top:1px solid var(--border); margin-top:auto; }
.user-avatar-sm { width:30px; height:30px; border-radius:50%; background:var(--blue); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; flex-shrink:0; }
.dash-content { margin-left:224px; padding:30px; min-height:calc(100vh - 60px); }

/* ── STAT CARDS ── */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:26px; }
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; }
.stat-label { font-size:11px; color:var(--text-4); margin-bottom:7px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.stat-value { font-size:24px; font-weight:700; letter-spacing:-0.02em; }
.stat-change { font-size:12px; margin-top:4px; }
.stat-up { color:var(--green); } .stat-down { color:var(--red); } .stat-neutral { color:var(--text-3); }

/* ── PAGE HEADER ── */
.page-header { margin-bottom:26px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.page-header h1 { font-size:20px; font-weight:700; letter-spacing:-0.02em; margin-bottom:3px; }
.page-header p  { font-size:13px; color:var(--text-2); }
.breadcrumb { font-size:11px; color:var(--text-4); margin-bottom:5px; }
.breadcrumb a { color:var(--text-4); }
.breadcrumb a:hover { color:var(--text-3); }

/* ── PANEL ── */
.panel { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; }
.panel-title { font-size:14px; font-weight:600; margin-bottom:16px; display:flex; align-items:center; gap:8px; }

/* ── CREATE LAYOUT ── */
.create-layout { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.preview-box { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:7px; color:var(--text-3); font-size:13px; position:relative; overflow:hidden; }
.preview-icon-lg { font-size:40px; opacity:.2; margin-bottom:4px; }
.gen-overlay { position:absolute; inset:0; background:var(--bg); display:none; align-items:center; justify-content:center; flex-direction:column; gap:10px; z-index:10; }
.gen-overlay.show { display:flex; }
.gen-progress-track { width:190px; height:2px; background:var(--border); border-radius:2px; overflow:hidden; }
.gen-progress-fill  { height:100%; background:var(--blue); width:0; transition:width .3s; border-radius:2px; }

/* ── MISC ── */
.api-key-row { background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-sm); padding:11px 13px; display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.api-key-val { font-family:var(--mono); font-size:12px; color:#93c5fd; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.copy-btn { background:var(--bg-hover); border:none; color:var(--text-2); padding:5px 11px; border-radius:var(--radius-sm); font-size:11px; cursor:pointer; transition:all .15s; }
.copy-btn:hover { color:var(--text); }
.revoke-btn { background:rgba(239,68,68,.08); border:none; color:var(--red); padding:5px 11px; border-radius:var(--radius-sm); font-size:11px; cursor:pointer; }

.code-block { background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius); padding:18px; font-family:var(--mono); font-size:12px; line-height:1.75; overflow-x:auto; color:#e2e8f0; }
.tok-keyword { color:#c084fc; } .tok-string { color:#86efac; } .tok-comment { color:var(--text-4); } .tok-fn { color:#93c5fd; } .tok-num { color:#fde047; }

.usage-bar { height:3px; background:var(--border); border-radius:999px; overflow:hidden; margin-top:5px; }
.usage-fill { height:100%; background:var(--blue); border-radius:999px; }

.plan-highlight { background:var(--bg-raised); border:1px solid var(--border-hover); border-radius:var(--radius-xl); padding:22px; margin-bottom:18px; }

.tabs { display:flex; gap:2px; padding:3px; border-radius:var(--radius-sm); background:var(--bg-raised); border:1px solid var(--border); margin-bottom:18px; width:fit-content; }
.tab { padding:6px 15px; border-radius:4px; font-size:12px; cursor:pointer; color:var(--text-4); transition:all .15s; font-weight:500; white-space:nowrap; }
.tab.active { background:var(--bg-hover); color:var(--text-2); }
.tab:hover:not(.active) { color:var(--text-3); }

.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.video-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }

.chip { font-size:12px; padding:4px 11px; background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-3); cursor:pointer; transition:all .15s; display:inline-block; }
.chip:hover { border-color:var(--border-hover); color:var(--text-2); }

.tmpl-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; transition:all .2s; position:relative; }
.tmpl-card:hover { border-color:var(--border-hover); transform:translateY(-2px); }
.tmpl-thumb { height:140px; display:flex; align-items:center; justify-content:center; font-size:40px; background:var(--bg-raised); }
.tmpl-overlay { position:absolute; inset:0; background:rgba(0,0,0,.7); display:none; align-items:center; justify-content:center; }
.tmpl-card:hover .tmpl-overlay { display:flex; }
.tmpl-info { padding:13px; }
.tmpl-name { font-weight:600; font-size:13px; margin-bottom:3px; }
.tmpl-cat  { font-size:11px; color:var(--text-3); }

.blog-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; transition:all .2s; }
.blog-card:hover { border-color:var(--border-hover); transform:translateY(-2px); }
.blog-thumb { height:150px; display:flex; align-items:center; justify-content:center; font-size:38px; background:var(--bg-raised); }
.blog-body  { padding:18px; }
.blog-tag   { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--blue); margin-bottom:7px; }
.blog-title { font-size:15px; font-weight:600; margin-bottom:7px; line-height:1.4; color:var(--text); }
.blog-meta  { font-size:11px; color:var(--text-3); }

.upload-zone { background:var(--bg-raised); border:1.5px dashed var(--border); border-radius:var(--radius-lg); padding:36px; text-align:center; cursor:pointer; transition:all .2s; margin-bottom:16px; }
.upload-zone:hover,.upload-zone.drag { border-color:var(--blue); background:var(--blue-muted); }
.upload-zone input[type=file] { display:none; }

.testimonial-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px; }
.testimonial-text { font-size:14px; color:var(--text-2); line-height:1.75; margin-bottom:16px; }
.testimonial-author { display:flex; align-items:center; gap:10px; }
.testimonial-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex-shrink:0; }

.marquee-wrapper { overflow:hidden; margin:28px 0; -webkit-mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent); }
.marquee-track { display:flex; gap:10px; animation:marquee 30s linear infinite; width:max-content; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-item { background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 16px; white-space:nowrap; font-size:12px; color:var(--text-4); display:flex; align-items:center; gap:7px; }

.toast { position:fixed; bottom:22px; right:22px; background:var(--bg-raised); border:1px solid var(--border-hover); border-radius:var(--radius); padding:11px 16px; font-size:13px; display:none; align-items:center; gap:8px; z-index:9999; }
.toast.show { display:flex; }
.toast-success { border-left:3px solid var(--green); }
.toast-error   { border-left:3px solid var(--red); }

.file-info { display:none; background:rgba(34,197,94,.06); border:1px solid rgba(34,197,94,.2); border-radius:var(--radius-sm); padding:9px 13px; font-size:13px; color:var(--green); margin-bottom:13px; align-items:center; gap:8px; }
.file-info.show { display:flex; }

.editor-wrap { background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; }
.editor-topbar { padding:9px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.editor-screen { aspect-ratio:16/7; background:var(--bg); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.editor-controls { padding:10px 16px; border-top:1px solid var(--border); display:flex; align-items:center; gap:9px; }
.play-ctrl { width:34px; height:34px; border-radius:50%; background:var(--blue); border:none; color:#fff; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.timeline { background:var(--bg); border-top:1px solid var(--border); padding:11px 16px; }
.timeline-track { height:40px; background:var(--bg-raised); border-radius:var(--radius-sm); position:relative; overflow:hidden; margin-bottom:5px; cursor:pointer; border:1px solid var(--border); }
.timeline-segment { position:absolute; top:4px; bottom:4px; border-radius:4px; display:flex; align-items:center; padding:0 9px; font-size:11px; font-weight:600; cursor:grab; }
.seg-video   { background:rgba(59,130,246,.18); border:1px solid rgba(59,130,246,.28); color:#93c5fd; }
.seg-audio   { background:rgba(34,197,94,.13);  border:1px solid rgba(34,197,94,.22);  color:var(--green); }
.seg-caption { background:rgba(249,115,22,.13); border:1px solid rgba(249,115,22,.22); color:var(--orange); }
.playhead { position:absolute; top:0; bottom:0; width:1.5px; background:var(--blue); cursor:col-resize; }
.tool-btn { background:transparent; border:1px solid var(--border); color:var(--text-3); padding:5px 11px; border-radius:var(--radius-sm); font-size:12px; font-weight:500; cursor:pointer; transition:all .15s; font-family:inherit; white-space:nowrap; }
.tool-btn:hover { border-color:var(--border-hover); color:var(--text-2); }
.tool-btn.active { background:var(--bg-hover); border-color:var(--border-hover); color:var(--text); }

footer { background:var(--bg-raised); border-top:1px solid var(--border); padding:52px 0 0; margin-top:80px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; max-width:1120px; margin:0 auto; padding:0 32px; }
.footer-brand p { font-size:13px; color:var(--text-4); line-height:1.7; max-width:230px; margin-top:10px; }
.footer-col h4 { font-size:12px; font-weight:600; margin-bottom:13px; color:var(--text-2); text-transform:uppercase; letter-spacing:.04em; }
.footer-link { display:block; font-size:13px; color:var(--text-4); margin-bottom:8px; cursor:pointer; transition:color .15s; }
.footer-link:hover { color:var(--text-3); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding:18px 32px; border-top:1px solid var(--border); margin-top:36px; max-width:1120px; margin-left:auto; margin-right:auto; font-size:12px; color:var(--text-4); }

@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
.fade-in-up { animation:fadeUp .5s ease both; }
.delay-1{animation-delay:.08s} .delay-2{animation-delay:.16s} .delay-3{animation-delay:.24s} .delay-4{animation-delay:.32s}
.observe-fade { opacity:0; transform:translateY(12px); transition:opacity .5s ease,transform .5s ease; }
.observe-fade.visible { opacity:1; transform:translateY(0); }

.endpoint-row { background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 14px; margin-bottom:7px; display:flex; align-items:center; gap:10px; }
.method-badge { font-size:10px; font-weight:700; padding:3px 8px; border-radius:4px; font-family:var(--mono); flex-shrink:0; }
.method-post   { background:rgba(34,197,94,.12);  color:var(--green); }
.method-get    { background:rgba(59,130,246,.12); color:#93c5fd; }
.method-delete { background:rgba(239,68,68,.12);  color:var(--red); }

.compare-table { width:100%; border-collapse:collapse; font-size:13px; }
.compare-table th,.compare-table td { padding:12px 14px; border-bottom:1px solid var(--border); text-align:left; }
.compare-table th { color:var(--text-4); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; background:var(--bg-raised); }
.compare-table td:not(:first-child) { text-align:center; }
.compare-table tr:hover td { background:rgba(255,255,255,.02); }
.check-yes { color:var(--green); } .check-no { color:var(--text-4); }

.faq-item { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:8px; overflow:hidden; }
.faq-btn { width:100%; padding:16px 18px; background:none; border:none; color:var(--text); font-size:14px; font-weight:500; text-align:left; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-family:inherit; }
.faq-btn:hover { background:var(--bg-hover); }
.faq-icon { font-size:16px; color:var(--text-3); transition:transform .2s; flex-shrink:0; }
.faq-item.open .faq-icon { transform:rotate(45deg); }
.faq-content { max-height:0; overflow:hidden; transition:max-height .3s ease; padding:0 18px; }
.faq-item.open .faq-content { max-height:200px; padding-bottom:16px; }

@media(max-width:1024px) {
  .stat-grid,.grid-4{grid-template-columns:repeat(2,1fr)}
  .create-layout{grid-template-columns:1fr}
}
@media(max-width:768px) {
  .container,.nav-inner{padding:0 20px}
  .section{padding:52px 0}
  .hero{padding:40px 20px 56px}
  .nav-links{display:none}
  .hamburger{display:flex}
  #sidebar{transform:translateX(-100%);transition:.25s}
  #sidebar.open{transform:translateX(0)}
  .dash-content{margin-left:0;padding:18px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .style-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
  .footer-bottom{flex-direction:column;gap:7px;text-align:center}
  .hero-proof{gap:18px}
}
@media(max-width:480px) {
  .hero-actions{flex-direction:column;align-items:center}
  .auth-card{padding:24px 18px}
  .footer-grid{grid-template-columns:1fr}
  .hero-title{font-size:30px}
}