@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-v20-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-v20-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-v20-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-v20-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../assets/fonts/ibm-plex-sans-arabic-v15-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../assets/fonts/ibm-plex-sans-arabic-v15-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../assets/fonts/ibm-plex-sans-arabic-v15-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../assets/fonts/ibm-plex-sans-arabic-v15-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}   
   
   
   :root{
      --bg:#050B14;
      --surface:#0B1626;
      --border:#1B2A3A;
      --text:#E6F0FF;
      --muted:#A8B3C7;
      --muted2:#C8D4EA;

      /* Aqua (يميل للأزرق) */
      --p1:#22D3EE;
      --p2:#60A5FA;
      --p3:#38BDF8;
      --cta1:#163B5A;
      --cta2:#1E5B85;
      --ctaText:#EAF6FF;
      --ctaNote:#B8D5EA;
    }

    html { scroll-behavior: smooth; }
    body { font-family: "IBM Plex Sans Arabic", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

    /* subtle grain */
    .grain:before{
      content:"";
      position:absolute; inset:0;
      background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".75" numOctaves="2" stitchTiles="stitch"/></filter><rect width="220" height="220" filter="url(%23n)" opacity=".22"/></svg>');
      opacity:.16; pointer-events:none; mix-blend-mode: overlay;
    }

    /* dot-grid */
    .dotgrid{
      background-image: radial-gradient(rgba(96,165,250,.12) 1px, transparent 1px);
      background-size: 22px 22px;
      background-position: 0 0;
    }

    /* floating */
    @keyframes floatA { 0%,100% { transform: translateY(0) rotate(0deg);} 50% { transform: translateY(-12px) rotate(3deg);} }
    @keyframes floatB { 0%,100% { transform: translateY(0) rotate(0deg);} 50% { transform: translateY(-18px) rotate(-4deg);} }
    @keyframes floatC { 0%,100% { transform: translateY(0) rotate(0deg);} 50% { transform: translateY(-10px) rotate(5deg);} }
    .floatA{ animation: floatA 12s ease-in-out infinite; opacity: .55; }
    .floatB{ animation: floatB 14s ease-in-out infinite; opacity: .45; }
    .floatC{ animation: floatC 13s ease-in-out infinite; opacity: .5; }

    /* scrollbar */
    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-track { background: rgba(255,255,255,.03); }
    ::-webkit-scrollbar-thumb { background: rgba(34,211,238,.18); border-radius: 99px; border: 2px solid rgba(5,11,20,1); }
    ::-webkit-scrollbar-thumb:hover { background: rgba(96,165,250,.22); }

    /* line clamp */
    .line-clamp-3{
      display:-webkit-box;
      -webkit-line-clamp:3;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }

    @media (prefers-reduced-motion: reduce){
      .floatA,.floatB,.floatC{ animation:none; }
      html{ scroll-behavior:auto; }
    }
  
    /* form fields (force dark theme, avoid browser white inputs) */
    .form-field{
      background: rgba(11,22,38,.78);
      border: 1px solid var(--border);
      color: var(--text);
    }
    .form-field::placeholder{ color: rgba(168,179,199,.75); }
    .form-field:focus{
      outline: none;
      border-color: var(--p1);
      box-shadow: 0 0 0 4px rgba(34,211,238,.16);
    }
    select.form-field{
      background: rgba(11,22,38,.78);
    }

    .quote-submit{
      background: linear-gradient(135deg, var(--cta1), var(--cta2));
      color: var(--ctaText);
      border: 1px solid rgba(120,186,230,.28);
      box-shadow: 0 16px 44px rgba(7, 24, 41, .34), inset 0 1px 0 rgba(255,255,255,.08);
      transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, opacity .2s ease;
    }
    .quote-submit:hover{
      transform: translateY(-1px);
      filter: saturate(1.04);
      box-shadow: 0 20px 52px rgba(7, 24, 41, .40), inset 0 1px 0 rgba(255,255,255,.12);
    }
    .quote-submit:active{
      transform: translateY(0);
      box-shadow: 0 12px 28px rgba(7, 24, 41, .28), inset 0 1px 0 rgba(255,255,255,.08);
    }
    .quote-submit:focus-visible{
      outline: none;
      box-shadow: 0 0 0 4px rgba(34,211,238,.14), 0 18px 48px rgba(7, 24, 41, .36), inset 0 1px 0 rgba(255,255,255,.08);
    }
    .quote-submit .quote-title{
      display:block;
      color: var(--ctaText);
      font-weight: 700;
      letter-spacing: -.01em;
      text-shadow: none;
    }
    .quote-submit .quote-note{
      color: var(--ctaNote);
      line-height: 1.75;
      font-weight: 500;
      opacity: .96;
    }

    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.9rem;
      margin-top:1.25rem;
      justify-content:center;
      align-items:stretch;
      width:100%;
    }
    .hero-stats{
      margin-top:1.75rem;
    }
    .hero-stat-card{
      width:100%;
      max-width:22rem;
      min-height:5.75rem;
      border-radius:1.35rem;
      padding:1rem 1.1rem;
      background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
      border:1px solid rgba(96,165,250,.14);
      box-shadow:0 16px 40px rgba(0,0,0,.16);
      display:flex;
      flex-direction:column;
      justify-content:center;
      text-align:center;
    }
    .hero-primary-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:3rem;
      padding:.85rem 1.35rem;
      border-radius:1rem;
      background: linear-gradient(135deg, rgba(21,58,89,.96), rgba(31,91,133,.96));
      color:#ECF7FF;
      border:1px solid rgba(125,187,228,.22);
      box-shadow: 0 14px 34px rgba(5,11,20,.32);
      transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }
    .hero-primary-btn:hover{
      transform: translateY(-1px);
      filter: saturate(1.05);
      box-shadow: 0 18px 40px rgba(5,11,20,.38);
    }
    .hero-secondary-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:3rem;
      padding:.85rem 1.35rem;
      border-radius:1rem;
      background: rgba(255,255,255,.04);
      border: 1px solid var(--border);
      color: var(--text);
      transition: background .2s ease, border-color .2s ease, transform .2s ease;
    }
    .hero-secondary-btn:hover{
      background: rgba(255,255,255,.07);
      border-color: rgba(96,165,250,.25);
      transform: translateY(-1px);
    }

    .why-grid{
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap:1rem;
      margin-top:2rem;
    }
    .why-card{
      height:100%;
      min-height: 170px;
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
      border-radius: 1.5rem;
      padding: 1.5rem;
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      border:1px solid rgba(96,165,250,.12);
      box-shadow: 0 16px 44px rgba(0,0,0,.18);
    }
    .about-shell{
      border-radius: 1.75rem;
      padding: 1.75rem;
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      border:1px solid rgba(96,165,250,.12);
      box-shadow: 0 18px 50px rgba(0,0,0,.18);
    }


    /* Make "Request this service" link always clickable */
    .js-service-cta{ position: relative; z-index: 5; }

    /* FAQ accordion */
