/* =====================================================================
   Delete Social — stylesheet (v3 · "Security Operations Console")
   Premium trust-&-safety / security-ops aesthetic: layered dark surfaces,
   precise hairlines, monospace data, one restrained emerald signal colour,
   tasteful micro-interactions + scroll-reveal.
   Display: Space Grotesk · Body: Inter · Data: system mono — all self-hosted.
   ===================================================================== */

/* ---------- self-hosted fonts (woff2, latin, swap) ---------- */
@font-face{ font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/inter-400.woff2) format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/inter-500.woff2) format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/inter-600.woff2) format("woff2"); }
@font-face{ font-family:"Space Grotesk"; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/space-grotesk-500.woff2) format("woff2"); }
@font-face{ font-family:"Space Grotesk"; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/space-grotesk-600.woff2) format("woff2"); }
@font-face{ font-family:"Space Grotesk"; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/space-grotesk-700.woff2) format("woff2"); }

:root{
  --bg:        #07070a;
  --bg-2:      #0a0a0e;
  --panel:     #0f0f15;
  --panel-2:   #15151c;
  --panel-3:   #1b1b24;
  --line:      rgba(255,255,255,.10);
  --line-soft: rgba(255,255,255,.055);
  --line-strong:rgba(255,255,255,.17);
  --edge:      rgba(255,255,255,.05);   /* top-edge highlight on raised surfaces */
  --text:      #f3f4f6;
  --muted:     #9b9ba8;
  --faint:     #8a8a96;   /* AA-legible on dark (~4.5:1) for mono microcopy */
  --red:       #10b981;                  /* emerald — the single signal colour */
  --red-bright:#34d399;
  --red-2:     #0ea372;
  --red-ink:   rgba(16,185,129,.32);
  --red-soft:  rgba(16,185,129,.10);
  --red-glow:  rgba(16,185,129,.42);
  --maxw:      1200px;
  --r:         16px;
  --r-sm:      11px;
  --r-lg:      22px;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --shadow:    0 1px 0 0 var(--edge) inset, 0 30px 70px -34px rgba(0,0,0,.9);
  --shadow-lg: 0 1px 0 0 var(--edge) inset, 0 50px 110px -40px rgba(0,0,0,.95);
  --vh:        1vh;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --disp: "Space Grotesk", "Inter", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}

