/* ==========================================================================
   Nextrobic Technologies — site styles
   Dark, deep-space design with 3D depth, glass surfaces and motion.
   No build step: edit and refresh.
   ========================================================================== */

:root {
    --bg: #060d24;
    --bg-2: #0a1532;
    --bg-3: #0f1d42;
    --surface: rgba(255, 255, 255, .035);
    --surface-2: rgba(255, 255, 255, .06);
    --line: rgba(255, 255, 255, .08);
    --line-2: rgba(255, 255, 255, .16);
    --ink: #eef4ff;
    --ink-2: #b4bfd8;
    --ink-3: #7c88a6;
    --blue: #0b5cff;
    --cyan: #14c8b4;
    --violet: #0ea5e9;
    --green: #22c55e;
    --pink: #f5a524;
    --grad: linear-gradient(110deg, #0b5cff 0%, #14c8b4 50%, #0ea5e9 100%);
    --grad-2: linear-gradient(110deg, #0ea5e9 0%, #f5a524 50%, #14c8b4 100%);
    --radius: 18px;
    --radius-lg: 28px;
    --shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
    --glow: 0 0 0 1px rgba(11,92,255, .35), 0 20px 60px -20px rgba(11,92,255, .55);
    --font: 'Montserrat', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
    --display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --wrap: 1200px;
    --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font);
    font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; color: var(--ink-2); }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--ink-3); }
.small { font-size: .88rem; }
.mt { margin-top: 28px; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% auto; animation: shimmer 6s linear infinite; }
.grad--alt { background-image: var(--grad-2); }
@keyframes shimmer { to { background-position: 200% center; } }
.textlink { color: var(--cyan); font-weight: 600; }
.textlink:hover { text-decoration: underline; }

/* ---------- Backdrop layers ---------- */
.bg-grid {
    position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
}
.cursor-glow {
    position: fixed; z-index: -1; width: 620px; height: 620px; border-radius: 50%; pointer-events: none;
    left: 0; top: 0; transform: translate3d(var(--mx, -999px), var(--my, -999px), 0) translate(-50%, -50%);
    background: radial-gradient(circle, rgba(11,92,255,.14) 0%, rgba(14,165,233,.07) 35%, transparent 65%);
    transition: opacity .3s;
}
.progress { position: fixed; top: 0; left: 0; height: 3px; z-index: 100; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--grad); }

/* ---------- Buttons ---------- */
.btn {
    --bx: 0px; --by: 0px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: .95rem; border: 1px solid transparent;
    cursor: pointer; font-family: inherit; white-space: nowrap; position: relative; isolation: isolate;
    transform: translate3d(var(--bx), var(--by), 0); transition: transform .25s var(--ease), box-shadow .25s, background .25s, border-color .25s;
}
.btn--sm { padding: 9px 16px; font-size: .88rem; }
.btn--lg { padding: 15px 28px; font-size: 1rem; }
.btn--primary { background: var(--grad); background-size: 160% auto; color: #fff; box-shadow: 0 10px 30px -10px rgba(11,92,255,.7); }
.btn--primary:hover { background-position: 100% 0; box-shadow: 0 16px 40px -10px rgba(20,200,180,.6); }
.btn--ghost { background: var(--surface); border-color: var(--line-2); color: var(--ink); backdrop-filter: blur(10px); }
.btn--ghost:hover { border-color: rgba(20,200,180,.6); background: rgba(20,200,180,.08); }
.btn--green { background: linear-gradient(110deg, #16a34a, #22c55e); color: #fff; box-shadow: 0 10px 30px -10px rgba(34,197,94,.7); }
.btn--green:hover { box-shadow: 0 16px 40px -10px rgba(34,197,94,.8); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }

/* ---------- Header ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: var(--header-bg, rgba(6,13,36,.72)); backdrop-filter: blur(16px) saturate(140%); border-color: var(--line); }
.nav { display: flex; align-items: center; gap: 28px; height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand img { width: 46px; height: auto; filter: drop-shadow(0 0 14px rgba(20,200,180,.35)); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__text b { font-family: var(--display); font-size: 1.28rem; letter-spacing: -.01em; }
.brand__text b span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand__text small { font-size: .62rem; letter-spacing: .38em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav__link { padding: 8px 14px; border-radius: 999px; color: var(--ink-2); font-weight: 500; font-size: .95rem; transition: color .2s, background .2s; }
.nav__link:hover { color: var(--ink); background: var(--surface-2); }
.nav__link.is-active { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav__toggle { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; position: relative; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--ink); border-radius: 2px; content: ""; transition: transform .3s; }
.nav__toggle span { top: 20px; }
.nav__toggle span::before { top: -6px; left: 0; right: 0; }
.nav__toggle span::after { top: 6px; left: 0; right: 0; }
.nav-open .nav__toggle span { background: transparent; }
.nav-open .nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav__toggle span::after { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { display: none; }
@media (max-width: 920px) {
    .nav__links { display: none; }
    .nav__actions { margin-left: auto; }
    .nav__actions .btn { display: none; }
    .nav__toggle { display: block; }
    .mobile-menu { display: grid; gap: 4px; padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height .4s var(--ease), padding .4s; background: var(--menu-bg, rgba(6,13,36,.96)); }
    .mobile-menu a { padding: 12px 6px; border-bottom: 1px solid var(--line); font-weight: 500; }
    .mobile-menu .btn { margin-top: 12px; border: 0; }
    .nav-open .mobile-menu { max-height: 520px; padding: 8px 20px 24px; }
    .nav-open .site-header { background: var(--menu-bg, rgba(6,13,36,.96)); }
}

/* ---------- Sections ---------- */
.section { padding: clamp(72px, 10vw, 128px) 0; position: relative; }
.section--tight { padding-top: 24px; }
.section--alt { background: linear-gradient(180deg, transparent, rgba(16,22,43,.55) 20%, rgba(16,22,43,.55) 80%, transparent); }
.section-head { text-align: center; margin: 0 auto 56px; max-width: 760px; }
.section-head .lead { margin-inline: auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); margin-bottom: 16px; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--grad); border-radius: 2px; }
.perspective { perspective: 1400px; }
.glass { background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid var(--line); border-radius: var(--radius-lg); backdrop-filter: blur(14px); box-shadow: var(--shadow); }

/* ---------- Reveal motion (3D) ---------- */
.reveal { opacity: 0; transform: translate3d(0, 36px, 0); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.reveal--3d { transform: translate3d(0, 60px, -120px) rotateX(18deg); transform-origin: 50% 100%; }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 120px 0 80px; overflow: hidden; isolation: isolate; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero__aurora { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__aurora span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; animation: drift 18s ease-in-out infinite alternate; }
.hero__aurora span:nth-child(1) { width: 560px; height: 560px; background: #0b4fd8; left: -160px; top: -120px; }
.hero__aurora span:nth-child(2) { width: 480px; height: 480px; background: #7c3aed; right: -120px; top: 10%; animation-delay: -6s; opacity: .4; }
.hero__aurora span:nth-child(3) { width: 420px; height: 420px; background: #0891b2; left: 35%; bottom: -220px; animation-delay: -12s; opacity: .35; }
@keyframes drift { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(80px, 60px, 0) scale(1.15); } }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.hero__title { font-size: clamp(2.6rem, 6vw, 5rem); margin-bottom: 24px; }
.hero__copy .lead { margin-bottom: 30px; }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); font-size: .85rem; font-weight: 600; color: var(--ink-2); margin-bottom: 26px; backdrop-filter: blur(8px); }
.chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(34,197,94,.2); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } }
.hero__tags { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero__tags li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; font-size: .8rem; font-weight: 600; color: var(--ink-2); background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.hero__stage { position: relative; aspect-ratio: 1; transform-style: preserve-3d; perspective: 1000px; }
.orbit-chip { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; animation: orbit 22s linear infinite; --rad: 230px; }
@media (max-width: 920px) { .orbit-chip { --rad: 150px; } }
.orbit-chip span {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px; font-weight: 600; font-size: .88rem; white-space: nowrap;
    background: rgba(10,21,50,.72); border: 1px solid var(--line-2); backdrop-filter: blur(10px); box-shadow: 0 10px 30px -10px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08);
    transform: translate(-50%, -50%); color: var(--ink);
}
.orbit-chip span .icon { color: var(--cyan); }
@keyframes orbit {
    from { transform: rotate(0deg) translateX(var(--rad)) rotate(0deg); }
    to { transform: rotate(360deg) translateX(var(--rad)) rotate(-360deg); }
}
.scroll-cue { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); width: 26px; height: 42px; border-radius: 14px; border: 2px solid var(--line-2); }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--cyan); animation: cue 1.8s infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@media (max-width: 920px) {
    .hero__grid { grid-template-columns: 1fr; }
    .hero__stage { max-width: 420px; width: 100%; margin: 0 auto; }
}

/* ---------- Page hero ---------- */
.page-hero { position: relative; padding: 170px 0 80px; overflow: hidden; isolation: isolate; }
.page-hero--sm { padding-bottom: 40px; }
.page-hero h1 { max-width: 18ch; }
.page-hero .lead { margin-bottom: 0; }
.page-hero__rings { position: absolute; right: -10%; top: 50%; width: 720px; height: 720px; z-index: -1; transform: translateY(-50%) rotateX(68deg) rotateZ(0deg); transform-style: preserve-3d; animation: spin 40s linear infinite; }
.page-hero__rings span { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(20,200,180,.25); box-shadow: 0 0 60px rgba(11,92,255,.25), inset 0 0 60px rgba(14,165,233,.15); }
.page-hero__rings span:nth-child(2) { inset: 90px; border-color: rgba(14,165,233,.35); }
.page-hero__rings span:nth-child(3) { inset: 190px; border-color: rgba(11,92,255,.4); background: radial-gradient(circle, rgba(11,92,255,.25), transparent 60%); }
@keyframes spin { to { transform: translateY(-50%) rotateX(68deg) rotateZ(360deg); } }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 80% 40%, rgba(11,92,255,.18), transparent 55%), radial-gradient(ellipse at 10% 0%, rgba(14,165,233,.14), transparent 50%); }
.backlink { display: table; margin-bottom: 18px; color: var(--ink-3); font-weight: 600; }
.backlink:hover { color: var(--ink); }