.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  text-align:start;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;

  position: relative;
  z-index: 20;
  pointer-events: auto;

}
.faq-icon{
  flex:0 0 auto;
  width: 28px; height: 28px;
  border-radius: 14px;
  border: 1px solid rgba(27,42,58,.7);
  background: rgba(255,255,255,.04);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family: Inter, system-ui;
  font-size: 16px;
  color: rgba(230,240,255,.85);
  transition: transform .2s ease, background .2s ease;
}
.faq-a{ display:none; }
.faq-item.is-open .faq-a{ display:block; }
.faq-item.is-open .faq-icon{ transform: rotate(45deg); background: rgba(255,255,255,.06); }

    /* ===== Global animated background (matches hero vibe) ===== */
    body{ position: relative; }

    @keyframes blobDriftA {
      0%,100% { transform: translate3d(-50%,0,0) scale(1); }
      50%     { transform: translate3d(-50%,14px,0) scale(1.04); }
    }
    @keyframes blobDriftB {
      0%,100% { transform: translate3d(0,0,0) scale(1); }
      50%     { transform: translate3d(18px,-10px,0) scale(1.06); }
    }
    @keyframes blobDriftC {
      0%,100% { transform: translate3d(0,0,0) scale(1); }
      50%     { transform: translate3d(-16px,12px,0) scale(1.05); }
    }

    .bg-blob{
      background:
        radial-gradient(circle at 20% 20%, rgba(34,211,238,.55), transparent 55%),
        radial-gradient(circle at 70% 30%, rgba(96,165,250,.45), transparent 55%),
        radial-gradient(circle at 45% 80%, rgba(56,189,248,.40), transparent 55%);
    }
    .bg-blob2{
      background:
        radial-gradient(circle at 30% 30%, rgba(56,189,248,.45), transparent 58%),
        radial-gradient(circle at 70% 70%, rgba(34,211,238,.35), transparent 60%);
    }
    .bg-blob3{
      background:
        radial-gradient(circle at 35% 35%, rgba(96,165,250,.40), transparent 58%),
        radial-gradient(circle at 70% 55%, rgba(34,211,238,.32), transparent 60%);
    }

    .bubbles{ position:absolute; inset:0; overflow:hidden; }
    .bubbles span{
      position:absolute;
      bottom:-15vh;
      border-radius:9999px;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), rgba(34,211,238,.18) 40%, rgba(96,165,250,.10) 70%, transparent 72%);
      border: 1px solid rgba(255,255,255,.08);
      filter: blur(.15px);
      opacity: .0;
      animation-name: bubbleRise;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      will-change: transform, opacity;
    }
    @keyframes bubbleRise{
      0%   { transform: translate3d(0,0,0) scale(.85); opacity: 0; }
      10%  { opacity: .22; }
      85%  { opacity: .14; }
      100% { transform: translate3d(0,-125vh,0) scale(1.25); opacity: 0; }
    }

    
    /* ===== Software / computer motif layer (subtle) ===== */
    @keyframes circuitPan {
      0%   { transform: translate3d(0,0,0); }
      100% { transform: translate3d(-140px,-140px,0); }
    }
    .tech-circuit{
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(to right, rgba(34,211,238,.10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(96,165,250,.08) 1px, transparent 1px),
        radial-gradient(circle at 18% 28%, rgba(34,211,238,.16) 0 2px, transparent 3px),
        radial-gradient(circle at 62% 44%, rgba(96,165,250,.14) 0 2px, transparent 3px),
        radial-gradient(circle at 74% 76%, rgba(34,211,238,.12) 0 2px, transparent 3px),
        radial-gradient(circle at 34% 70%, rgba(96,165,250,.10) 0 2px, transparent 3px);
      background-size: 140px 140px, 140px 140px, 520px 520px, 560px 560px, 640px 640px, 700px 700px;
      background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
      /* soft focus toward center/top like hero */
      -webkit-mask-image: radial-gradient(circle at 50% 30%, rgba(0,0,0,.95), transparent 70%);
      mask-image: radial-gradient(circle at 50% 30%, rgba(0,0,0,.95), transparent 70%);
      opacity: .16;
      animation: circuitPan 38s linear infinite;
      will-change: transform;
    }

    .tech-code{ position:absolute; inset:0; overflow:hidden; }
    .tech-code span{
      position:absolute;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      letter-spacing: .14em;
      color: rgba(226,232,240,.55);
      text-shadow: 0 0 14px rgba(34,211,238,.18);
      opacity: 0;
      animation-name: codeDrift;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      will-change: transform, opacity;
      user-select: none;
      white-space: nowrap;
    }
    @keyframes codeDrift{
      0%   { transform: translate3d(0,16px,0); opacity: 0; }
      12%  { opacity: .16; }
      50%  { transform: translate3d(0,-18px,0); opacity: .10; }
      88%  { opacity: .14; }
      100% { transform: translate3d(0,16px,0); opacity: 0; }
    }

@media (prefers-reduced-motion: reduce){
      .bg-blobA,.bg-blobB,.bg-blobC,.bubbles span,.tech-circuit,.tech-code span{ animation:none !important; }
    }


    
/* Mobile polish (iOS/Android) */
html { -webkit-text-size-adjust: 100%; }
:where(a, button, summary, [role="button"]) { touch-action: manipulation; }
:where(a, button, summary) { -webkit-tap-highlight-color: transparent; }
/* Safe-area for iPhone notch / home indicator */
body { padding-bottom: env(safe-area-inset-bottom); }
header.sticky { padding-top: env(safe-area-inset-top); }

/* anchor offset for sticky header (mobile + desktop) */
section[id], main[id] {
  scroll-margin-top: calc(84px + env(safe-area-inset-top));
}

    /* Pause heavy animations when tab is not visible (performance) */
    body.is-paused .bg-blobA,
    body.is-paused .bg-blobB,
    body.is-paused .bg-blobC,
    body.is-paused .bubbles span,
    body.is-paused .tech-circuit,
    body.is-paused .tech-code span { animation-play-state: paused !important; }
[data-i18n="hero.desc"]{
  overflow-wrap: anywhere;
  word-break: break-word;
}
.brand-lock{
  direction: ltr;
  unicode-bidi: isolate;
  flex-shrink: 0;
}

.brand-lock img{
  flex-shrink: 0;
}

.brand-lock > span:last-child{
  text-align: left;
}
.header-row{
  direction: ltr;
}
.desktop-nav{
  direction: ltr;
}

html[dir="rtl"] .desktop-nav{
  direction: rtl;
}

html[dir="rtl"] .desktop-nav a{
  text-align: right;
}


.nav-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:2.6rem;
  padding:.55rem .8rem;
  border-radius:9999px;
  color:var(--muted2);
  transition: color .2s ease, background .2s ease, transform .2s ease, border-color .2s ease;
}
.nav-link:hover{
  color:#fff;
  background:rgba(255,255,255,.05);
  transform:translateY(-1px);
}
.nav-link.is-active{
  color:#fff;
  background:linear-gradient(135deg, rgba(21,58,89,.88), rgba(31,91,133,.82));
  border-color:rgba(125,187,228,.22);
  box-shadow:0 10px 24px rgba(4,12,24,.22);
}

