/* ==========================================================================
   WebProSolutions — Premium agency website (multi-page)
   Structure: tokens → base → components → layout sections → pages → 3D → responsive
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --navy-950: #050816;
  --navy-900: #070b1a;
  --navy-800: #0e1631;
  --navy-700: #18223f;
  --ink: #0b1230;
  --body: #4a5472;
  --muted: #6b7591;
  --line: #e4e8f2;
  --line-soft: #eef1f7;
  --surface: #ffffff;
  --surface-alt: #f6f8fc;
  --blue: #0049b7;
  --blue-600: #003a92;
  --blue-400: #00ddff;
  --violet: #f75990;
  --on-dark: #e8ecf8;
  --on-dark-muted: #a3acc7;
  --success: #12805c;
  --danger: #c62f43;

  --grad: linear-gradient(135deg, #0049b7 0%, #ff1d58 55%, #f75990 100%);
  --font-head: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(11, 18, 48, .06), 0 2px 8px rgba(11, 18, 48, .04);
  --shadow: 0 14px 34px -14px rgba(11, 18, 48, .22), 0 4px 10px -4px rgba(11, 18, 48, .06);
  --shadow-lg: 0 40px 80px -24px rgba(5, 8, 22, .55);
  --nav-h: 76px;      /* floating menu area */
  --topbar-h: 36px;   /* contact / social strip above it */
  --header-h: calc(var(--nav-h) + var(--topbar-h));
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--body); background: var(--surface); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.no-scroll { overflow: hidden; }
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--blue); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.15; margin: 0 0 .6em; letter-spacing: -.02em; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid #ff1d58; outline-offset: 3px; border-radius: 6px; }

