/* ==========================================================================
   CCS — Consultant in Computer Systems
   Custom stylesheet — layered on top of Tailwind (CDN) utilities.
   ========================================================================== */

:root{
  /* Brand accent colors — stay consistent across Light and Dark themes */
  --electric:#3b82f6;
  --electric-2:#5b9bff;
  --cyan:#22d3ee;
  --violet:#8b5cf6;
  --accent-text:var(--cyan);        /* cyan used as *readable text* on the page bg — darkened in light mode for contrast */

  /* ---------- Dark theme (default) ---------- */
  --navy-950:#04070f;
  --navy-900:#060b18;
  --navy-800:#0a1122;
  --navy-700:#0e1a30;

  --surface-1:rgba(255,255,255,.015);   /* transform-box, stat-chip, automation-card, benefit-chip, value-row, map-card */
  --surface-2:rgba(255,255,255,.02);    /* tab-btn, flow-node chip, workflow-step, partner-card, tech-chip, social-icon */
  --surface-3:rgba(255,255,255,.03);    /* capability-card / diagram-card / industry-card gradient sheen */
  --surface-header:rgba(6,11,24,.78);
  --surface-menu:rgba(6,11,24,.98);
  --surface-elevated:rgba(10,17,34,.9);

  --border-soft:rgba(148,163,184,.12);
  --border-strong:rgba(148,163,184,.22);
  --border-hairline:rgba(255,255,255,.05);
  --glass-border:rgba(148,163,184,.22); /* fixed — for the always-dark hero HUD widget, not themed */

  --text-heading:#ffffff;
  --text-body:#cbd5e1;
  --text-muted:#94a3b8;
  --text-faint:#64748b;
  --text-faint-2:#475569;

  --selection-bg:rgba(59,130,246,.35);
  --selection-text:#ffffff;

  --scrollbar-thumb:#1c2740;
  --scrollbar-thumb-hover:#26314d;

  --map-filter:invert(92%) hue-rotate(180deg) brightness(95%) contrast(90%);
  --watermark:rgba(148,163,184,.08);
  --outline-stroke:rgba(148,163,184,.35);
  --neural-highlight-bg:#ffffff;
  --neural-highlight-glow:rgba(255,255,255,.8);
}

/* ---------- Light theme ---------- */
[data-theme="light"]{
  --accent-text:#0e7490;

  --navy-950:#e7ebf1;
  --navy-900:#f6f8fb;

  --surface-1:rgba(15,23,42,.028);
  --surface-2:rgba(15,23,42,.035);
  --surface-3:rgba(15,23,42,.04);
  --surface-header:rgba(255,255,255,.82);
  --surface-menu:rgba(255,255,255,.97);
  --surface-elevated:rgba(255,255,255,.92);

  --border-soft:rgba(15,23,42,.1);
  --border-strong:rgba(15,23,42,.18);
  --border-hairline:rgba(15,23,42,.08);

  --text-heading:#0f172a;
  --text-body:#334155;
  --text-muted:#475569;
  --text-faint:#5b6472;
  --text-faint-2:#64748b;

  --selection-bg:rgba(59,130,246,.18);
  --selection-text:#0f172a;

  --scrollbar-thumb:#c3cbd8;
  --scrollbar-thumb-hover:#aab4c4;

  --map-filter:none;
  --watermark:rgba(15,23,42,.06);
  --outline-stroke:rgba(15,23,42,.28);
  --neural-highlight-bg:var(--electric-2);
  --neural-highlight-glow:rgba(59,130,246,.5);
}

/* Smooth, professional theme transitions — enabled only after the initial
   theme has settled (see theme.js), so first paint never flashes/animates. */
.theme-ready, .theme-ready *{
  transition:background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

*{ scroll-behavior:auto; }
html{ scroll-behavior:smooth; }
body{ background:var(--navy-900); }

/* Root type scale — nearly every size in this file (Tailwind spacing/type
   scale + the custom component rules below) is expressed in rem, so a
   deliberate, breakpoint-based bump to the root font-size on larger
   viewports scales typography, spacing, buttons and content width together
   — giving the layout the same prominence at 100% browser zoom that it
   previously only had at 125% zoom, without a flat/global transform. Mobile
   and tablet keep the original 16px baseline. */
@media (min-width:1280px){ html{ font-size:17px; } }
@media (min-width:1600px){ html{ font-size:18px; } }

::selection{ background:var(--selection-bg); color:var(--selection-text); }

/* Custom scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--navy-950); }
::-webkit-scrollbar-thumb{ background:var(--scrollbar-thumb); border-radius:8px; border:2px solid var(--navy-950); }
::-webkit-scrollbar-thumb:hover{ background:var(--scrollbar-thumb-hover); }

/* Skip link — fixed high-contrast overlay, intentionally unthemed */
.skip-link{
  position:absolute; left:1rem; top:-4rem; z-index:100;
  background:#fff; color:#000; padding:.6rem 1rem; border-radius:.5rem;
  font-size:.85rem; font-weight:600; transition:top .2s ease;
}
.skip-link:focus{ top:1rem; }

/* Focus visibility (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px;
}

/* Background grid */
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(148,163,184,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 90%);
}