.mobile-nav-link{
  display:flex;
  align-items:center;
  min-height:48px;
  padding:.8rem 1rem;
  border-radius:1rem;
  color:var(--muted2);
  border:1px solid transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.mobile-nav-link:hover{
  color:#fff;
  background:rgba(255,255,255,.05);
  border-color:rgba(96,165,250,.16);
}
.mobile-nav-link.is-active{
  color:#fff;
  background:linear-gradient(135deg, rgba(21,58,89,.72), rgba(31,91,133,.62));
  border-color:rgba(125,187,228,.20);
}


/* Keep hero layout visually identical in Arabic and English */
.hero-layout{ direction:ltr; }
.hero-stats{ direction:ltr; }
.hero-panel{ direction:ltr; }
.hero-terminal{ direction:ltr; }

html[dir="rtl"] .hero-copy{
  direction: rtl;
  text-align: right;
}

html[dir="ltr"] .hero-copy{
  direction: ltr;
  text-align: left;
}

html[dir="rtl"] .hero-stats > div,
html[dir="rtl"] .hero-panel-copy,
html[dir="rtl"] .hero-mini-card,
html[dir="rtl"] .hero-ready{
  direction: rtl;
  text-align: right;
}

html[dir="ltr"] .hero-stats > div,
html[dir="ltr"] .hero-panel-copy,
html[dir="ltr"] .hero-mini-card,
html[dir="ltr"] .hero-ready{
  direction: ltr;
  text-align: left;
}
html[dir="rtl"] .hero-copy p{
  margin-right: 0;
  margin-left: auto;
}
html[dir="rtl"] .hero-panel-wrap{
  display: flex;
  justify-content: flex-start;
}

html[dir="rtl"] .hero-panel{
  margin-left: 0;
  margin-right: auto;
}

/* In Arabic on desktop: swap hero columns so the card moves to the left side */
@media (min-width: 768px){
  html[dir="rtl"] .hero-layout > .hero-copy{
    order: 2;
  }

  html[dir="rtl"] .hero-layout > .hero-panel-wrap{
    order: 1;
    justify-content: flex-start;
  }

  html[dir="rtl"] .hero-layout > .hero-panel-wrap .hero-panel{
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
  }
}
.hero-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

html[dir="rtl"] .hero-card-head{
  flex-direction: row-reverse;
}

html[dir="rtl"] .hero-card-head .hero-panel-copy{
  text-align: right;
}

html[dir="ltr"] .hero-card-head .hero-panel-copy{
  text-align: left;
}


/* Performance + mobile optimization */
img{ max-width:100%; height:auto; }
/* content-visibility: per-section intrinsic estimates reduce scrollbar jitter */
section{ content-visibility:auto; contain-intrinsic-size: auto 1px auto 700px; }
#about{ contain-intrinsic-size: auto 1px auto 420px; }
#services{ contain-intrinsic-size: auto 1px auto 1200px; }
#process{ contain-intrinsic-size: auto 1px auto 900px; }
#trust{ contain-intrinsic-size: auto 1px auto 480px; }
#ready-systems{ contain-intrinsic-size: auto 1px auto 600px; }
#portfolio-showcase{ contain-intrinsic-size: auto 1px auto 700px; }
#results{ contain-intrinsic-size: auto 1px auto 500px; }
#testimonials{ contain-intrinsic-size: auto 1px auto 600px; }
#offers{ contain-intrinsic-size: auto 1px auto 700px; }
#pricing{ contain-intrinsic-size: auto 1px auto 600px; }
#proof{ contain-intrinsic-size: auto 1px auto 400px; }
#fit-check{ contain-intrinsic-size: auto 1px auto 400px; }
#security{ contain-intrinsic-size: auto 1px auto 700px; }
#faq{ contain-intrinsic-size: auto 1px auto 800px; }
#contact, footer{ content-visibility:visible; }

@media (max-width: 1023px){
  .tech-circuit{
    opacity:.08 !important;
    animation-duration:70s !important;
    transform:scale(.96);
  }
  .tech-code{
    opacity:.45 !important;
  }
  .tech-code span{
    animation-duration:18s !important;
    font-size:.72rem !important;
    text-shadow:0 0 10px rgba(34,211,238,.10);
  }
  .bubbles{
    opacity:.22 !important;
  }
  .bubbles span{
    animation-duration:24s !important;
    opacity:.12;
  }
  .bg-blobA,.bg-blobB,.bg-blobC{ opacity:.14 !important; filter: blur(42px); }
}

@media (max-width: 1023px){
  .trust-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 767px){
  .sticky-mobile-cta{ display:block; }
  .trust-strip{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:1fr !important;
    gap:1rem !important;
  }
  .trust-pill{
    width:100% !important;
    min-width:0 !important;
  }
  header.sticky{
    position:fixed !important;
    top:0;
    left:0;
    right:0;
    width:100%;
    z-index:1000;
  }
  #mobileMenu{
    position:fixed;
    top:calc(68px + env(safe-area-inset-top));
    left:0;
    right:0;
    z-index:999;
  }
  main{
    padding-top:calc(84px + env(safe-area-inset-top));
  }
  html, body{ overflow-x:hidden; }
  #globalBg{
    opacity:.76;
  }
  .grain:before{ opacity:.08 !important; }
  .floatA,.floatB,.floatC{
    animation-duration:17s !important;
    opacity:.28 !important;
  }
  .tech-circuit{
    opacity:.065 !important;
    animation-duration:84s !important;
    -webkit-mask-image: radial-gradient(circle at 50% 22%, rgba(0,0,0,.8), transparent 72%);
    mask-image: radial-gradient(circle at 50% 22%, rgba(0,0,0,.8), transparent 72%);
  }
  .tech-code{ opacity:.42 !important; }
  .tech-code span{
    animation-duration:20s !important;
    font-size:.68rem !important;
    letter-spacing:.11em !important;
  }
  .bubbles{ opacity:.20 !important; }
  .bubbles span{
    animation-duration:25s !important;
    transform:scale(.86);
  }
  .bg-blobA,.bg-blobB,.bg-blobC{
    opacity:.13 !important;
    filter: blur(38px) !important;
  }
  header.sticky,
  #mobileMenu{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(5,11,20,.96) !important;
  }
  .header-row{ gap:.75rem; align-items:center; }
  .brand-lock{ min-width:0; max-width:calc(100% - 8.5rem); }
  #mobileMenu a{ min-height:44px; display:flex; align-items:center; }
  .hero-layout{ gap:1rem !important; }
  .hero-copy > p:first-child{ font-size:.75rem; line-height:1.5rem; }
  .hero-copy h1{ margin-top:1rem; line-height:1.18; }
  .hero-copy [data-i18n="hero.desc"]{
    margin-top:1rem;
    max-width:none;
    font-size:.95rem;
    line-height:1.9;
  }
  .hero-stats{ margin-top:1.1rem; grid-template-columns:1fr !important; gap:.75rem; justify-items:stretch; }
  .hero-stats > div,
  .hero-panel-wrap,
  .hero-panel{ width:100% !important; max-width:none !important; }
  .hero-panel{ padding:1rem !important; border-radius:1.5rem; }
  .hero-card-head{ gap:.75rem; }
  .hero-mini-card{ padding:.875rem !important; }
  .hero-terminal{ margin-top:1rem; }
  .hero-terminal pre{ font-size:11px; line-height:1.65; white-space:pre-wrap; word-break:break-word; }
  .hero-ready{ margin-top:1rem; padding:1rem; }
  section[id], main[id]{ scroll-margin-top:80px; }
  section > div[class*="max-w-6xl"]{ padding-top:2.75rem !important; padding-bottom:2.75rem !important; }
  #services .space-y-10 > div,
  #process .grid > div,
  #faq .space-y-4 > div,
  #contact .grid > div > div,
  #contact form{ border-radius:1.5rem; }
  #services svg,
  #process svg{ max-width:100%; height:auto; }
  footer .max-w-6xl{ padding-top:1.5rem; padding-bottom:1.5rem; }
  body{ padding-bottom:84px; }
  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .hero-actions a{ width:100%; }
  .why-grid{ grid-template-columns:1fr; }
  .why-card{ min-height:auto; }
  .about-shell{ padding:1.25rem; }
}

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



/* Adaptive lite mode for mobile performance */
.lite-mode .tech-circuit{
  display:none !important;
}
.lite-mode .bubbles{
  opacity:.10 !important;
}
.lite-mode .tech-code{
  opacity:.20 !important;
}
.lite-mode .tech-code span:nth-child(n+6){
  display:none !important;
}
.lite-mode .bubbles span:nth-child(n+6){
  display:none !important;
}

@media (max-width: 767px){
  .tech-code span:nth-child(n+6){
    display:none;
  }

  .bubbles span:nth-child(n+6){
    display:none;
  }

  .bg-blobA,
  .bg-blobB,
  .bg-blobC{
    filter: blur(22px) !important;
  }

  .bg-blobA{ animation-duration: 20s !important; }
  .bg-blobB{ animation-duration: 24s !important; }
  .bg-blobC{ animation-duration: 26s !important; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ===== Scroll-triggered section animations ===== */
[data-animate]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .55s ease, transform .55s ease;
}
[data-animate].is-visible{
  opacity:1;
  transform:translateY(0);
}
[data-animate-delay="1"]{ transition-delay:.08s; }
[data-animate-delay="2"]{ transition-delay:.16s; }
[data-animate-delay="3"]{ transition-delay:.24s; }
[data-animate-delay="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  [data-animate]{ opacity:1; transform:none; transition:none; }
}
.success-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(5,11,20,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
}

.success-modal.is-open{
  display: flex;
}

.success-modal-card{
  width: min(100%, 28rem);
  border-radius: 1.5rem;
  padding: 1.5rem;
  background: #0B1626;
  border: 1px solid rgba(96,165,250,.18);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  text-align: center;
}

.success-modal-icon{
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34,197,94,.15);
  border: 1px solid rgba(34,197,94,.35);
  color: #bbf7d0;
  font-size: 28px;
  font-weight: 700;
}

.success-modal-title{
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 700;
}

.success-modal-text{
  margin-top: .75rem;
  color: var(--muted2);
  line-height: 1.9;
}

.success-modal-btn{
  margin-top: 1.25rem;
  min-width: 120px;
  min-height: 46px;
  padding: .8rem 1.2rem;
  border-radius: 1rem;
  border: 1px solid rgba(125,187,228,.18);
  background: linear-gradient(135deg, rgba(21,58,89,.96), rgba(31,91,133,.96));
  color: #ECF7FF;
  cursor: pointer;
}

