/* ============================================================
   Skin: SOFTWARE
   For: Auerlia IT, Cipher Trade, Ferrum Logic, Hanseatic Pixel,
        Lumeon Code, Polaris Bytes
   Vibe: clean, modern tech B2B — confident blue, lots of whitespace
   ============================================================ */

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

:root[data-skin="software"],
[data-skin="software"] {
  /* Type */
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --brand-size:   17px;
  --brand-weight: 700;
  --brand-track:  -0.015em;
  --hero-weight:  700;
  --hero-size:    4.2rem;
  --hero-track:   -0.03em;
  --hero-lh:      1.04;

  /* Color — light surface, deep ink, electric blue */
  --bg:            #FFFFFF;
  --surface:       #F8FAFC;
  --surface-hover: #FFFFFF;
  --fg:            #0F172A;
  --fg-muted:      #475569;
  --fg-subtle:     #94A3B8;

  --primary:       #2563EB;
  --primary-hover: #1D4ED8;
  --primary-soft:  rgba(37, 99, 235, 0.08);
  --on-primary:    #FFFFFF;

  --accent:        #0EA5E9;
  --success:       #16A34A;
  --success-soft:  rgba(22, 163, 74, 0.10);

  --border:        #E2E8F0;
  --border-strong: #CBD5E1;
  --border-subtle: #F1F5F9;

  --nav-bg:        rgba(255, 255, 255, 0.85);
  --nav-blur:      saturate(180%) blur(14px);
  --footer-bg:     #F8FAFC;
  --cta-bg:        linear-gradient(135deg, #EFF6FF 0%, #F1F5F9 100%);

  /* Shape */
  --btn-radius:    10px;
  --card-radius:   14px;
  --input-radius:  10px;
  --icon-radius:   10px;
}

/* Soft mesh in hero background */
[data-skin="software"] .hero {
  background:
    radial-gradient(80% 60% at 20% 0%, rgba(37, 99, 235, 0.06), transparent 70%),
    radial-gradient(60% 50% at 95% 100%, rgba(14, 165, 233, 0.05), transparent 70%);
}

/* Subtle grid backdrop on services page */
[data-skin="software"] .section-tinted {
  background: var(--surface);
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.025) 1px, transparent 1px);
  background-size: 32px 32px;
}

[data-skin="software"] .tile {
  background: #FFFFFF;
}
[data-skin="software"] .tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -16px rgba(15, 23, 42, 0.10);
}

[data-skin="software"] .cta-banner {
  background: linear-gradient(135deg, #2563EB 0%, #1E40AF 100%);
  border-color: transparent;
}
[data-skin="software"] .cta-banner h2 { color: #FFFFFF; }
[data-skin="software"] .cta-banner .eyebrow { color: rgba(255,255,255,0.85); }
[data-skin="software"] .cta-banner .cta-sub { color: rgba(255,255,255,0.95); }
[data-skin="software"] .cta-banner .cta-mail { color: rgba(255,255,255,0.9); }
[data-skin="software"] .cta-banner .cta-mail:hover { color: #FFFFFF; }
[data-skin="software"] .cta-banner .btn-primary {
  background: #FFFFFF;
  color: #1E40AF;
  border-color: #FFFFFF;
}
[data-skin="software"] .cta-banner .btn-primary:hover { background: #F1F5F9; border-color: #F1F5F9; }
[data-skin="software"] .cta-banner .btn-ghost { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.5); }
[data-skin="software"] .cta-banner .btn-ghost:hover { border-color: #FFFFFF; }