/* ==========================================================
   AGILIFY — Master Design System
   Extracted from actual brand assets (logo PNGs)
   
   Brand Colors (eyedropped from real logo):
   - Orange Primary:  #E8622A  (bottom-left block)
   - Sienna:          #B85C38  (top-center block)
   - Brown:           #8B4A2E  (bottom-right block)
   - Teal Accent:     #00C9A7  (growth dot)
   - Navy Text:       #1B2845  (wordmark on light bg)
   - Dark BG:         #0D0F14  (dark background)
   ========================================================== */

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  /* Brand palette */
  --orange:        #E8622A;
  --orange-light:  #F07840;
  --orange-dark:   #C4511F;
  --sienna:        #B85C38;
  --brown:         #8B4A2E;
  --teal:          #00C9A7;
  --teal-dark:     #00A88C;
  --navy:          #1B2845;
  --navy-mid:      #243558;

  /* Dark theme surfaces */
  --bg-0:    #0D0F14;
  --bg-1:    #131620;
  --bg-2:    #191D2B;
  --bg-3:    #1F2436;
  --border:  #252B3D;
  --border-subtle: #1C2131;

  /* Text */
  --text-primary:   #F0F2F8;
  --text-secondary: #8B93A8;
  --text-muted:     #4F5874;
  --text-inverse:   #1B2845;

  /* Semantic */
  --success: #22C55E;
  --warning: #F59E0B;
  --danger:  #EF4444;

  /* Radii */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill:9999px;

  /* Shadows */
  --shadow-card: 0 2px 16px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-glow: 0 0 60px rgba(232,98,42,.18);
  --shadow-teal: 0 0 40px rgba(0,201,167,.14);

  /* Transitions */
  --ease:     cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --t1: .15s;
  --t2: .25s;
  --t3: .4s;

  /* Type scale */
  --text-xs:  .75rem;
  --text-sm:  .875rem;
  --text-md:  1rem;
  --text-lg:  1.125rem;
  --text-xl:  1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;
  --text-6xl: 4.5rem;

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px;--sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --sp-32: 128px;

  /* Layout */
  --max-w: 1200px;
  --max-w-prose: 680px;
}

/* ─── RESET ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--bg-0);
  overflow-x: hidden;
}
img, svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
ul { list-style:none; }
input,textarea,select { font-family:inherit; }

/* Scrollbar */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg-0); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:var(--orange); }

