/* ============================================================
   AGEX ENGINEERING SERVICES — Flagship Design System v2
   Premium · Immersive · Motion-Driven · 2025-26
   ============================================================ */

/* ─── DESIGN TOKENS ─────────────────────────────────────── */
:root {
  --bg-deep:       #06060b;
  --bg-dark:       #0a0a12;
  --bg-darker:     #08080f;
  --bg-elevated:   #111119;
  --bg-surface:    #191926;
  --bg-card-dark:  #14141f;
  --bg-light:      #f4f4f8;
  --bg-light-alt:  #eaeaf0;
  --bg-white:      #ffffff;

  --accent:            #5e6eff;
  --accent-bright:     #8090ff;
  --accent-dim:        #4450cc;
  --accent-glow:       rgba(94,110,255,0.15);
  --accent-glow-md:    rgba(94,110,255,0.25);
  --accent-glow-strong:rgba(94,110,255,0.40);

  --text-white:    #ffffff;
  --text-light:    #c8c8d8;
  --text-muted:    #7e7e98;
  --text-dark:     #111125;
  --text-dark-sec: #4e4e68;
  --text-on-accent:#ffffff;

  --border-dark:   rgba(255,255,255,0.06);
  --border-dark-md:rgba(255,255,255,0.10);
  --border-light:  rgba(17,17,37,0.07);
  --border-accent: rgba(94,110,255,0.22);

  --shadow-xs:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-sm:  0 2px 10px rgba(0,0,0,0.10);
  --shadow-md:  0 8px 30px rgba(0,0,0,0.14);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.20);
  --shadow-xl:  0 32px 80px rgba(0,0,0,0.28);
  --shadow-glow:0 0 60px rgba(94,110,255,0.10);
  --shadow-glow-md:0 0 80px rgba(94,110,255,0.18);

  --nav-top:       rgba(6,6,11,0.15);
  --nav-scrolled:  rgba(10,10,18,0.88);
  --nav-blur:      saturate(180%) blur(24px);

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full:50%;

  --ease-out-expo:  cubic-bezier(0.16,1,0.3,1);
  --ease-out-quart: cubic-bezier(0.25,1,0.5,1);
  --ease-out-back:  cubic-bezier(0.34,1.56,0.64,1);
  --tr-fast: 0.3s var(--ease-out-expo);
  --tr-med:  0.55s var(--ease-out-expo);
  --tr-slow: 0.85s var(--ease-out-expo);

  --font-primary: 'Inter',system-ui,-apple-system,sans-serif;
  --font-display: 'Syne','Inter',sans-serif;
  --font-mono:    'JetBrains Mono','Fira Code',monospace;

  --fs-display: clamp(3.2rem,7.5vw,7rem);
  --fs-h1:      clamp(2.4rem,5vw,4.2rem);
  --fs-h2:      clamp(1.9rem,3.8vw,3.2rem);
  --fs-h3:      clamp(1.4rem,2.2vw,1.85rem);
  --fs-h4:      clamp(1.15rem,1.6vw,1.4rem);
  --fs-body-lg: 1.1875rem;
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-xxs:     0.75rem;

  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-normal:  1.6;
  --lh-relaxed: 1.78;

  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6.5rem;
  --space-3xl: 10rem;
  --space-4xl: 14rem;

  --container:      1280px;
  --container-wide: 1440px;
  --container-narrow:860px;
}

/* ─── RESET ─────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--font-primary);font-size:var(--fs-body);line-height:var(--lh-normal);color:var(--text-dark);background:var(--bg-white);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color var(--tr-fast)}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul,ol{list-style:none}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

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

/* ─── LAYOUT ────────────────────────────────────────────── */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
.container--wide{max-width:var(--container-wide)}
.container--narrow{max-width:var(--container-narrow)}

/* ─── TYPOGRAPHY ────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;line-height:var(--lh-tight);letter-spacing:-0.025em}

.display-hero{font-size:var(--fs-display);font-weight:800;line-height:1.04;letter-spacing:-0.035em}
.display-h1{font-size:var(--fs-h1)}
.display-h2{font-size:var(--fs-h2)}
.display-h3{font-size:var(--fs-h3)}
.display-h4{font-size:var(--fs-h4)}
.text-body{font-size:var(--fs-body);line-height:var(--lh-normal)}
.text-body-lg{font-size:var(--fs-body-lg);line-height:var(--lh-relaxed)}
.text-sm{font-size:var(--fs-sm)}
.text-xs{font-size:var(--fs-xs)}
.text-xxs{font-size:var(--fs-xxs)}
.text-mono{font-family:var(--font-mono)}

.text-gradient{
  background:linear-gradient(135deg,var(--accent-bright),var(--accent),var(--accent-dim));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.label{
  font-size:var(--fs-xxs);font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--accent);display:inline-flex;align-items:center;gap:0.5rem;
}
.label::before{content:'';width:20px;height:1.5px;background:var(--accent);border-radius:1px}
.label--light{color:var(--accent-bright)}
.label--light::before{background:var(--accent-bright)}

/* Split text helper */
.split-parent{overflow:hidden;display:inline-block}
.split-child{display:inline-block;will-change:transform}

