/*
Theme Name:  Sineli Strategic Solutions
Theme URI:   https://sineli.com
Author:      Sineli Strategic Solutions
Author URI:  https://sineli.com
Description: A modern, professional corporate theme for IT consulting and digital transformation companies. Features gradient branding, animated sections, full responsive layout, and custom page templates for Home, About, Services, Expertise, and Contact pages.
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sineli-strategic
Tags:        corporate, business, it-consulting, one-page, custom-colors, custom-menu, featured-images, full-width-template, responsive-layout, two-columns
*/

/* ── CSS Reset & Variables ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary:        #991b1b;
  --primary-light:  #be2323;
  --primary-dark:   #991b1b;
  --accent:         #991b1b;
  --primary-fg:     #ffffff;
  --bg:             #ffffff;
  --bg-muted:       #fce3e3;
  --bg-dark:        #240c0c;
  --fg:             #240c0c;
  --fg-muted:       #7d6262;
  --border:         #e5e7eb;
  --card-bg:        #ffffff;
  --radius:         12px;
  --radius-sm:      8px;
  --shadow:         0 4px 20px rgba(109,40,217,.10);
  --shadow-hover:   0 8px 30px rgba(109,40,217,.20);
  --transition:     all .3s ease;
  --container:      1200px;
  --font-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:   'Space Grotesk', var(--font-sans);
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
}
img { max-width: 100%; height: auto; display: block; }
a  { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ── Container ─────────────────────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px; border-radius: var(--radius-sm);
  font-size: 16px; font-weight: 600; font-family: var(--font-sans);
  cursor: pointer; transition: var(--transition); border: 2px solid transparent;
  text-decoration: none; white-space: nowrap;
}
.btn-primary { background: var(--primary); color: var(--primary-fg); }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: var(--primary-fg); transform: translateY(-2px); }
.btn-white  { background: #fff; color: var(--primary); }
.btn-white:hover  { background: var(--bg-muted); transform: translateY(-2px); }
.btn-lg { padding: 16px 40px; font-size: 18px; }

/* ── Gradient text ─────────────────────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Section utilities ─────────────────────────────────────────────────── */
.section       { padding-block: 96px; }
.section-sm    { padding-block: 60px; }
.section-dark  { background: var(--bg-dark); color: #fff; }
.section-muted { background: var(--bg-muted); }
.section-gradient {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
}

.section-header { text-align: center; margin-bottom: 64px; }
.section-header h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700; margin-bottom: 12px;
}
.section-header p { font-size: 18px; color: var(--fg-muted); max-width: 600px; margin-inline: auto; }
.section-dark  .section-header p,
.section-gradient .section-header p { color: rgba(255,255,255,.75); }

/* ── Card ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px;
  transition: var(--transition); height: 100%;
}
.card:hover { box-shadow: var(--shadow-hover); border-color: var(--accent); transform: translateY(-4px); }

.card-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, rgba(109,40,217,.1), rgba(139,92,246,.1));
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; font-size: 24px;
  transition: var(--transition);
}
.card:hover .card-icon { background: linear-gradient(135deg, rgba(109,40,217,.2), rgba(139,92,246,.2)); }
.card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.card p, .card-desc { font-size: 15px; color: var(--fg-muted); line-height: 1.65; }

.card-capabilities { margin-top: 14px; }
.card-capabilities strong { font-size: 13px; font-weight: 600; display: block; margin-bottom: 8px; color: var(--fg); }
.card-capabilities li {
  font-size: 13px; color: var(--fg-muted);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 5px;
}
.card-capabilities li::before {
  content: '✓'; color: var(--primary); font-weight: 700; flex-shrink: 0;
}

/* ── Grid layouts ──────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding-block: 64px; }
}