/* Tenlyr "fintech-grade" design layer, inspired by Stripe's clarity: soft gradient mesh, slanted bands,
 * pill buttons, layered shadows, tight display type. Brand colours only (indigo + violet).
 * Loaded last. Delete the <link> to this file to go back to the previous look. */
:root{
  --st-ink:#1A1740;            /* headings: deep indigo, not black */
  --st-body:#4A4868;
  --st-mute:#7C7A99;
  --st-line:#E7E5F6;
  --st-tint:#F6F5FE;
  --st-grad:linear-gradient(120deg,#211D57 0%,#3B3488 38%,#544BB8 72%,#8079DE 100%);
  --st-grad-soft:linear-gradient(135deg,#EDEAFB 0%,#DCD8F8 45%,#C9C3F3 100%);
  --st-shadow-1:0 1px 1px rgba(33,29,87,.04),0 2px 6px rgba(33,29,87,.05);
  --st-shadow-2:0 1px 1px rgba(33,29,87,.04),0 12px 32px -12px rgba(33,29,87,.18),0 30px 60px -30px rgba(84,75,184,.25);
  --st-r:16px;
}
body{color:var(--st-body);background:#fff}
h1,h2,h3,h4{color:var(--st-ink);font-feature-settings:"ss01","cv11"}
h1{letter-spacing:-.038em}
h2{letter-spacing:-.03em}

/* ---- buttons: pills ---- */
.btn{border-radius:999px;padding:12px 22px;font-weight:600;letter-spacing:-.005em}
.btn-primary{background:var(--st-grad);background-size:140% 100%;background-position:0 0;border-color:transparent;color:#fff;
  box-shadow:0 1px 1px rgba(33,29,87,.2),0 8px 20px -6px rgba(84,75,184,.55)}
.btn-primary:hover{background:var(--st-grad);background-size:140% 100%;background-position:100% 0;border-color:transparent;
  box-shadow:0 1px 1px rgba(33,29,87,.2),0 14px 28px -8px rgba(84,75,184,.65);transform:translateY(-2px)}
.btn-ghost{background:#fff;border-color:var(--st-line);color:var(--st-ink);box-shadow:var(--st-shadow-1)}
.btn-ghost:hover{background:#fff;border-color:var(--violet-300);color:var(--violet-500);box-shadow:var(--st-shadow-2)}
.btn-white{background:#fff;color:var(--indigo-900);border-color:transparent;box-shadow:0 8px 24px -8px rgba(0,0,0,.35)}
.btn-white:hover{background:#fff;color:var(--violet-500)}

/* ---- nav ---- */
.nav{background:rgba(255,255,255,.7);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px)}
.nav.is-scrolled{background:rgba(255,255,255,.86);border-bottom-color:var(--st-line);box-shadow:0 1px 0 rgba(33,29,87,.03),0 8px 24px -16px rgba(33,29,87,.18)}
.nav-links a{font-weight:500;color:var(--st-body);border-radius:999px;padding:8px 14px;transition:background .2s,color .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{background:var(--st-tint);color:var(--violet-500)}
.nav-cta .btn{padding:10px 18px;font-size:.88rem}

/* ---- hero: gradient mesh + slanted band ---- */
.hero-v2,.inner-hero{position:relative;isolation:isolate;overflow:hidden;background:#fff}
.hero-v2::before,.inner-hero::before{content:"";position:absolute;z-index:-2;inset:-20% -10% auto 38%;height:88%;
  background:
    radial-gradient(40% 50% at 70% 30%,rgba(128,121,222,.55),transparent 70%),
    radial-gradient(35% 45% at 40% 60%,rgba(84,75,184,.38),transparent 70%),
    radial-gradient(30% 40% at 90% 70%,rgba(201,195,243,.8),transparent 70%);
  filter:blur(28px);animation:stDrift 18s ease-in-out infinite alternate}
.hero-v2::after,.inner-hero::after{content:"";position:absolute;z-index:-1;left:-5%;right:-5%;bottom:-1px;height:120px;
  background:#fff;transform-origin:left bottom;transform:skewY(-2.2deg) translateY(60px)}
.inner-hero::before{inset:-40% -10% auto 45%;height:140%;opacity:.8}
@keyframes stDrift{to{transform:translate3d(-4%,6%,0) rotate(6deg) scale(1.06)}}
@media(prefers-reduced-motion:reduce){.hero-v2::before,.inner-hero::before{animation:none}}
.tech-grid-bg{background-image:none}

.hero-v2 h1{font-size:clamp(2.5rem,5.2vw,4.5rem);line-height:1.03;letter-spacing:-.042em;font-weight:600;color:var(--st-ink)}
.hero-v2 h1 em{font-style:normal;background:var(--st-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.tl-w>span{-webkit-text-fill-color:inherit}
.hero-lede{color:var(--st-body);font-size:1.2rem;line-height:1.6}
.hero-eyebrow{background:rgba(255,255,255,.8);border:1px solid var(--st-line);border-radius:999px;color:var(--violet-500);box-shadow:var(--st-shadow-1);padding:6px 14px}
.hero-cred-line{color:var(--st-mute)}

/* hero system card -> floating product UI */
.hero-system-card{background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);border-radius:20px;
  box-shadow:var(--st-shadow-2),inset 0 1px 0 #fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transform:perspective(1400px) rotateY(-5deg) rotateX(2deg);transition:transform .6s var(--ease-spring)}
.hero-system-card:hover{transform:perspective(1400px) rotateY(0) rotateX(0)}
@media(max-width:900px){.hero-system-card{transform:none}}
.system-node{border-radius:10px;border-color:var(--st-line);box-shadow:var(--st-shadow-1)}

/* ---- sections ---- */
.eyebrow,.rv-kicker{color:var(--violet-500)}
.section-states,.section-problems,.section-approach,.section-work-v2{background:#fff}
.section-states{background:linear-gradient(180deg,#fff,var(--st-tint))}
.offer-sec{background:var(--st-tint);position:relative;isolation:isolate;overflow:hidden;border:0}
.offer-sec::before{content:"";position:absolute;z-index:-1;inset:0;background:
  radial-gradient(50% 60% at 100% 0,rgba(201,195,243,.7),transparent 70%),
  radial-gradient(40% 50% at 0 100%,rgba(237,234,251,.9),transparent 70%)}
.rv-sec.alt{background:var(--st-tint);border-color:var(--st-line)}

/* cards */
.state-card,.problem-card,.rv-card,.offer-card,.approach-card,.engagement-card,.more-card,.decision-card,
.infra-deep-card,.build-cap-card,.featured-case-card,.secondary-case-card,.sr-finding,.sr-steps li,.rv-steps li,.stat-proof-box{
  border-radius:var(--st-r);border:1px solid var(--st-line);background:#fff;box-shadow:var(--st-shadow-1);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.state-card:hover,.problem-card:hover,.offer-card:hover,.approach-card:hover,.engagement-card:hover,.more-card:hover,
.decision-card:hover,.featured-case-card:hover,.secondary-case-card:hover,.rv-card:hover{
  transform:translateY(-4px);box-shadow:var(--st-shadow-2);border-color:rgba(128,121,222,.45)}
.offer-card .mono,.state-label{color:var(--violet-500)}

/* dark sections: indigo gradient with glow */
.dark-section,.section-infra-v2,.section-growth{background:
  radial-gradient(60% 80% at 85% 0,rgba(128,121,222,.35),transparent 65%),
  radial-gradient(50% 70% at 0 100%,rgba(84,75,184,.3),transparent 65%),
  linear-gradient(180deg,#1A1740,#12102F)}
.section-final-cta{background:var(--st-grad);color:#fff;position:relative;isolation:isolate;overflow:hidden}
.section-final-cta::before{content:"";position:absolute;inset:-30% -10% auto 40%;height:160%;z-index:-1;
  background:radial-gradient(40% 40% at 50% 40%,rgba(201,195,243,.55),transparent 70%);filter:blur(30px)}
.section-final-cta h2,.section-final-cta p{color:#fff}
.section-final-cta .reassure{color:rgba(255,255,255,.75)}
.section-final-cta .btn-primary{background:#fff;color:var(--indigo-900);box-shadow:0 12px 28px -10px rgba(0,0,0,.45)}
.section-final-cta .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);box-shadow:none}
.section-final-cta .btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}

/* forms */
.form-row input,.form-row select,.form-row textarea{border-radius:10px;border-color:var(--st-line);background:#fff;transition:box-shadow .2s,border-color .2s}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:var(--violet-500);box-shadow:0 0 0 4px rgba(84,75,184,.14);outline:0}
.contact-form{border-radius:20px;box-shadow:var(--st-shadow-2);border-color:var(--st-line)}

/* footer */
.footer{background:var(--st-tint);border-top:1px solid var(--st-line)}

/* offer popup + sample banner accents */
.sr-banner{border-radius:12px}

/* polish */
.section-final-cta .eyebrow,.section-final-cta .eyebrow *{color:#fff}
.section-final-cta .reassure{font-size:.8rem;letter-spacing:.03em;max-width:520px;margin-inline:auto}
.section-final-cta{margin-bottom:0}
.footer{margin-top:0}
@media(max-width:900px){
  .hero-v2::before,.inner-hero::before{inset:-10% -40% auto -40%;height:70%;opacity:.75}
  .hero-cred-line{flex-wrap:wrap;gap:4px 14px}
  .hero-cred-line span:nth-child(even){display:none}
}

/* ---- v4: Inter display type everywhere, closer to stripe.com ---- */
h1,h2,h3,h4,.brand-text{font-family:'Inter',system-ui,sans-serif}
h1{font-weight:600;letter-spacing:-.045em;line-height:1.05}
h2{font-weight:600;letter-spacing:-.04em;line-height:1.1}
h3,h4{font-weight:600;letter-spacing:-.02em}
.inner-hero{padding-top:calc(72px + clamp(40px,6vw,80px));padding-bottom:clamp(64px,8vw,110px);background:linear-gradient(180deg,#F3F1FD 0%,#fff 100%)}
.inner-hero::before{filter:none;opacity:.9;inset:-30% -15% auto 45%;height:130%;transform:skewY(-12deg);transform-origin:top right;
  background:
   linear-gradient(100deg,transparent 0 30%,rgba(184,178,242,.7) 30% 55%,rgba(128,121,222,.6) 55% 72%,rgba(84,75,184,.55) 72% 88%,rgba(33,29,87,.55) 88%);
  border-radius:0 0 0 80px;animation:none;-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 80%);mask-image:linear-gradient(180deg,#000 40%,transparent 80%)}
.inner-hero::after{display:none}
.inner-hero h1{font-size:clamp(2.3rem,4.8vw,3.9rem);max-width:780px}
.inner-hero h1 em{font-style:normal;background:var(--st-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.inner-hero .hero-lede{font-size:clamp(1.08rem,1.5vw,1.25rem);max-width:620px}
.eyebrow{font-family:'IBM Plex Mono',monospace;color:var(--violet-500);letter-spacing:.08em}
.section-head h2,.rv-sec h2{font-size:clamp(1.9rem,3.6vw,2.8rem);letter-spacing:-.04em}
.rv-sec h2{font-family:'Inter',system-ui,sans-serif}
.rv-table-wrap,.tl-faq details{border-radius:var(--st-r);border-color:var(--st-line);box-shadow:var(--st-shadow-1)}
.rv-table thead th{background:var(--st-tint)}
.footer{padding-top:64px}
.footer h4{font-family:'IBM Plex Mono',monospace;letter-spacing:.08em;font-size:.72rem;color:var(--st-mute)}
.footer a:hover{color:var(--violet-500)}
.case-study-hero{background:linear-gradient(180deg,#F3F1FD,#fff)}
.rv-photo img{aspect-ratio:1/1;max-height:440px;object-position:center 15%;border-radius:20px;box-shadow:var(--st-shadow-2);border:0}

/* fix: cards inside dark sections stay dark so their light text is readable */
.dark-section .build-cap-card,.dark-section .infra-deep-card,.dark-section .approach-card,.dark-section .decision-card,.dark-section .problem-card,.dark-section .more-card,.dark-section .engagement-card{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);box-shadow:none;color:#F4F3FA}
.dark-section .build-cap-card:hover,.dark-section .infra-deep-card:hover,.dark-section .approach-card:hover,.dark-section .decision-card:hover{background:rgba(255,255,255,.11);border-color:rgba(184,179,242,.55);box-shadow:none}
.dark-section .build-cap-card,.dark-section .build-cap-card *{color:#F4F3FA}

/* ---- mobile polish (phones): 44px touch targets, readable small text, tighter rhythm, calmer footer ---- */
@media (max-width:640px){
  html{-webkit-text-size-adjust:100%}
  body{font-size:16px;line-height:1.6}
  /* touch targets */
  .burger{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;margin-right:-6px}
  .brand{min-height:44px}
  .nav-cta .btn{min-height:44px}
  .mobile-panel a{min-height:48px;display:flex;align-items:center}
  .footer-col a{padding:12px 0;min-height:44px}
  .scale-tab-btn,.filter-btn,.rv-link,.st-link,#heroSecondaryCta{min-height:44px}
  .st-link,#heroSecondaryCta,.rv-link{display:inline-flex;align-items:center}
  .scale-tab-btn,.filter-btn{padding-top:11px;padding-bottom:11px}
  a[href^="mailto:"]{display:inline-block;padding:10px 0}
  /* small text floor: nothing under 12px, labels 12.5px+ */
  .eyebrow,.rv-kicker,.case-spec-label,.callout-label,.featured-tag,.flow-step-tag,.approach-step-num,.footer h4,.footer-col h4,.drawer-footer-reassure{font-size:.8rem}
  .form-row label,.drawer-form label{font-size:.9rem}
  .st-stage,.st-eyebrow,.tag,.typical-work-tag,.typical-work-title,.situation-num,.mono,.flow-step-tag,.approach-step-num{font-size:max(.78rem,12.5px)}
  .drawer-close-btn{min-width:44px;min-height:44px}
  .chip-btn{min-height:44px;padding-top:11px;padding-bottom:11px}
  /* rhythm: shorter pages without losing air */
  .section{padding:60px 0}
  .section-tight{padding:44px 0}
  .section-head{margin-bottom:28px}
  .inner-hero{padding-top:calc(72px + 28px);padding-bottom:48px}
  .footer{padding-top:40px}
  /* footer: two columns instead of one long list */
  .footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
  .footer-col:first-child{grid-column:1/-1}
  .footer-col:first-child{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
  .footer-col:first-child h4{grid-column:1/-1}
  /* long reading pages */
  p,li{overflow-wrap:break-word}
}