/* ─── BUTTONS ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:0.55rem;
  padding:0.9rem 2.1rem;font-family:var(--font-primary);font-size:var(--fs-sm);
  font-weight:600;letter-spacing:0.015em;border-radius:var(--radius-md);
  transition:all var(--tr-fast);position:relative;overflow:hidden;white-space:nowrap;
}
.btn::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,0.12),transparent);
  opacity:0;transition:opacity var(--tr-fast);
}
.btn:hover::before{opacity:1}

.btn--primary{background:var(--accent);color:#fff;box-shadow:0 4px 24px rgba(94,110,255,0.30)}
.btn--primary:hover{background:var(--accent-bright);box-shadow:0 8px 36px rgba(94,110,255,0.40);transform:translateY(-3px)}

.btn--secondary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.18)}
.btn--secondary:hover{border-color:var(--accent);color:var(--accent-bright);background:rgba(94,110,255,0.06);transform:translateY(-3px)}

.btn--dark{background:var(--bg-deep);color:#fff;border:1px solid var(--border-dark-md)}
.btn--dark:hover{border-color:var(--accent);transform:translateY(-3px)}

.btn--outline{background:transparent;color:var(--text-dark);border:1.5px solid rgba(17,17,37,0.12)}
.btn--outline:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}

.btn--ghost{background:transparent;color:var(--accent);padding:0.5rem 0;border-radius:0}
.btn--ghost:hover{color:var(--accent-bright)}
.btn--ghost::before{display:none}

.btn--lg{padding:1.1rem 2.6rem;font-size:var(--fs-body);border-radius:var(--radius-lg)}
.btn--sm{padding:0.6rem 1.5rem;font-size:var(--fs-xs)}

.btn .btn-arrow{transition:transform var(--tr-fast);font-size:1.1em}
.btn:hover .btn-arrow{transform:translateX(5px)}

/* ─── NAVBAR ────────────────────────────────────────────── */
.navbar{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  padding:1.35rem 0;transition:all 0.55s var(--ease-out-expo);
  background:var(--nav-top);
}
.navbar.scrolled{
  background:var(--nav-scrolled);
  -webkit-backdrop-filter:var(--nav-blur);backdrop-filter:var(--nav-blur);
  padding:0.7rem 0;border-bottom:1px solid var(--border-dark);
  box-shadow:0 4px 40px rgba(0,0,0,0.25);
}
.navbar__inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:var(--container-wide);margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem);
}
.navbar__logo{display:flex;align-items:center;gap:0.7rem;z-index:1001}
.navbar__logo img{height:34px;width:auto;filter:brightness(0) invert(1);transition:all var(--tr-fast)}
.navbar.scrolled .navbar__logo img{height:28px}
.navbar__logo-text{
  font-family:var(--font-display);font-size:1rem;font-weight:700;color:#fff;letter-spacing:-0.01em;
}
.navbar__logo-text span{color:var(--accent-bright)}
.navbar__nav{display:flex;align-items:center;gap:2rem}
.navbar__link{
  font-size:var(--fs-sm);font-weight:500;color:rgba(255,255,255,0.65);
  transition:color var(--tr-fast);position:relative;padding:0.25rem 0;
}
.navbar__link::after{
  content:'';position:absolute;bottom:0;left:0;width:0;height:1.5px;
  background:var(--accent);border-radius:1px;transition:width var(--tr-fast);
}
.navbar__link:hover,.navbar__link.active{color:#fff}
.navbar__link:hover::after,.navbar__link.active::after{width:100%}
.navbar__cta{margin-left:0.5rem}

.navbar__toggle{display:none;flex-direction:column;gap:5px;width:26px;z-index:1001;padding:4px 0}
.navbar__toggle span{display:block;width:100%;height:1.5px;background:#fff;border-radius:2px;transition:all .4s var(--ease-out-expo);transform-origin:center}
.navbar__toggle.active span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.navbar__toggle.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.navbar__toggle.active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.navbar__mobile{
  position:fixed;top:0;right:-100%;width:100%;height:100dvh;
  background:var(--bg-deep);z-index:999;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.8rem;
  transition:right .6s var(--ease-out-expo);
}
.navbar__mobile.open{right:0}
.navbar__mobile a{
  font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:#fff;
  opacity:0;transform:translateY(24px);transition:opacity .45s ease,transform .45s ease,color .25s ease;
}
.navbar__mobile.open a{opacity:1;transform:translateY(0)}
.navbar__mobile a:hover{color:var(--accent-bright)}
.navbar__mobile a:nth-child(1){transition-delay:.08s}
.navbar__mobile a:nth-child(2){transition-delay:.13s}
.navbar__mobile a:nth-child(3){transition-delay:.18s}
.navbar__mobile a:nth-child(4){transition-delay:.23s}
.navbar__mobile a:nth-child(5){transition-delay:.28s}
.navbar__mobile a:nth-child(6){transition-delay:.33s}

@media(max-width:960px){
  .navbar__nav{display:none}
  .navbar__toggle{display:flex}
}

/* ─── PAGE LOADER ───────────────────────────────────────── */
.page-loader{position:fixed;inset:0;z-index:9999;background:var(--bg-deep);display:flex;align-items:center;justify-content:center;pointer-events:none}
.page-loader__inner{width:36px;height:36px;border:2px solid var(--border-dark);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─── HERO ──────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100vh;min-height:100dvh;
  display:flex;align-items:center;background:var(--bg-deep);overflow:hidden;
}
.hero__canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.hero__gradient{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 20% 50%,rgba(6,6,11,0.85),transparent),
    radial-gradient(ellipse 50% 50% at 80% 30%,rgba(94,110,255,0.06),transparent),
    linear-gradient(to bottom,transparent 70%,var(--bg-deep) 100%);
}
.hero__content{position:relative;z-index:3;padding:10rem 0 5rem;width:100%;max-width:860px}
.hero__label-wrap{margin-bottom:2rem;opacity:0;transform:translateY(16px)}
.hero__badge{
  display:inline-flex;align-items:center;gap:0.55rem;
  padding:0.45rem 1.1rem;background:rgba(94,110,255,0.08);
  border:1px solid rgba(94,110,255,0.18);border-radius:var(--radius-xl);
}
.hero__badge .pulse-dot{
  width:7px;height:7px;background:var(--accent);border-radius:50%;
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.6)}}