section, header, footer{ position:relative; z-index:1; }

/* ---------- Layout helpers ---------- */
.section-pad{ padding-top:6.5rem; padding-bottom:6.5rem; }
@media (max-width:640px){ .section-pad{ padding-top:4.5rem; padding-bottom:4.5rem; } }

.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-text); font-weight:500;
  display:inline-flex; align-items:center; gap:.5rem;
}
.eyebrow::before{
  content:''; width:1.4rem; height:1px; background:var(--accent-text); display:inline-block;
}
.section-title{
  font-family:'Space Grotesk', sans-serif; font-weight:600; color:var(--text-heading);
  font-size:2rem; line-height:1.15; margin-top:.85rem;
}
@media (min-width:1024px){ .section-title{ font-size:2.65rem; } }
@media (min-width:1536px){ .section-title{ font-size:3rem; } }
.section-lead{
  margin-top:1.1rem; color:var(--text-muted); font-size:1.05rem; line-height:1.7; max-width:42rem;
}

.gradient-text{
  background:linear-gradient(100deg, var(--electric-2), var(--cyan) 60%, var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Buttons ---------- */
.btn-primary, .btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:.9rem;
  padding:.75rem 1.5rem; border-radius:.6rem;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .35s ease, border-color .35s ease, color .35s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(100deg, var(--electric), #2563eb 65%, var(--violet));
  color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 10px 30px -12px rgba(59,130,246,.55);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 16px 36px -12px rgba(59,130,246,.7); }
.btn-secondary{
  background:transparent; color:var(--text-heading); border:1px solid var(--border-strong);
}
.btn-secondary:hover{ border-color:rgba(34,211,238,.5); color:var(--text-heading); transform:translateY(-2px); background:rgba(148,163,184,.06); }
.btn-lg{ padding:.9rem 1.9rem; font-size:.95rem; }

/* ---------- Header ---------- */
#site-header{ background:transparent; border-bottom:1px solid transparent; }
#site-header.is-scrolled{
  background:var(--surface-header); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-soft);
}
.navlink{
  position:relative; padding:.55rem .85rem; color:var(--text-body); border-radius:.4rem;
  transition:color .25s ease;
}
.navlink::after{
  content:''; position:absolute; left:.85rem; right:.85rem; bottom:.25rem; height:1.5px;
  background:linear-gradient(90deg, var(--electric-2), var(--cyan));
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.navlink:hover{ color:var(--text-heading); }
.navlink:hover::after, .navlink.is-active::after{ transform:scaleX(1); }
.navlink.is-active{ color:var(--text-heading); }

/* ---------- Theme switcher ---------- */
.theme-switcher{
  display:inline-flex; align-items:center; gap:.15rem; padding:.25rem; border-radius:999px;
  border:1px solid var(--border-soft); background:var(--surface-2);
}
.theme-switch-btn{
  width:2.1rem; height:2.1rem; flex:none; line-height:0; border-radius:999px; display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); transition:background .3s ease, color .3s ease;
}
/* Sized in rem (not a fixed px) so the icon:button ratio stays constant as
   the root font-size scales at the 1280px/1600px breakpoints above — a
   fixed px icon inside a rem-sized button would drift off-center/uneven
   between zoom levels since only the button would grow. */
.theme-switch-btn svg{ width:.9375rem; height:.9375rem; flex:none; }
.theme-switch-btn:hover:not(.is-active){ color:var(--text-heading); }
.theme-switch-btn.is-active{
  color:#0b1526; background:linear-gradient(100deg, var(--electric-2), var(--cyan));
  box-shadow:0 4px 14px -6px rgba(59,130,246,.6);
}
.mobile-theme-label{
  font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:.75rem;
}
.theme-switcher-mobile{ width:100%; justify-content:space-between; padding:.35rem; }
.theme-switcher-mobile .theme-switch-btn{
  flex:1; width:auto; height:2.6rem; border-radius:999px; gap:.4rem; font-size:.72rem; font-weight:600;
  font-family:'Space Grotesk',sans-serif;
}

