:root {
  --bg-950: #07060a;
  --bg-900: #0c0a0d;
  --bg-800: #141114;
  --bg-700: #1d181b;
  --bg-600: #292226;
  --accent: #ff6b3d;
  --accent-dim: #c94f28;
  --accent-2: #ffb03d;
  --accent-rgb: 255, 107, 61;
  --accent-cool: #3ddbd9;
  --accent-cool-rgb: 61, 219, 217;
  --accent-violet: #a78bfa;
  --accent-violet-rgb: 167, 139, 250;
  --accent-rose: #ff6ba8;
  --accent-rose-rgb: 255, 107, 168;
  --text-primary: #f5f1ea;
  --text-secondary: #9c948a;
  --text-muted: #847b71;
  --border: rgba(255, 245, 235, 0.07);
  --border-strong: rgba(255, 245, 235, 0.14);
  --radius: 10px;
  --max-width: 1180px;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Sora', var(--font-sans);
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg-950);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

img, canvas { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Background: quiet warm vignette, lets the hero art piece lead ---- */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 45% at 50% 0%, rgba(var(--accent-rgb), 0.05), transparent 70%);
}

.availability-badge {
  position: fixed;
  bottom: 78px;
  left: 22px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-800);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 8px 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.availability-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: availabilityPulse 2s ease-in-out infinite;
}

@keyframes availabilityPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
  50% { box-shadow: 0 0 0 5px rgba(74, 222, 128, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .availability-dot { animation: none; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.eyebrow-index {
  color: var(--text-muted);
  margin-right: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

h2 {
  font-size: clamp(30px, 4vw, 44px);
  margin-bottom: 14px;
}

.section-subtitle {
  color: var(--text-secondary);
  font-size: 16.5px;
  max-width: 620px;
  margin-bottom: 52px;
}

section { position: relative; padding: 110px 0; }

.section-alt { background: rgba(12, 10, 13, 0.82); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

#matrix-bg-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0.55;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #matrix-bg-canvas { display: none; }
}

/* ---- Reveal on scroll (subtle, no bounce) ---- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in-view { opacity: 1; transform: translateY(0); }

.reveal-stagger.in-view .stagger-item {
  opacity: 1;
  transform: translateY(0);
}

.stagger-item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.stagger-item:nth-child(1) { transition-delay: 0.04s; }
.stagger-item:nth-child(2) { transition-delay: 0.1s; }
.stagger-item:nth-child(3) { transition-delay: 0.16s; }
.stagger-item:nth-child(4) { transition-delay: 0.22s; }

/* No-JS fallback: without JS the .in-view class never gets added, so force
   reveal content visible when JavaScript is blocked/unavailable (e.g. some
   store-review crawlers), without touching the normal JS-driven cascade above. */
html:not(.js) .reveal,
html:not(.js) .stagger-item {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Navbar */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  backdrop-filter: blur(14px);
  background: rgba(8, 9, 12, 0.75);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s ease, border-color 0.3s ease, padding 0.3s ease;
  padding: 0 12px;
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  transition: max-width 0.3s ease, padding 0.3s ease, height 0.3s ease;
}

.navbar.floating {
  top: 12px;
  border-bottom-color: transparent;
}

.navbar.floating .container {
  max-width: 1080px;
  height: 56px;
  background: rgba(19, 21, 28, 0.88);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 0 14px 0 20px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
}

.navbar.floating .nav-links { gap: 18px; }

/* Below this width the condensed pill doesn't have room for the full link
   row alongside the CTA button — drop to brand + CTA only rather than
   letting the buttons compress/overlap. */
@media (max-width: 1180px) {
  .navbar.floating .nav-links { display: none; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16.5px;
  flex-shrink: 0;
}

.brand-logo {
  height: 34px;
  width: auto;
  display: block;
}

@media (max-width: 760px) {
  .brand-logo { height: 28px; }
}

.nav-links {
  display: flex;
  gap: 24px;
  font-size: 13.5px;
  color: var(--text-secondary);
}

.nav-links a { position: relative; }

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 0.2s ease;
}

.nav-links a:hover { color: var(--text-primary); }
.nav-links a:hover::after { width: 100%; }

.nav-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.nav-cta .btn { flex-shrink: 0; white-space: nowrap; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--accent);
  color: #1a0f08;
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.28);
}

.btn-primary:hover { background: #ff8058; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(var(--accent-rgb), 0.38); }

.btn-ghost {
  background: rgba(var(--accent-cool-rgb), 0.08);
  border-color: rgba(var(--accent-cool-rgb), 0.35);
  color: var(--accent-cool);
}

.btn-ghost:hover { background: rgba(var(--accent-cool-rgb), 0.14); border-color: rgba(var(--accent-cool-rgb), 0.6); }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.menu-toggle span {
  width: 20px;
  height: 1.5px;
  background: var(--text-primary);
  border-radius: 2px;
}

/* Hero */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding-top: 68px;
  overflow: hidden;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-cool));
  z-index: 999;
  will-change: width;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { transition: none; }
}

.hero-canvas-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--bg-950);
  will-change: transform, opacity;
}