.hero__title{color:#fff;margin-bottom:1.5rem}
.hero__title .line{display:block;overflow:hidden;padding-bottom:0.08em}
.hero__title .word{display:inline-block;transform:translateY(110%);will-change:transform}
.hero__title .accent-word{color:var(--accent-bright)}

.hero__sub{
  font-size:var(--fs-body-lg);line-height:var(--lh-relaxed);color:var(--text-light);
  margin-bottom:2rem;opacity:0;transform:translateY(24px);max-width:600px;
}
.hero__chips{display:flex;flex-wrap:wrap;gap:0.45rem;margin-bottom:2.5rem;opacity:0;transform:translateY(20px)}
.hero__chip{
  padding:0.35rem 0.8rem;background:rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.07);border-radius:var(--radius-xl);
  font-size:var(--fs-xxs);color:var(--text-muted);font-weight:500;
  letter-spacing:0.02em;transition:all var(--tr-fast);
}
.hero__chip:hover{border-color:rgba(94,110,255,0.3);color:var(--accent-bright);background:rgba(94,110,255,0.06)}

.hero__actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:3.5rem;opacity:0;transform:translateY(20px)}
.hero__proof{
  padding-top:2rem;border-top:1px solid rgba(255,255,255,0.06);
  opacity:0;transform:translateY(16px);
}
.hero__proof p{font-size:var(--fs-sm);color:var(--text-muted);line-height:var(--lh-normal);max-width:540px}

