/* ==========================================================================
   SolutionPerk — Design Tokens
   ========================================================================== */
:root{
  /* Color */
  --ink:        #0B1120;   /* near-black slate — dark sections, primary text */
  --ink-soft:   #475569;   /* body text on light bg */
  --indigo:     #4338CA;   /* primary brand */
  --indigo-2:   #6D5EF0;   /* lighter indigo for gradients */
  --cyan:       #22D3EE;   /* secondary accent */
  --amber:      #3e82b7;   /* on-brand blue (was yellow — replaced per client request) */
  --cloud:      #F8FAFC;   /* main background */
  --cloud-dim:  #EEF1F6;   /* alt section background */
  --line:       #E2E8F0;   /* hairline borders */
  --white:      #FFFFFF;

  /* Type */
  --font-display: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow-soft: 0 8px 30px rgba(11,17,32,0.06);
  --shadow-card: 0 4px 16px rgba(11,17,32,0.05);
  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cloud);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; line-height:1.15; letter-spacing:-0.02em; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

.container{ max-width:1200px; margin:0 auto; padding:0 24px; }
.section{ padding:96px 0; }
.section-dim{ background:var(--cloud-dim); }
.section-dark{ background:var(--ink); color:var(--cloud); }
.section-dark .section-eyebrow{ color:var(--cyan); }
.section-dark h2{ color:var(--white); }
.section-dark p{ color:#B9C2D0; }

.eyebrow, .section-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.06em;
  color:var(--indigo); text-transform:uppercase; margin-bottom:14px;
}
.eyebrow::before{ content:''; width:18px; height:1px; background:var(--indigo); display:inline-block; }

.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(28px,4vw,40px); margin-bottom:14px; }
.section-head p{ color:var(--ink-soft); font-size:17px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:999px; font-weight:600; font-size:15px;
  border:1px solid transparent; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--indigo); color:var(--white); box-shadow:0 6px 20px rgba(67,56,202,.28); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(67,56,202,.36); }
.btn-outline{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn-outline:hover{ border-color:var(--indigo); color:var(--indigo); transform:translateY(-2px); }
.section-dark .btn-outline{ border-color:rgba(255,255,255,.25); color:var(--white); }
.section-dark .btn-outline:hover{ border-color:var(--cyan); color:var(--cyan); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(248,250,252,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:80px; }
.logo{ font-family:var(--font-display); font-weight:700; font-size:22px; display:flex; align-items:center; gap:10px; }
.logo span{ color:var(--indigo); }
.logo .dot{ width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 4px rgba(34,211,238,.2); }
.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{ font-size:15px; font-weight:500; color:var(--ink-soft); transition:color .2s; position:relative; }
.nav-links a:hover, .nav-links a.active{ color:var(--indigo); }
.nav-cta{ display:flex; align-items:center; gap:16px; }
.nav-toggle{ display:none; }

@media (max-width:900px){
  .nav-links{ position:fixed; inset:80px 0 0 0; background:var(--cloud); flex-direction:column; padding:32px 24px;
    gap:24px; transform:translateY(-12px); opacity:0; pointer-events:none; transition:all .3s var(--ease); }
  .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-toggle{ display:flex; width:40px; height:40px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:8px; background:none; }
  .nav-toggle span{ width:18px; height:2px; background:var(--ink); position:relative; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ position:relative; overflow:hidden; padding:120px 0 100px; }
.hero-grid{
  position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:linear-gradient(rgba(67,56,202,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(67,56,202,.06) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 60% 60% at 50% 20%, black, transparent);
}
.hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center; }
.hero-kicker{ font-family:var(--font-mono); font-size:14px; color:var(--indigo); display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.cursor{ display:inline-block; width:8px; height:18px; background:var(--indigo); animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.hero h1{ font-size:clamp(36px,5.2vw,58px); }
.hero h1 .swap{ color:var(--indigo); position:relative; display:inline-block; }
.hero p.lead{ margin-top:22px; font-size:18px; color:var(--ink-soft); max-width:480px; }
.hero-actions{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:36px; margin-top:56px; }
.hero-stats div b{ font-family:var(--font-mono); font-size:24px; display:block; color:var(--ink); }
.hero-stats div span{ font-size:13px; color:var(--ink-soft); }

.hero-visual{ position:relative; }
.hero-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; box-shadow:var(--shadow-soft); position:relative;
}
.hero-card .bar{ height:10px; border-radius:6px; background:var(--cloud-dim); overflow:hidden; margin-bottom:14px; }
.hero-card .bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--indigo),var(--cyan)); border-radius:6px; }
.hero-float{
  position:absolute; background:var(--white); border:1px solid var(--line); border-radius:12px; padding:14px 18px;
  box-shadow:var(--shadow-card); font-family:var(--font-mono); font-size:13px; display:flex; align-items:center; gap:10px;
}
.hero-float.f1{ top:-24px; right:-18px; animation:float 5s ease-in-out infinite; }
.hero-float.f2{ bottom:-20px; left:-24px; animation:float 5s ease-in-out infinite 1.5s; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
}

/* ==========================================================================
   Cards: services / process / team / testimonials / portfolio
   ========================================================================== */
.grid{ display:grid; gap:28px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid-3,.grid-4,.grid-2{ grid-template-columns:1fr; } }

.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; box-shadow:var(--shadow-card); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 14px 34px rgba(11,17,32,.09); border-color:#D9DEEA; }
.card .icon{
  width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,rgba(67,56,202,.12),rgba(34,211,238,.12)); color:var(--indigo); margin-bottom:20px; font-size:22px;
}
.card h3{ font-size:19px; margin-bottom:10px; }
.card p{ color:var(--ink-soft); font-size:15px; }
.card .tag{ font-family:var(--font-mono); font-size:12px; color:var(--cyan-2,var(--indigo)); }

/* Process (6D) — sequence, so numbered markers are justified */
.process-row{ display:flex; gap:0; position:relative; }
.process-step{ flex:1; position:relative; padding:0 20px; text-align:left; }
.process-step:not(:last-child)::after{
  content:''; position:absolute; top:26px; right:-10px; width:calc(100% - 32px); height:1px;
  background:repeating-linear-gradient(90deg,var(--line) 0 6px, transparent 6px 12px);
}
.process-num{ font-family:var(--font-mono); font-size:13px; color:var(--indigo); width:52px; height:52px; border:1px solid var(--line);
  border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--white); margin-bottom:18px; position:relative; z-index:1; }