/* ---- Hero background: code cards growing from behind the headline, then
   spinning away — reinforces "SaaS / Otomasyon / Web Sitesi" without a full
   canvas engine. Purely decorative (aria-hidden), kept low-opacity and
   off-center so the headline itself always reads cleanly on top (z-index 2). */
.hero-code-orbit {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero-code-card {
  position: absolute;
  width: 176px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(var(--card-rgb), 0.28);
  opacity: 0;
  transform: scale(0.3) rotate(0deg);
  animation: heroCodeCycle 9s ease-in-out infinite;
}

.hero-code-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: rgb(var(--card-rgb));
}

.hero-code-card pre {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  white-space: pre;
  margin: 0;
}

.card-saas { top: 20%; left: 5%; --card-rgb: var(--accent-cool-rgb); animation-delay: 0s; }
.card-automation { top: 16%; right: 4%; --card-rgb: var(--accent-rgb); animation-delay: 3s; }
.card-web { bottom: 15%; right: 9%; --card-rgb: var(--accent-violet-rgb); animation-delay: 6s; }

@keyframes heroCodeCycle {
  0%   { opacity: 0; transform: scale(0.3) rotate(0deg); }
  12%  { opacity: 0.5; transform: scale(1) rotate(0deg); }
  55%  { opacity: 0.5; transform: scale(1) rotate(0deg); }
  85%  { opacity: 0; transform: scale(1.15) rotate(24deg); }
  100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 20%, transparent 0%, var(--bg-950) 78%);
  pointer-events: none;
  z-index: 1;
}

/* One-time "power-on" glow behind the headline as the page first loads —
   plays once, then fully settles, so it never competes with reading. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(560px circle at 50% 34%, rgba(var(--accent-rgb), 0.24), transparent 70%);
  opacity: 0;
  animation: heroPowerOn 2s ease-out forwards;
}

@keyframes heroPowerOn {
  0% { opacity: 0; transform: scale(0.82); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.2); }
}

.hero-spotlight {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(var(--accent-rgb), 0.1), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hero:hover .hero-spotlight { opacity: 1; }

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.hero .eyebrow { justify-content: center; }

.hero h1 {
  font-size: clamp(38px, 6.2vw, 68px);
  margin-bottom: 24px;
  letter-spacing: -0.025em;
}

/* ---- Headline "evaporates" into real code, then reforms — the hero's main
   showpiece. Two layers occupy the same box (CSS grid stacking so the
   container is always sized for the taller of the two, no layout jump), each
   running the same dissolve/materialize pulse a half-cycle out of phase, so
   as the sentence blurs away like vapor the code fades in to take its place,
   then the reverse. The real h1 text stays in the DOM at all times for SEO
   and screen readers — only the decorative code layer is aria-hidden. */
.hero-headline-swap {
  display: grid;
}

.hero-headline-swap > * {
  grid-area: 1 / 1;
}

.hero-headline-swap h1 {
  animation: heroTextDissolve 11s ease-in-out infinite;
}

.hero-headline-code {
  align-self: center;
  justify-self: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(20px, 3.6vw, 34px);
  line-height: 1.55;
  text-align: left;
  color: var(--text-secondary);
  white-space: pre;
  margin: 0;
  opacity: 0;
  animation: heroCodeDissolve 11s ease-in-out infinite;
}

/* h1: visible → dissolves to hidden mid-cycle → reforms visible. Starts at
   t=0 already fully visible/readable, so there is never a moment on load
   where both layers show at once. */
@keyframes heroTextDissolve {
  0%   { opacity: 1; filter: blur(0px);  transform: scale(1)    translateY(0); }
  36%  { opacity: 1; filter: blur(0px);  transform: scale(1)    translateY(0); }
  46%  { opacity: 0; filter: blur(16px); transform: scale(1.05) translateY(-14px); }
  54%  { opacity: 0; filter: blur(16px); transform: scale(1.05) translateY(-14px); }
  64%  { opacity: 1; filter: blur(0px);  transform: scale(1)    translateY(0); }
  100% { opacity: 1; filter: blur(0px);  transform: scale(1)    translateY(0); }
}

/* Code layer: the exact inverse timing (hidden while h1 is visible, visible
   only during h1's dissolved gap) run on its own clock from t=0 — no
   animation-delay trick, so there's no fill-mode gap where both could ever
   render at full opacity together. */
@keyframes heroCodeDissolve {
  0%   { opacity: 0; filter: blur(16px); transform: scale(1.05) translateY(-14px); }
  36%  { opacity: 0; filter: blur(16px); transform: scale(1.05) translateY(-14px); }
  46%  { opacity: 1; filter: blur(0px);  transform: scale(1)    translateY(0); }
  54%  { opacity: 1; filter: blur(0px);  transform: scale(1)    translateY(0); }
  64%  { opacity: 0; filter: blur(16px); transform: scale(1.05) translateY(-14px); }
  100% { opacity: 0; filter: blur(16px); transform: scale(1.05) translateY(-14px); }
}

.hero .gradient-text {
  background: linear-gradient(90deg, var(--accent), var(--accent-cool));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 500;
  display: inline-block;
  animation: gradientTextGlow 1.6s ease-out 1.05s both;
}

