/* ============================================================================
   المتحدة لصيانة الأجهزة المنزلية — design system v2
   Style: light + colored glass (glassmorphism) · animations · Tajawal type
   ========================================================================== */

/* ===== local fonts (Tajawal 400/500/700/800/900) ===== */
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/tajawal-400-arabic.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/tajawal-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/tajawal-500-arabic.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/tajawal-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/tajawal-700-arabic.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/tajawal-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/tajawal-800-arabic.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/tajawal-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/tajawal-900-arabic.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/tajawal-900-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ===== design tokens ===== */
:root{
  --bg:#eef1fb;
  --paper:#ffffff;
  --ink:#141631;
  --ink2:#3b3f68;
  --muted:#6b7099;
  --line:rgba(20,22,49,.10);
  --c1:#6c5cff;          /* electric violet */
  --c2:#ff4fa3;          /* magenta pink   */
  --c3:#00bdff;          /* cyan           */
  --c4:#ffa143;          /* amber          */
  --grad:linear-gradient(120deg,var(--c1) 0%,var(--c2) 55%,var(--c4) 110%);
  --grad-cool:linear-gradient(120deg,var(--c3),var(--c1));
  --glass:rgba(255,255,255,.66);
  --glass-2:rgba(255,255,255,.82);
  --glass-brd:rgba(255,255,255,.95);
  --shadow-s:0 10px 26px -16px rgba(38,28,120,.45);
  --shadow-m:0 22px 48px -26px rgba(38,28,120,.5);
  --shadow-l:0 34px 70px -30px rgba(70,44,190,.55);
  --r:24px;
  --r-s:15px;
  --pill:999px;
  --font:'Tajawal',system-ui,'Segoe UI',Tahoma,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --mx:62%; --my:34%;
}

/* ===== base ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:118px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.9;
  color:var(--ink);
  background:
    radial-gradient(1100px 560px at 94% -8%,rgba(108,92,255,.17),transparent 62%),
    radial-gradient(900px 520px at -8% 18%,rgba(255,79,163,.13),transparent 60%),
    radial-gradient(1000px 640px at 55% 112%,rgba(0,189,255,.15),transparent 62%),
    linear-gradient(180deg,#f6f7ff 0%,#eef1fb 45%,#f7f4ff 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}
::selection{background:var(--c1);color:#fff}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6{line-height:1.4;margin:0 0 .55em;font-weight:800}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--c1);outline-offset:3px;border-radius:6px}
.container{width:min(1180px,92%);margin-inline:auto}
.skip{position:absolute;top:-70px;inset-inline-start:14px;z-index:999;background:var(--ink);color:#fff;padding:11px 18px;border-radius:0 0 var(--r-s) var(--r-s);font-weight:700;transition:top .25s var(--ease)}
.skip:focus{top:0}
strong{font-weight:800}
b{font-weight:800}

/* ===== scroll progress (JS-injected) ===== */
.progress{position:fixed;top:0;inset-inline:0;height:3.5px;z-index:200;background:var(--grad);transform-origin:100% 50%;transform:scaleX(var(--p,0));transition:transform .12s linear;pointer-events:none}

