/* ============================================
   METEHAN ATCI — PREMIUM UI v3
   Theme: Violet × Cyan × Gold
   Dark, Glassmorphism, Orbital Animations
   ============================================ */

/* ─── Design Tokens ─── */
:root {
  /* Violet (Primary) */
  --primary:         #7C3AED;
  --primary-light:   #A78BFA;
  --primary-dark:    #6D28D9;
  --primary-glow:    rgba(124,58,237,0.35);
  --primary-glow-md: rgba(124,58,237,0.18);

  /* Cyan (Accent) */
  --accent:          #0EA5E9;
  --accent-light:    #38BDF8;
  --accent-glow:     rgba(14,165,233,0.28);

  /* Gold (CTA) */
  --gold:            #F59E0B;
  --gold-light:      #FBBF24;
  --gold-glow:       rgba(245,158,11,0.25);

  /* Gradients */
  --gradient-main:   linear-gradient(135deg,#7C3AED 0%,#4338CA 50%,#0EA5E9 100%);
  --gradient-violet: linear-gradient(135deg,#7C3AED,#A78BFA);
  --gradient-cyan:   linear-gradient(135deg,#0EA5E9,#38BDF8);
  --gradient-gold:   linear-gradient(135deg,#F59E0B,#FBBF24);
  --gradient-text:   linear-gradient(135deg,#A78BFA 0%,#38BDF8 100%);
  --gradient-subtle: linear-gradient(135deg,rgba(124,58,237,.1),rgba(14,165,233,.06));
  --gradient-card:   linear-gradient(135deg,rgba(124,58,237,.08),rgba(14,165,233,.04));

  /* Backgrounds — all unified to same deep-dark #030611 tone */
  --bg-primary:      #030611;
  --bg-secondary:    #030611;
  --bg-card:         #070B18;
  --bg-elevated:     #0A0F1E;
  --bg-glass:        rgba(7,11,24,0.92);

  /* Text */
  --text-primary:    #F8FAFC;
  --text-secondary:  #94A3B8;
  --text-muted:      #64748B;

  /* Borders */
  --border:          rgba(124,58,237,0.15);
  --border-hover:    rgba(124,58,237,0.45);
  --border-accent:   rgba(14,165,233,0.3);
  --border-glow:     rgba(167,139,250,0.25);

  /* Shadows */
  --shadow-sm:       0 2px 12px rgba(0,0,0,.5);
  --shadow-md:       0 8px 32px rgba(0,0,0,.6);
  --shadow-lg:       0 20px 60px rgba(0,0,0,.7);
  --shadow-glow:     0 0 60px var(--primary-glow);
  --shadow-glow-sm:  0 0 24px var(--primary-glow-md);

  /* Transitions */
  --t-fast:  .2s cubic-bezier(.4,0,.2,1);
  --t-base:  .35s cubic-bezier(.4,0,.2,1);
  --t-slow:  .6s cubic-bezier(.4,0,.2,1);

  /* Radii */
  --r-sm:   .5rem;
  --r-md:   .875rem;
  --r-lg:   1.25rem;
  --r-xl:   2rem;
  --r-full: 9999px;

  /* Layout */
  --max-w:  1200px;
  --py:     6rem;
}

/* ─── Reset ─── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; font-size:16px; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg-primary);
  color:var(--text-primary);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block; }
a  { color:inherit; text-decoration:none; transition:color var(--t-fast); }
ul,ol { list-style:none; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg-primary); }
::-webkit-scrollbar-thumb { background:var(--gradient-main); border-radius:2px; }

/* ─── Typography ─── */
h1,h2,h3,h4,h5,h6 {
  color:var(--text-primary);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.025em;
}
h1 { font-size:clamp(2.4rem,5.5vw,4.5rem); }
h2 { font-size:clamp(1.8rem,4vw,3.2rem); }
h3 { font-size:clamp(1.2rem,2.5vw,1.6rem); }
p  { color:var(--text-secondary); line-height:1.8; }

.gradient-text {
  background:var(--gradient-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.mono { font-family:'JetBrains Mono',monospace; }

.section-label {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--primary-light);
  margin-bottom:.75rem;
}
.section-label::before {
  content:'';
  display:inline-block;
  width:2rem; height:2px;
  background:var(--primary);
  border-radius:1px;
  opacity:.7;
}

/* ─── Layout ─── */
.container { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 1.5rem; }
.section { padding:var(--py) 0; position:relative; background:var(--bg-primary); }
.section-dark { background:var(--bg-primary); }

.section-header {
  text-align:center;
  max-width:680px;
  margin:0 auto 4rem;
}
.section-header h2 { margin-bottom:1rem; }
.section-header p  { font-size:1.05rem; }

/* ─── Navbar ─── */
.navbar {
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background:rgba(3,6,17,.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid transparent;
  transition:all var(--t-base);
}
.navbar.scrolled {
  border-bottom-color:var(--border);
  background:rgba(3,6,17,.97);
  box-shadow:0 4px 32px rgba(0,0,0,.5);
}
.navbar-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:4rem;
}
.navbar-brand {
  display:flex;
  align-items:center;
  gap:.75rem;
  font-weight:700;
  font-size:1.05rem;
}
/* MA logo hidden per user request */
.logo-icon { display:none !important; }
.nav-links { display:flex; align-items:center; gap:.25rem; }
.nav-link {
  padding:.5rem 1rem;
  font-size:.875rem;
  font-weight:500;
  color:var(--text-secondary);
  border-radius:var(--r-sm);
  transition:all var(--t-fast);
  position:relative;
}
.nav-link:hover, .nav-link.active { color:var(--text-primary); background:rgba(124,58,237,.08); }
.nav-link.active::after {
  content:'';
  position:absolute;
  bottom:0; left:50%;
  transform:translateX(-50%);
  width:1.5rem; height:2px;
  background:var(--primary-light);
  border-radius:1px;
}
.nav-cta {
  margin-left:.5rem;
  padding:.45rem 1.15rem;
  font-size:.85rem;
  font-weight:600;
  color:var(--primary-light);
  background:rgba(124,58,237,.08);
  border-radius:var(--r-sm);
  transition:all var(--t-fast);
  border:1px solid rgba(167,139,250,.28);
  letter-spacing:.01em;
}
.nav-cta:hover {
  background:rgba(124,58,237,.16);
  border-color:rgba(167,139,250,.5);
  color:#fff;
  transform:translateY(-1px);
}

/* Mobile toggle */
.mobile-toggle {
  display:none;
  flex-direction:column;
  gap:5px;
  padding:.5rem;
  background:rgba(124,58,237,.1);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
}
.mobile-toggle span {
  display:block;
  width:22px; height:2px;
  background:var(--text-primary);
  border-radius:1px;
  transition:all var(--t-fast);
}
.mobile-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.mobile-toggle.active span:nth-child(2) { opacity:0; }
.mobile-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

.mobile-menu {
  display:none;
  position:absolute;
  top:100%; left:0; right:0;
  background:rgba(5,8,22,.98);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:1rem;
}
.mobile-menu.open { display:block; animation:slideDown .25s ease; }
@keyframes slideDown {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}
.mobile-menu .nav-link { display:block; padding:.75rem 1rem; border-bottom:1px solid var(--border); }
.mobile-menu .nav-link:last-child { border-bottom:none; }
.mobile-menu .nav-cta { display:block; text-align:center; margin:.75rem 0 0; padding:.875rem; border-radius:var(--r-md); }

/* ─── Buttons — Soft glass style, not loud gradients ─── */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-weight:600;
  font-size:.95rem;
  border-radius:var(--r-md);
  transition:all var(--t-base);
  cursor:pointer;
  white-space:nowrap;
  outline:none;
  -webkit-tap-highlight-color:transparent;
  letter-spacing:.015em;
}
.btn:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }

/* Primary — filled glass with violet border */
.btn-primary {
  padding:.875rem 2rem;
  background:rgba(124,58,237,.12);
  color:var(--primary-light);
  border:1px solid rgba(167,139,250,.35);
  backdrop-filter:blur(8px);
  position:relative;
  overflow:hidden;
}
.btn-primary::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(167,139,250,.08),transparent);
  opacity:0;
  transition:opacity var(--t-base);
}
.btn-primary:hover::after { opacity:1; }
.btn-primary:hover {
  background:rgba(124,58,237,.2);
  border-color:rgba(167,139,250,.55);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 0 24px rgba(124,58,237,.25), 0 8px 24px rgba(0,0,0,.3);
}

/* Ghost — transparent with subtle border */
.btn-ghost {
  padding:.875rem 2rem;
  background:transparent;
  color:var(--text-secondary);
  border:1px solid rgba(255,255,255,.1);
}
.btn-ghost:hover {
  border-color:rgba(255,255,255,.22);
  color:var(--text-primary);
  background:rgba(255,255,255,.04);
  transform:translateY(-2px);
}

/* Gold CTA — warm, soft amber glass */
.btn-gold {
  padding:.875rem 2rem;
  background:rgba(245,158,11,.1);
  color:var(--gold);
  font-weight:700;
  border:1px solid rgba(245,158,11,.3);
  backdrop-filter:blur(8px);
}
.btn-gold:hover {
  background:rgba(245,158,11,.18);
  border-color:rgba(245,158,11,.5);
  color:#FBBF24;
  transform:translateY(-2px);
  box-shadow:0 0 24px rgba(245,158,11,.2);
}

/* pulse-ring: gentle breathing glow (not animation overload) */
.pulse-ring { animation:btnPulse 3s ease-in-out infinite; }
@keyframes btnPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(124,58,237,.3); }
  50%      { box-shadow:0 0 0 8px rgba(124,58,237,.0); }
}