.process-step h4{ font-size:16px; margin-bottom:8px; }
.process-step p{ font-size:14px; color:var(--ink-soft); }
@media (max-width:900px){
  .process-row{ flex-direction:column; gap:32px; }
  .process-step:not(:last-child)::after{ display:none; }
}

/* Stats — "We are in numbers" */
.stat{ text-align:left; }
.stat b{ font-family:var(--font-mono); font-size:clamp(34px,4vw,52px); color:var(--white); display:block; }
.stat span{ font-size:14px; color:#9AA5B5; }

/* Team */
.team-card{ text-align:left; }
.team-photo{
  width:100%; aspect-ratio:1/1; border-radius:var(--radius); margin-bottom:18px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--indigo),var(--ink));
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.85);
  font-family:var(--font-display); font-size:15px; text-align:center; padding:16px;
}
.team-card h3{ font-size:17px; margin-bottom:4px; }
.team-card .role{ font-family:var(--font-mono); font-size:13px; color:var(--indigo); }
.team-card.new .team-photo{ background:linear-gradient(135deg,var(--cyan),var(--indigo)); }
.badge-new{ display:inline-block; margin-top:8px; font-size:11px; font-family:var(--font-mono); background:rgba(34,211,238,.15); color:#0E7490; padding:3px 10px; border-radius:999px; }

/* Testimonials */
.t-card{ position:relative; }
.t-card .quote-mark{ font-family:var(--font-display); font-size:52px; color:var(--indigo); opacity:.15; line-height:1; margin-bottom:6px; }
.t-card p.body{ font-size:16px; color:var(--ink); margin-bottom:22px; }
.t-person{ display:flex; align-items:center; gap:12px; }
.t-avatar{ width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--indigo),var(--cyan)); overflow:hidden; flex-shrink:0; }
.t-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.t-person b{ display:block; font-size:14px; }
.t-person span{ font-size:13px; color:var(--ink-soft); }

/* Portfolio */
.pf-card{ padding:0; overflow:hidden; }
.pf-thumb{ aspect-ratio:16/10; background:linear-gradient(135deg,var(--indigo-2),var(--ink)); position:relative; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); font-family:var(--font-mono); font-size:13px; }
.pf-body{ padding:24px; }
.pf-tag{ font-family:var(--font-mono); font-size:12px; color:var(--indigo); margin-bottom:8px; display:block; }

/* CTA banner */
.cta-band{ background:linear-gradient(120deg,var(--indigo),#3730A3); border-radius:24px; padding:64px; text-align:center; color:var(--white); }
.cta-band h2{ color:var(--white); font-size:clamp(26px,4vw,36px); margin-bottom:16px; }
.cta-band p{ color:rgba(255,255,255,.8); margin-bottom:32px; }
.cta-band .btn-primary{ background:var(--white); color:var(--indigo); }
.cta-band .btn-outline{ border-color:rgba(255,255,255,.3); color:var(--white); }

/* Footer */
.footer{ background:var(--ink); color:#9AA5B5; padding:72px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:56px; }
.footer h4{ color:var(--white); font-size:14px; margin-bottom:18px; }
.footer a{ display:block; font-size:14px; padding:6px 0; transition:color .2s; }
.footer a:hover{ color:var(--cyan); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding-top:24px; display:flex; justify-content:space-between; font-size:13px; flex-wrap:wrap; gap:12px; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* Page hero (inner pages) */
.page-hero{ padding:80px 0 60px; text-align:left; }
.page-hero .eyebrow{ margin-bottom:16px; }
.page-hero h1{ font-size:clamp(32px,4.6vw,48px); max-width:700px; }
.page-hero p.lead{ margin-top:18px; color:var(--ink-soft); font-size:17px; max-width:620px; }

/* Contact form */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-grid .full{ grid-column:1/-1; }
label{ display:block; font-size:13px; font-weight:600; margin-bottom:8px; color:var(--ink); }
input, textarea{
  width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-family:inherit; font-size:15px; background:var(--white); transition:border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus{ outline:none; border-color:var(--indigo); box-shadow:0 0 0 3px rgba(67,56,202,.12); }
textarea{ resize:vertical; min-height:140px; }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }

.contact-info-card{ display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line); }
.contact-info-card:last-child{ border-bottom:none; }
.contact-info-card .icon{ width:44px; height:44px; margin-bottom:0; flex-shrink:0; }

/* ==========================================================================
   Scroll reveal animation system
   Elements start hidden/offset, animate in on enter, and RESET on exit
   so they replay both scrolling down and scrolling back up.
   ========================================================================== */
[data-reveal]{
  opacity:0; transition:opacity .8s var(--ease), transform .8s var(--ease);
  will-change:opacity, transform;
}
[data-reveal="up"]{ transform:translateY(36px); }
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(-40px); }
[data-reveal="right"]{ transform:translateX(40px); }
[data-reveal="scale"]{ transform:scale(.92); }
[data-reveal].is-visible{ opacity:1; transform:translate(0,0) scale(1); }

/* Case study cards (Portfolio) */
.cs-card{ padding:36px; }
.cs-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.cs-tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; background:rgba(67,56,202,.1); color:var(--indigo); padding:6px 14px; border-radius:999px; }
.cs-arrow{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:all .3s var(--ease); }
.card:hover .cs-arrow{ background:var(--indigo); color:#fff; border-color:var(--indigo); transform:rotate(45deg); }
.cs-card h3{ font-size:24px; margin-bottom:10px; }
.cs-meta{ font-size:14px; color:var(--ink-soft); margin-bottom:16px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.cs-meta span.dot{ width:4px; height:4px; border-radius:50%; background:var(--ink-soft); display:inline-block; }
.cs-desc{ color:var(--ink-soft); font-size:15px; margin-bottom:24px; }
.cs-stats{ display:flex; gap:32px; padding-top:20px; border-top:1px solid var(--line); flex-wrap:wrap; }
.cs-stat b{ font-family:var(--font-mono); font-size:24px; display:block; color:var(--indigo); }
.cs-stat span{ font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); }
.cs-underline{ width:40px; height:2px; background:var(--indigo); margin-top:20px; border-radius:2px; }

/* Animated gradient orb decoration for dark sections (adds movement) */
.orb{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.35; pointer-events:none; animation:orbit 14s ease-in-out infinite; }
@keyframes orbit{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(30px,-20px) scale(1.1); }
  66%{ transform:translate(-20px,20px) scale(0.95); }
}
.page-hero.section-dark{ position:relative; overflow:hidden; }
.page-hero .rotate-sq{ position:absolute; width:70px; height:70px; border-radius:18px; background:rgba(255,255,255,.04); top:35%; left:8%; animation:spin-slow 18s linear infinite; }
@keyframes spin-slow{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .orb, .rotate-sq{ animation:none !important; } }

/* ==========================================================================
   V2 — PRELOADER
   ========================================================================== */
.preloader{
  position:fixed; inset:0; z-index:9999; background:var(--ink);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:22px;
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
.preloader.done{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-mark{ font-family:var(--font-display); font-weight:700; font-size:26px; color:#fff; letter-spacing:.02em; display:flex; gap:2px; }
.preloader-mark span{ color:var(--cyan); }
.preloader-bar{ width:180px; height:2px; background:rgba(255,255,255,.12); border-radius:2px; overflow:hidden; }
.preloader-bar i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--indigo-2),var(--cyan)); animation:load-bar 1.1s var(--ease) forwards; }
@keyframes load-bar{ to{ width:100%; } }

/* ==========================================================================
   V2 — SCROLL PROGRESS BAR
   ========================================================================== */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:9998;
  background:linear-gradient(90deg,var(--indigo-2),var(--cyan),var(--indigo-2));
  background-size:200% 100%;
  animation:sheen 3s linear infinite;
  box-shadow:0 0 12px rgba(34,211,238,.6);
}
@keyframes sheen{ to{ background-position:-200% 0; } }