/* ===== Analytics consent banner ===== */
#consent-banner{
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:9999;
  padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  background:rgba(5,11,20,.96);
  border-top:1px solid rgba(96,165,250,.18);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 -12px 40px rgba(0,0,0,.32);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem 1.25rem;
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
#consent-banner.is-visible{ transform:translateY(0); }
#consent-banner p{
  flex:1;
  min-width:220px;
  font-size:.85rem;
  color:var(--muted2);
  line-height:1.6;
  margin:0;
}
#consent-banner p a{
  color:var(--p1);
  text-decoration:underline;
  text-underline-offset:2px;
}
.consent-btn-accept{
  flex-shrink:0;
  padding:.6rem 1.2rem;
  border-radius:.85rem;
  background:linear-gradient(135deg,rgba(21,58,89,.96),rgba(31,91,133,.96));
  color:#ECF7FF;
  border:1px solid rgba(125,187,228,.22);
  font-size:.875rem;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:transform .2s ease, box-shadow .2s ease;
}
.consent-btn-accept:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(5,11,20,.3); }
.consent-btn-decline{
  flex-shrink:0;
  padding:.6rem 1rem;
  border-radius:.85rem;
  background:transparent;
  color:var(--muted);
  border:1px solid var(--border);
  font-size:.875rem;
  font-weight:500;
  cursor:pointer;
  font-family:inherit;
  transition:color .2s ease, border-color .2s ease;
}
.consent-btn-decline:hover{
  color:var(--text);
  border-color:rgba(96,165,250,.3);
}

.consent-actions{
  display:flex;
  gap:.75rem;
  flex-shrink:0;
}

@media (max-width:767px){
  #consent-banner{
    bottom:0 !important;
    flex-direction:column;
    align-items:stretch;
    text-align:center;
  }

  #consent-banner p{
    min-width:0;
  }

  #consent-banner button{
    width:100%;
  }

  .consent-actions{
    width:100%;
  }

  .consent-actions button{
    flex:1;
  }
}

@media (max-width:767px){
  .consent-actions{
    width:100%;
  }

  .consent-actions button{
    flex:1;
  }
}


.trust-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
}
.trust-pill{
  border-radius:1.35rem;
  padding:1rem 1.1rem;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border:1px solid rgba(96,165,250,.14);
  box-shadow:0 14px 34px rgba(0,0,0,.16);
}
.sticky-mobile-cta{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  display:none;
  padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom));
  background:rgba(5,11,20,.94);
  border-top:1px solid rgba(96,165,250,.16);
  box-shadow:0 -12px 32px rgba(0,0,0,.24);
}
.sticky-mobile-cta-inner{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.75rem;
  align-items:center;
  max-width:72rem;
  margin:0 auto;
}
.sticky-mobile-cta-copy{
  min-width:0;
}

/* Desktop-only contact social cards */
@media (min-width: 768px){
  #contact [data-i18n="contact.social"] + div a svg{
    flex: 0 0 auto;
  }
}

