:root{
      --indigo:#4c63d2; --purple:#7c3aed; --pink:#ec4899; --rose:#f43f5e; --blue:#3b82f6; --teal:#14b8a6; --amber:#f59e0b;

      /* Dark */
      --bg:#0b1020;
      --bg-alt:#0e1426;
      --text:#ffffff;
      --muted:rgba(255,255,255,.7);
      --muted-80:rgba(255,255,255,.8);
      --muted-60:rgba(255,255,255,.6);
      --card:rgba(255,255,255,.06);
      --card-strong:rgba(255,255,255,.08);
      --border:rgba(255,255,255,.18);
      --header:rgba(0,0,0,.30);
      --menu:rgba(17,24,39,.85); /* black/70-ish */
      --mesh-dark:
        radial-gradient(1200px 600px at -10% -10%, rgba(76,99,210,.45), transparent 60%),
        radial-gradient(1000px 600px at 110% 10%, rgba(236,72,153,.35), transparent 55%),
        radial-gradient(1000px 800px at 80% 110%, rgba(20,184,166,.30), transparent 55%),
        linear-gradient(135deg,#0b1020 0%, #151a30 50%, #101624 100%);
      --shadow:0 10px 40px rgba(0,0,0,.25);
      --theme-color:#0b1020;
    }
    [data-theme="light"]{
      --bg:#f1f1f1;           /* slate-50 */
      --bg-alt:#ffffff;
      --text:#0f172a;         /* slate-900 */
      --muted:#334155;        /* slate-600 */
      --muted-80:#1f2937;     /* slate-800 */
      --muted-60:#475569;     /* slate-600/70 */
      --card:rgba(15,23,42,.03);
      --card-strong:rgba(15,23,42,.05);
      --border:rgba(15,23,42,.12);
      --header:rgba(255,255,255,.70);
      --menu:rgba(255,255,255,.95);
      --mesh-dark:
        radial-gradient(1200px 600px at -10% -10%, rgba(76,99,210,.18), transparent 60%),
        radial-gradient(1000px 600px at 110% 10%, rgba(236,72,153,.15), transparent 55%),
        radial-gradient(1000px 800px at 80% 110%, rgba(20,184,166,.12), transparent 55%),
        linear-gradient(135deg,#ffffff 0%, #f1f1f1 50%, #ffffff 100%);
      --shadow:0 10px 30px rgba(2,6,23,.10);
      --theme-color:#ffffff;
    }

    /* Global */
    html, body { width:100%; max-width:100%; overflow-x: clip; } /* clamps any horizontal offenders */
    @supports not (overflow-x: clip){ html, body { overflow-x: hidden; } }
    body{ font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); }
    .font-heading{ font-family:'Poppins',sans-serif; }
    img{ display:block; max-width:100%; height:auto; }

    /* Gradient systems */
    .mesh { background: var(--mesh-dark); }
    .hero-slide{ min-width:100vw; min-height:86vh; position:relative; overflow:hidden; }
    .hero-media{ position:absolute; inset:0; }
    .hero-img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 12s ease; }
    .hero-slide.active .hero-img{ transform:scale(1); }

    /* Glass / glow cards */
    .glass{ background:var(--card-strong); backdrop-filter:blur(10px); }
    .glow-card{
      position:relative; border-radius:1.25rem; overflow:hidden;
      background:var(--card); border:1px solid var(--border);
      box-shadow:var(--shadow);
    }
    .glow-card:before{
      content:""; position:absolute; inset:-2px;
      background:conic-gradient(from 0deg, var(--indigo), var(--pink), var(--teal), var(--blue), var(--indigo));
      filter:blur(18px); opacity:.30; z-index:0; pointer-events:none;
    }
    .glow-card > *{ position:relative; z-index:1; }

    /* Accent ring object */
    .accent-ring{
      position:absolute; width:46rem; height:46rem; border-radius:9999px;
      background:conic-gradient(from 90deg, rgba(236,72,153,.85), rgba(59,130,246,.85), rgba(124,58,237,.85), rgba(20,184,166,.85), rgba(236,72,153,.85));
      filter:blur(60px); opacity:.25; pointer-events:none;
      animation:spin 24s linear infinite;
      contain: paint; /* avoids layout spill */
    }
    @keyframes spin{ to{ transform:rotate(360deg); } }

    /* Dots and progress */
    .dot{ width:.55rem; height:.55rem; background:rgba(255,255,255,.5); border-radius:9999px; transition:all .3s ease; }
    .dot.active{ background:#fff; transform:scale(1.25); }
    .progress{ height:3px; background:rgba(255,255,255,.25); border-radius:9999px; overflow:hidden; }
    .progress > span{ display:block; height:100%; width:0%; background:#fff; transition:width 7s linear; }

    /* Marquee logos - (kept for future sections) */
    .marquee{ overflow:hidden; position:relative; }
    .marquee-track{ display:flex; gap:4rem; animation:scroll 28s linear infinite; will-change:transform; }
    @keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
    .client-logo{ filter:grayscale(100%); opacity:.9; transition:all .25s ease; }
    .client-logo:hover{ filter:none; opacity:1; transform:translateY(-2px) scale(1.03); }

    /* Gradient text helper */
    .gtext{
      background:linear-gradient(90deg,var(--indigo),var(--pink),var(--teal));
      -webkit-background-clip:text; background-clip:text; color:transparent;
    }

    /* Section backgrounds overridden by theme */
    #services{ background:var(--bg); }
    #products{ background:var(--bg-alt); }
    #blog{ background:var(--bg); }
    #contact{ background:var(--bg-alt); }
    /* NEW (theme-aware) */
    footer{
      background:var(--bg-alt);
      color:var(--text);
      border-top:1px solid var(--border);
    }


    /* Header + mega menu theme-aware */
    header.site-header{
      background:var(--header); backdrop-filter: blur(12px);
      border-bottom:1px solid var(--border);
    }
    .mega-panel{
      background:var(--menu);
      border:1px solid var(--border);
      box-shadow: var(--shadow);
    }

    /* Light-mode overrides for your existing "text-white/xx" classes to keep contrast */
    [data-theme="light"] .text-white{ color: var(--text) !important; }
    [data-theme="light"] .text-white\/90{ color: var(--muted-80) !important; }
    [data-theme="light"] .text-white\/80{ color: var(--muted-80) !important; }
    [data-theme="light"] .text-white\/70{ color: var(--muted) !important; }
    [data-theme="light"] .text-white\/60{ color: var(--muted-60) !important; }

    /* Divider color in light */
    [data-theme="light"] .wave-bottom{ color:#ffffff; }

    /* Footer helpers: keep colors on-theme */
.social-btn{
  width:42px; height:42px; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); color:var(--muted); background:transparent; transition:transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.social-btn:hover{
  background:linear-gradient(90deg,var(--indigo),var(--pink),var(--teal));
  color:#fff; border-color:transparent; box-shadow:var(--shadow); transform:translateY(-1px);
}
/* ===== Service page typography ===== */
```css
/* ===== Unified styles scoped to .article ===== */

.article {
  max-width: 70ch;
  margin: 0 auto;
  font-size: 1.075rem;
  line-height: 1.85;
  color: var(--text);
}

/* Headings */
.article :where(h2,h3){ scroll-margin-top: 96px; }
.article h1{ font-family:'Poppins',sans-serif; font-weight:800; line-height:1.1; }
.article h2{ margin-top:2.2rem; margin-bottom:.8rem; font-size:1.65rem; font-weight:800; }
.article h3{ margin-top:1.6rem; margin-bottom:.6rem; font-size:1.15rem; font-weight:700; }

/* Text elements */
.article p{ margin:.9rem 0; color:var(--muted-80); }
.article a{ color:var(--indigo); text-decoration:underline; text-underline-offset:2px; }
.article ul{ margin:.4rem 0 .9rem 1.25rem; list-style:disc; }
.article ol{ margin:.4rem 0 .9rem 1.25rem; list-style:decimal; }
.article li{ margin:.35rem 0; }
.article blockquote{
  margin:1.4rem 0;
  padding:1rem 1.25rem;
  border-left:4px solid var(--indigo);
  background:var(--card);
  border-radius:.5rem;
  color:var(--muted-80);
}
.article hr{ border:0; height:1px; background:var(--border); margin:2rem 0; }
.article figure{ margin:1.25rem 0; }
.article figcaption{ margin-top:.4rem; color:var(--muted); font-size:.9rem; text-align:center; }
.article img{ border-radius:.75rem; }  /* rounded-xl ≈ 0.75rem */
.article p img{ border-radius:.75rem; }  /* rounded-xl ≈ 0.75rem */

/* Monospace base */
.article code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* ---- Inline code ---- */
.article :not(pre)>code{
  background:var(--code-inline);
  border:1px solid var(--code-border);
  padding:.10rem;
  border-radius:.25rem;
  font:.88em ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

/* ---- Code blocks ---- */
.article pre{
  background:var(--code-bg, #0b1020);
  color:var(--code-fg, #fff);
  border:1px solid var(--code-border, transparent);
  border-radius:.85rem;
  padding:1rem 1.1rem;
  overflow:auto;
  position:relative;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.article pre code{
  font:.92rem/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  display:block;
  min-width:max-content;
}
@media (max-width:640px){
  .article pre{ padding:.85rem .9rem; }
  .article pre code{ font-size:.88rem; }
}

/* Language label + copy button (optional via JS) */
.article .code-lang{
  position:absolute; top:.45rem; left:.6rem; font-size:.72rem; opacity:.8;
  border:1px solid var(--code-border); border-radius:.35rem; padding:.05rem .35rem;
}
.article .code-copy{
  position:absolute; top:.45rem; right:.5rem; font-size:.78rem;
  background:transparent; color:inherit; border:1px solid var(--code-border);
  border-radius:.5rem; padding:.2rem .45rem; cursor:pointer;
}
.article .code-copy:active{ transform:translateY(1px); }

/* Basic token colors (Prism & highlight.js) */
.article .token.keyword, .article .hljs-keyword{ color:var(--tok-key); }
.article .token.function, .article .hljs-function, .article .hljs-title{ color:var(--tok-fn); }
.article .token.string, .article .hljs-string{ color:var(--tok-str); }
.article .token.number, .article .hljs-number{ color:var(--tok-num); }
.article .token.attr-name, .article .hljs-attr, .article .hljs-attribute{ color:var(--tok-attr); }
.article .token.comment, .article .hljs-comment{ color:var(--tok-cmt); font-style:italic; }
.article .token.operator, .article .hljs-operator{ opacity:.9; }

/* ---- Tables ---- */
.article .table-wrap{
  margin:1rem 0 1.25rem;
  border:1px solid var(--code-border);
  border-radius:.85rem;
  overflow:auto;
  background:var(--bg);
  -webkit-overflow-scrolling:touch;
}
.article table{ width:100%; min-width:640px; border-collapse:collapse; }
.article thead th{
  position:sticky; top:0; background:var(--tbl-head);
  text-align:left; font-weight:700; color:inherit;
}
.article th, .article td{
  padding:.75rem .9rem; border-bottom:1px solid var(--muted-80);
}
.article tbody tr:nth-child(even) td{ background:var(--tbl-zebra); }
.article caption{ caption-side:bottom; font-size:.9rem; color:var(--muted-80); padding:.5rem .25rem; }

/* ---- kbd ---- */
.article kbd{
  font:.85em ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  border:1px solid var(--code-border);
  border-bottom-width:2px;
  border-radius:.35rem;
  padding:.1rem .35rem;
  background:var(--code-inline);
}

/* ---- Fluid embeds ---- */
.article iframe[src*="youtube.com"],
.article iframe[src*="youtu.be"],
.article iframe[src*="vimeo.com"]{
  display:block;
  width:100% !important;
  aspect-ratio:16 / 9;
  height:auto !important;
  border:0;
  border-radius:.75rem;
}

/* If your CMS wraps in <figure>, keep corners + prevent spill */
.article figure:has(> iframe){
  border-radius:.75rem;
  overflow:hidden;
}

/* Images: rounded everywhere, responsive */
.article :where(img, video) {
  display:block;
  max-width:100%;
  height:auto;
  border-radius:.75rem;
}
.article a:has(> img),
.article figure:has(> img),
.article picture:has(> img) {
  border-radius:.75rem;
  overflow:hidden;            /* ensures child corners clip inside wrappers */
}

/* Links: no underline by default; show on hover/focus */
.article a{
  color:var(--indigo);
  text-decoration:none;
  text-underline-offset:2px;
}
.article a:hover,
.article a:focus-visible{
  text-decoration:underline;
}

/* Code blocks: align with content; remove right overhang */
.article pre{
  background:var(--code-bg, #0b1020);
  color:var(--code-fg, #fff);
  border:1px solid var(--code-border, transparent);
  border-radius:.85rem;
  padding:1rem 1.1rem;
  margin:1rem 0;              /* explicit, flush with edges */
  overflow:auto;
  position:relative;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  width:100%;                 /* prevent overshoot */
  max-width:100%;
  box-sizing:border-box;      /* include padding in width calc */
  -webkit-overflow-scrolling:touch;
}
.article pre code{
  font:.92rem/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  display:block;
  /* remove min-width:max-content to avoid right-side creep */
  white-space:pre;            /* keep horizontal scroll when needed */
}

@media (max-width:640px){
  .article pre{ padding:.85rem .9rem; }
  .article pre code{ font-size:.88rem; }
}

/* Keep your existing rest of .article styles as-is */



.benefits { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; gap: 10px; }
.benefits li { display: flex; align-items: flex-start; gap: 10px; }
.benefits li::before { content: "✔"; display: inline-block; margin-top: 1px; }




/* === Testimonial Carousel (scoped) === */
.tcar { --accent: var(--indigo,#4c63d2); --muted: var(--border,rgba(255,255,255,.16)); }
.tcar .wrap{ max-width:72rem; margin:0 auto; padding:0 1.25rem; }

/* header (optional) */
.tcar h2{ margin:0 0 .5rem; font-weight:900; line-height:1.1; }
.tcar .sub{ opacity:.75; margin:.1rem 0 1rem; }

/* track: horizontal scroll-snap */
.tcar-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:88%;
  gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding:.25rem 0 0;
}
@media (min-width:640px){ .tcar-track{ grid-auto-columns:65%; } }
@media (min-width:1024px){ .tcar-track{ grid-auto-columns:45%; } }

/* card */
.tcar-card{
  scroll-snap-align:start; background:var(--bg,transparent);
  border:1px solid var(--muted); border-radius:1rem; padding:1rem 1.1rem;
  display:grid; gap:.75rem; min-height: 180px;
}
.tcar-quote{ margin:0; font-size:1.05rem; line-height:1.6; }
.tcar-rule{ height:1px; background:var(--muted); margin:.25rem 0; }

.tcar-author{ display:flex; align-items:center; gap:.75rem; }
.tcar .avatar{ width:48px; height:48px; object-fit:cover; border:1px solid var(--muted); }
.tcar[data-avatar="circle"] .avatar, .tcar .avatar--circle{ border-radius:9999px; }
.tcar[data-avatar="angular"] .avatar, .tcar .avatar--angular{ border-radius:.75rem; }
.tcar .name{ font-weight:800; }
.tcar .meta{ font-size:.9rem; opacity:.75; }

/* controls */
.tcar-ctrls{ position:relative; margin-top:.75rem; }
.tcar .btn{
  position:absolute; top:50%; transform:translateY(-50%);
  display:grid; place-items:center; width:38px; height:38px; border-radius:9999px;
  border:1px solid var(--muted); background:rgba(0,0,0,.15); color:inherit; cursor:pointer;
}
.tcar .btn[disabled]{ opacity:.4; cursor:not-allowed; }
.tcar .btn-prev{ left:-.25rem; }
.tcar .btn-next{ right:-.25rem; }
@media (min-width:1024px){ .tcar .btn-prev{ left:-.75rem; } .tcar .btn-next{ right:-.75rem; } }

/* Hide scrollbar completely (WebKit, Firefox, Edge/IE) */
.tcar-track{
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* Edge/IE */
}
.tcar-track::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;                /* WebKit */
}



/* Progress bar */
#read-progress{ position:fixed; top:64px; left:0; height:3px; width:0%; z-index:40;
  background:linear-gradient(90deg,var(--indigo),var(--pink),var(--teal));
}

/* Right rail cards */
.side-card{
  background:var(--bg-alt); border:1px solid var(--border); border-radius:1rem; box-shadow:var(--shadow);
}

/* TOC */
#toc a{ display:block; padding:.25rem 0; font-size:.95rem; color:var(--muted);
  border-left:2px solid transparent; padding-left:.75rem;
}
#toc a.active{ color:var(--text); border-color:var(--indigo); }

/* No horizontal drift */
main{ overflow-x:clip; }
.site-footer{ background:var(--bg-alt); color:var(--text); border-top:1px solid var(--border); }


/* === Service Subsections: Nested Scroll (scoped) === */
.ns-wrap{ background:var(--bg-alt); border:1px solid var(--border); border-radius:1rem; box-shadow:var(--shadow); }
.ns-head{ padding:1rem 1rem .5rem 1rem; border-bottom:1px solid var(--border); }
.ns-tabs{
  display:flex; gap:.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:.5rem;
  overscroll-behavior-x:contain;
}
.ns-chip{
  flex:0 0 auto; border:1px solid var(--border); color:var(--text); background:transparent;
  padding:.45rem .75rem; border-radius:9999px; font-weight:600; font-size:.9rem; text-decoration:none;
}
.ns-chip[aria-current="true"]{ background:linear-gradient(90deg,var(--indigo),var(--pink),var(--teal)); color:#fff; border-color:transparent; }

.ns-pane{
  max-height:min(70vh, 720px); overflow:auto; overscroll-behavior:contain; scroll-behavior:smooth;
  padding:1rem; display:grid; gap:1rem;
}
.ns-card{ background:var(--bg); border:1px solid var(--border); border-radius:.9rem; padding:1rem; }
.ns-card h3{ font-weight:800; font-size:1.15rem; line-height:1.2; }
.ns-card p{ opacity:.9; margin-top:.4rem; }
.ns-card .ns-cta{ margin-top:.7rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.ns-btn{ border:1px solid var(--border); padding:.5rem .8rem; border-radius:9999px; font-weight:600; color:var(--text); background:transparent; }
.ns-btn--primary{ border-color:transparent; background:linear-gradient(90deg,var(--indigo),var(--pink),var(--teal)); color:#fff; }

/* light scrollbars */
.ns-tabs::-webkit-scrollbar{ height:8px; }
.ns-pane::-webkit-scrollbar{ width:10px; }
.ns-tabs::-webkit-scrollbar-thumb,.ns-pane::-webkit-scrollbar-thumb{ background:var(--border); border-radius:9999px; }


/* === Slim Lined FAQ (scoped) === */
.faq-lines{
  --accent: var(--indigo,#4c63d2);
  --rule:   var(--border,rgba(255,255,255,.18));   /* auto works in dark/light if you already set --border */
  --text:   var(--text,inherit);
  --measure: 68ch;   /* readable line-length for answers */
}
.faq-lines *{ box-sizing:border-box; }
.faq-lines .wrap{ max-width:72rem; margin:0 auto; padding:0 1.25rem; }
.faq-lines .hd{ margin: .25rem 0 1.5rem; }
.faq-lines .title{ font-weight:900; line-height:1.05; margin:0; }
.faq-lines .sub{ margin:.6rem 0 0; opacity:.75; font-size:1.1rem; }

/* list */
.faq-lines .list{ margin-top:1.25rem; }
.faq-lines .item{ border-bottom:1px solid var(--rule); }
.faq-lines .item:first-child{ border-top:1px solid var(--rule); }

/* summary row */
.faq-lines summary{
  list-style:none; cursor:pointer; display:grid; grid-template-columns: 1fr auto; align-items:center;
  gap:1rem; padding:1rem 0; margin:0;
}
.faq-lines summary::-webkit-details-marker{ display:none; }

/* question text: tight, caps-like tracking (like the reference) */
.faq-lines .q{
  letter-spacing:.06em; 
  font-size:clamp(1.25rem, .9rem + .2vw, 1.05rem);
  color:var(--text);
}

/* + / − icon */
.faq-lines .toggle{
  position:relative; width:22px; height:22px; display:inline-block; opacity:.85;
}
.faq-lines .toggle::before,
.faq-lines .toggle::after{
  content:""; position:absolute; left:50%; top:50%; background:currentColor;
  transform:translate(-50%,-50%);
}
.faq-lines .toggle::before{ width:16px; height:2px; }         /* horizontal bar */
.faq-lines .toggle::after { width:2px;  height:16px; }        /* vertical bar */
.faq-lines .item[open] .toggle::after{ transform:translate(-50%,-50%) scaleY(0); } /* minus when open */
.faq-lines summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:4px; border-radius:6px;
}

/* answer */
.faq-lines .answer{
  padding:0 0 1.15rem 0;
  max-width:var(--measure); color:var(--text); opacity:.95; line-height:1.65;
}
.faq-lines .answer > *{ margin:.6rem 0 0; }
.faq-lines .answer p{ margin:.4rem 0 0; }

/* optional small “key points” chips */
.faq-lines .keys{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
.faq-lines .chip{
  border:1px solid var(--rule); border-radius:9999px; padding:.2rem .55rem; font-size:.78rem; opacity:.9;
}

.faq-lines ul { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; gap: 10px; }
.faq-lines li { display: flex; align-items: flex-start; gap: 10px; }
.faq-lines li::before { content: "✔"; display: inline-block; margin-top: 1px; }

/* === Scoped form theme for request card === */
.form-card{
  --form-fg:#0f172a;                 /* text (light)   */
  --form-bg:#ffffff;                 /* field bg (light) */
  --form-bd:rgba(0,0,0,.12);         /* border (light) */
  --form-ph:#64748b;                 /* placeholder (light) */
  --form-focus: var(--indigo,#4c63d2);
}
.dark .form-card, [data-theme="dark"] .form-card{
  --form-fg:#e6e8ee;                 /* text (dark) */
  --form-bg:rgba(255,255,255,.06);   /* field bg (dark) */
  --form-bd:rgba(255,255,255,.16);   /* border (dark) */
  --form-ph:rgba(230,232,238,.55);   /* placeholder (dark) */
}

.form-card label{ color:var(--form-fg); opacity:.9; }
.form-card input,
.form-card textarea,
.form-card select{
  width:100%;
  background:var(--form-bg);
  color:var(--form-fg);
  border:1px solid var(--form-bd);
  border-radius:.75rem;
  padding:.75rem .9rem;
  caret-color:var(--form-fg);
}
.form-card input::placeholder,
.form-card textarea::placeholder{ color:var(--form-ph); opacity:1; }

.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus{
  outline:2px solid var(--form-focus);
  outline-offset:2px;
  border-color:transparent;
}

.form-card .btn-primary{
  background:var(--form-focus);
  color:#fff;
  border-radius:9999px;
  padding:.8rem 1.25rem;
  font-weight:700;
}
.form-card .btn-ghost{
  border:1px solid var(--form-bd);
  border-radius:9999px;
  padding:.8rem 1.1rem;
  font-weight:700;
  background:transparent;
  color:var(--form-fg);
}



/* Clean confirmation card */
.form-card .confirm-slim{
  margin-top:1rem;
  border:1px solid var(--form-bd,rgba(0,0,0,.12));
  background:var(--confirm-bg, #fff);
  color:var(--form-fg,#0f172a);
  border-radius:14px;
  padding:1rem 1.1rem;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.dark .form-card .confirm-slim,
[data-theme="dark"] .form-card .confirm-slim{
  background:rgba(255,255,255,.04);
  color:var(--form-fg,#e6e8ee);
  border-color:var(--form-bd,rgba(255,255,255,.16));
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}

.confirm-slim .cs-title{
  font-weight:900; line-height:1.2; margin:0 0 .35rem;
}
.confirm-slim .cs-p{ margin:.45rem 0; line-height:1.65; }
.confirm-slim .cs-list{ margin:.6rem 0; padding:0; list-style:none; display:grid; gap:.45rem; }
.confirm-slim .cs-list li{ display:flex; gap:.55rem; align-items:flex-start; line-height:1.6; }
.confirm-slim .cs-ico{ width:1.15rem; flex:0 0 1.15rem; text-align:center; opacity:.9; }
.confirm-slim .cs-files{ margin:.35rem 0 0 .2rem; padding-left:1.35rem; }
.confirm-slim .cs-files li{ list-style:disc; display:list-item; }
.confirm-slim .cs-id{ margin:.6rem 0 0; font-size:.95rem; opacity:.85; }
.confirm-slim .cs-id code{
  font:.9rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  padding:.1rem .35rem; border:1px solid var(--form-bd,rgba(0,0,0,.12)); border-radius:.35rem;
}
.confirm-slim .cs-sign{ margin:.55rem 0 0; opacity:.92; }
.confirm-slim .cs-actions{ margin:.8rem 0 0; display:flex; gap:.6rem; flex-wrap:wrap; }
.confirm-slim .cs-again{
  border:1px solid var(--form-bd,rgba(0,0,0,.12)); background:transparent; color:inherit;
  border-radius:9999px; padding:.6rem 1rem; font-weight:700; cursor:pointer;
}
.confirm-slim .cs-home{
  border-radius:9999px; padding:.6rem 1rem; background:var(--indigo,#4c63d2); color:#fff; font-weight:700;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
}

/* Minimal themable styles (fallbacks included) */
#cookie-notice {
  position: fixed; inset: auto 16px 16px 16px;
  max-width: 720px; margin: 0 auto;
  z-index: 9999;
  background: var(--surface, #121724);
  color: var(--text, #e7eaf3);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  border: 1px solid rgba(125,125,150,.25);
  padding: 14px 16px;
  display: none; /* JS toggles */
}
#cookie-notice .cn-row { display:flex; gap:12px; align-items:center; }
#cookie-notice .cn-text { flex:1; line-height:1.35; font-size:14px; }
#cookie-notice .cn-actions { display:flex; gap:8px; }
#cookie-notice button {
  border: 0; cursor: pointer; font-weight:600; border-radius:8px; padding:8px 12px;
}
#cookie-notice .cn-accept { background: var(--brand, #4f7cff); color: #fff; }
#cookie-notice .cn-dismiss { background: transparent; color: var(--text, #e7eaf3); }
@media (prefers-reduced-motion:no-preference) {
  #cookie-notice.show { animation: cn-in .18s ease-out both; }
  @keyframes cn-in { from { transform: translateY(10px); opacity:0 } to { transform:none; opacity:1 } }
}
/* Bigger cookie notice */
#cookie-notice {
  inset: auto 24px 24px 24px;   /* more breathing room */
  max-width: 960px;             /* was 720px */
  width: calc(100% - 48px);     /* expand on wide screens */
  padding: 20px 24px;           /* larger padding */
}

#cookie-notice .cn-text {
  font-size: 16px;              /* was 14px */
  line-height: 1.55;
}

#cookie-notice .cn-actions { gap: 12px; }

#cookie-notice button {
  font-size: 15px;              /* larger buttons */
  padding: 12px 16px;           /* >= 44px tap target height */
  border-radius: 10px;
}

/* Mobile: full width bottom sheet + stacked buttons */
@media (max-width: 640px) {
  #cookie-notice {
    inset: auto 12px 12px 12px;
    width: auto;                /* full width (minus margins) */
    max-width: none;
    padding: 16px;
  }
  #cookie-notice .cn-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  #cookie-notice .cn-actions {
    width: 100%;
  }
  #cookie-notice button {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
  }
}
/* Theme-aware tokens just for the cookie notice */
:root {
  /* Prefer your site's variables if they exist; otherwise use light fallbacks */
  --cn-surface: var(--surface, #ffffff);
  --cn-text:    var(--text,    #0b1020);
  --cn-border:  var(--border,  rgba(0,0,0,.12));
  --cn-brand:   var(--brand,   #2563eb);
}

/* If your site toggles [data-theme="dark"] or a .dark class, inherit that */
[data-theme="dark"], .dark {
  --cn-surface: var(--surface, #121724);
  --cn-text:    var(--text,    #e7eaf3);
  --cn-border:  var(--border,  rgba(255,255,255,.14));
}

/* Also cover system dark when you’re not setting a data-theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --cn-surface: var(--surface, #121724);
    --cn-text:    var(--text,    #e7eaf3);
    --cn-border:  var(--border,  rgba(255,255,255,.14));
  }
}

/* Apply tokens to the banner */
#cookie-notice {
  background: var(--cn-surface);
  color: var(--cn-text);
  border: 1px solid var(--cn-border);
}

/* Buttons/links inherit correctly in both themes */
#cookie-notice .cn-text a { color: inherit; text-decoration: underline; }
#cookie-notice .cn-dismiss { color: inherit; background: transparent; }
#cookie-notice .cn-accept  { background: var(--cn-brand); color: #fff; }