/* ============================================================
   DIRUGIM — Shared Design System
   All pages link to this file. Page-specific styles live
   in each page's own <style> block (which overrides these).
   ============================================================ */

/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900&display=swap');

/* ── RESET ── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── CSS VARIABLES (light / purple theme — default) ──────────
   Dark-themed pages override these in their own <style> block.
   ─────────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:       #f8f8f8;
  --white:    #ffffff;

  /* Purple scale */
  --purple:   #7c3aed;
  --pl:       #a78bfa;   /* light  */
  --pd:       #6d28d9;   /* dark   */
  --p50:      #faf5ff;   /* tint 50  */
  --p100:     #ede9fe;   /* tint 100 */
  --p200:     #ddd6fe;   /* tint 200 */

  /* Text */
  --tx:       #111827;   /* primary */
  --tm:       #4b5563;   /* muted   */
  --ts:       #9ca3af;   /* subtle  */

  /* Borders */
  --border:   #e5e7eb;

  /* Semantic */
  --green:    #059669;
  --green-bg: #ecfdf5;
  --red:      #dc2626;

  /* Shape */
  --r:        20px;

  /* Shadows */
  --shadow-sm:     0 1px 4px rgba(0,0,0,.05);
  --shadow-card:   0 2px 12px rgba(0,0,0,.06), 0 0 1px rgba(0,0,0,.04);
  --shadow-lg:     0 8px 40px rgba(0,0,0,.10);
  --shadow-purple: 0 8px 32px rgba(124,58,237,.28);
}

/* ── BASE ── */
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--tx);
  font-family: 'Heebo', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── NAVIGATION ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
nav.scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 2px 16px rgba(0,0,0,.05);
}

.nav-logo {
  font-size: 19px; font-weight: 900; color: var(--tx);
  text-decoration: none; display: flex; align-items: center; gap: 5px;
}
.nav-logo em { color: var(--purple); font-style: normal; }

.nav-cta {
  background: var(--purple); color: #fff;
  border: none; border-radius: 10px;
  padding: 9px 22px;
  font-family: 'Heebo', sans-serif; font-size: 13px; font-weight: 800;
  cursor: pointer;
  transition: background .18s, transform .14s, box-shadow .18s;
  text-decoration: none; display: inline-flex; align-items: center;
  box-shadow: 0 3px 14px rgba(124,58,237,.25);
}
.nav-cta:hover {
  background: var(--pd);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(124,58,237,.32);
}

/* ── FOOTER ── */
footer {
  background: #111827; color: #9ca3af;
  border-top: 1px solid #1f2937;
  padding: 36px 32px; text-align: center; font-size: 13px;
}
footer a { color: #9ca3af; text-decoration: none; }
footer a:hover { color: #fff; }

/* ── PRIMARY BUTTON ── */
.btn-main {
  background: var(--purple); color: #fff;
  border: none; border-radius: 14px;
  padding: 16px 36px;
  font-family: 'Heebo', sans-serif; font-size: 17px; font-weight: 900;
  cursor: pointer;
  transition: background .18s, transform .15s, box-shadow .2s;
  box-shadow: var(--shadow-purple);
  text-decoration: none; display: inline-block; line-height: 1;
}
.btn-main:hover {
  background: var(--pd);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(124,58,237,.38);
}
.btn-main:active  { transform: scale(.97); }
.btn-main:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ── SECTION LAYOUT ── */
.section       { padding: 96px 32px; }
.section-inner { max-width: 1100px; margin: 0 auto; }

.section-label {
  font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--purple); margin-bottom: 14px;
}
.section-title {
  font-size: clamp(28px,4.5vw,46px); font-weight: 900;
  line-height: 1.13; letter-spacing: -.02em;
  margin-bottom: 18px; color: var(--tx);
}
.section-title .accent { color: var(--purple); }
.section-sub   { font-size: 16px; color: var(--tm); line-height: 1.7; max-width: 540px; }

/* ── UTILITIES ── */
.hidden { display: none !important; }

/* ── KEYFRAMES ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .4; transform: scale(.75); }
}
@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes bounce {
  0%,100% { transform: rotate(45deg) translateY(0); }
  50%     { transform: rotate(45deg) translateY(5px); }
}
@keyframes up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
  to   { opacity: 1; transform: none; }
}