/*
 * Sadeem Solution — design system v2
 * Extracted from the approved prototype. The legacy Bootstrap/MDB/designesia
 * stack is dequeued site-wide (see functions.php); this file is self-contained.
 */

/* ============================= TOKENS (dark canonical) ============================= */
:root{
  --bg:#070B12; --bg-2:#0A1018; --surf:#0F1725; --surf-2:#141E2E; --surf-3:#1A2536;
  --line:#1D2A3E; --line-2:#2B3B53;
  --ink:#EAF1F9; --ink-2:#94A7C0; --ink-3:#61748E;
  --cy:#35C9E8; --cy-2:#0E96B8; --vi:#7C6CF0;
  --glow-cy:rgba(53,201,232,.20); --glow-vi:rgba(124,108,240,.16);
  --chip:rgba(53,201,232,.10); --chip-line:rgba(53,201,232,.30);
  --shadow-lg:0 30px 70px -40px rgba(0,0,0,.95), 0 0 0 1px var(--line);
  --shadow-md:0 18px 40px -28px rgba(0,0,0,.9);
  --wa:#25D366;

  --display:"Alexandria",system-ui,sans-serif;
  --sans:"IBM Plex Sans Arabic",system-ui,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --maxw:1200px;
  --r:14px; --r-sm:10px;
}
@media (prefers-color-scheme:light){
  :root:not([data-t="dark"]){
    --bg:#FFFFFF; --bg-2:#F5F8FC; --surf:#FFFFFF; --surf-2:#F3F7FB; --surf-3:#E9F0F8;
    --line:#E1E9F3; --line-2:#CBD8E8;
    --ink:#08121F; --ink-2:#485C77; --ink-3:#6F8299;
    --cy:#0B7E9B; --cy-2:#0A6A84; --vi:#5B4BD6;
    --glow-cy:rgba(11,126,155,.13); --glow-vi:rgba(91,75,214,.10);
    --chip:rgba(11,126,155,.08); --chip-line:rgba(11,126,155,.28);
    --shadow-lg:0 30px 60px -38px rgba(10,30,60,.42), 0 0 0 1px var(--line);
    --shadow-md:0 16px 34px -26px rgba(10,30,60,.35);
  }
}
:root[data-t="light"]{
  --bg:#FFFFFF; --bg-2:#F5F8FC; --surf:#FFFFFF; --surf-2:#F3F7FB; --surf-3:#E9F0F8;
  --line:#E1E9F3; --line-2:#CBD8E8;
  --ink:#08121F; --ink-2:#485C77; --ink-3:#6F8299;
  --cy:#0B7E9B; --cy-2:#0A6A84; --vi:#5B4BD6;
  --glow-cy:rgba(11,126,155,.13); --glow-vi:rgba(91,75,214,.10);
  --chip:rgba(11,126,155,.08); --chip-line:rgba(11,126,155,.28);
  --shadow-lg:0 30px 60px -38px rgba(10,30,60,.42), 0 0 0 1px var(--line);
  --shadow-md:0 16px 34px -26px rgba(10,30,60,.35);
}

*,*::before,*::after{box-sizing:border-box;}
body.sdv2{
  direction:rtl; margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.8;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.sdv2 h1,.sdv2 h2,.sdv2 h3,.sdv2 h4{margin:0; font-family:var(--display); font-weight:600; line-height:1.25; letter-spacing:-.02em; text-wrap:balance;}
.sdv2 p{margin:0;}
.sdv2 a{color:inherit; text-decoration:none;}
.sdv2 img,.sdv2 svg{max-width:100%;}
.sdv2 :focus-visible{outline:2px solid var(--cy); outline-offset:3px; border-radius:4px;}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important;}}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:24px;}
.chip{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.06em; color:var(--cy); background:var(--chip);
  border:1px solid var(--chip-line); padding:6px 13px; border-radius:100px;
}
.chip .dot{width:6px; height:6px; border-radius:50%; background:var(--cy); flex:none;}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--cy);}
.lede{color:var(--ink-2); font-size:17px; max-width:56ch;}

