/* ==========================================================================
   DeepAbi — Common Stylesheet
   Design tokens, reset, typography, 12-col grid, and shared components.
   Loaded on every page. Page-specific rules live in css/pages/*.css
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* Brand palette — Premium Enterprise System v3 */
  --navy:#081F4D;         /* Primary — Royal Midnight */
  --navy-2:#051530;        /* Deeper navy for gradient depth */
  --cyan:#00D9C8;          /* Secondary — Aqua Emerald */
  --violet:#8B5CF6;        /* Accent — Royal Purple */
  --mint:#10B981;          /* Utility green for success/checkmarks (distinct from Aqua Emerald) */
  --gold:#FFB000;          /* Highlight — Premium Gold */
  --dark-surface:#0F172A;  /* Dark Surface */
  --warning:#F59E0B;
  --error:#EF4444;
  --success:#10B981;

  /* Accent colors fail AA as text-on-white at full saturation (measured:
     aqua 1.79:1, purple 4.23:1, gold 1.83:1) — these darker "ink" variants
     are for text/label use on light backgrounds; use the full-saturation
     tokens above only for icons, borders, buttons-with-white-text, and
     text-on-dark (where they pass at 8.7–9:1). */
  --cyan-ink:#0B5B54;
  --violet-ink:#5B21B6;
  --mint-ink:#047857;
  --gold-ink:#8A5A00;

  --surface:#F8FAFC;
  --bg:#FFFFFF;
  --card-bg:#FFFFFF;
  --text:#111827;
  --text-secondary:#475569;
  --border:#CBD5E1;

  /* Gradients are intentionally restricted to Hero, CTA, and Buttons per
     brand guidance — everywhere else uses solid brand color. */
  --grad-hero:linear-gradient(135deg, var(--navy), var(--navy-2) 55%, #0a2a63);
  --grad-cta:linear-gradient(135deg, var(--navy), #0a2a63 55%, #0d3a7a);

  /* 8px spacing scale */
  --sp-1:8px;  --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:40px; --sp-6:44px; --sp-7:56px; --sp-8:56px;
  --sp-9:72px; --sp-10:76px;

  /* Layout */
  --container:1200px;
  --container-wide:1440px;
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:10px;

  /* Elevation */
  --shadow-sm:0 2px 10px rgba(8,31,77,0.06);
  --shadow-md:0 12px 32px rgba(8,31,77,0.10);
  --shadow-lg:0 24px 60px rgba(8,31,77,0.18);
  --shadow-glow:0 0 0 1px rgba(0,217,200,0.25), 0 12px 40px rgba(0,217,200,0.20);

  /* Type */
  --font-display:'Space Grotesk', 'Inter', sans-serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; max-width:100%;}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
  max-width:100%;
}
a{text-decoration:none; color:inherit; overflow-wrap:break-word;}
ul,ol{list-style:none;}
button{font-family:inherit; cursor:pointer; background:none; border:none;}
img,svg,video,canvas{max-width:100%; display:block; height:auto;}
picture{display:block; max-width:100%;}
iframe{max-width:100%;}
input,textarea,select{font-family:inherit; max-width:100%;}
/* Any table added later (none currently ship) scrolls horizontally on its
   own instead of forcing the whole page wider on small screens. */
table{width:100%; border-collapse:collapse;}
.table-scroll{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px;}
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--navy); color:#fff;
  padding:12px 20px; z-index:3000; border-radius:0 0 10px 0;
}
.skip-link:focus{left:0;}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--navy);
}
h1{font-size:clamp(38px,5.4vw,64px); line-height:1.06;}
h2{font-size:clamp(28px,4vw,42px); line-height:1.15;}
h3{font-size:20px; line-height:1.3;}
p{color:var(--text-secondary);}
.text-lg{font-size:18px;}
.text-sm{font-size:13.5px;}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--violet-ink);
  background:rgba(139,92,246,0.08);
  border:1px solid rgba(139,92,246,0.18);
  padding:7px 16px; border-radius:999px; margin-bottom:var(--sp-3);
}
.eyebrow.cyan{color:var(--cyan-ink); background:rgba(0,217,200,0.10); border-color:rgba(0,217,200,0.25);}
.eyebrow.mint{color:var(--mint-ink); background:rgba(16,185,129,0.10); border-color:rgba(16,185,129,0.25);}
.eyebrow.gold{color:var(--gold-ink); background:rgba(255,183,3,0.14); border-color:rgba(255,183,3,0.35);}

/* Section labels ("kicker" style) — bolder, wider-tracked, no pill background,
   with a small accent tick so headings catch attention immediately. */
.section-head .eyebrow{
  background:none; border:none; padding:0 0 0 26px; margin-bottom:16px;
  font-size:14px; font-weight:800; letter-spacing:0.18em;
  position:relative; gap:0;
}
.section-head.center .eyebrow{padding-left:0; padding-top:26px;}
.section-head .eyebrow::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:20px; height:3px; border-radius:3px; background:currentColor;
}
.section-head.center .eyebrow::before{
  left:50%; top:0; transform:translateX(-50%); width:34px; height:3px;
}
.section-head .eyebrow i{display:none;}

/* ---------- Layout ---------- */
.container{max-width:var(--container); margin:0 auto; padding:0 var(--sp-3);}
.container-wide{max-width:var(--container-wide); margin:0 auto; padding:0 var(--sp-3);}
.grid-12{display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:var(--sp-3);}
.section{padding:var(--sp-10) 0;}
.section-alt{background:var(--surface);}
.section-head{max-width:660px; margin-bottom:var(--sp-6);}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head .eyebrow{margin-bottom:var(--sp-2);}
.section-head p{font-size:17px; margin-top:16px; line-height:1.6;}
.section-head h2{
  position:relative; display:inline-block;
  font-size:clamp(34px,5vw,52px); font-weight:800; letter-spacing:-0.025em; line-height:1.08;
  color:var(--navy);
}
.section-head.center h2::after{
  content:''; display:block; margin:22px auto 0; width:76px; height:5px; border-radius:5px;
  background:linear-gradient(90deg, var(--gold), var(--violet));
}
.section-head:not(.center) h2::after{
  content:''; display:block; margin-top:22px; width:76px; height:5px; border-radius:5px;
  background:linear-gradient(90deg, var(--gold), var(--violet));
}