.hamburger{ display:inline-block; width:22px; height:16px; position:relative; }
.hamburger span{
  position:absolute; left:0; right:0; height:2px; background:var(--text-heading); border-radius:2px;
  transition:transform .35s ease, opacity .25s ease, top .35s ease, background .3s ease;
}
.hamburger span:nth-child(1){ top:0; }
.hamburger span:nth-child(2){ top:7px; }
.hamburger span:nth-child(3){ top:14px; }
#menu-toggle[aria-expanded="true"] .hamburger span:nth-child(1){ top:7px; transform:rotate(45deg); }
#menu-toggle[aria-expanded="true"] .hamburger span:nth-child(2){ opacity:0; }
#menu-toggle[aria-expanded="true"] .hamburger span:nth-child(3){ top:7px; transform:rotate(-45deg); }

.mobile-menu{
  position:fixed; top:6rem; left:0; right:0; bottom:0;
  background:var(--surface-menu); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  display:flex; flex-direction:column; overflow-y:auto;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px);
  transition:opacity .4s ease, transform .4s ease, visibility 0s linear .4s, background-color .3s ease;
}
.mobile-menu.is-open{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  transition:opacity .4s ease, transform .4s ease, visibility 0s linear 0s, background-color .3s ease;
}
.mobile-navlink{ display:block; padding:.7rem 0; color:var(--text-heading); }
.mobile-navlink:hover{ color:var(--accent-text); }

/* ---------- Hero ---------- */
#hero-canvas{ z-index:0; }
.hero-glow{ position:absolute; border-radius:999px; filter:blur(90px); z-index:0; pointer-events:none; }
.hero-glow-a{ width:32rem; height:32rem; top:-8rem; right:-6rem; background:radial-gradient(circle, rgba(59,130,246,.28), transparent 70%); }
.hero-glow-b{ width:26rem; height:26rem; bottom:-6rem; left:-8rem; background:radial-gradient(circle, rgba(139,92,246,.2), transparent 70%); }

.hero-tag{
  font-family:'JetBrains Mono', monospace; font-size:.72rem; letter-spacing:.06em;
  color:var(--text-muted); position:relative; padding-left:1.1rem;
}
.hero-tag::before{ content:''; position:absolute; left:0; top:.35rem; width:6px; height:6px; border-radius:999px; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }

.scroll-cue{
  position:absolute; left:50%; bottom:1.75rem; transform:translateX(-50%);
  width:26px; height:42px; border:1.5px solid var(--border-strong); border-radius:999px;
  display:flex; justify-content:center; padding-top:7px; z-index:2;
}
.scroll-cue span{ width:4px; height:8px; background:var(--cyan); border-radius:999px; animation:scrollcue 1.8s ease-in-out infinite; }
@keyframes scrollcue{ 0%{ opacity:1; transform:translateY(0);} 70%{ opacity:0; transform:translateY(14px);} 100%{opacity:0;} }

/* Hero architecture visual — a self-contained dark "HUD glass" widget;
   kept dark in both themes intentionally, like a floating device screen. */
.arch-visual{ position:relative; width:100%; max-width:26.25rem; aspect-ratio:1/1; margin:0 auto; }
.arch-ring{ position:absolute; inset:0; border:1px solid var(--glass-border); border-radius:999px; }
.arch-ring-1{ inset:8%; animation:spin 40s linear infinite; border-style:dashed; border-color:rgba(59,130,246,.25); }
.arch-ring-2{ inset:22%; animation:spin 60s linear infinite reverse; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.arch-core{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:104px; height:104px; border-radius:999px;
  background:radial-gradient(circle at 35% 30%, rgba(59,130,246,.35), rgba(6,11,24,.9) 70%);
  border:1px solid rgba(94,159,255,.4);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem;
  box-shadow:0 0 60px -8px rgba(59,130,246,.55);
}
.arch-core-dot{ width:8px; height:8px; border-radius:999px; background:var(--cyan); box-shadow:0 0 14px var(--cyan); animation:pulse-dot 2.4s ease-in-out infinite; }
@keyframes pulse-dot{ 0%,100%{ opacity:.6; transform:scale(1);} 50%{ opacity:1; transform:scale(1.4);} }
.arch-node{
  position:absolute; top:50%; left:50%;
  transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y)));
  padding:.5rem .9rem; font-family:'JetBrains Mono', monospace; font-size:.68rem; letter-spacing:.05em;
  background:rgba(10,17,34,.85); border:1px solid var(--glass-border); border-radius:999px; color:#cbd5e1;
  animation:float-node 5s ease-in-out infinite; animation-delay:var(--d);
  backdrop-filter:blur(6px);
}
@keyframes float-node{ 0%,100%{ margin-top:0; } 50%{ margin-top:-9px; } }
.arch-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.arch-lines line{ stroke:rgba(94,159,255,.28); stroke-width:1; stroke-dasharray:4 5; animation:dash 6s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset:-90; } }