.sticky-mobile-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:3rem;
  padding:.85rem 1rem;
  border-radius:1rem;
  white-space:nowrap;
  background:linear-gradient(135deg, rgba(21,58,89,.96), rgba(31,91,133,.96));
  color:#ECF7FF;
  border:1px solid rgba(125,187,228,.22);
  box-shadow:0 12px 28px rgba(5,11,20,.28);
  
}
h1, h2, h3, p, span, a, button {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input, textarea, select, button {
  -webkit-user-select: auto;
  user-select: auto;
  -webkit-touch-callout: default;
  caret-color: auto;
}

  #wa-float {
    position: fixed;
    bottom: 28px;
    left: 20px;
    z-index: 70;
    width: 54px;
    height: 54px;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--cta1), var(--cta2));
    border: 1px solid rgba(125,187,228,.28);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ECF7FF;
    box-shadow: 0 12px 34px rgba(5,11,20,.42), 0 0 0 0 rgba(34,211,238,.34), inset 0 1px 0 rgba(255,255,255,.10);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    animation: wa-pulse 3.2s ease-in-out infinite;
  }
  #wa-float:hover {
    transform: scale(1.08);
    filter: saturate(1.08);
    box-shadow: 0 18px 44px rgba(5,11,20,.50), 0 0 22px rgba(34,211,238,.22), inset 0 1px 0 rgba(255,255,255,.14);
    animation: none;
  }
  #wa-float:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(34,211,238,.18), 0 14px 38px rgba(5,11,20,.46), inset 0 1px 0 rgba(255,255,255,.12);
  }
  @keyframes wa-pulse {
    0%, 100% { box-shadow: 0 12px 34px rgba(5,11,20,.42), 0 0 0 0 rgba(34,211,238,.38), inset 0 1px 0 rgba(255,255,255,.10); }
    50%       { box-shadow: 0 12px 34px rgba(5,11,20,.42), 0 0 0 12px rgba(34,211,238,0), inset 0 1px 0 rgba(255,255,255,.10); }
  }
  @media (max-width: 767px) {
    #wa-float {
      bottom: calc(72px + env(safe-area-inset-bottom));
      left: 16px;
      width: 48px;
      height: 48px;
    }
  }
  #wa-float .wa-tip {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(11,22,38,.92);
    border: 1px solid rgba(96,165,250,.18);
    color: #E6F0FF;
    font-family: "IBM Plex Sans Arabic", Inter, system-ui, sans-serif;
    font-size: 13px;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 10px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
  }
  #wa-float:hover .wa-tip,
  #wa-float:focus-visible .wa-tip { opacity: 1; }
  @media (max-width: 767px) { #wa-float .wa-tip { display: none; } }
  @media (prefers-reduced-motion: reduce) { #wa-float { animation: none; } }


/* =========================================================
   Aqua.Tech Generated-Look Redesign
   Clean component system for the full services showcase
   ========================================================= */

body{
  background:
    radial-gradient(circle at top right, rgba(0,140,255,.10), transparent 26%),
    radial-gradient(circle at top left, rgba(34,211,238,.05), transparent 22%),
    linear-gradient(180deg, #02050b 0%, #020814 45%, #01040a 100%) !important;

  color: #f4f8ff;
}

/* Navbar closer to the generated reference */
header.sticky{
  top:0 !important;
  width:100% !important;
  border-left:0 !important;
  border-right:0 !important;
  border-radius:0 0 1.65rem 1.65rem !important;
  background:rgba(3,14,26,.82) !important;
  border-bottom:1px solid rgba(96,165,250,.23) !important;
  box-shadow:
    0 18px 50px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
header .header-row{
  max-width:1280px !important;
}

/* Shared premium cards across the website */
.about-shell,
.trust-pill,
#ready-systems .grid > div,
#results .grid > div,
#testimonials .grid > div,
#offers .grid > div,
#security .grid > div,
#faq .faq-item,
#contact form,
#contact .space-y-3 > div{
  position:relative;
  overflow:hidden;
  border-radius:1.85rem !important;
  background:
    radial-gradient(circle at 78% 18%, rgba(34,211,238,.14), transparent 35%),
    radial-gradient(circle at 18% 85%, rgba(96,165,250,.08), transparent 32%),
    linear-gradient(135deg, rgba(8,30,50,.72), rgba(5,17,31,.90)) !important;
  border:1px solid rgba(34,211,238,.24) !important;
  box-shadow:
    0 26px 80px rgba(0,0,0,.34),
    0 0 42px rgba(34,211,238,.065),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
}

/* ===== Services generated-style section ===== */
.aq-services-section{
  border-top:1px solid rgba(96,165,250,.16);
  position:relative;
}
.aq-services-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 70% 12%, rgba(34,211,238,.09), transparent 34%),
    radial-gradient(circle at 18% 30%, rgba(96,165,250,.07), transparent 28%);
  opacity:.9;
}
.aq-services-wrap{
  width:min(100% - 2rem, 1280px);
  margin-inline:auto;
  padding:5.5rem 0;
  position:relative;
  z-index:1;
}
.aq-services-head{
  width:min(100%, 1120px);
  margin-inline:auto;
  margin-bottom:2.5rem;
}
.aq-section-kicker{
  display:inline-flex;
  width:max-content;
  align-items:center;
  gap:.5rem;
  color:rgba(34,211,238,.95);
  font-size:.78rem;
  font-weight:600;
  border:1px solid rgba(34,211,238,.20);
  background:rgba(255,255,255,.035);
  padding:.45rem .85rem;
  border-radius:999px;
  margin-bottom:1rem;
}
.aq-services-head h2{
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  font-weight: 850;
  color: #f7fbff;
}
.aq-services-head p{
  margin-top: 1rem;
  color: rgba(200,212,234,.78);
  max-width: 760px;
  line-height: 1.9;
  font-size: 1.12rem;
}
.aq-service-stack{
  display:flex;
  flex-direction:column;
  gap:2.35rem;
  align-items:center;
}
.aq-service-card{
  width:min(100%, 1180px);
  min-height:430px;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 1px minmax(360px, .92fr);
  gap:3.25rem;
  align-items:center;
  border-radius:2.35rem;
  padding:3rem 3.4rem;
  background:
    radial-gradient(circle at 76% 16%, rgba(34,211,238,.21), transparent 35%),
    radial-gradient(circle at 20% 82%, rgba(96,165,250,.105), transparent 32%),
    linear-gradient(135deg, rgba(8,31,53,.82), rgba(3,12,24,.96));
  border:1px solid rgba(34,211,238,.38);
  box-shadow:
    0 34px 110px rgba(0,0,0,.40),
    0 0 70px rgba(34,211,238,.095),
    inset 0 1px 0 rgba(255,255,255,.075);
  isolation:isolate;
  transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.aq-service-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent, rgba(34,211,238,.05), transparent),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.035), transparent 60%);
  opacity:.9;
  pointer-events:none;
  z-index:-1;
}
.aq-service-card::after{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  left:50%;
  top:-220px;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(34,211,238,.14), transparent 64%);
  filter:blur(12px);
  opacity:.65;
  pointer-events:none;
  z-index:-1;
}
.aq-service-card:hover{
  transform:translateY(-6px);
  border-color:rgba(34,211,238,.58);
  box-shadow:
    0 44px 130px rgba(0,0,0,.48),
    0 0 90px rgba(34,211,238,.14),
    inset 0 1px 0 rgba(255,255,255,.10);
}
.aq-service-copy{
  position:relative;
  z-index:2;
}
.aq-service-pill{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  width:max-content;
  max-width:100%;
  color:rgba(34,211,238,.98);
  border:1px solid rgba(34,211,238,.28);
  background:rgba(2,15,28,.56);
  border-radius:999px;
  padding:.48rem .88rem;
  font-size:.82rem;
  font-weight:650;
  margin-bottom:1.35rem;
  box-shadow:0 0 28px rgba(34,211,238,.08);
}
.aq-service-pill svg{
  width:1.15rem;
  height:1.15rem;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.aq-service-copy h3{
  font-size: clamp(1.7rem, 2.2vw, 2.45rem);
  line-height: 1.15;
  letter-spacing: -.03em;
  color: #f7fbff;
  font-weight: 800;
  max-width: 720px;
}
.aq-service-copy p{
  font-size: 1.02rem;
  line-height: 1.9;
  color: rgba(214,224,238,.78);
}
.aq-service-desc{
  margin-top:.9rem;
  color:rgba(200,212,234,.84);
  font-size:1.08rem;
  line-height:1.9;
  max-width:620px;
}
.aq-feature-list{
  list-style:none;
  margin:1.65rem 0 0;
  padding:0;
  display:grid;
  gap:.92rem;
}
.aq-feature-list li{
  display:grid;
  grid-template-columns:3rem 1fr;
  gap:1rem;
  align-items:center;
  color:rgba(230,240,255,.90);
  line-height:1.7;
}
.aq-feature-list strong{
  font-size:1.02rem;
  font-weight:650;
  color:rgba(244,249,255,.96);
}
.aq-feature-icon{
  width:3rem;
  height:3rem;
  border-radius:.95rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(34,211,238,.98);
  background:
    radial-gradient(circle at 35% 25%, rgba(34,211,238,.26), transparent 48%),
    rgba(7,27,45,.86);
  border:1px solid rgba(34,211,238,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 24px rgba(0,0,0,.22),
    0 0 24px rgba(34,211,238,.07);
  font-family:Inter, system-ui, sans-serif;
  font-weight:700;
}
.aq-service-link{
  margin-top:1.85rem;
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  color:rgba(34,211,238,.98) !important;
  text-decoration:none !important;
  font-weight:750;
  letter-spacing:-.01em;
  position:relative;
  z-index:5;
}
.aq-service-link::before{
  content:"→";
  font-family:Inter, system-ui, sans-serif;
  font-size:1.55rem;
  line-height:1;
}
html[dir="rtl"] .aq-service-link::before{
  content:"←";
}
.aq-service-link::after{
  content:"";
  position:absolute;
  inset:auto 0 -.35rem 0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(34,211,238,.72), transparent);
  opacity:.75;
}
.aq-service-divider{
  width:1px;
  height:78%;
  background:linear-gradient(180deg, transparent, rgba(34,211,238,.24), transparent);
  box-shadow:0 0 18px rgba(34,211,238,.12);
}

/* Visual system */
.aq-service-visual{
  position:relative;
  min-height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.aq-glow-floor{
  position:absolute;
  bottom:15px;
  width:68%;
  height:48px;
  border-radius:999px;
  background:radial-gradient(ellipse, rgba(34,211,238,.28), transparent 68%);
  filter:blur(10px);
  opacity:.75;
}
.aq-monitor,
.aq-browser,
.aq-chat-window,
.aq-dashboard-screen,
.aq-phone-card,
.aq-design-board{
  position:relative;
  border:4px solid rgba(34,211,238,.78);
  background:
    radial-gradient(circle at 70% 18%, rgba(34,211,238,.12), transparent 40%),
    linear-gradient(180deg, rgba(13,53,83,.70), rgba(4,17,31,.92));
  box-shadow:
    0 0 28px rgba(34,211,238,.22),
    inset 0 0 22px rgba(34,211,238,.08);
}
.aq-monitor{
  width:320px;
  height:185px;
  border-radius:1.35rem;
}
.aq-monitor-top{
  position:absolute;
  inset:0 0 auto;
  height:44px;
  border-bottom:4px solid rgba(34,211,238,.62);
}
.aq-monitor-body{
  position:absolute;
  inset:72px 38px 30px;
}
.aq-line{
  display:block;
  height:14px;
  border:4px solid rgba(34,211,238,.76);
  border-radius:999px;
  margin-bottom:14px;
}
.aq-line.w1{ width:66%; }
.aq-line.w2{ width:92%; opacity:.7; }
.aq-cta-box{
  display:block;
  width:42%;
  height:38px;
  border-radius:.75rem;
  border:4px solid rgba(34,211,238,.82);
}
.aq-orbit-card,
.aq-system-node{
  position:absolute;
  width:86px;
  height:76px;
  border-radius:1.1rem;
  border:2px solid rgba(96,165,250,.34);
  background:rgba(8,28,48,.68);
  box-shadow:0 0 24px rgba(34,211,238,.12), inset 0 1px 0 rgba(255,255,255,.07);
}
.aq-orbit-top{ top:18px; left:80px; }
.aq-orbit-left{ bottom:44px; right:34px; }
.aq-orbit-card span,
.aq-system-node span{
  position:absolute;
  inset:18px 22px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(96,165,250,.95), rgba(34,211,238,.70));
  box-shadow:0 0 18px rgba(34,211,238,.26);
}
.aq-browser{
  width:330px;
  height:220px;
  border-radius:1.35rem;
}
.aq-browser-bar{
  height:48px;
  border-bottom:4px solid rgba(34,211,238,.60);
  display:flex;
  align-items:center;
  gap:.65rem;
  padding-inline:1.25rem;
}
.aq-browser-bar i{
  width:.7rem;
  height:.7rem;
  border-radius:50%;
  background:rgba(34,211,238,.66);
}
.aq-browser-grid{
  padding:1.4rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.aq-browser-grid span{
  min-height:54px;
  border:3px solid rgba(34,211,238,.48);
  border-radius:.85rem;
  background:rgba(34,211,238,.06);
}
.aq-floating-badge,
.aq-social-chip{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:1rem;
  color:rgba(230,240,255,.92);
  font-family:Inter, system-ui, sans-serif;
  font-weight:750;
  letter-spacing:.03em;
  background:rgba(8,28,48,.76);
  border:1px solid rgba(34,211,238,.28);
  box-shadow:0 0 24px rgba(34,211,238,.10), inset 0 1px 0 rgba(255,255,255,.08);
}
.aq-floating-badge{
  width:78px;
  height:48px;
  font-size:.85rem;
}
.badge-a{ top:28px; right:24px; }
.badge-b{ bottom:48px; left:12px; }
.aq-chat-window{
  width:310px;
  height:190px;
  border-radius:1.6rem;
  padding:2rem;
}
.aq-chat-window span{
  display:block;
  height:18px;
  border-radius:999px;
  background:rgba(34,211,238,.18);
  border:2px solid rgba(34,211,238,.45);
  margin-bottom:1rem;
}
.aq-chat-window span:nth-child(1){ width:82%; }
.aq-chat-window span:nth-child(2){ width:60%; }
.aq-chat-window span:nth-child(3){ width:72%; }
.aq-bot-dot{
  position:absolute;
  width:58px;
  height:58px;
  left:26px;
  bottom:22px;
  border-radius:1.1rem;
  background:radial-gradient(circle, rgba(34,211,238,.88), rgba(96,165,250,.62));
  box-shadow:0 0 28px rgba(34,211,238,.30);
}
.aq-node{
  position:absolute;
  width:18px;
  height:18px;
  border-radius:50%;
  background:rgba(34,211,238,.90);
  box-shadow:0 0 18px rgba(34,211,238,.55);
}
.aq-node.n1{ top:48px; right:70px; }
.aq-node.n2{ bottom:70px; right:42px; }
.aq-node.n3{ bottom:48px; left:74px; }
.aq-dashboard-screen{
  width:350px;
  height:230px;
  border-radius:1.35rem;
  display:grid;
  grid-template-columns:70px 1fr 98px;
  gap:1rem;
  padding:1.4rem;
}
.aq-screen-sidebar{
  border-radius:.9rem;
  background:rgba(34,211,238,.06);
  display:grid;
  align-content:center;
  gap:1rem;
  padding:.8rem;
}
.aq-screen-sidebar i{
  height:26px;
  border-radius:.45rem;
  background:linear-gradient(180deg, rgba(34,211,238,.75), rgba(96,165,250,.48));
}
.aq-screen-chart{
  border-radius:.9rem;
  background:rgba(34,211,238,.05);
  border:1px solid rgba(34,211,238,.16);
  display:flex;
  align-items:flex-end;
  gap:.8rem;
  padding:1rem;
}
.aq-screen-chart b{
  flex:1;
  border-radius:.4rem .4rem 0 0;
  background:linear-gradient(180deg, rgba(34,211,238,.80), rgba(96,165,250,.38));
}
.aq-screen-chart b:nth-child(1){ height:42%; }
.aq-screen-chart b:nth-child(2){ height:72%; }
.aq-screen-chart b:nth-child(3){ height:56%; }
.aq-screen-donut{
  width:88px;
  height:88px;
  margin:auto;
  border-radius:50%;
  background:conic-gradient(rgba(34,211,238,.92) 0 70%, rgba(34,211,238,.18) 70% 100%);
  position:relative;
}
.aq-screen-donut::after{
  content:"";
  position:absolute;
  inset:24px;
  border-radius:50%;
  background:#06182b;
}
.aq-system-node{
  width:72px;
  height:72px;
  z-index:3;
}
.aq-system-node span{ inset:18px; }
.node-db{ top:4px; right:58px; }
.node-users{ top:8px; left:38px; }
.node-pay{ top:116px; right:4px; }
.node-wa{ top:118px; left:-10px; }
.node-wifi{ bottom:4px; right:74px; }
.node-chart{ bottom:2px; left:56px; }
.aq-growth-chart{
  width:330px;
  height:220px;
  border-radius:1.35rem;
  border:3px solid rgba(34,211,238,.36);
  background:rgba(7,27,45,.50);
  display:flex;
  align-items:flex-end;
  gap:1.2rem;
  padding:2rem;
}
.aq-growth-chart i{
  flex:1;
  border-radius:.6rem .6rem 0 0;
  background:linear-gradient(180deg, rgba(34,211,238,.90), rgba(96,165,250,.42));
  box-shadow:0 0 22px rgba(34,211,238,.16);
}
.aq-growth-chart i:nth-child(1){ height:32%; }
.aq-growth-chart i:nth-child(2){ height:54%; }
.aq-growth-chart i:nth-child(3){ height:72%; }
.aq-growth-chart i:nth-child(4){ height:92%; }
.aq-phone-card{
  width:245px;
  height:300px;
  border-radius:2rem;
  padding:2rem;
}
.aq-phone-avatar{
  width:86px;
  height:86px;
  border-radius:50%;
  margin:0 auto 1.6rem;
  background:radial-gradient(circle, rgba(34,211,238,.85), rgba(96,165,250,.42));
  box-shadow:0 0 28px rgba(34,211,238,.22);
}
.aq-phone-card span{
  display:block;
  height:16px;
  border-radius:999px;
  background:rgba(34,211,238,.18);
  border:1px solid rgba(34,211,238,.34);
  margin-bottom:1rem;
}
.aq-social-chip{
  width:58px;
  height:58px;
  border-radius:1.15rem;
}
.aq-social-chip.c1{ top:24px; right:56px; }
.aq-social-chip.c2{ bottom:52px; right:30px; }
.aq-social-chip.c3{ bottom:44px; left:48px; }
.aq-design-board{
  width:330px;
  height:245px;
  border-radius:1.35rem;
  padding:1.6rem;
}
.aq-design-board span{
  position:absolute;
  border-radius:.85rem;
  background:rgba(34,211,238,.10);
  border:2px solid rgba(34,211,238,.38);
}
.aq-design-board .top{ top:28px; left:32px; right:32px; height:34px; }
.aq-design-board .one{ left:32px; top:92px; width:125px; height:86px; }
.aq-design-board .two{ right:32px; top:92px; width:125px; height:38px; }
.aq-design-board .three{ right:32px; top:144px; width:125px; height:38px; }
.aq-palette{
  position:absolute;
  display:flex;
  gap:.9rem;
  bottom:46px;
  right:64px;
}
.aq-palette i{
  width:24px;
  height:24px;
  border-radius:50%;
  background:rgba(34,211,238,.80);
  box-shadow:0 0 18px rgba(34,211,238,.20);
}
.aq-palette i:nth-child(2){ opacity:.58; }
.aq-palette i:nth-child(3){ opacity:.32; }
.aq-cursor-shape{
  position:absolute;
  left:58px;
  bottom:54px;
  width:0;
  height:0;
  border-left:32px solid rgba(34,211,238,.88);
  border-top:18px solid transparent;
  border-bottom:18px solid transparent;
  filter:drop-shadow(0 0 16px rgba(34,211,238,.30));
}

/* RTL/LTR visual order */
html[dir="rtl"] .aq-service-card{
  direction:rtl;
}
html[dir="rtl"] .aq-service-visual,
html[dir="ltr"] .aq-service-visual{
  direction:ltr;
}
html[dir="ltr"] .aq-service-link::before{
  content:"→";
}

/* Avoid old Tailwind service wrappers interfering */
#services .aq-service-card svg{
  max-width:none !important;
  color:currentColor !important;
  filter:none !important;
}

/* Responsive */
@media (max-width: 1023px){
  .aq-services-wrap{
    width:min(100% - 1.25rem, 760px);
    padding:4rem 0;
  }
  .aq-service-card{
    grid-template-columns:1fr;
    gap:2.2rem;
    min-height:auto;
    padding:2rem;
  }
  .aq-service-divider{
    width:100%;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(34,211,238,.24), transparent);
  }
  .aq-service-visual{
    min-height:260px;
  }
  .aq-service-copy h3{
    font-size:clamp(1.65rem, 6vw, 2.25rem);
  }
}
@media (max-width: 767px){
  header.sticky{
    border-radius:0 0 1.25rem 1.25rem !important;
  }
  .aq-services-wrap{
    padding:3rem 0;
  }
  .aq-services-head{
    margin-bottom:1.5rem;
  }
  .aq-services-head h2{
    font-size:2rem;
  }
  .aq-services-head p{
    font-size:.95rem;
    line-height:1.8;
  }
  .aq-service-stack{
    gap:1.35rem;
  }
  .aq-service-card{
    border-radius:1.55rem;
    padding:1.25rem;
  }
  .aq-feature-list li{
    grid-template-columns:2.55rem 1fr;
    gap:.75rem;
  }
  .aq-feature-icon{
    width:2.55rem;
    height:2.55rem;
    border-radius:.8rem;
  }
  .aq-feature-list strong,
  .aq-service-desc{
    font-size:.94rem;
  }
  .aq-service-pill{
    font-size:.75rem;
    padding:.42rem .72rem;
  }
}

