/* ==========================================================================
   Kapsify — design tokens
   Signature: hero "blueprint → live store" split mockup.
   Palette: ink navy + warm paper, indigo→magenta gradient as the sole
   "execution" accent, amber as a quiet secondary accent.
   Type: Space Grotesk (display) / Plus Jakarta Sans (body) / IBM Plex Mono (labels)
   ========================================================================== */

:root{
  --ink: #0B0E1A;
  --ink-soft: #585D74;
  --ink-faint: #8286A0;
  --paper: #F6F5F1;
  --paper-alt: #EDEBE4;
  --white: #FFFFFF;
  --line: #E2E0D8;
  --line-dark: #262B45;

  --indigo: #4B3DF2;
  --indigo-deep: #372BC4;
  --magenta: #FF3D8A;
  --amber: #FFB020;

  --card-dark: #12162A;
  --card-dark-alt: #171C36;

  --gradient: linear-gradient(135deg, var(--indigo) 0%, var(--magenta) 100%);
  --gradient-soft: linear-gradient(135deg, rgba(75,61,242,0.12) 0%, rgba(255,61,138,0.12) 100%);

  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --shadow-card: 0 1px 2px rgba(11,14,26,0.04), 0 12px 32px -16px rgba(11,14,26,0.12);
  --shadow-lift: 0 20px 60px -20px rgba(75,61,242,0.35);

  --wrap: 1200px;
  --wrap-narrow: 760px;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family: inherit; cursor:pointer; background:none; border:none; color:inherit; }
input, select, textarea{ font-family: inherit; font-size:16px; }
:focus-visible{ outline: 2px solid var(--indigo); outline-offset: 3px; }
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px; word-wrap:normal; }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--white); padding:12px 20px; z-index:9999; border-radius:0 0 8px 0; }
.skip-link:focus{ left:0; }

h1,h2,h3{ font-family: var(--font-display); font-weight:600; letter-spacing:-0.01em; line-height:1.08; }
h2{ font-size: clamp(1.9rem, 1.5rem + 1.8vw, 3rem); }
h3{ font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); }

.wrap{ max-width: var(--wrap); margin:0 auto; padding:0 24px; }
.wrap--narrow{ max-width: var(--wrap-narrow); }

.text-gradient{
  background: var(--gradient);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Eyebrow label */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--indigo-deep); margin-bottom:16px;
}
.eyebrow__dot{ width:6px; height:6px; border-radius:50%; background:var(--gradient); flex:none; }

.section-head{ max-width: 640px; margin: 0 0 48px; }
.section-head__sub{ margin-top:14px; color:var(--ink-soft); font-size:1.05rem; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-display); font-weight:600; font-size:0.95rem;
  padding: 14px 24px; border-radius: 999px; white-space:nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}
