/* ═══════════════════════════════════════════════════
   SYMBIOSE IT — Shared Design System
   ═══════════════════════════════════════════════════ */

:root {
  --c-cyan:      #00ffea;
  --c-purple:    #a855f7;
  --c-text:      #f8fafc;
  --c-muted:     rgba(248,250,252,0.52);
  --c-base:      #0a0a0a;
  --c-elevated:  #0f172a;
  --c-glass:     rgba(15,23,42,0.78);
  --c-pillar:    #00ffea;        /* overridden per page */
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
}

/* ── Scrollbar ── */
:root { scrollbar-color: var(--c-cyan) #111; scrollbar-width: thin; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: var(--c-cyan); border-radius: 3px; }

html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

body {
  background: var(--c-base);
  color: var(--c-text);
  font-family: 'DM Sans', sans-serif;
  overflow-x: hidden;
}

/* ── Keyframes ── */
@keyframes pulse-glow {
  0%,100% { opacity:.5; transform:scale(1); }
  50%      { opacity:1; transform:scale(1.07); }
}
@keyframes fade-in-up {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes scroll-pulse {
  0%   { transform:translateY(-100%); opacity:0; }
  30%  { opacity:1; }
  100% { transform:translateY(200%); opacity:0; }
}
@keyframes dash-flow {
  to { stroke-dashoffset: -24; }
}
@keyframes slide-in-left {
  from { opacity:0; transform:translateX(-24px); }
  to   { opacity:1; transform:translateX(0); }
}

/* ═══════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════ */

#nav {
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition: background 350ms ease, backdrop-filter 350ms ease, border-color 350ms ease;
  border-bottom: 1px solid transparent;
}
#nav.scrolled {
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-color: rgba(0,255,234,0.07);
}
.nav-inner {
  max-width:1280px; margin:0 auto;
  padding:0 1.5rem; height:4rem;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo {
  font-family:'Syne',sans-serif; font-weight:800; font-size:1.125rem;
  letter-spacing:-.02em; text-decoration:none; display:flex; align-items:baseline;
}
.logo-sym { color:var(--c-cyan); }
.logo-it  { color:var(--c-text); }

.nav-links { display:none; list-style:none; gap:2.25rem; align-items:center; }
@media (min-width:768px) { .nav-links { display:flex; } }

.nav-link {
  font-family:'DM Sans',sans-serif; font-size:.875rem; font-weight:500;
  color:rgba(248,250,252,.62); text-decoration:none;
  position:relative; padding-bottom:2px;
  transition: color 200ms ease;
}
.nav-link::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:1px; background:var(--c-cyan);
  transition: width 260ms var(--ease-spring);
}
.nav-link:hover { color:var(--c-text); }
.nav-link:hover::after { width:100%; }
.nav-link:focus-visible { outline:2px solid var(--c-cyan); outline-offset:4px; border-radius:2px; }
.nav-link:active { opacity:.6; }

#nav-toggle {
  display:flex; align-items:center; justify-content:center;
  background:none; border:1px solid rgba(255,255,255,.12);
  border-radius:6px; padding:.45rem; cursor:pointer; color:var(--c-text);
  transition: border-color 200ms ease, background 200ms ease, opacity 200ms ease;
}
@media (min-width:768px) { #nav-toggle { display:none; } }
#nav-toggle:hover { border-color:var(--c-cyan); background:rgba(0,255,234,.05); }
#nav-toggle:focus-visible { outline:2px solid var(--c-cyan); outline-offset:3px; }
#nav-toggle:active { opacity:.65; }

#mobile-menu {
  padding:1rem 1.5rem 1.5rem;
  display:none; flex-direction:column; gap:1.25rem;
  border-top:1px solid rgba(255,255,255,.05);
  background:rgba(8,8,8,.97);
}
#mobile-menu:not([hidden]) { display:flex; }
#mobile-menu .nav-link { font-size:1rem; padding:.25rem 0; }

/* ═══════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════ */

.btn-primary {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.875rem 2rem; background:var(--c-cyan); color:#0a0a0a;
  font-family:'Syne',sans-serif; font-weight:700; font-size:.9375rem;
  border-radius:6px; text-decoration:none; border:none; cursor:pointer; white-space:nowrap;
  box-shadow: 0 0 28px rgba(0,255,234,.38), 0 4px 18px rgba(0,0,0,.45);
  transition: transform 220ms var(--ease-spring), box-shadow 220ms ease, opacity 220ms ease;
}
.btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 0 44px rgba(0,255,234,.58), 0 8px 26px rgba(0,0,0,.5);
}
.btn-primary:focus-visible { outline:2px solid var(--c-cyan); outline-offset:3px; }
.btn-primary:active { transform:translateY(0); opacity:.78; }