/* Selection */
::selection { background:rgba(232,98,42,.35); color:#fff; }

/* ─── TYPOGRAPHY ─────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--text-primary);
}
h1 { font-size: clamp(2.5rem, 6vw, var(--text-6xl)); }
h2 { font-size: clamp(1.875rem, 4vw, var(--text-4xl)); }
h3 { font-size: clamp(1.25rem, 2.5vw, var(--text-2xl)); }
h4 { font-size: var(--text-xl); font-weight:700; }
h5 { font-size: var(--text-lg); font-weight:700; }
p { color: var(--text-secondary); line-height:1.75; }

.display {
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -.04em;
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange);
}

/* Gradient text */
.grad {
  background: linear-gradient(135deg, var(--orange) 0%, #F5A067 60%, var(--teal) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── LAYOUT ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}
.container--narrow {
  max-width: var(--max-w-prose);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

section { position:relative; }

.section-pad { padding-block: var(--sp-32); }
.section-pad--sm { padding-block: var(--sp-20); }

/* ─── LOGO MARK ──────────────────────────────────────────── */
/* CSS-rendered logomark faithful to actual PNGs */
.logomark {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  width: 34px;
  height: 34px;
  position: relative;
  flex-shrink: 0;
}
/* Top block spans both columns, centered — matches brand identity */
.logomark__top    { grid-column:1/3; grid-row:1; justify-self:center; width:calc(50% - 1.5px); background:rgba(255,107,53,0.85); border-radius:5px; }
.logomark__bottom-left  { grid-column:1; grid-row:2; background:linear-gradient(135deg,#FF6B35,#FF8F5E); border-radius:5px; }
.logomark__bottom-right { grid-column:2; grid-row:2; background:rgba(255,107,53,0.7); border-radius:5px; }
.logomark__dot {
  position:absolute;
  top: 0; right: 3px;
  width: 5px; height: 5px;
  background: var(--teal);
  border-radius: var(--r-xs);
}
/* Small variant */
.logomark--sm { width:24px; height:24px; gap:2px; }
.logomark--sm .logomark__top    { width:calc(50% - 1px); border-radius:4px; }
.logomark--sm .logomark__bottom-left  { border-radius:4px; }
.logomark--sm .logomark__bottom-right { border-radius:4px; }
.logomark--sm .logomark__dot { width:4px;height:4px;top:0;right:2px; }
/* Large variant */
.logomark--lg { width:56px; height:56px; gap:5px; }
.logomark--lg .logomark__top    { width:calc(50% - 2.5px); border-radius:9px; }
.logomark--lg .logomark__bottom-left  { border-radius:9px; }
.logomark--lg .logomark__bottom-right { border-radius:9px; }
.logomark--lg .logomark__dot { width:8px;height:8px;top:0;right:5px; }
/* Hero variant */
.logomark--xl { width:80px; height:80px; gap:7px; }
.logomark--xl .logomark__top    { width:calc(50% - 3.5px); border-radius:13px; }
.logomark--xl .logomark__bottom-left  { border-radius:13px; }
.logomark--xl .logomark__bottom-right { border-radius:13px; }
.logomark--xl .logomark__dot { width:11px;height:11px;top:0;right:8px;border-radius:3px; }

.logo-wordmark {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.logo-wordmark .name {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--text-primary);
}

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: var(--text-sm);
  border-radius: var(--r-sm);
  padding: 11px 22px;
  transition: all var(--t2) var(--ease);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content:'';
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0);
  transition: background var(--t1);
}
.btn:hover::after { background:rgba(255,255,255,.06); }

/* Primary */
.btn--primary {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 4px 20px rgba(232,98,42,.35);
}
.btn--primary:hover {
  background: var(--orange-light);
  box-shadow: 0 6px 28px rgba(232,98,42,.5);
  transform: translateY(-1px);
}
.btn--primary:active { transform:translateY(0); }

/* Secondary */
.btn--secondary {
  background: rgba(255,255,255,.06);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn--secondary:hover {
  border-color: rgba(232,98,42,.5);
  background: rgba(232,98,42,.06);
}

/* Ghost */
.btn--ghost {
  color: var(--text-secondary);
  padding: 10px 18px;
}
.btn--ghost:hover { color: var(--text-primary); }

/* Teal */
.btn--teal {
  background: var(--teal);
  color: var(--bg-0);
  font-weight: 800;
}
.btn--teal:hover { background: #1DDDB8; transform:translateY(-1px); }

/* Sizes */
.btn--lg { font-size: var(--text-md); padding: 14px 30px; border-radius: var(--r-md); }
.btn--sm { font-size: var(--text-xs); padding: 8px 14px; border-radius: var(--r-xs); }

/* ─── BADGES / TAGS ──────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  border: 1px solid;
}
.badge--orange {
  color: var(--orange);
  border-color: rgba(232,98,42,.3);
  background: rgba(232,98,42,.08);
}
.badge--teal {
  color: var(--teal);
  border-color: rgba(0,201,167,.3);
  background: rgba(0,201,167,.08);
}
.badge--navy {
  color: #7BA0D4;
  border-color: rgba(123,160,212,.25);
  background: rgba(123,160,212,.06);
}
.badge--live::before {
  content:'';
  width:6px; height:6px;
  background:var(--teal);
  border-radius:50%;
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.4; transform:scale(.7); }
}

/* ─── PILL LABEL ──────────────────────────────────────────── */
.pill-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--sp-5);
}
.pill-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
}

/* ─── CARDS ──────────────────────────────────────────────── */
.card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  transition: all var(--t2) var(--ease);
  position: relative;
  overflow: hidden;
}
.card:hover {
  border-color: rgba(232,98,42,.25);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(232,98,42,.12);
}
.card__glow {
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(232,98,42,.15) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t2);
}
.card:hover .card__glow { opacity:1; }

/* Feature card */
.feature-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  transition: all var(--t3) var(--ease);
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(ellipse at top left, rgba(232,98,42,.07) 0%, transparent 60%);
  opacity:0;
  transition: opacity var(--t3);
}
.feature-card:hover { border-color:rgba(232,98,42,.3); box-shadow:var(--shadow-glow); }
.feature-card:hover::before { opacity:1; }