.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-sm { width: 18px; height: 18px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 200; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(72px, 9vw, 120px) 0; }
.section.alt, .services, .portfolio, .testimonials, .industries-sec { background: var(--surface-alt); }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 18px; }
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--grad); }
.eyebrow-light { color: var(--blue-400); }
.grad-text { background: linear-gradient(100deg, #00ddff 0%, #f75990 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.section-head p { font-size: 1.075rem; }
.section-head-left { margin-left: 0; text-align: left; }
.center-link { text-align: center; margin: 48px 0 0; }

.tag-placeholder, .sample-badge { display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .02em; text-transform: none; padding: 3px 9px; border-radius: 999px; background: #fff4d6; color: #7a5300; border: 1px dashed #e0b84a; vertical-align: middle; }
.notice { padding: 14px 18px; border-radius: 12px; background: #fff4d6; color: #6b4900; border: 1px dashed #e0b84a; font-size: .92rem; }

/* ---------- Buttons & links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border-radius: 12px; font-weight: 600; font-size: .95rem; line-height: 1.2; border: 1px solid transparent; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s, color .25s, border-color .25s; white-space: nowrap; }
.btn .icon { transition: transform .25s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn-sm { padding: 10px 16px; font-size: .88rem; border-radius: 10px; }
.btn-lg { padding: 16px 28px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 8px 24px -8px rgba(0, 73, 183, .7), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-primary:hover { background: var(--blue-600); transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(0, 73, 183, .8); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--navy-700); transform: translateY(-2px); }
.btn-ghost-light { color: #fff; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.04); backdrop-filter: blur(6px); }
.btn-ghost-light:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.1); transform: translateY(-2px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row-center { justify-content: center; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-weight: 600; font-size: .92rem; }
.link-arrow .icon { transition: transform .25s var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }
.check-list li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.check-list .icon { color: var(--blue); margin-top: 3px; }
.check-lg li { font-size: 1.05rem; color: var(--ink); margin-bottom: 14px; }

/* ---------- Header / Nav ---------- */
/* Floating pill: the header itself is transparent; .nav-wrap is the capsule.
   The glass effect sits on ::before so backdrop-filter doesn't become the containing block for the fixed mobile menu. */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); pointer-events: none; transition: height .35s var(--ease); }
.site-header.is-scrolled { --topbar-h: 0px; --header-h: var(--nav-h); } /* the top strip slides away once scrolled */
.nav-wrap { position: relative; isolation: isolate; margin-top: 14px; height: calc(var(--nav-h) - 14px); width: calc(100% - 32px); max-width: 1192px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 8px 0 20px; border-radius: 999px; pointer-events: auto; transition: max-width .45s var(--ease), box-shadow .3s; }
.nav-wrap::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(12, 18, 42, .62); border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: saturate(170%) blur(18px); -webkit-backdrop-filter: saturate(170%) blur(18px); transition: background-color .3s; }
.site-header.is-scrolled .nav-wrap { max-width: 1100px; box-shadow: 0 18px 40px -18px rgba(5, 8, 22, .7); }
.site-header.is-scrolled .nav-wrap::before { background: rgba(9, 14, 34, .9); }
.logo { flex-shrink: 0; display: inline-flex; align-items: center; gap: 14px; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; }
.logo-mark { flex-shrink: 0; }
.logo-mark svg { width: 56px; height: 56px; overflow: visible; }
/* Code mark (logo_mark()): brackets slide in, slash drops, then the cursor blinks and the tile gently breathes */
.cm-tile { transform-box: fill-box; transform-origin: center; animation: cm-breathe 3s ease-in-out 1s infinite; }
.cm-l { animation: cm-l .6s cubic-bezier(.2, .9, .3, 1.2) both; }
.cm-r { animation: cm-r .6s cubic-bezier(.2, .9, .3, 1.2) both; }
.cm-s { animation: cm-drop .5s cubic-bezier(.2, .9, .3, 1.3) .35s both; }
.cm-cur { animation: cm-blink 1s steps(1) .9s infinite; }
@keyframes cm-l { from { transform: translateX(-24px); opacity: 0; } }
@keyframes cm-r { from { transform: translateX(24px); opacity: 0; } }
@keyframes cm-drop { from { transform: translateY(-30px); opacity: 0; } }
@keyframes cm-blink { 50% { opacity: 0; } }
@keyframes cm-breathe { 50% { transform: scale(1.04); } }
.logo-text { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.logo-slogan { margin-top: 4px; font: 600 .7rem/1 var(--font-body); letter-spacing: .03em; color: var(--navy-800); }
.site-footer .logo-slogan { color: var(--on-dark-muted); }   /* navy would vanish on the dark footer */
.primary-nav { display: flex; align-items: center; }
.nav-list { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.nav-link { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; white-space: nowrap; border-radius: 999px; color: var(--on-dark-muted); font-weight: 500; font-size: .94rem; transition: color .2s, background .25s, box-shadow .25s; }
.nav-link:hover, .mega-toggle[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.08); }
.nav-link[aria-current="page"], .mega-toggle[data-current] { color: #fff; background: var(--grad); box-shadow: 0 6px 18px -6px rgba(255, 29, 88, .8); }
.chev { transition: transform .25s var(--ease); }
.mega-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-cta { border-radius: 999px; padding: 11px 20px; }
.nav-cta-mobile { display: none; }

/* Services mega menu: service groups laid out in two columns */
.mega { position: absolute; left: 0; right: 0; top: calc(100% + 12px); opacity: 0; visibility: hidden; transform: translateY(-8px) perspective(1200px) rotateX(-6deg); transform-origin: top center; transition: opacity .25s var(--ease), transform .3s var(--ease), visibility .25s; }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge across the gap */
.mega.is-open { opacity: 1; visibility: visible; transform: none; }
.mega-inner { padding: 14px; background: #fff; border-radius: 28px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.mega-cols { columns: 2; column-gap: 20px; }   /* columns balance the groups: 3 services on each side */
.mega-col { display: flex; flex-direction: column; gap: 2px; break-inside: avoid; margin-bottom: 10px; }
.mega-col-head { display: block; margin: 0 4px 6px; padding: 8px 6px 10px; border-bottom: 1px solid var(--line); color: var(--blue); transition: color .2s; }
.mega-col-head:hover { color: #ff1d58; }
.mega-col-title { font-family: var(--font-head); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mega-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 14px; color: var(--ink); transition: background-color .2s; }
.mega-item:hover, .mega-item:focus-visible { background: var(--surface-alt); }
.mega-item strong { display: block; font-size: .9rem; font-weight: 600; line-height: 1.3; }
.mega-item small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.4; margin-top: 2px; }
.mega-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #eef3ff; color: var(--blue); flex-shrink: 0; transition: background-color .2s, color .2s, transform .3s var(--ease); }
.mega-icon .icon { width: 19px; height: 19px; }
.mega-item:hover .mega-icon { background: var(--grad); color: #fff; transform: rotate(-6deg) scale(1.06); }
.mega-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 12px 12px 12px 18px; border-radius: 18px; background: linear-gradient(150deg, #eef3ff, #ffeef3); font-size: .9rem; }
.mega-foot p { margin: 0; color: var(--body); }
.mega-foot .btn { border-radius: 999px; }

.hamburger { display: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); position: relative; }
.hamburger span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: #fff; transition: transform .3s var(--ease), opacity .2s; }
.hamburger span:nth-child(1) { top: 15px; } .hamburger span:nth-child(2) { top: 21px; } .hamburger span:nth-child(3) { top: 27px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Dark hero backgrounds ---------- */
.hero, .page-hero, .not-found { position: relative; overflow: hidden; background: var(--navy-900); color: var(--on-dark-muted); }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.glow { position: absolute; border-radius: 50%; filter: blur(80px); animation: drift 18s ease-in-out infinite alternate; }
.g1 { width: 620px; height: 620px; right: -120px; top: -160px; background: rgba(0, 73, 183, .35); }
.g2 { width: 520px; height: 520px; left: -200px; bottom: -260px; background: rgba(247, 89, 144, .25); animation-delay: -6s; }
@keyframes drift { to { transform: translate(-60px, 40px) scale(1.1); } }
.grid-lines { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 30%, transparent 75%); }

/* Home hero */
.hero { padding: calc(var(--header-h) + clamp(40px, 6vw, 80px)) 0 clamp(56px, 7vw, 96px); }
.hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; font-size: .82rem; font-weight: 500; color: var(--on-dark); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); margin-bottom: 26px; }
.pill-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff685; box-shadow: 0 0 0 4px rgba(255, 246, 133, .18); }
.hero .hero-title { font-family: var(--font-head); color: #fff; font-size: clamp(1.8rem, 1rem + 2.6vw, 3rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; margin-bottom: 24px; }
.lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--on-dark-muted); max-width: 560px; margin-bottom: 36px; }
.trust-line { margin: 34px 0 0; font-size: .88rem; font-weight: 500; letter-spacing: .02em; }
.trust-line span { color: #fff685; margin: 0 8px; }
.hero-art { margin-right: -40px; }

/* Inner page hero */
.page-hero { padding: calc(var(--header-h) + clamp(36px, 5vw, 64px)) 0 clamp(48px, 6vw, 80px); }
.page-hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.page-hero-copy { max-width: 860px; }
.page-hero .breadcrumb ol { justify-content: center; }
.page-hero h1 { color: #fff; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.7rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.06; margin-left: auto; margin-right: auto; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: .85rem; margin-bottom: 22px; }
.breadcrumb li { display: flex; align-items: center; gap: 8px; color: var(--on-dark); }
.breadcrumb li + li::before { content: "/"; color: #4f5a80; }
.breadcrumb a { color: var(--on-dark-muted); }
.breadcrumb a:hover { color: #fff; }

/* ---------- Trust strip ---------- */
.trust { padding: 56px 0 24px; border-bottom: 1px solid var(--line-soft); }
.trust-label { text-align: center; font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: 22px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.logo-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-bottom: 44px; }
.client-logos { padding: 0 0 clamp(56px, 7vw, 88px); }   /* home: client logo strip under the portfolio */
.client-logos .logo-strip { margin-bottom: 0; }
.logo-slot { height: 56px; display: grid; place-items: center; border: 1px dashed #cfd6e6; border-radius: 12px; color: #9aa3bb; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
/* Home strengths: statement with a highlighter sweep on the left, four 3D cards on the right. Cards rise in one by one
   (--n staggers them) once .strengths is revealed, tilt toward the pointer, grow a spinning gradient border on hover,
   and each icon has its own loop: twinkling sparkles, a swaying phone, a filling speed ring, support ripples. */
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --fill { syntax: '<percentage>'; inherits: false; initial-value: 78%; }
.strengths { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding: 36px 0 28px; }
.strength-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--blue); font: 600 .74rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.pulse-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #ff1d58; }
.pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #ff1d58; animation: dot-ping 1.8s ease-out infinite; }
@keyframes dot-ping { to { transform: scale(3.2); opacity: 0; } }
.strength-statement { font-family: var(--font-head); font-size: clamp(1.3rem, 1rem + 1vw, 1.85rem); font-weight: 700; color: var(--ink); line-height: 1.35; letter-spacing: -.01em; margin: 0; }
.strength-statement .hl { background: linear-gradient(90deg, rgba(0, 221, 255, .32), rgba(247, 89, 144, .32)) no-repeat 0 88% / 100% 38%; border-radius: 4px; transition: background-size 1.1s var(--ease) .35s; }
.js .strengths:not(.is-visible) .hl { background-size: 0% 38%; }

.strength-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; perspective: 1000px; }
.strength-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 26px; border: 1.5px solid transparent; border-radius: 20px; font-size: .9rem; color: var(--muted); overflow: hidden;
  background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--spin), var(--line) 0 100%) border-box; box-shadow: var(--shadow-sm); }
.strength-card:hover { --ty: -8px; box-shadow: var(--shadow);
  background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--spin), #00ddff, #0049b7, #ff1d58, #f75990, #00ddff) border-box; animation: border-spin 3s linear infinite; }
@keyframes border-spin { to { --spin: 360deg; } }
.js .strengths .strength-card { opacity: 0; }
.js .strengths.is-visible .strength-card { animation: card-rise .8s var(--ease) calc(.25s + var(--n) * .12s) both; }
.js .strengths.is-visible .strength-card:hover { animation: card-rise .8s var(--ease) both, border-spin 3s linear infinite; }
@keyframes card-rise { from { opacity: 0; translate: 0 40px; scale: .9; } to { opacity: 1; translate: 0 0; scale: 1; } }
.strength-num { position: absolute; top: 16px; right: 18px; font: 600 .72rem/1 var(--font-mono); letter-spacing: .1em; color: #b7c0d6; }
.strength-card strong { display: block; margin-top: 12px; color: var(--ink); font: 700 1.02rem/1.3 var(--font-head); }
.strength-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #00ddff, #0049b7, #ff1d58); transform: scaleX(.18); transform-origin: left; transition: transform .6s var(--ease); }
.strength-card:hover .strength-bar { transform: scaleX(1); }

/* Icon tile: a glossy gradient chip per card, floating gently */
.strength-icon { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: #fff; background: var(--chip); box-shadow: 0 12px 22px -10px var(--chip-glow), inset 0 1px 0 rgba(255, 255, 255, .45); animation: chip-float 4s ease-in-out calc(var(--n) * -1s) infinite; }
.strength-icon .icon { position: relative; width: 26px; height: 26px; }
.strength-icon .fx { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
@keyframes chip-float { 50% { transform: translateY(-5px) rotate(-3deg); } }
.fx-design  { --chip: linear-gradient(135deg, #f75990, #ff1d58); --chip-glow: rgba(255, 29, 88, .7); }
.fx-mobile  { --chip: linear-gradient(135deg, #00ddff, #0091d9); --chip-glow: rgba(0, 170, 230, .7); }
.fx-speed   { --chip: linear-gradient(135deg, #3d7bff, #0049b7); --chip-glow: rgba(0, 73, 183, .7); }
.fx-support { --chip: linear-gradient(135deg, #a77bff, #6a3df0); --chip-glow: rgba(106, 61, 240, .7); }

/* Custom design: two little stars twinkle around the chip */
.fx-design .fx::before, .fx-design .fx::after { content: ""; position: absolute; width: 12px; height: 12px; background: #ff1d58; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 2.4s ease-in-out infinite; }
.fx-design .fx::before { top: -8px; right: -8px; }
.fx-design .fx::after { bottom: -6px; left: -9px; width: 9px; height: 9px; background: #00ddff; animation-delay: 1.2s; }
@keyframes twinkle { 0%, 100% { transform: scale(.3) rotate(0deg); opacity: 0; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } }
/* Mobile-first: the phone sways like it is being turned in the hand */
.fx-mobile .icon { animation: phone-sway 3s ease-in-out infinite; }
@keyframes phone-sway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 60% { transform: rotate(10deg); } }
/* Performance: a ring around the chip fills up like a speed meter */
.fx-speed .fx { inset: -6px; border-radius: 20px; padding: 3px; background: conic-gradient(#00ddff var(--fill), transparent 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: speed-fill 2.6s var(--ease) infinite; }
@keyframes speed-fill { 0% { --fill: 0%; opacity: 1; } 70% { --fill: 100%; opacity: 1; } 100% { --fill: 100%; opacity: 0; } }
/* Support: ripples go out from the chip, like an incoming call */
.fx-support .fx::before, .fx-support .fx::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid #a77bff; animation: ripple 2.4s ease-out infinite; }
.fx-support .fx::after { animation-delay: 1.2s; }
@keyframes ripple { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }

/* ---------- Split layout ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.split-top { align-items: start; }
.split-art { border-radius: 32px; background: linear-gradient(150deg, #eef3ff, #ffeef3); }

/* ---------- Service cards ---------- */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); overflow: hidden; transition: box-shadow .35s var(--ease), border-color .35s; }
.service-card:hover { box-shadow: var(--shadow); border-color: #d3dcf3; }
.service-card.is-hidden, .project.is-hidden { display: none; }
.card-media { display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.service-card:hover .card-media img, .group-tile:hover img { transform: translateY(-6px) scale(1.05); }
.media-domains-hosting { background: radial-gradient(circle at 70% 10%, #ffffff, transparent 55%), linear-gradient(150deg, #e7f0ff, #dde7ff); }
.media-design { background: radial-gradient(circle at 70% 10%, #ffffff, transparent 55%), linear-gradient(150deg, #f2ecff, #e6ddff); }
.media-development { background: radial-gradient(circle at 70% 10%, #ffffff, transparent 55%), linear-gradient(150deg, #e6f5ff, #d7ecff); }
.media-software { background: radial-gradient(circle at 70% 10%, #ffffff, transparent 55%), linear-gradient(150deg, #e7f8f1, #d8f0e6); }
.card-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; border-top: 1px solid var(--line-soft); }
.card-kicker { display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.card-body h3 a { color: var(--ink); }
.card-body h3 a:hover { color: var(--blue); }
.card-body p { font-size: .95rem; flex: 1; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters-center { justify-content: center; margin-bottom: 40px; }
.filter { padding: 9px 16px; border-radius: 999px; font-size: .86rem; font-weight: 600; color: var(--body); background: #fff; border: 1px solid var(--line); transition: all .2s; }
.filter:hover { border-color: #c4cfec; color: var(--ink); }
.filter.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.is-entering { animation: popIn .5s var(--ease); }
@keyframes popIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

/* Service category groups */
.group-head { display: flex; gap: 28px; align-items: flex-start; margin-bottom: 44px; max-width: 780px; }
.group-head h2 { margin-bottom: 8px; }
.group-head p:last-child { font-size: 1.06rem; margin: 0; }
.group-head .eyebrow { margin-bottom: 8px; }
.group-num { font-family: var(--font-head); font-size: clamp(3rem, 2rem + 4vw, 5rem); font-weight: 800; line-height: .9; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .9; }
.group-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.group-tiles-5 { grid-template-columns: repeat(5, 1fr); }
.group-tile { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); text-align: left; background: radial-gradient(circle at 70% 10%, #fff, transparent 55%), var(--tint, #eef3ff); }
.group-tile img { transition: transform .6s var(--ease); }
.group-tile > span { display: block; padding: 18px 20px 22px; background: #fff; flex: 1; }
.group-tile strong { display: block; color: var(--ink); font-family: var(--font-head); font-size: 1.05rem; margin-bottom: 4px; }
.group-tile small { color: var(--muted); font-size: .86rem; line-height: 1.5; display: block; }

/* Feature grid (service pages) */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature, .value-card { padding: 30px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); transition: box-shadow .35s var(--ease), border-color .35s; }
.feature:hover, .value-card:hover { box-shadow: var(--shadow); border-color: #d3dcf3; }
.feature p, .value-card p { font-size: .95rem; margin: 0; }
.feature-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; margin-bottom: 20px; background: var(--grad); color: #fff; box-shadow: 0 12px 24px -10px rgba(0, 73, 183, .6), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .4s var(--ease); }
.feature:hover .feature-icon, .industry:hover .feature-icon { transform: translateY(-3px) rotate(-6deg); }
.value-cards { display: grid; gap: 18px; }
.value-card .icon { width: 30px; height: 30px; color: var(--blue); margin-bottom: 14px; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; font-family: var(--font-head); font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { transition: transform .3s var(--ease); color: var(--blue); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq details p { padding-bottom: 20px; margin: 0; }
.ideal h2, .faq h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }

/* ---------- Why choose us (see why_us()) ---------- */
.why { position: relative; overflow: hidden; isolation: isolate; background: var(--navy-900); color: var(--on-dark-muted); }
.why h2 { color: #fff; }
.why-grad { background: linear-gradient(100deg, #00ddff 0%, #f75990 40%, #fff685 60%, #00ddff 90%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: grad-shimmer 5s ease-in-out infinite alternate; }
.why-grid { position: relative; display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.why-intro { position: sticky; top: calc(var(--header-h) + 40px); }
.why-intro p { font-size: 1.06rem; margin-bottom: 8px; }

/* Background: three blurred aurora blobs drifting, plus a faint twinkling star field */
.why-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.why-aurora { position: absolute; width: 46vw; max-width: 640px; aspect-ratio: 1; border-radius: 50%; filter: blur(90px); opacity: .32; animation: why-drift 18s ease-in-out infinite alternate; }
.why-aurora.a1 { left: -12%; top: -18%; background: #0049b7; }
.why-aurora.a2 { right: -10%; top: 30%; background: #ff1d58; opacity: .2; animation-duration: 22s; animation-direction: alternate-reverse; }
.why-aurora.a3 { left: 30%; bottom: -30%; background: #00ddff; opacity: .16; animation-duration: 26s; }
@keyframes why-drift { to { transform: translate(8vw, 6vw) scale(1.15); } }
.why-stars { position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,.6), transparent), radial-gradient(1.5px 1.5px at 85% 70%, rgba(0,221,255,.8), transparent), radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 55% 50%, rgba(247,89,144,.8), transparent); background-size: 420px 420px; animation: why-twinkle 4s ease-in-out infinite alternate; }
@keyframes why-twinkle { from { opacity: .35; } to { opacity: 1; } }

/* 3D gyroscope: rings spin on different axes around a pulsing core; satellites orbit and stay upright */
.why-orb { position: relative; width: 260px; height: 260px; margin: 18px 0 30px; perspective: 900px; }
.orb-gyro { position: absolute; inset: 30px; transform-style: preserve-3d; }
.orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(0, 221, 255, .55); box-shadow: 0 0 18px rgba(0, 221, 255, .25), inset 0 0 18px rgba(0, 221, 255, .15); }
.orb-ring::before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 3px currentColor; color: #00ddff; }
.orb-ring.r1 { animation: orb-r1 7s linear infinite; }
.orb-ring.r2 { inset: 14px; border-color: rgba(247, 89, 144, .6); box-shadow: 0 0 18px rgba(247, 89, 144, .25); animation: orb-r2 9s linear infinite; }
.orb-ring.r2::before { color: #f75990; }
.orb-ring.r3 { inset: 28px; border-color: rgba(167, 123, 255, .6); box-shadow: 0 0 18px rgba(167, 123, 255, .25); animation: orb-r3 11s linear infinite; }
.orb-ring.r3::before { color: #a77bff; }
@keyframes orb-r1 { from { transform: rotateX(70deg) rotateZ(0); } to { transform: rotateX(70deg) rotateZ(360deg); } }
@keyframes orb-r2 { from { transform: rotateY(65deg) rotateZ(0); } to { transform: rotateY(65deg) rotateZ(-360deg); } }
@keyframes orb-r3 { from { transform: rotateX(-50deg) rotateY(40deg) rotateZ(0); } to { transform: rotateX(-50deg) rotateY(40deg) rotateZ(360deg); } }
.orb-core { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%; background: var(--grad); color: #fff; box-shadow: 0 0 0 8px rgba(255, 255, 255, .05), 0 0 40px rgba(255, 29, 88, .55), 0 0 80px rgba(0, 73, 183, .5); animation: orb-pulse 3s ease-in-out infinite; }
.orb-core .icon { width: 34px; height: 34px; animation: orb-rocket 3s ease-in-out infinite; }
@keyframes orb-pulse { 50% { box-shadow: 0 0 0 16px rgba(255, 255, 255, .03), 0 0 60px rgba(255, 29, 88, .7), 0 0 110px rgba(0, 73, 183, .6); } }
@keyframes orb-rocket { 50% { transform: translate(2px, -3px); } }
.orb-sats { position: absolute; inset: 0; animation: orb-spin 24s linear infinite; }
.orb-sat { position: absolute; display: grid; place-items: center; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(6px); animation: orb-spin 24s linear infinite reverse; }
.orb-sat .icon { width: 19px; height: 19px; }
.orb-sat.o1 { left: 50%; top: 0; color: #00ddff; } .orb-sat.o2 { left: 100%; top: 50%; color: #f75990; }
.orb-sat.o3 { left: 50%; top: 100%; color: #a77bff; } .orb-sat.o4 { left: 0; top: 50%; color: #fff685; }
@keyframes orb-spin { to { transform: rotate(360deg); } }

/* Reason cards */
.why-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.why-card { position: relative; overflow: hidden; padding: 26px 24px 24px; border-radius: 22px; background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .09); backdrop-filter: blur(8px); }
.why-card:hover { --ty: -6px; border-color: rgba(0, 221, 255, .4); box-shadow: 0 24px 50px -24px rgba(0, 221, 255, .45); }
.why-card[data-tilt-card]::after { background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .14), transparent 50%); }
.why-beam { position: absolute; top: 0; left: 0; width: 45%; height: 2px; background: linear-gradient(90deg, transparent, #00ddff, #f75990, transparent); animation: why-beam 5s linear calc(var(--n) * .8s) infinite; }
@keyframes why-beam { from { transform: translateX(-100%); } to { transform: translateX(330%); } }
.why-num { position: absolute; top: 14px; right: 18px; font: 800 2.6rem/1 var(--font-head); color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .16); transition: -webkit-text-stroke-color .3s; }
.why-card:hover .why-num { -webkit-text-stroke-color: rgba(0, 221, 255, .6); }
.why-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 16px; color: #fff; background: var(--why-chip, linear-gradient(135deg, #3d7bff, #0049b7)); box-shadow: 0 12px 24px -10px var(--why-glow, rgba(0, 73, 183, .9)), inset 0 1px 0 rgba(255, 255, 255, .35); animation: chip-float 4s ease-in-out calc(var(--n) * -.7s) infinite; transition: transform .4s var(--ease); }
.why-icon .icon { width: 24px; height: 24px; }
.why-card:hover .why-icon { animation-play-state: paused; transform: rotate(-8deg) scale(1.1); }
.why-card:nth-child(3n+2) { --why-chip: linear-gradient(135deg, #f75990, #ff1d58); --why-glow: rgba(255, 29, 88, .8); }
.why-card:nth-child(3n) { --why-chip: linear-gradient(135deg, #00ddff, #0091d9); --why-glow: rgba(0, 170, 230, .8); }
.why-card h3 { color: #fff; font-size: 1.12rem; margin-bottom: 8px; padding-right: 48px; }
.why-card p { margin: 0; font-size: .93rem; }

/* ---------- Clients & industries ---------- */
.client-wall { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.client-logo { display: grid; place-items: center; height: 128px; padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; transition: background-color .3s; }
.client-logo:hover { background: var(--surface-alt); }
.client-logo img { max-height: 48px; width: auto; filter: grayscale(1); opacity: .6; transition: filter .35s, opacity .35s; }
.client-logo:hover img { filter: none; opacity: 1; }
.client-placeholder { font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: #a6aec4; transition: color .3s; }
.client-logo:hover .client-placeholder { color: var(--blue); }
.industry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.industry { display: flex; align-items: center; gap: 16px; padding: 22px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.industry .feature-icon { width: 46px; height: 46px; margin: 0; border-radius: 12px; }

/* ---------- Portfolio ---------- */
.portfolio-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 40px; }
.portfolio-head .section-head { margin-bottom: 0; }
.project-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.project { grid-column: span 5; display: flex; flex-direction: column; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); overflow: hidden; transition: box-shadow .35s var(--ease); }
.project.p-large { grid-column: span 7; }
.project.p-half { grid-column: span 6; }
.project:hover { box-shadow: var(--shadow); }
.project-media { display: block; overflow: hidden; aspect-ratio: 16 / 10.5; background: radial-gradient(circle at 75% 10%, #fff, transparent 55%), var(--tint, #eef3ff); }
.project-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transition: transform .6s var(--ease); }
.project:hover .project-media img { transform: translateY(-6px) scale(1.05); }
.project-info { padding: 24px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.project-info p:not(.project-cat) { font-size: .95rem; flex: 1; }
.project-info h3 { font-size: 1.3rem; margin-bottom: 8px; }
.project-info h3 a { color: var(--ink); }
.project-info h3 a:hover { color: var(--blue); }
.project-cat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.project-cat .sample-badge { letter-spacing: .02em; }

/* Portfolio page cards (project_card()): five per row — website preview and project name */
.pc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.project.pc { grid-column: auto; display: flex; flex-direction: column; overflow: hidden; border: 1.5px solid transparent; border-radius: 18px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(var(--line), var(--line)) border-box; box-shadow: 0 14px 30px -24px rgba(11, 18, 48, .45); }
.js .pc-grid .pc.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease), translate .4s var(--ease), box-shadow .4s var(--ease); }
.project.pc:hover { translate: 0 -8px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--a1), var(--a2)) border-box; box-shadow: 0 28px 44px -26px var(--a1); }
.pc-media { position: relative; display: block; aspect-ratio: 4 / 3.3; overflow: hidden; background: var(--tint); }
.pc-media img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--ease); }
.pc:hover .pc-media img { scale: 1.08; }
.pc-media .sm-page { animation: none; transition: translate 1s var(--ease); }   /* starts at the top of the page … */
.pc:hover .pc-media .sm-page { translate: 0 min(0px, calc(-100% + 100cqh)); transition: translate 6s ease-in-out; }   /* … and scrolls down it on hover */
.pc-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .35) 50%, transparent 62%) 100% 0 / 300% 100% no-repeat; pointer-events: none; transition: background-position .9s var(--ease); }
.pc:hover .pc-media::after { background-position: 0 0; }   /* light sweeps across on hover */
.pc-body { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 16px 14px 18px; text-align: center; }
.pc-title { margin: 0; color: var(--ink); font: 800 1rem/1.3 var(--font-head); transition: color .3s; }
.pc:hover .pc-title { color: var(--a1); }
.pc-title::after { content: ""; display: block; width: 28px; height: 3px; margin: 10px auto 0; border-radius: 3px; background: linear-gradient(90deg, var(--a1), var(--a2)); transition: width .4s var(--ease); }
.pc:hover .pc-title::after { width: 70%; }
@media (max-width: 1200px) { .pc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .pc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pc-grid { grid-template-columns: 1fr; } }

/* Portfolio page rows: one labelled row of cards per category */
.pc-rows { display: grid; gap: 56px; }
.pc-row-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 18px; font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); }
.pc-row-title small { color: var(--muted); font-size: .8rem; font-weight: 600; }

/* ---------- Sample website mock-ups (site_mock()) ----------
   .sm-frame is a size container; everything inside is sized in em from a font-size tied to the frame width, so a
   narrow gallery panel shows a phone-width page and the project page shows a desktop page (@container sm rules).
   The page scrolls up and down inside the frame. Each theme (.sm-classic …) only sets the --s-* variables plus a
   few signature touches; the project's own colours arrive as --c1, --c2 and --bg. */
.sm-frame { position: relative; container: sm / size; }
.sm { --s-bg: #fff; --s-ink: #1b1f2e; --s-fh: var(--font-head); --s-fb: Inter, system-ui, sans-serif; --s-hw: 700; --s-r: .5em; --s-r2: .6em;
  --s-btn: var(--c1); --s-btn-ink: #fff; --s-accent: var(--c1); --s-line: rgba(0, 0, 0, .1); --s-card: #fff; --s-band: var(--c1); --s-band-ink: #fff;
  --s-foot: #111; --s-foot-ink: #fff; --s-art-bg: var(--bg);
  position: absolute; inset: 0; overflow: hidden; background: var(--s-bg); color: var(--s-ink); font-family: var(--s-fb); font-size: clamp(8px, 4.6cqw, 13px); line-height: 1.3; text-align: left; }
.case-mock .sm { font-size: clamp(8px, 1.45cqw, 16px); }
.sm-page { min-height: 100%; animation: sm-scroll 18s ease-in-out calc(var(--n, 0) * -3s) infinite alternate; }
@keyframes sm-scroll { 0%, 12% { translate: 0 0; } 88%, 100% { translate: 0 min(0px, calc(-100% + 100cqh)); } }
.sm-nav { display: flex; align-items: center; gap: .8em; padding: .9em 1.2em; }
.sm-logo { max-width: 60%; overflow: hidden; font: 700 1.05em/1.15 var(--s-fh); text-overflow: ellipsis; white-space: nowrap; }
.sm-links { display: flex; gap: .9em; margin-left: auto; font-size: .72em; opacity: .75; }
.sm-links i, .sm-btn { font-style: normal; }
.sm-btn { display: inline-block; flex: none; padding: .55em 1em; border-radius: var(--s-r); background: var(--s-btn); color: var(--s-btn-ink); font: 700 .72em/1 var(--s-fb); white-space: nowrap; }
.sm-nav .sm-btn { margin-left: auto; }
.sm-links + .sm-btn { margin-left: 0; }
.sm-hero { display: grid; gap: 1.2em; padding: 1.6em 1.2em 2em; background: var(--s-hero-bg, transparent); color: var(--s-hero-ink, inherit); }
.sm-copy small { display: block; margin-bottom: .6em; color: var(--s-accent); font-size: .66em; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.sm-copy h4 { margin: 0 0 .5em; color: inherit; font: var(--s-hw) 2.1em/1.08 var(--s-fh); letter-spacing: var(--s-hls, -.01em); text-transform: var(--s-htt, none); }
.sm-copy p { margin: 0 0 1.1em; color: inherit; font-size: .8em; line-height: 1.5; opacity: .8; }
.sm-art { position: relative; min-height: 11em; overflow: hidden; border-radius: var(--s-r2); background: var(--s-art-bg); }
.sm-shape { position: absolute; inset: 18%; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); animation: sm-float 6s ease-in-out infinite alternate; }
@keyframes sm-float { to { translate: 0 -6%; rotate: 4deg; } }
.sm-dash { position: absolute; inset: 12%; display: flex; align-items: flex-end; gap: 6%; padding: 10% 8% 8%; border-radius: .6em; background: rgba(255, 255, 255, .92); box-shadow: 0 1em 2em -1em rgba(0, 0, 0, .4); }
.sm-dash i { flex: 1; height: 40%; border-radius: .25em .25em 0 0; background: linear-gradient(var(--c2), var(--c1)); animation: sm-bar 2.6s ease-in-out infinite alternate; }
.sm-dash i:nth-child(2) { animation-delay: -.6s; }
.sm-dash i:nth-child(3) { animation-delay: -1.2s; }
.sm-dash i:nth-child(4) { animation-delay: -1.8s; }
.sm-dash i:nth-child(5) { animation-delay: -2.2s; }
@keyframes sm-bar { to { height: 95%; } }
.sm-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: .6em 1.2em; padding: .9em 1.2em; border-block: 1px solid var(--s-line); font-size: .66em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sm-strip i { display: inline-block; width: .6em; height: .6em; margin-right: .4em; border-radius: 50%; background: var(--s-accent); }
.sm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .9em; padding: 1.4em 1.2em; }
.sm-card { display: grid; align-content: start; gap: .35em; padding: .6em; border: 1px solid var(--s-line); border-radius: var(--s-r); background: var(--s-card); box-shadow: var(--s-shadow, none); }
.sm-img { aspect-ratio: 4 / 3; border-radius: var(--s-r2); background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 75%, #fff), color-mix(in srgb, var(--c2) 75%, #fff)); }
.sm-card b { font: 700 .8em/1.2 var(--s-fh); }
.sm-card em { color: var(--s-accent); font-size: .75em; font-style: normal; font-weight: 700; }
.sm-card i { height: .35em; border-radius: .2em; background: var(--s-line); }
.sm-card i.s { width: 60%; }
.sm-band { margin: .4em 1.2em 1.4em; padding: 1.4em; border-radius: var(--s-r2); background: var(--s-band); color: var(--s-band-ink); text-align: center; }
.sm-stats { display: flex; justify-content: space-around; gap: .6em; }
.sm-stats span { display: grid; gap: .2em; font-size: .7em; opacity: .9; }
.sm-stats b { font: 800 2em/1 var(--s-fh); }
.sm-quote b { display: block; height: .5em; color: var(--s-accent); font: 700 3em/1 var(--s-fh); }
.sm-quote span { display: block; margin: .4em 0; font: italic 1em/1.4 var(--s-fh); }
.sm-quote i { font-size: .7em; font-style: normal; opacity: .7; }
.sm-foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1.2em; background: var(--s-foot); color: var(--s-foot-ink); }
.sm-foot span { display: flex; gap: .5em; }
.sm-foot span i { width: 1.4em; height: 1.4em; border-radius: 50%; background: currentColor; opacity: .3; }
@container sm (max-width: 380px) { .sm-links { display: none; } }
@container sm (min-width: 520px) {
  .sm-hero { grid-template-columns: 1.15fr 1fr; align-items: center; padding: 2.4em 2em; }
  .sm-copy h4 { font-size: 2.7em; }
  .sm-cards { grid-template-columns: repeat(3, 1fr); padding: 1.6em 2em; }
  .sm-k-ecommerce .sm-cards { grid-template-columns: repeat(4, 1fr); }
  .sm-nav, .sm-foot { padding-inline: 2em; }
  .sm-band { margin-inline: 2em; }
}

/* Classic: cream paper, serif type, thin gold rules, centred masthead */
.sm-classic { --s-bg: var(--bg); --s-ink: #2a2118; --s-fh: 'Playfair Display', Georgia, serif; --s-r: 0; --s-r2: 0; --s-btn: transparent; --s-btn-ink: var(--c1); --s-accent: var(--c2); --s-line: color-mix(in srgb, var(--c2) 50%, transparent); --s-card: rgba(255, 255, 255, .5); --s-foot: var(--c1); --s-art-bg: var(--c1); }
.sm-classic .sm-btn { border: 1px solid currentColor; letter-spacing: .12em; text-transform: uppercase; }
.sm-classic .sm-nav { flex-direction: column; gap: .5em; border-bottom: 3px double var(--s-line); }
.sm-classic .sm-logo { max-width: 100%; color: var(--c1); font-size: 1.25em; letter-spacing: .04em; }
.sm-classic .sm-links { margin: 0; }
.sm-classic .sm-nav .sm-btn { display: none; }
.sm-classic .sm-copy { text-align: center; }
.sm-classic .sm-copy small::before, .sm-classic .sm-copy small::after { content: " ✦ "; }
.sm-classic .sm-copy h4 { color: var(--c1); }
.sm-classic .sm-art { border: .5em solid #fff; outline: 1px solid var(--s-line); }
.sm-classic .sm-shape { inset: 12%; border-radius: 50% 50% 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c2) 80%, #fff), var(--c2)); }
.sm-classic .sm-band { border: 1px solid var(--s-line); }

/* Luxury: near-black, gold, spaced capitals, glowing jewel */
.sm-luxury { --s-bg: #0d0b08; --s-ink: #efe4cc; --s-fh: 'Cormorant Garamond', 'Playfair Display', serif; --s-hw: 600; --s-htt: uppercase; --s-hls: .06em; --s-r: 0; --s-r2: 0; --s-btn: var(--c1); --s-btn-ink: #0d0b08; --s-line: color-mix(in srgb, var(--c1) 35%, transparent); --s-card: rgba(255, 255, 255, .03); --s-band: color-mix(in srgb, var(--c1) 12%, #0d0b08); --s-band-ink: var(--c1); --s-foot: #000; --s-foot-ink: var(--c1); --s-art-bg: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c1) 35%, transparent), transparent 62%), #15120d; }
.sm-luxury .sm-logo { color: var(--c1); letter-spacing: .22em; text-transform: uppercase; }
.sm-luxury .sm-btn { letter-spacing: .16em; text-transform: uppercase; }
.sm-luxury .sm-shape { inset: 26%; background: conic-gradient(from 30deg, var(--c1), var(--c2), color-mix(in srgb, var(--c1) 60%, #000), var(--c1)); box-shadow: 0 0 3em color-mix(in srgb, var(--c1) 55%, transparent); animation: sm-spin 14s linear infinite; }
.sm-luxury .sm-shape::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: #15120d; }
@keyframes sm-spin { to { rotate: 360deg; } }
.sm-luxury .sm-img { background: radial-gradient(circle, color-mix(in srgb, var(--c1) 60%, transparent) 0 20%, transparent 22%), #1a160f; }

/* Editorial: magazine headline, black rules, image block */
.sm-editorial { --s-bg: var(--bg); --s-ink: #111; --s-fh: 'Playfair Display', Georgia, serif; --s-hw: 800; --s-r: 0; --s-r2: 0; --s-btn: var(--c1); --s-accent: var(--c2); --s-line: #111; --s-card: transparent; --s-band: transparent; --s-band-ink: #111; --s-foot: #111; }
.sm-editorial .sm-nav { border-bottom: 2px solid #111; }
.sm-editorial .sm-copy h4 { font-size: 2.6em; line-height: .98; }
.sm-editorial .sm-card { padding: .6em 0 0; border: 0; border-top: 2px solid #111; }
.sm-editorial .sm-band { border-block: 1px solid #111; }
.sm-editorial .sm-shape { inset: 0; border-radius: 0; background: linear-gradient(180deg, var(--c1), color-mix(in srgb, var(--c1) 45%, #000)); animation: none; }
.sm-editorial .sm-shape::after { content: "§"; position: absolute; right: 8%; bottom: -6%; color: var(--c2); font: 800 8em/1 'Playfair Display', serif; opacity: .8; }

/* Corporate: solid brand header and hero, glass panel, stats band */
.sm-corporate { --s-r: .35em; --s-r2: .4em; --s-hero-bg: linear-gradient(135deg, var(--c1), color-mix(in srgb, var(--c1) 55%, #000)); --s-hero-ink: #fff; --s-accent: var(--c2); --s-btn: var(--c2); --s-foot: color-mix(in srgb, var(--c1) 65%, #000); --s-art-bg: rgba(255, 255, 255, .1); }
.sm-corporate .sm-nav { background: var(--c1); color: #fff; }
.sm-corporate .sm-shape { inset: 16%; border: 1px solid rgba(255, 255, 255, .4); border-radius: .4em; background: linear-gradient(135deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .06)); }

/* Modern: gradient hero with rounded bottom, soft shadowed cards */
.sm-modern { --s-r: 1em; --s-r2: 1.2em; --s-hero-bg: linear-gradient(135deg, var(--c1), var(--c2)); --s-hero-ink: #fff; --s-btn: #fff; --s-btn-ink: var(--c1); --s-shadow: 0 .8em 1.6em -1em rgba(17, 24, 39, .35); --s-line: transparent; --s-band: linear-gradient(135deg, var(--c1), var(--c2)); --s-foot: #0f172a; --s-art-bg: rgba(255, 255, 255, .18); }
.sm-modern .sm-nav { background: var(--c1); color: #fff; }
.sm-modern .sm-hero { border-radius: 0 0 2em 2em; }
.sm-modern .sm-copy small { color: rgba(255, 255, 255, .85); }
.sm-modern .sm-nav .sm-btn { background: rgba(255, 255, 255, .2); color: #fff; }

/* Boutique: blush tones, italic serif, arched frames */
.sm-boutique { --s-bg: var(--bg); --s-ink: #3b2a30; --s-fh: 'Playfair Display', serif; --s-r: 999px; --s-r2: 999px 999px .5em .5em; --s-card: rgba(255, 255, 255, .7); --s-line: color-mix(in srgb, var(--c1) 25%, transparent); --s-band: var(--c2); --s-band-ink: #3b2a30; --s-foot: var(--c1); }
.sm-boutique .sm-copy h4 { font-style: italic; }
.sm-boutique .sm-card { border-radius: 1.2em; }
.sm-boutique .sm-shape { inset: 20% 24%; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 38% 32%, #fff 0 7%, transparent 8%), radial-gradient(circle, var(--c2), var(--c1)); }

/* Organic: earthy, blob shapes, soft rounded cards */
.sm-organic { --s-bg: var(--bg); --s-ink: #24321f; --s-r: 1.4em; --s-r2: 1.6em; --s-card: rgba(255, 255, 255, .6); --s-line: color-mix(in srgb, var(--c1) 22%, transparent); --s-foot: color-mix(in srgb, var(--c1) 70%, #000); --s-art-bg: color-mix(in srgb, var(--c2) 35%, var(--bg)); }
.sm-organic .sm-art { border-radius: 42% 58% 55% 45% / 50% 40% 60% 50%; }
.sm-organic .sm-shape { inset: 16%; border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%; background: linear-gradient(135deg, var(--c2), var(--c1)); animation: sm-blob 8s ease-in-out infinite alternate; }
@keyframes sm-blob { to { border-radius: 40% 60% 45% 55% / 55% 45% 55% 45%; rotate: 12deg; } }
.sm-organic .sm-img { border-radius: 1.4em 1.4em 3em 1.4em; }

/* Tech: dark grid, neon accent, gradient headline */
.sm-tech { --s-bg: var(--bg); --s-ink: #e2e8f0; --s-r: .4em; --s-r2: .6em; --s-btn-ink: #0b1020; --s-card: rgba(255, 255, 255, .04); --s-line: rgba(148, 163, 184, .22); --s-band: rgba(255, 255, 255, .05); --s-band-ink: var(--c1); --s-foot: #05070f; --s-art-bg: rgba(255, 255, 255, .04); }
.sm-tech .sm-page { background: linear-gradient(rgba(148, 163, 184, .08) 1px, transparent 1px) 0 0 / 2em 2em, linear-gradient(90deg, rgba(148, 163, 184, .08) 1px, transparent 1px) 0 0 / 2em 2em; }
.sm-tech .sm-copy small { font-family: 'JetBrains Mono', monospace; }
.sm-tech .sm-copy h4 { background: linear-gradient(90deg, #fff, var(--c1), var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sm-tech .sm-btn { box-shadow: 0 0 1.2em color-mix(in srgb, var(--c1) 60%, transparent); }
.sm-tech .sm-dash { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .25); }

/* Bold: big colour block, heavy capitals, hard offset shadows */
.sm-bold { --s-bg: var(--bg); --s-ink: #111; --s-hw: 800; --s-htt: uppercase; --s-r: 0; --s-r2: 0; --s-hero-bg: var(--c1); --s-hero-ink: #111; --s-btn: var(--c2); --s-accent: var(--c2); --s-line: var(--c2); --s-shadow: .35em .35em 0 var(--c2); --s-band: var(--c2); --s-foot: var(--c2); --s-art-bg: color-mix(in srgb, var(--c1) 60%, #fff); }
.sm-bold .sm-copy h4 { font-size: 2.4em; line-height: .95; }
.sm-bold .sm-card { border-width: 2px; }
.sm-bold .sm-shape { inset: 10%; border-radius: 0; background: repeating-linear-gradient(45deg, var(--c2) 0 .6em, transparent .6em 1.2em); animation: none; }

/* Minimal: white space, monochrome, one accent dot */
.sm-minimal { --s-ink: #111; --s-fh: Inter, system-ui, sans-serif; --s-hw: 500; --s-hls: -.03em; --s-r: 0; --s-r2: 0; --s-btn: #111; --s-accent: var(--c2); --s-line: #e7e7e5; --s-band: #f5f5f4; --s-band-ink: #111; --s-foot: #fff; --s-foot-ink: #111; --s-art-bg: #f3f3f1; }
.sm-minimal .sm-img { background: #efefed; }
.sm-minimal .sm-shape { inset: 28% 32%; border-radius: 0; background: #111; box-shadow: 1.2em 1.2em 0 -0.6em var(--c2); }
.sm-minimal .sm-foot { border-top: 1px solid var(--s-line); }

/* Project page: the mock-up in a browser frame */
.case-mock { border-radius: 24px; background: #fff; box-shadow: 0 30px 60px -30px rgba(11, 18, 48, .45); }
.case-browser { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #eef2fb; }
.pc-bar-dots { display: flex; gap: 6px; }
.pc-bar-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.pc-bar-dots i:nth-child(2) { background: #febc2e; }
.pc-bar-dots i:nth-child(3) { background: #28c840; }
.case-url { flex: 1; max-width: 360px; padding: 5px 12px; border-radius: 999px; background: #fff; color: var(--muted); font-size: .8rem; }
.case-mock .sm-frame { aspect-ratio: 16 / 9; }
.empty-state { text-align: center; padding: 40px; color: var(--muted); }

/* Case study */
.case-media { border-radius: 32px; overflow: hidden; background: radial-gradient(circle at 75% 10%, #fff, transparent 55%), var(--tint); margin-bottom: 24px; }
.case-media img { width: 100%; max-height: 620px; object-fit: contain; }
.case-grid { display: grid; grid-template-columns: 1fr 1fr 340px; gap: 40px; margin: 48px 0; }
.case-grid h2 { font-size: 1.5rem; }
.case-aside { padding: 28px; border-radius: var(--radius-lg); background: var(--surface-alt); border: 1px solid var(--line); }
.case-aside h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.case-aside h3 + ul { margin-bottom: 22px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list a { display: inline-block; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .85rem; font-weight: 600; }
.tag-list a:hover { border-color: var(--blue); }
.case-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 28px; border-top: 1px solid var(--line); font-weight: 600; }
.case-nav a { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Process (see process_section()) ----------
   The track runs from the first icon's centre to the last (columns are equal, so a centre sits at
   (100% - 3 gaps) / 8 from each edge). Its fill draws on reveal; the dot crosses it in the first 75% of an 8s
   loop, reaching step n at n × 25% — the same moment that step's step-live animation (delay n × 2s) fires. */
.process { position: relative; overflow: hidden; isolation: isolate; }
.process::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 10% 20%, rgba(0, 221, 255, .1), transparent 35%), radial-gradient(circle at 90% 80%, rgba(247, 89, 144, .1), transparent 35%), radial-gradient(rgba(0, 73, 183, .07) 1px, transparent 1.5px) 0 0 / 26px 26px; }
.process-flow { --gap: 28px; --steps: 4; position: relative; }
.timeline { position: relative; display: grid; grid-template-columns: repeat(var(--steps), 1fr); gap: var(--gap); }
.pr-track { position: absolute; top: 42px; left: calc((100% - (var(--steps) - 1) * var(--gap)) / (2 * var(--steps))); right: calc((100% - (var(--steps) - 1) * var(--gap)) / (2 * var(--steps))); height: 4px; border-radius: 99px; background: var(--line); }
.js .pr-track.reveal { transform: none; }   /* reveal only fades it; the fill below does the drawing */
.pr-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #0049b7, #00ddff 35%, #ff1d58 70%, #f75990); transform-origin: left; transition: transform 2.2s var(--ease) .3s; }
.js .pr-track:not(.is-visible) .pr-fill { transform: scaleX(0); }
.pr-dot { position: absolute; top: 50%; left: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; border: 4px solid #ff1d58; box-shadow: 0 0 0 6px rgba(255, 29, 88, .18), 0 0 24px rgba(255, 29, 88, .8); animation: pr-dot calc(var(--steps) * 2s) linear infinite; }
.pr-dot::after { content: ""; position: absolute; right: 100%; top: 50%; width: 60px; height: 3px; margin-top: -1.5px; border-radius: 99px; background: linear-gradient(90deg, transparent, rgba(255, 29, 88, .7)); }
@keyframes pr-dot { 0% { left: 0; opacity: 0; } 3% { opacity: 1; } 75% { left: 100%; opacity: 1; } 85%, 100% { left: 100%; opacity: 0; } }

.step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.step-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 26px; border-radius: 26px; background: #fff; color: var(--blue); border: 1px solid var(--line); box-shadow: 0 14px 30px -14px rgba(0, 73, 183, .45), inset 0 -4px 0 rgba(0, 73, 183, .06); transition: transform .4s var(--ease); animation: step-live calc(var(--steps) * 2s) calc(var(--n) * var(--steps) * 1.5s / (var(--steps) - 1)) infinite; }
.step-icon > .icon { width: 32px; height: 32px; }
.step-icon::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid #ff1d58; opacity: 0; animation: step-pulse calc(var(--steps) * 2s) calc(var(--n) * var(--steps) * 1.5s / (var(--steps) - 1)) infinite; }   /* lands as the dot (75% of the loop) reaches it */
.step-ring { position: absolute; inset: -12px; border-radius: 50%; border: 1.5px dashed rgba(0, 73, 183, .3); animation: orb-spin 16s linear infinite; }
.step-ring::before { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #00ddff; box-shadow: 0 0 10px #00ddff; }
.step:nth-child(even) .step-ring { animation-direction: reverse; }
.step-num { position: absolute; top: -10px; right: -12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; font: 800 .75rem/1 var(--font-head); letter-spacing: .02em; border: 3px solid #fff; box-shadow: var(--shadow-sm); }
.step:hover .step-icon { transform: perspective(300px) rotateX(14deg) rotateY(-14deg) translateY(-6px); }
.step-card { flex: 1; width: 100%; padding: 22px 20px 24px; border-radius: 20px; background: rgba(255, 255, 255, .85); border: 1px solid var(--line); box-shadow: var(--shadow-sm); backdrop-filter: blur(6px); transition: transform .4s var(--ease), box-shadow .4s; animation: step-card calc(var(--steps) * 2s) calc(var(--n) * var(--steps) * 1.5s / (var(--steps) - 1)) infinite; }
.step:hover .step-card { transform: translateY(-6px); box-shadow: var(--shadow); }
.step h3 { font-size: 1.2rem; margin-bottom: 8px; }
.step p { font-size: .93rem; margin: 0; }
@keyframes step-live {
  0%, 26%, 100% { background: #fff; color: var(--blue); scale: 1; }
  4%, 21% { background: linear-gradient(135deg, #0049b7, #ff1d58); color: #fff; scale: 1.1; box-shadow: 0 18px 36px -12px rgba(255, 29, 88, .6); }
}
@keyframes step-pulse { 0% { opacity: 0; transform: scale(1); } 3% { opacity: .9; transform: scale(1); } 18%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes step-card { 0%, 26%, 100% { border-color: var(--line); } 4%, 21% { border-color: rgba(255, 29, 88, .45); box-shadow: 0 20px 40px -24px rgba(255, 29, 88, .45); } }

/* ---------- Testimonials ---------- */
.slider { max-width: 860px; margin: 0 auto; text-align: center; }
.slides { display: grid; }
.slide { grid-area: 1 / 1; margin: 0; padding: clamp(32px, 5vw, 56px); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.slide.is-active { animation: popIn .45s var(--ease); }
.quote-mark { width: 40px; height: 40px; margin: 0 auto 20px; color: var(--blue); opacity: .3; }
.slide blockquote { margin: 0 0 28px; }
.slide blockquote p { font-family: var(--font-head); font-size: clamp(1.15rem, 1rem + .8vw, 1.55rem); font-weight: 600; color: var(--ink); line-height: 1.45; margin: 0; }
.slide figcaption { display: inline-flex; align-items: center; gap: 14px; text-align: left; }
.slide figcaption strong { display: block; color: var(--ink); }
.slide figcaption small { color: var(--muted); }
.avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 700; font-size: .9rem; }
.slider-controls { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 28px; }
.slider-btn { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--ink); transition: all .2s; }
.slider-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.dots { display: flex; gap: 8px; }
.dots button { width: 10px; height: 10px; border-radius: 999px; background: #cdd4e4; transition: width .3s var(--ease), background .3s; }
.dots button[aria-current="true"] { width: 28px; background: var(--blue); }

/* ---------- CTA ---------- */
.cta-band { padding: clamp(72px, 9vw, 120px) 0 0; }
.cta-card { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: clamp(56px, 8vw, 96px) clamp(24px, 6vw, 80px); border-radius: 32px; background: var(--navy-900); color: var(--on-dark-muted); }
.cta-glow { position: absolute; z-index: -1; left: 50%; top: 0; width: 80%; height: 120%; transform: translate(-50%, -40%); border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 73, 183, .55), rgba(247, 89, 144, .25) 45%, transparent 70%); filter: blur(30px); }
.cta-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; border: 1px solid rgba(255,255,255,.08); }
.cta-orbs span { position: absolute; z-index: -1; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, #00ddff 30%, #4b39c9 75%); box-shadow: 0 20px 40px -10px rgba(0, 73, 183, .6); animation: orb 9s ease-in-out infinite; }
.cta-orbs span:nth-child(1) { width: 70px; height: 70px; left: 7%; top: 18%; }
.cta-orbs span:nth-child(2) { width: 38px; height: 38px; right: 10%; top: 22%; animation-delay: -3s; background: radial-gradient(circle at 30% 30%, #fff, #b9a2ff 30%, #6d3fd6 75%); }
.cta-orbs span:nth-child(3) { width: 24px; height: 24px; right: 22%; bottom: 14%; animation-delay: -6s; background: radial-gradient(circle at 30% 30%, #fff, #7ee0c3 30%, #12805c 75%); }
@keyframes orb { 50% { transform: translateY(-16px); } }
.cta-card h2 { color: #fff; max-width: 760px; margin-left: auto; margin-right: auto; }
.cta-card p { font-size: 1.1rem; max-width: 560px; margin: 0 auto 36px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.contact-info h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.contact-info > p { font-size: 1.06rem; margin-bottom: 32px; }
.contact-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; }
.contact-list li { display: flex; gap: 16px; align-items: center; }
.contact-list small { display: block; font-size: .8rem; color: var(--muted); }
.contact-list a, .contact-list li > span > span { color: var(--ink); font-weight: 600; word-break: break-word; }
.contact-list a:hover { color: var(--blue); }
.ci-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #eef3ff; color: var(--blue); flex-shrink: 0; }
.social { display: flex; gap: 10px; margin-bottom: 28px; }
.social:empty { display: none; }
.social-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); color: var(--ink); transition: all .2s; }
.social-dark .social-icon { border-color: rgba(255,255,255,.12); color: var(--on-dark); }
.next-steps { padding: 26px; border-radius: var(--radius-lg); background: var(--surface-alt); border: 1px solid var(--line); }
.next-steps h3 { font-size: 1rem; }
.next-steps li { display: flex; gap: 12px; align-items: center; margin-top: 12px; color: var(--ink); }
.next-steps li span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: #fff; font-size: .8rem; font-weight: 700; flex-shrink: 0; }

.form-card { padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.field label span[aria-hidden] { color: var(--danger); }
.optional { color: var(--muted); font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; padding: 13px 15px; border-radius: 12px; border: 1px solid #d6dcea; background: #fbfcfe; color: var(--ink); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.field textarea { resize: vertical; min-height: 130px; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7591' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.field input::placeholder, .field textarea::placeholder { color: #9aa3bb; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(0, 73, 183, .15); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.error { margin: 6px 0 0; font-size: .82rem; color: var(--danger); }
.error:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Phone with +91 prefix */
.phone-group { display: flex; align-items: stretch; border: 1px solid #d6dcea; border-radius: 12px; background: #fbfcfe; transition: border-color .2s, box-shadow .2s; }
.phone-group:focus-within { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(0, 73, 183, .15); }
.field.has-error .phone-group { border-color: var(--danger); }
.phone-code { display: flex; align-items: center; padding: 0 12px 0 15px; color: var(--ink); font-weight: 600; border-right: 1px solid #d6dcea; white-space: nowrap; }
.field .phone-group input { border: 0; background: transparent; border-radius: 0 12px 12px 0; min-width: 0; }
.field .phone-group input:focus { box-shadow: none; background: transparent; }

/* Captcha */
.captcha { padding: 16px; border: 1px dashed #c9d2e6; border-radius: 14px; background: #f6f8fd; }
.captcha-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.captcha-head label { display: flex; align-items: center; gap: 6px; margin: 0; }
.captcha-refresh { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #d6dcea; border-radius: 999px; background: #fff; color: var(--blue); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.captcha-refresh:hover { border-color: var(--blue); }
.captcha-refresh:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.captcha-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.captcha-q { padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid #d6dcea; color: var(--ink); white-space: nowrap; }
.captcha-q strong { font-size: 1.05rem; letter-spacing: .04em; }
.captcha-note { margin: 8px 0 0; font-size: .8rem; color: var(--muted); }
@media (max-width: 480px) { .captcha-row { grid-template-columns: 1fr; } }
.btn .spinner { display: none; }
.btn.is-loading { pointer-events: none; opacity: .85; }
.btn.is-loading .spinner { display: block; animation: pulseSend 1s ease-in-out infinite; }
@keyframes pulseSend { 0%, 100% { opacity: .4; transform: translateX(0); } 50% { opacity: 1; transform: translateX(4px); } }
.form-status { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; border-radius: 12px; font-size: .92rem; }
.form-status.is-success { background: #e8f7f0; color: #0b5c41; border: 1px solid #bfe8d6; }
.form-status.is-error { background: #fdecee; color: #8f1e2e; border: 1px solid #f5c4cb; }
.form-status a { color: inherit; font-weight: 600; text-decoration: underline; }

/* ---------- Legal / sitemap / 404 ---------- */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.35rem; margin-top: 2em; }
.prose ul { list-style: disc; padding-left: 1.3em; margin-bottom: 1em; }
.prose li { margin-bottom: .4em; }
.sitemap-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 36px; }
.sitemap-list h2 { font-size: 1.05rem; }
.sitemap-list li { margin-bottom: 10px; }
.not-found { min-height: 100vh; display: grid; align-items: center; padding: calc(var(--header-h) + 40px) 0 60px; }
.nf-inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.not-found .code { font-family: var(--font-head); font-weight: 800; font-size: clamp(6rem, 4rem + 8vw, 10rem); line-height: 1; letter-spacing: -.05em; margin: 0 0 8px; background: linear-gradient(100deg, #00ddff, #f75990); -webkit-background-clip: text; background-clip: text; color: transparent; }
.not-found h1 { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); }
.not-found p { max-width: 460px; margin-bottom: 32px; }

/* ---------- Footer ---------- */
.site-footer { margin-top: clamp(72px, 9vw, 120px); background: var(--navy-950); color: var(--on-dark-muted); padding: 80px 0 32px; font-size: .94rem; }
.page-contact .site-footer, .page-other .site-footer { margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.1fr 1.2fr; gap: 40px; padding-bottom: 56px; }
.footer-brand p { margin: 20px 0 24px; max-width: 340px; }
.site-footer h2 { color: #fff; font-size: .95rem; margin-bottom: 18px; letter-spacing: 0; }
.site-footer nav li { margin-bottom: 11px; }
.site-footer nav a { color: var(--on-dark-muted); transition: color .2s; }
.site-footer nav a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.08); font-size: .86rem; }
.footer-bottom p { margin: 0; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-bottom a { color: var(--on-dark-muted); }
.footer-bottom a:hover { color: #fff; }

/* Round scroll-progress indicator: main.js sets --p (0–100); the wedge is a conic gradient, number on top */
.back-to-top { --p: 0; position: fixed; right: 20px; bottom: 20px; z-index: 90; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: conic-gradient(#0049b7 0%, #ff1d58 calc(var(--p) * 1%), #dfe4ee 0); color: var(--ink); border: 3px solid #fff; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
.back-to-top > * { grid-area: 1 / 1; transition: opacity .2s, transform .25s var(--ease); }
.btt-pct { padding: 2px 4px; border-radius: 6px; background: rgba(255,255,255,.82); font: 700 .8rem/1 var(--font-head); letter-spacing: -.01em; }
.back-to-top .icon { width: 22px; height: 22px; padding: 6px; box-sizing: content-box; border-radius: 50%; background: #fff; color: var(--blue); opacity: 0; transform: translateY(6px); }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover .btt-pct, .back-to-top:focus-visible .btt-pct { opacity: 0; transform: translateY(-6px); }
.back-to-top:hover .icon, .back-to-top:focus-visible .icon { opacity: 1; transform: none; }

/* ==========================================================================
   3D interactions (driven by js/main.js; static without JS or with reduced motion)
   ========================================================================== */
.tilt-scene { perspective: 1400px; }
.tilt-scene img { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform .5s var(--ease); will-change: transform; filter: drop-shadow(0 30px 40px rgba(5, 8, 22, .18)); }
.hero .tilt-scene img, .not-found .tilt-scene img { filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .45)); }
[data-tilt-card] { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); transition: transform .45s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
[data-tilt-card]:hover { --ty: -6px; }
[data-tilt-card]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.55), transparent 45%); }
[data-tilt-card]:hover::after { opacity: 1; }
.feature, .value-card, .industry, .group-tile, .project { position: relative; }

/* Scroll reveal */
.js .reveal { opacity: 0; transform: translateY(28px) perspective(800px) rotateX(6deg); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal.is-visible[data-tilt-card] { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); transition: transform .45s var(--ease), box-shadow .35s var(--ease), border-color .35s, opacity .8s var(--ease); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .nav-link { padding: 8px 11px; }
  .strengths { grid-template-columns: 1fr; gap: 32px; }
  .strength-list { grid-template-columns: repeat(4, 1fr); }
  .group-tiles-5 { grid-template-columns: repeat(3, 1fr); }
  .case-grid { grid-template-columns: 1fr 1fr; }
  .case-aside { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  .strength-list { grid-template-columns: 1fr 1fr; }
  :root { --nav-h: 68px; }
  .hamburger { display: block; }
  .nav-cta { display: none; }
  .nav-wrap { margin-top: 10px; height: calc(var(--nav-h) - 10px); width: calc(100% - 24px); padding: 0 6px 0 18px; }
  .site-header.is-scrolled .nav-wrap { max-width: 1192px; }
  .primary-nav { position: fixed; top: calc(var(--header-h) + 8px); left: 12px; right: 12px; z-index: 99; max-height: calc(100vh - var(--header-h) - 20px); max-height: calc(100dvh - var(--header-h) - 20px); flex-direction: column; align-items: stretch; gap: 20px; padding: 12px 20px 24px; border-radius: 28px; background: var(--navy-900); border: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow-lg); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-12px) scale(.98); transform-origin: top center; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
  .primary-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: 0; background: none; border: 0; border-radius: 0; }
  .nav-list > li { border-bottom: 1px solid rgba(255,255,255,.07); }
  .nav-link { width: 100%; justify-content: space-between; padding: 16px 4px; font-size: 1.08rem; color: var(--on-dark); border-radius: 0; }
  .nav-link:hover, .nav-link[aria-current="page"], .mega-toggle[data-current], .mega-toggle[aria-expanded="true"] { background: none; box-shadow: none; color: #fff; }
  .nav-link[aria-current="page"], .mega-toggle[data-current] { color: var(--blue-400); }
  .nav-cta-mobile { display: inline-flex; border-radius: 999px; }
  .mega { position: static; opacity: 1; visibility: visible; transform: none; display: none; padding-bottom: 12px; }
  .mega::before { display: none; }
  .mega.is-open { display: block; }
  .mega-inner { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
  .mega-cols { columns: 1; }
  .mega-col { margin-bottom: 14px; }
  .mega-col-head { margin: 0; padding: 4px 6px; border: 0; color: var(--on-dark-muted); }
  .mega-col-title { font-size: .72rem; }
  .mega-item { padding: 10px 6px; color: var(--on-dark); }
  .mega-item:hover, .mega-item:focus-visible { background: rgba(255,255,255,.05); }
  .mega-item small { color: var(--on-dark-muted); }
  .mega-icon { background: rgba(0, 73, 183, .15); color: var(--blue-400); }
  .mega-foot { flex-direction: column; align-items: stretch; background: rgba(255,255,255,.04); }
  .mega-foot p { color: var(--on-dark-muted); }

  .hero-inner, .nf-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-copy { text-align: center; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .hero .btn-row { justify-content: center; }
  .hero-art { margin: 0 auto; max-width: 620px; }
  .split { grid-template-columns: 1fr; }
  .service-grid, .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .group-tiles { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: 1fr; }
  .why-intro { position: static; }
  .project, .project.p-large, .project.p-half { grid-column: span 6; }
  .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .pr-track { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .logo-strip { grid-template-columns: repeat(3, 1fr); }
  .client-wall, .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .nf-inner { text-align: center; }
  .nf-art { max-width: 380px; margin: 0 auto; }
  .not-found p { margin-left: auto; margin-right: auto; }
  .not-found .btn-row { justify-content: center; }
}

@media (max-width: 720px) {
  .container { padding: 0 16px; }
  .service-grid, .feature-grid, .group-tiles, .group-tiles-5, .industry-grid { grid-template-columns: 1fr; }
  .project, .project.p-large, .project.p-half { grid-column: span 12; }
  .form-row, .case-grid { grid-template-columns: 1fr; gap: 0; }
  .case-grid { gap: 24px; }
  .strength-list { grid-template-columns: 1fr 1fr; gap: 12px; }
  .strength-card { padding: 18px 16px 22px; }
  .timeline { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .logo-strip { grid-template-columns: repeat(2, 1fr); }
  .client-logo { height: 100px; }
  .hero .btn-row .btn { flex: 1 1 100%; }
  .portfolio-head { flex-direction: column; align-items: flex-start; }
  .group-head { flex-direction: column; gap: 8px; }
  .why-cards { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .btn { white-space: normal; text-align: center; }
  .filters-center { justify-content: flex-start; }
  .trust-line { text-wrap: balance; }
  .cta-orbs { display: none; }   /* the floating balls land on the heading at phone width */
  /* Logo a step smaller so it still fits beside the menu button */
  .logo { gap: 10px; font-size: 1.38rem; }
  .logo-mark svg { width: 48px; height: 48px; }
  .logo-slogan { font-size: .62rem; }
  /* Smaller, edge-hugging scroll button so it doesn't sit on top of text; footer gets room to scroll clear of it */
  .back-to-top { right: 10px; bottom: 10px; width: 44px; height: 44px; border-width: 2px; opacity: 0; }
  .back-to-top.is-visible { opacity: .92; }
  .btt-pct { font-size: .66rem; padding: 1px 2px; }
  .back-to-top .icon { width: 18px; height: 18px; padding: 4px; }
  .site-footer { padding-bottom: 72px; }
}

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

/* ---------- Photos (assets/photos) ---------- */
img.photo { width: 100%; object-fit: cover; }
.hero-art img.photo, .nf-art img.photo { aspect-ratio: 4 / 3; height: auto; border-radius: 28px; box-shadow: 0 30px 60px -20px rgba(4, 10, 40, .55); }
.hero-art:has(img.photo) { margin-right: 0; }
.split-art img.photo { aspect-ratio: 4 / 3; height: auto; border-radius: 32px; }
.group-tile img.photo { aspect-ratio: 4 / 3; height: auto; }
.case-media img.photo { aspect-ratio: 16 / 9; height: auto; max-height: 620px; object-fit: cover; }
/* AI renders (.png/.webp) are 16:9 scenes: keep the whole scene in the large slots */
.hero-art img.render, .nf-art img.render, .split-art img.render, .case-media img.render { aspect-ratio: 16 / 9; }

/* ---------- Animated scenes (see dev_scene(), domain_scene(), hosting_scene(), design_scene(), shop_scene(), ux_scene(), app_scene()) ----------
   Sized in cqw so the whole scene scales with its box. Elements start from their final "built" state and the
   keyframes hide them, so with reduced motion (animations cut short above) the finished website simply shows. */
.scene { --cycle: 8s; position: relative; container-type: inline-size; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 32px; background: linear-gradient(180deg, #bfd9ff 0%, #e3efff 55%, #f7faff 100%); isolation: isolate; }
.ds-cloud { position: absolute; z-index: -1; height: 5cqw; border-radius: 99px; background: #fff; opacity: .85; filter: blur(.3cqw); animation: ds-drift 18s linear infinite alternate; }
.ds-cloud::before { content: ""; position: absolute; left: 22%; bottom: 40%; width: 45%; aspect-ratio: 1; border-radius: 50%; background: inherit; }
.ds-cloud.c1 { top: 7cqw; left: 6cqw; width: 16cqw; }
.ds-cloud.c2 { top: 4cqw; right: 8cqw; width: 12cqw; animation-duration: 24s; animation-direction: alternate-reverse; }
.ds-podium { position: absolute; left: 4cqw; right: 4cqw; bottom: 3cqw; height: 14cqw; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, #fff 40%, #dfeafb 100%); box-shadow: 0 2cqw 4cqw -2cqw rgba(30, 60, 140, .35); }

.ds-window { position: absolute; left: 6cqw; top: 13cqw; width: 70cqw; height: 49cqw; display: flex; flex-direction: column; border-radius: 2cqw; overflow: hidden; background: #fff; box-shadow: 0 3cqw 6cqw -2cqw rgba(20, 45, 120, .35), 0 0 0 .25cqw rgba(255,255,255,.7); animation: ds-float 6s ease-in-out infinite; }
.ds-bar { display: flex; align-items: center; gap: .9cqw; height: 4.4cqw; padding: 0 1.6cqw; background: #f1f4fa; border-bottom: 1px solid #e3e8f3; }
.ds-bar i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #ff6b6b; }
.ds-bar i:nth-child(2) { background: #ffc24b; } .ds-bar i:nth-child(3) { background: #3fcf8e; }
.ds-url { flex: 1; height: 2cqw; margin-left: 2cqw; border-radius: 99px; background: #fff; border: 1px solid #e3e8f3; }
.ds-body { flex: 1; display: grid; grid-template-columns: 47% 53%; min-height: 0; }

.ds-code { margin: 0; padding: 2cqw 1.6cqw; background: #0e1631; color: #dfe6fb; font: 500 1.42cqw/1.95 ui-monospace, 'Cascadia Code', Consolas, monospace; white-space: pre; overflow: hidden; }
.ds-line { display: block; animation: ds-type var(--cycle) var(--d) steps(24, end) infinite backwards; }
.ds-line b { display: inline-block; width: 2.4cqw; color: #4f5a80; font-weight: 400; }
.ds-code .t { color: #00ddff; } .ds-code .a { color: #c4a7ff; } .ds-code .v { color: #7ee2b8; }
.ds-caret { display: inline-block; width: .8cqw; height: 2cqw; margin-left: 2.4cqw; background: #00ddff; vertical-align: middle; animation: ds-blink 1s steps(1) infinite; }

.ds-preview { display: flex; flex-direction: column; gap: 1.6cqw; padding: 1.8cqw; background: linear-gradient(180deg, #f7f9ff, #fff); }
.ds-nav { display: flex; align-items: center; gap: 1.2cqw; }
.ds-nav i { width: 2.4cqw; height: 2.4cqw; border-radius: .7cqw; background: var(--grad); margin-right: auto; }
.ds-nav span { width: 4cqw; height: .9cqw; border-radius: 99px; background: #d5ddef; }
.ds-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; align-items: center; }
.ds-hero > div { display: flex; flex-direction: column; gap: 1cqw; }
.ds-h { display: block; height: 1.7cqw; border-radius: 99px; background: #18223f; }
.ds-h.short { width: 70%; }
.ds-p { display: block; width: 85%; height: 1cqw; border-radius: 99px; background: #c9d3ea; }
.ds-btn { display: block; width: 8cqw; height: 2.6cqw; border-radius: 99px; background: var(--blue); box-shadow: 0 .8cqw 1.6cqw -.6cqw rgba(0, 73, 183, .8); }
.ds-img { display: block; aspect-ratio: 4 / 3; border-radius: 1.4cqw; background: linear-gradient(160deg, #00ddff 0%, #ff1d58 60%, #f75990 100%); position: relative; overflow: hidden; }
.ds-img::after { content: ""; position: absolute; inset: auto -10% -30% -10%; height: 70%; border-radius: 50% 50% 0 0; background: rgba(255,255,255,.35); }
.ds-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; }
.ds-cards span { height: 8cqw; border-radius: 1.2cqw; background: #fff; border: 1px solid #e3e8f3; box-shadow: 0 .6cqw 1.4cqw -.8cqw rgba(20,45,120,.3); background-image: linear-gradient(#eef3ff, #eef3ff), linear-gradient(#d5ddef, #d5ddef); background-size: 2.6cqw 2.6cqw, 60% .8cqw; background-position: 1.2cqw 1.2cqw, 1.2cqw 5cqw; background-repeat: no-repeat; }

.ds-phone { position: absolute; right: 7cqw; bottom: 7cqw; width: 18cqw; height: 35cqw; display: flex; flex-direction: column; gap: 1cqw; padding: 4cqw 1.6cqw 1.6cqw; border-radius: 3cqw; background: #fff; border: .8cqw solid #1b2440; box-shadow: 0 3cqw 5cqw -2cqw rgba(20, 45, 120, .45); animation: ds-float 6s 1.5s ease-in-out infinite; }
.ds-notch { position: absolute; top: .8cqw; left: 50%; width: 6cqw; height: 1.4cqw; border-radius: 99px; background: #1b2440; transform: translateX(-50%); }
.ds-phone .ds-img { aspect-ratio: 16 / 10; }
.ds-phone .ds-h { height: 1.3cqw; } .ds-phone .ds-btn { width: 7cqw; height: 2.2cqw; }
.ds-row { display: block; height: 3.4cqw; border-radius: 1cqw; background: #eef3ff; }

.ds-chip { position: absolute; display: grid; place-items: center; width: 8cqw; height: 8cqw; border-radius: 2cqw; color: var(--blue); background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 1.6cqw 3cqw -1.4cqw rgba(20, 45, 120, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: ds-bob 5s ease-in-out infinite; }
.ds-chip .icon { width: 3.8cqw; height: 3.8cqw; }
.ds-chip.k1 { left: 2cqw; top: 4cqw; }
.ds-chip.k2 { left: 52cqw; top: 3cqw; animation-delay: -1.2s; }
.ds-chip.k3 { right: 3cqw; top: 15cqw; animation-delay: -2.4s; }
.ds-chip.k4 { left: 3cqw; bottom: 12cqw; animation-delay: -3.6s; }
.ds-toast { position: absolute; left: 24cqw; bottom: 6cqw; display: inline-flex; align-items: center; gap: 1cqw; padding: 1.3cqw 2.2cqw 1.3cqw 1.4cqw; border-radius: 99px; background: #fff; color: var(--ink); font: 600 1.8cqw/1 var(--font-body); box-shadow: 0 1.6cqw 3cqw -1cqw rgba(20, 45, 120, .4); animation: ds-toast var(--cycle) 3.4s var(--ease) infinite backwards; }
.ds-toast .icon { width: 2.6cqw; height: 2.6cqw; padding: .5cqw; border-radius: 50%; color: #fff; background: #12b76a; stroke-width: 3; }

.ds-pop { animation: ds-pop var(--cycle) var(--d) var(--ease) infinite backwards; }

@keyframes ds-type { 0% { clip-path: inset(0 100% 0 0); } 7%, 86% { clip-path: inset(0 0 0 0); } 92%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes ds-pop { 0% { opacity: 0; transform: translateY(1.2cqw) scale(.94); } 5%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes ds-toast { 0% { opacity: 0; transform: translateY(2cqw) scale(.9); } 5%, 48% { opacity: 1; transform: none; } 53%, 100% { opacity: 0; transform: translateY(1cqw); } }
@keyframes ds-blink { 50% { opacity: 0; } }
@keyframes ds-float { 50% { transform: translateY(-1cqw); } }
@keyframes ds-bob { 50% { transform: translateY(-1.4cqw) rotate(-3deg); } }
@keyframes ds-drift { to { transform: translateX(6cqw); } }
.hero-art:has(.scene) { margin-right: auto; width: 100%; } /* the scene sizes from its box, so the box needs an explicit width */
/* Hero scenes sit on a frosted dark-glass panel: faint grid inside, a slowly spinning gradient border, deep glow
   below; the podium becomes a soft cyan light pool instead of a white disc. */
.hero-art .scene { border: 1.5px solid transparent; backdrop-filter: blur(10px);
  background: radial-gradient(circle at 75% 0%, rgba(0, 221, 255, .14), transparent 55%) padding-box, linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 5cqw 5cqw padding-box, linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 5cqw 5cqw padding-box, linear-gradient(160deg, rgba(24, 34, 63, .85), rgba(7, 11, 26, .9)) padding-box, conic-gradient(from var(--spin), rgba(0, 221, 255, .7), rgba(0, 73, 183, .25), rgba(255, 29, 88, .7), rgba(0, 73, 183, .25), rgba(0, 221, 255, .7)) border-box;
  box-shadow: 0 40px 80px -30px rgba(0, 73, 183, .6), 0 0 60px -20px rgba(255, 29, 88, .35); animation: border-spin 10s linear infinite; }
.hero-art .ds-podium { background: radial-gradient(ellipse at 50% 40%, rgba(0, 221, 255, .32), rgba(0, 73, 183, .12) 55%, transparent 72%); box-shadow: none; }
.hero-art .ds-cloud { display: none; }
.scene.is-paused, .scene.is-paused * { animation-play-state: paused !important; } /* set by main.js while off-screen */

/* Domain scene */
.scene-domain .dm-window { left: 5cqw; top: 14cqw; width: 62cqw; height: 52cqw; }
.dm-body { flex: 1; display: flex; flex-direction: column; gap: 2cqw; padding: 3cqw; background: linear-gradient(180deg, #f7f9ff, #fff); }
.dm-label { font: 700 2.5cqw/1.2 var(--font-head); color: var(--ink); }
.dm-search { display: flex; align-items: center; gap: 1.2cqw; height: 6.4cqw; padding: 0 .8cqw 0 1.8cqw; border-radius: 99px; background: #fff; border: .25cqw solid var(--blue); box-shadow: 0 0 0 .8cqw rgba(0, 73, 183, .12); color: var(--ink); font: 600 2.1cqw/1 var(--font-body); }
.dm-search > .icon { width: 2.6cqw; height: 2.6cqw; color: var(--muted); }
.dm-typed { white-space: nowrap; animation: ds-type var(--cycle) .3s steps(13, end) infinite backwards; }
.dm-search .ds-caret { margin-left: -.4cqw; height: 2.8cqw; }
.dm-go { margin-left: auto; padding: 1.3cqw 2.2cqw; border-radius: 99px; background: var(--blue); color: #fff; font-size: 1.7cqw; animation: dm-press var(--cycle) 1.1s infinite backwards; }
.dm-results { display: flex; flex-direction: column; gap: 1.2cqw; }
.dm-results li { display: flex; align-items: center; gap: 1.2cqw; padding: 1.3cqw 1.4cqw; border-radius: 1.4cqw; background: #fff; border: 1px solid #e3e8f3; color: var(--ink); font: 600 1.8cqw/1 var(--font-body); box-shadow: 0 .6cqw 1.4cqw -.9cqw rgba(20, 45, 120, .3); }
.dm-results li .icon { width: 2.4cqw; height: 2.4cqw; color: var(--blue); }
.dm-results li.first { border-color: rgba(18, 183, 106, .45); background: #f2fbf6; }
.dm-badge { margin-left: auto; padding: .7cqw 1.2cqw; border-radius: 99px; font-size: 1.4cqw; }
.dm-badge.ok { background: #dcf7e9; color: #0b7a4b; }
.dm-badge.no { background: #eef1f7; color: var(--muted); }
.dm-add { padding: .8cqw 1.6cqw; border-radius: 99px; background: var(--ink); color: #fff; font-size: 1.4cqw; }
.dm-results li.first .dm-add { background: var(--blue); animation: dm-press var(--cycle) 2.7s infinite backwards; }
.dm-globe { position: absolute; right: 5cqw; top: 22cqw; width: 26cqw; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 35% 30%, #a9c8ff 0%, #0049b7 55%, #1c3aa8 100%); box-shadow: inset -3cqw -2.5cqw 5cqw rgba(5, 15, 60, .45), 0 3cqw 5cqw -2cqw rgba(20, 45, 120, .5); animation: ds-float 6s 1s ease-in-out infinite; }
.dm-globe::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%; background: repeating-linear-gradient(0deg, transparent 0 4.2cqw, rgba(255,255,255,.14) 4.2cqw 4.45cqw); }
/* World map: simplified continents drawn twice side by side in one svg; sliding it -50% spins the globe seamlessly.
   ::after shades the sphere above the map, and three pins ping where domains get registered. */
.dm-globe::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .35), transparent 35%), radial-gradient(circle at 70% 75%, rgba(5, 15, 60, .5), transparent 60%); }
.dm-map { position: absolute; left: 0; top: 0; width: 200%; max-width: none; height: 100%; animation: dm-map 14s linear infinite; }
.dm-map path { fill: rgba(255, 255, 255, .55); stroke: rgba(255, 255, 255, .8); stroke-width: .4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
@keyframes dm-map { to { transform: translateX(-50%); } }
.dm-pin { position: absolute; z-index: 3; width: 2cqw; height: 2cqw; margin: -1cqw 0 0 -1cqw; border-radius: 50%; background: #ff1d58; border: .4cqw solid #fff; }
.dm-pin::after { content: ""; position: absolute; inset: -.4cqw; border-radius: 50%; border: .3cqw solid #ff1d58; animation: dm-ping 2.4s ease-out infinite; }
.dm-pin.p1 { left: 30%; top: 34%; } .dm-pin.p2 { left: 62%; top: 52%; background: #00ddff; } .dm-pin.p3 { left: 44%; top: 72%; background: #fff685; }
.dm-pin.p2::after { border-color: #00ddff; animation-delay: .8s; } .dm-pin.p3::after { border-color: #fff685; animation-delay: 1.6s; }
@keyframes dm-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(2.8); opacity: 0; } }
.scene-domain .ds-chip.k2 { left: 44cqw; }
.scene-domain .ds-chip.k3 { right: 4cqw; top: auto; bottom: 8cqw; }
.scene-domain .ds-toast { left: 18cqw; bottom: 3.5cqw; }

/* Hosting scene */
.hs-rack { position: absolute; left: 5cqw; bottom: 10cqw; width: 21cqw; display: flex; flex-direction: column; gap: 1cqw; padding: 1.4cqw; border-radius: 1.6cqw; background: linear-gradient(180deg, #25304f, #141b33); box-shadow: 0 3cqw 5cqw -2cqw rgba(20, 45, 120, .55); animation: ds-float 6s ease-in-out infinite; }
.hs-rack.back { left: 16cqw; bottom: 22cqw; width: 17cqw; opacity: .85; animation-delay: -2s; }
.hs-unit { display: flex; align-items: center; gap: .8cqw; height: 5cqw; padding: 0 1.2cqw; border-radius: .8cqw; background: linear-gradient(180deg, #343f63, #283253); border: 1px solid rgba(255,255,255,.06); }
.hs-unit i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #3fcf8e; box-shadow: 0 0 1cqw #3fcf8e; animation: hs-led 1.6s var(--d) steps(1) infinite; }
.hs-unit i + i { background: #00ddff; box-shadow: 0 0 1cqw #00ddff; }
.hs-unit span { margin-left: auto; width: 45%; height: 1.6cqw; background: repeating-linear-gradient(90deg, #4a5679 0 .4cqw, transparent .4cqw .9cqw); }
.hs-wire { position: absolute; left: 26cqw; top: 46cqw; width: 14cqw; height: .5cqw; border-radius: 99px; background: rgba(0, 73, 183, .25); }
.hs-wire i { position: absolute; top: 50%; left: 0; width: 1.6cqw; height: 1.6cqw; margin-top: -.8cqw; border-radius: 50%; background: var(--blue); box-shadow: 0 0 1.5cqw var(--blue); animation: hs-packet 2.1s var(--d) linear infinite backwards; }
.scene-host .hs-dash { left: 40cqw; top: 15cqw; width: 54cqw; height: 48cqw; animation-delay: -3s; }
.hs-body { flex: 1; display: flex; flex-direction: column; gap: 1.6cqw; padding: 2.4cqw; background: #fff; }
.hs-head { display: flex; align-items: baseline; gap: 1.2cqw; }
.hs-label { font: 600 1.6cqw/1 var(--font-body); color: var(--muted); }
.hs-head strong { font: 800 3.8cqw/1 var(--font-head); color: var(--ink); letter-spacing: -.02em; }
.hs-live { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: .7cqw; padding: .6cqw 1.2cqw; border-radius: 99px; background: #dcf7e9; color: #0b7a4b; font: 600 1.4cqw/1 var(--font-body); }
.hs-live::before { content: ""; width: 1cqw; height: 1cqw; border-radius: 50%; background: #12b76a; animation: ds-blink 1.2s steps(1) infinite; }
.hs-graph { display: block; width: 100%; aspect-ratio: 200 / 60; height: auto; overflow: visible; }
.hs-area { fill: rgba(0, 73, 183, .12); animation: hs-fade var(--cycle) .6s infinite backwards; }
.hs-line { fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: ds-draw var(--cycle) .6s ease-in-out infinite backwards; }
.hs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.hs-stats div { display: flex; flex-direction: column; gap: 1cqw; padding: 1.2cqw; border-radius: 1.2cqw; background: #f4f7fd; color: var(--muted); font: 600 1.4cqw/1 var(--font-body); }
.hs-stats b { position: relative; display: block; height: 1cqw; border-radius: 99px; background: #dfe6f5; overflow: hidden; }
.hs-stats b::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 60%; border-radius: inherit; background: var(--grad); animation: hs-load 3.6s var(--d) ease-in-out infinite alternate; }
.scene-host .ds-chip.k2 { left: 44cqw; top: 3cqw; }
.scene-host .ds-chip.k3 { right: 4cqw; top: 3cqw; }
.scene-host .ds-chip.k4 { left: 28cqw; top: 26cqw; bottom: auto; }
.scene-host .ds-toast { left: 44cqw; bottom: 3.5cqw; }

/* Design scene */
.scene-design .dz-app { left: 5cqw; top: 12cqw; width: 78cqw; height: 54cqw; }
.dz-body { flex: 1; display: grid; grid-template-columns: 6cqw 1fr 15cqw; min-height: 0; background: #eef2f9; }
.dz-tools { display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; padding: 1.6cqw 0; background: #fff; border-right: 1px solid #e3e8f3; }
.dz-tools span { display: grid; place-items: center; width: 3.8cqw; height: 3.8cqw; border-radius: 1cqw; color: var(--muted); animation: dz-tool var(--cycle) infinite; }
.dz-tools span:nth-child(2) { animation-delay: 2s; } .dz-tools span:nth-child(3) { animation-delay: 4s; } .dz-tools span:nth-child(4) { animation-delay: 6s; }
.dz-tools .icon { width: 2.2cqw; height: 2.2cqw; }
.dz-canvas { position: relative; padding: 2.4cqw; background-image: radial-gradient(#cfd8ea .18cqw, transparent .22cqw); background-size: 2cqw 2cqw; }
.dz-board { position: relative; height: 100%; border-radius: 1.2cqw; background: #fff; box-shadow: 0 1cqw 2.4cqw -1.2cqw rgba(20, 45, 120, .35); }
.dz-board > span { position: absolute; display: block; }
.dz-nav { left: 5%; right: 5%; top: 5%; height: 4%; background: linear-gradient(90deg, #18223f 0 12%, transparent 12% 58%, #d5ddef 58% 69%, transparent 69% 73%, #d5ddef 73% 84%, transparent 84% 88%, #d5ddef 88%); border-radius: 99px; }
.dz-hero { left: 5%; right: 5%; top: 15%; height: 38%; border-radius: 1.2cqw; background: linear-gradient(135deg, #00ddff, #ff1d58 60%, #f75990); }
.dz-board .dz-hero { animation: ds-pop var(--cycle) var(--d) var(--ease) infinite backwards, dz-hue var(--cycle) ease-in-out infinite; }
.dz-title { left: 5%; top: 59%; width: 52%; height: 6%; border-radius: 99px; background: #18223f; }
.dz-text { left: 5%; top: 69%; width: 66%; height: 4%; border-radius: 99px; background: #c9d3ea; }
.dz-cta { left: 5%; top: 79%; width: 22%; height: 9%; border-radius: 99px; background: var(--blue); }
.dz-board .dz-cta { animation: ds-pop var(--cycle) var(--d) var(--ease) infinite backwards, dz-cta var(--cycle) infinite; }
.dz-dot { left: 78%; top: 60%; width: 16%; aspect-ratio: 1; border-radius: 50%; background: #fff685; border: .5cqw solid #ff1d58; }
.dz-select { left: 3.5%; top: 77%; width: 25%; height: 12%; border: .25cqw solid var(--blue); border-radius: .4cqw; animation: dz-select var(--cycle) var(--ease) infinite; }
.dz-select i { position: absolute; width: 1.1cqw; height: 1.1cqw; background: #fff; border: .25cqw solid var(--blue); }
.dz-select i:nth-child(1) { left: -.7cqw; top: -.7cqw; } .dz-select i:nth-child(2) { right: -.7cqw; top: -.7cqw; }
.dz-select i:nth-child(3) { left: -.7cqw; bottom: -.7cqw; } .dz-select i:nth-child(4) { right: -.7cqw; bottom: -.7cqw; }
.dz-pen { position: absolute; left: 14%; top: 22%; width: 66%; overflow: visible; }
.dz-pen path { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: ds-draw var(--cycle) 2s ease-in-out infinite backwards; }
.dz-pen circle { fill: #fff; stroke: var(--blue); stroke-width: .8; animation: hs-fade var(--cycle) 2s infinite backwards; }
.dz-panel { display: flex; flex-direction: column; gap: 1.8cqw; padding: 2cqw 1.6cqw; background: #fff; border-left: 1px solid #e3e8f3; }
.dz-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqw; }
.dz-swatches span { aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.55); }
.dz-slider { position: relative; display: block; height: .8cqw; border-radius: 99px; background: #e3e8f3; }
.dz-slider b { position: absolute; top: 50%; left: 30%; width: 2.2cqw; height: 2.2cqw; margin: -1.1cqw 0 0 -1.1cqw; border-radius: 50%; background: #fff; border: .35cqw solid var(--blue); animation: dz-slide 4s ease-in-out infinite alternate; }
.dz-slider.s2 b { animation-delay: -2s; border-color: var(--violet); }
.dz-type { padding: 1.2cqw; border-radius: 1cqw; background: #f4f7fd; color: var(--ink); font: 800 4.6cqw/1 var(--font-head); text-align: center; }
.dz-cursor { position: absolute; z-index: 3; left: 84cqw; top: 62cqw; width: 3.6cqw; height: 3.6cqw; fill: #18223f; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 .4cqw .6cqw rgba(0,0,0,.25)); animation: dz-cursor var(--cycle) ease-in-out infinite; }
.scene-design .ds-chip.k3 { top: 4cqw; right: 6cqw; }
.scene-design .ds-chip.k4 { bottom: 4cqw; }
.scene-design .ds-toast { left: 34cqw; bottom: 3cqw; }

@keyframes ds-draw { 0% { stroke-dashoffset: 1; } 40%, 86% { stroke-dashoffset: 0; } 92%, 100% { stroke-dashoffset: 1; } }
@keyframes dm-press { 0%, 100% { transform: none; } 3% { transform: scale(.88); } 6% { transform: none; } }
@keyframes hs-led { 0% { opacity: 1; } 30% { opacity: .25; } 45% { opacity: 1; } 70% { opacity: .4; } }
@keyframes hs-packet { 0% { left: 0; opacity: 0; } 12%, 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes hs-fade { 0% { opacity: 0; } 40%, 86% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes hs-load { from { width: 26%; } to { width: 88%; } }
@keyframes dz-tool { 0%, 22% { background: #eef3ff; color: var(--blue); } 25%, 100% { background: transparent; color: var(--muted); } }
@keyframes dz-hue { 0%, 40% { filter: none; } 50%, 70% { filter: hue-rotate(95deg); } 80%, 100% { filter: none; } }
@keyframes dz-cta { 0%, 30% { background: var(--blue); } 36%, 62% { background: var(--violet); } 68%, 100% { background: #00ddff; } }
@keyframes dz-slide { to { left: 80%; } }
@keyframes dz-select {
  0%, 20% { left: 3.5%; top: 77%; width: 25%; height: 12%; opacity: 0; }
  24%, 40% { left: 3.5%; top: 77%; width: 25%; height: 12%; opacity: 1; }
  48%, 62% { left: 3.5%; top: 13.5%; width: 93%; height: 41%; opacity: 1; }
  70%, 84% { left: 76.5%; top: 58%; width: 19%; height: 22%; opacity: 1; }
  90%, 100% { left: 76.5%; top: 58%; width: 19%; height: 22%; opacity: 0; }
}
@keyframes dz-cursor {
  0% { left: 84cqw; top: 62cqw; opacity: 0; transform: none; }
  8% { opacity: 1; }
  20% { left: 22cqw; top: 55cqw; transform: none; } 23% { transform: scale(.82); } 26% { left: 22cqw; top: 55cqw; transform: none; }
  36% { left: 72cqw; top: 22cqw; } 38% { transform: scale(.82); } 40% { left: 72cqw; top: 22cqw; transform: none; }
  50% { left: 39cqw; top: 34cqw; } 53% { transform: scale(.82); } 56% { left: 39cqw; top: 34cqw; transform: none; }
  70% { left: 58cqw; top: 49cqw; } 73% { transform: scale(.82); } 76% { left: 58cqw; top: 49cqw; transform: none; }
  88% { left: 84cqw; top: 62cqw; opacity: 1; } 94%, 100% { left: 84cqw; top: 62cqw; opacity: 0; }
}

/* Home: domain / hosting / design showcase */
.showcase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.showcase-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); color: inherit; transition: box-shadow .35s var(--ease), border-color .35s; }
.showcase-card:hover { box-shadow: var(--shadow); border-color: #d3dcf3; }
.showcase-card .scene { border-radius: 0; }
.showcase-copy { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 24px; }
.showcase-copy strong { color: var(--ink); font-family: var(--font-head); font-size: 1.12rem; }
.showcase-copy small { color: var(--muted); font-size: .92rem; line-height: 1.55; }
.showcase-copy .link-arrow { margin-top: 8px; }

/* Home hero slider: one animated scene per slide, cross-faded by main.js every 8s (autoplay only). */
.hero-slides { display: grid; }
.hero-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(12px) scale(.97); transition: opacity .6s var(--ease), transform .6s var(--ease), visibility .6s; }
.hero-slide.is-active { opacity: 1; visibility: visible; transform: none; }
.hero-slide:not(.is-active) .scene, .hero-slide:not(.is-active) .scene * { animation-play-state: paused !important; }
.hero-slide.is-restarting .scene, .hero-slide.is-restarting .scene * { animation: none !important; }

/* Home: scrolling services strip under the hero. The list is rendered twice, so sliding the track by -50% loops seamlessly. */
.marquee { overflow: hidden; padding: 22px 0; background: linear-gradient(90deg, #ccf8ff 0%, #e4e8ff 50%, #ffe1ea 100%); border-bottom: 1px solid rgba(0, 73, 183, .08); }
.marquee-track { display: flex; width: max-content; animation: marquee 45s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-list { display: flex; flex-shrink: 0; }
.marquee-list li { display: flex; align-items: center; gap: 44px; padding-right: 44px; color: var(--ink); font: 600 .95rem/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.marquee-star { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: #ff1d58; color: #fff; box-shadow: 0 6px 14px -6px rgba(255, 29, 88, .8); }
.marquee-star .icon { width: 20px; height: 20px; stroke-width: 2.6; animation: marquee-spin 6s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes marquee-spin { to { transform: rotate(360deg); } }
@media (max-width: 720px) {
  .marquee { padding: 16px 0; }
  .marquee-list li { gap: 28px; padding-right: 28px; font-size: .82rem; }
  .marquee-star { width: 26px; height: 26px; }
  .marquee-star .icon { width: 17px; height: 17px; }
}

/* Home hero headlines: one per slide, stacked in one grid cell (so the height never jumps); main.js swaps .is-active.
   Words rise out of a mask one by one (--i staggers them), the subtitle follows; the outgoing text just fades. */
.hero-texts { display: grid; }
.hero-text { grid-area: 1 / 1; align-self: center; visibility: hidden; transition: visibility 0s .3s; }
.hero-text.is-active { visibility: visible; transition-delay: 0s; }
.hero-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.hero-title .w > span { display: inline-block; opacity: 0; transform: translateY(105%); transition: opacity .25s, transform 0s .3s; }
.hero-text.is-active .w > span { opacity: 1; transform: none; transition: opacity .5s calc(.3s + var(--i) * 70ms), transform .8s var(--ease) calc(.3s + var(--i) * 70ms); }
.hero-text .lead { opacity: 0; transform: translateY(10px); transition: opacity .25s, transform 0s .3s; }
.hero-text.is-active .lead { opacity: 1; transform: none; transition: opacity .6s calc(.45s + var(--i) * 70ms), transform .8s var(--ease) calc(.45s + var(--i) * 70ms); }
.hero-title .grad-text { background: linear-gradient(100deg, #00ddff 0%, #f75990 35%, #fff685 55%, #00ddff 80%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; animation: grad-shimmer 5s ease-in-out infinite alternate; }
@keyframes grad-shimmer { to { background-position: 100% 0; } }
/* With JS, hold the first headline hidden until main.js adds .is-ready, so it also animates in on page load */
.js .hero-texts:not(.is-ready) .w > span, .js .hero-texts:not(.is-ready) .lead { opacity: 0; transform: translateY(105%); transition: none; }

/* Home hero: mixed type on the left. Sans headline, italic serif for the gradient words, monospace for the small labels. */
.hero-title .grad-text { font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: 1.06em; letter-spacing: -.01em; }
.hero-title .w:has(.grad-text) { padding-right: .08em; margin-right: -.08em; } /* room for the italic overhang inside the word mask */
.hero .pill { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.hero .trust-line { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 720px) {
  .hero .trust-line { font-size: .66rem; letter-spacing: .05em; }
  .hero .trust-line span { margin: 0 4px; }
}

/* Top strip above the floating menu: phone + email left, social icons right. Its height is --topbar-h, which
   .site-header.is-scrolled sets to 0, so it slides away on scroll and returns at the top of the page. */
.topbar { height: var(--topbar-h); overflow: hidden; pointer-events: auto; background: rgba(5, 8, 22, .55); border-bottom: 1px solid rgba(255,255,255,.07); font-size: .8rem; transition: height .35s var(--ease), opacity .3s; }
.site-header.is-scrolled .topbar { opacity: 0; }
.topbar-inner { height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar-contact { display: flex; align-items: center; gap: 22px; }
.topbar-contact a { display: inline-flex; align-items: center; gap: 8px; color: var(--on-dark-muted); transition: color .2s; }
.topbar-contact a:hover { color: #fff; }
.topbar-contact .icon { width: 15px; height: 15px; color: #00ddff; }
.topbar-social { display: flex; align-items: center; gap: 10px; color: var(--on-dark-muted); }
.social.social-top { gap: 4px; margin: 0; }
.social-top .social-icon { width: 26px; height: 26px; border-radius: 8px; border: 0; color: var(--on-dark-muted); }
.social-top .icon { width: 15px; height: 15px; }
@media (max-width: 720px) {
  .topbar-contact { gap: 6px; }
  .topbar-contact a { width: 28px; height: 28px; justify-content: center; border-radius: 8px; }
  .topbar-contact a:hover { background: rgba(255,255,255,.08); }
  .topbar .topbar-text { display: none; }   /* icons only on phones; the aria-labels keep the number and email for screen readers */
}

/* Transparent animated illustrations on white sections (assets/illustrations/*.svg animate their own parts;
   the wrapper adds a gentle float and a soft brand-coloured glow underneath). */
.clear-art { position: relative; background: none; }
.clear-art::before { content: ""; position: absolute; z-index: -1; left: 12%; right: 12%; bottom: 6%; height: 30%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 221, 255, .22), rgba(247, 89, 144, .12) 55%, transparent 72%); filter: blur(18px); }
.clear-art img { width: 100%; height: auto; animation: art-float 7s ease-in-out infinite; }
.split-art.clear-art { background: none; isolation: isolate; }
.ideal-art { isolation: isolate; max-width: 420px; margin-top: 32px; }
@keyframes art-float { 50% { transform: translateY(-10px); } }

/* Home showcase: drop the sky box so the four animated scenes float on the white card */
.showcase-card .scene { background: none; }
.showcase-card .ds-cloud { display: none; }
.showcase-card .ds-podium { background: radial-gradient(ellipse at 50% 35%, #fff 40%, #eef3fb 100%); }


/* Home services grid in the showcase card style (service_scene_card): scene on top, copy below, filterable.
   Services without a coded scene float their animated illustration over the same podium. */
.service-show { position: relative; }
.service-show.is-hidden { display: none; }
.service-show .showcase-media { display: block; }
.service-show .scene { transition: transform .6s var(--ease); }
.service-show:hover .scene { transform: translateY(-6px) scale(1.03); }
.service-show .showcase-copy { flex: 1; border-top: 1px solid var(--line-soft); }
.service-show h3 { margin: 0; font-size: 1.12rem; }
.service-show h3 a { color: var(--ink); }
.service-show h3 a:hover { color: var(--blue); }
.service-show .showcase-copy small { flex: 1; }
.scene-art img { position: absolute; z-index: 1; left: 6cqw; top: 2cqw; width: 88cqw; height: auto; animation: art-float 7s ease-in-out infinite; }
@media (min-width: 1181px) {
  .services .service-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }   /* 8 services = two full rows */
  .services .showcase-copy { padding: 18px 18px 22px; }
}

/* ---------- Home About: dark section with a coded 3D scene ----------
   The same website on a desktop, laptop and phone (responsive design) builds itself on every screen; four glass cards float in front
   at different depths. The stage follows the pointer (data-tilt / data-tilt-target). Sizes use cqw so it scales. */
.ab3 { position: relative; overflow: hidden; isolation: isolate; background: var(--navy-900); color: var(--on-dark-muted); }
.ab3-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ab3-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; animation: drift 16s ease-in-out infinite alternate; }
.ab3-orb.o1 { width: 520px; height: 520px; left: -160px; top: -120px; background: #0049b7; }
.ab3-orb.o2 { width: 440px; height: 440px; right: -140px; bottom: -160px; background: #ff1d58; opacity: .32; animation-delay: -8s; }
.ab3-gridlines { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 30% 50%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 30% 50%, #000 20%, transparent 70%); }
.ab3-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }

/* Scene */
.ab3-scene { position: relative; aspect-ratio: 1 / 1.08; margin-left: -3%; container-type: inline-size; perspective: 1600px; }
.ab3-scene::before { content: ""; position: absolute; inset: 14% 8% 10%; border-radius: 50%; background: radial-gradient(circle at 50% 55%, rgba(0, 221, 255, .22), rgba(106, 61, 240, .14) 40%, transparent 68%); filter: blur(20px); animation: a3-glow 7s ease-in-out infinite alternate; }
@keyframes a3-glow { to { transform: scale(1.12); opacity: .7; } }

.ab3-stage { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); }
/* Responsive showcase: desktop monitor (back), laptop (front left) and phone (front right) sway gently together.
   Each website mockup is sized in em, so one font-size per device scales it to that screen. */
.ab3-device { position: absolute; inset: 0; transform-style: preserve-3d; animation: ab3-sway 10s ease-in-out infinite alternate; }
@keyframes ab3-sway { from { transform: rotateX(-6deg) rotateY(-10deg); } to { transform: rotateX(-6deg) rotateY(10deg); } }
.ab3-label { position: absolute; left: 50%; bottom: -5.5cqw; padding: .7cqw 1.8cqw; border-radius: 99px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: var(--on-dark); font: 700 max(10px, 1.9cqw)/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transform: translateX(-50%); }

/* Desktop monitor */
.ab3-monitor { position: absolute; left: 50%; top: 8%; width: 66cqw; height: 40cqw; margin-left: -33cqw; transform: translateZ(-14cqw); }
.ab3-monitor-screen { position: absolute; inset: 0; padding: 1.4cqw; border-radius: 2cqw; background: linear-gradient(160deg, #2a3557, #0e1631); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 8cqw -2cqw rgba(0, 221, 255, .4); font-size: 1cqw; }
.ab3-monitor-neck { position: absolute; left: 50%; top: 100%; width: 7cqw; height: 8cqw; margin-left: -3.5cqw; background: linear-gradient(90deg, #1b2546, #3a4670, #1b2546); }
.ab3-monitor-foot { position: absolute; left: 50%; top: calc(100% + 8cqw); width: 24cqw; height: 1.8cqw; margin-left: -12cqw; border-radius: 1cqw 1cqw .4cqw .4cqw; background: linear-gradient(180deg, #3a4670, #1b2546); }
.ab3-monitor .ab3-label { bottom: auto; top: -5.5cqw; }

/* Laptop */
.ab3-laptop { position: absolute; left: 2%; top: 55%; width: 40cqw; height: 25cqw; transform-style: preserve-3d; transform: translateZ(10cqw); }
.ab3-screen { position: absolute; inset: 0; padding: 1cqw; border-radius: 1.6cqw 1.6cqw .4cqw .4cqw; background: linear-gradient(160deg, #2a3557, #0e1631); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 6cqw -2cqw rgba(0, 221, 255, .45); transform-origin: bottom; transform: rotateX(-4deg); font-size: .6cqw; }
.ab3-base { position: absolute; left: -2.5cqw; right: -2.5cqw; top: 100%; height: 24cqw; border-radius: .4cqw .4cqw 2cqw 2cqw; transform-origin: top; transform: rotateX(90deg); background: linear-gradient(180deg, #3a4670, #1b2546); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 8cqw rgba(0, 221, 255, .25); }
.ab3-base::before { content: ""; position: absolute; left: 4.5cqw; right: 4.5cqw; top: 2.6cqw; height: 11cqw; border-radius: .7cqw; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .1) 0 2.1cqw, transparent 2.1cqw 2.6cqw), repeating-linear-gradient(0deg, transparent 0 .5cqw, #1b2546 .5cqw .8cqw, transparent .8cqw 2.7cqw); }
.ab3-base::after { content: ""; position: absolute; left: 50%; bottom: 2.6cqw; width: 12cqw; height: 6.5cqw; margin-left: -6cqw; border-radius: .8cqw; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ab3-laptop .ab3-label { bottom: -9cqw; }

/* Website mockup (em-based) */
.ab3-site { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 1.6em; height: 100%; padding: 1.8em; border-radius: 1.2em; background: #0a1022; overflow: hidden; }
.ab3-site-nav { display: flex; align-items: center; gap: 1.6em; }
.ab3-site-nav b { width: 9em; height: 1.6em; border-radius: 99px; background: var(--grad); }
.ab3-site-nav i { width: 4.5em; height: 1em; border-radius: 99px; background: rgba(255, 255, 255, .25); }
.ab3-site-nav i:first-of-type { margin-left: auto; }
.ab3-site-hero { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: 2em; align-items: center; padding: 0 2.4em; border-radius: 1.4em; background: linear-gradient(120deg, rgba(0, 73, 183, .7), rgba(255, 29, 88, .45)); }
.ab3-site-copy { display: grid; gap: 1.2em; }
.ab3-site-copy b, .ab3-site-copy i, .ab3-site-copy em { display: block; border-radius: 99px; transform-origin: left; animation: ab3-build 7s var(--ease) infinite; }
.ab3-site-copy b { width: 100%; height: 2.2em; background: #fff; }
.ab3-site-copy i { width: 75%; height: 1.2em; background: rgba(255, 255, 255, .6); animation-delay: .3s; }
.ab3-site-copy em { width: 42%; height: 3em; margin-top: .6em; background: #ff1d58; box-shadow: 0 0 2em rgba(255, 29, 88, .8); animation-delay: .6s; }
.ab3-site-art { width: 100%; max-height: 100%; aspect-ratio: 1; justify-self: center; border-radius: 50%; background: conic-gradient(from 0deg, #00ddff, #a77bff, #ff1d58, #00ddff); box-shadow: 0 0 4em rgba(0, 221, 255, .5); animation: ab3-art 7s var(--ease) infinite; }
.ab3-site-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4em; }
.ab3-site-row i { height: 5.5em; border-radius: 1em; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); animation: ab3-tile 7s var(--ease) infinite; }
.ab3-site-row i:nth-child(2) { animation-delay: .2s; } .ab3-site-row i:nth-child(3) { animation-delay: .4s; }
.ab3-cursor { position: absolute; width: 2.6em; height: 2.6em; left: 30%; top: 70%; clip-path: polygon(0 0, 100% 62%, 52% 62%, 30% 100%); background: #fff; filter: drop-shadow(0 .3em .4em rgba(0, 0, 0, .5)); animation: ab3-cursor 7s var(--ease) infinite; }
@keyframes ab3-build { 0%, 6% { transform: scaleX(0); } 18%, 88% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes ab3-art { 0%, 12% { transform: scale(0) rotate(0); } 26%, 88% { transform: scale(1) rotate(180deg); } 96%, 100% { transform: scale(0) rotate(360deg); } }
@keyframes ab3-tile { 0%, 22% { opacity: 0; transform: translateY(1.5em); } 34%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes ab3-cursor { 0%, 30% { left: 70%; top: 85%; } 50%, 58% { left: 22%; top: 62%; } 60% { transform: scale(.8); } 64% { transform: scale(1); } 80%, 100% { left: 70%; top: 85%; } }

/* Phone */
.ab3-phone { position: absolute; right: 5%; top: 49%; width: 15cqw; height: 30cqw; padding: .9cqw; border-radius: 2.6cqw; background: linear-gradient(160deg, #2a3557, #0e1631); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 3cqw 6cqw -2cqw rgba(0, 0, 0, .6), 0 0 6cqw -2cqw rgba(255, 29, 88, .5); transform: translateZ(18cqw); animation: ab3-phone 6s ease-in-out infinite; }
@keyframes ab3-phone { 50% { transform: translateZ(18cqw) translateY(-2cqw); } }
.ab3-phone-screen { display: grid; grid-template-rows: auto auto 1fr; gap: 1.1cqw; height: 100%; padding: 2.2cqw 1.2cqw 1.2cqw; border-radius: 1.9cqw; background: #0a1022; overflow: hidden; }
.ab3-phone-screen::before { content: ""; justify-self: center; width: 4.4cqw; height: .9cqw; margin-top: -1.1cqw; border-radius: 99px; background: #000; }
.ab3-phone-hero { height: 10cqw; border-radius: 1.2cqw; background: linear-gradient(140deg, #ff1d58, #a77bff); animation: ab3-tile 7s var(--ease) .2s infinite; }
.ab3-phone-lines { display: grid; gap: .8cqw; align-content: start; }
.ab3-phone-lines i { height: .9cqw; border-radius: 99px; background: rgba(255, 255, 255, .25); transform-origin: left; animation: ab3-build 7s var(--ease) infinite; }
.ab3-phone-lines i:nth-child(2) { width: 70%; animation-delay: .3s; } .ab3-phone-lines i:nth-child(3) { width: 85%; animation-delay: .5s; }
.ab3-phone-lines em { display: block; width: 60%; height: 2.3cqw; margin-top: .7cqw; border-radius: 99px; background: #00ddff; box-shadow: 0 0 1.4cqw rgba(0, 221, 255, .7); animation: ab3-tile 7s var(--ease) .5s infinite; }
.ab3-phone .ab3-label { bottom: -6cqw; }
.ab3-floor { position: absolute; left: 6%; right: 6%; top: 82%; height: 9cqw; border-radius: 50%; background: radial-gradient(rgba(0, 221, 255, .32), transparent 70%); filter: blur(1.5cqw); }

/* Floating glass cards */
.ab3-card { position: absolute; display: flex; align-items: center; gap: 2cqw; padding: 2cqw 2.6cqw; border-radius: 3cqw; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 3cqw 6cqw -2cqw rgba(0, 0, 0, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; animation: ab3-float 7s ease-in-out infinite; }
.ab3-card > span:last-child { display: grid; gap: 1.2cqw; }
.ab3-card b { font: 700 max(11px, 2.7cqw)/1 var(--font-head); white-space: nowrap; }
.ab3-card-icon { display: grid; place-items: center; flex: none; width: 7cqw; height: 7cqw; border-radius: 2cqw; background: var(--grad); }
.ab3-card-icon .icon { width: 55%; height: 55%; }
.ab3-card.k1 { left: 0; top: 0; --z: 10cqw; }
.ab3-card.k1 .ab3-card-icon { background: linear-gradient(135deg, #f75990, #ff1d58); }
.ab3-card.k2 { right: 0; top: 10%; --z: 16cqw; animation-delay: -1.8s; }
.ab3-card.k2 .ab3-card-icon { background: linear-gradient(135deg, #0049b7, #00ddff); }
.ab3-card.k3 { left: 0; bottom: 12%; --z: 14cqw; animation-delay: -3.6s; }
.ab3-card.k3 .ab3-card-icon { background: linear-gradient(135deg, #a77bff, #6a3df0); }
.ab3-card.k4 { right: 0; bottom: -2%; --z: 8cqw; animation-delay: -5.2s; }
.ab3-card.k4 .ab3-card-icon { background: linear-gradient(135deg, #10b981, #00ddff); }
@keyframes ab3-float { 0%, 100% { transform: translateZ(var(--z)) translateY(0); } 50% { transform: translateZ(var(--z)) translateY(-2.4cqw); } }
.ab3-card i { display: flex; align-items: flex-end; gap: .8cqw; height: 2.4cqw; }
.ab3-card em { display: block; border-radius: 99px; }
.ab3-dots em { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; animation: ab3-pop 2.4s ease-in-out calc(var(--i, 0) * .2s) infinite; }
.ab3-dots em:nth-child(1) { background: #0049b7; } .ab3-dots em:nth-child(2) { background: #ff1d58; --i: 1; }
.ab3-dots em:nth-child(3) { background: #00ddff; --i: 2; } .ab3-dots em:nth-child(4) { background: #fff685; --i: 3; }
@keyframes ab3-pop { 50% { transform: scale(1.3); } }
.ab3-lines { flex-direction: column; align-items: flex-start !important; height: auto !important; gap: .7cqw !important; }
.ab3-lines em { height: .8cqw; background: #00ddff; transform-origin: left; animation: ab3-type 3s steps(10) infinite; }
.ab3-lines em:nth-child(1) { width: 14cqw; } .ab3-lines em:nth-child(2) { width: 9cqw; margin-left: 2cqw; background: #f75990; animation-delay: .4s; } .ab3-lines em:nth-child(3) { width: 11cqw; background: #a77bff; animation-delay: .8s; }
@keyframes ab3-type { 0% { transform: scaleX(0); } 60%, 100% { transform: scaleX(1); } }
.ab3-meter { width: 16cqw; height: 1.2cqw !important; border-radius: 99px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.ab3-meter em { width: 100%; height: 100%; background: linear-gradient(90deg, #a77bff, #00ddff); transform-origin: left; animation: ab3-fill 3.2s var(--ease) infinite; }
@keyframes ab3-fill { 0% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
.ab3-bars em { width: 1.8cqw; background: linear-gradient(#10b981, #00ddff); transform-origin: bottom; animation: ab3-bar 2.6s var(--ease) infinite alternate; }
.ab3-bars em:nth-child(1) { height: 30%; } .ab3-bars em:nth-child(2) { height: 50%; animation-delay: .2s; } .ab3-bars em:nth-child(3) { height: 42%; animation-delay: .4s; }
.ab3-bars em:nth-child(4) { height: 72%; animation-delay: .6s; } .ab3-bars em:nth-child(5) { height: 100%; animation-delay: .8s; background: linear-gradient(#ff1d58, #f75990); }
@keyframes ab3-bar { from { transform: scaleY(.4); } }

/* Copy */
.ab3 h2 { color: #fff; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); letter-spacing: -.03em; line-height: 1.1; }
.ab3-grad { background: linear-gradient(100deg, #00ddff, #f75990 55%, #ff1d58); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab3-lead { margin: 22px 0 14px; font-size: 1.08rem; line-height: 1.75; color: var(--on-dark); }
.ab3-text { margin: 0 0 30px; line-height: 1.75; }
.ab3-points { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 28px; padding: 0; list-style: none; }
.ab3-point { position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 4px; align-items: start; padding: 18px; border-radius: 18px; border: 1.5px solid transparent; background: linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .03)) padding-box, linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)) border-box; }
.ab3-point:hover { background: linear-gradient(var(--navy-800), var(--navy-800)) padding-box, conic-gradient(from var(--spin), #00ddff, #0049b7, #ff1d58, #f75990, #00ddff) border-box; animation: border-spin 3s linear infinite; box-shadow: 0 24px 40px -24px rgba(255, 29, 88, .55); }
.ab3-point[data-tilt-card]::after { background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .12), transparent 50%); }
.ab3-point-icon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #3d7bff, #0049b7); box-shadow: 0 10px 20px -10px rgba(0, 73, 183, .9); animation: chip-float 4s ease-in-out calc(var(--n) * -.7s) infinite; }
.ab3-point:nth-child(2) .ab3-point-icon { background: linear-gradient(135deg, #f75990, #ff1d58); box-shadow: 0 10px 20px -10px rgba(255, 29, 88, .9); }
.ab3-point:nth-child(3) .ab3-point-icon { background: linear-gradient(135deg, #a77bff, #6a3df0); box-shadow: 0 10px 20px -10px rgba(106, 61, 240, .9); }
.ab3-point:nth-child(4) .ab3-point-icon { background: linear-gradient(135deg, #00ddff, #0091d9); box-shadow: 0 10px 20px -10px rgba(0, 170, 230, .9); }
.ab3-point-icon .icon { width: 21px; height: 21px; }
.ab3-point strong { color: #fff; font: 700 1rem/1.3 var(--font-head); }
.ab3-point > span:last-child { font-size: .88rem; line-height: 1.55; }
.ab3-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 32px; padding: 0; list-style: none; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); }
.ab3-stats li { padding: 16px 18px; }
.ab3-stats li + li { border-left: 1px solid rgba(255, 255, 255, .1); }
.ab3-stats strong { display: block; font: 800 1.3rem/1.1 var(--font-head); background: linear-gradient(100deg, #00ddff, #f75990); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab3-stats span { font-size: .8rem; }

@media (max-width: 980px) {
  .ab3-wrap { grid-template-columns: 1fr; }
  .ab3-scene { max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 640px) {
  .ab3-points { grid-template-columns: 1fr; }
  .ab3-stats { grid-template-columns: repeat(2, 1fr); }
  .ab3-stats li:nth-child(3) { border-left: 0; }
  .ab3-stats li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .1); }
  .ab3-card b { font-size: 10px; }
}
.btn-soft { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-soft:hover { border-color: #ff1d58; color: #ff1d58; transform: translateY(-2px); }

/* E-commerce scene (shop_scene) */
.scene-shop .sh-store { left: 5cqw; top: 12cqw; width: 64cqw; height: 50cqw; }
.sh-cart { position: relative; display: grid; place-items: center; margin-left: 1.6cqw; color: var(--ink); animation: sh-cart var(--cycle) var(--ease) infinite; }
.sh-cart .icon { width: 2.6cqw; height: 2.6cqw; }
.sh-cart b { position: absolute; top: -1cqw; right: -1.3cqw; display: grid; place-items: center; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #ff1d58; color: #fff; font: 700 1.3cqw/1 var(--font-body); animation: sh-badge var(--cycle) var(--ease) infinite; }
.sh-body { flex: 1; display: flex; flex-direction: column; gap: 1.6cqw; padding: 2cqw; background: #f7f9ff; min-height: 0; }
.sh-banner { position: relative; display: block; height: 8cqw; flex: none; border-radius: 1.4cqw; background: linear-gradient(120deg, #0049b7, #00ddff); }
.sh-banner b, .sh-banner i { position: absolute; left: 2cqw; height: 1.4cqw; border-radius: 99px; background: #fff; }
.sh-banner b { top: 2cqw; width: 40%; } .sh-banner i { top: 4.6cqw; width: 22%; height: 1cqw; opacity: .7; }
.sh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.sh-item { display: flex; flex-direction: column; gap: .8cqw; padding: 1cqw; border-radius: 1.4cqw; background: #fff; box-shadow: 0 .8cqw 1.6cqw -1cqw rgba(20, 45, 120, .35); }
.sh-img { display: block; aspect-ratio: 1 / .8; border-radius: 1cqw; }
.sh-name { display: block; width: 80%; height: 1cqw; border-radius: 99px; background: #18223f; }
.sh-price { display: block; width: 40%; height: 1cqw; border-radius: 99px; background: #ff1d58; opacity: .75; }
.sh-add { padding: .7cqw 0; border-radius: 99px; background: #eef3ff; color: var(--blue); font: 700 1.3cqw/1 var(--font-body); text-align: center; }
.sh-item.picked .sh-add { animation: sh-click var(--cycle) infinite; }
.sh-fly { position: absolute; z-index: 3; left: 32cqw; top: 33cqw; width: 6cqw; height: 5cqw; border-radius: 1cqw; background: linear-gradient(150deg, #ff1d58, #f75990); opacity: 0; animation: sh-fly var(--cycle) var(--ease) infinite; }
.scene-shop .sh-phone { right: 5cqw; bottom: 6cqw; gap: 1.4cqw; }
.sh-check-title { display: block; width: 70%; height: 1.4cqw; border-radius: 99px; background: #18223f; }
.sh-line { display: flex; align-items: center; gap: 1cqw; }
.sh-line i { width: 3.4cqw; height: 3.4cqw; border-radius: .8cqw; background: linear-gradient(150deg, #ff1d58, #f75990); }
.sh-line:nth-of-type(3) i { background: linear-gradient(150deg, #00ddff, #0049b7); }
.sh-line b { flex: 1; height: 1cqw; border-radius: 99px; background: #d5ddef; }
.sh-total { display: block; margin-top: auto; height: 1.2cqw; border-radius: 99px; background: linear-gradient(90deg, #c9d3ea 0 40%, transparent 40% 70%, #18223f 70%); }
.sh-pay { padding: 1cqw 0; border-radius: 99px; background: var(--blue); color: #fff; font: 700 1.4cqw/1 var(--font-body); text-align: center; animation: sh-pay var(--cycle) infinite; }
.scene-shop .ds-chip.k3 { top: 4cqw; right: 8cqw; }
@keyframes sh-click { 0%, 26% { background: #eef3ff; color: var(--blue); transform: none; } 29% { background: var(--blue); color: #fff; transform: scale(.9); } 33%, 86% { background: var(--blue); color: #fff; transform: none; } 92%, 100% { background: #eef3ff; color: var(--blue); } }
@keyframes sh-fly { 0%, 28% { opacity: 0; transform: none; } 30% { opacity: 1; transform: none; } 36% { opacity: 1; transform: translate(16cqw, -18cqw) scale(.6); } 41%, 100% { opacity: 0; transform: translate(31cqw, -21cqw) scale(.2); } }
@keyframes sh-badge { 0%, 40% { transform: scale(0); } 44% { transform: scale(1.35); } 48%, 86% { transform: scale(1); } 92%, 100% { transform: scale(0); } }
@keyframes sh-cart { 0%, 40%, 48%, 100% { transform: none; } 44% { transform: rotate(-12deg) scale(1.15); } }
@keyframes sh-pay { 0%, 55% { background: var(--blue); transform: none; } 58% { transform: scale(.92); } 61%, 86% { background: #12b76a; transform: none; } 92%, 100% { background: var(--blue); } }

/* UI/UX scene (ux_scene) */
.ux-flow { position: absolute; left: 0; top: 16cqw; width: 100cqw; overflow: visible; }
.ux-flow path { fill: none; stroke: var(--blue); stroke-width: .5; stroke-linecap: round; stroke-dasharray: 1; opacity: .55; animation: ds-draw var(--cycle) .4s ease-in-out infinite backwards; }
.ux-screen { position: absolute; z-index: 1; width: 20cqw; height: 34cqw; border-radius: 2.6cqw; background: #fff; border: .6cqw solid #1b2440; box-shadow: 0 2.4cqw 4cqw -2cqw rgba(20, 45, 120, .45); animation: ds-float 6s ease-in-out infinite; }
.ux-screen.s1 { left: 7cqw; top: 22cqw; }
.ux-screen.s2 { left: 40cqw; top: 13cqw; z-index: 2; transform-origin: bottom; width: 22cqw; height: 38cqw; animation-delay: -2s; }
.ux-screen.s3 { left: 73cqw; top: 22cqw; animation-delay: -4s; }
.ux-wire, .ux-skin { position: absolute; inset: 2.6cqw 1.4cqw 1.4cqw; display: flex; flex-direction: column; gap: 1.2cqw; }
.ux-wire i, .ux-skin i { display: block; border-radius: .8cqw; }
.ux-wire i { border: .25cqw dashed #b9c3da; }
.ux-wire i:nth-child(1), .ux-skin i:nth-child(1) { height: 2.6cqw; }
.ux-wire i:nth-child(2), .ux-skin i:nth-child(2) { height: 11cqw; }
.ux-wire i:nth-child(3), .ux-skin i:nth-child(3) { height: 1.6cqw; width: 80%; }
.ux-wire i:nth-child(4), .ux-skin i:nth-child(4) { height: 3cqw; width: 60%; border-radius: 99px; }
.ux-skin { background: #fff; animation: ux-skin var(--cycle) var(--d) var(--ease) infinite backwards; }
.ux-skin i:nth-child(1) { background: linear-gradient(90deg, #18223f 0 30%, #d5ddef 30%); }
.ux-skin i:nth-child(2) { background: linear-gradient(140deg, #00ddff, #ff1d58 65%, #f75990); }
.ux-skin i:nth-child(3) { background: #18223f; }
.ux-skin i:nth-child(4) { background: #ff1d58; box-shadow: 0 .8cqw 1.4cqw -.6cqw rgba(255, 29, 88, .8); }
.s2 .ux-skin i:nth-child(2) { background: linear-gradient(140deg, #a77bff, #0049b7); }
.s3 .ux-skin i:nth-child(2) { background: linear-gradient(140deg, #fff685, #00ddff); }
.ux-note { position: absolute; z-index: 3; left: 26cqw; top: 6cqw; display: inline-flex; align-items: center; gap: .8cqw; padding: 1.2cqw 1.6cqw; background: #fff685; color: var(--ink); font: 700 1.6cqw/1 var(--font-head); box-shadow: 0 1.2cqw 2cqw -1cqw rgba(20, 45, 120, .4); transform: rotate(-4deg); animation: ds-pop var(--cycle) 3s var(--ease) infinite backwards; }
.ux-note .icon { width: 2.2cqw; height: 2.2cqw; }
.ux-cursor { position: absolute; z-index: 4; left: 0; top: 0; width: 3.6cqw; height: 3.6cqw; fill: #18223f; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 .4cqw .6cqw rgba(0,0,0,.25)); animation: ux-cursor var(--cycle) ease-in-out infinite; }
.scene-ux .ds-chip.k2 { left: auto; right: 4cqw; top: 6cqw; }
.scene-ux .ds-chip.k3 { right: auto; left: 4cqw; top: auto; bottom: 10cqw; }
.scene-ux .ds-toast { left: auto; right: 5cqw; bottom: 5cqw; }
@keyframes ux-skin { 0%, 8% { clip-path: inset(0 0 100% 0); } 22%, 86% { clip-path: inset(0); } 92%, 100% { clip-path: inset(0 0 100% 0); } }
@keyframes ux-cursor { 0%, 4% { transform: translate(14cqw, 42cqw); } 18%, 26% { transform: translate(48cqw, 34cqw); } 40%, 52% { transform: translate(82cqw, 44cqw); } 70%, 100% { transform: translate(14cqw, 42cqw); } }

/* Web application scene (app_scene) */
@property --k1 { syntax: '<integer>'; inherits: false; initial-value: 1284; }
@property --k2 { syntax: '<integer>'; inherits: false; initial-value: 326; }
@property --k3 { syntax: '<integer>'; inherits: false; initial-value: 975; }
.ap-db { position: absolute; left: 4cqw; top: 31cqw; width: 12cqw; animation: ds-float 6s ease-in-out infinite; }
.ap-db span { position: relative; display: block; height: 5cqw; margin-top: -1.2cqw; border-radius: 0 0 50% 50% / 0 0 2cqw 2cqw; background: linear-gradient(90deg, #0049b7, #3d7bff 60%, #0049b7); }
.ap-db span::before { content: ""; position: absolute; left: 0; right: 0; top: -1.4cqw; height: 2.8cqw; border-radius: 50%; background: #8fb4ff; }
.ap-db span::after { content: ""; position: absolute; left: 2cqw; top: 2cqw; width: 1cqw; height: 1cqw; border-radius: 50%; background: #00ddff; animation: ds-blink 1.4s steps(1) infinite; }
.ap-db span:nth-child(2)::after { animation-delay: .5s; } .ap-db span:nth-child(3)::after { animation-delay: 1s; }
.ap-wire { position: absolute; left: 16cqw; top: 37cqw; width: 8cqw; height: .5cqw; border-radius: 99px; background: #c9d3ea; }
.ap-wire i { position: absolute; top: -.5cqw; width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: #00ddff; box-shadow: 0 0 1cqw #00ddff; animation: hs-packet 2.4s var(--d) linear infinite backwards; }
.scene-app .ap-window { left: 24cqw; top: 11cqw; width: 70cqw; height: 52cqw; }
.ap-body { flex: 1; display: grid; grid-template-columns: 7cqw 1fr; min-height: 0; }
.ap-side { display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; padding: 1.8cqw 0; background: #18223f; }
.ap-side span { display: grid; place-items: center; width: 4cqw; height: 4cqw; border-radius: 1cqw; color: #8b96b8; }
.ap-side span:first-child { background: var(--blue); color: #fff; }
.ap-side .icon { width: 2.2cqw; height: 2.2cqw; }
.ap-main { display: flex; flex-direction: column; gap: 1.4cqw; padding: 1.8cqw; background: #f4f7fd; min-height: 0; }
.ap-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; }
.ap-kpis > div { padding: 1.2cqw; border-radius: 1.2cqw; background: #fff; box-shadow: 0 .6cqw 1.4cqw -.8cqw rgba(20, 45, 120, .3); }
.ap-label { display: block; color: var(--muted); font: 600 1.15cqw/1 var(--font-body); }
.ap-num { display: block; margin-top: .8cqw; color: var(--ink); font: 800 2.4cqw/1 var(--font-head); }
.ap-num::after { content: counter(k); }
.ap-num.n1 { counter-reset: k var(--k1); animation: ap-k1 var(--cycle) var(--ease) infinite; }
.ap-num.n2 { counter-reset: k var(--k2); animation: ap-k2 var(--cycle) var(--ease) infinite; }
.ap-num.n3 { counter-reset: k var(--k3); animation: ap-k3 var(--cycle) var(--ease) infinite; color: #12b76a; }
.ap-chart { display: flex; align-items: flex-end; gap: 1cqw; height: 11cqw; padding: 1.2cqw; border-radius: 1.2cqw; background: #fff; }
.ap-chart i { flex: 1; height: var(--h); border-radius: .6cqw .6cqw 0 0; background: linear-gradient(#00ddff, #0049b7); transform-origin: bottom; animation: ap-grow var(--cycle) var(--d) var(--ease) infinite backwards; }
.ap-chart i:nth-child(6) { background: linear-gradient(#f75990, #ff1d58); }
.ap-table { display: grid; gap: .8cqw; }
.ap-table span { display: flex; align-items: center; gap: 1cqw; height: 3cqw; padding: 0 1.2cqw; border-radius: .8cqw; background: #fff; }
.ap-table i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: var(--grad); }
.ap-table b { flex: 1; height: .9cqw; border-radius: 99px; background: #d5ddef; }
.ap-table em { width: 5cqw; height: 1.5cqw; border-radius: 99px; background: #c9f2df; }
.scene-app .ds-chip.k2 { left: 44cqw; top: 1.5cqw; }
.scene-app .ds-chip.k3 { right: auto; left: 5cqw; top: auto; bottom: 13cqw; }
.scene-app .ds-toast { left: 30cqw; }
@keyframes ap-k1 { 0% { --k1: 0; } 40%, 100% { --k1: 1284; } }
@keyframes ap-k2 { 0% { --k2: 0; } 40%, 100% { --k2: 326; } }
@keyframes ap-k3 { 0% { --k3: 0; } 40%, 100% { --k3: 975; } }
@keyframes ap-grow { 0% { transform: scaleY(0); } 12%, 86% { transform: scaleY(1); } 92%, 100% { transform: scaleY(0); } }

/* ---------- Home portfolio (project_showcase_card) ----------
   A tinted stage in each project's colours (--tint, --a1, --a2) with two drifting blobs. The browser window
   auto-scrolls the mock site built around the project shot; a phone mockup floats in front. On hover the devices
   turn in 3D, the page scrolls faster and a round "View" button pops in. Sizes in cqw so it scales per card. */
.pf-media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10.5; container-type: inline-size; perspective: 1400px; isolation: isolate; background: radial-gradient(circle at 80% 0%, rgba(255, 255, 255, .9), transparent 50%), var(--tint); }
.pf-blob { position: absolute; z-index: -1; width: 55cqw; aspect-ratio: 1; border-radius: 50%; filter: blur(8cqw); opacity: .55; animation: pf-drift 12s ease-in-out infinite alternate; }
.pf-blob.b1 { left: -15cqw; bottom: -25cqw; background: var(--a1); }
.pf-blob.b2 { right: -18cqw; top: -22cqw; background: var(--a2); animation-duration: 15s; animation-direction: alternate-reverse; }
@keyframes pf-drift { to { transform: translate(10cqw, -6cqw) scale(1.15); } }

.pf-browser { position: absolute; left: 7cqw; top: 8cqw; width: 70cqw; height: 58cqw; display: flex; flex-direction: column; overflow: hidden; border-radius: 2cqw 2cqw 0 0; background: #fff; box-shadow: 0 3cqw 7cqw -2cqw rgba(11, 18, 48, .45), 0 0 0 .3cqw rgba(255, 255, 255, .6); transform: rotateY(6deg) rotateX(4deg); transform-origin: left center; transition: transform .7s var(--ease); animation: pf-float 7s ease-in-out infinite; }
@keyframes pf-float { 50% { translate: 0 -1.4cqw; } }
.pf-bar { display: flex; align-items: center; gap: .8cqw; flex: none; height: 4.4cqw; padding: 0 1.6cqw; background: #f1f4fa; border-bottom: 1px solid #e3e8f3; }
.pf-bar i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #ff6b6b; }
.pf-bar i:nth-child(2) { background: #ffc24b; } .pf-bar i:nth-child(3) { background: #3fcf8e; }
.pf-url { margin-left: 1.6cqw; padding: .5cqw 1.6cqw; border-radius: 99px; background: #fff; border: 1px solid #e3e8f3; color: var(--muted); font: 500 1.4cqw/1 var(--font-body); white-space: nowrap; }
.pf-page { position: relative; flex: 1; overflow: hidden; }
.pf-scroll { display: flex; flex-direction: column; gap: 2.4cqw; padding: 2cqw 2.4cqw 3cqw; animation: pf-scroll 14s ease-in-out infinite; }
@keyframes pf-scroll { 0%, 12% { transform: translateY(0); } 45%, 60% { transform: translateY(-38%); } 92%, 100% { transform: translateY(0); } }
.pf-nav { display: flex; align-items: center; gap: 1.4cqw; }
.pf-nav b { width: 8cqw; height: 1.8cqw; margin-right: auto; border-radius: 99px; background: var(--a1); }
.pf-nav i { width: 5cqw; height: 1cqw; border-radius: 99px; background: #d5ddef; }
.pf-hero { position: relative; display: block; flex: none; height: 30cqw; overflow: hidden; border-radius: 1.6cqw; }
.pf-hero img { width: 100%; height: 100%; object-fit: cover; animation: pf-kenburns 16s ease-in-out infinite alternate; }
@keyframes pf-kenburns { to { transform: scale(1.12) translate(-2%, -2%); } }
.pf-hero-copy { position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; gap: 1.2cqw; width: 60%; padding: 3cqw; background: linear-gradient(90deg, rgba(11, 18, 48, .7), transparent); }
.pf-hero-copy b { width: 85%; height: 2.2cqw; border-radius: 99px; background: #fff; }
.pf-hero-copy i { width: 60%; height: 1.2cqw; border-radius: 99px; background: rgba(255, 255, 255, .7); }
.pf-hero-copy em { width: 14cqw; height: 3.4cqw; margin-top: .6cqw; border-radius: 99px; background: var(--a1); box-shadow: 0 1cqw 2cqw -1cqw var(--a1); }
.pf-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.pf-row i { height: 11cqw; border-radius: 1.4cqw; background: #f3f6fc; border: 1px solid #e3e8f3; background-image: linear-gradient(var(--a2), var(--a2)), linear-gradient(#d5ddef, #d5ddef); background-size: 3cqw 3cqw, 60% 1cqw; background-position: 1.4cqw 1.4cqw, 1.4cqw 6.4cqw; background-repeat: no-repeat; }
.pf-band { display: block; height: 9cqw; border-radius: 1.6cqw; background: linear-gradient(120deg, var(--a1), var(--a2)); }

.pf-phone { position: absolute; right: 6cqw; bottom: 5cqw; width: 19cqw; aspect-ratio: 9 / 18; padding: .9cqw; border-radius: 3.4cqw; background: #141b33; box-shadow: 0 3cqw 6cqw -2cqw rgba(11, 18, 48, .55); transform: rotateY(-10deg) rotateZ(3deg); transition: transform .7s var(--ease); animation: pf-float 7s 1.8s ease-in-out infinite; }
.pf-phone-screen { display: flex; flex-direction: column; gap: 1.2cqw; height: 100%; overflow: hidden; border-radius: 2.6cqw; background: #fff; }
.pf-phone-screen img { width: 100%; height: 42%; object-fit: cover; flex: none; }
.pf-phone-screen b { width: 70%; height: 1.6cqw; margin: 0 1.4cqw; border-radius: 99px; background: #18223f; }
.pf-phone-screen i { width: 80%; height: 1cqw; margin: 0 1.4cqw; border-radius: 99px; background: #d5ddef; }
.pf-phone-screen em { width: 55%; height: 3cqw; margin: .6cqw 1.4cqw 0; border-radius: 99px; background: var(--a1); animation: pf-tap 3s ease-in-out infinite; }
@keyframes pf-tap { 0%, 70%, 100% { transform: none; } 78% { transform: scale(.9); filter: brightness(1.25); } }

.pf-view { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; align-content: center; gap: 2px; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: var(--grad); color: #fff; font: 700 .85rem/1 var(--font-head); box-shadow: 0 16px 32px -12px rgba(255, 29, 88, .7); transform: scale(0) rotate(-30deg); transition: transform .45s var(--ease); }
.pf-view .icon { width: 20px; height: 20px; }
.pf-card:hover .pf-view { transform: scale(1) rotate(0); }
.pf-card:hover .pf-browser { transform: rotateY(-4deg) rotateX(2deg) translateZ(20px); }
.pf-card:hover .pf-phone { transform: rotateY(-18deg) rotateZ(0deg) translateZ(50px) translateY(-2cqw); }
.pf-card:hover .pf-scroll { animation-duration: 6s; }
.pf-card .project-info { border-top: 1px solid var(--line-soft); }
.pf-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.pf-tags li { padding: 5px 12px; border-radius: 99px; background: var(--surface-alt); border: 1px solid var(--line); color: var(--body); font-size: .78rem; font-weight: 600; transition: background-color .3s, color .3s, border-color .3s; }
.pf-card:hover .pf-tags li { background: #fff; border-color: #cfdaf3; color: var(--blue); }

/* ---------- Home portfolio slider (initPortfolioSlider in main.js) ----------
   A scroll-snap row that breaks out of the container to nearly full width: --per cards per view (5 on wide
   screens, down to one on phones). Cards outside the view (.is-out) dim and shrink a little; the progress bar
   fills over each autoplay interval. Narrow cards hide the service tags and clamp the summary. */
.pf-slider { position: relative; left: 50%; width: min(1680px, calc(100vw - 48px)); translate: -50% 0; }
.pf-track { --per: 5; --gap: 20px; position: relative; display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 12px 2px 34px; margin: -12px -2px 0; cursor: grab; overscroll-behavior-x: contain; }
.pf-track::-webkit-scrollbar { display: none; }
.pf-track:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: var(--radius-lg); }
.pf-track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.pf-track.is-dragging .pf-card { pointer-events: none; }
.pf-track .pf-card { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); scroll-snap-align: start; transition: opacity .5s var(--ease), scale .5s var(--ease), box-shadow .35s var(--ease); }
.pf-track .pf-card.is-out { opacity: .5; scale: .95; }
.pf-track .pf-card img { -webkit-user-drag: none; }
.pf-controls { display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.pf-btn { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--ink); box-shadow: var(--shadow-sm); transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease); }
.pf-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; transform: scale(1.06); }
.pf-btn .icon { width: 20px; height: 20px; }
.pf-dots { display: flex; gap: 8px; }
.pf-dots button { width: 10px; height: 10px; padding: 0; border-radius: 99px; background: #cfd6e6; border: 0; transition: width .4s var(--ease), background-color .3s; }
.pf-dots button[aria-current] { width: 34px; background: var(--grad); }
.pf-progress { position: relative; flex: 1; height: 3px; border-radius: 99px; background: var(--line); overflow: hidden; }
.pf-progress i { position: absolute; inset: 0; background: var(--grad); transform: scaleX(0); transform-origin: left; }
.pf-progress.is-running i { animation: pf-progress 5s linear forwards; }
@keyframes pf-progress { to { transform: scaleX(1); } }
.pf-count { font: 600 .9rem/1 var(--font-mono); color: var(--muted); white-space: nowrap; }
.pf-count b { color: var(--ink); font-size: 1.1rem; }
.pf-track .project-info { padding: 18px 20px 20px; }
.pf-track .project-info h3 { font-size: 1.08rem; }
.pf-track .project-info p:not(.project-cat) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .88rem; }
.pf-track .pf-tags { display: none; }
.pf-track .pf-view { width: 72px; height: 72px; margin: -36px 0 0 -36px; font-size: .78rem; }
.pf-controls { max-width: 1180px; margin-left: auto; margin-right: auto; }
@media (max-width: 1400px) { .pf-track { --per: 4; } }
@media (max-width: 1100px) { .pf-track { --per: 3; } }
@media (max-width: 820px) { .pf-track { --per: 2; } }
@media (max-width: 720px) {
  .pf-slider { width: calc(100vw - 32px); }
  .pf-track { --gap: 14px; }
  .pf-track .pf-card { flex-basis: 86%; }
  .pf-track .pf-card.is-out { scale: .97; }
  .pf-controls { gap: 12px; }
  .pf-progress { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-track { scroll-behavior: auto; }
}

/* ---------- Animated footer (includes/footer.php) ----------
   Three wave layers (each path repeats every 1440 units inside a 200%-wide svg, so sliding it -50% loops
   seamlessly) roll along the top edge. Behind the content: drifting glows and a perspective grid that scrolls
   toward you. The big outlined wordmark has a light sweep running through its letters. */
.site-footer { position: relative; isolation: isolate; }
.ft-waves { position: absolute; left: 0; right: 0; bottom: 100%; height: 70px; overflow: hidden; pointer-events: none; }
.ft-waves svg { position: absolute; left: 0; bottom: -1px; width: 200%; max-width: none; height: 100%; animation: ft-wave 18s linear infinite; }
.ft-waves svg:nth-child(2) { height: 85%; animation-duration: 12s; animation-direction: reverse; }
.ft-waves svg:nth-child(3) { height: 65%; animation-duration: 9s; }
.ft-waves .w1 { fill: rgba(0, 73, 183, .18); }
.ft-waves .w2 { fill: rgba(247, 89, 144, .2); }
.ft-waves .w3 { fill: var(--navy-950); }
@keyframes ft-wave { to { transform: translateX(-50%); } }
.page-contact .ft-waves, .page-other .ft-waves { display: none; }   /* these pages butt the footer against content */
.ft-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ft-glow { position: absolute; width: 40vw; max-width: 560px; aspect-ratio: 1; border-radius: 50%; filter: blur(100px); opacity: .22; animation: why-drift 20s ease-in-out infinite alternate; }
.ft-glow.g1 { left: -10%; top: -20%; background: #00ddff; }
.ft-glow.g2 { right: -8%; bottom: -25%; background: #ff1d58; animation-direction: alternate-reverse; }
.ft-grid { position: absolute; left: -50%; right: -50%; bottom: 0; height: 55%; background: linear-gradient(rgba(0, 221, 255, .09) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, rgba(0, 221, 255, .09) 1px, transparent 1px) 0 0 / 64px 64px; transform: perspective(500px) rotateX(62deg); transform-origin: bottom; -webkit-mask-image: linear-gradient(transparent, #000 60%); mask-image: linear-gradient(transparent, #000 60%); animation: ft-grid 3s linear infinite; }
@keyframes ft-grid { to { background-position: 0 64px, 0 0; } }

/* Contact strip */
.grad-flow { background: linear-gradient(100deg, #00ddff 0%, #f75990 40%, #fff685 60%, #00ddff 90%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: grad-shimmer 5s ease-in-out infinite alternate; }
.ft-contact { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 64px; padding: 28px 32px; border-radius: 24px; border: 1px solid transparent; background: linear-gradient(160deg, rgba(14, 22, 49, .92), rgba(7, 11, 26, .92)) padding-box, conic-gradient(from var(--spin), rgba(0, 221, 255, .6), rgba(0, 73, 183, .2), rgba(255, 29, 88, .6), rgba(0, 73, 183, .2), rgba(0, 221, 255, .6)) border-box; animation: border-spin 8s linear infinite; }
.ft-hello { margin: 0; color: #fff; font: 800 clamp(1.4rem, 1rem + 1.4vw, 2.1rem)/1.15 var(--font-head); letter-spacing: -.01em; }
.ft-contact-links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ft-pill { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: #fff; font-weight: 600; font-size: .9rem; transition: transform .3s var(--ease), background-color .3s, border-color .3s; }
.ft-pill > .icon { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: rgba(0, 221, 255, .14); color: #00ddff; }
.ft-pill + .ft-pill > .icon { background: rgba(255, 29, 88, .14); color: #ff6b8e; }
.ft-pill small { display: block; color: var(--on-dark-muted); font-size: .72rem; font-weight: 500; letter-spacing: .04em; }
.ft-pill:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .09); border-color: rgba(0, 221, 255, .4); }

/* Columns: headings with a growing gradient bar, links that slide with a leading dash */
.site-footer h2 { position: relative; padding-bottom: 12px; }
.site-footer h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 3px; border-radius: 99px; background: var(--grad); transition: width .45s var(--ease); }
.site-footer nav:hover h2::after { width: 56px; }
.site-footer nav a { position: relative; display: inline-flex; align-items: center; transition: color .25s, transform .3s var(--ease); }
.site-footer nav a::before { content: ""; width: 0; height: 2px; margin-right: 0; border-radius: 99px; background: linear-gradient(90deg, #00ddff, #ff1d58); transition: width .3s var(--ease), margin-right .3s var(--ease); }
.site-footer nav a:hover { color: #fff; transform: translateX(2px); }
.site-footer nav a:hover::before { width: 14px; margin-right: 8px; }

/* Giant wordmark with a light sweep */
.ft-wordmark { margin: 8px 0 0; overflow: hidden; text-align: center; white-space: nowrap; user-select: none; font: 800 clamp(2rem, 9vw, 8rem)/.9 var(--font-head); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .13);
  background: linear-gradient(100deg, transparent 42%, rgba(0, 221, 255, .85) 48%, rgba(247, 89, 144, .85) 52%, transparent 58%) 0 0 / 250% 100% no-repeat; -webkit-background-clip: text; background-clip: text; animation: ft-sweep 7s ease-in-out infinite; }
@keyframes ft-sweep { 0% { background-position: 120% 0; } 60%, 100% { background-position: -20% 0; } }
.ft-made { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; }
.ft-made .icon { width: 15px; height: 15px; color: #ff1d58; fill: #ff1d58; animation: ft-beat 1.4s ease-in-out infinite; }
@keyframes ft-beat { 0%, 40%, 100% { transform: scale(1); } 20% { transform: scale(1.3); } }
@media (max-width: 720px) {
  .ft-contact { padding: 22px 20px; margin-bottom: 44px; }
  .ft-contact-links, .ft-pill, .ft-cta { width: 100%; }
  .ft-made { display: flex; margin: 6px 0 0; }
}

/* ---------- Main menu: white glass ----------
   Frosted white bar with dark text; the active link keeps the blue→pink gradient pill. Link colours are scoped to
   desktop, because below 1025px the links live in the dark slide-down panel. */
.nav-wrap::before { background: rgba(255, 255, 255, .95); border-color: rgba(255, 255, 255, .95); box-shadow: 0 12px 32px -14px rgba(5, 8, 22, .45), inset 0 1px 0 #fff; }
.site-header.is-scrolled .nav-wrap::before { background: rgba(255, 255, 255, .98); }
.site-header.is-scrolled .nav-wrap { box-shadow: 0 18px 40px -18px rgba(5, 8, 22, .45); }
.nav-wrap .logo { color: var(--ink); }
.hamburger { border-color: rgba(11, 18, 48, .14); }
.hamburger span { background: var(--ink); }
@media (min-width: 1025px) {
  .nav-wrap, .site-header.is-scrolled .nav-wrap { max-width: 1260px; gap: 16px; }   /* room for seven menu items + the quote button */
  .primary-nav { margin-left: 24px; }   /* nudges the menu right of centre */
  @media (max-width: 1120px) { .nav-cta { display: none; } }   /* "Contact Us" is in the menu; the bar is too narrow for both */
  @media (max-width: 1240px) { .primary-nav { margin-left: 8px; } .nav-link { padding: 8px 9px; } .logo { font-size: 1.4rem; gap: 10px; } .logo-mark svg { width: 48px; height: 48px; } .logo-slogan { font-size: .62rem; } }
  @media (max-width: 1120px) { .nav-link { font-size: .86rem; padding: 8px 7px; } }
  /* Text-only menu: no pill behind the list or the items, state is shown by colour alone */
  .nav-list { background: none; border-color: transparent; }
  .nav-link { color: var(--body); }
  .nav-link:hover, .mega-toggle[aria-expanded="true"] { color: var(--blue); background: none; }
  .nav-link[aria-current="page"], .mega-toggle[data-current] { color: #ff1d58; font-weight: 600; background: none; box-shadow: none; }
  /* Services: a compact two-column dropdown centred under its button instead of a full-width panel */
  .has-mega { position: relative; }
  .mega { left: 50%; right: auto; width: 640px; transform: translate(-50%, -8px) perspective(1200px) rotateX(-6deg); }
  .mega.is-open { transform: translateX(-50%); }
}

/* ---------- Home: We Serve All Industries (industries_hub()) ---------- */
.ind-hub { position: relative; overflow: hidden; isolation: isolate; padding-bottom: 0; background: linear-gradient(180deg, #fff 0%, #f1f5ff 60%, #e9efff 100%); }
.ind-hub::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 50% 55%, rgba(0, 221, 255, .16), transparent 40%), radial-gradient(circle at 15% 20%, rgba(247, 89, 144, .1), transparent 30%), radial-gradient(circle at 85% 25%, rgba(0, 73, 183, .1), transparent 30%); }
.ind-hub .section-head { margin-bottom: 8px; }
.ind-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.ind-stage { position: relative; width: min(1400px, 100%); margin: 0 auto; aspect-ratio: 1200 / 620; }
.js .ind-stage.reveal { transform: none; }
.ind-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ind-path { fill: none; stroke: url(#ind-line); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 9; opacity: .55; vector-effect: non-scaling-stroke; animation: ind-flow 1.2s linear infinite; }
@keyframes ind-flow { to { stroke-dashoffset: -12; } }
.ind-spark { fill: #fff; stroke: #ff1d58; stroke-width: 3; filter: drop-shadow(0 0 6px rgba(255, 29, 88, .9)); }

/* Hub */
.ind-core { position: absolute; left: 50%; top: 64.5%; width: clamp(130px, 13vw, 180px); aspect-ratio: 1; translate: -50% -50%; }
.ind-core-ring { position: absolute; inset: -14%; border-radius: 50%; border: 2px dashed rgba(0, 73, 183, .3); animation: orb-spin 20s linear infinite; }
.ind-core-ring.r2 { inset: -30%; border: 1.5px solid rgba(255, 29, 88, .25); animation: ind-ripple 3s ease-out infinite; }
@keyframes ind-ripple { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.15); opacity: 0; } }
.ind-core-ball { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 50%; background: var(--grad); color: #fff; text-align: center; box-shadow: 0 0 0 10px rgba(255, 255, 255, .7), 0 24px 60px -16px rgba(255, 29, 88, .6), 0 0 80px rgba(0, 221, 255, .35); animation: orb-pulse 3s ease-in-out infinite; }
.ind-core-ball .icon { width: 34px; height: 34px; margin-bottom: 4px; animation: twinkle-soft 3s ease-in-out infinite; }
.ind-core-ball b { font: 800 clamp(.8rem, .5rem + .5vw, 1rem)/1.1 var(--font-head); }
.ind-core-ball small { font-size: clamp(.62rem, .45rem + .3vw, .74rem); opacity: .85; letter-spacing: .06em; text-transform: uppercase; }
@keyframes twinkle-soft { 50% { transform: rotate(20deg) scale(1.12); } }

/* Industry nodes */
.ind-node { --size: clamp(54px, 4.6vw, 66px); position: absolute; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 130px; translate: -50% calc(var(--size) / -2); text-align: center; }
.ind-icon { position: relative; display: grid; place-items: center; flex: none; width: var(--size); height: var(--size); border-radius: 50%; color: var(--blue); border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--spin), #00ddff, #0049b7, #ff1d58, #00ddff) border-box; box-shadow: 0 14px 28px -14px rgba(0, 73, 183, .55); animation: border-spin 6s linear infinite, chip-float 5s ease-in-out calc(var(--n) * -.45s) infinite; transition: color .3s, scale .35s var(--ease); }
.ind-icon .icon { width: 26px; height: 26px; }
.ind-icon::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #ff1d58; opacity: 0; animation: ind-hit 3s ease-out calc(var(--n) * -.27s) infinite; }   /* same phase as that node's spark */
@keyframes ind-hit { 0% { transform: scale(.85); opacity: .9; } 30%, 100% { transform: scale(1.35); opacity: 0; } }
.ind-node:nth-child(3n+2) .ind-icon { color: #ff1d58; }
.ind-node:nth-child(3n) .ind-icon { color: #0091d9; }
.ind-label { color: var(--ink); font: 700 clamp(.68rem, .55rem + .25vw, .82rem)/1.25 var(--font-head); letter-spacing: .04em; text-transform: uppercase; }
.ind-node:hover .ind-icon { scale: 1.15; color: #fff; background: var(--grad) padding-box, conic-gradient(from var(--spin), #00ddff, #0049b7, #ff1d58, #00ddff) border-box; }

/* Animated city: sky (clouds, plane), parallax back skyline, front towers that build up on reveal, road with cars */
.ind-city { position: relative; margin-top: -5%; pointer-events: none; }
.js .ind-city.reveal { transform: none; }
@media (max-width: 820px) { .ind-city { margin-top: 0; } }
.ind-sky { position: absolute; inset: 0 0 auto; height: 120px; overflow: hidden; }
.cloud { position: absolute; top: 18px; left: -160px; width: 110px; height: 30px; border-radius: 30px; background: #fff; opacity: .85; box-shadow: 0 8px 20px -8px rgba(0, 73, 183, .25); animation: ind-drift 70s linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; bottom: 10px; border-radius: 50%; background: inherit; }
.cloud::before { left: 18px; width: 42px; height: 38px; }
.cloud::after { left: 48px; width: 50px; height: 48px; }
.cloud.c2 { top: 54px; scale: .7; opacity: .7; animation-duration: 95s; animation-delay: -40s; }
.cloud.c3 { top: 8px; scale: .55; opacity: .6; animation-duration: 85s; animation-delay: -70s; }
@keyframes ind-drift { to { left: 100%; } }
.plane { position: absolute; top: 34px; left: -60px; width: 40px; height: 14px; background: #6d82c4; clip-path: polygon(2% 5%, 11% 5%, 22% 45%, 86% 45%, 100% 62%, 86% 78%, 58% 78%, 44% 100%, 37% 100%, 45% 78%, 6% 78%, 0 60%); animation: ind-fly 30s linear -6s infinite; }
@keyframes ind-fly { 0% { left: -60px; translate: 0 20px; } 60%, 100% { left: 100%; translate: 0 -10px; } }

/* Back skyline: a 200%-wide silhouette (two identical halves) sliding -50% loops seamlessly */
.ind-far { position: absolute; left: 0; right: 0; bottom: 44px; height: 140px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ind-far svg { display: block; width: 200%; max-width: none; height: 100%; fill: rgba(0, 73, 183, .13); animation: ind-far 90s linear infinite; }
@keyframes ind-far { to { transform: translateX(-50%); } }

/* Front towers. Colours come from --c1/--c2 so roofs can match. Windows are a grid mask; lit windows are the same
   grid intersected with two offset checkerboards whose positions jump in steps, so different windows switch on. */
.ind-skyline { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 200px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.bld { --c1: #4f74e3; --c2: #2a3f9e; position: relative; flex: none; width: var(--w); height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--c1), var(--c2)); clip-path: inset(-200px -200px 0 -200px); transition: clip-path 1.2s var(--ease) var(--r); }
.js .ind-city:not(.is-visible) .bld { clip-path: inset(100% -200px 0 -200px); }   /* rises from the ground */
.bld:nth-child(3n) { --c1: #6b5fe0; --c2: #33288f; }
.bld:nth-child(4n+1) { --c1: #38a3e8; --c2: #1f5bb0; }
.bld::before, .lit { content: ""; position: absolute; inset: 10px 7px 0;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 11px), repeating-linear-gradient(180deg, #000 0 7px, transparent 7px 13px);
  mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 11px), repeating-linear-gradient(180deg, #000 0 7px, transparent 7px 13px);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.bld::before { background: rgba(255, 255, 255, .2); }
.lit { background: #ffe27a;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 11px), repeating-linear-gradient(180deg, #000 0 7px, transparent 7px 13px), repeating-conic-gradient(#000 0 25%, transparent 0 50%), repeating-conic-gradient(#000 0 25%, transparent 0 50%);
  mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 11px), repeating-linear-gradient(180deg, #000 0 7px, transparent 7px 13px), repeating-conic-gradient(#000 0 25%, transparent 0 50%), repeating-conic-gradient(#000 0 25%, transparent 0 50%);
  -webkit-mask-size: auto, auto, 44px 26px, 22px 78px; mask-size: auto, auto, 44px 26px, 22px 78px;
  animation: ind-lit 8s steps(1, end) var(--d) infinite; }
.bld:nth-child(odd) .lit { animation-duration: 11s; }
.bld:nth-child(5n) .lit { animation-duration: 6s; }
@keyframes ind-lit {
  0% { -webkit-mask-position: 0 0, 0 0, 0 0, 0 0; mask-position: 0 0, 0 0, 0 0, 0 0; }
  25% { -webkit-mask-position: 0 0, 0 0, 11px 13px, 0 26px; mask-position: 0 0, 0 0, 11px 13px, 0 26px; }
  50% { -webkit-mask-position: 0 0, 0 0, 22px 0, 11px 13px; mask-position: 0 0, 0 0, 22px 0, 11px 13px; }
  75% { -webkit-mask-position: 0 0, 0 0, 33px 13px, 11px 52px; mask-position: 0 0, 0 0, 33px 13px, 11px 52px; }
}
.bld::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .3) 50%, transparent 65%) 100% 0 / 300% 100% no-repeat; animation: ind-sheen 7s linear var(--d) infinite; }
@keyframes ind-sheen { 40%, 100% { background-position: 0 0; } }

/* Roofs: blinking antenna, spire, water tank */
.roof { position: absolute; left: 50%; bottom: 100%; }
.b-ant .roof { width: 2px; height: 24px; margin-left: -1px; background: var(--c2); }
.b-ant .roof::after { content: ""; position: absolute; top: -4px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: #ff1d58; box-shadow: 0 0 10px 3px rgba(255, 29, 88, .7); animation: ind-blink 1.6s steps(1, end) var(--d) infinite; }
@keyframes ind-blink { 50% { opacity: .15; box-shadow: none; } }
.b-spire .roof { width: calc(var(--w) - 12px); height: 26px; translate: -50% 0; background: var(--c1); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.b-tank .roof { width: 18px; height: 12px; translate: -50% 0; border-radius: 4px 4px 0 0; background: var(--c2); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25); }

/* Construction site: unfinished frame on top, and a tower crane that hauls a beam from the next roof onto it */
.b-site { --c1: #5a6da8; --c2: #34447a; }
.b-site::after { inset: auto 0 100%; height: 28px; border: 3px solid #ffb02e; border-bottom: 0; border-radius: 0; background: linear-gradient(#ffb02e, #ffb02e) 50% 0 / 3px 100% no-repeat, linear-gradient(#ffb02e, #ffb02e) 0 50% / 100% 3px no-repeat; animation: none; }
.crane { position: absolute; left: 8px; bottom: 0; width: 6px; height: calc(var(--h) + 72px); }
.mast { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, #ffb02e 0 1.5px, transparent 1.5px 6px), linear-gradient(90deg, #ffb02e 1.5px, transparent 1.5px calc(100% - 1.5px), #ffb02e 0); }
.jib { position: absolute; top: 4px; left: -34px; width: 190px; height: 6px; background: repeating-linear-gradient(-45deg, #ffb02e 0 1.5px, transparent 1.5px 6px), linear-gradient(#ffb02e 1.5px, transparent 1.5px calc(100% - 1.5px), #ffb02e 0); }
.jib::before { content: ""; position: absolute; left: 2px; top: 6px; width: 16px; height: 10px; border-radius: 2px; background: #34447a; }   /* counterweight */
.jib::after { content: ""; position: absolute; left: 34px; bottom: 100%; width: 6px; height: 14px; background: #ffb02e; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.trolley { position: absolute; left: 150px; top: 6px; width: 8px; height: 4px; background: #34447a; animation: ind-trolley 10s ease-in-out infinite; }
.cable { position: absolute; left: 3.5px; top: 4px; width: 1px; height: 78px; background: #34447a; animation: ind-hoist 10s ease-in-out infinite; }
.cable::after { content: ""; position: absolute; left: -12px; top: 100%; width: 25px; height: 7px; border-radius: 1px; background: repeating-linear-gradient(90deg, #ff1d58 0 4px, #c8123f 4px 5px); animation: ind-load 10s steps(1, end) infinite; }
@keyframes ind-trolley { 0%, 15% { left: 150px; } 45%, 75% { left: 56px; } 95%, 100% { left: 150px; } }
@keyframes ind-hoist { 0% { height: 78px; } 15%, 45% { height: 20px; } 60%, 65% { height: 48px; } 75%, 95% { height: 20px; } 100% { height: 78px; } }
@keyframes ind-load { 0% { opacity: 1; } 63% { opacity: 0; } 98% { opacity: 1; } }

/* Road with cars */
.ind-road { position: relative; height: 44px; overflow: hidden; background: #1b2440; box-shadow: inset 0 4px 0 #2d3a63; }
.ind-road::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: repeating-linear-gradient(90deg, #fff 0 34px, transparent 34px 70px); opacity: .7; animation: ind-lane 1.6s linear infinite; }
@keyframes ind-lane { to { background-position: -70px 0; } }
.car { position: absolute; top: 7px; width: 54px; height: 16px; border-radius: 8px 12px 4px 4px; background: linear-gradient(90deg, #ff1d58, #f75990); box-shadow: 0 0 14px rgba(255, 29, 88, .6); animation: ind-drive 9s linear infinite; }
.car::after { content: ""; position: absolute; right: -6px; top: 5px; width: 10px; height: 5px; border-radius: 50%; background: #fff685; box-shadow: 0 0 10px 3px rgba(255, 246, 133, .7); }
.car.c2 { top: 23px; background: linear-gradient(90deg, #00ddff, #0049b7); box-shadow: 0 0 14px rgba(0, 221, 255, .6); animation-duration: 7s; animation-direction: reverse; }
.car.c2::after, .car.c4::after { right: auto; left: -6px; }
.car.c3 { animation-delay: -4.5s; background: linear-gradient(90deg, #a77bff, #6a3df0); box-shadow: 0 0 14px rgba(106, 61, 240, .6); }
.car.c4 { top: 23px; width: 76px; border-radius: 4px 4px 3px 8px; background: linear-gradient(90deg, #ffb02e, #ff8a00); box-shadow: 0 0 14px rgba(255, 160, 40, .55); animation-duration: 12s; animation-delay: -3s; animation-direction: reverse; }
@keyframes ind-drive { from { left: -80px; } to { left: 100%; } }

@media (max-width: 820px) {
  .ind-stage { aspect-ratio: auto; padding: 0 16px 40px; }
  .ind-links { display: none; }
  .ind-core { position: relative; left: auto; top: auto; translate: none; width: 140px; margin: 40px auto 56px; }
  .ind-nodes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 10px; }
  .ind-node { position: static; translate: none; width: auto; }
  .ind-skyline { zoom: .7; }
  .ind-far { height: 100px; }
}
@media (max-width: 480px) {
  .ind-nodes { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Service pages: "About This Service" (optional 'about' in $SERVICES) ----------
   Text on the left (heading, lead, key points with gradient ticks, closing line); animated art on the right. */
.svc-about { padding-bottom: 32px; overflow: hidden; }
.about-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.svc-about .section-head { max-width: none; margin-bottom: 36px; }
.svc-about .section-head h2 { max-width: 900px; }
.svc-points { display: grid; gap: 10px; }
.svc-points li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); font-size: .94rem; line-height: 1.5; transition: border-color .3s, box-shadow .3s, translate .3s var(--ease); }
.svc-points li:hover { border-color: rgba(0, 73, 183, .3); box-shadow: 0 14px 28px -18px rgba(0, 73, 183, .45); translate: 6px 0; }
.svc-tick { display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--grad); color: #fff; }
.svc-tick .icon { width: 13px; height: 13px; color: #fff; stroke: #fff; stroke-width: 3; }
.svc-close { margin: 24px 0 0; padding-left: 16px; border-left: 3px solid #ff1d58; font: 700 clamp(1rem, .9rem + .4vw, 1.2rem)/1.45 var(--font-head); color: var(--ink); }
@media (max-width: 980px) {
  .about-split { grid-template-columns: 1fr; gap: 40px; }
}

/* Domain orbit art (domain_orbit()) */
.dorb { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; }
.dorb-ring { position: absolute; border-radius: 50%; }
.dorb-ring.r1 { inset: 12%; border: 2px dashed rgba(0, 73, 183, .25); animation: orb-spin 40s linear infinite; }
.dorb-ring.r2 { inset: 2%; border: 1.5px solid rgba(255, 29, 88, .15); background: radial-gradient(circle, rgba(0, 221, 255, .2), transparent 62%); }
.dorb-globe { position: absolute; inset: 30%; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 35% 30%, #5fb8ff, #0049b7 55%, #0b1a5c); box-shadow: 0 0 0 10px rgba(255, 255, 255, .75), 0 30px 60px -20px rgba(0, 73, 183, .6), 0 0 90px rgba(0, 221, 255, .4); animation: orb-pulse 4s ease-in-out infinite; }
.dorb-globe::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .45), transparent 35%), radial-gradient(circle at 70% 80%, rgba(0, 0, 0, .35), transparent 55%); }
.dorb-lines { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .25) 0 1.5px, transparent 1.5px 26px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .14) 0 1.5px, transparent 1.5px 26px); animation: dorb-turn 3s linear infinite; }
@keyframes dorb-turn { to { background-position: 26px 0, 0 0; } }
.dorb-globe b { position: relative; z-index: 1; color: #fff; font: 800 clamp(1.4rem, 1rem + 1.4vw, 2.2rem)/1 var(--font-head); letter-spacing: .08em; text-shadow: 0 4px 18px rgba(0, 0, 0, .35); }
.dorb-orbit { position: absolute; inset: 12%; animation: orb-spin 24s linear infinite; }
.dorb-ext { position: absolute; translate: -50% -50%; }
.dorb-ext.x1 { left: 50%; top: 0; }
.dorb-ext.x2 { left: 100%; top: 50%; }
.dorb-ext.x3 { left: 50%; top: 100%; }
.dorb-ext.x4 { left: 0; top: 50%; }
.dorb-ext b { display: block; padding: 8px 16px; border-radius: 999px; color: #fff; font: 800 .95rem/1 var(--font-head); background: linear-gradient(135deg, #0049b7, #0091d9); box-shadow: 0 12px 24px -10px rgba(0, 73, 183, .7); animation: dorb-upright 24s linear infinite; }   /* cancels the orbit's rotation */
.dorb-ext.x2 b { background: linear-gradient(135deg, #f75990, #ff1d58); box-shadow: 0 12px 24px -10px rgba(255, 29, 88, .7); }
.dorb-ext.x3 b { background: linear-gradient(135deg, #a77bff, #6a3df0); box-shadow: 0 12px 24px -10px rgba(106, 61, 240, .7); }
.dorb-ext.x4 b { background: linear-gradient(135deg, #00ddff, #0091d9); box-shadow: 0 12px 24px -10px rgba(0, 170, 230, .7); }
@keyframes dorb-upright { to { transform: rotate(-360deg); } }
.dorb-bar { position: absolute; z-index: 2; left: 0; bottom: 4%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 20px 40px -18px rgba(11, 18, 48, .35); color: var(--ink); font: 700 .9rem/1 var(--font-head); animation: chip-float 5s ease-in-out infinite; }
.dorb-lock { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(16, 185, 129, .12); color: #0f9d6e; }
.dorb-url { display: inline-flex; align-items: center; }
.dorb-tick { display: inline-block; height: 1.3em; overflow: hidden; color: #ff1d58; }
.dorb-tick > span { display: flex; flex-direction: column; animation: dorb-ext 8s var(--ease) infinite; }
.dorb-tick i { height: 1.3em; line-height: 1.3em; font-style: normal; }
@keyframes dorb-ext { 0%, 20% { translate: 0 0; } 25%, 45% { translate: 0 -1.3em; } 50%, 70% { translate: 0 -2.6em; } 75%, 95% { translate: 0 -3.9em; } 100% { translate: 0 -5.2em; } }
.dorb-ok { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; background: rgba(16, 185, 129, .12); color: #0f9d6e; font-size: .74rem; animation: dorb-ping 2s ease-out infinite; }
@keyframes dorb-ping { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .45); } 100% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); } }
.dorb-badge { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #fff; box-shadow: 0 16px 32px -16px rgba(11, 18, 48, .4); color: var(--ink); font: 700 .8rem/1 var(--font-head); white-space: nowrap; animation: chip-float 4.5s ease-in-out infinite; }
.dorb-badge > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: #fff; }
.dorb-badge.b1 { top: 4%; right: 0; animation-delay: -1s; }
.dorb-badge.b2 { top: 30%; left: 0; animation-delay: -2.5s; }
.dorb-badge.b3 { bottom: 24%; right: 0; animation-delay: -3.5s; }
.dorb-badge.b3 > span { background: linear-gradient(135deg, #00ddff, #0091d9); }
/* Hosting rack art (hosting_rack()) */
.svc-subtitle { margin: 4px 0 14px; font: 800 1.15rem/1.3 var(--font-head); color: var(--ink); }
.svc-points strong { color: var(--ink); font-family: var(--font-head); }
.hrk-ic { padding: 10px !important; }
.hrk-ic .icon { display: block; color: #fff; }
.hrk-cloud { position: absolute; left: 50%; top: 17%; width: 22%; height: 9%; translate: -50% 0; border-radius: 999px; background: linear-gradient(180deg, #fff, #d6e4ff); box-shadow: 0 14px 28px -10px rgba(0, 73, 183, .55); animation: chip-float 5s ease-in-out infinite; }
.hrk-cloud::before, .hrk-cloud::after { content: ""; position: absolute; bottom: 40%; border-radius: 50%; background: #fff; }
.hrk-cloud::before { left: 18%; width: 38%; aspect-ratio: 1; }
.hrk-cloud::after { left: 42%; width: 46%; aspect-ratio: 1; }
.hrk-flow { position: absolute; left: 50%; top: 26%; width: 22%; height: 9%; translate: -50% 0; }
.hrk-flow i { position: absolute; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #00ddff; box-shadow: 0 0 10px 2px rgba(0, 221, 255, .7); animation: hrk-drop 1.8s ease-in infinite; }
.hrk-flow i:nth-child(1) { left: 22%; }
.hrk-flow i:nth-child(2) { left: 48%; background: #ff1d58; box-shadow: 0 0 10px 2px rgba(255, 29, 88, .7); animation-delay: -.6s; }
.hrk-flow i:nth-child(3) { left: 74%; animation-delay: -1.2s; }
@keyframes hrk-drop { 0% { top: 0; opacity: 0; } 20% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.hrk-rack { position: absolute; left: 31%; right: 31%; top: 36%; display: grid; gap: 8px; padding: 10px; border-radius: 14px; background: linear-gradient(180deg, #1b2a6b, #0b1230); box-shadow: 0 0 0 8px rgba(255, 255, 255, .75), 0 30px 60px -20px rgba(0, 73, 183, .6), 0 0 80px rgba(0, 221, 255, .35); }
.hrk-unit { position: relative; display: flex; align-items: center; gap: 6px; height: clamp(30px, 3.6vw, 44px); padding: 0 10px; border-radius: 8px; background: linear-gradient(180deg, #2d3f8f, #1d2b6a); overflow: hidden; }
.hrk-unit .led { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #22e3a0; box-shadow: 0 0 8px #22e3a0; animation: ind-blink 1.2s steps(1, end) calc(var(--u) * -.4s) infinite; }
.hrk-unit .led.b { background: #00ddff; box-shadow: 0 0 8px #00ddff; animation-duration: .7s; }
.hrk-act { position: relative; flex: 1; height: 4px; margin: 0 6px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.hrk-act::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: inherit; background: linear-gradient(90deg, transparent, #00ddff, #ff1d58, transparent); animation: hrk-act 1.6s linear calc(var(--u) * -.5s) infinite; }
@keyframes hrk-act { from { translate: -100% 0; } to { translate: 260% 0; } }
.hrk-slots { flex: none; width: 26%; height: 50%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 2px, transparent 2px 5px); border-radius: 2px; }
.hrk-live { gap: 12px; padding: 10px 14px; }
.hrk-live-txt { display: grid; gap: 4px; font-size: .95rem; }
.hrk-live-txt small { color: var(--muted); font: 600 .68rem/1 var(--font-body, inherit); letter-spacing: .06em; text-transform: uppercase; }
.hrk-live svg { width: 90px; height: 30px; overflow: visible; }
.hrk-live polyline { fill: none; stroke: #ff1d58; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 130; stroke-dashoffset: 130; animation: hrk-draw 4s ease-in-out infinite; }
@keyframes hrk-draw { 60%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -130; } }
/* Website design canvas art (design_canvas()). One 9s cycle: desktop → tablet → mobile; the device ticker matches. */
.dcv-win { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; flex-direction: column; width: 50%; height: 40%; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 8px rgba(255, 255, 255, .75), 0 30px 60px -20px rgba(0, 73, 183, .55), 0 0 80px rgba(0, 221, 255, .35); animation: dcv-resize 9s var(--ease) infinite; }
@keyframes dcv-resize { 0%, 28% { width: 50%; height: 40%; } 33%, 61% { width: 34%; height: 46%; } 66%, 94% { width: 22%; height: 50%; } 100% { width: 50%; height: 40%; } }
.dcv-bar { display: flex; gap: 4px; flex: none; padding: 7px 9px; background: #eef2fb; }
.dcv-bar i { width: 7px; height: 7px; border-radius: 50%; background: #ff5f57; }
.dcv-bar i:nth-child(2) { background: #febc2e; }
.dcv-bar i:nth-child(3) { background: #28c840; }
.dcv-page { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; padding: 9px 10px; }
.dcv-nav { display: flex; align-items: center; gap: 6px; }
.dcv-nav b { width: 18px; height: 8px; margin-right: auto; border-radius: 3px; background: var(--grad); }
.dcv-nav span { width: 16px; height: 4px; border-radius: 2px; background: #d6ddef; }
.dcv-hero { display: grid; gap: 5px; align-content: center; padding: 10px; border-radius: 8px; background: linear-gradient(135deg, #0049b7, #6a3df0 55%, #ff1d58); }
.dcv-hero span { width: 70%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .9); }
.dcv-hero span.s { width: 45%; background: rgba(255, 255, 255, .55); }
.dcv-hero em { width: 34px; height: 10px; margin-top: 3px; border-radius: 5px; background: #fff; animation: dcv-pop 3s ease-in-out infinite; }
@keyframes dcv-pop { 50% { scale: 1.12; box-shadow: 0 0 0 4px rgba(255, 255, 255, .3); } }
.dcv-cards { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-height: 0; overflow: hidden; }
.dcv-cards i { flex: 1 1 60px; min-height: 22px; border-radius: 6px; background: #eef2fb; border-top: 3px solid #00ddff; }
.dcv-cards i:nth-child(2) { border-top-color: #ff1d58; }
.dcv-cards i:nth-child(3) { border-top-color: #6a3df0; }
.dcv-cursor { position: absolute; z-index: 3; width: 24px; height: 24px; fill: #0b1230; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 4px 6px rgba(11, 18, 48, .35)); animation: dcv-cursor 7s ease-in-out infinite; }
@keyframes dcv-cursor {
  0%, 100% { left: 62%; top: 40%; scale: 1; }
  18% { left: 44%; top: 47%; scale: 1; } 22% { scale: .8; } 26% { left: 44%; top: 47%; scale: 1; }
  45% { left: 56%; top: 60%; scale: 1; } 49% { scale: .8; } 53% { left: 56%; top: 60%; scale: 1; }
  75% { left: 40%; top: 36%; scale: 1; } 79% { scale: .8; } 83% { left: 40%; top: 36%; scale: 1; }
}
.dcv-dev .dorb-lock { background: rgba(0, 73, 183, .1); color: var(--blue); }
.dcv-tick > span { animation: dcv-tick 9s var(--ease) infinite; }
@keyframes dcv-tick { 0%, 28% { translate: 0 0; } 33%, 61% { translate: 0 -1.3em; } 66%, 94% { translate: 0 -2.6em; } 100% { translate: 0 -3.9em; } }
.dcv-swatch > span.sw { display: flex; gap: 3px; width: auto; padding: 0 6px; border-radius: 999px; background: #f1f4fb; }
.dcv-swatch .sw i { width: 12px; height: 12px; border-radius: 50%; background: #0049b7; }
.dcv-swatch .sw i:nth-child(2) { background: #ff1d58; }
.dcv-swatch .sw i:nth-child(3) { background: #00ddff; }

/* UI/UX prototype art (ux_prototype()). Phone screens slide on the same 9s cycle as the stage ticker (.dcv-tick). */
.uxp-wire { position: absolute; left: 13%; top: 38%; display: grid; gap: 6px; width: 22%; padding: 10px; border: 2px dashed #b9c5e3; border-radius: 12px; background: rgba(255, 255, 255, .9); box-shadow: 0 16px 30px -18px rgba(0, 73, 183, .45); animation: chip-float 5s ease-in-out infinite; }
.uxp-wire i { height: 6px; border-radius: 3px; background: #d6ddef; }
.uxp-wire i.s { width: 60%; }
.uxp-wire b { height: 28px; border-radius: 6px; background: repeating-linear-gradient(45deg, #e3e8f5 0 4px, #f3f6fc 4px 8px); }
.uxp-link { position: absolute; left: 35%; top: 36%; width: 12%; height: 10%; overflow: visible; }
.uxp-link path { fill: none; stroke: #ff1d58; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.uxp-link path:first-child { stroke-dasharray: 4 5; animation: ind-flow 1s linear infinite; }
.uxp-phone { position: absolute; left: 60%; top: 50%; translate: -50% -50%; width: 29%; aspect-ratio: 9 / 18; padding: 8% 2.4% 3%; border-radius: 26px; background: #0b1230; box-shadow: 0 0 0 6px rgba(255, 255, 255, .75), 0 30px 60px -20px rgba(0, 73, 183, .6), 0 0 80px rgba(0, 221, 255, .35); }
.uxp-notch { position: absolute; left: 50%; top: 3.2%; width: 34%; height: 2.6%; translate: -50% 0; border-radius: 999px; background: #1f2b5c; }
.uxp-view { height: 100%; overflow: hidden; border-radius: 6px 6px 18px 18px; }
.uxp-screens { display: flex; width: 100%; height: 100%; animation: uxp-slide 9s var(--ease) infinite; }
.uxp-phone::before { content: ""; position: absolute; inset: 8% 2.4% 3%; z-index: -1; border-radius: 6px 6px 18px 18px; background: #fff; }
.uxp-phone { isolation: isolate; overflow: hidden; }
@keyframes uxp-slide { 0%, 28% { translate: 0 0; } 33%, 61% { translate: -100% 0; } 66%, 94% { translate: -200% 0; } 100% { translate: 0 0; } }
.uxp-scr { display: flex; flex-direction: column; gap: 7px; flex: 0 0 100%; min-width: 0; overflow: hidden; height: 100%; padding: 10px 9px; background: #fff; }
.uxp-scr > i { flex: none; height: 6px; border-radius: 3px; background: #d6ddef; }
.uxp-scr > i.s { width: 60%; }
.uxp-scr > i.u-top { flex: 3 1 0; height: auto; min-height: 0; border-radius: 10px; }
.uxp-scr > i.u-cta { width: 55%; height: 14px; border-radius: 999px; }
.uxp-scr > span { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex: 2 1 0; min-height: 0; }
.uxp-scr > span i { border-radius: 8px; }
.uxp-scr.wire > i, .uxp-scr.wire > span i { border: 1.5px dashed #b9c5e3; background: transparent; }
.uxp-scr.wire > i.u-top { background: repeating-linear-gradient(45deg, #eef1f8 0 4px, #fff 4px 8px); }
.uxp-scr.ui > i.u-top { background: linear-gradient(135deg, #0049b7, #6a3df0 55%, #ff1d58); }
.uxp-scr.ui > i { background: #c9d3ec; }
.uxp-scr.ui > i.u-cta { background: var(--grad); }
.uxp-scr.ui > span i { background: #eef2fb; border-top: 3px solid #00ddff; }
.uxp-scr.ui > span i:last-child { border-top-color: #ff1d58; }
.uxp-scr.dash { background: #f4f7fd; }
.uxp-scr.dash > i.u-ring { align-self: center; width: 52%; aspect-ratio: 1; height: auto; margin: 4px 0; border-radius: 50%; background: radial-gradient(circle, #f4f7fd 55%, transparent 56%), conic-gradient(#ff1d58 0 40%, #0049b7 0 72%, #00ddff 0); }
.uxp-scr.dash > i { background: #c9d3ec; }
.uxp-scr .bars { display: flex; align-items: flex-end; gap: 4px; flex: 2 1 0; min-height: 0; }
.uxp-scr .bars i { flex: 1; height: 40%; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #00ddff, #0049b7); animation: uxp-bar 2.4s ease-in-out infinite alternate; }
.uxp-scr .bars i:nth-child(2) { animation-delay: -.5s; background: linear-gradient(180deg, #f75990, #ff1d58); }
.uxp-scr .bars i:nth-child(3) { animation-delay: -1s; }
.uxp-scr .bars i:nth-child(4) { animation-delay: -1.5s; background: linear-gradient(180deg, #a77bff, #6a3df0); }
.uxp-scr .bars i:nth-child(5) { animation-delay: -2s; }
@keyframes uxp-bar { to { height: 100%; } }
.uxp-tap { position: absolute; left: 50%; bottom: 14%; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; border: 3px solid #ff1d58; background: rgba(255, 29, 88, .2); opacity: 0; animation: uxp-tap 9s ease-out infinite; }
@keyframes uxp-tap {
  0%, 25%, 33%, 58%, 66%, 91%, 100% { opacity: 0; scale: .4; }
  28%, 61%, 94% { opacity: 1; scale: .6; }
  32%, 65%, 98% { opacity: 0; scale: 1.5; }
}
.uxp-stage .dorb-lock { background: rgba(106, 61, 240, .1); color: #6a3df0; }

/* Website development code editor art (dev_stack()). Lines type in over the first ~45% of the 9s loop (Coding),
   the build line turns green at ~60% (Testing → Live), then everything clears for the next loop. */
.dvs-win { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; flex-direction: column; width: 54%; border-radius: 12px; overflow: hidden; background: #0b1230; box-shadow: 0 0 0 8px rgba(255, 255, 255, .75), 0 30px 60px -20px rgba(0, 73, 183, .6), 0 0 80px rgba(0, 221, 255, .35); }
.dvs-win .dcv-bar { align-items: center; background: #16204a; }
.dvs-file { margin-left: 8px; padding: 2px 8px; border-radius: 4px; background: #0b1230; color: #9fb0e0; font: 600 .62rem/1.4 ui-monospace, monospace; }
.dvs-code { display: grid; gap: 6px; padding: 10px 10px 8px 0; }
.dvs-ln { display: flex; align-items: center; gap: 8px; }
.dvs-ln b { flex: none; width: 22px; color: #4a5a8f; font: 600 .58rem/1 ui-monospace, monospace; text-align: right; }
.dvs-tk { display: flex; flex: 1; gap: 4px; clip-path: inset(0 100% 0 0); animation: dvs-type 9s steps(6, end) calc(var(--k) * .45s) infinite; }
.dvs-tk i { height: 6px; border-radius: 3px; background: #00ddff; }
.dvs-tk i.t1 { background: #f75990; }
.dvs-tk i.t2 { background: #a77bff; }
.dvs-tk i.t3 { background: #ffe27a; }
@keyframes dvs-type { 0% { clip-path: inset(0 100% 0 0); } 5%, 80% { clip-path: inset(0 0 0 0); } 85%, 100% { clip-path: inset(0 100% 0 0); } }
.dvs-term { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-top: 1px solid #1f2b5c; background: #070c22; color: #9fb0e0; font: 600 .62rem/1.2 ui-monospace, monospace; }
.dvs-term em { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(34, 227, 160, .15); color: #22e3a0; font-style: normal; opacity: 0; animation: dvs-pass 9s ease-out infinite; }
.dvs-term em .icon { width: 11px; height: 11px; stroke-width: 3; }
@keyframes dvs-pass { 0%, 58% { opacity: 0; scale: .8; } 62%, 92% { opacity: 1; scale: 1; } 97%, 100% { opacity: 0; } }
.dvs-status .dorb-lock { background: rgba(255, 29, 88, .1); color: #ff1d58; }

/* E-commerce store art (shop_store()). 9s loop: products 1–3 added at ~0.6s, 1.3s, 2s (0–28%: Add to Cart),
   checkout panel up at 33% (Checkout), payment succeeds at 66% (Order Placed), reset at 94–100%. */
.shp-win { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; flex-direction: column; width: 52%; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 8px rgba(255, 255, 255, .75), 0 30px 60px -20px rgba(0, 73, 183, .55), 0 0 80px rgba(0, 221, 255, .35); }
.shp-win .dcv-bar { position: relative; align-items: center; }
.shp-cart { position: relative; display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; border-radius: 7px; background: #fff; color: var(--blue); animation: shp-bump 9s ease-out infinite; }
.shp-cart b { position: absolute; top: -6px; right: -7px; width: 15px; height: 15px; overflow: hidden; border-radius: 50%; background: #ff1d58; color: #fff; font: 800 .55rem/15px var(--font-head); text-align: center; }
.shp-cart b > span { display: flex; flex-direction: column; animation: shp-count 9s steps(1, end) infinite; }
.shp-cart b i { height: 15px; font-style: normal; }
@keyframes shp-count { 0% { translate: 0 0; } 7% { translate: 0 -15px; } 15% { translate: 0 -30px; } 23%, 96% { translate: 0 -45px; } }
@keyframes shp-bump { 0%, 6%, 9%, 14%, 17%, 22%, 25%, 100% { scale: 1; } 7.5%, 15.5%, 23.5% { scale: 1.3; } }
.shp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.shp-prod { position: relative; display: grid; gap: 5px; padding: 6px; border: 1px solid var(--line); border-radius: 9px; }
.shp-img { height: clamp(34px, 4.6vw, 54px); border-radius: 6px; background: linear-gradient(135deg, #00ddff, #0049b7); }
.shp-prod:nth-child(2) .shp-img { background: linear-gradient(135deg, #f75990, #ff1d58); }
.shp-prod:nth-child(3) .shp-img { background: linear-gradient(135deg, #a77bff, #6a3df0); }
.shp-prod:nth-child(4) .shp-img { background: linear-gradient(135deg, #ffe27a, #ffb02e); }
.shp-prod > i { height: 5px; border-radius: 3px; background: #d6ddef; }
.shp-prod > i.s { width: 45%; background: #ff1d58; opacity: .7; }
.shp-prod em { position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: var(--blue); color: #fff; }
.shp-prod em .icon { width: 11px; height: 11px; stroke-width: 3; opacity: 0; }
.shp-prod:nth-child(-n+3) em { animation: shp-add 9s calc(var(--p) * .72s) infinite; }
.shp-prod:nth-child(-n+3) em .icon { animation: shp-tick 9s calc(var(--p) * .72s) infinite; }
@keyframes shp-add { 0%, 5% { background: var(--blue); scale: 1; } 6.5% { scale: 1.35; } 8%, 92% { background: #10b981; scale: 1; } 96%, 100% { background: var(--blue); } }
@keyframes shp-tick { 0%, 6% { opacity: 0; } 8%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
.shp-pay { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: 12px; border-radius: 12px 12px 0 0; background: #fff; box-shadow: 0 -12px 30px -12px rgba(11, 18, 48, .35); translate: 0 105%; animation: shp-pay 9s var(--ease) infinite; }
@keyframes shp-pay { 0%, 30% { translate: 0 105%; } 35%, 92% { translate: 0 0; } 97%, 100% { translate: 0 105%; } }
.shp-pay > i { height: 14px; border: 1.5px solid #d6ddef; border-radius: 6px; }
.shp-pay > i.s { width: 60%; }
.shp-paybtn { position: relative; display: grid; height: 24px; overflow: hidden; border-radius: 999px; color: #fff; font: 800 .66rem/24px var(--font-head); text-align: center; }
.shp-paybtn b { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 4px; background: var(--grad); transition: none; }
.shp-paybtn b.ok { background: #10b981; opacity: 0; animation: shp-ok 9s ease-out infinite; }
.shp-paybtn b.ok .icon { width: 12px; height: 12px; stroke-width: 3; }
@keyframes shp-ok { 0%, 64% { opacity: 0; scale: .9; } 67%, 92% { opacity: 1; scale: 1; } 96%, 100% { opacity: 0; } }
.shp-status .dorb-lock { background: rgba(16, 185, 129, .12); color: #0f9d6e; }

/* Web application dashboard art (webapp_dash()). 9s loop: rows sync in during 0–28%, KPIs fill and the active
   menu item moves through the loop, the chart line redraws every 4.5s. */
.wap-win { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; flex-direction: column; width: 56%; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 8px rgba(255, 255, 255, .75), 0 30px 60px -20px rgba(0, 73, 183, .55), 0 0 80px rgba(0, 221, 255, .35); }
.wap-body { display: flex; min-height: 0; }
.wap-side { position: relative; display: grid; align-content: start; gap: 9px; flex: none; width: 22%; padding: 10px 8px; background: #0b1230; }
.wap-side b { height: 10px; margin-bottom: 4px; border-radius: 3px; background: var(--grad); }
.wap-side i { position: relative; z-index: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .3); }
.wap-active { position: absolute; left: 4px; right: 4px; top: 29px; height: 13px; border-radius: 5px; background: rgba(0, 221, 255, .25); box-shadow: inset 3px 0 0 #00ddff; animation: wap-nav 9s var(--ease) infinite; }
@keyframes wap-nav { 0%, 22% { translate: 0 0; } 25%, 47% { translate: 0 14px; } 50%, 72% { translate: 0 28px; } 75%, 97% { translate: 0 42px; } 100% { translate: 0 0; } }
.wap-main { display: grid; gap: 8px; flex: 1; min-width: 0; padding: 10px; }
.wap-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wap-kpis span { display: grid; gap: 5px; padding: 6px; border: 1px solid var(--line); border-radius: 7px; }
.wap-kpis i { height: 4px; width: 60%; border-radius: 2px; background: #d6ddef; }
.wap-kpis em { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #0049b7, #00ddff); transform-origin: left; animation: wap-kpi 4.5s var(--ease) calc(var(--k) * .3s) infinite; }
.wap-kpis span:nth-child(2) em { background: linear-gradient(90deg, #ff1d58, #f75990); }
.wap-kpis span:nth-child(3) em { background: linear-gradient(90deg, #6a3df0, #a77bff); }
@keyframes wap-kpi { 0% { scale: .15 1; } 40%, 85% { scale: 1 1; } 100% { scale: .15 1; } }
.wap-chart { width: 100%; height: clamp(34px, 4.4vw, 52px); overflow: visible; }
.wap-chart .area { fill: rgba(0, 221, 255, .14); }
.wap-chart .line { fill: none; stroke: #0049b7; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 200; stroke-dashoffset: 200; animation: wap-line 4.5s ease-in-out infinite; }
@keyframes wap-line { 55%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -200; } }
.wap-rows { display: grid; gap: 5px; }
.wap-rows span { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 6px; background: #f4f7fd; opacity: 0; animation: wap-row 9s var(--ease) calc(var(--r) * .5s) infinite; }
.wap-rows i { height: 4px; flex: 1; border-radius: 2px; background: #d6ddef; }
.wap-rows i:first-child { flex: .6; background: #9fb0e0; }
.wap-rows em { width: 22px; height: 8px; border-radius: 999px; background: #10b981; opacity: .8; }
.wap-rows span:nth-child(2) em { background: #ffb02e; }
@keyframes wap-row { 0% { opacity: 0; translate: 12px 0; } 6%, 88% { opacity: 1; translate: 0 0; } 94%, 100% { opacity: 0; } }
.wap-status .dorb-lock { background: rgba(0, 145, 217, .12); color: #0091d9; }
.wap .dorb-badge.b2 { top: 20%; }

/* "Our … Solutions" grid under the about split */
.svc-solutions { margin-top: 56px; }
.svc-sol-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.svc-sol { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1.5px solid transparent; border-radius: 16px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(var(--line), var(--line)) border-box; color: var(--ink); font: 700 .92rem/1.3 var(--font-head); }
.svc-sol:hover { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--spin), #00ddff, #0049b7, #ff1d58, #f75990, #00ddff) border-box; animation: border-spin 3s linear infinite; box-shadow: 0 18px 34px -20px rgba(0, 73, 183, .5); }
.svc-sol-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #0049b7, #0091d9); color: #fff; box-shadow: 0 10px 20px -10px rgba(0, 73, 183, .7); animation: chip-float 4s ease-in-out calc(var(--n) * -.5s) infinite; }
.svc-sol-icon .icon { width: 20px; height: 20px; }
.svc-sol:nth-child(4n+2) .svc-sol-icon { background: linear-gradient(135deg, #f75990, #ff1d58); box-shadow: 0 10px 20px -10px rgba(255, 29, 88, .7); }
.svc-sol:nth-child(4n+3) .svc-sol-icon { background: linear-gradient(135deg, #a77bff, #6a3df0); box-shadow: 0 10px 20px -10px rgba(106, 61, 240, .7); }
.svc-sol:nth-child(4n) .svc-sol-icon { background: linear-gradient(135deg, #00ddff, #0091d9); box-shadow: 0 10px 20px -10px rgba(0, 170, 230, .7); }
.svc-sol-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }   /* 9, 6, 3 items: full rows */
.svc-sol-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }   /* 10, 5 items */
.svc-sol-grid.cols-5 .svc-sol { flex-direction: column; align-items: flex-start; }
@media (max-width: 1180px) { .svc-sol-grid.cols-5 { grid-template-columns: repeat(2, 1fr); } .svc-sol-grid.cols-5 .svc-sol { flex-direction: row; align-items: center; } }
@media (max-width: 980px) { .svc-sol-grid, .svc-sol-grid.cols-3, .svc-sol-grid.cols-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .svc-sol-grid, .svc-sol-grid.cols-3, .svc-sol-grid.cols-5 { grid-template-columns: 1fr; } }

@media (max-width: 480px) {
  .dorb-badge, .dorb-bar { font-size: .7rem; }
  .dorb-ext b { padding: 6px 11px; font-size: .8rem; }
}

/* ---------- Service pages: animated feature cards ----------
   Soft drifting glows behind the grid. Each card: a light beam sweeps its top edge (staggered by --n), the icon chip
   floats with a ping ring and cycles through the brand colours by position, a big outlined number sits in the
   corner, and on hover the border becomes a spinning gradient while a bar fills along the bottom. */
.features-sec { position: relative; overflow: hidden; isolation: isolate; }
.features-sec::before { content: ""; position: absolute; z-index: -1; inset: -20%; background: radial-gradient(circle at 20% 30%, rgba(0, 221, 255, .12), transparent 30%), radial-gradient(circle at 80% 70%, rgba(247, 89, 144, .12), transparent 30%), radial-gradient(rgba(0, 73, 183, .07) 1px, transparent 1.5px) 0 0 / 26px 26px; animation: feat-drift 16s ease-in-out infinite alternate; }
@keyframes feat-drift { to { transform: translate(4%, -3%); } }
.feature { overflow: hidden; border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(var(--line), var(--line)) border-box; }
.feature:hover { --ty: -8px; border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--spin), #00ddff, #0049b7, #ff1d58, #f75990, #00ddff) border-box; animation: border-spin 3s linear infinite; }
.js .reveal.is-visible.feature:hover { animation: border-spin 3s linear infinite; }
.feature-beam { position: absolute; top: 0; left: 0; width: 40%; height: 2px; background: linear-gradient(90deg, transparent, #00ddff, #ff1d58, transparent); animation: why-beam 5s linear calc(var(--n) * .7s) infinite; }
.feature-num { position: absolute; top: 18px; right: 22px; font: 800 2.4rem/1 var(--font-head); color: transparent; -webkit-text-stroke: 1px #d9e0ef; transition: -webkit-text-stroke-color .3s; }
.feature:hover .feature-num { -webkit-text-stroke-color: #ff1d58; }
.feature-icon { position: relative; animation: chip-float 4s ease-in-out calc(var(--n) * -.6s) infinite; }
.feature:nth-child(4n+2) .feature-icon { background: linear-gradient(135deg, #f75990, #ff1d58); box-shadow: 0 12px 24px -10px rgba(255, 29, 88, .7); }
.feature:nth-child(4n+3) .feature-icon { background: linear-gradient(135deg, #00ddff, #0091d9); box-shadow: 0 12px 24px -10px rgba(0, 170, 230, .7); }
.feature:nth-child(4n) .feature-icon { background: linear-gradient(135deg, #a77bff, #6a3df0); box-shadow: 0 12px 24px -10px rgba(106, 61, 240, .7); }
.feature-ring { position: absolute; inset: 0; border-radius: inherit; border: 2px solid currentColor; opacity: 0; animation: ripple 3s ease-out calc(var(--n) * .5s) infinite; }
.feature:hover .feature-icon { animation-play-state: paused; rotate: -8deg; scale: 1.1; }   /* rotate/scale: transform is owned by the float animation */
.feature h3 { padding-right: 52px; }
.feature-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #00ddff, #0049b7, #ff1d58); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.feature:hover .feature-bar { transform: scaleX(1); }
/* Compact feature cards: icon beside the text, smaller type, each description kept to one line (full text in the
   title tooltip). Two columns on desktop, one on phones. */
.features-sec .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.features-sec .feature { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 16px; }
.features-sec .feature-icon { flex: none; width: 42px; height: 42px; margin: 0; border-radius: 12px; }
.features-sec .feature-icon .icon { width: 20px; height: 20px; }
.features-sec .feature-text { flex: 1; min-width: 0; padding-right: 44px; }   /* room for the corner number */
.features-sec .feature h3 { margin: 0 0 2px; padding-right: 0; font-size: 1rem; }
.features-sec .feature p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .86rem; }
.features-sec .feature-num { top: 50%; right: 18px; translate: 0 -50%; font-size: 1.6rem; }
@media (max-width: 720px) {
  .features-sec .feature-grid { grid-template-columns: 1fr; }
}

/* ---------- Pricing (pricing.php) ----------
   Each card: a coloured top band (icon, name, price over floating orbs) and a white body whose features tick in one
   by one once the card is revealed. The price counts up (initCountUp in main.js). Popular card: dark, with a spinning
   gradient border. Accent colours per card come from --a1/--a2. */
.plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: stretch; padding-top: 14px; }
.plan { --a1: #0049b7; --a2: #00ddff; position: relative; display: flex; flex-direction: column; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px -30px rgba(11, 18, 48, .45); transition: translate .4s var(--ease), box-shadow .4s var(--ease); }
.plan-2 { --a1: #ff1d58; --a2: #0049b7; }
.plan-3 { --a1: #12805c; --a2: #00b8e6; }
.plan-4 { --a1: #6a3df0; --a2: #f75990; }
.plan:hover { translate: 0 -10px; box-shadow: 0 34px 50px -30px var(--a1); }
.js .plan.reveal.is-visible { transition: opacity .8s var(--ease), transform .8s var(--ease), translate .4s var(--ease), box-shadow .4s var(--ease); }

.plan-top { position: relative; overflow: hidden; isolation: isolate; padding: 28px 24px 24px; border-radius: 25px 25px 0 0; color: #fff; background: linear-gradient(140deg, var(--a1), var(--a2)); }
.plan-top::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%) 120% 0 / 250% 100% no-repeat; transition: background-position 1s var(--ease); }
.plan:hover .plan-top::after { background-position: -20% 0; }   /* light sweeps across on hover */
.plan-orbs i { position: absolute; z-index: -1; border-radius: 50%; background: rgba(255, 255, 255, .14); animation: plan-orb 7s ease-in-out infinite alternate; }
.plan-orbs i:nth-child(1) { width: 130px; height: 130px; right: -40px; top: -50px; }
.plan-orbs i:nth-child(2) { width: 70px; height: 70px; right: 40px; bottom: -30px; animation-delay: -2.5s; background: rgba(255, 255, 255, .1); }
.plan-orbs i:nth-child(3) { width: 14px; height: 14px; left: 62%; top: 34px; animation-duration: 4s; background: rgba(255, 255, 255, .5); }
@keyframes plan-orb { to { transform: translate(-14px, 12px) scale(1.12); } }
.plan-icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 16px; border-radius: 15px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3); color: #fff; backdrop-filter: blur(6px); animation: chip-float 4s ease-in-out infinite; }
.plan:hover .plan-icon { animation-play-state: paused; transform: rotate(-8deg) scale(1.08); transition: transform .4s var(--ease); }
.plan h3 { margin-bottom: 6px; color: #fff; font-size: 1.35rem; }
.plan-blurb { min-height: 4.2em; margin-bottom: 14px; color: rgba(255, 255, 255, .85); font-size: .9rem; line-height: 1.5; }
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; }
.plan-price small { color: rgba(255, 255, 255, .8); font-size: .8rem; }
.plan-price strong { font: 800 2.3rem/1 var(--font-head); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plan-note { flex-basis: 100%; color: rgba(255, 255, 255, .8); font-size: .84rem; }

.plan-body { display: flex; flex: 1; flex-direction: column; padding: 22px 24px 24px; }
.plan-features { flex: 1; margin-bottom: 22px; }
.plan-features li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 11px; color: var(--ink); font-size: .92rem; line-height: 1.45; }
.plan-tick { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: color-mix(in srgb, var(--a1) 12%, #fff); color: var(--a1); }
.plan-tick .icon { width: 13px; height: 13px; stroke-width: 3; }
.js .plan:not(.is-visible) .plan-features li { opacity: 0; }
.js .plan.is-visible .plan-features li { animation: plan-li .5s var(--ease) calc(.5s + var(--n) * .09s) both; }
.js .plan.is-visible .plan-tick { animation: plan-tick .45s cubic-bezier(.2, .9, .3, 1.6) calc(.6s + var(--n) * .09s) both; }
@keyframes plan-li { from { opacity: 0; transform: translateX(-12px); } }
@keyframes plan-tick { from { transform: scale(0); } }
.plan-btn { border-radius: 14px; }
.plan:not(.is-popular) .plan-btn:hover { background: var(--a1); }

/* Most popular: dark card, spinning gradient border, glowing badge */
.plan.is-popular { border: 2px solid transparent; background: linear-gradient(var(--navy-900), var(--navy-900)) padding-box, conic-gradient(from var(--spin), #00ddff, #0049b7, #ff1d58, #f75990, #00ddff) border-box; animation: border-spin 4s linear infinite; box-shadow: 0 36px 60px -30px rgba(255, 29, 88, .6); }
.plan.is-popular .plan-top { border-radius: 24px 24px 0 0; }
.plan.is-popular .plan-features li { color: var(--on-dark); }
.plan.is-popular .plan-tick { background: rgba(255, 29, 88, .18); color: #ff6b93; }
.plan-badge { position: absolute; top: -14px; left: 50%; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: #fff; color: #ff1d58; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transform: translateX(-50%); box-shadow: 0 8px 20px -6px rgba(255, 29, 88, .7); animation: plan-badge 2.4s ease-in-out infinite; }
.plan-badge .icon { width: 14px; height: 14px; }
.plan.is-popular .plan-top { overflow: visible; }
.plan.is-popular .plan-orbs { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
@keyframes plan-badge { 50% { box-shadow: 0 8px 26px -4px rgba(255, 29, 88, .95); transform: translateX(-50%) translateY(-2px); } }

@media (max-width: 1180px) { .plan-grid { grid-template-columns: repeat(2, 1fr); row-gap: 36px; } }
@media (max-width: 720px) { .plan-grid { grid-template-columns: 1fr; } .plan-blurb { min-height: 0; } }

/* Pricing heading: pill eyebrow, italic gradient "plan." with an underline that sweeps in on reveal */
.plan-head h2 { font-size: clamp(2.3rem, 1.4rem + 3.2vw, 3.8rem); letter-spacing: -.035em; }
.plan-head em { position: relative; display: inline-block; font: italic 700 1.08em/1 var(--font-serif); letter-spacing: -.01em; padding-right: .06em;
  background: linear-gradient(100deg, #0049b7, #ff1d58 55%, #f75990); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-head em svg { position: absolute; left: 0; right: 0; bottom: -.18em; width: 100%; height: .3em; overflow: visible; }
.plan-head em path { fill: none; stroke: #00ddff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease) .4s; }
.js .plan-head:not(.is-visible) em path { stroke-dashoffset: 200; }
.plan-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 7px 16px; border-radius: 999px; background: #eef3ff; border: 1px solid #d9e3fb; color: var(--blue); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.plan-pill .icon { color: #ff1d58; }

/* ---------- Website types: 3D flip cards (services/website-design.php) ----------
   Front = summary, back = what's included. Hover flips on desktop; .is-flipped (JS buttons) on touch/keyboard. */
.wt-sec { background: radial-gradient(60% 50% at 15% 0%, rgba(0, 73, 183, .07), transparent 70%), radial-gradient(50% 50% at 90% 100%, rgba(255, 29, 88, .07), transparent 70%), var(--surface-alt); overflow: hidden; }
.wt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
.wt-card { --a1: #0049b7; --a2: #0091d9; --glow: rgba(0, 73, 183, .55); position: relative; perspective: 1400px; animation: wt-float 6s ease-in-out calc(var(--n) * -1.5s) infinite; }
.wt-card:nth-child(2) { --a1: #f75990; --a2: #ff1d58; --glow: rgba(255, 29, 88, .5); }
.wt-card:nth-child(3) { --a1: #a77bff; --a2: #6a3df0; --glow: rgba(106, 61, 240, .5); }
.wt-card:nth-child(4) { --a1: #00ddff; --a2: #0091d9; --glow: rgba(0, 170, 230, .5); }
@keyframes wt-float { 50% { translate: 0 -8px; } }
.wt-card:hover, .wt-card.is-flipped, .wt-card:focus-within { animation-play-state: paused; }

.wt-inner { display: grid; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3, 1.3, .4, 1); }
.wt-card.is-flipped .wt-inner { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) { .wt-card:hover .wt-inner { transform: rotateY(180deg); } }

/* Both faces share one grid cell, so the card is as tall as its longer face */
.wt-face { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; padding: 30px 26px 26px; border-radius: var(--radius-lg); backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; transition: visibility 0s .4s; }
.wt-front { border: 1.5px solid var(--line); background: linear-gradient(160deg, #fff 55%, color-mix(in srgb, var(--a1) 8%, #fff)); box-shadow: var(--shadow); overflow: hidden; }
.wt-front::before { content: ""; position: absolute; top: -40%; right: -30%; width: 75%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 65%); opacity: .25; pointer-events: none; }
.wt-back { transform: rotateY(180deg); visibility: hidden; color: var(--on-dark-muted); border: 2px solid transparent; background: linear-gradient(var(--navy-900), var(--navy-900)) padding-box, conic-gradient(from var(--spin), var(--a1), var(--a2), #ff1d58, #00ddff, var(--a1)) border-box; animation: border-spin 4s linear infinite; box-shadow: 0 34px 60px -30px var(--glow); }
/* Only the face you can see is focusable / read out */
.wt-card.is-flipped .wt-front { visibility: hidden; }
.wt-card.is-flipped .wt-back { visibility: visible; }
@media (hover: hover) and (pointer: fine) {
  .wt-card:hover .wt-back { visibility: visible; }
  .wt-card:hover .wt-front { visibility: hidden; }
}
.wt-card:hover .wt-face, .wt-card.is-flipped .wt-face { transition-delay: .4s; }
.wt-card:hover .wt-back, .wt-card.is-flipped .wt-back { transition-delay: 0s; }

.wt-num { position: absolute; top: 18px; right: 22px; font: 800 3.2rem/1 var(--font-head); letter-spacing: -.04em; background: linear-gradient(180deg, color-mix(in srgb, var(--a1) 22%, transparent), transparent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wt-icon { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 22px; border-radius: 18px; background: linear-gradient(135deg, var(--a1), var(--a2)); color: #fff; box-shadow: 0 18px 30px -14px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .35); }
.wt-icon .icon { width: 28px; height: 28px; animation: chip-float 4s ease-in-out calc(var(--n) * -.6s) infinite; }
.wt-orbit { position: absolute; inset: -10px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--a1) 45%, transparent); animation: wt-orbit 9s linear infinite; }
.wt-orbit::after { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--a2); box-shadow: 0 0 10px var(--a2); }
@keyframes wt-orbit { from { transform: rotateX(62deg) rotateZ(0); } to { transform: rotateX(62deg) rotateZ(360deg); } }

/* Content floats at different depths on the back face, so it parallaxes while the card turns */
.wt-face h3 { margin: 0 0 6px; color: var(--ink); font: 800 1.28rem/1.25 var(--font-head); letter-spacing: -.02em; }
.wt-tagline { margin: 0 0 14px; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--a2); }
.wt-text { margin: 0 0 18px; font-size: .95rem; line-height: 1.65; color: var(--body); }
.wt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; }
.wt-tags li { padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; color: var(--a1); background: color-mix(in srgb, var(--a1) 9%, #fff); border: 1px solid color-mix(in srgb, var(--a1) 20%, #fff); }
.wt-flip { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding: 0; border: 0; background: none; color: var(--ink); font: 700 .9rem var(--font-head); cursor: pointer; }
.wt-flip .icon { transition: transform .3s var(--ease); }
.wt-flip:hover .icon { transform: translateX(4px); }

.wt-back h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; color: #fff; transform: translateZ(50px); }
.wt-back h3 .icon { color: var(--a2); filter: drop-shadow(0 0 6px var(--a2)); }
.wt-points { display: grid; gap: 11px; margin: 0 0 18px; padding: 0; list-style: none; transform: translateZ(30px); }
.wt-points li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.45; color: var(--on-dark); }
.wt-points .svc-tick { width: 20px; height: 20px; background: linear-gradient(135deg, var(--a1), var(--a2)); }
.wt-points .svc-tick .icon { width: 11px; height: 11px; }
.wt-best { margin: 0 0 20px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); font-size: .86rem; line-height: 1.5; transform: translateZ(20px); }
.wt-best strong { color: #fff; }
.wt-actions { display: flex; align-items: center; gap: 10px; margin-top: auto; transform: translateZ(40px); }
.wt-cta { flex: 1; justify-content: center; background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 14px 28px -12px var(--glow); }
.wt-cta:hover { background: linear-gradient(135deg, var(--a2), var(--a1)); }
.wt-flip-back { display: grid; place-items: center; flex: none; width: 46px; height: 46px; margin: 0; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.wt-flip-back:hover { background: rgba(255, 255, 255, .16); }
.wt-flip-back:hover .icon { transform: translateX(-3px); }
@media (hover: hover) and (pointer: fine) { .wt-flip-back { display: none; } }   /* moving the mouse away flips it back */

@media (max-width: 1180px) { .wt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .wt-grid { grid-template-columns: 1fr; } .wt-face { padding: 26px 22px 22px; } }

/* Reduced motion: no flip or float, the faces cross-fade instead */
@media (prefers-reduced-motion: reduce) {
  .wt-card { animation: none; }
  .wt-card .wt-inner, .wt-card:hover .wt-inner, .wt-back { transform: none !important; }
  .wt-back { opacity: 0; }
  .wt-card.is-flipped .wt-back { opacity: 1; }
  .wt-card.is-flipped .wt-front { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .wt-card:hover .wt-back { opacity: 1; }
  .wt-card:hover .wt-front { opacity: 0; }
}

/* ---------- About page: "Who We Are" pills + 3D service orbit ----------
   .ao-o1 is a ring tilted back in 3D and spinning; each .ao-slot sits at --a around it and its .ao-chip runs the
   inverse rotation (same duration) so the label always faces the viewer. The logo badge is three stacked layers. */
.ab-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 30px; padding: 0; list-style: none; }
.ab-pills li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--ink); font-size: .88rem; font-weight: 600; }
.ab-pills .icon { color: #fff; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--grad); stroke-width: 3; }

.ao-scene { position: relative; aspect-ratio: 1; container-type: inline-size; perspective: 1400px; }
.ao-stage { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); }
.ao-glow { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(0, 221, 255, .28), rgba(247, 89, 144, .18) 45%, transparent 70%); filter: blur(24px); animation: a3-glow 7s ease-in-out infinite alternate; }

.ao-orbit { position: absolute; left: 50%; top: 50%; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); transform-style: preserve-3d; animation: ao-spin var(--t) linear infinite; }
.ao-o1 { --d: 82cqw; --t: 26s; }
.ao-o2 { --d: 58cqw; --t: 18s; animation-direction: reverse; }
@keyframes ao-spin { from { transform: rotateX(62deg) rotateZ(0deg); } to { transform: rotateX(62deg) rotateZ(360deg); } }
.ao-path { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(0, 73, 183, .22); }
.ao-o1 .ao-path { border: 2px solid transparent; background: linear-gradient(var(--surface-alt), var(--surface-alt)) padding-box, conic-gradient(from 0deg, rgba(0, 221, 255, .7), rgba(0, 73, 183, .15), rgba(255, 29, 88, .7), rgba(0, 73, 183, .15), rgba(0, 221, 255, .7)) border-box; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); }
.ao-slot { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateZ(var(--a)) translateX(calc(var(--d) / 2)) rotateZ(calc(var(--a) * -1)); }
.ao-chip { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 1.4cqw; padding: 1.4cqw 2.4cqw 1.4cqw 1.4cqw; border-radius: 99px; background: rgba(255, 255, 255, .95); border: 1px solid var(--line); box-shadow: 0 2cqw 4cqw -1.6cqw rgba(11, 18, 48, .35); color: var(--ink); font: 700 max(11px, 2.5cqw)/1 var(--font-head); white-space: nowrap; translate: -50% -50%; animation: ao-face 26s linear infinite; }
@keyframes ao-face { from { transform: rotateZ(0deg) rotateX(-62deg); } to { transform: rotateZ(-360deg) rotateX(-62deg); } }
.ao-chip-icon { display: grid; place-items: center; width: 6cqw; height: 6cqw; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #3d7bff, #0049b7); }
.ao-chip-icon .icon { width: 55%; height: 55%; }
.ao-slot:nth-of-type(6n+2) .ao-chip-icon { background: linear-gradient(135deg, #f75990, #ff1d58); }
.ao-slot:nth-of-type(6n+3) .ao-chip-icon { background: linear-gradient(135deg, #a77bff, #6a3df0); }
.ao-slot:nth-of-type(6n+4) .ao-chip-icon { background: linear-gradient(135deg, #00ddff, #0091d9); }
.ao-slot:nth-of-type(6n+5) .ao-chip-icon { background: linear-gradient(135deg, #10b981, #00ddff); }
.ao-slot:nth-of-type(6n) .ao-chip-icon { background: linear-gradient(135deg, #ffb02e, #ff1d58); }

/* Logo badge: three stacked layers give it thickness as it turns */
.ao-core { position: absolute; left: 50%; top: 50%; width: 26cqw; height: 26cqw; margin: -13cqw 0 0 -13cqw; transform-style: preserve-3d; animation: ao-core 8s ease-in-out infinite alternate; }
@keyframes ao-core { from { transform: translateY(-1.5cqw) rotateY(-24deg) rotateX(8deg); } to { transform: translateY(1.5cqw) rotateY(24deg) rotateX(-4deg); } }
.ao-layer { position: absolute; inset: 0; border-radius: 26%; }
.ao-layer.l3 { background: #0b1230; transform: translateZ(-3cqw); box-shadow: 0 4cqw 8cqw -2cqw rgba(11, 18, 48, .55); }
.ao-layer.l2 { background: linear-gradient(135deg, #003a92, #c4164a); transform: translateZ(-1.5cqw); }
.ao-layer.l1 { display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #0049b7 0%, #ff1d58 60%, #f75990 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 1.4cqw 2cqw rgba(255, 255, 255, .25), 0 0 8cqw rgba(255, 29, 88, .35); overflow: hidden; }
.ao-layer.l1 .icon { width: 50%; height: 50%; stroke-width: 2.4; filter: drop-shadow(0 .6cqw 1cqw rgba(0, 0, 0, .3)); }
.ao-layer.l1::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .45) 48%, transparent 60%); background-size: 250% 100%; animation: ao-sheen 4.5s ease-in-out infinite; }
@keyframes ao-sheen { 0%, 40% { background-position: 120% 0; } 80%, 100% { background-position: -120% 0; } }

.ao-badge { position: absolute; display: inline-flex; align-items: center; gap: 1.2cqw; padding: 1.6cqw 2.4cqw; border-radius: 99px; background: var(--navy-900); color: #fff; font: 700 max(11px, 2.3cqw)/1 var(--font-head); white-space: nowrap; box-shadow: 0 2cqw 4cqw -1.6cqw rgba(11, 18, 48, .6); animation: chip-float 5s ease-in-out infinite; }
.ao-badge .icon { width: max(14px, 3cqw); height: max(14px, 3cqw); color: #00ddff; }
.ao-badge.b1 { left: 2%; top: 6%; }
.ao-badge.b2 { right: 2%; bottom: 6%; animation-delay: -2.5s; } .ao-badge.b2 .icon { color: #f75990; }
@media (max-width: 980px) { .ao-scene { max-width: 540px; width: 100%; margin: 0 auto; } }

/* ---------- About page: Mission / Vision / Values / Promise — 3D stacked cards ----------
   Two tinted plates sit behind each card and fan out in 3D on hover; the card itself tilts toward the pointer
   (data-tilt-card) and its icon badge pops forward on translateZ. */
.mv-sec { background: radial-gradient(55% 45% at 10% 0%, rgba(0, 73, 183, .07), transparent 70%), radial-gradient(50% 45% at 95% 100%, rgba(255, 29, 88, .07), transparent 70%), var(--surface-alt); overflow: hidden; }
.mv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 28px; padding: 6px 14px 14px 0; }
.mv-card { --c1: #0049b7; --c2: #00ddff; position: relative; perspective: 1200px; }
.mv-card:nth-child(2) { --c1: #ff1d58; --c2: #f75990; }
.mv-card:nth-child(3) { --c1: #6a3df0; --c2: #a77bff; }
.mv-card:nth-child(4) { --c1: #0091d9; --c2: #10b981; }

.mv-plate { position: absolute; inset: 0; border-radius: 26px; transition: transform .6s cubic-bezier(.3, 1.4, .4, 1), opacity .4s; }
.mv-plate.p1 { background: linear-gradient(135deg, var(--c1), var(--c2)); opacity: .5; transform: translate(8px, 8px) rotate(1.5deg); }
.mv-plate.p2 { background: linear-gradient(135deg, var(--c2), var(--c1)); opacity: .22; transform: translate(16px, 16px) rotate(3deg); }
.mv-card:hover .mv-plate.p1 { opacity: .65; transform: translate(14px, 12px) rotate(4deg); }
.mv-card:hover .mv-plate.p2 { opacity: .35; transform: translate(26px, 22px) rotate(7deg); }

.mv-body { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; padding: 30px 26px 28px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 48px -28px rgba(11, 18, 48, .35); overflow: hidden; transform-style: preserve-3d; }
.mv-body:hover { box-shadow: 0 36px 60px -30px color-mix(in srgb, var(--c1) 60%, transparent); border-color: color-mix(in srgb, var(--c1) 30%, var(--line)); }
.mv-mark { position: absolute; right: -26px; bottom: -26px; color: var(--c1); opacity: .06; transition: transform .8s var(--ease), opacity .4s; pointer-events: none; }
.mv-mark .icon { width: 160px; height: 160px; stroke-width: 1.4; }
.mv-card:hover .mv-mark { opacity: .12; transform: rotate(-14deg) scale(1.1); }

.mv-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
.mv-icon { position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 16px 28px -12px var(--c1), inset 0 1px 0 rgba(255, 255, 255, .4); transform: translateZ(30px); animation: mv-bob 4.5s ease-in-out calc(var(--n) * -.8s) infinite; }
.mv-icon .icon { position: relative; width: 28px; height: 28px; }
.mv-icon-back { position: absolute; inset: 0; border-radius: inherit; background: inherit; opacity: .35; transform: translate(7px, 7px); z-index: -1; filter: blur(.5px); }
@keyframes mv-bob { 50% { transform: translateZ(30px) translateY(-6px) rotate(-4deg); } }
.mv-num { font: 800 2.8rem/1 var(--font-head); letter-spacing: -.04em; background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 30%, transparent), transparent); -webkit-background-clip: text; background-clip: text; color: transparent; }

.mv-tag { margin: 0 0 6px; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c1); }
.mv-body h3 { margin: 0 0 12px; color: var(--ink); font: 800 1.35rem/1.2 var(--font-head); letter-spacing: -.02em; }
.mv-text { margin: 0 0 20px; font-size: .94rem; line-height: 1.65; color: var(--body); }
.mv-points { display: grid; gap: 10px; margin: auto 0 0; padding: 18px 0 0; list-style: none; border-top: 1px dashed var(--line); }
.mv-points li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; font-weight: 600; line-height: 1.4; color: var(--ink); }
.mv-tick { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; }
.mv-tick .icon { width: 11px; height: 11px; stroke-width: 3; }
.mv-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: linear-gradient(90deg, var(--c1), var(--c2)); transform: scaleX(.18); transform-origin: left; transition: transform .6s var(--ease); }
.mv-card:hover .mv-bar { transform: scaleX(1); }

@media (max-width: 1180px) { .mv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .mv-grid { grid-template-columns: 1fr; gap: 30px; } }