/* ─── Cards ─── */
.card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:2rem;
  transition:all var(--t-base);
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:rgba(124,58,237,0.5);
  opacity:0;
  transition:opacity var(--t-base);
}
.card:hover::before { opacity:.5; }
.card:hover {
  border-color:var(--border-hover);
  transform:translateY(-5px);
  box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 1px var(--border-hover);
}
.card-glow:hover { box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 40px var(--primary-glow-md); }

/* 3D tilt — applied via JS */
.card-tilt { transform-style:preserve-3d; }
.card-tilt > * { transform:translateZ(20px); }

/* ─── HERO ─── */
.hero {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:7rem 0 5rem;
  overflow:hidden;
}

/* Animated mesh background orbs */
.hero-orb {
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(80px);
}
.hero-orb-1 {
  width:600px; height:600px;
  background:radial-gradient(circle,rgba(124,58,237,.3),transparent 70%);
  top:-20%; right:-10%;
  animation:orbFloat1 12s ease-in-out infinite;
}
.hero-orb-2 {
  width:500px; height:500px;
  background:radial-gradient(circle,rgba(14,165,233,.2),transparent 70%);
  bottom:-10%; left:-5%;
  animation:orbFloat2 15s ease-in-out infinite;
}
.hero-orb-3 {
  width:300px; height:300px;
  background:radial-gradient(circle,rgba(245,158,11,.15),transparent 70%);
  top:30%; left:40%;
  animation:orbFloat3 10s ease-in-out infinite;
}
@keyframes orbFloat1 {
  0%,100% { transform:translate(0,0) scale(1); }
  33%      { transform:translate(-3%,4%) scale(1.08); }
  66%      { transform:translate(3%,-3%) scale(.94); }
}
@keyframes orbFloat2 {
  0%,100% { transform:translate(0,0) scale(1); }
  50%      { transform:translate(3%,-5%) scale(1.1); }
}
@keyframes orbFloat3 {
  0%,100% { transform:translate(0,0); opacity:.7; }
  50%      { transform:translate(-4%,4%); opacity:1; }
}

