/* =========================================
   01. ROOT VARIABLES
========================================= */

:root {
   --black:#03060b;
  --dark:#07111d;
  --dark2:#0b1726;
  --navy:#101b2c;
  --green:#62ff8b;
  --green2:#22c55e;
  --lime:#b7ffca;
  --white:#fff;
  --soft:#f6faf8;
  --text:#0b1220;
  --muted:#607086;
  --line:rgba(148,163,184,.22);
  --glass:rgba(255,255,255,.075);
  --shadow:0 28px 90px rgba(0,0,0,.26);
  --radius:30px;

}


/* =========================================
   02. RESET & GLOBAL
========================================= */

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  direction:rtl
}

body {
   margin:0;
  font-family:'Tajawal',system-ui,sans-serif;
  background:var(--black);
  color:#fff;
  line-height:1.8;
  overflow-x:hidden;

}

a {
  text-decoration:none;
  color:inherit
}

.container {
  width:min(1180px,calc(100% - 38px));
  margin:auto
}

[id] {
  scroll-margin-top:96px
}


/* =========================================
   03. SITE BACKGROUND
========================================= */

.site-bg {
  position:fixed;
  inset:0;
  z-index:-10;
  background:radial-gradient(circle at 50% 0%,rgba(98,255,139,.12),transparent 32%),linear-gradient(180deg,#03060b,#07111d 45%,#03060b)
}

.site-bg:before {
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(98,255,139,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(98,255,139,.045) 1px,transparent 1px);
  background-size:64px 64px;
  animation:gridDrift 18s linear infinite;
  mask-image:radial-gradient(circle at center,#000,transparent 78%)
}

@keyframes gridDrift {
  to {
    background-position:64px 64px
  }

}


/* =========================================
   04. HEADER & NAVIGATION
========================================= */

.topbar {
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(3,6,11,.72);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08)
}

.nav {
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:900;
  font-size:24px
}

.brand{
    display:flex;
    align-items:center;
}

.header-logo{
    width:220px;
    height:auto;
    display:block;
    object-fit:contain;
}

.nav-links {
  display:flex;
  gap:24px;
  align-items:center;
  color:#d8e5f2;
  font-weight:800;
  font-size:15px
}

.nav-links a:hover {
  color:var(--green)
}

.menu-btn {
  display:none
}


/* =========================================
   05. BUTTONS
========================================= */

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:999px;
  padding:14px 25px;
  font-weight:900;
  border:1px solid transparent;
  cursor:pointer;
  transition:.28s;
  white-space:nowrap
}

.btn-primary {
  background:linear-gradient(135deg,var(--green),var(--green2));
  color:#06100a;
  box-shadow:0 18px 40px rgba(34,197,94,.28)
}

.btn-primary:hover {
  transform:translateY(-3px);
  box-shadow:0 24px 60px rgba(34,197,94,.4)
}

.btn-ghost {
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.07);
  color:#fff;
  backdrop-filter:blur(12px)
}

.btn-ghost:hover {
  border-color:rgba(98,255,139,.55);
  color:var(--green)
}

.btn-dark {
  background:#07111d;
  color:#fff;
  border-color:rgba(255,255,255,.1)
}


/* =========================================
   06. SECTIONS & TYPOGRAPHY
========================================= */

section {
  position:relative;
  padding:100px 0
}

.section-head {
  text-align:center;
  max-width:850px;
  margin:0 auto 45px
}

.kicker {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--green);
  font-weight:900;
  font-size:14px;
  letter-spacing:.5px;
  margin-bottom:10px
}

.kicker:before,.kicker:after {
  content:"";
  width:32px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--green))
}

.kicker:after {
  background:linear-gradient(90deg,var(--green),transparent)
}

.title {
  font-size:clamp(32px,4.6vw,62px);
  line-height:1.17;
  margin:0 0 14px;
  font-weight:900;
  letter-spacing:-1px
}

.desc {
  color:#bdd0e4;
  font-size:18px;
  margin:0 auto;
  max-width:760px
}

.light .title,.white-zone .title {
  color:var(--text)
}

.light .desc,.white-zone .desc {
  color:var(--muted)
}


/* =========================================
   07. HERO SECTION
========================================= */

.hero {
  min-height:calc(100vh - 82px);
  display:grid;
  place-items:center;
  overflow:hidden;
  text-align:center;
  padding:100px 0 90px;
  background:radial-gradient(circle at 50% 42%,rgba(98,255,139,.24),transparent 18%),radial-gradient(circle at 50% 46%,rgba(98,255,139,.1),transparent 36%)
}

.rings {
  position:absolute;
  inset:0;
  pointer-events:none
}

.ring {
  position:absolute;
  border:1px solid rgba(98,255,139,.2);
  border-radius:50%;
  box-shadow:0 0 60px rgba(98,255,139,.12);
  animation:ringPulse 5s ease-in-out infinite
}

.r1 {
  width:260px;
  height:260px;
  left:calc(50% - 130px);
  top:26%;
  animation-delay:.2s
}

.r2 {
  width:520px;
  height:520px;
  left:calc(50% - 260px);
  top:13%;
  animation-delay:1s
}

.r3 {
  width:780px;
  height:780px;
  left:calc(50% - 390px);
  top:-2%;
  animation-delay:1.8s
}

@keyframes ringPulse {
  0%,100% {
    transform:scale(.88);
    opacity:.25
  }

  50% {
    transform:scale(1.08);
    opacity:.95
  }

}

.data-streams {
  position:absolute;
  inset:0;
  overflow:hidden;
  opacity:.75;
  pointer-events:none
}

.stream {
  position:absolute;
  width:1px;
  height:220px;
  background:linear-gradient(transparent,var(--green),transparent);
  filter:drop-shadow(0 0 10px var(--green));
  animation:streamMove 5.5s linear infinite
}

.s1 {
  left:12%;
  animation-delay:0s
}

.s2 {
  left:25%;
  animation-delay:1.7s
}

.s3 {
  right:18%;
  animation-delay:.8s
}

.s4 {
  right:8%;
  animation-delay:2.4s
}

.s5 {
  left:50%;
  animation-delay:3.2s
}

@keyframes streamMove {
  from {
    transform:translateY(-260px)
  }

  to {
    transform:translateY(110vh)
  }

}

.float-icons {
  position:absolute;
  inset:0;
  pointer-events:none
}

.cy-icon {
  position:absolute;
  width:58px;
  height:58px;
  border-radius:22px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(98,255,139,.16);
  display:grid;
  place-items:center;
  color:var(--green);
  box-shadow:0 0 38px rgba(98,255,139,.16);
  animation:floatIcon 8s ease-in-out infinite
}

.cy-icon svg {
  width:28px;
  height:28px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8
}

.i1 {
  top:22%;
  left:16%
}

.i2 {
  top:30%;
  right:13%;
  animation-delay:1s
}

.i3 {
  bottom:24%;
  left:18%;
  animation-delay:2s
}

.i4 {
  bottom:22%;
  right:20%;
  animation-delay:3s
}

.i5 {
  top:55%;
  left:9%;
  animation-delay:1.7s
}

.i6 {
  top:58%;
  right:8%;
  animation-delay:2.7s
}

@keyframes floatIcon {
  0%,100% {
    transform:translateY(0) rotate(0);
    opacity:.45
  }

  50% {
    transform:translateY(-28px) rotate(5deg);
    opacity:.95
  }

}

.hero-content {
  position:relative;
  z-index:5;
  animation:reveal .9s cubic-bezier(.2,.8,.2,1) both
}

.hero h1 {
  font-size:clamp(44px,7vw,88px);
  line-height:1.08;
  margin:0 0 20px;
  font-weight:900;
  text-shadow:0 0 24px rgba(255,255,255,.18),0 0 80px rgba(98,255,139,.24)
}

.hero h1 span {
  color:var(--green)
}

.hero p {
  font-size:20px;
  color:#d7e4f0;
  max-width:760px;
  margin:0 auto 32px
}

.hero-actions {
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap
}