/* ---------- About / capability cards ---------- */
.capability-card{
  background:linear-gradient(180deg, var(--surface-3), rgba(255,255,255,0));
  border:1px solid var(--border-soft); border-radius:1rem; padding:1.6rem;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s ease, box-shadow .4s ease, background .4s ease;
}
.capability-card:hover{
  transform:translateY(-6px); border-color:rgba(59,130,246,.45);
  box-shadow:0 22px 40px -20px rgba(59,130,246,.35);
  background:linear-gradient(180deg, rgba(59,130,246,.06), rgba(255,255,255,0));
}
.capability-card h3{ font-family:'Space Grotesk',sans-serif; font-weight:600; color:var(--text-heading); font-size:1.02rem; margin-top:1.1rem; }
.capability-card p{ margin-top:.4rem; font-size:.88rem; color:var(--text-muted); line-height:1.55; }

.icon-tile{
  width:2.9rem; height:2.9rem; border-radius:.75rem; display:flex; align-items:center; justify-content:center;
  background:rgba(59,130,246,.1); border:1px solid rgba(59,130,246,.22); color:var(--electric-2);
  transition:background .35s ease, transform .35s ease;
}
.capability-card:hover .icon-tile{ background:rgba(59,130,246,.2); transform:scale(1.06); }
.icon-tile svg{ width:1.35rem; height:1.35rem; }
.icon-tile-sm{ width:2.4rem; height:2.4rem; }
.icon-tile-sm svg{ width:1.1rem; height:1.1rem; }

/* ---------- Vision chain ---------- */
.vision-chain{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1.75rem; }
.vision-chain-line{
  position:absolute; left:0; right:0; top:1.45rem; height:1px; background:var(--border-soft);
  display:none;
}
.vision-chain-pulse{
  position:absolute; top:-2.5px; width:6px; height:6px; border-radius:999px; background:var(--cyan);
  box-shadow:0 0 12px var(--cyan); animation:chain-pulse 5s linear infinite;
}
@keyframes chain-pulse{ 0%{ left:0; opacity:0;} 8%{opacity:1;} 92%{opacity:1;} 100%{ left:100%; opacity:0; } }
.vision-node{ position:relative; padding-top:.25rem; }
.vision-num{ font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--text-faint-2); display:block; margin-bottom:.9rem; }
.vision-node h3{ font-family:'Space Grotesk',sans-serif; font-weight:600; color:var(--text-heading); margin-top:1rem; font-size:1.02rem; }
.vision-node p{ margin-top:.5rem; font-size:.87rem; color:var(--text-muted); line-height:1.6; }

@media (min-width:1024px){
  .vision-chain-line{ display:block; }
}
@media (max-width:1023px){
  .vision-chain{ grid-template-columns:1fr; gap:2.25rem; padding-left:1.5rem; border-left:1px solid var(--border-soft); }
}

/* ---------- Tabs ---------- */
.tab-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Space Grotesk',sans-serif; font-size:.82rem; font-weight:600; letter-spacing:.01em;
  padding:.62rem 1.05rem; border-radius:999px; color:var(--text-muted);
  border:1px solid var(--border-soft); background:var(--surface-2);
  transition:all .3s ease;
}
.tab-btn svg{ width:15px; height:15px; flex:none; }
.tab-btn:hover{ color:var(--text-heading); border-color:var(--border-strong); }
.tab-btn.is-active{
  color:var(--text-heading); border-color:rgba(59,130,246,.55);
  background:linear-gradient(100deg, rgba(59,130,246,.22), rgba(139,92,246,.12));
  box-shadow:0 8px 20px -10px rgba(59,130,246,.5);
}

.service-panel{ display:none; }
.service-panel.is-active{ display:block; animation:panel-in .5s cubic-bezier(.2,.8,.2,1); }
@keyframes panel-in{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }

.panel-title{ font-family:'Space Grotesk',sans-serif; font-weight:600; color:var(--text-heading); font-size:1.5rem; line-height:1.25; }
.panel-text{ margin-top:.9rem; color:var(--text-muted); line-height:1.7; }
.feature-list{ margin-top:1.4rem; display:flex; flex-direction:column; gap:.75rem; }
.feature-list li{
  position:relative; padding-left:1.6rem; font-size:.92rem; color:var(--text-body); line-height:1.5;
}
.feature-list li::before{
  content:''; position:absolute; left:0; top:.42rem; width:9px; height:9px; border-radius:2px;
  background:linear-gradient(135deg, var(--electric-2), var(--cyan));
}

.diagram-card{
  background:linear-gradient(180deg, var(--surface-3), rgba(255,255,255,0));
  border:1px solid var(--border-soft); border-radius:1.1rem; padding:2rem 1.5rem;
}
.diagram-label{ font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }
.diagram-tag{ margin-top:1.5rem; font-size:.8rem; color:var(--text-faint); border-top:1px solid var(--border-soft); padding-top:1rem; }