/* Grid overlay */
.hero-grid-bg {
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(124,58,237,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,58,237,.04) 1px,transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
}
.hero-grid-bg::after {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center,transparent 50%,var(--bg-primary) 80%);
}

.hero-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:center;
  position:relative;
  z-index:1;
}

/* Hero content */
.hero-content { max-width:560px; }

.hero-badge {
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.4rem 1rem;
  background:rgba(124,58,237,.12);
  border:1px solid rgba(124,58,237,.3);
  border-radius:var(--r-full);
  font-size:.78rem;
  font-weight:600;
  color:var(--primary-light);
  margin-bottom:1.5rem;
  font-family:'JetBrains Mono',monospace;
}
.hero-badge-dot {
  width:8px; height:8px;
  background:#22C55E;
  border-radius:50%;
  box-shadow:0 0 8px rgba(34,197,94,.7);
  animation:pulseDot 2s infinite;
}
@keyframes pulseDot {
  0%,100% { box-shadow:0 0 8px rgba(34,197,94,.7); }
  50%      { box-shadow:0 0 16px rgba(34,197,94,1); }
}

.hero-content h1 {
  margin-bottom:1.5rem;
  line-height:1.1;
}
.hero-title-line { display:block; }
.hero-title-line.small {
  font-size:clamp(1.1rem,2.5vw,1.6rem);
  font-weight:400;
  color:var(--text-secondary);
  font-family:'JetBrains Mono',monospace;
  margin-bottom:.25rem;
}
.hero-title-line.gradient { display:block; }
.hero-title-line.name {
  font-size:clamp(2.5rem,5.5vw,4.5rem);
  font-weight:900;
}

.hero-desc {
  font-size:1.08rem;
  line-height:1.85;
  color:var(--text-secondary);
  margin-bottom:2.25rem;
}

.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.5rem; }

.hero-stack {
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
.hero-stack-label {
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.1em;
}
.hero-stack-tags { display:flex; gap:.5rem; flex-wrap:wrap; }
.hero-stack-tag {
  padding:.25rem .75rem;
  font-size:.72rem;
  font-weight:600;
  font-family:'JetBrains Mono',monospace;
  color:var(--primary-light);
  background:rgba(124,58,237,.1);
  border:1px solid rgba(124,58,237,.2);
  border-radius:var(--r-full);
  transition:all var(--t-fast);
}
.hero-stack-tag:hover {
  background:rgba(124,58,237,.2);
  border-color:rgba(124,58,237,.5);
  transform:translateY(-2px);
}

/* Hero Visual / Orbital */
.hero-visual { display:flex; justify-content:center; align-items:center; }

.orbital-container {
  position:relative;
  width:420px; height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.orbital-ring {
  position:absolute;
  border-radius:50%;
  border:1px solid transparent;
  pointer-events:none;
}
.orbital-ring-1 {
  width:100%; height:100%;
  border-color:rgba(124,58,237,.25);
  border-top-color:rgba(124,58,237,.7);
  animation:orbit 8s linear infinite;
}
.orbital-ring-2 {
  width:75%; height:75%;
  border-color:rgba(14,165,233,.2);
  border-bottom-color:rgba(14,165,233,.6);
  animation:orbit 12s linear infinite reverse;
}
@keyframes orbit { to { transform:rotate(360deg); } }

.orbital-dot {
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.orbital-dot-1 {
  width:12px; height:12px;
  background:var(--primary-light);
  top:2px; left:50%;
  transform:translateX(-50%);
  box-shadow:0 0 16px var(--primary-glow);
}
.orbital-dot-2 {
  width:8px; height:8px;
  background:var(--accent-light);
  bottom:14%; right:5%;
  box-shadow:0 0 12px var(--accent-glow);
}

.photo-frame {
  position:relative;
  width:300px; height:300px;
  border-radius:var(--r-xl);
  overflow:hidden;
  border:2px solid rgba(124,58,237,.35);
  box-shadow:0 0 60px var(--primary-glow-md), 0 0 120px rgba(14,165,233,.1);
  z-index:2;
}
.photo-frame img {
  width:100%; height:100%;
  object-fit:cover;
  object-position:top;
}

/* Floating badges */
/* Float badges — position/animation controlled by JS 3D orbit */
.float-badge {
  position:absolute;
  padding:.5rem 1rem;
  background:rgba(7,11,24,0.75);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(167,139,250,0.35);
  border-radius:var(--r-md);
  font-size:.78rem;
  font-weight:600;
  color:var(--text-primary);
  white-space:nowrap;
  will-change:transform,opacity;
  box-shadow:0 4px 20px rgba(0,0,0,.5), 0 0 12px rgba(124,58,237,.2);
  display:flex;
  align-items:center;
  gap:.4rem;
  pointer-events:none;
  /* Positions and animation driven by initSpaceOrbit() in main.js */
}

/* Full-hero space canvas (Antigravity style) */
#spaceCanvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
}
/* Hero content sits above canvas */
.hero > .container { position:relative; z-index:1; }
.hero > .hero-orb,
.hero > .hero-grid-bg { z-index:0; }

/* ─── Hero Grid (sub-pages: hakkimda, hizmetler) ─── */
.hero-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}
.hero-image-card {
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow-lg), 0 0 60px var(--primary-glow-md);
}
.hero-image-card img {
  width:100%; height:420px;
  object-fit:cover; object-position:top;
  display:block;
  transition:transform var(--t-slow);
}
.hero-image-card:hover img { transform:scale(1.04); }
.hero-image-info {
  position:absolute;
  bottom:0; left:0; right:0;
  padding:1.5rem;
  background:linear-gradient(to top,rgba(3,6,17,.98) 0%,transparent 100%);
}
.tech-tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.tech-tag {
  padding:.25rem .7rem;
  font-size:.7rem;
  font-weight:600;
  font-family:'JetBrains Mono',monospace;
  color:var(--primary-light);
  background:rgba(124,58,237,.1);
  border:1px solid rgba(124,58,237,.22);
  border-radius:var(--r-full);
}
.hero-image-info .tech-tag {
  color:var(--text-primary);
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.2);
}