/* Fix security card small labels */

#security .aq-note-label{
  position: static !important;

  display: inline-block !important;

  margin-bottom: 14px !important;

  font-size: .82rem !important;
  line-height: 1.2 !important;

  opacity: .8;
}
/* Fix security note cards only */

#security .grid > div{
  overflow: visible !important;
}

#security .grid > div > div{
  height: auto !important;
}

#security [class*="rounded"]{
  overflow: visible !important;
}

#security p,
#security li{
  line-height: 1.8 !important;
}
/* Fix security practices card clipping */

#security ul{
  margin-bottom: 0 !important;
}

#security li{
  font-size: .92rem !important;
  line-height: 1.65 !important;
  margin-bottom: .25rem !important;
}

#security .grid > div{
  height:auto !important;
  min-height:320px !important;
}
#security .grid{
  align-items:stretch;
}

#security .grid > div{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:2rem !important;
}
/* Security section sizing */

#security .grid{
  gap:1.25rem !important;
}
/* FIX SECURITY CARDS ALIGNMENT */

#security .grid{
  align-items: stretch !important;
  gap: 1.5rem !important;
  max-width: 1200px;
  margin: auto;
}

#security .grid > div{
  min-height: 280px !important;
  height: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;

  padding: 1.8rem !important;

  overflow: hidden !important;
}