/* ==========================================================================
   V2 — CURSOR GLOW (desktop only)
   ========================================================================== */
.cursor-glow{
  position:fixed; top:0; left:0; width:520px; height:520px; z-index:2; pointer-events:none;
  transform:translate(-999px,-999px);
  background:radial-gradient(circle closest-side, rgba(109,94,240,.14), rgba(34,211,238,.06) 55%, transparent 75%);
  will-change:transform; transition:opacity .3s;
  mix-blend-mode:normal;
}
@media (max-width:900px), (hover:none){ .cursor-glow{ display:none; } }

/* ==========================================================================
   V2 — WAVE CANVAS BACKGROUNDS (hero + dark sections)
   ========================================================================== */
.wave-bg{ position:relative !important; isolation:isolate; }
.wave-bg canvas.wave-canvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  pointer-events:none; display:block;
}
.wave-bg > *:not(canvas){ position:relative; z-index:2; }
.wave-bg > .orb, .wave-bg > .rotate-sq{ position:absolute; z-index:0; }
.wave-bg::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 0%, rgba(11,17,32,0) 0%, rgba(11,17,32,.55) 85%);
}

/* ==========================================================================
   V2 — NAV: shrink + glow underline
   ========================================================================== */
.nav{ transition:height .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease); }
.nav.scrolled .nav-inner{ height:64px; }
.nav.scrolled{ background:rgba(248,250,252,.92); box-shadow:0 10px 30px rgba(11,17,32,.08); }
.nav-links{ position:relative; }
.nav-links a{ padding:6px 0; }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-4px; height:2px; width:0%;
  background:linear-gradient(90deg,var(--indigo),var(--cyan)); border-radius:2px; transition:width .3s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.logo .dot{ animation:pulse-dot 2.2s ease-in-out infinite; }
@keyframes pulse-dot{ 0%,100%{ box-shadow:0 0 0 4px rgba(34,211,238,.2); } 50%{ box-shadow:0 0 0 8px rgba(34,211,238,.08); } }

/* ==========================================================================
   V2 — BUTTON: shine sweep + magnetic-ready + glow pulse
   ========================================================================== */
.btn{ position:relative; overflow:hidden; will-change:transform; }
.btn::before{
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg); transition:left .7s var(--ease);
}
.btn:hover::before{ left:140%; }
.btn-primary{ background:linear-gradient(120deg,var(--indigo),var(--indigo-2) 60%,var(--cyan)); background-size:200% 200%; animation:btn-gradient 6s ease infinite; }
@keyframes btn-gradient{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

/* ==========================================================================
   V2 — CARD: 3D tilt-ready + glow border sweep
   ========================================================================== */
.card{ position:relative; transform-style:preserve-3d; will-change:transform; overflow:hidden; }
.card::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0;
  background:linear-gradient(120deg,rgba(67,56,202,.10),rgba(34,211,238,.10));
  transition:opacity .4s var(--ease);
}
.card:hover::before{ opacity:1; }
.card .icon{ transition:transform .5s var(--ease); }
.card:hover .icon{ transform:rotate(-8deg) scale(1.1); }

/* ==========================================================================
   V2 — HERO enhancements: gradient text, glow ring, deeper float
   ========================================================================== */
.hero{ background:radial-gradient(ellipse 80% 50% at 50% -10%, rgba(67,56,202,.08), transparent 60%); }
.hero h1 .swap{ background:linear-gradient(90deg,var(--indigo),var(--indigo-2),var(--cyan)); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:text-shimmer 4s linear infinite; }
@keyframes text-shimmer{ to{ background-position:200% center; } }
.hero-visual .hero-card{ animation:card-levitate 6s ease-in-out infinite; }
@keyframes card-levitate{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-14px) rotate(.4deg); } }
.hero-card .bar i{ position:relative; overflow:hidden; }
.hero-card .bar i::after{
  content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:bar-sheen 2.2s linear infinite;
}
@keyframes bar-sheen{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(100%); } }
.hero-float{ animation-name:float !important; }
.hero-float.f1, .hero-float.f2{ box-shadow:0 12px 30px rgba(11,17,32,.10); }

/* ==========================================================================
   V2 — DARK SECTIONS: layered mesh + starfield feel
   ========================================================================== */