/* ─── Services Grid (hizmetler page) ─── */
.services-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.service-card {
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  padding:2rem;
}
.service-icon {
  width:3rem; height:3rem;
  display:flex; align-items:center; justify-content:center;
  background:rgba(124,58,237,.1);
  border:1px solid rgba(124,58,237,.2);
  border-radius:var(--r-md);
  color:var(--primary-light);
  flex-shrink:0;
  transition:all var(--t-base);
}
.card:hover .service-icon {
  background:rgba(124,58,237,.2);
  box-shadow:0 0 24px var(--primary-glow-md);
}
.service-content h2, .service-content h3 { margin-bottom:.4rem; }
.service-content p { font-size:.875rem; }
.service-features { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.85rem; }
.service-feature-tag {
  padding:.2rem .6rem;
  font-size:.7rem;
  font-weight:500;
  font-family:'JetBrains Mono',monospace;
  color:var(--accent-light);
  background:rgba(14,165,233,.08);
  border:1px solid rgba(14,165,233,.18);
  border-radius:var(--r-full);
}

/* btn-accent (alias for btn-primary for backward compat) */
.btn-accent {
  padding:.875rem 2rem;
  background:rgba(124,58,237,.12);
  color:var(--primary-light);
  font-weight:600;
  border:1px solid rgba(167,139,250,.35);
  border-radius:var(--r-md);
  display:inline-flex; align-items:center; gap:.5rem;
  transition:all var(--t-base);
  backdrop-filter:blur(8px);
}
.btn-accent:hover { transform:translateY(-2px); background:rgba(124,58,237,.22); border-color:rgba(167,139,250,.55); color:#fff; box-shadow:0 0 20px rgba(124,58,237,.2); }

/* Scroll indicator */
.scroll-indicator {
  position:absolute;
  bottom:2rem; left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  font-size:.72rem;
  color:var(--text-muted);
  font-family:'JetBrains Mono',monospace;
  text-transform:uppercase;
  letter-spacing:.1em;
  animation:fadeInUp 1s 1s both;
}
.scroll-line {
  width:1px; height:40px;
  background:linear-gradient(to bottom,var(--primary),transparent);
  animation:scrollPulse 1.5s infinite;
}
@keyframes scrollPulse {
  0%,100% { transform:scaleY(1); opacity:.6; }
  50%      { transform:scaleY(1.3); opacity:1; }
}
@keyframes fadeInUp {
  from { opacity:0; transform:translateX(-50%) translateY(16px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}


/* ─── Marquee ─── */
.marquee-section {
  padding:1.5rem 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  overflow:hidden;
  background:var(--bg-primary);
}
.marquee-track {
  display:flex;
  gap:3rem;
  animation:marquee 25s linear infinite;
  width:max-content;
}
.marquee-track:hover { animation-play-state:paused; }
.marquee-item {
  display:flex;
  align-items:center;
  gap:.6rem;
  font-family:'JetBrains Mono',monospace;
  font-size:.78rem;
  font-weight:600;
  color:var(--text-muted);
  white-space:nowrap;
  transition:color var(--t-fast);
}
.marquee-item:hover { color:var(--primary-light); }
.marquee-item::before {
  content:'';
  width:6px; height:6px;
  background:var(--primary);
  border-radius:50%;
  flex-shrink:0;
}
@keyframes marquee {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* ─── Intro Two-Col ─── */
.intro-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:center;
}
.intro-text .section-label { margin-bottom:.75rem; }
.intro-text h2 { margin-bottom:1.25rem; }
.intro-text p  { margin-bottom:1rem; font-size:1rem; line-height:1.85; }

.intro-stats {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem;
}
.intro-stat {
  padding:1.5rem;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  text-align:center;
  transition:all var(--t-base);
}
.intro-stat:hover {
  border-color:var(--border-hover);
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,.5), 0 0 30px var(--primary-glow-md);
}
.intro-stat-num {
  font-size:2.5rem;
  font-weight:900;
  background:var(--gradient-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1;
  margin-bottom:.4rem;
}
.intro-stat-label { font-size:.8rem; color:var(--text-muted); font-weight:500; }

/* ─── Alternating Service Rows ─── */
.service-rows { display:flex; flex-direction:column; gap:2rem; }
.service-row {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2rem;
  padding:2rem;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  backdrop-filter:blur(12px);
  transition:all var(--t-base);
  position:relative;
  overflow:hidden;
}
.service-row::before {
  content:'';
  position:absolute;
  top:0; left:0; bottom:0;
  width:3px;
  background:rgba(124,58,237,0.55);
  opacity:0;
  transition:opacity var(--t-base);
}
.service-row:hover { border-color:var(--border-hover); transform:translateX(6px); }
.service-row:hover::before { opacity:1; }

.service-row-icon {
  width:4rem; height:4rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(124,58,237,.1);
  border:1px solid rgba(124,58,237,.2);
  border-radius:var(--r-lg);
  color:var(--primary-light);
  flex-shrink:0;
  transition:all var(--t-base);
}
.service-row:hover .service-row-icon {
  background:rgba(124,58,237,.2);
  box-shadow:0 0 24px var(--primary-glow-md);
}
.service-row-body {}
.service-row-body h3 { font-size:1.1rem; margin-bottom:.4rem; }
.service-row-body p  { font-size:.875rem; margin-bottom:.75rem; }
.service-tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.service-tag {
  padding:.2rem .65rem;
  font-size:.72rem;
  font-weight:500;
  font-family:'JetBrains Mono',monospace;
  color:var(--primary-light);
  background:rgba(124,58,237,.08);
  border:1px solid rgba(124,58,237,.18);
  border-radius:var(--r-full);
}

/* ─── Stats Section ─── */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
}
.stat-card { text-align:center; padding:2rem 1rem; }
.stat-number {
  font-size:3rem;
  font-weight:900;
  background:var(--gradient-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1;
  margin-bottom:.5rem;
}
.stat-label { font-size:.875rem; color:var(--text-muted); font-weight:500; }
.stat-bar {
  width:3rem; height:3px;
  background:var(--primary);
  border-radius:2px;
  margin:.75rem auto 0;
  opacity:.3;
}

/* ─── Features Grid ─── */
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.feature-card { text-align:center; }
.feature-icon {
  width:3.5rem; height:3.5rem;
  margin:0 auto 1.25rem;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-md);
  transition:all var(--t-base);
}
.feature-icon.violet {
  background:rgba(124,58,237,.1);
  color:var(--primary-light);
  border:1px solid rgba(124,58,237,.2);
}
.feature-icon.cyan {
  background:rgba(14,165,233,.1);
  color:var(--accent-light);
  border:1px solid rgba(14,165,233,.2);
}
.feature-icon.gold {
  background:rgba(245,158,11,.1);
  color:var(--gold-light);
  border:1px solid rgba(245,158,11,.2);
}
.card:hover .feature-icon.violet { box-shadow:0 0 30px rgba(124,58,237,.25); }
.card:hover .feature-icon.cyan   { box-shadow:0 0 30px rgba(14,165,233,.25); }
.card:hover .feature-icon.gold   { box-shadow:0 0 30px rgba(245,158,11,.2); }
.feature-card h3 { margin-bottom:.75rem; font-size:1.1rem; }
.feature-card p  { font-size:.9rem; }

/* ─── Portfolio Grid ─── */
.portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.project-card { overflow:hidden; padding:0; }
.project-image { position:relative; overflow:hidden; height:210px; }
.project-image img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform var(--t-slow);
}
.project-card:hover .project-image img { transform:scale(1.06); }
.project-image-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  height:210px;
  gap:2px;
}
.project-image-grid img {
  width:100%; height:100%;
  object-fit:cover;
  cursor:pointer;
  transition:opacity var(--t-fast);
}
.project-image-grid img:hover { opacity:.8; }
.project-body { padding:1.4rem; }
.project-body h2, .project-body h3 { font-size:1.1rem; margin-bottom:.5rem; }
.project-body p {
  font-size:.84rem;
  margin-bottom:.9rem;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.project-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.project-tag {
  padding:.2rem .6rem;
  font-size:.7rem;
  font-weight:500;
  font-family:'JetBrains Mono',monospace;
  color:var(--primary-light);
  background:rgba(124,58,237,.08);
  border:1px solid rgba(124,58,237,.18);
  border-radius:var(--r-full);
}
.project-link {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  width:100%;
  padding:.65rem;
  font-size:.85rem;
  font-weight:600;
  border-radius:var(--r-md);
  transition:all var(--t-fast);
}
/* Project link buttons — glass style, no loud solid color */
.project-link.primary {
  background:rgba(124,58,237,.12);
  color:var(--primary-light);
  border:1px solid rgba(167,139,250,.3);
  backdrop-filter:blur(8px);
}
.project-link.primary:hover {
  background:rgba(124,58,237,.22);
  border-color:rgba(167,139,250,.55);
  color:#fff;
  box-shadow:0 0 20px rgba(124,58,237,.2);
}
.project-link.contact {
  background:rgba(245,158,11,.08);
  color:var(--gold);
  border:1px solid rgba(245,158,11,.25);
}
.project-link.contact:hover {
  background:rgba(245,158,11,.16);
  border-color:rgba(245,158,11,.45);
  box-shadow:0 0 16px rgba(245,158,11,.15);
}

/* ─── CTA ─── */
.cta-card {
  max-width:720px;
  margin:0 auto;
  padding:3.5rem;
  text-align:center;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  position:relative;
  overflow:hidden;
}
.cta-card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:rgba(124,58,237,0.45);
}
.cta-card::after {
  content:'';
  position:absolute;
  bottom:-40%; right:-10%;
  width:350px; height:350px;
  background:radial-gradient(circle,var(--primary-glow-md),transparent 65%);
  pointer-events:none;
}
.cta-card h2 { margin-bottom:1rem; }
.cta-card p  { margin-bottom:2rem; max-width:500px; margin-left:auto; margin-right:auto; }