#security h3{
  font-size: 1.15rem !important;
  line-height: 1.4 !important;
  margin-bottom: 1rem !important;
}

#security p,
#security li{
  font-size: .95rem !important;
  line-height: 1.9 !important;
}

#security h3{
  font-size:1.05rem !important;
  line-height:1.45 !important;
}

#security p,
#security li{
  font-size:.92rem !important;
  line-height:1.8 !important;
}
#security .grid{
  max-width:1200px;
  margin:auto;
}
/* FINAL security layout fix */

#security .max-w-6xl > .grid{
  align-items: stretch !important;
  gap: 1.25rem !important;
}

#security .max-w-6xl > .grid > div{
  height: auto !important;
  min-height: 250px !important;
  padding: 1.5rem !important;
  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

#security .max-w-6xl > .grid > div h3{
  font-size: 1.1rem !important;
  line-height: 1.45 !important;
  margin-bottom: .85rem !important;
}

#security .max-w-6xl > .grid > div p{
  font-size: .92rem !important;
  line-height: 1.85 !important;
}

#security .max-w-6xl > div:not(.grid){
  margin-top: 1.5rem !important;
}

#security .max-w-6xl > .grid{
  margin-top: 2.8rem !important;
  align-items: stretch !important;
  gap: 1.4rem !important;
}
/* Final unified section divider */

section[id]{
  position: relative !important;
  border-top: 0 !important;
}

section[id]::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.22) 15%,
    rgba(255,255,255,.42) 50%,
    rgba(255,255,255,.22) 85%,
    transparent 100%
  ) !important;

  box-shadow: 0 0 18px rgba(56,189,248,.12) !important;
  opacity: 1 !important;
  z-index: 30 !important;
  pointer-events: none !important;
}
section[id]{
  scroll-margin-top: 125px !important;
}
/* Compact premium stats cards */

.premium-stats{
  max-width: 980px;
  margin: 2rem auto 0;
  padding: .8rem;

  border-radius: 1.7rem;
  border: 1px solid rgba(96,165,250,.12);

  background: rgba(3,12,24,.38);

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
}

.premium-stat{
  position: relative;

  min-height: 170px;
  padding: 1.2rem .9rem;

  border-radius: 1.2rem;
  text-align: center;
  overflow: hidden;

  background:
    radial-gradient(circle at 50% 0%, rgba(56,189,248,.12), transparent 45%),
    linear-gradient(180deg, rgba(8,31,53,.92), rgba(4,14,28,.96));

  border: 1px solid rgba(56,189,248,.22);

  box-shadow:
    0 12px 32px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.03);

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.premium-stat:hover{
  transform: translateY(-3px);

  border-color: rgba(56,189,248,.38);

  box-shadow:
    0 18px 40px rgba(0,0,0,.28),
    0 0 18px rgba(56,189,248,.08);
}

.stat-icon{
  width: 44px;
  height: 44px;

  margin: 0 auto .8rem;

  border-radius: 999px;

  display: grid;
  place-items: center;

  font-size: 1rem;

  background: rgba(56,189,248,.05);

  border: 1px solid rgba(56,189,248,.20);

  box-shadow:
    0 0 18px rgba(56,189,248,.08);
}

.stat-number{
  font-size: clamp(1.7rem, 2.5vw, 2.7rem);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -.03em;
}

.stat-line{
  width: 28px;
  height: 3px;

  margin: .8rem auto;

  border-radius: 999px;

  background: #38bdf8;

  box-shadow:
    0 0 10px rgba(56,189,248,.38);
}

.premium-stat p{
  margin: 0;

  color: rgba(203,213,225,.78);

  font-size: .84rem;
  line-height: 1.5;
}

@media(max-width: 900px){

  .premium-stats{
    grid-template-columns: 1fr;
  }

  .premium-stat{
    min-height: 155px;
  }
}


/* Unified final section dividers */
section[id]{
  position: relative !important;
}

section[id]::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.14) 20%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.14) 80%, transparent 100%) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.hero-title{
  font-size: clamp(2rem, 7vw, 4.2rem);
  line-height: 1.18;
  max-width: 13ch;
}

html[lang="en"] .hero-title{
  max-width: 13ch;
  line-height: 1.1;
}

@media (max-width:640px){

  .hero-title{
    font-size: clamp(1.9rem, 9vw, 3rem);
    line-height: 1.22;
    letter-spacing:-0.03em;
  }

}
html[lang="en"] 
.hero-copy{
  text-align:left;
  align-items:flex-start;
}

html[lang="en"] .hero-actions{
  justify-content:flex-start;
}

html[lang="en"] .hero-stats{
  justify-items:start;
}

html[lang="en"] .hero-title{
  margin-left:0;
  margin-right:auto;
}
@media (max-width:640px){

  .hero-title{
    max-width:13ch !important;
    font-size: clamp(2rem, 8.4vw, 2.85rem) !important;
    line-height:1.18 !important;
    letter-spacing:-0.03em;
  }

  html[lang="ar"] .hero-title{
    margin-right:0 !important;
    margin-left:auto !important;
    text-align:right !important;
  }

  html[lang="ar"] .hero-title span{
    text-align:right !important;
  }

  html[lang="en"] .hero-title{
    margin-left:0 !important;
    margin-right:auto !important;
    text-align:left !important;
  }

  html[lang="en"] .hero-title span{
    text-align:left !important;
  }

}
@media (max-width:640px){

  html[lang="en"] .hero-title{
    margin-left:0 !important;
    margin-right:auto !important;

    text-align:left !important;
    align-items:flex-start !important;
  }

  html[lang="en"] .hero-title span{
    text-align:left !important;
  }

}



.aq-chip{
  padding:.45rem .8rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.support-card{
  position:relative;
  overflow:hidden;
  min-height:190px;
  padding:1.5rem;
  border-radius:1.85rem;
  background:
    radial-gradient(circle at 78% 18%, rgba(56,189,248,.12), transparent 34%),
    linear-gradient(135deg, rgba(8,30,50,.72), rgba(5,17,31,.92));
  border:1px solid rgba(96,165,250,.18);
  box-shadow:
    0 20px 60px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.support-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(34,211,238,.045), transparent);
  pointer-events:none;
}

.support-icon{
  width:46px;
  height:46px;
  border-radius:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1rem;
  background:rgba(56,189,248,.08);
  border:1px solid rgba(56,189,248,.20);
  box-shadow:0 0 22px rgba(56,189,248,.08);
}

.support-card h3{
  font-size:1.1rem;
  font-weight:700;
  color:#f7fbff;
}

.support-card p{
  margin-top:.65rem;
  font-size:.92rem;
  line-height:1.8;
  color:var(--muted2);
}
html {
    scroll-behavior: smooth;
  }

  section[id] {
    scroll-margin-top: 95px;
  }
select.form-field{
  appearance:auto;
  cursor:pointer;
}

select.form-field option{
  background:#0b1422;
  color:#eaf4ff;
  padding:12px;
}