.section-dark, .page-hero.section-dark{
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(109,94,240,.20), transparent 60%),
    radial-gradient(ellipse 50% 50% at 85% 100%, rgba(34,211,238,.14), transparent 60%),
    var(--ink);
}
.orb{ animation-duration:16s; }
.orb.o2{ animation-duration:22s; animation-direction:reverse; }

/* ==========================================================================
   V2 — MARQUEE (client logos)
   ========================================================================== */
.marquee{ overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.marquee-track{ display:flex; gap:64px; width:max-content; animation:marquee 22s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee-item{ font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--ink-soft); opacity:.55;
  white-space:nowrap; transition:opacity .3s, color .3s; }
.marquee-item:hover{ opacity:1; color:var(--indigo); }

/* ==========================================================================
   V2 — REVEAL v2: blur-in, richer stagger, springy scale
   ========================================================================== */
[data-reveal]{ transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); filter:blur(6px); }
[data-reveal].is-visible{ filter:blur(0); }
[data-reveal="scale"]{ transform:scale(.88) translateY(20px); }

/* ==========================================================================
   V2 — STAT counters: glow ticker
   ========================================================================== */
.stat b, .cs-stat b, .hero-stats b{ position:relative; }
.stat b::after{ content:''; display:block; width:34px; height:2px; margin-top:10px; background:linear-gradient(90deg,var(--cyan),transparent); }

/* ==========================================================================
   V2 — Section title accent underline glow
   ========================================================================== */
.eyebrow::before{ animation:eyebrow-grow 1s var(--ease); }
@keyframes eyebrow-grow{ from{ width:0; } to{ width:18px; } }

/* ==========================================================================
   V2 — Portfolio case-study cards glow-up
   ========================================================================== */
.cs-card{ transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.cs-card:hover{ box-shadow:0 24px 60px rgba(67,56,202,.16); }
.cs-underline{ transition:width .5s var(--ease); }
.cs-card:hover .cs-underline{ width:100%; }

/* ==========================================================================
   V2 — Team photo shimmer
   ========================================================================== */
.team-photo{ position:relative; }
.team-photo::after{
  content:''; position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 50%,transparent 70%);
  transform:translateX(-100%); transition:transform .8s var(--ease);
}
.team-card:hover .team-photo::after{ transform:translateX(100%); }

/* ==========================================================================
   V2 — Page transition fade
   ========================================================================== */
body{ animation:page-in .6s var(--ease); }
@keyframes page-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .wave-bg canvas.wave-canvas{ display:none; }
}

/* ==========================================================================
   V2 — Hamburger icon animated to X
   ========================================================================== */
.nav-toggle span{ transition:background .2s var(--ease); }
.nav-toggle span::before, .nav-toggle span::after{
  content:''; position:absolute; width:18px; height:2px; background:var(--ink); transition:transform .3s var(--ease), top .3s var(--ease);
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }
.nav-toggle.open span{ background:transparent; }
.nav-toggle.open span::before{ top:0; transform:rotate(45deg); }
.nav-toggle.open span::after{ top:0; transform:rotate(-45deg); }

/* ==========================================================================
   V3 — BOLD COLOR SYSTEM + ALWAYS-ON MOTION
   ========================================================================== */
:root{
  --violet:   #7C3AED;
  --magenta:  #EC4899;
  --gold:     #3e82b7;   /* superseded by brand blue in V7 — kept blue here too for clarity */
  --grad-brand: linear-gradient(120deg, var(--indigo) 0%, var(--violet) 45%, var(--cyan) 100%);
  --grad-warm:  linear-gradient(120deg, var(--magenta) 0%, var(--violet) 50%, var(--indigo) 100%);
  --grad-cool:  linear-gradient(120deg, var(--cyan) 0%, var(--violet) 100%);
}

/* Real team photos */
.team-photo{ padding:0 !important; background:var(--grad-brand); }
.team-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--ease), filter .5s; }
.team-card:hover .team-photo img{ transform:scale(1.1) rotate(-1deg); }

/* Punchier gradient buttons */
.btn-primary{ background:var(--grad-brand); background-size:220% 220%; animation:btn-gradient 5s ease infinite;
  box-shadow:0 8px 26px rgba(124,58,237,.35), 0 0 0 rgba(34,211,238,0); }
.btn-primary{ animation:btn-gradient 5s ease infinite, btn-pulse 2.6s ease-in-out infinite; }
@keyframes btn-pulse{
  0%,100%{ box-shadow:0 8px 26px rgba(124,58,237,.32), 0 0 0px rgba(34,211,238,.0); }
  50%{ box-shadow:0 10px 34px rgba(124,58,237,.42), 0 0 26px rgba(34,211,238,.28); }
}
.cta-band{ background:var(--grad-warm); background-size:220% 220%; animation:btn-gradient 8s ease infinite; }
.cta-band .btn-primary{ animation:none; background:var(--white); }

/* Colorful icon rotation across service/feature cards */
.grid-3 .card:nth-child(6n+1) .icon{ background:linear-gradient(135deg,rgba(67,56,202,.16),rgba(124,58,237,.16)); color:var(--indigo); }
.grid-3 .card:nth-child(6n+2) .icon{ background:linear-gradient(135deg,rgba(236,72,153,.16),rgba(124,58,237,.16)); color:var(--magenta); }
.grid-3 .card:nth-child(6n+3) .icon{ background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(67,56,202,.14)); color:#0891B2; }
.grid-3 .card:nth-child(6n+4) .icon{ background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(236,72,153,.12)); color:#B45309; }
.grid-3 .card:nth-child(6n+5) .icon{ background:linear-gradient(135deg,rgba(124,58,237,.18),rgba(34,211,238,.14)); color:var(--violet); }
.grid-3 .card:nth-child(6n+6) .icon{ background:linear-gradient(135deg,rgba(67,56,202,.16),rgba(245,158,11,.14)); color:var(--indigo); }

