/* AutocaptionsLK.com — app stylesheet.
   Hand-written source (NOT generated): edit this file directly.
   Kept external so the site needs no 'unsafe-inline' in its CSP. */
/* ============================================================
   AutocaptionsLK.com — brand-matched UI
   Palette taken from the logo: magenta #C2187B → purple #6A2C91
   → indigo #2823A8, serif wordmark, white canvas.
   ============================================================ */
:root{
  --ink:#15111F; --ink2:#39324a; --muted:#6e6880; --dim:#7c7590; --label:#5f5872; --ph:#b9b2c6;
  --bg:#ffffff; --soft:#fbf9fe; --field:#fcfbfe; --card:#ffffff; --badge-bg:#f6f1fc;
  --nav-bg:rgba(255,255,255,.86);
  --line:#ece7f3; --line2:#dfd7ef; --line-hover:#cbbfe4;
  --pink:#c2187b; --violet:#8a2a96; --purple:#6a2c91; --indigo:#2823a8;
  --hero-si:#6a2c91;

  --grad:linear-gradient(155deg,#c2187b 0%,#9a288f 34%,#6a2c91 60%,#3a2fbf 84%,#2823a8 100%);
  --grad-soft:linear-gradient(155deg,rgba(194,24,123,.09),rgba(40,35,168,.09));
  --brand-soft:rgba(106,44,145,.08);
  --page-glow:
    radial-gradient(900px 520px at 8% -8%, rgba(194,24,123,.075), transparent 62%),
    radial-gradient(860px 520px at 96% 2%, rgba(40,35,168,.075), transparent 60%),
    radial-gradient(760px 420px at 50% 112%, rgba(106,44,145,.055), transparent 65%);

  --green:#0e9f6e; --green-soft:rgba(14,159,110,.09);
  --red:#d9295c; --red-soft:rgba(217,41,92,.08);
  --amber:#b4690e;

  --r-xl:22px; --r-lg:18px; --r:14px; --r-sm:11px;
  --sh-1:0 1px 2px rgba(21,17,31,.04), 0 12px 32px -16px rgba(21,17,31,.16);
  --sh-2:0 2px 4px rgba(21,17,31,.05), 0 26px 50px -22px rgba(64,32,120,.30);
  --sh-brand:0 10px 24px -10px rgba(106,44,145,.55);

  --ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --disp:'Playfair Display','Liberation Serif',Georgia,'Times New Roman',serif;
  --si:'Noto Sans Sinhala','Iskoola Pota','Nirmala UI','Segoe UI',sans-serif;
}

/* ---------- dark theme: same brand gradient, inverted canvas ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --ink:#f3f0f9; --ink2:#cdc7dd; --muted:#a49dba; --dim:#8d86a5; --label:#aea7c4; --ph:#6d6684;
    --bg:#100b1a; --soft:#1b1529; --field:#181227; --card:#161022; --badge-bg:#1e1832;
    --nav-bg:rgba(16,11,26,.82);
    --line:#2a2340; --line2:#352c4e; --line-hover:#4a3f6b;
    --purple:#c9a6ff; --violet:#c08ee0;
    --hero-si:#e2d4ff;

    --grad-soft:linear-gradient(155deg,rgba(194,24,123,.20),rgba(58,47,191,.20));
    --brand-soft:rgba(154,40,143,.20);
    --page-glow:
      radial-gradient(900px 520px at 8% -8%, rgba(194,24,123,.22), transparent 62%),
      radial-gradient(860px 520px at 96% 2%, rgba(58,47,191,.26), transparent 60%),
      radial-gradient(760px 420px at 50% 112%, rgba(154,40,143,.18), transparent 65%);

    --green:#34d399; --green-soft:rgba(52,211,153,.14);
    --red:#ff7a95; --red-soft:rgba(255,122,149,.13);
    --amber:#e0a154;

    --sh-1:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -18px rgba(0,0,0,.7);
    --sh-2:0 2px 6px rgba(0,0,0,.5), 0 28px 56px -24px rgba(0,0,0,.8);
    --sh-brand:0 10px 24px -10px rgba(0,0,0,.6);
  }
  ::selection{background:rgba(194,24,123,.34)}
  :focus-visible{outline-color:#c9a6ff}
  .hero-ghost{opacity:.16}
  /* the mark's indigo tail would sink into a dark canvas without a halo */
  .hero-mark{filter:drop-shadow(0 12px 30px rgba(194,24,123,.40)) drop-shadow(0 0 20px rgba(201,166,255,.24))}
  .brand-mark,.foot-brand img{filter:drop-shadow(0 0 7px rgba(201,166,255,.30))}
  .pipe-step.done{background:rgba(52,211,153,.06)}
  .pipe-step.done .ico{border-color:rgba(52,211,153,.32)}
  .pipe-step.error .ico{border-color:rgba(255,122,149,.32)}
  .pipe-step.active .ico{border-color:rgba(194,24,123,.42)}
  .output .fmtext{color:#c9bfff}
  .output .idx{color:var(--dim)}
  .skip{color:#1b1226}
  #toast.err{background:rgba(255,122,149,.09)}
  #toast.ok{background:rgba(52,211,153,.09)}
  select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a49dba' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  font-family:var(--ui); background:var(--bg); color:var(--ink);
  font-size:15px; line-height:1.6; min-height:100vh;
  background-image:var(--page-glow);
  background-repeat:no-repeat;
}
.si{font-family:var(--si)}
[hidden]{display:none !important}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
::selection{background:rgba(194,24,123,.18)}
:focus-visible{outline:2px solid var(--purple); outline-offset:2px; border-radius:6px}
.skip{position:absolute; left:-9999px; top:0; background:var(--purple); color:#fff; padding:10px 16px; border-radius:0 0 10px 0; z-index:100}
.skip:focus{left:0}
[id]{scroll-margin-top:86px}

/* ---------- top brand hairline ---------- */
.brandline{height:3px; background:var(--grad); width:100%}

/* ---------- top nav ---------- */
.topnav{
  position:sticky; top:0; z-index:40;
  background:var(--nav-bg);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{max-width:1140px; margin:0 auto; padding:11px 22px; display:flex; align-items:center; gap:22px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex:none}
.brand-mark{height:30px; width:auto; display:block}
.brand-name{font-family:var(--disp); font-size:18px; font-weight:500; letter-spacing:.2px; white-space:nowrap}
.brand-name .tld{color:var(--muted); font-size:15px}
.nav-links{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav-links a{
  color:var(--muted); text-decoration:none; font-size:13.5px; font-weight:500;
  padding:7px 12px; border-radius:9px; transition:.15s;
}
.nav-links a:hover{color:var(--ink); background:var(--soft)}
.nav-links a.active{color:var(--purple); background:var(--soft)}
.nav-cta{
  flex:none; text-decoration:none; color:#fff; font-size:13.5px; font-weight:600;
  padding:9px 18px; border-radius:10px; background:#6a2c91;
  box-shadow:0 8px 20px -10px rgba(106,44,145,.65), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .15s, box-shadow .15s, background .15s;
}
.nav-cta:hover{transform:translateY(-1px); background:#7d34a8; box-shadow:0 12px 26px -12px rgba(106,44,145,.8), inset 0 1px 0 rgba(255,255,255,.2)}

/* ---------- layout ---------- */
.wrap{max-width:1140px; margin:0 auto; padding:0 22px 80px}

/* ---------- hero ---------- */
.hero{position:relative; text-align:center; padding:66px 0 44px; overflow:hidden}
.hero-ghost{
  position:absolute; left:50%; top:-64px; transform:translateX(-50%); height:620px; width:auto;
  opacity:.055; pointer-events:none; user-select:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 38%,transparent 82%);
  mask-image:radial-gradient(closest-side,#000 38%,transparent 82%);
}
.hero-inner{position:relative; z-index:1}
.hero h1{display:flex; flex-direction:column; align-items:center; gap:20px; margin-bottom:22px}
.hero-mark{height:104px; width:auto; display:block; filter:drop-shadow(0 14px 26px rgba(106,44,145,.20))}
.wordmark{font-family:var(--disp); font-size:clamp(34px,6.4vw,54px); font-weight:500; letter-spacing:-.6px; color:var(--ink); line-height:1.05}
.wordmark .tld{color:var(--muted); font-size:.66em; font-weight:400; letter-spacing:0}
.hero-si{font-family:var(--si); font-size:clamp(17px,2.6vw,22px); font-weight:700; color:var(--hero-si); margin-bottom:12px}
.hero-en{max-width:660px; margin:0 auto 30px; color:var(--muted); font-size:15.5px; line-height:1.75}
.hero-en b{color:var(--ink2); font-weight:600}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:34px}

/* ---------- badges ---------- */
.badge-row{display:flex; gap:9px; flex-wrap:wrap; justify-content:center}
.badge{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:500;
  color:var(--muted); background:var(--badge-bg); border:1px solid transparent;
  padding:7px 13px; border-radius:999px;
}
.badge b{color:var(--ink); font-weight:600}
.badge .dot{width:6px; height:6px; border-radius:50%; background:var(--grad); flex:none}
.badge .dot.g{background:var(--green)}

/* ---------- grid + cards ---------- */
.grid{display:grid; grid-template-columns:1.02fr .98fr; gap:30px; align-items:start; margin-top:56px}
@media(max-width:940px){.grid{grid-template-columns:1fr}}
.col{display:flex; flex-direction:column; gap:22px; min-width:0}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:24px; box-shadow:var(--sh-1);
}
.card-head{display:flex; align-items:center; gap:12px; margin-bottom:6px}
.card-head h2{font-family:var(--disp); font-size:20px; font-weight:600; letter-spacing:-.2px}
.num svg{width:16px; height:16px}
.num{
  flex:none; width:28px; height:28px; border-radius:9px; background:var(--grad); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--ui); font-size:13px; font-weight:700; box-shadow:0 6px 14px -6px rgba(106,44,145,.6);
}
.side{margin-left:auto; font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--label)}
.card-sub{color:var(--muted); font-size:13px; margin-bottom:16px}
.card-sub a{color:var(--purple)}

/* ---------- form ---------- */
label.fl{
  display:block; font-size:11.5px; font-weight:700; color:var(--label);
  text-transform:uppercase; letter-spacing:.7px; margin:18px 0 7px;
}
input[type=text], input[type=password], select{
  width:100%; padding:12px 14px; border-radius:var(--r-sm); border:1px solid var(--line2);
  background:var(--field); color:var(--ink); font-size:14px; font-family:var(--ui);
  outline:none; transition:border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder{color:var(--ph)}
input:hover, select:hover{border-color:var(--line-hover)}
input:focus, select:focus{border-color:var(--violet); background:var(--card); box-shadow:0 0 0 4px var(--brand-soft)}
select{cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6880' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px; padding-right:38px;
}
.hint{font-size:12px; color:var(--muted); margin-top:8px; line-height:1.6}
.hint a{color:var(--purple); text-decoration:none; font-weight:500}
.hint a:hover{text-decoration:underline}
.hint b{color:var(--muted)}
.mt-16{margin-top:16px}
.keyrow{display:flex; gap:10px}
.keyrow input{flex:1; min-width:0; font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; font-size:13px}
.icon-btn{
  flex:none; width:44px; border-radius:var(--r-sm); border:1px solid var(--line2); background:var(--field);
  color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s;
}
.icon-btn svg{width:19px; height:19px}
.icon-btn:hover{border-color:var(--line-hover); color:var(--ink); background:var(--card)}
.icon-btn .eye-off{display:none}
.icon-btn.revealed{color:var(--purple); border-color:var(--line-hover); background:var(--card)}
.icon-btn.revealed .eye-on{display:none}
.icon-btn.revealed .eye-off{display:block}

/* ---------- drop zone ---------- */
.drop{
  border:1.5px dashed var(--line2); border-radius:var(--r-lg); padding:38px 20px 34px; text-align:center;
  color:var(--muted); cursor:pointer; transition:.18s; background:var(--soft);
}
.drop:hover, .drop.over{border-color:var(--pink); background:var(--grad-soft)}
.drop svg{width:34px; height:34px; color:var(--purple); margin-bottom:12px}
.drop .big{display:flex; justify-content:center}
.drop .t1{font-size:15.5px; font-weight:600; color:var(--ink)}
.drop .t2{font-size:13px; margin-top:6px; line-height:1.6}
.drop .t2 b{color:var(--purple); font-weight:600}
.filedrag-mouse{cursor:grabbing}

.filechip{
  display:none; align-items:center; gap:13px; background:var(--soft); border:1px solid var(--line);
  padding:13px 15px; border-radius:var(--r); margin-top:14px;
}
.filechip.show{display:flex}
.filechip .ficon{
  flex:none; width:36px; height:36px; border-radius:10px; background:var(--grad-soft);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--purple);
}
.filechip .ficon svg{width:18px; height:18px}
.filechip .ft{min-width:0; flex:1}
.filechip .fn{font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.filechip .fs{font-size:11.5px; color:var(--muted); margin-top:2px}
.filechip .fx{
  background:none; border:none; color:var(--dim); cursor:pointer; border-radius:9px; display:flex;
  align-items:center; justify-content:center; width:34px; height:34px; flex:none;
}
.filechip .fx svg{width:16px; height:16px}
.filechip .fx:hover{color:var(--red); background:var(--red-soft)}

/* ---------- pipeline ---------- */
.pipe{display:flex; flex-direction:column; gap:2px; margin:14px 0 18px}
.pipe-step{display:flex; gap:13px; align-items:flex-start; padding:9px 10px; border-radius:var(--r); transition:.18s}
.pipe-step .ico{
  flex:none; width:36px; height:36px; border-radius:11px; background:var(--soft); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--dim); z-index:1; transition:.2s;
}
.pipe-step .ico svg{width:18px; height:18px}
.pipe-step .bd{flex:1; min-width:0; padding-top:2px}
.pipe-step .tt{font-size:13.5px; font-weight:600; color:var(--ink2)}
.pipe-step .st{font-size:12px; color:var(--muted); margin-top:2px; min-height:17px}
.pipe-step .st.err{color:var(--red)}
.pipe-step.active{background:var(--soft)}
.pipe-step.active .ico,.pipe-step.active .tt{color:var(--purple)}
.pipe-step.active .ico{border-color:#dcccf0; background:var(--grad-soft); animation:pulse 1.5s infinite}
.pipe-step.done .ico{border-color:rgba(14,159,110,.35); background:var(--green-soft); color:var(--green)}
.pipe-step.done{background:rgba(14,159,110,.04)}
.pipe-step.done .tt{color:var(--green)}
.pipe-step.error .ico{border-color:rgba(217,41,92,.35); background:var(--red-soft); color:var(--red)}
.pipe-step.error .tt{color:var(--red)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(106,44,145,.22)}50%{box-shadow:0 0 0 7px rgba(106,44,145,0)}}

/* ---------- buttons ---------- */
.btn{
  padding:10px 15px; border-radius:var(--r-sm); border:1px solid #ded4ef; background:#fff;
  color:var(--ink2); font-size:12.5px; font-weight:600; font-family:var(--ui); cursor:pointer;
  transition:.15s; display:inline-flex; align-items:center; gap:7px; text-decoration:none; white-space:nowrap;
}
.btn svg{width:15px; height:15px; flex:none}
.btn:hover{border-color:var(--violet); color:var(--purple); background:var(--soft)}
.btn.primary{
  background:var(--grad); border-color:transparent; color:#fff;
  box-shadow:var(--sh-brand), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn.primary:hover{color:#fff; transform:translateY(-1px); box-shadow:0 14px 30px -12px rgba(106,44,145,.7), inset 0 1px 0 rgba(255,255,255,.26)}
.btn.lg{padding:14px 26px; font-size:14.5px; border-radius:12px}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
.btn.wide{width:100%; justify-content:center}

#genBtn{
  width:100%; padding:16px; border:none; border-radius:var(--r); cursor:pointer;
  font-size:15px; font-weight:700; font-family:var(--ui); letter-spacing:.2px; color:#fff;
  background:var(--grad); background-size:150% 150%; background-position:0% 0%;
  box-shadow:var(--sh-brand), inset 0 1px 0 rgba(255,255,255,.22); transition:.2s;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
#genBtn:hover:not(:disabled){transform:translateY(-1px); background-position:80% 80%; box-shadow:0 16px 34px -12px rgba(106,44,145,.75), inset 0 1px 0 rgba(255,255,255,.28)}
#genBtn:disabled{opacity:.55; cursor:not-allowed}
#genBtn .spin{display:none; width:16px; height:16px; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:rot .7s linear infinite}
#genBtn.busy .spin{display:block}
@keyframes rot{to{transform:rotate(360deg)}}

/* ---------- results ---------- */
.res-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:24px; box-shadow:var(--sh-1); display:none; margin-bottom:22px;
}
.res-card.show{display:block; animation:fadeUp .32s ease}
.res-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px}
.res-head h2{font-family:var(--disp); font-size:20px; font-weight:600; margin-right:auto}
.pill{font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:999px; letter-spacing:.5px; text-transform:uppercase}
.pill.uni{background:var(--green-soft); color:var(--green)}
.pill.fm{background:var(--brand-soft); color:var(--purple)}
.res-tools{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.out-block{margin-top:22px}
.output{
  background:var(--soft); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px;
  font-size:14px; line-height:1.9; max-height:320px; overflow:auto; white-space:pre-wrap; word-break:break-word;
}
.output.sin{font-family:var(--si)}
.output.fm{font-family:'InstalledFMAbhaya',ui-monospace,'Courier New',monospace; font-size:15px}
.output .idx{color:var(--dim); font-size:11px; font-weight:600}
.output .tc{color:var(--violet); font-size:12px; font-weight:500}
.output .sintext{font-weight:600; color:var(--ink)}
.output .fmtext{font-weight:600; color:#4a3c7a}

/* ---------- output preview (pre-results) ---------- */
.preview-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); padding:24px; box-shadow:var(--sh-1); margin-bottom:22px}
.res-card.show ~ .preview-card{display:none}
.preview-card h2{font-family:var(--disp); font-size:20px; font-weight:600; margin-bottom:6px}
.file-rows{display:flex; flex-direction:column; gap:10px; margin-top:16px}
.file-row{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--soft)}
.file-row .tag{
  flex:none; font-size:10px; font-weight:700; letter-spacing:.6px; padding:4px 9px; border-radius:7px; text-transform:uppercase;
}
.tag.uni{background:var(--green-soft); color:var(--green)}
.tag.fm{background:var(--brand-soft); color:var(--purple)}
.file-row .fd{font-size:12.5px; color:var(--muted); line-height:1.5}
.file-row .fd b{color:var(--ink2); font-weight:600; display:block; font-size:13px}

/* ---------- how it works / faq ---------- */
.steps{display:flex; flex-direction:column; gap:14px}
.step{display:flex; gap:13px; align-items:flex-start}
.step .n{
  flex:none; width:24px; height:24px; border-radius:8px; background:var(--grad-soft); color:var(--purple);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
}
.step .t{font-size:13.5px; color:var(--muted); line-height:1.65}
.step .t b{color:var(--ink); font-weight:600}

.faq{margin-top:24px; border-top:1px solid var(--line); padding-top:16px}
.faq-head{font-size:11.5px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--label); margin-bottom:2px}
details{border-bottom:1px solid var(--line)}
details:last-child{border-bottom:none}
summary{
  cursor:pointer; padding:14px 26px 14px 0; font-size:13.5px; font-weight:600; color:var(--ink2);
  list-style:none; position:relative; transition:color .15s;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:''; position:absolute; right:6px; top:50%; width:8px; height:8px; margin-top:-6px;
  border-right:1.8px solid var(--dim); border-bottom:1.8px solid var(--dim);
  transform:rotate(45deg); transition:transform .2s;
}
details[open] summary::after{transform:rotate(-135deg); margin-top:-2px}
summary:hover{color:var(--purple)}
details p{font-size:13px; color:var(--muted); line-height:1.7; padding:0 26px 16px 0}
details p b{color:var(--ink2)}

