/*
Theme Name: ITdot Modern
Theme URI: https://itdot.ro/
Author: Omniweb
Author URI: https://omniweb.ro/
Description: Tema WordPress moderna pentru prezentarea serviciilor IT: AI, Dezvoltare aplicatii, Automatizari, Cybersecurity, Servicii Cloud (AWS, Google Cloud, Azure).
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: itdot-modern
Tags: responsive, clean, minimal, services, business
*/

:root {
  --bg: #0b0f1a;
  --card: #111827;
  --muted: #9ca3af;
  --text: #e5e7eb;
  --accent: #38bdf8;
  --accent-2: #8b5cf6;
  --ring: rgba(56, 189, 248, 0.35);
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --container: 1200px;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif; }
a { color: var(--text); text-decoration: none; }
img { max-width: 100%; height: auto; display:block; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }

.header { position: sticky; top:0; z-index: 50; background: rgba(11,15,26,0.75); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.06); }
.nav { display:flex; align-items:center; justify-content: space-between; height: 72px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.3px; }
.brand-logo { width:36px; height:36px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: var(--shadow); }
.menu { display:flex; gap: 18px; align-items:center; }
.menu a { opacity:.9; }
.menu a:hover { color: var(--accent); }
.cta-btn { padding:10px 16px; border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b0f1a; font-weight:600; box-shadow: var(--shadow); }
.burger { display:none; background:none; border:none; width:40px; height:40px; border-radius:10px; color:var(--text); }
@media (max-width: 900px) {
  .menu { display:none; position: absolute; top:72px; left:0; right:0; background:#0d1424; padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.06); }
  .menu.open { display:flex; flex-direction: column; }
  .burger { display:block; }
}

.hero { padding: 72px 0; background:
  radial-gradient(1200px 400px at 50% -50%, rgba(56,189,248,.20), transparent 70%),
  radial-gradient(900px 400px at 100% 0%, rgba(139,92,246,.18), transparent 70%); }
.hero h1 { font-size: clamp(32px, 6vw, 54px); line-height: 1.05; margin: 0 0 14px; }
.hero p { color: var(--muted); max-width: 780px; font-size: clamp(16px, 1.8vw, 18px); }
.hero-grid { margin-top: 28px; display:grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.hero .card { grid-column: span 4; }
@media (max-width: 900px) { .hero .card { grid-column: span 12; } }

.card { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.card h3 { margin-top:0; margin-bottom:8px; font-size: 18px; }
.badge { display:inline-block; font-size:12px; padding:6px 10px; border-radius:999px; background: rgba(56,189,248,.18); border: 1px solid rgba(56,189,248,.35); color: #bff0ff; margin-bottom:8px; }
.grid-3 { display:grid; gap:18px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }

.section { padding: 54px 0; }
.section h2 { font-size: clamp(24px, 3.8vw, 34px); margin: 0 0 10px; }
.section p.lead { color: var(--muted); max-width: 760px; }

.service-card { display:flex; flex-direction: column; gap:8px; }
.service-card .title { font-size:18px; font-weight:700; }
.service-card .excerpt { color: var(--muted); }

.footer { border-top: 1px solid rgba(255,255,255,.06); padding: 28px 0; color: var(--muted); }
.widget-area { display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; }
@media (max-width: 900px) { .widget-area { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .widget-area { grid-template-columns: 1fr; } }

input, textarea { width:100%; padding:12px 14px; background:#0e172a; color:var(--text); border:1px solid rgba(255,255,255,.1); border-radius:12px; outline: none; }
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
button, .button { padding:12px 16px; border-radius:12px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b0f1a; font-weight:700; border:none; cursor:pointer; }
.button.ghost { background: transparent; color: var(--text); border:1px solid rgba(255,255,255,.18); }

.icon-row { display:flex; gap:10px; align-items:center; }
.icon-btn { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b0f1a; font-weight:700; box-shadow: var(--shadow); }
.icon-btn.ghost { background: transparent; color: var(--text); border:1px solid rgba(255,255,255,.18); }
.icon-btn svg { width: 16px; height: 16px; }
.header .menu a.icon-btn { opacity:1; }

.menu a.menu-link { padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.12); }
.menu a.menu-link:hover { border-color: rgba(56,189,248,.55); color: var(--accent); }
@media (max-width: 900px) { .menu a.menu-link { display:block; } }