/* ============================================================
   {{BUSINESS_NAME}} — Premium Agency Stylesheet
   Architecture: Tokens → Reset → Base → Layout → Components → Sections → Utilities → Responsive
   Theme: Neutral dark/light, SaaS-premium. Vanilla CSS only.
   ============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Brand */
  --brand-50:  #eef4ff;
  --brand-100: #d9e6ff;
  --brand-300: #8fb4ff;
  --brand-500: #2f6bff;
  --brand-600: #1e54e6;
  --brand-700: #1840b4;
  --accent-400: #19d3c5;
  --accent-500: #0fb3a6;

  /* Neutrals (light theme defaults) */
  --bg:           #ffffff;
  --bg-soft:      #f6f8fb;
  --bg-elevated:  #ffffff;
  --surface:      #ffffff;
  --border:       #e7ebf2;
  --border-strong:#d4dae6;
  --text:         #0c1320;
  --text-soft:    #475067;
  --text-muted:   #6b7488;
  --text-invert:  #ffffff;

  /* Gradients (used sparingly) */
  --grad-brand: linear-gradient(135deg, #2f6bff 0%, #19d3c5 100%);
  --grad-soft:  linear-gradient(180deg, #f6f8fb 0%, #ffffff 100%);
  --grad-glow:  radial-gradient(60% 60% at 50% 0%, rgba(47,107,255,.16) 0%, rgba(47,107,255,0) 70%);

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xs: .8125rem;   /* 13 */
  --fs-sm: .9375rem;   /* 15 */
  --fs-base: 1rem;     /* 16 */
  --fs-md: 1.125rem;   /* 18 */
  --fs-lg: 1.375rem;   /* 22 */
  --fs-xl: 1.875rem;   /* 30 */
  --fs-2xl: 2.5rem;    /* 40 */
  --fs-3xl: 3.25rem;   /* 52 */
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-base: 1.65;

  /* Spacing scale */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem;
  --sp-9: 6rem; --sp-10: 8rem;

  /* Radii */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(12,19,32,.06);
  --shadow-sm: 0 2px 8px rgba(12,19,32,.06);
  --shadow-md: 0 12px 30px rgba(12,19,32,.08);
  --shadow-lg: 0 28px 60px rgba(12,19,32,.12);
  --ring: 0 0 0 4px rgba(47,107,255,.18);

  /* Layout */
  --container: 1180px;
  --container-narrow: 820px;
  --header-h: 72px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .28s;
}

/* Dark theme */
:root[data-theme="dark"] {
  --bg:           #0b0f17;
  --bg-soft:      #0f1521;
  --bg-elevated:  #131a28;
  --surface:      #131a28;
  --border:       #1f2837;
  --border-strong:#2a3548;
  --text:         #eef2f9;
  --text-soft:    #aeb8cc;
  --text-muted:   #8893a8;
  --text-invert:  #0b0f17;
  --grad-soft:    linear-gradient(180deg, #0f1521 0%, #0b0f17 100%);
  --grad-glow:    radial-gradient(60% 60% at 50% 0%, rgba(47,107,255,.22) 0%, rgba(47,107,255,0) 70%);
  --shadow-md:    0 12px 30px rgba(0,0,0,.4);
  --shadow-lg:    0 28px 60px rgba(0,0,0,.5);
  --shadow-sm:    0 2px 10px rgba(0,0,0,.35);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; padding: 0; }
input,textarea,select { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

/* ---------- 3. BASE TYPOGRAPHY ---------- */
h1,h2,h3,h4 { line-height: var(--lh-tight); font-weight: 700; letter-spacing: -.02em; color: var(--text); }
h1 { font-size: clamp(2.1rem, 5vw, var(--fs-3xl)); }
h2 { font-size: clamp(1.7rem, 3.6vw, var(--fs-2xl)); letter-spacing: -.025em; }
h3 { font-size: var(--fs-lg); }
p  { color: var(--text-soft); }
.lead { font-size: var(--fs-md); color: var(--text-soft); line-height: var(--lh-base); }

/* ---------- 4. LAYOUT ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }
.section { padding-block: clamp(3.5rem, 8vw, var(--sp-9)); }
.section--soft { background: var(--bg-soft); }
.section-head { max-width: 680px; margin: 0 auto clamp(2rem,5vw,3.5rem); text-align: center; }
.section-head.left { margin-inline: 0; text-align: left; }
.section-head p { margin-top: var(--sp-3); }
.grid { display: grid; gap: var(--sp-5); }

/* ---------- 5. COMPONENTS ---------- */

/* Eyebrow / kicker */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-600); background: var(--brand-50);
  padding: .4rem .8rem; border-radius: var(--r-pill); margin-bottom: var(--sp-4);
}
:root[data-theme="dark"] .eyebrow { background: rgba(47,107,255,.12); color: var(--brand-300); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; font-size: var(--fs-sm); line-height: 1;
  padding: .85rem 1.4rem; border-radius: var(--r-pill);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap; will-change: transform;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--grad-brand); color: #fff; box-shadow: 0 8px 22px rgba(47,107,255,.28); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(47,107,255,.36); }
.btn--ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--shadow-xs); }
.btn--ghost:hover { transform: translateY(-2px); border-color: var(--brand-500); color: var(--brand-600); }
.btn--light { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.28); }
.btn--light:hover { background: rgba(255,255,255,.22); }
.btn--lg { padding: 1.05rem 1.8rem; font-size: var(--fs-base); }
.btn--block { width: 100%; }