@keyframes gradientTextGlow {
  0% { filter: drop-shadow(0 0 0 transparent); }
  45% { filter: drop-shadow(0 0 16px rgba(var(--accent-cool-rgb), 0.55)) drop-shadow(0 0 16px rgba(var(--accent-rgb), 0.35)); }
  100% { filter: drop-shadow(0 0 0 transparent); }
}

.hero p {
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 540px;
  margin: 0 auto 34px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- Cinematic entrance: the hero's own content choreographs in on load,
   independent of the generic scroll-reveal system (this section is already
   in view at load, so it needs its own timed sequence). Ends at the exact
   same fully-opaque, fully-legible state as before — nothing lingers. ---- */
.hero-content .eyebrow,
.hero-content p,
.hero-content .hero-actions,
.hero-content .terminal-window,
.hero-stats {
  opacity: 0;
  animation: heroContentIn 0.85s cubic-bezier(.16, 1, .3, 1) forwards;
}

.hero-content .eyebrow { animation-delay: 0.05s; }
.hero-content p { animation-delay: 0.4s; }
.hero-content .hero-actions { animation-delay: 0.55s; }
.hero-content .terminal-window { animation-delay: 0.7s; }
.hero-stats { animation-delay: 0.85s; }

@keyframes heroContentIn {
  0% { opacity: 0; transform: translateY(20px); filter: blur(6px); }
  60% { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ---- Terminal / code editor hero panel ---- */
.terminal-window {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin: 48px auto 0;
  background: rgba(10, 8, 6, 0.82);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  text-align: left;
}

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}

.terminal-bar .dot { width: 9px; height: 9px; border-radius: 50%; }
.terminal-bar .dot-r { background: var(--accent); }
.terminal-bar .dot-a { background: var(--accent-2); }
.terminal-bar .dot-d { background: var(--border-strong); }

.terminal-title {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 6px;
}

.terminal-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-2);
}

.terminal-status .status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  animation: statuspulse 1.6s ease-in-out infinite;
}

@keyframes statuspulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

.terminal-body {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.75;
  padding: 20px 22px;
  min-height: 168px;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  transition: opacity 0.4s ease;
}

/* Content swap feedback when a chip changes the panel's code sample */
.terminal-body.pop { animation: mockupBodyPop 0.4s ease; }
.code-screen.flash { animation: capabilityFlash 0.7s ease; }

.terminal-body .cursor {
  display: inline-block;
  width: 7px;
  height: 1em;
  background: var(--accent);
  vertical-align: text-bottom;
  margin-left: 1px;
  animation: blink 1s step-end infinite;
}

/* Typewriter cursor for the hero subtitle — same blink as the terminal
   cursor, sized for body-copy text instead of monospace code. */
.hero p .type-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  vertical-align: text-bottom;
  margin-left: 1px;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.tok-kw { color: var(--accent); }
.tok-type { color: var(--accent-2); }
.tok-str { color: #8fae8a; }
.tok-fn { color: var(--text-primary); font-weight: 500; }
.tok-var { color: var(--text-primary); }
.tok-com { color: var(--text-muted); font-style: italic; }

/* ---- Decorative code texture (non-readable, purely atmospheric) ---- */
.code-texture {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-primary);
  opacity: 0.05;
  white-space: pre;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ---- Floating device: decorative "flying laptop" motif ---- */
.floating-device {
  position: absolute;
  width: 62px;
  height: 46px;
  color: var(--accent-violet);
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  animation: deviceFloat 7s ease-in-out infinite;
}

.floating-device svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 10px 16px rgba(var(--accent-rgb), 0.25));
}

.floating-device.d2 { width: 48px; height: 36px; animation-duration: 8.5s; animation-delay: -2.5s; color: var(--accent-cool); }
.floating-device.d3 { width: 42px; height: 32px; animation-duration: 6.5s; animation-delay: -4s; color: var(--accent-2); }

.floating-device-spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

.floating-device-spark.s1 { top: -8px; left: -12px; animation: sparkDrift 3.4s ease-in-out infinite; }
.floating-device-spark.s2 { bottom: 0; right: -14px; width: 4px; height: 4px; animation: sparkDrift 4.2s ease-in-out infinite reverse; }

@keyframes deviceFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-18px) rotate(3deg); }
}

@keyframes sparkDrift {
  0%, 100% { transform: translate(0, 0); opacity: 0.55; }
  50% { transform: translate(-7px, -11px); opacity: 0.15; }
}

@media (max-width: 900px) {
  .floating-device { display: none; }
}

/* ---- Terminal sound toggle ---- */
.sound-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 8px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}

.sound-toggle svg { width: 15px; height: 15px; }
.sound-toggle:hover { color: var(--accent); }
.sound-toggle .mute-line { opacity: 0; transition: opacity 0.15s ease; }
.sound-toggle.muted .mute-line { opacity: 1; }
.sound-toggle.muted path:not(.mute-line) { opacity: 0.35; }

/* ---- File-tag badges on service cards ---- */
.file-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--bg-900);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  margin-bottom: 16px;
}

.file-tag .file-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  animation: statuspulse 1.6s ease-in-out infinite;
}

.hero-stats {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 56px;
  margin-top: 76px;
  flex-wrap: wrap;
}

