/*
 * Public website styles. Plain CSS, no build step, no third-party requests (CSP: font-src 'self').
 *
 * Design notes
 *  - Palette: midnight navy for header, hero and footer; paper-white sections between; electric lime (see the later overrides) is the action colour; the --signal marigold variables are legacy;
 *    a bright cobalt appears only as glow behind dark surfaces and as link colour on light ones.
 *  - Type: Inter Display for headings (tight tracking), Inter for text. Served from /assets/fonts.
 *  - The one memorable element is the dashboard preview in the home hero. Everything else stays quiet: hairlines, soft shadows.
 *  - Radius scale: 10px controls, 16px cards, 24px panels.
 */
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Inter-Regular.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Inter-Medium.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/Inter-SemiBold.woff") format("woff"); }
@font-face { font-family: "Inter Display"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/InterDisplay-SemiBold.woff") format("woff"); }
@font-face { font-family: "Inter Display"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/InterDisplay-Bold.woff") format("woff"); }

:root {
    --night: #0a1230;
    --night-2: #0f1a42;
    --night-3: #16235a;
    --on-night: #e8ecf8;
    --on-night-2: #aab4d2;
    --night-line: rgba(255, 255, 255, .12);

    --ink: #0b1230;
    --ink-2: #39435f;
    --muted: #65708a;
    --line: #e3e7f0;
    --line-strong: #cbd3e3;
    --paper: #f6f8fc;
    --white: #ffffff;

    --signal: #ffb703;
    --signal-deep: #f2a900;
    --signal-soft: #fff4d1;
    --glow: #4a6bff;
    --cobalt: #2547d0;
    --ok: #0f7b5f; --ok-soft: #e6f6f0;
    --err: #b3261e; --err-soft: #fdecea;

    --head: "Inter Display", "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --ui: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    --r-1: 10px;
    --r-2: 16px;
    --r-3: 24px;
    --wrap: min(1200px, 100% - 3rem);
    --shadow-1: 0 1px 2px rgba(11, 18, 48, .06), 0 4px 14px rgba(11, 18, 48, .05);
    --shadow-2: 0 2px 4px rgba(11, 18, 48, .05), 0 18px 40px rgba(11, 18, 48, .1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--night); }
body { margin: 0; font: 1.0625rem/1.65 var(--ui); color: var(--ink); background: var(--white); font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
::selection { background: var(--signal); color: var(--ink); }

h1, h2, h3, h4 { font-family: var(--head); color: var(--ink); margin: 0 0 .6em; text-wrap: balance; font-weight: 700; }
h1 { font-size: clamp(2.5rem, 6vw, 4.75rem); line-height: 1.02; letter-spacing: -.045em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.75rem); line-height: 1.08; letter-spacing: -.035em; }
h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -.02em; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--cobalt); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 6px; }
.site-header :focus-visible, .hero :focus-visible, .page-hero :focus-visible, .cta-panel :focus-visible, .site-footer :focus-visible { outline-color: var(--signal); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--signal); color: var(--ink); padding: .7rem 1rem; z-index: 100; font-weight: 600; }
.skip-link:focus { left: 0; }
.container { width: var(--wrap); margin-inline: auto; }
.container--narrow { width: min(780px, 100% - 3rem); }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--ink-2); max-width: 38em; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .8rem 1.4rem; border-radius: var(--r-1); border: 1px solid transparent;
    font: 600 .97rem/1.2 var(--ui); letter-spacing: -.005em; text-decoration: none; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .6; cursor: progress; }