.feature-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  background: rgba(232,98,42,.12);
  border: 1px solid rgba(232,98,42,.2);
  display: flex; align-items:center; justify-content:center;
  margin-bottom: var(--sp-5);
}
.feature-card__icon svg { width:22px; height:22px; color:var(--orange); }

/* ─── NAVIGATION ─────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background var(--t2), backdrop-filter var(--t2), border-color var(--t2);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(13,15,20,.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--border-subtle);
}
.nav__inner {
  display: flex;
  align-items: center;
  height: 64px;
  gap: var(--sp-8);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: 1;
}
.nav__link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: var(--r-xs);
  transition: color var(--t1), background var(--t1);
}
.nav__link:hover { color:var(--text-primary); background:rgba(255,255,255,.05); }
.nav__link.active { color:var(--orange); }
.nav__actions { display:flex; align-items:center; gap:var(--sp-3); margin-left:auto; }

/* Mobile menu */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  margin-left: auto;
}
.nav__hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all var(--t2);
}
.nav__mobile {
  display: none;
  position: fixed;
  top: 64px; left: 0; right: 0;
  background: rgba(13,15,20,.97);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-6);
  z-index: 999;
}
.nav__mobile.open { display:block; }
.nav__mobile .nav__link { display:block; padding:12px 8px; border-bottom:1px solid var(--border-subtle); }
.nav__mobile .btn { width:100%; margin-top:var(--sp-4); }

/* ─── HERO ───────────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 80px;
  overflow: hidden;
}

/* Grid noise background */
.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(232,98,42,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,98,42,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black 20%, transparent 80%);
}
.hero__glow-1 {
  position: absolute;
  top: -15%; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse, rgba(232,98,42,.12) 0%, transparent 65%);
}
.hero__glow-2 {
  position: absolute;
  bottom: 0; right: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(ellipse, rgba(0,201,167,.07) 0%, transparent 65%);
}