.hero-stat { text-align: center; }

.hero-stat .num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--accent);
}

.hero-stat .num.num-cool { color: var(--accent-cool); }
.hero-stat .num.num-amber { color: var(--accent-2); }

.hero-stat .label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 6px;
  letter-spacing: 0.03em;
}

.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.1em;
}

.scroll-cue .line {
  width: 1px;
  height: 26px;
  background: linear-gradient(var(--accent), transparent);
  animation: scrollcue 1.8s ease-in-out infinite;
}

@keyframes scrollcue {
  0% { opacity: 0.2; transform: scaleY(0.4); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
  100% { opacity: 0.2; transform: scaleY(0.4); transform-origin: top; }
}

/* Grid layouts */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Bento grid for services */
.bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.chip {
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  font-size: 12.5px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  background: var(--bg-800);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.15s ease;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.chip:hover { border-color: rgba(var(--accent-rgb), 0.5); color: var(--text-primary); }
.chip:active { transform: scale(0.97); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #0c0a0d;
  font-weight: 600;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16);
}

.chip-hint {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 10px;
}

#ai {
  background:
    radial-gradient(ellipse 65% 55% at 12% 25%, rgba(var(--accent-cool-rgb), 0.08), transparent 65%),
    var(--bg-900);
}

#ai .eyebrow, #ai .eyebrow::before { color: var(--accent-cool); }

#ai .chip {
  border-color: rgba(var(--accent-cool-rgb), 0.24);
}

#ai .chip:hover {
  border-color: rgba(var(--accent-cool-rgb), 0.55);
  color: var(--text-primary);
}

#ai .chip.active {
  background: var(--accent-cool);
  border-color: var(--accent-cool);
  color: #0c0a0d;
  box-shadow: 0 0 0 3px rgba(var(--accent-cool-rgb), 0.16);
}

#ai .ai-panel {
  border-color: rgba(var(--accent-cool-rgb), 0.22);
  box-shadow: inset 0 0 60px rgba(var(--accent-cool-rgb), 0.08);
}

/* Cards — flat, hairline */
.card {
  position: relative;
  background: var(--bg-800);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.3s ease;
}

.card:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: var(--bg-700);
  transform: translateY(-3px);
  box-shadow: 0 24px 50px rgba(0,0,0,0.35), 0 0 0 1px rgba(var(--accent-rgb), 0.06), 0 0 40px -12px rgba(var(--accent-rgb), 0.25);
}

.card-icon {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid var(--border-strong);
}

.card-icon svg { width: 22px; height: 22px; stroke: var(--accent); position: relative; z-index: 1; }

/* Service icons "ping" continuously — reads as an always-on, actively
   building product rather than a static badge grid. Staggered per card so
   the ripple travels across the section instead of firing all at once. */
.card-icon::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  opacity: 0;
  animation: iconPing 3.2s ease-out infinite;
  pointer-events: none;
}