.btn--gradient{ background: var(--gradient); color:var(--white); box-shadow: var(--shadow-lift); }
.btn--gradient:hover{ transform: translateY(-2px); box-shadow: 0 24px 48px -18px rgba(255,61,138,0.45); }
.btn--ghost{ background: transparent; color: var(--ink); border:1.5px solid var(--line); }
.btn--ghost:hover{ border-color: var(--ink); }
.btn--outline{ background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
.btn--outline:hover{ background:var(--ink); color:var(--white); }
.btn--sm{ padding:10px 18px; font-size:0.85rem; }
.btn--lg{ padding:16px 30px; font-size:1rem; }
.btn--block{ width:100%; }
.btn__arrow{ transition: transform .18s ease; }
.btn:hover .btn__arrow{ transform: translateX(3px); }

.link-arrow{
  font-family: var(--font-display); font-weight:600; color: var(--indigo-deep);
  border-bottom:1.5px solid transparent; padding-bottom:2px; transition: border-color .18s ease;
}
.link-arrow:hover{ border-color: var(--indigo-deep); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(246,245,241,0.86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; gap:24px; }
.site-logo{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.15rem; flex:none; }
.site-logo__mark{
  width:32px; height:32px; border-radius:9px; background:var(--gradient);
  color:var(--white); display:inline-flex; align-items:center; justify-content:center; font-size:1rem;
}
.site-logo__mark--img{ background:none; border-radius:9px; flex:none; }
.site-nav{ display:none; }
.nav-menu{ display:flex; gap:32px; }
.nav-menu a{ font-weight:600; font-size:0.95rem; color: var(--ink-soft); transition: color .15s ease; }
.nav-menu a:hover{ color: var(--ink); }
.site-header__actions{ display:flex; align-items:center; gap:12px; }
.site-header__actions .btn--sm{ display:none; }

.nav-toggle{ width:38px; height:38px; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.nav-toggle span{ width:20px; height:2px; background:var(--ink); border-radius:2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-nav{
  max-height:0; overflow:hidden; background:var(--paper); border-bottom:1px solid transparent;
  transition: max-height .3s ease, border-color .3s ease;
}
.mobile-nav.is-open{ max-height:420px; border-color: var(--line); }
.mobile-nav__menu{ padding: 8px 24px; display:flex; flex-direction:column; }
.mobile-nav__menu a{ display:block; padding:14px 0; font-weight:600; border-bottom:1px solid var(--line); }
.mobile-nav .btn{ margin: 16px 24px 22px; width:calc(100% - 48px); }

@media(min-width:900px){
  .site-nav{ display:block; }
  .site-header__actions .btn--sm{ display:inline-flex; }
  .nav-toggle{ display:none; }
  .mobile-nav{ display:none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ position:relative; padding: 72px 0 88px; overflow:hidden; }
.hero__glow{
  position:absolute; inset:-20% -10% auto -10%; height:640px;
  background: radial-gradient(60% 60% at 30% 20%, rgba(75,61,242,0.16), transparent 70%),
              radial-gradient(50% 50% at 80% 10%, rgba(255,61,138,0.14), transparent 70%);
  pointer-events:none; z-index:0;
}
.hero__inner{ position:relative; z-index:1; display:grid; gap:56px; align-items:center; }
.hero__headline{ font-size: clamp(2.3rem, 1.8rem + 2.6vw, 3.8rem); }
.hero__sub{ margin-top:22px; font-size:1.1rem; color: var(--ink-soft); max-width:52ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.hero__stats{ display:flex; gap:32px; margin-top:48px; padding-top:28px; border-top:1px solid var(--line); flex-wrap:wrap; }
.hero__stat dt{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; }
.hero__stat dd{ margin:2px 0 0; font-size:0.85rem; color: var(--ink-faint); }

/* Signature mockup */
.hero__visual{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.mockup{
  width:100%; max-width:520px; border-radius: var(--radius-lg);
  background: var(--white); box-shadow: var(--shadow-card);
  border:1px solid var(--line); overflow:hidden;
}
.mockup__chrome{ display:flex; align-items:center; gap:8px; padding:12px 16px; background: var(--paper-alt); border-bottom:1px solid var(--line); }
.mockup__dot{ width:8px; height:8px; border-radius:50%; background: var(--line); }
.mockup__url{ margin-left:10px; font-family:var(--font-mono); font-size:0.68rem; color: var(--ink-faint); background:var(--white); padding:4px 10px; border-radius:6px; }
.mockup__body{ display:flex; position:relative; min-height:320px; }
.mockup__half{ flex:1; padding:26px 20px; display:flex; flex-direction:column; gap:12px; }
.mockup__half--sketch{ background: var(--paper); }
.mockup__half--live{ background: var(--card-dark); color:var(--white); }
.mockup__tag{ font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.08em; color: var(--ink-faint); }
.mockup__tag--live{ color: #ffb2d6; }

.mockup__seam{
  width:36px; flex:none; display:flex; align-items:center; justify-content:center;
  background: var(--gradient); position:relative;
}
.mockup__seam-arrow{ color:#fff; font-size:1rem; }

.sk-line{ border:1.5px dashed #C9C6BB; border-radius:4px; background:transparent; }
.sk-line--title{ height:14px; width:70%; }
.sk-line--sub{ height:9px; width:85%; }
.sk-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:6px; }
.sk-box{ aspect-ratio:1; border:1.5px dashed #C9C6BB; border-radius:8px; }

.lv-line{ border-radius:4px; background: rgba(255,255,255,0.16); }
.lv-line--title{ height:14px; width:75%; }
.lv-line--sub{ height:9px; width:55%; background: rgba(255,255,255,0.1); }
.lv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:6px; }
.lv-card{ aspect-ratio:1; border-radius:8px; background: var(--gradient); opacity:0.9; }
.lv-card:nth-child(2){ opacity:0.65; }
.lv-card:nth-child(3){ opacity:0.4; }
.lv-cta{ margin-top:auto; height:30px; border-radius:8px; background: var(--amber); width:60%; }

.mockup__caption{ font-family: var(--font-mono); font-size:0.75rem; color: var(--ink-faint); }

@media(min-width:960px){
  .hero__inner{ grid-template-columns: 1.05fr 0.95fr; gap:64px; }
}

/* ==========================================================================
   Trust bar
   ========================================================================== */
.trust-bar{ padding: 36px 0; background: var(--paper-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust-bar__label{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:22px; }
.trust-bar__items{ display:grid; gap:24px; }
.trust-bar__item{ display:flex; flex-direction:column; gap:4px; }
.trust-bar__item strong{ font-family:var(--font-display); font-size:1.02rem; }
.trust-bar__item span{ color:var(--ink-soft); font-size:0.92rem; }
@media(min-width:800px){ .trust-bar__items{ grid-template-columns:repeat(3,1fr); } }

/* ==========================================================================
   Process
   ========================================================================== */
.process{ padding: 96px 0; }
.process-list{ display:grid; gap:2px; background: var(--line); border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--line); }
.process-step{ background: var(--white); display:grid; grid-template-columns:auto 1fr; gap:24px; padding:32px 28px; align-items:start; }
.process-step__index{ font-family:var(--font-mono); font-size:0.85rem; color:var(--indigo-deep); padding-top:4px; }
.process-step__body p{ margin-top:8px; color:var(--ink-soft); }
@media(min-width:800px){ .process-list{ grid-template-columns: repeat(2,1fr); } }

/* ==========================================================================
   Services
   ========================================================================== */
.services{ padding: 32px 0 96px; }
.services-grid{ display:grid; gap:20px; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.service-card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius-md); padding:28px; box-shadow: var(--shadow-card); }
.service-card h3{ margin-top:18px; }
.service-card p{ margin-top:10px; color:var(--ink-soft); font-size:0.95rem; }
.service-card__icon{ width:40px; height:40px; border-radius:11px; background: var(--gradient-soft); position:relative; }
.service-card__icon::after{ content:""; position:absolute; inset:11px; border-radius:5px; background: var(--gradient); }

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing-preview, .pricing-full, .pricing-compare{ padding: 32px 0 96px; }
.page-hero + .pricing-full{ padding-top: 12px; }
.pricing-grid{ display:grid; gap:24px; }
.pricing-grid--preview{ margin-top: 8px; }
@media(min-width:860px){ .pricing-grid{ grid-template-columns: repeat(3,1fr); } }

.pricing-card{
  position:relative; background: var(--white); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px 28px; display:flex; flex-direction:column; box-shadow: var(--shadow-card);
}
.pricing-card--featured{ border-color: transparent; background: var(--card-dark); color:var(--white); box-shadow: var(--shadow-lift); transform: translateY(-8px); }
.pricing-card__badge{
  position:absolute; top:-13px; left:28px; background:var(--gradient); color:#fff;
  font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.06em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px;
}
.pricing-card__name{ font-size:1.3rem; }
.pricing-card__price{ font-family:var(--font-display); font-weight:700; font-size:2.1rem; margin-top:14px; }
.pricing-card__price span{ font-family:var(--font-body); font-weight:500; font-size:0.85rem; color: var(--ink-faint); }
.pricing-card--featured .pricing-card__price span{ color: rgba(255,255,255,0.55); }
.pricing-card__desc{ margin-top:10px; color:var(--ink-soft); font-size:0.92rem; min-height:44px; }
.pricing-card--featured .pricing-card__desc{ color: rgba(255,255,255,0.7); }
.pricing-card__features{ margin: 22px 0 28px; display:flex; flex-direction:column; gap:12px; flex:1; }
.pricing-card__features li{ display:flex; gap:10px; font-size:0.92rem; align-items:flex-start; }
.pricing-card__check{ color: var(--indigo); font-weight:700; flex:none; }
.pricing-card--featured .pricing-card__check{ color: var(--amber); }

.pricing-preview__footer{ margin-top:36px; text-align:center; }
.pricing-note{ margin-top:32px; text-align:center; color:var(--ink-soft); }
.pricing-note p{ max-width:56ch; margin:0 auto; }

.compare-list{ display:grid; gap:24px; margin-top:8px; }
.compare-item h3{ font-size:1.05rem; }
.compare-item p{ margin-top:8px; color:var(--ink-soft); font-size:0.95rem; }
@media(min-width:700px){ .compare-list{ grid-template-columns: repeat(3,1fr); } }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials{ padding: 32px 0 96px; }
.testimonial-grid{ display:grid; gap:20px; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.testimonial-card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius-md); padding:28px; box-shadow: var(--shadow-card); }
.testimonial-card p{ font-size:1rem; line-height:1.6; }
.testimonial-card footer{ margin-top:18px; display:flex; flex-direction:column; }
.testimonial-card strong{ font-family: var(--font-display); }
.testimonial-card span{ color: var(--ink-faint); font-size:0.85rem; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ padding: 32px 0 96px; }
.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item__q{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:22px 4px; font-family: var(--font-display); font-weight:600; font-size:1.02rem; text-align:left; gap:16px; }
.faq-item__icon{ width:20px; height:20px; flex:none; position:relative; }
.faq-item__icon::before, .faq-item__icon::after{ content:""; position:absolute; background:var(--ink); border-radius:2px; }
.faq-item__icon::before{ width:14px; height:2px; top:9px; left:3px; }
.faq-item__icon::after{ width:2px; height:14px; top:3px; left:9px; transition: transform .2s ease; }
.faq-item__q[aria-expanded="true"] .faq-item__icon::after{ transform: rotate(90deg); }
.faq-item__a{ max-height:0; overflow:hidden; transition: max-height .28s ease; }
.faq-item__a p{ padding: 0 4px 22px; color:var(--ink-soft); max-width:64ch; }

/* ==========================================================================
   CTA + lead form
   ========================================================================== */
.cta-form{ padding: 32px 0 100px; }
.cta-form__inner{ background: var(--card-dark); border-radius: var(--radius-lg); padding: 48px 32px; display:grid; gap:36px; color:var(--white); position:relative; overflow:hidden; }
.cta-form__inner::before{
  content:""; position:absolute; inset:0; background: radial-gradient(60% 80% at 100% 0%, rgba(255,61,138,0.22), transparent 60%); pointer-events:none;
}
.cta-form__intro{ position:relative; z-index:1; }
.cta-form__intro h2{ font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.3rem); }
.cta-form__intro p{ margin-top:14px; color: rgba(255,255,255,0.7); max-width:46ch; }
.cta-form__points{ margin-top:24px; display:flex; flex-direction:column; gap:10px; }
.cta-form__points li{ padding-left:24px; position:relative; font-size:0.92rem; color: rgba(255,255,255,0.85); }
.cta-form__points li::before{ content:"✓"; position:absolute; left:0; color: var(--amber); font-weight:700; }
.cta-form__card{ position:relative; z-index:1; background: var(--white); border-radius: var(--radius-md); padding: 28px; color: var(--ink); }
@media(min-width:960px){ .cta-form__inner{ grid-template-columns: 0.9fr 1.1fr; padding:56px; align-items:center; } }

.lead-form__row{ display:grid; gap:16px; margin-bottom:16px; }
@media(min-width:560px){ .lead-form__row{ grid-template-columns: 1fr 1fr; } }
.lead-form__field label{ display:block; font-size:0.82rem; font-weight:600; margin-bottom:6px; color: var(--ink-soft); }
.lead-form__optional{ font-weight:400; color: var(--ink-faint); }
.lead-form__field input, .lead-form__field select{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px; background: var(--paper);
  transition: border-color .15s ease;
}
.lead-form__field input:focus, .lead-form__field select:focus{ border-color: var(--indigo); outline:none; }
.lead-form__hp{ position:absolute; left:-9999px; opacity:0; }
.lead-form__note{ margin-top:12px; font-size:0.78rem; color: var(--ink-faint); text-align:center; }
.lead-form__status{ margin-top:10px; font-size:0.88rem; font-weight:600; text-align:center; min-height:1.2em; }
.lead-form__status.is-success{ color:#1a8f5e; }
.lead-form__status.is-error{ color:#d1414d; }
.lead-form--full .btn{ margin-top:6px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--ink); color: rgba(255,255,255,0.82); margin-top:0; }
.footer-cta{ display:flex; flex-direction:column; gap:20px; align-items:flex-start; padding:64px 24px 48px; border-bottom:1px solid var(--line-dark); }
.footer-cta__text h2{ color:#fff; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.footer-cta__text p{ margin-top:10px; color: rgba(255,255,255,0.6); }
@media(min-width:800px){ .footer-cta{ flex-direction:row; align-items:center; justify-content:space-between; } }

.footer-grid{ display:grid; gap:36px; padding:56px 24px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.footer-col li{ color: rgba(255,255,255,0.55); font-size:0.92rem; }
.footer-col a{ color: rgba(255,255,255,0.72); font-size:0.92rem; transition: color .15s ease; }
.footer-col a:hover{ color:#fff; }
.footer-col__title{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color: rgba(255,255,255,0.4); }
.footer-tagline{ margin-top:16px; color: rgba(255,255,255,0.55); font-size:0.92rem; max-width:32ch; }
.footer-col--brand .site-logo{ color:#fff; }
.footer-col__text{ margin-top:16px; color: rgba(255,255,255,0.55); font-size:0.92rem; }
.footer-col .link-arrow{ display:inline-block; margin-top:14px; color:#fff; border-color: rgba(255,255,255,0.4); }
@media(min-width:800px){ .footer-grid{ grid-template-columns: 1.4fr repeat(3, 1fr); } }

.footer-bottom{ display:flex; flex-direction:column; gap:8px; padding:24px; border-top:1px solid var(--line-dark); font-size:0.8rem; color: rgba(255,255,255,0.4); }
@media(min-width:700px){ .footer-bottom{ flex-direction:row; justify-content:space-between; } }

/* ==========================================================================
   Generic / About / Contact pages
   ========================================================================== */
.page-hero{ padding: 72px 0 24px; }
.page-hero__sub{ margin-top:18px; font-size:1.08rem; color: var(--ink-soft); max-width:60ch; }
.generic-page{ padding: 72px 0 96px; }
.generic-page__content{ margin-top:28px; font-size:1.05rem; color: var(--ink-soft); }
.generic-page__content > * + *{ margin-top:1.2em; }

.about-story{ padding: 48px 0; }
.about-story__block + .about-story__block{ margin-top:40px; }
.about-story__block p{ margin-top:14px; color: var(--ink-soft); font-size:1.02rem; }
.about-story__stats{ margin-top:48px; display:grid; gap:24px; padding-top:32px; border-top:1px solid var(--line); }
.about-story__stat strong{ display:block; font-family:var(--font-display); font-size:1.7rem; }
.about-story__stat span{ color: var(--ink-faint); font-size:0.88rem; }
@media(min-width:700px){ .about-story__stats{ grid-template-columns: repeat(3,1fr); } }

.about-values{ padding: 48px 0 96px; }
.values-grid{ display:grid; gap:20px; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.value-card{ padding:28px; border-radius: var(--radius-md); background: var(--white); border:1px solid var(--line); }
.value-card p{ margin-top:10px; color:var(--ink-soft); font-size:0.95rem; }

.contact-section{ padding: 24px 0 96px; }
.contact-section__inner{ display:grid; gap:36px; }
.contact-info__steps{ margin-top:20px; display:flex; flex-direction:column; gap:14px; counter-reset: step; }
.contact-info__steps li{ padding-left:36px; position:relative; color: var(--ink-soft); }
.contact-info__steps li::before{
  counter-increment: step; content: counter(step);
  position:absolute; left:0; top:-2px; width:24px; height:24px; border-radius:50%;
  background: var(--gradient-soft); color: var(--indigo-deep); font-family:var(--font-mono); font-size:0.75rem;
  display:flex; align-items:center; justify-content:center;
}
.contact-info__card{ margin-top:32px; padding:22px; border-radius: var(--radius-md); background: var(--paper-alt); border:1px solid var(--line); }
.contact-info__card p{ margin-top:8px; color:var(--ink-soft); font-size:0.92rem; }
.contact-form-card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius-lg); padding:28px; box-shadow: var(--shadow-card); }
@media(min-width:900px){ .contact-section__inner{ grid-template-columns: 0.8fr 1.2fr; } }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
[data-reveal]{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}