.grid-2{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-4);}
.grid-3{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--sp-3);}
.grid-4{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--sp-3);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px; border-radius:12px; font-weight:600; font-size:15px;
  border:1px solid transparent; white-space:nowrap;
  transition:transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.btn-primary{
  background:linear-gradient(135deg, var(--navy), var(--navy-2) 120%); color:#fff;
  box-shadow:0 6px 20px rgba(8,31,77,0.28);
}
.btn-primary:hover{transform:translateY(-3px); box-shadow:var(--shadow-glow); background:linear-gradient(135deg, var(--navy-2), var(--navy));}
.btn-accent{
  background:linear-gradient(135deg, var(--violet), var(--cyan)); color:#fff;
  box-shadow:0 6px 20px rgba(139,92,246,0.28);
}
.btn-accent:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(139,92,246,0.38);}
.btn-secondary{background:#fff; color:var(--navy); border:1px solid var(--border);}
.btn-secondary:hover{transform:translateY(-3px); border-color:var(--navy); box-shadow:var(--shadow-sm);}
.btn-ghost{background:transparent; color:var(--violet-ink); padding:10px 4px;}
.btn-ghost i{transition:transform 0.25s var(--ease);}
.btn-ghost:hover i{transform:translateX(4px);}
.btn-sm{padding:11px 20px; font-size:13.5px; border-radius:10px;}
.btn-on-dark{background:rgba(255,255,255,0.1); color:#fff; border:1px solid rgba(255,255,255,0.25); backdrop-filter:blur(8px);}
.btn-on-dark:hover{background:rgba(255,255,255,0.18); transform:translateY(-3px);}

/* ---------- Navbar ---------- */
.navbar-topbar{
  background:var(--navy); color:rgba(255,255,255,0.82);
  font-size:15px; overflow:hidden;
  /* Capped well above the ~53px the content actually needs so a slightly
     longer phone number/email, a bigger font from user zoom, or a fallback
     font never gets silently clipped — the height still animates to 0 on
     scroll via #navbar.scrolled below. */
  max-height:84px; transition:max-height 0.35s var(--ease), padding 0.35s var(--ease), opacity 0.35s var(--ease);
}
/* The type stepped up (12.5px -> 15px links, 12px -> 14px tagline), so the
   padding eases 16px -> 14px to absorb the taller line box and hold the
   strip at ~53px. Still well under the 66px navbar, so the hierarchy
   between the two bars is unchanged. align-items:center keeps the icons,
   contact links and tagline on one optical line at every width. */
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 24px; flex-wrap:wrap; min-width:0;}
/* Contact links never wrap to a second line — if space ever gets tighter
   than expected, the row scrolls horizontally instead of wrapping/clipping,
   so the phone/email can never render as an unstyled, overflowing line. */
.topbar-contact{display:flex; align-items:center; gap:18px; flex-wrap:nowrap; min-width:0; overflow-x:auto; scrollbar-width:none;}
.topbar-contact::-webkit-scrollbar{display:none;}
.topbar-contact a{color:rgba(255,255,255,0.82); display:inline-flex; align-items:center; gap:7px; transition:color 0.2s ease; white-space:nowrap; flex-shrink:0;}
.topbar-contact a:hover{color:var(--gold);}
.topbar-contact i{color:var(--gold); font-size:14px;}
/* Matched to the contact links for readability: same 15px size and the
   same white at 0.82 alpha (it was being dimmed to 0.6, which is what
   made it read faint rather than small). Weight 600 and the wider
   letter-spacing still set it apart from the links beside it. */
.topbar-tagline{font-weight:600; letter-spacing:0.04em; color:rgba(255,255,255,0.82); font-size:15px;}

#navbar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:transform 0.4s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease);
}
#navbar.nav-hidden{transform:translateY(-110%);}
#navbar.scrolled .navbar-topbar{max-height:0; padding:0;}
#navbar.scrolled{
  background:rgba(255,255,255,0.86);
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 1px 0 var(--border), 0 16px 40px rgba(8,31,77,0.10);
}
body.hero-dark #navbar:not(.scrolled){
  background:rgba(8,31,77,0.28);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
/* The bar is sized around the logo rather than the other way round: the
   logo keeps essentially its size and the vertical padding gives way, so
   the header reads 66px tall with an even 5px of breathing room above and
   below the artwork (~85% of the bar). The nav links' own 8px padding and
   their -2px underline sit well inside that, so nothing is cramped.
   The logo assets are trimmed to their ink bounds, so the CSS box is the
   visible artwork — no hidden transparent padding inflating the row. */
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:5px 24px;}
#navbar.scrolled .nav-inner{padding:5px 24px;}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--navy); transition:color 0.3s ease, transform 0.3s var(--ease);}
.logo:hover{transform:scale(1.03);}
/* ---------- Brand assets ----------
   The wordmark is navy + gold artwork, so the transparent version is used
   on light surfaces and the plated version over the dark hero navbar. The
   footer keeps the icon plus its white "DeepAbi" wordtext. Heights are
   driven from the height axis with width:auto, so aspect ratios stay exact
   — nothing is stretched or cropped at any size. */
.logo-full{display:block; line-height:0;}
/* One shared, fluid height drives both logo variants. clamp() scales the
   wordmark with the viewport between the breakpoints below instead of
   stepping, and the transition matches the navbar's existing shrink-on-
   scroll animation. width:auto keeps the aspect ratio exact at every size. */
