/* ==========================================================================
   Paintune — "Aigence" style
   Converted from the Aigence AI-agency template: deep navy ground, magenta→blue
   gradient accents, Plus Jakarta Sans, pill buttons, circular arrow actions,
   4-point sparkles, overlapping rounded cards, alternating light/dark sections.

   Animation is native — IntersectionObserver + CSS — rather than
   jQuery + WOW.js + GSAP + jarallax (~1 MB of vendor code in the original).
   Same vocabulary: fadeInUp / fadeInLeft / fadeInRight with stagger delays,
   counters, marquee, parallax drift, gradient orb drift.
   ========================================================================== */

:root {
  /* ground */
  --navy:      #0D1A42;
  --navy-2:    #081435;
  --navy-3:    #020B28;
  --navy-4:    #00040E;
  --navy-card: #14224F;
  --light:     #FFFFFF;
  --light-soft:#F7F8FC;
  --light-2:   #E6EAFF;
  --line-lt:   #E6E9F5;
  --white:     #FFFFFF;

  /* accents */
  --magenta:   #D032AF;
  --blue:      #3E5DFF;
  --violet:    #7B3FE4;
  --grad:      linear-gradient(90deg, #D032AF 0%, #7B3FE4 52%, #3E5DFF 100%);
  --grad-135:  linear-gradient(135deg, #D032AF 0%, #7B3FE4 52%, #3E5DFF 100%);

  /* text */
  --txt:       #959CB2;
  --txt-2:     #8C9ED3;
  --txt-dark:  #56618A;

  --border:    rgba(230, 234, 255, .12);
  --border-lt: #E1E6FF;

  --font: "Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif;

  --wrap:   1290px;
  --gutter: clamp(1.25rem, 4vw, 2.25rem);
  --sec-y:  clamp(4.5rem, 8vw, 120px);
  --r:      20px;
  --r-sm:   14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--txt);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; color: var(--white); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--magenta); color: #fff; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; border-radius: 4px; }

.sprite { display: none; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--white); color: var(--navy); padding: .75rem 1rem; }
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sec-y); position: relative; }
.section-light { background: var(--light); color: var(--txt-dark); }
.section-light-soft { background: var(--light-soft); color: var(--txt-dark); }
.section-light h1, .section-light h2, .section-light h3,
.section-light-soft h1, .section-light-soft h2, .section-light-soft h3 { color: var(--navy); }
.section-light .deck, .section-light-soft .deck,
.section-light p, .section-light-soft p { color: var(--txt-dark); }

