/* ============================================================
   DHT — sections.css
   Trustbar · Tech · Stats · Bento · Pillars · Infrastructure
   Network · Pricing · Compare · Testimonials · FAQ · CTA · Footer
   ============================================================ */

/* ---------- TRUST BAR ---------- */
.trustbar{padding:0 0 26px}
.trustbar-grid{display:grid;grid-template-columns:repeat(6,1fr);
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(11,34,71,.7),rgba(7,26,61,.4));overflow:hidden}
.trust-item{display:flex;align-items:center;gap:11px;padding:18px 20px;
  border-inline-start:1px solid var(--border);min-width:0}
.trust-item:first-child{border-inline-start:none}
.trust-item svg{width:17px;height:17px;color:var(--icon);flex:none}
.trust-item div{min-width:0}
.trust-item b{display:block;font-size:.82rem;font-weight:600;line-height:1.3;white-space:nowrap}
.trust-item small{display:block;font-size:.68rem;color:var(--txt-3);font-family:var(--mono);white-space:nowrap}

/* ---------- TECH ECOSYSTEM ---------- */
.tech-stack{padding:96px 0 0}
.tech-groups{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tech-group{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);padding:22px 20px;
  transition:border-color var(--t),transform var(--t) var(--e),box-shadow var(--t)}
.tech-group::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(130% 90% at 100% 0,var(--tech-glow),transparent 62%);
  transition:opacity var(--t)}
.tech-group:hover{transform:translateY(-4px);border-color:var(--border-2);box-shadow:var(--shadow-2)}
.tech-group:hover::before{opacity:1}

