/*
  Cichocki.com — Enterprise Dark Design System
  ------------------------------------------------
  Goals:
  - Executive-grade dark theme
  - Consistent spacing, typography, and components
  - Accessible focus states
  - Minimal dependencies (works with or without Tailwind)
*/

:root{
  color-scheme: dark;

  /* Core palette */
  --bg: #0A0B0F;
  --bg2: #070A0E;
  --panel: rgba(17, 24, 39, 0.55);   /* glass surface */
  --panelSolid: #0F1419;            /* solid surface */
  --panelAlt: #0B0F14;
  --panelElev: #101826;

  --ink: #E8EAF0;
  --muted: #A5AFC2;
  --muted2: rgba(165, 175, 194, 0.78);

  --accent: #C9A961;     /* gold */
  --accent2: #E6C679;    /* warm gold */
  --accentBlue: #4A90E2; /* executive blue */
  --accentGreen: #10B981;/* enterprise green */

  --border: rgba(148, 163, 184, 0.14);
  --border2: rgba(148, 163, 184, 0.22);

  --shadow1: 0 22px 70px rgba(0,0,0,0.55);
  --shadow2: 0 14px 34px rgba(0,0,0,0.35);

  --ring: 0 0 0 4px rgba(201, 169, 97, 0.22);

  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 22px;
  --r-xl: 28px;

  --container: 1200px;
  --containerWide: 1380px;

  --grid: 64px;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; overflow-x: hidden; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background:
    radial-gradient(1100px 700px at 10% -10%, rgba(201, 169, 97, 0.16), transparent 55%),
    radial-gradient(900px 650px at 90% 10%, rgba(74, 144, 226, 0.12), transparent 55%),
    radial-gradient(1000px 900px at 40% 110%, rgba(16, 185, 129, 0.10), transparent 60%),
    linear-gradient(180deg, var(--bg2) 0%, var(--bg) 18%, var(--bg2) 100%);
  color: var(--ink);
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Grid overlay disabled for cleaner look */
body::before{ display: none; }

body::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Ensure content sits above global overlays */
.relative{ position: relative; z-index: 1; }

a{ color: inherit; }
a:hover{ color: var(--accent2); }

/* Utility containers */
.container{ max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }
.container-wide{ max-width: var(--containerWide); margin: 0 auto; padding: 0 1.5rem; }

/* Simple grid helpers (used throughout the site) */
.grid-2,
.grid-3{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px){
  .grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.serif{ font-family: 'Playfair Display', ui-serif, Georgia, serif; }

/* Typography scale */
.step--2{ font-size: clamp(12px, 1.05vw, 14px); line-height: 1.65; }
.step--1{ font-size: clamp(14px, 1.12vw, 16px); line-height: 1.65; }
.step-0{  font-size: clamp(16px, 1.35vw, 18px); line-height: 1.65; }
.step-1{  font-size: clamp(20px, 2.0vw, 24px); line-height: 1.35; }
.step-2{  font-size: clamp(28px, 3.0vw, 38px); line-height: 1.15; }
.step-3{  font-size: clamp(40px, 4.6vw, 58px); line-height: 1.05; }
.step-4{  font-size: clamp(46px, 6.0vw, 74px); line-height: 0.98; }

/* Section padding */
.section-padding{ padding: 5rem 0; }
@media (min-width: 768px){ .section-padding{ padding: 7rem 0; } }

/* Reveal / scroll animations (JS-enhanced, safe fallback when JS is disabled) */
html.js .reveal,
html.js .fade-up{
  opacity: 0;
  transform: translateY(22px);
  will-change: transform, opacity;
  transition:
    opacity 720ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.js .reveal.is-visible,
html.js .fade-up.is-visible{
  opacity: 1;
  transform: none;
}

.fade-up-delay-1{ transition-delay: 90ms; }
.fade-up-delay-2{ transition-delay: 180ms; }
.fade-up-delay-3{ transition-delay: 270ms; }

/* Sticky header glass */
.glass{
  background: rgba(8, 10, 14, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}

/* Announcement */
.announcement-bar{
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.16), rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.16));
  border-bottom: 1px solid rgba(16, 185, 129, 0.22);
}

/* Navigation */
.nav-link{
  color: var(--muted2);
  text-decoration: none;
  font-weight: 500;
  position: relative;
  padding: 0.5rem 0;
  transition: color 200ms ease;
}

.nav-link::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.2rem;
  height: 1px;
  width: 0;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(201,169,97,0.85), transparent);
  transition: width 220ms ease;
}

.nav-link:hover{ color: var(--ink); }
.nav-link:hover::after{ width: 100%; }

