/* ============================================================
   BOTOMOUT — Design System
   Dark, futuristic, glassmorphic IT-solutions site
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:            #05060a;
  --bg-alt:        #0a0d16;
  --surface:       rgba(255,255,255,0.045);
  --surface-hi:    rgba(255,255,255,0.08);
  --border:        rgba(255,255,255,0.09);
  --border-hi:     rgba(255,255,255,0.18);
  --text:          #f4f6fb;
  --text-dim:      #9aa3b7;
  --text-dimmer:   #6b7386;

  --blue:          #3b82f6;
  --violet:        #8b5cf6;
  --cyan:          #22d3ee;
  --lime:          #a3e635;

  --grad-primary:  linear-gradient(135deg, var(--blue), var(--violet));
  --grad-text:     linear-gradient(135deg, #60a5fa, #a78bfa 55%, #22d3ee);

  /* Theme-aware surface overlays used by components below */
  --overlay-soft:        rgba(255,255,255,0.035);
  --overlay-soft-hover:  rgba(255,255,255,0.055);
  --overlay-faint:       rgba(255,255,255,0.03);
  --overlay-faint-hover: rgba(255,255,255,0.06);
  --ghost-bg:            rgba(255,255,255,0.03);
  --ghost-bg-hover:      rgba(255,255,255,0.08);
  --ghost-border-hover:  rgba(255,255,255,0.3);
  --mock-grad-1:         rgba(255,255,255,0.06);
  --mock-grad-2:         rgba(255,255,255,0.02);
  --toggle-track:        rgba(255,255,255,0.08);
  --grid-line:           rgba(255,255,255,0.045);
  --nav-scroll-bg:       rgba(5,6,10,0.72);
  --scrollbar-thumb:     #2a2f3d;
  --scrollbar-thumb-hi:  #3a3f52;
  --shadow-color:        rgba(0,0,0,0.7);
}

