/* ==========================================================================
   creativjar. — Design system
   One family (Plus Jakarta Sans), a near-black/paper base, four signature
   accent hues pulled from the brand mark, used sparingly as a single burst
   rather than scattered everywhere.
   ========================================================================== */

:root{
  /* ---- Color: base ---- */
  --ink: #0B0B10;
  --ink-soft: #16161D;
  --paper: #FBFAF8;
  --paper-dim: #F1F0EA;
  --muted: #63626C;
  --muted-on-dark: #A7A6B3;
  --line: #E3E1D9;
  --line-on-dark: #29282F;
  --white: #FFFFFF;

  /* ---- Color: signature accents (from the brand mark) ---- */
  --pink: #FF2E7E;
  --pink-deep: #E01468;
  --blue: #3E6DFF;
  --amber: #FFB800;
  --violet: #8B3EFF;

  --accent: var(--pink);
  --accent-ink: #ffffff;

  /* ---- Elevation / focus ---- */
  --ring: 0 0 0 3px rgba(255,46,126,0.35);
  --hair: 1px solid var(--line);
  --hair-dark: 1px solid var(--line-on-dark);

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

  /* ---- Type ---- */
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Layout ---- */
  --wrap: 1200px;
  --wrap-narrow: 760px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(64px, 10vw, 128px);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.16,.84,.44,1);
  --fast: 180ms;
  --med: 420ms;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body{
  margin: 0;
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}
img, svg, video, canvas{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,p, figure, blockquote{ margin:0; }
button, input, textarea, select{ font-family: inherit; font-size: inherit; color: inherit; }
button{ cursor:pointer; background:none; border:none; }
:focus-visible{ outline: none; box-shadow: var(--ring); border-radius: 6px; }
::selection{ background: var(--pink); color:#fff; }

/* ==========================================================================
   Typography scale — sized with intent, not uniform. Play with contrast the
   way a large display headline sits next to small, quiet supporting copy.
   ========================================================================== */
.h-display{
  font-size: clamp(2.75rem, 6.4vw, 6.4rem);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.h-xl{
  font-size: clamp(2.25rem, 4.6vw, 4.25rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.h-lg{
  font-size: clamp(1.85rem, 3.2vw, 2.85rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.h-md{
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.h-sm{
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.lede{
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.5;
  font-weight: 450;
  color: var(--muted);
}
.body-lg{ font-size: 1.125rem; line-height: 1.65; }
.body{ font-size: 1rem; line-height: 1.65; color: var(--ink); }
.small{ font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.micro{ font-size: 0.75rem; line-height: 1.4; color: var(--muted); }
.label{
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--muted);
}
strong{ font-weight: 700; }
.on-dark, section.dark, .dark{ color: var(--white); }
.on-dark .lede, .on-dark .small, .on-dark .label, .on-dark .micro,
.dark .lede, .dark .small, .dark .label, .dark .micro,
section.dark .lede, section.dark .small, section.dark .label, section.dark .micro{ color: var(--muted-on-dark); }
.on-dark .breadcrumb, .on-dark .breadcrumb a, .dark .breadcrumb, .dark .breadcrumb a{ color: var(--muted-on-dark); }
.on-dark .breadcrumb .current, .dark .breadcrumb .current{ color: var(--white); }

.text-grad{
  background: linear-gradient(100deg, var(--pink) 0%, var(--violet) 45%, var(--blue) 75%, var(--amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow{ max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.section{ padding-block: var(--section-y); }
.section-tight{ padding-block: clamp(40px, 6vw, 72px); }
section.dark, .band-dark{ background: var(--ink); color: var(--white); }
section.dim{ background: var(--paper-dim); }

.grid{ display:grid; gap: 28px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
  .grid-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
}

.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; }
.between{ justify-content: space-between; }
.center{ text-align:center; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; } .gap-24{ gap:24px; } .gap-32{ gap:32px; }
.mt-8{margin-top:8px;} .mt-12{margin-top:12px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:48px;} .mt-64{margin-top:64px;}
.mx-auto{ margin-inline:auto; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 14px;
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--pink);
  flex: none;
}
.on-dark .eyebrow, .dark .eyebrow, section.dark .eyebrow{ color: var(--muted-on-dark); }

.divider{ height:1px; background: var(--line); border:none; margin: 0; }
.on-dark .divider, .dark .divider{ background: var(--line-on-dark); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
  border: 1.5px solid transparent;
}
.btn-primary{ background: var(--ink); color: var(--white); }
.btn-primary:hover{ background: var(--pink); transform: translateY(-1px); }
.on-dark .btn-primary, .dark .btn-primary{ background: var(--white); color: var(--ink); }
.on-dark .btn-primary:hover, .dark .btn-primary:hover{ background: var(--pink); color:#fff; }

.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover{ border-color: var(--ink); }
.on-dark .btn-ghost, .dark .btn-ghost{ color: var(--white); border-color: var(--line-on-dark); }
.on-dark .btn-ghost:hover, .dark .btn-ghost:hover{ border-color: var(--white); }

.btn-accent{ background: var(--pink); color:#fff; }
.btn-accent:hover{ background: var(--pink-deep); transform: translateY(-1px); }

.btn-sm{ padding: 10px 18px; font-size: 0.875rem; }
.btn-block{ width:100%; }

.link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight: 700;
  border-bottom: 1.5px solid var(--line);
  padding-bottom: 2px;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.link:hover{ border-color: var(--pink); color: var(--pink); }
.on-dark .link, .dark .link{ border-color: var(--line-on-dark); }
.on-dark .link:hover, .dark .link:hover{ border-color: var(--pink); color: var(--pink); }

/* ==========================================================================
   Header / nav
   ========================================================================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251,250,248,0.86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.site-header.scrolled{ border-bottom-color: var(--line); }
.header-inner{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 16px var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
}
.logo{
  display:flex;
  align-items:center;
  gap:2px;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  flex: none;
}
.logo .dot{ color: var(--pink); }

.nav-primary{
  display:flex;
  align-items:center;
  gap: 4px;
  flex: 1;
  justify-content:center;
}
.nav-item{ position:relative; }
.nav-link{
  display:flex;
  align-items:center;
  gap:5px;
  padding: 10px 14px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
  transition: background var(--fast) var(--ease);
}
.nav-link:hover{ background: var(--paper-dim); }
.nav-item.active > .nav-link{ color: var(--pink); }
.caret{ width:9px; height:9px; transition: transform var(--fast) var(--ease); opacity:0.6; }
.nav-item:hover .caret{ transform: rotate(180deg); }

.mega{
  position:absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 620px;
  background: var(--white);
  border: var(--hair);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -20px rgba(11,11,16,0.22);
  padding: 22px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 28px;
  opacity:0;
  visibility:hidden;
  translate: 0 6px;
  transition: opacity var(--fast) var(--ease), translate var(--fast) var(--ease), visibility var(--fast);
}
.nav-item:hover .mega, .nav-item:focus-within .mega{ opacity:1; visibility:visible; translate:0 0; }
.mega-wide{ min-width: 860px; grid-template-columns: repeat(4, 1fr); gap: 4px 24px; }
.mega-col .mega-title{ font-size:0.75rem; font-weight:700; color:var(--muted); padding: 8px 10px 4px; }
.mega-col .mega-title:not(:first-child){ margin-top: 10px; }
.mega-col a{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background var(--fast) var(--ease);
}
.mega-col a:hover{ background: var(--paper-dim); }
.mega-col a .t{ font-weight:700; font-size:0.875rem; }
.mega-col a .d{ font-size:0.78rem; color:var(--muted); }
.mega-col-cta{ border-left: var(--hair); padding-left: 20px; display:flex; flex-direction:column; justify-content:center; gap:6px; }
.mega-col-cta a{ background: var(--paper-dim); }
.mega-col-cta a .t{ color: var(--pink); }

.header-actions{ display:flex; align-items:center; gap:14px; flex: none; }
.phone-link{ font-weight:700; font-size:0.9rem; display:flex; align-items:center; gap:6px; }
.phone-link svg{ width:16px; height:16px; }

.nav-toggle{
  display:none;
  width: 42px; height: 42px;
  align-items:center; justify-content:center;
  border-radius: 50%;
  border: var(--hair);
  flex: none;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{
  content:''; display:block; width:18px; height:1.6px; background: var(--ink);
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.nav-toggle span{ margin: 4px 0; }
.nav-toggle.open span{ opacity:0; }
.nav-toggle.open::before{ transform: translateY(5.5px) rotate(45deg); }
.nav-toggle.open::after{ transform: translateY(-5.5px) rotate(-45deg); }
.nav-toggle{ position:relative; flex-direction:column; }
.nav-toggle::before, .nav-toggle::after{ position:absolute; left:12px; }
.nav-toggle::before{ top: 14px; }
.nav-toggle::after{ top: 24px; }

.mobile-panel{
  position:fixed; inset: 0 0 0 0; top: 72px;
  background: var(--paper);
  z-index: 150;
  padding: 8px var(--gutter) 40px;
  overflow-y:auto;
  display:none;
}
.mobile-panel.open{ display:block; }
.m-group summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; padding: 18px 4px; font-weight:700; font-size:1.05rem; border-bottom: var(--hair); }
.m-group summary::-webkit-details-marker{ display:none; }
.m-group summary::after{ content:'+'; font-size:1.3rem; color:var(--muted); }
.m-group[open] summary::after{ content:'–'; }
.m-group .m-links{ padding: 6px 4px 18px; display:flex; flex-direction:column; gap:2px; }
.m-group .m-links a{ padding: 9px 8px; font-weight:600; color:var(--muted); border-radius:8px; }
.m-group .m-links a:hover{ background: var(--paper-dim); color:var(--ink); }
.m-cta{ margin-top:22px; display:flex; flex-direction:column; gap:10px; }

@media (max-width: 1080px){
  .nav-primary, .phone-link{ display:none; }
  .header-actions .btn{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.breadcrumb{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:0.8125rem; color: var(--muted); }
.breadcrumb a{ color: var(--muted); }
.breadcrumb a:hover{ color: var(--pink); }
.breadcrumb .sep{ opacity:0.5; }
.breadcrumb .current{ color: var(--ink); font-weight:600; }

/* ==========================================================================
   Hero (home) — signature burst canvas
   ========================================================================== */
.hero-home{
  position:relative;
  padding-top: clamp(56px, 9vw, 100px);
  padding-bottom: clamp(40px, 6vw, 72px);
  overflow:hidden;
}
.hero-canvas-wrap{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
}
#burst{ width:100%; height:100%; }
.hero-home .wrap{ position:relative; z-index:2; }
.hero-content{ max-width: 900px; margin: 0 auto; text-align:center; }
.hero-content .h-display{ margin-top: 18px; }
.hero-actions{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero-proof{ margin-top: 40px; display:flex; align-items:center; justify-content:center; gap: 28px; flex-wrap:wrap; }
.hero-proof .item{ display:flex; align-items:center; gap:8px; font-size:0.85rem; font-weight:700; color: var(--muted); }
.hero-proof .stars{ color: var(--amber); letter-spacing:1px; }

/* generic page hero (non-home) */
.page-hero{ padding-top: clamp(40px, 6vw, 60px); padding-bottom: clamp(40px, 6vw, 64px); }
.page-hero .h-xl{ margin-top:16px; max-width: 880px; }
.page-hero .lede{ margin-top:18px; max-width: 620px; }
.page-hero-actions{ margin-top: 30px; display:flex; gap:14px; flex-wrap:wrap; }
.page-hero-split{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items:center; }
@media (max-width: 900px){ .page-hero-split{ grid-template-columns:1fr; } }

/* ==========================================================================
   Stat strip
   ========================================================================== */
.stat-strip{ border-top: var(--hair); border-bottom: var(--hair); }
.stat-strip .grid{ gap:0; }
.stat-item{ padding: 34px 20px; text-align:center; border-left: var(--hair); }
.stat-item:first-child{ border-left:none; }
.stat-num{ font-size: clamp(1.9rem, 3.2vw, 2.75rem); font-weight:800; letter-spacing:-0.02em; }
.stat-item .label{ margin-top:6px; }
@media (max-width: 640px){ .stat-item{ border-left:none; border-top:var(--hair); } .stat-item:first-child{ border-top:none; } }
.dark .stat-strip, section.dark .stat-item{ border-color: var(--line-on-dark); }

/* ==========================================================================
   Cards
   ========================================================================== */
.card{
  border: var(--hair);
  border-radius: var(--r-lg);
  padding: 30px;
  background: var(--white);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.card:hover{ border-color: var(--ink); }
.dark .card, .on-dark .card{ background: var(--ink-soft); border-color: var(--line-on-dark); }
.dark .card:hover, .on-dark .card:hover{ border-color: var(--white); }

.icon-tile{
  width:48px; height:48px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 20px;
  background: var(--paper-dim);
}
.icon-tile svg{ width:24px; height:24px; }
.dark .icon-tile, .on-dark .icon-tile{ background: rgba(255,255,255,0.08); }

/* Service grid card with number-free index for real sequences only */
.svc-card .h-sm{ margin-bottom:8px; }
.svc-card .small{ margin-top:12px; }
.svc-card .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.tag{
  font-size:0.75rem; font-weight:700; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--paper-dim); color: var(--muted);
  display:inline-block;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
a.tag:hover{ background: var(--ink); color: var(--white); }

/* ==========================================================================
   Category row — homepage "services" list (clearer than crowded cards)
   ========================================================================== */
.cat-row{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-top: var(--hair);
}
.cat-row:last-child{ border-bottom: var(--hair); }
.cat-row-head{ display:flex; align-items:center; gap:14px; }
.cat-row-head .number-badge{ flex:none; }
.cat-row-head .icon-tile{ margin-bottom:0; }
.cat-row-title{ display:flex; flex-direction:column; gap:2px; }
.cat-row-title .badge-pill{
  align-self:flex-start; font-size:0.68rem; font-weight:800; letter-spacing:0.02em;
  text-transform:uppercase; color: var(--pink); margin-bottom:2px;
}
.cat-row-body{ display:flex; flex-direction:column; gap:14px; }
.cat-row-links{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.cat-row-links a{
  font-size:0.9rem; font-weight:700; color:var(--ink);
  border-bottom:1.5px solid var(--line); padding-bottom:2px;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.cat-row-links a:hover{ color:var(--pink); border-color:var(--pink); }
@media (max-width: 780px){
  .cat-row{ grid-template-columns:1fr; gap:16px; }
}
.dark .tag, .on-dark .tag{ background: rgba(255,255,255,0.08); color: var(--muted-on-dark); }

/* ==========================================================================
   Process / timeline (true sequences only)
   ========================================================================== */
.process{ display:grid; grid-template-columns: repeat(4,1fr); gap: 0; }
.process-step{ position:relative; padding: 28px 24px 0 0; border-top: 3px solid var(--ink); }
.process-step .step-num{ font-size:0.8rem; font-weight:800; color: var(--pink); }
.process-step .h-sm{ margin-top:12px; }
.process-step .small{ margin-top:10px; }
@media (max-width: 900px){
  .process{ grid-template-columns: 1fr; gap: 28px; }
  .process-step{ padding-right:0; }
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq-item{ border-bottom: var(--hair); }
.faq-item:first-child{ border-top: var(--hair); }
.faq-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding: 22px 4px;
  text-align:left;
  font-weight:700;
  font-size: 1.02rem;
}
.faq-q .plus{ position:relative; width:18px; height:18px; flex:none; }
.faq-q .plus::before, .faq-q .plus::after{
  content:''; position:absolute; background: var(--ink); border-radius:2px;
}
.faq-q .plus::before{ width:18px; height:2px; top:8px; left:0; }
.faq-q .plus::after{ width:2px; height:18px; top:0; left:8px; transition: transform var(--fast) var(--ease); }
.faq-item.open .plus::after{ transform: rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition: max-height var(--med) var(--ease); }
.faq-a-inner{ padding: 0 4px 22px; color: var(--muted); max-width: 68ch; }
.on-dark .faq-q .plus::before, .on-dark .faq-q .plus::after, .dark .faq-q .plus::before, .dark .faq-q .plus::after{ background: var(--white); }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.t-slider{ position:relative; overflow:hidden; }
.t-track{ display:flex; transition: transform var(--med) var(--ease); }
.t-slide{ flex: 0 0 100%; padding: 4px; }
.t-quote{ font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight:600; line-height:1.45; letter-spacing:-0.01em; max-width: 760px; }
.t-meta{ margin-top:24px; display:flex; align-items:center; gap:12px; }
.t-avatar{ width:44px; height:44px; border-radius:50%; background: var(--paper-dim); display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--pink); flex:none; }
.on-dark .t-avatar, .dark .t-avatar{ background: rgba(255,255,255,0.1); }
.t-controls{ display:flex; gap:10px; margin-top:36px; align-items:center; }
.t-dot{ width:8px; height:8px; border-radius:50%; background: var(--line); transition: background var(--fast) var(--ease), width var(--fast) var(--ease); }
.t-dot.active{ background: var(--pink); width:22px; border-radius:5px; }
.on-dark .t-dot, .dark .t-dot{ background: var(--line-on-dark); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  border-radius: var(--r-lg);
  padding: clamp(40px, 6vw, 72px);
  background: var(--ink);
  color: var(--white);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-band::before{
  content:'';
  position:absolute; inset:-40%;
  background: conic-gradient(from 120deg at 50% 50%, var(--pink), var(--violet), var(--blue), var(--amber), var(--pink));
  opacity:0.18;
  filter: blur(60px);
}
.cta-band > *{ position:relative; z-index:1; }
.cta-band .btn-primary{ background:#fff; color:var(--ink); }
.cta-band .btn-primary:hover{ background: var(--pink); color:#fff; }
.cta-band .h-lg{ max-width: 700px; margin-inline:auto; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--ink); color: var(--white); padding-top: clamp(56px,7vw,88px); }
.footer-top{ display:grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding-bottom: 56px; }
.footer-brand .logo{ color:#fff; }
.footer-brand p{ color: var(--muted-on-dark); margin-top:16px; max-width: 300px; }
.f-col .f-title{ font-size:0.8125rem; font-weight:700; color: var(--muted-on-dark); margin-bottom:16px; }
.f-col a{ display:block; padding: 7px 0; color: rgba(255,255,255,0.86); font-size:0.9rem; }
.f-col a:hover{ color: var(--pink); }
.footer-bottom{ border-top: var(--hair-dark); padding: 24px 0 32px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-bottom .small{ color: var(--muted-on-dark); }
.social-row{ display:flex; gap:10px; }
.social-row a{ width:36px; height:36px; border-radius:50%; border: var(--hair-dark); display:flex; align-items:center; justify-content:center; }
.social-row a:hover{ border-color: var(--pink); color: var(--pink); }
.social-row svg{ width:16px; height:16px; }
@media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field label{ font-size:0.8125rem; font-weight:700; }
.form-field input, .form-field textarea, .form-field select{
  padding: 14px 16px;
  border: var(--hair);
  border-radius: 12px;
  background: var(--white);
  font-size:0.95rem;
}
.on-dark .form-field input, .on-dark .form-field textarea, .on-dark .form-field select{
  background: var(--ink-soft); border-color: var(--line-on-dark); color:#fff;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ border-color: var(--ink); }
.on-dark .form-field input:focus, .on-dark .form-field textarea:focus{ border-color: var(--white); }
.form-field textarea{ resize:vertical; min-height:120px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.form-note{ margin-top:14px; }
.form-success{ display:none; padding: 20px; border-radius: 14px; background: var(--paper-dim); text-align:center; }
.form-success.show{ display:block; }

/* ==========================================================================
   Reveal-on-scroll — one restrained utility, not stacked everywhere
   ========================================================================== */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity 640ms var(--ease), transform 640ms var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ==========================================================================
   Blog / article
   ========================================================================== */
.article-layout{ display:grid; grid-template-columns: 240px 1fr; gap: 56px; align-items:start; }
@media (max-width: 980px){ .article-layout{ grid-template-columns: 1fr; } }
.toc{ position:sticky; top: 100px; }
.toc .label{ margin-bottom:12px; }
.toc-list{ display:flex; flex-direction:column; gap:2px; border-left: 2px solid var(--line); }
.toc-list a{
  padding: 7px 0 7px 16px;
  font-size:0.875rem;
  color: var(--muted);
  border-left: 2px solid transparent;
  margin-left:-2px;
}
.toc-list a:hover{ color: var(--ink); }
.toc-list a.active{ color: var(--pink); border-left-color: var(--pink); font-weight:700; }
@media (max-width: 980px){ .toc{ position:static; margin-bottom: 40px; padding: 20px; border: var(--hair); border-radius: var(--r-md); } }

.article-body{ max-width: 68ch; }
.article-body > * + *{ margin-top: 22px; }
.article-body h2{ font-size: clamp(1.4rem,2.4vw,1.85rem); font-weight:800; letter-spacing:-0.015em; margin-top:48px; scroll-margin-top: 100px; }
.article-body h3{ font-size: 1.2rem; font-weight:700; margin-top:32px; scroll-margin-top: 100px; }
.article-body p{ font-size: 1.05rem; line-height:1.75; color: var(--ink); }
.article-body ul, .article-body ol{ padding-left: 22px; list-style:disc; display:flex; flex-direction:column; gap:10px; }
.article-body ol{ list-style:decimal; }
.article-body li{ font-size:1.05rem; line-height:1.65; }
.article-body blockquote{
  border-left: 3px solid var(--pink);
  padding: 4px 0 4px 22px;
  font-size:1.2rem;
  font-weight:600;
  letter-spacing:-0.01em;
}
.article-body figure{ margin-top:28px; }
.article-body figcaption{ margin-top:10px; font-size:0.85rem; color:var(--muted); }
.article-body table{ width:100%; border-collapse:collapse; font-size:0.92rem; }
.article-body th, .article-body td{ text-align:left; padding: 10px 14px; border-bottom: var(--hair); }
.article-body th{ font-size:0.78rem; text-transform:none; color:var(--muted); }
.article-meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.article-hero-cat{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:0.8125rem; padding:6px 12px; border-radius:var(--r-pill); }
.callout{ border: var(--hair); border-radius: var(--r-md); padding: 22px 24px; background: var(--paper-dim); }
.callout .h-sm{ margin-bottom:8px; }
.share-row{ display:flex; align-items:center; gap:10px; margin-top: 40px; padding-top:28px; border-top: var(--hair); }
.share-row a{ width:38px; height:38px; border-radius:50%; border:var(--hair); display:flex; align-items:center; justify-content:center; }
.share-row a:hover{ border-color:var(--pink); color:var(--pink); }
.author-box{ display:flex; gap:16px; align-items:center; padding: 22px; border: var(--hair); border-radius: var(--r-md); margin-top:32px; }
.author-avatar{ width:52px; height:52px; border-radius:50%; background: var(--paper-dim); flex:none; display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--pink); }

.blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:28px; }
@media (max-width: 980px){ .blog-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .blog-grid{ grid-template-columns: 1fr; } }
.post-card{ display:flex; flex-direction:column; }
.post-thumb{ aspect-ratio: 16/10; border-radius: var(--r-md); overflow:hidden; margin-bottom:18px; position:relative; }
.post-thumb .cat-chip{ position:absolute; top:14px; left:14px; background:rgba(11,11,16,0.7); backdrop-filter: blur(6px); color:#fff; font-size:0.72rem; font-weight:700; padding:5px 11px; border-radius:var(--r-pill); }
.post-card .h-sm{ margin-top:2px; }
.post-card .small{ margin-top:10px; }
.post-card .article-meta{ margin-top:14px; }
.filter-row{ display:flex; flex-wrap:wrap; gap:10px; }
.filter-chip{
  padding: 9px 16px; border-radius: var(--r-pill); border: var(--hair); font-weight:700; font-size:0.85rem; color:var(--muted);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.filter-chip:hover{ border-color: var(--ink); color:var(--ink); }
.filter-chip.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ==========================================================================
   Portfolio (dark theatre)
   ========================================================================== */
.portfolio-page{ background: var(--ink); color: var(--white); }
.portfolio-page .site-footer{ padding-top:0; }
.pf-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line-on-dark); }
.pf-tile{
  position:relative;
  background: var(--ink-soft);
  aspect-ratio: 4/3;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding: 28px;
}
.pf-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.72; transition: opacity var(--med) var(--ease), transform 700ms var(--ease); }
.pf-tile:hover img{ opacity:0.42; transform: scale(1.04); }
.pf-tile-content{ position:relative; z-index:1; }
.pf-tile .pf-cat{ font-size:0.75rem; font-weight:700; color: var(--pink); margin-bottom:8px; }
.pf-tile .h-sm{ color:#fff; }
.pf-tile .small{ color: var(--muted-on-dark); margin-top:6px; }
@media (max-width: 780px){ .pf-grid{ grid-template-columns:1fr; } }

.case-hero{ padding: clamp(48px,7vw,90px) 0 40px; border-bottom: var(--hair-dark); }
.case-meta-strip{ display:flex; flex-wrap:wrap; gap: 36px; margin-top:44px; padding-top:28px; border-top: var(--hair-dark); }
.case-meta-strip .item .label{ color: var(--muted-on-dark); }
.case-meta-strip .item strong{ display:block; font-size:1.05rem; margin-top:4px; }
.case-shot{ border-radius: var(--r-lg); overflow:hidden; border: var(--hair-dark); }
.case-results{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:var(--hair-dark); border-radius:var(--r-lg); overflow:hidden; }
.case-results .stat-item{ border-color: var(--line-on-dark); }
@media (max-width:700px){ .case-results{ grid-template-columns:1fr 1fr; } }

/* ==========================================================================
   Misc components
   ========================================================================== */
.logo-marquee{ display:flex; gap: 56px; align-items:center; overflow:hidden; }
.logo-marquee .track{ display:flex; gap:56px; animation: marquee 26s linear infinite; flex:none; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform: translateX(-50%);} }
.logo-marquee img{ height: 26px; width:auto; opacity:0.55; filter:grayscale(1); flex:none; }

.compare-table{ width:100%; border-collapse:collapse; }
.compare-table th, .compare-table td{ padding: 16px 18px; border-bottom: var(--hair); text-align:left; font-size:0.92rem; }
.compare-table thead th{ font-size:0.78rem; color:var(--muted); font-weight:700; }
.compare-table td.yes{ color:#16A34A; font-weight:700; }
.compare-table .row-head{ font-weight:700; }

.pill-list{ display:flex; flex-wrap:wrap; gap:10px; }
.pill{ padding:8px 16px; border-radius:var(--r-pill); border:var(--hair); font-size:0.85rem; font-weight:600; }

.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:center; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; gap:36px; } }
.two-col.reverse{ direction:rtl; } .two-col.reverse > *{ direction:ltr; }

.check-list{ display:flex; flex-direction:column; gap:14px; }
.check-list li{ display:flex; gap:12px; align-items:flex-start; font-size:1rem; }
.check-list svg{ width:20px; height:20px; flex:none; margin-top:2px; color: var(--pink); }

.media-frame{ border-radius: var(--r-lg); overflow:hidden; border: var(--hair); }
.on-dark .media-frame{ border-color: var(--line-on-dark); }

.back-to-top{
  position:fixed; right:24px; bottom:24px; z-index:60;
  width:46px; height:46px; border-radius:50%;
  background: var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform: translateY(10px);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.4);
}
.back-to-top.show{ opacity:1; pointer-events:auto; transform:none; }

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:#fff; color:#000; padding:12px 18px; border-radius:8px; z-index:999;
}
.skip-link:focus{ left:16px; top:16px; }

table.pricing-table{ width:100%; border-collapse:separate; border-spacing:0; }
.plan-card{ border: var(--hair); border-radius: var(--r-lg); padding: 32px; display:flex; flex-direction:column; height:100%; }
.plan-card.featured{ border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.plan-price{ font-size: 2.4rem; font-weight:800; letter-spacing:-0.02em; margin-top:6px; }
.plan-price span{ font-size:0.95rem; font-weight:600; color:var(--muted); }
.plan-card .check-list{ margin-top:24px; margin-bottom:28px; flex:1; }

.number-badge{ width:34px; height:34px; border-radius:50%; border:1.5px solid var(--ink); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.85rem; flex:none; }
.on-dark .number-badge{ border-color:#fff; }

/* ==========================================================================
   Abstract mockups — used in place of stock photography
   ========================================================================== */
.visual-blob{ position:relative; }
.visual-blob::before{
  content:''; position:absolute; inset:-15%; z-index:0;
  background: conic-gradient(from 140deg at 60% 40%, var(--pink), var(--violet), var(--blue), var(--amber), var(--pink));
  opacity:0.16; filter: blur(70px);
}
.visual-blob > *{ position:relative; z-index:1; }

.mock-window{
  border-radius: var(--r-lg);
  border: var(--hair);
  background: var(--white);
  box-shadow: 0 30px 70px -30px rgba(11,11,16,0.28);
  overflow:hidden;
}
.mock-chrome{ display:flex; gap:6px; padding: 14px 16px; border-bottom: var(--hair); align-items:center; }
.mock-chrome .mock-dot{ width:9px; height:9px; border-radius:50%; background: var(--line); }
.mock-chrome .mock-url{ margin-left:10px; height:20px; flex:1; border-radius:6px; background: var(--paper-dim); }
.mock-body{ padding: 24px; display:flex; flex-direction:column; gap:12px; }
.mock-bar{ height: 12px; border-radius: 6px; background: var(--paper-dim); }
.mock-bar.w-70{ width:70%; } .mock-bar.w-50{ width:50%; } .mock-bar.w-90{ width:90%; } .mock-bar.w-35{ width:35%; }
.mock-bar.accent{ background: linear-gradient(90deg, var(--pink), var(--violet)); }
.mock-card-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:6px; }
.mock-card-row .cell{ aspect-ratio:1; border-radius:10px; background: var(--paper-dim); }
.mock-sparkline{ display:flex; align-items:flex-end; gap:6px; height:64px; margin-top:6px; }
.mock-sparkline .bar{ flex:1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--pink), var(--violet)); }

.mock-chat{ display:flex; flex-direction:column; gap:12px; padding:24px; }
.mock-bubble{ max-width:78%; padding:12px 16px; border-radius:16px; font-size:0.85rem; line-height:1.4; }
.mock-bubble.user{ align-self:flex-end; background: var(--ink); color:#fff; border-bottom-right-radius:4px; }
.mock-bubble.ai{ align-self:flex-start; background: var(--paper-dim); border-bottom-left-radius:4px; }
.mock-bubble.ai .src{ display:inline-flex; align-items:center; gap:5px; margin-top:8px; padding:4px 9px; border-radius:var(--r-pill); background:#fff; border:var(--hair); font-size:0.7rem; font-weight:700; }

.mock-phone{
  width: 230px; margin-inline:auto;
  border-radius: 34px; border: 8px solid var(--ink);
  background: var(--white); box-shadow: 0 30px 70px -30px rgba(11,11,16,0.35);
  overflow:hidden; aspect-ratio: 9/18.5;
}
.mock-phone .notch{ height:22px; background:var(--ink); border-radius: 0 0 14px 14px; width:90px; margin-inline:auto; }
.mock-phone .mock-body{ padding:16px; gap:10px; }
.mock-phone .mock-card-row{ grid-template-columns:repeat(2,1fr); }

.mock-stat-card{ border-radius: var(--r-lg); border: var(--hair); background:#fff; padding:26px; box-shadow: 0 30px 70px -30px rgba(11,11,16,0.25); }
.mock-stat-card .big{ font-size:2.4rem; font-weight:800; letter-spacing:-0.02em; }

.float-card{
  position:absolute; padding:14px 18px; border-radius:16px; background:#fff; border:var(--hair);
  box-shadow: 0 20px 40px -18px rgba(11,11,16,0.3); display:flex; align-items:center; gap:10px; font-weight:700; font-size:0.85rem;
}