/* Links with arrow */
.link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--brand-600); }
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* Cards */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }

/* ---------- 6. HEADER ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-xs); }
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: var(--sp-5); }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px; background: var(--grad-brand);
  display: grid; place-items: center; color: #fff; font-weight: 800; box-shadow: 0 6px 16px rgba(47,107,255,.35);
}
.nav-menu { display: flex; align-items: center; gap: var(--sp-2); }
.nav-menu a { padding: .5rem .8rem; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 500; color: var(--text-soft); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.nav-menu a:hover, .nav-menu a[aria-current="page"] { color: var(--text); background: var(--bg-soft); }
.nav-actions { display: flex; align-items: center; gap: var(--sp-3); }
.theme-toggle { width: 40px; height: 40px; border-radius: var(--r-pill); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-soft); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.theme-toggle:hover { background: var(--bg-soft); color: var(--text); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.nav-toggle { display: none; width: 42px; height: 42px; border-radius: var(--r-sm); border: 1px solid var(--border); align-items: center; justify-content: center; }
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--text); position: relative; transition: transform var(--dur) var(--ease); }
.nav-toggle span::before,.nav-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--text); transition: transform var(--dur) var(--ease), opacity var(--dur); }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 7. HERO ---------- */
.hero { position: relative; padding-block: clamp(2.25rem, 5.5vw, 4.25rem); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--grad-glow); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4rem); align-items: stretch; position: relative; }
.hero-copy { align-self: center; }
.hero h1 { margin-top: var(--sp-2); }
.hero .lead { margin-top: var(--sp-4); max-width: 34ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero-trust { display: flex; align-items: center; gap: var(--sp-5); margin-top: var(--sp-6); flex-wrap: wrap; }
.hero-trust .stars { color: #f5a623; letter-spacing: 2px; }
.hero-trust small { display: block; color: var(--text-muted); font-size: var(--fs-xs); }
.hero-stats { display: flex; gap: var(--sp-6); margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--border); }
.hero-stats .num { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.03em; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-stats .label { font-size: var(--fs-sm); color: var(--text-muted); }

.hero-visual { position: relative; display: flex; min-height: 0; }
.hero-visual .frame {
  position: relative; z-index: 1; flex: 1; min-height: 0;
  border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.hero-visual .frame img { width: 100%; height: 100%; object-fit: cover; }

/* Pure-CSS dashboard mockup inside the hero frame */
.mock { width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--bg); }
.mock-bar { display: flex; align-items: center; gap: 6px; padding: .7rem .9rem; border-bottom: 1px solid var(--border); background: var(--bg-soft); }
.mock-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.mock-dot:nth-child(1) { background: #ff5f57; } .mock-dot:nth-child(2) { background: #febc2e; } .mock-dot:nth-child(3) { background: #28c840; }
.mock-url { margin-left: 10px; font-size: 11px; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: .22rem .8rem; }
.mock-body { flex: 1; padding: clamp(1rem, 3vw, 1.6rem); display: flex; flex-direction: column; gap: clamp(.8rem, 2.5vw, 1.2rem); min-height: 0; }
.mock-hero { flex: 1.4; border-radius: var(--r-md); background: var(--grad-brand); position: relative; overflow: hidden; padding: clamp(.9rem, 2.5vw, 1.4rem); display: flex; flex-direction: column; justify-content: center; gap: .55rem; }
.mock-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 120% at 85% 0%, rgba(255,255,255,.28), transparent 60%); }
.mock-chip { width: 64px; height: 16px; border-radius: var(--r-pill); background: rgba(255,255,255,.35); }
.mock-heading { width: 78%; height: 16px; border-radius: var(--r-pill); background: rgba(255,255,255,.9); }
.mock-sub { width: 52%; height: 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.6); }
.mock-lines { display: flex; flex-direction: column; gap: .5rem; }
.mock-lines span { height: 9px; border-radius: var(--r-pill); background: var(--border); }
.mock-lines span:nth-child(1) { width: 70%; } .mock-lines span:nth-child(2) { width: 92%; } .mock-lines span:nth-child(3) { width: 55%; }
.mock-chart { margin-top: auto; display: flex; align-items: flex-end; gap: clamp(.4rem, 1.5vw, .6rem); flex: 1; }
.mock-chart span { flex: 1; border-radius: 6px 6px 0 0; background: var(--grad-brand); opacity: .88; }
.hero-badge {
  position: absolute; z-index: 2; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); padding: .7rem .9rem; display: flex; align-items: center; gap: .6rem;
  font-size: var(--fs-sm); font-weight: 600;
}
.hero-badge .dot { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600); }
:root[data-theme="dark"] .hero-badge .dot { background: rgba(47,107,255,.14); color: var(--brand-300); }
.hero-badge .avatar-stack { display: flex; }
.hero-badge .avatar-stack img { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--surface); object-fit: cover; margin-left: -9px; }
.hero-badge .avatar-stack img:first-child { margin-left: 0; }
.hero-badge--tl { top: 7%; left: -6%; animation: float 6s var(--ease) infinite; }
.hero-badge--br { bottom: 30%; right: -5%; animation: float 6s var(--ease) infinite 1.5s; }
.hero-badge--bl { bottom: 6%; left: -6%; animation: float 6s var(--ease) infinite .8s; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Logo strip */
.logos { display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem,5vw,3.5rem); flex-wrap: wrap; opacity: .75; }
.logos span { font-weight: 700; font-size: var(--fs-md); color: var(--text-muted); letter-spacing: -.01em; }
.logos-label { text-align: center; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); margin-bottom: var(--sp-5); }