/* ============================= BUTTONS ============================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-size:15px; font-weight:500; padding:13px 26px;
  border-radius:100px; border:1px solid transparent; cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, background .18s, border-color .18s, color .18s;
}
.btn svg{width:17px; height:17px; flex:none;}
.btn-p{
  background:linear-gradient(135deg,var(--cy),var(--cy-2)); color:#04141A;
  box-shadow:0 10px 30px -12px var(--glow-cy);
}
.btn-p:hover{transform:translateY(-2px); box-shadow:0 16px 38px -12px var(--glow-cy);}
.btn-g{border-color:var(--line-2); color:var(--ink); background:var(--surf-2);}
.btn-g:hover{border-color:var(--cy); color:var(--cy); transform:translateY(-2px);}
.btn-wa{background:var(--wa); color:#04210F; box-shadow:0 10px 30px -14px rgba(37,211,102,.6);}
.btn-wa:hover{transform:translateY(-2px);}

/* ============================= NAV ============================= */
.nav{position:sticky; top:0; z-index:80; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line);}
.nav-in{max-width:var(--maxw); margin-inline:auto; padding:14px 24px; display:flex; align-items:center; gap:26px;}
.logo{display:flex; align-items:center; gap:11px;}
.logo-mark{width:34px; height:34px; flex:none;}
.logo b{font-family:var(--display); font-weight:700; font-size:16px; display:block; line-height:1.3;}
.logo span{font-size:11.5px; color:var(--ink-3); display:block; line-height:1.3;}
.links{display:flex; gap:28px; margin-inline-start:auto; align-items:center;}
.links a{font-size:14.5px; color:var(--ink-2); position:relative; padding:4px 0; transition:color .18s;}
.links a::after{content:""; position:absolute; inset-inline-start:0; bottom:0; height:1.5px; width:0; background:var(--cy); transition:width .22s;}
.links a:hover{color:var(--ink);} .links a:hover::after{width:100%;}
.burger{display:none; margin-inline-start:auto; width:42px; height:40px; border:1px solid var(--line-2); background:var(--surf-2); border-radius:10px; cursor:pointer; align-items:center; justify-content:center;}
.burger i{display:block; width:16px; height:1.6px; background:var(--ink); position:relative;}
.burger i::before,.burger i::after{content:""; position:absolute; inset-inline-start:0; width:16px; height:1.6px; background:var(--ink);}
.burger i::before{top:-5px;} .burger i::after{top:5px;}
@media(max-width:940px){
  .burger{display:flex;}
  .links{display:none; position:absolute; inset-inline:0; top:100%; background:var(--bg); border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; gap:0; padding:8px 24px 20px;}
  .links.open{display:flex;}
  .links a{padding:13px 0; border-bottom:1px solid var(--line);}
  .links .btn{margin-top:14px;}
}

/* ============================= HERO ============================= */
.hero{position:relative; padding:72px 0 88px; overflow:hidden;}
.aura{position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0;}
.aura-1{width:620px; height:620px; background:var(--glow-cy); top:-260px; inset-inline-end:-160px; animation:drift 22s ease-in-out infinite alternate;}
.aura-2{width:520px; height:520px; background:var(--glow-vi); top:180px; inset-inline-start:-220px; animation:drift 26s ease-in-out infinite alternate-reverse;}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1);} to{transform:translate3d(0,40px,0) scale(1.12);}}
.hero-grid{position:relative; z-index:1; display:grid; gap:56px; grid-template-columns:1fr;}
@media(min-width:1020px){.hero-grid{grid-template-columns:1.02fr 1.18fr; align-items:center; gap:48px;}}
.hero h1{font-size:clamp(34px,5.4vw,60px); font-weight:700; margin:22px 0 20px;}
.hero h1 .grad{background:linear-gradient(120deg,var(--cy),var(--vi)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:34px;}
.hero-tr{display:flex; gap:12px 26px; flex-wrap:wrap; margin-top:38px; padding-top:26px; border-top:1px solid var(--line);}
.hero-tr div{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-2);}
.hero-tr svg{width:16px; height:16px; color:var(--cy); flex:none;}