/* ─── DASHBOARD MOCKUP ───────────────────────────────────── */
.dashboard-frame {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);
  position: relative;
}
.dashboard-frame::before {
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,98,42,.5),rgba(0,201,167,.3),transparent);
}
.frame-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.frame-dots { display:flex; gap:6px; }
.frame-dots span {
  width:10px; height:10px; border-radius:50%;
}
.frame-dots span:nth-child(1) { background:#FF5F57; }
.frame-dots span:nth-child(2) { background:#FFBD2E; }
.frame-dots span:nth-child(3) { background:#28C840; }
.frame-url {
  flex:1; text-align:center;
  font-size:11px; color:var(--text-muted);
  background:var(--bg-0);
  padding:4px 12px;
  border-radius:var(--r-xs);
  border:1px solid var(--border);
}
.frame-body { display:flex; height:320px; }

.frame-sidebar {
  width: 160px;
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex-shrink: 0;
}
.frame-sidebar .logo-row {
  display:flex; align-items:center; gap:var(--sp-2);
  padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--border);
  margin-bottom:var(--sp-2);
}
.frame-sidebar .logo-row span { font-size:12px; font-weight:800; }
.sidebar-item {
  display:flex; align-items:center; gap:6px;
  font-size:11px; color:var(--text-muted);
  padding:6px 8px; border-radius:var(--r-xs);
  transition:all var(--t1);
}
.sidebar-item svg { width:13px;height:13px; flex-shrink:0; }
.sidebar-item.active { background:rgba(232,98,42,.12); color:var(--orange); font-weight:600; }
.sidebar-item:not(.active):hover { background:rgba(255,255,255,.04); color:var(--text-primary); }

.frame-content {
  flex:1;
  padding: var(--sp-4) var(--sp-5);
  overflow: hidden;
}
.frame-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:var(--sp-4);
}
.frame-header h4 { font-size:13px; font-weight:700; }
.frame-header span { font-size:10px; color:var(--text-muted); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.stat-box {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
}
.stat-box__label { font-size:9px; color:var(--text-muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:.08em; }
.stat-box__value { font-size:16px; font-weight:800; color:var(--text-primary); }
.stat-box__change { font-size:9px; font-weight:600; margin-top:3px; }
.stat-box__change.up   { color:var(--teal); }
.stat-box__change.down { color:var(--danger); }
.stat-box.highlight { border-color:rgba(232,98,42,.3); background:rgba(232,98,42,.07); }
.stat-box.highlight .stat-box__value { color:var(--orange); }

.mini-chart { height:60px; display:flex; align-items:flex-end; gap:3px; margin-top:var(--sp-3); }
.mini-chart .bar {
  flex:1; background:rgba(232,98,42,.25);
  border-radius:3px 3px 0 0;
  transition:background var(--t1);
}
.mini-chart .bar:hover,
.mini-chart .bar.active { background:var(--orange); }

/* ─── SECTION HEADER ─────────────────────────────────────── */
.section-header { margin-bottom:var(--sp-16); }
.section-header--center { text-align:center; }
.section-header--center .section-sub {
  margin-inline:auto;
}
.section-header h2 { margin-bottom:var(--sp-4); }
.section-sub {
  max-width:520px;
  font-size:var(--text-lg);
  color:var(--text-secondary);
  line-height:1.7;
}

/* ─── FEATURE GRID ───────────────────────────────────────── */
.feature-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-5); }
.feature-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.feature-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); }

/* ─── PRODUCT CARD ───────────────────────────────────────── */
.product-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-10) var(--sp-8);
  transition: all var(--t2) var(--ease);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.product-card::after {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,var(--orange),var(--teal));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--t3) var(--ease);
  border-radius:0 0 var(--r-xl) var(--r-xl);
}
.product-card:hover {
  border-color:rgba(232,98,42,.25);
  transform:translateY(-4px);
  box-shadow: var(--shadow-glow), var(--shadow-card);
}
.product-card:hover::after { transform:scaleX(1); }

.product-card__icon {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  display:flex; align-items:center; justify-content:center;
  font-size: 24px;
  position: relative;
}
.product-card__number {
  position: absolute;
  top: -4px; right: -4px;
  width: 18px; height: 18px;
  background: var(--orange);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 2px solid var(--bg-0);
}
.product-card h4 { color:var(--text-primary); margin-bottom:4px; }
.product-card p  { font-size:var(--text-sm); color:var(--text-secondary); }
.product-card__link {
  font-size:var(--text-sm);
  font-weight:700;
  color:var(--orange);
  display:flex; align-items:center; gap:6px;
  margin-top:auto;
  transition:gap var(--t1);
}
.product-card:hover .product-card__link { gap:10px; }