body{
  margin:0; border-top:3px solid var(--red);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.7;
  color:var(--text); background:var(--bg); overflow-x:clip; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* layered console backdrop: fine grid + soft emerald top-glow, masked to fade out */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(130% 65% at 50% -8%, #000 18%, transparent 70%);
          mask-image:radial-gradient(130% 65% at 50% -8%, #000 18%, transparent 70%);
}
body::after{
  content:""; position:fixed; top:0; left:0; right:0; height:540px; z-index:-2; pointer-events:none;
  background:radial-gradient(70% 100% at 50% 0%, rgba(16,185,129,.10), transparent 70%);
}

::selection{ background:var(--red); color:#04130d; }

img,svg{ max-width:100%; height:auto; display:block; }
a{ color:var(--text); text-decoration:none; }

h1,h2,h3,h4{ font-family:var(--disp); font-weight:600; line-height:1.04; letter-spacing:-.025em; margin:0 0 .5em; color:#fbfbfd; }
h1{ font-size:clamp(2.15rem,5.9vw,4.75rem); letter-spacing:-.035em; }
h2{ font-size:clamp(1.9rem,4vw,3.05rem); letter-spacing:-.03em; }
h3{ font-size:clamp(1.2rem,2vw,1.45rem); letter-spacing:-.014em; }
p{ margin:0 0 1rem; }
.lead{ font-size:clamp(1.12rem,2vw,1.34rem); line-height:1.6; color:var(--muted); max-width:60ch; }
.lead strong, strong{ color:#fff; font-weight:600; }

/* a11y */
.skip-link{ position:absolute; left:10px; top:-60px; z-index:1000; background:var(--red); color:#04130d; font-weight:600; padding:.7rem 1rem; border-radius:8px; transition:top .15s; }
.skip-link:focus{ top:10px; }
:focus-visible{ outline:2px solid var(--red-bright); outline-offset:3px; border-radius:4px; }

/* layout */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.3rem); }
.section{ padding-block:clamp(3.6rem,8vw,7.5rem); position:relative; }
.section--line{ border-top:1px solid var(--line-soft); }
.seclabel{ display:flex; align-items:center; gap:.7rem; font-family:var(--mono); font-size:.74rem; font-weight:500; letter-spacing:.16em; color:var(--red); margin-bottom:1.4rem; text-transform:uppercase; }
.seclabel::before{ content:""; width:26px; height:1px; background:var(--red); box-shadow:0 0 8px var(--red-glow); }
.sechead{ max-width:64ch; margin-bottom:clamp(2.2rem,4vw,3.2rem); }
.sechead h2{ margin-bottom:.35em; }
.sechead p{ color:var(--muted); font-size:1.08rem; }

/* scroll-reveal — JS adds .pre ONLY to off-screen elements (no flash for
   already-visible / no-JS / reduced-motion users; they stay fully visible). */
.reveal.pre{ opacity:0; transform:translateY(18px); }
.reveal.pre:not(.in){ will-change:opacity, transform; }
.reveal.pre.in{ opacity:1; transform:none; transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }

/* ---------------- header ---------------- */
.header{ position:sticky; top:0; z-index:100; background:rgba(7,7,10,.66); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); border-bottom:1px solid var(--line-soft); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:70px; }
.brand{ display:inline-flex; align-items:center; gap:.62rem; font-family:var(--disp); font-weight:600; font-size:1.2rem; letter-spacing:-.03em; color:#fff; }
.brand b{ color:var(--red); font-weight:600; }
.brand__mark{ width:27px; height:27px; flex:0 0 auto; filter:drop-shadow(0 2px 8px var(--red-glow)); transition:transform .35s var(--ease); }
.brand:hover .brand__mark{ transform:rotate(-6deg) scale(1.08); }

.nav__toggle{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; background:transparent; border:1px solid var(--line); border-radius:10px; color:var(--text); cursor:pointer; transition:border-color .15s, background .15s; }
.nav__toggle:hover{ border-color:var(--red); background:var(--red-soft); }
.nav__toggle svg{ width:22px; height:22px; }
.nav__toggle .x{ display:none; }
body.nav-open .nav__toggle .m{ display:none; }
body.nav-open .nav__toggle .x{ display:block; }

.nav__menu{ list-style:none; margin:0; padding:0; }
.nav__link{ display:flex; align-items:center; min-height:46px; padding:.5rem .95rem; font-size:.98rem; font-weight:500; color:var(--muted); border-radius:9px; transition:color .15s, background .15s; }
.nav__link:hover,.nav__link[aria-current="page"]{ color:#fff; }
.nav__link--cta{ color:#fff; border:1px solid var(--line); }
.nav__link--cta:hover{ border-color:var(--red); background:var(--red-soft); }

.nav__menu{
  position:fixed; inset:70px 0 auto 0; display:grid; gap:.15rem;
  padding:1.1rem clamp(1.1rem,4vw,2.3rem) 1.6rem;
  background:var(--bg-2); border-bottom:1px solid var(--line);
  transform:translateY(-130%); opacity:0; visibility:hidden;
  transition:transform .3s var(--ease), opacity .3s, visibility .3s;
  max-height:calc(100*var(--vh) - 70px); overflow-y:auto;
}
body.nav-open .nav__menu{ transform:translateY(0); opacity:1; visibility:visible; }
@media (min-width:900px){
  .nav__toggle{ display:none; }
  .nav__menu{ position:static; inset:auto; display:flex; align-items:center; gap:.4rem; padding:0; background:none; border:0; transform:none; opacity:1; visibility:visible; max-height:none; overflow:visible; }
}

/* ---------------- buttons ---------------- */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:50px; padding:.8rem 1.55rem; border-radius:999px; border:1px solid transparent; font-family:var(--sans); font-weight:600; font-size:1rem; cursor:pointer; overflow:hidden; transition:transform .14s var(--ease), background .18s, border-color .18s, color .18s, box-shadow .25s; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:18px; height:18px; }
/* subtle sheen sweep on primary */
.btn--primary{ background:linear-gradient(180deg,var(--red-bright),var(--red)); color:#04130d; box-shadow:0 12px 30px -14px var(--red-glow), 0 1px 0 0 rgba(255,255,255,.25) inset; }
.btn--primary::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); transform:translateX(-130%); transition:transform .6s var(--ease); }
.btn--primary:hover{ box-shadow:0 18px 42px -12px var(--red-glow), 0 1px 0 0 rgba(255,255,255,.3) inset; }
.btn--primary:hover::after{ transform:translateX(130%); }
.btn--line{ background:rgba(255,255,255,.02); color:#fff; border-color:var(--line); }
.btn--line:hover{ border-color:var(--red); background:var(--red-soft); }
.btn--sm{ min-height:42px; padding:.55rem 1.05rem; font-size:.92rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* ---------------- trust strip ---------------- */
.trustbar{ display:flex; flex-wrap:wrap; align-items:center; gap:.55rem 1.35rem; margin:0 0 1.9rem; padding:0; list-style:none; font-family:var(--mono); font-size:.76rem; letter-spacing:.04em; color:var(--faint); text-transform:uppercase; }
.trustbar li{ display:inline-flex; align-items:center; gap:.5rem; }
.trustbar li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--red); box-shadow:0 0 8px var(--red-glow); }

/* ---------------- hero ---------------- */
.hero{ position:relative; padding-block:clamp(3.6rem,8vw,7rem); overflow:hidden; }
.hero::before{ content:""; position:absolute; top:-30%; right:-10%; width:60%; height:150%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(16,185,129,.18), transparent 72%); filter:blur(10px); }
.hero__grid{ display:grid; gap:clamp(2.2rem,5vw,4.5rem); align-items:center; }
@media (min-width:980px){ .hero__grid{ grid-template-columns:1.06fr .94fr; } }
.hero h1{ margin-bottom:.3em; }
.hero h1 .accent{ color:var(--red); position:relative; }
.hero__tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.9rem; list-style:none; padding:0; }
.hero__tags li{ font-family:var(--mono); font-size:.78rem; letter-spacing:.02em; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:.42rem .85rem; background:rgba(255,255,255,.02); transition:border-color .15s, color .15s, background .15s; }
.hero__tags li:hover{ border-color:var(--red); color:#fff; background:var(--red-soft); }

/* ---------------- case console (elevated hero visual) ---------------- */
.report{ position:relative; background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line); border-radius:var(--r-lg); padding:0; box-shadow:var(--shadow-lg); overflow:hidden; }
.report::after{ content:""; position:absolute; inset:0; border-radius:var(--r-lg); padding:1px; pointer-events:none;
  background:linear-gradient(160deg, rgba(16,185,129,.5), transparent 38%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
/* window chrome */
.report__bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.3rem; border-bottom:1px solid var(--line-soft); background:rgba(255,255,255,.015); }
.report__id{ font-family:var(--mono); font-size:.78rem; letter-spacing:.04em; color:var(--muted); display:inline-flex; align-items:center; }
.report__id .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--red); margin-right:.55rem; vertical-align:middle; box-shadow:0 0 0 0 var(--red-glow); animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(16,185,129,.5);} 70%{ box-shadow:0 0 0 7px rgba(16,185,129,0);} 100%{ box-shadow:0 0 0 0 rgba(16,185,129,0);} }
.report__status{ font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.12em; color:var(--red-bright); border:1px solid var(--red-ink); background:var(--red-soft); border-radius:999px; padding:.3rem .7rem; }
.report__rows{ margin:0; padding:1.2rem 1.3rem; display:grid; gap:.7rem; }
.report__rows div{ display:flex; justify-content:space-between; gap:1rem; font-size:.95rem; align-items:baseline; }
.report__rows dt{ color:var(--faint); font-family:var(--mono); font-size:.8rem; letter-spacing:.03em; }
.report__rows dd{ margin:0; color:#fff; font-family:var(--mono); font-weight:500; text-align:right; }
.report__steps{ list-style:none; margin:0; padding:1.2rem 1.3rem 1.4rem; border-top:1px solid var(--line-soft); display:grid; gap:.8rem; background:rgba(255,255,255,.012); }
.report__steps li{ display:flex; align-items:center; gap:.75rem; font-size:.93rem; color:var(--muted); }
.report__steps .tick{ width:22px; height:22px; flex:0 0 auto; border-radius:50%; background:var(--red-soft); border:1px solid var(--red-ink); display:grid; place-items:center; }
.report__steps .tick svg{ width:12px; height:12px; stroke:var(--red-bright); }
.report__steps li.done{ color:#e9e9ee; }

/* ---------------- platform coverage band ---------------- */
.coverage{ display:flex; flex-wrap:wrap; gap:.7rem; list-style:none; margin:0; padding:0; }
.coverage li{ font-family:var(--mono); font-size:.82rem; letter-spacing:.02em; color:var(--muted); border:1px solid var(--line-soft); background:var(--panel); border-radius:999px; padding:.5rem 1rem; display:inline-flex; align-items:center; gap:.5rem; transition:border-color .18s, color .18s; }
.coverage li::before{ content:""; width:7px; height:7px; border-radius:2px; background:var(--red); box-shadow:0 0 8px var(--red-glow); }
.coverage li:hover{ border-color:var(--red); color:#fff; }

/* ---------------- editorial list (solutions rows) ---------------- */
.rows{ display:grid; }
.row{ display:grid; gap:.4rem 1.6rem; padding:1.8rem 1.1rem; margin-inline:-1.1rem; border-top:1px solid var(--line-soft); border-radius:14px; align-items:start; transition:background .2s var(--ease), transform .18s var(--ease); }
.row:last-child{ border-bottom:1px solid var(--line-soft); }
.row:hover{ background:linear-gradient(90deg, var(--red-soft), transparent 62%); transform:translateX(4px); }
@media (min-width:760px){ .row{ grid-template-columns:auto 1fr auto; align-items:center; } }
.row__no{ font-family:var(--mono); font-size:1rem; font-weight:500; color:var(--red); }
.row__body h3{ margin:0 0 .25rem; }
.row__body p{ margin:0; color:var(--muted); }
.row__go{ color:var(--muted); display:inline-flex; align-items:center; gap:.5rem; font-weight:500; font-size:.95rem; transition:color .15s; }
.row:hover .row__go{ color:#fff; }
.row__go svg{ width:18px; height:18px; transition:transform .18s var(--ease); }
.row:hover .row__go svg{ transform:translateX(4px); }

/* ---------------- service blocks ---------------- */
.service{ position:relative; padding:clamp(1.7rem,3vw,2.4rem); border:1px solid var(--line-soft); border-radius:var(--r); background:linear-gradient(180deg,var(--panel-2),var(--panel)); box-shadow:0 1px 0 0 var(--edge) inset; transition:border-color .2s, transform .18s var(--ease); }
.service:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.service + .service{ margin-top:1.3rem; }
.service h2{ font-size:clamp(1.4rem,3vw,1.95rem); margin-bottom:.6rem; }
.service__answer{ border-left:2px solid var(--red); padding-left:1rem; color:#e9e9ee; margin:.4rem 0 1.1rem; }
.service ul{ margin:0; padding-left:1.15rem; color:var(--muted); }
.service li{ margin-bottom:.45rem; }
.service li::marker{ color:var(--red); }

/* ---------------- steps ---------------- */
.steps{ display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; }
@media (min-width:760px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{ position:relative; background:var(--panel); padding:1.9rem 1.5rem; transition:background .25s; }
.step:hover{ background:var(--panel-2); }
.step__no{ font-family:var(--mono); font-size:1.7rem; font-weight:500; color:var(--red); line-height:1; margin-bottom:.8rem; letter-spacing:-.02em; }
.step h3{ font-size:1.08rem; margin-bottom:.35rem; }
.step p{ margin:0; color:var(--muted); font-size:.95rem; }

/* ---------------- principles ---------------- */
.principles{ display:grid; gap:1.7rem; }
@media (min-width:760px){ .principles{ grid-template-columns:repeat(3,1fr); } }
.principle{ position:relative; border-top:1px solid var(--red); padding-top:1.2rem; }
.principle::before{ content:""; position:absolute; top:-1px; left:0; width:42px; height:1px; background:var(--red-bright); box-shadow:0 0 10px var(--red-glow); }
.principle h3{ font-size:1.15rem; margin-bottom:.4rem; }
.principle p{ margin:0; color:var(--muted); }

/* ---------------- FAQ ---------------- */
.faq-grid{ display:grid; gap:clamp(1.5rem,4vw,3rem); }
@media (min-width:900px){ .faq-grid{ grid-template-columns:.72fr 1.28fr; } }
.faq{ display:grid; gap:.65rem; }
.faq details{ border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--panel); padding:0 1.25rem; transition:border-color .18s, background .18s; }
.faq details:hover{ border-color:var(--line); }
.faq details[open]{ border-color:var(--red-ink); background:var(--panel-2); }
.faq summary{ cursor:pointer; list-style:none; font-family:var(--disp); font-weight:500; font-size:1.05rem; padding:1.1rem 0; display:flex; justify-content:space-between; gap:1rem; align-items:center; min-height:48px; color:#f3f4f6; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--red); font-size:1.5rem; line-height:1; transition:transform .25s var(--ease); }
.faq details[open] summary::after{ transform:rotate(135deg); }
.faq details>p{ margin:0; padding:0 0 1.15rem; color:var(--muted); }

/* ---------------- CTA ---------------- */
.cta{ position:relative; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(2.4rem,5vw,4rem); text-align:center; overflow:hidden; box-shadow:var(--shadow);
  background:radial-gradient(135% 160% at 50% 0%, rgba(16,185,129,.16), transparent 56%), linear-gradient(180deg,var(--panel-2),var(--panel)); }
.cta h2{ margin-bottom:.5rem; }
.cta p{ color:var(--muted); max-width:56ch; margin:0 auto 1.7rem; }
.cta .btn-row{ justify-content:center; }

/* ---------------- blog ---------------- */
.post-grid__title{ margin-bottom:clamp(1.4rem,3vw,2rem); }
.post-grid{ display:grid; gap:clamp(1rem,2.5vw,1.5rem); grid-template-columns:1fr; }
@media (min-width:680px){ .post-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .post-grid{ grid-template-columns:repeat(3,1fr); } }
.post-card{ position:relative; display:flex; flex-direction:column; gap:.6rem; padding:1.7rem; border:1px solid var(--line-soft); border-radius:var(--r); background:linear-gradient(180deg,var(--panel-2),var(--panel)); box-shadow:0 1px 0 0 var(--edge) inset; transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .3s; }
.post-card:hover{ border-color:var(--line-strong); transform:translateY(-5px); box-shadow:var(--shadow); }
.post-card__meta{ font-size:.78rem; color:var(--faint); font-family:var(--mono); letter-spacing:.04em; text-transform:uppercase; }
.post-card h3{ margin:0; font-size:1.18rem; }
.post-card h3 a{ color:#fff; }
.post-card p{ margin:0; color:var(--muted); font-size:.96rem; }
.post-card__more{ margin-top:auto; color:var(--red); font-weight:600; font-size:.9rem; font-family:var(--mono); letter-spacing:.03em; }

/* ---------------- article ---------------- */
.article{ max-width:73ch; margin-inline:auto; }
.article h2{ margin-top:2.4rem; font-size:clamp(1.4rem,3vw,1.95rem); }
.article ul,.article ol{ padding-left:1.25rem; color:var(--muted); }
.article li{ margin-bottom:.5rem; }
.article li::marker{ color:var(--red); }
.article a:not(.btn){ color:var(--red-bright); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; overflow-wrap:anywhere; }
.article a:not(.btn):hover{ color:#fff; }
.article table{ width:100%; border-collapse:collapse; margin:1.2rem 0; }
.article th,.article td{ text-align:left; padding:.72rem; border-bottom:1px solid var(--line-soft); }
.article th{ font-family:var(--disp); color:#fff; }
.article img{ border:1px solid var(--line-soft); border-radius:var(--r); margin:1.6rem auto; box-shadow:0 1px 0 0 var(--edge) inset; }
.answer{ border-left:2px solid var(--red); padding:.3rem 0 .3rem 1.15rem; color:#eaeaef; font-size:1.09rem; margin:1.3rem 0 1.7rem; background:linear-gradient(90deg, var(--red-soft), transparent 70%); }
.crumbs{ font-size:.84rem; color:var(--faint); margin-bottom:1.2rem; font-family:var(--mono); letter-spacing:.02em; overflow-wrap:anywhere; }
.crumbs a{ color:var(--muted); }
.crumbs a:hover{ color:#fff; }
.meta{ color:var(--faint); font-family:var(--mono); font-size:.82rem; letter-spacing:.03em; margin-bottom:.6rem; text-transform:uppercase; }

/* ---------------- note ---------------- */
.note{ border:1px solid var(--line); border-left:3px solid var(--red); border-radius:var(--r-sm); padding:1.15rem 1.35rem; color:#e9e9ee; background:var(--panel); }
.note strong{ color:#fff; }

/* ============ CONTACT ============ */
.contact-layout{ display:grid; gap:1.3rem; }
@media (min-width:920px){ .contact-layout{ grid-template-columns:1.12fr .88fr; gap:1.8rem; align-items:start; } }
.ch{ display:flex; align-items:center; gap:1.15rem; padding:1.6rem 1.7rem; border:1px solid var(--line-soft); border-radius:var(--r);
  background:linear-gradient(180deg,var(--panel-2),var(--panel)); box-shadow:0 1px 0 0 var(--edge) inset; transition:border-color .2s, transform .18s var(--ease), box-shadow .3s; }
.ch + .ch{ margin-top:1.15rem; }
.ch:hover{ border-color:var(--red); transform:translateY(-3px); box-shadow:0 24px 54px -28px var(--red-glow); }
.ch__glyph{ width:56px; height:56px; flex:0 0 auto; border:1px solid var(--line); border-radius:15px; display:grid; place-items:center; background:var(--bg); }
.ch__glyph svg{ width:27px; height:27px; stroke:var(--red-bright); fill:none; stroke-width:2; }
.ch__body{ flex:1; min-width:0; }
.ch__label{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:.2rem; }
.ch__id{ font-family:var(--disp); font-size:clamp(1.1rem,2.4vw,1.35rem); color:#fff; word-break:break-word; overflow-wrap:anywhere; line-height:1.15; }
.ch__actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.85rem; }
.copy{ display:inline-flex; align-items:center; gap:.4rem; min-height:42px; padding:.5rem .95rem; background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:999px; font-family:var(--mono); font-size:.86rem; cursor:pointer; transition:border-color .15s, color .15s; }
.copy:hover{ border-color:var(--red); color:#fff; }
.copy.copied{ color:var(--red-bright); border-color:var(--red); }
.copy svg{ width:15px; height:15px; }
.side-panel{ border:1px solid var(--line-soft); border-radius:var(--r); padding:1.7rem; background:var(--panel); }
.side-panel + .side-panel{ margin-top:1.3rem; }
.side-panel h2{ font-family:var(--disp); font-size:1.05rem; margin:0 0 1rem; letter-spacing:-.01em; }
.checklist{ list-style:none; margin:0; padding:0; display:grid; gap:.78rem; }
.checklist li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--muted); font-size:.96rem; }
.checklist .tick{ width:20px; height:20px; flex:0 0 auto; margin-top:.15rem; border-radius:50%; background:var(--red-soft); border:1px solid var(--red-ink); display:grid; place-items:center; }
.checklist .tick svg{ width:11px; height:11px; stroke:var(--red-bright); fill:none; }
.ministeps{ list-style:none; margin:0; padding:0; counter-reset:s; display:grid; gap:.88rem; }
.ministeps li{ display:flex; gap:.8rem; align-items:flex-start; color:var(--muted); font-size:.96rem; }
.ministeps li::before{ counter-increment:s; content:counter(s); flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--bg); border:1px solid var(--line); color:var(--red); font-family:var(--mono); font-size:.8rem; font-weight:600; display:grid; place-items:center; }
.reassure{ margin-top:1.3rem; color:var(--faint); font-size:.88rem; }

/* ---------------- footer ---------------- */
.footer{ border-top:1px solid var(--line-soft); padding-block:clamp(2.6rem,6vw,4.2rem) 2rem; margin-top:2rem; background:var(--bg-2); }
.footer__grid{ display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:760px){ .footer__grid{ grid-template-columns:2fr 1fr 1.4fr; } }
.footer h4{ font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; color:var(--faint); margin:0 0 1rem; font-weight:500; }
.footer__links{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.footer__links a{ color:var(--muted); transition:color .15s; overflow-wrap:anywhere; }
.footer__links a:hover{ color:#fff; }
.footer__note{ color:var(--muted); font-size:.9rem; max-width:44ch; margin:1rem 0 0; }
.footer__bottom{ border-top:1px solid var(--line-soft); margin-top:2.6rem; padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between; color:var(--faint); font-size:.85rem; font-family:var(--mono); letter-spacing:.02em; }
.footer__bottom a{ color:var(--muted); }
.footer__bottom a:hover{ color:#fff; }

/* ============ Branded contact buttons ============ */
.btn--tg{ background:#229ED9; color:#fff; box-shadow:0 12px 30px -14px rgba(34,158,217,.6); }
.btn--tg:hover{ background:#1d8cc0; }
.btn--wa{ background:#25D366; color:#062b14; box-shadow:0 12px 30px -14px rgba(37,211,102,.55); }
.btn--wa:hover{ background:#20bd5a; }

/* ============ Inline CTA (blog articles) ============ */
.inline-cta{ margin:2rem 0 2.4rem; padding:clamp(1.5rem,4vw,2rem) 1.6rem; text-align:center; border:1px solid var(--line); border-radius:var(--r); box-shadow:0 1px 0 0 var(--edge) inset;
  background:radial-gradient(135% 180% at 50% 0%, rgba(16,185,129,.15), transparent 60%), linear-gradient(180deg,var(--panel-2),var(--panel)); }
.inline-cta h3{ margin:0 0 .45rem; font-size:clamp(1.25rem,3vw,1.5rem); }
.inline-cta p{ margin:0 auto 1.3rem; color:var(--muted); max-width:50ch; }
.inline-cta__btns{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }

/* ============ Contact hero ============ */
.contact-hero{ text-align:center; padding-top:clamp(2.6rem,6vw,4.8rem); }
.contact-hero__head{ max-width:62ch; margin:0 auto; }
.contact-hero .seclabel{ justify-content:center; }
.contact-hero h1{ font-size:clamp(2.4rem,6vw,3.8rem); margin-bottom:.4em; }
.contact-hero .lead{ margin:0 auto; }
.channels{ display:grid; gap:1.15rem; max-width:920px; margin:clamp(2.1rem,4vw,3rem) auto 0; }
@media (min-width:720px){ .channels{ grid-template-columns:1fr 1fr; } }
.ch--big{ flex-direction:column; align-items:center; text-align:center; gap:.4rem; padding:clamp(2rem,4vw,2.6rem) 1.5rem; }
.ch--big .ch__glyph{ width:66px; height:66px; margin-bottom:.55rem; }
.ch--big .ch__glyph svg{ width:31px; height:31px; }
.ch--big .ch__body{ width:100%; }
.ch--big .ch__actions{ justify-content:center; margin-top:1.25rem; }
.contact-extra{ display:grid; gap:1.3rem; max-width:920px; margin:0 auto; }
@media (min-width:760px){ .contact-extra{ grid-template-columns:1fr 1fr; align-items:start; } }

/* ============ Mobile refinements ============ */
@media (max-width:560px){
  .section{ padding-block:clamp(2.8rem,9vw,4.2rem); }
  .wrap{ padding-inline:1.05rem; }
  .hero{ padding-block:2.6rem; }
  .hero h1{ line-height:1.07; }
  .btn{ min-height:48px; }
  .btn-row{ width:100%; }
  .btn-row .btn{ flex:1 1 46%; }
  .cta .btn-row .btn,.inline-cta__btns .btn{ flex:1 1 140px; }
  .ch{ padding:1.4rem; }
  .ch--big .ch__actions{ width:100%; }
  .ch--big .ch__actions .btn{ flex:1 1 auto; }
  .report__rows div{ font-size:.9rem; }
  .step{ padding:1.5rem 1.25rem; }
  .service{ padding:1.45rem; }
  .faq summary{ font-size:1rem; }
}

/* ============ Mobile hardening (shared sheet — every page) ============ */
.article a,.footer__links a,.ch__id,.crumbs{ overflow-wrap:anywhere; }
@media (max-width:600px){
  .article table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
}
@supports (padding:max(0px)){
  .wrap{
    padding-left:max(clamp(1.1rem,4vw,2.3rem), env(safe-area-inset-left));
    padding-right:max(clamp(1.1rem,4vw,2.3rem), env(safe-area-inset-right));
  }
}
@media (max-width:380px){
  body{ font-size:1rem; }
  .wrap{ padding-inline:.9rem; }
  .btn{ padding-inline:1.1rem; min-height:46px; }
  .btn-row .btn{ flex:1 1 100%; }
  .brand{ font-size:1.05rem; }
  h1{ font-size:clamp(1.8rem,8.5vw,2.2rem); }
  .hero__tags li{ font-size:.74rem; }
}