@keyframes iconPing {
  0% { transform: scale(1); opacity: 0.55; }
  65% { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}

.bento .card:nth-child(1) .card-icon::after { animation-delay: 0s; }
.bento .card:nth-child(2) .card-icon::after { animation-delay: 0.6s; border-color: rgba(var(--accent-cool-rgb), 0.55); }
.bento .card:nth-child(3) .card-icon::after { animation-delay: 1.2s; border-color: rgba(255, 176, 61, 0.55); }
.bento .card:nth-child(4) .card-icon::after { animation-delay: 1.8s; border-color: rgba(var(--accent-violet-rgb), 0.55); }
.bento .card:nth-child(5) .card-icon::after { animation-delay: 2.4s; border-color: rgba(var(--accent-rose-rgb), 0.55); }

/* Service card accent colors — one per card, tying icon + hover border together */
.icon-ai { background: rgba(var(--accent-cool-rgb), 0.12); }
.icon-ai svg { stroke: var(--accent-cool); }
.bento .card:has(.icon-ai):hover { border-color: rgba(var(--accent-cool-rgb), 0.35); box-shadow: 0 24px 50px rgba(0,0,0,0.35), 0 0 0 1px rgba(var(--accent-cool-rgb), 0.06), 0 0 40px -12px rgba(var(--accent-cool-rgb), 0.25); }

.icon-saas { background: rgba(255, 176, 61, 0.12); }
.icon-saas svg { stroke: var(--accent-2); }
.bento .card:has(.icon-saas):hover { border-color: rgba(255, 176, 61, 0.35); box-shadow: 0 24px 50px rgba(0,0,0,0.35), 0 0 0 1px rgba(255, 176, 61, 0.06), 0 0 40px -12px rgba(255, 176, 61, 0.25); }

.icon-web { background: rgba(var(--accent-violet-rgb), 0.12); }
.icon-web svg { stroke: var(--accent-violet); }
.bento .card:has(.icon-web):hover { border-color: rgba(var(--accent-violet-rgb), 0.35); box-shadow: 0 24px 50px rgba(0,0,0,0.35), 0 0 0 1px rgba(var(--accent-violet-rgb), 0.06), 0 0 40px -12px rgba(var(--accent-violet-rgb), 0.25); }

.icon-automation { background: rgba(var(--accent-rose-rgb), 0.12); }
.icon-automation svg { stroke: var(--accent-rose); }
.bento .card:has(.icon-automation):hover { border-color: rgba(var(--accent-rose-rgb), 0.35); box-shadow: 0 24px 50px rgba(0,0,0,0.35), 0 0 0 1px rgba(var(--accent-rose-rgb), 0.06), 0 0 40px -12px rgba(var(--accent-rose-rgb), 0.25); }

.bento .card-wide { grid-column: 1 / -1; }

.card-cta {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.capability-detail .card-cta { color: var(--cat, var(--accent)); margin-top: 22px; font-size: 14px; transition: color 0.25s ease; }

.card:has(.icon-ai) .card-cta { color: var(--accent-cool); }
.card:has(.icon-saas) .card-cta { color: var(--accent-2); }
.card:has(.icon-web) .card-cta { color: var(--accent-violet); }
.card:has(.icon-automation) .card-cta { color: var(--accent-rose); }

.blog-grid .card:has(.icon-ai):hover { border-color: rgba(var(--accent-cool-rgb), 0.35); box-shadow: 0 24px 50px rgba(0,0,0,0.35), 0 0 0 1px rgba(var(--accent-cool-rgb), 0.06), 0 0 40px -12px rgba(var(--accent-cool-rgb), 0.25); }
.blog-grid .card:has(.icon-saas):hover { border-color: rgba(255, 176, 61, 0.35); box-shadow: 0 24px 50px rgba(0,0,0,0.35), 0 0 0 1px rgba(255, 176, 61, 0.06), 0 0 40px -12px rgba(255, 176, 61, 0.25); }
.blog-grid .card:has(.icon-web):hover { border-color: rgba(var(--accent-violet-rgb), 0.35); box-shadow: 0 24px 50px rgba(0,0,0,0.35), 0 0 0 1px rgba(var(--accent-violet-rgb), 0.06), 0 0 40px -12px rgba(var(--accent-violet-rgb), 0.25); }
.blog-grid .card:has(.icon-automation):hover { border-color: rgba(var(--accent-rose-rgb), 0.35); box-shadow: 0 24px 50px rgba(0,0,0,0.35), 0 0 0 1px rgba(var(--accent-rose-rgb), 0.06), 0 0 40px -12px rgba(var(--accent-rose-rgb), 0.25); }
.blog-grid .card-wide { grid-column: 1 / -1; }

.card h3 { font-size: 18px; margin-bottom: 9px; font-weight: 600; }

.card p { color: var(--text-secondary); font-size: 14.5px; }

/* AI visual panel */
.ai-panel {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-900);
}

.panel-terminal {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.panel-terminal .code-screen { width: 100%; margin-bottom: 0; }
.panel-terminal .code-screen .terminal-body { font-size: 12.5px; }

#possibility-panel.flash { animation: capabilityFlash 0.7s ease; }

@keyframes capabilityFlash {
  0% { box-shadow: inset 0 0 0 0 rgba(var(--flash-rgb, 255, 107, 61), 0.7); border-color: rgba(var(--flash-rgb, 255, 107, 61), 0.7); }
  55% { box-shadow: inset 0 0 60px 4px rgba(var(--flash-rgb, 255, 107, 61), 0.35); border-color: rgba(var(--flash-rgb, 255, 107, 61), 0.5); }
  100% { box-shadow: inset 0 0 0 0 rgba(var(--flash-rgb, 255, 107, 61), 0); border-color: var(--border); }
}


/* ---- Sector mockup panel (replaces the old icon+ring "show") ---- */
.mockup-window {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(10, 8, 6, 0.55);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mockup-bar {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.mockup-title {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: 6px;
  transition: opacity 0.15s ease;
}

.mockup-body {
  padding: 20px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}

.mockup-body.pop { animation: mockupBodyPop 0.4s ease; }

@keyframes mockupBodyPop {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

.mockup-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(var(--cat-rgb, var(--accent-rgb)), 0.07);
  border: 1px solid rgba(var(--cat-rgb, var(--accent-rgb)), 0.2);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.mockup-row-label {
  font-size: 13px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.mockup-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cat, var(--accent));
  flex-shrink: 0;
  transition: background 0.3s ease;
}

.mockup-badge {
  font-size: 10.5px;
  font-family: var(--font-mono);
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(var(--cat-rgb, var(--accent-rgb)), 0.16);
  color: var(--cat, var(--accent));
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease;
}

.mockup-bar-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.mockup-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--cat, var(--accent));
  transition: background 0.3s ease;
}

.mockup-score {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 700;
  color: var(--cat, var(--accent));
  line-height: 1;
  transition: color 0.3s ease;
}

.mockup-callout {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(var(--cat-rgb, var(--accent-rgb)), 0.1);
  border: 1px dashed rgba(var(--cat-rgb, var(--accent-rgb)), 0.4);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.mockup-callout strong { color: var(--cat, var(--accent)); }

.project-orb {
  position: absolute;
  top: 36px;
  right: 24px;
  width: 130px;
  height: 130px;
  z-index: 0;
  opacity: 0.85;
  pointer-events: none;
}


@media (max-width: 900px) {
  .project-orb { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .project-orb { display: none; }
}

/* ---- Capability selector: "Sınırsız Olasılıklar" ---- */
.capability-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.capability-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 22px;
}

.capability-pill, .project-tab {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-800);
  border: 1px solid rgba(var(--accent-cool-rgb), 0.22);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.capability-pill:hover, .project-tab:hover { color: var(--text-primary); border-color: rgba(var(--accent-rgb), 0.4); }

.project-tab.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}

.capability-pill.active {
  color: var(--pc, var(--accent));
  border-color: var(--pc, var(--accent));
  background: rgba(var(--pc-rgb, var(--accent-rgb)), 0.1);
}

/* ---- Project tabs: "SaaS Projelerimiz" / "App Projelerimiz" ---- */
.project-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}

.project-panel { display: none; }
.project-panel.active { display: block; }
/* No-JS fallback: tab switching needs JS, so show every panel and hide the tabs. */
html:not(.js) .project-tabs { display: none; }
html:not(.js) .project-panel { display: block; }

/* ---- Compact code-screen used inside project cards ---- */
.code-screen {
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(10, 8, 6, 0.7);
  overflow: hidden;
  margin-bottom: 18px;
}

.code-screen .terminal-bar { padding: 8px 10px; }
.code-screen .terminal-bar .dot { width: 7px; height: 7px; }
.code-screen .terminal-title { font-size: 11px; }

.code-screen .terminal-body {
  font-size: 11px;
  line-height: 1.65;
  padding: 12px 14px;
  min-height: 0;
  color: var(--text-secondary);
}

/* ---- Automation flow visual (illustrative n8n-style diagram) ---- */
.flow-visual {
  padding: 18px 14px 10px;
}

.flow-visual svg { width: 100%; height: auto; display: block; }

.flow-line { stroke-dasharray: 6 4; }

.flow-dot {
  animation: flowDotMove 2.4s ease-in-out infinite;
}
.flow-dot-2 { animation-delay: 0.35s; }
.flow-dot-3 { animation-delay: 0.7s; }

@keyframes flowDotMove {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(40px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-dot { animation: none; opacity: 1; }
}

.capability-detail { transition: opacity 0.2s ease; }

.capability-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(var(--cat-rgb, var(--accent-rgb)), 0.12);
  border: 1px solid rgba(var(--cat-rgb, var(--accent-rgb)), 0.35);
  color: var(--cat, var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.capability-icon svg { width: 22px; height: 22px; stroke: currentColor; }

.capability-icon.pop { animation: capabilityIconPop 0.45s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes capabilityIconPop {
  0% { transform: scale(0.5) rotate(-18deg); opacity: 0; }
  60% { transform: scale(1.12) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}

.capability-desc {
  color: var(--text-secondary);
  font-size: 16px;
  min-height: 3.4em;
}

.capability-examples-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cat, var(--accent));
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  transition: color 0.25s ease;
}

.capability-examples {
  list-style: none;
  margin-top: 12px;
  min-height: 84px;
}

.capability-examples li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.capability-examples li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cat, var(--accent));
  transition: background 0.25s ease;
}

.capability-examples li:last-child { margin-bottom: 0; }

/* ---- Tech stack section ---- */
.stack-groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.stack-group {
  background: var(--bg-800);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px;
}

.stack-group h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  font-weight: 500;
}