.hero__scroll{
  position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:0.5rem;opacity:0;
}
.hero__scroll span{font-size:var(--fs-xxs);color:var(--text-muted);letter-spacing:0.12em;text-transform:uppercase}
.hero__scroll-bar{width:1px;height:44px;background:linear-gradient(to bottom,var(--accent),transparent);animation:scrollPulse 2.2s ease-in-out infinite}
@keyframes scrollPulse{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ─── SECTIONS ──────────────────────────────────────────── */
.section{padding:var(--space-3xl) 0;position:relative;overflow:hidden}
.section--dark{background:var(--bg-deep);color:#fff}
.section--darker{background:var(--bg-darker);color:#fff}
.section--elevated{background:var(--bg-dark);color:#fff}
.section--light{background:var(--bg-light);color:var(--text-dark)}
.section--white{background:var(--bg-white);color:var(--text-dark)}

.section__header{max-width:700px;margin-bottom:var(--space-xl)}
.section__header--center{text-align:center;margin-left:auto;margin-right:auto}
.section__header .label{margin-bottom:1rem}
.section__header h2{margin-bottom:1rem}
.section__header p{font-size:var(--fs-body-lg);line-height:var(--lh-relaxed);color:var(--text-dark-sec)}
.section--dark .section__header p,
.section--darker .section__header p,
.section--elevated .section__header p{color:var(--text-light)}

/* Section atmospheric overlays */
.section__glow{
  position:absolute;pointer-events:none;border-radius:50%;
  filter:blur(120px);opacity:0.5;
}

/* ─── REVEAL ────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(50px)}
.reveal--left{opacity:0;transform:translateX(-50px)}
.reveal--right{opacity:0;transform:translateX(50px)}
.reveal--scale{opacity:0;transform:scale(0.9)}
.reveal--up{opacity:0;transform:translateY(60px)}

/* ─── CAPABILITIES ──────────────────────────────────────── */
.capabilities{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}

.cap-card{
  padding:2.25rem 2rem;background:var(--bg-card-dark);
  border:1px solid var(--border-dark);border-radius:var(--radius-lg);
  transition:all var(--tr-fast);position:relative;overflow:hidden;
}
.cap-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0;transition:opacity var(--tr-fast);
}
.cap-card::after{
  content:'';position:absolute;top:-40%;left:-40%;width:180%;height:180%;
  background:radial-gradient(circle,rgba(94,110,255,0.04),transparent 60%);
  opacity:0;transition:opacity var(--tr-med);
}
.cap-card:hover{border-color:var(--border-accent);transform:translateY(-6px);box-shadow:var(--shadow-glow)}
.cap-card:hover::before{opacity:1}
.cap-card:hover::after{opacity:1}

.cap-card__icon{
  width:50px;height:50px;display:flex;align-items:center;justify-content:center;
  background:rgba(94,110,255,0.08);border:1px solid rgba(94,110,255,0.12);
  border-radius:var(--radius-md);margin-bottom:1.35rem;color:var(--accent-bright);
  transition:all var(--tr-fast);position:relative;z-index:1;
}
.cap-card:hover .cap-card__icon{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 20px rgba(94,110,255,0.35)}
.cap-card h4{color:#fff;margin-bottom:0.6rem;font-size:var(--fs-h4);position:relative;z-index:1}
.cap-card p{color:var(--text-muted);font-size:var(--fs-sm);line-height:var(--lh-normal);position:relative;z-index:1}

/* Light variant */
.cap-card--light{background:var(--bg-white);border-color:var(--border-light)}
.cap-card--light h4{color:var(--text-dark)}
.cap-card--light p{color:var(--text-dark-sec)}

/* ─── SERVICES ──────────────────────────────────────────── */

/* Sticky service browser (homepage) */
.services-browser{display:grid;grid-template-columns:340px 1fr;gap:3rem;min-height:600px}
.services-browser__nav{display:flex;flex-direction:column;gap:0.5rem;position:sticky;top:120px;align-self:start}
.services-browser__tab{
  padding:1.1rem 1.5rem;border-radius:var(--radius-md);
  font-size:var(--fs-sm);font-weight:600;color:var(--text-dark-sec);
  text-align:left;transition:all var(--tr-fast);cursor:pointer;
  border:1px solid transparent;position:relative;
}
.services-browser__tab::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:0;background:var(--accent);border-radius:2px;
  transition:height var(--tr-fast);
}
.services-browser__tab:hover{background:var(--bg-light);color:var(--text-dark)}
.services-browser__tab.active{background:var(--bg-light);color:var(--accent);border-color:var(--border-accent)}
.services-browser__tab.active::before{height:60%}
.services-browser__tab .tab-num{
  font-family:var(--font-mono);font-size:var(--fs-xxs);color:var(--accent);display:block;margin-bottom:0.2rem;
}

.services-browser__panel{opacity:0;display:none;animation:none}
.services-browser__panel.active{display:block;opacity:1;animation:panelIn .5s var(--ease-out-expo)}
@keyframes panelIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.service-panel{padding:2.5rem;background:var(--bg-light);border-radius:var(--radius-xl);border:1px solid var(--border-light)}
.service-panel__eyebrow{font-family:var(--font-mono);font-size:var(--fs-xxs);color:var(--accent);font-weight:600;margin-bottom:0.75rem}
.service-panel h3{font-size:var(--fs-h2);margin-bottom:0.5rem}
.service-panel__pitch{font-size:var(--fs-body);font-weight:600;color:var(--accent);margin-bottom:1.25rem}
.service-panel p{color:var(--text-dark-sec);line-height:var(--lh-relaxed);margin-bottom:1.5rem}
.service-panel__tags{display:flex;flex-wrap:wrap;gap:0.45rem;margin-bottom:1.75rem}
.service-panel__tag{
  padding:0.35rem 0.85rem;background:rgba(94,110,255,0.07);
  border:1px solid rgba(94,110,255,0.14);border-radius:var(--radius-xl);
  font-size:var(--fs-xxs);font-weight:600;color:var(--accent);
}

/* Services grid (services page) */
.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}

.svc-card{
  padding:2.5rem;background:var(--bg-white);border:1px solid var(--border-light);
  border-radius:var(--radius-lg);transition:all var(--tr-fast);position:relative;overflow:hidden;
}
.svc-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-bright));
  transform:scaleX(0);transform-origin:left;transition:transform var(--tr-fast);
}
.svc-card:hover{border-color:var(--border-accent);box-shadow:var(--shadow-md),var(--shadow-glow);transform:translateY(-8px)}
.svc-card:hover::after{transform:scaleX(1)}
.svc-card__num{font-family:var(--font-mono);font-size:var(--fs-xxs);color:var(--accent);font-weight:600;margin-bottom:1rem}
.svc-card__icon{
  width:54px;height:54px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(94,110,255,0.08),rgba(94,110,255,0.03));
  border:1px solid rgba(94,110,255,0.12);border-radius:var(--radius-md);
  margin-bottom:1.25rem;transition:all var(--tr-fast);
}
.svc-card:hover .svc-card__icon{background:var(--accent);border-color:var(--accent);box-shadow:0 4px 20px rgba(94,110,255,0.3)}
.svc-card:hover .svc-card__icon svg{stroke:#fff}
.svc-card h3{font-size:var(--fs-h4);color:var(--text-dark);margin-bottom:0.45rem}
.svc-card__pitch{font-size:var(--fs-sm);font-weight:600;color:var(--accent);margin-bottom:0.85rem}
.svc-card p{color:var(--text-dark-sec);font-size:var(--fs-sm);line-height:var(--lh-normal);margin-bottom:1.25rem}
.svc-card__link{
  font-size:var(--fs-sm);font-weight:600;color:var(--accent);
  display:inline-flex;align-items:center;gap:0.35rem;transition:gap var(--tr-fast);
}
.svc-card:hover .svc-card__link{gap:0.65rem}

/* Service detail (services page) */
.service-detail{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
  padding:4rem 0;border-bottom:1px solid var(--border-light);
}
.service-detail:last-child{border-bottom:none}
.service-detail:nth-child(even){direction:rtl}
.service-detail:nth-child(even)>*{direction:ltr}
.service-detail__visual{
  background:linear-gradient(135deg,var(--bg-light),var(--bg-light-alt));
  border-radius:var(--radius-xl);padding:3.5rem;
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;position:relative;overflow:hidden;
}
.service-detail__visual::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 40%,rgba(94,110,255,0.10),transparent 60%);
}
.service-detail__content h3{font-size:var(--fs-h2);margin-bottom:0.5rem}
.service-detail__pitch{font-size:var(--fs-body);font-weight:600;color:var(--accent);margin-bottom:1rem}
.service-detail__content>p{color:var(--text-dark-sec);line-height:var(--lh-relaxed);margin-bottom:1.5rem}
.service-detail__includes h5{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.75rem}
.service-detail__includes ul{display:flex;flex-wrap:wrap;gap:0.45rem}
.service-detail__includes li{
  padding:0.35rem 0.85rem;background:rgba(94,110,255,0.07);
  border-radius:var(--radius-xl);font-size:var(--fs-xxs);font-weight:600;color:var(--accent);
}