/* ─── SOLUTION CARD ──────────────────────────────────────── */
.solution-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow:hidden;
  transition:all var(--t2) var(--ease);
  display:flex;
  flex-direction:column;
}
.solution-card:hover { border-color:rgba(232,98,42,.25); transform:translateY(-3px); }
.solution-card__head {
  background: var(--bg-2);
  padding:var(--sp-8);
  display:flex; align-items:center; gap:var(--sp-4);
  border-bottom:1px solid var(--border);
}
.solution-card__emoji {
  width:40px; height:40px; flex-shrink:0;
  background:rgba(232,98,42,.12);
  border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  color:var(--orange);
}
.solution-card__emoji svg { width:22px; height:22px; }
.solution-card__body { padding:var(--sp-6); flex:1; }
.solution-card__tags { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4); }
.solution-tag {
  font-size:11px; font-weight:600;
  color:var(--text-muted);
  background:var(--bg-2);
  border:1px solid var(--border);
  padding:3px 10px;
  border-radius:var(--r-pill);
}

/* ─── ARTICLE CARD ───────────────────────────────────────── */
.article-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all var(--t2) var(--ease);
  cursor: pointer;
}
.article-card:hover { border-color:rgba(232,98,42,.25); transform:translateY(-3px); }
.article-card__thumb {
  height: 180px;
  display:flex; align-items:center; justify-content:center;
  font-size:48px;
  position:relative;
}
.article-card__body { padding:var(--sp-6); flex:1; display:flex; flex-direction:column; }
.article-card__category {
  font-size:var(--text-xs);
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:var(--sp-2);
}
.article-card h4 { font-size:var(--text-md); font-weight:700; margin-bottom:var(--sp-2); color:var(--text-primary); line-height:1.35; }
.article-card p  { font-size:var(--text-sm); color:var(--text-secondary); flex:1; }
.article-card__meta {
  display:flex; align-items:center; gap:var(--sp-3);
  margin-top:var(--sp-4);
  font-size:11px; color:var(--text-muted);
}
.article-card__meta::before {
  content:'';
  display:block;
  height:1px;
  background:var(--border);
  flex:1;
}

/* ─── TESTIMONIAL ────────────────────────────────────────── */
.testimonial {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  position: relative;
}
.testimonial::before {
  content: '\201C';
  position: absolute;
  top: var(--sp-5); right: var(--sp-6);
  font-size: 5rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(232,98,42,.12);
}
.testimonial p { font-size:var(--text-md); color:var(--text-primary); font-style:italic; line-height:1.7; }
.testimonial__author {
  display:flex; align-items:center; gap:var(--sp-3);
  margin-top:var(--sp-5);
}
.testimonial__avatar {
  width:40px; height:40px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; color:#fff;
  flex-shrink:0;
}
.testimonial__name { font-weight:700; font-size:var(--text-sm); color:var(--text-primary); }
.testimonial__role { font-size:var(--text-xs); color:var(--text-muted); }

/* ─── STATS ──────────────────────────────────────────────── */
.stat-highlight {
  text-align: center;
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 140px;
}
.stat-highlight__number {
  font-size: 3.5rem;
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--text-primary);
  line-height: 1;
}
.stat-highlight__number .unit { color:var(--orange); font-size:0.85em; }
.stat-highlight__label { font-size:var(--text-sm); color:var(--text-secondary); margin-top:var(--sp-2); }

/* ─── DIVIDERS ───────────────────────────────────────────── */
.divider { height:1px; background:var(--border); margin-block:0; }
.divider--fade {
  height:1px;
  background:linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
}

/* ─── TRUST BAR ──────────────────────────────────────────── */
.trust-bar {
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:var(--sp-8);
}
.trust-item {
  font-size:var(--text-sm); font-weight:700;
  color:var(--text-muted);
  letter-spacing:.05em;
  transition:color var(--t1);
}
.trust-item:hover { color:var(--text-secondary); }

/* ─── PROCESS STEPS ──────────────────────────────────────── */
.process-step {
  display:flex; gap:var(--sp-5); align-items:flex-start;
}
.process-step__num {
  flex-shrink:0;
  width:40px; height:40px;
  border-radius:50%;
  background:rgba(232,98,42,.1);
  border:1px solid rgba(232,98,42,.25);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--text-sm); font-weight:800; color:var(--orange);
}