.stack-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stack-tags span {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-700);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
}

/* Category accent — mirrors the service card colors (Mobil/AI/SaaS) */
.stack-group:nth-child(1) { border-top: 2px solid rgba(var(--accent-rgb), 0.4); }
.stack-group:nth-child(1) h4 { color: var(--accent); }
.stack-group:nth-child(2) { border-top: 2px solid rgba(var(--accent-cool-rgb), 0.4); }
.stack-group:nth-child(2) h4 { color: var(--accent-cool); }
.stack-group:nth-child(3) { border-top: 2px solid rgba(255, 176, 61, 0.4); }
.stack-group:nth-child(3) h4 { color: var(--accent-2); }
.stack-group:nth-child(4) { border-top: 2px solid rgba(var(--accent-violet-rgb), 0.4); }
.stack-group:nth-child(4) h4 { color: var(--accent-violet); }
.stack-group:nth-child(5) { border-top: 2px solid rgba(var(--accent-rose-rgb), 0.4); }
.stack-group:nth-child(5) h4 { color: var(--accent-rose); }
.stack-group-wide { grid-column: 1 / -1; }

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.contact-card {
  background: var(--bg-800);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
}

.field { margin-bottom: 18px; }

.field label {
  display: block;
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-family: var(--font-mono);
}

.field input, .field textarea {
  width: 100%;
  background: var(--bg-900);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 13px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14.5px;
}

.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.field-note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

.contact-info-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 26px;
}

.contact-info-item .icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
  animation: contactIconFloat 3.6s ease-in-out infinite;
}

.contact-info-item .icon svg { width: 18px; height: 18px; stroke: var(--accent); transition: transform 0.35s ease; }

.contact-info-item:nth-child(2) .icon { animation-delay: 0.5s; }
.contact-info-item:nth-child(3) .icon { animation-delay: 1s; }

@keyframes contactIconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.contact-info-item:hover .icon svg { transform: scale(1.12) rotate(-6deg); }