/* ─── PROJECTS ──────────────────────────────────────────── */
.project-showcase{display:flex;flex-direction:column;gap:0}

.project-panel{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
  padding:5rem 0;border-bottom:1px solid var(--border-light);
  position:relative;
}
.project-panel:last-child{border-bottom:none}
.project-panel:nth-child(even){direction:rtl}
.project-panel:nth-child(even)>*{direction:ltr}

.project-panel__visual{
  aspect-ratio:4/3;border-radius:var(--radius-xl);
  display:flex;align-items:center;justify-content:center;
  padding:3rem;position:relative;overflow:hidden;
  background:linear-gradient(145deg,#ecedf4,#e2e3ec);
  transition:all var(--tr-med);
}
.project-panel__visual::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 40%,rgba(94,110,255,0.08),transparent 55%);
  opacity:0;transition:opacity var(--tr-med);
}
.project-panel:hover .project-panel__visual::before{opacity:1}
.project-panel__visual img{
  max-width:60%;max-height:55%;object-fit:contain;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,0.10));
  transition:transform var(--tr-med);
}
.project-panel:hover .project-panel__visual img{transform:scale(1.06)}

.project-panel__content{padding:1rem 0}
.project-panel__cat{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-size:var(--fs-xxs);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--accent);margin-bottom:0.85rem;
}
.project-panel__cat::before{content:'';width:12px;height:1.5px;background:var(--accent);border-radius:1px}
.project-panel__content h3{font-size:var(--fs-h2);margin-bottom:1rem}
.project-panel__content>p{color:var(--text-dark-sec);line-height:var(--lh-relaxed);margin-bottom:1.5rem}