/* Buttons */
.btn-primary,
.btn-secondary,
.btn-enterprise{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.9rem;
  border-radius: var(--r-xs);
  text-decoration: none;
  font-weight: 700;
  min-height: 48px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.btn-primary{
  color: #0B0F14;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 10px 34px rgba(201, 169, 97, 0.22);
}

.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 48px rgba(201, 169, 97, 0.33); }
.btn-primary:active{ transform: translateY(0); }

.btn-secondary{
  color: var(--ink);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
}

.btn-secondary:hover{ border-color: rgba(201,169,97,0.55); background: rgba(201,169,97,0.06); transform: translateY(-2px); }
.btn-secondary:active{ transform: translateY(0); }

.btn-enterprise{
  color: white;
  background: linear-gradient(135deg, var(--accentGreen), #059669);
  box-shadow: 0 10px 34px rgba(16, 185, 129, 0.20);
}

.btn-enterprise:hover{ transform: translateY(-2px); box-shadow: 0 16px 48px rgba(16, 185, 129, 0.28); }

/* Badges */
.badge{
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.38rem 0.85rem;
  background: rgba(201, 169, 97, 0.10);
  border: 1px solid rgba(201, 169, 97, 0.26);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.badge-enterprise{
  background: rgba(74, 144, 226, 0.10);
  border-color: rgba(74, 144, 226, 0.26);
  color: rgba(147, 197, 253, 0.95);
}

.badge-success{
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.26);
  color: rgba(110, 231, 183, 0.98);
}

/* Eyebrow */
.eyebrow{
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(201,169,97,0.92);
  font-weight: 800;
  margin-bottom: 0.9rem;
}

/* Gradient text */
.gradient-text{
  background: linear-gradient(135deg, var(--accent), var(--accent2), var(--accentBlue));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: shimmer 3.2s ease-in-out infinite;
}

@keyframes shimmer{ 0%, 100%{ background-position: 0% center; } 50%{ background-position: 100% center; } }

/* Cards */
.card-enterprise{
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.62), rgba(17, 24, 39, 0.44));
  border: 1px solid rgba(148,163,184,0.14);
  border-radius: var(--r-md);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  height: 100%; /* Equal height cards */
  display: flex;
  flex-direction: column;
}

.card-enterprise::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 260px at 20% 0%, rgba(201,169,97,0.14), transparent 55%);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.card-enterprise:hover{
  transform: translateY(-6px);
  border-color: rgba(201,169,97,0.34);
  box-shadow: var(--shadow2), 0 0 0 1px rgba(255,255,255,0.02) inset;
}

.card-enterprise:hover::before{ opacity: 1; }
.card-outlined{
  background: var(--panelAlt);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 2rem;
  margin-bottom: 1.5rem;
}

.card-outlined h2{
  color: var(--accent);
  font-size: 1.5rem;
  margin: 0 0 1rem;
}

.card-outlined h3{
  color: var(--ink);
  font-weight: 600;
  margin: 1.5rem 0 0.75rem;
}

.card-outlined p{ color: var(--muted2); line-height: 1.75; }

.card-outlined a{ color: var(--accent); }
.card-outlined a:hover{ color: var(--accent2); }

.card-outlined ul{ list-style: none; padding: 0; margin: 0; }
.card-outlined li{
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  color: var(--muted2);
}
.card-outlined li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(201,169,97,0.9);
}

.accent-text{ color: var(--accent); text-decoration: none; }
.accent-text:hover{ color: var(--accent2); }

/* Testimonial */
.testimonial-card{
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(148,163,184,0.14);
  border-radius: var(--r-md);
  padding: 2rem;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.testimonial-card::before{
  content: "\201C"; /* left double quote */
  position: absolute;
  top: 1.0rem;
  left: 1.2rem;
  font-size: 4rem;
  line-height: 1;
  color: rgba(201, 169, 97, 0.55);
  opacity: 0.35;
  font-family: ui-serif, Georgia, serif;
}

/* Pricing */
.pricing-card{
  background: rgba(15, 20, 25, 0.82);
  border: 1px solid rgba(148,163,184,0.14);
  border-radius: var(--r-lg);
  padding: 2.4rem;
  position: relative;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.pricing-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow2); }

.pricing-card.featured{
  border-color: rgba(201, 169, 97, 0.55);
  box-shadow: 0 0 0 1px rgba(201,169,97,0.14) inset, 0 0 70px rgba(201,169,97,0.10);
}

.pricing-card.featured::before{
  content: "Most Popular";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #0B0F14;
  padding: 0.32rem 1.05rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: 0 10px 28px rgba(201, 169, 97, 0.30);
}

/* Stats */
.counter{ font-variant-numeric: tabular-nums; }
.stat-item{ text-align: center; padding: 1.25rem; transition: transform 200ms ease; }
.stat-item:hover{ transform: scale(1.04); }
.stat-number{ text-shadow: 0 0 50px rgba(201,169,97,0.16); }
.stat-label{ color: var(--muted2); text-transform: uppercase; letter-spacing: 0.11em; font-size: 0.82rem; }