/* Eyebrow + accent text gradient pop */
.cs-stat b, .stat b{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat b::after{ background:linear-gradient(90deg,var(--magenta),transparent); }

/* ==========================================================================
   V3 — Ambient color blobs for LIGHT sections (always drifting, no hover needed)
   ========================================================================== */
.blobs{ position:relative; overflow:hidden; }
.blobs::before, .blobs::after{
  content:''; position:absolute; width:440px; height:440px; border-radius:50%;
  filter:blur(100px); z-index:0; pointer-events:none; opacity:.28;
}
.blobs::before{ background:radial-gradient(circle, var(--violet), transparent 70%); top:-140px; left:-120px; animation:blob-a 17s ease-in-out infinite; }
.blobs::after{ background:radial-gradient(circle, var(--cyan), transparent 70%); bottom:-160px; right:-120px; animation:blob-b 21s ease-in-out infinite; }
.blobs > .container{ position:relative; z-index:1; }
@keyframes blob-a{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(60px,40px) scale(1.15); }
}
@keyframes blob-b{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-50px,-30px) scale(1.1); }
}
.section-dim.blobs::before{ opacity:.22; }
.page-hero.blobs::before, .page-hero.blobs::after{ opacity:.24; }

/* Third accent blob for extra-large hero sections */
.blobs.blobs-3::before{ }
.blobs.blobs-3 .container::before{
  content:''; position:absolute; width:320px; height:320px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, var(--magenta), transparent 70%); filter:blur(90px); opacity:.2;
  top:20%; right:10%; animation:blob-a 13s ease-in-out infinite reverse;
}

/* ==========================================================================
   V3 — Animated gradient border ring for feature/team cards (subtle, always on)
   ========================================================================== */
.card{ border:1px solid var(--line); }
.team-card{
  background:
    linear-gradient(var(--white),var(--white)) padding-box,
    conic-gradient(from var(--ang,0deg), var(--indigo), var(--violet), var(--cyan), var(--magenta), var(--indigo)) border-box;
  border:1.5px solid transparent;
  animation:spin-border 6s linear infinite;
}
@property --ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes spin-border{ from{ --ang:0deg; } to{ --ang:360deg; } }

/* ==========================================================================
   V3 — Section heading gradient underline bar (always visible, animated width)
   ========================================================================== */
.section-head h2{ position:relative; padding-bottom:18px; }
.section-head h2::after{
  content:''; position:absolute; left:0; bottom:0; height:4px; width:64px; border-radius:4px;
  background:var(--grad-brand); background-size:200% 100%; animation:btn-gradient 4s ease infinite;
}
.section-head[style*="text-align:center"] h2::after{ left:50%; transform:translateX(-50%); }

/* ==========================================================================
   V3 — Marquee: bigger, gradient, glowing
   ========================================================================== */