.hero-mini {
  display:inline-flex;
  margin-bottom:18px;
  color:#bdfdcc;
  font-weight:900;
  background:rgba(98,255,139,.08);
  border:1px solid rgba(98,255,139,.22);
  border-radius:999px;
  padding:8px 16px
}

@keyframes reveal {
  from {
    opacity:0;
    transform:translateY(32px) scale(.98);
    filter:blur(10px)
  }

  to {
    opacity:1;
    transform:none;
    filter:blur(0)
  }

}


/* =========================================
   08. CYBER OPERATIONS CENTER
========================================= */

.command {
  padding-top:60px
}

.command-card {
  position:relative;
  overflow:hidden;
  border-radius:42px;
  background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:var(--shadow);
  padding:34px;
  min-height:560px
}

.command-card:before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 25% 22%,rgba(98,255,139,.22),transparent 28%),radial-gradient(circle at 80% 70%,rgba(98,255,139,.12),transparent 30%);
  pointer-events:none
}

.command-layout {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:28px;
  align-items:stretch
}

.screen-panel {
  border-radius:30px;
  background:rgba(2,6,12,.74);
  border:1px solid rgba(98,255,139,.16);
  padding:22px;
  min-height:480px;
  overflow:hidden;
  position:relative
}

.screen-panel:before {
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(98,255,139,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(98,255,139,.05) 1px,transparent 1px);
  background-size:34px 34px;
  animation:gridDrift 14s linear infinite
}

.screen-top {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px
}

.dots {
  display:flex;
  gap:7px
}

.dots span {
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 14px rgba(98,255,139,.7)
}

.status {
  color:#bdfdcc;
  font-weight:900
}

.radar {
  position:relative;
  z-index:2;
  width:360px;
  max-width:100%;
  aspect-ratio:1;
  margin:20px auto;
  border-radius:50%;
  border:1px solid rgba(98,255,139,.25);
  background:radial-gradient(circle,rgba(98,255,139,.12) 0 2px,transparent 4px),repeating-radial-gradient(circle,rgba(98,255,139,.2) 0 1px,transparent 1px 58px)
}

.radar{
    overflow:hidden;
}

.radar:before{
    content:"";
    position:absolute;
    inset:0;

    background:conic-gradient(
        from -35deg,
        transparent 0deg,
        transparent 300deg,
        rgba(98,255,139,.12) 318deg,
        rgba(98,255,139,.75) 350deg,
        transparent 360deg
    );

    clip-path:circle(50% at 50% 50%);
    animation:scan 3.2s linear infinite;
}

.node {
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 18px var(--green);
  animation:nodePulse 2s ease-in-out infinite
}

.n1 {
  top:30%;
  left:56%
}

.n2 {
  top:58%;
  left:31%;
  animation-delay:.5s
}

.n3 {
  top:68%;
  left:70%;
  animation-delay:1s
}

.n4 {
  top:22%;
  left:30%;
  animation-delay:1.4s
}

@keyframes scan {
  to {
    transform:rotate(360deg)
  }

}

@keyframes nodePulse {
  50% {
    transform:scale(1.8);
    opacity:.45
  }

}

.metric-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    margin-top:80px;
}
.metric-grid{
    transform:translateY(60px);
}

.metric {
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.055);
  border-radius:22px;
  padding:18px
}

.metric b {
  font-size:34px;
  display:block;
  color:#fff;
  line-height:1
}

.metric span {
  color:#b7c7d8;
  font-weight:700
}

.command-copy {
  padding:28px 8px
}

.command-copy h2 {
  font-size:clamp(34px,4vw,58px);
  line-height:1.15;
  margin:0 0 18px
}

.command-copy p {
  color:#c8d7e8;
  font-size:19px;
  margin:0 0 24px
}

.live-list {
  display:grid;
  gap:13px;
  margin-top:24px
}

.live-row {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  font-weight:800
}

.pulse {
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 0 rgba(98,255,139,.7);
  animation:pulse 1.8s infinite
}

@keyframes pulse {
  to {
    box-shadow:0 0 0 14px rgba(98,255,139,0)
  }

}


/* =========================================
   09. WHITE ZONES & PROBLEMS
========================================= */

.white-zone {
  background:var(--soft);
  color:var(--text)
}

.white-zone:before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 15% 15%,rgba(34,197,94,.12),transparent 25%),radial-gradient(circle at 90% 10%,rgba(15,23,42,.06),transparent 28%);
  pointer-events:none
}

.problems-grid,.service-grid,.why-grid,.layers-grid {
  position:relative;
  z-index:2;
  display:grid;
  gap:18px
}

.problems-grid {
  grid-template-columns:repeat(5,1fr)
}

.problem,.white-card {
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:26px;
  padding:26px;
  box-shadow:0 18px 50px rgba(15,23,42,.07);
  transition:.3s;
  overflow:hidden;
  position:relative
}

.problem:before,.white-card:before {
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,var(--green),transparent);
  transform:scaleX(0);
  transform-origin:right;
  transition:.35s
}

.problem:hover,.white-card:hover {
  transform:translateY(-8px);
  box-shadow:0 24px 80px rgba(15,23,42,.13)
}

.problem:hover:before,.white-card:hover:before {
  transform:scaleX(1)
}

.problem-icon {
  width:54px;
  height:54px;
  border-radius:18px;
  background:#eafff0;
  color:var(--green2);
  display:grid;
  place-items:center;
  margin-bottom:18px
}

.problem h3 {
  font-size:20px;
  line-height:1.45;
  margin:0;
  color:#0b1220
}


/* =========================================
   10. SERVICES
========================================= */

.service-grid {
  grid-template-columns:repeat(4,1fr)
}

.glass-card {
  position:relative;
  overflow:hidden;
  border-radius:30px;
  padding:30px;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.12);
  min-height:390px;
  box-shadow:0 18px 70px rgba(0,0,0,.18);
  transition:.35s
}

.glass-card:before {
  content:"";
  position:absolute;
  inset:-1px;
  background:radial-gradient(circle at 20% 0%,rgba(98,255,139,.22),transparent 32%);
  opacity:0;
  transition:.35s
}

.glass-card:hover {
  transform:translateY(-10px);
  border-color:rgba(98,255,139,.35)
}

.glass-card:hover:before {
  opacity:1
}

.glass-card > * {
  position:relative;
  z-index:2
}

.card-ico {
  width:68px;
  height:68px;
  border-radius:24px;
  background:rgba(98,255,139,.12);
  border:1px solid rgba(98,255,139,.2);
  display:grid;
  place-items:center;
  color:var(--green);
  margin-bottom:18px;
  box-shadow:0 0 36px rgba(98,255,139,.1)
}

.card-ico svg,.problem-icon svg {
  width:30px;
  height:30px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8
}

.glass-card h3 {
  font-size:26px;
  margin:0 0 10px
}

.glass-card p {
  color:#c8d7e8;
  margin:0 0 18px
}

.check-list {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:9px;
  color:#e8f1fb;
  font-weight:700
}

.check-list li:before {
  content:"✓";
  color:var(--green);
  font-weight:900;
  margin-left:8px
}

.white-card .check-list {
  color:#334155
}

.white-card .check-list li:before {
  color:var(--green2)
}


/* =========================================
   11. PRICING / HOSTING PACKAGES
========================================= */

.pricing {
  background:#fff;
  color:var(--text)
}

.pricing-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  align-items:stretch
}

.price-card {
  background:#fff;
  border:1px solid rgba(15,23,42,.09);
  border-radius:34px;
  padding:34px;
  box-shadow:0 24px 75px rgba(15,23,42,.09);
  position:relative;
  overflow:hidden;
  transition:.3s
}

.price-card:hover {
  transform:translateY(-4px)
}