/* Divider */
.divider{ height: 1px; background: linear-gradient(90deg, transparent, rgba(148,163,184,0.16), transparent); }

/* Trust badge */
.trust-badge{
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.95rem;
  background: rgba(16, 185, 129, 0.10);
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: var(--r-xs);
  font-size: 0.875rem;
  color: rgba(110, 231, 183, 0.96);
}

/* Orbs */
.orb{ position: absolute; border-radius: 999px; filter: blur(60px); pointer-events: none; will-change: transform, opacity; opacity: 0.9; }

@keyframes float{
  0%, 100%{ transform: translate(0,0) scale(1); }
  25%{ transform: translate(12px,-18px) scale(1.05); }
  50%{ transform: translate(-6px,12px) scale(0.96); }
  75%{ transform: translate(-14px,-10px) scale(1.02); }
}

@keyframes pulse-glow{
  0%, 100%{ opacity: 0.35; filter: blur(58px); }
  50%{ opacity: 0.55; filter: blur(82px); }
}

.orb-gold{ background: radial-gradient(circle, rgba(201,169,97,0.40) 0%, rgba(201,169,97,0) 70%); animation: float 22s ease-in-out infinite, pulse-glow 10s ease-in-out infinite; }
.orb-blue{ background: radial-gradient(circle, rgba(74,144,226,0.32) 0%, rgba(74,144,226,0) 70%); animation: float 26s ease-in-out infinite reverse, pulse-glow 12s ease-in-out infinite; }
.orb-green{ background: radial-gradient(circle, rgba(16,185,129,0.28) 0%, rgba(16,185,129,0) 70%); animation: float 30s ease-in-out infinite, pulse-glow 14s ease-in-out infinite; }

/* Mobile menu */
.mobile-menu{
  position: fixed;
  inset: 0;
  background: rgba(6, 8, 12, 0.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.mobile-menu.active{ opacity: 1; visibility: visible; }

.mobile-menu-content{
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  padding-top: 5rem;
  overflow-y: auto;
}

.mobile-close-btn{
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: var(--r-xs);
  color: var(--ink);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.mobile-close-btn:hover{ background: rgba(255,255,255,0.10); border-color: rgba(201,169,97,0.45); transform: translateY(-1px); }

.mobile-menu-logo{
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 auto 1.25rem;
  opacity: 0.95;
  text-decoration: none;
}

.mobile-menu-footer{
  padding-top: 1.25rem;
  border-top: 1px solid rgba(148,163,184,0.12);
}

.mobile-nav{ display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: auto; }

.mobile-nav-link{
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(148,163,184,0.10);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, color 160ms ease;
}

.mobile-nav-link:hover{ background: rgba(201,169,97,0.07); border-color: rgba(201,169,97,0.30); color: var(--accent2); transform: translateY(-1px); }

.mobile-nav-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: rgba(201,169,97,0.10);
  border-radius: var(--r-xs);
  color: rgba(201,169,97,0.92);
}

.mobile-cta{ display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem 0; border-top: 1px solid rgba(148,163,184,0.14); margin-top: 2rem; }

/* Hamburger */
.mobile-menu-btn{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: none;
  border-radius: var(--r-xs);
  cursor: pointer;
  position: relative;
  z-index: 60;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 160ms ease;
}

.mobile-menu-btn:hover{ background: rgba(255,255,255,0.08); }

.hamburger-line{
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 220ms ease, opacity 220ms ease;
}

.mobile-menu-btn.active .hamburger-line:nth-child(1){ transform: rotate(45deg) translate(5px, 5px); }
.mobile-menu-btn.active .hamburger-line:nth-child(2){ opacity: 0; transform: scaleX(0); }
.mobile-menu-btn.active .hamburger-line:nth-child(3){ transform: rotate(-45deg) translate(5px, -5px); }

/* Scroll indicator */
@keyframes bounce{
  0%, 20%, 50%, 80%, 100%{ transform: translateX(-50%) translateY(0); }
  40%{ transform: translateX(-50%) translateY(-10px); }
  60%{ transform: translateX(-50%) translateY(-5px); }
}

.scroll-indicator{
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2s infinite;
}

/* Focus styles */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: none;
  box-shadow: var(--ring);
}

/* Improve anchor jump with sticky header */
*[id]{ scroll-margin-top: 92px; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body::before, body::after{ display: none !important; }
}

/* Print (legal pages) */
@media print{
  body{ background: #fff !important; color: #000 !important; }
  header, nav, .announcement-bar, .mobile-menu, .scroll-indicator{ display: none !important; }
  a{ color: #000 !important; text-decoration: underline; }
  .card-enterprise, .testimonial-card, .pricing-card{ box-shadow: none !important; border-color: #ddd !important; background: #fff !important; }
  body::before, body::after{ display: none !important; }
}