:root {
  --bg: #090619;
  --bg-soft: #100a25;
  --panel: rgba(18, 12, 42, 0.90);
  --panel-2: rgba(31, 19, 56, 0.94);
  --text: #fffaf0;
  --muted: #bbb3c8;
  --silver: #f5efe7;
  --gold: #e2c05c;
  --gold-2: #f9e7b0;
  --blue: #76e8c2;
  --violet: #6c3e91;
  --line: rgba(226,192,92,.18);
  --shadow: 0 24px 70px rgba(0,0,0,.45);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 18% 12%, rgba(136,103,255,.10), transparent 25%),
    radial-gradient(circle at 80% 18%, rgba(91,183,255,.08), transparent 26%),
    linear-gradient(180deg, #090619 0%, #070412 100%);
  color: var(--text);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; }

.container { width: min(1120px, calc(100% - 36px)); margin: 0 auto; }

.site-header {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(18px);
  background: rgba(9,6,25,.88);
  border-bottom: 1px solid var(--line);
}
.nav { display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:22px; }
.brand { display:flex; align-items:center; gap:12px; min-width:max-content; }
.brand-mark {
  width:46px; height:46px; border:1px solid rgba(226,192,92,.72); border-radius:50%;
  display:block; background:#0a0718 url("ctrl-logo.png") center/cover no-repeat; box-shadow:0 0 18px rgba(226,192,92,.20), inset 0 0 14px rgba(255,255,255,.03);
}
.brand-mark::before { content:""; }
.brand-text { line-height:1; }
.brand-text strong { display:block; font-family: Georgia, "Times New Roman", serif; letter-spacing:.16em; font-size:15px; color:var(--silver); }
.brand-text em { display:block; margin-top:5px; font-family:"Brush Script MT", cursive; font-size:17px; color:var(--gold); font-style:normal; }
.nav-links { display:flex; gap:24px; color:#c8cbd3; font-size:14px; }
.nav-links a:hover { color:white; }
.nav-cta { padding:10px 15px; border:1px solid rgba(216,181,107,.35); border-radius:999px; color:var(--gold-2); background:rgba(216,181,107,.06); }
.menu-btn { display:none; background:none; border:1px solid var(--line); color:white; border-radius:10px; padding:8px 10px; }

.hero { padding:88px 0 54px; }
.eyebrow { color:var(--gold-2); text-transform:uppercase; letter-spacing:.2em; font-weight:700; font-size:12px; }
.hero-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap:54px; align-items:center; }
.hero h1 { font-family: Georgia, "Times New Roman", serif; font-size:clamp(46px, 7vw, 82px); line-height:.97; margin:18px 0 20px; letter-spacing:-.035em; color:var(--silver); }
.hero h1 span { color:var(--gold-2); font-family:"Brush Script MT", cursive; font-weight:400; }
.hero p { max-width:670px; color:var(--muted); font-size:18px; line-height:1.7; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 18px; border-radius:14px; border:1px solid transparent; font-weight:700; }
.btn-primary { background:linear-gradient(135deg, #e2c17c, #b9893f); color:#111; box-shadow:0 10px 35px rgba(216,181,107,.16); }
.btn-secondary { border-color:rgba(118,232,194,.26); color:#d9fff1; background:rgba(118,232,194,.07); }

.hero-card { position:relative; min-height:440px; border:1px solid rgba(255,255,255,.09); border-radius:30px; background:linear-gradient(155deg, rgba(38,24,64,.98), rgba(10,6,24,.98)); box-shadow:var(--shadow); padding:28px; overflow:hidden; }
.hero-card::before { content:""; position:absolute; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(136,103,255,.24), transparent 65%); top:-80px; right:-80px; }
.hero-card::after { content:""; position:absolute; inset:auto -20px -60px auto; width:300px; height:150px; background:radial-gradient(circle, rgba(91,183,255,.16), transparent 65%); }
.doc-window { position:relative; z-index:2; height:100%; min-height:380px; border-radius:20px; border:1px solid rgba(255,255,255,.1); background:#0d091d; padding:18px; }
.doc-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; color:#b9bec8; font-size:12px; }
.doc-title { font-family:Georgia,serif; font-size:26px; color:var(--silver); }
.doc-title span { color:var(--gold); }
.tool-pills { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.tool-pills span { padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07); color:#c8cbd3; font-size:12px; }
.document-sheet { background:linear-gradient(180deg,#f5f6f8,#dfe3e9); min-height:230px; border-radius:12px; padding:28px; color:#1b1c22; box-shadow:0 18px 35px rgba(0,0,0,.25); }
.document-sheet h3 { margin:0 0 10px; font-family:Georgia,serif; font-size:23px; }
.document-sheet p { color:#515766; font-size:13px; line-height:1.6; }
.redact { height:13px; width:68%; background:#111; border-radius:2px; margin:12px 0; }

.section { padding:64px 0; }
.section-head { display:flex; justify-content:space-between; gap:30px; align-items:end; margin-bottom:28px; }
.section h2 { font-family:Georgia,serif; font-size:clamp(32px, 5vw, 50px); margin:0; color:var(--silver); }
.section-head p { max-width:560px; color:var(--muted); line-height:1.7; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { border:1px solid var(--line); border-radius:var(--radius); padding:24px; background:linear-gradient(145deg, rgba(27,18,51,.96), rgba(11,7,25,.96)); box-shadow:0 16px 45px rgba(0,0,0,.2); }
.card .icon { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; margin-bottom:18px; color:var(--gold-2); border:1px solid rgba(216,181,107,.22); background:rgba(216,181,107,.05); }
.card h3 { margin:0 0 10px; font-size:18px; }
.card p { margin:0; color:var(--muted); line-height:1.65; font-size:14px; }
.card a.more { display:inline-flex; margin-top:16px; color:#bfffea; font-weight:700; font-size:13px; }

.callout { margin:40px 0 0; border:1px solid rgba(216,181,107,.18); border-radius:26px; padding:30px; background:linear-gradient(120deg,rgba(216,181,107,.06),rgba(136,103,255,.07),rgba(91,183,255,.05)); display:flex; align-items:center; justify-content:space-between; gap:22px; }
.callout h3 { font-family:Georgia,serif; font-size:28px; margin:0 0 8px; }
.callout p { margin:0; color:var(--muted); }

.page-hero { padding:72px 0 30px; }
.page-hero h1 { font-family:Georgia,serif; font-size:clamp(40px,6vw,68px); margin:12px 0; color:var(--silver); }
.page-hero p { color:var(--muted); max-width:720px; line-height:1.75; }

.tool-shell { display:grid; grid-template-columns: .78fr 1.22fr; gap:24px; align-items:start; }
.tool-panel { border:1px solid var(--line); border-radius:24px; background:var(--panel); padding:24px; }
.tool-panel h2 { font-size:24px; }
.field { margin:16px 0; }
.field label { display:block; margin-bottom:8px; color:#d7dbe3; font-size:13px; font-weight:700; }
.field input, .field select { width:100%; padding:12px 13px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:#0c081b; color:white; }
.preview-box { min-height:380px; display:grid; place-items:center; padding:20px; border:1px dashed rgba(255,255,255,.15); border-radius:18px; background:#090619; overflow:hidden; }
.preview-box img { max-height:520px; border-radius:10px; box-shadow:0 16px 40px rgba(0,0,0,.35); }
.result { margin-top:14px; color:#c7ced9; font-size:13px; line-height:1.6; }
.ad-slot { margin:28px 0; padding:18px; text-align:center; border:1px dashed rgba(255,255,255,.09); border-radius:16px; color:#747b87; font-size:12px; background:rgba(255,255,255,.018); }

.prose { max-width:820px; }
.prose h2 { font-size:28px; margin-top:36px; }
.prose p, .prose li { color:var(--muted); line-height:1.8; }

footer { border-top:1px solid var(--line); margin-top:64px; padding:34px 0 42px; color:#8f96a3; font-size:13px; }
.footer-row { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer-links { display:flex; gap:16px; flex-wrap:wrap; }

@media (max-width: 860px) {
  .hero-grid, .tool-shell, .grid-3 { grid-template-columns:1fr; }
  .hero { padding-top:56px; }
  .hero-card { min-height:380px; }
  .section-head { align-items:start; flex-direction:column; }
  .nav-links { display:none; position:absolute; top:74px; left:18px; right:18px; padding:18px; border:1px solid var(--line); background:#0c081b; border-radius:16px; flex-direction:column; }
  .nav-links.open { display:flex; }
  .menu-btn { display:block; }
  .nav-cta { display:none; }
  .callout { align-items:flex-start; flex-direction:column; }
}

/* CTRL visual alignment — matches the shipped Android app */
.site-header{box-shadow:0 1px 0 rgba(226,192,92,.08),0 12px 34px rgba(0,0,0,.28)}
.brand-text strong{color:#f7ecd7;letter-spacing:.17em}
.brand-text em{color:#e2c05c}
.hero-card{border-color:rgba(226,192,92,.28);box-shadow:0 0 0 1px rgba(104,58,145,.28),0 24px 70px rgba(0,0,0,.5),0 0 40px rgba(91,45,121,.13)}
.hero-card::before{background:radial-gradient(circle,rgba(106,59,145,.42),transparent 66%)}
.hero-card::after{background:radial-gradient(circle,rgba(118,232,194,.13),transparent 65%)}
.doc-window{border-color:rgba(226,192,92,.22);background:linear-gradient(180deg,#100a24,#0a0718)}
.tool-pills span{border-color:rgba(226,192,92,.18);background:rgba(92,48,119,.18);color:#f4e9fa}
.btn-primary{background:linear-gradient(135deg,#f1d979,#c89d39);color:#160d22;box-shadow:0 0 22px rgba(226,192,92,.24)}
.nav-cta{border-color:rgba(226,192,92,.48);background:rgba(76,40,101,.22);color:#f9e7b0}
.card{border-color:rgba(226,192,92,.18);box-shadow:0 16px 45px rgba(0,0,0,.24),inset 0 0 34px rgba(105,57,144,.04)}
.card .icon{border-color:rgba(226,192,92,.55);background:rgba(69,37,95,.28);box-shadow:0 0 16px rgba(226,192,92,.08)}
.callout{border-color:rgba(226,192,92,.30);background:linear-gradient(120deg,rgba(226,192,92,.08),rgba(93,48,124,.20),rgba(118,232,194,.05))}
.page-hero h1{color:#f7ecd7;text-shadow:0 0 22px rgba(226,192,92,.07)}

/* Exact KB / MB compressor */
.field-row{display:grid;grid-template-columns:1fr .55fr;gap:12px;align-items:end}
.quick-targets{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 18px}
.quick-targets button{border:1px solid rgba(226,192,92,.24);background:rgba(76,40,101,.20);color:#f9e7b0;border-radius:999px;padding:8px 11px;cursor:pointer;font-size:12px}
.quick-targets button:hover{border-color:rgba(226,192,92,.6);background:rgba(76,40,101,.34)}
.compression-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.compression-stats>div{border:1px solid rgba(226,192,92,.16);background:rgba(25,15,49,.72);border-radius:14px;padding:13px}
.compression-stats span{display:block;color:#aaa2b8;font-size:11px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:5px}
.compression-stats strong{display:block;color:#fff6e4;font-size:15px}
.privacy-note{margin-top:16px;border-left:2px solid var(--gold);padding:10px 12px;background:rgba(226,192,92,.05);color:#bdb4c8;font-size:12px;line-height:1.55}
.privacy-note strong{color:#f4d979}
button:disabled{opacity:.62;cursor:wait}
@media (max-width:620px){.field-row{grid-template-columns:1fr}.compression-stats{grid-template-columns:repeat(2,1fr)}}
/* Images to PDF */
.pdf-image-list{border:1px dashed rgba(226,192,92,.18);border-radius:18px;min-height:280px;padding:14px;background:rgba(10,7,24,.42)}
.pdf-empty{min-height:250px;display:grid;place-items:center;text-align:center;color:#8f879c;padding:30px}
.pdf-item{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;padding:10px;border:1px solid rgba(226,192,92,.14);border-radius:13px;background:rgba(28,17,53,.78);margin-bottom:9px}
.pdf-item img{width:62px;height:62px;object-fit:cover;border-radius:9px;background:#090611}.pdf-item strong{display:block;color:#fff6e4;font-size:13px;overflow-wrap:anywhere}.pdf-item span{display:block;color:#9e95aa;font-size:11px;margin-top:4px}.pdf-actions{display:flex;gap:5px}.pdf-actions button{border:1px solid rgba(226,192,92,.22);background:#160d2b;color:#f4d979;border-radius:8px;width:31px;height:31px;cursor:pointer}.pdf-actions button:disabled{opacity:.28;cursor:default}@media(max-width:620px){.pdf-item{grid-template-columns:50px 1fr}.pdf-item img{width:50px;height:50px}.pdf-actions{grid-column:2}}