/* ---------- Light theme ---------- */
:root[data-theme="light"]{
  --bg:            #f6f7fb;
  --bg-alt:        #eef0f6;
  --surface:       rgba(15,23,42,0.035);
  --surface-hi:    rgba(15,23,42,0.06);
  --border:        rgba(15,23,42,0.09);
  --border-hi:     rgba(15,23,42,0.16);
  --text:          #10131c;
  --text-dim:      #4c5266;
  --text-dimmer:   #7c8296;

  --grad-text:     linear-gradient(135deg, #2563eb, #7c3aed 55%, #0891b2);

  --overlay-soft:        rgba(15,23,42,0.025);
  --overlay-soft-hover:  rgba(15,23,42,0.045);
  --overlay-faint:       rgba(15,23,42,0.02);
  --overlay-faint-hover: rgba(15,23,42,0.045);
  --ghost-bg:            rgba(15,23,42,0.025);
  --ghost-bg-hover:      rgba(15,23,42,0.06);
  --ghost-border-hover:  rgba(15,23,42,0.28);
  --mock-grad-1:         rgba(15,23,42,0.04);
  --mock-grad-2:         rgba(15,23,42,0.01);
  --toggle-track:        rgba(15,23,42,0.08);
  --grid-line:           rgba(15,23,42,0.05);
  --nav-scroll-bg:       rgba(246,247,251,0.75);
  --scrollbar-thumb:     #d3d7e2;
  --scrollbar-thumb-hi:  #b7bccb;
  --shadow-color:        rgba(15,23,42,0.14);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .3s ease, color .3s ease;
  -webkit-tap-highlight-color: rgba(139,92,246,0.25);
  /* Left/right insets matter in landscape on notched phones; horizontal
     scroll is already disabled above, so these are the two that count. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.font-display{ font-family: 'Space Grotesk', 'Inter', sans-serif; }

/* iOS Safari auto-zooms on focus if an input's font-size is under 16px.
   Desktop keeps the smaller text-sm size; only mobile widths get bumped. */
@media (max-width: 640px){
  .field{ font-size: 16px; }
}

::selection{ background: var(--violet); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--scrollbar-thumb); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background: var(--scrollbar-thumb-hi); }

/* Accessibility: skip-to-content link */
.skip-link{
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  background: var(--grad-primary);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: .875rem;
  transition: top .2s ease;
}
.skip-link:focus{ top: 1rem; outline: 2px solid #fff; outline-offset: 2px; }

/* Cookie consent banner */
#cookie-banner{ z-index: 90; padding-bottom: env(safe-area-inset-bottom); }

/* Touch targets: bump icon-only nav buttons to the 44px Apple/Android
   minimum, overriding the 40px (w-10 h-10) Tailwind size via ID specificity. */
#theme-toggle, #nav-toggle{ min-width: 44px; min-height: 44px; }

/* Theme toggle button */
[data-icon-moon]{ display: none; }
[data-theme="light"] [data-icon-sun]{ display: none; }
[data-theme="light"] [data-icon-moon]{ display: block; }
#theme-toggle{ color: var(--text-dim); transition: color .25s ease, border-color .25s ease, background-color .25s ease; }
#theme-toggle:hover{ color: var(--text); }

/* ---------- Light-theme overrides for Tailwind utility classes ----------
   Tailwind's Play CDN generates static color values from class names, so a
   CSS-variable theme switch can't reach them directly. These re-target the
   exact utility classes used across the site whenever light mode is active. */
[data-theme="light"] body{ background: var(--bg) !important; color: var(--text) !important; }
[data-theme="light"] [class~="bg-ink"]{ background-color: var(--bg) !important; }

/* Alpha steps chosen so every tier clears WCAG AA (4.5:1) against the
   light-mode background — verified against #f6f7fb, not just eyeballed. */
[data-theme="light"] [class~="text-white"]{ color: var(--text) !important; }
[data-theme="light"] [class~="text-white/80"]{ color: rgba(16,19,28,0.86) !important; }
[data-theme="light"] [class~="text-white/70"]{ color: rgba(16,19,28,0.8) !important; }
[data-theme="light"] [class~="text-white/65"]{ color: rgba(16,19,28,0.76) !important; }
[data-theme="light"] [class~="text-white/60"]{ color: rgba(16,19,28,0.72) !important; }
[data-theme="light"] [class~="text-white/55"]{ color: rgba(16,19,28,0.68) !important; }
[data-theme="light"] [class~="text-white/50"]{ color: rgba(16,19,28,0.66) !important; }
[data-theme="light"] [class~="text-white/45"]{ color: rgba(16,19,28,0.64) !important; }
[data-theme="light"] [class~="text-white/40"]{ color: rgba(16,19,28,0.62) !important; }
[data-theme="light"] [class~="text-white/35"]{ color: rgba(16,19,28,0.6) !important; }
[data-theme="light"] [class~="hover:text-white"]:hover{ color: var(--text) !important; }
[data-theme="light"] [class~="hover:text-white/80"]:hover{ color: rgba(16,19,28,0.86) !important; }
[data-theme="light"] [class~="hover:text-white/70"]:hover{ color: rgba(16,19,28,0.8) !important; }

[data-theme="light"] [class~="border-white/5"]{ border-color: rgba(16,19,28,0.06) !important; }
[data-theme="light"] [class~="border-white/10"]{ border-color: rgba(16,19,28,0.1) !important; }
[data-theme="light"] [class~="border-white/30"]{ border-color: rgba(16,19,28,0.24) !important; }
[data-theme="light"] [class~="hover:border-white/30"]:hover{ border-color: rgba(16,19,28,0.3) !important; }

[data-theme="light"] [class~="bg-white/10"]{ background-color: rgba(16,19,28,0.07) !important; }
[data-theme="light"] [class~="bg-white/20"]{ background-color: rgba(16,19,28,0.12) !important; }
[data-theme="light"] [class~="bg-white/[0.015]"]{ background-color: rgba(16,19,28,0.02) !important; }

[data-theme="light"] [class~="text-blue-300"]{ color: #2563eb !important; }
[data-theme="light"] [class~="text-cyan-300"]{ color: #0e7490 !important; }
[data-theme="light"] [class~="text-lime-300"]{ color: #4d7c0f !important; }
[data-theme="light"] [class~="text-violet-300"]{ color: #7c3aed !important; }
[data-theme="light"] [class~="text-yellow-200"]{ color: #a16207 !important; }
[data-theme="light"] [class~="text-yellow-300"]{ color: #a16207 !important; }

/* Gradient text */
.text-gradient{
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Glass surfaces */
.glass{
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.glass-hi{
  background: var(--surface-hi);
  border: 1px solid var(--border-hi);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

/* Nav */
#site-nav{
  transition: background-color .4s ease, border-color .4s ease, padding .4s ease, box-shadow .4s ease;
  border-bottom: 1px solid transparent;
  padding-top: env(safe-area-inset-top);
}
#site-nav.scrolled{
  background: var(--nav-scroll-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px -15px rgba(0,0,0,0.6);
}
.nav-link{ position: relative; color: var(--text-dim); transition: color .25s ease; }
.nav-link:hover, .nav-link.active{ color: var(--text); }
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px;
  background: var(--grad-primary); transition: width .25s ease; border-radius: 2px;
}
.nav-link:hover::after, .nav-link.active::after{ width: 100%; }

/* Buttons */
.btn-primary{
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 8px 30px -8px rgba(99,102,241,0.55);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 36px -8px rgba(99,102,241,0.75); filter: brightness(1.08); }
.btn-primary:active{ transform: translateY(0); }

.btn-danger{
  background: #dc2626;
  color: #fff;
  box-shadow: 0 8px 30px -8px rgba(220,38,38,0.55);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-danger:hover{ transform: translateY(-2px); box-shadow: 0 14px 36px -8px rgba(220,38,38,0.75); filter: brightness(1.1); }
.btn-danger:active{ transform: translateY(0); }
.btn-danger:disabled{ opacity: .5; cursor: not-allowed; transform: none; }

.btn-ghost{
  background: var(--ghost-bg);
  border: 1px solid var(--border-hi);
  color: var(--text);
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn-ghost:hover{ background: var(--ghost-bg-hover); border-color: var(--ghost-border-hover); transform: translateY(-2px); }

/* Background atmosphere */
.bg-grid{
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

.blob{
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  opacity: .45;
  pointer-events: none;
  z-index: 0;
  transition: opacity .3s ease;
}
[data-theme="light"] .blob{ opacity: .22; }
.blob-blue{ background: radial-gradient(circle at 30% 30%, var(--blue), transparent 70%); }
.blob-violet{ background: radial-gradient(circle at 30% 30%, var(--violet), transparent 70%); }
.blob-cyan{ background: radial-gradient(circle at 30% 30%, var(--cyan), transparent 70%); }

@keyframes float-slow{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(20px,-30px) scale(1.06); }
}
.animate-float-slow{ animation: float-slow 12s ease-in-out infinite; }
.animate-float-slower{ animation: float-slow 18s ease-in-out infinite; animation-delay: -4s; }

@keyframes pulse-glow{
  0%, 100%{ opacity: .35; }
  50%{ opacity: .7; }
}
.animate-pulse-glow{ animation: pulse-glow 4s ease-in-out infinite; }

@keyframes spin-slow{ to{ transform: rotate(360deg); } }
.animate-spin-slow{ animation: spin-slow 14s linear infinite; }

/* Scroll reveal */
[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
}
[data-reveal].in-view{ opacity: 1; transform: translateY(0); }
[data-reveal="fade"]{ transform: none; }
[data-reveal-delay="1"]{ transition-delay: .08s; }
[data-reveal-delay="2"]{ transition-delay: .16s; }
[data-reveal-delay="3"]{ transition-delay: .24s; }
[data-reveal-delay="4"]{ transition-delay: .32s; }
[data-reveal-delay="5"]{ transition-delay: .4s; }

/* Marquee */
.marquee-track{
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee-track:hover{ animation-play-state: paused; }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.marquee-mask{
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* Cards */
.service-card, .work-card, .value-card, .feature-card, .testimonial-card{
  transition: transform .35s ease, border-color .35s ease, background-color .35s ease, box-shadow .35s ease;
}
.service-card:hover, .work-card:hover, .feature-card:hover{
  transform: translateY(-6px);
  border-color: var(--border-hi);
  box-shadow: 0 20px 50px -20px var(--shadow-color);
}

.icon-tile{
  background: linear-gradient(135deg, rgba(59,130,246,0.16), rgba(139,92,246,0.16));
  border: 1px solid var(--border-hi);
}

/* Timeline connector */
.timeline-line{
  background: linear-gradient(90deg, transparent, var(--border-hi) 10%, var(--border-hi) 90%, transparent);
}

/* Form fields */
.field{
  background: var(--overlay-soft);
  border: 1px solid var(--border);
  color: var(--text);
  transition: border-color .25s ease, background-color .25s ease;
}
.field::placeholder{ color: var(--text-dimmer); }
.field:focus{ outline: none; border-color: var(--violet); background: var(--overlay-soft-hover); box-shadow: 0 0 0 3px rgba(139,92,246,0.25); }
.field:focus-visible{ outline: 2px solid var(--violet); outline-offset: 1px; }

/* FAQ */
details.faq-item summary{ cursor: pointer; list-style: none; }
details.faq-item summary::-webkit-details-marker{ display: none; }
details.faq-item .chev{ transition: transform .3s ease; }
details.faq-item[open] .chev{ transform: rotate(45deg); }
details.faq-item[open] .faq-answer{ animation: faq-open .3s ease; }
@keyframes faq-open{ from{ opacity: 0; transform: translateY(-6px);} to{ opacity: 1; transform: translateY(0);} }

/* Mobile menu */
#mobile-menu{
  transition: max-height .4s cubic-bezier(.16,.84,.44,1), opacity .3s ease;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
#mobile-menu.open{ max-height: 640px; opacity: 1; }

/* Utility: dotted divider */
.divider-dot{
  background-image: radial-gradient(var(--border-hi) 1px, transparent 1px);
  background-size: 8px 8px;
}

/* Hero mock dashboard */
.mock-window{
  background: linear-gradient(180deg, var(--mock-grad-1), var(--mock-grad-2));
  border: 1px solid var(--border-hi);
}

/* Filter pills (portfolio) */
.filter-pill{
  border: 1px solid var(--border-hi);
  color: var(--text-dim);
  transition: all .25s ease;
}
.filter-pill.active, .filter-pill:hover{
  color: #fff;
  background: var(--grad-primary);
  border-color: transparent;
}

/* Pricing plan cards */
.plan-card{
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.plan-card:hover{ transform: translateY(-6px); border-color: var(--border-hi); }
.plan-card.featured{
  border: 1px solid rgba(139,92,246,0.5);
  box-shadow: 0 25px 60px -25px rgba(139,92,246,0.45);
}

/* Billing toggle switch */
.toggle-switch{
  width: 52px; height: 30px; border-radius: 9999px;
  background: var(--toggle-track);
  border: 1px solid var(--border-hi);
  position: relative;
  cursor: pointer;
  transition: background-color .25s ease;
}
.toggle-switch .knob{
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 9999px;
  background: var(--grad-primary);
  transition: transform .25s cubic-bezier(.16,.84,.44,1);
}
.toggle-switch.on{ background: rgba(139,92,246,0.25); }
.toggle-switch.on .knob{ transform: translateX(22px); }

/* Estimator */
.estimator-option{
  border: 1px solid var(--border-hi);
  background: var(--overlay-faint);
  transition: all .2s ease;
  cursor: pointer;
}
.estimator-option:hover{ background: var(--overlay-faint-hover); }
.estimator-option.selected{
  border-color: transparent;
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 10px 26px -12px rgba(99,102,241,0.6);
}
.range-slider{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  background: var(--toggle-track);
  outline: none;
}
.range-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px; border-radius: 9999px;
  background: var(--grad-primary);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(99,102,241,0.6);
  border: 2px solid #fff;
}
.range-slider::-moz-range-thumb{
  width: 20px; height: 20px; border-radius: 9999px;
  background: var(--violet);
  cursor: pointer;
  border: 2px solid #fff;
}

/* Blog cards */
.blog-card{ transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.blog-card:hover{ transform: translateY(-6px); border-color: var(--border-hi); box-shadow: 0 20px 50px -20px var(--shadow-color); }

/* Prose (blog article body) */
.prose-botomout h2{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.4rem; margin-top:2.2em; margin-bottom:.7em; color:#fff; }
.prose-botomout h3{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.15rem; margin-top:1.8em; margin-bottom:.6em; color:#fff; }
.prose-botomout p{ color: var(--text-dim); line-height: 1.8; margin-bottom: 1.3em; }
.prose-botomout ul{ color: var(--text-dim); line-height: 1.8; margin-bottom: 1.3em; padding-left: 1.4em; list-style: disc; }
.prose-botomout li{ margin-bottom: .5em; }
.prose-botomout strong{ color: var(--text); }
.prose-botomout blockquote{
  border-left: 3px solid var(--violet);
  padding: .3em 0 .3em 1.2em;
  margin: 1.6em 0;
  color: var(--text);
  font-style: italic;
}

/* 404 */
.glitch-num{
  font-family: 'Space Grotesk', sans-serif;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}