.logo-full img,.logo-plate img{
  height:clamp(38px, 3.4vw + 10px, 56px); width:auto; display:block;
  object-fit:contain; transition:height 0.35s var(--ease);
}
/* Over the dark hero the navbar carries the plated (light-background)
   version of the same logo, so the full wordmark stays legible there
   instead of navy-on-navy. It shares the height rule above, so navbar
   height and alignment are identical in both states. */
.logo-plate{display:none; line-height:0;}
.logo-plate img{border-radius:8px;}
#navbar.scrolled .logo-full img,#navbar.scrolled .logo-plate img{height:clamp(34px, 2.8vw + 8px, 46px);}
body.hero-dark #navbar:not(.scrolled) .logo-full{display:none;}
body.hero-dark #navbar:not(.scrolled) .logo-plate{display:block;}
/* The footer sits on navy, where the transparent navy+gold wordmark would
   disappear — so it carries the plated version, the same asset the dark
   hero navbar uses. The wordmark contains the name, so the separate
   white "DeepAbi" text is no longer needed beside it. */
.footer-logo-img{display:block; line-height:0;}
.footer-logo-img img{height:42px; width:auto; display:block; border-radius:8px;}
.nav-links{display:flex; align-items:center; gap:36px;}
.nav-links a{font-size:14.5px; font-weight:600; color:var(--text); position:relative; padding:8px 0; transition:color 0.2s ease, transform 0.2s var(--ease);}
.nav-links a::after{content:''; position:absolute; left:0; bottom:-2px; width:0; height:3px; border-radius:3px; background:linear-gradient(90deg, var(--gold), var(--violet)); transition:width 0.3s var(--ease);}
.nav-links a:hover,.nav-links a.active{color:var(--navy); transform:translateY(-1px);}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-right{display:flex; align-items:center; gap:20px; min-height:1px;}
.btn-lg{padding:16px 32px; font-size:15px; border-radius:12px;}
.btn-glow{position:relative;}
.btn-glow:hover{box-shadow:0 0 0 6px rgba(139,92,246,0.14), var(--shadow-glow); transform:translateY(-4px) scale(1.02);}
.menu-toggle{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; margin:-10px; font-size:22px; color:var(--navy);
  transition:transform 0.25s var(--ease);
}
.menu-toggle:hover{transform:scale(1.1);}

/* Dynamic contrast: on pages whose hero sits directly on a dark background,
   the un-scrolled navbar keeps light text over its glass background so the
   logo and links stay readable against the dark hero (fixes the low-contrast
   issue flagged in the original project audit). Once scrolled, the navbar is
   always solid + dark text. */
body.hero-dark #navbar:not(.scrolled) .logo{color:#fff;}
body.hero-dark #navbar:not(.scrolled) .nav-links a{color:rgba(255,255,255,0.88);}
body.hero-dark #navbar:not(.scrolled) .nav-links a:hover,
body.hero-dark #navbar:not(.scrolled) .nav-links a.active{color:#fff;}
body.hero-dark #navbar:not(.scrolled) .menu-toggle{color:#fff;}

#mobile-menu{
  position:fixed; inset:0; background:#fff; z-index:1100;
  display:flex; flex-direction:column; padding:24px;
  transform:translateY(-100%); transition:transform 0.4s var(--ease);
  /* The closed panel used to sit off-screen with visibility:visible, which
     meant its 20 links and buttons stayed in the tab order and in the
     accessibility tree. At 390px, 7 of the first 10 Tab stops landed on
     controls at y = -599 to -822 that nobody could see. visibility:hidden
     removes them from both, and is delayed until the slide-out finishes so
     the closing animation still plays - the same pattern already used by
     .fab-menu and .toast above. */
  visibility:hidden;
  transition:transform 0.4s var(--ease), visibility 0s linear 0.4s;
  /* On short viewports (mobile/tablet landscape) the nav links + contact
     block can be taller than the viewport itself. Without this, the excess
     content overflowed past this fixed, off-screen box and bled back into
     the visible page as unstyled-looking floating text — even while the
     menu was "closed". Scrolling it internally keeps everything contained. */
  overflow-y:auto; -webkit-overflow-scrolling:touch; max-height:100vh; max-height:100dvh;
}
#mobile-menu.open{
  transform:translateY(0);
  visibility:visible;
  transition:transform 0.4s var(--ease), visibility 0s linear 0s;
}
.mobile-menu-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:40px;}
#mobile-menu nav{display:flex; flex-direction:column; gap:4px;}
#mobile-menu nav a{font-family:var(--font-display); font-size:24px; font-weight:600; padding:16px 4px; border-bottom:1px solid var(--border);}
.mobile-contact{display:flex; flex-direction:column; gap:14px; margin-top:28px;}
.mobile-contact a{display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; color:var(--text);}
.mobile-contact i{color:var(--violet); width:18px;}

/* ---------- Cards ---------- */
.card{
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--sp-4); box-shadow:var(--shadow-sm);
  transition:transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:rgba(139,92,246,0.35);}
.card-icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:rgba(139,92,246,0.10);
  color:var(--violet-ink); font-size:22px; margin-bottom:var(--sp-3);
  transition:transform 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease);
}
.card:hover .card-icon{transform:scale(1.12) rotate(-4deg); background:linear-gradient(135deg, var(--violet), var(--cyan)); color:#fff;}
.card h3{margin-bottom:10px;}
.card p{font-size:15px;}

.glass{
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.4);
}

/* Scroll reveal.
   The starting opacity:0 is applied ONLY under html.js, a class an inline
   script in <head> adds. With scripting unavailable or blocked the class is
   never added, so every [data-reveal] block renders normally instead of
   staying permanently invisible. js/common.js also force-reveals anything
   still hidden shortly after load, so a script error cannot blank the page. */