.contact-info-item .icon.icon-cool { background: rgba(var(--accent-cool-rgb), 0.12); }
.contact-info-item .icon.icon-cool svg { stroke: var(--accent-cool); }
.contact-info-item:hover .icon.icon-cool { border-color: rgba(var(--accent-cool-rgb), 0.6); box-shadow: 0 8px 22px -6px rgba(var(--accent-cool-rgb), 0.5); }

.contact-info-item .icon.icon-violet { background: rgba(var(--accent-violet-rgb), 0.12); }
.contact-info-item .icon.icon-violet svg { stroke: var(--accent-violet); }
.contact-info-item:hover .icon.icon-violet { border-color: rgba(var(--accent-violet-rgb), 0.6); box-shadow: 0 8px 22px -6px rgba(var(--accent-violet-rgb), 0.5); }

.contact-info-item .icon.icon-rose { background: rgba(var(--accent-rose-rgb), 0.12); }
.contact-info-item .icon.icon-rose svg { stroke: var(--accent-rose); }
.contact-info-item:hover .icon.icon-rose { border-color: rgba(var(--accent-rose-rgb), 0.6); box-shadow: 0 8px 22px -6px rgba(var(--accent-rose-rgb), 0.5); }

@media (prefers-reduced-motion: reduce) {
  .contact-info-item .icon { animation: none; }
  .contact-info-item:hover .icon svg { transform: none; }
}

.contact-info-item h4 { font-size: 14.5px; margin-bottom: 4px; font-weight: 600; }

.contact-info-item p, .contact-info-item a { color: var(--text-secondary); font-size: 13.5px; }

.contact-info-item a:hover { color: var(--accent); }

.contact-email-list { display: flex; flex-direction: column; gap: 5px; }

.contact-email-label {
  display: inline-block;
  min-width: 46px;
  color: var(--text-muted);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-right: 8px;
}

/* Footer */
footer {
  border-top: 1px solid var(--border);
  padding: 50px 0 28px;
  background: var(--bg-950);
  position: relative;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 36px;
}

.footer-grid h4 { font-size: 13px; margin-bottom: 15px; color: var(--text-primary); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }

.footer-grid ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.footer-grid a { color: var(--text-secondary); font-size: 13.5px; }

.footer-grid a:hover { color: var(--accent); }

.footer-brand p { color: var(--text-muted); font-size: 13.5px; margin-top: 12px; max-width: 320px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 22px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.footer-bottom .legal-links { display: flex; gap: 18px; }

/* Simple page (privacy/terms/support) */
.page-hero {
  padding: 150px 0 56px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-900);
}

.page-hero h1 { font-size: clamp(28px, 4.2vw, 40px); }

.page-hero .updated { color: var(--text-muted); font-size: 13.5px; margin-top: 10px; font-family: var(--font-mono); }

.legal-content { padding: 60px 0 100px; }

.legal-content .container { max-width: 800px; }

.legal-content h2 { font-size: 20px; margin-top: 38px; margin-bottom: 14px; }

.legal-content h2:first-child { margin-top: 0; }

.legal-content p, .legal-content li { color: var(--text-secondary); font-size: 15px; margin-bottom: 14px; }

.legal-content ul { padding-left: 22px; margin-bottom: 14px; }

.legal-content strong { color: var(--text-primary); }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 13.5px;
  margin-bottom: 26px;
  font-family: var(--font-mono);
}

/* ---- Process timeline ---- */
.process-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  margin-top: 16px;
}

.process-list::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-cool), var(--accent-2), var(--accent-violet));
  opacity: 0.35;
}

.process-step { position: relative; padding: 0 20px 0 0; }

.process-step .step-num {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--bg-800);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
  animation: stepGlow 4.4s ease-in-out infinite;
  animation-delay: 0.1s;
}

.process-step h3 { font-size: 16px; margin-bottom: 8px; }

/* Sequential accent per step — ties into the site's four-color system */
.process-step:nth-child(2) .step-num { color: var(--accent-cool); border-color: rgba(var(--accent-cool-rgb), 0.3); animation-delay: 1.3s; }
.process-step:nth-child(3) .step-num { color: var(--accent-2); border-color: rgba(255, 176, 61, 0.3); animation-delay: 2.6s; }
.process-step:nth-child(4) .step-num { color: var(--accent-violet); border-color: rgba(var(--accent-violet-rgb), 0.3); animation-delay: 3.9s; }

@keyframes stepGlow {
  0%, 90%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
  6% { transform: scale(1.12); filter: drop-shadow(0 0 9px currentColor); }
}

/* Traveling pulse — draws the eye along the process timeline, color-shifting per step */
.process-pulse {
  position: absolute;
  top: 21px;
  left: 6%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px 2px rgba(var(--accent-rgb), 0.7), 0 0 16px 5px rgba(var(--accent-rgb), 0.35);
  z-index: 2;
  pointer-events: none;
  animation: processPulseMove 4.4s ease-in-out infinite;
}