.price-card.featured {
  background:linear-gradient(180deg,#07111d,#03060b);
  color:#fff;
  border-color:rgba(98,255,139,.35);
  box-shadow:0 30px 90px rgba(0,0,0,.22);
  transform:scale(1.03)
}

.badge {
  position:absolute;
  top:20px;
  left:20px;
  background:var(--green);
  color:#06100a;
  border-radius:999px;
  padding:7px 13px;
  font-weight:900;
  font-size:13px
}

.price-card h3 {
  font-size:30px;
  margin:0
}

.price-for {
  color:var(--muted);
  margin:4px 0 18px
}

.featured .price-for {
  color:#cbd5e1
}

.price {
  font-size:48px;
  font-weight:900;
  line-height:1;
  margin:16px 0
}

.price small {
  font-size:16px;
  color:var(--muted)
}

.featured .price small {
  color:#cbd5e1
}

.note {
  display:inline-flex;
  border-radius:999px;
  background:#eefdf2;
  color:#16763a;
  padding:7px 13px;
  font-weight:900;
  margin-bottom:20px
}

.featured .note {
  background:rgba(98,255,139,.12);
  color:#c8ffd7;
  border:1px solid rgba(98,255,139,.22)
}


/* =========================================
   12. BREAKLINE / IMPACT SECTION
========================================= */

.breakline {
  padding:72px 0;
  background:#03060b;
  overflow:hidden
}

.break-card {
  position:relative;
  border-radius:42px;
  min-height:330px;
  display:grid;
  place-items:center;
  text-align:center;
  background:radial-gradient(circle at center,rgba(98,255,139,.18),transparent 34%),linear-gradient(135deg,#07111d,#03060b);
  border:1px solid rgba(255,255,255,.11);
  overflow:hidden
}

.break-card:before {
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(90deg,transparent,rgba(98,255,139,.16),transparent);
  transform:translateX(-100%);
  animation:shine 4s linear infinite
}

.break-card h2 {
  font-size:clamp(38px,6vw,78px);
  line-height:1.04;
  margin:0 0 14px
}

.break-card p {
  font-size:22px;
  color:#cbd5e1;
  margin:0
}

.break-card span {
  color:var(--green)
}

@keyframes shine {
  to {
    transform:translateX(100%)
  }

}


/* =========================================
   13. ECOSYSTEM ORBIT
========================================= */

.ecosystem {
  overflow:hidden
}



.core {
  position:absolute;
  inset:35%;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:radial-gradient(circle,var(--green),var(--green2));
  color:#06100a;
  font-size:42px;
  font-weight:900;
  box-shadow:0 0 70px rgba(98,255,139,.45);
  z-index:5
}

.orb-ring {
  position:absolute;
  inset:10%;
  border:1px solid rgba(98,255,139,.22);
  border-radius:50%;
  animation:rotate 24s linear infinite
}

.orb-ring.two {
  inset:22%;
  animation-duration:18s;
  animation-direction:reverse
}

.orb-item {
  position:absolute;
  min-width:138px;
  text-align:center;
  padding:12px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(98,255,139,.23);
  box-shadow:0 0 32px rgba(98,255,139,.12);
  font-weight:900;
  color:#fff
}

.o1 {
  top:-18px;
  left:50%;
  transform:translateX(-50%)
}

.o2 {
  right:-42px;
  top:34%
}

.o3 {
  bottom:6%;
  right:10%
}

.o4 {
  bottom:6%;
  left:10%
}

.o5 {
  left:-42px;
  top:34%
}

.o6 {
  top:16%;
  right:10%
}

.o7 {
  top:16%;
  left:10%
}

@keyframes rotate {
  to {
    transform:rotate(360deg)
  }

}

/* Softer Live Operations + Integrated Journey */

/* =========================================
   14. LIVE OPERATIONS LAYER
========================================= */

.live-layer {
  padding:58px 0;
  background:linear-gradient(180deg,#03060b,#07111d);
  overflow:hidden
}

.live-layer-card {
  position:relative;
  border-radius:34px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:radial-gradient(circle at 18% 18%,rgba(98,255,139,.14),transparent 30%),linear-gradient(135deg,#07111d,#03060b);
  box-shadow:0 24px 80px rgba(0,0,0,.24);
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:26px;
  align-items:center;
  padding:30px;
  min-height:310px
}

.live-layer-card:before {
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(98,255,139,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(98,255,139,.035) 1px,transparent 1px);
  background-size:52px 52px;
  animation:gridDrift 18s linear infinite;
  mask-image:radial-gradient(circle at 65% 50%,#000,transparent 74%)
}

.live-copy,.live-console {
  position:relative;
  z-index:2
}

.live-copy h2 {
  font-size:clamp(30px,3.7vw,50px);
  line-height:1.16;
  margin:0 0 14px
}

.live-copy p {
  color:#c6d6e8;
  font-size:17px;
  margin:0;
  max-width:520px
}

.live-badges {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px
}

.live-badges span {
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(98,255,139,.16);
  color:#c7fbd3;
  font-weight:800;
  font-size:13px
}

.live-console {
  border-radius:26px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(98,255,139,.18);
  box-shadow:inset 0 0 30px rgba(98,255,139,.045),0 16px 50px rgba(0,0,0,.18);
  padding:16px;
  overflow:hidden
}

.console-head {
  height:38px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  gap:7px;
  color:#8fb4a0;
  font-weight:800
}

.console-head span {
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 12px rgba(98,255,139,.75)
}

.console-head b {
  margin-right:auto;
  font-size:12px;
  color:#9fb1c6;
  direction:ltr
}

.console-feed {
  display:grid;
  gap:10px;
  padding:14px 0 8px
}

.feed-line {
  display:grid;
  grid-template-columns:10px 92px 1fr 42px;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(1,8,14,.45);
  border:1px solid rgba(255,255,255,.06);
  animation:feedPulse 4.8s ease-in-out infinite
}

.feed-line:nth-child(2) {
  animation-delay:.8s
}

.feed-line:nth-child(3) {
  animation-delay:1.6s
}

.feed-line em {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 14px var(--green)
}

.feed-line strong {
  font-size:11px;
  color:var(--green)
}

.feed-line span {
  color:#dce8f4;
  font-weight:700;
  font-size:14px
}

.feed-line b {
  direction:ltr;
  color:#8ba0b4;
  font-size:11px
}

@keyframes feedPulse {
  50% {
    border-color:rgba(98,255,139,.22);
    transform:translateX(-3px)
  }

}

.mini-metrics {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:12px
}

.mini-metric {
  border-radius:16px;
  background:rgba(1,8,14,.42);
  border:1px solid rgba(255,255,255,.06);
  padding:12px;
  text-align:center
}

.mini-metric b {
  display:block;
  color:#fff;
  font-size:24px;
  line-height:1
}

.mini-metric span {
  font-size:12px;
  color:#9fb1c6;
  font-weight:800
}


/* =========================================
   15. JOURNEY & LAYERS
========================================= */

.journey-layers {
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#f7fafc 0%,#fff 100%);
  color:var(--text)
}

.journey-layers:before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 10% 16%,rgba(34,197,94,.13),transparent 24%),radial-gradient(circle at 92% 20%,rgba(15,23,42,.06),transparent 25%);
  pointer-events:none
}

.journey-wrap {
  position:relative;
  z-index:2;
  border-radius:42px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 28px 90px rgba(15,23,42,.09);
  padding:28px;
  overflow:hidden
}

.journey-wrap:before {
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(15,23,42,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.035) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(circle at center,#000,transparent 80%);
  pointer-events:none
}

.journey-map {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  margin-top:26px
}

.journey-card {
  position:relative;
  min-height:260px;
  border-radius:30px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 16px 50px rgba(15,23,42,.07);
  padding:24px;
  overflow:hidden;
  transition:.35s
}

.journey-card:before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:5px;
  background:linear-gradient(90deg,var(--green),transparent)
}

.journey-card:after {
  content:"";
  position:absolute;
  width:95px;
  height:95px;
  border-radius:50%;
  left:-32px;
  bottom:-32px;
  background:radial-gradient(circle,rgba(98,255,139,.18),transparent 70%);
  transition:.35s
}

.journey-card:hover {
  transform:translateY(-10px);
  background:#07111d;
  border-color:rgba(98,255,139,.34);
  box-shadow:0 24px 70px rgba(15,23,42,.16)
}

.journey-card:hover:after {
  transform:scale(1.45);
  opacity:.8
}

.journey-card:hover h3,.journey-card:hover p,.journey-card:hover .process-label {
  color:#fff
}

.journey-card:hover .layer-label {
  background:rgba(98,255,139,.14);
  color:var(--green);
  border-color:rgba(98,255,139,.26)
}

.journey-num {
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:16px;
  background:#eafff0;
  color:var(--green2);
  font-weight:900;
  margin-bottom:16px
}

.process-label {
  display:block;
  color:#64748b;
  font-weight:900;
  font-size:13px;
  margin-bottom:6px
}

.journey-card h3 {
  font-size:28px;
  line-height:1.2;
  margin:0 0 10px
}

.journey-card p {
  color:var(--muted);
  margin:0;
  font-weight:600;
  line-height:1.8
}

.layer-label {
  display:inline-flex;
  margin-top:18px;
  padding:7px 12px;
  border-radius:999px;
  background:#f1f5f9;
  border:1px solid rgba(15,23,42,.06);
  color:#0f172a;
  font-size:13px;
  font-weight:900
}

.journey-connector {
  position:absolute;
  z-index:1;
  top:50%;
  right:8%;
  left:8%;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(34,197,94,.5),transparent);
  box-shadow:0 0 20px rgba(34,197,94,.25);
  animation:connectorPulse 3s ease-in-out infinite
}

@keyframes connectorPulse {
  50% {
    opacity:.35;
    transform:scaleX(.92)
  }

}


/* =========================================
   16. DIGITAL CORE - OLD VERSION
========================================= */

.digital-core {
  padding:96px 0 110px;
  background:radial-gradient(circle at 50% 18%,rgba(98,255,139,.16),transparent 28%),linear-gradient(180deg,#03060b,#07111d 55%,#03060b);
  overflow:hidden
}



.core-grid-glow {
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(98,255,139,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(98,255,139,.05) 1px,transparent 1px);
  background-size:42px 42px;
  animation:gridDrift 17s linear infinite;
  mask-image:radial-gradient(circle at center,#000,transparent 78%)
}

.core-center {
  position:absolute;
  z-index:4;
  left:50%;
  top:50%;
  width:230px;
  height:230px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:grid;
  place-items:center;
  text-align:center;
  background:radial-gradient(circle,#10291a,#06100a 68%);
  border:1px solid rgba(98,255,139,.48);
  box-shadow:0 0 50px rgba(98,255,139,.34),inset 0 0 40px rgba(98,255,139,.15)
}

.core-brand {
  font-size:48px;
  font-weight:900;
  color:#fff;
  line-height:1
}

.core-brand span {
  color:var(--green)
}

.core-center small {
  margin-top:-70px;
  color:#bdfdcc;
  font-weight:900;
  letter-spacing:1px
}

.core-ring {
  position:absolute;
  inset:-35px;
  border-radius:50%;
  border:1px solid rgba(98,255,139,.26);
  animation:coreSpin 18s linear infinite
}

.core-ring.ring-b {
  inset:-72px;
  animation-duration:25s;
  animation-direction:reverse;
  border-style:dashed
}

.core-ring.ring-c {
  inset:-112px;
  animation-duration:34s;
  opacity:.55
}

@keyframes coreSpin {
  to {
    transform:rotate(360deg)
  }

}

.core-module {
  position:absolute;
  z-index:5;
  width:190px;
  min-height:94px;
  padding:18px 18px;
  border-radius:24px;
  background:rgba(255,255,255,.085);
  border:1px solid rgba(98,255,139,.24);
  box-shadow:0 0 38px rgba(98,255,139,.11),0 22px 60px rgba(0,0,0,.22);
  backdrop-filter:blur(14px);
  transition:.35s;
  animation:moduleFloat 7s ease-in-out infinite
}

.core-module:hover {
  transform:translateY(-10px) scale(1.03);
  background:rgba(98,255,139,.12);
  border-color:rgba(98,255,139,.5)
}

.core-module b {
  display:block;
  color:#fff;
  font-size:21px;
  line-height:1.1;
  margin-bottom:6px
}

.core-module span {
  display:block;
  color:#b9cce0;
  font-weight:700;
  font-size:14px;
  line-height:1.5
}

.mod-1 {
  top:58px;
  left:80px
}

.mod-2 {
  top:58px;
  right:80px;
  animation-delay:.8s
}

.mod-3 {
  top:262px;
  right:42px;
  animation-delay:1.6s
}

.mod-4 {
  bottom:58px;
  right:92px;
  animation-delay:2.4s
}

.mod-5 {
  bottom:58px;
  left:92px;
  animation-delay:3.2s
}

.mod-6 {
  top:262px;
  left:42px;
  animation-delay:4s
}

@keyframes moduleFloat {
  0%,100% {
    translate:0 0
  }

  50% {
    translate:0 -16px
  }

}

.core-links {
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  pointer-events:none
}

.core-links path {
  fill:none;
  stroke:rgba(98,255,139,.28);
  stroke-width:1.5;
  stroke-dasharray:8 12;
  filter:drop-shadow(0 0 8px rgba(98,255,139,.55));
  animation:dashFlow 2.8s linear infinite
}

@keyframes dashFlow {
  to {
    stroke-dashoffset:-80
  }

}


/* =========================================
   17. TIMELINE, STATS, CLIENTS, FAQ
========================================= */


.step {
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:28px;
  padding:26px;
  box-shadow:0 18px 55px rgba(15,23,42,.07);
  position:relative
}

.step b {
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:14px;
  background:#eafff0;
  color:var(--green2);
  margin-bottom:16px
}

.step h3 {
  margin:0 0 8px;
  font-size:23px
}

.step p {
  margin:0;
  color:var(--muted)
}


.layer h3 {
  font-size:28px;
  margin:0 0 10px
}

.layer p {
  color:var(--muted);
  margin:0
}

.layer span {
  display:inline-flex;
  color:var(--green2);
  font-weight:900;
  margin-bottom:12px
}


.why-grid {
  grid-template-columns:repeat(4,1fr)
}

.client-slider {
  overflow:hidden;
  border:1px solid rgba(15,23,42,.08);
  border-radius:30px;
  background:#fff;
  padding:28px
}

.client-track {
  display:flex;
  gap:54px;
  width:max-content;
  animation:trustedMove 24s linear infinite
}

.logo-box img{
    display:block;
    height:auto;
    width:auto;
    max-height:55px;
}

.client-slider:hover .client-track {
  animation-play-state:paused
}

@keyframes trustedMove {
  to {
    transform:translateX(50%)
  }

}

.faq {
  max-width:920px;
  margin:auto;
  display:grid;
  gap:14px
}

.faq details {
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:22px;
  box-shadow:0 14px 34px rgba(15,23,42,.06);
  overflow:hidden
}

.faq summary {
  cursor:pointer;
  list-style:none;
  padding:22px 26px;
  font-size:20px;
  font-weight:900;
  display:flex;
  justify-content:space-between;
  gap:12px
}

.faq summary:after {
  content:"+";
  width:36px;
  height:36px;
  border-radius:50%;
  background:#eafff0;
  color:var(--green2);
  display:grid;
  place-items:center;
  flex:0 0 36px
}

.faq details[open] {
  background:#07111d;
  color:#fff;
  border-color:rgba(98,255,139,.28)
}

.faq details[open] summary:after {
  content:"−";
  background:var(--green);
  color:#06100a
}

.faq p {
  margin:0;
  padding:0 26px 24px;
  color:#cbd5e1
}


/* =========================================
   18. FINAL CTA
========================================= */

.final-cta {
  padding:110px 0;
  text-align:center;
  background:radial-gradient(circle at 50% 30%,rgba(98,255,139,.2),transparent 35%),linear-gradient(135deg,#03060b,#07111d)
}

.final-cta h2 {
  font-size:clamp(36px,5vw,68px);
  line-height:1.15;
  margin:0 0 16px
}

.final-cta p {
  max-width:820px;
  margin:0 auto 28px;
  color:#cbd5e1;
  font-size:20px
}


/* =========================================
   19. FOOTER
========================================= */

footer {
  background:#020408;
  color:#dce7f3;
  padding:70px 0 28px;
  border-top:1px solid rgba(255,255,255,.08)
}

.footer-grid {
  display:grid;
  grid-template-columns:1.35fr .8fr .95fr 1fr;
  gap:34px
}

.footer-logo{
  margin:0 0 18px;
}

.footer-logo img{
  width:180px;
  height:auto;
  display:block;
}

.footer-logo span {
  color:var(--green)
}

footer p,footer li,.contact-line {
  color:#9fb1c6
}

.footer-links {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:9px
}

.footer-col h3 {
  margin:0 0 14px;
  color:#fff
}

.socials {
  display:flex;
  gap:10px;
  flex-wrap:wrap
}

.socials a {
  width:42px;
  height:42px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  display:grid;
  place-items:center;
  color:#fff;
  transition: all .28s ease;
}

.socials a:hover {
  border-color: rgba(98, 255, 139, 0.55);
  color: var(--green);
  background: rgba(98, 255, 139, 0.08);
  box-shadow: 0 0 15px rgba(98, 255, 139, 0.3);
  transform: translateY(-3px) scale(1.05);
}

.socials a svg {
  display: block;
}

.footer-bottom {
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:40px;
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  color:#8190a6;
  font-size:14px
}

.footer-bottom b {
  color:var(--green)
}


/* =========================================
   20. CONTACT MODAL
========================================= */

.contact-modal {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:grid;
  place-items:center;
  z-index:2000;
  opacity:0;
  visibility:hidden;
  transition:.3s;
  padding:20px
}

body.contact-open .contact-modal {
  opacity:1;
  visibility:visible
}

.modal-box {
  width:min(560px,100%);
  background:#fff;
  color:var(--text);
  border-radius:32px;
  padding:34px;
  position:relative;
  box-shadow:0 30px 90px rgba(0,0,0,.35)
}

.modal-close {
  position:absolute;
  top:18px;
  left:18px;
  border:0;
  background:#eef2f7;
  border-radius:50%;
  width:38px;
  height:38px;
  font-size:26px;
  cursor:pointer
}

.modal-box h2 {
  font-size:34px;
  margin:0 0 8px
}

.modal-box p {
  color:var(--muted);
  margin:0 0 22px
}

.contact-form {
  display:grid;
  gap:13px
}

.contact-form input,.contact-form select,.contact-form textarea {
  width:100%;
  border:1px solid rgba(15,23,42,.13);
  border-radius:16px;
  padding:14px 16px;
  font-family:inherit;
  font-size:16px;
  outline:none
}

.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus {
  border-color:var(--green2);
  box-shadow:0 0 0 4px rgba(34,197,94,.1)
}


/* =========================================
   21. SCROLL REVEAL
========================================= */

.reveal-on-scroll {
  opacity:0;
  transform:translateY(34px);
  filter:blur(8px);
  transition:opacity .8s,transform .8s,filter .8s
}

.reveal-on-scroll.visible {
  opacity:1;
  transform:none;
  filter:blur(0)
}


/* =========================================
   22. CREATIVE MOTION UPGRADE
========================================= */

/* === Creative motion upgrade: every section feels alive === */
@media (prefers-reduced-motion: reduce) {
   *,*::before,*::after {
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.001ms!important
  }

}

section::after {
   content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.42;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(98,255,139,.10), transparent 26%), linear-gradient(115deg, transparent 0 40%, rgba(98,255,139,.05) 49%, transparent 58%);
  mix-blend-mode:screen;
  transform:translateZ(0);

}

.light::after,.white-zone::after {
   opacity:.9;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(34,197,94,.11), transparent 24%), linear-gradient(115deg, transparent 0 44%, rgba(34,197,94,.055) 50%, transparent 58%);
  mix-blend-mode:multiply;

}

.section-head {
  position:relative;
  z-index:3
}

.section-head::before {
   content:"";
  position:absolute;
  width:86px;
  height:86px;
  right:50%;
  top:-30px;
  translate:50% 0;
  border-radius:50%;
  border:1px solid rgba(98,255,139,.22);
  box-shadow:0 0 44px rgba(98,255,139,.14), inset 0 0 24px rgba(98,255,139,.08);
  animation:headHalo 5.5s ease-in-out infinite;
  pointer-events:none;
  opacity:.55;

}

.light .section-head::before,.white-zone .section-head::before {
  border-color:rgba(34,197,94,.18);
  box-shadow:0 0 38px rgba(34,197,94,.12), inset 0 0 20px rgba(34,197,94,.07)
}

@keyframes headHalo {
  0%,100% {
    scale:.82;
    opacity:.25
  }

  50% {
    scale:1.16;
    opacity:.8
  }

}

.glass-card,.price-card,.problem,.white-card,.stat,.journey-card,.faq details,.logo-box,.live-console,.screen-panel,.core-module {
   transform-style:preserve-3d;
  will-change:transform, box-shadow, border-color;

}

.glass-card::after,.price-card::after,.problem::after,.white-card::after,.journey-card::after,.faq details::after {
   content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(120deg, transparent 0 30%, rgba(255,255,255,.35) 45%, rgba(98,255,139,.2) 50%, transparent 62%);
  transform:translateX(115%) skewX(-15deg);
  transition:transform .9s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
  opacity:.75;

}

.glass-card:hover::after,.price-card:hover::after,.problem:hover::after,.white-card:hover::after,.journey-card:hover::after,.faq details:hover::after {
  transform:translateX(-115%) skewX(-15deg)
}

.problem,.white-card,.price-card,.journey-card,.faq details {
  position:relative;
  overflow:hidden
}

.problem::before,.white-card::before,.journey-card::before {
   content:"";
  position:absolute;
  inset:auto 22px 18px;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--green2),transparent);
  box-shadow:0 0 20px rgba(34,197,94,.35);
  transform:scaleX(.22);
  opacity:.55;
  animation:microLine 3.6s ease-in-out infinite;

}

@keyframes microLine {
  50% {
    transform:scaleX(1);
    opacity:1
  }

}

.problem:hover,.white-card:hover,.price-card:hover,.journey-card:hover,.stat:hover,.logo-box:hover {
   transform:translateY(-10px) rotateX(2deg);
  box-shadow:0 28px 70px rgba(15,23,42,.16),0 0 34px rgba(34,197,94,.12);

}
.service-grid .glass-card.visible:nth-child(1), 
.pricing-grid .price-card.visible:nth-child(1), 
.problems-grid .problem.visible:nth-child(1), 
.journey-map .journey-card.visible:nth-child(1) {
  animation-delay: 0.1s;
}

.service-grid .glass-card.visible:nth-child(2), 
.pricing-grid .price-card.visible:nth-child(2), 
.problems-grid .problem.visible:nth-child(2), 
.journey-map .journey-card.visible:nth-child(2) {
  animation-delay: 0.2s;
}

.service-grid .glass-card.visible:nth-child(3), 
.pricing-grid .price-card.visible:nth-child(3), 
.problems-grid .problem.visible:nth-child(3), 
.journey-map .journey-card.visible:nth-child(3) {
  animation-delay: 0.3s;
}

.service-grid .glass-card.visible:nth-child(4), 
.problems-grid .problem.visible:nth-child(4), 
.journey-map .journey-card.visible:nth-child(4) {
  animation-delay: 0.4s;
}

@keyframes iconBreath {
  0%,100% {
    filter:drop-shadow(0 0 0 rgba(98,255,139,0));
    transform:translateY(0)
  }

  50% {
    filter:drop-shadow(0 0 18px rgba(98,255,139,.45));
    transform:translateY(-4px)
  }

}

.pricing-grid .price-card {
   animation:cardFloat 7s ease-in-out infinite;

}

.pricing-grid .price-card:nth-child(2) {
  animation-delay:1.1s
}

.pricing-grid .price-card:nth-child(3) {
  animation-delay:2.2s
}

@keyframes cardFloat {
  0%,100% {
    translate:0 0
  }

  50% {
    translate:0 -8px
  }

}

.live-layer-card::before,.journey-wrap::before,.client-slider::before,.faq::before {
   content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image: linear-gradient(90deg, transparent, rgba(98,255,139,.12), transparent), repeating-linear-gradient(0deg, transparent 0 18px, rgba(98,255,139,.04) 19px, transparent 20px);
  background-size:260px 100%, 100% 40px;
  animation:panelSweep 5.8s linear infinite;
  opacity:.65;

}

.client-slider::before,.faq::before {
  opacity:.22;
  mix-blend-mode:multiply
}

@keyframes panelSweep {
  to {
    background-position:520px 0,0 80px
  }

}

.live-layer-card,.journey-wrap,.client-slider,.faq {
  position:relative;
  overflow:hidden
}

.live-layer-card > *,.journey-wrap > *,.client-slider > *,.faq > * {
  position:relative;
  z-index:2
}

.feed-line {
  position:relative;
  overflow:hidden
}

.feed-line::after {
   content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:42%;
  background:linear-gradient(90deg,transparent,rgba(98,255,139,.13),transparent);
  animation:feedScan 2.9s linear infinite;

}

.feed-line:nth-child(2)::after {
  animation-delay:.8s
}

.feed-line:nth-child(3)::after {
  animation-delay:1.6s
}

@keyframes feedScan {
  from {
    translate:-140% 0
  }

  to {
    translate:260% 0
  }

}



@keyframes coreAura {
  to {
    rotate:360deg
  }

}

.journey-card {
   background-image:radial-gradient(circle at 20% 0,rgba(34,197,94,.12),transparent 35%),linear-gradient(180deg,#fff,#fbfffc);

}

.journey-card:hover .layer-label {
  background:rgba(34,197,94,.12);
  color:#0f8a3b;
  border-color:rgba(34,197,94,.25)
}

#stats::before {
   content:"";
  position:absolute;
  inset:18% 0 auto;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(98,255,139,.55),transparent);
  box-shadow:0 0 30px rgba(98,255,139,.35);
  animation:widePulse 3.5s ease-in-out infinite;

}

@keyframes widePulse {
  50% {
    opacity:.28;
    scale:.75 1
  }

}

.stat b {
  animation:statGlow 2.8s ease-in-out infinite
}

.stat:nth-child(2) b {
  animation-delay:.5s
}

.stat:nth-child(3) b {
  animation-delay:1s
}

.stat:nth-child(4) b {
  animation-delay:1.5s
}

@keyframes statGlow {
  50% {
    text-shadow:0 0 28px rgba(98,255,139,.55);
    color:var(--green)
  }

}

.logo-box {
  position:relative;
  overflow:hidden;
  animation:logoBob 5s ease-in-out infinite
}

.logo-box:nth-child(2n) {
  animation-delay:1s
}

.logo-box:nth-child(3n) {
  animation-delay:2s
}

@keyframes logoBob {
  50% {
    translate:0 -7px
  }

}

.faq details {
  transition:.32s
}

.faq details:hover {
  border-color:rgba(34,197,94,.28)
}

.faq details[open] {
  animation:faqOpen .38s cubic-bezier(.2,.8,.2,1)
}

@keyframes faqOpen {
  from {
    transform:scale(.98);
    filter:blur(4px)
  }

  to {
    transform:none;
    filter:blur(0)
  }

}

.final-cta::before {
   content:"";
  position:absolute;
  inset:0;
background:
radial-gradient(
  circle at 50% 0%,
  rgba(98,255,139,.12),
  transparent 60%
),
linear-gradient(
  100deg,
  #0c1712 0%,
  #13231b 100%
);  animation:ctaRings 5s ease-in-out infinite;
  pointer-events:none;

}

.final-cta .container {
  position:relative;
  z-index:2
}

@keyframes ctaRings {
  0%,100% {
    opacity:.35;
    scale:.94
  }

  50% {
    opacity:.8;
    scale:1.04
  }

}

footer::before {
   content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(98,255,139,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(98,255,139,.04) 1px,transparent 1px);
  background-size:54px 54px;
  animation:gridDrift 22s linear infinite;
  opacity:.6;
  mask-image:linear-gradient(#000,transparent 90%)
}

footer {
  position:relative;
  overflow:hidden
}

footer .container {
  position:relative;
  z-index:2
}

.tilt-card {
  transition:transform .18s ease, box-shadow .3s ease!important
}

.parallax-on-scroll {
  will-change:transform
}

.reveal-on-scroll.visible {
  animation:softPop .82s cubic-bezier(.2,.8,.2,1) both
}

/* أنيميشن مطور يعتمد على النعومة والتدرج بدون تغيير حاد في الحجم */
@keyframes softPop {
  0% {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}


/* =========================================
   23. RESPONSIVE BREAKPOINTS
========================================= */



@media(max-width:1050px) {
  .command-layout,.footer-grid,.live-layer-card {
    grid-template-columns:1fr
  }

  .service-grid,.why-grid,.pricing-grid,.stats-grid {
    grid-template-columns:repeat(2,1fr)
  }

  .problems-grid,.timeline,.layers-grid,.journey-map {
    grid-template-columns:repeat(2,1fr)
  }

  .price-card.featured {
    transform:none
  }

}

@media(max-width:720px) {
  .nav {
    height:74px
  }

  .nav-links {
    position:fixed;
    top:74px;
    right:-280px;
    width:260px;
    height:calc(100vh - 74px);
    background:#03060b;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:26px;
    transition:.3s
  }

  .menu-open .nav-links {
    right:0
  }

  .menu-btn {
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:0;
    border-radius:14px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:24px
  }

  .nav-cta {
    display:none
  }

  .hero h1 {
    font-size:42px
  }

  .hero p {
    font-size:17px
  }

  .service-grid,.why-grid,.pricing-grid,.stats-grid,.problems-grid,.timeline,.layers-grid,.journey-map {
    grid-template-columns:1fr
  }

  .command-card {
    padding:18px;
    border-radius:28px
  }

  .screen-panel {
    min-height:420px
  }

  .metric-grid {
    grid-template-columns:1fr
  }


  .orb-ring {
    inset:4%
  }

  .orb-item {
    min-width:110px;
    font-size:13px
  }

  .core {
    inset:37%;
    font-size:30px
  }

  .footer-bottom {
    display:grid;
    text-align:center;
    justify-content:center
  }

  .float-icons {
    display:none
  }

  section {
    padding:72px 0
  }

}


/* =========================================
   24. REQUESTED FIXES: PACKAGES + RADIAL CORE
========================================= */

/* === Requested fixes: interactive packages + radial CybTX core === */

/* =========================================
   25. INTERACTIVE PACKAGE TABS
========================================= */
.pricing-switch{
  background:#fff;
  color:var(--text);
  overflow:hidden;
}

.package-tabs{
  margin:26px auto 0;
  display:inline-flex;
  gap:10px;
  padding:8px;
  border-radius:999px;
  background:#eef5f0;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 16px 40px rgba(15,23,42,.06);
}

.package-tab{
  border:0;
  border-radius:999px;
  padding:13px 24px;
  font-family:inherit;
  font-weight:900;
  cursor:pointer;
  color:#172033;
  background:transparent;
  transition:.18s ease;
}

.package-tab.active{
  background:linear-gradient(135deg,var(--green),var(--green2));
  color:#06100a;
  box-shadow:0 12px 28px rgba(34,197,94,.25);
}

.package-panel{
  display:none;
}

.package-panel.active{
  display:grid;
}

.package-panel .price-card{
  transition-delay:0s !important;
}

.pricing-switch .price-card:not(.featured){
  color:#0b1220!important;
  background:#fff!important;
}

.pricing-switch .price-card:not(.featured) h3,
.pricing-switch .price-card:not(.featured) .price,
.pricing-switch .price-card:not(.featured) .check-list,
.pricing-switch .price-card:not(.featured) .check-list li{
  color:#0b1220!important;
}

.pricing-switch .price-card:not(.featured) .price-for,
.pricing-switch .price-card:not(.featured) .price small{
  color:#4b5d73!important;
}

.pricing-switch .price-card:not(.featured) .check-list li:before{
  color:var(--green2)!important;
}

.pricing-switch .price-card:not(.featured) .btn-dark{
  background:#07111d!important;
  color:#fff!important;
}

/* =========================================
   26. RADIAL CYBTX CORE
========================================= */

.radial-core {
  padding:100px 0 120px;
  background:radial-gradient(circle at 50% 22%,rgba(98,255,139,.14),transparent 27%),linear-gradient(180deg,#03060b,#07111d 52%,#03060b);
  overflow:hidden
}

.radial-stage {
  --r:285px;
  position:relative;
  min-height:720px;
  border-radius:46px;
  border:1px solid rgba(255,255,255,.11);
  background:radial-gradient(circle at center,rgba(98,255,139,.15),transparent 30%),rgba(255,255,255,.035);
  box-shadow:0 34px 120px rgba(0,0,0,.34);
  overflow:hidden
}

.radial-grid {
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(98,255,139,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(98,255,139,.055) 1px,transparent 1px);
  background-size:42px 42px;
  animation:gridDrift 18s linear infinite;
  mask-image:radial-gradient(circle at center,#000,transparent 78%)
}

.radial-halo {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(98,255,139,.22);
  box-shadow:0 0 70px rgba(98,255,139,.12);
  pointer-events:none
}

.halo-one {
  width:420px;
  height:420px;
  animation:ringPulse 7s ease-in-out infinite
}

.halo-two {
  width:620px;
  height:620px;
  animation:ringPulse 9s ease-in-out infinite reverse;
  opacity:.65
}

.radial-center {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:6;
  width:240px;
  height:240px;
  border-radius:50%;
  display:grid;
  place-items:center;
  text-align:center;
  background:radial-gradient(circle,#12351f,#06100a 68%);
  border:1px solid rgba(98,255,139,.55);
  box-shadow:0 0 60px rgba(98,255,139,.42),inset 0 0 42px rgba(98,255,139,.18)
}

.radial-center strong {
  font-size:50px;
  line-height:1;
  color:#fff;
  font-weight:900
}

.radial-center strong span {
  color:var(--green)
}

.radial-center small {
  position:absolute;
  bottom:58px;
  color:#bdfdcc;
  font-weight:900;
  letter-spacing:.5px
}

.center-pulse {
  position:absolute;
  inset:-22px;
  border-radius:50%;
  border:1px solid rgba(98,255,139,.25);
  animation:centerPulse 2.6s ease-in-out infinite
}

@keyframes centerPulse {
  50% {
    transform:scale(1.13);
    opacity:.25
  }

}

.radial-spokes {
  position:absolute;
  inset:0;
  z-index:2
}

.radial-spokes span {
  position:absolute;
  left:50%;
  top:50%;
  width:var(--r);
  height:2px;
  transform-origin:left center;
  transform:rotate(var(--a));
  background:linear-gradient(90deg,rgba(98,255,139,.5),rgba(98,255,139,.13),transparent);
  filter:drop-shadow(0 0 8px rgba(98,255,139,.55));
  animation:spokeFlow 2.6s linear infinite
}

@keyframes spokeFlow {
  0% {
    opacity:.25
  }

  50% {
    opacity:.95
  }

  100% {
    opacity:.25
  }

}

.radial-node {
  position:absolute;
  left:50%;
  top:50%;
  z-index:5;
  width:205px;
  min-height:98px;
  padding:18px;
  border-radius:24px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(98,255,139,.28);
  backdrop-filter:blur(16px);
  box-shadow:0 0 38px rgba(98,255,139,.13),0 22px 60px rgba(0,0,0,.24);
  transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));
  animation:nodeBreathe 5.5s ease-in-out infinite;
  transition:.3s
}

.radial-node:hover {
  background:rgba(98,255,139,.13);
  border-color:rgba(98,255,139,.58);
  box-shadow:0 0 48px rgba(98,255,139,.25),0 24px 70px rgba(0,0,0,.28)
}

.radial-node b {
  display:block;
  color:#fff;
  font-size:22px;
  line-height:1.1;
  margin-bottom:6px
}

.radial-node span {
  display:block;
  color:#bdd0e4;
  font-weight:800;
  font-size:14px;
  line-height:1.45
}

@keyframes nodeBreathe {
  0%,100% {
    filter:brightness(1)
  }

  50% {
    filter:brightness(1.25)
  }

}

.node-security {
  animation-delay:.4s
}

.node-monitoring {
  animation-delay:.8s
}

.node-support {
  animation-delay:1.2s
}

.node-backup {
  animation-delay:1.6s
}

.node-billing {
  animation-delay:2s
}

@media(max-width:900px) {
  .package-tabs {
    display:flex;
    width:100%;
    border-radius:24px
  }

  .package-tab {
    flex:1;
    padding:12px 10px
  }

  .radial-stage {
    --r:0;
    min-height:auto;
    padding:300px 18px 28px
  }

  .radial-center {
    top:170px;
    width:210px;
    height:210px
  }

  .radial-spokes,.radial-halo {
    display:none
  }

  .radial-node {
    position:relative;
    left:auto;
    top:auto;
    transform:none!important;
    width:100%;
    margin:12px 0;
    animation:none
  }

  .radial-node:hover {
    transform:none!important
  }

}


/* =========================================
   27. FINAL TWEAKS
========================================= */

/* === Final tweaks: dark Trusted By + clearer hosting title + lower command metrics === */
.command .screen-panel {
  min-height:560px;

}

.command .radar {
  margin:34px auto 0;

}

.command .metric-grid {
  margin-top:44px;

}

.command .screen-top {
  margin-bottom:8px;

}

/* =========================================
   TRUSTED BY
========================================= */

.trusted-dark{
  position:relative;
  overflow:hidden;
  padding:90px 0;

  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(98,255,139,.13),
      transparent 90%
    ),
    radial-gradient(
      circle at 82% 72%,
      rgba(98,255,139,.08),
      transparent 90%
    ),
    linear-gradient(
      180deg,
      #03060b 0%,
      #07111d 100%
    );

  color:#fff;
}

.trusted-dark:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.55;

  background-image:
    linear-gradient(
      rgba(98,255,139,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(98,255,139,.045) 1px,
      transparent 1px
    );

  background-size:58px 58px;
  animation:gridDrift 20s linear infinite;

  mask-image:
    radial-gradient(
      circle at center,
      #000,
      transparent 78%
    );
}

.trusted-dark .container{
  position:relative;
  z-index:2;
}

.trusted-dark .section-head{
  margin-bottom:32px;
}

.trusted-dark .kicker{
  color:var(--green);
}

.trusted-dark .title{
  color:#fff;
}

.trusted-dark .desc{
  color:#b8c6d8;
}

/* White Logo Container */

.client-slider{
  width:100%;
  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f8fafc
    );

  border:1px solid rgba(255,255,255,.08);

  border-radius:32px;

  padding:36px 0;

  box-shadow:
    0 30px 80px rgba(0,0,0,.18);
}

.client-track{
  display:flex;
  align-items:center;
  gap:70px;

  width:max-content;

  animation:trustedMove 24s linear infinite;
}

.client-slider:hover .client-track{
  animation-play-state:paused;
}

.logo-box{
  flex:0 0 auto;

  display:flex;
  align-items:center;
  justify-content:center;

  background:transparent;
  border:none;
  box-shadow:none;

  padding:0;
  width:auto;
  height:auto;
}

.logo-box img{
  display:block;

  width:auto;
  max-height:48px;

  object-fit:contain;

  filter:grayscale(100%);
  opacity:.65;

  transition:
    transform .25s ease,
    opacity .25s ease,
    filter .25s ease;
}

.logo-box:hover img{
  opacity:1;
  filter:grayscale(0%);
  transform:scale(1.04);
}

@keyframes trustedMove{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(50%);
  }
}

@media(max-width:720px){

  .trusted-dark{
    padding:70px 0;
  }

  .client-slider{
    border-radius:24px;
    padding:26px 0;
  }

  .client-track{
    gap:42px;
    animation-duration:18s;
  }

  .logo-box img{
    max-height:36px;
  }
}
.plans-compare{
  background:#fff;
  color:var(--text);
  padding:90px 0;
}

.compare-tabs{
  margin-top:26px;
}

.compare-table-wrap{
  display:none;
  overflow:auto;
  border-radius:30px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 24px 70px rgba(15,23,42,.08);
  background:#fff;
}

.compare-table-wrap.active{
  display:block;
}

.compare-table{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
}

.compare-table th,
.compare-table td{
  padding:20px 22px;
  text-align:center;
  border-bottom:1px solid rgba(15,23,42,.08);
  font-weight:800;
}

.compare-table th{
  background:#07111d;
  color:#fff;
}

.compare-table td:first-child{
  text-align:right;
  color:#0b1220;
  font-weight:900;
}

.compare-table td{
  color:#334155;
}

.compare-table tbody tr:hover{
  background:#f6faf8;
}

.compare-table td:nth-child(3){
  background:rgba(98,255,139,.08);
  color:#07111d;
}

.compare-table th:nth-child(3){
  background:linear-gradient(135deg,var(--green),var(--green2));
  color:#06100a;
}
.why-cybtx{
  background:
    radial-gradient(circle at 18% 18%,rgba(98,255,139,.12),transparent 28%),
    radial-gradient(circle at 82% 72%,rgba(98,255,139,.08),transparent 26%),
    linear-gradient(180deg,#03060b,#07111d);
  color:#fff;
  overflow:hidden;
}

.why-cybtx .title{
  color:#fff;
}

.why-cybtx .desc{
  color:#bdd0e4;
}

.why-metrics-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.why-metric{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  padding:30px 24px;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 70px rgba(0,0,0,.22);
  transition:.3s ease;
}

.why-metric:hover{
  transform:translateY(-8px);
  border-color:rgba(98,255,139,.35);
  box-shadow:0 26px 80px rgba(98,255,139,.12);
}

.why-metric b{
  display:block;
  font-size:48px;
  line-height:1;
  color:var(--green);
  margin-bottom:16px;
}

.why-metric h3{
  margin:0 0 10px;
  font-size:22px;
  color:#fff;
}

.why-metric p{
  margin:0;
  color:#b8c6d8;
  font-weight:700;
  line-height:1.8;
}

.why-pill-row{
  margin-top:26px;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.why-pill-row span{
  padding:11px 16px;
  border-radius:999px;
  background:rgba(98,255,139,.09);
  border:1px solid rgba(98,255,139,.18);
  color:#c8ffd7;
  font-weight:900;
  font-size:14px;
}

@media(max-width:1050px){
  .why-metrics-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:720px){
  .why-metrics-grid{
    grid-template-columns:1fr;
  }
}
.hosting-portal-info{
  max-width:760px;
  margin:18px auto 0;
  text-align:center;
  color:#64748b;
  font-size:14px;
  font-weight:800;
}

.portal-note{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(98,255,139,.12);
  border:1px solid rgba(98,255,139,.22);
  color:#16763a;
  font-size:12px;
  font-weight:900;
  margin-bottom:18px;
}

.price-card.featured .portal-note{
  color:#c8ffd7;
}
.price-card{
    display:flex;
    flex-direction:column;
}

.package-action{
  margin-top:auto;
  padding-top:22px;
  display:flex;
  justify-content:center;
}
.plans-compare .desc{
  color:#1f2937;
}
/* =========================================
   RESPONSIVE FIXES - TABLET & MOBILE
========================================= */

/* Tablet */
@media(max-width:1050px){

  .package-tabs{
    flex-wrap:wrap;
    justify-content:center;
    border-radius:26px;
  }

  .package-tab{
    flex:0 1 auto;
    min-width:180px;
  }

  .pricing-grid{
    grid-template-columns:1fr 1fr;
  }

  .price-card.featured{
    transform:none;
  }

  .compare-table-wrap{
    overflow-x:auto;
  }
}


/* Mobile */
@media(max-width:720px){

  .package-tabs{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    border-radius:22px;
  }

  .package-tab{
    width:100%;
    min-width:0;
    padding:12px 14px;
    font-size:14px;
  }

  .pricing-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .price-card{
    padding:26px 22px;
    border-radius:26px;
  }

  .price-card h3{
    font-size:26px;
  }

  .price{
    font-size:38px;
  }

  .plans-compare{
    padding:70px 0;
  }

  .compare-table{
    min-width:760px;
  }

  .compare-table th,
  .compare-table td{
    padding:14px 16px;
    font-size:14px;
  }

  .hosting-portal-info{
    font-size:13px;
    line-height:1.7;
  }
}


/* Very small phones */
@media(max-width:420px){

  .title{
    font-size:30px;
  }

  .desc{
    font-size:15px;
  }

  .price-card{
    padding:24px 18px;
  }

  .price{
    font-size:34px;
  }

  .btn{
    width:100%;
    padding:13px 18px;
  }
}
.table-hint{
  display:none;
  text-align:center;
  color:#64748b;
  font-weight:800;
  margin-bottom:12px;
}

@media(max-width:720px){
  .table-hint{
    display:block;
  }
}

/* =========================================
   28. RESELLER GRIDS LAYOUT
========================================= */
@media(min-width:1051px) {
  .reseller-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* =========================================
   29. PANEL INCLUDED FEATURES (CREATIVE OPTIMIZED)
========================================= */
.panel-included-features {
  grid-column: 1 / -1;
  margin-top: 60px;
  background: var(--dark2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 38px;
  padding: 45px;
  color: #fff;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.panel-included-features::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(98, 255, 139, 0.08), transparent 50%);
  pointer-events: none;
}

.features-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 36px;
}

.features-badge {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(98, 255, 139, 0.08);
  border: 1px solid rgba(98, 255, 139, 0.22);
  color: #c7fbd3;
  font-size: 13px;
  font-weight: 900;
  border-radius: 999px;
  margin-bottom: 14px;
}

.features-header h3 {
  font-size: 28px;
  color: #fff;
  margin: 0 0 12px;
  font-weight: 900;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.features-header p {
  color: #b8c6d8;
  font-size: 15px;
  margin: 0;
  line-height: 1.6;
}

/* Category grid: 4 columns on desktop */
.features-categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.category-card {
  background: rgba(2, 6, 12, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  padding: 24px;
  text-align: right;
  transition: all 0.3s ease;
}

.category-card:hover {
  border-color: rgba(98, 255, 139, 0.25);
  background: rgba(2, 6, 12, 0.6);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25), 0 0 20px rgba(98, 255, 139, 0.05);
  transform: translateY(-4px);
}

.category-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
  direction: rtl;
}

.category-title svg {
  width: 22px;
  height: 22px;
  stroke: var(--green);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.category-title h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  color: #fff;
}

.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
  direction: ltr; /* English technical features */
}

.category-list li {
  font-size: 13.5px;
  color: #b9cce0;
  font-weight: 700;
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-list li span {
  color: var(--green);
  font-weight: 900;
  font-size: 14px;
}

/* Hidden items animation rules */
.category-list li.hidden-feature {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  border: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel-included-features.expanded .category-list li.hidden-feature {
  max-height: 80px;
  opacity: 1;
  padding: 6px 0;
  margin-top: 4px;
}

/* Toggled button */
.expand-btn-wrapper {
  text-align: center;
  margin-top: 24px;
}

.features-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 12px 28px !important;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  border-color: rgba(98, 255, 139, 0.3) !important;
  transition: all 0.3s ease;
}

.features-toggle-btn:hover {
  background: rgba(98, 255, 139, 0.1) !important;
  box-shadow: 0 0 20px rgba(98, 255, 139, 0.25);
  transform: translateY(-2px);
}

.features-toggle-btn svg {
  transition: transform 0.3s ease;
}

/* Responsiveness */
@media(max-width: 1100px) {
  .features-categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 720px) {
  .panel-included-features {
    padding: 30px 20px;
    border-radius: 28px;
    margin-top: 40px;
  }
  
  .features-header h3 {
    font-size: 22px;
  }
  
  .features-categories-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .category-card {
    padding: 18px;
  }
}