/* ---------- toast ---------- */
#toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(120px);
  background:var(--card); border:1px solid var(--line2); color:var(--ink); padding:13px 22px; border-radius:var(--r);
  font-size:13.5px; font-weight:500; box-shadow:var(--sh-2); transition:transform .28s cubic-bezier(.22,1,.36,1);
  z-index:99; max-width:90vw; text-align:center;
}
#toast.show{transform:translateX(-50%) translateY(0)}
#toast.err{border-color:rgba(217,41,92,.45); color:var(--red); background:#fff7fa}
#toast.ok{border-color:rgba(14,159,110,.45); color:var(--green); background:#f5fdfa}

/* ---------- footer ---------- */
footer{
  margin-top:64px; padding-top:34px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
}
.foot-brand{display:flex; align-items:center; gap:10px}
.foot-brand img{height:26px; width:auto}
.foot-brand span{font-family:var(--disp); font-size:17px; font-weight:500}
footer p{color:var(--muted); font-size:12.5px; line-height:1.7; max-width:720px}
footer .powered{color:var(--muted); font-size:13px; font-weight:500}
footer .powered b{color:var(--purple); font-weight:600}
@keyframes fadeUp{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}

/* ---------- responsive ---------- */
@media(max-width:820px){
  .nav-links{display:none}
  .nav-cta{margin-left:auto}
  .wrap{padding:0 16px 64px}
  .card,.res-card,.preview-card{padding:20px}
  .hero{padding:44px 0 30px}
  .hero-mark{height:78px}
  .hero-ghost{opacity:.035; height:300px}
}
@media(max-width:420px){
  .badge{font-size:11.5px; padding:6px 11px}
  .btn.lg{padding:13px 18px; font-size:13.5px}
}
@media(max-width:520px){
  .hero-cta{flex-direction:column; align-items:stretch; width:100%; max-width:340px; margin-left:auto; margin-right:auto}
  .hero-cta .btn{width:100%; justify-content:center}
  .res-tools.tools4{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .res-tools.tools4 .btn{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}