/* ---------- build-environment mockup ---------- */
.mock{position:relative;}
.mock-win{
  background:var(--surf); border-radius:var(--r); box-shadow:var(--shadow-lg); overflow:hidden;
  transform:perspective(1600px) rotateY(4deg) rotateX(2deg); transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.mock:hover .mock-win{transform:perspective(1600px) rotateY(0) rotateX(0);}
@media(max-width:1019px){.mock-win{transform:none;}}
.mock-bar{display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--surf-2); border-bottom:1px solid var(--line);}
.mock-bar .d{width:9px; height:9px; border-radius:50%; background:var(--line-2); flex:none;}
.tabs{display:flex; gap:2px; margin-inline-start:12px; overflow:hidden;}
.tabs b{
  font-family:var(--mono); font-size:10px; font-weight:400; color:var(--ink-3);
  padding:5px 11px; border-radius:7px 7px 0 0; white-space:nowrap; direction:ltr;
}
.tabs b.on{background:var(--surf); color:var(--cy); box-shadow:inset 0 -2px 0 var(--cy);}
.mock-body{display:grid; grid-template-columns:1fr; min-height:360px;}
@media(min-width:560px){.mock-body{grid-template-columns:1.06fr .94fr;}}

/* code pane */
.code{padding:16px 14px; direction:ltr; text-align:left; font-family:var(--mono); font-size:11.5px; line-height:2; overflow:hidden;}
.code .l{display:flex; gap:13px; white-space:pre;}
.code .n{color:var(--ink-3); opacity:.45; width:12px; text-align:right; flex:none; user-select:none;}
.k{color:var(--vi);} .f{color:var(--cy);} .st{color:#7BD88F;} .c{color:var(--ink-3); opacity:.8;} .p{color:var(--ink-2);}
.caret{display:inline-block; width:7px; height:13px; background:var(--cy); vertical-align:-2px; animation:blink 1.1s steps(1) infinite;}
@keyframes blink{0%,50%{opacity:1;} 51%,100%{opacity:0;}}

/* live preview pane */
.prev{border-inline-start:1px solid var(--line); background:var(--bg-2); padding:14px; display:flex; flex-direction:column; gap:10px;}
.prev-t{display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:9.5px; color:var(--ink-3);}
.prev-t .live{width:5px; height:5px; border-radius:50%; background:var(--wa); animation:pulse 1.9s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.25;}}
.site{background:var(--surf); border:1px solid var(--line); border-radius:9px; overflow:hidden; flex:1; display:flex; flex-direction:column;}
.site-nav{display:flex; align-items:center; gap:5px; padding:8px 10px; border-bottom:1px solid var(--line);}
.site-nav .lg{width:14px; height:14px; border-radius:4px; background:linear-gradient(135deg,var(--cy),var(--vi)); flex:none;}
.site-nav s{height:4px; width:20px; border-radius:2px; background:var(--line-2); text-decoration:none;}
.site-nav s:nth-child(3){width:26px;} .site-nav s:nth-child(4){width:16px;}
.site-nav .cta{margin-inline-start:auto; height:11px; width:34px; border-radius:100px; background:var(--cy); opacity:.85;}
.site-hero{padding:14px 12px 12px; display:grid; gap:6px;}
.site-hero s{height:8px; border-radius:3px; background:var(--line-2); text-decoration:none;}
.site-hero s.big{height:11px; width:82%; background:linear-gradient(90deg,var(--cy),var(--vi)); opacity:.9;}
.site-hero s.two{width:62%;}
.site-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding:0 12px 12px;}
.site-cards div{background:var(--surf-2); border:1px solid var(--line); border-radius:7px; padding:9px 7px; display:grid; gap:5px;}
.site-cards i{display:block; width:13px; height:13px; border-radius:4px; background:var(--chip); border:1px solid var(--chip-line);}
.site-cards s{height:4px; border-radius:2px; background:var(--line-2); text-decoration:none;}
.site-cards s:last-child{width:70%;}