/* ─── Skills ─── */
.skills-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.skill-item { padding:1.5rem; }
.skill-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
.skill-name { display:flex; align-items:center; gap:.5rem; font-weight:600; font-size:.95rem; }
.skill-name .dot { width:8px; height:8px; border-radius:50%; }
.skill-percent {
  font-family:'JetBrains Mono',monospace;
  font-weight:600;
  font-size:.85rem;
  background:var(--gradient-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.skill-bar { width:100%; height:6px; background:rgba(255,255,255,.05); border-radius:3px; overflow:hidden; }
.skill-fill {
  height:100%;
  border-radius:3px;
  background:linear-gradient(90deg, #6D28D9 0%, #7C3AED 60%, #8B5CF6 100%);
  transition:width 1.5s cubic-bezier(.4,0,.2,1);
  position:relative;
}
.skill-fill::after {
  content:'';
  position:absolute;
  right:0; top:0;
  width:8px; height:100%;
  background:rgba(255,255,255,.4);
  border-radius:0 3px 3px 0;
}

/* ─── Timeline ─── */
.timeline { position:relative; padding-left:2rem; }
.timeline::before {
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:2px;
  background:linear-gradient(to bottom,var(--primary),rgba(124,58,237,.4),transparent);
}
.timeline-item { position:relative; padding-bottom:2rem; padding-left:1.5rem; }
.timeline-item::before {
  content:'';
  position:absolute;
  left:-2rem; top:.25rem;
  width:12px; height:12px;
  background:var(--primary);
  border-radius:50%;
  border:2px solid var(--bg-primary);
  margin-left:-5px;
  box-shadow:0 0 0 3px var(--primary-glow-md);
}
.timeline-year {
  font-family:'JetBrains Mono',monospace;
  font-size:.8rem;
  font-weight:600;
  color:var(--primary-light);
  margin-bottom:.25rem;
  display:block;
}
.timeline-title { font-size:1.05rem; font-weight:700; margin-bottom:.4rem; }
.timeline-desc  { font-size:.875rem; color:var(--text-secondary); line-height:1.65; }

/* Achievements */
.achievements-list { display:flex; flex-direction:column; gap:.75rem; }
.achievement-item { display:flex; align-items:center; gap:.75rem; font-size:.95rem; color:var(--text-secondary); }
.achievement-item .icon {
  width:1.5rem; height:1.5rem; min-width:1.5rem;
  background:var(--primary);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-size:.7rem;
}

/* ─── Process ─── */
.process-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
  position:relative;
}
.process-grid::before {
  content:'';
  position:absolute;
  top:1.75rem; left:12%; right:12%;
  height:2px;
  background:rgba(124,58,237,.18);
  opacity:1;
}
.process-step { text-align:center; position:relative; z-index:1; }
.process-number {
  width:3.5rem; height:3.5rem;
  margin:0 auto 1rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--primary);
  color:#fff;
  font-weight:700;
  font-size:.95rem;
  border-radius:50%;
  font-family:'JetBrains Mono',monospace;
  border:3px solid var(--bg-primary);
  box-shadow:0 0 0 2px var(--primary-glow-md), var(--shadow-glow-sm);
}
.process-step h3 { font-size:1rem; margin-bottom:.4rem; }
.process-step p  { font-size:.85rem; }

/* ─── Services Quick ─── */
.services-quick { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
.service-quick-item {
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:1rem 1.25rem;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  transition:all var(--t-fast);
  font-weight:500;
  font-size:.9rem;
  backdrop-filter:blur(8px);
}
.service-quick-item:hover { border-color:var(--border-hover); transform:translateY(-2px); }
.service-quick-item .check {
  width:1.2rem; height:1.2rem; min-width:1.2rem;
  background:var(--primary);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-size:.6rem;
  font-weight:700;
}

/* ─── Notice Card ─── */
.notice-card { max-width:720px; margin:0 auto; padding:2.5rem; text-align:center; }
.notice-card .notice-icon {
  width:3rem; height:3rem;
  margin:0 auto 1rem;
  background:var(--primary);
  border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
}
.notice-card h2 { margin-bottom:.75rem; }

/* Philosophy */
.philosophy-card { max-width:750px; margin:0 auto; padding:3rem; text-align:center; position:relative; }
.philosophy-card::before {
  content:'"';
  position:absolute;
  top:.5rem; left:1.5rem;
  font-size:5rem;
  background:var(--gradient-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  opacity:.2;
  font-family:Georgia,serif;
  line-height:1;
}
.philosophy-card p { font-size:1.05rem; line-height:1.9; }
.philosophy-card p+p { margin-top:1rem; }

/* ─── Contact Form ─── */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.form-group { margin-bottom:1.15rem; }
.form-label { display:block; font-size:.84rem; font-weight:600; color:var(--text-secondary); margin-bottom:.45rem; }
.form-label .required { color:var(--gold); }
.form-input {
  width:100%;
  padding:.75rem 1rem;
  font-size:.9rem;
  font-family:inherit;
  color:var(--text-primary);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  outline:none;
  transition:all var(--t-fast);
}
.form-input:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-glow-md);
}
.form-input::placeholder { color:var(--text-muted); }
.form-input.error { border-color:#EF4444; box-shadow:0 0 0 3px rgba(239,68,68,.15); }
textarea.form-input { min-height:130px; resize:vertical; }
select.form-input {
  appearance:none;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394A3B8' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.5rem;
}
select.form-input option { background:var(--bg-card); color:var(--text-primary); }
.form-error { font-size:.78rem; color:#EF4444; margin-top:.25rem; }
.form-success {
  padding:1rem;
  background:rgba(16,185,129,.08);
  border:1px solid rgba(16,185,129,.2);
  border-radius:var(--r-md);
  margin-bottom:1.15rem;
  display:flex; align-items:flex-start; gap:.75rem;
}
.form-success .icon {
  width:1.5rem; height:1.5rem; min-width:1.5rem;
  background:#10B981;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.75rem;
}

/* Contact Info */
.contact-info-list { display:flex; flex-direction:column; gap:.85rem; }
.contact-info-item {
  display:flex; align-items:center; gap:1rem;
  padding:.9rem 1rem;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.contact-info-item:hover { border-color:var(--border-accent); box-shadow:0 0 20px var(--accent-glow); }
.contact-info-item .icon {
  width:2.4rem; height:2.4rem;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm);
  background:rgba(124,58,237,.1);
  color:var(--primary-light);
  flex-shrink:0;
}
.contact-info-item .label { font-size:.75rem; color:var(--text-muted); margin-bottom:.1rem; }
.contact-info-item .value { font-weight:500; color:var(--text-primary); font-size:.9rem; }
.social-links { display:flex; gap:.75rem; margin-top:1rem; }
.social-link {
  width:2.75rem; height:2.75rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  color:var(--text-secondary);
  transition:all var(--t-fast);
}
.social-link:hover {
  color:#fff;
  border-color:var(--primary);
  background:var(--primary);
  transform:translateY(-2px);
  box-shadow:0 6px 20px var(--primary-glow);
}

/* ─── FAQ ─── */
.faq-list { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:.75rem; }
.faq-item {
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--bg-card);
  backdrop-filter:blur(8px);
  transition:border-color var(--t-fast);
}
.faq-item.open { border-color:var(--border-hover); }
.faq-question {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:1.2rem 1.5rem;
  text-align:left;
  font-weight:600;
  font-size:.92rem;
  color:var(--text-primary);
}
.faq-toggle { font-size:1.35rem; color:var(--text-muted); transition:all var(--t-fast); flex-shrink:0; margin-left:1rem; line-height:1; }
.faq-item.open .faq-toggle { transform:rotate(45deg); color:var(--primary-light); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height var(--t-base); }
.faq-item.open .faq-answer { max-height:300px; }
.faq-answer-inner { padding:0 1.5rem 1.2rem; font-size:.9rem; color:var(--text-secondary); border-top:1px solid var(--border); padding-top:.75rem; }

/* ─── Image Modal ─── */
.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.94);
  z-index:9999;
  align-items:center; justify-content:center;
  padding:2rem;
}
.modal-overlay.open { display:flex; }
.modal-content { position:relative; max-width:900px; width:100%; }
.modal-image { width:100%; max-height:80vh; object-fit:contain; border-radius:var(--r-lg); }
.modal-close { position:absolute; top:-2.5rem; right:0; color:#fff; font-size:1.5rem; cursor:pointer; padding:.5rem; opacity:.6; transition:opacity var(--t-fast); }
.modal-close:hover { opacity:1; }
.modal-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(124,58,237,.3); backdrop-filter:blur(8px);
  color:#fff; width:3rem; height:3rem;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; cursor:pointer;
  transition:all var(--t-fast);
  border:1px solid rgba(124,58,237,.4);
}
.modal-nav:hover { background:var(--primary); }
.modal-prev { left:-1rem; }
.modal-next { right:-1rem; }
.modal-indicators { display:flex; justify-content:center; gap:.5rem; margin-top:1rem; }
.modal-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.2); cursor:pointer; transition:all var(--t-fast); }
.modal-dot.active { background:var(--primary); box-shadow:0 0 8px var(--primary-glow); }
.modal-counter { text-align:center; margin-top:.5rem; font-size:.8rem; color:rgba(255,255,255,.4); font-family:'JetBrains Mono',monospace; }