/* ===== topbar ===== */
.topbar{background:var(--grad);color:#fff;font-size:13.5px;font-weight:500;position:relative;z-index:60}
.topbar-in{display:flex;justify-content:space-between;align-items:center;gap:12px 18px;flex-wrap:wrap;padding:9px 0}
.topbar a{font-weight:700;display:inline-flex;align-items:center;gap:8px}
.topbar a b{font-weight:900;background:#fff;color:var(--c1);padding:2px 12px;border-radius:var(--pill);box-shadow:0 6px 16px -8px rgba(0,0,0,.5);transition:transform .3s var(--ease)}
.topbar a:hover b{transform:translateY(-2px) scale(1.05)}

/* ===== header ===== */
.site-header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.72);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid rgba(255,255,255,.9);transition:box-shadow .35s var(--ease),background .35s var(--ease)}
.site-header.is-scrolled{background:rgba(255,255,255,.9);box-shadow:0 14px 36px -22px rgba(30,22,110,.55)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 0;position:relative}
.brand{display:inline-flex;align-items:center;gap:12px;min-width:0}
.brand-mark{width:46px;height:46px;flex:0 0 auto;border-radius:13px;overflow:hidden;box-shadow:0 12px 26px -12px rgba(108,92,255,.75);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.brand-mark rect{fill:var(--c1)}
.brand-mark path{fill:#fff}
.brand:hover .brand-mark{transform:rotate(-7deg) scale(1.06);box-shadow:0 18px 34px -12px rgba(255,79,163,.7)}
.brand-txt{display:flex;flex-direction:column;line-height:1.4;min-width:0}
.brand-txt strong{font-size:17.5px;font-weight:900;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-sub{font-size:12.5px;color:var(--muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* nav (desktop) */
.nav{display:flex;align-items:center;gap:6px}
.nav>a{position:relative;padding:9px 13px;border-radius:var(--pill);font-weight:700;font-size:14.5px;color:var(--ink2);white-space:nowrap;transition:color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
.nav>a:not(.btn)::after{content:"";position:absolute;inset-inline:13px;bottom:5px;height:3px;border-radius:3px;background:var(--grad);transform:scaleX(0);transform-origin:100% 50%;transition:transform .35s var(--ease)}
.nav>a:not(.btn):hover{color:var(--ink);background:rgba(255,255,255,.85)}
.nav>a:not(.btn):hover::after{transform:scaleX(1)}
.nav>a:not(.btn):active{transform:scale(.96)}
.nav-toggle{display:none;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid rgba(255,255,255,.9);border-radius:14px;background:rgba(255,255,255,.85);color:var(--ink);cursor:pointer;box-shadow:var(--shadow-s);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.nav-toggle svg{width:24px;height:24px}
.nav-toggle:hover{transform:translateY(-2px);box-shadow:var(--shadow-m)}
.nav-toggle:active{transform:scale(.94)}

/* ===== hero ===== */
.hero{position:relative;overflow:hidden;padding:clamp(64px,9vw,116px) 0 clamp(72px,10vw,124px);isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:0;background-image:radial-gradient(rgba(20,22,49,.10) 1.1px,transparent 1.4px);background-size:26px 26px;-webkit-mask-image:radial-gradient(72% 68% at 55% 38%,#000 20%,transparent 100%);mask-image:radial-gradient(72% 68% at 55% 38%,#000 20%,transparent 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(560px 340px at var(--mx) var(--my),rgba(255,255,255,.8),rgba(255,255,255,0) 72%);pointer-events:none;opacity:.85;transition:background .3s linear}
.hero-in{position:relative;z-index:3}
.hero h1{font-weight:900;font-size:clamp(33px,5.6vw,64px);line-height:1.28;max-width:840px;margin-bottom:.35em;color:var(--ink)}
.hero-lede{max-width:780px;font-size:clamp(15.5px,1.6vw,18px);color:var(--ink2);line-height:2.05;margin-bottom:1.4em}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;max-width:660px;padding:9px 17px;border-radius:var(--pill);background:rgba(255,255,255,.75);border:1px solid var(--glass-brd);box-shadow:var(--shadow-s);font-weight:700;font-size:13.5px;color:var(--ink2);margin-bottom:22px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero-kicker::before{content:"";flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px rgba(108,92,255,.18);animation:pulse 2.2s ease-in-out infinite}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-ghost{position:absolute;inset-inline-start:1.5%;bottom:-4%;z-index:1;font-weight:900;font-size:clamp(150px,25vw,330px);line-height:1;user-select:none;pointer-events:none;background:linear-gradient(180deg,rgba(108,92,255,.26),rgba(255,79,163,.14) 70%,transparent);-webkit-background-clip:text;background-clip:text;color:transparent;will-change:transform}
.hero--sub{padding:clamp(46px,6vw,78px) 0 clamp(50px,7vw,86px)}
.hero--sub h1{font-size:clamp(29px,4.4vw,52px)}

/* floating colored orbs (JS-injected) */
.orb{position:absolute;z-index:1;border-radius:50%;filter:blur(64px);opacity:.5;pointer-events:none;will-change:transform;animation:orbFloat 10s ease-in-out infinite alternate}
.orb--1{width:min(46vw,430px);aspect-ratio:1;background:radial-gradient(circle at 32% 30%,#a99bff,#6c5cff);top:-15%;inset-inline-start:-9%}
.orb--2{width:min(40vw,380px);aspect-ratio:1;background:radial-gradient(circle at 32% 30%,#ff9ccb,#ff4fa3);bottom:-18%;inset-inline-end:-7%;animation-duration:12s;animation-delay:-4s}
.orb--3{width:min(28vw,270px);aspect-ratio:1;background:radial-gradient(circle at 32% 30%,#8fe4ff,#00bdff);top:34%;inset-inline-end:16%;animation-duration:9s;animation-delay:-2s;opacity:.42}
@keyframes orbFloat{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(42px,54px,0) scale(1.14)}
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(108,92,255,.18)}
  50%{box-shadow:0 0 0 9px rgba(108,92,255,.06)}
}

/* ===== buttons ===== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 26px;border-radius:var(--pill);border:1.5px solid transparent;font-family:var(--font);font-weight:800;font-size:15.5px;line-height:1.4;cursor:pointer;overflow:hidden;white-space:nowrap;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn:active{transform:translateY(0) scale(.97)}
.btn--lg{padding:16px 34px;font-size:16.5px}
.btn--sm{padding:8px 17px;font-size:13.5px}
.btn--primary{background:var(--grad);color:#fff;box-shadow:0 16px 32px -14px rgba(255,79,163,.6),0 6px 16px -10px rgba(108,92,255,.5)}
.btn--primary::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.55) 50%,transparent 72%);transform:translateX(-130%);transition:transform .75s var(--ease)}
.btn--primary:hover{transform:translateY(-4px);box-shadow:0 26px 46px -16px rgba(255,79,163,.7),0 10px 24px -10px rgba(108,92,255,.6)}
.btn--primary:hover::before{transform:translateX(130%)}
.btn--light{background:rgba(255,255,255,.85);color:var(--ink);border-color:rgba(20,22,49,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--shadow-s)}
.btn--light:hover{transform:translateY(-4px);border-color:var(--c1);color:var(--c1);box-shadow:0 22px 40px -18px rgba(108,92,255,.55)}

/* ===== scroll reveal ===== */
html.js .reveal{opacity:0;transform:translateY(30px);filter:blur(10px);transition:opacity .85s var(--ease),transform .85s var(--ease),filter .85s var(--ease);transition-delay:var(--d,0s)}
html.js .reveal.in{opacity:1;transform:translateY(0);filter:blur(0)}

/* ===== floating action button ===== */
.fab{position:fixed;inset-inline-end:20px;bottom:20px;z-index:90;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 16px;border-radius:var(--pill);background:var(--grad);color:#fff;font-weight:900;font-size:13.5px;white-space:nowrap;box-shadow:0 20px 40px -14px rgba(255,79,163,.75);transition:transform .35s var(--ease),box-shadow .35s var(--ease);animation:fabFloat 3.6s ease-in-out infinite}
.fab:hover{transform:translateY(-5px) scale(1.05);box-shadow:0 28px 54px -16px rgba(108,92,255,.8)}
.fab:active{transform:scale(.95)}
.fab svg{width:19px;height:19px;flex:none}
.fab--alt{bottom:74px;background:linear-gradient(120deg,var(--c3) 0%,var(--c1) 55%,var(--c2) 110%);box-shadow:0 20px 40px -14px rgba(108,92,255,.75);animation-delay:.6s}
.fab--alt:hover{box-shadow:0 28px 54px -16px rgba(0,189,255,.8)}
@keyframes fabFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}

/* ===== sections ===== */
.section{position:relative;padding:clamp(54px,7vw,96px) 0}
.section--alt{background:rgba(255,255,255,.5);border-block:1px solid rgba(255,255,255,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.section.trust{padding-top:clamp(34px,4.4vw,52px)}
.section--dark{width:min(1240px,94%);margin-inline:auto;border-radius:42px;overflow:hidden;background:linear-gradient(135deg,#141631 0%,#271b6b 55%,#4a2aa4 100%);color:#e9eaff;box-shadow:var(--shadow-l);isolation:isolate}
.section--dark::before{content:"";position:absolute;width:540px;height:540px;border-radius:50%;background:radial-gradient(circle,rgba(108,92,255,.55),transparent 70%);top:-190px;inset-inline-start:-150px;pointer-events:none;z-index:0}
.section--dark::after{content:"";position:absolute;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(0,189,255,.4),transparent 70%);bottom:-170px;inset-inline-end:-120px;pointer-events:none;z-index:0}
.section--dark .container{position:relative;z-index:1}
.section--dark .sec-title{color:#fff}
.section--dark .sec-lede{color:#c8caf2}
.section--dark .sec-index{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#d3caff}
.section--dark .prose p,.section--dark .prose li{color:#c9ccf0}
.section--dark .prose strong,.section--dark .prose h3{color:#fff}
.section--dark .compare li{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#dcdff7}

/* section heads */
.sec-head{max-width:880px;margin-bottom:clamp(28px,4vw,46px)}
.sec-index{display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border-radius:var(--pill);background:rgba(255,255,255,.85);border:1px solid var(--glass-brd);box-shadow:var(--shadow-s);font-weight:800;font-size:12.5px;color:var(--c1);margin-bottom:16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sec-index::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--grad);transform:rotate(45deg);flex:0 0 auto}
.sec-title{font-weight:900;font-size:clamp(26px,3.6vw,42px);line-height:1.36;color:var(--ink);margin-bottom:.35em}
.sec-lede{color:var(--muted);font-size:clamp(15px,1.5vw,17px);max-width:780px;margin:0}

/* grids */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* feature blocks */
.feat{position:relative;background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r);padding:24px;box-shadow:var(--shadow-s);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease)}
.feat::before{content:"";position:absolute;top:0;inset-inline:24px;height:4px;border-radius:0 0 6px 6px;background:var(--grad);transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease)}
.feat:hover{transform:translateY(-7px);background:var(--glass-2);box-shadow:var(--shadow-m)}
.feat:hover::before{transform:scaleX(1)}
.feat h3{font-size:17.5px;font-weight:800;color:var(--ink)}
.feat p{color:var(--muted);font-size:14.7px;margin:0;line-height:1.95}

/* cards */
.card{position:relative;background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r);padding:26px 24px;box-shadow:var(--shadow-s);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity .45s var(--ease);pointer-events:none}
.card:hover{transform:translateY(-9px);background:var(--glass-2);box-shadow:var(--shadow-l)}
.card:hover::before{opacity:1}
.card h3{font-size:19px;font-weight:900;color:var(--ink);margin-bottom:.45em}
.card p{color:var(--ink2);font-size:15px}
.card ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.card ul li{position:relative;padding-inline-start:21px;font-size:14.4px;color:var(--muted);line-height:1.85}
.card ul li::before{content:"";position:absolute;inset-inline-start:0;top:.6em;width:8px;height:8px;border-radius:2.5px;background:var(--grad);transform:rotate(45deg)}
.card-num{display:inline-block;font-weight:900;font-size:30px;line-height:1;margin-bottom:14px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.card-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-weight:800;font-size:14.5px;color:var(--c1);transition:color .3s var(--ease)}
.card-link::after{content:"←";font-size:17px;transition:transform .35s var(--ease)}
.card-link:hover{color:var(--c2)}
.card-link:hover::after{transform:translateX(-7px)}

/* note */
.note{position:relative;margin-top:30px;background:linear-gradient(135deg,rgba(108,92,255,.1),rgba(255,79,163,.09));border:1.5px dashed rgba(108,92,255,.45);border-radius:var(--r);padding:28px 24px 20px;font-size:15px;color:var(--ink2);line-height:1.95}
.note::before{content:"!";position:absolute;top:-15px;inset-inline-start:22px;width:31px;height:31px;border-radius:50%;background:var(--grad);color:#fff;font-weight:900;display:grid;place-items:center;box-shadow:var(--shadow-s);font-size:16px}
.section--dark .note{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.4);color:#dcdff7}

/* category / content blocks */
.cat,.cat-block{position:relative;background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r);padding:25px 24px;box-shadow:var(--shadow-s);overflow:hidden;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease)}
.cat::after,.cat-block::after{content:"";position:absolute;top:-70px;inset-inline-end:-70px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(0,189,255,.25),transparent 70%);opacity:0;transition:opacity .5s var(--ease),transform .7s var(--ease);transform:scale(.6);pointer-events:none}
.cat:hover,.cat-block:hover{transform:translateY(-7px);background:var(--glass-2);box-shadow:var(--shadow-m)}
.cat:hover::after,.cat-block:hover::after{opacity:1;transform:scale(1)}
.cat h3,.cat-block h3{font-size:18.5px;font-weight:900;color:var(--ink)}
.cat h4,.cat-block h4{position:relative;display:inline-block;font-size:16.5px;font-weight:800;color:var(--ink);padding-bottom:7px;margin-top:1.3em}
.cat h4::after,.cat-block h4::after{content:"";position:absolute;bottom:0;inset-inline:0;height:3.5px;border-radius:3px;background:var(--grad)}
.cat p,.cat-block p{color:var(--ink2);font-size:15px}
.cat .muted,.cat-block .muted{margin-top:12px}
.section--dark .cat,.section--dark .cat-block{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);box-shadow:none}
.section--dark .cat h3,.section--dark .cat-block h3,.section--dark .cat h4,.section--dark .cat-block h4{color:#fff}
.section--dark .cat p,.section--dark .cat-block p{color:#c9ccf0}

/* trust strip */
.trust-grid{display:flex;flex-wrap:wrap;gap:14px}
.trust-item{display:inline-flex;align-items:center;gap:11px;padding:13px 21px;border-radius:var(--pill);background:rgba(255,255,255,.86);border:1px solid var(--glass-brd);box-shadow:var(--shadow-s);font-weight:700;font-size:14.8px;color:var(--ink);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.trust-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-color:rgba(108,92,255,.55)}
.tick{display:inline-grid;place-items:center;width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:var(--grad);color:#fff;font-size:14px;font-weight:900;box-shadow:0 9px 18px -9px rgba(255,79,163,.75)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;padding:9px 17px;border-radius:var(--pill);background:rgba(255,255,255,.85);border:1px solid var(--glass-brd);font-weight:700;font-size:14px;color:var(--ink2);box-shadow:0 9px 20px -15px rgba(38,28,120,.55);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
a.chip:hover{background:var(--grad);color:#fff;border-color:transparent;transform:translateY(-4px) scale(1.05);box-shadow:0 18px 30px -14px rgba(255,79,163,.65)}
a.chip:active{transform:translateY(-1px) scale(.98)}
.chip--plain{background:rgba(255,255,255,.55);color:var(--muted);border:1.5px dashed rgba(20,22,49,.24);box-shadow:none}
.section--dark .chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#e3e5ff}
a.chip.section--dark:hover{background:#fff;color:var(--ink)}

/* coverage flow */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:26px}
.flow-step{position:relative;background:linear-gradient(140deg,rgba(255,255,255,.92),rgba(255,255,255,.6));border:1px solid var(--glass-brd);border-radius:var(--r);padding:25px;box-shadow:var(--shadow-s);overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.flow-step::before{content:"";position:absolute;inset-inline-end:-46px;top:-46px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(0,189,255,.3),transparent 70%);transition:transform .7s var(--ease);pointer-events:none}
.flow-step:hover{transform:translateY(-8px);box-shadow:var(--shadow-m)}
.flow-step:hover::before{transform:scale(1.35)}
.flow-step h3{font-size:18px;font-weight:900;color:var(--ink);position:relative}
.flow-step p{color:var(--muted);font-size:14.6px;margin:0;position:relative}

/* process steps */
.step{display:flex;gap:16px;align-items:flex-start;background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r);padding:22px;box-shadow:var(--shadow-s);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)}
.step-num{flex:0 0 auto;display:grid;place-items:center;width:52px;height:52px;border-radius:17px;background:var(--grad);color:#fff;font-weight:900;font-size:21px;box-shadow:0 15px 26px -13px rgba(108,92,255,.75);transition:transform .45s var(--ease)}
.step:hover .step-num{transform:rotate(-8deg) scale(1.1)}
.step h3{font-size:16.5px;font-weight:800;color:var(--ink);margin-bottom:.3em}
.step p{margin:0;color:var(--muted);font-size:14.5px}

/* legal links */
.legal-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.legal-link{display:inline-flex;align-items:center;gap:9px;padding:11px 21px;border-radius:var(--pill);background:rgba(255,255,255,.82);border:1.5px solid rgba(20,22,49,.15);font-weight:700;font-size:14.5px;color:var(--ink2);transition:.35s var(--ease)}
.legal-link::after{content:"←";color:var(--c1);font-weight:900;transition:.35s var(--ease)}
.legal-link:hover{background:var(--grad);border-color:transparent;color:#fff;transform:translateY(-4px);box-shadow:0 18px 32px -15px rgba(255,79,163,.65)}
.legal-link:hover::after{color:#fff;transform:translateX(-5px)}

/* testimonials */
.quote{position:relative;margin:0;background:rgba(255,255,255,.82);border:1px solid var(--glass-brd);border-radius:var(--r);padding:34px 26px 25px;box-shadow:var(--shadow-s);overflow:hidden;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.quote::before{content:"”";position:absolute;top:-14px;inset-inline-start:16px;font-size:96px;line-height:1;font-weight:900;font-family:Georgia,serif;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.5;pointer-events:none}
.quote:hover{transform:translateY(-7px);box-shadow:var(--shadow-m)}
.quote p{position:relative;font-size:15.4px;color:var(--ink2);margin-bottom:15px}
.quote cite{font-style:normal;font-weight:800;font-size:13.5px;color:var(--c1);background:rgba(108,92,255,.13);padding:5px 14px;border-radius:var(--pill);display:inline-block}

/* compare list */
.compare{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:13px}
.compare li{display:flex;gap:13px;align-items:flex-start;background:rgba(255,255,255,.8);border:1px solid var(--glass-brd);border-radius:var(--r-s);padding:15px 19px;font-size:15.2px;color:var(--ink2);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.compare li::before{content:"✓";flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;margin-top:2px;border-radius:9px;background:var(--grad);color:#fff;font-weight:900;font-size:14px;box-shadow:0 9px 18px -10px rgba(255,79,163,.75)}
.compare li:hover{transform:translateY(-4px);box-shadow:var(--shadow-s)}

/* question list */
.q-list{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.q-item{position:relative;display:flex;gap:15px;align-items:flex-start;background:rgba(255,255,255,.82);border:1px solid var(--glass-brd);border-radius:var(--r-s);padding:17px 19px;box-shadow:var(--shadow-s);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.q-item::after{content:"";position:absolute;top:0;inset-inline-start:0;width:4.5px;height:100%;background:var(--grad);transform:scaleY(0);transform-origin:50% 0;transition:transform .45s var(--ease)}
.q-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-m)}
.q-item:hover::after{transform:scaleY(1)}
.q-num{flex:0 0 auto;display:grid;place-items:center;min-width:40px;height:40px;padding-inline:8px;border-radius:13px;background:linear-gradient(135deg,rgba(108,92,255,.15),rgba(255,79,163,.15));color:var(--c1);font-weight:900;font-size:15px}
.q-item>div{font-weight:700;font-size:15.3px;color:var(--ink);line-height:1.85}

/* decision tiles */
.state{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;text-align:center;min-height:118px;padding:22px 16px;border-radius:var(--r);background:rgba(255,255,255,.84);border:1px solid var(--glass-brd);font-weight:800;font-size:16px;color:var(--ink);box-shadow:var(--shadow-s);overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease),color .45s var(--ease)}
.state::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad);transform:translateY(102%);transition:transform .5s var(--ease)}
.state:hover{transform:translateY(-7px);color:#fff;box-shadow:var(--shadow-l)}
.state:hover::before{transform:translateY(0)}

/* prose (brand pages + long content) */
.prose{max-width:880px}
.prose p{font-size:15.8px;line-height:2.1;color:var(--ink2);margin:0 0 1.05em}
.prose h2{font-size:clamp(21px,2.6vw,28px);font-weight:900;color:var(--ink);margin-top:1.7em}
.prose h3{font-size:18.5px;font-weight:800;color:var(--ink);margin-top:1.5em}
.prose h4{font-size:16.5px;font-weight:800;color:var(--c2);margin-top:1.3em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-inline-start:1.5em}
.prose li{font-size:15.3px;line-height:1.95;color:var(--ink2);margin-bottom:.45em}
.prose li::marker{color:var(--c1);font-weight:800}
.prose a{font-weight:800;color:var(--c1);background-image:var(--grad);background-repeat:no-repeat;background-position:0 100%;background-size:100% 2.5px;padding-bottom:2px;transition:color .3s var(--ease)}
.prose a:hover{color:var(--c2)}
.prose strong{color:var(--ink);font-weight:800}
.prose blockquote{background:linear-gradient(135deg,rgba(108,92,255,.1),rgba(0,189,255,.08));border-radius:var(--r-s);padding:16px 20px;margin:1.4em 0;color:var(--ink2)}
.prose table{width:100%;border-collapse:collapse;margin:1.4em 0}
.prose th,.prose td{border:1.5px solid rgba(20,22,49,.18);padding:10px 12px;font-size:14.5px;text-align:start}
.prose th{background:rgba(108,92,255,.1);font-weight:800}
.prose hr{border:none;height:2.5px;background:var(--grad);border-radius:3px;margin:2em 0;opacity:.5}
.prose>div:empty,.prose>p:empty{display:none}

/* helpers */
.lead{font-size:clamp(16.5px,1.8vw,19px);line-height:2.1;color:var(--ink2)}
.lead strong{color:var(--ink)}
.muted{color:var(--muted);font-size:14.3px}
.ul-clean{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ul-clean li{position:relative;padding-inline-start:22px;font-size:14.9px;color:var(--ink2)}
.ul-clean li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:9px;height:9px;border-radius:3px;background:var(--grad);transform:rotate(45deg)}

/* brand marquee (JS-injected on #brands) */
.marquee{position:relative;overflow:hidden;border-radius:20px;background:rgba(255,255,255,.72);border:1px solid var(--glass-brd);box-shadow:var(--shadow-s);padding:12px 0;margin-bottom:28px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;gap:10px;width:max-content;padding-inline:10px;animation:marq 36s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{flex:0 0 auto;padding:7px 15px;border-radius:var(--pill);background:#fff;border:1px solid var(--line);font-weight:700;font-size:13.5px;color:var(--ink2);white-space:nowrap}
.marquee-item.is-accent{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 10px 22px -13px rgba(255,79,163,.7)}
@keyframes marq{to{transform:translateX(-50%)}}

/* closing CTA band */
.cta-band{position:relative;isolation:isolate;overflow:hidden;width:min(1240px,94%);margin:clamp(30px,4vw,52px) auto clamp(48px,7vw,86px);background:var(--grad);border-radius:42px;color:#fff;padding:clamp(42px,6vw,74px) 0;box-shadow:0 44px 84px -36px rgba(108,92,255,.75)}
.cta-band::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(520px 320px at 88% 8%,rgba(255,255,255,.28),transparent 62%),radial-gradient(460px 300px at 6% 95%,rgba(0,189,255,.4),transparent 66%);pointer-events:none}
.cta-in{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.cta-in h2{font-weight:900;font-size:clamp(24px,3.4vw,40px);color:#fff;margin-bottom:.3em}
.cta-in p{color:rgba(255,255,255,.94);font-size:16px;margin:0;max-width:560px}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px}
.cta-band .btn--primary{background:#fff;color:var(--ink);box-shadow:0 20px 40px -18px rgba(0,0,0,.5)}
.cta-band .btn--primary:hover{transform:translateY(-4px);box-shadow:0 28px 52px -20px rgba(0,0,0,.6)}
.cta-band .btn--light{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.65);box-shadow:none}
.cta-band .btn--light:hover{background:rgba(255,255,255,.3);color:#fff;border-color:#fff;transform:translateY(-4px)}

/* ===== footer ===== */
.site-footer{position:relative;background:linear-gradient(180deg,#12142d 0%,#181b41 100%);color:#c9cbef;margin-top:clamp(30px,4vw,54px);overflow:hidden}
.site-footer::before{content:"";position:absolute;top:0;inset-inline:0;height:4.5px;background:var(--grad);z-index:2}
.site-footer::after{content:"";position:absolute;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(108,92,255,.4),transparent 70%);top:-280px;inset-inline-start:-170px;pointer-events:none}
.foot-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding:clamp(46px,6vw,74px) 0 34px}
.foot-col h3{font-size:16px;font-weight:900;color:#fff;margin-bottom:17px;position:relative;padding-bottom:11px}
.foot-col h3::after{content:"";position:absolute;bottom:0;inset-inline-start:0;width:46px;height:3.5px;border-radius:3px;background:var(--grad)}
.foot-col p{font-size:14.3px;color:#9ea2cf;line-height:1.95}
.foot-links{display:flex;flex-direction:column;gap:9px}
.foot-links a{position:relative;width:fit-content;font-size:14.6px;color:#b9bce6;transition:color .3s var(--ease),transform .3s var(--ease)}
.foot-links a::before{content:"";position:absolute;inset-inline-start:-17px;top:50%;width:7px;height:7px;border-radius:2.5px;background:var(--grad);opacity:0;transform:translateY(-50%) scale(.4);transition:.3s var(--ease)}
.foot-links a:hover{color:#fff;transform:translateX(7px)}
.foot-links a:hover::before{opacity:1;transform:translateY(-50%) scale(1)}
.foot-tel{display:inline-flex;align-items:center;gap:9px;font-weight:900;font-size:clamp(22px,2.6vw,30px);line-height:1.5;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;transition:transform .35s var(--ease),filter .35s var(--ease)}
.foot-tel:hover{transform:translateY(-3px);filter:saturate(1.35) brightness(1.1)}
.foot-bottom{position:relative;z-index:1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 22px;padding:21px 0 27px;border-top:1px solid rgba(255,255,255,.1);font-size:13.4px;color:#8f93c4}
.site-footer .brand-txt strong{color:#fff}
.site-footer .brand-sub{color:#9ea2cf}
.site-footer .brand-mark{box-shadow:0 14px 28px -13px rgba(255,79,163,.8)}
.site-footer .brand-mark rect{fill:var(--c2)}
.site-footer .brand-mark path{fill:#fff}

/* ===== responsive ===== */
@media (max-width:1020px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1150px){
  .nav>a{font-size:14px;padding:8px 10px}
  .brand-sub{display:none}
}
@media (max-width:980px){
  .nav-toggle{display:inline-flex}
  .nav{position:absolute;top:calc(100% + 12px);inset-inline:0;flex-direction:column;align-items:stretch;gap:4px;padding:15px;background:rgba(255,255,255,.94);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);border:1px solid var(--glass-brd);border-radius:24px;box-shadow:var(--shadow-l);opacity:0;transform:translateY(-16px) scale(.97);pointer-events:none;transition:.35s var(--ease);z-index:70}
  .nav.open{opacity:1;transform:none;pointer-events:auto}
  .nav>a{text-align:center;padding:13px;font-size:16px;background:rgba(238,241,251,.75);border-radius:14px;white-space:normal}
  .nav>a::after{display:none}
  .nav>a.btn{width:100%;margin-top:8px;background:var(--grad);color:#fff}
}
@media (max-width:860px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .hero-ghost{opacity:.75;bottom:-9%}
  .cta-in{flex-direction:column;align-items:flex-start}
  .header-in{padding:11px 0}
}
@media (max-width:620px){
  body{font-size:15.5px}
  .brand-txt strong{font-size:15.5px;white-space:normal;line-height:1.5}
  .brand-sub{font-size:11.5px}
  .brand-mark{width:42px;height:42px}
  .grid-4,.flow{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:26px}
  .topbar-in{justify-content:center;text-align:center}
  .hero-actions .btn,.cta-actions .btn{width:100%}
  .section--dark,.cta-band{width:min(1180px,96%);border-radius:30px}
  .fab{padding:10px 14px;font-size:12.5px;inset-inline-end:14px;bottom:14px}
  .fab--alt{bottom:62px}
  .step{flex-direction:column}
  .quote{padding:30px 20px 22px}
}

/* ===== reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .orb,.fab,.hero-kicker::before,.marquee-track{animation:none!important}
  .btn,.card,.chip,.step,.state,.feat,.q-item,.quote,.cat,.cat-block,.trust-item,.legal-link,.brand-mark,.nav>a,.compare li,.flow-step{transition:none!important}
}