/* ─── FORM ELEMENTS ──────────────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:var(--sp-2); }
.form-label {
  font-size:var(--text-sm); font-weight:600; color:var(--text-secondary);
}
.form-input {
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:11px 14px;
  font-size:var(--text-sm);
  color:var(--text-primary);
  outline:none;
  transition:border-color var(--t1), box-shadow var(--t1);
  width:100%;
}
.form-input::placeholder { color:var(--text-muted); }
.form-input:focus {
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(232,98,42,.12);
}
.form-input.error { border-color:var(--danger); }
textarea.form-input { resize:vertical; min-height:120px; }
select.form-input { cursor:pointer; }

/* ─── CTA SECTION ────────────────────────────────────────── */
.cta-section {
  background: linear-gradient(135deg, rgba(232,98,42,.12) 0%, rgba(0,201,167,.06) 100%);
  border: 1px solid rgba(232,98,42,.2);
  border-radius: var(--r-xl);
  padding: var(--sp-20) var(--sp-12);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content:'';
  position:absolute;
  top:-60px; left:50%;
  transform:translateX(-50%);
  width:400px; height:200px;
  background:radial-gradient(ellipse,rgba(232,98,42,.15) 0%,transparent 70%);
}
.cta-section h2 { margin-bottom:var(--sp-4); }
.cta-section p { max-width:480px; margin-inline:auto; margin-bottom:var(--sp-8); }
.cta-actions { display:flex; align-items:center; justify-content:center; gap:var(--sp-4); flex-wrap:wrap; }

/* ─── FOOTER ─────────────────────────────────────────────── */
.footer {
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  padding-top: var(--sp-20);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: var(--sp-12);
  padding-bottom: var(--sp-16);
}
.footer__brand p {
  font-size:var(--text-sm);
  color:var(--text-muted);
  margin-top:var(--sp-4);
  max-width:220px;
  line-height:1.7;
}
.footer__col h6 {
  font-size:var(--text-xs);
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:var(--sp-5);
}
.footer__link {
  display:block;
  font-size:var(--text-sm);
  color:var(--text-secondary);
  padding:var(--sp-1) 0;
  transition:color var(--t1);
}
.footer__link:hover { color:var(--orange); }
.footer__bottom {
  border-top:1px solid var(--border);
  padding:var(--sp-6) 0;
  display:flex; align-items:center; justify-content:space-between;
  font-size:var(--text-xs); color:var(--text-muted);
}
.footer__socials { display:flex; gap:var(--sp-3); }
.footer__social {
  width:32px; height:32px;
  border-radius:var(--r-xs);
  background:var(--bg-2);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:12px;
  color:var(--text-muted);
  transition:all var(--t1);
}
.footer__social:hover { border-color:var(--orange); color:var(--orange); }

/* ─── CONTACT SOCIAL CHIPS ───────────────────────────────── */
.social-chip {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--text-secondary);
  padding:8px 14px;
  background:var(--bg-1);
  border:1px solid var(--border);
  border-radius:var(--r-xs);
  transition:border-color var(--t1);
  text-decoration:none;
}
.social-chip:hover { border-color:rgba(232,98,42,.3); }

/* ─── PAGE HERO (inner pages) ────────────────────────────── */
.page-hero {
  padding-top: 140px;
  padding-bottom: var(--sp-20);
  position:relative;
  overflow:hidden;
}
.page-hero__bg {
  position:absolute;
  inset:0;
  pointer-events:none;
}
.page-hero__glow {
  position:absolute;
  top:-20%; left:50%;
  transform:translateX(-50%);
  width:800px; height:500px;
  background:radial-gradient(ellipse,rgba(232,98,42,.1) 0%,transparent 65%);
}
.page-hero__grid {
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(232,98,42,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(232,98,42,.03) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black 20%,transparent 80%);
}