/* Flow diagram */
.flow-diagram{ display:flex; align-items:center; justify-content:space-between; margin-top:1.25rem; }
.flow-node{
  display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center; flex:none;
  font-size:.72rem; font-weight:600; color:var(--text-body);
}
.flow-node svg{ width:1.6rem; height:1.6rem; color:var(--electric-2); }
.flow-node span{ font-family:'Space Grotesk',sans-serif; line-height:1.25; }
.flow-node-sm{ font-size:.68rem; }
.flow-node-sm span{
  display:inline-block; padding:.6rem .75rem; border:1px solid var(--border-strong); border-radius:.6rem;
  background:var(--surface-2);
}
.flow-node.is-accent span, .flow-node-sm.is-accent span{ color:#0b1526; background:linear-gradient(100deg,var(--electric-2),var(--cyan)); border-color:transparent; font-weight:700; }
.flow-line{ position:relative; flex:1; height:1px; background:var(--border-soft); margin:0 .5rem; min-width:1.25rem; top:-1.1rem; }
.flow-dot{
  position:absolute; top:50%; left:0; width:6px; height:6px; margin-top:-3px; border-radius:999px;
  background:var(--cyan); box-shadow:0 0 10px var(--cyan);
  animation:flow-travel 2.4s linear infinite;
}
@keyframes flow-travel{ 0%{ left:0; opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ left:100%; opacity:0; } }
.flow-diagram-5 .flow-node-sm span{ font-size:.65rem; padding:.55rem .6rem; }

/* Data Value Chain (5-node) — keep every node on one line and perfectly
   centered on the same row at every width. The base flow-line already
   shrinks (flex:1) but its min-width/margins plus the node padding made the
   row wider than the diagram-card between ~1024–1439px (the breakpoint
   where the services grid becomes 2 columns), pushing "Business Insights"
   past the card edge. Scoped to .flow-diagram-5 only; other flow diagrams
   (AWS Cloud / Application Engineering / AI-ML) are untouched. */
.flow-diagram-5{ flex-wrap:nowrap; }
.flow-diagram-5 .flow-node-sm{ flex:0 1 auto; min-width:0; }
.flow-diagram-5 .flow-node-sm span{ white-space:nowrap; }
.flow-diagram-5 .flow-line{ min-width:.375rem; margin:0 .3rem; }

@media (min-width:1024px) and (max-width:1439px){
  #panel-data .diagram-card{ padding-left:1rem; padding-right:1rem; }
  .flow-diagram-5 .flow-node-sm span{ font-size:.6rem; padding:.5rem .5rem; }
  .flow-diagram-5 .flow-line{ margin:0 .2rem; min-width:.25rem; }
}

@media (max-width:639px){
  .flow-diagram{ flex-direction:column; align-items:stretch; gap:0; }
  .flow-line{ width:1px; height:1.75rem; margin:.15rem auto; top:0; }
  .flow-dot{ left:50%; top:0; margin-left:-3px; margin-top:0; animation-name:flow-travel-v; }
  @keyframes flow-travel-v{ 0%{ top:0; opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{ top:100%; opacity:0;} }
  .flow-diagram-5 .flow-node-sm{ flex:none; min-width:0; }
  .flow-diagram-5 .flow-node-sm span{ white-space:normal; }
  .flow-diagram-5 .flow-line{ flex:none; margin:.15rem auto; }
}

/* Legacy transformation */
.transform-row{ display:flex; align-items:center; gap:1.25rem; }
.transform-box{
  flex:1; text-align:center; padding:1.6rem 1rem; border-radius:1rem;
  border:1px solid var(--border-soft); background:var(--surface-1);
}
.transform-box.is-modern{ border-color:rgba(34,211,238,.4); background:linear-gradient(160deg, rgba(59,130,246,.12), rgba(34,211,238,.06)); }
.transform-tag{ display:block; font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-bottom:.5rem; }
.transform-box p{ font-family:'Space Grotesk',sans-serif; font-weight:600; color:var(--text-heading); font-size:.95rem; }
.transform-arrow{ flex:none; display:flex; flex-direction:column; align-items:center; gap:.3rem; color:var(--cyan); }
.transform-arrow svg{ width:2.2rem; height:1.4rem; }
.transform-arrow span{ font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
@media (max-width:639px){ .transform-row{ flex-direction:column; } .transform-arrow{ transform:rotate(90deg); } }

.stat-grid{ margin-top:.9rem; display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; }
.stat-chip{
  display:flex; flex-direction:column; gap:.15rem; padding:.9rem 1rem; border-radius:.75rem;
  border:1px solid var(--border-soft); background:var(--surface-1);
}
.stat-chip span:last-child{ font-size:.72rem; color:var(--text-muted); }
.stat-num{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.5rem; color:var(--text-heading); }
.stat-arrow{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.5rem; }
.stat-arrow.up{ color:#4ade80; }
.stat-arrow.down{ color:var(--accent-text); }

.bar-chart{ margin-top:.9rem; display:flex; align-items:flex-end; gap:.6rem; height:6rem; }
.bar-chart span{
  flex:1; height:var(--h); border-radius:.3rem .3rem 0 0;
  background:linear-gradient(180deg, var(--cyan), var(--electric));
  transform:scaleY(0); transform-origin:bottom; transition:transform .9s cubic-bezier(.2,.8,.2,1);
}
.diagram-card.in-view .bar-chart span, .in-view .bar-chart span{ transform:scaleY(1); }
.bar-chart span:nth-child(1){ transition-delay:.05s; } .bar-chart span:nth-child(2){ transition-delay:.15s; }
.bar-chart span:nth-child(3){ transition-delay:.25s; } .bar-chart span:nth-child(4){ transition-delay:.35s; }
.bar-chart span:nth-child(5){ transition-delay:.45s; } .bar-chart span:nth-child(6){ transition-delay:.55s; }

/* Neural net */
.neural-net{ position:relative; height:210px; margin-top:1rem; color:rgba(94,159,255,.35); }
.neural-lines{ position:absolute; inset:0; width:100%; height:100%; }
.neural-node{
  position:absolute; width:11px; height:11px; margin:-5.5px; border-radius:999px;
  background:var(--electric-2); box-shadow:0 0 10px rgba(59,130,246,.7);
  animation:pulse-dot 2.6s ease-in-out infinite; animation-delay:var(--d);
}
.neural-node-mid{ background:var(--cyan); box-shadow:0 0 10px rgba(34,211,238,.7); }
.neural-node-out{ background:var(--neural-highlight-bg); width:14px; height:14px; margin:-7px; box-shadow:0 0 16px var(--neural-highlight-glow); }

/* ---------- Workflow strip ---------- */
.workflow-strip{ display:flex; align-items:center; }
.workflow-step{
  flex:none; padding:.85rem 1.3rem; border-radius:999px; border:1px solid var(--border-soft);
  background:var(--surface-2); font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.85rem; color:var(--text-body);
}
.workflow-step.is-accent{ color:#0b1526; background:linear-gradient(100deg,var(--electric-2),var(--cyan)); border-color:transparent; }
.workflow-line{ position:relative; flex:1; height:1px; background:var(--border-soft); margin:0 .25rem; min-width:1rem; }
.workflow-line .flow-dot{ box-shadow:0 0 10px var(--cyan); }
@media (max-width:767px){
  .workflow-strip{ flex-direction:column; align-items:stretch; }
  .workflow-step{ text-align:center; }
  .workflow-line{ width:1px; height:1.75rem; margin:.25rem auto; }
  .workflow-line .flow-dot{ left:50%; top:0; margin-left:-3px; animation-name:flow-travel-v; }
}

.automation-card{
  border:1px solid var(--border-soft); border-radius:1rem; padding:1.5rem;
  background:var(--surface-1); transition:transform .35s ease, border-color .35s ease;
}
.automation-card:hover{ transform:translateY(-5px); border-color:rgba(139,92,246,.4); }
.automation-num{ font-family:'JetBrains Mono',monospace; color:var(--text-faint-2); font-size:.78rem; }
.automation-card h3{ font-family:'Space Grotesk',sans-serif; font-weight:600; color:var(--text-heading); margin-top:.6rem; font-size:.98rem; }
.automation-card p{ margin-top:.4rem; font-size:.85rem; color:var(--text-muted); line-height:1.55; }

/* ---------- Industries ---------- */
.industry-card{
  position:relative; overflow:hidden; padding:2.25rem 1.75rem; border-radius:1.25rem;
  border:1px solid var(--border-soft); background:linear-gradient(160deg, var(--surface-3), rgba(255,255,255,0));
  transition:border-color .4s ease, transform .4s ease;
}
.industry-card:hover{ transform:translateY(-4px); border-color:rgba(59,130,246,.4); }
.industry-bg{ position:absolute; right:-1.5rem; bottom:-1.5rem; width:13rem; height:13rem; color:var(--watermark); pointer-events:none; }
.industry-card h3{ font-family:'Space Grotesk',sans-serif; font-weight:600; color:var(--text-heading); font-size:1.2rem; margin-top:1.2rem; }
.dot-list{ margin-top:1rem; display:flex; flex-direction:column; gap:.55rem; position:relative; }
.dot-list li{ position:relative; padding-left:1.3rem; font-size:.9rem; color:var(--text-muted); }
.dot-list li::before{ content:''; position:absolute; left:0; top:.5rem; width:6px; height:6px; border-radius:999px; background:var(--cyan); }

/* ---------- Why choose (alternating) ---------- */
.why-list{ display:flex; flex-direction:column; gap:3rem; }
.why-row{ display:flex; align-items:flex-start; gap:2rem; max-width:44rem; }
.why-row-rev{ margin-left:auto; flex-direction:row-reverse; text-align:right; }
.why-num{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:2.75rem; line-height:1;
  color:transparent; -webkit-text-stroke:1px var(--outline-stroke); flex:none;
}
.why-row h3{ font-family:'Space Grotesk',sans-serif; font-weight:600; color:var(--text-heading); font-size:1.25rem; }
.why-row p{ margin-top:.6rem; color:var(--text-muted); line-height:1.7; max-width:32rem; }
@media (max-width:767px){
  .why-row, .why-row-rev{ flex-direction:row; text-align:left; margin-left:0; gap:1.25rem; }
  .why-num{ font-size:2rem; }
}

/* ---------- Partners ---------- */
.partner-card{
  padding:2rem 1.5rem; border-radius:1.1rem; border:1px solid var(--border-soft);
  background:var(--surface-2); text-align:center; transition:transform .35s ease, border-color .35s ease;
}
.partner-card:hover{ transform:translateY(-5px); border-color:rgba(34,211,238,.4); }
.partner-badge{ display:inline-block; font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text); }
.partner-name{ margin-top:.9rem; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.55rem; color:var(--text-heading); }
.partner-tag{ margin-top:.35rem; font-size:.8rem; color:var(--text-faint); }
.benefit-chip{
  font-size:.78rem; font-weight:500; color:var(--text-body); padding:.5rem 1rem; border-radius:999px;
  border:1px solid var(--border-soft); background:var(--surface-1);
}

/* ---------- Timeline ---------- */
.timeline{ position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:1.5rem; }
.timeline-track{ position:absolute; left:0; right:0; top:6px; height:2px; background:var(--border-soft); display:none; }
.timeline-progress{ position:absolute; left:0; top:0; height:100%; width:0%; background:linear-gradient(90deg,var(--electric-2),var(--cyan)); transition:width 1.4s cubic-bezier(.2,.8,.2,1); }
.timeline-step{ position:relative; padding-top:2rem; }
.timeline-dot{
  position:absolute; top:0; left:0; width:14px; height:14px; border-radius:999px;
  background:var(--navy-900); border:2px solid var(--border-strong);
  transition:border-color .4s ease, background .4s ease, box-shadow .4s ease;
}
.timeline-step.in-view .timeline-dot{ border-color:var(--cyan); background:var(--cyan); box-shadow:0 0 14px var(--cyan); }
.timeline-index{ display:block; font-family:'JetBrains Mono',monospace; font-size:.7rem; color:var(--text-faint-2); margin-top:.75rem; }
.timeline-step h3{ font-family:'Space Grotesk',sans-serif; font-weight:600; color:var(--text-heading); font-size:1.02rem; margin-top:.35rem; }
.timeline-step p{ margin-top:.5rem; font-size:.85rem; color:var(--text-muted); line-height:1.55; }

@media (min-width:1024px){ .timeline-track{ display:block; } }
@media (max-width:1023px){
  .timeline{ grid-template-columns:1fr; gap:2rem; padding-left:1.6rem; }
  .timeline::before{ content:''; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--border-soft); }
  .timeline-dot{ left:-1.6rem; }
}

/* ---------- Capabilities ---------- */
.cap-panel{ display:none; }
.cap-panel.is-active{ display:block; animation:panel-in .5s cubic-bezier(.2,.8,.2,1); }
.tech-grid{ display:flex; flex-wrap:wrap; gap:.75rem; }
.tech-chip{
  font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--text-body); padding:.65rem 1.1rem;
  border-radius:.6rem; border:1px solid var(--border-soft); background:var(--surface-2);
  transition:border-color .3s ease, color .3s ease, transform .3s ease;
}
.tech-chip:hover{ border-color:rgba(59,130,246,.5); color:var(--text-heading); transform:translateY(-3px); }

/* ---------- Value proposition ---------- */
.value-row{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.25rem;
  padding:1.35rem 1.5rem; border-radius:1rem; border:1px solid var(--border-soft); background:var(--surface-1);
}
.value-before{ font-size:.92rem; color:var(--text-muted); }
.value-after{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.95rem; color:var(--text-heading); }
.value-arrow{ color:var(--cyan); flex:none; }
.value-arrow svg{ width:1.5rem; height:1.5rem; }
@media (max-width:639px){
  .value-row{ grid-template-columns:1fr; text-align:center; }
  .value-arrow svg{ transform:rotate(90deg); margin:0 auto; }
}

/* ---------- Final CTA ---------- */
.cta-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 50% 40%, rgba(59,130,246,.16), transparent 70%);
}