.btn-ghost {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.875rem 2rem; background:transparent; color:var(--c-text);
  font-family:'Syne',sans-serif; font-weight:600; font-size:.9375rem;
  border-radius:6px; text-decoration:none; cursor:pointer; white-space:nowrap;
  border:1px solid rgba(248,250,252,.18);
  transition: border-color 220ms ease, color 220ms ease, transform 220ms var(--ease-spring), opacity 220ms ease;
}
.btn-ghost:hover { border-color:rgba(0,255,234,.48); color:var(--c-cyan); transform:translateY(-2px); }
.btn-ghost:focus-visible { outline:2px solid var(--c-cyan); outline-offset:3px; }
.btn-ghost:active { transform:translateY(0); opacity:.68; }

.btn-pillar {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.875rem 2rem; background:var(--c-pillar); color:#0a0a0a;
  font-family:'Syne',sans-serif; font-weight:700; font-size:.9375rem;
  border-radius:6px; text-decoration:none; border:none; cursor:pointer; white-space:nowrap;
  box-shadow: 0 0 28px color-mix(in srgb, var(--c-pillar) 40%, transparent), 0 4px 18px rgba(0,0,0,.45);
  transition: transform 220ms var(--ease-spring), box-shadow 220ms ease, opacity 220ms ease;
}
.btn-pillar:hover { transform:translateY(-2px); opacity:.9; }
.btn-pillar:focus-visible { outline:2px solid var(--c-pillar); outline-offset:3px; }
.btn-pillar:active { transform:translateY(0); opacity:.75; }

/* ═══════════════════════════════════════════════════
   SECTION COMMONS
   ═══════════════════════════════════════════════════ */

.section-wrap { position:relative; z-index:1; }

.section-divider {
  height:1px; position:relative; z-index:1;
  background:linear-gradient(to right,
    transparent, rgba(0,255,234,.10) 30%, rgba(168,85,247,.08) 70%, transparent);
}

.section-h2 {
  font-family:'Syne',sans-serif;
  font-size:clamp(2.125rem,5.5vw,3.5rem); font-weight:800;
  letter-spacing:-.042em; color:var(--c-text); line-height:1.05; margin-bottom:1.25rem;
}
.section-sub {
  font-family:'DM Sans',sans-serif;
  font-size:clamp(.9375rem,2vw,1.125rem); font-weight:300;
  color:var(--c-muted); line-height:1.78; max-width:52ch; margin:0 auto;
}

/* ═══════════════════════════════════════════════════
   PILLAR CARDS  (main page + subpage "other pillars" strip)
   ═══════════════════════════════════════════════════ */

.pillars-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:1.25rem;
  max-width:1280px; margin:0 auto;
}

.pillar-card {
  display:flex; flex-direction:column; gap:.875rem;
  padding:1.625rem 1.5rem 1.5rem;
  background:var(--c-glass);
  border:1px solid rgba(255,255,255,.07);
  border-top: 2px solid var(--pc, var(--c-cyan));
  border-radius:10px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  text-decoration:none; color:var(--c-text);
  box-shadow:0 4px 24px rgba(0,0,0,.40), 0 1px 0 rgba(255,255,255,.05) inset;
  transition:
    transform 280ms var(--ease-spring),
    box-shadow 280ms ease,
    border-color 280ms ease,
    background 280ms ease;
}
.pillar-card:hover {
  transform:translateY(-5px);
  background:rgba(15,23,42,0.88);
  box-shadow:0 12px 40px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--pc, var(--c-cyan)) 25%, transparent);
}
.pillar-card:focus-visible { outline:2px solid var(--pc, var(--c-cyan)); outline-offset:3px; border-radius:10px; }
.pillar-card:active { transform:translateY(-2px); opacity:.85; }

.pillar-card-icon {
  width:2.25rem; height:2.25rem;
  color: var(--pc, var(--c-cyan));
  flex-shrink:0;
}
.pillar-card-icon svg { width:100%; height:100%; }

.pillar-card-title {
  font-family:'Syne',sans-serif; font-size:1.0625rem; font-weight:700;
  letter-spacing:-.02em; color:var(--c-text); line-height:1.2;
}

.pillar-card-text {
  font-family:'DM Sans',sans-serif; font-size:.875rem; font-weight:300;
  color:var(--c-muted); line-height:1.72; flex-grow:1;
}

.pillar-card-link {
  font-family:'Syne',sans-serif; font-size:.8125rem; font-weight:600;
  color: var(--pc, var(--c-cyan)); letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:.35rem;
  margin-top:.25rem;
  transition: gap 200ms var(--ease-spring), opacity 200ms ease;
}
.pillar-card:hover .pillar-card-link { gap:.6rem; }