.js [data-reveal]{opacity:0; transform:translateY(28px); transition:opacity 0.7s var(--ease), transform 0.7s var(--ease);}
.js [data-reveal].in{opacity:1; transform:translateY(0);}
.js [data-reveal="scale"]{transform:scale(0.94);}
.js [data-reveal="scale"].in{transform:scale(1);}
@media (prefers-reduced-motion: reduce){
  /* No entrance animation for anyone who asked for less motion: content is
     simply present. */
  .js [data-reveal]{opacity:1 !important; transform:none !important; transition:none !important;}
}

/* ---------- Stats / counters ---------- */
.stat-strip{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--sp-3);}
.stat-item{text-align:center;}
.stat-item .num{font-family:var(--font-display); font-size:40px; font-weight:700; color:var(--navy);}
.stat-item .label{font-size:13.5px; color:var(--text-secondary); margin-top:6px;}

/* ---------- Testimonials ---------- */
.testimonial-card{background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--sp-4); box-shadow:var(--shadow-sm);}
.testimonial-stars{color:var(--warning); font-size:14px; margin-bottom:14px; letter-spacing:2px;}
.testimonial-card p.quote{color:var(--text); font-size:15px; margin-bottom:22px;}
.testimonial-person{display:flex; align-items:center; gap:12px;}
.testimonial-person img{width:46px; height:46px; border-radius:50%; object-fit:cover;}
.testimonial-person h3{font-size:14.5px; margin-bottom:2px;}
.testimonial-person span{font-size:12.5px; color:var(--text-secondary);}