/* ─── Footer ─── */
.footer { background:var(--bg-primary); border-top:1px solid var(--border); padding:4rem 0 0; position:relative; }
.footer::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:rgba(124,58,237,.4); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; padding-bottom:3rem; }
.footer-brand { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; font-weight:700; font-size:1.05rem; }
.footer-brand .logo-icon {
  width:2rem; height:2rem;
  background:var(--primary);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:.75rem; font-family:'JetBrains Mono',monospace;
}
.footer-desc { font-size:.875rem; color:var(--text-secondary); line-height:1.7; margin-bottom:1.25rem; max-width:360px; }
.footer h4, .footer h3 { font-size:.92rem; font-weight:600; margin-bottom:1rem; }
.footer-links { display:flex; flex-direction:column; gap:.5rem; }
.footer-link { font-size:.84rem; color:var(--text-secondary); transition:all var(--t-fast); display:flex; align-items:center; gap:.5rem; }
.footer-link:hover { color:var(--primary-light); padding-left:.25rem; }
.footer-link .icon { font-size:.95rem; color:var(--primary); flex-shrink:0; width:1.1rem; }
.footer-bottom { border-top:1px solid var(--border); padding:1.5rem 0; display:flex; align-items:center; justify-content:space-between; }
.footer-copyright { font-size:.8rem; color:var(--text-muted); }
.footer-bottom-links { display:flex; gap:1.5rem; }
.footer-bottom-links a { font-size:.8rem; color:var(--text-muted); transition:color var(--t-fast); }
.footer-bottom-links a:hover { color:var(--primary-light); }