.project-panel__chips{display:flex;flex-wrap:wrap;gap:0.45rem;margin-bottom:2rem}
.project-panel__chip{
  padding:0.38rem 0.85rem;background:rgba(94,110,255,0.06);
  border:1px solid rgba(94,110,255,0.12);border-radius:var(--radius-xl);
  font-size:var(--fs-xxs);font-weight:600;color:var(--accent);
}
.project-panel__buttons{display:flex;gap:0.75rem;flex-wrap:wrap}

/* Dark variant */
.section--dark .project-panel{border-color:var(--border-dark)}
.section--dark .project-panel__content h3{color:#fff}
.section--dark .project-panel__content>p{color:var(--text-light)}
.section--dark .project-panel__visual{background:linear-gradient(145deg,#e8e8f0,#dddde8)}
.section--dark .project-panel__chip{background:rgba(94,110,255,0.10);border-color:rgba(94,110,255,0.18);color:var(--accent-bright)}
.section--dark .btn--outline{color:var(--text-light);border-color:rgba(255,255,255,0.15)}
.section--dark .btn--outline:hover{border-color:var(--accent);color:var(--accent-bright);background:rgba(94,110,255,0.06)}

/* ─── TRUST / WHY ───────────────────────────────────────── */
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.25rem}

.trust-card{
  padding:2.25rem;
  background:linear-gradient(180deg,#ffffff 0%,#f7f8fc 100%);
  border:1px solid rgba(17,17,37,0.14);
  border-radius:var(--radius-lg);position:relative;transition:all var(--tr-fast);overflow:hidden;
  box-shadow:0 10px 30px rgba(10,10,18,0.08);
}
.trust-card::before{
  content:'';position:absolute;top:0;left:0;width:3px;height:0;
  background:var(--accent);transition:height var(--tr-med);border-radius:0 2px 2px 0;
}
.trust-card::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at top right,rgba(94,110,255,0.10),transparent 45%);
  pointer-events:none;opacity:0.9;
}
.trust-card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(10,10,18,0.12),var(--shadow-glow);border-color:var(--border-accent)}
.trust-card:hover::before{height:100%}

.trust-card__num{
  font-family:var(--font-display);font-size:2.8rem;font-weight:800;
  line-height:1;margin-bottom:0.8rem;
  color:var(--accent);opacity:0.22;position:relative;z-index:1;
}
.trust-card h4{font-size:var(--fs-h4);margin-bottom:0.5rem;color:var(--text-dark);position:relative;z-index:1}
.trust-card p{color:var(--text-dark-sec);font-size:var(--fs-sm);line-height:var(--lh-normal);position:relative;z-index:1}