/* ---------- Contact ---------- */
.contact-line{
  display:flex; align-items:center; gap:.9rem; font-size:.95rem; color:var(--text-body);
  transition:color .3s ease;
}
.contact-line svg{ width:1.2rem; height:1.2rem; color:var(--electric-2); flex:none; }
.contact-line:hover{ color:var(--text-heading); }
.contact-line-static{ cursor:default; align-items:flex-start; }
.contact-line-static:hover{ color:var(--text-body); }
.contact-line-static svg{ margin-top:.1rem; }

/* ---------- Map embed ---------- */
.map-card{
  border:1px solid var(--border-soft); border-radius:1rem; overflow:hidden;
  background:var(--surface-1);
}
.map-frame-wrap{ position:relative; width:100%; aspect-ratio:4/3; }
.map-frame-wrap-lg{ aspect-ratio:4/3; }
@media (min-width:1024px){
  .map-frame-wrap-lg{ aspect-ratio:auto; height:100%; min-height:26rem; }
}
.map-frame{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
  filter:var(--map-filter);
}

/* ---------- Footer: social icons ---------- */
.social-icon{
  width:2.5rem; height:2.5rem; border-radius:999px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-soft); background:var(--surface-2); color:var(--text-muted);
  transition:border-color .3s ease, color .3s ease, transform .3s ease, background .3s ease;
}
.social-icon svg{ width:1.05rem; height:1.05rem; }
.social-icon:hover{ color:var(--text-heading); border-color:rgba(59,130,246,.5); background:rgba(59,130,246,.12); transform:translateY(-2px); }