/* components on a white ground */
.section-light .card, .section-light-soft .card,
.section-light .stat, .section-light-soft .stat,
.section-light .step, .section-light-soft .step {
  background: #fff; border-color: var(--line-lt);
}
.section-light-soft .card, .section-light-soft .stat { background: #fff; }
.section-light .card:hover, .section-light-soft .card:hover { border-color: rgba(208,50,175,.35); box-shadow: 0 18px 44px rgba(13,26,66,.09); }
.section-light .stat { background: linear-gradient(180deg, #fff, #FBFCFF); }
.section-light .stat b, .section-light-soft .stat b { color: var(--navy); }
.section-light .card-num, .section-light-soft .card-num { color: #C3C9DE; }
.section-light .icon-badge, .section-light-soft .icon-badge {
  background: linear-gradient(135deg, rgba(208,50,175,.12), rgba(62,93,255,.12));
  border-color: var(--line-lt); color: var(--magenta);
}
.section-light .step, .section-light-soft .step { border-style: dashed; border-color: #DCE1F2; }
.section-light .step:hover, .section-light-soft .step:hover { background: #fff; border-color: rgba(208,50,175,.35); }
.section-light .checks li, .section-light-soft .checks li { color: var(--txt-dark); }
.section-light .arrow-btn, .section-light-soft .arrow-btn { box-shadow: 0 8px 20px rgba(208,50,175,.22); }

.ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================ typography = */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem 1rem .45rem .5rem;
  background: rgba(208, 50, 175, .10);
  border: 1px solid rgba(208, 50, 175, .28);
  border-radius: 999px;
  font-size: .8125rem; font-weight: 600; color: #E4A0D6; letter-spacing: .01em;
}
.section-light .eyebrow { background: rgba(208,50,175,.07); color: #A32A88; }
.eyebrow .spark { width: 15px; height: 15px; flex: none; }

h1 { font-size: clamp(2.5rem, 5.6vw, 4.5rem); font-weight: 800; line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 800; letter-spacing: -.028em; text-wrap: balance; }
h3 { font-size: 1.25rem; font-weight: 700; }

/* gradient-filled words */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* hollow outline word, as in the template */
.outline-text {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .38);
  font-weight: 800; letter-spacing: .01em;
}

.deck { font-size: 1.0625rem; line-height: 1.8; color: var(--txt); text-wrap: pretty; }
.section-light .deck { color: var(--txt-dark); }

.sec-head { display: grid; gap: 1.1rem; justify-items: start; max-width: 42rem; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.sec-head.center { justify-items: center; text-align: center; margin-inline: auto; }

/* =============================================================== buttons = */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 1.9rem; border-radius: 999px;
  font-family: var(--font); font-size: .875rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid transparent; cursor: pointer; position: relative; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, color .25s ease;
}
.btn-grad { background: var(--grad); color: #fff; background-size: 200% 100%; }
.btn-grad:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 12px 32px rgba(208, 50, 175, .34); }
.btn-line { border-color: rgba(255,255,255,.22); color: #fff; }
.btn-line:hover { border-color: #fff; transform: translateY(-2px); }
.section-light .btn-line { border-color: rgba(13,26,66,.2); color: var(--navy); }
.section-light .btn-line:hover { border-color: var(--navy); }
.btn-sm { padding: .7rem 1.35rem; font-size: .75rem; }

/* circular arrow action, the template's signature control */
.arrow-btn {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--grad); color: #fff;
  display: grid; place-items: center; flex: none;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.arrow-btn .ico { width: 18px; height: 18px; }
.arrow-btn:hover { transform: rotate(-45deg) scale(1.06); }

.actions { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

/* ================================================================ header = */
.topbar {
  background: var(--navy-3); color: rgba(255,255,255,.78);
  border-bottom: 1px solid var(--border);
  font-size: .8125rem; font-weight: 500;
}
.topbar .ico { color: var(--magenta); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .6rem; flex-wrap: wrap; }
.topbar a { display: inline-flex; align-items: center; gap: .45rem; opacity: .92; }
.topbar a:hover { opacity: 1; }
.topbar .ico { width: 14px; height: 14px; }
.topbar-left { display: flex; gap: 1.75rem; flex-wrap: wrap; }

.site-header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(13, 26, 66, .86);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; gap: 1.75rem; min-height: 78px; }

.brand { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.375rem; font-weight: 800; color: #fff; letter-spacing: -.035em; }
.brand-orb { width: 34px; height: 34px; flex: none; border-radius: 12px; background: url("../img/paintune-mark-v4.svg") center / contain no-repeat; box-shadow: 0 0 22px rgba(130,91,255,.42); display: grid; place-items: center; }
.brand-orb svg { display: none; }

/* =============================================================== AUTH ==== */
.auth-page { min-height: 100vh; background: #090d25; color: #fff; }
.auth-page::before, .auth-page::after { content: ""; position: fixed; border-radius: 50%; pointer-events: none; filter: blur(2px); }
.auth-page::before { width: 58vw; height: 58vw; left: -27vw; top: -28vw; background: radial-gradient(circle, rgba(208,50,175,.32), transparent 66%); }
.auth-page::after { width: 55vw; height: 55vw; right: -24vw; bottom: -29vw; background: radial-gradient(circle, rgba(62,93,255,.3), transparent 66%); }
.auth-shell { position: relative; z-index: 1; width: min(100% - 2rem, 500px); min-height: 100vh; margin: 0 auto; padding: clamp(2rem, 6vh, 4.25rem) 0 1.5rem; display: grid; align-content: center; gap: clamp(1.5rem, 4vh, 2.4rem); }
.auth-brand { justify-self: center; }
.auth-card { padding: clamp(1.6rem, 5vw, 2.6rem); border: 1px solid rgba(255,255,255,.13); border-radius: 26px; background: linear-gradient(145deg, rgba(30,28,78,.88), rgba(11,15,43,.9)); box-shadow: 0 32px 80px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(20px); }
.auth-copy { display: grid; gap: .7rem; margin-bottom: 1.8rem; }.auth-eyebrow { color: #f19adc; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.auth-copy h1 { max-width: 13ch; font-size: clamp(2rem, 6vw, 2.75rem); line-height: 1.05; letter-spacing: -.05em; }.auth-copy p { color: rgba(235,237,255,.68); line-height: 1.65; }
.auth-form { display: grid; gap: 1.05rem; }.auth-form > label { display: grid; gap: .48rem; color: rgba(238,240,255,.82); font-size: .82rem; font-weight: 700; }
.auth-form input[type="email"], .auth-form input[type="password"], .auth-form input[type="text"] { width: 100%; min-height: 50px; padding: .85rem .95rem; border: 1px solid rgba(255,255,255,.15); border-radius: 11px; outline: 0; background: rgba(4,7,26,.52); color: #fff; font: 500 .92rem var(--font); transition: border-color .2s, box-shadow .2s; }
.auth-form input:focus { border-color: rgba(202,116,255,.9); box-shadow: 0 0 0 4px rgba(162,95,255,.16); }.auth-form input::placeholder { color: rgba(231,234,255,.38); }
.password-field { position: relative; }.password-field input { padding-right: 4.4rem !important; }.password-toggle { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #bd9cff; font: 800 .72rem var(--font); cursor: pointer; }
.auth-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .78rem; }.auth-row a, .auth-switch a, .terms-check a, .auth-footer a { color: #d49bff; }.auth-row a:hover, .auth-switch a:hover, .terms-check a:hover, .auth-footer a:hover { color: #fff; }
.check-label { display: flex !important; align-items: flex-start; gap: .55rem; font-size: .78rem !important; line-height: 1.45; cursor: pointer; }.check-label input { width: 16px; height: 16px; margin: .1rem 0 0; accent-color: #b060fa; }.terms-check { color: rgba(238,240,255,.67) !important; }
.auth-submit { width: 100%; min-height: 52px; justify-content: center; margin-top: .2rem; }.auth-status { min-height: 0; color: #9fe4b4; font-size: .78rem; line-height: 1.5; }.auth-status:not(.is-visible) { display: none; }
.auth-switch { margin-top: 1.45rem; padding-top: 1.35rem; border-top: 1px solid rgba(255,255,255,.1); color: rgba(238,240,255,.68); font-size: .86rem; text-align: center; }.auth-footer { color: rgba(235,237,255,.45); font-size: .74rem; text-align: center; }
@media (max-width: 440px) { .auth-shell { width: min(100% - 1rem, 500px); }.auth-card { border-radius: 20px; }.auth-row { align-items: flex-start; flex-direction: column; gap: .65rem; } }

/* Auth experience refresh — a real product moment instead of a generic form. */
.auth-shell { width: min(100% - 2rem, 1080px); grid-template-columns: 1fr; align-content: center; }
.auth-brand { justify-self: start; }
.auth-layout { display: grid; grid-template-columns: 1.08fr .92fr; min-height: 590px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 30px; background: rgba(10,13,38,.8); box-shadow: 0 34px 95px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.08); }
.auth-layout .auth-card { min-height: 100%; padding: clamp(2rem, 4.3vw, 4rem); border: 0; border-radius: 0; background: linear-gradient(155deg, rgba(28,27,73,.86), rgba(9,13,37,.98)); box-shadow: none; display: flex; flex-direction: column; justify-content: center; }
.auth-showcase { position: relative; overflow: hidden; padding: clamp(2rem, 4vw, 3.5rem); background: radial-gradient(circle at 78% 16%, rgba(198,99,255,.48), transparent 27%), radial-gradient(circle at 23% 75%, rgba(65,120,255,.5), transparent 35%), linear-gradient(145deg, #171240, #101a4a 55%, #11102d); display: flex; flex-direction: column; justify-content: flex-end; }
.auth-showcase--signup { background: radial-gradient(circle at 73% 16%, rgba(244,95,204,.45), transparent 28%), radial-gradient(circle at 28% 78%, rgba(73,139,255,.45), transparent 35%), linear-gradient(145deg, #201044, #101d51 58%, #11102d); }
.auth-orbit { position: absolute; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; pointer-events: none; }.orbit-a { width: 520px; height: 520px; right: -270px; top: -275px; }.orbit-b { width: 360px; height: 360px; left: -210px; bottom: 40px; border-color: rgba(193,105,255,.23); }
.auth-art-window { position: absolute; z-index: 1; width: min(74%, 420px); top: 9%; left: 50%; transform: translateX(-50%) rotate(-5deg); border: 1px solid rgba(255,255,255,.22); border-radius: 17px; overflow: hidden; background: #111335; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.art-window-bar { height: 31px; padding: 0 10px; display: flex; align-items: center; gap: 5px; color: rgba(237,240,255,.55); font: 700 .58rem/1 var(--font); letter-spacing: .05em; text-transform: uppercase; background: rgba(255,255,255,.08); }.art-window-bar i { width: 6px; height: 6px; border-radius: 50%; background: #f075d1; }.art-window-bar i:nth-child(2) { background: #a676fc; }.art-window-bar i:nth-child(3) { background: #79a5ff; }.art-window-bar span { margin-left: .25rem; }
.auth-art-scene { position: relative; height: clamp(155px, 19vw, 220px); overflow: hidden; background: linear-gradient(150deg, #23175a 0%, #6340c7 38%, #ee72c7 70%, #ffd0a1 100%); }.scene-sun { position: absolute; width: 29%; aspect-ratio: 1; right: 18%; top: 19%; border-radius: 50%; background: #ffe8c9; box-shadow: 0 0 45px rgba(255,217,184,.9); }.scene-hill { position: absolute; bottom: -24%; border-radius: 50% 50% 0 0; transform: rotate(-12deg); }.hill-a { width: 105%; height: 65%; left: -15%; background: #29145c; }.hill-b { width: 93%; height: 42%; right: -24%; bottom: -16%; background: #151344; }.scene-glow { position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(0deg, rgba(6,8,35,.75), transparent); }
.signup-art { top: 18%; transform: translateX(-50%) rotate(4deg); }.auth-prompt-card { position: absolute; z-index: 3; top: 7%; left: 9%; right: 9%; padding: .72rem .8rem; display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: center; border: 1px solid rgba(255,255,255,.17); border-radius: 12px; background: rgba(10,11,36,.62); box-shadow: 0 14px 35px rgba(0,0,0,.2); backdrop-filter: blur(12px); color: rgba(245,246,255,.83); font-size: .67rem; }.prompt-spark { color: #ff83da; font-size: 1.1rem; }.auth-prompt-card b { padding: .35rem .5rem; border-radius: 7px; background: linear-gradient(135deg, #e957cb, #755aff); color: #fff; font-size: .62rem; }
.auth-showcase-copy { position: relative; z-index: 2; display: grid; gap: .9rem; max-width: 27rem; }.auth-showcase-copy .auth-showcase-title { font-size: clamp(1.75rem, 3vw, 2.55rem); line-height: 1.03; letter-spacing: -.055em; }.auth-showcase-copy p { max-width: 39ch; color: rgba(239,242,255,.72); font-size: .9rem; line-height: 1.68; }
.auth-fact { position: relative; z-index: 2; width: max-content; max-width: 100%; margin-top: 1.65rem; padding: .55rem .75rem; display: flex; align-items: center; gap: .55rem; border-radius: 999px; background: rgba(4,7,31,.33); border: 1px solid rgba(255,255,255,.14); color: rgba(245,247,255,.67); font-size: .68rem; }.auth-fact b { color: #fff; }.fact-dot { width: 7px; height: 7px; border-radius: 50%; background: #93e4ae; box-shadow: 0 0 13px #93e4ae; }
@media (max-width: 800px) { .auth-shell { width: min(100% - 1.5rem, 560px); }.auth-brand { justify-self: center; }.auth-layout { display: block; min-height: 0; border-radius: 24px; }.auth-showcase { min-height: 350px; }.auth-layout .auth-card { min-height: auto; border-top: 1px solid rgba(255,255,255,.1); }.auth-showcase-copy { margin-top: 130px; }.auth-footer { margin-bottom: 1rem; } }
@media (max-width: 440px) { .auth-shell { width: min(100% - 1rem, 560px); }.auth-showcase { min-height: 305px; padding: 1.5rem; }.auth-showcase-copy { margin-top: 105px; }.auth-art-window { width: 75%; }.auth-layout .auth-card { padding: 1.7rem; }.auth-showcase-copy .auth-showcase-title { font-size: 1.7rem; } }

.site-nav { display: flex; align-items: center; gap: 2rem; margin-inline: auto; }
.site-nav a {
  font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.72); position: relative; padding-block: .4rem;
  transition: color .2s ease;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--grad); transition: width .3s ease;
}
.site-nav a:hover, .site-nav a[aria-current] { color: #fff; }
.site-nav a:hover::after, .site-nav a[aria-current]::after { width: 100%; }

/* ================================================================== hero = */
.hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(4rem, 8vw, 7rem); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(46% 52% at 12% 22%, rgba(208, 50, 175, .17) 0%, transparent 68%),
    radial-gradient(44% 50% at 84% 26%, rgba(62, 93, 255, .16) 0%, transparent 68%),
    radial-gradient(60% 60% at 50% 100%, rgba(123, 63, 228, .10) 0%, transparent 70%);
  animation: orbDrift 18s ease-in-out infinite alternate;
}
@keyframes orbDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-2.5%, 2%, 0) scale(1.07); }
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--noise); background-size: 320px 320px; opacity: .05;
}
.hero .wrap { position: relative; z-index: 2; }

.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero-copy { display: grid; gap: 1.5rem; justify-items: start; }
.hero-copy .deck { max-width: 34rem; }

/* the inline pill image inside the headline */
.pill-img {
  display: inline-block; vertical-align: middle;
  width: clamp(120px, 15vw, 190px); height: clamp(48px, 6vw, 72px);
  border-radius: 999px; overflow: hidden; margin-inline: .2em;
  border: 2px solid rgba(255,255,255,.25);
  transform: translateY(-.06em);
}
.pill-img img { width: 100%; height: 100%; object-fit: cover; }

/* hero visual */
.hero-visual { position: relative; }
.hero-figure {
  position: relative; border-radius: 260px 260px var(--r) var(--r);
  overflow: hidden; aspect-ratio: 625 / 830;
  background: var(--navy-2); border: 1px solid var(--border);
}
.hero-figure img { width: 100%; height: 100%; object-fit: cover; }
.hero-figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(13,26,66,.72) 100%);
}

/* floating stat card over the hero image */
.float-card {
  position: absolute; z-index: 3;
  background: rgba(20, 34, 79, .82); backdrop-filter: blur(14px);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 1rem 1.15rem; display: grid; gap: .2rem; min-width: 172px;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
  animation: floatY 5.5s ease-in-out infinite;
}
.float-card b { color: #fff; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.float-card > span { font-size: .75rem; color: var(--txt-2); font-weight: 600; }
.float-a { left: -1.5rem; top: 16%; }
.float-b { right: -1rem; bottom: 15%; animation-delay: -2.6s; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* sparkles */
.spark { color: var(--magenta); }
.spark-float { position: absolute; z-index: 3; animation: sparkTwinkle 3.2s ease-in-out infinite; }
@keyframes sparkTwinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: .95; }
  50%      { transform: scale(1.28) rotate(22deg); opacity: .55; }
}

/* ============================================================== marquee = */
.marquee { border-block: 1px solid var(--border); overflow: hidden; padding-block: 1.35rem; background: var(--navy-2); }
.marquee-track { display: flex; gap: 3.5rem; width: max-content; animation: marq 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { display: inline-flex; align-items: center; gap: 3.5rem; font-size: clamp(1.25rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ================================================================= cards = */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.card {
  position: relative; background: var(--navy-card);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 2rem 1.85rem; display: grid; gap: .85rem; align-content: start;
  overflow: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad); transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.card:hover { transform: translateY(-8px); border-color: rgba(208,50,175,.4); }
.card:hover::before { transform: scaleX(1); }
.card p { font-size: .9375rem; line-height: 1.75; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.card-num { font-family: var(--font); font-size: .75rem; font-weight: 700; color: rgba(255,255,255,.28); letter-spacing: .12em; }

/* Capability stories — each action gets room for its explanation and a visual,
   instead of asking six equal cards to carry very different ideas. */
.feature-stories { max-width: 1120px; margin: 0 auto; display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.feature-story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.feature-story-copy { max-width: 590px; display: grid; gap: .72rem; }
.feature-kicker { color: var(--magenta); font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.feature-story h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--navy); letter-spacing: -.035em; line-height: 1.05; }
.feature-story p { max-width: 55ch; color: var(--txt-dark); font-size: 1rem; line-height: 1.75; }
.feature-story .text-link { display: inline-flex; align-items: center; gap: .45rem; width: max-content; margin-top: .35rem; color: var(--navy); font-size: .9rem; font-weight: 750; border-bottom: 1px solid rgba(208,50,175,.42); padding-bottom: .2rem; }
.feature-story .text-link:hover { color: var(--magenta); border-bottom-color: var(--magenta); }
.feature-story .text-link .ico { width: 15px; height: 15px; transition: transform .25s ease; }
.feature-story .text-link:hover .ico { transform: translateX(4px); }
.feature-story-visual { position: relative; margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #050b20, #17104a); box-shadow: 0 22px 52px rgba(13,26,66,.14); }
.feature-story-visual::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.12); border-radius: inherit; pointer-events: none; }
.feature-story-visual img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .65s cubic-bezier(.2,.75,.25,1); }
.feature-story:hover .feature-story-visual img { transform: scale(1.025); }
/* The Style Lock composition has more deliberate negative space than the
   other feature images, so crop it a little closer to retain equal visual
   weight within the shared visual frame. */
.feature-story:nth-child(2) .feature-story-visual img { transform: scale(1.17); object-position: center; }
.feature-story:nth-child(2):hover .feature-story-visual img { transform: scale(1.2); }
.feature-story:nth-child(even) .feature-story-copy { order: 2; }
.feature-story:nth-child(even) .feature-story-visual { order: 1; }
.upscale-visual { background: #11152a; }
.upscale-comparison { position: relative; width: 100%; height: 100%; overflow: hidden; }
.upscale-comparison img { display: block; width: 100%; height: 100%; object-fit: cover; }
.upscale-before { filter: saturate(1.04) contrast(1.04); }
.upscale-after {
  position: absolute; inset: 0; width: 100%; overflow: hidden;
  /* Reveal a full-size copy through a mask; do not resize it to the revealed
     half, otherwise the two sides no longer line up as the handle moves. */
  clip-path: inset(0 0 0 var(--compare));
}
.upscale-after img { width: 100%; height: 100%; max-width: none; object-fit: cover; filter: blur(2.6px) saturate(.8) contrast(.88); }
.upscale-divider { position: absolute; z-index: 2; top: 50%; left: var(--compare); width: 36px; height: 36px; transform: translate(-50%,-50%); border-radius: 50%; background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.36); }
.upscale-divider::before, .upscale-divider::after { content: ""; position: absolute; top: 12px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.upscale-divider::before { left: 9px; border-right: 7px solid #39206d; }
.upscale-divider::after { right: 9px; border-left: 7px solid #39206d; }
.upscale-label { position: absolute; z-index: 2; top: 14px; padding: .34rem .58rem; border-radius: 999px; background: rgba(7,10,28,.6); color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(8px); }
.label-before { left: 14px; }.label-after { right: 14px; }
.upscale-range { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: col-resize; }
.api-code-visual { padding: 0; background: #090d20; color: #dce5ff; }
.api-code-top { height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 16px; background: rgba(255,255,255,.055); border-bottom: 1px solid rgba(255,255,255,.08); }
.api-code-top span { width: 9px; height: 9px; border-radius: 50%; background: #f47568; }.api-code-top span:nth-child(2) { background: #f4c66a; }.api-code-top span:nth-child(3) { background: #67d69b; }
.api-code-top b { margin-left: .45rem; color: rgba(220,229,255,.7); font: 700 .7rem/1 var(--mono); }
.api-typed-code { margin: 0; padding: clamp(1rem, 3vw, 1.45rem); white-space: pre-wrap; color: #dbe6ff; font: 600 clamp(.58rem, 1vw, .74rem)/1.58 var(--mono); }
.api-typed-code .tok-key { color: #eaa1ff; }.api-typed-code .tok-prop { color: #8fc5ff; }.api-typed-code .tok-string { color: #9ee6b1; }.api-typed-code .tok-number { color: #ffca86; }.api-typed-code .tok-fn { color: #c6b4ff; }
.api-cursor { display: inline-block; width: 7px; height: 1.05em; margin-left: clamp(1rem, 3vw, 1.6rem); background: #ae75ff; box-shadow: 0 0 12px #ae75ff; animation: blink 1s steps(2,end) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.icon-badge {
  width: 62px; height: 62px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, rgba(208,50,175,.20), rgba(62,93,255,.20));
  border: 1px solid rgba(255,255,255,.14);
  display: grid; place-items: center; color: #fff;
}
.icon-badge .ico { width: 26px; height: 26px; }

/* circular image chips used beside the service cards */
.chip-img { width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid rgba(255,255,255,.1); }
.chip-img img { width: 100%; height: 100%; object-fit: cover; }

/* =============================================================== funfact = */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.stat {
  position: relative; text-align: center; padding: 2rem 1rem;
  border-radius: var(--r); border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.045), transparent);
}
.stat b { display: block; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 800; color: #fff; letter-spacing: -.035em; line-height: 1; }
.stat b .suf { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat > span { display: block; margin-top: .5rem; font-size: .875rem; font-weight: 600; color: var(--txt-2); }

/* ============================================================== showcase = */
.showcase { column-count: 3; column-gap: 1.5rem; }
.shot {
  break-inside: avoid; margin: 0 0 1.5rem; border-radius: var(--r); overflow: hidden;
  position: relative; background: var(--navy-card); border: 1px solid var(--border);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.shot:hover { transform: translateY(-6px); }
.shot img { width: 100%; height: auto; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.shot:hover img { transform: scale(1.05); }
.shot-body {
  position: absolute; inset: auto 0 0 0; padding: 1.5rem 1.35rem 1.25rem;
  background: linear-gradient(180deg, transparent, rgba(2, 11, 40, .93) 55%);
  display: grid; gap: .4rem;
  transform: translateY(18px); opacity: 0; transition: transform .4s ease, opacity .4s ease;
}
.shot:hover .shot-body { transform: none; opacity: 1; }
.shot-prompt { color: #fff; font-size: .9375rem; font-weight: 600; line-height: 1.5; }
.shot-meta { font-size: .75rem; color: var(--txt-2); font-weight: 500; }

/* ================================================================ split =  */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split-copy { display: grid; gap: 1.35rem; justify-items: start; }

.checks { display: grid; gap: .9rem; }
.checks li { display: flex; gap: .8rem; align-items: flex-start; font-size: .9688rem; }
.checks .tick { width: 24px; height: 24px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; flex: none; margin-top: .18rem; }
.checks .tick .ico { width: 13px; height: 13px; color: #fff; stroke-width: 2.6; }

/* stacked / overlapping panel set, as in the template's service section */
.stack-figs { position: relative; display: grid; gap: 1.25rem; }
.stack-fig { border-radius: var(--r); overflow: hidden; border: 1px solid var(--border); background: var(--navy-2); }
.stack-fig img { width: 100%; height: 100%; object-fit: cover; }
.stack-figs .offset { transform: translateX(clamp(1rem, 4vw, 3rem)); }

/* ================================================================ steps =  */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.step { position: relative; padding: 2rem 1.5rem; border-radius: var(--r); border: 1px dashed rgba(255,255,255,.16); display: grid; gap: .7rem; align-content: start; transition: background .3s ease, border-color .3s ease; }
.step:hover { background: rgba(255,255,255,.03); border-color: rgba(208,50,175,.4); }
.step-n { width: 52px; height: 52px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; font-size: 1.0625rem; display: grid; place-items: center; }
.step p { font-size: .9063rem; }

/* ================================================================= code =  */
.code { background: var(--navy-4); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.code-bar { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.25rem; border-bottom: 1px solid var(--border); font-size: .75rem; color: var(--txt-2); font-weight: 600; }
.code-dots { display: flex; gap: .4rem; }
.code-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.2); }
.code-dots i:first-child { background: var(--magenta); }
.code pre { margin: 0; padding: 1.4rem 1.5rem; overflow-x: auto; font-family: ui-monospace, Menlo, monospace; font-size: .8125rem; line-height: 1.9; color: #C7CEEA; }
.code .c { color: #5B679A; }
.code .k { color: #E070C8; }
.code .s { color: #7FD0A8; }
.code .p { color: #6E8BFF; }

/* ================================================================== cta =  */
.cta {
  position: relative; overflow: hidden; border-radius: 28px;
  background: var(--grad-135); color: #fff;
  padding: clamp(2.75rem, 6vw, 4.5rem);
  display: grid; grid-template-columns: 1fr auto; gap: 1.25rem clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(50% 120% at 85% 15%, rgba(255,255,255,.22) 0%, transparent 62%);
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { max-width: 20ch; color: #fff; }
.cta .deck { color: rgba(255,255,255,.86); max-width: 44ch; }
.cta .btn-grad { background: #fff; color: var(--navy); }
.cta .btn-grad:hover { background: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.28); }
.cta .btn-line { border-color: rgba(255,255,255,.5); }

/* =============================================================== footer =  */
.site-footer { background: var(--navy-3); padding-block: clamp(3.5rem, 6vw, 5rem) 2rem; position: relative; }
.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: 2.5rem; }
.footer-brand { display: grid; gap: 1.15rem; align-content: start; }
.footer-brand p { font-size: .9375rem; max-width: 30ch; }
.footer-col { display: grid; gap: .7rem; align-content: start; }
.footer-col h2 { letter-spacing: -.02em; color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: .4rem; }
.footer-col a { font-size: .9375rem; color: var(--txt); transition: color .2s ease, padding-left .2s ease; }
.footer-col a:hover { color: #fff; padding-left: .3rem; }
.socials { display: flex; gap: .6rem; }
.socials a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; color: #fff; transition: background .25s ease, transform .25s ease; }
.socials a:hover { background: var(--grad); transform: translateY(-3px); }
.socials .ico { width: 16px; height: 16px; }
.footer-base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem; flex-wrap: wrap; }

/* ============================================================ animation =  */
/* WOW.js vocabulary, native */
[data-anim] { opacity: 0; will-change: transform, opacity; }
[data-anim="up"]    { transform: translateY(46px); }
[data-anim="left"]  { transform: translateX(-46px); }
[data-anim="right"] { transform: translateX(46px); }
[data-anim="zoom"]  { transform: scale(.9); }
[data-anim].in {
  opacity: 1; transform: none;
  transition: opacity .85s cubic-bezier(.2,.8,.2,1), transform .85s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--d, 0ms);
}
.text-motion { opacity: 0; transform: translateY(18px); filter: blur(7px); will-change: transform, opacity, filter; }
.text-motion.in { opacity: 1; transform: translateY(0); filter: blur(0); transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1), filter .65s ease; transition-delay: var(--td, 0ms); }

/* On a narrow viewport the sideways start offsets stick out past the right edge
   until the element scrolls into view, which makes the whole page draggable
   sideways by ~30px. Reveal vertically instead: same effect, no overflow. */
@media (max-width: 900px) {
  [data-anim="left"], [data-anim="right"] { transform: translateY(32px); }
}

/* scroll parallax drift */
[data-parallax] { will-change: transform; }

/* ============================================================ responsive = */
@media (max-width: 1120px) {
  .site-nav { display: none; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .showcase { column-count: 2; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
}
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .topbar-left { gap: 1rem; font-size: .75rem; }
  .float-a { left: 0; } .float-b { right: 0; }
}
@media (max-width: 620px) {
  .cards, .steps, .stats { grid-template-columns: 1fr; }
  .feature-stories { gap: 3.5rem; }
  .feature-story { grid-template-columns: 1fr; gap: 1.35rem; }
  .feature-story:nth-child(even) .feature-story-copy, .feature-story:nth-child(even) .feature-story-visual { order: initial; }
  .feature-story-visual { border-radius: 16px; aspect-ratio: 4 / 3; }
  .showcase { column-count: 1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta { grid-template-columns: 1fr; }
  .actions .btn { flex: 1 1 auto; }
  .float-card { display: none; }
  .topbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-anim], .text-motion { opacity: 1; transform: none; filter: none; }
  .marquee-track { animation: none; }
  .shot-body { opacity: 1; transform: none; }
}

/* ==========================================================================
   Home v2 — referenced from Aigence index-3
   Boxed hero, gradient equalizer bar, curved rotating text, carousel strip,
   and a per-word masked heading reveal (the template only fades headings as
   one block; splitting them reads far better and was asked for).
   ========================================================================== */

/* ---------------------------------------------------- masked word reveal - */
.reveal-words { display: block; }
.reveal-words .w-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
.reveal-words .w {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .95s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--wd, 0ms);
}
.reveal-words.in .w { transform: translateY(0); }

/* ------------------------------------------------------------ boxed hero - */
.hero-box {
  position: relative;
  margin: 0 clamp(.5rem, 1.6vw, 1.25rem);
  border-radius: clamp(20px, 3vw, 40px);
  background: var(--navy-2);
  overflow: hidden;
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 4vw, 3.5rem);
}
.hero-box::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(42% 48% at 10% 18%, rgba(208, 50, 175, .20) 0%, transparent 66%),
    radial-gradient(40% 46% at 88% 30%, rgba(62, 93, 255, .18) 0%, transparent 66%);
  animation: orbDrift 20s ease-in-out infinite alternate;
}
.hero-box::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--noise); background-size: 300px 300px; opacity: .06;
}
.hero-box > .wrap { position: relative; z-index: 2; }

/* ------------------------------------------------------- equalizer strip - */
/* the template's gradient bar, rebuilt as a live spectrum */
.equalizer {
  display: flex; align-items: flex-end; gap: 3px;
  height: clamp(56px, 7vw, 92px);
  border-radius: 999px; overflow: hidden;
  padding: 0 clamp(1rem, 3vw, 2rem);
  background: linear-gradient(90deg, rgba(208,50,175,.14), rgba(123,63,228,.14), rgba(62,93,255,.14));
  border: 1px solid var(--border);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.equalizer i {
  flex: 1 1 auto; min-width: 2px; display: block;
  border-radius: 2px 2px 0 0;
  background: var(--grad); background-size: 1200% 100%;
  height: 30%;
  animation: eq 1.6s ease-in-out infinite alternate;
  transform-origin: bottom;
}
@keyframes eq { from { height: 18%; opacity: .55; } to { height: 92%; opacity: 1; } }

/* --------------------------------------------------- curved circle text -- */
.circle-cta { position: relative; width: clamp(140px, 15vw, 178px); aspect-ratio: 1; display: grid; place-items: center; flex: none; }
.circle-cta > svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.circle-cta > svg text { fill: var(--txt-2); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; }
.circle-cta__btn {
  width: 58px; height: 58px; border-radius: 50%; background: var(--grad); color: #fff;
  display: grid; place-items: center; z-index: 1;
  box-shadow: 0 0 0 8px rgba(255,255,255,.05);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.circle-cta:hover .circle-cta__btn { transform: scale(1.1); }
.circle-cta__btn .ico { width: 20px; height: 20px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------- carousel strip */
.strip { margin-top: clamp(2rem, 4vw, 3rem); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.strip-track { display: flex; gap: 1.25rem; width: max-content; animation: marq 46s linear infinite; }
.strip:hover .strip-track { animation-play-state: paused; }
.strip-item {
  width: clamp(220px, 26vw, 340px); flex: none;
  border-radius: 16px; overflow: hidden; position: relative;
  border: 1px solid var(--border); background: var(--navy-card);
}
.strip-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.strip-item figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.5rem .9rem .8rem;
  background: linear-gradient(180deg, transparent, rgba(2,11,40,.92));
  font-size: .75rem; font-weight: 600; color: #fff;
}

/* ------------------------------------------------------------ hero copy -- */
.hero-head {
  font-size: clamp(2.4rem, 6.2vw, 5.4rem); line-height: 1.02;
  letter-spacing: -.035em; font-weight: 800; color: #fff;
}
/* the template mixes a light and a bold weight inside one headline */
.hero-head .thin { font-weight: 300; }
.hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.hero-lede { max-width: 46ch; font-size: 1.0625rem; line-height: 1.8; color: var(--txt); }

@media (max-width: 880px) {
  .circle-cta { display: none; }
  .hero-bottom { gap: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .equalizer i, .circle-cta svg, .strip-track { animation: none; }
  .equalizer i { height: 55%; }
  .reveal-words .w { transform: none; }
}

/* ==========================================================================
   Interior pages — same language as the home page
   ========================================================================== */

/* --------------------------------------------------------- page hero box - */
.page-hero {
  position: relative; overflow: hidden;
  margin: 0 clamp(.5rem, 1.6vw, 1.25rem);
  border-radius: clamp(20px, 3vw, 40px);
  background: var(--navy-2);
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(44% 60% at 12% 20%, rgba(208,50,175,.20) 0%, transparent 66%),
    radial-gradient(40% 56% at 86% 34%, rgba(62,93,255,.18) 0%, transparent 66%);
  animation: orbDrift 22s ease-in-out infinite alternate;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--noise); background-size: 300px 300px; opacity: .06;
}
.page-hero > .wrap { position: relative; z-index: 2; display: grid; gap: 1.15rem; justify-items: start; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -.035em; }
.page-hero .deck { max-width: 52ch; }
.page-hero .thin { font-weight: 300; }

.crumb { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--txt-2); font-weight: 500; }
.crumb a:hover { color: #fff; }
.crumb span { opacity: .5; }

/* ------------------------------------------------------------- data table */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); background: var(--navy-card); }
.section-light .tbl-wrap, .section-light-soft .tbl-wrap { background: #fff; border-color: var(--line-lt); }
.tbl { width: 100%; border-collapse: collapse; min-width: 34rem; }
.tbl th, .tbl td { text-align: left; padding: 1rem 1.15rem; border-bottom: 1px solid var(--border); font-size: .9063rem; }
.section-light .tbl th, .section-light .tbl td { border-bottom-color: var(--line-lt); }
.tbl th { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--txt-2); background: rgba(255,255,255,.03); }
.section-light .tbl th { background: #F7F8FC; color: var(--txt-dark); }
.tbl td { color: var(--txt); }
.section-light .tbl td { color: var(--txt-dark); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .m { font-family: ui-monospace, Menlo, monospace; font-size: .8438rem; color: #fff; }
.section-light .tbl .m { color: var(--navy); }
.tbl td:first-child { white-space: nowrap; }

/* --------------------------------------------------------------- pipeline */
.pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.stage {
  background: var(--navy-card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 1.6rem 1.25rem; display: grid; gap: .5rem; align-content: start;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}
.stage:hover { transform: translateY(-6px); border-color: rgba(208,50,175,.4); }
.section-light .stage { background: #fff; border-color: var(--line-lt); }
.stage b { font-size: .75rem; font-weight: 700; letter-spacing: .1em; color: var(--magenta); }
.stage h3 { font-size: 1rem; }
.stage p { font-size: .8438rem; line-height: 1.65; }

/* ----------------------------------------------------------------- phases */
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.phase { background: var(--navy-card); border: 1px solid var(--border); border-radius: var(--r); padding: 1.85rem 1.65rem; display: grid; gap: 1rem; align-content: start; }
.section-light .phase { background: #fff; border-color: var(--line-lt); }
.phase-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.phase-when { font-size: .75rem; font-weight: 700; letter-spacing: .1em; color: var(--txt-2); text-transform: uppercase; }
.pill-tag { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 999px; border: 1px solid var(--border); color: var(--txt-2); }
.pill-tag.now { border-color: var(--magenta); color: #E4A0D6; background: rgba(208,50,175,.1); }
.section-light .pill-tag { border-color: var(--line-lt); }
.section-light .pill-tag.now { color: #A32A88; }
.phase ul { display: grid; gap: .85rem; }
.phase li { display: grid; gap: .15rem; }
.phase li b { font-size: .9375rem; color: #fff; font-weight: 700; }
.section-light .phase li b { color: var(--navy); }
.phase li span { font-size: .8438rem; line-height: 1.6; color: var(--txt); }
.section-light .phase li span { color: var(--txt-dark); }

/* -------------------------------------------------------------------- faq */
.faq { display: grid; gap: 1rem; }
.faq details { background: var(--navy-card); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.section-light .faq details { background: #fff; border-color: var(--line-lt); }
.faq summary { cursor: pointer; padding: 1.2rem 1.4rem; font-weight: 700; font-size: 1rem; color: #fff; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.section-light .faq summary { color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--magenta); font-size: 1.35rem; line-height: 1; font-weight: 400; }
.faq details[open] summary::after { content: "\2013"; }
.faq .answer { padding: 0 1.4rem 1.3rem; font-size: .9375rem; line-height: 1.75; color: var(--txt); }
.section-light .faq .answer { color: var(--txt-dark); }

/* ------------------------------------------------------------ media split */
.media-fig { border-radius: var(--r); overflow: hidden; border: 1px solid var(--border); background: var(--navy-2); }
.media-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-stack { display: grid; gap: 1.25rem; }
.media-stack .offset { transform: translateX(clamp(1rem, 3.5vw, 2.5rem)); }

@media (max-width: 1120px) { .pipeline { grid-template-columns: repeat(2, 1fr); } .phases { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .pipeline { grid-template-columns: 1fr; } .media-stack .offset { transform: none; } }

/* ==========================================================================
   v3 — floating pill nav, working mobile menu, hero prompt, richer footer
   Nav + hero-prompt referenced from cognexatechai.com; footer column set and
   contact block from netzeroxai.com.
   ========================================================================== */

/* ------------------------------------------------------- floating pill nav */
.site-header.pill {
  position: sticky; top: 0; z-index: 90;
  background: transparent; backdrop-filter: none; border: 0;
  padding-block: .85rem;
}
/* Glass bar. Three things make it read as glass rather than as a tinted panel:
   a low-alpha fill so what is behind actually shows through, a strong blur with
   saturation lifted so those colours stay vivid through it, and a 1px top
   highlight (the ::before hairline) standing in for a lit edge. */
.site-header.pill .header-inner {
  position: relative; isolation: isolate;
  min-height: 0; padding: .6rem .6rem .6rem 1.4rem;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  backdrop-filter: blur(26px) saturate(1.8);
  -webkit-backdrop-filter: blur(26px) saturate(1.8);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
/* the lit top edge, brightest at the centre */
.site-header.pill .header-inner::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5) 50%, transparent);
  pointer-events: none;
}
/* once scrolled, content runs underneath, so the fill firms up for legibility
   while staying translucent */
.site-header.pill.stuck .header-inner {
  background: linear-gradient(180deg, rgba(13,26,66,.72), rgba(8,20,53,.66));
  border-color: rgba(255,255,255,.13);
  box-shadow:
    0 14px 44px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* No backdrop-filter (older Firefox, or the setting disabled): fall back to an
   opaque bar rather than unreadable text over the page. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.pill .header-inner,
  .site-header.pill.stuck .header-inner { background: rgba(13, 26, 66, .95); }
}
.site-header.pill .site-nav { gap: 1.6rem; }
.site-header.pill .site-nav a { font-size: .8125rem; letter-spacing: .04em; }
.site-header.pill .header-cta { display: flex; align-items: center; gap: .5rem; }

.nav-login { font-size: .8125rem; font-weight: 700; color: #fff; padding: .55rem .9rem; letter-spacing: .04em; text-transform: uppercase; }
.nav-login:hover { color: var(--magenta); }

/* -------------------------------------------------------------- burger --- */
.burger {
  display: none; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--border); border-radius: 999px;
  background: transparent; cursor: pointer; padding: 0;
  place-items: center; gap: 4px;
}
.burger span { display: block; width: 17px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s ease, opacity .25s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 95;
  /* matches the glass bar, but heavier: it covers the whole page, so the fill
     has to stay opaque enough to read links against any section behind it */
  background: rgba(8, 20, 53, .82);
  backdrop-filter: blur(30px) saturate(1.6);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  display: grid; align-content: start; gap: .25rem;
  padding: 6.5rem clamp(1.5rem, 6vw, 3rem) 2rem;
  transform: translateY(-12px); opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  overflow-y: auto;
}
.mobile-menu.open { opacity: 1; transform: none; pointer-events: auto; }
.mobile-menu a {
  font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: -.02em;
  padding: .85rem 0; border-bottom: 1px solid var(--border);
}
.mobile-menu a:hover { color: var(--magenta); }
.mobile-menu .actions { margin-top: 1.75rem; }
body.menu-open { overflow: hidden; }

/* ----------------------------------------------------------- hero prompt - */
.prompt-box {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; max-width: 40rem;
  padding: .5rem .5rem .5rem 1.15rem;
  background: rgba(20, 34, 79, .72);
  border: 1px solid var(--border);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.prompt-box:focus-within { border-color: rgba(208, 50, 175, .55); box-shadow: 0 0 0 4px rgba(208, 50, 175, .12); }
.prompt-box .spark { color: var(--magenta); width: 17px; height: 17px; flex: none; }
.prompt-box input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--font); font-size: .9688rem; color: #fff; padding: .7rem 0;
}
.prompt-box input::placeholder { color: var(--txt-2); }
.prompt-box .btn { flex: none; padding: .8rem 1.4rem; font-size: .8125rem; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.chips .lbl { font-size: .8125rem; color: var(--txt-2); margin-right: .15rem; }
.chip-btn {
  font-family: var(--font); font-size: .8125rem; font-weight: 500;
  color: var(--txt); background: rgba(255, 255, 255, .045);
  border: 1px solid var(--border); border-radius: 999px;
  padding: .45rem .9rem; cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.chip-btn:hover { color: #fff; border-color: rgba(208, 50, 175, .5); background: rgba(208, 50, 175, .1); }

/* ------------------------------------------------------------- pricing --- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; }
.tier {
  position: relative; background: var(--navy-card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 2rem 1.85rem; display: grid; gap: 1.1rem; align-content: start;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}
.tier:hover { transform: translateY(-6px); }
.section-light .tier { background: #fff; border-color: var(--line-lt); }
.tier.featured { border-color: rgba(208,50,175,.55); box-shadow: 0 20px 60px rgba(208,50,175,.16); }
.tier.featured::before { content: "Most popular"; position: absolute; top: -.75rem; left: 1.85rem; background: var(--grad); color: #fff; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .8rem; border-radius: 999px; }
.tier-name { font-size: 1.0625rem; font-weight: 700; color: #fff; }
.section-light .tier-name { color: var(--navy); }
.tier-price { display: flex; align-items: baseline; gap: .35rem; }
.tier-price b { font-size: 2.75rem; font-weight: 800; color: #fff; letter-spacing: -.04em; line-height: 1; }
.section-light .tier-price b { color: var(--navy); }
.tier-price span { font-size: .875rem; color: var(--txt-2); }
.tier ul { display: grid; gap: .7rem; }
.tier li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9063rem; color: var(--txt); }
.section-light .tier li { color: var(--txt-dark); }
.tier li .ico { width: 16px; height: 16px; color: var(--magenta); flex: none; margin-top: .25rem; }

/* -------------------------------------------------------------- footer --- */
.footer-contact-row { display: grid; gap: .55rem; margin-top: .25rem; }
.footer-contact-row a, .footer-contact-row span {
  display: inline-flex; align-items: flex-start; gap: .55rem;
  font-size: .9063rem; color: var(--txt);
}
.footer-contact-row a:hover { color: #fff; }
.footer-contact-row .ico { width: 16px; height: 16px; color: var(--magenta); flex: none; margin-top: .25rem; }
.footer-note { font-size: .8125rem; color: var(--txt-2); }

@media (max-width: 1120px) {
  .site-header.pill .site-nav { display: none; }
  .burger { display: grid; }
  .nav-login { display: none; }
  .tiers { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .site-header.pill .header-inner { padding-left: 1rem; }
  .prompt-box { flex-wrap: wrap; border-radius: var(--r); padding: .9rem; }
  .prompt-box input { width: 100%; flex-basis: 100%; }
  .prompt-box .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .mobile-menu { transition: none; } }

/* ==========================================================================
   Legal pages — sticky contents rail + long-form prose
   ========================================================================== */

.legal-grid { display: grid; grid-template-columns: 250px 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.legal-toc { position: sticky; top: 6.5rem; display: grid; gap: .1rem; }
.legal-toc h2 {
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--txt-2); margin-bottom: .85rem;
}
.legal-toc a {
  display: block; font-size: .9063rem; line-height: 1.45; color: var(--txt);
  padding: .5rem .85rem; border-left: 2px solid var(--border); border-radius: 0 6px 6px 0;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.legal-toc a:hover { color: #fff; border-left-color: var(--magenta); background: rgba(255,255,255,.035); }
.legal-toc a.active { color: #fff; border-left-color: var(--magenta); background: rgba(208,50,175,.09); }

.legal-meta {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center;
  padding-bottom: 1.5rem; margin-bottom: 2rem; border-bottom: 1px solid var(--border);
  font-size: .8438rem; color: var(--txt-2);
}
.legal-meta b { color: #fff; font-weight: 600; }

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 800; color: #fff;
  letter-spacing: -.025em; margin-top: 3rem; scroll-margin-top: 7rem;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.0625rem; font-weight: 700; color: #fff; margin-top: 1.75rem; }
.prose p, .prose li { font-size: .9688rem; line-height: 1.85; color: var(--txt); }
.prose strong { color: #fff; font-weight: 700; }
.prose ul { display: grid; gap: .7rem; padding-left: 1.15rem; list-style: none; }
.prose ul li { position: relative; }
.prose ul li::before {
  content: ""; position: absolute; left: -1.15rem; top: .72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--magenta);
}
.prose a { color: #fff; border-bottom: 1px solid rgba(208,50,175,.6); }
.prose a:hover { border-bottom-color: var(--magenta); color: var(--magenta); }

/* the "not yet lawyer-reviewed" callout — deliberately hard to miss */
.notice {
  margin-top: 3rem; padding: 1.35rem 1.5rem;
  background: rgba(208, 50, 175, .07);
  border: 1px solid rgba(208, 50, 175, .3);
  border-left-width: 3px; border-radius: var(--r-sm);
  display: grid; gap: .5rem;
}
.notice b { color: #fff; font-size: .9375rem; font-weight: 700; }
.notice p { font-size: .875rem; line-height: 1.7; color: var(--txt); }

.legal-foot {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
}
.legal-foot .links { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .875rem; }
.legal-foot .links a { color: var(--txt); }
.legal-foot .links a:hover { color: #fff; }

@media (max-width: 900px) {
  .legal-grid { grid-template-columns: 1fr; }
  .legal-toc { position: static; margin-bottom: 1rem; }
  .legal-toc a { border-left: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding-inline: 0; }
}

/* ==========================================================================
   Hero v4 — centred headline over three fanned image cards
   Layout referenced from the supplied AIForge-style screenshot; palette,
   type and motion are ours.
   ========================================================================== */

.hero-c { position: relative; overflow: hidden; padding-block: clamp(3rem, 6vw, 5rem) 0; }
.hero-c::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(38% 46% at 50% 6%,  rgba(208, 50, 175, .20) 0%, transparent 68%),
    radial-gradient(46% 50% at 14% 34%, rgba(123, 63, 228, .16) 0%, transparent 70%),
    radial-gradient(46% 50% at 86% 34%, rgba(62, 93, 255, .16) 0%, transparent 70%);
  animation: orbDrift 22s ease-in-out infinite alternate;
}
.hero-c::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--noise); background-size: 300px 300px; opacity: .05;
}
.hero-c > .wrap { position: relative; z-index: 2; }

.hero-c-copy { display: grid; gap: 1.4rem; justify-items: center; text-align: center; max-width: 54rem; margin-inline: auto; }
.hero-c-copy h1 { font-size: clamp(2.4rem, 6vw, 4.75rem); line-height: 1.05; letter-spacing: -.035em; }
.hero-c-copy .deck { max-width: 46ch; }
.hero-c-copy .prompt-box { margin-inline: auto; }
.hero-c-copy .chips { justify-content: center; }

/* ------------------------------------------------------------ confetti --- */
.confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.confetti i {
  position: absolute; display: block;
  animation: floatY 6s ease-in-out infinite;
}
.confetti .dot   { width: 12px; height: 12px; border-radius: 50%; }
.confetti .ring  { width: 20px; height: 20px; border-radius: 50%; border: 3px solid currentColor; }
.confetti .bar   { width: 26px; height: 7px; border-radius: 999px; }
.confetti .squig { width: 30px; height: 16px; border: 3px solid currentColor; border-color: currentColor transparent transparent transparent; border-radius: 50%/22px 22px 0 0; }

/* -------------------------------------------------------- fanned cards --- */
.fan {
  position: relative; z-index: 2;
  display: flex; justify-content: center; align-items: flex-start;
  gap: clamp(-2rem, -1.5vw, 1rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(1rem, 3vw, 2.5rem);
  perspective: 1400px;
}
.fan-card {
  position: relative; flex: none;
  width: clamp(160px, 21vw, 300px);
  aspect-ratio: 3 / 4;
  border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: var(--navy-card);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease;
}
.fan-card img { width: 100%; height: 100%; object-fit: cover; }
.fan-card figcaption {
  position: absolute; inset: auto 0 0 0; padding: 2rem .9rem .85rem;
  background: linear-gradient(180deg, transparent, rgba(2, 11, 40, .92));
  font-size: .6875rem; font-weight: 600; color: #fff; letter-spacing: .02em;
  opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease;
}
.fan-card:hover figcaption { opacity: 1; transform: none; }

/* the fan itself */
.fan-card:nth-child(1) { transform: rotate(-11deg) translateY(26px); margin-right: -3.5%; }
.fan-card:nth-child(2) { transform: rotate(1.5deg) translateY(-14px) scale(1.06); z-index: 3; }
.fan-card:nth-child(3) { transform: rotate(10deg) translateY(26px); margin-left: -3.5%; }

.fan-card:nth-child(1):hover { transform: rotate(-5deg) translateY(6px) scale(1.03); z-index: 4; }
.fan-card:nth-child(2):hover { transform: rotate(0deg) translateY(-24px) scale(1.09); }
.fan-card:nth-child(3):hover { transform: rotate(4deg) translateY(6px) scale(1.03); z-index: 4; }
.fan-card:hover { box-shadow: 0 40px 90px rgba(208, 50, 175, .28); }

@media (max-width: 760px) {
  .fan { flex-wrap: wrap; gap: 1rem; perspective: none; }
  .fan-card { width: clamp(140px, 42vw, 220px); margin: 0 !important; }
  .fan-card:nth-child(1) { transform: rotate(-6deg); }
  .fan-card:nth-child(2) { transform: rotate(2deg) scale(1); }
  .fan-card:nth-child(3) { transform: rotate(6deg); }
  .confetti { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .confetti i { animation: none; }
  .fan-card { transition: none; }
}

/* A .grad-text inside a split heading loses its fill: the gradient lives on the
   parent, but after splitting the parent holds no direct text, so background-clip
   has nothing to clip to. Give each word its own gradient instead. */
.reveal-words .grad-text .w {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ==========================================================================
   Page-hero artwork — a content-appropriate graphic on the right of every
   interior page. Photographs where a photograph means something; a drawn
   figure where it would only be decoration.
   ========================================================================== */

.page-hero > .wrap {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.page-hero .hero-copy-col { display: grid; gap: 1.15rem; justify-items: start; }

.hero-art { position: relative; justify-self: end; width: 100%; max-width: 420px; }

/* About hero visual: no card, outline, or image rectangle. A soft alpha mask
   lets the generated artwork melt into the hero's navy-violet background. */
.about-model-hero { max-width: 820px; margin-right: clamp(-5rem, -7vw, -1rem); }
.about-model-hero img {
  width: 100%; height: auto;
  mix-blend-mode: normal;
  filter: saturate(1.08) contrast(1.06);
  -webkit-mask-image: none;
  mask-image: none;
}
.generated-hero-art { max-width: 720px; margin-right: clamp(-2.5rem, -4.5vw, 0rem); }
.generated-hero-art img {
  width: 100%; height: auto; image-rendering: auto;
  mix-blend-mode: screen;
  filter: saturate(1.05) contrast(1.04);
}
.page-hero--about > .wrap { grid-template-columns: .78fr 1.22fr; gap: clamp(1.5rem, 3vw, 3rem); }
.page-hero--large-art > .wrap { grid-template-columns: .85fr 1.15fr; gap: clamp(1.5rem, 3.5vw, 3.5rem); }

/* tilted photo card, echoing the fanned cards on the home page */
.art-photo {
  position: relative; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
  transform: rotate(3deg);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.art-photo:hover { transform: rotate(0deg) scale(1.02); }
/* the ratio must live on the figure: an <img> with a height attribute has a
   resolved height, which makes aspect-ratio on the image itself a no-op */
.art-photo { aspect-ratio: 4 / 3; }
.art-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-photo figcaption {
  position: absolute; inset: auto 0 0 0; padding: 2rem .95rem .85rem;
  background: linear-gradient(180deg, transparent, rgba(2,11,40,.92));
  font-size: .6875rem; font-weight: 600; color: #fff;
}

/* a small stack, used where one image would undersell the point */
/* An overlapping pair, not two stacked cards: the second is pulled up over the
   first and inset, so the hero stays the same height as the single-photo pages. */
.art-stack { display: grid; }
.art-stack .art-photo { width: 78%; }
.art-stack .art-photo:nth-child(1) { transform: rotate(-4deg); justify-self: start; }
.art-stack .art-photo:nth-child(2) {
  transform: rotate(3deg); justify-self: end;
  margin-top: -22%; z-index: 2;
}
.art-stack .art-photo:hover { z-index: 3; }
/* the lower card's caption sits exactly where the upper one overlaps it, so
   only the front card is captioned; the alt text still describes both */
.art-stack .art-photo:nth-child(1) figcaption { display: none; }

/* drawn figures */
.art-svg {
  width: 100%; border-radius: 20px; padding: clamp(1.25rem, 3vw, 2rem);
  background: rgba(20,34,79,.55);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.art-svg svg { width: 100%; height: auto; display: block; overflow: visible; }
.art-svg .fl { animation: floatY 6s ease-in-out infinite; transform-origin: center; }
.art-svg .fl2 { animation: floatY 7.5s ease-in-out infinite; animation-delay: -2.4s; }
.art-svg .spin-slow { animation: spin 26s linear infinite; transform-origin: center; }

@media (max-width: 900px) {
  .page-hero > .wrap { grid-template-columns: 1fr; }
  .hero-art { justify-self: start; max-width: 340px; margin-top: .5rem; }
  .about-model-hero { max-width: 620px; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .art-svg .fl, .art-svg .fl2, .art-svg .spin-slow { animation: none; }
  .art-photo { transition: none; }
}

/* ============================================================ CONTACT ==== */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.ccard {
  background: var(--navy-card);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  padding: 1.6rem 1.5rem;
  display: grid; gap: .5rem; align-content: start;
  transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s;
}
.ccard:hover { transform: translateY(-6px); border-color: rgba(208,50,175,.45); }
.ccard .icon-badge { margin-bottom: .35rem; }
.ccard h3 { font-size: 1.06rem; letter-spacing: -.01em; }
.ccard p { color: var(--txt); font-size: .95rem; line-height: 1.65; }
.ccard a {
  color: #fff; font-weight: 600; font-size: .95rem;
  justify-self: start; border-bottom: 1px solid rgba(255,255,255,.28);
  padding-bottom: 2px; transition: border-color .25s;
}
.ccard a:hover { border-color: var(--magenta); }

/* the form sits on a light section, so it takes the light token set */
.form { display: grid; gap: 1.05rem; }
.field { display: grid; gap: .45rem; }
.field > span { font-size: .82rem; font-weight: 700; color: var(--navy); letter-spacing: .01em; }
.field > span em { font-style: normal; font-weight: 500; color: var(--txt-dark); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .96rem; color: var(--navy);
  background: #fff; border: 1px solid var(--line-lt); border-radius: 12px;
  padding: .85rem 1rem; width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: #A6AEC9; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(123,63,228,.12);
}
.form .btn { justify-self: start; }
.form-note { font-size: .86rem; line-height: 1.65; color: var(--txt-dark); }

@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ====================================================== USE-CASE GRID ==== */
/* Two-up on desktop rather than four thin columns: each card carries a real
   paragraph, and four columns would set it about six words wide. */
.use-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.use-card {
  position: relative; overflow: hidden;
  background: var(--navy-card);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r);
  padding: 2.1rem 2rem 1.6rem;
  display: grid; gap: .75rem; align-content: start;
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease;
}
.use-card::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: var(--grad); transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.use-card:hover { transform: translateY(-6px); border-color: rgba(208,50,175,.4); }
.use-card:hover::after { transform: scaleX(1); }
.use-card h3 { font-size: 1.22rem; letter-spacing: -.02em; }
.use-card p { color: var(--txt); line-height: 1.75; font-size: .97rem; }
.use-tag {
  justify-self: start; margin-top: .35rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--txt-2); padding: .38rem .7rem;
  border: 1px solid rgba(255,255,255,.13); border-radius: 999px;
}

.use-foot {
  margin-top: 2.25rem; text-align: center;
  color: var(--txt); font-size: .97rem; line-height: 1.7;
}
.use-foot a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 1px; }
.use-foot a:hover { border-color: var(--magenta); }
.use-foot.lt { color: var(--txt-dark); }
.use-foot.lt a { color: var(--navy); border-bottom-color: rgba(13,26,66,.28); }
.use-foot.lt a:hover { border-color: var(--violet); }

/* ================================== TIERS ON A LIGHT GROUND ============== */
.tiers-lt .tier {
  background: #fff; border-color: var(--line-lt);
  box-shadow: 0 2px 4px rgba(13,26,66,.04), 0 18px 40px rgba(13,26,66,.06);
}
.tiers-lt .tier-name { color: var(--txt-dark); }
.tiers-lt .tier-price b { color: var(--navy); }
.tiers-lt .tier-price span { color: var(--txt-dark); }
.tiers-lt .checks li span:last-child { color: var(--txt-dark); }
.tiers-lt .tier-hi { border-color: transparent; box-shadow: 0 24px 60px rgba(123,63,228,.18); }
/* the highlighted plan gets a gradient edge drawn as a border-box mask, so the
   card keeps its white fill */
.tiers-lt .tier-hi::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
/* the tier is a grid, so a bare pill would stretch to the column width */
.tier .pill-tag { justify-self: start; }
.tiers-lt .btn-line { color: var(--navy); border-color: var(--line-lt); }
.tiers-lt .btn-line:hover { border-color: var(--violet); color: var(--violet); }

/* ============================================================== FAQ ====== */
.faq-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.faq-aside { display: grid; gap: 1.15rem; justify-items: start; position: sticky; top: 120px; }
.faq-aside h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.1; letter-spacing: -.03em; }
.faq-aside .deck { max-width: 34ch; }

@media (max-width: 980px) {
  .use-grid { grid-template-columns: 1fr; }
  .faq-split { grid-template-columns: 1fr; }
  .faq-aside { position: static; }
}

/* links inside an answer need an affordance; several were relying on inline styles */
.answer a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 1px; transition: border-color .2s; }
.answer a:hover { border-color: var(--magenta); }
.section-light .answer a, .section-light-soft .answer a { color: var(--navy); border-bottom-color: rgba(13,26,66,.3); }
.section-light .answer a:hover, .section-light-soft .answer a:hover { border-color: var(--violet); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-menu { background: rgba(8, 20, 53, .98); }
}

/* ========================================================== FIGURES ====== */
/* Gradient paints live on the elements themselves (see figures.py): the
   gradient id is unique per figure, which a static rule here cannot track. */
/* Diagrams are token-driven so one markup reads on navy and on white. Every
   colour below resolves through these four vars, which the light sections
   redefine — nothing is hard-coded per theme. */
.fig {
  --fig-line: rgba(255,255,255,.18);
  --fig-face: rgba(255,255,255,.05);
  --fig-text: #fff;
  --fig-dim: var(--txt-2);
  margin: 0; padding: clamp(1.1rem, 2.5vw, 2rem);
  background: rgba(20,34,79,.45);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow-x: auto;
}
.section-light .fig, .section-light-soft .fig {
  --fig-line: rgba(13,26,66,.16);
  --fig-face: rgba(13,26,66,.035);
  --fig-text: var(--navy);
  --fig-dim: var(--txt-dark);
  background: #fff; border-color: var(--line-lt);
  box-shadow: 0 2px 4px rgba(13,26,66,.04), 0 16px 36px rgba(13,26,66,.05);
}
.fig svg { display: block; width: 100%; height: auto; min-width: 620px; color: var(--fig-dim); }
.fig.fig-sm svg { min-width: 0; }

.fig-node rect { fill: var(--fig-face); stroke: var(--fig-line); stroke-width: 1; }
.fig-node--hi rect { fill: rgba(123,63,228,.16); stroke-width: 1.5; }
.fig-t { fill: var(--fig-text); font: 700 14px var(--font); letter-spacing: -.01em; }
.fig-s { fill: var(--fig-dim); font: 500 12px var(--font); }
.fig-cap { fill: var(--fig-dim); font: 700 11px var(--font); letter-spacing: .1em; text-transform: uppercase; }
.fig-arrow { stroke: var(--fig-line); stroke-width: 1.5; fill: none; }
.fig-loop path { stroke-width: 1.5; }
.fig-rail { stroke: var(--fig-line); stroke-width: 1.5; stroke-dasharray: 3 6; }
.fig-bars rect { opacity: .85; }
.fig-plate { fill: var(--fig-face); stroke: var(--fig-line); }
.fig-plate--hi { stroke-width: 1.5; }
.fig-grid path { stroke: var(--fig-line); stroke-width: .75; }
.fig-tiles rect { fill: var(--fig-face); stroke: var(--fig-line); }
.fig-edge rect { fill: none; stroke-width: 1.5; }
.fig-mask rect { fill: none; stroke-width: 1.5; }
.fig-swatches rect:last-child { fill: var(--fig-line); }

.fig-pair { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1.5rem; }

/* ---------------------------------------------------------- denoise strip */
.denoise { margin: 0; }
.denoise-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; }
/* the ratio lives on the cell: an <img> with a height attribute has a resolved
   height, which makes aspect-ratio on the image itself a no-op */
.denoise-cell {
  position: relative; aspect-ratio: 3/2;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
  background: var(--navy-3);
}
.denoise-cell img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  /* --t is the position in the schedule: 1 = pure noise, 0 = finished */
  filter: blur(calc(var(--t) * 11px)) contrast(calc(1 + var(--t) * .5)) saturate(calc(1 - var(--t) * .5));
  transform: scale(calc(1 + var(--t) * .08));
}
/* Blur alone reads as "out of focus", not as noise. The grain tile on top at
   --t opacity is what makes the early steps look like a sample rather than a
   soft photo. --noise is the canvas-generated tile set by aigence.js. */
.denoise-cell::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--noise);
  opacity: calc(var(--t) * .9);
  mix-blend-mode: overlay; pointer-events: none;
}
.denoise-cell span {
  position: absolute; left: .6rem; bottom: .55rem;
  font: 700 .72rem var(--mono, var(--font)); letter-spacing: .04em; color: #fff;
  background: rgba(2,11,40,.72); padding: .2rem .5rem; border-radius: 6px;
  backdrop-filter: blur(6px);
}
.denoise figcaption {
  margin-top: 1.1rem; font-size: .9rem; line-height: 1.7; color: var(--txt);
  max-width: 68ch;
}
.denoise figcaption em { color: var(--txt-dark); font-style: italic; }
.section-light .denoise figcaption, .section-light-soft .denoise figcaption { color: var(--txt-dark); }

@media (max-width: 760px) {
  .denoise-row { grid-template-columns: repeat(2, 1fr); }
  .fig-pair { grid-template-columns: 1fr; }
}

/* =======================================================================
   Launch polish — calmer hierarchy, stronger contrast, and touch-first UI.
   These rules intentionally sit last so the complete shared site benefits
   without duplicating page-specific styles.
   ======================================================================= */
:root {
  --navy: #10102B;
  --navy-2: #0B0B22;
  --navy-3: #070718;
  --navy-4: #04040E;
  --navy-card: #191838;
  --txt: #B8B8D0;
  --txt-2: #9999BC;
  --txt-dark: #4A4A68;
  --line-lt: #E8E8F1;
  --border: rgba(232, 232, 255, .14);
  --border-lt: #DDDDEC;
  --magenta: #DF57BE;
  --violet: #8C61F5;
  --blue: #6C86FF;
  --grad: linear-gradient(110deg, #E35AC1 0%, #9968F8 48%, #7085FF 100%);
  --grad-135: linear-gradient(135deg, #E35AC1 0%, #9968F8 50%, #7085FF 100%);
  --wrap: 1240px;
  --r: 18px;
  --r-sm: 12px;
}

body { font-size: 1rem; line-height: 1.65; }
.section { padding-block: clamp(4rem, 7vw, 7.5rem); }
.deck { line-height: 1.72; }
.sec-head { gap: .95rem; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }

/* Clearer interactive affordances across every page. */
a, button, input, summary { -webkit-tap-highlight-color: transparent; }
.btn { min-height: 48px; padding: .85rem 1.45rem; letter-spacing: .025em; }
.btn-sm { min-height: 40px; padding: .58rem 1.05rem; }
.btn-grad { box-shadow: 0 10px 24px rgba(140, 97, 245, .23); }
.btn-grad:hover { box-shadow: 0 16px 34px rgba(140, 97, 245, .35); }
.btn-line { background: rgba(255, 255, 255, .035); }
.btn-line:hover { background: rgba(255, 255, 255, .09); }
.chip-btn { min-height: 36px; }
.chip-btn:focus-visible, .btn:focus-visible, .burger:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* The old glass navigation was visually busy. This uses one quiet surface,
   a stable hit target, and a more legible scrolled state. */
.topbar { background: #080818; color: rgba(255,255,255,.72); }
.site-header.pill { padding-block: .7rem; }
.site-header.pill .header-inner {
  min-height: 62px;
  padding: .5rem .55rem .5rem 1.1rem;
  background: rgba(16, 16, 43, .72);
  border-color: rgba(255,255,255,.13);
  box-shadow: 0 10px 32px rgba(3, 3, 14, .28), inset 0 1px 0 rgba(255,255,255,.12);
}
.site-header.pill .header-inner::before { opacity: .55; }
.site-header.pill.stuck .header-inner { background: rgba(11, 11, 34, .94); }
.brand { font-size: 1.25rem; }
.brand-orb { width: 32px; height: 32px; box-shadow: 0 0 18px rgba(153, 104, 248, .42); }
.site-header.pill .site-nav { gap: clamp(1rem, 2vw, 1.55rem); }
.site-nav a { min-height: 40px; display: inline-flex; align-items: center; }
.nav-login { min-height: 40px; display: inline-flex; align-items: center; }

/* More deliberate visual rhythm: cards look like surfaces rather than
   template boxes, while their hover is subtle enough for a product site. */
.card, .stat, .step, .tier, .fig, .code, .ccard, .faq details {
  border-radius: var(--r);
}
.card, .stat, .step, .tier, .ccard {
  box-shadow: 0 1px 0 rgba(255,255,255,.035), 0 16px 36px rgba(4,4,14,.12);
}
.card:hover, .stat:hover, .step:hover, .ccard:hover {
  transform: translateY(-4px);
  border-color: rgba(153, 104, 248, .42);
  box-shadow: 0 18px 42px rgba(4,4,14,.22);
}
.section-light .card:hover, .section-light-soft .card:hover,
.section-light .stat:hover, .section-light-soft .stat:hover,
.section-light .step:hover, .section-light-soft .step:hover {
  border-color: rgba(140,97,245,.32);
  box-shadow: 0 18px 38px rgba(25,22,70,.10);
}

/* Home hero: less visual noise, stronger reading order, and a bounded form. */
.hero-c { padding-block: clamp(2.75rem, 5vw, 4.5rem) 0; }
.hero-c::before {
  background:
    radial-gradient(45% 46% at 50% 4%, rgba(153,104,248,.22), transparent 70%),
    radial-gradient(40% 46% at 13% 38%, rgba(227,90,193,.10), transparent 72%),
    radial-gradient(40% 46% at 87% 38%, rgba(108,134,255,.12), transparent 72%);
}
.hero-c-copy { gap: 1.25rem; }
.hero-c-copy h1 { max-width: 15ch; text-wrap: balance; }
.hero-c-copy .deck { max-width: 52ch; color: #C4C4DA; }
.prompt-box {
  max-width: 44rem;
  min-height: 62px;
  background: rgba(24, 24, 56, .82);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 14px 34px rgba(1,1,10,.19);
}
.fan { margin-top: clamp(2.25rem, 4vw, 3.5rem); }
.fan-card { border-radius: 16px; }

/* Long pages are easier to scan with persistent visual landmarks. */
.page-hero { padding-block: clamp(3rem, 6vw, 5.25rem); }
.legal-toc { border-left: 1px solid var(--border); padding-left: .65rem; }
.legal-toc a { border-left-color: transparent; }
.faq summary { min-height: 58px; display: flex; align-items: center; }

@media (max-width: 1120px) {
  .site-header.pill .header-inner { padding-left: 1rem; }
  .burger { width: 42px; height: 42px; }
}

@media (max-width: 620px) {
  :root { --gutter: 1.1rem; }
  body { font-size: .96875rem; }
  .topbar { display: none; }
  .site-header.pill { padding-block: .55rem; }
  .site-header.pill .header-inner { min-height: 56px; padding: .4rem .4rem .4rem .85rem; }
  .brand { font-size: 1.125rem; }
  .brand-orb { width: 29px; height: 29px; }
  .header-cta .btn { display: none; }
  .burger { width: 40px; height: 40px; }
  .mobile-menu { padding: 5.25rem 1.25rem 2rem; background: rgba(9,9,29,.97); }
  .mobile-menu a { font-size: 1.3rem; padding: .75rem 0; }
  .mobile-menu .btn { display: flex; }
  .hero-c { padding-top: 2.4rem; }
  .hero-c-copy { gap: 1rem; }
  .hero-c-copy h1 { font-size: clamp(2.55rem, 13vw, 3.45rem); line-height: 1.04; }
  .hero-c-copy .deck { font-size: .98rem; }
  .prompt-box { gap: .55rem; padding: .75rem; border-radius: 14px; }
  .prompt-box input { padding: .55rem 0; font-size: .94rem; }
  .prompt-box .btn { min-height: 46px; }
  .chips { justify-content: center; }
  .chips .lbl { flex-basis: 100%; }
  .chip-btn { padding: .4rem .68rem; font-size: .75rem; }
  .fan { gap: .7rem; margin-top: 2.25rem; }
  .fan-card { width: min(42vw, 185px); }
  .fan-card:nth-child(2) { order: -1; }
  .section { padding-block: 4rem; }
  .sec-head { margin-bottom: 2rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-base { margin-top: 2rem; }
  .legal-toc { border-left: 0; padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Remove the utility/social strip completely. It competed with the primary
   navigation and made the top of the page feel like a boxed-in template. */
.topbar { display: none !important; }

/* Keep only the intentional rounded navigation surface. The base header
   styles add a full-width translucent rectangle behind the pill, which created
   the pale rectangular fade at both sides of the navigation. */
.site-header.pill {
  position: absolute !important;
  inset: 0 0 auto;
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* The pill now overlays the page rather than reserving a dark header band. */
.hero-c { padding-top: calc(clamp(2.75rem, 5vw, 4.5rem) + 86px); }
.page-hero {
  --hero-bottom-radius: clamp(28px, 4vw, 56px);
  z-index: 1;
  margin: 0;
  margin-bottom: calc(var(--hero-bottom-radius) * -1);
  border-radius: 0 0 var(--hero-bottom-radius) var(--hero-bottom-radius);
  padding-top: calc(clamp(3rem, 6vw, 5.25rem) + 86px);
}

/* Pull the following content under the hero. This exposes the curved lower
   edge cleanly, rather than leaving the border radius against the same dark
   page background. */
.page-hero + .section {
  /* A nested clamp() inside calc() is invalid in some browsers, which caused
     the first section's top padding to be dropped entirely. Keep the same
     visual breathing room as one direct responsive value. */
  padding-top: clamp(6.25rem, 12vw, 11rem);
}

@media (max-width: 620px) {
  .hero-c { padding-top: calc(2.4rem + 68px); }
  .page-hero { --hero-bottom-radius: 30px; padding-top: calc(3rem + 68px); }
}

/* a diagram plus its caption, three across */
.fig-item { display: grid; gap: .85rem; align-content: start; }
.fig-item h3 { font-size: 1.08rem; letter-spacing: -.015em; }
.fig-item p { font-size: .94rem; line-height: 1.7; color: var(--txt); }
.section-light .fig-item p, .section-light-soft .fig-item p { color: var(--txt-dark); }


/* The scroll-reveal start states translate 46px sideways, so a not-yet-
   revealed element widens the document wherever .wrap has no slack
   (~960-1360px). `clip` rather than `hidden`: it creates no scroll
   container, so the sticky header and the legal rail keep working. */
main > section { overflow-x: clip; }

/* registered office + footer address */
.footer-addr { display: flex; align-items: flex-start; gap: .5rem; font-style: normal;
  font-size: .9375rem; color: var(--txt); line-height: 1.55; }
.registered-office { display: flex; align-items: flex-start; gap: 1rem; margin-top: 1.6rem;
  padding: 1.25rem 1.4rem; border: 1px solid rgba(255,255,255,.1); border-radius: 16px;
  background: rgba(255,255,255,.03); }
.registered-office h3 { font-size: 1.06rem; letter-spacing: -.01em; margin-bottom: .35rem; }
.registered-office address { font-style: normal; color: var(--txt); font-size: .95rem; line-height: 1.6; }
.registered-office p { color: var(--txt-2); font-size: .875rem; line-height: 1.6; margin-top: .5rem; }
.section-light .registered-office { border-color: #E6E9F5; background: #fff; }