.tech-head{position:relative;display:flex;align-items:center;gap:12px;
  margin-bottom:14px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.tech-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:var(--tech-grad);color:#06152B}
.tech-ic svg{width:20px;height:20px}
.tech-head h3{font-size:.98rem;font-weight:700;line-height:1.25}
.tech-count{display:block;margin-top:2px;font-family:var(--mono);font-size:.63rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}

.tech-list{list-style:none;display:grid;gap:7px;position:relative}
.tech-item{display:flex;align-items:center;gap:11px;padding:8px 9px;border-radius:11px;
  border:1px solid transparent;transition:background var(--t-fast),border-color var(--t-fast)}
.tech-item:hover{background:var(--surface-2);border-color:var(--border)}
.tech-badge{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
  font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.02em;
  color:var(--tech-fg);background:var(--tech-soft);border:1px solid var(--tech-line)}
.tech-badge.sm{font-size:.58rem;letter-spacing:0}
.tech-name{min-width:0}
.tech-name b{display:block;font-size:.85rem;font-weight:600;line-height:1.3;color:var(--txt)}
.tech-name small{display:block;font-size:.7rem;color:var(--txt-3);line-height:1.35}

/* per-category accent */
.hue-blue{--tech-grad:linear-gradient(135deg,#03BDFD,#008DFF);
  --tech-fg:#38BDF8;--tech-soft:rgba(3,189,253,.1);--tech-line:rgba(3,189,253,.26);--tech-glow:rgba(0,141,255,.16)}
.hue-green{--tech-grad:linear-gradient(135deg,#22C55E,#14B8A6);
  --tech-fg:#4ADE80;--tech-soft:rgba(34,197,94,.1);--tech-line:rgba(34,197,94,.26);--tech-glow:rgba(20,184,166,.15)}
.hue-violet{--tech-grad:linear-gradient(135deg,#8B5CF6,#6366F1);
  --tech-fg:#A78BFA;--tech-soft:rgba(139,92,246,.11);--tech-line:rgba(139,92,246,.28);--tech-glow:rgba(139,92,246,.16)}
.hue-amber{--tech-grad:linear-gradient(135deg,#F59E0B,#EF4444);
  --tech-fg:#FBBF24;--tech-soft:rgba(245,158,11,.11);--tech-line:rgba(245,158,11,.28);--tech-glow:rgba(245,158,11,.15)}

[data-theme="light"] .hue-blue{--tech-fg:#0084E6;--tech-soft:rgba(0,141,255,.08);--tech-line:rgba(0,141,255,.22)}
[data-theme="light"] .hue-green{--tech-fg:#15803D;--tech-soft:rgba(34,197,94,.09);--tech-line:rgba(34,197,94,.24)}
[data-theme="light"] .hue-violet{--tech-fg:#6D28D9;--tech-soft:rgba(139,92,246,.09);--tech-line:rgba(139,92,246,.24)}
[data-theme="light"] .hue-amber{--tech-fg:#B45309;--tech-soft:rgba(245,158,11,.11);--tech-line:rgba(245,158,11,.28)}

/* ---------- STATS ---------- */
.stats{padding:96px 0}
.stats::before{content:"";position:absolute;inset-inline:0;top:8%;height:64%;z-index:0;pointer-events:none;
  background:radial-gradient(52% 62% at 50% 0,rgba(0,141,255,.08),transparent 72%)}
.stats>.wrap{position:relative;z-index:1}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(11,34,71,.55),rgba(7,26,61,.25));
  padding:34px 24px 30px;text-align:center;
  transition:border-color var(--t),transform var(--t) var(--e),box-shadow var(--t)}
.stat:hover{transform:translateY(-5px);border-color:var(--stat-line);box-shadow:var(--stat-shadow)}
.stat::before{content:"";position:absolute;inset-inline:16%;top:0;height:2px;border-radius:2px;
  background:var(--stat-grad);opacity:.75}
.stat::after{content:"";position:absolute;inset-inline:0;top:-45%;height:85%;pointer-events:none;
  background:radial-gradient(closest-side,var(--stat-glow),transparent);opacity:0;
  transition:opacity var(--t)}
.stat:hover::after{opacity:1}

.stat .stat-ic{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 20px;
  border-radius:15px;background:var(--stat-soft);color:var(--stat-fg);
  border:1px solid var(--stat-line);
  transition:background var(--t),color var(--t),transform var(--t) var(--e)}
.stat:hover .stat-ic{background:var(--stat-grad);color:#06152B;transform:scale(1.08) rotate(-3deg)}
.stat .stat-ic svg{width:23px;height:23px;display:block;overflow:visible}

.stat .stat-num{display:block;position:relative;z-index:1;font-family:var(--mono);font-weight:600;
  font-size:clamp(2rem,3.4vw,2.6rem);letter-spacing:-.03em;line-height:1.1;
  background:var(--stat-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.stat .stat-label{display:block;position:relative;z-index:1;margin-top:10px;
  font-size:.92rem;font-weight:600;color:var(--txt)}
.stat .stat-note{display:block;position:relative;z-index:1;margin-top:7px;
  font-size:.78rem;line-height:1.5;color:var(--txt-3)}

/* per-stat accent */
.stat.hue-blue{--stat-grad:linear-gradient(135deg,#03BDFD,#008DFF);
  --stat-fg:#38BDF8;--stat-soft:rgba(3,189,253,.1);--stat-line:rgba(3,189,253,.28);--stat-glow:rgba(0,141,255,.16);
  --stat-shadow:0 18px 40px -22px rgba(0,141,255,.45)}
.stat.hue-violet{--stat-grad:linear-gradient(135deg,#8B5CF6,#6366F1);
  --stat-fg:#A78BFA;--stat-soft:rgba(139,92,246,.11);--stat-line:rgba(139,92,246,.3);--stat-glow:rgba(139,92,246,.16);
  --stat-shadow:0 18px 40px -22px rgba(139,92,246,.45)}
.stat.hue-green{--stat-grad:linear-gradient(135deg,#22C55E,#14B8A6);
  --stat-fg:#4ADE80;--stat-soft:rgba(34,197,94,.1);--stat-line:rgba(34,197,94,.28);--stat-glow:rgba(20,184,166,.15);
  --stat-shadow:0 18px 40px -22px rgba(34,197,94,.4)}
.stat.hue-amber{--stat-grad:linear-gradient(135deg,#F59E0B,#EF4444);
  --stat-fg:#FBBF24;--stat-soft:rgba(245,158,11,.11);--stat-line:rgba(245,158,11,.3);--stat-glow:rgba(245,158,11,.15);
  --stat-shadow:0 18px 40px -22px rgba(245,158,11,.4)}

[data-theme="light"] .stat.hue-blue{--stat-fg:#0084E6;--stat-soft:rgba(0,141,255,.08);--stat-line:rgba(0,141,255,.22)}
[data-theme="light"] .stat.hue-violet{--stat-fg:#6D28D9;--stat-soft:rgba(139,92,246,.09);--stat-line:rgba(139,92,246,.24)}
[data-theme="light"] .stat.hue-green{--stat-fg:#15803D;--stat-soft:rgba(34,197,94,.09);--stat-line:rgba(34,197,94,.24)}
[data-theme="light"] .stat.hue-amber{--stat-fg:#B45309;--stat-soft:rgba(245,158,11,.11);--stat-line:rgba(245,158,11,.28)}

/* ---------- BENTO SERVICES ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.b6{grid-column:span 6}.b4{grid-column:span 4}.b3{grid-column:span 3}.b2{grid-column:span 2}
.svc-card{
  position:relative;display:flex;flex-direction:column;
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);padding:30px;overflow:hidden;
  transition:transform var(--t) var(--e),border-color var(--t),background var(--t),box-shadow var(--t)
}
[data-theme="light"] .trustbar-grid,[data-theme="light"] .net-panel,[data-theme="light"] .cta-panel{box-shadow:0 20px 55px -32px rgba(7,26,61,.3)}
.svc-card:hover{transform:translateY(-4px);border-color:var(--border-2);
  background:var(--surface-2);box-shadow:var(--shadow-2)}
.svc-card::before{content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:var(--grad);opacity:0;transition:opacity var(--t)}
.svc-card:hover::before{opacity:.9}
.svc-ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;
  margin-bottom:22px;background:linear-gradient(150deg,rgba(0,141,255,.14),rgba(3,189,253,.08));
  border:1px solid rgba(0,141,255,.3);flex:none}
.svc-ic svg{width:22px;height:22px;color:var(--icon)}
.svc-card h3{font-size:1.16rem;font-weight:700;margin-bottom:9px}
.svc-card p{color:var(--txt-2);font-size:.92rem;line-height:1.65;margin-bottom:18px}
.svc-meta{display:inline-flex;align-items:center;gap:7px;margin-bottom:18px;
  font-family:var(--mono);font-size:.7rem;color:var(--txt-3);
  border:1px solid var(--border);border-radius:99px;padding:4px 12px;width:fit-content}
.svc-meta i{width:5px;height:5px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 6px rgba(34,197,94,.7)}
.link-more{display:inline-flex;align-items:center;gap:7px;margin-top:auto;
  color:var(--accent);font-size:.88rem;font-weight:600}
.link-more svg{width:15px;height:15px;transition:transform var(--t-fast)}
.svc-card:hover .link-more svg{transform:translateX(4px)}
[dir=rtl] .svc-card:hover .link-more svg{transform:translateX(-4px)}

.service-extension{display:grid;grid-template-columns:1fr 1.25fr;gap:34px;align-items:center;
  margin-top:18px;padding:30px;border:1px solid var(--border-2);border-radius:var(--r-lg);
  background:linear-gradient(110deg,rgba(11,34,71,.9),rgba(7,26,61,.7))}
.service-extension .kicker{margin-bottom:12px}
.service-extension h3{font-size:1.35rem;margin-bottom:8px;color:var(--txt)}
.service-extension-copy p{color:var(--txt-2);font-size:.9rem;line-height:1.7;max-width:470px}
.solution-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.solution-item{display:flex;align-items:center;gap:13px;padding:15px;border:1px solid var(--border);
  border-radius:12px;background:rgba(7,26,61,.45);transition:border-color var(--t-fast),transform var(--t-fast)}
.solution-item:hover{border-color:rgba(3,189,253,.4);transform:translateY(-2px)}
.solution-item .svc-ic{width:40px;height:40px;margin:0;border-radius:10px}
.solution-item .svc-ic svg{width:18px;height:18px}
.solution-item b,.solution-item small{display:block}
.solution-item b{font-size:.86rem;margin-bottom:3px}
.solution-item small{color:var(--txt-3);font-size:.72rem;line-height:1.45}

/* big card visual (web hosting) */
.svc-visual{margin-top:auto;padding-top:24px;
  display:flex;gap:12px;align-items:stretch;min-width:0}
.svc-kpi{flex:1;min-width:0;border:1px solid var(--border);border-radius:12px;
  background:rgba(7,26,61,.45);padding:13px 15px}
.svc-kpi b{display:block;font-family:var(--mono);font-size:1.15rem;font-weight:600;color:var(--txt)}
.svc-kpi small{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-3)}

/* ---------- PILLARS (why us) ---------- */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;min-width:0}
.pillar{border:1px solid var(--border);border-radius:var(--r-lg);min-width:0;
  background:var(--surface);padding:30px;display:flex;flex-direction:column;
  transition:border-color var(--t),transform var(--t) var(--e)}
.pillar:hover{border-color:var(--border-2);transform:translateY(-3px)}
.pillar-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.pillar-head .svc-ic{margin-bottom:0}
.pillar-head h3{font-size:1.2rem;font-weight:700}
.pillar>p{color:var(--txt-2);font-size:.93rem;line-height:1.7;margin-bottom:22px}
.pillar-visual{margin-top:auto}
.pillar-link{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  margin-top:18px;color:var(--accent);font-size:.86rem;font-weight:600;
  transition:color var(--t-fast)}
.pillar-link svg{width:15px;height:15px;transition:transform var(--t-fast)}
.pillar-link:hover{color:#5FD0FF}
.pillar:hover .pillar-link svg{transform:translateX(4px)}
[dir=rtl] .pillar:hover .pillar-link svg{transform:translateX(-4px)}

/* performance gauge */
.perf{display:flex;align-items:center;gap:22px;min-width:0}
.gauge-ring{position:relative;width:112px;height:112px;flex:none}
.gauge-ring svg{transform:rotate(-90deg)}
.gauge-ring .g-bg{stroke:rgba(0,141,255,.09)}
.gauge-ring .g-val{stroke:url(#gg);stroke-linecap:round;
  stroke-dasharray:302;stroke-dashoffset:302;transition:stroke-dashoffset 1.6s var(--e)}
.gauge-ring .g-lab{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  font-family:var(--mono)}
.gauge-ring .g-lab b{display:block;font-size:.92rem;font-weight:700;color:var(--txt);
  line-height:1.15;white-space:nowrap}
.gauge-ring .g-lab span{display:block;font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-3);margin-top:2px;white-space:nowrap}
.perf-bars{display:grid;gap:9px;flex:1;min-width:0}
.perf-bars .sb-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--txt-3);opacity:.85}
.perf-bars .sb-label:not(:first-child){margin-top:5px;padding-top:7px;
  border-top:1px dashed var(--border)}
.sb-row{display:grid;grid-template-columns:82px 1fr;gap:10px;align-items:center;
  font-family:var(--mono);font-size:.68rem;color:var(--txt-3)}
.sb-row .track{height:6px;border-radius:99px;background:rgba(0,141,255,.08);overflow:hidden}
.sb-row .fill{height:100%;border-radius:99px;width:0;transition:width 1.3s var(--e)}
.sb-us .fill{background:var(--grad)}
.sb-them .fill{background:#2A3950}

/* security flow */
.sec-flow{display:grid;gap:0}
.sec-step{display:flex;align-items:center;gap:13px;
  border:1px solid var(--border);border-radius:12px;background:rgba(7,26,61,.45);
  padding:11px 15px;font-size:.87rem;font-weight:500;color:#C7D2E8}
.sec-step svg{width:15px;height:15px;color:var(--icon);flex:none}
.sec-arrow{width:1px;height:14px;margin-inline-start:29px;
  background:linear-gradient(180deg,rgba(3,189,253,.55),rgba(3,189,253,.12))}

/* backup grid */
.bk-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bk-cell{border:1px solid var(--border);border-radius:12px;background:rgba(7,26,61,.45);
  padding:12px 14px}
.bk-cell b{display:block;font-family:var(--mono);font-size:.95rem;font-weight:600;color:var(--txt)}
.bk-cell small{font-size:.7rem;color:var(--txt-3)}

/* support chat */
.chat-mock{display:grid;gap:9px}
.chat-msg{max-width:86%;padding:11px 15px;border-radius:14px;font-size:.84rem;line-height:1.55}
.chat-user{justify-self:end;background:linear-gradient(180deg,#008DFF,#0073D1);
  color:#071A3D;font-weight:600;border-end-end-radius:5px}
[dir=rtl] .chat-user{border-end-end-radius:14px;border-end-start-radius:5px}
.chat-bot{justify-self:start;background:var(--surface-3);border:1px solid var(--border);
  border-end-start-radius:5px;color:#C7D2E8}
[dir=rtl] .chat-bot{border-end-start-radius:14px;border-end-end-radius:5px}
.chat-typing{display:inline-flex;gap:4px;align-items:center;padding:3px 0}
.chat-typing i{width:6px;height:6px;border-radius:50%;background:var(--txt-3);animation:bounce 1.2s infinite}
.chat-typing i:nth-child(2){animation-delay:.15s}
.chat-typing i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
.chat-ok{color:var(--ok);font-weight:600}

/* included-in-every-plan strip (answers "none of the complexity") */
.pillar-included{display:flex;align-items:center;gap:16px 22px;flex-wrap:wrap;margin-top:18px;
  padding:20px 24px;border:1px solid var(--border-2);border-radius:var(--r-lg);
  background:linear-gradient(110deg,rgba(11,34,71,.85),rgba(7,26,61,.55))}
.pi-label{display:inline-flex;align-items:center;gap:9px;flex:none;
  font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}
.pi-label::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--grad);flex:none}
.pillar-included ul{list-style:none;display:flex;flex-wrap:wrap;gap:9px 18px;flex:1;min-width:0}
.pillar-included li{display:inline-flex;align-items:center;gap:8px;
  font-size:.83rem;color:var(--txt-2)}
.pillar-included li svg{width:14px;height:14px;color:var(--ok);flex:none}
.pi-note{flex-basis:100%;margin-top:2px;padding-top:14px;border-top:1px dashed var(--border);
  color:var(--txt-3);font-size:.82rem;line-height:1.6}

/* ---------- INFRASTRUCTURE DIAGRAM ---------- */
.infra{position:relative}
.infra-flow{display:flex;align-items:stretch;gap:0;max-width:980px;margin:0 auto}
.infra-entry{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:0 8px;flex:none}
.infra-entry .node-chip{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;
  border:1px solid rgba(3,189,253,.35);background:rgba(3,189,253,.07);
  box-shadow:0 0 30px -6px rgba(3,189,253,.35)}
.infra-entry .node-chip svg{width:26px;height:26px;color:var(--icon)}
.infra-entry small{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-3)}
.infra-link{flex:1;display:flex;align-items:center;min-width:26px}
.infra-link i{display:block;width:100%;height:2px;border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(0,141,255,.55) 0 7px,transparent 7px 14px);
  animation:flow 1.1s linear infinite}
[dir=rtl] .infra-link i{animation-name:flowR}
@keyframes flow{to{background-position:-28px 0}}
@keyframes flowR{to{background-position:28px 0}}
.infra-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;flex:1}
.infra-tier{border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);padding:20px;display:flex;flex-direction:column;gap:9px;
  transition:border-color var(--t)}
.infra-tier:hover{border-color:var(--border-2)}
.infra-tier h3{font-family:var(--mono);font-size:.66rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);margin-bottom:4px}
.infra-node{display:flex;align-items:center;gap:11px;
  border:1px solid var(--border);border-radius:11px;background:rgba(7,26,61,.5);
  padding:10px 13px;font-size:.86rem;font-weight:500;color:#C7D2E8;
  transition:border-color var(--t-fast),transform var(--t-fast)}
.infra-node:hover{border-color:rgba(3,189,253,.4);transform:translateX(3px)}
[dir=rtl] .infra-node:hover{transform:translateX(-3px)}
.infra-node svg{width:15px;height:15px;color:var(--icon);flex:none}
.infra-node .n-dot{margin-inline-start:auto;width:6px;height:6px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 7px rgba(34,197,94,.7);flex:none}
.infra-note{text-align:center;margin-top:34px;color:var(--txt-3);font-size:.86rem}
.infra-note b{color:var(--txt-2);font-weight:600}

/* ---------- GLOBAL NETWORK ---------- */
.net-panel{border:1px solid var(--border-2);border-radius:var(--r-xl);
  background:linear-gradient(170deg,var(--surface-2),var(--surface));
  box-shadow:var(--shadow-3);overflow:hidden;position:relative}
.net-panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(0,141,255,.09) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 40%,#000 30%,transparent 75%);
          mask-image:radial-gradient(ellipse 70% 80% at 50% 40%,#000 30%,transparent 75%)}
.net-nodes{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  padding:clamp(28px,5vw,54px)}
.net-node{border:1px solid var(--border);border-radius:var(--r-lg);
  background:rgba(7,26,61,.62);backdrop-filter:blur(4px);
  padding:26px 24px;text-align:center;position:relative;
  transition:border-color var(--t),transform var(--t) var(--e)}
.net-node:hover{border-color:rgba(3,189,253,.4);transform:translateY(-4px)}
.net-radar{position:relative;width:58px;height:58px;margin:0 auto 18px;
  display:grid;place-items:center}
.net-radar::before,.net-radar::after{content:"";position:absolute;border-radius:50%;
  border:1px solid rgba(3,189,253,.35);animation:radar 2.6s var(--e) infinite}
.net-radar::after{animation-delay:1.3s}
@keyframes radar{0%{inset:14px;opacity:1}100%{inset:-6px;opacity:0}}
.net-radar .core{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
  background:rgba(3,189,253,.1);border:1px solid rgba(3,189,253,.4)}
.net-radar .core svg{width:16px;height:16px;color:var(--icon)}
.net-node h3{font-size:1.02rem;font-weight:700;letter-spacing:.04em}
.net-node small{display:block;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.12em;color:var(--txt-3);margin:5px 0 14px}
.net-ms{display:inline-flex;align-items:baseline;gap:7px;
  font-family:var(--mono);border:1px solid rgba(34,197,94,.3);
  background:rgba(34,197,94,.08);border-radius:99px;padding:6px 16px}
.net-ms b{font-size:1.05rem;font-weight:600;color:var(--ok)}
.net-ms span{font-size:.66rem;color:var(--txt-3)}
.net-status{display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:14px;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:var(--ok)}
.net-status i{width:6px;height:6px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 8px rgba(34,197,94,.8)}

/* ---------- PRICING ---------- */
.price-controls{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:52px}
.period-toggle{display:inline-flex;align-items:center;gap:2px;padding:4px;
  background:var(--surface);border:1px solid var(--border);border-radius:13px}
.period-toggle button{padding:9px 22px;border-radius:10px;font-weight:600;font-size:.9rem;
  color:var(--txt-2);transition:all var(--t-fast)}
.period-toggle button:hover{color:var(--txt)}
.period-toggle button.on{background:linear-gradient(180deg,#008DFF,#0073D1);color:#071A3D;
  box-shadow:0 2px 12px -2px rgba(0,141,255,.7)}
.save-tag{font-family:var(--mono);font-size:.68rem;font-weight:600;color:#86EFAC;
  background:rgba(34,197,94,.12);padding:2px 9px;border-radius:99px;margin-inline-start:8px}
.period-toggle button.on .save-tag{color:#071A3D;background:rgba(255,255,255,.25)}

.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);padding:30px 26px;
  transition:transform var(--t) var(--e),border-color var(--t),box-shadow var(--t)}
.plan:hover{transform:translateY(-5px);border-color:var(--border-2);box-shadow:var(--shadow-2)}
.plan.popular{border-color:transparent;
  background:linear-gradient(var(--surface-2),var(--surface-2)) padding-box,var(--grad) border-box;
  box-shadow:0 24px 70px -28px rgba(0,141,255,.55)}
.pop-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--grad);color:#071A3D;font-size:.68rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 15px;border-radius:99px;white-space:nowrap}
[dir=rtl] .pop-badge{transform:translateX(50%)}
.plan-tier{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.plan h3{font-size:1.18rem;font-weight:700}
.plan-code{font-family:var(--mono);font-size:.64rem;color:var(--txt-3);
  border:1px solid var(--border);padding:3px 9px;border-radius:7px}
.plan-desc{color:var(--txt-2);font-size:.85rem;min-height:40px;margin-bottom:18px}
.plan-price{display:flex;align-items:baseline;gap:7px;margin-bottom:6px}
.amt{font-family:var(--mono);font-size:2.1rem;font-weight:600;letter-spacing:-.03em}
.per{color:var(--txt-3);font-size:.86rem}
.plan-note{display:inline-flex;align-items:center;gap:6px;
  font-size:.74rem;color:var(--txt-3);min-height:20px;margin-bottom:18px}
.plan-note svg{width:12px;height:12px;color:var(--icon);flex:none}
.plan-note.free-domain{color:var(--ok)}
.res-bar{margin-bottom:20px}
.res-bar small{display:block;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin-bottom:6px}
.res-bar .track{height:4px;border-radius:99px;background:rgba(0,141,255,.08);overflow:hidden}
.res-bar .fill{height:100%;border-radius:99px;background:var(--grad);
  width:0;transition:width 1.2s var(--e)}
.res-summary{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:20px;padding:12px 14px;border:1px solid var(--border);
  border-radius:12px;background:rgba(3,189,253,.045)}
.res-summary span{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-3)}
.res-summary b{font-family:var(--mono);font-size:1rem;font-weight:600;color:var(--txt)}
.plan ul{list-style:none;display:grid;gap:10px;margin-bottom:26px;font-size:.88rem}
.plan li{display:flex;align-items:center;gap:10px;color:#B9C5DC}
.plan li>svg{width:14px;height:14px;color:var(--icon);flex:none}
.plan li b{color:var(--txt);font-weight:600}
.plan .btn{margin-top:auto}

/* ---------- COMPARE ---------- */
.cmp-wrap{border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);overflow:hidden;--cmp-sh:rgba(0,0,0,.5)}
[data-theme="light"] .cmp-wrap{--cmp-sh:rgba(7,26,61,.22)}
.cmp-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.cmp-hint{display:none;margin-top:12px;text-align:center;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-3)}
/* scroll shadows + hint — applied only when the table actually overflows */
.cmp-wrap.is-scrollable .cmp-scroll{
  background:
    linear-gradient(to right,var(--surface) 32%,rgba(0,0,0,0)) left center,
    linear-gradient(to left,var(--surface) 32%,rgba(0,0,0,0)) right center,
    radial-gradient(farthest-side at 0 50%,var(--cmp-sh),rgba(0,0,0,0)) left center,
    radial-gradient(farthest-side at 100% 50%,var(--cmp-sh),rgba(0,0,0,0)) right center;
  background-repeat:no-repeat;
  background-size:44px 100%,44px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll}
.cmp-wrap.is-scrollable .cmp-hint{display:block}
table.cmp{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px}
.cmp th,.cmp td{padding:14px 20px;text-align:start;border-bottom:1px solid var(--border)}
[dir=rtl] .cmp th,[dir=rtl] .cmp td{text-align:right}
.cmp tbody tr:last-child td{border-bottom:none}
.cmp thead th{position:sticky;top:0;background:var(--surface-3);z-index:2;
  font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt-3)}
.cmp thead th.us-col{color:var(--accent)}
.cmp td:first-child{color:#C7D2E8;font-weight:500}
.cmp tbody tr:not(.cat):hover td{background:rgba(0,141,255,.035)}
.us-col{background:rgba(0,141,255,.055)}
.cmp .cat td{
  background:rgba(0,141,255,.04);padding:10px 20px;
  font-family:var(--mono);font-size:.66rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.cmp .yes{color:var(--ok)}
.cmp .no{color:var(--txt-3)}

/* ---------- TESTIMONIALS ---------- */
.tst-slider{position:relative}
.tst-grid{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none}
.tst-grid::-webkit-scrollbar{display:none}
.tst{flex:0 0 calc((100% - 36px)/3);scroll-snap-align:start;display:flex;flex-direction:column;gap:15px;
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  padding:28px;transition:transform var(--t) var(--e),border-color var(--t)}
.tst:hover{transform:translateY(-4px);border-color:var(--border-2)}
.stars{display:flex;gap:3px}
.stars svg{width:14px;height:14px;color:var(--warn);fill:currentColor}
.tst q{color:#C7D2E8;font-size:.93rem;line-height:1.75;quotes:"\201C" "\201D"}
.tst-ar{direction:rtl;text-align:right;font-family:var(--font-ar)}
[dir=rtl] .tst q:not(.tst-ar){direction:ltr;text-align:left}
.tst-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;z-index:2;cursor:pointer;
  border:1px solid var(--border-2);background:rgba(7,17,33,.75);color:var(--txt);
  backdrop-filter:blur(8px);transition:border-color var(--t-fast),color var(--t-fast)}
.tst-nav:hover{border-color:var(--accent);color:var(--accent)}
.tst-nav:disabled{opacity:.35;pointer-events:none}
.tst-nav svg{width:17px;height:17px}
.tst-prev{inset-inline-start:-6px}
.tst-next{inset-inline-end:-6px}
.tst-prev svg{transform:rotate(180deg)}
[dir=rtl] .tst-prev svg{transform:none}
[dir=rtl] .tst-next svg{transform:rotate(180deg)}
[data-theme="light"] .tst-nav{background:rgba(255,255,255,.9);box-shadow:0 4px 14px -6px rgba(7,26,61,.35)}
.tst .who{display:flex;align-items:center;gap:13px;margin-top:auto;
  padding-top:16px;border-top:1px solid var(--border)}
.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-weight:700;font-size:.88rem;color:#fff;font-family:var(--font)}
.avatar-generic{background:var(--surface-3);border:1px solid var(--border-2);color:var(--accent)}
.avatar-generic svg{width:18px;height:18px}
.av-cyan{background:linear-gradient(135deg,#03BDFD,#008DFF)}
.av-violet{background:linear-gradient(135deg,#0130B9,#8B5CF6)}
.av-green{background:linear-gradient(135deg,#22C55E,#03BDFD)}
.av-gold{background:linear-gradient(135deg,#F59E0B,#EF4444)}
.av-blue{background:linear-gradient(135deg,#008DFF,#03BDFD)}
.av-teal{background:linear-gradient(135deg,#14B8A6,#008DFF)}
.tst .who b{display:block;font-size:.88rem}
.tst .who>span:last-child span{color:var(--txt-3);font-size:.76rem}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;align-items:start}
.faq-side{position:sticky;top:110px}
.faq-side h2{margin-bottom:14px}
.faq-side p{color:var(--txt-2);font-size:1.02rem;line-height:1.7;margin-bottom:28px}
.faq-side .btn{margin-bottom:26px}
.faq-mini{display:grid;gap:12px}
.faq-mini span{display:flex;align-items:center;gap:10px;font-size:.87rem;color:var(--txt-2)}
.faq-mini svg{width:14px;height:14px;color:var(--icon);flex:none}
.acc{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);
  transition:border-color var(--t),background var(--t)}
.acc+.acc{margin-top:10px}
.acc.open{border-color:var(--border-2);background:var(--surface-2)}
.acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;font-weight:600;font-size:.99rem;text-align:start;color:var(--txt);
  font-family:var(--font)}
body.ar .acc-btn{font-family:var(--font-ar)}
.acc-btn .chev{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
  border:1px solid var(--border);color:var(--txt-3);transition:all var(--t)}
.acc-btn .chev svg{width:14px;height:14px;transition:transform var(--t)}
.acc.open .chev{background:rgba(3,189,253,.1);border-color:rgba(3,189,253,.35);color:var(--accent)}
.acc.open .chev svg{transform:rotate(45deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .35s var(--e)}
.acc.open .acc-body{max-height:320px}
.acc-body p{padding:0 22px 20px;color:var(--txt-2);font-size:.92rem;line-height:1.75}

/* ---------- CTA ---------- */
.cta-panel{position:relative;overflow:hidden;text-align:center;
  border:1px solid rgba(0,141,255,.3);border-radius:var(--r-xl);
  background:
    radial-gradient(700px 320px at 50% -80px,rgba(0,141,255,.28),transparent 65%),
    radial-gradient(500px 260px at 82% 110%,rgba(3,189,253,.12),transparent 60%),
    linear-gradient(180deg,#0C1526,#0A111D);
  padding:clamp(52px,7vw,88px) 40px}
.cta-panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(0,141,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,141,255,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 0,#000 20%,transparent 75%);
          mask-image:radial-gradient(ellipse 60% 70% at 50% 0,#000 20%,transparent 75%)}
.cta-panel h2{position:relative;margin-bottom:16px}
.cta-panel p{position:relative;color:var(--txt-2);max-width:520px;margin:0 auto 34px;font-size:1.06rem}
.cta-actions{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--border);background:#04060A;margin-top:30px;overflow:hidden;
  padding:30px 0 0}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:22px 36px;padding-bottom:20px;min-width:0}
.ft-grid-bottom{row-gap:16px}
.ft-col{min-width:0}
.ft-brand p{color:var(--txt-2);font-size:.88rem;margin:12px 0 16px;max-width:270px;line-height:1.7;overflow-wrap:anywhere}
.socials{display:flex;gap:9px}
.socials a{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--border);color:var(--txt-2);transition:all var(--t-fast)}
.socials a:hover{color:var(--accent);border-color:rgba(3,189,253,.4);transform:translateY(-2px)}
.socials svg{width:15px;height:15px}
.ft-col h3{font-family:var(--mono);font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);margin-bottom:14px}
.ft-col ul{list-style:none;display:grid;gap:11px}
.ft-col a{color:var(--txt-2);font-size:.89rem;transition:color var(--t-fast)}
.ft-col a:hover{color:var(--txt)}
.news-box{display:flex;border:1px solid var(--border-2);border-radius:12px;
  overflow:hidden;background:rgba(3,5,9,.7);margin-top:14px}
.news-box input{flex:1;background:none;border:none;outline:none;min-width:0;
  padding:12px 15px;color:var(--txt);font-size:.87rem;font-family:var(--mono)}
.news-box input::placeholder{color:var(--txt-3)}
.news-box button{background:linear-gradient(180deg,#008DFF,#0073D1);color:#071A3D;
  font-weight:600;padding:0 18px;font-size:.84rem}
.payments{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;align-items:center}
.payments .pay-ic{display:block;height:30px;width:48px;flex:none;border-radius:5px;
  box-shadow:0 2px 8px -2px rgba(0,0,0,.45);
  transition:transform var(--t-fast) var(--e)}
.payments .pay-ic:hover{transform:translateY(-2px)}
[data-theme="light"] .payments .pay-ic{box-shadow:0 2px 7px -2px rgba(7,26,61,.25)}
.ft-pay-row{display:flex;align-items:flex-end;gap:14px 26px;flex-wrap:wrap;margin-top:0}
.ft-pay-row .payments{margin-top:0}
.ft-ids{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.ft-id{display:flex;align-items:center;gap:10px;padding-block:8px;padding-inline:9px 14px;
  border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
.ft-id-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;flex:none;
  background:linear-gradient(150deg,rgba(0,141,255,.14),rgba(3,189,253,.08));
  border:1px solid rgba(0,141,255,.3)}
.ft-id-ic svg{width:16px;height:16px;color:var(--icon)}
.ft-id-tx{display:flex;flex-direction:column;gap:1px;line-height:1.25}
.ft-id-tx small{font-size:.66rem;color:var(--txt-3);letter-spacing:.05em;white-space:nowrap}
.ft-id-tx b{font-family:var(--mono);font-size:.84rem;font-weight:600;color:var(--txt);unicode-bidi:isolate}
[data-theme="light"] .ft-id{background:#fff;box-shadow:0 1px 4px -2px rgba(7,26,61,.18)}
@media(min-width:1021px){
  .ft-ids{margin-inline-start:auto;padding-inline-start:26px;border-inline-start:1px solid var(--border)}
}
.ft-bottom{border-top:1px solid var(--border);padding:22px 0;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;font-size:.82rem;color:var(--txt-3)}
.ft-bottom .st{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.74rem;color:var(--ok)}
body.ar .ft-bottom .st{font-family:var(--font-ar)}

/* ---------- WHATSAPP FAB ---------- */
.wa-fab{position:fixed;bottom:24px;inset-inline-end:24px;z-index:80;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#0B8064;color:#fff;box-shadow:0 12px 34px -8px rgba(11,128,100,.5);
  transition:transform var(--t-fast) var(--e)}
.wa-fab:hover{transform:scale(1.08)}
.wa-fab svg{width:27px;height:27px}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1120px){
  .hero-grid{grid-template-columns:1fr;gap:64px}
  .hero-sub{max-width:100%}
  .tech-groups{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .trustbar-grid{grid-template-columns:repeat(3,1fr)}
  .trust-item:nth-child(4){border-inline-start:none}
  .trust-item{border-top:1px solid var(--border)}
  .trust-item:nth-child(-n+3){border-top:none}
  .plans{grid-template-columns:1fr 1fr}
  .plan.popular{order:-1}
  .pillars{grid-template-columns:1fr}
  .bento .b4,.bento .b3{grid-column:span 6}
  .bento .b2{grid-column:span 3}
  .service-extension{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr 1fr 1fr}
  .infra-flow{flex-direction:column;gap:22px}
  .infra-entry{flex-direction:row}
  .infra-link{min-width:0;min-height:26px;justify-content:center}
  .infra-link i{width:2px;height:100%;
    background:repeating-linear-gradient(180deg,rgba(0,141,255,.55) 0 7px,transparent 7px 14px);
    animation:flowV 1.1s linear infinite}
  .infra-tiers{grid-template-columns:1fr}
}
[data-theme="light"] .svc-kpi,[data-theme="light"] .sec-step,[data-theme="light"] .bk-cell,[data-theme="light"] .solution-item{background:rgba(255,255,255,.72)}
[data-theme="light"] .net-panel::before{background-image:radial-gradient(rgba(0,141,255,.12) 1px,transparent 1px)}
[data-theme="light"] .net-node{background:rgba(255,255,255,.82)}
[data-theme="light"] .cta-panel{background:radial-gradient(700px 320px at 50% -80px,rgba(0,141,255,.12),transparent 65%),linear-gradient(180deg,#FFFFFF,#F5F8FC)}
.abt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1020px){
  .abt-grid{grid-template-columns:1fr 1fr}
  .nav-links,.nav-cta .btn-getstarted{display:none}
  .burger{display:grid}
  .topbar .contacts span:nth-child(2){display:none}
  .tst{flex-basis:calc((100% - 18px)/2)}
  .mobile-menu .mm-client{margin-top:6px}
  .mobile-menu .mm-cta{margin:8px 0 2px;justify-content:center}
}
@media(max-width:680px){
  section{padding:72px 0}
  .wrap{padding:0 20px}
  .abt-grid{grid-template-columns:1fr}
  .tst{flex-basis:82%}
  .about-pillars-section,.about-tl-section{overflow-x:clip}
  .about-snapshot{flex-wrap:wrap;max-width:100%}
  .about-snapshot div{flex:1 1 45%;padding:13px 14px;border-top:1px solid var(--border)}
  .about-snapshot div:nth-child(-n+2){border-top:0}
  .about-snapshot div:nth-child(even){border-inline-start:1px solid var(--border)}
  .about-snapshot div:first-child{border-inline-start:0}
  .ft-col-contact{grid-column:span 2}
  .stats-grid{grid-template-columns:1fr 1fr}
  .tech-groups{grid-template-columns:1fr}
  .trustbar-grid{grid-template-columns:1fr 1fr}
  .trust-item{border-inline-start:none;border-top:1px solid var(--border)}
  .trust-item:nth-child(-n+2){border-top:none}
  .trust-item:nth-child(even){border-inline-start:1px solid var(--border)}
  .plans{grid-template-columns:1fr}
  .bento .b2{grid-column:span 6}
  .solution-list{grid-template-columns:1fr}
  .service-extension{padding:24px 20px}
  .faq-grid{grid-template-columns:1fr;gap:36px}
  .faq-side{position:static}
  .float-chip{display:none}
  .ft-grid{grid-template-columns:1fr 1fr}
  .monitor-foot{flex-wrap:wrap}
  .monitor-status{margin-inline-start:0}
  .net-nodes{grid-template-columns:1fr}
  .topbar .contacts{display:none}
  .topbar .wrap{justify-content:center}
  .hero{padding:64px 0 56px}
  .nodes{grid-template-columns:1fr 1fr}
  .node:nth-child(3){display:none}
  .monitor-body{padding:16px}
  .monitor-foot{padding-inline:16px}
  .plan{padding:26px 22px}
}
@media(max-width:560px){
  .trust-item{padding:14px 13px;gap:9px}
  .trust-item svg{width:15px;height:15px}
  .trust-item b,.trust-item small{white-space:normal}
  .trust-item b{font-size:.78rem}
  .trust-item small{font-size:.63rem}
  .pillar-included{padding:18px 16px;gap:12px 14px}
  .pi-label{flex-basis:100%}
  .pillar-included ul{gap:8px 14px}
  .pillar-included li{font-size:.8rem}
  .pi-note{font-size:.78rem}
}
@media(max-width:480px){
  .svc-visual{gap:8px}
  .svc-kpi{padding:10px 8px}
  .svc-kpi b{font-size:.85rem}
  .svc-kpi small{font-size:.58rem;letter-spacing:.05em}
  .stat{padding:26px 14px 24px}
  .stat .stat-num{font-size:clamp(1.55rem,7.4vw,2rem)}
  .stat .stat-label{font-size:.85rem}
  .stat .stat-note{font-size:.72rem}
}
@media(max-width:360px){
  .svc-kpi{padding:9px 6px}
  .svc-kpi b{font-size:.78rem}
}

/* ---------- LIGHT THEME SURFACE REFINEMENT ---------- */
[data-theme="light"] .trustbar-grid{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(245,248,252,.9))}
[data-theme="light"] .pillar-included{background:linear-gradient(110deg,#FFFFFF,#F1F5F9)}
[data-theme="light"] .pillar-link:hover{color:var(--primary-2)}
[data-theme="light"] .tech-group,[data-theme="light"] .svc-card,[data-theme="light"] .pillar,
[data-theme="light"] .plan,[data-theme="light"] .cmp-wrap,[data-theme="light"] .tst,
[data-theme="light"] .acc{background:var(--surface)}
[data-theme="light"] .stat{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(245,248,252,.72))}
[data-theme="light"] .node,[data-theme="light"] .infra-node,[data-theme="light"] .chat-bot,
[data-theme="light"] .svc-kpi,[data-theme="light"] .bk-cell,[data-theme="light"] .sec-step,
[data-theme="light"] .solution-item{background:rgba(255,255,255,.82);color:var(--txt-2)}
[data-theme="light"] .net-panel{background:linear-gradient(170deg,#FFFFFF,#F5F8FC)}
[data-theme="light"] .net-node{background:rgba(255,255,255,.9)}
[data-theme="light"] .plan.popular{background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box}
[data-theme="light"] .cmp thead th{background:var(--surface-3)}
[data-theme="light"] .cmp td:first-child,[data-theme="light"] .tst q{color:var(--txt-2)}
[data-theme="light"] .plan li{color:var(--txt-2)}
[data-theme="light"] .infra-node{border-color:var(--border)}
[data-theme="light"] .hero .term{background:#FFFFFF}
[data-theme="light"] footer{background:#F5F8FC}
[data-theme="light"] .news-box{background:#FFFFFF}
[data-theme="light"] .bg-grid{background-image:linear-gradient(rgba(0,141,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,141,255,.055) 1px,transparent 1px)}
[data-theme="light"] .bgfx::before{background:radial-gradient(30rem 24rem at 12% 28%,rgba(0,141,255,.12),transparent 70%),radial-gradient(28rem 22rem at 86% 64%,rgba(3,189,253,.09),transparent 72%)}
[data-theme="light"] .bgfx::after{background:radial-gradient(22rem 18rem at 72% 12%,rgba(0,141,255,.1),transparent 70%),radial-gradient(24rem 20rem at 32% 82%,rgba(0,141,255,.07),transparent 72%)}
[data-theme="light"] .bg-noise{mix-blend-mode:multiply;opacity:.035}
[data-theme="light"] .bg-grid{opacity:.8}
[data-theme="light"] .orb-a{background:radial-gradient(circle,rgba(0,141,255,.10),transparent 64%)}
[data-theme="light"] .orb-b{background:radial-gradient(circle,rgba(3,189,253,.07),transparent 64%)}

/* footer contact block */
.ft-contact{display:grid;gap:10px;margin:0 0 20px;max-width:300px}
.ft-contact>span{display:flex;align-items:flex-start;gap:10px;font-size:.85rem;color:var(--txt-2);line-height:1.6}
.ft-contact svg{width:15px;height:15px;color:var(--icon);flex:none;margin-top:3px}
.ft-contact a{transition:color var(--t-fast)}
.ft-contact a:hover{color:var(--txt)}

/* ===== Legal pages ===== */
.legal-hero{padding-bottom:34px}
.legal-hero-meta{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:26px}
.legal-hero-meta span{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--border);
  border-radius:99px;background:rgba(0,141,255,.045);color:var(--txt-2);font-size:.76rem}
.legal-hero-meta svg{width:14px;height:14px;color:var(--icon)}
.legal-layout{display:grid;grid-template-columns:240px minmax(0,820px);gap:28px;align-items:start;justify-content:center}
.legal-toc{position:sticky;top:104px;border:1px solid var(--border);border-radius:var(--r-lg);background:rgba(7,26,61,.76);
  padding:18px 12px;box-shadow:var(--shadow-2)}
.legal-toc-head{display:flex;align-items:center;gap:11px;padding:2px 8px 16px;border-bottom:1px solid var(--border)}
.legal-toc-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:rgba(3,189,253,.1);color:var(--accent)}
.legal-toc-icon svg{width:16px;height:16px}
.legal-toc-head strong,.legal-toc-head span:last-child{display:block}
.legal-toc-head strong{font-size:.84rem}
.legal-toc-head span:last-child{margin-top:2px;color:var(--txt-3);font-size:.7rem}
.legal-toc nav{display:grid;gap:3px;padding-top:10px}
.legal-toc a{display:flex;align-items:baseline;gap:9px;padding:9px 8px;border-radius:8px;color:var(--txt-2);font-size:.78rem;line-height:1.45;transition:color var(--t-fast),background var(--t-fast)}
.legal-toc a span{font-family:var(--mono);font-size:.64rem;color:var(--accent);opacity:.75}
.legal-toc a:hover{color:var(--txt);background:rgba(0,141,255,.1)}
.legal-body{min-width:0;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);padding:clamp(24px,4vw,48px)}
.legal-section{scroll-margin-top:112px;padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid var(--border)}
.legal-section:last-of-type{padding-bottom:0;margin-bottom:0;border-bottom:0}
.legal-section-heading{display:flex;align-items:center;gap:12px;margin-bottom:15px}
.legal-section-heading>span{display:grid;place-items:center;width:31px;height:31px;flex:none;border-radius:9px;
  background:rgba(3,189,253,.09);color:var(--accent);font-family:var(--mono);font-size:.64rem}
.legal-body h2{font-size:1.3rem;margin:0}
.legal-body p{color:var(--txt-2);font-size:.95rem;line-height:1.85;margin-bottom:12px}
.legal-body ul{display:grid;gap:10px;margin-bottom:14px;list-style:none}
.legal-body li{position:relative;padding-inline-start:26px;
  color:var(--txt-2);font-size:.93rem;line-height:1.8}
.legal-body li::before{content:"";position:absolute;inset-inline-start:4px;top:11px;
  width:7px;height:7px;border-radius:2px;background:var(--grad);opacity:.85}
.legal-note{margin-top:34px;padding-top:20px;border-top:1px dashed var(--border-2);
  color:var(--txt-3);font-size:.82rem}

@media(max-width:1100px){
  .legal-layout{grid-template-columns:1fr;gap:16px}
  .legal-toc{position:static}
  .legal-toc nav{display:flex;overflow-x:auto;gap:5px;padding:10px 2px 2px;scrollbar-width:thin}
  .legal-toc a{min-width:max-content}
}

/* ===== About page ===== */
.page-hero{padding:84px 0 12px;text-align:center}
.page-hero h1{margin-bottom:18px}
.page-intro{color:var(--txt-2);font-size:1.12rem;line-height:1.75;max-width:640px;margin:0 auto}
.shared-hosting-hero{padding-bottom:34px}
.shared-hosting-hero .page-intro{max-width:720px}
.shared-hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}
.shared-price-card{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;max-width:620px;margin:26px auto 0;padding:14px 20px;border:1px solid rgba(3,189,253,.24);border-radius:14px;background:linear-gradient(110deg,rgba(3,189,253,.08),rgba(0,141,255,.08));text-align:start}
.shared-price-label{display:block;color:var(--txt-3);font-size:.7rem;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}
.shared-price{display:flex;align-items:baseline;gap:5px;color:var(--txt);font-family:var(--mono);font-size:1.45rem}
.shared-price small{color:var(--txt-3);font-size:.72rem;font-weight:500}
.shared-price-note{display:inline-flex;align-items:center;gap:6px;color:var(--txt-2);font-size:.78rem}
.shared-price-note svg{width:14px;height:14px;color:var(--ok)}
.shared-plan-chip{padding:6px 10px;border:1px solid var(--border);border-radius:8px;color:var(--accent);font-family:var(--mono);font-size:.7rem;white-space:nowrap}
.about-hero{padding-bottom:28px}
.about-snapshot{display:flex;justify-content:center;gap:0;max-width:720px;margin:34px auto 0;
  border:1px solid var(--border);border-radius:var(--r-lg);background:rgba(7,26,61,.72);overflow:hidden}
.about-snapshot div{flex:1;padding:16px 20px;border-inline-start:1px solid var(--border)}
.about-snapshot div:first-child{border-inline-start:0}
.about-snapshot strong,.about-snapshot span{display:block}
.about-snapshot strong{font-family:var(--mono);font-size:1.15rem;color:var(--accent);font-weight:600}
.about-snapshot span{margin-top:3px;color:var(--txt-3);font-size:.7rem;white-space:nowrap}
.about-pillars-section{background:linear-gradient(180deg,rgba(7,26,61,.32),transparent 70%)}
.about-pillars .pillar{gap:0}
.about-pillars .pillar-tag{display:inline-flex;align-items:center;gap:8px;margin-top:auto;
  padding-top:16px;border-top:1px solid var(--border);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.about-pillars .pillar-tag i{width:6px;height:6px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 8px rgba(34,197,94,.7);flex:none}
.abt-card{display:flex;flex-direction:column;gap:0;
  border:1px solid var(--border);border-radius:var(--r);background:var(--surface);
  padding:24px;transition:transform var(--t) var(--e),border-color var(--t),background var(--t),box-shadow var(--t)}
.abt-card:hover{transform:translateY(-4px);border-color:var(--border-2);background:var(--surface-2);box-shadow:var(--shadow-2)}
.abt-card .svc-ic{width:44px;height:44px;margin-bottom:16px}
.abt-card .svc-ic svg{width:20px;height:20px}
.abt-card h3{font-size:1rem;margin-bottom:7px}
.abt-card p{color:var(--txt-2);font-size:.85rem;line-height:1.65;margin-bottom:16px}
.abt-card .link-more{margin-top:auto;color:var(--txt-3);font-size:.8rem}
.abt-card:hover .link-more{color:var(--accent)}

/* journey timeline */
.tl{position:relative;max-width:720px;margin:0 auto;padding-inline-start:38px}
.tl::before{content:"";position:absolute;inset-block:10px;inset-inline-start:10px;width:2px;
  background:linear-gradient(180deg,var(--accent),rgba(0,141,255,.12))}
.tl-item{position:relative;padding:0 0 38px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute;inset-inline-start:-38px;top:2px;
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface-2);border:2px solid var(--accent);
  box-shadow:0 0 14px rgba(3,189,253,.45)}
.tl-dot svg{width:10px;height:10px;color:var(--accent)}
.tl-year{font-family:var(--mono);font-size:.78rem;font-weight:600;
  letter-spacing:.14em;color:var(--accent)}
.tl-item h3{font-size:1.12rem;margin:7px 0 6px}
.tl-item p{color:var(--txt-2);font-size:.93rem;line-height:1.7}

/* full-width registration strip */
.ft-reg-strip{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  border:1px solid rgba(34,197,94,.25);border-radius:14px;
  background:rgba(34,197,94,.05);
  padding:15px 26px;margin-bottom:12px;text-align:center}
.ft-reg-strip svg{width:19px;height:19px;color:var(--ok);flex:none}
.ft-reg-strip span{font-size:.87rem;color:var(--txt-2);font-weight:500}
.ft-reg-strip .sep{color:var(--ok);margin:0 6px;font-weight:700}
[data-theme="light"] .ft-reg-strip{background:rgba(34,197,94,.07);border-color:rgba(22,163,74,.3)}

/* product pages */
.plans-3{grid-template-columns:repeat(3,1fr)}
.plans-4{grid-template-columns:repeat(4,1fr)}
.tlds-page{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:980px;margin:0 auto}
.tld-card{display:flex;flex-direction:column;align-items:center;gap:8px;
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  padding:28px 20px;transition:transform var(--t) var(--e),border-color var(--t)}
.tld-card:hover{transform:translateY(-4px);border-color:var(--border-2)}
.tld-name{font-family:var(--mono);font-size:1.35rem;font-weight:600;color:var(--txt)}
.tld-price{font-family:var(--mono);font-size:1.05rem;font-weight:600;color:var(--accent)}
.tld-card .per{color:var(--txt-3);font-size:.8rem;margin-top:-4px}
.tld-card .btn{margin-top:8px;width:100%}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1120px){
  .plans-4{grid-template-columns:1fr 1fr}
  .plans-3{grid-template-columns:1fr 1fr}
  .tlds-page{grid-template-columns:1fr 1fr}
  .info-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .shared-hosting-hero{padding-top:62px}
  .shared-hero-actions{flex-direction:column;margin-inline:14px}
  .shared-hero-actions .btn{width:100%}
  .shared-price-card{align-items:flex-start;justify-content:flex-start;gap:12px;margin-inline:14px;padding:16px}
  .shared-price-card>div{width:100%}
  .plans-3,.plans-4{grid-template-columns:1fr}
  .tlds-page{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr}
}

/* ---------- PLAN CARDS (mirror the DHT-eg.com product pages) ---------- */
.plan-cards{
  --pc-red:#ef4444; --pc-orange:#f07040; --pc-green:#34d399;
  --pc-fg:#f8fafc; --pc-muted:#94a3b8;
  --pc-card:rgba(11,18,32,.7); --pc-box:rgba(11,18,32,.5);
  --pc-border:rgba(148,163,184,.16); --pc-chip:rgba(15,23,42,.6);
  --pc-red-10:rgba(239,68,68,.1); --pc-orange-10:rgba(240,112,64,.1);
  --pc-green-10:rgba(52,211,153,.1);
}
[data-theme="light"] .plan-cards{
  --pc-red:#d00000; --pc-orange:#e85000; --pc-green:#10b981;
  --pc-fg:#0b1220; --pc-muted:#64748b;
  --pc-card:rgba(255,255,255,.72); --pc-box:rgba(255,255,255,.55);
  --pc-border:#e2e8f0; --pc-chip:rgba(241,245,249,.7);
  --pc-red-10:rgba(208,0,0,.1); --pc-orange-10:rgba(232,80,0,.1);
  --pc-green-10:rgba(16,185,129,.12);
}

/* display width — matches DHT-eg.com max-w-7xl (80rem) + px-6 lg:px-8 */
.plan-cards>.wrap{max-width:1280px;padding:0 32px}
@media(max-width:1023.98px){.plan-cards>.wrap{padding:0 24px}}

/* toggle */
.plan-cards .price-controls{margin-bottom:48px}
.plan-cards .period-toggle{border-radius:999px;padding:4px;background:var(--pc-chip);border-color:var(--pc-border)}
.plan-cards .period-toggle button{border-radius:999px;padding:8px 18px;font-size:.875rem;color:var(--pc-muted)}
.plan-cards .period-toggle button:hover{color:var(--pc-fg)}
.plan-cards .period-toggle button.on{background:var(--pc-card);color:var(--pc-fg);box-shadow:0 1px 2px rgba(0,0,0,.35)}
.plan-cards .save-tag{font-family:var(--font);font-size:.75rem;letter-spacing:0;color:var(--pc-green);background:var(--pc-green-10);padding:2px 8px}
.plan-cards .period-toggle button.on .save-tag{color:var(--pc-green);background:var(--pc-green-10)}
.plan-cards .pill-switch{border-color:var(--pc-border)}

/* card */
.plan-cards .plans{gap:20px}
.plan-cards .plan.ref-plan{
  background:var(--pc-card);border-color:var(--pc-border);border-radius:16px;
  padding:24px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 20px 60px -30px rgba(11,18,32,.55)}
.plan-cards .plan.ref-plan:hover{transform:translateY(-4px);border-color:var(--pc-border);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.6)}
.plan-cards .plan.ref-plan.popular{
  border-color:rgba(239,68,68,.4);background:var(--pc-card);
  box-shadow:0 0 0 1px rgba(239,68,68,.2),0 24px 60px -30px rgba(0,0,0,.6)}
[data-theme="light"] .plan-cards .plan.ref-plan.popular{
  border-color:rgba(208,0,0,.35);
  box-shadow:0 0 0 1px rgba(208,0,0,.15),0 20px 50px -30px rgba(7,26,61,.25)}

/* popular ribbon */
.plan-cards .pop-badge{left:24px;right:auto;transform:none;border-radius:999px;
  background:linear-gradient(90deg,var(--pc-red),var(--pc-orange));color:#fff;
  font-family:var(--font);font-size:.75rem;font-weight:500;letter-spacing:0;text-transform:none;padding:4px 12px}
[dir=rtl] .plan-cards .pop-badge{left:auto;right:24px;transform:none}

/* header */
.ref-plan .pc-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ref-plan .pc-head h3{font-size:1.125rem;font-weight:600;letter-spacing:-.01em;color:var(--pc-fg)}
.ref-plan .pc-desc{margin-top:4px;font-size:.875rem;color:var(--pc-muted);line-height:1.5}
.ref-plan .pc-badge{width:40px;height:40px;border-radius:16px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--pc-red-10),var(--pc-orange-10));
  font-size:.8rem;font-weight:700;color:var(--pc-red)}
.ref-plan .pc-badge.long{width:auto;min-width:40px;padding:0 8px;font-size:.62rem;line-height:1.1;text-align:center;letter-spacing:-.01em}

/* price + domain note */
.ref-plan .pc-price{display:flex;align-items:baseline;gap:4px;margin-top:16px}
.ref-plan .pc-price .amt{font-family:inherit;font-size:1.875rem;font-weight:600;letter-spacing:-.02em;color:var(--pc-fg)}
.ref-plan .pc-price .per{color:var(--pc-muted);font-size:.875rem}
.ref-plan .pc-domain{margin-top:8px;font-size:.75rem;color:var(--pc-muted);min-height:18px}
.ref-plan .pc-domain.included{color:var(--pc-green);font-weight:500}

/* order button */
.ref-plan .pc-order{margin-top:16px;width:100%;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;border:1px solid var(--pc-border);border-radius:999px;min-height:36px;padding:0 16px;
  font-size:.875rem;font-weight:500;color:var(--pc-fg);background:transparent;
  transition:background var(--t-fast),border-color var(--t-fast)}
.ref-plan .pc-order:hover{background:var(--pc-chip);border-color:var(--pc-border)}

/* detail sections */
.ref-plan .pc-details{margin-top:20px;display:grid;gap:16px}
.ref-plan .pc-title{font-size:.75rem;font-weight:600;letter-spacing:.3px;text-transform:uppercase;
  color:var(--pc-muted);margin-bottom:12px}
.ref-plan .pc-box{border:1px solid var(--pc-border);border-radius:12px;background:var(--pc-box);padding:16px}
.ref-plan .pc-box-title{display:flex;align-items:center;gap:6px;font-size:.75rem;font-weight:600;
  letter-spacing:.3px;text-transform:uppercase;margin-bottom:8px}
.ref-plan .pc-box-title.red{color:var(--pc-red)}
.ref-plan .pc-box-title.muted{color:var(--pc-muted)}
.ref-plan .pc-box-title svg{width:12px;height:12px;flex:none}

.ref-plan .pc-list{display:grid;gap:8px}
.ref-plan .pc-li{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--pc-fg);line-height:1.5}
.ref-plan .pc-li svg{width:14px;height:14px;color:var(--pc-red);flex:none}
.ref-plan .pc-li b{font-weight:600}
.ref-plan .pc-li .muted{color:var(--pc-muted);margin-inline-start:4px}

.ref-plan .pc-bl{display:grid;gap:6px}
.ref-plan .pc-bl p{font-size:.75rem;color:var(--pc-muted);line-height:1.5}
.ref-plan .pc-bl b{font-weight:500;color:var(--pc-fg)}
.ref-plan .pc-bl .pc-total{margin-top:6px;font-weight:500;color:var(--pc-green)}

.ref-plan .pc-chips{display:flex;flex-wrap:wrap;gap:6px}
.ref-plan .pc-chips span{border:1px solid var(--pc-border);background:var(--pc-chip);border-radius:10px;
  padding:4px 8px;font-size:11px;color:var(--pc-muted)}
.ref-plan .pc-chips.accel span{border-color:transparent;background:var(--pc-red-10);color:var(--pc-red);font-weight:500}
.ref-plan .pc-chips.tech span{border-color:transparent;background:var(--pc-chip);padding:2px 6px;font-size:10px}
.ref-plan .pc-note{margin-top:8px;font-size:11px;color:var(--pc-muted)}

.ref-plan .pc-kv{display:grid;gap:6px}
.ref-plan .pc-kv div{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.75rem}
.ref-plan .pc-kv div>span:first-child{color:var(--pc-muted)}
.ref-plan .pc-kv div>span:last-child{font-weight:500;color:var(--pc-fg)}

/* ===== Blog ===== */
.blog-feat{display:flex;align-items:center;gap:24px;
  border:1px solid var(--border-2);border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgba(0,141,255,.1),rgba(3,189,253,.04));
  padding:clamp(24px,4vw,40px);transition:transform var(--t) var(--e),border-color var(--t)}
.blog-feat:hover{transform:translateY(-3px);border-color:rgba(0,141,255,.45)}
.blog-feat-txt{flex:1;display:flex;flex-direction:column;gap:10px}
.blog-feat-txt h3{font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.3}
.blog-feat-txt p{color:var(--txt-2);font-size:.95rem;line-height:1.7}
.blog-arrow{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1px solid var(--border-2);color:var(--accent);transition:all var(--t)}
.blog-feat:hover .blog-arrow{background:var(--grad);color:#071A3D;border-color:transparent}
.blog-arrow svg{width:20px;height:20px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.blog-card{display:flex;flex-direction:column;gap:10px;
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  padding:26px;transition:transform var(--t) var(--e),border-color var(--t),background var(--t)}
.blog-card:hover{transform:translateY(-4px);border-color:var(--border-2);background:var(--surface-2)}
.blog-cat{display:inline-flex;width:fit-content;font-family:var(--mono);font-size:.64rem;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  background:rgba(3,189,253,.08);border:1px solid rgba(3,189,253,.3);
  border-radius:99px;padding:4px 12px}
.blog-card h3{font-size:1.05rem;line-height:1.45}
.blog-card p{color:var(--txt-2);font-size:.87rem;line-height:1.7}
.blog-meta{margin-top:auto;padding-top:12px;border-top:1px solid var(--border);
  font-family:var(--mono);font-size:.7rem;color:var(--txt-3)}

/* ===== Contact ===== */
.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.contact-card{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  padding:26px 22px;display:flex;flex-direction:column;gap:8px;
  transition:transform var(--t) var(--e),border-color var(--t)}
.contact-card:hover{transform:translateY(-4px);border-color:var(--border-2)}
.contact-card .svc-ic{width:44px;height:44px;margin-bottom:6px}
.contact-card .svc-ic svg{width:20px;height:20px}
.contact-card h3{font-size:.82rem;font-family:var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--txt-3);font-weight:600}
.contact-card a,.contact-card span:last-child{color:var(--txt);font-size:.95rem;font-weight:500;line-height:1.6}
.contact-card a:hover{color:var(--accent)}
.contact-split{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:start}
.contact-form-wrap{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);padding:32px}
.contact-form-wrap h2{font-size:1.4rem;margin-bottom:8px}
.contact-form-wrap>p{color:var(--txt-2);font-size:.92rem;margin-bottom:24px}
.contact-form-wrap form{display:grid;gap:12px}
.contact-form-wrap input,.contact-form-wrap textarea{
  width:100%;background:rgba(3,5,9,.6);border:1px solid var(--border-2);border-radius:12px;
  padding:13px 16px;color:var(--txt);font-size:.92rem;font-family:inherit;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);resize:vertical}
.contact-form-wrap input:focus,.contact-form-wrap textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(0,141,255,.14)}
.contact-form-wrap input::placeholder,.contact-form-wrap textarea::placeholder{color:var(--txt-3)}
.form-note{font-size:.76rem;color:var(--txt-3);text-align:center}
.contact-wa{border:1px solid var(--border-2);border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(20,32,66,.5),rgba(8,12,26,.8));padding:32px}
.contact-wa h3{font-size:1.3rem;margin-bottom:8px}
.contact-wa p{color:var(--txt-2);font-size:.92rem;line-height:1.7;margin-bottom:20px}
[dir=rtl] .contact-wa .svc-ic{margin-inline-start:0}
[data-theme="light"] .contact-form-wrap input,[data-theme="light"] .contact-form-wrap textarea{background:#fff}
[data-theme="light"] .contact-wa{background:linear-gradient(160deg,#fff,#F5F8FC)}

@media(max-width:1120px){
  .blog-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr 1fr}
  .contact-split{grid-template-columns:1fr}
}
@media(max-width:680px){
  .blog-grid{grid-template-columns:1fr}
  .blog-feat{flex-direction:column;align-items:flex-start}
  .contact-grid{grid-template-columns:1fr}
}

/* newsletter helper text */
.ft-news-d{color:var(--txt-2);font-size:.86rem;line-height:1.7}
.ft-news-ok,.ft-news-err{margin-top:12px;font-size:.8rem;line-height:1.55}
.ft-news-ok{color:var(--ok)}
.ft-news-err{color:var(--warn)}

/* registration / Cit badge */
.reg-badge{display:inline-flex;align-items:flex-start;gap:9px;margin:0 0 18px;
  padding:10px 14px;border:1px solid rgba(34,197,94,.28);border-radius:12px;
  background:rgba(34,197,94,.06);max-width:290px}
.reg-badge svg{width:16px;height:16px;color:var(--ok);flex:none;margin-top:2px}
.reg-badge span{font-size:.76rem;line-height:1.6;color:var(--txt-2);font-weight:500}
[data-theme="light"] .reg-badge{background:rgba(34,197,94,.08);border-color:rgba(22,163,74,.3)}
.ft-reg{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;color:var(--txt-3)}
.ft-reg svg{width:13px;height:13px;color:var(--ok)}

/* ============================================================
   ABOUT-US — 2.5D cinematic scene
   epic-design (Mode 2): depth parallax · clip-birth title ·
   directional reveals · scrub-drawn timeline.
   Fallbacks: prefers-reduced-motion + pointer:coarse.
   ============================================================ */
.about-scene{position:relative;overflow:hidden;isolation:isolate}
.about-depth{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ad-layer{position:absolute;display:block;translate:0 var(--py,0px);will-change:translate}
.ad-glow{inset-block-start:-32%;inset-inline-start:50%;width:min(680px,82vw);aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(0,141,255,.30),transparent 62%);filter:blur(70px)}
.ad-grid{inset:0;opacity:.45;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),
                   linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 34%,#000,transparent 78%);
  mask-image:radial-gradient(72% 62% at 50% 34%,#000,transparent 78%)}
.ad-ring{inset-block-start:4%;inset-inline-end:7%;width:min(320px,34vw);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(3,189,253,.32);box-shadow:inset 0 0 60px -20px rgba(3,189,253,.5);
  animation:ad-float 12s var(--e) infinite}
.ad-arc{inset-block-start:22%;inset-inline-start:5%;width:min(230px,25vw);aspect-ratio:1;border-radius:50%;
  border:1px dashed rgba(0,141,255,.3);animation:ad-float 16s var(--e) infinite reverse}
.ad-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 16px rgba(3,189,253,.85)}
.ad-dot-a{inset-block-start:32%;inset-inline-start:15%}
.ad-dot-b{inset-block-start:60%;inset-inline-end:19%;background:var(--primary);
  box-shadow:0 0 16px rgba(0,141,255,.85)}
@keyframes ad-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-16px,0)}}
.about-hero-inner{position:relative;z-index:1}

/* title clip-birth reveal (GPU-safe; negative final inset avoids glyph clipping) */
.reveal .mask-title{clip-path:inset(-8% -3% 102% -3%);transition:clip-path .95s var(--e) .12s}
.reveal.in .mask-title{clip-path:inset(-8% -3% -14% -3%)}

/* directional / scale reveal variants (reuse the existing .reveal observer) */
.reveal.from-start{transform:translateX(-34px)}
.reveal.scale-in{transform:scale(.94)}
[dir=rtl] .reveal.from-start{transform:translateX(34px)}
.reveal.from-start.in,[dir=rtl] .reveal.from-start.in{transform:none}
.reveal.scale-in.in{transform:none}

/* journey timeline — line draws with scroll progress */
.tl{--tl-progress:1}
.tl::before{transform-origin:top center;transform:scaleY(var(--tl-progress))}

@media (pointer:coarse){
  .ad-layer{animation:none}
}
@media (prefers-reduced-motion:reduce){
  .ad-layer{animation:none;will-change:auto;translate:none}
  .reveal .mask-title{clip-path:none;transition:none}
  .tl{--tl-progress:1!important}
  .tl::before{transform:none}
}

/* ============================================================
   404 — branded error scene (cinematic depth, RTL-safe)
   ============================================================ */
.e404{position:relative;overflow:hidden;isolation:isolate;padding:64px 0 96px;text-align:center}
.e404-depth{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.e404-ring{position:absolute;border-radius:50%}
.e404-ring-a{inset-block-start:4%;inset-inline-end:8%;width:min(340px,36vw);aspect-ratio:1;
  border:1px solid rgba(3,189,253,.28);box-shadow:inset 0 0 60px -22px rgba(3,189,253,.5);
  animation:ad-float 13s var(--e) infinite}
.e404-ring-b{inset-block-end:2%;inset-inline-start:7%;width:min(220px,24vw);aspect-ratio:1;
  border:1px dashed rgba(0,141,255,.28);animation:ad-float 17s var(--e) infinite reverse}
.e404-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 16px rgba(3,189,253,.85)}
.e404-dot-a{inset-block-start:26%;inset-inline-start:18%}
.e404-dot-b{inset-block-end:24%;inset-inline-end:20%;background:var(--primary);box-shadow:0 0 16px rgba(0,141,255,.85)}
.e404-inner{position:relative;z-index:1;max-width:720px;margin:0 auto}
.e404-code{display:block;font-family:var(--mono);font-weight:600;letter-spacing:-.04em;line-height:1;
  font-size:clamp(5.5rem,18vw,12rem);
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 12px 40px rgba(0,141,255,.25))}
.e404-inner h1{font-size:clamp(1.6rem,3.4vw,2.4rem);margin:10px 0 14px}
.e404-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.e404-actions .btn svg{width:16px;height:16px}
.e404-links{margin-top:42px}
.e404-links h2{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--txt-3);margin-bottom:16px}
.e404-links ul{list-style:none;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:0}
.e404-links a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--border);font-size:.85rem;color:var(--txt-2);
  transition:border-color var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--e)}
.e404-links a:hover{border-color:var(--border-2);color:var(--txt);transform:translateY(-2px)}
.e404-links a svg{width:14px;height:14px;color:var(--accent)}
[data-theme="light"] .e404-ring-a{border-color:rgba(0,119,182,.28)}
@media (pointer:coarse){.e404-ring{animation:none}}
@media (prefers-reduced-motion:reduce){.e404-ring{animation:none}}

/* ---------- BACK TO TOP ---------- */
.to-top{position:fixed;bottom:92px;inset-inline-end:24px;z-index:80;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--border-2);color:var(--txt);
  box-shadow:var(--shadow-2);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity var(--t) var(--e),transform var(--t) var(--e),visibility var(--t),
             background var(--t) var(--e),border-color var(--t) var(--e),color var(--t) var(--e)}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:linear-gradient(180deg,#008DFF,#0073D1);border-color:transparent;color:#fff;transform:translateY(-2px)}
.to-top:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.to-top svg{width:20px;height:20px}
@media(max-width:680px){
  .to-top{bottom:88px;inset-inline-end:16px;width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){
  .to-top{transition:opacity .01ms,visibility .01ms}
  .to-top:hover{transform:none}
}

/* ============================================================
   Projects page — صفحة مشاريعنا
   ============================================================ */
.projects-hero{padding-bottom:28px}
.projects-section{padding-bottom:24px}

.prj-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:8px 0 36px}
.prj-filter{
  appearance:none;cursor:pointer;
  border:1px solid var(--border);border-radius:99px;
  background:transparent;color:var(--txt-3);
  font:inherit;font-size:.8rem;font-weight:600;
  letter-spacing:.02em;padding:8px 18px;
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast)}
.prj-filter:hover{border-color:var(--border-2);color:var(--txt);background:var(--surface-2)}
.prj-filter.is-active{
  border-color:var(--accent);color:var(--accent);
  background:rgba(3,189,253,.08);
  box-shadow:0 0 16px rgba(3,189,253,.12)}
[data-theme="light"] .prj-filter.is-active{background:rgba(0,119,182,.08)}

.prj-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  align-items:stretch}

.prj-card{
  display:flex;flex-direction:column;gap:0;min-width:0;
  border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface);padding:24px;
  transition:transform var(--t) var(--e),border-color var(--t),background var(--t),box-shadow var(--t)}
.prj-card:hover{
  transform:translateY(-4px);border-color:var(--border-2);
  background:var(--surface-2);box-shadow:var(--shadow-2)}
.prj-card[hidden]{display:none}

.prj-top{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.prj-top .svc-ic{width:44px;height:44px;margin:0}
.prj-top .svc-ic svg{width:20px;height:20px}

.prj-badge{
  font-family:var(--mono);font-size:.66rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--border);
  border-radius:99px;padding:4px 11px;
  background:rgba(3,189,253,.06)}
.prj-year{
  margin-inline-start:auto;
  font-family:var(--mono);font-size:.72rem;color:var(--txt-3)}

.prj-title{font-size:1rem;margin-bottom:7px}
.prj-desc{color:var(--txt-2);font-size:.85rem;line-height:1.65;margin-bottom:16px}

.prj-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.prj-tag{
  font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.03em;color:var(--txt-3);
  border:1px solid var(--border);border-radius:99px;
  padding:3px 10px;background:transparent}

.prj-card .link-more{margin-top:auto;color:var(--txt-3);font-size:.8rem}
.prj-card:hover .link-more{color:var(--accent)}
.prj-card:hover .link-more svg{transform:translateX(4px)}
[dir=rtl] .prj-card:hover .link-more svg{transform:translateX(-4px)}

/* reveal stagger for filtered re-show */
.prj-card.is-visible{animation:prjIn .35s var(--e) both}
@keyframes prjIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media(max-width:1120px){
  .prj-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .prj-grid{grid-template-columns:1fr}
  .prj-filters{gap:8px}
  .prj-filter{font-size:.74rem;padding:7px 14px}
  .prj-top{gap:8px}
}

/* AEO experience proof block — responsive */
.exp-proof > div:last-child{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:680px){
  .exp-proof > div:last-child{grid-template-columns:1fr 1fr}
}
@media(max-width:400px){
  .exp-proof > div:last-child{grid-template-columns:1fr}
}

/* ---------------- domains page — register / transfer tabs ---------------- */
.domain-tabs{max-width:1060px;margin:0 auto}
.domain-tab-btns{display:flex;justify-content:center;gap:10px;margin-bottom:36px;flex-wrap:wrap}
.dtab-btn{padding:11px 28px;border-radius:12px;border:1px solid var(--border-2);background:var(--surface-2);
  color:var(--txt-2);font-weight:600;font-size:.93rem;cursor:pointer;transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast)}
.dtab-btn:hover{color:var(--txt);border-color:var(--accent)}
.dtab-btn.on{background:var(--grad);color:#071A3D;border-color:transparent}
.dtab-panel{display:none}
.dtab-panel.on{display:block}
.dtab-search{max-width:650px;margin:0 auto 34px}
.dtab-info{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:980px;margin:0 auto 40px}
.dtab-item{display:flex;align-items:flex-start;gap:14px;padding:18px;border:1px solid var(--border);
  border-radius:16px;background:var(--surface-2)}
.dtab-item .svc-ic{width:42px;height:42px;flex:none;margin:0}
.dtab-item b{display:block;color:var(--txt);font-size:.95rem;margin-bottom:4px}
.dtab-item p{color:var(--txt-3);font-size:.84rem;line-height:1.6;margin:0}
.dtab-label{text-align:center;font-weight:600;color:var(--txt-2);margin:0 0 22px}
@media(max-width:860px){.dtab-info{grid-template-columns:1fr}}

/* ---------------- business solutions — systems tabs ---------------- */
.solutions-tabs{max-width:1100px}
.sol-soon{display:inline-block;margin-inline-start:8px;padding:2px 9px;border-radius:999px;
  font-size:.68rem;font-weight:600;background:rgba(251,191,36,.15);color:var(--warn);vertical-align:1px}
.sol-head{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  padding:26px;border:1px solid var(--border);border-radius:18px;background:var(--surface-2);margin-bottom:24px}
.sol-head-main{flex:1;min-width:260px}
.sol-badge{display:inline-block;padding:4px 12px;border-radius:999px;font-size:.72rem;font-weight:700;
  letter-spacing:.08em;background:var(--grad);color:#071A3D;margin-bottom:12px}
.sol-head h3{font-size:1.45rem;margin:0 0 8px;color:var(--txt)}
.sol-head p{color:var(--txt-3);margin:0}
.sol-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sol-chips span{border:1px solid var(--border-2);border-radius:10px;padding:4px 12px;font-size:.76rem;color:var(--txt-2)}
.sol-modules{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:1024px){.sol-modules{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.sol-modules{grid-template-columns:1fr}}

/* ---------------- business solutions — gallery, demo box & lightbox ---------------- */
.sol-demo{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin:26px 0;padding:22px 24px;border:1px solid var(--border-2);border-radius:16px;
  background:linear-gradient(135deg,rgba(3,189,253,.08),rgba(0,141,255,.05))}
.sol-demo b{color:var(--txt);font-size:1.05rem}
.sol-demo p{margin:4px 0 0;color:var(--txt-3);font-size:.86rem}
.sol-demo-creds{margin-top:8px !important}
.sol-demo-creds code{background:var(--surface-3);border:1px solid var(--border-2);border-radius:8px;
  padding:2px 8px;font-family:var(--mono);font-size:.8rem;color:var(--accent)}
.sol-gallery{margin-top:8px}
.sol-gallery-head{text-align:center;margin-bottom:26px}
.sol-gallery-head h4{font-size:1.3rem;margin:0 0 6px;color:var(--txt)}
.sol-gallery-head p{margin:0;color:var(--txt-3);font-size:.9rem}
.shot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.shot-card{display:flex;flex-direction:column;text-align:start;background:var(--surface-2);
  border:1px solid var(--border);border-radius:16px;overflow:hidden;cursor:pointer;padding:0;
  transition:transform var(--t-fast),border-color var(--t-fast)}
.shot-card:hover{transform:translateY(-4px);border-color:var(--accent)}
.shot-thumb{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--surface-3);border-bottom:1px solid var(--border)}
.shot-thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.shot-info{display:block;padding:14px 16px 16px}
.shot-info b{display:block;color:var(--txt);font-size:.92rem;margin-bottom:4px}
.shot-info small{color:var(--txt-3);font-size:.78rem;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shot-lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:28px;background:rgba(4,10,22,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.shot-lightbox.open{display:flex}
.shot-lightbox figure{max-width:1100px;width:100%;max-height:92vh;overflow:auto;background:var(--surface-2);
  border:1px solid var(--border-2);border-radius:18px;margin:0}
.shot-lightbox img{width:100%;display:block;border-bottom:1px solid var(--border)}
.shot-lightbox figcaption{padding:18px 22px 22px}
.shot-lightbox figcaption b{display:block;color:var(--txt);font-size:1.1rem;margin-bottom:6px}
.shot-lightbox figcaption p{margin:0;color:var(--txt-2);line-height:1.7;font-size:.9rem}
.shot-lb-close{position:absolute;top:18px;inset-inline-end:22px;width:42px;height:42px;border-radius:12px;
  border:1px solid var(--border-2);background:var(--surface-2);color:var(--txt);font-size:1.1rem;cursor:pointer;line-height:1}
.shot-lb-close:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:1024px){.shot-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.shot-grid{grid-template-columns:1fr}}

/* copy button (demo credentials) */
.copy-btn{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;border-radius:8px;
  border:1px solid var(--border-2);background:var(--surface-2);color:var(--txt-3);cursor:pointer;vertical-align:middle;
  margin-inline-start:6px;transition:color var(--t-fast),border-color var(--t-fast)}
.copy-btn:hover{color:var(--accent);border-color:var(--accent)}
.copy-btn svg{width:13px;height:13px}
.copy-btn.copied{color:#22c55e;border-color:#22c55e}

/* a11y contrast fixes (light theme) */
[data-theme="light"] .sol-soon{color:#92400E}
[data-theme="light"] .sol-demo-creds code{color:#075985}