/* ---------- 8. SERVICES ---------- */
.services-grid { grid-template-columns: repeat(4, 1fr); }
.service-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.service-icon { width: 52px; height: 52px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600); transition: transform var(--dur) var(--ease); }
:root[data-theme="dark"] .service-icon { background: rgba(47,107,255,.12); color: var(--brand-300); }
.service-card:hover .service-icon { transform: scale(1.08) rotate(-4deg); }
.service-icon svg { width: 26px; height: 26px; }
.service-card h3 { font-size: var(--fs-md); }
.service-card p { font-size: var(--fs-sm); }
.service-card .link-arrow { margin-top: auto; font-size: var(--fs-sm); }

/* ---------- 9. WHY CHOOSE ---------- */
.feature-grid { grid-template-columns: repeat(3, 1fr); }
.feature { display: flex; gap: var(--sp-4); align-items: flex-start; }
.feature-icon { flex: none; width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--grad-brand); color: #fff; box-shadow: 0 8px 18px rgba(47,107,255,.28); }
.feature-icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: var(--fs-md); margin-bottom: var(--sp-1); }
.feature p { font-size: var(--fs-sm); }

/* ---------- 10. TECH STACK ---------- */
.tech-grid { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.tech-badge {
  display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.1rem; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border); font-weight: 600; font-size: var(--fs-sm);
  box-shadow: var(--shadow-xs); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tech-badge:hover { transform: translateY(-3px); border-color: var(--brand-500); }
.tech-badge .glyph { width: 22px; height: 22px; border-radius: 6px; background: var(--grad-brand); display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 800; }

/* ---------- 11. PORTFOLIO ---------- */
.portfolio-grid { grid-template-columns: repeat(3, 1fr); }
.project-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.project-media { aspect-ratio: 16/10; overflow: hidden; position: relative; background: var(--bg-soft); }
.project-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.project-card:hover .project-media img { transform: scale(1.06); }
.project-tag { position: absolute; top: var(--sp-3); left: var(--sp-3); background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--border); border-radius: var(--r-pill); padding: .3rem .7rem; font-size: var(--fs-xs); font-weight: 600; }
.project-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.project-body h3 { font-size: var(--fs-md); }
.project-body p { font-size: var(--fs-sm); }
.project-actions { display: flex; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-2); }
.project-actions .btn { flex: 1; padding: .7rem 1rem; }

