/*
Theme Name:  Blocksy Child — Cyber Solutions
Template:    blocksy
Description: Child theme Cyber Solutions Luxembourg — design tokens, tipografie, carduri, motion.
Version:     0.2.1
Text Domain: blocksy-child-cybersolutions
*/

/* ========== DESIGN TOKENS (v2 owner — calibrare pe logo vectorial) ========== */
:root {
  --bg-primary:    #06111D;
  --bg-secondary:  #0A1828;
  --surface:       #102235;
  --surface-hi:    #16304A;

  --brand-deep:    #036699;
  --brand-blue:    #0387BF;
  --brand-cyan:    #A4DCEB;
  --brand-violet:  #AA58AB; /* DOAR AI / agentic / stări avansate */

  --text-primary:  #F4F8FC;
  --text-secondary:#9AAFC2;
  --text-muted:    #6F8397;

  --border:        rgba(164, 220, 235, 0.14);
  --radius-card:   14px;

  --gradient-brand: linear-gradient(135deg,
    #036699 0%, #0387BF 38%, #A4DCEB 68%, #AA58AB 100%);

  /* Motion tokens */
  --motion-fast:     150ms;
  --motion-standard: 260ms;
  --motion-slow:     650ms;
  --motion-ambient:  10s;

  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

/* ========== EYEBROW / ETICHETE TEHNICE (mono, tracking mare) ========== */
.cs-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-cyan);
}
.cs-eyebrow--ai { color: var(--brand-violet); }

/* ========== CARDURI (Linear/Snyk) ========== */
.cs-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 36px;
  transition: border-color var(--motion-standard) ease,
              transform var(--motion-standard) ease;
}
.cs-card:hover {
  border-color: rgba(164, 220, 235, 0.30);
  transform: translateY(-2px);
}

/* ========== CTA PRIMAR (gradient controlat) ========== */
.cs-btn-primary {
  background: var(--gradient-brand);
  color: #06111D;
  border-radius: 10px;
  padding: 14px 28px;
  font-weight: 600;
  transition: filter var(--motion-fast) ease;
}
.cs-btn-primary:hover { filter: brightness(1.08); }

.cs-btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 28px;
}

/* ========== HERO — animație logo (video loop) ========== */
.cs-hero-media video,
.cs-hero-media img { width: 100%; height: auto; display: block; }

/* Glow breathing ambient — aplicat pe containerul logo-ului întreg */
@keyframes cs-glow-breathe {
  0%, 100% { filter: drop-shadow(0 0 18px rgba(3, 135, 191, 0.35)); transform: translateY(0) scale(1); }
  50%      { filter: drop-shadow(0 0 30px rgba(164, 220, 235, 0.45)); transform: translateY(-4px) scale(1.02); }
}
.cs-logo-animated { animation: cs-glow-breathe var(--motion-ambient) ease-in-out infinite; }

/* Impulsuri pe liniile de arhitectură (SVG: stroke-dasharray) */
@keyframes cs-line-pulse { to { stroke-dashoffset: -120; } }
.cs-diagram .pulse {
  stroke: var(--brand-blue);
  stroke-dasharray: 6 114;
  animation: cs-line-pulse 3s linear infinite;
}
.cs-diagram .pulse--ai { stroke: var(--brand-violet); }

/* ========== REDUCED MOTION (obligatoriu) ========== */
@media (prefers-reduced-motion: reduce) {
  .cs-logo-animated,
  .cs-diagram .pulse { animation: none !important; }
  .cs-card, .cs-card:hover { transform: none; transition: none; }
  .cs-hero-media video { display: none; }
  .cs-hero-media img   { display: block; } /* fallback static */
}


/* ========== BLOCKSY VARIABLE OVERRIDES + SECTION HELPERS (v0.2.1) ========== */
html, body {
  background: var(--bg-primary) !important;
  --theme-text-color: var(--text-primary);
  --theme-headings-color: var(--text-primary);
  --theme-link-initial-color: var(--brand-blue);
  --theme-link-hover-color: var(--brand-cyan);
}
#main, .ct-main, article, .entry-content { background: transparent !important; }
#header, #header .ct-container, #header [data-row], #header [data-row] > div {
  background: rgba(6, 17, 29, 0.94) !important;
}
#header a, #header .site-title, #header .ct-menu a { color: var(--text-primary) !important; }
#header a:hover, #header .ct-menu a:hover { color: var(--brand-cyan) !important; }
footer#footer, footer#footer .ct-container, footer#footer [data-row] {
  background: var(--bg-primary) !important; color: var(--text-secondary);
}
footer#footer a { color: var(--text-secondary); }
.home .page-title, .home .entry-header { display: none; }
.home .ct-container, .home .entry-content { max-width: none !important; }
h1,h2,h3,h4 { color: var(--text-primary); }
a { color: var(--brand-blue); }
.entry-content { color: var(--text-primary); }

.cs-section { max-width: 1200px; margin: 0 auto; padding: 88px 24px; }
.cs-hero { padding-top: 110px; padding-bottom: 90px;
  background: radial-gradient(900px 500px at 75% 35%, rgba(3,135,191,0.18), transparent 70%); }
.cs-hero h1 { font-size: clamp(38px, 5.4vw, 62px); line-height: 1.08; margin: 18px 0 8px; font-weight: 700; }
.cs-hero .cs-grad { background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-hero p.cs-sub { color: var(--text-secondary); font-size: 19px; max-width: 640px; margin: 22px 0 34px; }
.cs-cta-row { display: flex; gap: 18px; flex-wrap: wrap; }
.cs-btn-primary { text-decoration: none; display: inline-block; color: #06111D !important; }
.cs-btn-secondary { text-decoration: none; display: inline-block; color: var(--text-primary) !important; }
.cs-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.cs-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 1024px) { .cs-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .cs-grid-4, .cs-grid-2 { grid-template-columns: 1fr; } }
.cs-chip { display: inline-block; padding: 9px 18px; border: 1px solid rgba(164,220,235,0.3);
  border-radius: 10px; font-family: var(--font-mono); font-size: 14px; color: var(--brand-cyan); margin: 0 10px 12px 0; }
.cs-step { text-align: center; flex: 1; min-width: 110px; }
.cs-step .cs-dot { width: 36px; height: 36px; border-radius: 50%; background: var(--surface);
  border: 1.6px solid var(--brand-blue); margin: 0 auto 12px; display: flex; align-items: center;
  justify-content: center; font-family: var(--font-mono); font-size: 13px; }
.cs-flow { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.cs-outcome-row { display: flex; gap: 14px; flex-wrap: wrap; }
.cs-muted { color: var(--text-secondary); }
.cs-small { font-size: 14px; color: var(--text-muted); }
.cs-center { text-align: center; }
.cs-hero-visual { position: relative; }
@keyframes cs-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.cs-hero-visual svg { animation: cs-float var(--motion-ambient) ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cs-hero-visual svg { animation: none !important; } }