/* ---------- Footer: designed by ---------- */
.designed-by{ display:inline-flex; align-items:center; gap:.65rem; }
.designed-by span{ font-size:.78rem; color:var(--text-faint); }
.designed-by-logo{ height:1rem; width:auto; object-fit:contain; opacity:.9; transition:opacity .3s ease; }
.designed-by:hover .designed-by-logo{ opacity:1; }
.designed-by-logo-for-light{ display:none; }
[data-theme="light"] .designed-by-logo-for-dark{ display:none; }
[data-theme="light"] .designed-by-logo-for-light{ display:inline-block; }

/* ---------- Footer ---------- */
.footer-heading{ font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-bottom:1rem; }
.footer-links{ display:flex; flex-direction:column; gap:.65rem; }
.footer-links a{ font-size:.88rem; color:var(--text-muted); transition:color .25s ease; }
.footer-links a:hover{ color:var(--accent-text); }

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:40; width:2.9rem; height:2.9rem; border-radius:999px;
  background:var(--surface-elevated); border:1px solid var(--border-strong); color:var(--text-body); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .35s ease, transform .35s ease, border-color .3s ease, background-color .3s ease, color .3s ease;
}
.back-to-top.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
.back-to-top:hover{ border-color:rgba(34,211,238,.5); color:var(--text-heading); }
.back-to-top svg{ width:1.15rem; height:1.15rem; }