/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-bottom: var(--sp-6); }
.filter-btn { padding: .55rem 1.1rem; border-radius: var(--r-pill); border: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); transition: all var(--dur) var(--ease); }
.filter-btn:hover { border-color: var(--brand-500); color: var(--brand-600); }
.filter-btn.is-active { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ---------- 12. TESTIMONIALS ---------- */
.testi-grid { grid-template-columns: repeat(3, 1fr); }
.testi-card { display: flex; flex-direction: column; gap: var(--sp-4); }
.testi-card .stars { color: #f5a623; letter-spacing: 2px; }
.testi-card blockquote { font-size: var(--fs-md); color: var(--text); line-height: var(--lh-snug); font-weight: 500; }
.testi-author { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; }
.testi-author img { width: 46px; height: 46px; border-radius: var(--r-pill); object-fit: cover; }
.testi-author .name { font-weight: 700; font-size: var(--fs-sm); }
.testi-author .role { font-size: var(--fs-xs); color: var(--text-muted); }

/* ---------- 13. PROCESS ---------- */
.process { position: relative; }
.process-track { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-3); position: relative; }
.process-track::before { content: ""; position: absolute; top: 26px; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, var(--brand-500), var(--accent-500)); opacity: .35; z-index: 0; }
.process-step { position: relative; z-index: 1; text-align: center; }
.process-num { width: 54px; height: 54px; margin: 0 auto var(--sp-3); border-radius: var(--r-pill); display: grid; place-items: center; font-weight: 800; background: var(--surface); border: 2px solid var(--brand-500); color: var(--brand-600); box-shadow: var(--shadow-sm); }
.process-step h3 { font-size: var(--fs-sm); }
.process-step p { font-size: var(--fs-xs); margin-top: var(--sp-1); }