.marquee-item{ font-size:26px; opacity:.85; }
.marquee-item:nth-child(odd){ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.marquee-item:nth-child(even){ background:var(--grad-cool); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ==========================================================================
   V3 — Reduced-motion guard for new effects too
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .team-card{ animation:none; }
  .blobs::before, .blobs::after, .blobs .container::before{ animation:none; }
  .btn-primary{ animation:none; }
  .cta-band{ animation:none; }
}

/* ==========================================================================
   V5 — FULL DARK-THEME REDESIGN
   Whole site rebuilt on a deep navy canvas with glass surfaces + neon accents.
   ========================================================================== */
:root{
  --ink-2:        #10182C;                 /* alt dark section bg */
  --glass:        rgba(255,255,255,.055);  /* card / surface glass fill */
  --glass-border: rgba(255,255,255,.12);   /* card / surface glass border */
  --ink-soft:     #A7B1C6;                 /* body text — now light, works on dark canvas + dark glass cards */
  --line:         rgba(255,255,255,.14);   /* hairline borders — now light, visible on dark */
  --indigo:       #818CF8;                 /* brighter periwinkle-indigo for dark bg contrast */
  --indigo-2:     #A78BFA;
  --shadow-soft:  0 24px 70px rgba(0,0,0,.55);
  --shadow-card:  0 12px 34px rgba(0,0,0,.4);
}

html, body{ background:var(--ink); overflow-x:hidden; }
body{ color:var(--cloud); max-width:100vw; }

/* Alternate section rhythm now uses two dark shades instead of light/white */
.section-dim{ background:var(--ink-2); }

/* Glass cards everywhere (was solid white) */
.card, .hero-card, .hero-float{
  background:var(--glass);
  border-color:var(--glass-border);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  color:var(--cloud);
}
.card:hover{ border-color:rgba(255,255,255,.26); box-shadow:0 26px 60px rgba(0,0,0,.5), 0 0 40px rgba(124,58,237,.12); }
.hero-card .bar{ background:rgba(255,255,255,.08); }
.process-num{ background:var(--glass); }

/* Text that used to assume a dark-on-light card now needs light-on-dark-glass */
.hero-stats div b{ color:var(--cloud); }
.t-card p.body{ color:var(--cloud); }
label{ color:var(--cloud); }
.btn-outline{ color:var(--cloud); border-color:rgba(255,255,255,.22); }

/* Form fields as glass, not solid white */
input, textarea{
  background:rgba(255,255,255,.045); border-color:var(--glass-border); color:var(--cloud);
}
input::placeholder, textarea::placeholder{ color:#69738C; }
input:focus, textarea:focus{ border-color:var(--indigo); box-shadow:0 0 0 4px rgba(129,140,248,.18); }

/* Nav becomes dark glass to match the rest of the page */
.nav{ background:rgba(6,9,18,.66); backdrop-filter:blur(16px); border-bottom-color:rgba(255,255,255,.08); }
.nav.scrolled{ background:rgba(6,9,18,.88); }
.nav-links a{ color:rgba(231,236,245,.72); }
.nav-links a:hover, .nav-links a.active{ color:var(--cyan); }
.nav-links a::after{ background:linear-gradient(90deg,var(--cyan),var(--violet)); }
.nav-toggle{ border-color:var(--glass-border); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ background:var(--cloud); }
@media (max-width:900px){ .nav-links{ background:var(--ink); } }

/* Footer: distinct, deeper shade so it separates from the page above it */
.footer{ background:#05070E; border-top:1px solid rgba(255,255,255,.06); }

/* Re-tune ambient blobs for a richer, more saturated dark canvas */
.blobs::before, .blobs::after{ opacity:.4; filter:blur(110px); }
.section-dim.blobs::before{ opacity:.32; }

/* Hero copy sits directly on the dark canvas now — make sure contrast is strong */
.hero h1{ color:var(--cloud); }
.hero p.lead{ color:var(--ink-soft); }

/* Slightly punchier gradient icon tints on glass (was tuned for white cards) */
.grid-3 .card:nth-child(6n+1) .icon,
.grid-3 .card:nth-child(6n+2) .icon,
.grid-3 .card:nth-child(6n+3) .icon,
.grid-3 .card:nth-child(6n+4) .icon,
.grid-3 .card:nth-child(6n+5) .icon,
.grid-3 .card:nth-child(6n+6) .icon{ filter:saturate(1.4) brightness(1.15); }

@media (prefers-reduced-motion: reduce){
  .blobs::before, .blobs::after{ animation:none; }
}

/* ==========================================================================
   V6 — HERO ORBIT — replaces the old fake "brand growth" chart card.
   Pure abstract, animated, makes no data claims.
   ========================================================================== */
.hero-orbit{ position:relative; width:100%; max-width:440px; aspect-ratio:1/1; margin:0 auto; }
.hero-orbit .ring{
  position:absolute; inset:0; border-radius:50%; border:1px solid rgba(255,255,255,.12);
}
.hero-orbit .ring.r1{ inset:0; animation:spin-cw 22s linear infinite; border-color:rgba(129,140,248,.35); border-style:dashed; }
.hero-orbit .ring.r2{ inset:11%; animation:spin-ccw 17s linear infinite; border-color:rgba(34,211,238,.3); }
.hero-orbit .ring.r3{ inset:24%; animation:spin-cw 13s linear infinite; border-color:rgba(236,72,153,.3); border-style:dotted; }
@keyframes spin-cw{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes spin-ccw{ from{ transform:rotate(0deg); } to{ transform:rotate(-360deg); } }

.hero-orbit .orbit-dot{
  position:absolute; width:14px; height:14px; border-radius:50%; box-shadow:0 0 18px 3px currentColor;
}
.hero-orbit .d1{ top:-6px; left:calc(50% - 7px); color:var(--indigo); background:var(--indigo); animation:spin-cw 22s linear infinite; transform-origin:7px 226px; }
.hero-orbit .d2{ top:11%; right:-6px; color:var(--cyan); background:var(--cyan); animation:spin-ccw 17s linear infinite; transform-origin:-7px 180px; }
.hero-orbit .d3{ bottom:-6px; left:24%; color:var(--magenta); background:var(--magenta); animation:spin-cw 13s linear infinite; transform-origin:7px -132px; }

.hero-orbit .orbit-core{
  position:absolute; inset:32%; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.10), rgba(255,255,255,.02) 60%), var(--glass);
  border:1px solid var(--glass-border); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; text-align:center;
  box-shadow:0 0 60px rgba(124,58,237,.25), inset 0 0 30px rgba(255,255,255,.03);
  animation:core-pulse 4s ease-in-out infinite;
}
.hero-orbit .orbit-core span{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--cloud); }
.hero-orbit .orbit-core span i{ font-style:normal; color:var(--cyan); }
@keyframes core-pulse{ 0%,100%{ box-shadow:0 0 60px rgba(124,58,237,.22); } 50%{ box-shadow:0 0 90px rgba(34,211,238,.3); } }

.hero-orbit .orbit-chip{
  position:absolute; background:var(--glass); border:1px solid var(--glass-border); backdrop-filter:blur(10px);
  border-radius:999px; padding:9px 16px; font-family:var(--font-mono); font-size:12px; color:var(--cloud);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.hero-orbit .c1{ top:6%; left:-6%; animation:float 6s ease-in-out infinite; }
.hero-orbit .c2{ bottom:14%; right:-8%; animation:float 6s ease-in-out infinite 1.4s; }
.hero-orbit .c3{ bottom:-4%; left:20%; animation:float 6s ease-in-out infinite 2.8s; }

@media (max-width:900px){
  .hero-orbit{ max-width:320px; margin-top:40px; }
}
@media (prefers-reduced-motion: reduce){
  .hero-orbit .ring, .hero-orbit .orbit-dot, .hero-orbit .orbit-core, .hero-orbit .orbit-chip{ animation:none; }
}

/* ==========================================================================
   V6 — COLOR REBALANCE: lead with violet/magenta/gold, blue as minor accent only
   ========================================================================== */
:root{
  --grad-brand: linear-gradient(120deg, var(--violet) 0%, var(--indigo) 45%, var(--magenta) 100%);
  --grad-warm:  linear-gradient(120deg, var(--gold) 0%, var(--magenta) 55%, var(--violet) 100%);
  --grad-cool:  linear-gradient(120deg, var(--magenta) 0%, var(--violet) 100%);
}
.eyebrow{ color:var(--violet); }
.eyebrow::before{ background:var(--gold); }
.nav-links a:hover, .nav-links a.active{ color:var(--magenta); }
.nav-links a::after{ background:linear-gradient(90deg,var(--gold),var(--magenta)); }
.process-num{ color:var(--violet); }
.cs-tag, .card .tag{ color:var(--violet) !important; }
.team-card .role{ color:var(--gold); }
a{ color:inherit; }
.contact-info-card a{ color:var(--cyan); }

/* Icon tint rotation now spans warm + cool, not just blue */
.grid-3 .card:nth-child(6n+1) .icon{ background:linear-gradient(135deg,rgba(124,58,237,.20),rgba(236,72,153,.14)); color:var(--violet); }
.grid-3 .card:nth-child(6n+2) .icon{ background:linear-gradient(135deg,rgba(236,72,153,.20),rgba(245,158,11,.14)); color:var(--magenta); }
.grid-3 .card:nth-child(6n+3) .icon{ background:linear-gradient(135deg,rgba(245,158,11,.22),rgba(124,58,237,.12)); color:var(--gold); }
.grid-3 .card:nth-child(6n+4) .icon{ background:linear-gradient(135deg,rgba(34,211,238,.20),rgba(124,58,237,.12)); color:#22D3EE; }
.grid-3 .card:nth-child(6n+5) .icon{ background:linear-gradient(135deg,rgba(129,140,248,.20),rgba(236,72,153,.12)); color:var(--indigo); }
.grid-3 .card:nth-child(6n+6) .icon{ background:linear-gradient(135deg,rgba(236,72,153,.18),rgba(34,211,238,.14)); color:var(--magenta); }

.team-card{
  animation:spin-border 6s linear infinite;
  background:
    linear-gradient(var(--glass),var(--glass)) padding-box,
    conic-gradient(from var(--ang,0deg), var(--violet), var(--magenta), var(--gold), var(--cyan), var(--violet)) border-box;
}

.blobs::before{ background:radial-gradient(circle, var(--magenta), transparent 70%); }
.blobs::after{ background:radial-gradient(circle, var(--gold), transparent 70%); opacity:.7; }
.blobs.blobs-3 .container::before{ background:radial-gradient(circle, var(--cyan), transparent 70%); }

.marquee-item:nth-child(odd){ background:linear-gradient(120deg,var(--violet),var(--magenta)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.marquee-item:nth-child(even){ background:linear-gradient(120deg,var(--gold),var(--cyan)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* More motion: icons nudge on scroll-in, section eyebrows draw in, testimonial cards breathe */
.card .icon{ animation:icon-pop .6s var(--ease) backwards; }
[data-reveal].is-visible .icon{ animation:icon-pop .6s var(--ease); }
@keyframes icon-pop{ 0%{ transform:scale(.6) rotate(-12deg); opacity:0; } 60%{ transform:scale(1.08) rotate(4deg); opacity:1; } 100%{ transform:scale(1) rotate(0); } }

.t-card{ animation:breathe 5s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }

.cs-card .cs-arrow{ animation:none; }
.cs-card:hover .cs-arrow{ transform:rotate(45deg) scale(1.1); border-color:var(--magenta); color:var(--magenta); }

@media (prefers-reduced-motion: reduce){
  .team-card{ animation:none; }
  .card .icon, .t-card{ animation:none; }
}

/* ==========================================================================
   V7 — ON-BRAND COLOR SYSTEM (from official SolutionPerk brand palette)
   #1d6cab · #1d5b8b · #274a6e · #18446b · #153d5a
   Also: calmer, smoother motion — fewer always-on, expensive animations.
   ========================================================================== */
:root{
  --ink:      #153d5a;   /* brand navy — page canvas */
  --ink-2:    #18446b;   /* brand deep — alt section bg */
  --indigo:   #1d6cab;   /* brand bright blue — primary accent / CTA */
  --indigo-2: #1d5b8b;   /* brand mid blue — gradient partner */
  --violet:   #274a6e;   /* brand slate blue — tertiary / muted accent */
  --magenta:  #3e82b7;   /* light pop accent, derived from brand bright */
  --gold:     #82aed0;   /* pale highlight, derived from brand bright */
  --cyan:     #5590c0;   /* glow accent, derived from brand bright */
}

html, body{ background:var(--ink); }
.section-dim{ background:var(--ink-2); }
.footer{ background:#0F2E46; }

/* Simplify the team-card border: a static on-brand gradient ring that
   only appears on hover, instead of a constantly-spinning conic gradient.
   Much smoother, still attractive. */
.team-card{
  animation:none;
  background:var(--glass);
  border:1px solid var(--glass-border);
  position:relative;
}
.team-card::after{
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, var(--indigo), var(--violet), var(--magenta));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .5s var(--ease); pointer-events:none;
}
.team-card:hover::after{ opacity:1; }

/* Slightly cheaper, calmer ambient blobs */
.blobs::before, .blobs::after{ filter:blur(90px); opacity:.24; }
.section-dim.blobs::before{ opacity:.2; }

/* Snappier, non-laggy card tilt response */
.card{ transition:transform .15s ease-out, box-shadow .3s var(--ease), border-color .3s; }

/* Brand logo mark */
.brand-logo{ display:flex; align-items:center; gap:10px; }
.brand-logo img{ height:34px; width:auto; display:block; }
.footer .brand-logo img{ height:30px; }
.preloader-mark img{ height:30px; display:block; }
.preloader-mark{ flex-direction:row; }

@media (prefers-reduced-motion: reduce){
  .team-card::after{ transition:none; }
}

/* ==========================================================================
   V8 — PROFESSIONAL LOGO TREATMENT + MORE ANIMATION
   The raster wordmark had a baked-in dark navy that vanished on our dark
   nav. Fix: use the icon mark (transparent) + crisp, scalable HTML text.
   ========================================================================== */
.brand-logo{ display:flex; align-items:center; gap:11px; }
.logo-icon{ height:38px; width:auto; display:block; transition:transform .45s var(--ease), filter .45s; }
.logo-text{ font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:-0.01em; color:var(--cloud); }
.logo-text b{ font-weight:700; color:var(--indigo); }
.brand-logo:hover .logo-icon{ transform:rotate(-8deg) scale(1.08); filter:drop-shadow(0 0 10px rgba(29,108,171,.55)); }

.preloader-mark.brand-logo{ flex-direction:row; gap:14px; }
.preloader-mark .logo-icon{ height:44px; }
.preloader-mark .logo-text{ font-size:26px; }
.logo-spin-in{ animation:logo-spin-in .9s var(--ease) both; }
@keyframes logo-spin-in{
  0%{ transform:rotate(-140deg) scale(.4); opacity:0; }
  100%{ transform:rotate(0) scale(1); opacity:1; }
}
.preloader{ background:#0F2E46; }
.footer .logo-icon{ height:32px; }

/* ==========================================================================
   V8 — Ambient floating particles in the hero (cheap, CSS-only)
   ========================================================================== */
.hero .hero-particles{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.hero .hero-particles span{
  position:absolute; bottom:-20px; border-radius:50%;
  background:radial-gradient(circle, rgba(130,174,208,.9), rgba(130,174,208,0) 70%);
  animation:particle-rise linear infinite;
}
@keyframes particle-rise{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.8; }
  90%{ opacity:.5; }
  100%{ transform:translateY(-480px) translateX(var(--drift,20px)); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .hero-particles{ display:none; }
  .logo-spin-in{ animation:none; }
}

/* ==========================================================================
   V8 — Card shine sweep on hover (cheap: only runs while hovered)
   ========================================================================== */
.card{ overflow:hidden; }
.card::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; z-index:2;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.10), transparent);
  transform:skewX(-18deg); transition:left .8s var(--ease); pointer-events:none;
}
.card:hover::after{ left:130%; }

/* Section divider glow — thin animated gradient line at top of each section */
.section, .section-dim{ position:relative; }
.section::before, .section-dim::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:120px; height:1px; background:linear-gradient(90deg,transparent,rgba(130,174,208,.5),transparent);
}

/* ==========================================================================
   V9 — FULL RESPONSIVE PASS: phone / tablet / laptop / desktop
   ========================================================================== */

/* ---- Large desktop: give the container a bit more breathing room ---- */
@media (min-width:1440px){
  .container{ max-width:1320px; }
}

/* ---- Laptop / small desktop ---- */
@media (max-width:1180px){
  .container{ max-width:100%; }
  .hero-inner{ gap:40px; }
}

/* Content-heavy image+text service sections need to stack earlier than plain card grids */
@media (max-width:820px){
  .grid-2-detail{ grid-template-columns:1fr !important; gap:32px !important; }
}

/* ---- Tablet (portrait iPad, small laptop) ---- */
@media (max-width:900px){
  .section{ padding:72px 0; }
  .hero{ padding:100px 0 72px; }
  .page-hero{ padding:64px 0 48px; }
  .section-head h2{ font-size:clamp(26px,4.6vw,34px); }
  .hero-stats{ flex-wrap:wrap; gap:24px 36px; }
  .footer-grid{ gap:32px; }
  .cs-card{ padding:28px; }
  .cs-stats{ gap:22px; }
}

/* ---- Mobile (phones) ---- */
@media (max-width:600px){
  .container{ padding:0 18px; }
  .section{ padding:56px 0; }
  .hero{ padding:84px 0 56px; }
  .page-hero{ padding:52px 0 40px; }
  .hero-kicker{ font-size:12px; }
  .hero h1{ font-size:clamp(28px,8vw,38px); }
  .hero p.lead{ font-size:15px; }
  .hero-actions{ gap:12px; }
  .hero-actions .btn{ flex:1 1 auto; text-align:center; justify-content:center; }
  .hero-stats{ gap:18px 28px; margin-top:36px; }
  .hero-stats div b{ font-size:20px; }
  .nav-inner{ height:68px; }
  .logo-text{ font-size:18px; }
  .logo-icon{ height:30px; }
  .nav-cta{ gap:10px; }
  .nav-cta .btn-primary{ padding:10px 16px; font-size:13px; }
  .marquee-item{ font-size:18px; }
  .footer-grid{ grid-template-columns:1fr; gap:36px; text-align:left; }
  .footer-bottom{ flex-direction:column; gap:10px; text-align:center; }
  .cs-card{ padding:24px; }
  .cs-card h3{ font-size:20px; }
  .cs-stats{ gap:18px; }
  .stat b{ font-size:clamp(28px,9vw,40px); }
  .section-head p{ font-size:15px; }
  .card{ padding:24px; }
  .cta-band{ padding:48px 24px; }
}

/* ---- Very small phones ---- */
@media (max-width:380px){
  .hero h1{ font-size:26px; }
  .container{ padding:0 14px; }
  .hero-stats{ gap:16px 22px; }
}

/* ---- iOS: prevent input zoom-on-focus (needs >=16px font) ---- */
@media (max-width:600px){
  input, textarea{ font-size:16px; }
}

/* ---- Landscape phones: hero shouldn't eat the whole viewport ---- */
@media (max-height:480px) and (orientation:landscape){
  .hero{ padding:88px 0 48px; }
  .hero-orbit{ display:none; }
}

/* ==========================================================================
   V10 — Fix: nav CTA + hamburger overflowed on narrow phones (<400px).
   Move the CTA into the mobile dropdown instead of squeezing it into the bar.
   ========================================================================== */
.nav-mobile-cta{ display:none; }
@media (max-width:900px){
  .nav-cta .btn-primary{ display:none; }
  .nav-mobile-cta{ display:inline-flex; margin-top:8px; text-align:center; justify-content:center; }
}

/* Hero orbit: keep it fully inside the viewport on small phones */
@media (max-width:420px){
  .hero-orbit{ max-width:260px; }
  .hero-orbit .orbit-chip{ font-size:11px; padding:7px 12px; }
  .hero-orbit .c2{ right:-2%; }
}

/* ==========================================================================
   V11 — Accordion (single-open collapsible list)
   ========================================================================== */
.accordion{ display:flex; flex-direction:column; gap:12px; }
.acc-item{
  background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius);
  overflow:hidden; transition:border-color .3s;
}
.acc-item.is-open{ border-color:rgba(255,255,255,.24); }
.acc-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:none; cursor:pointer; text-align:left;
  padding:20px 24px; font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--cloud);
}
.acc-icon{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--glass); border:1px solid var(--glass-border); font-size:16px; color:var(--indigo);
  transition:transform .35s var(--ease), background .3s, color .3s;
}
.acc-item.is-open .acc-icon{ transform:rotate(45deg); background:var(--indigo); color:#fff; border-color:var(--indigo); }
.acc-body{
  max-height:0; overflow:hidden; transition:max-height .4s var(--ease), padding .4s var(--ease);
}
.acc-body p{ margin:0; padding:0 24px 20px; color:var(--ink-soft); font-size:15px; line-height:1.6; }
.acc-item.is-open .acc-body{ max-height:200px; }
@media (prefers-reduced-motion: reduce){
  .acc-body{ transition:none; }
  .acc-icon{ transition:none; }
}

/* ==========================================================================
   V12 — Fix: cards in a stretched grid row left big empty gaps when a
   neighboring card had more content. Portfolio cards now size to their own
   content instead of stretching to match the tallest card in the row.
   ========================================================================== */
.grid-portfolio{ align-items:start; }

/* Blog cards: content should hug the top, not stretch with a big gap
   before the tag/date at the bottom. */
.blog-card{ display:block !important; }
.blog-card p{ flex:none !important; margin-bottom:18px; }