/* build status strip */
.build{display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid var(--line); background:var(--surf-2); font-family:var(--mono); font-size:10px; color:var(--ink-3);}
.build .ok{display:flex; align-items:center; gap:6px; color:#7BD88F;}
.build .ok svg{width:12px; height:12px;}
.build .barr{flex:1; height:3px; border-radius:3px; background:var(--line); overflow:hidden;}
.build .barr i{display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--cy),var(--vi)); border-radius:3px; transform-origin:right; animation:fill 3.4s ease-in-out infinite;}
@keyframes fill{0%{transform:scaleX(.15);} 55%{transform:scaleX(1);} 100%{transform:scaleX(1);}}

.mock-stat{
  position:absolute; inset-inline-start:-18px; bottom:-24px; background:var(--surf-2);
  border:1px solid var(--line-2); border-radius:12px; padding:13px 16px; box-shadow:var(--shadow-md);
  display:flex; align-items:center; gap:12px;
}
@media(max-width:1019px){.mock-stat{position:static; margin-top:16px; display:inline-flex;}}
.mock-stat .ic{width:32px; height:32px; border-radius:9px; background:var(--chip); display:grid; place-items:center; color:var(--cy); flex:none;}
.mock-stat .n{font-family:var(--display); font-weight:700; font-size:16px; line-height:1.25;}
.mock-stat .l{font-size:10.5px; color:var(--ink-3);}

/* ============================= CAPABILITY BAND ============================= */
.band{border-block:1px solid var(--line); background:var(--bg-2);}
.band-in{display:flex; align-items:center; gap:16px 40px; flex-wrap:wrap; padding:22px 24px; max-width:var(--maxw); margin-inline:auto;}
.band-in .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);}
.band-in .it{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-2);}
.band-in .it svg{width:15px; height:15px; color:var(--cy);}

/* ============================= SECTIONS ============================= */
.sdv2 .sec{padding:96px 0;}
.head{max-width:640px; margin-bottom:52px;}
.head h2{font-size:clamp(26px,3.5vw,40px); margin:16px 0 16px;}
.head.mid{margin-inline:auto; text-align:center;}

/* ---------- bento services ---------- */
.bento{display:grid; gap:16px; grid-template-columns:1fr;}
@media(min-width:700px){.bento{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1040px){.bento{grid-template-columns:repeat(3,1fr);}}
.card{
  position:relative; background:var(--surf); border:1px solid var(--line); border-radius:var(--r);
  padding:28px 26px; overflow:hidden; transition:transform .22s cubic-bezier(.2,.8,.3,1), border-color .22s;
}
.card::before{
  content:""; position:absolute; inset:0; border-radius:var(--r); pointer-events:none;
  background:radial-gradient(420px 200px at 85% 0%, var(--glow-cy), transparent 70%);
  opacity:0; transition:opacity .3s;
}
.card:hover{transform:translateY(-4px); border-color:var(--line-2);}
.card:hover::before{opacity:1;}
.card > *{position:relative;}
.card .ic{width:46px; height:46px; border-radius:12px; background:var(--chip); border:1px solid var(--chip-line); display:grid; place-items:center; color:var(--cy); margin-bottom:18px;}
.card .ic svg{width:22px; height:22px;}
.card h3{font-size:18px; margin-bottom:9px;}
.card p{font-size:14px; color:var(--ink-2); line-height:1.75;}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:18px;}
.tags b{font-family:var(--mono); font-size:10.5px; font-weight:400; color:var(--ink-2); background:var(--surf-2); border:1px solid var(--line); padding:4px 10px; border-radius:100px;}
.card.wide{grid-column:span 1;}
@media(min-width:700px){.card.wide{grid-column:span 2;}}
.card.wide .inner{display:grid; gap:26px; grid-template-columns:1fr;}
@media(min-width:820px){.card.wide .inner{grid-template-columns:1fr .85fr; align-items:center;}}