/* ---------- Metrics ---------- */
.metrics { padding: 30px 0; border-block: 1px solid var(--line); background: rgba(255,255,255,.015); }
.metrics__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.metric { text-align: center; padding: 18px 10px; }
.metric b { display: block; font-family: var(--display); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px; }
.metric > span { color: var(--ink-3); font-size: .92rem; }
.metric b span { color: inherit; font-size: inherit; }
@media (max-width: 720px) { .metrics__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Tilt cards (shared) ---------- */
[data-tilt] { transform-style: preserve-3d; will-change: transform; }
.svc-card__glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.14), transparent 45%); }
[data-tilt]:hover .svc-card__glare { opacity: 1; }
.accent-blue { --ac: #0b5cff; }
.accent-cyan { --ac: #14c8b4; }
.accent-violet { --ac: #0ea5e9; }
.accent-green { --ac: #22c55e; }

/* ---------- Service cards ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.svc-card {
    position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px; border-radius: var(--radius-lg); min-height: 290px;
    background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); border: 1px solid var(--line); overflow: hidden;
    transition: border-color .3s, box-shadow .3s, transform .5s var(--ease), opacity .9s var(--ease);
}
.svc-card::before { content: ""; position: absolute; width: 220px; height: 220px; right: -80px; top: -80px; border-radius: 50%; background: var(--ac); filter: blur(70px); opacity: .18; transition: opacity .3s; }
.svc-card:hover { border-color: color-mix(in srgb, var(--ac) 55%, transparent); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--ac) 70%, transparent); }
.svc-card:hover::before { opacity: .38; }
.svc-card__num { position: absolute; right: 22px; top: 20px; font-family: var(--display); font-weight: 700; color: rgba(255,255,255,.12); font-size: 1.6rem; }
.svc-card__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: var(--ac); background: color-mix(in srgb, var(--ac) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ac) 35%, transparent); margin-bottom: 22px; transform: translateZ(40px); }
.svc-card h3 { transform: translateZ(30px); }
.svc-card p { font-size: .94rem; flex: 1; transform: translateZ(20px); }
.svc-card__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--ac, var(--cyan)); transform: translateZ(25px); }
.svc-card__more .icon { transition: transform .25s; }
a:hover .svc-card__more .icon { transform: translateX(4px); }
@media (max-width: 1080px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr; } .svc-card { min-height: 0; } }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 920px) { .split { grid-template-columns: 1fr; } }
.check-list { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.check-list li { display: flex; gap: 10px; align-items: center; font-weight: 500; color: var(--ink); font-size: .95rem; }
.check-list .icon { color: var(--green); flex: none; }
@media (max-width: 520px) { .check-list { grid-template-columns: 1fr; } }

/* ---------- Next4Chat band ---------- */
.n4c-band { overflow: hidden; }
.n4c-band::before { content: ""; position: absolute; inset: 10% -10% auto auto; width: 60%; height: 80%; background: radial-gradient(circle, rgba(34,197,94,.16), transparent 60%); z-index: -1; }
.n4c-title { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.n4c-title img { width: 64px; height: 64px; border-radius: 18px; background: #fff; padding: 6px; box-shadow: 0 14px 40px -10px rgba(34,197,94,.55); animation: bob 5s ease-in-out infinite; }
.n4c-title h2, .n4c-title h1 { margin: 0; }
.n4c-title--lg img { width: 84px; height: 84px; border-radius: 22px; }
.n4c-tag { font-family: var(--display); font-size: 1.25rem; font-weight: 600; color: var(--green); margin-bottom: 14px; }
.n4c-mail { margin-top: 18px; font-size: .92rem; color: var(--ink-3); }
.n4c-mail a { color: var(--green); font-weight: 600; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-3deg); } }

/* 3D ring carousel */
.ring-stage { position: relative; height: 560px; perspective: 1400px; display: grid; place-items: center; }
.ring-stage--wide { height: 600px; margin-bottom: 40px; }
.ring { position: relative; width: 210px; height: 455px; transform-style: preserve-3d; transform: rotateX(-6deg) rotateY(var(--ry, 0deg)); }
.ring__item { position: absolute; inset: 0; margin: 0; transform: rotateY(calc(360deg / var(--n) * var(--i))) translateZ(330px); backface-visibility: hidden; border-radius: 30px; overflow: hidden; border: 6px solid #1a2033; box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); background: #000; }
.ring-stage--wide .ring__item { transform: rotateY(calc(360deg / var(--n) * var(--i))) translateZ(430px); }
.ring__item img { width: 100%; height: 100%; object-fit: cover; }
.ring-stage__floor { position: absolute; bottom: 10px; left: 50%; width: 80%; height: 90px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(34,197,94,.3), transparent 70%); filter: blur(10px); }
@media (max-width: 600px) {
    .ring-stage { height: 470px; }
    .ring { width: 170px; height: 368px; }
    .ring__item { transform: rotateY(calc(360deg / var(--n) * var(--i))) translateZ(240px); }
    .ring-stage--wide .ring__item { transform: rotateY(calc(360deg / var(--n) * var(--i))) translateZ(280px); }
}

/* ---------- Device frames ---------- */
.browser { border-radius: 16px; overflow: hidden; background: #0d1222; border: 1px solid var(--line-2); box-shadow: var(--shadow), 0 0 0 1px rgba(0,0,0,.4); }
.browser__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #121831; border-bottom: 1px solid var(--line); }
.browser__bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.browser__bar i:nth-child(2) { background: #febc2e; }
.browser__bar i:nth-child(3) { background: #28c840; }
.browser__bar span { margin-left: 14px; padding: 3px 14px; border-radius: 8px; background: rgba(255,255,255,.06); font-size: .78rem; color: var(--ink-3); flex: 1; max-width: 320px; }
.browser img { width: 100%; }
.browser--web { margin-top: 20px; }
.browser--hero { transform-origin: 50% 0; }
[data-scroll-tilt] { transform: perspective(1600px) rotateX(var(--stx, 18deg)) scale(var(--sts, .94)); transform-origin: 50% 20%; transition: transform .1s linear; }
.phone-frame { border-radius: 34px; padding: 8px; background: linear-gradient(160deg, #2a3150, #0d1222); box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.1); }
.phone-frame img { border-radius: 27px; width: 100%; }

/* ---------- Feature project ---------- */
.feature-project { display: grid; grid-template-columns: 1.25fr .75fr; gap: 56px; align-items: center; }
.feature-project__media { position: relative; padding-bottom: 60px; }
.float-shot { position: absolute; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line-2); animation: float 7s ease-in-out infinite; }
.float-shot--a { width: 48%; right: -6%; bottom: 0; animation-delay: -2s; }
.float-shot--b { width: 22%; left: -4%; bottom: -20px; border: 0; }
@keyframes float { 50% { transform: translate3d(0, -14px, 30px) rotate(-1deg); } }
.feature-project__copy h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.feature-project__copy h3 small { display: block; font-size: 1rem; font-family: var(--font); font-style: italic; color: var(--ink-3); font-weight: 500; margin-top: 6px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.badge--live { background: rgba(34,197,94,.12); color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
.badge--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 2s infinite; }
.pill-list { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.pill-list li { padding: 5px 12px; border-radius: 999px; font-size: .82rem; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); }
.pill-list--lg { justify-content: center; }
.pill-list--lg li { padding: 10px 18px; font-size: .95rem; }
@media (max-width: 980px) { .feature-project { grid-template-columns: 1fr; } }

/* ---------- Plans / engagements ---------- */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 34px 30px; border-radius: var(--radius-lg); background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); border: 1px solid var(--line); }
.plan--hot { border-color: transparent; background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, var(--grad) border-box; border: 1.5px solid transparent; box-shadow: 0 40px 80px -40px rgba(11,92,255,.7); }
.plan__flag { position: absolute; top: -13px; left: 30px; padding: 4px 14px; border-radius: 999px; background: var(--grad); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.plan__term { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.plan h3 { font-size: 1.7rem; margin: 8px 0 10px; transform: translateZ(30px); }
.plan ul { list-style: none; padding: 0; margin: 10px 0 28px; display: grid; gap: 10px; flex: 1; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; color: var(--ink-2); }
.plan li .icon { color: var(--green); flex: none; margin-top: 4px; }
@media (max-width: 920px) { .plan-grid { grid-template-columns: 1fr; } }

/* ---------- Process ---------- */
.process { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px; position: relative; }
.process__line { position: absolute; left: 4%; right: 4%; top: 26px; height: 2px; background: var(--line); }
.process__line span { display: block; height: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--lp, 0)); transition: transform .2s linear; box-shadow: 0 0 12px rgba(20,200,180,.7); }
.process li { position: relative; text-align: center; }
.process__dot { position: relative; display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 50%; font-family: var(--display); font-weight: 700; background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: 0 0 0 6px var(--bg); color: var(--cyan); }
.process li.is-in .process__dot { border-color: rgba(20,200,180,.6); box-shadow: 0 0 0 6px var(--bg), 0 0 24px rgba(20,200,180,.5); }
.process h4 { margin-bottom: 6px; }
.process p { font-size: .86rem; }
@media (max-width: 1000px) {
    .process { grid-template-columns: 1fr; gap: 6px; }
    .process__line { left: 26px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
    .process__line span { transform-origin: 50% 0; transform: scaleY(var(--lp, 0)); }
    .process li { display: grid; grid-template-columns: 54px 1fr; column-gap: 18px; text-align: left; padding-bottom: 14px; }
    .process__dot { grid-row: span 2; margin: 0; }
}

/* ---------- Tech marquee (tilted 3D plane) ---------- */
.tech { padding: 40px 0 70px; perspective: 1000px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.tech__plane { transform: rotateX(28deg) rotateZ(-4deg) scale(1.1); transform-style: preserve-3d; display: grid; gap: 14px; }
.marquee { overflow: hidden; }
.marquee__track { display: flex; gap: 14px; width: max-content; animation: marquee 50s linear infinite; }
.marquee--rev .marquee__track { animation-direction: reverse; animation-duration: 60s; }
@keyframes marquee { to { transform: translateX(-50%); } }
.tech__item { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; white-space: nowrap; font-family: var(--display); }
.tech__item em { font-style: normal; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); font-family: var(--font); }

/* ---------- Why ---------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.why { position: relative; padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: border-color .3s, transform .4s var(--ease), opacity .9s var(--ease); }
.why:hover { border-color: var(--line-2); transform: translateY(-4px); }
.why__n { position: absolute; right: 18px; top: 4px; font-family: var(--display); font-size: 4rem; font-weight: 700; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .16; }
.why p { font-size: .93rem; margin: 0; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }

/* ---------- CTA ---------- */
.cta { position: relative; display: grid; grid-template-columns: 1.4fr auto; gap: 40px; align-items: center; padding: clamp(36px, 5vw, 64px); border-radius: 32px; overflow: hidden; isolation: isolate;
    background: linear-gradient(130deg, rgba(11,92,255,.22), rgba(14,165,233,.18) 50%, rgba(20,200,180,.12)); border: 1px solid rgba(255,255,255,.12); }
.cta h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.cta p { margin: 0; max-width: 56ch; }
.cta__orb { position: absolute; z-index: -1; width: 420px; height: 420px; right: -120px; top: -160px; border-radius: 50%; background: conic-gradient(from 0deg, #0b5cff, #14c8b4, #0ea5e9, #f5a524, #0b5cff); filter: blur(60px); opacity: .45; animation: spinorb 14s linear infinite; }
@keyframes spinorb { to { transform: rotate(360deg); } }
.cta__actions { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 820px) { .cta { grid-template-columns: 1fr; } .cta__actions { flex-direction: row; flex-wrap: wrap; } }

/* ---------- Services page ---------- */
.svc-jump { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: -10px; position: sticky; top: 84px; z-index: 5; }
.svc-jump a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: .85rem; font-weight: 600; background: rgba(10,21,50,.8); border: 1px solid var(--line); backdrop-filter: blur(10px); color: var(--ink-2); transition: all .2s; }
.svc-jump a:hover { color: var(--ink); border-color: rgba(20,200,180,.5); }
.svc-list { display: grid; gap: clamp(70px, 9vw, 120px); }
.svc-row { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; scroll-margin-top: 150px; }
.svc-row--flip .svc-row__visual { order: 2; }
.svc-row__visual { position: relative; aspect-ratio: 1; max-width: 380px; width: 100%; margin: 0 auto; display: grid; place-items: center; border-radius: 36px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--ac) 22%, transparent), transparent 70%); perspective: 900px; }
.svc-row__num { position: absolute; left: 10px; top: 0; font-family: var(--display); font-size: 5rem; font-weight: 700; color: rgba(255,255,255,.06); line-height: 1; }
.cube { position: relative; width: 150px; height: 150px; transform-style: preserve-3d; animation: cube 16s linear infinite; }
.cube__face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--ac) 60%, transparent); background: linear-gradient(140deg, color-mix(in srgb, var(--ac) 35%, #0a1532), #0a1532); box-shadow: inset 0 0 40px color-mix(in srgb, var(--ac) 30%, transparent); color: #fff; backface-visibility: visible; }
.cube__face--front { transform: translateZ(75px); }
.cube__face--back { transform: rotateY(180deg) translateZ(75px); }
.cube__face--right { transform: rotateY(90deg) translateZ(75px); }
.cube__face--left { transform: rotateY(-90deg) translateZ(75px); }
.cube__face--top { transform: rotateX(90deg) translateZ(75px); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(75px); }
@keyframes cube { from { transform: rotateX(-18deg) rotateY(0deg); } to { transform: rotateX(-18deg) rotateY(360deg); } }
.tick-grid { list-style: none; padding: 0; margin: 18px 0 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.tick-grid li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: var(--ink-2); }
.tick-grid .icon { color: var(--ac, var(--green)); flex: none; margin-top: 4px; }
@media (max-width: 900px) { .svc-row { grid-template-columns: 1fr; gap: 30px; } .svc-row--flip .svc-row__visual { order: 0; } .svc-row__visual { max-width: 280px; } .svc-jump { position: static; } }
@media (max-width: 520px) { .tick-grid { grid-template-columns: 1fr; } }
.stack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stack { padding: 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.stack h4 { color: var(--cyan); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; font-family: var(--font); }
.stack ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.stack li { padding: 6px 12px; border-radius: 10px; background: var(--surface-2); font-size: .88rem; font-weight: 500; }
@media (max-width: 820px) { .stack-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .stack-grid { grid-template-columns: 1fr; } }

/* ---------- Feature grid (Next4Chat, case study) ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feat { position: relative; padding: 28px; border-radius: var(--radius-lg); background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); border: 1px solid var(--line); overflow: hidden; transition: border-color .3s, transform .5s var(--ease), opacity .9s var(--ease); }
.feat:hover { border-color: rgba(20,200,180,.4); }
.feat__icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: rgba(34,197,94,.12); color: #4ade80; border: 1px solid rgba(34,197,94,.3); margin-bottom: 18px; transform: translateZ(30px); }
.feat__num { display: block; font-family: var(--display); font-size: 1.7rem; font-weight: 700; margin-bottom: 10px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.feat p { font-size: .94rem; margin: 0; }
@media (max-width: 900px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feat-grid { grid-template-columns: 1fr; } }

/* Next4Chat page hero phone */
.page-hero--n4c .page-hero__rings span { border-color: rgba(34,197,94,.3); }
.phone-3d { position: relative; height: 560px; display: grid; place-items: center; perspective: 1200px; }
.phone-frame--lg { width: 260px; position: relative; z-index: 2; transform: translateZ(60px); }
.phone-frame--back { position: absolute; width: 220px; transform: translate(130px, 30px) rotateY(-18deg) translateZ(-40px); opacity: .7; z-index: 1; }
.bubble { position: absolute; z-index: 3; padding: 10px 16px; border-radius: 18px 18px 18px 4px; font-weight: 600; font-size: .88rem; background: rgba(10,21,50,.85); border: 1px solid rgba(34,197,94,.4); backdrop-filter: blur(8px); box-shadow: 0 10px 30px -10px rgba(0,0,0,.8); animation: float 6s ease-in-out infinite; transform: translateZ(100px); white-space: nowrap; }
.bubble--1 { left: 2%; top: 18%; }
.bubble--2 { right: 0; top: 8%; animation-delay: -2s; border-radius: 18px 18px 4px 18px; }
.bubble--3 { left: 6%; bottom: 14%; animation-delay: -4s; }
.contact-strip { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; padding: 36px 40px; border-radius: var(--radius-lg); background: linear-gradient(130deg, rgba(34,197,94,.14), rgba(11,92,255,.1)); border: 1px solid rgba(34,197,94,.25); }
.contact-strip h3 { font-size: 1.6rem; }
.contact-strip p { margin: 0; }
.contact-strip dl { display: flex; gap: 40px; margin: 0; }
.contact-strip dt { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.contact-strip dd { margin: 4px 0 0; font-weight: 600; color: #4ade80; }
@media (max-width: 760px) { .contact-strip { grid-template-columns: 1fr; } .contact-strip dl { flex-direction: column; gap: 14px; } .phone-3d { height: 480px; } .phone-frame--lg { width: 210px; } .phone-frame--back { width: 170px; transform: translate(90px, 30px) rotateY(-18deg); } }

/* ---------- Portfolio ---------- */
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.work-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s, transform .5s var(--ease), opacity .9s var(--ease); }
.work-card:hover { border-color: rgba(20,200,180,.45); box-shadow: 0 40px 80px -40px rgba(11,92,255,.6); }
.work-card__media { aspect-ratio: 16/9; overflow: hidden; border-bottom: 1px solid var(--line); }
.work-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--ease); }
.work-card:hover .work-card__media img { transform: scale(1.06); }
.work-card__body { padding: 28px; display: flex; flex-direction: column; flex: 1; }
.work-card__body p { flex: 1; }
.work-card__meta { display: flex; gap: 12px; align-items: center; font-size: .85rem; color: var(--ink-3); }
.work-card__meta .badge { margin: 0; }
.work-card h2 { font-size: 1.8rem; margin-top: 12px; }
@media (max-width: 860px) { .work-grid { grid-template-columns: 1fr; } }

.facts { display: grid; grid-template-columns: repeat(4, auto); gap: 28px 48px; justify-content: start; margin-top: 34px; }
.facts dt { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 4px 0 0; font-weight: 600; }
.facts dd a { color: var(--cyan); }
.facts .badge { margin: 0; }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr 1fr; } }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.two-col--center { align-items: center; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; gap: 32px; } }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.gallery__item { margin: 0; }
.gallery__item figcaption { margin-top: 12px; color: var(--ink-3); font-size: .9rem; text-align: center; }
.browser--sm .browser__bar { padding: 8px 12px; }
.browser--sm .browser__bar i { width: 9px; height: 9px; }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr; } }
.phones-row { display: flex; justify-content: center; gap: 30px; margin-top: 70px; perspective: 1200px; }
.phones-row .phone-frame { width: 220px; }
.phones-row .phone-frame.is-in { transform: rotateY(var(--r)) translateZ(calc(var(--r) * -2)); }
.phones-row .phone-frame:nth-child(2).is-in { transform: translateY(-30px); }
@media (max-width: 760px) { .phones-row { gap: 12px; } .phones-row .phone-frame { width: 31%; padding: 4px; border-radius: 18px; } .phones-row .phone-frame img { border-radius: 14px; } }

/* ---------- Engagement extras ---------- */
.svc-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.svc-mini__item { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); font-weight: 600; transition: border-color .3s, transform .3s, opacity .9s var(--ease); }
.svc-mini__item:hover { border-color: color-mix(in srgb, var(--ac) 50%, transparent); transform: translateY(-3px); }
.svc-mini__item .svc-card__icon { width: 44px; height: 44px; margin: 0; border-radius: 12px; transform: none; }
@media (max-width: 900px) { .svc-mini { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .svc-mini { grid-template-columns: 1fr; } }
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq__item { border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); padding: 0 24px; transition: border-color .3s; }
.faq__item[open] { border-color: rgba(20,200,180,.4); }
.faq__item summary { list-style: none; cursor: pointer; padding: 20px 0; font-weight: 600; display: flex; justify-content: space-between; gap: 20px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary span { color: var(--cyan); font-size: 1.3rem; line-height: 1; transition: transform .3s; }
.faq__item[open] summary span { transform: rotate(45deg); }
.faq__item p { margin: 0 0 20px; }

/* ---------- Industries ---------- */
.ind-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.ind { position: relative; padding: 26px 22px; border-radius: var(--radius); background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); border: 1px solid var(--line); overflow: hidden; min-height: 190px; transition: border-color .3s, transform .5s var(--ease), opacity .9s var(--ease); }
.ind:hover { border-color: rgba(14,165,233,.5); }
.ind__n { display: block; font-family: var(--display); font-weight: 700; color: var(--violet); margin-bottom: 18px; }
.ind h3 { font-size: 1.1rem; }
.ind p { font-size: .88rem; margin: 0; }
@media (max-width: 1000px) { .ind-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .ind-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Company ---------- */
.mv { display: grid; gap: 16px; }
.mv__card { padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.mv__card h4 { color: var(--cyan); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; font-family: var(--font); }
.mv__card p { margin: 0; color: var(--ink); font-size: 1.05rem; }
.founder-card { display: flex; gap: 24px; align-items: center; padding: 32px; border-radius: var(--radius-lg); background: linear-gradient(140deg, rgba(11,92,255,.16), rgba(14,165,233,.1)); border: 1px solid var(--line-2); }
.founder-card h3 { margin-bottom: 4px; }
.founder-card p { margin: 0 0 8px; }
.founder-card__avatar { flex: none; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 26px; background: var(--grad); font-family: var(--display); font-size: 2rem; font-weight: 700; box-shadow: 0 20px 40px -14px rgba(11,92,255,.7); transform: translateZ(40px); }
.founder-card--lg { flex-direction: column; text-align: center; padding: 50px 32px; }
.founder-card--lg .founder-card__avatar { width: 140px; height: 140px; font-size: 3rem; border-radius: 40px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: start; }
.form { padding: clamp(24px, 4vw, 40px); display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea {
    width: 100%; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(6,13,36,.6); color: var(--ink);
    font: inherit; font-size: .95rem; transition: border-color .2s, box-shadow .2s;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field select option { background: var(--bg-2); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(20,200,180,.15); }
.error { color: #f87171; font-size: .82rem; }
.alert { padding: 14px 18px; border-radius: 14px; margin-bottom: 18px; font-size: .95rem; }
.alert--ok { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.35); }
.alert--err { background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.35); }
.contact-card { padding: 32px; }
.contact-card dl { margin: 18px 0 0; display: grid; gap: 18px; }
.contact-card dt { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.contact-card dd { margin: 4px 0 0; font-weight: 500; }
.contact-card dd a { color: var(--cyan); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

/* ---------- Legal doc ---------- */
.doc { max-width: 860px; margin: 0 auto; padding: clamp(28px, 5vw, 56px); }
.doc h2 { font-size: 1.35rem; margin-top: 1.8em; }
.doc ul { color: var(--ink-2); padding-left: 1.2em; }
.doc li { margin-bottom: 6px; }
.doc a { color: var(--cyan); }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0 20px; }
.spec { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 18px 0; }
.spec__row { display: grid; grid-template-columns: 140px 1fr; border-top: 1px solid var(--line); }
.spec__row:first-child { border-top: 0; }
.spec__key { padding: 12px 16px; font-weight: 700; background: var(--surface); }
.spec__val { padding: 12px 16px; color: var(--ink-2); }

/* ---------- Footer ---------- */
.site-footer { position: relative; padding: 80px 0 30px; border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(10,21,50,.9)); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 36px; }
.footer-brand p { font-size: .92rem; margin: 18px 0; max-width: 36ch; }
.site-footer h4 { font-family: var(--font); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer ul a { color: var(--ink-2); font-size: .92rem; transition: color .2s; }
.site-footer ul a:hover { color: var(--cyan); }
.subscribe { display: flex; gap: 8px; max-width: 360px; }
.subscribe input[type=email] { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(6,13,36,.6); color: var(--ink); font: inherit; font-size: .9rem; }
.footer-product { display: flex; align-items: center; gap: 14px; margin-top: 48px; padding: 16px 20px; border-radius: 16px; background: rgba(34,197,94,.07); border: 1px solid rgba(34,197,94,.2); font-size: .92rem; color: var(--ink-2); }
.footer-product img { border-radius: 10px; background: #fff; padding: 3px; }
.footer-product b { color: var(--ink); }
.footer-product a { color: #4ade80; font-weight: 600; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between; align-items: center; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-3); }
.footer-bottom a:hover { color: var(--cyan); }
.footer-social { display: flex; gap: 10px; }
.footer-social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); transition: all .2s; }
.footer-social a:hover { color: var(--ink); border-color: rgba(20,200,180,.5); transform: translateY(-2px); }
.footer-social svg { width: 16px; height: 16px; }
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
    [data-scroll-tilt] { transform: none; }
}

@media (max-width: 600px) {
    .page-hero--n4c, .phone-3d { overflow: hidden; }
    .bubble { font-size: .74rem; padding: 7px 11px; }
    .bubble--2 { right: 2%; top: 4%; }
}

/* ---------- Code and tech labels: JetBrains Mono ---------- */
.eyebrow, .chip, .hero__tags li, .tech__item, .tech__item em, .stack li, .stack h4, .pill-list li,
.plan__term, .plan__flag, .badge, .svc-card__num, .svc-row__num, .process__dot, .feat__num, .ind__n,
.why__n, .facts dt, .contact-card dt, .contact-strip dt, .svc-jump a, .browser__bar span, .spec__key,
.mv__card h4, .site-footer h4, .brand__text small, code, pre, kbd {
    font-family: var(--mono);
}
.eyebrow, .site-footer h4, .brand__text small { letter-spacing: .14em; }
.svc-card__num, .svc-row__num, .why__n { font-weight: 600; }

/* Brand logo (v3.1.0) */
.brand img.brand__logo { width: auto; height: 48px; filter: drop-shadow(0 0 12px rgba(20,200,180,.25)); }
.brand img.brand__logo--footer { height: 120px; }
@media (max-width: 640px) { .brand img.brand__logo { height: 38px; } .brand img.brand__logo--footer { height: 104px; } }

/* ==========================================================================
   v3.1.0 — new look
   Dark 3D hero and product bands, crisp light "paper" sections for content.
   ========================================================================== */

/* ---------- Light sections ---------- */
html[data-theme="light"],
html[data-theme="light"] :is(.section, .is-light) {
    --bg: #f5f8fd;
    --bg-2: #ffffff;
    --bg-3: #e9eef7;
    --surface: #ffffff;
    --surface-2: #eef3fb;
    --line: rgba(13, 27, 62, .09);
    --line-2: rgba(13, 27, 62, .16);
    --ink: #0b1530;
    --ink-2: #46526b;
    --ink-3: #6b7690;
    --cyan: #0b84c6;
    --green: #16a34a;
    --violet: #6d42d9;
    --shadow: 0 1px 2px rgba(13,27,62,.05), 0 24px 48px -28px rgba(13,27,62,.28);
    background: var(--bg);
    color: var(--ink);
}
html[data-theme="light"] .section--alt { background: #e9eef7; }
html[data-theme="light"] .n4c-band { background: linear-gradient(160deg, #ecfdf3, #f5f8fd 55%, #eaf1ff); }
html[data-theme="light"] #contracts { background: #fff; }
html[data-theme="light"] .tech { mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.page-hero + .section.section--tight { padding-top: 64px; }
.page-hero { padding-bottom: 110px; }
.page-hero--sm { padding-bottom: 70px; }

/* Cards on light: solid white with soft depth */
html[data-theme="light"] :is(.section, .is-light) :is(.svc-card, .plan, .feat, .work-card, .ind, .why, .stack, .mv__card, .faq__item, .svc-mini__item, .glass, .contact-card, .tech__item) {
    background: #fff; border-color: var(--line); box-shadow: var(--shadow); backdrop-filter: none;
}
html[data-theme="light"] :is(.section, .is-light) .plan--hot { background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; box-shadow: 0 40px 80px -40px rgba(11,92,255,.45); }
html[data-theme="light"] :is(.section, .is-light) .plan__flag { color: #fff; }
html[data-theme="light"] :is(.section, .is-light) .svc-card::before { opacity: .1; }
html[data-theme="light"] :is(.section, .is-light) .svc-card__num,
html[data-theme="light"] :is(.section, .is-light) .svc-row__num { color: rgba(13,27,62,.1); }
html[data-theme="light"] :is(.section, .is-light) .svc-card__glare { background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(11,92,255,.09), transparent 50%); }
html[data-theme="light"] :is(.section, .is-light) .badge--live { background: rgba(22,163,74,.1); color: #15803d; border-color: rgba(22,163,74,.3); }
html[data-theme="light"] :is(.section, .is-light) .field :is(input, select, textarea) { background: #fff; }
html[data-theme="light"] :is(.section, .is-light) .svc-jump a { background: rgba(255,255,255,.92); box-shadow: 0 6px 20px -12px rgba(13,27,62,.4); }
html[data-theme="light"] :is(.section, .is-light) .contact-strip dd,
html[data-theme="light"] :is(.section, .is-light) .n4c-mail a { color: #15803d; }
html[data-theme="light"] :is(.section, .is-light) .n4c-tag { color: #15803d; }
html[data-theme="light"] :is(.section, .is-light) .svc-row__visual { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--ac) 18%, transparent), transparent 70%); }
html[data-theme="light"] :is(.section, .is-light) .why:hover,
html[data-theme="light"] :is(.section, .is-light) .svc-card:hover { box-shadow: 0 30px 60px -30px rgba(13,27,62,.35); }
html[data-theme="light"] :is(.section, .is-light) .browser { box-shadow: 0 40px 80px -40px rgba(13,27,62,.5); }
html[data-theme="light"] :is(.section, .is-light) .alert--ok { color: #14532d; }

/* CTA is always a dark 3D panel */
.cta {
    --ink: #eef4ff; --ink-2: #b4bfd8; --ink-3: #7c88a6; --cyan: #14c8b4; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.16); --surface: rgba(255,255,255,.05);
    color: var(--ink);
    background: radial-gradient(ellipse at 0% 0%, rgba(11,92,255,.45), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(20,200,180,.25), transparent 55%), #08102a;
    box-shadow: 0 50px 100px -50px rgba(8,16,42,.9);
}

/* ---------- Home hero (new) ---------- */
.hero--v3 .hero__grid { grid-template-columns: 1.05fr .95fr; }
.hero--v3 .hero__title { font-size: clamp(2.5rem, 5.4vw, 4.5rem); font-weight: 800; letter-spacing: -.035em; }
.hero__product { display: inline-flex; align-items: center; gap: 12px; margin-top: 34px; padding: 8px 16px 8px 8px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line-2); backdrop-filter: blur(10px); transition: border-color .3s, transform .3s; }
.hero__product:hover { border-color: rgba(34,197,94,.55); transform: translateY(-2px); }
.hero__product img { width: 40px; height: 40px; border-radius: 11px; background: #fff; padding: 3px; }
.hero__product small { display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #4ade80; }
.hero__product b { font-size: .95rem; }
.hero__product .icon { color: var(--ink-3); margin-left: 6px; }

/* Isometric layer stack: each layer is one part of a business system */
.stack3d { --rx: 0deg; --rz: 0deg; --gap: 54px; position: relative; aspect-ratio: 1; display: grid; place-items: center; perspective: 1600px; }
.stack3d__scene { position: relative; width: 300px; height: 200px; transform-style: preserve-3d; transform: rotateX(calc(58deg + var(--rx))) rotateZ(calc(-40deg + var(--rz))); transition: transform .4s var(--ease); }
.layer {
    position: absolute; inset: 0; border-radius: 22px; transform-style: preserve-3d;
    transform: translateZ(calc(var(--z) * var(--gap)));
    background: linear-gradient(135deg, color-mix(in srgb, var(--lc) 38%, rgba(10,21,50,.55)), rgba(10,21,50,.55));
    border: 1px solid color-mix(in srgb, var(--lc) 70%, transparent);
    box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 40px -6px color-mix(in srgb, var(--lc) 60%, transparent);
    backdrop-filter: blur(3px);
    animation: layerbob 6s ease-in-out infinite; animation-delay: calc(var(--z) * -.6s);
}
.layer::before { content: ""; position: absolute; inset: 14px; border-radius: 12px; background-image: linear-gradient(color-mix(in srgb, var(--lc) 25%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--lc) 25%, transparent) 1px, transparent 1px); background-size: 24px 24px; opacity: .6; }
.layer::after { content: ""; position: absolute; right: 18px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--lc); box-shadow: 0 0 14px var(--lc); }
.layer__label { position: absolute; left: 20px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 600; font-size: .82rem; letter-spacing: .04em; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.layer__label .icon { color: var(--lc); }
.layer__bars { position: absolute; left: 20px; top: 20px; display: grid; gap: 6px; }
.layer__bars i { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--lc) 70%, white 10%); opacity: .75; }
.layer__bars i:nth-child(1) { width: 90px; } .layer__bars i:nth-child(2) { width: 60px; opacity: .45; } .layer__bars i:nth-child(3) { width: 74px; opacity: .3; }
@keyframes layerbob { 50% { transform: translateZ(calc(var(--z) * var(--gap) + 10px)); } }
.stack3d__shadow { position: absolute; left: 50%; top: 62%; width: 70%; height: 22%; transform: translate(-50%, 0); border-radius: 50%; background: radial-gradient(ellipse, rgba(20,200,180,.35), transparent 70%); filter: blur(18px); }
.stack3d__tag { position: absolute; padding: 8px 12px; border-radius: 12px; font-size: .8rem; font-weight: 600; background: rgba(10,21,50,.78); border: 1px solid var(--line-2); backdrop-filter: blur(8px); box-shadow: 0 14px 30px -12px rgba(0,0,0,.8); display: inline-flex; gap: 8px; align-items: center; animation: float 7s ease-in-out infinite; white-space: nowrap; }
.stack3d__tag .icon { color: var(--cyan); }
.stack3d__tag--1 { left: 0; top: 16%; }
.stack3d__tag--2 { right: 0; top: 30%; animation-delay: -2.5s; }
.stack3d__tag--3 { left: 6%; bottom: 14%; animation-delay: -4.5s; }
.stack3d__tag--4 { right: 6%; bottom: 8%; animation-delay: -1.2s; }
@media (max-width: 920px) {
    .hero--v3 .hero__grid { grid-template-columns: 1fr; }
    .stack3d { max-width: 440px; width: 100%; margin: 10px auto 0; }
}
@media (max-width: 520px) {
    .stack3d { --gap: 40px; }
    .stack3d__scene { width: 220px; height: 150px; }
    .layer__label { font-size: .7rem; left: 14px; bottom: 10px; }
    .layer__bars i:nth-child(1) { width: 60px; } .layer__bars i:nth-child(2) { width: 40px; } .layer__bars i:nth-child(3) { width: 50px; }
    .stack3d__tag { font-size: .7rem; padding: 6px 9px; }
}

/* ---------- Platform logo strip ---------- */
.platforms { padding: 26px 0 30px; border-top: 1px solid var(--line); }
.platforms__inner { display: flex; align-items: center; gap: 28px; }
.platforms__label { flex: none; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.platforms__row { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.platforms__track { display: flex; gap: 18px; width: max-content; animation: marquee 40s linear infinite; }
.platforms__track span { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); font-weight: 600; font-size: .9rem; color: var(--ink-2); white-space: nowrap; }
.platforms__track img { width: 30px; height: 30px; border-radius: 8px; }
@media (max-width: 720px) { .platforms__inner { flex-direction: column; align-items: flex-start; gap: 14px; } .platforms__row { width: 100%; } }

/* ---------- Split section head ---------- */
.head-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: end; margin-bottom: 48px; }
.head-split h2 { margin: 0; }
.head-split p { margin: 0 0 14px; }
@media (max-width: 860px) { .head-split { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- Bento services ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; perspective: 1400px; }
.bento__item {
    position: relative; display: flex; flex-direction: column; padding: 26px; border-radius: 24px; min-height: 230px; overflow: hidden;
    background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow);
    transition: box-shadow .3s, border-color .3s, transform .5s var(--ease), opacity .9s var(--ease);
}
.bento__item:hover { border-color: color-mix(in srgb, var(--ac) 45%, transparent); box-shadow: 0 34px 60px -30px color-mix(in srgb, var(--ac) 55%, rgba(13,27,62,.5)); }
.bento__item h3 { font-size: 1.18rem; margin: 0 0 8px; transform: translateZ(30px); }
.bento__item p { font-size: .92rem; margin: 0; flex: 1; transform: translateZ(18px); }
.bento__icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; margin-bottom: 18px; color: #fff; background: linear-gradient(140deg, var(--ac), color-mix(in srgb, var(--ac) 55%, #0b1530)); box-shadow: 0 14px 26px -12px var(--ac); transform: translateZ(40px); }
.bento__num { position: absolute; right: 22px; top: 18px; font-family: var(--mono); font-weight: 600; font-size: .8rem; color: var(--ink-3); }
.bento__more { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .88rem; color: color-mix(in srgb, var(--ac) 80%, #0b1530); transform: translateZ(22px); }
.bento__item:hover .bento__more .icon { transform: translateX(4px); }
.bento__more .icon { transition: transform .25s; }
.bento__item--xl { grid-column: span 2; grid-row: span 2; padding: 34px; background: linear-gradient(150deg, #0b1a3d, #0a1230 60%, #071a2c); border-color: transparent; color: #eef4ff; }
.bento__item--xl p { color: #b4bfd8; font-size: 1rem; flex: 0; max-width: 46ch; }
.bento__item--xl h3 { font-size: 1.7rem; color: #fff; }
.bento__item--xl .bento__num { color: rgba(255,255,255,.4); }
.bento__item--xl .bento__more { color: #7dd3fc; }
.bento__item--xl .tick-grid li { color: #cfd8ea; font-size: .9rem; }
.bento__item--xl .tick-grid .icon { color: #14c8b4; }
.bento__item--xl .tick-grid { margin: 18px 0 0; max-width: 520px; }
.bento__cube { position: absolute; right: 40px; bottom: 44px; perspective: 900px; --ac: #0b5cff; }
.bento__cube .cube { width: 110px; height: 110px; }
.bento__cube .cube__face--front { transform: translateZ(55px); }
.bento__cube .cube__face--back { transform: rotateY(180deg) translateZ(55px); }
.bento__cube .cube__face--right { transform: rotateY(90deg) translateZ(55px); }
.bento__cube .cube__face--left { transform: rotateY(-90deg) translateZ(55px); }
.bento__cube .cube__face--top { transform: rotateX(90deg) translateZ(55px); }
.bento__cube .cube__face--bottom { transform: rotateX(-90deg) translateZ(55px); }
.bento__cube .cube__face { font-family: var(--mono); font-weight: 600; font-size: .8rem; }
.bento__item--wide { grid-column: span 2; background: linear-gradient(130deg, #ecfdf3, #fff 60%); }
@media (max-width: 1080px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento__item--xl { grid-row: auto; } }
@media (max-width: 640px) {
    .bento { grid-template-columns: 1fr; }
    .bento__item--xl, .bento__item--wide { grid-column: auto; }
    .bento__item { min-height: 0; }
    .bento__cube { position: relative; right: auto; bottom: auto; margin: 30px auto 10px; }
}
@media (max-width: 1080px) and (min-width: 641px) { .bento__cube { display: none; } }

/* ---------- Completed project (simple) ---------- */
.done { display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: center; padding: 30px; border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.done__media .browser { box-shadow: 0 30px 60px -36px rgba(13,27,62,.55); }
.done h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 4px; }
.done__client { color: var(--ink-3); font-weight: 500; margin-bottom: 16px; }
.done .check-list { margin: 18px 0 24px; }
.badge--done { background: rgba(11,92,255,.1); color: #0b4fd8; border: 1px solid rgba(11,92,255,.28); }
.badge--done::before { content: "✓"; font-size: .8rem; }
@media (max-width: 920px) { .done { grid-template-columns: 1fr; gap: 28px; padding: 20px; } }

/* ---------- Approach grid ---------- */
.approach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.approach__item { padding: 28px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .4s var(--ease), box-shadow .3s, opacity .9s var(--ease); }
.approach__item:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(13,27,62,.35); }
.approach__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: #eaf1ff; color: #0b4fd8; margin-bottom: 16px; font-family: var(--mono); font-weight: 600; }
.approach__item p { font-size: .93rem; margin: 0; }
@media (max-width: 900px) { .approach { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .approach { grid-template-columns: 1fr; } }

/* ---------- Steps (process, 3D numbered tiles) ---------- */
.steps { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; counter-reset: s; perspective: 1000px; }
.steps li { position: relative; padding: 20px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.steps b { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 12px; font-family: var(--mono); font-size: .9rem; color: #fff; background: var(--grad); box-shadow: 0 12px 20px -10px rgba(11,92,255,.8); transform: rotateX(18deg) rotateY(-18deg); }
.steps h4 { font-size: .98rem; margin-bottom: 4px; }
.steps p { font-size: .82rem; margin: 0; }
@media (max-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .steps { grid-template-columns: 1fr 1fr; } }

/* ---------- Industries chips ---------- */
.ind-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ind-chips a { padding: 12px 20px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); font-weight: 600; font-size: .95rem; transition: border-color .2s, transform .2s; }
.ind-chips a:hover { border-color: rgba(11,92,255,.5); transform: translateY(-2px); }

/* ---------- Simple project page ---------- */
.proj-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.proj-shots figure { margin: 0; }
.proj-shots figcaption { margin-top: 10px; font-size: .88rem; color: var(--ink-3); text-align: center; }
@media (max-width: 860px) { .proj-shots { grid-template-columns: 1fr; } }
.work-card--plain:hover .work-card__media img { transform: none; }
.work-card--plain:hover { transform: translateY(-4px); }
#industries { padding-bottom: 0; }
.is-light > .section:only-child { padding-top: 72px; }

/* ---------- v3.2.0: automatic dark / light mode ----------
   html[data-theme] is set in <head> from the saved choice or the device setting.
   Light: hero, page heroes, CTA and footer stay dark; content sections are light.
   Dark: every section is dark. */
html[data-theme="dark"] :is(.bento__item:not(.bento__item--xl), .done, .approach__item, .steps li, .ind-chips a) {
    background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border-color: var(--line); box-shadow: 0 30px 60px -40px rgba(0,0,0,.9);
}
html[data-theme="dark"] .bento__item--wide { background: linear-gradient(130deg, rgba(34,197,94,.14), rgba(255,255,255,.02) 60%); }
html[data-theme="dark"] .bento__item--xl { background: linear-gradient(150deg, #10245a, #0b1430 60%, #08243a); border: 1px solid rgba(11,92,255,.35); }
html[data-theme="dark"] .bento__more { color: var(--ac); }
html[data-theme="dark"] .approach__icon { background: rgba(11,92,255,.16); color: #8fbaff; }
html[data-theme="dark"] .badge--done { color: #8fbaff; background: rgba(11,92,255,.14); }
html[data-theme="dark"] .bento__item:hover, html[data-theme="dark"] .approach__item:hover { box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--ac, #0b5cff) 60%, transparent); }
html[data-theme="dark"] .section--alt { background: linear-gradient(180deg, #070a14, #0c1226 30%, #0c1226 70%, #070a14); }
.page-home .is-light { background: var(--bg); }
html[data-theme="dark"] .page-home .is-light { background: transparent; }

/* Theme switch */
.theme-switch { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; overflow: hidden; transition: border-color .2s, transform .2s; }
.theme-switch:hover { border-color: rgba(20,200,180,.6); transform: translateY(-1px); }
.theme-switch span { position: absolute; display: grid; place-items: center; transition: transform .45s var(--ease), opacity .3s; }
.theme-switch .ts-moon { transform: translateY(120%) rotate(-40deg); opacity: 0; }
html[data-theme="dark"] .theme-switch .ts-sun { transform: translateY(-120%) rotate(40deg); opacity: 0; }
html[data-theme="dark"] .theme-switch .ts-moon { transform: none; opacity: 1; }
html.theme-anim, html.theme-anim *, html.theme-anim *::before { transition: background-color .45s ease, border-color .45s ease, color .3s ease !important; }

/* ==========================================================================
   v3.3.0 — light-first cloud & DevOps design
   ========================================================================== */
:root {
    --header-bg: rgba(6,13,36,.72); --menu-bg: rgba(6,13,36,.97);
    --card: rgba(255,255,255,.045); --card-2: rgba(255,255,255,.025);
    --card-shadow: 0 30px 60px -40px rgba(0,0,0,.9);
    --iso-plate: #18213a; --iso-grid: #2a3557; --iso-side-a: #10172b; --iso-side-b: #0b1120;
    --hero-a: rgba(11,92,255,.35); --hero-b: rgba(14,165,233,.3); --hero-c: rgba(20,200,180,.22);
    --tag-bg: #111a33; --tag-line: rgba(255,255,255,.18); --tag-ink: #eef4ff;
    --grid-line: rgba(255,255,255,.025);
    --tf: #7b42bc;
}
html[data-theme="light"] {
    --header-bg: rgba(255,255,255,.85); --menu-bg: rgba(255,255,255,.98);
    --card: #ffffff; --card-2: #f7f9fd;
    --card-shadow: 0 1px 2px rgba(13,27,62,.05), 0 24px 48px -28px rgba(13,27,62,.28);
    --iso-plate: #ffffff; --iso-grid: #dbe3f2; --iso-side-a: #c9d3e6; --iso-side-b: #aeb9d0;
    --hero-a: rgba(11,92,255,.16); --hero-b: rgba(14,165,233,.12); --hero-c: rgba(20,200,180,.14);
    --tag-bg: #ffffff; --tag-line: #cfd9ee; --tag-ink: #0b1530;
    --grid-line: rgba(13,27,62,.045);
    color-scheme: light;
}
html[data-theme="dark"] { color-scheme: dark; }
.accent-pink { --ac: #f5a524; }
.bg-grid { background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); }
html[data-theme="light"] .cursor-glow { opacity: .5; }
html[data-theme="light"] .site-header.is-scrolled { box-shadow: 0 10px 30px -20px rgba(13,27,62,.35); }
.chip, .hero__product { background: var(--card); }
html[data-theme="light"] .chip { box-shadow: var(--card-shadow); }
.hero__aurora span:nth-child(1) { background: var(--hero-a); opacity: 1; }
.hero__aurora span:nth-child(2) { background: var(--hero-b); opacity: 1; }
.hero__aurora span:nth-child(3) { background: var(--hero-c); opacity: 1; }
html[data-theme="light"] .page-hero::after { background: radial-gradient(ellipse at 80% 40%, rgba(11,92,255,.12), transparent 55%), radial-gradient(ellipse at 10% 0%, rgba(14,165,233,.1), transparent 50%); }
html[data-theme="light"] .page-hero__rings span { border-color: rgba(11,92,255,.22); box-shadow: 0 0 60px rgba(11,92,255,.1), inset 0 0 60px rgba(14,165,233,.06); }

/* Logo per theme */
.brand__logo--on-light { display: none; }
html[data-theme="light"] .site-header .brand__logo--on-light { display: block; }
html[data-theme="light"] .site-header .brand__logo--on-dark { display: none; }
html[data-theme="light"] .brand img.brand__logo { filter: none; }

/* Footer always dark */
.site-footer {
    --bg: #060d24; --ink: #eef4ff; --ink-2: #b4bfd8; --ink-3: #7c88a6; --cyan: #14c8b4;
    --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.16); --surface: rgba(255,255,255,.035); --surface-2: rgba(255,255,255,.06);
    background: radial-gradient(ellipse at 10% 0%, rgba(11,92,255,.18), transparent 50%), #060a18; color: var(--ink);
}

/* ---------- Hero ---------- */
.hero--v33 { padding: 120px 0 60px; }
.hero--v33 .hero__grid { grid-template-columns: 1fr 1.08fr; gap: 30px; }
.hero--v33 .hero__title { font-size: clamp(2.4rem, 4.8vw, 4.1rem); font-weight: 800; letter-spacing: -.035em; }
.cloud-badges { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cloud-badges li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--card-shadow); font-weight: 600; font-size: .84rem; color: var(--ink-2); }
.cloud-badges img { border-radius: 6px; }
.scene3d { position: relative; perspective: 1600px; }
.scene3d__tilt { position: relative; transform-style: preserve-3d; transform: rotateX(var(--srx, 6deg)) rotateY(var(--sry, -8deg)); transition: transform .5s var(--ease); }
.iso-hero { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 40px 40px rgba(13,27,62,.18)); transform: translateZ(0); }
html[data-theme="dark"] .iso-hero { filter: drop-shadow(0 40px 50px rgba(0,0,0,.6)); }
.iso-bob { animation: isobob 6s ease-in-out infinite; }
.iso-bob--1 { animation-delay: -1.5s; } .iso-bob--2 { animation-delay: -3s; } .iso-bob--3 { animation-delay: -4.5s; }
.iso-core { animation: isobob 7s ease-in-out -2s infinite; }
@keyframes isobob { 50% { transform: translateY(-7px); } }
.iso-link { fill: none; stroke: var(--tf); stroke-width: 2.2; stroke-dasharray: 5 7; opacity: .8; animation: isodash 1.1s linear infinite; }
@keyframes isodash { to { stroke-dashoffset: -24; } }
.iso-packet { fill: #14c8b4; filter: drop-shadow(0 0 6px #14c8b4); }
.iso-tag { fill: var(--tag-bg); stroke: var(--tag-line); stroke-width: 1; filter: drop-shadow(0 6px 10px rgba(13,27,62,.15)); }
.iso-tag--tf { fill: var(--tf); stroke: none; }
.iso-tag-t { font: 600 12.5px var(--mono); text-anchor: middle; fill: var(--tag-ink); }
.iso-tag-t--tf { fill: #fff; }
.iso-led { animation: isoled 1.6s ease-in-out infinite; }
@keyframes isoled { 50% { opacity: .2; } }
.term { position: absolute; left: -6%; bottom: -2%; width: min(340px, 62%); border-radius: 14px; overflow: hidden; background: #0b1220; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 60px -24px rgba(8,16,42,.65); transform: translateZ(70px); animation: float 8s ease-in-out infinite; }
.term__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #121a2e; }
.term__bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; } .term__bar i:nth-child(2) { background: #febc2e; } .term__bar i:nth-child(3) { background: #28c840; }
.term__bar span { margin-left: 8px; font: 500 .7rem var(--mono); color: #7c88a6; }
.term__body { padding: 12px 14px 14px; font: 500 .7rem/1.7 var(--mono); color: #94a3b8; min-height: 150px; }
.term__line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; animation: termline 10s linear infinite; animation-delay: calc(var(--i) * .7s); }
.term__line--p { color: #e2e8f0; } .term__line--g { color: #4ade80; }
@keyframes termline { 0% { opacity: 0; transform: translateX(-6px); } 4% { opacity: 1; transform: none; } 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
.static-shot .term__line { animation: none; opacity: 1; }
.toast { position: absolute; right: -2%; top: 2%; display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--card-shadow); transform: translateZ(90px); animation: float 7s ease-in-out -3s infinite; }
.toast b { display: block; font-size: .86rem; } .toast small { display: block; font: 500 .66rem var(--mono); color: var(--ink-3); }
.toast__ok { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #22c55e; color: #fff; box-shadow: 0 0 0 5px rgba(34,197,94,.18); }
.hero-chip { position: absolute; right: 6%; bottom: 6%; display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border-radius: 999px; font: 600 .72rem var(--mono); background: var(--card); border: 1px solid var(--line); box-shadow: var(--card-shadow); color: var(--ink-2); transform: translateZ(50px); animation: float 6s ease-in-out -1s infinite; }
.hero-chip .icon { color: #22c55e; }
@media (max-width: 980px) {
    .hero--v33 .hero__grid { grid-template-columns: 1fr; }
    .scene3d { max-width: 560px; margin: 20px auto 0; width: 100%; }
}
@media (max-width: 560px) {
    .term { left: 0; bottom: -14%; width: 74%; }
    .term__body { font-size: .6rem; min-height: 0; padding: 8px 10px; }
    .toast { right: 0; top: -4%; padding: 7px 10px; } .toast small { display: none; }
    .hero-chip { display: none; }
    .scene3d { margin-bottom: 50px; }
}

.metrics--v33 { border: 0; background: none; padding: 10px 0 30px; }
.metrics--v33 .metrics__grid { gap: 16px; }
.metrics--v33 .metric { background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--card-shadow); padding: 22px 14px; }

/* ---------- Core expertise ---------- */
.xp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.xp-card { position: relative; grid-column: span 2; display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--card-shadow); transition: box-shadow .3s, border-color .3s, transform .5s var(--ease), opacity .9s var(--ease); }
.xp-card:hover { border-color: color-mix(in srgb, var(--ac) 45%, transparent); box-shadow: 0 40px 70px -36px color-mix(in srgb, var(--ac) 55%, rgba(13,27,62,.5)); }
.xp-card--lg { grid-column: span 3; flex-direction: row; align-items: stretch; }
.xp-card__art { display: grid; place-items: center; background: linear-gradient(160deg, color-mix(in srgb, var(--ac) 12%, transparent), transparent 70%); padding: 10px; }
.xp-card__art img { width: 100%; max-width: 300px; transform: translateZ(40px); transition: transform .6s var(--ease); }
.xp-card:hover .xp-card__art img { transform: translateZ(60px) translateY(-6px); }
.xp-card--lg .xp-card__art { flex: 0 0 44%; }
.xp-card__body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.xp-card__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #fff; background: linear-gradient(140deg, var(--ac), color-mix(in srgb, var(--ac) 55%, #0b1530)); box-shadow: 0 12px 22px -10px var(--ac); margin-bottom: 14px; }
.xp-card h3 { font-size: 1.22rem; margin-bottom: 8px; }
.xp-card p { font-size: .92rem; margin-bottom: 14px; }
.xp-list { list-style: none; padding: 0; margin: auto 0 0; display: grid; gap: 7px; }
.xp-list li { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; font-weight: 500; color: var(--ink); }
.xp-list .icon { flex: none; margin-top: 4px; color: var(--ac); }
@media (max-width: 1100px) { .xp-card--lg { grid-column: span 6; } .xp-card { grid-column: span 3; } .xp-card:last-child { grid-column: span 6; } }
@media (max-width: 680px) { .xp-grid { grid-template-columns: 1fr; } .xp-card, .xp-card--lg, .xp-card:last-child { grid-column: auto; } .xp-card--lg { flex-direction: column; } }

/* ---------- Dark band (multi-cloud) ---------- */
html[data-theme] .band-dark {
    --ink: #eef4ff; --ink-2: #b4bfd8; --ink-3: #7c88a6; --cyan: #14c8b4; --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16);
    --card: rgba(255,255,255,.05); --card-shadow: 0 30px 60px -40px rgba(0,0,0,.9);
    background: #070d22; color: var(--ink); overflow: hidden; isolation: isolate;
}
html[data-theme="light"] .band-dark { background: #070d22; margin: 0 16px; border-radius: 36px; }
.band-dark__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 15% 10%, rgba(255,153,0,.16), transparent 45%), radial-gradient(ellipse at 85% 30%, rgba(10,116,218,.25), transparent 50%), radial-gradient(ellipse at 50% 100%, rgba(14,165,233,.3), transparent 55%); }
.band-dark .section-head h2 { color: #fff; }
.mc-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 26px; align-items: center; perspective: 1400px; }
.mc-clouds { display: grid; gap: 14px; }
.mc-card { position: relative; display: flex; gap: 18px; align-items: center; padding: 20px 22px; border-radius: 20px; background: linear-gradient(130deg, color-mix(in srgb, var(--cc) 18%, transparent), rgba(255,255,255,.03)); border: 1px solid color-mix(in srgb, var(--cc) 40%, transparent); overflow: hidden; }
.mc-card img { border-radius: 12px; flex: none; transform: translateZ(40px); box-shadow: 0 10px 24px -10px var(--cc); }
.mc-card h3 { font-size: 1.1rem; margin: 0 0 6px; color: #fff; }
.mc-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.mc-card li { font-size: .82rem; color: #b4bfd8; }
.mc-card li::before { content: "▸ "; color: var(--cc); }
.code { border-radius: 18px; overflow: hidden; background: #0b1020; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(14,165,233,.25); }
.code__bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #121a2e; border-bottom: 1px solid rgba(255,255,255,.06); }
.code__bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; } .code__bar i:nth-child(2) { background: #febc2e; } .code__bar i:nth-child(3) { background: #28c840; }
.code__bar span { margin-left: 10px; font: 500 .74rem var(--mono); color: #7c88a6; }
.code__body { margin: 0; padding: 18px 20px; font: 500 .8rem/1.75 var(--mono); color: #cbd5e1; overflow-x: auto; }
.code__body .c { color: #64748b; } .code__body .k { color: #c084fc; } .code__body .s { color: #86efac; } .code__body .a { color: #7dd3fc; } .code__body .n { color: #fbbf24; }
@media (max-width: 920px) { .mc-grid { grid-template-columns: 1fr; } html[data-theme="light"] .band-dark { margin: 0 8px; border-radius: 26px; } }

/* ---------- Pipeline ---------- */
.pipe { position: relative; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.pipe__track { position: absolute; left: 7%; right: 7%; top: 34px; height: 4px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.pipe__beam { position: absolute; top: 0; bottom: 0; width: 22%; border-radius: 4px; background: linear-gradient(90deg, transparent, #14c8b4, #7b42bc, transparent); animation: beam 3.2s linear infinite; }
@keyframes beam { from { left: -22%; } to { left: 100%; } }
.pipe li { position: relative; text-align: center; }
.pipe__node { position: relative; display: grid; place-items: center; width: 70px; height: 70px; margin: 0 auto 14px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--card-shadow); color: #0b5cff; transform: perspective(500px) rotateX(14deg); animation: nodepop 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * .42s); }
html[data-theme="dark"] .pipe__node { color: #7dd3fc; }
.pipe__node em { position: absolute; right: -6px; top: -6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #22c55e; color: #fff; border: 3px solid var(--bg); }
@keyframes nodepop { 0%, 70%, 100% { box-shadow: var(--card-shadow); } 10% { box-shadow: 0 0 0 6px rgba(20,200,180,.18), var(--card-shadow); } }
.pipe b { display: block; font-size: .95rem; }
.pipe small { font: 500 .72rem var(--mono); color: var(--ink-3); }
@media (max-width: 900px) {
    .pipe { grid-template-columns: repeat(4, 1fr); row-gap: 26px; }
    .pipe__track { display: none; }
}
@media (max-width: 520px) { .pipe { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Why (7 + quote) ---------- */
.why7 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.why7__item { position: relative; padding: 26px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--card-shadow); transition: transform .5s var(--ease), opacity .9s var(--ease), box-shadow .3s; }
.why7__item h4 { font-size: 1.02rem; }
.why7__item p { font-size: .9rem; margin: 0; }
.why7__item--quote { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; background: linear-gradient(140deg, #0b5cff, #7b42bc); border: 0; }
.why7__item--quote p { color: #fff; font-weight: 600; font-size: 1rem; line-height: 1.5; }
.why7__item--quote .textlink { color: #fff; }
@media (max-width: 1000px) { .why7 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .why7 { grid-template-columns: 1fr; } }

/* ---------- Product + project ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; perspective: 1400px; }
.duo__card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--card-shadow); overflow: hidden; transition: box-shadow .3s, transform .5s var(--ease), opacity .9s var(--ease); }
.duo__card--n4c { background: linear-gradient(160deg, rgba(34,197,94,.12), var(--card) 60%); }
.duo__head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.duo__head img { border-radius: 14px; background: #fff; padding: 4px; box-shadow: 0 10px 24px -10px rgba(34,197,94,.6); }
.duo__head h3 { margin: 4px 0 0; font-size: 1.5rem; width: 100%; }
.duo__head .badge { margin: 0; }
.duo__card p { margin: 0; font-size: .94rem; }
.duo__phones { display: flex; justify-content: center; gap: 0; margin: 10px 0 0; height: 260px; }
.duo__phones img { width: 128px; height: 278px; object-fit: cover; object-position: top; border-radius: 20px; border: 4px solid #1a2033; box-shadow: 0 20px 40px -20px rgba(0,0,0,.7); transform: rotate(var(--r)); margin: 0 -14px; }
.duo__phones img:nth-child(2) { position: relative; z-index: 2; transform: translateY(-12px); }
.duo .browser { margin-top: auto; }
.duo .bento__more { color: var(--ac, #0b5cff); }
html[data-theme="dark"] .duo .bento__more { color: #7dd3fc; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }
.svc-row__visual--art { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ac) 16%, transparent), transparent 70%); max-width: 460px; aspect-ratio: auto; padding: 20px 0; }
.svc-row__visual--art img { width: 100%; transform: translateZ(40px); }
.mc-clouds--row { grid-template-columns: repeat(3, 1fr); perspective: 1400px; }
.mc-clouds--row .mc-card { flex-direction: column; align-items: flex-start; }
@media (max-width: 900px) { .mc-clouds--row { grid-template-columns: 1fr; } }
.stack-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .stack-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .stack-grid { grid-template-columns: 1fr; } }
.svc-jump a { background: var(--card); }

/* ==========================================================================
   Layered 3D scenes (hero + service cards): rendered 3D objects, lit floor,
   orbiting objects and floating tool tiles
   ========================================================================== */
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.art3d {
    --floor-a: rgba(11,92,255,.10); --floor-b: rgba(255,255,255,.85); --ring: rgba(11,92,255,.35); --ring-2: rgba(14,165,233,.35);
    --glow: color-mix(in srgb, var(--ac, #0b5cff) 26%, transparent); --obj-shadow: rgba(30,50,110,.28);
    --tag-surface: rgba(255,255,255,.82); --tag-edge: rgba(15,30,70,.08);
    position: relative; width: 100%; aspect-ratio: 400 / 330; transform-style: preserve-3d; perspective: 1100px;
}
html[data-theme="dark"] .art3d, .band-dark .art3d {
    --floor-a: rgba(20,200,180,.10); --floor-b: rgba(18,28,58,.9); --ring: rgba(20,200,180,.45); --ring-2: rgba(14,165,233,.5);
    --obj-shadow: rgba(0,0,0,.55); --tag-surface: rgba(16,24,48,.78); --tag-edge: rgba(255,255,255,.1);
}
.art3d > * { position: absolute; }
.art3d__glow { inset: 6% 8% 0; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); filter: blur(10px); animation: a3glow 6s ease-in-out infinite; }
.art3d__floor {
    left: 50%; top: 74%; width: 74%; aspect-ratio: 1; border-radius: 50%;
    translate: -50% -50%; transform: rotateX(74deg); transform-style: preserve-3d;
    background: radial-gradient(circle, var(--floor-b) 0 38%, var(--floor-a) 39% 62%, transparent 63%);
    box-shadow: 0 0 0 1px var(--ring) inset;
}
.art3d__floor i { position: absolute; inset: 8%; border-radius: 50%; border: 2px dashed var(--ring); animation: a3spin 26s linear infinite; }
.art3d__floor i:nth-child(2) { inset: 22%; border: 1.5px solid var(--ring-2); border-top-color: transparent; border-bottom-color: transparent; animation-duration: 9s; animation-direction: reverse; }
.art3d__floor i:nth-child(3) { inset: -10%; border: 1px dashed var(--ring-2); opacity: .6; animation-duration: 60s; }
.art3d__shadow { left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 3 / 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, var(--obj-shadow), transparent); animation: a3shadow 5s ease-in-out infinite; }
.art3d__main, .art3d__obj { left: var(--x); top: var(--y); width: var(--w); height: auto; max-width: none; translate: -50% -50% var(--z, 60px); filter: drop-shadow(0 18px 18px var(--obj-shadow)); will-change: transform; }
.art3d__main { --z: 40px; animation: a3float 5s ease-in-out infinite; }
.art3d__obj { animation: a3bob 6s ease-in-out var(--dl, 0s) infinite; transition: translate .7s var(--ease); }
.art3d__tile { left: var(--x); top: var(--y); width: 13%; aspect-ratio: 1; translate: -50% -50% 90px; padding: 3px; border-radius: 22%; background: var(--tag-surface); border: 1px solid var(--tag-edge); box-shadow: 0 14px 24px -12px var(--obj-shadow); backdrop-filter: blur(6px); animation: a3bob 5s ease-in-out var(--dl, 0s) infinite; }
.art3d__tile img { width: 100%; height: 100%; border-radius: 18%; display: block; }
.art3d__beam { left: 50%; top: 18%; width: 30%; height: 58%; translate: -50% 0; background: linear-gradient(to top, color-mix(in srgb, var(--ac, #0b5cff) 30%, transparent), transparent); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); opacity: .5; filter: blur(4px); animation: a3beam 4s ease-in-out infinite; }

/* card hover: the scene opens up towards the viewer */
.xp-card:hover .art3d__obj, .svc-row__visual--art:hover .art3d__obj { translate: -50% -50% calc(var(--z, 60px) + 50px); }
.xp-card .xp-card__art img { max-width: none; transform: none; }
.xp-card:hover .xp-card__art img { transform: none; }
.xp-card__art { padding: 4px 6px; }
.xp-card__art .art3d { max-width: 340px; }
.svc-row__visual--art .art3d { max-width: 440px; margin: 0 auto; }
.svc-row__visual--art img { transform: none; }

/* hero */
.art3d--hero { --ac: #7b42bc; aspect-ratio: 560 / 470; }
.art3d--hero .art3d__floor { top: 70%; width: 82%; }
.art3d--hero .art3d__glow { background: radial-gradient(closest-side, rgba(14,165,233,.28), rgba(11,92,255,.12) 60%, transparent); }
.art3d__core { left: var(--x); top: var(--y); translate: -50% -50% 80px; display: flex; flex-direction: column; align-items: center; gap: 4px; animation: a3float 5s ease-in-out infinite; }
.art3d__core img { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 0 0 4px rgba(14,165,233,.25), 0 16px 30px -10px rgba(14,165,233,.7); animation: a3pulse 2.6s ease-in-out infinite; }
.art3d__core b { font: 600 .68rem var(--mono); letter-spacing: .04em; color: #fff; background: #7b42bc; padding: 2px 8px; border-radius: 999px; }
.art3d__orbit { left: 50%; top: 52%; width: 0; height: 0; transform-style: preserve-3d; }
.art3d__orb {
    position: absolute; left: 0; top: 0; width: clamp(44px, 12%, 72px); height: auto; translate: -50% -50%;
    filter: drop-shadow(0 12px 12px var(--obj-shadow));
    transform: translate3d(calc(cos(var(--a)) * 330%), calc(sin(var(--a)) * 95%), calc(sin(var(--a)) * 170px));
    animation: a3orbit 24s linear var(--d, 0s) infinite;
}
.art3d__tag { left: var(--x); top: var(--y); translate: -50% -50% var(--z, 60px); display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 6px; border-radius: 12px; white-space: nowrap; font: 600 .74rem var(--font); color: var(--ink); background: var(--tag-surface); border: 1px solid var(--tag-edge); box-shadow: 0 16px 30px -16px var(--obj-shadow); backdrop-filter: blur(8px); animation: a3bob 6s ease-in-out var(--dl, 0s) infinite; }
.art3d__tag img { width: 26px; height: 26px; border-radius: 7px; }
.scene3d .art3d--hero ~ .term { z-index: 2; }

@keyframes a3spin { to { transform: rotate(360deg); } }
@keyframes a3float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-5%) rotate(1.5deg); } }
@keyframes a3bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12%) rotate(-4deg); } }
@keyframes a3shadow { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .82; opacity: .65; } }
@keyframes a3glow { 0%, 100% { opacity: .75; scale: 1; } 50% { opacity: 1; scale: 1.06; } }
@keyframes a3beam { 0%, 100% { opacity: .25; } 50% { opacity: .55; } }
@keyframes a3pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(14,165,233,.25), 0 16px 30px -10px rgba(14,165,233,.7); } 50% { box-shadow: 0 0 0 10px rgba(14,165,233,.08), 0 16px 30px -10px rgba(14,165,233,.7); } }
@keyframes a3orbit { to { --a: 360deg; } }

@media (max-width: 900px) {
    .art3d__tag { font-size: .66rem; padding: 4px 8px 4px 4px; }
    .art3d__tag img { width: 20px; height: 20px; }
    .art3d__orb { width: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .art3d *, .art3d__orb { animation: none !important; }
}
.static-shot .art3d *, .static-shot .art3d__orb { animation-play-state: paused !important; }
.art3d img { max-width: none; }
.art3d .art3d__main, .art3d .art3d__obj { width: var(--w); height: auto; }
.art3d--hero { --ow: clamp(42px, 5.2vw, 74px); }
.art3d .art3d__orb { width: var(--ow); }
.art3d--hero .art3d__orbit { top: 47%; }
.art3d .art3d__orb { transform: translate3d(calc(cos(var(--a)) * 330%), calc(sin(var(--a)) * 80%), calc(sin(var(--a)) * 60px)); }
.art3d--hero ~ .term { translate: 0 0 160px; }
.art3d--hero ~ .toast, .art3d--hero ~ .hero-chip { translate: 0 0 170px; }
.xp-card--lg .art3d { transform: scale(1.32); }
.xp-card--lg .xp-card__art { overflow: visible; }
@media (max-width: 900px) { .xp-card--lg .art3d { transform: none; } }
.art3d--hero ~ .term { translate: 0 0 80px; }
.art3d--hero ~ .toast, .art3d--hero ~ .hero-chip { translate: 0 0 70px; }
.xp-card--lg .art3d { transform: scale(1.16); }
@media (max-width: 900px) {
    .art3d--hero ~ .term, .art3d--hero ~ .toast { translate: none; }
    .art3d--hero ~ .term { bottom: -30%; left: 3%; width: 80%; }
    .scene3d:has(.art3d--hero) { margin-bottom: 130px; }
    .art3d__tag--2, .art3d__tag--3 { display: none; }
    .art3d__tag { --z: 30px !important; }
    .art3d--hero .art3d__tag--0 { left: 16%; top: 20%; }
    .art3d--hero .art3d__tag--1 { left: 84%; top: 64%; }
}
@media (max-width: 900px) {
    .art3d__core img { width: 42px; height: 42px; border-radius: 11px; }
    .art3d__core b { font-size: .58rem; }
    .art3d--hero ~ .term { bottom: -44%; }
    .scene3d:has(.art3d--hero) { margin-bottom: 170px; }
}

/* ==========================================================================
   v3.6 look: logo-aligned palette (navy, azure blue, teal, sky, amber),
   contact top bar, panel hero, 3D page heroes, 3D "why" cards, new footer
   ========================================================================== */
:root { --amber: #f5a524; --grad: linear-gradient(110deg, #0b5cff 0%, #0ea5e9 50%, #14c8b4 100%); --grad-2: linear-gradient(110deg, #0ea5e9 0%, #14c8b4 50%, #f5a524 100%); }
html[data-theme="light"] { --ink: #0a1433; }
.grad { background-image: linear-gradient(100deg, #0b5cff 0%, #0ea5e9 55%, #14c8b4 100%); }

/* top bar */
.topbar { font: 500 .74rem var(--mono); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--header-bg) 70%, transparent); overflow: hidden; max-height: 40px; transition: max-height .35s var(--ease), opacity .3s; }
.topbar__in { display: flex; justify-content: space-between; align-items: center; height: 36px; gap: 20px; }
.topbar a, .topbar span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none; }
.topbar a:hover { color: var(--ink); }
.topbar__contact, .topbar__links { display: flex; gap: 22px; align-items: center; }
.topbar__dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); animation: tbpulse 2s ease-in-out infinite; }
.topbar__portal { color: #0b5cff !important; font-weight: 600; }
html[data-theme="dark"] .topbar__portal { color: #8fbaff !important; }
@keyframes tbpulse { 50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } }
.site-header.is-scrolled .topbar { max-height: 0; opacity: 0; border-color: transparent; }
.mobile-menu__extra { display: flex; gap: 16px; flex-wrap: wrap; padding: 6px 0 10px; font: 500 .82rem var(--mono); }
.mobile-menu__extra a { font-size: .85rem !important; padding: 0 !important; border: 0 !important; color: var(--ink-2); }
@media (max-width: 980px) { .topbar__contact span { display: none; } }
@media (max-width: 760px) { .topbar { display: none; } }

/* panel hero */
.hero--v36 { padding: 150px 0 60px; }
.hero--v36 .hero__grid { position: relative; padding: clamp(28px, 4vw, 56px); border-radius: 36px; border: 1px solid var(--line); background:
    radial-gradient(120% 90% at 100% 0%, rgba(14,165,233,.14), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(20,200,180,.12), transparent 55%),
    color-mix(in srgb, var(--card) 70%, transparent);
    box-shadow: 0 40px 90px -50px rgba(11,40,120,.45); backdrop-filter: blur(6px); }
.hero--v36 .hero__grid::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
    background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%); }
.hero--v36 .hero__title { font-size: clamp(2.4rem, 5vw, 4.2rem); }
html[data-theme="dark"] .hero--v36 .hero__grid { background:
    radial-gradient(120% 90% at 100% 0%, rgba(14,165,233,.18), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(20,200,180,.14), transparent 55%), rgba(10,21,50,.55); box-shadow: 0 40px 90px -40px rgba(0,0,0,.8); }
@media (max-width: 900px) { .hero--v36 { padding-top: 104px; } .hero--v36 .hero__grid { padding: 22px 18px 30px; border-radius: 26px; } }

/* page hero with 3D objects */
.page-hero__grid { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
.page-hero--art .page-hero__grid { grid-template-columns: 1.25fr .75fr; }
.ph3d { position: relative; aspect-ratio: 1.15; perspective: 900px; transform-style: preserve-3d; max-width: 380px; width: 100%; justify-self: end; }
.ph3d > * { position: absolute; }
.ph3d__floor { left: 50%; top: 72%; width: 86%; aspect-ratio: 1; translate: -50% -50%; transform: rotateX(74deg); border-radius: 50%;
    background: radial-gradient(circle, rgba(11,92,255,.12) 0 40%, rgba(20,200,180,.08) 41% 62%, transparent 63%); box-shadow: inset 0 0 0 1px rgba(14,165,233,.35); }
.ph3d__floor i { position: absolute; inset: 10%; border-radius: 50%; border: 2px dashed rgba(14,165,233,.45); animation: a3spin 24s linear infinite; }
.ph3d__floor i + i { inset: 26%; border: 1.5px solid rgba(20,200,180,.45); border-left-color: transparent; border-right-color: transparent; animation-duration: 8s; animation-direction: reverse; }
.ph3d img { max-width: none; height: auto; filter: drop-shadow(0 20px 22px rgba(10,30,90,.3)); }
.ph3d__main { left: 50%; top: 44%; width: 52%; translate: -50% -50% 40px; animation: a3float 5s ease-in-out infinite; }
.ph3d__side { width: 26%; translate: -50% -50% 80px; animation: a3bob 6s ease-in-out infinite; }
.ph3d__side--l { left: 14%; top: 30%; animation-delay: -2s; }
.ph3d__side--r { left: 86%; top: 62%; animation-delay: -4s; }
html[data-theme="dark"] .ph3d img { filter: drop-shadow(0 20px 22px rgba(0,0,0,.6)); }
@media (max-width: 900px) { .page-hero--art .page-hero__grid { grid-template-columns: 1fr; } .ph3d { max-width: 240px; justify-self: center; margin-top: -10px; } }
.static-shot .ph3d * { animation-play-state: paused !important; }

/* why cards with 3D objects */
.why7__img { width: 64px; height: 64px; display: block; margin-bottom: 14px; filter: drop-shadow(0 10px 12px rgba(10,30,90,.22)); transition: transform .5s var(--ease); }
.why7__item:hover .why7__img { transform: translateY(-6px) rotate(-6deg) scale(1.06); }
.why7__item--quote { background: linear-gradient(140deg, #0b5cff, #0ea5e9 60%, #14c8b4); }

/* CTA: amber accent + 3D rocket */
.cta { background: linear-gradient(120deg, #071a4a, #0b3fb3 55%, #0a8f8a) !important; }
.cta__orb { background: url('../img/3d/rocket.webp') center / contain no-repeat !important; width: 210px !important; height: 210px !important; right: 4% !important; top: auto !important; bottom: -26px !important; opacity: .95 !important; filter: drop-shadow(0 24px 30px rgba(0,0,0,.45)) !important; animation: a3float 5s ease-in-out infinite !important; border-radius: 0 !important; }
.cta .cta__actions { position: relative; z-index: 1; }
@media (max-width: 900px) { .cta__orb { width: 120px !important; height: 120px !important; right: -10px !important; bottom: -20px !important; opacity: .5 !important; } }
.plan__flag { background: var(--amber) !important; color: #2a1800 !important; }

/* footer */
.site-footer { padding-top: 56px; }
.footer-contact { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 52px; }
.fc-card { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); text-decoration: none; color: #eef4ff; transition: transform .3s var(--ease), border-color .3s; }
a.fc-card:hover { transform: translateY(-4px); border-color: rgba(20,200,180,.55); }
.fc-card img { width: 48px; height: 48px; flex: 0 0 48px; filter: drop-shadow(0 8px 10px rgba(0,0,0,.4)); }
.fc-card small { display: block; font: 500 .7rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #8ea0c4; }
.fc-card b { display: block; font-size: .9rem; font-weight: 600; word-break: break-word; }
.footer-grid { grid-template-columns: 1.5fr repeat(5, 1fr); }
@media (max-width: 1100px) { .footer-contact { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: repeat(3, 1fr); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 600px) { .footer-contact { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } }
.cta { padding-right: clamp(36px, 18vw, 250px) !important; }
@media (max-width: 900px) { .cta { padding-right: clamp(24px, 5vw, 40px) !important; } }
.why7__img { padding: 8px; border-radius: 20px; background: radial-gradient(circle at 50% 40%, rgba(11,92,255,.14), rgba(20,200,180,.08) 60%, transparent 72%); width: 76px; height: 76px; }
.hero--v36 .hero__copy { position: relative; z-index: 3; }
.hero--v36 .hero__title { font-size: clamp(2.2rem, 4.3vw, 3.7rem); }
.hero--v36 .art3d--hero ~ .term { left: 2%; }

/* ---------- v3.8: theme-aware logo pairs ---------- */
.th-on-light { display: none !important; }
html[data-theme="light"] .th-on-light { display: block !important; }
html[data-theme="light"] .th-on-dark { display: none !important; }

/* ---------- v3.8: founder card (logos + DevOps animation) ---------- */
.founder-card--v38 { gap: 22px; padding: 46px 30px 30px; overflow: hidden; position: relative; }
.founder-card--v38::before { content: ""; position: absolute; inset: -40% -20% auto; height: 70%; background: radial-gradient(closest-side, rgba(20,200,180,.22), transparent); pointer-events: none; }
.fc-orbit { position: relative; width: 230px; height: 230px; display: grid; place-items: center; }
.fc-orbit__ring { position: absolute; inset: 8px; border-radius: 50%; border: 1px dashed rgba(14,165,233,.45); animation: fc-spin 30s linear infinite; }
.fc-orbit__ring::after { content: ""; position: absolute; inset: 26px; border-radius: 50%; border: 1px solid rgba(20,200,180,.25); }
.fc-orbit__dot { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px; padding: 7px; border-radius: 12px; background: #fff; box-shadow: 0 10px 20px -8px rgba(6,13,36,.5); transform: rotate(var(--a)) translateX(107px) rotate(calc(-1 * var(--a))); animation: fc-orbit 30s linear infinite; }
@keyframes fc-spin { to { transform: rotate(360deg); } }
@keyframes fc-orbit { from { transform: rotate(var(--a)) translateX(107px) rotate(calc(-1 * var(--a))); } to { transform: rotate(calc(var(--a) + 360deg)) translateX(107px) rotate(calc(-1 * var(--a) - 360deg)); } }
.founder-card--v38 .founder-card__avatar { position: relative; z-index: 1; transform: none; }
.founder-card--v38 .founder-card__avatar::after { content: ""; position: absolute; inset: -8px; border-radius: 46px; border: 2px solid rgba(20,200,180,.55); animation: fc-pulse 2.6s ease-out infinite; }
@keyframes fc-pulse { 0% { opacity: .9; transform: scale(.94); } 100% { opacity: 0; transform: scale(1.18); } }
.fc-brands { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.fc-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px 12px 16px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--line-2); text-decoration: none; transition: transform .25s, border-color .25s, box-shadow .25s; }
.fc-brand:hover { transform: translateY(-3px); border-color: rgba(20,200,180,.6); box-shadow: 0 16px 30px -18px rgba(11,92,255,.7); }
.fc-brand small { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.fc-brand img { width: auto; max-width: 100%; height: 36px; object-fit: contain; }
html[data-theme="light"] .fc-brand { background: #fff; }
.fc-devops { width: 100%; display: grid; gap: 12px; text-align: left; }
.fc-pipe { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; margin: 0; padding: 0; }
.fc-pipe__line { position: absolute; left: 10%; right: 10%; top: 17px; height: 3px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.fc-pipe__line i { position: absolute; inset: 0 auto 0 0; width: 30%; border-radius: 3px; background: linear-gradient(90deg, transparent, #14c8b4, #0b5cff); animation: fc-beam 3.5s linear infinite; }
@keyframes fc-beam { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.fc-pipe li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fc-pipe li span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--bg-2, #0d1a3a); border: 1px solid var(--line-2); color: var(--muted); animation: fc-node 3.5s linear infinite; animation-delay: calc(var(--i) * .7s); }
html[data-theme="light"] .fc-pipe li span { background: #fff; }
.fc-pipe li b { font-size: .72rem; font-weight: 600; color: var(--muted); }
@keyframes fc-node { 0%, 100% { color: var(--muted); border-color: var(--line-2); box-shadow: none; } 8%, 22% { color: #fff; background: linear-gradient(135deg, #0b5cff, #14c8b4); border-color: transparent; box-shadow: 0 8px 20px -6px rgba(20,200,180,.8); } 30% { color: #14c8b4; } }
.fc-term { border-radius: 14px; overflow: hidden; background: #060d24; border: 1px solid rgba(255,255,255,.08); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .74rem; box-shadow: 0 20px 40px -24px rgba(6,13,36,.9); }
.fc-term__bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: rgba(255,255,255,.05); color: #7f8db0; }
.fc-term__bar i { width: 9px; height: 9px; border-radius: 50%; background: #f5a524; } .fc-term__bar i:first-child { background: #e5484d; } .fc-term__bar i:nth-child(3) { background: #14c8b4; }
.fc-term__bar span { margin-left: 8px; font-size: .7rem; }
.fc-term__body { padding: 10px 14px 12px; }
.fc-term__body p { margin: 0; padding: 2px 0; color: #cfd8ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; animation: fc-type 8s steps(1) infinite; animation-delay: calc(var(--l) * 1.2s); }
.fc-term__body em { color: #14c8b4; font-style: normal; margin-right: 6px; }
.fc-term__body b { color: #14c8b4; font-weight: 600; margin-left: 6px; }
@keyframes fc-type { 0% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } }
.static-shot .fc-term__body p { animation: none; opacity: 1; }
.static-shot .fc-pipe li:nth-child(4) span { color: #fff; background: linear-gradient(135deg, #0b5cff, #14c8b4); border-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .fc-orbit__ring, .fc-orbit__dot, .fc-pipe__line i, .fc-pipe li span, .founder-card--v38 .founder-card__avatar::after { animation: none; }
  .fc-term__body p { animation: none; opacity: 1; }
}
@media (max-width: 560px) {
  .fc-orbit { width: 200px; height: 200px; }
  .fc-orbit__dot { transform: rotate(var(--a)) translateX(92px) rotate(calc(-1 * var(--a))); animation: none; }
  .fc-brands { grid-template-columns: 1fr; }
  .fc-term { font-size: .68rem; }
  .founder-card--v38 .founder-card__avatar { width: 108px; height: 108px; font-size: 2.4rem; border-radius: 32px; }
  .fc-term__body p { white-space: normal; }
}

/* ---------- v3.8: original Next4Chat logo + brand teal ---------- */
.n4c-brandline { margin: 4px 0 10px; line-height: 0; }
.n4c-logo { width: auto; height: 64px; max-width: 100%; }
.n4c-logo--lg { height: 88px; animation: bob 6s ease-in-out infinite; filter: drop-shadow(0 18px 30px rgba(15,118,110,.35)); }
.n4c-logo--sm { height: 46px; margin-top: 8px; }
.duo__head .n4c-brandline { margin: 0; width: 100%; }
.footer-product__logo { flex: none; line-height: 0; }
.footer-product__logo img { width: auto; height: 34px; background: none; padding: 0; border-radius: 0; }
.footer-product { background: rgba(45,212,191,.07); border-color: rgba(45,212,191,.22); }
.footer-product a { color: #2dd4bf; }
.btn--green { background: linear-gradient(110deg, #0f766e, #14b8a6); box-shadow: 0 10px 30px -10px rgba(20,184,166,.7); }
.btn--green:hover { box-shadow: 0 16px 40px -10px rgba(20,184,166,.85); }
.n4c-tag { color: #2dd4bf; }
html[data-theme="light"] :is(.section, .is-light) .n4c-tag { color: #0f766e; }
.n4c-band::before { background: radial-gradient(circle, rgba(45,212,191,.16), transparent 60%); }
html[data-theme="light"] .n4c-band { background: linear-gradient(160deg, #e8f7f5, #f4f6f8 55%, #eaf1ff); }
.duo__card--n4c { background: linear-gradient(160deg, rgba(45,212,191,.13), var(--card) 60%); }
@media (max-width: 640px) { .n4c-logo--lg { height: 64px; } .n4c-logo { height: 52px; } .footer-product { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .n4c-logo--lg { animation: none; } }
.duo__head img.n4c-logo { background: none; padding: 0; border-radius: 0; box-shadow: none; width: auto; height: 46px; }

/* ---------- v3.8: Next4Chat API integration ---------- */
.badge--api { background: rgba(14,165,233,.12); color: #38bdf8; border: 1px solid rgba(14,165,233,.3); margin-left: 6px; }
html[data-theme="light"] .badge--api { color: #0369a1; }
.badge--live { background: rgba(45,212,191,.12); color: #2dd4bf; border-color: rgba(45,212,191,.32); }
html[data-theme="light"] .badge--live { color: #0f766e; }
.n4c-api { position: relative; overflow: hidden; }
.n4c-api::before { content: ""; position: absolute; inset: 10% auto auto -10%; width: 50%; height: 80%; background: radial-gradient(circle, rgba(45,212,191,.12), transparent 60%); pointer-events: none; }
.api-list { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 14px; }
.api-list li { display: flex; gap: 14px; align-items: flex-start; color: var(--muted); }
.api-list li span { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #0f766e, #0b5cff); box-shadow: 0 10px 24px -10px rgba(15,118,110,.8); }
.api-list b { display: block; color: var(--ink); margin-bottom: 2px; }
.api-flow { position: relative; display: grid; grid-template-columns: 1fr; justify-items: center; gap: 0; padding: 30px 24px 26px; border-radius: 28px; background: linear-gradient(160deg, rgba(45,212,191,.1), rgba(11,92,255,.08)); border: 1px solid var(--line-2); }
.api-flow__node { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 22px; min-width: 220px; border-radius: 20px; background: var(--card); border: 1px solid var(--line-2); box-shadow: 0 20px 40px -26px rgba(6,13,36,.8); text-align: center; }
.api-flow__node img { width: 64px; height: 64px; object-fit: contain; animation: bob 5s ease-in-out infinite; }
.api-flow__node b { font-family: var(--display); }
.api-flow__node small { color: var(--muted); font-size: .8rem; }
.api-flow__node--hub { padding: 18px 26px; border-color: rgba(45,212,191,.5); box-shadow: 0 0 0 6px rgba(45,212,191,.08), 0 24px 50px -24px rgba(15,118,110,.9); }
.api-flow__node--hub img { width: auto; height: 46px; animation: none; }
.api-flow__chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px; border-radius: 999px; font: 600 .75rem/1 "JetBrains Mono", ui-monospace, monospace; color: #fff; background: linear-gradient(110deg, #0f766e, #14b8a6); }
.api-flow__wire { position: relative; width: 3px; height: 44px; background: var(--line-2); border-radius: 3px; overflow: hidden; }
.api-flow__wire i { position: absolute; left: -2px; width: 7px; height: 7px; border-radius: 50%; background: #2dd4bf; box-shadow: 0 0 10px #2dd4bf; animation: api-drop 1.8s linear infinite; }
.api-flow__wire i:nth-child(2) { animation-delay: .6s; } .api-flow__wire i:nth-child(3) { animation-delay: 1.2s; }
.api-flow__wire--b i { background: #38bdf8; box-shadow: 0 0 10px #38bdf8; }
@keyframes api-drop { from { top: -8px; } to { top: 100%; } }
.api-flow__bubbles { position: absolute; right: -10px; top: 50%; display: grid; gap: 8px; transform: translateY(-50%); }
.api-flow__bubbles span { padding: 8px 12px; border-radius: 14px 14px 4px 14px; font-size: .78rem; font-weight: 600; color: #fff; background: linear-gradient(110deg, #0f766e, #14b8a6); box-shadow: 0 12px 24px -12px rgba(15,118,110,.9); animation: api-pop 6s ease-in-out infinite; }
.api-flow__bubbles span:nth-child(2) { animation-delay: 2s; margin-right: 18px; } .api-flow__bubbles span:nth-child(3) { animation-delay: 4s; }
@keyframes api-pop { 0%, 100% { transform: translateX(0); opacity: .85; } 15% { transform: translateX(-8px); opacity: 1; } }
@media (max-width: 1100px) { .api-flow__bubbles { display: none; } }
@media (prefers-reduced-motion: reduce) { .api-flow__wire i, .api-flow__bubbles span, .api-flow__node img { animation: none; } }
.api-flow { grid-template-columns: auto 1fr; align-items: center; gap: 22px; justify-items: stretch; }
.api-flow__col { display: flex; flex-direction: column; align-items: center; }
.api-flow__bubbles { position: static; transform: none; justify-items: start; }
.api-flow__bubbles span:nth-child(2) { margin-right: 0; margin-left: 18px; }
.api-flow__bubbles span { border-radius: 14px 14px 14px 4px; }
@media (max-width: 1100px) { .api-flow { grid-template-columns: 1fr; } .api-flow__bubbles { display: grid; justify-items: center; } .api-flow__bubbles span:nth-child(2) { margin-left: 0; } }

/* ---------- v3.11: Expertise page ---------- */
.xp-intro { display: grid; gap: 26px; justify-items: center; text-align: center; max-width: 980px; }
.xp-intro__badge { display: inline-flex; align-items: center; gap: 14px; padding: 10px 20px 10px 10px; border-radius: 999px; background: var(--surface, rgba(255,255,255,.04)); border: 1px solid var(--line-2); text-align: left; }
.xp-intro__badge .founder-card__avatar { width: 52px; height: 52px; font-size: 1.1rem; border-radius: 50%; transform: none; }
.xp-intro__badge b { display: block; font-family: var(--display); }
.xp-intro__badge small { color: var(--muted); }
.xp-quote { margin: 0; font-family: var(--display); font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.5; font-weight: 500; position: relative; padding: 0 20px; }
.xp-quote::before { content: "“"; position: absolute; left: -18px; top: -30px; font-size: 5rem; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .8; }
.xp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%; margin-top: 10px; }
.xp-stats div { padding: 20px 14px; border-radius: 18px; border: 1px solid var(--line-2); background: linear-gradient(160deg, rgba(11,92,255,.1), rgba(20,200,180,.06)); }
.xp-stats b { display: block; font-family: var(--display); font-size: 2.4rem; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xp-stats span { color: var(--muted); font-size: .86rem; }
.xp-chips { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.xp-chips li { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 10px; border-radius: 12px; background: var(--surface, rgba(255,255,255,.05)); border: 1px solid var(--line-2); font-weight: 600; font-size: .92rem; transition: transform .25s, border-color .25s, box-shadow .25s; }
.xp-chips li:hover { transform: translateY(-3px); border-color: rgba(20,200,180,.6); box-shadow: 0 14px 28px -18px rgba(11,92,255,.8); }
.xp-chips img { width: 22px; height: 22px; padding: 3px; border-radius: 7px; background: #fff; object-fit: contain; }
.xp-chips__ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: #fff; background: linear-gradient(135deg, #0b5cff, #14c8b4); }
.xp-chips--big { justify-content: center; gap: 14px; }
.xp-chips--big li { padding: 13px 20px 13px 13px; font-size: 1rem; border-radius: 16px; }
.xp-chips--big img { width: 32px; height: 32px; padding: 5px; border-radius: 10px; }
.xp-chips--big .xp-chips__ic { width: 32px; height: 32px; border-radius: 10px; }
.xp-chips li.reveal { transition-delay: var(--d, 0ms); }
/* pipeline */
.xp-pipe { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 10px 0 56px; }
.xp-pipe__rail { position: absolute; left: 8%; right: 8%; top: 38px; height: 4px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.xp-pipe__rail i { position: absolute; inset: 0 auto 0 0; width: 22%; border-radius: 4px; background: linear-gradient(90deg, transparent, #14c8b4, #0b5cff, transparent); animation: xp-rail 4.2s linear infinite; }
@keyframes xp-rail { from { transform: translateX(-100%); } to { transform: translateX(480%); } }
.xp-pipe__step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.xp-pipe__node { position: relative; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 24px; background: var(--card, #0d1a3a); border: 1px solid var(--line-2); box-shadow: 0 0 0 8px var(--bg); color: var(--ink); animation: xp-node 4.2s ease-in-out infinite; animation-delay: calc(var(--i) * .7s); }
.xp-pipe__node img { width: 36px; height: 36px; padding: 5px; border-radius: 10px; background: #fff; }
.xp-pipe__node em { position: absolute; right: -6px; top: -6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: #14c8b4; transform: scale(0); animation: xp-tick 4.2s ease-in-out infinite; animation-delay: calc(var(--i) * .7s); }
.xp-pipe__step b { font-family: var(--display); margin-top: 6px; }
.xp-pipe__step small { color: var(--muted); font-size: .78rem; }
@keyframes xp-node { 0%, 100% { border-color: var(--line-2); box-shadow: 0 0 0 8px var(--bg); } 10%, 22% { border-color: #14c8b4; box-shadow: 0 0 0 8px var(--bg), 0 0 0 11px rgba(20,200,180,.35), 0 18px 40px -12px rgba(11,92,255,.8); } }
@keyframes xp-tick { 0%, 8% { transform: scale(0); } 14%, 80% { transform: scale(1); } 100% { transform: scale(0); } }
.xp-auto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.xp-auto__card { position: relative; overflow: hidden; padding: 28px 26px; border-radius: 22px; background: var(--card); border: 1px solid var(--line-2); }
.xp-auto__card img { width: 72px; height: 72px; margin-bottom: 12px; filter: drop-shadow(0 14px 18px rgba(6,13,36,.35)); animation: bob 6s ease-in-out infinite; }
.xp-auto__card:nth-child(2n) img { animation-delay: -2s; } .xp-auto__card:nth-child(3n) img { animation-delay: -4s; }
.xp-auto__card h3 { font-size: 1.15rem; } .xp-auto__card p { color: var(--muted); margin: 0; font-size: .95rem; }
/* platforms */
.xp-split { align-items: start; }
.xp-platforms__intro { color: var(--muted); margin-top: 0; }
.xp-platforms { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.xp-platform { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line-2); font-weight: 600; transition: transform .25s, border-color .25s; }
.xp-platform:hover { transform: translateY(-3px); border-color: rgba(11,92,255,.6); }
.xp-platform span { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #0b5cff, #0ea5e9); }
/* migration */
.xp-migrate { display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: center; gap: 0; padding: 30px 20px; border-radius: 26px; border: 1px solid var(--line-2); background: linear-gradient(160deg, rgba(11,92,255,.1), rgba(20,200,180,.08)); }
.xp-migrate__box { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 10px; border-radius: 20px; background: var(--card); border: 1px solid var(--line-2); text-align: center; }
.xp-migrate__box img { width: 70px; height: 70px; animation: bob 5s ease-in-out infinite; }
.xp-migrate__box b { font-family: var(--display); font-size: .95rem; } .xp-migrate__box small { color: var(--muted); font-size: .75rem; }
.xp-migrate__logos { display: flex; gap: 6px; margin-top: 4px; } .xp-migrate__logos img { width: 26px; height: 26px; padding: 3px; border-radius: 7px; background: #fff; animation: none; }
.xp-migrate__lane { position: relative; height: 120px; margin: 0 -2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 10px, transparent 10px 18px) center / 100% 2px no-repeat; }
.xp-migrate__pkt { position: absolute; top: 50%; left: 0; padding: 4px 9px; border-radius: 8px; font: 600 .7rem/1 "JetBrains Mono", ui-monospace, monospace; color: #fff; background: linear-gradient(110deg, #0b5cff, #14c8b4); transform: translate(-10%, -50%); opacity: 0; animation: xp-move 4.8s linear infinite; animation-delay: calc(var(--k) * 1.2s); }
@keyframes xp-move { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { left: 78%; opacity: 0; } }
.static-shot .xp-migrate__pkt { animation: none; opacity: 1; left: calc(var(--k) * 22%); top: calc(25% + var(--k) * 16%); }
.xp-ticks { grid-template-columns: 1fr; }
/* infra */
.xp-infra { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.xp-infra__item { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 12px; border-radius: 18px; background: var(--card); border: 1px solid var(--line-2); text-align: center; font-weight: 600; font-size: .92rem; transition: transform .25s, box-shadow .25s; }
.xp-infra__item:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -22px rgba(11,92,255,.8); }
.xp-infra__item span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #0f766e, #0b5cff); }
.xp-sign { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 40px; }
.xp-sign img { height: 40px; width: auto; }
@media (max-width: 1000px) { .xp-auto { grid-template-columns: 1fr 1fr; } .xp-infra { grid-template-columns: repeat(3, 1fr); } .xp-pipe { grid-template-columns: repeat(3, 1fr); row-gap: 30px; } .xp-pipe__rail { display: none; } .xp-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .xp-auto, .xp-platforms { grid-template-columns: 1fr; } .xp-infra { grid-template-columns: 1fr 1fr; } .xp-pipe { grid-template-columns: 1fr 1fr; } .xp-migrate { grid-template-columns: 1fr; gap: 10px; } .xp-migrate__lane { height: 70px; } }
@media (prefers-reduced-motion: reduce) { .xp-pipe__rail i, .xp-pipe__node, .xp-pipe__node em, .xp-migrate__pkt, .xp-auto__card img, .xp-migrate__box img { animation: none; } .xp-pipe__node em { transform: scale(1); } .xp-migrate__pkt { opacity: 1; } }

/* ---------- v3.11 new look: home pillars, tool marquee, rotator, motion polish ---------- */
.hero-rotator { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: -6px 0 22px; font-family: var(--display); font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 600; color: var(--muted); }
.hero-rotator__words { position: relative; display: inline-grid; height: 1.5em; overflow: hidden; }
.hero-rotator__words b { grid-area: 1 / 1; color: var(--ink); background: linear-gradient(100deg, #0b5cff, #14c8b4); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; transform: translateY(100%); animation: rot-word 15s infinite; }
.hero-rotator__words b:nth-child(2) { animation-delay: 2.5s; } .hero-rotator__words b:nth-child(3) { animation-delay: 5s; }
.hero-rotator__words b:nth-child(4) { animation-delay: 7.5s; } .hero-rotator__words b:nth-child(5) { animation-delay: 10s; } .hero-rotator__words b:nth-child(6) { animation-delay: 12.5s; }
@keyframes rot-word { 0% { opacity: 0; transform: translateY(100%); } 3%, 14% { opacity: 1; transform: none; } 17%, 100% { opacity: 0; transform: translateY(-100%); } }
.static-shot .hero-rotator__words b { animation: none; } .static-shot .hero-rotator__words b:nth-child(2) { opacity: 1; transform: none; }

.pillars { overflow: hidden; }
.pillars__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pillar { position: relative; display: flex; flex-direction: column; padding: 30px 24px 24px; border-radius: 24px; background: var(--card); border: 1px solid var(--line-2); color: inherit; text-decoration: none; overflow: hidden; isolation: isolate; transition: transform .35s var(--ease, ease), box-shadow .35s; }
.pillar::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--ang, 0deg), transparent 0 60%, #14c8b4, #0b5cff, transparent 90%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s; animation: pillar-spin 4s linear infinite; z-index: -1; }
.pillar:hover::before { opacity: 1; }
.pillar:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(11,92,255,.85); }
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes pillar-spin { to { --ang: 360deg; } }
.pillar__glow { position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(20,200,180,.25), transparent); z-index: -1; transition: transform .5s; }
.pillar:hover .pillar__glow { transform: scale(1.5); }
.pillar img { width: 84px; height: 84px; margin-bottom: 16px; filter: drop-shadow(0 16px 20px rgba(6,13,36,.35)); animation: bob 6s ease-in-out infinite; }
.pillar:nth-child(2) img { animation-delay: -1.5s; } .pillar:nth-child(3) img { animation-delay: -3s; } .pillar:nth-child(4) img { animation-delay: -4.5s; }
.pillar__num { position: absolute; right: 22px; top: 20px; font: 700 .8rem/1 "JetBrains Mono", monospace; color: var(--muted); letter-spacing: .1em; }
.pillar h3 { font-size: 1.35rem; margin-bottom: 8px; }
.pillar p { color: var(--muted); font-size: .94rem; margin: 0 0 18px; flex: 1; }
.pillar__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; color: #0ea5e9; }
.pillar:hover .pillar__more svg { transform: translateX(4px); } .pillar__more svg { transition: transform .25s; }

.tools-marquee { margin-top: 56px; display: grid; gap: 14px; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.tools-marquee__row { overflow: hidden; }
.tools-marquee__track { display: flex; gap: 14px; width: max-content; animation: tm-scroll 48s linear infinite; }
.tools-marquee__row--rev .tools-marquee__track { animation-direction: reverse; animation-duration: 54s; }
.tools-marquee:hover .tools-marquee__track { animation-play-state: paused; }
.tools-marquee__item { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--line-2); font-weight: 600; white-space: nowrap; }
.tools-marquee__item img { width: 30px; height: 30px; padding: 4px; border-radius: 9px; background: #fff; }
@keyframes tm-scroll { to { transform: translateX(calc(-50% - 7px)); } }

/* motion polish across the site */
.section-head h2 { position: relative; }
.section-head h2::after { content: ""; display: block; width: 64px; height: 4px; margin: 18px auto 0; border-radius: 4px; background: linear-gradient(90deg, #0b5cff, #14c8b4); transform-origin: left; animation: head-line 3s ease-in-out infinite; }
@keyframes head-line { 0%, 100% { transform: scaleX(.4); } 50% { transform: scaleX(1); } }
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); animation: btn-shine 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes btn-shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.static-shot .btn--primary::after, .static-shot .tools-marquee__track { animation: none; }

@media (max-width: 1100px) { .pillars__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pillars__grid { grid-template-columns: 1fr; } .hero-rotator { margin-top: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-rotator__words b { animation: none; } .hero-rotator__words b:first-child { opacity: 1; transform: none; } .pillar img, .pillar::before, .tools-marquee__track, .section-head h2::after, .btn--primary::after { animation: none; } }
.art3d__tag img { background: #fff; padding: 3px; }
.art3d__core img { background: #fff; padding: 10px; }
.cloud-badges img { background: #fff; padding: 2px; border-radius: 6px; }