/* ---------- CTA banner ---------- */
.cta-section{
  border-radius:32px; background:linear-gradient(135deg, var(--navy), #16224a 55%, #0e2f52);
  padding:70px 60px; position:relative; overflow:hidden; text-align:center; color:#fff;
}
.cta-section::before{content:''; position:absolute; inset:0; background:radial-gradient(560px 340px at 85% 0%, rgba(0,217,200,0.18), transparent 60%), radial-gradient(420px 300px at 10% 100%, rgba(139,92,246,0.18), transparent 60%);}
.cta-section > *{position:relative;}
.cta-section h2{color:#fff; margin-bottom:14px;}
.cta-section p{color:rgba(255,255,255,0.78); margin-bottom:32px; font-size:16.5px;}

/* ---------- Footer ---------- */
footer{background:var(--navy); color:#B8C4D9; padding:0 0 30px;}
.footer-mission{
  background:var(--dark-surface); border-bottom:1px solid rgba(255,255,255,0.1);
  padding:36px 0; text-align:center;
}
.footer-mission-label{display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold); margin-bottom:10px;}
.footer-mission p{max-width:720px; margin:0 auto; color:#fff; font-family:var(--font-display); font-size:19px; font-weight:500; line-height:1.5;}
.footer-grid{display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap:44px; padding:60px 0 52px; border-bottom:1px solid rgba(255,255,255,0.12);}
.footer-logo{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:20px; color:#fff; margin-bottom:16px;}
.footer-grid p{font-size:14.5px; line-height:1.75; max-width:280px; color:#B8C4D9;}
.footer-col .footer-col-title{color:#fff; font-size:13.5px; margin-bottom:20px; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; position:relative; padding-bottom:12px;}
.footer-col .footer-col-title::after{content:''; position:absolute; left:0; bottom:0; width:28px; height:3px; border-radius:3px; background:linear-gradient(90deg, var(--gold), var(--violet));}
.footer-col ul li{margin-bottom:14px;}
.footer-col a{
  font-size:14.5px; color:#B8C4D9; transition:color 0.25s var(--ease), transform 0.25s var(--ease);
  display:inline-flex; align-items:center; gap:8px;
}
.footer-col a i{color:var(--cyan); font-size:12px; width:14px; text-align:center; transition:transform 0.25s var(--ease);}
.footer-col a:hover{color:#fff; transform:translateX(4px);}
.footer-col a:hover i{transform:scale(1.15);}
.footer-social{display:flex; gap:12px; margin-top:20px;}
.footer-social a{
  width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.14);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:all 0.25s var(--ease);
}
.footer-social a:hover{background:linear-gradient(135deg, var(--violet), var(--cyan)); border-color:transparent; color:#fff; transform:translateY(-4px); box-shadow:0 10px 22px rgba(0,217,200,0.28);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:26px;
  font-size:13.5px; flex-wrap:wrap; gap:12px; color:#94A3B8;
}
.footer-bottom .legal{display:flex; align-items:center; gap:4px;}
.footer-bottom a{margin-left:22px; font-size:13.5px; color:#B8C4D9; position:relative; transition:color 0.2s ease;}
.footer-bottom a::before{content:''; position:absolute; left:-11px; top:50%; transform:translateY(-50%); width:1px; height:12px; background:rgba(255,255,255,0.18);}
.footer-bottom a:hover{color:#fff;}

/* Contact column: small uppercase label above each value for clearer hierarchy */
.footer-col-contact a{align-items:flex-start;}
.footer-col-contact a span{display:flex; flex-direction:column; gap:2px;}
.footer-col-contact a em{font-style:normal; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#7C90B8;}

/* Subtle vertical separators between footer columns on wide screens */
@media (min-width:1025px){
  .footer-col{position:relative; padding-left:32px;}
  .footer-col::before{content:''; position:absolute; left:0; top:2px; bottom:2px; width:1px; background:rgba(255,255,255,0.10);}
}

/* ---------- Floating contact button (premium) ---------- */
/* pointer-events:none here is the actual fix for "contact links aren't
   clickable": this wrapper is a flex column that reserves full layout
   space for the 3-item fab-menu even while it's closed/invisible, so
   without this the empty space silently intercepted every click meant for
   whatever sat underneath it in the bottom-right corner — including the
   open mobile menu's own phone/email links. Re-enabled below on the parts
   that are actually meant to be clickable. */
.contact-fab{position:fixed; right:24px; bottom:24px; z-index:1500; display:flex; flex-direction:column; align-items:flex-end; gap:16px; pointer-events:none;}
.fab-main{
  width:66px; height:66px; border-radius:50%; background:linear-gradient(135deg, var(--violet), var(--navy)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:27px;
  box-shadow:0 12px 34px rgba(8,31,77,0.38); position:relative;
  transition:transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
  pointer-events:auto;
}
.fab-main::before{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--cyan); opacity:0; animation:fabPulse 3.6s ease-out infinite;
}
@keyframes fabPulse{
  0%{opacity:0.4; transform:scale(0.92);}
  70%{opacity:0;}
  100%{opacity:0; transform:scale(1.28);}
}
.fab-main:hover{transform:scale(1.08); box-shadow:0 16px 40px rgba(8,31,77,0.48);}
.fab-main #fabIconClose{display:none;}
.contact-fab.open .fab-main #fabIconOpen{display:none;}
.contact-fab.open .fab-main #fabIconClose{display:block;}
.contact-fab.open .fab-main{background:linear-gradient(135deg, var(--navy), var(--violet));}
.contact-fab.open .fab-main::before{animation:none; opacity:0;}

.fab-menu{
  display:flex; flex-direction:column; gap:12px; align-items:flex-end;
  /* opacity:0 and pointer-events:none hid the menu from sight and from the
     mouse, but NOT from the keyboard: the three links stayed in the tab order,
     so tabbing through a page stopped three times on controls nobody could
     see. visibility:hidden takes them out of the tab order and the
     accessibility tree while closed. It is transitioned with a zero-length
     delay matched to the slide so the open and close animation is unchanged. */
  opacity:0; transform:translateY(16px) scale(0.9); pointer-events:none;
  visibility:hidden;
  transition:opacity 0.35s var(--ease), transform 0.35s var(--ease),
             visibility 0s linear 0.35s;
}
.contact-fab.open .fab-menu{
  opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
  visibility:visible;
  transition:opacity 0.35s var(--ease), transform 0.35s var(--ease),
             visibility 0s linear 0s;
}
.contact-fab.open .fab-item:nth-child(1){transition-delay:0.03s;}
/* Don't float the persistent contact button over the full-screen mobile
   nav — it already repeats the same phone/WhatsApp/email links, and #mobile-menu
   precedes .contact-fab in the markup so the general-sibling selector works. */
#mobile-menu.open ~ .contact-fab{opacity:0; pointer-events:none; transition:opacity 0.2s ease;}
.contact-fab.open .fab-item:nth-child(2){transition-delay:0.08s;}
.contact-fab.open .fab-item:nth-child(3){transition-delay:0.13s;}
.fab-item{
  display:flex; align-items:center; gap:12px; background:#fff; color:var(--text);
  padding:12px 20px 12px 12px; border-radius:999px; box-shadow:var(--shadow-md);
  font-size:14.5px; font-weight:700; border:1px solid var(--border);
  transition:transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.fab-item:hover{transform:translateX(-6px) scale(1.04); box-shadow:var(--shadow-lg);}
.fab-icon{width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; flex-shrink:0;}
.fab-whatsapp{background:#25D366;}
.fab-call{background:var(--violet);}
.fab-email{background:var(--cyan-ink);}

/* ---------- FAQ accordion (shared: service-detail.html + contact.html) ---------- */
.faq-list{max-width:760px; margin:0 auto; display:grid; gap:14px;}
.faq-item{
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:20px 24px;
}
.faq-item summary{
  font-family:var(--font-display); font-weight:600; font-size:15.5px; cursor:pointer;
  list-style:none; display:flex; justify-content:space-between; align-items:center; color:var(--navy);
  border-radius:8px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; font-size:22px; color:var(--violet); transition:transform 0.25s var(--ease);}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{margin-top:14px; font-size:14.5px;}
.faq-item summary:focus-visible{outline:2px solid var(--cyan); outline-offset:4px;}

.toast{
  position:fixed; bottom:28px; right:28px; background:var(--navy); color:#fff;
  padding:16px 22px; border-radius:12px; font-size:14px; font-weight:600;
  display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-lg);
  /* Hidden state. translateY(140%) was 140% of the toast's own ~55px height,
     about 77px, against an element sitting 28px off the bottom edge - 6px short
     of clearing the viewport, so a sliver of an untriggered success message was
     visible at the bottom of every page. calc(100% + 48px) always clears the
     full height plus the 28px offset whatever the message length, with room to
     spare for the drop shadow. visibility is belt-and-braces: it keeps the
     toast out of the accessibility tree and out of hit-testing while inactive,
     and it is switched with a zero-length transition delayed by the slide so
     the existing 0.4s animation plays unchanged in both directions. */
  transform:translateY(calc(100% + 48px)); visibility:hidden;
  transition:transform 0.4s var(--ease), visibility 0s linear 0.4s; z-index:2000;
}
.toast.show{
  transform:translateY(0); visibility:visible;
  transition:transform 0.4s var(--ease), visibility 0s linear 0s;
}
.toast i{color:var(--mint);}

/* ---------- Breadcrumb / page header ---------- */
.page-header{
  padding:188px 0 56px; background:var(--surface); border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
}
.page-header::before{content:''; position:absolute; inset:0; background:radial-gradient(560px 320px at 90% 0%, rgba(0,217,200,0.10), transparent 60%);}
.page-header > *{position:relative;}
.page-header p{font-size:16.5px; max-width:560px;}

/* ---------- Responsive images ---------- */
.img-frame{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-sm);}
.img-frame img{width:100%; height:100%; object-fit:cover;}

/* ---------- Utility ---------- */
.mt-0{margin-top:0;}
.center{text-align:center;}
/* Contextual links inside body copy.
   The global anchor style is built for navigation and buttons - it inherits
   the surrounding colour and carries no underline - so a link dropped into a
   paragraph was indistinguishable from the text around it (measured: same
   computed colour as its parent, text-decoration none, weight 400). This class
   is applied ONLY to contextual links added inside prose, so nothing that
   already existed changes appearance. */
.inline-link{
  color:var(--violet-ink); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
  transition:color 0.2s var(--ease);
}
.inline-link:hover{color:var(--violet);}
.inline-link:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:2px;}
/* On the dark CTA panels and the dark hero body, violet has too little
   contrast - the brand cyan is the readable counterpart there. */
.cta-section .inline-link, .hero-dark .hero .inline-link{color:var(--cyan);}
.cta-section .inline-link:hover, .hero-dark .hero .inline-link:hover{color:#fff;}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; padding:5px 11px; border-radius:999px;}
.badge-mint{background:rgba(16,185,129,0.12); color:var(--mint-ink);}
.badge-violet{background:rgba(139,92,246,0.1); color:var(--violet);}
.badge-cyan{background:rgba(0,217,200,0.12); color:var(--cyan-ink);}

/* ---------- Service cards (tilt on hover) ---------- */
.service-card{
  position:relative; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--sp-4); transition:transform 0.15s ease, box-shadow 0.35s var(--ease);
  transform-style:preserve-3d; will-change:transform;
}
.service-card:hover{box-shadow:var(--shadow-md);}
.service-card h3{font-size:19px; margin-bottom:10px;}
.service-card p{font-size:14.5px; margin-bottom:18px;}

/* ---------- Process timeline (premium animated roadmap) ---------- */
.process-track{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:var(--sp-3); position:relative; padding-top:6px;}
.process-track::before{
  content:''; position:absolute; top:32px; left:5%; right:5%; height:2px;
  background:repeating-linear-gradient(90deg, var(--border) 0 8px, transparent 8px 14px); z-index:0;
}
.process-track::after{
  content:''; position:absolute; top:32px; left:5%; width:90%; height:3px; z-index:0;
  background:linear-gradient(90deg, var(--violet), var(--cyan), var(--gold));
  transform:scaleX(0); transform-origin:left center;
  transition:transform 1.4s var(--ease) 0.2s;
  border-radius:3px;
}
.process-track.in::after{transform:scaleX(1);}
.process-step{
  position:relative; z-index:1; text-align:center; opacity:0; transform:translateY(22px);
  transition:opacity 0.6s var(--ease), transform 0.6s var(--ease);
  padding:18px 12px 20px; border-radius:18px;
}
.process-track.in .process-step{opacity:1; transform:translateY(0);}
.process-track.in .process-step:nth-child(1){transition-delay:0.05s;}
.process-track.in .process-step:nth-child(2){transition-delay:0.15s;}
.process-track.in .process-step:nth-child(3){transition-delay:0.25s;}
.process-track.in .process-step:nth-child(4){transition-delay:0.35s;}
.process-track.in .process-step:nth-child(5){transition-delay:0.45s;}
.process-track.in .process-step:nth-child(6){transition-delay:0.55s;}
.process-track.in .process-step:nth-child(7){transition-delay:0.65s;}
.process-step:hover{background:var(--card-bg); box-shadow:var(--shadow-md);}

/* Hexagon icon node */
.process-dot{
  position:relative;
  width:64px; height:64px; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--violet-ink); font-size:20px;
  clip-path:polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  border:2px solid var(--violet);
  transition:all 0.35s var(--ease);
}
.process-dot::before{
  content:''; position:absolute; inset:-8px; z-index:-1;
  background:radial-gradient(circle, rgba(139,92,246,0.28), transparent 70%);
  clip-path:polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  opacity:0; transition:opacity 0.35s var(--ease);
}
.process-num{
  position:absolute; top:-6px; right:-4px; width:20px; height:20px; border-radius:50%;
  background:var(--gold); color:var(--navy); font-size:10px; font-weight:800; font-family:var(--font-display);
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 3px #fff;
}
.process-step:hover .process-dot{
  background:linear-gradient(135deg, var(--violet), var(--cyan)); border-color:transparent; color:#fff;
  transform:scale(1.14) translateY(-4px);
}
.process-step:hover .process-dot::before{opacity:1;}
.process-step h3{font-size:16px; margin-bottom:6px; color:var(--navy); letter-spacing:-0.01em;}
.process-step p{font-size:12.5px;}

/* ---------- Tech chips ---------- */
.tech-group-title{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-secondary); margin:var(--sp-4) 0 var(--sp-2);}
.tech-group-title:first-child{margin-top:0;}
.tech-chip{
  display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--border); border-radius:12px;
  padding:14px 16px; font-size:14px; font-weight:600; transition:all 0.25s var(--ease);
}
.tech-chip i{color:var(--violet); font-size:17px;}
.tech-chip:hover{transform:translateY(-4px); border-color:var(--violet); box-shadow:0 10px 24px rgba(139,92,246,0.14);}
.tech-chips-grid{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px;}

/* ---------- Portfolio ---------- */
.filter-bar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:var(--sp-4);}
.filter-btn{padding:9px 18px; border-radius:999px; border:1px solid var(--border); background:#fff; font-size:13.5px; font-weight:600; color:var(--text-secondary); transition:all 0.25s var(--ease);}
.filter-btn.active,.filter-btn:hover{background:var(--navy); color:#fff; border-color:var(--navy);}
.project-card{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); background:#fff; transition:transform 0.35s var(--ease), box-shadow 0.35s var(--ease);}
.project-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.project-card-body{padding:var(--sp-3);}
.tag{display:inline-block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--violet); background:rgba(139,92,246,0.08); padding:4px 10px; border-radius:999px; margin-bottom:10px;}
.mock-wrap{position:relative;}
.coming-soon-badge{position:absolute; top:14px; right:14px; background:rgba(8,31,77,0.78); color:#fff; font-size:11px; font-weight:700; padding:5px 10px; border-radius:999px; z-index:2;}
.launch-badge{position:absolute; top:14px; right:14px; background:var(--gold); color:var(--navy); font-size:11px; font-weight:800; padding:5px 10px; border-radius:999px; z-index:2;}

/* ==========================================================================
   Responsive breakpoints (max-width, descending — mobile styles are the
   unqueried base further up this file):
     Desktop          1200px+
     Tablet Landscape  992-1199px
     Tablet Portrait   768-991px
     Mobile Landscape  481-767px
     Mobile Portrait   320-480px  (375px query below is a small-phone tweak
                                    within this tier, not a separate tier)
   ========================================================================== */
@media (max-width:1200px){
  .container-wide{padding:0 var(--sp-3);}
}
@media (max-width:1024px){
  .grid-3{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .grid-4{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .footer-grid{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);}
  .stat-strip{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .topbar-inner{padding:14px 20px;}
  /* one step down on laptops so the wider type never crowds the tagline */
  .navbar-topbar{font-size:14px;}
  .topbar-contact i{font-size:13px;}
  .topbar-tagline{font-size:14px;}
  /* An odd number of cards in a 2-column grid otherwise leaves the last
     card alone on the left with blank space to its right (the "empty
     space" reported on tablet views of Home/About). Center it instead. */
  .grid-3 > *:last-child:nth-child(odd),
  .grid-4 > *:last-child:nth-child(odd){grid-column:1 / -1; max-width:calc(50% - var(--sp-3)/2); margin:0 auto;}
  .logo-full img,.logo-plate img{height:46px;}
  #navbar.scrolled .logo-full img,#navbar.scrolled .logo-plate img{height:40px;}
}
/* Tablet-landscape: keep the topbar present but compact — the tagline is
   decorative and is the first thing dropped so the contact links never wrap
   awkwardly or overflow before the 768px breakpoint hides the bar entirely. */
@media (max-width:992px){
  .topbar-tagline{display:none;}
  .topbar-contact{gap:14px;}
  .section{padding:var(--sp-9) 0;}
}
@media (max-width:768px){
  .navbar-topbar{display:none;}
  .nav-links{display:none;}
  .menu-toggle{display:flex;}
  .section{padding:var(--sp-8) 0;}
  .grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0, 1fr);}
  .footer-grid{grid-template-columns:minmax(0, 1fr);}
  .cta-section{padding:50px 24px;}
  .page-header{padding:150px 0 50px;}
  .footer-bottom{flex-direction:column; align-items:flex-start;}
  .process-track{grid-template-columns:minmax(0, 1fr); gap:28px;}
  .process-track::before{display:none;}
  .tech-chips-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .nav-inner{padding:8px 20px;}
  .container,.container-wide{padding:0 var(--sp-2);}
  .contact-fab{right:16px; bottom:16px;}
  .fab-main{width:58px; height:58px; font-size:23px;}
  .logo-full img,.logo-plate img,
  #navbar.scrolled .logo-full img,#navbar.scrolled .logo-plate img{height:44px;}
}
@media (max-width:480px){
  .footer-mission p{font-size:16.5px;}
  .cta-section{padding:40px 18px; border-radius:22px;}
  h1{line-height:1.12;}
  .btn{padding:14px 22px; font-size:14px;}
  .logo-full img,.logo-plate img,
  #navbar.scrolled .logo-full img,#navbar.scrolled .logo-plate img{height:40px;}
  .footer-logo-img img{height:36px;}
}
@media (max-width:375px){
  .container,.container-wide{padding:0 16px;}
  .nav-inner{padding:10px 16px;}
  .topbar-inner{padding:13px 16px;}
  .logo-full img,.logo-plate img,
  #navbar.scrolled .logo-full img,#navbar.scrolled .logo-plate img{height:36px;}
}

/* ==========================================================================
   Services mega menu
   --------------------------------------------------------------------------
   Scoped entirely to the navbar. Nothing here touches existing nav links,
   the logo, the top bar or any page content. All values come from the
   existing design tokens.

   Desktop/tablet (>768px): a panel anchored under the fixed #navbar.
   Because it is absolutely positioned inside the navbar it cannot push
   anything around — opening it causes no layout shift. It inherits the
   navbar's stacking context (z-index:1000), so it sits above page content.

   Mobile (<=768px): the panel is not used at all; the mobile menu gets an
   accordion instead (.m-acc, further down).
   ========================================================================== */

/* Left static on purpose: the panel then positions against #navbar (which is
   position:fixed), so it centres on the navbar rather than on the trigger. */
.nav-mega{position:static; display:flex; align-items:center;}

/* The panel is a descendant of .nav-links, so the existing `.nav-links a`
   rules (8px 0 padding, 14.5px text, hover lift, animated ::after underline)
   would otherwise apply to all ten links inside it. Reset them here; the
   component rules below are #navbar-scoped so they outrank this reset. */
#navbar .mega a{
  position:static; padding:0; margin:0;
  font-size:inherit; font-weight:inherit; color:inherit; transform:none;
}
#navbar .mega a::after{content:none; display:none;}
#navbar .mega a:hover{transform:none;}

/* Trigger keeps the exact look of a normal nav link (same font, weight,
   colour and animated underline) — only a chevron is added. */
.nav-mega-trigger{display:inline-flex; align-items:center; gap:7px;}
.nav-mega-trigger .mega-chev{
  font-size:10px; opacity:0.7;
  transition:transform 0.22s var(--ease), opacity 0.22s var(--ease);
}
.nav-mega.open .nav-mega-trigger .mega-chev{transform:rotate(180deg); opacity:1;}

/* ---------- Panel ---------- */
.mega{
  position:absolute; top:calc(100% + 14px); left:50%;
  width:min(940px, calc(100vw - 40px));
  /* translateX centres the panel under the navbar; translateY+opacity give
     the open/close motion. transform is on one axis only so centring is
     never lost mid-animation. */
  transform:translateX(-50%) translateY(-8px);
  opacity:0; visibility:hidden; pointer-events:none;
  background:var(--card-bg); color:var(--text);
  border:1px solid var(--border); border-radius:18px;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  transition:opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s linear;
}
.nav-mega.open .mega{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

/* Over dark heroes the navbar paints its links white
   (body.hero-dark #navbar:not(.scrolled) .nav-links a, specificity 1-3-1).
   The panel is its own white surface sitting inside that same .nav-links, so
   every colour rule below carries the same or greater specificity to stay
   readable in both navbar states. */
#navbar .mega,
body.hero-dark #navbar:not(.scrolled) .nav-links .mega a{color:var(--text);}

/* ---------- Panel header ---------- */
.mega-head{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:20px 26px 0;
}
.mega-head h2{
  font-family:var(--font-display); font-size:14px; font-weight:700;
  letter-spacing:0.02em; color:var(--navy); margin:0;
}
.mega-head p{font-size:12.5px; color:var(--text-secondary); margin:0;}

/* ---------- Service grid ---------- */
.mega-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:6px; padding:16px 18px 18px;
}
#navbar .mega a.mega-item{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 12px 13px; border-radius:14px;
  border:1px solid transparent; background:transparent;
  transition:transform 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
#navbar .mega a.mega-item:hover, #navbar .mega a.mega-item:focus-visible{
  transform:translateY(-3px);
  background:var(--surface); border-color:var(--border);
}
#navbar .mega a.mega-item:focus-visible{outline:2px solid var(--violet); outline-offset:2px;}
.mega-ico{
  flex-shrink:0; width:38px; height:38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center; font-size:16px;
  background:rgba(139,92,246,0.10); color:var(--violet);
  transition:background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
#navbar .mega a.mega-item:hover .mega-ico, #navbar .mega a.mega-item:focus-visible .mega-ico{
  background:linear-gradient(135deg, var(--violet), var(--cyan)); color:#fff;
  transform:scale(1.06);
}
.mega-item-body{min-width:0;}
#navbar .mega .mega-item-title{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-size:14px; font-weight:600;
  margin-bottom:3px; line-height:1.25;
  transition:color 0.2s var(--ease);
}
#navbar .mega a.mega-item .mega-item-title{color:var(--navy);}
#navbar .mega a.mega-item:hover .mega-item-title,
#navbar .mega a.mega-item:focus-visible .mega-item-title{color:var(--violet);}
.mega-item-title .mega-arrow{
  font-size:9px; opacity:0; transform:translateX(-4px);
  transition:opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
#navbar .mega a.mega-item:hover .mega-arrow, #navbar .mega a.mega-item:focus-visible .mega-arrow{opacity:1; transform:translateX(0);}
#navbar .mega a.mega-item .mega-item-desc{
  font-size:12px; line-height:1.45; color:var(--text-secondary); margin:0;
}

/* ---------- Footer CTA ---------- */
.mega-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap;
  padding:14px 26px; background:var(--surface);
  border-top:1px solid var(--border);
}
.mega-foot p{font-size:13px; color:var(--text-secondary); margin:0;}
#navbar .mega .mega-foot a.mega-foot-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:700; color:var(--violet);
  transition:gap 0.2s var(--ease), color 0.2s var(--ease);
}
.mega-foot-cta i{font-size:11px; transition:transform 0.2s var(--ease);}
#navbar .mega .mega-foot a.mega-foot-cta:hover{gap:12px; color:var(--violet-ink);}
.mega-foot-cta:hover i{transform:translateX(3px);}

/* Tablet: two columns rather than four cramped ones. */
@media (max-width:1100px){
  .mega{width:min(560px, calc(100vw - 40px));}
  .mega-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
/* The panel never renders below this width — the mobile accordion takes over. */
@media (max-width:768px){
  .mega{display:none;}
  .nav-mega-trigger .mega-chev{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .mega, .mega-item, .mega-ico, .mega-arrow, .mega-chev{transition:none;}
}

/* ==========================================================================
   Mobile: Services accordion inside #mobile-menu
   Uses the same type and divider treatment as the existing mobile nav links
   so it reads as one list, not a bolted-on component.
   ========================================================================== */
.m-acc{display:flex; flex-direction:column;}
.m-acc-trigger{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font-family:var(--font-display); font-size:24px; font-weight:600; color:var(--text);
  padding:16px 4px; border-bottom:1px solid var(--border);
  transition:color 0.2s var(--ease);
}
.m-acc-trigger:hover, .m-acc-trigger[aria-expanded="true"]{color:var(--violet);}
.m-acc-trigger .m-acc-chev{
  font-size:14px; color:var(--violet);
  transition:transform 0.24s var(--ease);
}
.m-acc-trigger[aria-expanded="true"] .m-acc-chev{transform:rotate(180deg);}

/* Height is set in JS from the panel's own scrollHeight, so the animation is
   exact at any font size and never clips a wrapped label. */
.m-acc-panel{
  max-height:0; overflow:hidden;
  transition:max-height 0.28s var(--ease);
}
#mobile-menu nav .m-acc-panel a{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-body); font-size:15.5px; font-weight:600;
  padding:11px 4px 11px 8px; border-bottom:none; color:var(--text);
}
#mobile-menu nav .m-acc-panel a:hover{color:var(--violet);}
.m-acc-ico{
  flex-shrink:0; width:30px; height:30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; font-size:13px;
  background:rgba(139,92,246,0.10); color:var(--violet);
}
#mobile-menu nav .m-acc-panel a.m-acc-all{
  gap:8px; margin:6px 0 12px; padding-left:8px;
  font-size:14px; font-weight:700; color:var(--violet);
}
#mobile-menu nav .m-acc-panel a.m-acc-all i{font-size:11px;}
@media (prefers-reduced-motion: reduce){
  .m-acc-panel, .m-acc-chev{transition:none;}
}