/* pacs mini-diagram inside the wide card */
.flow{display:flex; align-items:center; gap:9px; background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:15px 14px;}
.flow .node{flex:1; text-align:center; background:var(--surf-2); border:1px solid var(--line-2); border-radius:9px; padding:11px 6px;}
.flow .node b{display:block; font-family:var(--display); font-size:11.5px; font-weight:600;}
.flow .node i{display:block; font-family:var(--mono); font-style:normal; font-size:9px; color:var(--ink-3); margin-top:3px;}
.flow .node.hi{border-color:var(--cy); background:var(--chip);}
.flow .arw{flex:none; color:var(--cy); opacity:.7;}
.flow .arw svg{width:16px; height:16px; display:block;}

/* ---------- products ---------- */
.prods{display:grid; gap:20px; grid-template-columns:1fr;}
@media(min-width:860px){.prods{grid-template-columns:repeat(2,1fr);}}
.prod{background:var(--surf); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:transform .22s, border-color .22s;}
.prod:hover{transform:translateY(-4px); border-color:var(--line-2);}
/* each panel carries its own product's real brand world */
.prod-vis{height:194px; position:relative; overflow:hidden; border-bottom:1px solid var(--line); padding:16px;}

/* --- Zagel: light blue, SMS yellow, WhatsApp green, growth bars --- */
.pv-zagel{background:linear-gradient(165deg,#E8F4FC,#D6EAF6);}
.pv-zagel .brand{display:flex; align-items:center; gap:7px; margin-bottom:12px;}
.pv-zagel .brand svg{width:20px; height:20px; color:#2E6FD9;}
.pv-zagel .brand b{font-family:var(--display); font-weight:700; font-size:15px; color:#1B3E6F; direction:ltr;}
.pv-float{position:absolute; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -8px rgba(20,50,90,.4);}
.pv-sms{
  top:16px; inset-inline-start:20px; background:#FFC93C; color:#4A3200; border-radius:11px;
  padding:6px 13px; font-family:var(--display); font-weight:700; font-size:12px; direction:ltr;
  animation:float1 4.5s ease-in-out infinite;
}
.pv-wa{
  top:66px; inset-inline-start:92px; width:38px; height:38px; border-radius:50%; background:#25D366; color:#fff;
  animation:float1 5.4s ease-in-out infinite reverse;
}
.pv-wa svg{width:20px; height:20px;}
@keyframes float1{0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);}}
.pv-chart{position:absolute; inset-inline-end:18px; bottom:16px; display:flex; align-items:flex-end; gap:5px; height:76px;}
.pv-chart i{width:13px; border-radius:3px 3px 0 0; background:#3FBF6E;}
.pv-chart i:nth-child(1){height:34%; background:#8FD9AE;}
.pv-chart i:nth-child(2){height:52%; background:#6ECB92;}
.pv-chart i:nth-child(3){height:74%;}
.pv-chart i:nth-child(4){height:100%; background:#2E9E58;}
.pv-arrow{position:absolute; inset-inline-end:18px; bottom:92px; color:#1B3E6F;}
.pv-arrow svg{width:58px; height:26px;}

/* --- ZagelCRM: dark green, grid, chat bubbles --- */
.pv-crm{background:#0C2419; background-image:linear-gradient(rgba(52,211,153,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(52,211,153,.07) 1px,transparent 1px); background-size:22px 22px;}
.pv-crm::after{content:""; position:absolute; width:230px; height:230px; border-radius:50%; background:rgba(52,211,153,.20); filter:blur(58px); top:-110px; inset-inline-start:-50px;}
.pv-crm .brand{position:relative; display:flex; align-items:center; gap:8px; margin-bottom:12px;}
.pv-crm .brand .av{width:22px; height:22px; border-radius:50%; background:#34D399; display:grid; place-items:center; color:#04210F;}
.pv-crm .brand .av svg{width:12px; height:12px;}
.pv-crm .brand b{font-family:var(--display); font-weight:700; font-size:13px; color:#E6FBF0;}
.pv-crm .brand span{font-family:var(--mono); font-size:9px; color:#34D399; display:flex; align-items:center; gap:5px;}
.pv-crm .brand span::before{content:""; width:5px; height:5px; border-radius:50%; background:#34D399; animation:pulse 1.9s infinite;}
.pv-b{position:relative; max-width:78%; font-size:10.5px; line-height:1.7; padding:7px 11px; border-radius:11px; margin-bottom:7px;}
.pv-b.them{background:#16382A; color:#CFEEE0; border-end-end-radius:3px;}
.pv-b.us{background:#1FA463; color:#F0FFF7; border-end-start-radius:3px; margin-inline-start:auto;}
.pv-b .mt{display:block; font-family:var(--mono); font-size:8px; opacity:.75; margin-top:3px;}

.prod-b{padding:24px 26px 26px; display:flex; flex-direction:column; gap:11px; flex:1;}
.prod-b .top{display:flex; align-items:center; gap:10px;}
.prod-b h3{font-size:19px;}
.prod-b .tag{font-family:var(--mono); font-size:10px; color:var(--cy); background:var(--chip); border:1px solid var(--chip-line); padding:3px 10px; border-radius:100px;}
.prod-b .tag.wa{color:var(--wa); background:rgba(37,211,102,.10); border-color:rgba(37,211,102,.34); display:inline-flex; align-items:center; gap:5px;}
.prod-b .tag.wa svg{width:11px; height:11px;}
.prod-b .top{flex-wrap:wrap;}
.prod-b p{font-size:14px; color:var(--ink-2);}
.prod-b ul{list-style:none; margin:4px 0 0; padding:0; display:grid; gap:8px;}
.prod-b li{font-size:13px; color:var(--ink-2); display:flex; gap:9px; align-items:flex-start;}
.prod-b li svg{width:15px; height:15px; color:var(--cy); flex:none; margin-top:4px;}
.prod-b .go{margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; color:var(--cy);}
.prod-b .go svg{width:14px; height:14px; transition:transform .2s;}
.prod:hover .go svg{transform:translateX(-4px);}

/* ---------- process rail ---------- */
.rail{position:relative; display:grid; gap:20px; grid-template-columns:1fr;}
@media(min-width:760px){.rail{grid-template-columns:repeat(4,1fr); gap:14px;}
  .rail::before{content:""; position:absolute; top:21px; inset-inline:6%; height:1px; background:linear-gradient(90deg,transparent,var(--line-2),var(--line-2),transparent);}}
.step{position:relative; padding-top:0;}
.step .n{
  width:42px; height:42px; border-radius:50%; background:var(--surf); border:1px solid var(--line-2);
  display:grid; place-items:center; font-family:var(--mono); font-size:13px; color:var(--cy);
  margin-bottom:18px; position:relative; z-index:1;
}
.step:first-child .n{background:linear-gradient(135deg,var(--cy),var(--cy-2)); color:#04141A; border-color:transparent;}
.step h3{font-size:16px; margin-bottom:8px;}
.step p{font-size:13.5px; color:var(--ink-2);}

/* ---------- CTA ---------- */
.cta-panel{
  position:relative; overflow:hidden; border:1px solid var(--line-2); border-radius:22px;
  background:linear-gradient(140deg,var(--surf-2),var(--bg-2)); padding:56px 42px; text-align:center;
}
.cta-panel::before{content:""; position:absolute; width:520px; height:520px; border-radius:50%; background:var(--glow-cy); filter:blur(90px); top:-300px; inset-inline-end:-120px; pointer-events:none;}
.cta-panel::after{content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:var(--glow-vi); filter:blur(90px); bottom:-280px; inset-inline-start:-100px; pointer-events:none;}
.cta-panel > *{position:relative;}
.cta-panel h2{font-size:clamp(24px,3.4vw,38px); margin:16px auto 16px; max-width:20ch;}
.cta-panel p{color:var(--ink-2); max-width:52ch; margin-inline:auto; font-size:15.5px;}
.cta-b{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px;}

/* ---------- footer ---------- */
.sdv2 .site-footer{border-top:1px solid var(--line); background:var(--bg-2); padding:60px 0 34px;}
.f-grid{display:grid; gap:38px; grid-template-columns:1fr; margin-bottom:40px;}
@media(min-width:760px){.f-grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr;}}
.f-col h4{font-size:13px; font-family:var(--mono); font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px;}
.f-col ul{list-style:none; margin:0; padding:0; display:grid; gap:11px;}
.f-col a,.f-col li{font-size:14px; color:var(--ink-2); transition:color .18s;}
.f-col a:hover{color:var(--cy);}
.f-about p{font-size:14px; color:var(--ink-2); margin-top:16px; max-width:38ch;}
.f-bot{border-top:1px solid var(--line); padding-top:24px; display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between; align-items:center;}
.f-bot p{font-size:12.5px; color:var(--ink-3);}
.f-bot .vat{font-family:var(--mono);}

/* ===================== INNER PAGES / PROSE ===================== */
.sdv2 .page{padding:70px 0 90px;}
.sdv2 .page-head{max-width:64ch; margin-bottom:40px; padding-bottom:28px; border-bottom:1px solid var(--line);}
.sdv2 .page-head h1{font-size:clamp(26px,3.6vw,40px);}
.sdv2 .page-meta{font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-top:12px;}
.sdv2 .prose{max-width:68ch;}
.sdv2 .prose > * + *{margin-top:20px;}
.sdv2 .prose p,.sdv2 .prose li{color:var(--ink-2); font-size:16px;}
.sdv2 .prose h2{font-size:24px; margin-top:44px;}
.sdv2 .prose h3{font-size:18px; margin-top:32px;}
.sdv2 .prose h2 + p,.sdv2 .prose h3 + p{margin-top:12px;}
.sdv2 .prose a{color:var(--cy); text-underline-offset:3px; text-decoration:underline;}
.sdv2 .prose ul,.sdv2 .prose ol{padding-inline-start:20px; display:grid; gap:9px; margin:0;}
.sdv2 .prose strong{color:var(--ink); font-weight:500;}
.sdv2 .prose img{display:block; border:1px solid var(--line); border-radius:var(--r);}
.sdv2 .prose blockquote{margin:0; padding-inline-start:18px; border-inline-start:2px solid var(--cy); color:var(--ink-2);}
.sdv2 .prose code{font-family:var(--mono); font-size:.85em; background:var(--surf-2); border:1px solid var(--line); padding:2px 7px; border-radius:5px;}
.sdv2 .prose pre{overflow-x:auto; background:var(--surf-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:16px;}
.sdv2 .prose pre code{background:none; border:0; padding:0;}
.sdv2 .prose table{border-collapse:collapse; width:100%;}
.sdv2 .prose th,.sdv2 .prose td{border:1px solid var(--line); padding:10px 13px; text-align:start; font-size:14px;}
.sdv2 .table-scroll{overflow-x:auto;}

.sdv2 .e404{padding:110px 0 120px; text-align:center;}
.sdv2 .e404 h1{font-size:clamp(26px,3.6vw,40px); margin:16px 0 14px;}
.sdv2 .e404 p{color:var(--ink-2); max-width:46ch; margin-inline:auto;}
.sdv2 .e404 .btn{margin-top:28px;}

/* skip link */
.sdv2 .skip{position:absolute; inset-inline-start:-9999px; top:0; z-index:200; background:var(--cy); color:#04141A; padding:11px 20px; border-radius:0 0 8px 0;}
.sdv2 .skip:focus{inset-inline-start:0;}