/* ─── PROCESS ───────────────────────────────────────────── */
.process-track{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;position:relative}
.process-track::before{
  content:'';position:absolute;top:44px;left:calc(12.5% + 1rem);right:calc(12.5% + 1rem);
  height:2px;background:linear-gradient(90deg,var(--accent-glow),var(--accent),var(--accent-glow));
}
.process-step{text-align:center;position:relative}
.process-step__dot{
  width:56px;height:56px;border-radius:50%;background:var(--bg-deep);
  border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.5rem;font-family:var(--font-display);font-weight:700;
  color:var(--accent-bright);font-size:1.1rem;position:relative;z-index:2;
  transition:all var(--tr-fast);
}
.process-step:hover .process-step__dot{background:var(--accent);color:#fff;box-shadow:0 0 36px rgba(94,110,255,0.45)}
.process-step h4{color:#fff;margin-bottom:0.5rem;font-size:var(--fs-h4)}
.process-step p{color:var(--text-muted);font-size:var(--fs-sm);line-height:var(--lh-normal);max-width:240px;margin:0 auto}

@media(max-width:768px){
  .process-track{grid-template-columns:1fr;gap:2.5rem;padding-left:3.5rem}
  .process-track::before{top:0;bottom:0;left:28px;right:auto;width:2px;height:auto}
  .process-step{text-align:left}
  .process-step__dot{position:absolute;left:-3.5rem;top:0;width:40px;height:40px;font-size:.9rem;margin:0}
  .process-step p{max-width:100%}
}

/* ─── CTA SECTION ────────────────────────────────────────── */
.cta-block{position:relative;text-align:center;overflow:hidden;padding:var(--space-3xl) 0}
.cta-block__glow{
  position:absolute;top:-40%;left:50%;transform:translateX(-50%);
  width:900px;height:900px;
  background:radial-gradient(circle,rgba(94,110,255,0.14) 0%,transparent 60%);
  pointer-events:none;
}
.cta-block h2{position:relative;max-width:720px;margin:0 auto 1.25rem}
.cta-block p{position:relative;max-width:580px;margin:0 auto 2.5rem;color:var(--text-light);font-size:var(--fs-body-lg);line-height:var(--lh-relaxed)}
.cta-block__actions{position:relative;display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}

/* ─── CONTACT ───────────────────────────────────────────── */
.contact-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:4.5rem;align-items:start}
.contact-info{position:sticky;top:120px}
.contact-info h3{font-size:var(--fs-h2);margin-bottom:1rem}
.contact-info>p{color:var(--text-dark-sec);font-size:var(--fs-body-lg);line-height:var(--lh-relaxed);margin-bottom:2.5rem}

.contact-card{
  display:flex;align-items:center;gap:1rem;padding:1.25rem 1.5rem;
  background:var(--bg-light);border-radius:var(--radius-lg);margin-bottom:1rem;
  border:1px solid transparent;transition:all var(--tr-fast);
}
.contact-card:hover{border-color:var(--border-accent);box-shadow:var(--shadow-sm)}
.contact-card__icon{
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:var(--accent);border-radius:var(--radius-md);color:#fff;flex-shrink:0;
}
.contact-card__text .text-sm{color:var(--text-dark-sec);display:block;margin-bottom:0.15rem}
.contact-card__text a,.contact-card__text span{font-weight:600;color:var(--text-dark)}

.contact-form{
  background:var(--bg-white);border:1px solid var(--border-light);
  border-radius:var(--radius-xl);padding:3rem;box-shadow:var(--shadow-md);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.form-group{display:flex;flex-direction:column;gap:0.4rem}
.form-group--full{grid-column:1/-1}
.form-group label{font-size:var(--fs-sm);font-weight:600;color:var(--text-dark)}
.form-group input,.form-group select,.form-group textarea{
  padding:0.9rem 1.1rem;font-family:var(--font-primary);font-size:var(--fs-body);
  color:var(--text-dark);background:var(--bg-light);border:1.5px solid transparent;
  border-radius:var(--radius-md);transition:all var(--tr-fast);outline:none;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px var(--accent-glow);
}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-muted)}
.form-group textarea{min-height:150px;resize:vertical}
.form-group select{
  appearance:none;cursor:pointer;padding-right:2.5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%237e7e98' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;
}
.form-submit{margin-top:1.5rem}
.form-submit .btn{width:100%;justify-content:center;padding:1rem 2rem}

.form-message{margin-top:1rem;padding:0.85rem 1.25rem;border-radius:var(--radius-md);font-size:var(--fs-sm);font-weight:500;display:none}
.form-message.success{display:block;background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.18);color:#16a34a}
.form-message.error{display:block;background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.18);color:#dc2626}

.expectations{margin-top:2.5rem;padding:2rem;background:var(--bg-light);border-radius:var(--radius-lg)}
.expectations h5{font-size:var(--fs-sm);font-weight:700;margin-bottom:1rem}
.expectations li{display:flex;align-items:baseline;gap:0.5rem;padding:0.35rem 0;font-size:var(--fs-sm);color:var(--text-dark-sec)}
.expectations li::before{content:'→';color:var(--accent);font-weight:700;flex-shrink:0}