/* ---------- 14. BLOG ---------- */
.blog-grid { grid-template-columns: repeat(3, 1fr); }
.post-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.post-media { aspect-ratio: 16/9; overflow: hidden; background: var(--bg-soft); }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post-card:hover .post-media img { transform: scale(1.05); }
.post-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.post-meta { display: flex; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.post-body h3 { font-size: var(--fs-md); }
.post-body p { font-size: var(--fs-sm); }
.post-body .link-arrow { margin-top: auto; font-size: var(--fs-sm); }

/* ---------- 15. FAQ ---------- */
.faq { max-width: var(--container-narrow); margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) 0; text-align: left; font-weight: 600; font-size: var(--fs-md); color: var(--text); }
.faq-q .plus { flex: none; width: 28px; height: 28px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); display: grid; place-items: center; position: relative; transition: background var(--dur) var(--ease); }
.faq-q .plus::before,.faq-q .plus::after { content: ""; position: absolute; background: var(--text); transition: transform var(--dur) var(--ease); }
.faq-q .plus::before { width: 12px; height: 2px; } .faq-q .plus::after { width: 2px; height: 12px; }
.faq-item.is-open .faq-q .plus { background: var(--brand-500); border-color: var(--brand-500); }
.faq-item.is-open .faq-q .plus::before,.faq-item.is-open .faq-q .plus::after { background: #fff; }
.faq-item.is-open .faq-q .plus::after { transform: scaleY(0); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height var(--dur) var(--ease); }
.faq-a-inner { padding-bottom: var(--sp-5); color: var(--text-soft); font-size: var(--fs-sm); }

/* ---------- 16. CTA BAND ---------- */
.cta-band { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--grad-brand); color: #fff; padding: clamp(2.5rem,6vw,4.5rem); text-align: center; }
.cta-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 120% at 50% 0%, rgba(255,255,255,.18), transparent 70%); pointer-events: none; }
.cta-band h2 { color: #fff; position: relative; }
.cta-band p { color: rgba(255,255,255,.85); max-width: 50ch; margin: var(--sp-3) auto 0; position: relative; }
.cta-band .hero-cta { justify-content: center; position: relative; }

/* ---------- 17. CONTACT ---------- */
.contact-grid { grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,5vw,4rem); align-items: start; }
.contact-info .info-item { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.contact-info .info-item:last-child { border-bottom: none; }
.contact-info .info-icon { flex: none; width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600); }
:root[data-theme="dark"] .contact-info .info-icon { background: rgba(47,107,255,.12); color: var(--brand-300); }
.contact-info .info-item strong { display: block; font-size: var(--fs-sm); }
.contact-info .info-item span { font-size: var(--fs-sm); color: var(--text-muted); }

.form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(1.5rem,4vw,2.5rem); box-shadow: var(--shadow-sm); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: var(--sp-4); }
.field label { font-size: var(--fs-sm); font-weight: 600; }
.field label .req { color: #e5484d; }
.field input,.field select,.field textarea {
  padding: .8rem 1rem; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--bg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus { border-color: var(--brand-500); box-shadow: var(--ring); }
.field textarea { resize: vertical; min-height: 120px; }
.form .consent { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-2); }
.form-success { display: none; padding: var(--sp-4); border-radius: var(--r-md); background: rgba(15,179,166,.12); border: 1px solid var(--accent-500); color: var(--accent-500); font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.form-success.show { display: block; }

/* ---------- 18. FOOTER ---------- */
.site-footer { background: var(--bg-soft); border-top: 1px solid var(--border); padding-top: var(--sp-8); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: var(--sp-6); padding-bottom: var(--sp-7); }
.footer-col h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: var(--sp-4); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-col a { font-size: var(--fs-sm); color: var(--text-soft); transition: color var(--dur) var(--ease); }
.footer-col a:hover { color: var(--brand-600); }
.footer-about p { font-size: var(--fs-sm); margin: var(--sp-4) 0; max-width: 38ch; }
.social { display: flex; gap: var(--sp-3); }
.social a { width: 38px; height: 38px; border-radius: var(--r-md); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-soft); transition: all var(--dur) var(--ease); }
.social a:hover { background: var(--grad-brand); color: #fff; border-color: transparent; transform: translateY(-2px); }
.social svg { width: 18px; height: 18px; }
.newsletter { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.newsletter input { flex: 1; padding: .7rem .9rem; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--bg); }
.newsletter button { padding: .7rem 1.1rem; }
.footer-bottom { border-top: 1px solid var(--border); padding-block: var(--sp-5); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-muted); }
.footer-bottom .legal { display: flex; gap: var(--sp-4); }

/* ---------- 19. STICKY MOBILE CTA ---------- */
.mobile-cta { display: none; }

/* ---------- 20. BREADCRUMB / PAGE HERO ---------- */
.page-hero { padding-block: clamp(2.5rem,6vw,4.5rem); background: var(--grad-soft); border-bottom: 1px solid var(--border); position: relative; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: var(--grad-glow); pointer-events: none; }
.breadcrumb { display: flex; gap: .5rem; font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-4); position: relative; }
.breadcrumb a:hover { color: var(--brand-600); }
.page-hero h1 { position: relative; max-width: 18ch; }
.page-hero p { position: relative; max-width: 60ch; margin-top: var(--sp-4); }