.btn--accent { background: var(--signal); color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 8px 22px -8px rgba(255, 183, 3, .65); }
.btn--accent:hover { background: #ffc22e; color: var(--ink); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 12px 26px -8px rgba(255, 183, 3, .8); }
.btn--accent:active { transform: none; }
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--night-3); color: #fff; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.hero .btn--ghost, .page-hero .btn--ghost, .btn--outline-light { background: rgba(255,255,255,.04); color: #fff; border-color: rgba(255,255,255,.28); }
.hero .btn--ghost:hover, .page-hero .btn--ghost:hover, .btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }
.btn--lg { padding: 1rem 1.75rem; font-size: 1.02rem; }
.btn--sm { padding: .55rem 1rem; font-size: .88rem; }
.btn--block { display: flex; width: 100%; margin-bottom: .6rem; }
.link-quiet { font-weight: 600; font-size: .95rem; color: var(--ink); text-decoration-color: var(--signal); text-decoration-thickness: 2px; }
.link-quiet:hover { color: var(--cobalt); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(10, 18, 48, .86); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--night-line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; font: 700 1.15rem/1 var(--head); letter-spacing: -.03em; color: #fff; text-decoration: none; }
.brand::before { content: ""; width: 1.15rem; height: 1.15rem; border-radius: 5px; background: linear-gradient(135deg, var(--signal) 0 50%, #fff 50% 100%); flex: none; }
.brand:hover { text-decoration: none; color: #fff; }
.site-nav { display: flex; align-items: center; gap: .1rem; }
.site-nav a:not(.btn) { font: 500 .92rem/1 var(--ui); color: var(--on-night-2); text-decoration: none; padding: .65rem .85rem; border-radius: 8px; transition: color .15s ease, background-color .15s ease; }
.site-nav a:not(.btn):hover { color: #fff; background: rgba(255,255,255,.07); }
.site-nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.1); }
.site-nav__cta { margin-left: .7rem; }
.nav-toggle { display: none; background: rgba(255,255,255,.06); border: 1px solid var(--night-line); border-radius: var(--r-1); width: 46px; height: 46px; cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; content: ""; position: relative; }
.nav-toggle__bars::before { position: absolute; top: -6px; }
.nav-toggle__bars::after { position: absolute; top: 6px; }
@media (max-width: 900px) {
    .nav-toggle { display: inline-flex; }
    .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--night); border-bottom: 1px solid var(--night-line); padding: .5rem 1.5rem 1.4rem; }
    .site-nav.is-open { display: flex; }
    .site-nav a:not(.btn) { padding: 1rem .25rem; border-bottom: 1px solid var(--night-line); border-radius: 0; font-size: 1rem; }
    .site-nav a[aria-current="page"] { background: none; color: var(--signal); }
    .site-nav__cta { margin: 1.1rem 0 0; }
}

/* ---------- Dark surfaces: hero and page headers share one backdrop ---------- */
.hero, .page-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--night); color: var(--on-night); }
.hero::before, .page-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(60rem 28rem at 78% -8%, rgba(74, 107, 255, .42), transparent 62%),
        radial-gradient(40rem 22rem at 6% 8%, rgba(255, 183, 3, .12), transparent 60%),
        linear-gradient(var(--night), var(--night-2));
}
.hero::after, .page-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000 20%, transparent 75%);
}
.hero h1, .page-hero h1 { color: #fff; }
.hero .lead, .page-hero .lead { color: var(--on-night-2); }

/* ---------- Home hero ---------- */
.hero { padding: clamp(3.5rem, 8vw, 6.5rem) 0 0; }
.hero__copy { max-width: 52rem; }
.hero h1 { margin-bottom: .45em; max-width: 12.5em; }
.hero .lead { font-size: clamp(1.1rem, 1.7vw, 1.3rem); max-width: 34em; margin-bottom: 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }

/* The memorable element: a product preview the agency actually builds. */
.preview { position: relative; margin: clamp(3rem, 6vw, 4.5rem) auto 0; max-width: 1080px; perspective: 1800px; }
.preview__caption { margin: 1.1rem 0 0; font-size: .85rem; color: var(--on-night-2); text-align: center; }
.preview__frame {
    position: relative; margin-bottom: 0; background: #fff; color: var(--ink); border-radius: var(--r-3) var(--r-3) 0 0;
    border: 1px solid rgba(255,255,255,.18); border-bottom: 0;
    box-shadow: 0 0 0 8px rgba(255,255,255,.05), 0 40px 90px -20px rgba(0,0,0,.6), 0 0 120px -20px rgba(74,107,255,.55);
    transform-origin: 50% 0; transform: rotateX(5deg);
    overflow: hidden;
}
.preview__bar { display: flex; align-items: center; gap: .45rem; padding: .8rem 1rem; background: #eef1f8; border-bottom: 1px solid var(--line); }
.preview__dot { width: .65rem; height: .65rem; border-radius: 50%; background: #cfd6e6; }
.preview__dot:first-child { background: #ff7a6b; } .preview__dot:nth-child(2) { background: var(--signal); } .preview__dot:nth-child(3) { background: #3fcf8e; }
.preview__url { margin-left: .8rem; padding: .25rem .8rem; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-size: .74rem; color: var(--muted); }
.preview__body { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); min-height: 29rem; }
.preview__side { background: var(--night); color: var(--on-night-2); padding: 1.2rem .9rem; font-size: .8rem; }
.preview__logo { display: flex; align-items: center; gap: .5rem; color: #fff; font: 700 .9rem var(--head); margin: 0 .4rem 1.4rem; }
.preview__logo::before { content: ""; width: .85rem; height: .85rem; border-radius: 4px; background: linear-gradient(135deg, var(--signal) 0 50%, #fff 50%); }
.preview__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.preview__nav li { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border-radius: 8px; }
.preview__nav li::before { content: ""; width: .7rem; height: .7rem; border-radius: 3px; border: 1.5px solid currentColor; opacity: .7; }
.preview__nav .is-on { background: rgba(255,255,255,.1); color: #fff; }
.preview__nav .is-on::before { background: var(--signal); border-color: var(--signal); opacity: 1; }
.preview__main { padding: 1.3rem 1.5rem 2.4rem; background: var(--paper); display: grid; gap: 1rem; align-content: start; }
.preview__head { display: flex; justify-content: space-between; align-items: center; }
.preview__head strong { font: 700 1.05rem var(--head); letter-spacing: -.02em; }
.preview__pill { font-size: .72rem; font-weight: 600; padding: .3rem .65rem; border-radius: 99px; background: var(--signal-soft); color: #7a5600; }
.preview__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; }
.kpi span { display: block; font-size: .72rem; color: var(--muted); }
.kpi strong { display: block; margin-top: .2rem; font: 700 1.35rem/1.15 var(--head); letter-spacing: -.03em; font-feature-settings: "tnum"; }
.kpi em { font-style: normal; font-size: .72rem; font-weight: 600; color: var(--ok); }
.preview__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: .8rem; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1rem; }
.panel h4 { margin: 0 0 .8rem; font: 600 .78rem var(--ui); color: var(--ink-2); letter-spacing: 0; }
.bars { display: flex; align-items: flex-end; gap: .45rem; height: 7.5rem; }
.bars i { flex: 1; border-radius: 5px 5px 2px 2px; background: linear-gradient(var(--glow), #8ea3ff); height: var(--h); transform-origin: bottom; animation: grow .8s calc(.5s + var(--i) * .05s) cubic-bezier(.2,.7,.2,1) both; }
.bars i:nth-child(n+11) { background: linear-gradient(var(--signal), #ffd466); }
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .78rem; }
.rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto 4.4rem; align-items: center; gap: .6rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line); animation: rise .5s calc(.9s + var(--i) * .1s) ease-out both; }
.rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.rows b { font-weight: 600; font-feature-settings: "tnum"; }
.rows .badge { justify-self: end; }
.badge { font-size: .68rem; font-weight: 600; padding: .2rem .5rem; border-radius: 99px; background: var(--ok-soft); color: var(--ok); white-space: nowrap; }
.badge--warn { background: var(--signal-soft); color: #7a5600; }
.badge--info { background: #e8edff; color: var(--cobalt); }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
    .preview__frame { transform: none; }
    .preview__body { grid-template-columns: 1fr; min-height: 0; }
    .preview__side { display: none; }
    .preview__main { padding-bottom: 1.5rem; }
    .preview__grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .preview__kpis { grid-template-columns: 1fr 1fr; } .preview__kpis .kpi:last-child { display: none; } .preview__url { display: none; } }

/* Stack strip */
.stack { padding: 3.2rem 0 1rem; }
.stack__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem 2.2rem; color: var(--muted); font-weight: 500; font-size: .95rem; }
.stack__label { font-size: .85rem; color: var(--muted); width: 100%; text-align: center; margin-bottom: .2rem; }
.stack__item { color: var(--ink-2); font: 600 1.05rem var(--head); letter-spacing: -.02em; }

/* ---------- Sections ---------- */
.section { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.section--paper { background: var(--paper); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.8rem; }
.section-head h2 { margin: 0; }
.section-head p { margin: .7rem 0 0; max-width: 34em; color: var(--ink-2); }

/* Principles: three plain statements */
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-strong); }
.principle { padding: 1.8rem 2rem 0 0; }
.principle + .principle { padding-left: 2rem; border-left: 1px solid var(--line); }
.principle h3 { font: 700 1.5rem/1.15 var(--head); letter-spacing: -.035em; margin-bottom: .6rem; }
.principle p { margin: 0; color: var(--ink-2); }
@media (max-width: 800px) {
    .principles { grid-template-columns: 1fr; }
    .principle, .principle + .principle { padding: 1.5rem 0; border-left: 0; }
    .principle + .principle { border-top: 1px solid var(--line); }
}

/* Services as a bento grid */
.bento { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; }
.bento__item { grid-column: span 4; display: flex; }
.bento__item:nth-child(7n+1) { grid-column: span 7; }
.bento__item:nth-child(7n+2) { grid-column: span 5; }
.bento__item:nth-child(7n+6) { grid-column: span 5; }
.bento__item:nth-child(7n+7) { grid-column: span 7; }
.tile { position: relative; display: flex; flex-direction: column; gap: .5rem; width: 100%; min-height: 15rem; padding: 1.7rem; border-radius: var(--r-2); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.tile::after { content: ""; position: absolute; right: -4rem; top: -4rem; width: 11rem; height: 11rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(74,107,255,.14), transparent); opacity: 0; transition: opacity .25s ease; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-strong); text-decoration: none; color: var(--ink); }
.tile:hover::after { opacity: 1; }
.tile h3 { font: 700 clamp(1.25rem, 2vw, 1.55rem)/1.2 var(--head); letter-spacing: -.03em; margin: 0; }
.tile p { margin: 0; color: var(--ink-2); font-size: .98rem; line-height: 1.55; max-width: 32em; }
.tile__price { margin-top: auto; padding-top: 1rem; font-size: .85rem; font-weight: 600; color: var(--muted); }
.tile__go { position: absolute; right: 1.4rem; bottom: 1.3rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--line-strong); transition: background-color .2s ease, border-color .2s ease; }
.tile__go::before { content: ""; position: absolute; left: 50%; top: 50%; width: .5rem; height: .5rem; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: translate(-65%, -50%) rotate(45deg); transition: border-color .2s ease; }
.tile:hover .tile__go { background: var(--signal); border-color: var(--signal); }
.bento__item:nth-child(7n+1) .tile { background: linear-gradient(150deg, var(--night-2), var(--night)); border-color: transparent; color: #fff; }
.bento__item:nth-child(7n+1) .tile h3 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.bento__item:nth-child(7n+1) .tile p { color: var(--on-night-2); }
.bento__item:nth-child(7n+1) .tile__price { color: var(--signal); }
.bento__item:nth-child(7n+1) .tile__go { border-color: rgba(255,255,255,.3); }
.bento__item:nth-child(7n+1) .tile__go::before { border-color: #fff; }
.bento__item:nth-child(7n+1) .tile::after { background: radial-gradient(closest-side, rgba(255,183,3,.22), transparent); }
@media (max-width: 960px) { .bento__item, .bento__item:nth-child(n) { grid-column: span 6; } .bento__item:nth-child(7n+1) { grid-column: span 12; } }
@media (max-width: 620px) { .bento__item, .bento__item:nth-child(n) { grid-column: span 12; } .tile { min-height: 0; padding-bottom: 4.5rem; } }

/* Services index page: clean ruled rows */
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.index__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 3rem; gap: 1.5rem; align-items: center; padding: 1.7rem .75rem; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; border-radius: var(--r-1); transition: background-color .15s ease; }
.index__row:hover { background: var(--paper); text-decoration: none; }
.index__name { font: 700 clamp(1.25rem, 2.2vw, 1.75rem)/1.2 var(--head); letter-spacing: -.03em; margin: 0; }
.index__desc { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.55; }
.index__price { display: block; margin-top: .3rem; font-weight: 600; font-size: .88rem; color: var(--muted); }
.index__go { width: 2.5rem; height: 2.5rem; border: 1px solid var(--line-strong); border-radius: 50%; position: relative; justify-self: end; transition: background-color .15s ease, border-color .15s ease; }
.index__go::before { content: ""; position: absolute; left: 50%; top: 50%; width: .5rem; height: .5rem; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: translate(-65%, -50%) rotate(45deg); }
.index__row:hover .index__go { background: var(--signal); border-color: var(--signal); }
@media (max-width: 760px) {
    .index__row { grid-template-columns: minmax(0, 1fr) 2.5rem; padding: 1.3rem .25rem; gap: .4rem 1rem; }
    .index__desc, .index__row > div { grid-column: 1; grid-row: 2; }
    .index__go { grid-column: 2; grid-row: 1 / span 2; }
}

/* Process: this one really is a sequence, so it is numbered */
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; counter-reset: step; position: relative; }
.process__step { position: relative; padding: 1.6rem 1.4rem 1.5rem; border-radius: var(--r-2); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); counter-increment: step; }
.process__step::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 1.6rem; font: 700 2.6rem/1 var(--head); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px var(--line-strong); }
.process__step:last-child::before { -webkit-text-stroke-color: var(--signal-deep); }
.process__step h3 { margin: 0 0 .4rem; }
.process__step p { margin: 0; font-size: .96rem; color: var(--ink-2); line-height: 1.55; }
.process__note { margin: 1.6rem 0 0; color: var(--muted); font-size: .95rem; }
@media (max-width: 960px) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .process { grid-template-columns: 1fr; } }

/* Work */
.work-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.work { display: flex; flex-direction: column; gap: .5rem; padding: 0 0 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.work:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); text-decoration: none; color: var(--ink); }
.work > :not(.work__cover) { margin-inline: 1.5rem; }
.work__cover { position: relative; height: 9.5rem; margin-bottom: 1rem; background: linear-gradient(135deg, var(--night-2), var(--night-3)); overflow: hidden; }
.work__cover::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 28px 28px; }
.work__cover::after { content: ""; position: absolute; right: -2rem; bottom: -3rem; width: 11rem; height: 11rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,183,3,.55), transparent); }
.work:nth-child(3n+2) .work__cover { background: linear-gradient(135deg, #12306b, #2547d0); }
.work:nth-child(3n+2) .work__cover::after { background: radial-gradient(closest-side, rgba(255,255,255,.4), transparent); }
.work:nth-child(3n) .work__cover { background: linear-gradient(135deg, #1b1f4a, #3b2a7a); }
.work:nth-child(3n) .work__cover::after { background: radial-gradient(closest-side, rgba(74,107,255,.7), transparent); }
.work__cover .tag { position: absolute; left: 1.5rem; bottom: 1rem; z-index: 1; margin: 0; background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.work h2, .work h3 { font: 700 1.35rem/1.2 var(--head); letter-spacing: -.03em; margin-top: .2rem; margin-bottom: 0; }
.work p { margin-bottom: 0; color: var(--ink-2); font-size: .98rem; line-height: 1.55; }
.work__more { margin-top: auto; padding-top: 1rem; font-weight: 600; font-size: .92rem; color: var(--cobalt); }
.work__more::after { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-left: .5rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.work:hover .work__more::after { transform: translateX(4px) rotate(45deg); }
@media (max-width: 960px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .work-grid { grid-template-columns: 1fr; } }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 0; }
.tag { display: inline-block; align-self: flex-start; font: 600 .74rem/1 var(--ui); padding: .4rem .65rem; border: 1px solid var(--line-strong); border-radius: 99px; color: var(--ink-2); background: #fff; }
.tag--plain { border-color: var(--line); background: var(--paper); font-weight: 500; }

/* Quotes */
.quotes { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.quote-card { margin: 0; padding: 1.8rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 1.2rem; }
.quote-card::before { content: "\201C"; display: block; font: 700 3.2rem/.6 var(--head); color: var(--signal-deep); height: 1.4rem; }
.quote-card blockquote { margin: 0; font-size: 1.08rem; line-height: 1.6; letter-spacing: -.005em; }
.quote-card blockquote p { margin: 0; }
.quote-card figcaption { display: flex; align-items: center; gap: .8rem; margin-top: auto; font-size: .92rem; line-height: 1.35; }
.avatar { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: linear-gradient(135deg, var(--night-3), var(--glow)); color: #fff; font: 600 .82rem var(--ui); flex: none; }
.stars { margin: 0; color: var(--ink); letter-spacing: .1em; font-size: 1rem; }

.empty-block { max-width: 40rem; padding: 2.2rem; border: 1px dashed var(--line-strong); border-radius: var(--r-2); background: var(--paper); }
.empty-block h2 { font-size: 1.5rem; margin-bottom: .4rem; }
.empty-block p { color: var(--ink-2); }
.empty-block p:last-child { margin-bottom: 0; }

/* ---------- Inner pages ---------- */
.page-hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.6rem, 5vw, 4rem); }
.page-hero h1 { font-size: clamp(2.3rem, 4.8vw, 3.8rem); max-width: 16em; margin-bottom: .35em; }
.page-hero .lead { margin: 0; }
.crumbs { margin: 0 0 1.4rem; font-weight: 500; font-size: .88rem; color: var(--on-night-2); }
.crumbs a { color: var(--on-night); text-decoration-color: rgba(255,255,255,.3); }
.crumbs a:hover { text-decoration-color: var(--signal); }
.crumbs span[aria-hidden] { margin: 0 .5rem; opacity: .5; }

.prose-layout { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
@media (max-width: 900px) { .prose-layout { grid-template-columns: 1fr; } }
.prose { max-width: 40em; font-size: 1.1rem; line-height: 1.75; color: var(--ink-2); }
.prose h2 { font-size: 1.6rem; margin: 2em 0 .5em; color: var(--ink); }
.prose h2:first-child { margin-top: 0; }
.prose a { color: var(--cobalt); }
.side-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2); padding: 1.7rem; position: sticky; top: 6rem; }
.side-card h2 { font: 700 1.05rem/1.3 var(--head); letter-spacing: -.01em; margin: 0 0 .6rem; }
.side-card h2:not(:first-child) { margin-top: 1.6rem; }
.side-card p { font-size: 1rem; }
.price-from { color: var(--ink-2); }
.num-list { padding-left: 1.3rem; margin: 0; } .num-list li { margin-bottom: .6rem; padding-left: .3rem; }
.check-list { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.check-list li { padding-left: 1.8rem; position: relative; margin-bottom: .6rem; line-height: 1.5; }
.check-list li::before { content: ""; position: absolute; left: 0; top: .1rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--signal-soft); }
.check-list li::after { content: ""; position: absolute; left: .33rem; top: .38rem; width: .5rem; height: .27rem; border-left: 2px solid #7a5600; border-bottom: 2px solid #7a5600; transform: rotate(-45deg); }
.side-card .tags { margin: .25rem 0 1.3rem; }

/* Pricing */
.pricing-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 2rem 1.8rem 1.8rem; border: 1px solid var(--line); border-radius: var(--r-3); background: #fff; box-shadow: var(--shadow-1); }
.price-card h2 { font-size: 1.4rem; margin-bottom: .3rem; }
.price-card__price { display: flex; flex-direction: column; margin: 1rem 0 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.price-card__amount { font: 700 2.6rem/1.1 var(--head); letter-spacing: -.045em; font-feature-settings: "tnum"; }
.price-card__amount--text { font-size: 2rem; }
.price-card .check-list { flex: 1; }
.price-card--featured { background: linear-gradient(165deg, var(--night-3), var(--night)); border-color: transparent; color: var(--on-night); box-shadow: 0 30px 60px -24px rgba(10, 18, 48, .7), 0 0 0 1px rgba(255,255,255,.06) inset; }
.price-card--featured h2, .price-card--featured .price-card__amount { color: #fff; }
.price-card--featured .muted { color: var(--on-night-2); }
.price-card--featured .price-card__price { border-color: var(--night-line); }
.price-card--featured .check-list li::before { background: rgba(255,183,3,.18); }
.price-card--featured .check-list li::after { border-color: var(--signal); }
.price-card__badge { position: absolute; top: 1.4rem; right: 1.4rem; margin: 0; background: var(--signal); color: var(--ink); font: 700 .72rem/1 var(--ui); padding: .45rem .7rem; border-radius: 99px; }

/* FAQ */
.faq-list { margin-bottom: 2rem; border-top: 1px solid var(--line-strong); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 1.4rem 3rem 1.4rem 0; font: 600 1.1rem/1.4 var(--head); letter-spacing: -.02em; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: .4rem; top: 50%; width: 1rem; height: 2px; background: var(--ink); transition: transform .2s ease; }
.faq summary::after { transform: rotate(90deg); }
.faq[open] summary::after { transform: rotate(0); }
.faq summary:hover { color: var(--cobalt); }
.faq__answer { padding: 0 0 1.5rem; color: var(--ink-2); max-width: 38em; }
.faq__answer p:last-child { margin-bottom: 0; }

/* ---------- Forms ---------- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-2); padding: clamp(1.4rem, 3vw, 2.4rem); }
.form-grid { display: grid; gap: 0 1.4rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font: 600 .9rem/1.3 var(--ui); margin-bottom: .45rem; }
.field input, .field select, .field textarea { width: 100%; padding: .85rem .95rem; border: 1px solid var(--line-strong); border-radius: var(--r-1); font: 1rem/1.4 var(--ui); color: var(--ink); background: #fff; transition: border-color .12s ease, box-shadow .12s ease; }
.field textarea { resize: vertical; min-height: 9.5rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cobalt); outline: none; box-shadow: 0 0 0 4px rgba(37, 71, 208, .15); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--err); }
.req { color: var(--err); }
.opt { color: var(--muted); font-weight: 400; }
.hint { margin: .35rem 0 0; font-size: .85rem; color: var(--muted); }
.field-error { margin: .4rem 0 0; font-weight: 500; font-size: .88rem; line-height: 1.4; color: var(--err); }
.alert { padding: .9rem 1.1rem; border-radius: var(--r-1); margin-bottom: 1.3rem; border: 1px solid transparent; font-size: .95rem; }
.alert--error { background: var(--err-soft); color: var(--err); border-color: #f1b8b3; }
.alert--success { background: var(--ok-soft); color: var(--ok); border-color: #a8dccb; }
/* Honeypot: off-screen rather than display:none, which some bots detect. */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.thanks { padding: clamp(3rem, 8vw, 6rem) 0; max-width: 40rem; }
.thanks__icon { position: relative; width: 3.6rem; height: 3.6rem; margin: 0 0 1.4rem; background: var(--signal); border-radius: 50%; box-shadow: 0 10px 26px -8px rgba(255,183,3,.7); }
.thanks__icon::before { content: ""; position: absolute; left: 50%; top: 46%; width: 1.3rem; height: .7rem; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- Closing call to action ---------- */
.cta-section { padding: clamp(2rem, 4vw, 3rem) 0 clamp(3.5rem, 7vw, 6rem); }
.cta-panel, .cta-band { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-3); background: var(--night); color: #fff; padding: clamp(2.2rem, 5vw, 4.2rem); }
.cta-panel::before, .cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(34rem 20rem at 90% 0%, rgba(74,107,255,.5), transparent 65%), radial-gradient(26rem 16rem at 0% 100%, rgba(255,183,3,.18), transparent 65%); }
.cta-panel__inner, .cta-band__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 4rem; align-items: end; }
.cta-panel h2, .cta-band h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 3.1rem); letter-spacing: -.04em; margin-bottom: .4em; }
.cta-panel p, .cta-band p { margin: 0; color: var(--on-night-2); max-width: 30em; }
.cta-panel__actions, .cta-band__actions { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 860px) { .cta-panel__inner, .cta-band__inner { grid-template-columns: 1fr; } .cta-panel__actions, .cta-band__actions { justify-content: flex-start; } }
/* Legacy full-width band (inner pages) sits inside a container-less section; keep it readable. */
.cta-band { border-radius: 0; padding: clamp(3.5rem, 8vw, 6rem) max(1.5rem, calc((100% - 1200px) / 2)); }
.cta-band__inner { width: 100%; }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: var(--on-night-2); padding: 4.5rem 0 1.6rem; font-size: .96rem; }
.site-footer a { color: var(--on-night); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1.6fr 1fr 1fr 1fr; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-h { font: 600 .9rem/1.3 var(--ui); color: #fff; margin: 0 0 1rem; letter-spacing: 0; }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: .6rem; }
.footer-note { max-width: 24em; margin: .9rem 0 1rem; }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3.5rem; padding-top: 1.3rem; border-top: 1px solid var(--night-line); font-size: .86rem; }
.site-footer .footer-bottom__admin { color: var(--on-night-2); }

.error-page { padding: clamp(4rem, 10vw, 7rem) 0; max-width: 36rem; }
.error-page__code { font: 700 clamp(4rem, 12vw, 7rem)/1 var(--head); letter-spacing: -.06em; margin: 0 0 .1em; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .preview__frame { transform: rotateX(5deg); }
}
.section--tight-top { padding-top: clamp(2rem, 4vw, 3rem); }


/* ---------- Junaid IT Services premium public-site layer ---------- */
:root {
    --night: #080d1b;
    --night-2: #10182b;
    --night-3: #182543;
    --signal: #b8ff65;
    --signal-deep: #a1ed4e;
    --signal-soft: #efffdf;
    --glow: #6c7cff;
    --cobalt: #4b5fe8;
    --paper: #f6f7fb;
    --line: #e4e7ef;
    --line-strong: #cdd3e2;
    --shadow-1: 0 4px 20px rgba(11, 18, 48, .045);
    --shadow-2: 0 22px 60px rgba(11, 18, 48, .12);
}
html { background: var(--night); }
body { letter-spacing: -.012em; }
.container { width: min(1240px, 100% - 3.5rem); }
.site-header { background: rgba(8, 13, 27, .88); border-bottom-color: rgba(255,255,255,.09); }
.site-header__inner { min-height: 5.1rem; }
.brand { gap: .75rem; font-size: 1.03rem; letter-spacing: -.035em; }
.brand::before { display: none; }
.brand__mark { display: grid; place-items: center; width: 2.45rem; height: 2.45rem; flex: none; border-radius: 10px 10px 10px 3px; background: var(--signal); color: #101626; font: 800 1.45rem/1 var(--head); box-shadow: 0 5px 22px rgba(184,255,101,.18); }
.brand__text { display: flex; flex-direction: column; gap: .28rem; }
.brand__text small { color: #8994ae; font: 600 .54rem/1 var(--ui); letter-spacing: .16em; }
.site-nav { gap: .25rem; }
.site-nav a:not(.btn) { color: #b5bfd3; padding-inline: .8rem; }
.site-nav a:not(.btn):hover { color: #fff; background: rgba(255,255,255,.065); }
.site-nav__cta { margin-left: .8rem; }
.btn { border-radius: 999px; padding-inline: 1.35rem; }
.btn--accent { color: #101626; box-shadow: 0 7px 26px -10px rgba(184,255,101,.65); }
.btn--accent:hover { background: #caff91; color: #101626; }
.btn--ghost, .hero .btn--ghost { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.035); }
.hero { padding: clamp(4.8rem, 9vw, 7.5rem) 0 0; }
.hero::before { background: radial-gradient(44rem 32rem at 84% 8%, rgba(91,111,255,.25), transparent 68%), radial-gradient(35rem 24rem at 8% 15%, rgba(184,255,101,.085), transparent 70%), linear-gradient(115deg, #080d1b 10%, #10172a 100%); }
.hero::after { opacity: .26; background-size: 64px 64px; }
.hero__copy { max-width: 58rem; margin-inline: auto; text-align: center; }
.hero__eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; margin: 0 0 1.6rem; color: #c4cde0; font-size: .72rem; font-weight: 700; letter-spacing: .17em; }
.hero__eyebrow-dot { width: .48rem; height: .48rem; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px rgba(184,255,101,.1); }
.hero__eyebrow-line { width: 1.5rem; height: 1px; background: rgba(255,255,255,.25); }
.hero h1 { max-width: none; margin: 0 auto .55em; font-size: clamp(3.15rem, 7.8vw, 6.65rem); line-height: .98; letter-spacing: -.075em; }
.hero h1 span { color: var(--signal); }
.hero .lead { max-width: 42rem; margin-inline: auto; color: #aab5ca; font-size: clamp(1.05rem, 1.65vw, 1.22rem); line-height: 1.75; }
.hero__actions { justify-content: center; margin-top: 2rem; gap: .75rem; }
.hero__actions .btn { min-height: 3.45rem; }
.preview { max-width: 1050px; margin-top: clamp(3rem, 6vw, 5.25rem); }
.preview__frame { border-radius: 20px 20px 0 0; border-color: rgba(255,255,255,.19); box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 38px 100px -30px rgba(0,0,0,.78), 0 0 100px -45px rgba(112,126,255,.8); transform: rotateX(2deg); }
.preview__bar { padding: .9rem 1.1rem; }
.preview__main { padding: 1.5rem; }
.kpi, .panel { border-radius: 13px; }
.stack { padding: 2.8rem 0 1.2rem; background: #fff; }
.stack__inner { gap: 1rem 2.4rem; }
.stack__label { color: #81899c; font-size: .73rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.stack__item { color: #3e4860; font-size: .98rem; }
.section { padding: clamp(4.5rem, 8vw, 7.5rem) 0; }
.section--tight-top { padding-top: 2.8rem; }
.section--paper { background: #f6f7fb; }
.section-head { margin-bottom: 2.7rem; }
.section-head h2 { font-size: clamp(2.2rem, 4.5vw, 3.65rem); letter-spacing: -.065em; }
.section-head p:not(.section-kicker) { color: #667087; max-width: 39rem; }
.section-kicker { margin: 0 0 .8rem !important; color: #5e6be4 !important; font-size: .7rem !important; line-height: 1.3 !important; font-weight: 800; letter-spacing: .18em; }
.principles { border-top-color: #dfe3ed; }
.principle { padding-top: 2rem; }
.principle + .principle { border-left-color: #e4e7ef; }
.principle__number { display: block; margin-bottom: 1.35rem; color: #737d95; font-size: .68rem; font-weight: 800; letter-spacing: .13em; }
.principle h3 { font-size: 1.35rem; letter-spacing: -.045em; }
.principle p { color: #657087; font-size: .96rem; }
.bento { gap: 1.1rem; }
.tile { min-height: 17rem; padding: 2rem; border-color: #e5e8f0; border-radius: 20px; box-shadow: 0 5px 25px rgba(13,20,45,.035); }
.tile h3 { font-size: clamp(1.4rem, 2.3vw, 1.85rem); letter-spacing: -.05em; }
.tile p { color: #68728a; font-size: .96rem; }
.bento__item:nth-child(7n+1) .tile { background: radial-gradient(26rem 18rem at 100% 0%, rgba(105,124,255,.25), transparent 70%), linear-gradient(145deg, #141d34, #090f1f); }
.bento__item:nth-child(7n+1) .tile p { color: #b3bdd0; }
.tile__go { width: 2.65rem; height: 2.65rem; border-radius: 50%; }
.tile:hover { transform: translateY(-5px); box-shadow: 0 20px 45px rgba(13,20,45,.1); }
.process { gap: 1rem; }
.process__step { padding: 1.7rem; border: 1px solid #e3e7ef; border-radius: 17px; background: #fff; }
.process__step::before { color: #5262e5; background: #eff0ff; border-radius: 12px; }
.process__step h3 { margin-top: .8rem; letter-spacing: -.035em; }
.process__step p { color: #667087; }
.work { border: 1px solid #e5e8f0; border-radius: 18px; padding: .8rem .8rem 1.5rem; background: #fff; box-shadow: 0 4px 20px rgba(11,18,48,.035); transition: transform .2s ease, box-shadow .2s ease; }
.work:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(11,18,48,.09); }
.work__cover { border-radius: 12px; background: radial-gradient(circle at 80% 20%, rgba(184,255,101,.25), transparent 30%), linear-gradient(135deg, #1c2b4a, #0a1020); min-height: 12rem; }
.work h3, .work p, .work__more { margin-left: .65rem; margin-right: .65rem; }
.work h3 { margin-top: 1.1rem; letter-spacing: -.035em; }
.work p { color: #68728a; }
.cta-section { padding-top: 1rem; }
.cta-panel { border-radius: 26px; background: radial-gradient(40rem 26rem at 100% 0%, rgba(89,108,255,.3), transparent 70%), #0b1222; border: 1px solid rgba(255,255,255,.08); }
.cta-panel::before { background: radial-gradient(26rem 18rem at 0% 100%, rgba(184,255,101,.1), transparent 70%); }
.cta-panel h2 { font-size: clamp(2.25rem, 4.5vw, 3.7rem); letter-spacing: -.06em; }
.section-kicker--light { color: var(--signal) !important; }
.site-footer { padding-top: 4.5rem; }
.footer-grid { gap: 3rem; }
.footer-bottom { border-top-color: rgba(255,255,255,.1); }
:focus-visible { outline-color: #6678ff; }
@media (max-width: 900px) {
    .container { width: min(100% - 2rem, 1240px); }
    .hero { padding-top: 4.5rem; }
    .hero h1 { font-size: clamp(3rem, 10vw, 5.2rem); }
    .hero__eyebrow { flex-wrap: wrap; font-size: .62rem; }
}
@media (max-width: 620px) {
    .site-header__inner { min-height: 4.5rem; }
    .brand__mark { width: 2.2rem; height: 2.2rem; }
    .brand { font-size: .94rem; }
    .brand__text small { font-size: .47rem; }
    .hero { padding-top: 3.8rem; }
    .hero h1 { font-size: clamp(2.8rem, 13vw, 4.1rem); letter-spacing: -.07em; }
    .hero__eyebrow { gap: .45rem; letter-spacing: .1em; }
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero__actions .btn { width: 100%; }
    .preview { margin-top: 2.5rem; }
    .preview__main { padding: .9rem; }
    .preview__kpis { gap: .45rem; }
    .kpi { padding: .7rem; }
    .kpi strong { font-size: 1.1rem; }
    .stack__inner { gap: .9rem 1.1rem; }
    .stack__item { font-size: .85rem; }
    .section { padding: 4rem 0; }
    .principle, .principle + .principle { padding: 1.5rem 0; }
    .tile { padding: 1.5rem; padding-bottom: 4.5rem; }
    .cta-panel { padding: 1.6rem; border-radius: 20px; }
    .cta-panel__actions { flex-direction: column; }
    .cta-panel__actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .preview__frame { transform: none; } }

/* Premium pricing page */
.pricing-hero { padding-top: clamp(4.5rem, 9vw, 7.5rem); padding-bottom: clamp(3.8rem, 7vw, 6rem); }
.pricing-hero::before { opacity: .9; }
.pricing-hero__inner { max-width: 980px; }
.pricing-hero h1 { max-width: 13ch; font-size: clamp(3.2rem, 7.5vw, 6.4rem); line-height: .98; letter-spacing: -.065em; margin: 0 0 1.35rem; }
.pricing-hero__accent { color: var(--signal); }
.pricing-hero .lead { max-width: 680px; font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.75; }
.pricing-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.pricing-trust { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 2.4rem; color: var(--on-night-2); font-size: .88rem; }
.pricing-trust span { display: inline-flex; align-items: center; gap: .45rem; }
.pricing-trust b { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; color: var(--signal); background: rgba(184,255,101,.12); }
.pricing-section { background: #f6f7fb; }
.pricing-heading { max-width: 700px; margin: 0 auto 3rem; text-align: center; }
.pricing-heading .eyebrow, .pricing-bottom-cta .eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .16em; color: var(--cobalt); }
.pricing-heading h2 { font-size: clamp(2rem, 4vw, 3.35rem); letter-spacing: -.05em; margin-bottom: .8rem; }
.pricing-heading > p:last-child { color: var(--ink-2); }
.pricing-grid--premium { gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr)); }
.price-card--premium { padding: 1.8rem; border-color: #e2e6f0; border-radius: 22px; box-shadow: 0 16px 50px rgba(20,31,65,.055); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.price-card--premium:hover { transform: translateY(-5px); box-shadow: 0 24px 60px rgba(20,31,65,.11); border-color: #c4cce0; }
.price-card__topline { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.35rem; }
.price-card__spark { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 9px; background: #edf1ff; color: var(--cobalt); }
.pricing-card__kicker { font-size: .66rem; font-weight: 800; letter-spacing: .13em; color: #7b849c; }
.price-card--premium h3 { font-size: 1.55rem; letter-spacing: -.035em; margin: 0 0 .45rem; }
.price-card__tagline { min-height: 3.2em; margin-bottom: .6rem; color: var(--ink-2); font-size: .94rem; }
.price-card--premium .price-card__price { margin: 1.15rem 0 1.35rem; padding-bottom: 1.35rem; }
.price-card--premium .price-card__amount { font-size: clamp(2.3rem, 3vw, 3rem); }
.price-card__includes { margin: 0 0 .9rem; color: #737d96; font-size: .68rem; font-weight: 800; letter-spacing: .13em; }
.price-card--premium .check-list { margin-bottom: 1.5rem; }
.price-card--premium .check-list li { font-size: .92rem; }
.price-card--premium .btn { margin-top: auto; }
.price-card__footnote { margin: .9rem 0 0; text-align: center; color: #8991a5; font-size: .74rem; }
.price-card--premium.price-card--featured { background: radial-gradient(ellipse at 90% 0%, rgba(79,105,255,.28), transparent 44%), linear-gradient(155deg, #17244a, #0a1230 78%); border: 1px solid rgba(184,255,101,.45); transform: translateY(-8px); }
.price-card--premium.price-card--featured:hover { transform: translateY(-12px); }
.price-card--premium.price-card--featured .price-card__spark { background: rgba(184,255,101,.13); color: var(--signal); }
.price-card--premium.price-card--featured .pricing-card__kicker, .price-card--premium.price-card--featured .price-card__includes { color: #b9c5e2; }
.price-card--premium.price-card--featured .price-card__tagline { color: #c2cbe0; }
.price-card--premium.price-card--featured .price-card__footnote { color: #aab5d0; }
.pricing-note { margin: 2rem auto 0; text-align: center; color: var(--ink-2); font-size: .93rem; }
.pricing-note a { color: var(--cobalt); font-weight: 750; text-underline-offset: 3px; }
.pricing-custom-card { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1.6rem, 4vw, 3rem); border: 1px solid #dfe4f0; border-radius: 24px; background: #fff; box-shadow: 0 18px 55px rgba(20,31,65,.06); }
.pricing-custom-card__copy { max-width: 650px; }
.pricing-custom-card h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -.04em; margin: .7rem 0; }
.pricing-custom-card p:last-child { color: var(--ink-2); margin-bottom: 0; }
.pricing-process { background: #fff; }
.pricing-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.pricing-step { padding: 1.6rem; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.pricing-step > span { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: #edf1ff; color: var(--cobalt); font-weight: 800; font-size: .85rem; margin-bottom: 1.35rem; }
.pricing-step h3 { font-size: 1.15rem; margin-bottom: .55rem; }
.pricing-step p { margin: 0; color: var(--ink-2); font-size: .92rem; }
.pricing-bottom-cta { padding-top: 1rem; background: #fff; }
.pricing-bottom-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1.7rem, 5vw, 3.5rem); border-radius: 24px; background: radial-gradient(ellipse at 100% 0%, rgba(79,105,255,.22), transparent 42%), #0a1230; color: #fff; }
.pricing-bottom-cta__inner > div { max-width: 650px; }
.pricing-bottom-cta h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.05em; margin: .5rem 0 .8rem; }
.pricing-bottom-cta__inner > div > p:last-child { color: #c2cbe0; margin: 0; }
.pricing-bottom-cta .eyebrow { color: var(--signal); }
@media (max-width: 720px) {
  .pricing-hero h1 { font-size: clamp(2.8rem, 13vw, 4.5rem); }
  .pricing-trust { gap: .7rem 1rem; }
  .pricing-steps { grid-template-columns: 1fr; }
  .pricing-custom-card, .pricing-bottom-cta__inner { align-items: flex-start; flex-direction: column; }
  .price-card--premium.price-card--featured { transform: none; }
  .price-card--premium.price-card--featured:hover { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) { .price-card--premium { transition: none; } .price-card--premium:hover { transform: none; } }

/* ---- Design polish (2026-10-17) ---- */
h1, h2, h3, h4 { word-spacing: .05em; }
h1 { letter-spacing: -.035em; }
h2 { letter-spacing: -.03em; }
.tile h3 { letter-spacing: -.03em; }
.principle h3, .process__step h3, .work h3 { letter-spacing: -.025em; }
.cta-panel h2, .cta-band h2 { letter-spacing: -.03em; }
/* Services grid: never leave a lone half-width card */
.bento__item:last-child:nth-child(7n+1), .bento__item:last-child:nth-child(7n+3) { grid-column: span 12; }
.bento__item:last-child:nth-child(7n+4) { grid-column: span 8; }
@media (max-width: 620px) { .bento__item:last-child:nth-child(n) { grid-column: span 12; } }
/* Process numbers: plain, no pill */
.process__step::before { background: none; padding: 0; border-radius: 0; color: #5262e5; -webkit-text-stroke: 0; }
.process__step:last-child::before { color: #5262e5; -webkit-text-stroke: 0; }
/* Inner-page hero: keep actions aligned with the left-aligned text */
.page-hero .hero__actions { justify-content: flex-start; }
.price-card--featured h2, .price-card--featured h3, .price-card--premium.price-card--featured h3 { color: #fff; }

/* Portfolio cover images */
.work__cover--img::before, .work__cover--img::after { display: none; }
.work__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.work__cover--img { background: var(--night-2); }
.case-cover { display: block; width: 100%; height: auto; border-radius: var(--r-3); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.section--tight { padding-block: 2rem 0; }
.work__cover--img .tag { background: rgba(10, 18, 48, .82); color: #fff; border-color: rgba(255, 255, 255, .22); }


/* ================= Premium refinement layer (2026-10-18) =================
   Appended last on purpose. Earlier tracking tweaks were overridden by more specific selectors,
   so these use the same specificity as the rules they replace. */
:root { --lime: #b8ff65; --ease: cubic-bezier(.2, .7, .2, 1); }

/* Headlines: tight, but letters never touch */
.hero h1 { font-size: clamp(3rem, 6.9vw, 6rem); line-height: 1; letter-spacing: -.045em; }
.page-hero h1 { letter-spacing: -.042em; line-height: 1.04; }
.pricing-hero h1 { letter-spacing: -.045em; }
.section-head h2, .pricing-heading h2 { letter-spacing: -.036em; line-height: 1.07; }
.cta-panel h2, .pricing-bottom-cta h2 { letter-spacing: -.034em; }
.tile h3 { letter-spacing: -.028em; }
.hero h1, .page-hero h1, .section-head h2 { text-wrap: balance; }

/* Header sits flush with the hero, then picks up glass and a hairline once you scroll */
.site-header { background: var(--night); border-bottom-color: transparent; transition: background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.site-header.is-stuck { background: rgba(8, 13, 27, .8); -webkit-backdrop-filter: saturate(1.5) blur(18px); backdrop-filter: saturate(1.5) blur(18px); border-bottom-color: rgba(255, 255, 255, .09); box-shadow: 0 14px 40px -24px rgba(0, 0, 0, .7); }
@media (min-width: 901px) {
    .site-nav a:not(.btn) { position: relative; }
    .site-nav a[aria-current="page"] { background: transparent; color: #fff; }
    .site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .2rem; height: 2px; border-radius: 2px; background: var(--lime); }
}

/* Buttons: a little physical, never bouncy */
.btn { transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s ease, border-color .18s ease, color .18s ease; }
.btn:active { transform: translateY(0) scale(.985); }
.btn--accent { background: var(--lime); box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 10px 28px -12px rgba(184, 255, 101, .8); }
.btn--accent:hover { background: #c9ff8c; transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 16px 34px -12px rgba(184, 255, 101, .95); }
.btn--primary { background: #0c1429; }
.btn--primary:hover { background: #17244a; }

/* Services grid: the last tile always fills its row */
.bento__item:last-child:nth-child(7n+6) { grid-column: span 12; }
.bento__item:last-child:nth-child(7n+1) .tile,
.bento__item:last-child:nth-child(7n+3) .tile,
.bento__item:last-child:nth-child(7n+6) .tile { min-height: 11.5rem; }
.bento__item:last-child:nth-child(7n+6) .tile p,
.bento__item:last-child:nth-child(7n+3) .tile p { max-width: 36rem; }

/* Cards: one hover language */
.tile, .work, .process__step, .price-card--premium { transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s ease; }
.tile:hover { border-color: #cdd5ea; }
.bento__item:nth-child(7n+1) .tile:hover { border-color: rgba(184, 255, 101, .55); }
.process__step:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(13, 20, 45, .07); }
.work:hover .work__more { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; }

/* Service pages */
.prose-layout { align-items: start; }
.side-card { top: 6.8rem; border-radius: 20px; background: #fff; border-color: #dfe4f0; box-shadow: 0 18px 50px rgba(20, 31, 65, .07); }
.side-card .price-from strong { font: 700 1.6rem/1.2 var(--head); letter-spacing: -.03em; color: var(--ink); }
.svc { display: grid; gap: 3.6rem; min-width: 0; }
.svc__intro p { margin: 0 0 1.1rem; max-width: 40rem; color: var(--ink-2); font-size: 1.1rem; line-height: 1.75; }
.svc__intro p:first-child { color: var(--ink); font-size: 1.32rem; line-height: 1.6; letter-spacing: -.014em; }
.svc__block h2 { margin: 0 0 1.2rem; font-size: clamp(1.5rem, 2.5vw, 1.95rem); letter-spacing: -.032em; }
.svc__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.svc__list li { position: relative; padding: 1rem 0 1rem 2.4rem; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.svc__list li::before { content: ""; position: absolute; left: 0; top: 1.12rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--lime); }
.svc__list li::after { content: ""; position: absolute; left: .42rem; top: 1.3rem; width: .38rem; height: .62rem; border: solid #101626; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(.8); transform-origin: center; }
.svc__for { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.svc__for li { padding: 1.25rem 1.35rem; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--ink-2); font-size: .98rem; line-height: 1.55; }
.svc__steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.svc__steps li { counter-increment: step; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .1rem 1.1rem; padding: 1.2rem 0; border-top: 1px solid var(--line); }
.svc__steps li:last-child { border-bottom: 1px solid var(--line); }
.svc__steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: #edf1ff; color: var(--cobalt); font: 800 .88rem/1 var(--ui); }
.svc__steps strong { font: 700 1.1rem/1.3 var(--head); letter-spacing: -.02em; }
.svc__steps span { color: var(--ink-2); font-size: .98rem; max-width: 36rem; }
.svc__faq details { border-top: 1px solid var(--line); }
.svc__faq details:last-child { border-bottom: 1px solid var(--line); }
.svc__faq summary { position: relative; padding: 1.2rem 2.6rem 1.2rem 0; font-weight: 600; cursor: pointer; list-style: none; }
.svc__faq summary::-webkit-details-marker { display: none; }
.svc__faq summary::after { content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-52%); font-size: 1.5rem; font-weight: 400; color: var(--muted); }
.svc__faq details[open] summary::after { content: "\2212"; color: var(--ink); }
.svc__faq details p { margin: 0 0 1.3rem; max-width: 38rem; color: var(--ink-2); }
.related { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.related .tile { min-height: 12.5rem; }
@media (max-width: 900px) { .side-card { position: static; } .svc { gap: 2.8rem; } }

/* Forms: clear focus, calmer card */
.form-card { border-radius: 26px; border-color: #e2e6f0; box-shadow: 0 26px 70px -28px rgba(20, 31, 65, .22); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #5e6be4; box-shadow: 0 0 0 4px rgba(94, 107, 228, .16); }
.field input, .field select, .field textarea { border-radius: 12px; }

/* Footer: a soft glow ties it to the hero */
.site-footer { background: radial-gradient(36rem 14rem at 12% 0%, rgba(184, 255, 101, .06), transparent 70%), var(--night); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.footer-h { letter-spacing: .01em; }

@media (prefers-reduced-motion: reduce) { .tile, .work, .process__step, .btn, .site-header { transition: none; } .process__step:hover, .btn--accent:hover { transform: none; } }


/* ================= Motion layer (2026-10-20) =================
   One orchestrated hero entrance, quiet scroll reveals, a pointer spotlight on cards, and small hover touches.
   Content is never hidden by CSS alone: reveals are switched on by site.js, and reduced-motion turns everything off. */
:root { interpolate-size: allow-keywords; }

@keyframes enter { from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes enter-soft { from { opacity: 0; transform: translate3d(0, 44px, 0) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: translate3d(-1.5%, 0, 0) scale(1); } to { transform: translate3d(2%, 2.5%, 0) scale(1.06); } }

.hero__eyebrow, .hero h1, .hero .lead, .hero__actions,
.page-hero h1, .page-hero .lead, .page-hero .hero__actions { animation: enter .95s var(--ease, cubic-bezier(.2, .7, .2, 1)) both; }
.hero__eyebrow { animation-delay: .05s; }
.hero h1, .page-hero h1 { animation-delay: .15s; }
.hero .lead, .page-hero .lead { animation-delay: .32s; }
.hero__actions, .page-hero .hero__actions { animation-delay: .46s; }
.hero .preview { animation: enter-soft 1.2s var(--ease, cubic-bezier(.2, .7, .2, 1)) .6s both; }

/* The hero glow drifts very slowly so the dark area feels alive without drawing the eye. */
.hero::before { inset: -8%; animation: drift 24s ease-in-out infinite alternate; }

/* Scroll reveal (site.js adds data-reveal only to blocks that start below the fold, then removes it again). */
[data-reveal] { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .8s var(--ease, cubic-bezier(.2, .7, .2, 1)), transform .8s var(--ease, cubic-bezier(.2, .7, .2, 1)); transition-delay: var(--d, 0s); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* Pointer spotlight on cards */
.work, .price-card--premium { position: relative; }
.tile::before, .work::before, .price-card--premium::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease;
    background: radial-gradient(24rem circle at var(--mx, 50%) var(--my, 50%), rgba(94, 107, 228, .11), transparent 62%);
}
.tile:hover::before, .work:hover::before, .price-card--premium:hover::before { opacity: 1; }

/* Primary buttons: a quick sheen and a nudged arrow */
.btn--accent { position: relative; overflow: hidden; isolation: isolate; }
.btn--accent::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none; opacity: 0;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg);
}
.btn--accent:hover::after { opacity: 1; transform: translateX(420%) skewX(-18deg); transition: transform .75s var(--ease, cubic-bezier(.2, .7, .2, 1)), opacity .2s ease; }
.btn [aria-hidden="true"] { display: inline-block; transition: transform .25s var(--ease, cubic-bezier(.2, .7, .2, 1)); }
.btn:hover [aria-hidden="true"] { transform: translateX(3px); }

/* Reading progress */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; pointer-events: none; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; background: linear-gradient(90deg, #b8ff65, #8ea3ff); will-change: transform; }

/* FAQ answers open smoothly (browsers without ::details-content simply open instantly) */
.faq details::details-content, .svc__faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--ease, cubic-bezier(.2, .7, .2, 1)), content-visibility .35s allow-discrete; }
.faq details[open]::details-content, .svc__faq details[open]::details-content { block-size: auto; }

@media (prefers-reduced-motion: reduce) {
    .hero::before { animation: none; inset: 0; }
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    .btn--accent::after, .scroll-progress { display: none; }
    .btn:hover [aria-hidden="true"] { transform: none; }
}

/* ================= Bold layer (2026-10-21) =================
   One loud moment (the home hero and the lime ticker under it), the same lime echoed once more in the closing call to action,
   and quieter, more editorial section styling in between. Appended last on purpose: it overrides the earlier layers. */

/* --- Home hero: left aligned, bigger type, product preview tilted in from the right --- */
.hero__copy { max-width: none; margin-inline: 0; text-align: left; }
.hero__eyebrow { justify-content: flex-start; }
.hero h1 { margin: 0 0 .5em; font-size: clamp(2.9rem, 11vw, 5.4rem); line-height: .96; letter-spacing: -.07em; }
.hero .lead { margin-inline: 0; max-width: 31rem; }
.hero__actions { justify-content: flex-start; }
.hero .preview { max-width: none; margin: clamp(2.5rem, 7vw, 3.5rem) 0 0; }
.preview__frame { transform: none; }

.float {
    position: absolute; z-index: 3; display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem .7rem .75rem;
    background: #fff; color: var(--ink); border-radius: 14px; box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .55), 0 0 0 1px rgba(11, 18, 48, .06);
    font-size: .82rem; line-height: 1.3; white-space: nowrap;
}
.float strong { display: block; font-weight: 700; }
.float em { display: block; font-style: normal; color: var(--muted); font-size: .76rem; }
.float__icon { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 10px; background: var(--ink); color: var(--lime); font: 700 1.1rem/1 var(--head); }
.float__icon--ok { background: var(--lime); color: var(--ink); }
.float--lead { top: 3.2rem; left: -.6rem; }
.float--paid { bottom: 2.2rem; right: .8rem; }
@media (max-width: 640px) { .float--lead { display: none; } .float--paid { bottom: 1rem; right: .6rem; } }

@media (min-width: 1020px) {
    .hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(2rem, 4vw, 4rem); align-items: end; }
    .hero__copy { padding-bottom: clamp(3.5rem, 6vw, 5.5rem); align-self: center; }
    .hero h1 { font-size: clamp(3.4rem, 5.6vw, 5.6rem); }
    .hero .preview { margin: 0; }
    .hero .preview__frame { width: 128%; transform: perspective(2000px) rotateY(-10deg) rotateX(3deg); transform-origin: 0 100%; }
    .preview__body { grid-template-columns: 9rem minmax(0, 1fr); min-height: 31rem; }
    .float--lead { left: -2.4rem; top: 4.5rem; }
    .float--paid { right: 22%; bottom: 3rem; }
}
@keyframes pop { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.94); } to { opacity: 1; transform: none; } }
.hero .float { animation: pop .8s var(--ease, cubic-bezier(.2, .7, .2, 1)) both; }
.hero .float--lead { animation-delay: 1.05s; }
.hero .float--paid { animation-delay: 1.3s; }

/* --- Ticker: a lime band that scrolls the tools the work is built with --- */
.ticker { position: relative; z-index: 2; overflow: hidden; background: var(--lime); color: var(--ink); border-block: 1px solid rgba(11, 18, 48, .12); }
.ticker__track { display: flex; width: max-content; animation: ticker 36s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; flex: none; align-items: center; }
.ticker__item { display: inline-flex; align-items: center; padding: 1rem 0; font: 700 clamp(1.5rem, 3.3vw, 2.5rem)/1 var(--head); letter-spacing: -.045em; white-space: nowrap; }
.ticker__item::after { content: ""; width: .55em; height: .55em; margin: 0 1.1em; background: var(--ink); transform: rotate(45deg) scale(.7); border-radius: 2px; }
@keyframes ticker { to { transform: translate3d(-50%, 0, 0); } }

/* --- Section headings: sentence-case labels instead of tracked-out capitals, larger display type --- */
.section-kicker { text-transform: lowercase; letter-spacing: 0 !important; font-size: .95rem !important; font-weight: 700 !important; }
.section-kicker::first-letter { text-transform: uppercase; }
.section-head h2 { font-size: clamp(2.35rem, 5.2vw, 4.2rem); line-height: 1.02; letter-spacing: -.055em; }
.principle__number { text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 700; color: #5e6be4; }
.principle h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); }

/* --- Process: an actual sequence, so the numbers stay, but big and without boxes --- */
.process { gap: 2rem; }
.process__step, .process__step:hover { padding: 1.4rem .5rem 0 0; border: 0; border-top: 3px solid var(--ink); border-radius: 0; background: none; box-shadow: none; transform: none; }
.process__step:last-child { border-top-color: #5e6be4; }
.process__step::before { margin-bottom: 1.1rem; font-size: clamp(3rem, 5vw, 4.4rem); letter-spacing: -.06em; color: var(--ink); }
.process__step:last-child::before { color: #5e6be4; }

/* --- Closing call to action: lime, huge type --- */
.cta-section { padding-top: clamp(2rem, 4vw, 3rem); }
.cta-panel { background: radial-gradient(34rem 20rem at 100% 0%, rgba(255, 255, 255, .6), transparent 70%), var(--lime); color: var(--ink); border: 0; border-radius: 28px; }
.cta-panel::before { background: none; }
.cta-panel h2 { color: var(--ink); font-size: clamp(2.5rem, 6.2vw, 5rem); line-height: .98; letter-spacing: -.065em; }
.cta-panel p { color: #26340f; }
.cta-panel .section-kicker--light { color: var(--ink) !important; }
.cta-panel .btn--accent { background: var(--ink); color: #fff; box-shadow: 0 14px 30px -14px rgba(11, 18, 48, .7); }
.cta-panel .btn--accent:hover { background: #1a2556; color: #fff; }
.cta-panel .btn--outline-light { background: transparent; color: var(--ink); border-color: var(--ink); }
.cta-panel .btn--outline-light:hover { background: rgba(11, 18, 48, .08); color: var(--ink); border-color: var(--ink); }
.cta-panel :focus-visible { outline-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
    .ticker__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
    .ticker__group--copy { display: none; }
    .hero .float { animation: none; }
}

/* WhatsApp chat button (shown when a number is set in Admin > Settings) */
.wa-float { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.28); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.32); }
.wa-float:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #128c4a; }
@media (max-width: 600px) { .wa-float { right: .8rem; bottom: .8rem; width: 3.2rem; height: 3.2rem; } }
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } .wa-float:hover { transform: none; } }
@media print { .wa-float { display: none; } }

/* Chat assistant (button + panel). Sits above the WhatsApp button when both are shown. */
.chat-launch { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60; width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 1px solid rgba(184,255,101,.35); background: var(--night); color: var(--lime); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 22px rgba(5,10,30,.4); transition: transform .15s ease, box-shadow .15s ease; }
.wa-float ~ .chat-launch { bottom: 5.3rem; }
.chat-launch:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(5,10,30,.46); }
.chat-launch:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.chat-launch > svg { grid-area: 1 / 1; transition: opacity .18s ease, transform .18s ease; }
.chat-launch .chat-launch__x { opacity: 0; transform: rotate(-60deg) scale(.7); }
.chat-launch[aria-expanded="true"] > svg:first-child { opacity: 0; transform: rotate(60deg) scale(.7); }
.chat-launch[aria-expanded="true"] .chat-launch__x { opacity: 1; transform: none; }

.chat { position: fixed; right: 1.1rem; bottom: 5.3rem; z-index: 70; width: min(24rem, calc(100vw - 2.2rem)); height: min(35rem, calc(100vh - 7rem)); display: flex; flex-direction: column; background: #fff; color: var(--ink); border-radius: 20px; box-shadow: 0 28px 70px rgba(5,10,30,.5), 0 0 0 1px rgba(10,18,48,.1); overflow: hidden; font-size: .95rem; line-height: 1.5; transform-origin: bottom right; animation: chat-in .24s var(--ease) both; }
.chat[hidden] { display: none; }
.wa-float ~ .chat { bottom: 9.4rem; height: min(35rem, calc(100vh - 11rem)); }
@keyframes chat-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

.chat__head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #1a3a82 0%, rgba(26,58,130,0) 55%), linear-gradient(135deg, var(--night) 0%, var(--night-2) 100%); }
.chat__avatar { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--lime); color: #101626; display: grid; place-items: center; font-weight: 800; font-size: 1.15rem; }
.chat__who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.chat__name { font-size: 1.02rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat__sub { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: rgba(255,255,255,.72); }
.chat__sub::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.22); }
.chat__close { flex: none; width: 2.1rem; height: 2.1rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.chat__close:hover { background: rgba(255,255,255,.2); }
.chat__close:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.chat__log { flex: 1; overflow-y: auto; padding: 1.1rem 1.1rem .6rem; display: flex; flex-direction: column; gap: .65rem; background: #f4f6fb; scrollbar-width: thin; }
.chat__msg { max-width: 86%; padding: .65rem .9rem; border-radius: 16px; white-space: pre-line; overflow-wrap: anywhere; }
.chat__msg--bot { align-self: flex-start; background: #fff; border: 1px solid #e6eaf4; border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(10,18,48,.05); }
.chat__msg--me { align-self: flex-end; background: var(--lime); color: #101626; font-weight: 500; border-bottom-right-radius: 5px; }
.chat__link { color: var(--night-3); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.chat__typing { display: flex; gap: .3rem; padding: .85rem .95rem; }
.chat__typing i { width: .45rem; height: .45rem; border-radius: 50%; background: #9aa6c4; animation: chat-dot 1s ease-in-out infinite; }
.chat__typing i:nth-child(2) { animation-delay: .15s; }
.chat__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.chat__cards { display: flex; flex-direction: column; gap: .5rem; align-self: stretch; }
.chat__card { display: flex; flex-direction: column; gap: .2rem; padding: .75rem .9rem; background: #fff; border: 1px solid #e0e6f2; border-radius: 14px; color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px rgba(10,18,48,.05); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.chat__card:hover { border-color: var(--night-3); transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(10,18,48,.35); }
.chat__card:focus-visible { outline: 2px solid var(--night-3); outline-offset: 2px; }
.chat__card-top { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.chat__card-title { font-size: .95rem; font-weight: 650; }
.chat__card-meta { flex: none; font-size: .78rem; font-weight: 650; color: #0b5c2a; background: #e3f8d0; border-radius: 999px; padding: .05rem .5rem; }
.chat__card-text { font-size: .84rem; line-height: 1.4; color: #4a5575; }
.chat__card-go { font-size: .8rem; font-weight: 650; color: var(--night-3); margin-top: .1rem; }

.chat__chips { display: flex; flex-wrap: wrap; gap: .45rem; padding: .5rem 1.1rem .2rem; background: #f4f6fb; max-height: 11rem; overflow-y: auto; }
.chat__chips:empty { display: none; }
.chat__chip { font: inherit; font-size: .88rem; padding: .4rem .85rem; border-radius: 999px; border: 1px solid #c9d2e6; background: #fff; color: var(--ink); cursor: pointer; text-decoration: none; text-align: left; transition: background .15s ease, border-color .15s ease; }
.chat__chip:hover { background: var(--lime); border-color: var(--lime); }
.chat__chip:focus-visible, .chat__input:focus-visible, .chat__send:focus-visible { outline: 2px solid var(--night-3); outline-offset: 2px; }

.chat__form { display: flex; align-items: center; gap: .5rem; padding: .75rem 1.1rem .9rem; background: #f4f6fb; }
.chat__input { flex: 1; min-width: 0; font: inherit; padding: .65rem 1rem; border: 1px solid #c9d2e6; border-radius: 999px; background: #fff; color: var(--ink); }
.chat__send { flex: none; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: var(--lime); color: #101626; cursor: pointer; display: grid; place-items: center; font-size: 1.15rem; font-weight: 700; transition: transform .15s ease; }
.chat__send:hover { transform: scale(1.06); }

@media (max-width: 600px) {
    .chat-launch { right: .8rem; bottom: .8rem; width: 3.2rem; height: 3.2rem; }
    .wa-float ~ .chat-launch { bottom: 4.6rem; }
    .chat, .wa-float ~ .chat { right: 0; left: 0; bottom: 0; width: auto; height: min(36rem, 86vh); border-radius: 20px 20px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .chat-launch, .chat-launch > svg, .chat__send, .chat__chip, .chat__card { transition: none; }
    .chat-launch:hover, .chat__card:hover, .chat__send:hover { transform: none; }
    .chat { animation: none; }
    .chat__typing i { animation: none; }
}
@media print { .chat-launch, .chat { display: none; } }