select.form-field:focus{
  background:
    linear-gradient(135deg, rgba(34,211,238,.08), rgba(96,165,250,.06)),
    rgba(7,18,33,.95);
  box-shadow:
    0 0 0 1px rgba(34,211,238,.35),
    0 0 30px rgba(34,211,238,.12);
}

/* Budget select fix */
#fBudget{
  direction: rtl !important;
  text-align: right !important;
  text-align-last: right !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

#fBudget option{
  direction: rtl !important;
  text-align: right !important;
}
/* Aqua.Tech Services - premium reference style */

#services .aq-service-card{
  min-height:400px !important;
  padding:2.2rem 2.6rem !important;
  border-radius:2rem !important;
  grid-template-columns:minmax(0, 1fr) 1px 360px !important;
  gap:2.4rem !important;

  background:
    radial-gradient(circle at 70% 18%, rgba(56,189,248,.11), transparent 34%),
    linear-gradient(135deg, rgba(8,30,50,.92), rgba(3,10,22,.98)) !important;

  border:1px solid rgba(56,189,248,.34) !important;
  box-shadow:
    0 30px 80px rgba(0,0,0,.40),
    0 0 45px rgba(56,189,248,.10),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

#services .aq-service-visual{
  height:270px !important;
  min-height:270px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}

#services .aq-monitor,
#services .aq-browser,
#services .aq-chat-window,
#services .aq-dashboard-screen,
#services .aq-growth-chart,
#services .aq-design-board,
#services .aq-phone-card{
  transform:scale(.9) !important;
  filter:drop-shadow(0 0 22px rgba(56,189,248,.18)) !important;
}

#services .aq-orbit-card,
#services .aq-floating-badge,
#services .aq-social-chip,
#services .aq-system-node,
#services .aq-node{
  opacity:.55 !important;
  transform:scale(.78) !important;
}

#services .aq-service-copy h3{
  font-size:clamp(1.65rem, 2vw, 2.15rem) !important;
  line-height:1.3 !important;
}

#services .aq-service-desc{
  font-size:1rem !important;
  line-height:1.85 !important;
}

#services .aq-feature-list{
  gap:.85rem !important;
}
/* =========================================================
   Premium service visual - Landing page card
========================================================= */

#services .aq-premium-visual{
  position:relative !important;
  width:100% !important;
  height:280px !important;
  min-height:280px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  isolation:isolate !important;
}

#services .premium-browser{
  position:relative;
  width:390px;
  height:245px;
  border-radius:1.5rem;
  border:3px solid rgba(34,211,238,.72);
  background:
    radial-gradient(circle at 65% 18%, rgba(56,189,248,.14), transparent 42%),
    linear-gradient(180deg, rgba(9,43,68,.78), rgba(4,16,30,.96));
  box-shadow:
    0 0 22px rgba(34,211,238,.16),
    0 24px 70px rgba(0,0,0,.35),
    inset 0 0 28px rgba(56,189,248,.08);
  z-index:2;
}

#services .premium-browser-top{
  height:54px;
  border-bottom:4px solid rgba(34,211,238,.72);
  display:flex;
  align-items:center;
  gap:.65rem;
  padding-inline:1.5rem;
}

#services .premium-browser-top span{
  width:13px;
  height:13px;
  border-radius:999px;
  background:rgba(34,211,238,.82);
  box-shadow:0 0 12px rgba(34,211,238,.35);
}

#services .premium-browser-grid{
  height:calc(100% - 54px);
  padding:1.4rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.15rem;
}

#services .premium-browser-grid span{
  border-radius:1rem;
  border:3px solid rgba(34,211,238,.68);
  background:rgba(34,211,238,.045);
  box-shadow:inset 0 0 18px rgba(56,189,248,.04);
}

#services .premium-node{
  position:absolute;
  width:78px;
  height:58px;
  border-radius:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(5,20,38,.78);
  border:1px solid rgba(56,189,248,.26);
  box-shadow:
    0 0 24px rgba(34,211,238,.13),
    inset 0 1px 0 rgba(255,255,255,.08);
  color:rgba(230,240,255,.88);
  font-family:Inter, system-ui, sans-serif;
  font-size:.85rem;
  font-weight:800;
  letter-spacing:.04em;
  z-index:3;
}

#services .node-seo{
  top:12px;
  right:10px;
}

#services .node-cms{
  bottom:16px;
  left:22px;
}

#services .premium-visual-glow{
  position:absolute;
  bottom:4px;
  width:70%;
  height:58px;
  border-radius:999px;
  background:radial-gradient(ellipse, rgba(34,211,238,.28), transparent 70%);
  filter:blur(14px);
  opacity:.38;
  z-index:1;
}
#services .aq-premium-visual{
  transform:translateY(-8px);
}
#services .aq-service-copy{
  padding-inline-start:1rem;
}
#services .aq-service-card{
  position:relative;
}

#services .aq-service-card::before{
  content:"";
  position:absolute;
  top:12%;
  bottom:12%;
  left:50%;
  width:1px;

  background:linear-gradient(
    180deg,
    transparent,
    rgba(56,189,248,.04)
    transparent
  );

  transform:translateX(-50%);
}
#services .premium-browser{
  transform:scale(.95);
}
#services .aq-service-copy{
  max-width:560px;
}
#services .aq-premium-visual{
  padding-left:2rem;
}
/* =========================================================
   Premium service visual - Websites card
========================================================= */

#services .aq-visual-web{
  padding-left:2rem;
}

#services .premium-web-window{
  position:relative;
  width:390px;
  height:245px;
  border-radius:1.5rem;
  border:3px solid rgba(34,211,238,.72);
  background:
    radial-gradient(circle at 68% 18%, rgba(56,189,248,.13), transparent 42%),
    linear-gradient(180deg, rgba(9,43,68,.72), rgba(4,16,30,.96));
  box-shadow:
    0 0 22px rgba(34,211,238,.16),
    0 24px 70px rgba(0,0,0,.34),
    inset 0 0 28px rgba(56,189,248,.07);
  z-index:2;
}

#services .premium-web-top{
  height:52px;
  border-bottom:3px solid rgba(34,211,238,.68);
  display:flex;
  align-items:center;
  gap:.65rem;
  padding-inline:1.45rem;
}

#services .premium-web-top span{
  width:12px;
  height:12px;
  border-radius:999px;
  background:rgba(34,211,238,.78);
  box-shadow:0 0 12px rgba(34,211,238,.28);
}

#services .premium-web-layout{
  position:relative;
  height:calc(100% - 52px);
  padding:1.25rem;
  display:grid;
  grid-template-columns:1fr 1fr 78px;
  grid-template-rows:34px 1fr 1fr;
  gap:.85rem;
}

#services .web-hero-line{
  grid-column:1 / 4;
  border-radius:999px;
  border:2px solid rgba(34,211,238,.50);
  background:rgba(34,211,238,.06);
}

#services .web-card{
  border-radius:.85rem;
  border:2px solid rgba(34,211,238,.58);
  background:rgba(34,211,238,.045);
  box-shadow:inset 0 0 18px rgba(56,189,248,.04);
}

#services .web-card-lg{
  grid-row:2 / 4;
}

#services .web-side-panel{
  grid-column:3;
  grid-row:2 / 4;
  border-radius:.9rem;
  border:1px solid rgba(34,211,238,.24);
  background:rgba(34,211,238,.055);
  display:grid;
  align-content:center;
  gap:.65rem;
  padding:.7rem;
}

#services .web-side-panel i{
  height:22px;
  border-radius:.45rem;
  background:linear-gradient(180deg, rgba(34,211,238,.72), rgba(96,165,250,.38));
  box-shadow:0 0 14px rgba(34,211,238,.12);
}

#services .web-node-seo{
  top:16px;
  right:8px;
}

#services .web-node-cms{
  bottom:16px;
  left:18px;
}
#services .aq-feature-icon{
  width:3rem !important;
  height:3rem !important;
  min-width:3rem !important;
  border-radius:1rem !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#22d3ee !important;
  background:
    radial-gradient(circle at 50% 25%, rgba(56,189,248,.20), transparent 65%),
    linear-gradient(180deg, rgba(8,28,48,.92), rgba(5,16,30,.98)) !important;
  border:1px solid rgba(56,189,248,.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 18px rgba(56,189,248,.10) !important;
  font-size:1.15rem !important;
}