:root { color-scheme: light; --ink:#132238; --muted:#5f6d7d; --blue:#1746a2; --blue-dark:#10367e; --surface:#fff; --bg:#f3f6fb; --line:#d8e0eb; --success:#137752; --danger:#aa2432; --focus:#ffb000; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; } body { margin:0; background:linear-gradient(135deg,#f8faff 0%,#edf3fb 100%); color:var(--ink); min-height:100vh; }
a { color:var(--blue); } button,input { font:inherit; }.site-header { max-width:1160px; margin:auto; padding:28px 24px; display:flex; justify-content:space-between; align-items:center; }
.brand { color:var(--ink); font-weight:850; font-size:1.45rem; letter-spacing:-.04em; text-decoration:none; }.brand::before { content:"K"; display:inline-grid; place-items:center; background:var(--blue); color:white; width:2rem; height:2rem; border-radius:.6rem; margin-right:.5rem; font-size:1rem; }
.privacy-label,.muted { color:var(--muted); }.layout { width:min(1160px,calc(100% - 32px)); margin:28px auto 70px; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.82fr); gap:56px; align-items:start; }.intro { padding:42px 0; position:sticky; top:20px; }
.eyebrow { color:var(--blue); text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; font-weight:800; }.intro h1 { font-size:clamp(2.5rem,6vw,4.8rem); letter-spacing:-.055em; line-height:.98; margin:.25em 0; max-width:10ch; }.lead { font-size:1.18rem; line-height:1.65; max-width:42rem; color:#415066; }.benefits { padding:0; list-style:none; display:grid; gap:12px; }.benefits li::before { content:"✓"; color:var(--success); font-weight:900; margin-right:10px; }
.card { background:rgba(255,255,255,.96); border:1px solid rgba(216,224,235,.9); box-shadow:0 24px 70px rgba(23,70,162,.11); border-radius:24px; padding:32px; }.card h2 { margin-top:0; font-size:1.65rem; }.drop-zone { border:2px dashed #9eb2ce; border-radius:18px; padding:28px 18px; display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; cursor:pointer; background:#f9fbff; transition:.15s ease; }.drop-zone.dragover { border-color:var(--blue); background:#eef4ff; transform:translateY(-2px); }.drop-zone input { position:absolute; opacity:0; pointer-events:none; }.drop-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:#e7effe; color:var(--blue); font-size:1.5rem; font-weight:900; }.selected-file { color:var(--success); font-weight:750; margin-top:5px; word-break:break-word; }
fieldset { border:0; padding:0; margin:26px 0 18px; } legend { font-weight:800; margin-bottom:12px; }.check { display:flex; gap:11px; align-items:flex-start; margin:13px 0; line-height:1.4; }.check input { width:20px; height:20px; accent-color:var(--blue); flex:none; }.privacy-copy { font-size:.82rem; color:var(--muted); line-height:1.5; }.primary,.secondary { border:0; border-radius:12px; padding:14px 19px; font-weight:800; cursor:pointer; }.primary { width:100%; background:var(--blue); color:#fff; }.primary:hover { background:var(--blue-dark); }.secondary { background:#e9eff9; color:var(--blue-dark); }.link-button { border:0; background:transparent; color:var(--blue); text-decoration:underline; cursor:pointer; padding:10px 0; }.primary:disabled { opacity:.55; cursor:wait; } button:focus-visible,input:focus-visible,.drop-zone:focus-within,a:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.warning { padding:12px 14px; background:#fff5cf; color:#594600; border-radius:10px; margin:14px 0; }.error { color:var(--danger); font-weight:700; min-height:1.5em; }.progress-track { height:12px; background:#e5eaf1; border-radius:99px; overflow:hidden; margin:26px 0 10px; }.progress-track div { width:0; height:100%; background:linear-gradient(90deg,var(--blue),#4f8be8); transition:width .35s ease; }.progress-meta { display:flex; justify-content:space-between; gap:15px; align-items:start; }.progress-meta span { text-align:right; }.video-wait { display:flex; gap:12px; align-items:center; background:#f2f6fc; padding:14px; border-radius:12px; margin:24px 0; }.pulse { width:12px; height:12px; border-radius:50%; background:var(--blue); animation:pulse 1.4s infinite; flex:none; }@keyframes pulse { 50% { opacity:.35; transform:scale(.75); } }@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }
.success-mark { width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:#daf4e8; color:var(--success); font-size:1.7rem; font-weight:900; }.actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:26px 0; }.video-page { width:min(860px,calc(100% - 32px)); margin:48px auto; }.video-page .brand { display:inline-block; margin-bottom:28px; }.video-page video { display:block; width:100%; aspect-ratio:16/9; background:#07111f; border-radius:14px; margin:20px 0; }
footer { width:min(1160px,calc(100% - 32px)); margin:0 auto; padding:24px 0 38px; border-top:1px solid var(--line); display:flex; gap:24px; color:var(--muted); font-size:.9rem; }
@media (max-width:820px) { .layout { grid-template-columns:1fr; gap:22px; margin-top:0; }.intro { position:static; padding:20px 8px; }.intro h1 { font-size:clamp(2.35rem,12vw,4rem); }.card { padding:24px; border-radius:18px; }.privacy-label { display:none; }.actions { grid-template-columns:1fr; }.site-header { padding:20px 16px; } footer { flex-wrap:wrap; } }