/* ============================================================
   InHome — Smart Home / Розумні системи
   Design system: invisible engineering. Dark-first, orange accent.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* accent (tweakable) */
  --accent: #FF7A1A;
  --accent-soft: rgba(255, 122, 26, 0.14);
  --accent-glow: rgba(255, 122, 26, 0.35);
  --accent-ink: #1a0e04;

  /* semantic level hues */
  --l1: #36E08A; /* green  — готовий ремонт */
  --l2: #4D8DFF; /* blue   — комплекс */
  --l3: #B07CFF; /* violet — бізнес */

  /* dark surfaces (default) */
  --bg: #0A0C10;
  --bg-2: #0E1116;
  --surface: #14181F;
  --surface-2: #1B212B;
  --surface-3: #232B37;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --ink: #F4F6F9;
  --ink-2: #AEB8C6;
  --ink-3: #6B7686;
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85);
  --shadow-soft: 0 16px 50px -20px rgba(0, 0, 0, 0.6);
  --grid-line: rgba(255, 255, 255, 0.035);

  /* type */
  --display: "Unbounded", system-ui, sans-serif;
  --body: "Manrope", system-ui, -apple-system, sans-serif;

  /* spacing rhythm */
  --section-y: clamp(72px, 9vw, 150px);
  --radius: 18px;
  --radius-lg: 26px;
  --radius-sm: 12px;
  --maxw: 1240px;
}

[data-theme="light"] {
  --bg: #FAFAF7;
  --bg-2: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F3F4F1;
  --surface-3: #ECEEEA;
  --border: rgba(12, 16, 22, 0.10);
  --border-strong: rgba(12, 16, 22, 0.18);
  --ink: #0B0E13;
  --ink-2: #4B5563;
  --ink-3: #8A93A1;
  --shadow: 0 30px 70px -34px rgba(20, 24, 30, 0.30);
  --shadow-soft: 0 14px 40px -22px rgba(20, 24, 30, 0.22);
  --grid-line: rgba(12, 16, 22, 0.045);
  --accent-ink: #fff;
}

/* accent palettes (set via data-accent) */
[data-accent="green"] { --accent: #29D67E; --accent-soft: rgba(41,214,126,.14); --accent-glow: rgba(41,214,126,.34); --accent-ink:#04140b; }
[data-accent="blue"]  { --accent: #3E84FF; --accent-soft: rgba(62,132,255,.16); --accent-glow: rgba(62,132,255,.36); --accent-ink:#fff; }
[data-accent="dual"]  { --accent: #FF7A1A; --accent-soft: rgba(255,122,26,.14); --accent-glow: rgba(255,122,26,.34); --accent-ink:#1a0e04; }

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background .5s ease, color .5s ease;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--section-y) 0; position: relative; }
.eyebrow {
  font-family: var(--body);
  font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--accent); display: inline-block; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; }
.h-display { font-size: clamp(40px, 6.4vw, 86px); line-height: 0.98; letter-spacing: -0.035em; }
.h2 { font-size: clamp(30px, 4vw, 54px); letter-spacing: -0.03em; }
.h3 { font-size: clamp(22px, 2.4vw, 30px); }
.lead { font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-2); line-height: 1.6; max-width: 60ch; }
.muted { color: var(--ink-2); }
.mono-num { font-family: var(--display); font-weight: 700; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  padding: 16px 26px; border-radius: 100px; font-weight: 700; font-size: 16px;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .3s, border-color .3s;
  white-space: nowrap; line-height: 1;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 10px 30px -8px var(--accent-glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -10px var(--accent-glow); }
.btn-ghost {
  background: transparent; color: var(--ink); border: 1.5px solid var(--border-strong);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-lg { padding: 19px 34px; font-size: 17px; }
.btn .arr { transition: transform .3s; }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- Background atmosphere ---------- */
.grid-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 75%);
}
.glow {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; pointer-events: none; z-index: 0;
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); position: relative; overflow: hidden;
}

/* reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}