/* ═══════════════════════════════════════════════════
   SUBPAGE — HERO
   ═══════════════════════════════════════════════════ */

.sub-hero {
  position:relative; padding:8rem 1.5rem 5.5rem;
  z-index:1; overflow:hidden; min-height:52vh;
  display:flex; align-items:center;
}
.sub-hero-bg {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 50% -5%,
      color-mix(in srgb, var(--c-pillar) 18%, transparent) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 95%,
      rgba(168,85,247,.07) 0%, transparent 55%);
}
.sub-hero-inner {
  max-width:1280px; margin:0 auto; position:relative; z-index:1; width:100%;
}
.sub-hero-breadcrumb {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'DM Sans',sans-serif; font-size:.8rem; font-weight:400;
  color:rgba(248,250,252,.4); margin-bottom:2rem; text-decoration:none;
  transition: color 200ms ease, opacity 200ms ease;
}
.sub-hero-breadcrumb:hover { color:var(--c-pillar); }
.sub-hero-breadcrumb:focus-visible { outline:2px solid var(--c-pillar); outline-offset:4px; border-radius:3px; }
.sub-hero-breadcrumb:active { opacity:.6; }

.sub-hero-tag {
  display:inline-block;
  font-family:'DM Sans',sans-serif; font-size:.7rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--c-pillar);
  border:1px solid color-mix(in srgb, var(--c-pillar) 35%, transparent);
  border-radius:40px; padding:.3rem .875rem; margin-bottom:1.5rem;
}
.sub-hero-h1 {
  font-family:'Syne',sans-serif;
  font-size:clamp(2.75rem,7vw,5.5rem); font-weight:800;
  letter-spacing:-.045em; line-height:.95; color:var(--c-text);
  max-width:18ch; margin-bottom:1.75rem;
  opacity:0; animation:fade-in-up 900ms 200ms ease both;
}
.sub-hero-lead {
  font-family:'DM Sans',sans-serif;
  font-size:clamp(1rem,2.2vw,1.25rem); font-weight:300;
  color:rgba(248,250,252,.62); line-height:1.72;
  max-width:52ch; margin-bottom:2.5rem;
  opacity:0; animation:fade-in-up 800ms 380ms ease both;
}
.sub-hero-actions {
  display:flex; flex-wrap:wrap; gap:1rem;
  opacity:0; animation:fade-in-up 800ms 540ms ease both;
}

/* ═══════════════════════════════════════════════════
   SUBPAGE — CAPABILITIES SECTION
   ═══════════════════════════════════════════════════ */

.capabilities-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:1.5rem;
  max-width:1280px; margin:0 auto;
}

.cap-card {
  padding:2rem 1.75rem;
  background:var(--c-glass);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 4px 28px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.05) inset;
  transition: transform 280ms var(--ease-spring), box-shadow 280ms ease, border-color 280ms ease;
}
.cap-card:hover {
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--c-pillar) 28%, transparent);
  box-shadow:0 12px 36px rgba(0,0,0,.48), 0 0 0 1px color-mix(in srgb, var(--c-pillar) 12%, transparent);
}

.cap-card-num {
  font-family:'Syne',sans-serif; font-size:.7rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--c-pillar);
  display:block; margin-bottom:1rem;
}
.cap-card-title {
  font-family:'Syne',sans-serif; font-size:1.1875rem; font-weight:700;
  letter-spacing:-.025em; color:var(--c-text); margin-bottom:.875rem; line-height:1.2;
}
.cap-card-text {
  font-family:'DM Sans',sans-serif; font-size:.9375rem; font-weight:300;
  color:var(--c-muted); line-height:1.78;
}
.cap-card-tags {
  display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem;
}
.cap-tag {
  font-family:'DM Sans',sans-serif; font-size:.7rem; font-weight:500;
  padding:.2rem .625rem; border-radius:30px;
  background:color-mix(in srgb, var(--c-pillar) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--c-pillar) 25%, transparent);
  color:var(--c-pillar); letter-spacing:.03em;
}

/* ═══════════════════════════════════════════════════
   SUBPAGE — MINI APPROACH STEPS
   ═══════════════════════════════════════════════════ */