/* ---------- 21. ARTICLE (blog detail) ---------- */
.article { max-width: var(--container-narrow); margin-inline: auto; }
.article-hero-img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/8; margin-bottom: var(--sp-6); box-shadow: var(--shadow-md); }
.article-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { margin-top: var(--sp-6); font-size: var(--fs-xl); }
.prose h3 { margin-top: var(--sp-5); }
.prose p,.prose li { color: var(--text-soft); }
.prose ul { list-style: disc; padding-left: 1.4rem; display: flex; flex-direction: column; gap: var(--sp-2); }
.prose blockquote { border-left: 3px solid var(--brand-500); padding-left: var(--sp-4); font-style: italic; color: var(--text); font-size: var(--fs-md); }
.prose a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; }
.toc { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-5); }
.toc h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: var(--sp-3); }
.toc ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.toc a { font-size: var(--fs-sm); color: var(--text-soft); }
.toc a:hover { color: var(--brand-600); }
.author-box { display: flex; gap: var(--sp-4); align-items: center; padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-soft); margin-top: var(--sp-7); }
.author-box img { width: 64px; height: 64px; border-radius: var(--r-pill); object-fit: cover; }

/* ---------- 22. PAGINATION ---------- */
.pagination { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-7); }
.pagination a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-md); border: 1px solid var(--border); font-weight: 600; font-size: var(--fs-sm); transition: all var(--dur) var(--ease); }
.pagination a:hover { border-color: var(--brand-500); color: var(--brand-600); }
.pagination a[aria-current="page"] { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ---------- 23. SCROLL REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 24. UTILITIES ---------- */
.text-center { text-align: center; }
.mt-6 { margin-top: var(--sp-6); }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--brand-600); color: #fff; padding: .7rem 1.2rem; border-radius: var(--r-sm); z-index: 200; }
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- 25. RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 520px; min-height: 0; }
  .hero-visual .frame { aspect-ratio: 4/3; flex: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid, .testi-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .process-track { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
  .process-track::before { display: none; }

  .nav-menu {
    position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch;
    background: var(--bg); border-bottom: 1px solid var(--border); padding: var(--sp-4); gap: var(--sp-1);
    transform: translateY(-120%); transition: transform var(--dur) var(--ease); box-shadow: var(--shadow-md); z-index: 90;
  }
  .nav-menu.is-open { transform: translateY(0); }
  .nav-menu a { padding: .85rem 1rem; font-size: var(--fs-base); }
  .nav-toggle { display: inline-flex; }
  .nav .btn--primary { display: none; }
}
@media (max-width: 600px) {
  .services-grid, .feature-grid, .portfolio-grid, .testi-grid, .blog-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
  .form-row { grid-template-columns: 1fr; }
  .process-track { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { gap: var(--sp-5); }
  .hero-badge--tl { left: 2%; } .hero-badge--br { right: 2%; bottom: 22%; }
  .hero-badge--bl { display: none; } /* keep mobile uncluttered */
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .mobile-cta {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 95;
    padding: var(--sp-3); gap: var(--sp-3); background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(12px); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(0,0,0,.08);
  }
  .mobile-cta .btn { flex: 1; }
  body { padding-bottom: 76px; }
}

/* ============================================================
   ADD-ONS — Header phone, Logo carousel, Case study
   ============================================================ */

/* ---------- Header phone (always-visible attention CTA) ---------- */
.nav-phone {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .45rem .9rem; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nav-phone:hover { border-color: var(--brand-500); transform: translateY(-1px); }
.nav-phone .ph-ico {
  flex: none; width: 30px; height: 30px; border-radius: var(--r-pill);
  display: grid; place-items: center; color: #fff; background: var(--grad-brand);
  box-shadow: 0 4px 12px rgba(47,107,255,.35); position: relative;
}
.nav-phone .ph-ico svg { width: 15px; height: 15px; }
.nav-phone .ph-ico::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(47,107,255,.45); animation: ph-pulse 2.4s var(--ease) infinite;
}
@keyframes ph-pulse { 0% { box-shadow: 0 0 0 0 rgba(47,107,255,.45); } 70%,100% { box-shadow: 0 0 0 10px rgba(47,107,255,0); } }
.nav-phone .ph-text { display: flex; flex-direction: column; line-height: 1.15; }
.nav-phone .ph-text small { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 600; }
.nav-phone .ph-text strong { font-size: var(--fs-sm); color: var(--text); font-weight: 700; letter-spacing: -.01em; }

/* ---------- Logo carousel (auto-scroll marquee) ---------- */
.logo-marquee { position: relative; overflow: hidden; padding-block: var(--sp-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.logo-track { display: flex; align-items: center; gap: clamp(2.2rem, 6vw, 5rem); width: max-content; animation: logo-marquee 34s linear infinite; }
.logo-marquee:hover .logo-track, .logo-marquee:focus-within .logo-track { animation-play-state: paused; }
.logo-item { flex: none; display: grid; place-items: center; height: 40px; color: var(--text-muted); opacity: .6; transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease); }
.logo-item:hover { opacity: 1; color: var(--text); }
.logo-item svg { height: 26px; width: auto; }
@keyframes logo-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; } }

/* ---------- Case study ---------- */
.cs-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); padding: var(--sp-5) 0; border-block: 1px solid var(--border); margin-block: var(--sp-6); }
.cs-meta .label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 600; }
.cs-meta .val { font-size: var(--fs-md); font-weight: 700; margin-top: .25rem; }
.cs-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.cs-metric { text-align: center; padding: var(--sp-6) var(--sp-4); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-xs); }
.cs-metric .num { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.03em; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-metric .desc { font-size: var(--fs-sm); color: var(--text-soft); margin-top: var(--sp-2); }
.cs-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.cs-gallery img { width: 100%; border-radius: var(--r-md); border: 1px solid var(--border); }

@media (max-width: 900px) {
  .cs-meta { grid-template-columns: repeat(2, 1fr); }
  .cs-metrics { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .nav-phone { padding: .35rem; }
  .nav-phone .ph-text { display: none; }
  .cs-gallery { grid-template-columns: 1fr; }
}

/* ---------- Carousel (testimonials, projects) ---------- */
.carousel { position: relative; }
.carousel-viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: var(--sp-2) 2px var(--sp-4);
}
.carousel-viewport::-webkit-scrollbar { display: none; }
.carousel-track { display: flex; gap: var(--sp-5); }
.carousel-slide { flex: 0 0 calc((100% - 2 * var(--sp-5)) / 3); scroll-snap-align: start; }
.carousel-slide > .card { height: 100%; }
@media (prefers-reduced-motion: reduce) { .carousel-viewport { scroll-behavior: auto; } }

.carousel-controls { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-3); }
.carousel-btn {
  width: 46px; height: 46px; flex: none; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: var(--surface);
  display: grid; place-items: center; color: var(--text); box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.carousel-btn:hover:not(:disabled) { border-color: var(--brand-500); color: var(--brand-600); transform: translateY(-2px); }
.carousel-btn:disabled { opacity: .3; cursor: not-allowed; }
.carousel-btn svg { width: 20px; height: 20px; }
.carousel-dots { display: flex; align-items: center; gap: var(--sp-2); }
.carousel-dot { width: 9px; height: 9px; padding: 0; border-radius: var(--r-pill); background: var(--border-strong); transition: width var(--dur) var(--ease), background var(--dur) var(--ease); }
.carousel-dot.is-active { width: 26px; background: var(--grad-brand); }

@media (max-width: 900px) { .carousel-slide { flex-basis: calc((100% - var(--sp-5)) / 2); } }
@media (max-width: 600px) { .carousel-slide { flex-basis: 100%; } }