/* ─── PAGE HERO ─────────────────────────────────────────── */
.page-hero{
  padding:11rem 0 5rem;background:var(--bg-deep);position:relative;overflow:hidden;
}
.page-hero::before{
  content:'';position:absolute;top:0;right:-10%;width:60%;height:120%;
  background:radial-gradient(ellipse at 70% 40%,rgba(94,110,255,0.06),transparent 55%);
  pointer-events:none;
}
.page-hero::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:120px;
  background:linear-gradient(to bottom,transparent,var(--bg-deep));pointer-events:none;
}
.page-hero .label{margin-bottom:1.25rem}
.page-hero h1{color:#fff;max-width:780px;margin-bottom:1.25rem}
.page-hero p{color:var(--text-light);max-width:620px;font-size:var(--fs-body-lg);line-height:var(--lh-relaxed)}

/* ─── ABOUT ─────────────────────────────────────────────── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center}
.about-grid__visual{
  background:linear-gradient(145deg,var(--bg-deep),var(--bg-dark));
  border-radius:var(--radius-xl);padding:4rem;
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;position:relative;overflow:hidden;
}
.about-grid__visual::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,var(--accent-glow-md),transparent 55%);
}
.about-grid__visual img{max-width:45%;position:relative;z-index:1;filter:brightness(0) invert(1)}

.about-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}
.about-value{
  padding:2.25rem;border:1px solid var(--border-light);border-radius:var(--radius-lg);
  transition:all var(--tr-fast);position:relative;overflow:hidden;
}
.about-value::before{
  content:'';position:absolute;top:0;left:0;width:0;height:3px;
  background:var(--accent);transition:width var(--tr-med);
}
.about-value:hover{border-color:var(--border-accent);box-shadow:var(--shadow-sm),var(--shadow-glow);transform:translateY(-4px)}
.about-value:hover::before{width:100%}
.about-value h4{font-size:var(--fs-h4);margin-bottom:0.5rem}
.about-value p{color:var(--text-dark-sec);font-size:var(--fs-sm);line-height:var(--lh-normal)}
/* dark variant */
.about-value--dark{background:var(--bg-card-dark);border-color:var(--border-dark)}
.about-value--dark h4{color:#fff}
.about-value--dark p{color:var(--text-muted)}

.industries-strip{display:flex;flex-wrap:wrap;gap:0.65rem;margin-top:1.5rem}
.industries-strip__item{
  padding:0.5rem 1.15rem;background:rgba(94,110,255,0.06);
  border:1px solid rgba(94,110,255,0.12);border-radius:var(--radius-xl);
  font-size:var(--fs-sm);font-weight:500;color:var(--accent);
}

/* ─── FOOTER ─────────────────────────────────────────────── */
.footer{background:var(--bg-deep);color:#fff;padding:var(--space-3xl) 0 var(--space-lg);border-top:1px solid var(--border-dark)}
.footer__grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:3rem;margin-bottom:var(--space-2xl)}
.footer__brand img{height:34px;filter:brightness(0) invert(1);margin-bottom:1rem}
.footer__brand p{color:var(--text-muted);font-size:var(--fs-sm);line-height:var(--lh-normal);max-width:340px}
.footer__column h5{
  font-family:var(--font-display);font-size:var(--fs-xs);font-weight:700;color:#fff;
  margin-bottom:1.25rem;letter-spacing:0.06em;text-transform:uppercase;
}
.footer__column a{
  display:block;color:var(--text-muted);font-size:var(--fs-sm);padding:0.3rem 0;
  transition:color var(--tr-fast),padding-left var(--tr-fast);
}
.footer__column a:hover{color:var(--accent-bright);padding-left:0.3rem}
.footer__bottom{
  padding-top:var(--space-lg);border-top:1px solid var(--border-dark);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
}
.footer__bottom p{font-size:var(--fs-xs);color:var(--text-muted)}
.footer__bottom a:hover{color:var(--accent-bright)}

/* ─── NEED SIMILAR CTA ───────────────────────────────────── */
.need-similar{
  text-align:center;padding:3.5rem;
  background:linear-gradient(135deg,var(--bg-light),var(--bg-light-alt));
  border:1px solid var(--border-light);border-radius:var(--radius-xl);margin-top:4rem;
}
.need-similar h3{font-size:var(--fs-h3);margin-bottom:0.75rem}
.need-similar p{color:var(--text-dark-sec);max-width:520px;margin:0 auto 1.5rem}

/* ─── UTILITIES ─────────────────────────────────────────── */
.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}
.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}
.text-center{text-align:center}
.text-white{color:#fff}
.text-accent{color:var(--accent)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:960px){
  .services-browser{grid-template-columns:1fr}
  .services-browser__nav{position:static;flex-direction:row;overflow-x:auto;gap:0.35rem;padding-bottom:0.5rem;-webkit-overflow-scrolling:touch}
  .services-browser__tab{white-space:nowrap;padding:0.85rem 1.2rem}
  .services-browser__tab::before{display:none}

  .services-grid{grid-template-columns:1fr}
  .service-detail{grid-template-columns:1fr;gap:2rem}
  .service-detail:nth-child(even){direction:ltr}

  .project-panel{grid-template-columns:1fr;gap:2rem;padding:3.5rem 0}
  .project-panel:nth-child(even){direction:ltr}

  .about-grid{grid-template-columns:1fr;gap:2.5rem}
  .contact-layout{grid-template-columns:1fr;gap:2.5rem}
  .contact-info{position:static}
  .form-grid{grid-template-columns:1fr}
}

@media(max-width:768px){
  .footer__grid{grid-template-columns:1fr 1fr;gap:2rem}
  .footer__brand{grid-column:1/-1}

  .hero__content{padding:8rem 0 4rem}
  .display-hero{font-size:clamp(2.4rem,9vw,3.8rem)}
  .section{padding:var(--space-2xl) 0}

  .trust-grid{grid-template-columns:1fr}
  .trust-card{padding:1.7rem}
  .capabilities{grid-template-columns:1fr}
}

@media(max-width:480px){
  .footer__grid{grid-template-columns:1fr}
  .hero__content{padding:7rem 0 3rem}
  .hero__actions{flex-direction:column;gap:0.75rem}
  .hero__actions .btn{width:100%;justify-content:center}
  .contact-form{padding:2rem 1.5rem}
  .page-hero{padding:9rem 0 3.5rem}
}