.approach-steps {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:0;
  max-width:1280px; margin:0 auto;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px; overflow:hidden;
}
.approach-step {
  padding:2rem 1.75rem;
  border-right:1px solid rgba(255,255,255,.07);
  position:relative;
}
.approach-step:last-child { border-right:none; }
@media (max-width:767px) {
  .approach-steps { grid-template-columns:1fr; }
  .approach-step { border-right:none; border-bottom:1px solid rgba(255,255,255,.07); }
  .approach-step:last-child { border-bottom:none; }
}
.approach-step-num {
  font-family:'Syne',sans-serif; font-size:2.5rem; font-weight:800;
  letter-spacing:-.05em; line-height:1;
  color:color-mix(in srgb, var(--c-pillar) 20%, transparent);
  margin-bottom:.875rem;
}
.approach-step-title {
  font-family:'Syne',sans-serif; font-size:1rem; font-weight:700;
  letter-spacing:-.015em; color:var(--c-text); margin-bottom:.5rem;
}
.approach-step-text {
  font-family:'DM Sans',sans-serif; font-size:.875rem; font-weight:300;
  color:var(--c-muted); line-height:1.72;
}

/* ═══════════════════════════════════════════════════
   SUBPAGE — OTHER PILLARS STRIP
   ═══════════════════════════════════════════════════ */

.other-pillars-strip {
  display:flex; flex-wrap:wrap; gap:.75rem;
  justify-content:center;
}
.other-pillar-link {
  display:inline-flex; align-items:center; gap:.625rem;
  font-family:'DM Sans',sans-serif; font-size:.875rem; font-weight:500;
  color:rgba(248,250,252,.55); text-decoration:none;
  padding:.5rem 1rem; border-radius:6px;
  border:1px solid rgba(255,255,255,.09);
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease, opacity 200ms ease;
}
.other-pillar-link:hover { color:var(--c-text); border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.04); }
.other-pillar-link:focus-visible { outline:2px solid var(--c-cyan); outline-offset:3px; border-radius:6px; }
.other-pillar-link:active { opacity:.6; }
.other-pillar-link.current { color:var(--c-pillar); border-color:color-mix(in srgb, var(--c-pillar) 35%, transparent); pointer-events:none; }

/* ═══════════════════════════════════════════════════
   CTA SECTION
   ═══════════════════════════════════════════════════ */

.cta-bg {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 68% 58% at 50% 105%,rgba(0,255,234,.11) 0%,transparent 62%),
    radial-gradient(ellipse 48% 48% at 16% 55%,rgba(168,85,247,.07) 0%,transparent 56%);
}
.cta-h2 {
  font-family:'Syne',sans-serif;
  font-size:clamp(3.25rem,9.5vw,7rem); font-weight:800;
  letter-spacing:-.055em; color:var(--c-text); line-height:.92;
}
.cta-sub {
  font-family:'DM Sans',sans-serif;
  font-size:clamp(1rem,2.2vw,1.25rem); font-weight:300;
  color:var(--c-muted); line-height:1.72; max-width:40ch; margin:1.875rem auto 0;
}

/* ═══════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════ */

.site-footer {
  position:relative; z-index:1;
  border-top:1px solid rgba(255,255,255,.05);
  padding:2.75rem 1.5rem;
}
.footer-inner {
  max-width:1280px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:1rem;
}
.footer-copy {
  font-family:'DM Sans',sans-serif; font-size:.8125rem; font-weight:300;
  color:rgba(248,250,252,.28);
}
.footer-link {
  font-family:'DM Sans',sans-serif; font-size:.8125rem; font-weight:400;
  color:rgba(248,250,252,.33); text-decoration:none;
  transition: color 200ms ease, opacity 200ms ease;
}
.footer-link:hover { color:var(--c-cyan); }
.footer-link:focus-visible { outline:2px solid var(--c-cyan); outline-offset:3px; border-radius:2px; }
.footer-link:active { opacity:.6; }

/* ═══════════════════════════════════════════════════
   LANGUAGE SWITCHER
   ═══════════════════════════════════════════════════ */

.lang-switch {
  display:flex; align-items:center; gap:1px; flex-shrink:0;
}
.lang-btn {
  font-family:'DM Sans',sans-serif; font-size:.7rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:rgba(248,250,252,.38); background:none; border:none;
  padding:.28rem .48rem; cursor:pointer; border-radius:4px; line-height:1;
  transition: color 180ms ease, background 180ms ease;
}
.lang-btn:hover { color:rgba(248,250,252,.75); }
.lang-btn.active { color:var(--c-cyan); background:rgba(0,255,234,.09); }
.lang-btn:focus-visible { outline:2px solid var(--c-cyan); outline-offset:2px; border-radius:4px; }
.lang-btn:active { opacity:.65; }

/* ═══════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════ */

.text-pillar { color: var(--c-pillar); }
.text-cyan   { color: var(--c-cyan); }
.text-muted  { color: var(--c-muted); }