@keyframes processPulseMove {
  0%   { left: 6%; opacity: 0; background: var(--accent); box-shadow: 0 0 6px 2px rgba(var(--accent-rgb), 0.7), 0 0 16px 5px rgba(var(--accent-rgb), 0.35); }
  6%   { opacity: 1; }
  27%  { background: var(--accent-cool); box-shadow: 0 0 6px 2px rgba(var(--accent-cool-rgb), 0.7), 0 0 16px 5px rgba(var(--accent-cool-rgb), 0.35); }
  53%  { background: var(--accent-2); box-shadow: 0 0 6px 2px rgba(255, 176, 61, 0.7), 0 0 16px 5px rgba(255, 176, 61, 0.35); }
  79%  { background: var(--accent-violet); box-shadow: 0 0 6px 2px rgba(var(--accent-violet-rgb), 0.7), 0 0 16px 5px rgba(var(--accent-violet-rgb), 0.35); }
  94%  { opacity: 1; }
  100% { left: 92%; opacity: 0; }
}

.process-step p { color: var(--text-secondary); font-size: 13.5px; }

/* ---- Homepage FAQ ---- */
.faq-list {
  max-width: 760px;
  margin-top: 8px;
}

.faq-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}

.faq-item:last-child { border-bottom: none; }

.faq-item h3 { font-size: 16px; margin-bottom: 8px; }

.faq-item p { color: var(--text-secondary); font-size: 14.5px; }

/* ---- Closing CTA banner ---- */
.cta-banner {
  border-radius: 16px;
  border: 1px solid var(--border-strong);
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(var(--accent-rgb), 0.12), transparent 70%),
    var(--bg-800);
  padding: 60px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-banner h2 { margin-bottom: 16px; }

.cta-banner p { color: var(--text-secondary); font-size: 16px; max-width: 500px; margin: 0 auto 30px; }

.cta-banner .hero-actions { justify-content: center; }

/* ---- Floating corner CTA ---- */
.fab-cta {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 90;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.fab-cta.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.fab-cta .btn { box-shadow: 0 8px 20px rgba(0,0,0,0.4); }

/* ---- Back-to-top button ---- */
.back-to-top {
  position: fixed;
  bottom: 22px;
  left: 22px;
  z-index: 90;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-cool-rgb), 0.3);
  background: var(--bg-800);
  color: var(--accent-cool);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

.back-to-top svg { width: 18px; height: 18px; }

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover { color: var(--accent-cool); border-color: rgba(var(--accent-cool-rgb), 0.65); background: rgba(var(--accent-cool-rgb), 0.1); }

/* Responsive */
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; gap: 40px; }
  .grid-3 { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .capability-layout { grid-template-columns: 1fr; gap: 32px; }
  .capability-layout .ai-panel { order: -1; max-width: 320px; margin: 0 auto; }
  .stack-groups { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  section { padding: 76px 0; }
  .process-list { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .process-list::before { display: none; }
  .process-pulse { display: none; }
  .cta-banner { padding: 44px 24px; }
}

@media (max-width: 760px) {
  .nav-links { display: none; }
  .menu-toggle { display: flex; }
  .nav-cta .btn-ghost { display: none; }
  .hero-stats { gap: 32px; }
  .process-list { grid-template-columns: 1fr; }
  .navbar.floating .container { max-width: 92vw; padding: 0 6px 0 16px; }
  .fab-cta { bottom: 16px; right: 16px; }
  .fab-cta .btn { padding: 10px 16px; font-size: 13px; }
  .back-to-top { bottom: 16px; left: 16px; width: 40px; height: 40px; }
  .availability-badge { bottom: 62px; left: 16px; font-size: 11px; padding: 6px 12px; }
  .terminal-window { margin-top: 36px; }
  .terminal-body { font-size: 12px; padding: 16px 16px; min-height: 190px; }
  .code-texture { display: none; }
  .hero-code-orbit { display: none; }
}

.mobile-menu {
  position: fixed;
  top: 68px;
  left: 0; right: 0;
  background: var(--bg-950);
  border-bottom: 1px solid var(--border);
  z-index: 99;
  padding: 24px;
  display: none;
  flex-direction: column;
  gap: 20px;
}

.mobile-menu.open { display: flex; }

.mobile-menu a { font-size: 15px; color: var(--text-primary); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger-item { opacity: 1; transform: none; transition: none; }
  .scroll-cue .line { animation: none; }
  .floating-device, .floating-device-spark { animation: none; }
  #possibility-panel.flash { animation: none; }
  .capability-icon.pop { animation: none; }
  .mockup-body.pop { animation: none; }
  .process-pulse { display: none; }
  .process-step .step-num { animation: none; }
  .terminal-body.pop { animation: none; }
  .code-screen.flash { animation: none; }
  .chip { transition: none; }
  .card-icon::after { animation: none; opacity: 0; }
  .file-tag .file-dot { animation: none; }
  .hero::before { animation: none; opacity: 0; }
  .hero .gradient-text { animation: none; filter: none; }
  .hero-code-orbit { display: none; }
  .hero-headline-code { display: none; }
  .hero p .type-cursor { animation: none; opacity: 0; }
  .hero-headline-swap h1 {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }
  .hero-content .eyebrow,
  .hero-content h1,
  .hero-content p,
  .hero-content .hero-actions,
  .hero-content .terminal-window,
  .hero-stats {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}