:root {
  --color-bg:#020617;
  --color-bg-elevated:rgba(15,23,42,0.6);
  --color-surface:rgba(30,41,59,0.7);
  --color-border-subtle:rgba(148,163,184,0.15);
  --color-accent:#6366f1;
  --color-accent-glow:rgba(99,102,241,0.4);
  --color-accent-soft:rgba(99,102,241,0.1);
  --color-accent-strong:#4f46e5;
  --color-text:#f8fafc;
  --color-text-muted:#94a3b8;
  --color-text-subtle:#64748b;
  --color-danger:#f87171;
  --color-success:#22c55e;
  --color-warning:#fbbf24;
  --animation-bounce:cubic-bezier(0.68,-0.55,0.265,1.55);
  --animation-spring:cubic-bezier(0.5,1.25,0.75,1.25);
  --animation-smooth:cubic-bezier(0.4,0,0.2,1);
  --animation-float:cubic-bezier(0.3,0,0.2,1);
  --animation-morph:cubic-bezier(0.76,0,0.24,1);
  --animation-gentle:cubic-bezier(0.25,0.46,0.45,0.94);
  --duration-micro:150ms;
  --duration-fast:300ms;
  --duration-medium:500ms;
  --duration-slow:800ms;
  --duration-slower:1200ms;
  --shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1),0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-glow:0 0 20px var(--color-accent-glow);
  --shadow-soft:0 22px 45px rgba(0,0,0,0.6);
  --radius-lg:1.5rem;
  --radius-md:1rem;
  --radius-sm:0.5rem;
  --radius-pill:9999px;
  --header-height:4.5rem;
  --content-max-width:1200px;
  --ease-elastic:cubic-bezier(0.5,1.25,0.75,1.25);
  --ease-squish:cubic-bezier(0.5,-0.1,0.1,1.5);
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --transition-fast:150ms var(--ease-out-expo);
  --transition-med:300ms var(--ease-out-expo);
  --transition-slow:500ms var(--ease-out-expo)}
 *,*::before,*::after {
  box-sizing:border-box}
 html {
  scroll-behavior:smooth}
 body {
  margin:0;
  min-height:100vh;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--color-text);
  background-color:var(--color-bg);
  line-height:1.6;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
  overflow-x:hidden}
 body {
  background-color:#020617}
 body::before,body::after {
  content:"";
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:200vw;
  height:200vh;
  z-index:-2;
  border-radius:40%;
  opacity:0.5;
  filter:blur(100px);
  animation:auroraFlow 20s infinite linear}
 body::before {
  background:conic-gradient( from 0deg,#4f46e5,#ec4899,#0f172a,#6366f1,#4f46e5 );
  animation-duration:30s;
  animation-direction:normal}
 body::after {
  background:conic-gradient( from 180deg,#0ea5e9,#22c55e,#0f172a,#06b6d4,#0ea5e9 );
  width:180vw;
  height:180vh;
  mix-blend-mode:hard-light;
  animation-duration:45s;
  animation-direction:reverse;
  opacity:0.4}
 @keyframes auroraFlow {
  0% {
  transform:translate(-50%,-50%) rotate(0deg) scale(1)}
 25% {
  transform:translate(-52%,-48%) rotate(90deg) scale(1.1)}
 50% {
  transform:translate(-48%,-52%) rotate(180deg) scale(1)}
 75% {
  transform:translate(-50%,-50%) rotate(270deg) scale(0.9)}
 100% {
  transform:translate(-50%,-50%) rotate(360deg) scale(1)}
 }
 html::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;
  opacity:0.5;
  mix-blend-mode:overlay}
::selection {
  background:rgba(129,140,248,0.45);
  color:#f9fafb}
 a {
  color:inherit;
  text-decoration:none}
 img,svg {
  max-width:100%;
  height:auto;
  display:block}
 button {
  font:inherit}
 .visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0}
 .skip-link {
  position:fixed;
  left:50%;
  transform:translate(-50%,-200%);
  top:0.75rem;
  background:#0f172a;
  color:#e5e7eb;
  padding:0.5rem 0.85rem;
  border-radius:var(--radius-pill);
  border:1px solid rgba(148,163,184,0.6);
  z-index:50;
  transition:transform var(--transition-fast)}
 .skip-link:focus-visible {
  transform:translate(-50%,0);
  outline:none}
 .site-shell {
  max-width:var(--content-max-width);
  margin-inline:auto;
  padding-inline:1.25rem}
 main > .site-shell {
  padding-bottom:0}
 .section > .site-shell {
  padding-bottom:3rem}
 header.site-header {
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(2,6,23,0.7);
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,0.08);
  transition:all var(--transition-med)}
 header.site-header.is-scrolled {
  background:rgba(2,6,23,0.9);
  box-shadow:var(--shadow-md)}
 .header-inner {
  max-width:var(--content-max-width);
  margin-inline:auto;
  padding:0.65rem 1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem}
 .brand {
  display:flex;
  align-items:center;
  gap:0.6rem}
 .brand-mark {
  width:2.2rem;
  height:2.2rem;
  border-radius:0.9rem;
  background:radial-gradient(circle at 10% 0%,#6366f1,#22c55e);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 16px 40px rgba(15,23,42,0.85);
  position:relative;
  overflow:hidden}
 .brand-mark::after {
  content:"";
  position:absolute;
  inset:0.16rem;
  border-radius:0.75rem;
  background:radial-gradient( circle at 0 0,rgba(15,23,42,0.1),rgba(15,23,42,0.6) );
  border:1px solid rgba(15,23,42,0.5)}
 .brand-mark svg {
  position:relative;
  z-index:1}
 .brand-text {
  display:flex;
  flex-direction:column;
  line-height:1.1}
 .brand-text-main {
  font-weight:650;
  letter-spacing:0.04em;
  font-size:1rem;
  text-transform:uppercase}
 .brand-text-sub {
  font-size:0.78rem;
  color:var(--color-text-muted)}
 .nav-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.4rem;
  height:2.4rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.4);
  background:rgba(15,23,42,0.9);
  color:inherit;
  cursor:pointer;
  padding:0;
  transition:all var(--duration-fast) var(--animation-smooth)}
 .nav-toggle:hover {
  transform:scale(1.05);
  border-color:var(--color-accent);
  box-shadow:0 0 15px rgba(99,102,241,0.3)}
 .nav-toggle span {
  display:block;
  width:1.2rem;
  height:2px;
  background:#e5e7eb;
  border-radius:999px;
  position:relative;
  transition:transform var(--duration-fast) var(--animation-smooth),background var(--duration-fast) var(--animation-smooth)}
 .nav-toggle span::before,.nav-toggle span::after {
  content:"";
  position:absolute;
  inset-inline:0;
  height:2px;
  border-radius:inherit;
  background:inherit;
  transition:transform var(--duration-fast) var(--animation-smooth),opacity var(--duration-fast) var(--animation-smooth)}
 .nav-toggle span::before {
  transform:translateY(-0.28rem)}
 .nav-toggle span::after {
  transform:translateY(0.28rem)}
 .nav-toggle[aria-expanded="true"] span {
  background:transparent}
 .nav-toggle[aria-expanded="true"] span::before {
  transform:translateY(0) rotate(40deg);
  background-color:#e5e7eb}
 .nav-toggle[aria-expanded="true"] span::after {
  transform:translateY(0) rotate(-40deg);
  background-color:#e5e7eb}
 nav.site-nav {
  position:fixed;
  inset-inline:1rem;
  top:calc(var(--header-height) - 0.4rem);
  background:rgba(15,23,42,0.95);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-radius:0.9rem;
  border:1px solid var(--color-border-subtle);
  box-shadow:var(--shadow-xl);
  padding:0.75rem;
  display:none;
  animation:slideDown var(--duration-fast) var(--animation-smooth)}
 @keyframes slideDown {
  from {
  opacity:0;
  transform:translateY(-10px)}
 to {
  opacity:1;
  transform:translateY(0)}
 }
 nav.site-nav.is-open {
  display:block}
 .nav-list {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0.25rem}
 .nav-link {
  display:inline-flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  padding:0.75rem 1rem;
  border-radius:0.65rem;
  color:var(--color-text-muted);
  font-size:0.9rem;
  border:1px solid transparent;
  background:transparent;
  transition:background var(--duration-fast) var(--animation-smooth),border-color var(--duration-fast) var(--animation-smooth),color var(--duration-fast) var(--animation-smooth),transform var(--duration-fast) var(--animation-smooth);
  position:relative;
  overflow:hidden}
 .nav-link span.dot {
  width:0.4rem;
  height:0.4rem;
  border-radius:999px;
  background:transparent;
  transition:all var(--duration-fast) var(--animation-smooth)}
 @media (hover:hover) {
  .nav-link:hover,.nav-link:focus-visible {
  background:rgba(15,23,42,0.9);
  border-color:rgba(148,163,184,0.5);
  color:#e5e7eb;
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 0 15px rgba(99,102,241,0.5);
  outline:none}
 }
 .nav-link:active {
  transform:scale(0.98);
  background:rgba(15,23,42,0.8)}
 .nav-link.is-active {
  color:#fff;
  border-bottom-color:var(--color-accent);
  background:rgba(255,255,255,0.05)}
 .nav-link.is-active span.dot {
  background:var(--color-accent);
  box-shadow:0 0 0 3px rgba(99,102,241,0.45);
  animation:pulseDot 2s infinite}
 @keyframes pulseDot {
  0%,100% {
  box-shadow:0 0 0 3px rgba(99,102,241,0.45)}
 50% {
  box-shadow:0 0 0 6px rgba(99,102,241,0.6)}
 }
 @media (min-width:768px) {
  .header-inner {
  padding-block:0.7rem}
 .nav-toggle {
  display:none}
 nav.site-nav {
  all:unset}
 .nav-list {
  flex-direction:row;
  align-items:center;
  gap:0.25rem}
 .nav-link {
  width:auto;
  padding:0.55rem 0.9rem}
 }
 main {
  margin-top:1.25rem}
 .hero {
  padding-block:3rem 4rem}
 .hero-inner {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:3rem;
  align-items:center}
 .hero-copy-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  padding:0.2rem 0.6rem 0.2rem 0.25rem;
  border-radius:999px;
  font-size:0.76rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  background:rgba(15,23,42,0.95);
  border:1px solid rgba(99,102,241,0.5);
  color:var(--color-text-muted);
  margin-bottom:0.9rem;
  box-shadow:0 4px 20px rgba(99,102,241,0.15);
  transition:all var(--duration-medium) var(--animation-smooth)}
 @media (hover:hover) {
  .hero-copy-eyebrow:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(99,102,241,0.25);
  border-color:rgba(99,102,241,0.8)}
 }
 .hero-copy-eyebrow span.badge-dot {
  width:0.6rem;
  height:0.6rem;
  border-radius:999px;
  background:radial-gradient(circle at 30% 20%,#a5b4fc,#22c55e);
  box-shadow:0 0 0 4px rgba(52,211,153,0.25);
  animation:pulseDot 2s infinite}
 .hero-pre-title {
  display:block;
  font-size:clamp(2rem,6vw,3.5rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-0.05em;
  margin-bottom:0.75rem;
  background:linear-gradient(to right,#fca5a5,#facc15,#a78bfa);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  width:fit-content;
  text-shadow:0 2px 10px rgba(250,204,21,0.15)}
 .hero-title {
  font-size:clamp(2.15rem,5vw,3rem);
  line-height:1.2;
  letter-spacing:-0.04em;
  margin:0 0 0.75rem}
 .hero-highlight {
  background:linear-gradient(to right,var(--color-accent),#38bdf8,#22c55e);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:gradientShift 3s infinite alternate}
 @keyframes fadeInUp {
  from {
  opacity:0;
  transform:translateY(20px)}
 to {
  opacity:1;
  transform:translateY(0)}
 }
 @keyframes gradientShift {
  0% {
  background-position:0% 50%}
 50% {
  background-position:100% 50%}
 100% {
  background-position:0% 50%}
 }
 .hero-subtitle {
  margin:0 0 1.25rem;
  color:var(--color-text-muted);
  max-width:32rem;
  font-size:0.98rem;
  animation:fadeInUp 1s ease-out 0.2s both}
 .hero-meta-row {
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem 1.5rem;
  align-items:center;
  margin-bottom:1.6rem}
 .hero-meta-pill {
  font-size:0.8rem;
  color:var(--color-text-muted);
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  animation:fadeInUp 1s ease-out 0.4s both}
 .hero-meta-pill:nth-child(2) {
  animation-delay:0.5s}
 .hero-meta-pill svg {
  width:0.9rem;
  height:0.9rem;
  color:var(--color-accent)}
 .hero-cta-row {
  display:flex;
  flex-wrap:wrap;
  gap:0.7rem;
  align-items:center}
 .btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.4rem;
  padding:0.6rem 1.1rem;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  font-size:0.92rem;
  cursor:pointer;
  transition:all var(--duration-fast) var(--animation-smooth);
  white-space:nowrap;
  position:relative;
  isolation:isolate;
  overflow:hidden}
 .btn:active {
  transform:scale(0.98)}
 .btn::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient( 135deg,rgba(255,255,255,0.1),transparent 30% );
  transform:translateX(-100%);
  transition:transform var(--duration-medium) var(--animation-smooth);
  z-index:-1}
 .btn:hover::after {
  transform:translateX(100%)}
 .btn-primary {
  background:linear-gradient(135deg,#4f46e5 0%,#6366f1 50%,#8b5cf6 100%);
  color:#fff;
  font-weight:600;
  box-shadow:0 6px 20px rgba(79,70,229,0.4),inset 0 1px 0 0 rgba(255,255,255,0.2);
  position:relative;
  overflow:hidden}
 .btn-primary::before {
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient( 90deg,transparent,rgba(255,255,255,0.2),transparent );
  transition:left 0.6s ease}
 .btn-primary:hover::before {
  left:100%}
 @media (hover:hover) {
  .btn-primary:hover,.btn-primary:focus-visible {
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 10px 30px rgba(79,70,229,0.6),inset 0 1px 0 0 rgba(255,255,255,0.3)}
 }
 .btn-ghost {
  background:linear-gradient( 135deg,rgba(15,23,42,0.9),rgba(30,41,59,0.8) );
  border:1px solid rgba(148,163,184,0.4);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.05);
  color:var(--color-text)}
 @media (hover:hover) {
  .btn-ghost:hover,.btn-ghost:focus-visible {
  background:linear-gradient( 135deg,rgba(15,23,42,0.95),rgba(30,41,59,0.9) );
  border-color:rgba(129,140,248,0.8);
  box-shadow:0 8px 25px rgba(15,23,42,0.4),inset 0 1px 0 0 rgba(255,255,255,0.1);
  transform:translateY(-1px);
  outline:none}
 }
 .btn-icon svg {
  width:0.95rem;
  height:0.95rem;
  transition:transform var(--duration-fast) var(--animation-smooth)}
 .btn:hover .btn-icon svg {
  transform:translateX(3px)}
 .hero-secondary-text {
  font-size:0.78rem;
  color:var(--color-text-subtle);
  display:flex;
  align-items:center;
  gap:0.5rem;
  animation:fadeInUp 1s ease-out 0.6s both}
 .hero-secondary-text span.dot {
  width:0.32rem;
  height:0.32rem;
  border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(22,163,74,0.4)}
 .hero-visual {
  position:relative;
  padding:1.2rem;
  border-radius:var(--radius-lg);
  background:radial-gradient( circle at 30% 20%,rgba(79,70,229,0.4),rgba(15,23,42,0.95) 70% );
  border:1px solid rgba(148,163,184,0.4);
  overflow:hidden;
  box-shadow:0 25px 50px -12px rgba(15,23,42,0.5),inset 0 1px 0 0 rgba(255,255,255,0.1);
  transition:transform var(--duration-medium) var(--animation-smooth);
  animation:fadeInUp 1s ease-out 0.3s both}
 .hero-visual::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient( circle at 20% 80%,rgba(99,102,241,0.2),transparent 50% ),radial-gradient(circle at 80% 20%,rgba(34,197,94,0.1),transparent 50%);
  pointer-events:none}
 .hero-visual-orbit {
  position:absolute;
  inset:-40%;
  border-radius:999px;
  border:1px dashed rgba(129,140,248,0.35);
  opacity:0.5;
  transform:rotate(-10deg);
  animation:orbitDrift 32s linear infinite}
 .hero-visual-orbit:nth-child(2) {
  inset:-55%;
  animation-duration:46s;
  animation-direction:reverse;
  opacity:0.3}
 @keyframes orbitDrift {
  from {
  transform:rotate(0deg)}
 to {
  transform:rotate(360deg)}
 }
 .hero-visual-core {
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  padding-block:0.2rem}
 .hero-visual-core-badge {
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  padding:0.32rem 0.6rem;
  border-radius:999px;
  background:rgba(15,23,42,0.96);
  border:1px solid rgba(129,140,248,0.5);
  font-size:0.7rem;
  color:var(--color-text-muted)}
 .hero-visual-core-badge svg {
  width:0.85rem;
  height:0.85rem;
  color:var(--color-accent)}
 .hero-visual-panel {
  margin-top:1rem;
  padding:1rem;
  border-radius:0.9rem;
  background:rgba(15,23,42,0.97);
  border:1px solid rgba(148,163,184,0.4);
  backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.05);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0.75rem 1rem;
  align-items:center}
 .hero-visual-avatar {
  width:2.8rem;
  height:2.8rem;
  border-radius:999px;
  background:linear-gradient(135deg,#6366f1,#22c55e);
  padding:2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform var(--duration-fast) var(--animation-smooth)}
 @media (hover:hover) {
  .hero-visual-avatar:hover {
  transform:scale(1.05)}
 }
 .hero-visual-avatar-inner {
  width:100%;
  height:100%;
  border-radius:inherit;
  background:#020617;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#a5b4fc;
  font-weight:700;
  font-size:1rem}
 .hero-visual-metric {
  display:flex;
  flex-direction:column;
  gap:0.2rem}
 .hero-visual-metric-label {
  color:var(--color-text-muted);
  font-size:0.8rem}
 .hero-visual-metric-value {
  font-size:0.95rem;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0.5rem}
 .hero-visual-metric-value span.chip {
  font-size:0.7rem;
  padding:0.18rem 0.45rem;
  border-radius:999px;
  background:rgba(22,163,74,0.12);
  color:#bbf7d0}
 .hero-visual-grid {
  margin-top:0.85rem;
  display:grid;
  grid-column:1 / -1;
  grid-template-columns:1fr;
  gap:0.75rem}
 .hero-visual-grid-item {
  padding:0.85rem;
  border-radius:0.7rem;
  background:linear-gradient( 135deg,rgba(30,41,59,0.6) 0%,rgba(15,23,42,0.8) 100% );
  border:1px solid rgba(148,163,184,0.3);
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  transition:all var(--duration-medium) var(--animation-smooth)}
 @media (hover:hover) {
  .hero-visual-grid-item:hover {
  background:linear-gradient( 135deg,rgba(30,41,59,0.8) 0%,rgba(15,23,42,0.9) 100% );
  border-color:rgba(129,140,248,0.6);
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(15,23,42,0.3)}
 }
 .hero-visual-grid-item strong {
  font-size:0.85rem;
  color:var(--color-text)}
 .hero-visual-grid-item span {
  color:var(--color-text-muted);
  font-size:0.8rem;
  line-height:1.4}
 @media (min-width:768px) {
  .hero-inner {
  grid-template-columns:minmax(0,1.25fr) minmax(0,1.1fr);
  align-items:stretch}
 .hero-visual {
  margin-top:0.75rem}
 .hero-visual-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0.5rem}
 .hero-visual-grid-item strong {
  font-size:0.78rem}
 .hero-visual-grid-item span {
  font-size:0.7rem}
 }
 @media (min-width:1024px) {
  .hero {
  padding-block:3.1rem 3.25rem}
 .hero-inner {
  gap:3.1rem}
 }
 .section-kicker-wrapper {
  display:flex;
  justify-content:center;
  margin-bottom:2rem}
 .section-kicker {
  display:inline-block;
  background:linear-gradient( 135deg,rgba(99,102,241,0.25),var(--color-bg-elevated) 80% );
  border:1px solid rgba(99,102,241,0.5);
  box-shadow:0 10px 30px rgba(15,23,42,0.8),0 0 20px rgba(99,102,241,0.2);
  padding:0.85rem 3rem;
  border-radius:var(--radius-pill);
  font-size:1.1rem;
  font-weight:800;
  letter-spacing:0.12em;
  color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,0.3);
  margin:0;
  text-transform:uppercase;
  transition:all var(--duration-medium) var(--animation-smooth)}
 @media (hover:hover) {
  .section-kicker:hover {
  transform:scale(1.08) translateY(-2px);
  background:linear-gradient( 135deg,rgba(99,102,241,0.35),var(--color-bg-elevated) 80% );
  box-shadow:0 20px 50px rgba(15,23,42,0.9),0 0 30px rgba(99,102,241,0.4);
  border-color:rgba(129,140,248,0.8)}
 }
 .section-header {
  display:flex;
  flex-direction:column;
  gap:0.4rem;
  margin-bottom:2rem}
 .section-title {
  font-size:1.35rem;
  margin:0}
 .section-description {
  margin:0;
  font-size:0.95rem;
  color:var(--color-text-muted);
  max-width:32rem}
 .card-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1rem}
 @media (min-width:768px) {
  .card-grid-3 {
  grid-template-columns:repeat(3,minmax(0,1fr))}
 .card-grid-4 {
  grid-template-columns:repeat(4,minmax(0,1fr))}
 }
 @media (min-width:1024px) {
  .card-grid-3 {
  gap:1.25rem}
 }
 .card {
  position:relative;
  border-radius:var(--radius-md);
  padding:1rem;
  background:linear-gradient( 145deg,rgba(99,102,241,0.15) 0%,rgba(15,23,42,0.95) 50%,rgba(30,41,59,0.9) 100% );
  border:1px solid rgba(148,163,184,0.3);
  box-shadow:0 20px 40px rgba(15,23,42,0.7),inset 0 1px 0 0 rgba(255,255,255,0.05);
  overflow:hidden;
  transition:all var(--duration-medium) var(--animation-smooth);
  transform-style:preserve-3d;
  perspective:1000px}
 .card::before {
  content:"";
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:radial-gradient( circle at center,rgba(255,255,255,0.1) 0%,transparent 70% );
  transform:scale(0);
  transition:transform var(--duration-slow) var(--animation-spring);
  pointer-events:none}
 .card:hover::before {
  transform:scale(1)}
 .card::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient( 45deg,transparent 30%,rgba(255,255,255,0.03) 50%,transparent 70% );
  opacity:0;
  transition:opacity var(--duration-medium) var(--animation-smooth);
  pointer-events:none}
 @media (hover:hover) {
  .card:hover {
  transform:translateY(-6px) scale(1.02);
  border-color:rgba(129,140,248,0.6);
  box-shadow:0 30px 60px rgba(15,23,42,0.8),0 0 0 1px rgba(129,140,248,0.3)}
 .card:hover::after {
  opacity:1;
  animation:shine 1s ease}
 }
 @keyframes shine {
  0% {
  transform:translateX(-100%)}
 100% {
  transform:translateX(100%)}
 }
 .card-header {
  display:flex;
  align-items:center;
  gap:0.65rem;
  margin-bottom:0.5rem}
 .card-icon {
  width:2.1rem;
  height:2.1rem;
  border-radius:0.85rem;
  background:linear-gradient( 135deg,rgba(99,102,241,0.2),rgba(15,23,42,0.9) );
  border:1px solid rgba(129,140,248,0.6);
  box-shadow:0 4px 12px rgba(99,102,241,0.2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--color-accent);
  transform-origin:center;
  transition:all var(--duration-medium) var(--animation-smooth)}
 .card:hover .card-icon {
  transform:rotate(15deg) scale(1.1);
  box-shadow:0 8px 25px rgba(99,102,241,0.4),0 0 20px rgba(99,102,241,0.3)}
 .card-icon svg {
  width:1.1rem;
  height:1.1rem}
 .card-title {
  font-size:1rem;
  margin:0;
  transition:transform var(--duration-fast) var(--animation-smooth)}
 .card:hover .card-title {
  transform:translateY(-2px)}
 .card-body {
  font-size:0.9rem;
  color:var(--color-text-muted)}
 .card-footer {
  margin-top:0.65rem;
  font-size:0.78rem;
  color:var(--color-text-subtle);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:0.5rem;
  flex-wrap:wrap}
 .pill {
  display:inline-flex;
  align-items:center;
  gap:0.3rem;
  padding:0.2rem 0.6rem;
  border-radius:999px;
  background:rgba(15,23,42,0.96);
  border:1px solid rgba(148,163,184,0.45);
  font-size:0.78rem;
  color:var(--color-text-muted)}
 .pill-dot {
  width:0.3rem;
  height:0.3rem;
  border-radius:999px;
  background:var(--color-accent)}
 .project-thumb {
  position:relative;
  border-radius:0.85rem;
  overflow:hidden;
  background:linear-gradient( 145deg,rgba(96,165,250,0.3),rgba(15,23,42,0.95) );
  border:1px solid rgba(148,163,184,0.4);
  margin-bottom:0.7rem;
  transition:all var(--duration-medium) var(--animation-smooth);
  cursor:pointer;
  perspective:1000px}
 .project-thumb::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient( 45deg,transparent 30%,rgba(255,255,255,0.1) 50%,transparent 70% );
  opacity:0;
  transition:opacity var(--duration-medium) var(--animation-smooth);
  pointer-events:none}
 @media (hover:hover) {
  .project-thumb:hover::after {
  opacity:1;
  animation:slideShine 1.5s ease}
 .project-thumb:hover {
  border-color:rgba(129,140,248,0.6);
  transform:translateY(-3px);
  box-shadow:0 20px 40px rgba(15,23,42,0.6)}
 }
 .tag-row {
  display:flex;
  flex-wrap:wrap;
  gap:0.35rem;
  margin-top:0.6rem}
 .tag {
  padding:0.15rem 0.45rem;
  border-radius:999px;
  background:rgba(15,23,42,0.96);
  border:1px solid rgba(148,163,184,0.45);
  font-size:0.7rem;
  color:var(--color-text-subtle)}
 .project-cta {
  margin-top:0.8rem;
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  font-size:0.85rem;
  color:#c4b5fd;
  cursor:pointer;
  border-radius:999px;
  padding:0.25rem 0.6rem 0.25rem 0.1rem;
  background:transparent;
  border:none;
  transition:all var(--duration-fast) var(--animation-smooth)}
 .project-cta span.icon {
  width:1.6rem;
  height:1.6rem;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(79,70,229,0.25);
  transition:all var(--duration-fast) var(--animation-smooth)}
 .project-cta svg {
  width:0.95rem;
  height:0.95rem;
  transition:transform var(--duration-fast) var(--animation-smooth)}
 @media (hover:hover) {
  .project-cta:hover span.icon {
  background:rgba(79,70,229,0.4);
  transform:scale(1.1)}
 .project-cta:hover svg {
  transform:translateX(3px)}
 .project-cta:hover,.project-cta:focus-visible {
  background:rgba(15,23,42,0.96);
  outline:none}
 }
 .team-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1rem}
 @media (min-width:640px) {
  .team-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))}
 }
 @media (min-width:1024px) {
  .team-grid {
  grid-template-columns:repeat(4,minmax(0,1fr))}
 }
 .team-card {
  border-radius:var(--radius-md);
  padding:1rem;
  background:linear-gradient( 145deg,rgba(251,191,36,0.12) 0%,rgba(15,23,42,0.95) 50%,rgba(30,41,59,0.9) 100% );
  border:1px solid rgba(251,191,36,0.3);
  box-shadow:0 20px 40px rgba(15,23,42,0.7),inset 0 1px 0 0 rgba(255,255,255,0.05);
  display:flex;
  flex-direction:column;
  gap:0.55rem;
  align-items:center;
  text-align:center;
  transition:all var(--duration-medium) var(--animation-smooth);
  position:relative}
 @media (hover:hover) {
  .team-card:hover,.team-card:focus-within {
  transform:translateY(-8px);
  border-color:rgba(251,191,36,0.6);
  box-shadow:0 35px 70px rgba(15,23,42,0.8),0 0 0 1px rgba(251,191,36,0.3),0 0 30px rgba(251,191,36,0.2);
  outline:none}
 }
 .avatar-shell {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.75rem;
  width:100%}
 .avatar {
  width:4.5rem;
  height:4.5rem;
  border-radius:999px;
  background:linear-gradient(135deg,#6366f1,#22c55e,#fbbf24) border-box;
  border:2px solid transparent;
  padding:2px;
  position:relative;
  overflow:hidden;
  flex-shrink:0;
  transition:transform var(--duration-medium) var(--animation-smooth),box-shadow var(--duration-medium) var(--animation-smooth)}
 .team-card:hover .avatar {
  transform:translateY(-5px);
  box-shadow:0 10px 20px rgba(99,102,241,0.4),0 0 20px rgba(34,197,94,0.3)}
 .avatar-inner {
  width:100%;
  height:100%;
  border-radius:inherit;
  background:#020617;
  display:flex;
  align-items:center;
  justify-content:center}
 .team-meta {
  display:flex;
  flex-direction:column;
  gap:0}
 .team-name {
  font-size:0.98rem;
  font-weight:500;
  margin:0;
  position:relative;
  display:inline-block}
 .team-name::after {
  content:"";
  position:absolute;
  bottom:-4px;
  left:0;
  width:0;
  height:2px;
  background:linear-gradient(90deg,#fbbf24,#22c55e);
  transition:width var(--duration-medium) var(--animation-smooth)}
 .team-card:hover .team-name::after {
  width:100%}
 .team-role {
  font-size:0.8rem;
  color:var(--color-text-subtle);
  text-transform:uppercase;
  letter-spacing:0.12em;
  margin:0}
 .team-bio {
  font-size:0.85rem;
  color:var(--color-text-muted);
  margin:0.2rem 0 0.45rem}
 .team-socials {
  display:flex;
  gap:0.4rem;
  margin-top:auto}
 .icon-button {
  width:1.9rem;
  height:1.9rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.5);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,0.96);
  color:var(--color-text-subtle);
  cursor:pointer;
  transition:background var(--duration-fast) var(--animation-smooth),border-color var(--duration-fast) var(--animation-smooth),color var(--duration-fast) var(--animation-smooth),transform var(--duration-fast) var(--animation-smooth)}
 .icon-button svg {
  width:1rem;
  height:1rem}
 @media (hover:hover) {
  .icon-button:hover,.icon-button:focus-visible {
  background:rgba(129,140,248,0.15);
  border-color:rgba(129,140,248,0.9);
  color:#e5e7eb;
  transform:translateY(-1px);
  outline:none}
 }
 .contact-layout {
  display:grid;
  grid-template-columns:minmax(0,1.1fr);
  gap:1.25rem;
  align-items:flex-start}
 @media (min-width:768px) {
  .contact-layout {
  grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr)}
 }
 .contact-card {
  border-radius:var(--radius-lg);
  padding:1.5rem;
  background:rgba(15,23,42,0.95);
  border:1px solid rgba(148,163,184,0.45);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(10px)}
 .form-row {
  display:flex;
  flex-direction:column;
  gap:0.3rem;
  margin-bottom:1rem}
 .form-row.inline {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1rem}
 @media (min-width:480px) {
  .form-row.inline {
  grid-template-columns:repeat(2,minmax(0,1fr))}
 }
 .form-row label {
  font-size:0.85rem;
  color:var(--color-text);
  font-weight:500}
 .field-hint {
  font-size:0.78rem;
  color:var(--color-text-subtle);
  margin-top:0.25rem}
 input[type="text"],input[type="email"],select,textarea {
  width:100%;
  border-radius:0.5rem;
  border:1px solid rgba(148,163,184,0.3);
  background:rgba(30,41,59,0.5);
  padding:0.6rem 0.8rem;
  color:var(--color-text);
  font-size:0.9rem;
  transition:all var(--duration-fast) var(--animation-smooth);
  min-height:2.5rem}
 input[type="text"]:focus,input[type="email"]:focus,select:focus,textarea:focus {
  outline:none;
  border-color:var(--color-accent);
  box-shadow:0 0 0 2px rgba(99,102,241,0.2);
  background:rgba(30,41,59,0.7)}
 textarea {
  min-height:120px;
  resize:vertical}
 input::placeholder,textarea::placeholder {
  color:rgba(148,163,184,0.7)}
 .honeypot-wrapper {
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden}
 .error-msg {
  font-size:0.78rem;
  color:var(--color-danger);
  min-height:1em;
  margin-top:0.25rem}
 .field-error input,.field-error select,.field-error textarea {
  border-color:var(--color-danger)}
 .field-error input:focus,.field-error select:focus,.field-error textarea:focus {
  box-shadow:0 0 0 2px rgba(248,113,113,0.2)}
 .form-footer {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:1.5rem;
  font-size:0.85rem;
  color:var(--color-text-subtle)}
 .btn-submit {
  min-width:10rem}
 .btn[disabled] {
  opacity:0.6;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none !important}
 .contact-aside {
  border-radius:var(--radius-lg);
  padding:1.5rem;
  background:rgba(15,23,42,0.95);
  border:1px solid rgba(148,163,184,0.45);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(10px);
  font-size:0.9rem;
  color:var(--color-text-muted);
  display:flex;
  flex-direction:column;
  gap:1rem}
 .contact-aside-highlight {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.5rem 0.8rem;
  border-radius:999px;
  background:rgba(22,163,74,0.15);
  color:#bbf7d0;
  font-size:0.85rem;
  font-weight:500}
 .contact-aside-highlight svg {
  width:1rem;
  height:1rem}
 .contact-features {
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin:1rem 0}
 .feature {
  display:flex;
  gap:0.75rem;
  align-items:flex-start}
 .feature-icon {
  width:2rem;
  height:2rem;
  border-radius:50%;
  background:rgba(99,102,241,0.1);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0}
 .feature-icon svg {
  width:1rem;
  height:1rem;
  color:var(--color-accent)}
 .feature-content h4 {
  margin:0 0 0.25rem 0;
  font-size:0.95rem}
 .feature-content p {
  margin:0;
  font-size:0.85rem;
  color:var(--color-text-muted)}
 .contact-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin:1rem 0;
  padding:1rem;
  background:rgba(30,41,59,0.5);
  border-radius:var(--radius-md);
  border:1px solid rgba(148,163,184,0.1)}
 .stat {
  text-align:center}
 .stat-number {
  display:block;
  font-size:1.5rem;
  font-weight:700;
  color:var(--color-accent);
  line-height:1}
 .stat-label {
  display:block;
  font-size:0.75rem;
  color:var(--color-text-muted);
  margin-top:0.25rem}
 .contact-alternative {
  text-align:center;
  padding-top:1rem;
  border-top:1px solid rgba(148,163,184,0.2)}
 .contact-alternative p {
  margin:0 0 1rem 0;
  color:var(--color-text-muted);
  font-size:0.9rem}
 .loading-spinner {
  display:none;
  width:1.2rem;
  height:1.2rem;
  border:2px solid rgba(255,255,255,0.3);
  border-top-color:var(--color-accent);
  border-radius:50%;
  animation:spin 1s linear infinite;
  margin-left:0.5rem}
 @keyframes spin {
  to {
  transform:rotate(360deg)}
 }
 .form-submitting .loading-spinner {
  display:inline-block}
 .scroll-progress {
  position:fixed;
  top:0;
  left:0;
  width:0%;
  height:3px;
  background:linear-gradient(90deg,var(--color-accent),#22c55e);
  z-index:1000;
  transition:width 0.1s ease}
 .site-footer {
  position:relative;
  background:radial-gradient( ellipse at top,rgba(2,6,23,0.95),rgba(15,23,42,0.85) );
  backdrop-filter:blur(20px);
  border-top:1px solid rgba(99,102,241,0.2);
  padding-top:4.5rem;
  padding-bottom:2.5rem;
  margin-top:5rem;
  overflow:hidden}
 .site-footer::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient( circle at 20% 80%,rgba(99,102,241,0.1),transparent 60% ),radial-gradient(circle at 80% 20%,rgba(22,163,74,0.08),transparent 60%);
  pointer-events:none}
 .footer-glass-pane {
  position:absolute;
  inset:0;
  background:linear-gradient( 180deg,rgba(15,23,42,0.3) 0%,rgba(2,6,23,0.5) 100% );
  backdrop-filter:blur(25px) saturate(180%);
  -webkit-backdrop-filter:blur(25px) saturate(180%);
  border-top:1px solid rgba(255,255,255,0.08);
  z-index:0}
 .footer-content-grid {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr;
  gap:3rem;
  width:90%;
  max-width:1200px;
  margin-inline:auto}
 @media (min-width:768px) {
  .footer-content-grid {
  grid-template-columns:1.5fr 1fr 1fr;
  gap:4rem}
 }
 .brand-col .footer-logo {
  font-size:2rem;
  font-weight:800;
  background:linear-gradient(135deg,#fff 0%,#c4b5fd 50%,#6366f1 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:inline-block;
  margin-bottom:1.25rem;
  letter-spacing:-0.02em;
  transition:all var(--transition-med)}
 .brand-col .footer-logo:hover {
  transform:translateY(-2px);
  filter:drop-shadow(0 4px 12px rgba(99,102,241,0.4))}
 .brand-col .footer-logo .text-accent {
  background:linear-gradient(135deg,#c4b5fd,#22c55e);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent}
 .footer-tagline {
  color:var(--color-text-muted);
  font-size:1rem;
  max-width:380px;
  line-height:1.7;
  font-weight:400;
  position:relative;
  padding-left:1rem}
 .footer-tagline::before {
  content:"";
  position:absolute;
  left:0;
  top:0.5rem;
  bottom:0.5rem;
  width:3px;
  background:linear-gradient(to bottom,var(--color-accent),#22c55e);
  border-radius:999px}
 .footer-col h4 {
  color:#fff;
  font-size:1.15rem;
  margin-bottom:1.5rem;
  font-weight:700;
  letter-spacing:-0.01em;
  position:relative;
  display:inline-block}
 .footer-col h4::after {
  content:"";
  position:absolute;
  left:0;
  bottom:-0.5rem;
  width:2rem;
  height:3px;
  background:var(--color-accent);
  border-radius:999px;
  transition:width var(--transition-med)}
 .footer-col:hover h4::after {
  width:3rem}
 .footer-nav {
  display:flex;
  flex-direction:column;
  gap:0.9rem}
 .footer-nav a {
  color:var(--color-text-muted);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  width:fit-content;
  text-decoration:none;
  font-size:0.98rem;
  font-weight:400;
  position:relative;
  padding:0.25rem 0}
 .footer-nav a::before {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:1px;
  background:var(--color-accent);
  transition:width 0.3s ease}
 @media (hover:hover) {
  .footer-nav a:hover {
  color:#fff;
  transform:translateX(8px)}
 .footer-nav a:hover::before {
  width:1.5rem}
 }
 .location-text {
  color:var(--color-text-muted);
  margin:0 0 1.5rem;
  font-size:0.95rem;
  display:flex;
  align-items:center;
  gap:0.5rem}
 .location-text::before {
  content:"📍";
  font-size:0.9rem}
 .social-links {
  display:flex;
  gap:1rem}
 .social-links a {
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,0.05);
  color:#fff;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  position:relative;
  overflow:hidden}
 .social-links a::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,var(--color-accent),#22c55e);
  opacity:0;
  transition:opacity 0.3s ease}
 @media (hover:hover) {
  .social-links a:hover {
  transform:translateY(-4px) scale(1.1);
  box-shadow:0 10px 25px rgba(99,102,241,0.3),0 0 0 2px rgba(255,255,255,0.1)}
 .social-links a:hover::before {
  opacity:1}
 }
 .social-links a svg {
  position:relative;
  z-index:1;
  transition:transform 0.3s ease}
 .social-links a:hover svg {
  transform:scale(1.2)}
 .footer-bottom {
  position:relative;
  z-index:2;
  border-top:1px solid rgba(255,255,255,0.08);
  padding-top:2rem;
  margin-top:3rem;
  text-align:center;
  color:var(--color-text-subtle);
  font-size:0.9rem}
 .footer-bottom .container {
  max-width:1200px;
  margin-inline:auto;
  padding-inline:1.25rem}
 .footer-bottom p {
  margin:0;
  font-size:0.85rem;
  letter-spacing:0.02em;
  opacity:0.8}
 .modal-backdrop {
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.82);
  backdrop-filter:blur(14px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:1.25rem;
  z-index:50}
 .modal-backdrop.is-visible {
  display:flex}
 .modal-dialog {
  max-width:640px;
  width:100%;
  max-height:min(80vh,560px);
  overflow:hidden;
  border-radius:1.1rem;
  background:linear-gradient( 145deg,rgba(129,140,248,0.25),rgba(15,23,42,0.98) );
  border:1px solid rgba(148,163,184,0.4);
  box-shadow:0 40px 80px rgba(15,23,42,0.9),inset 0 1px 0 0 rgba(255,255,255,0.05);
  display:flex;
  flex-direction:column;
  animation:modalAppear 0.4s cubic-bezier(0.4,0,0.2,1)}
 @keyframes modalAppear {
  from {
  opacity:0;
  transform:scale(0.9) translateY(20px)}
 to {
  opacity:1;
  transform:scale(1) translateY(0)}
 }
 .modal-header {
  padding:0.9rem 1.1rem 0.7rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
  border-bottom:1px solid rgba(148,163,184,0.4)}
 .modal-title {
  margin:0;
  font-size:1rem}
 .modal-body {
  padding:0.9rem 1.1rem 1rem;
  overflow-y:auto;
  font-size:0.88rem;
  color:var(--color-text-muted);
  display:grid;
  gap:0.75rem}
 .modal-meta {
  display:flex;
  flex-wrap:wrap;
  gap:0.35rem}
 .modal-gallery {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0.4rem}
 .modal-thumb {
  border-radius:0.6rem;
  border:none;
  background:none;
  padding:0;
  overflow:hidden}
 .modal-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0.5rem;
  cursor:pointer;
  transition:transform 150ms ease-out,box-shadow 150ms ease-out;
  border:1px solid rgba(148,163,184,0.45)}
 @media (hover:hover) {
  .modal-thumb img:hover {
  transform:scale(1.05);
  box-shadow:0 0 15px rgba(99,102,241,0.5);
  border-color:rgba(148,163,184,0.7)}
 }
 .modal-close-btn {
  border-radius:999px;
  width:2.1rem;
  height:2.1rem;
  border:1px solid rgba(148,163,184,0.55);
  background:rgba(15,23,42,0.96);
  color:var(--color-text-muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background var(--duration-fast) var(--animation-smooth),color var(--duration-fast) var(--animation-smooth),transform var(--duration-fast) var(--animation-smooth),border-color var(--duration-fast) var(--animation-smooth)}
 .modal-close-btn svg {
  width:1rem;
  height:1rem}
 @media (hover:hover) {
  .modal-close-btn:hover,.modal-close-btn:focus-visible {
  background:rgba(129,140,248,0.18);
  border-color:rgba(129,140,248,0.9);
  color:#e5e7eb;
  transform:translateY(-1px);
  outline:none}
 }
 .toast-container {
  position:fixed;
  inset-inline:0;
  top:0.5rem;
  display:grid;
  place-items:center;
  pointer-events:none;
  z-index:60}
 .toast {
  min-width:min(92vw,360px);
  border-radius:999px;
  padding:0.55rem 0.9rem;
  display:flex;
  align-items:center;
  gap:0.5rem;
  background:linear-gradient( 135deg,rgba(15,23,42,0.98),rgba(30,41,59,0.95) );
  border:1px solid rgba(148,163,184,0.4);
  box-shadow:0 25px 50px -12px rgba(15,23,42,0.8),0 0 0 1px rgba(255,255,255,0.05);
  backdrop-filter:blur(20px);
  color:var(--color-text);
  font-size:0.8rem;
  opacity:0;
  transform:translateY(-20px);
  pointer-events:none;
  transition:opacity var(--duration-medium) var(--animation-smooth),transform var(--duration-medium) var(--animation-smooth)}
 .toast.is-visible {
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  animation:toastSlideIn 0.3s cubic-bezier(0.4,0,0.2,1)}
 @keyframes toastSlideIn {
  from {
  opacity:0;
  transform:translateY(-20px)}
 to {
  opacity:1;
  transform:translateY(0)}
 }
 .toast-icon {
  width:1.35rem;
  height:1.35rem;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center}
 .toast-icon svg {
  width:0.9rem;
  height:0.9rem}
 .toast--success .toast-icon {
  background:rgba(22,163,74,0.25);
  color:#bbf7d0}
 .toast--error .toast-icon {
  background:rgba(248,113,113,0.25);
  color:#fecaca}
 .toast-dismiss {
  margin-left:auto;
  background:transparent;
  border:none;
  color:var(--color-text-muted);
  cursor:pointer;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center}
 .toast-dismiss svg {
  width:0.9rem;
  height:0.9rem}
 [data-animate="fade-up"] {
  opacity:1;
  transform:none}
 [data-animate="fade-up"].is-visible {
  opacity:1;
  transform:translateY(0) scale(1)}
 .card.is-visible:nth-child(2),.team-card.is-visible:nth-child(2) {
  transition-delay:100ms}
 .card.is-visible:nth-child(3),.team-card.is-visible:nth-child(3) {
  transition-delay:200ms}
 .card.is-visible:nth-child(4),.team-card.is-visible:nth-child(4) {
  transition-delay:300ms}
:focus-visible {
  outline:2px solid rgba(129,140,248,0.9);
  outline-offset:2px}
 .no-outline:focus-visible {
  outline:none}
 .ripple {
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,0.6);
  transform:scale(0);
  animation:ripple-animation 0.6s linear;
  pointer-events:none}
 @keyframes ripple-animation {
  to {
  transform:scale(4);
  opacity:0}
 }
 .back-to-top {
  position:fixed;
  bottom:1.25rem;
  right:1.25rem;
  width:2.8rem;
  height:2.8rem;
  border-radius:999px;
  background:linear-gradient(135deg,var(--color-accent),#4f46e5);
  color:#f9fafb;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  z-index:40;
  box-shadow:0 10px 30px rgba(99,102,241,0.5),0 0 0 1px rgba(255,255,255,0.1);
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  opacity:0;
  transform:translateY(10px);
  pointer-events:none}
 .back-to-top.is-visible {
  opacity:1;
  transform:translateY(0);
  pointer-events:auto}
 .back-to-top:hover,.back-to-top:focus-visible {
  transform:translateY(-4px) scale(1.1);
  box-shadow:0 20px 40px rgba(99,102,241,0.6),0 0 0 2px rgba(255,255,255,0.15);
  color:#f9fafb;
  outline:none}
 .back-to-top svg {
  width:1.5rem;
  height:1.5rem}
 .project-slideshow {
  position:relative;
  width:100%;
  height:0;
  padding-bottom:56.25%;
  background-color:#0f172a}
 .project-slideshow .slide {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1s ease-in-out}
 .project-slideshow .slide.active {
  opacity:1}
 .avatar-inner {
  background-color:#cbd5e1;
  position:relative;
  z-index:10}
 .avatar-inner img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--duration-medium) var(--animation-smooth)}
 .avatar:hover .avatar-inner img {
  transform:scale(1.05)}
 .lightbox-overlay {
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.92);
  backdrop-filter:blur(10px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100;
  padding:1rem;
  cursor:pointer}
 .lightbox-overlay.is-visible {
  display:flex}
 #lightbox-image {
  display:block;
  max-width:90vw;
  max-height:90vh;
  object-fit:contain;
  border-radius:0.5rem;
  box-shadow:0 10px 40px rgba(0,0,0,0.5);
  cursor:default}
 .lightbox-close {
  position:absolute;
  top:1rem;
  right:1.5rem;
  font-size:2.5rem;
  font-weight:200;
  color:#e5e7eb;
  background:none;
  border:none;
  cursor:pointer;
  line-height:1;
  padding:0.5rem}
 section.section,footer.site-footer {
  content-visibility:auto;
  contain-intrinsic-size:1000px}
 @media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
  animation-duration:0.01ms !important;
  animation-iteration-count:1 !important;
  transition-duration:0.01ms !important}
 }
 @media print {
  body::before,body::after,header.site-header,.hero-visual,.toast-container,.modal-backdrop,.contact-aside,.scroll-progress,.back-to-top {
  display:none !important}
 body {
  background:#ffffff;
  color:#111827}
 .site-shell {
  max-width:100%;
  padding-inline:1rem}
 .card,.team-card,.contact-card {
  box-shadow:none;
  background:#ffffff !important;
  border-color:#e5e7eb}
 a::after {
  content:" (" attr(href) ")";
  font-size:0.8em}
 }
 @media (max-width:768px) {
  body::before,body::after,html::after {
  display:none !important;
  animation:none !important;
  filter:none !important}
 body {
  background-color:#020617 !important;
  background-image:none !important}
 header.site-header,.site-nav,.hero-visual-panel,.contact-card,.contact-aside,.site-footer,.modal-backdrop,.toast {
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  background-color:rgba(15,23,42,0.98) !important}
 .card,.team-card {
  transform:none !important;
  perspective:none !important}
 .hero-visual-orbit {
  animation:none !important;
  border-style:solid !important}
 }
 .project-slideshow {
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:inherit}
 .project-slideshow .slide {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 0.5s ease-in-out;
  z-index:1}
 .project-slideshow .slide.active {
  opacity:1;
  z-index:2}
 .faq-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;
  margin-top:2rem}
 .faq-item {
  background:var(--color-surface);
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-md);
  padding:1.5rem;
  transition:all var(--duration-fast) var(--animation-smooth)}
 .faq-item:hover {
  transform:translateY(-4px);
  border-color:rgba(99,102,241,0.3);
  box-shadow:var(--shadow-md);
  background:rgba(30,41,59,0.8)}
 .faq-question {
  font-size:1.1rem;
  font-weight:600;
  color:var(--color-heading);
  margin-bottom:0.75rem;
  line-height:1.3}
 .faq-answer {
  color:var(--color-text-subtle);
  font-size:0.95rem;
  line-height:1.6}