/* ─── FILTER TABS ────────────────────────────────────────── */
.filter-tabs {
  display:flex; gap:var(--sp-2);
  flex-wrap:wrap;
}
.filter-tab {
  font-size:var(--text-sm); font-weight:600;
  color:var(--text-secondary);
  padding:7px 16px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--bg-2);
  cursor:pointer;
  transition:all var(--t1);
}
.filter-tab:hover { border-color:rgba(232,98,42,.3); color:var(--text-primary); }
.filter-tab.active {
  background:rgba(232,98,42,.12);
  border-color:rgba(232,98,42,.35);
  color:var(--orange);
}

/* ─── CONTACT ────────────────────────────────────────────── */
.contact-method {
  display:flex; align-items:flex-start; gap:var(--sp-4);
  padding:var(--sp-5);
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  transition:border-color var(--t1);
}
.contact-method:hover { border-color:rgba(232,98,42,.25); }
.contact-method__icon {
  width:40px;height:40px;
  border-radius:var(--r-sm);
  background:rgba(232,98,42,.1);
  border:1px solid rgba(232,98,42,.2);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  font-size:18px;
}
.contact-method__label { font-size:var(--text-xs); color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.contact-method__value { font-size:var(--text-sm); color:var(--text-primary); font-weight:600; margin-top:2px; }

/* ─── ANIMATIONS ─────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(.96); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes float {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-8px); }
}

.animate-fade-up { animation:fadeUp var(--t3) var(--ease) both; }
.animate-scale-in { animation:scaleIn var(--t3) var(--ease) both; }

[data-animate] {
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
[data-animate].in-view { opacity:1; transform:none; }

/* Stagger delays */
[data-delay="1"] { transition-delay:.1s; }
[data-delay="2"] { transition-delay:.2s; }
[data-delay="3"] { transition-delay:.3s; }
[data-delay="4"] { transition-delay:.4s; }
[data-delay="5"] { transition-delay:.5s; }
[data-delay="6"] { transition-delay:.6s; }

/* ─── UTILITY ────────────────────────────────────────────── */
.text-orange  { color:var(--orange); }
.text-teal    { color:var(--teal); }
.text-muted   { color:var(--text-muted); }
.text-secondary { color:var(--text-secondary); }
.text-center  { text-align:center; }
.flex         { display:flex; }
.flex-center  { display:flex; align-items:center; justify-content:center; }
.gap-3        { gap:var(--sp-3); }
.gap-4        { gap:var(--sp-4); }
.gap-5        { gap:var(--sp-5); }
.mt-2         { margin-top:var(--sp-2); }
.mt-3         { margin-top:var(--sp-3); }
.mt-4         { margin-top:var(--sp-4); }
.mt-6         { margin-top:var(--sp-6); }
.mt-8         { margin-top:var(--sp-8); }
.mb-6         { margin-bottom:var(--sp-6); }

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .feature-grid-3 { grid-template-columns:1fr 1fr; }
  .feature-grid-4 { grid-template-columns:1fr 1fr; }
  .footer__grid { grid-template-columns:1fr 1fr 1fr; gap:var(--sp-8); }
  .footer__brand { grid-column:1/-1; }
}

@media (max-width: 768px) {
  .nav__links, .nav__actions { display:none; }
  .nav__hamburger { display:flex; }
  .feature-grid-2 { grid-template-columns:1fr; }
  .feature-grid-3 { grid-template-columns:1fr; }
  .feature-grid-4 { grid-template-columns:1fr 1fr; }
  .footer__grid { grid-template-columns:1fr 1fr; }
  .footer__brand { grid-column:1/-1; }
  .cta-section { padding:var(--sp-12) var(--sp-6); }
  .frame-sidebar { display:none; }
  .stat-row { grid-template-columns:1fr 1fr; }
  h1 { font-size:2.5rem; }
  .display { font-size:2.75rem; }
  .section-pad { padding-block:var(--sp-20); }
  .footer__grid { grid-template-columns:1fr; }
}

@media (max-width: 480px) {
  .feature-grid-4 { grid-template-columns:1fr; }
  .footer__grid { grid-template-columns:1fr; }
}