/* ─── 404 ─── */
.not-found { min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; }
.not-found-code {
  font-size:clamp(6rem,15vw,12rem);
  font-weight:900;
  background:var(--gradient-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  opacity:.15;
  line-height:1;
  font-family:'JetBrains Mono',monospace;
  margin-bottom:-1rem;
}
.not-found h2 { margin-bottom:1rem; }
.not-found p  { margin-bottom:2rem; max-width:420px; margin-left:auto; margin-right:auto; }
.not-found-links { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; max-width:500px; margin:2rem auto 0; }
.not-found-link {
  padding:.75rem;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  color:var(--text-secondary);
  font-size:.85rem; font-weight:500;
  transition:all var(--t-fast);
}
.not-found-link:hover { border-color:var(--border-hover); color:var(--text-primary); }

/* ─── Scroll to Top ─── */
.scroll-top {
  position:fixed;
  bottom:2rem; right:2rem;
  width:2.75rem; height:2.75rem;
  background:var(--primary);
  color:#fff;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transform:translateY(1rem);
  transition:all var(--t-base);
  z-index:999;
  box-shadow:var(--shadow-md);
}
.scroll-top.visible { opacity:1; visibility:visible; transform:translateY(0); }
.scroll-top:hover { transform:translateY(-3px); box-shadow:0 8px 24px var(--primary-glow); }

/* ─── Animations & Keyframes ─── */
.reveal { opacity:0; transform:translateY(32px); transition:opacity .8s ease,transform .8s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

.reveal-left { opacity:0; transform:translateX(-50px); transition:opacity .8s ease,transform .8s ease; }
.reveal-left.visible { opacity:1; transform:translateX(0); }

.reveal-right { opacity:0; transform:translateX(50px); transition:opacity .8s ease,transform .8s ease; }
.reveal-right.visible { opacity:1; transform:translateX(0); }

.reveal-scale { opacity:0; transform:scale(.9); transition:opacity .7s ease,transform .7s ease; }
.reveal-scale.visible { opacity:1; transform:scale(1); }

.stagger > * {
  opacity:0; transform:translateY(24px);
  transition:opacity .6s ease,transform .6s ease;
}
.stagger.visible > *:nth-child(1) { transition-delay:.05s; }
.stagger.visible > *:nth-child(2) { transition-delay:.10s; }
.stagger.visible > *:nth-child(3) { transition-delay:.15s; }
.stagger.visible > *:nth-child(4) { transition-delay:.20s; }
.stagger.visible > *:nth-child(5) { transition-delay:.25s; }
.stagger.visible > *:nth-child(6) { transition-delay:.30s; }
.stagger.visible > *:nth-child(7) { transition-delay:.35s; }
.stagger.visible > *:nth-child(8) { transition-delay:.40s; }
.stagger.visible > * { opacity:1; transform:translateY(0); }

@keyframes gradientShift {
  0%,100% { background-position:0% 50%; }
  50%      { background-position:100% 50%; }
}
@keyframes pulseRing {
  0%,100% { box-shadow:0 0 0 0 var(--primary-glow); }
  50%      { box-shadow:0 0 0 10px transparent; }
}
.pulse-ring { animation:pulseRing 2.5s infinite; }

/* Utilities */
.text-center  { text-align:center; }
.mt-4  { margin-top:2rem; }
.mb-4  { margin-bottom:2rem; }
.mb-3  { margin-bottom:1.5rem; }
.mb-2  { margin-bottom:1rem; }
.w-full { width:100%; }

/* ─── RESPONSIVE ─── */
@media (max-width:1024px) {
  :root { --py:5rem; }
  .hero-layout { grid-template-columns:1fr; gap:3.5rem; text-align:center; }
  .hero-content { max-width:100%; }
  .hero-desc { margin-left:auto; margin-right:auto; }
  .hero-actions { justify-content:center; }
  .hero-stack { justify-content:center; }
  .hero-visual { justify-content:center; }
  .orbital-container { width:360px; height:360px; }
  .photo-frame { width:260px; height:260px; }
  .intro-grid { grid-template-columns:1fr; gap:3rem; }
  .features-grid { grid-template-columns:1fr 1fr; }
  .portfolio-grid { grid-template-columns:1fr 1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
  .services-quick { grid-template-columns:1fr 1fr; }
}

@media (max-width:768px) {
  :root { --py:4rem; }
  .nav-links, .nav-cta { display:none; }
  .mobile-toggle { display:flex; }

  .hero { padding:7rem 0 3rem; min-height:auto; }
  .orbital-container { width:300px; height:300px; }
  .photo-frame { width:220px; height:220px; }
  .float-badge { display:none; } /* hidden on tablet — shown as 3D orbits on desktop */
  .hero-grid { grid-template-columns:1fr; gap:3rem; }
  .services-grid { grid-template-columns:1fr 1fr; }
  .scroll-indicator { display:none; }

  .stats-grid { grid-template-columns:repeat(2,1fr); gap:1rem; }
  .stat-number { font-size:2.25rem; }
  .stat-card { padding:1.5rem .75rem; }

  .features-grid { grid-template-columns:1fr; }

  .intro-stats { grid-template-columns:1fr 1fr; }

  .portfolio-grid { grid-template-columns:1fr; max-width:520px; margin-left:auto; margin-right:auto; }

  .services-quick { grid-template-columns:1fr; }

  .process-grid { grid-template-columns:1fr 1fr; gap:1.5rem; }
  .process-grid::before { display:none; }

  .skills-grid { grid-template-columns:1fr; }

  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; gap:1rem; text-align:center; }

  .not-found-links { grid-template-columns:1fr 1fr; }

  .cta-card { padding:2.25rem 1.5rem; }

  .modal-prev { left:.5rem; }
  .modal-next { right:.5rem; }

  .service-row { grid-template-columns:1fr; gap:1rem; }
}

@media (max-width:480px) {
  :root { --py:3rem; }
  .container { padding:0 1rem; }

  .hero { padding:6rem 0 2.5rem; }
  .hero-actions { flex-direction:column; }
  .hero-actions .btn { width:100%; }
  .orbital-container { width:260px; height:260px; }
  .photo-frame { width:190px; height:190px; }

  .stats-grid { grid-template-columns:1fr 1fr; }
  .intro-stats { grid-template-columns:1fr; }

  .process-grid { grid-template-columns:1fr; }

  .card { padding:1.25rem; }

  .footer-bottom-links { flex-direction:column; gap:.5rem; }
  .not-found-links { grid-template-columns:1fr; }

  h2 { font-size:1.65rem; }
}

@media (max-width:360px) {
  .hero-content h1 { font-size:1.9rem; }
  .stat-number { font-size:1.75rem; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}

@media print {
  .navbar,.scroll-top,.mobile-toggle { display:none; }
  body { background:#fff; color:#000; }
}