/* ---------- Scroll reveal ---------- */
[data-reveal]{
  opacity:0; transform:translateY(24px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1),
             background-color .3s ease, color .3s ease, border-color .3s ease;
}
[data-reveal].in-view{ opacity:1; transform:none; }

/* ---------- Theme: Light-mode overrides for the small set of Tailwind
   utility classes used directly in the markup (body bg/text, alternating
   section tint, hairline borders, headings, secondary text, link hovers,
   text selection). Everything else is themed above via CSS variables. ---------- */
[data-theme="light"] .bg-navy-900{ background-color:#f6f8fb; }
[data-theme="light"] .bg-navy-800\/40{ background-color:rgba(15,23,42,.035); }
[data-theme="light"] .border-white\/5{ border-color:rgba(15,23,42,.08); }
[data-theme="light"] .text-white{ color:#0f172a; }
[data-theme="light"] .text-slate-200{ color:#1e293b; }
[data-theme="light"] .text-slate-400{ color:#475569; }
[data-theme="light"] .text-slate-500{ color:#64748b; }
[data-theme="light"] .text-slate-600{ color:#94a3b8; }
[data-theme="light"] .text-slate-700{ color:#cbd5e1; }
[data-theme="light"] .hover\:text-white:hover{ color:#0f172a; }
[data-theme="light"] .hover\:text-cyan:hover{ color:#0e7490; }
[data-theme="light"] .selection\:bg-electric\/30 ::selection{ background-color:rgba(59,130,246,.18); }
[data-theme="light"] .selection\:bg-electric\/30 ::-moz-selection{ background-color:rgba(59,130,246,.18); }
[data-theme="light"] .selection\:text-white ::selection{ color:#0f172a; }
[data-theme="light"] .selection\:text-white ::-moz-selection{ color:#0f172a; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1; transform:none; }
  .bar-chart span{ transform:scaleY(1); }
}