:root {
  color-scheme: light;
  --bg: #f7f9fc;
  --bg-soft: #eef3fa;
  --surface: rgba(255,255,255,.78);
  --surface-solid: #ffffff;
  --text: #111827;
  --text-soft: #526074;
  --text-faint: #5f6b7d;
  --border: rgba(30,55,90,.11);
  --blue: #1768f5;
  --blue-strong: #0755df;
  --blue-soft: #e8f0ff;
  --hero-canvas: #e6eeff;
  --footer: #0a1730;
  --shadow: 0 18px 55px rgba(24, 58, 116, .075);
  --shadow-hover: 0 28px 70px rgba(24, 58, 116, .15);
  --ease: cubic-bezier(.2,.75,.25,1);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #080e1a;
  --bg-soft: #0c1525;
  --surface: rgba(18,29,49,.82);
  --surface-solid: #111c2f;
  --text: #edf3ff;
  --text-soft: #b0bdd1;
  --text-faint: #8292ad;
  --border: rgba(168,194,237,.13);
  --blue: #5b9cff;
  --blue-strong: #85b5ff;
  --blue-soft: #132846;
  --hero-canvas: #101d33;
  --footer: #050a13;
  --shadow: 0 18px 55px rgba(0,0,0,.16);
  --shadow-hover: 0 28px 70px rgba(0,0,0,.28);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, "Noto Sans Lao", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .3s ease, color .3s ease; }
html[lang="lo"] body { font-family: "Noto Sans Lao", Inter, sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
svg { display: block; }
.site-shell { overflow: clip; min-height: 100vh; }
.container { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }
.section-pad { padding-block: 118px; }
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid transparent; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: background .25s ease, border-color .25s ease; }
.site-header.scrolled { border-color: var(--border); }
.nav { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; transition: opacity .2s ease, transform .2s ease; }
.brand:hover { opacity: .88; transform: translateY(-1px); }
.brand-logo { height: 36px; width: auto; max-height: 36px; object-fit: contain; display: block; }
.brand .logo-dark { display: none; }
.brand .logo-light { display: block; }
html[data-theme="dark"] .brand .logo-light { display: none; }
html[data-theme="dark"] .brand .logo-dark { display: block; }
.nav-links { display: flex; align-items: center; gap: clamp(20px, 2.8vw, 35px); margin-left: auto; }
.nav-links a { color: var(--text-soft); font-size: 12px; font-weight: 600; letter-spacing: -.1px; transition: color .2s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--blue); }
.nav-actions { display: flex; align-items: center; gap: 13px; }
.language-toggle { border: 0; background: transparent; padding: 10px 8px; color: var(--text-faint); font-size: 11px; letter-spacing: .7px; font-weight: 800; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; }
.lang-label { transition: color .2s ease; }.lang-label.active { color: var(--text); }.lang-divider { color: var(--text-faint); opacity: .45; }
.theme-toggle { width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--text); cursor: pointer; transition: background .2s ease, transform .2s ease, border-color .2s ease; }
.theme-toggle:hover { transform: rotate(-8deg); border-color: var(--blue); }
.theme-toggle svg { width: 18px; height: 18px; }.sun-icon { display: none; } html[data-theme="dark"] .moon-icon { display: none; } html[data-theme="dark"] .sun-icon { display: block; }
.nav-cta { display: inline-flex; align-items: center; gap: 13px; background: var(--text); color: var(--bg); padding: 10px 13px 10px 17px; border-radius: 100px; font-size: 11px; font-weight: 700; transition: transform .25s var(--ease), background .25s ease; white-space: nowrap; }
.nav-cta:hover { transform: translateY(-2px); background: var(--blue); color: white; }
.nav-cta svg { width: 17px; height: 17px; }
.menu-toggle { display: none; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer; }
.menu-toggle span { display: block; height: 1.5px; width: 18px; background: currentColor; border-radius: 4px; transition: transform .2s ease; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.hero { padding-top: 95px; padding-bottom: 104px; min-height: 650px; position: relative; display: flex; align-items: center; isolation: isolate; }
.hero-glow { position: absolute; z-index: -1; pointer-events: none; width: 720px; height: 580px; right: -85px; top: -10px; background: radial-gradient(ellipse at center, rgba(89,145,255,.13), rgba(89,145,255,.035) 47%, transparent 70%); filter: blur(5px); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0,1.02fr) minmax(420px,.98fr); align-items: center; gap: 30px; }
.hero-copy { position: relative; z-index: 2; padding-block: 25px; }
.hero-title { margin: 0; display: flex; flex-direction: column; gap: 0; font-size: clamp(49px, 5.25vw, 72px); line-height: 1.055; font-weight: 700; letter-spacing: -.071em; max-width: 670px; }
.title-blue { color: var(--blue); }
.hero-description { margin: 26px 0 0; max-width: 475px; color: var(--text-soft); font-size: 16px; line-height: 1.85; letter-spacing: -.2px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; margin-top: 32px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; border-radius: 99px; padding: 14px 18px 14px 22px; font-size: 12px; font-weight: 700; transition: transform .25s var(--ease), box-shadow .25s ease, background .2s ease; }
.button svg { width: 18px; height: 18px; }.button:hover { transform: translateY(-3px); }
.button-primary { color: #fff; background: var(--blue); box-shadow: 0 10px 25px rgba(23,104,245,.23); }.button-primary:hover { background: var(--blue-strong); box-shadow: 0 15px 32px rgba(23,104,245,.28); }
.text-link { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: var(--text-soft); transition: color .2s ease; }.text-link:hover { color: var(--blue); }.text-link svg { width: 17px; height: 17px; color: var(--blue); }
.hero-proof { margin-top: 51px; display: flex; align-items: center; gap: 13px; color: var(--text-faint); font-size: 10px; font-weight: 600; letter-spacing: .25px; }.hero-proof p { margin: 0; }.proof-line { width: 28px; height: 1px; background: var(--border); }
@keyframes hero-fade-up {
  0% {
    opacity: 0;
    translate: 0 28px;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
.hero-fade {
  opacity: 0;
  animation: hero-fade-up 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--fade-order, 1) * 115ms - 35ms);
  will-change: opacity, translate;
}
.hero-line-1, .hero-line-2 { display: block; }
.hero-visual { height: 510px; position: relative; display: grid; place-items: center; min-width: 0; isolation: isolate; animation: hero-fade-up 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both; will-change: opacity, translate; }
.hero-visual::before { content: ""; position: absolute; z-index: 0; width: 85%; height: 85%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(66,137,255,.18), rgba(73,137,250,.05) 50%, transparent 70%); filter: blur(25px); pointer-events: none; animation: glow-breathe 6.5s ease-in-out infinite alternate; }
.visual-grid-bg { pointer-events: none; position: absolute; z-index: 0; inset: 5%; background-image: linear-gradient(rgba(65,122,226,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(65,122,226,.12) 1px, transparent 1px); background-size: 30px 30px; mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%); opacity: .55; }
.hero-stack-wrap { position: absolute; z-index: 1; width: 300px; height: 300px; display: flex; align-items: center; justify-content: center; perspective: 1100px; cursor: pointer; }
.hero-stack-inner { width: 210px; height: 210px; position: relative; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-45deg); will-change: transform; transition: transform .22s cubic-bezier(.2,0,0,1); animation: stack-float 6s ease-in-out infinite; }
.stack-plate { position: absolute; inset: 0; border-radius: 17px; background: rgba(10,24,52,.82); border: 1.5px solid rgba(56,189,248,.8); box-shadow: 0 0 25px rgba(56,189,248,.4), inset 0 0 16px rgba(56,189,248,.2), 0 20px 40px rgba(0,0,0,.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: flex; flex-direction: column; justify-content: space-between; padding: 13px; box-sizing: border-box; transition: transform .45s cubic-bezier(.34,1.56,.64,1), border-color .3s ease, box-shadow .3s ease; }
html[data-theme="light"] .stack-plate { background: rgba(255,255,255,.88); border-color: rgba(37,99,235,.55); box-shadow: 0 0 20px rgba(37,99,235,.2), inset 0 0 12px rgba(37,99,235,.1), 0 18px 36px rgba(18,65,150,.14); }
.plate-bottom { transform: translateZ(-56px); background: rgba(8,18,40,.88); }
html[data-theme="light"] .plate-bottom { background: rgba(240,246,255,.9); }
.plate-middle { transform: translateZ(0); background: rgba(10,24,52,.82); }
html[data-theme="light"] .plate-middle { background: rgba(248,251,255,.9); }
.plate-top { transform: translateZ(56px); border-color: rgba(56,189,248,.95); background: rgba(14,32,68,.78); box-shadow: 0 0 30px rgba(56,189,248,.55), inset 0 0 20px rgba(56,189,248,.28), 0 25px 45px rgba(0,0,0,.55); }
html[data-theme="light"] .plate-top { background: rgba(255,255,255,.94); border-color: rgba(37,99,235,.75); box-shadow: 0 0 24px rgba(37,99,235,.25), inset 0 0 14px rgba(37,99,235,.15), 0 22px 42px rgba(18,65,150,.16); }
.hero-stack-wrap:hover .plate-top, .hero-visual.stack-expanded .plate-top { transform: translateZ(84px); box-shadow: 0 0 35px rgba(56,189,248,.7), inset 0 0 22px rgba(56,189,248,.35), 0 30px 50px rgba(0,0,0,.6); }
.hero-stack-wrap:hover .plate-bottom, .hero-visual.stack-expanded .plate-bottom { transform: translateZ(-84px); }
.stack-conduit { position: absolute; width: 2px; height: 112px; background: linear-gradient(180deg, rgba(56,189,248,.85), rgba(56,189,248,.25)); box-shadow: 0 0 8px rgba(56,189,248,.6); transform-style: preserve-3d; pointer-events: none; transition: height .45s cubic-bezier(.34,1.56,.64,1), transform .45s cubic-bezier(.34,1.56,.64,1); }
.conduit-tl { left: 8px; top: 8px; transform: translateZ(-56px); }
.conduit-tr { right: 8px; top: 8px; transform: translateZ(-56px); }
.conduit-bl { left: 8px; bottom: 8px; transform: translateZ(-56px); }
.conduit-br { right: 8px; bottom: 8px; transform: translateZ(-56px); }
.hero-stack-wrap:hover .stack-conduit, .hero-visual.stack-expanded .stack-conduit { height: 168px; transform: translateZ(-84px); }
.plate-tag { font-size: 9px; font-weight: 700; color: #60a5fa; letter-spacing: .4px; display: flex; align-items: center; gap: 5px; text-shadow: 0 0 8px rgba(96,165,250,.5); }
html[data-theme="light"] .plate-tag { color: var(--blue); text-shadow: none; }
.plate-db-nodes { display: flex; gap: 4px; align-items: center; }
.plate-db-nodes i { width: 20px; height: 11px; border-radius: 3px; background: rgba(30,90,220,.4); border: 1px solid rgba(56,189,248,.6); box-shadow: 0 0 6px rgba(56,189,248,.3); position: relative; }
.plate-db-nodes i::after { content: ""; position: absolute; right: 2.5px; top: 50%; transform: translateY(-50%); width: 3px; height: 3px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 4px #22c55e; }
.plate-code-chip { width: 36px; height: 23px; border-radius: 6px; background: rgba(20,70,180,.35); border: 1.5px solid #38bdf8; box-shadow: 0 0 10px rgba(56,189,248,.4); color: #38bdf8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; text-shadow: 0 0 8px #38bdf8; }
.plate-window-dots { display: flex; gap: 5px; }
.plate-window-dots i { width: 6.5px; height: 6.5px; border-radius: 50%; }
.plate-window-dots i:nth-child(1) { background: #ff5f56; box-shadow: 0 0 6px #ff5f56; }
.plate-window-dots i:nth-child(2) { background: #ffbd2e; box-shadow: 0 0 6px #ffbd2e; }
.plate-window-dots i:nth-child(3) { background: #27c93f; box-shadow: 0 0 6px #27c93f; }
.plate-ui-bar { height: 17px; border-radius: 5px; background: linear-gradient(90deg, #00f2fe 0%, #4facfe 100%); box-shadow: 0 0 15px rgba(0,242,254,.65); margin-top: 7px; }
.plate-ui-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 7px; }
.plate-ui-grid span { height: 40px; border-radius: 5px; background: rgba(56,189,248,.12); border: 1px solid rgba(56,189,248,.45); box-shadow: inset 0 0 10px rgba(56,189,248,.15); position: relative; overflow: hidden; }
.plate-ui-grid span::after { content: ""; position: absolute; left: 6px; top: 6px; width: 55%; height: 4px; border-radius: 2px; background: rgba(56,189,248,.5); }
.float-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px 13px; background: var(--surface); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid color-mix(in srgb, var(--border), var(--blue) 12%); border-radius: 14px; box-shadow: var(--shadow); }
.float-card strong { display: block; font-size: 11px; font-weight: 700; line-height: 1.5; }.float-card small { display: block; margin-top: 2px; color: var(--text-faint); font-size: 10px; line-height: 1.4; white-space: nowrap; }
.float-card-top { top: 86px; right: -2px; animation: hero-fade-up 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.52s both, float-y 5.5s ease-in-out 1.37s infinite; }
.float-card-bottom { left: 4px; bottom: 88px; animation: hero-fade-up 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.64s both, float-y 5.5s ease-in-out -1.15s infinite; }
.float-icon { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; }.code-icon { color: #2874f7; background: rgba(45,117,255,.11); font-size: 11px; font-weight: 800; letter-spacing: -1px; }.pulse-icon { background: rgba(54,198,146,.13); }.pulse-icon span { width: 8px; height: 8px; background: #26ba87; border-radius: 50%; box-shadow: 0 0 0 5px rgba(38,186,135,.14); }
.mini-check { color: #19b781; font-size: 11px; margin-left: 4px; }.visual-caption { position: absolute; right: 18px; bottom: 30px; z-index: 3; display: flex; gap: 8px; align-items: center; color: var(--text-faint); font-size: 10.5px; letter-spacing: .1px; animation: hero-fade-up 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.76s both; }
.scroll-cue { position: absolute; left: 50%; bottom: 20px; width: 23px; height: 36px; border: 1px solid var(--border); border-radius: 20px; display: flex; justify-content: center; padding-top: 8px; opacity: .8; }.scroll-cue span { width: 3px; height: 7px; background: var(--blue); border-radius: 5px; animation: scroll-down 1.8s ease-in-out infinite; }
.intro-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-soft); }
.intro-strip-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block: 16px; }
.strip-headline-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; color: var(--blue); white-space: nowrap; }
.strip-pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent); }
.tech-chips-track { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tech-chip { padding: 5px 12px; font-size: 11px; font-weight: 600; color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; transition: border-color .25s ease, color .25s ease, transform .25s var(--ease), box-shadow .25s ease; }
.tech-chip:hover { border-color: color-mix(in srgb, var(--blue) 50%, var(--border)); color: var(--text); transform: translateY(-1.5px); box-shadow: 0 4px 12px rgba(18,58,117,.08); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-bottom: 47px; }.section-kicker { margin: 0 0 15px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }.section-heading h2, .roadmap-heading h2, .approach-intro h2, .faq-intro h2 { margin: 0; font-size: clamp(35px, 4.1vw, 50px); line-height: 1.13; font-weight: 650; letter-spacing: -.058em; }.muted-heading { color: var(--text-faint); }.section-lead { width: min(375px, 42%); color: var(--text-soft); font-size: 13px; line-height: 1.85; margin: 0 0 5px; }
.services-section, .stack-section { padding-top: 125px; padding-bottom: 132px; }
.services-grid, .stack-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }
.service-card, .stack-card { padding: 25px 25px 26px; position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 19px; min-height: 380px; display: flex; flex-direction: column; align-items: start; box-shadow: 0 10px 30px rgba(18,58,117,.018); cursor: pointer; isolation: isolate; will-change: transform, box-shadow; transition: transform .4s var(--ease), box-shadow .4s ease, border-color .35s ease; background-image: radial-gradient(450px circle at var(--mouse-x, -999px) var(--mouse-y, -999px), rgba(36,103,232,.07), transparent 75%); }
.service-card:hover, .service-card.reveal-pending:hover, .service-card.is-visible:hover,
.stack-card:hover, .stack-card.reveal-pending:hover, .stack-card.is-visible:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--blue) 38%, var(--border)); }
.service-card.reveal-pending, .stack-card.reveal-pending { transition: transform .4s var(--ease), box-shadow .4s ease, border-color .35s ease, opacity .72s var(--ease), translate .72s var(--ease); }
.service-card-top, .stack-card-top { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }.service-number, .stack-number { color: var(--text-faint); font-size: 11px; font-weight: 800; letter-spacing: .6px; }.service-icon, .stack-icon { color: var(--blue); width: 49px; height: 49px; display: grid; place-items: center; border-radius: 15px; background: var(--blue-soft); transition: transform .4s var(--ease), background .3s ease; }.service-icon svg, .stack-icon svg { width: 32px; height: 32px; }
.service-card:hover .service-icon, .stack-card:hover .stack-icon { transform: translateY(-2px); }
.service-card h3, .stack-card h3 { margin: 0 0 10px; font-size: 17px; letter-spacing: -.5px; font-weight: 700; }.service-card p, .stack-card p { font-size: 12px; line-height: 1.85; margin: 0; color: var(--text-soft); max-width: 300px; }
.service-checklist, .stack-checklist { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.service-checklist li, .stack-checklist li { display: flex; align-items: flex-start; gap: 9px; font-size: 11.5px; line-height: 1.55; color: var(--text-soft); }
.service-checklist svg, .stack-checklist svg { width: 14px; height: 14px; color: var(--blue); flex: 0 0 auto; margin-top: 2px; }
.service-foot, .stack-foot { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); }
.service-timeline, .stack-focus { font-size: 10.5px; font-weight: 700; letter-spacing: .2px; }
.service-timeline { color: var(--text-faint); }
.stack-focus { color: var(--blue); }
.tag-row,.project-tags,.roadmap-tags { display: flex; gap: 6px; flex-wrap: wrap; }.tag-row { margin-top: 16px; margin-bottom: 0; }.tag-row span,.project-tags span,.roadmap-tags span { border: 1px solid var(--border); color: var(--text-faint); padding: 4px 8px; border-radius: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .1px; }.card-link { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--blue); transition: color .25s ease, background .25s ease, border-color .25s ease, transform .35s var(--ease); flex: 0 0 auto; }.card-link svg { width: 17px; height: 17px; }
.service-card:hover .card-link, .card-link:hover { background: var(--blue); color: #fff; border-color: var(--blue); transform: translate(2px,-2px); }
.work-section { padding-top: 105px; padding-bottom: 135px; background: var(--bg-soft); border-block: 1px solid var(--border); }.projects-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 27px; }.project-card { min-width: 0; }.project-art { height: 310px; position: relative; display: block; overflow: hidden; border-radius: 19px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(18,58,117,.04); isolation: isolate; will-change: transform, box-shadow; transition: transform .4s var(--ease), box-shadow .4s ease, border-color .35s ease; }.project-art:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--blue) 40%, var(--border)); }
.project-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; will-change: transform; transition: transform .5s var(--ease); }
.project-art:hover .project-img { transform: scale(1.035); }
.project-art-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,14,26,0.01) 0%, rgba(8,14,26,0.12) 60%, rgba(8,14,26,0.68) 100%); pointer-events: none; transition: opacity .35s ease; }
.project-art:hover .project-art-overlay { opacity: .9; }
.art-caption { position: absolute; z-index: 3; left: 18px; right: 18px; bottom: 16px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.art-caption > span:first-child { background: rgba(10, 18, 34, 0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #ffffff; padding: 6px 13px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .2px; border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
.arrow-circle { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(10, 18, 34, 0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.18); color: #ffffff; font-size: 15px; box-shadow: 0 4px 14px rgba(0,0,0,0.25); transition: transform .25s var(--ease), background .2s ease, border-color .2s ease, color .2s ease; }
.project-art:hover .arrow-circle { transform: translate(2px, -2px); background: var(--blue); border-color: var(--blue); color: #ffffff; }
.project-info { padding: 22px 3px 0; }.project-meta { display: flex; align-items: center; justify-content: space-between; color: var(--text-faint); font-size: 10.5px; font-weight: 700; letter-spacing: .6px; }.project-status { display: inline-flex; align-items: center; gap: 7px; color: var(--text-soft); }.project-status > span:first-child { width: 5px; height: 5px; border-radius: 50%; background: #21bd85; }.project-type { opacity: 1; }.project-info h3 { margin: 10px 0 6px; font-size: 23px; line-height: 1.2; letter-spacing: -.9px; font-weight: 700; }
.project-highlights { display: flex; gap: 6px; flex-wrap: wrap; margin: 9px 0 12px; }
.highlight-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; color: var(--text-soft); padding: 3px 8px; background: color-mix(in srgb, var(--blue) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--border)); border-radius: 6px; letter-spacing: .2px; }
.highlight-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--blue); }
.project-info > p { color: var(--text-soft); font-size: 12px; line-height: 1.85; max-width: 470px; margin: 0; }.project-tags { margin-top: 15px; }.project-tags span { font-size: 10.5px; }.project-link { margin-top: 22px; display: inline-flex; align-items: center; gap: 9px; color: var(--blue); font-size: 11px; font-weight: 700; }.project-link svg { width: 15px; height: 15px; transition: transform .2s ease; }.project-link:hover svg { transform: translate(2px,-2px); }
.roadmap-section { padding-block: 132px; }.roadmap-wrap { display: grid; grid-template-columns: .74fr 1.26fr; align-items: start; gap: 72px; }.roadmap-heading { position: sticky; top: 125px; }.roadmap-heading > p:not(.section-kicker) { max-width: 340px; color: var(--text-soft); font-size: 13px; line-height: 1.9; margin: 24px 0 0; }.roadmap-legend { display: flex; align-items: center; gap: 8px; margin-top: 31px; font-size: 10.5px; color: var(--text-faint); font-weight: 600; }.legend-dot { width: 6px; height: 6px; border-radius: 50%; background: #9aa8bc; }
.roadmap-timeline { list-style: none; padding: 0; margin: 0; position: relative; display: flex; flex-direction: column; gap: 34px; }
.roadmap-timeline::before { content: ''; position: absolute; top: 32px; bottom: 32px; left: 20px; width: 2px; background: linear-gradient(180deg, var(--blue) 0%, rgba(56,189,248,.85) 38%, rgba(139,92,246,.7) 78%, rgba(139,92,246,.1) 100%); box-shadow: 0 0 10px rgba(36,103,232,.35); pointer-events: none; border-radius: 2px; }
html[data-theme="dark"] .roadmap-timeline::before { box-shadow: 0 0 14px rgba(78,161,255,.42); }
.timeline-item { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 22px; align-items: start; }
.timeline-marker { position: relative; display: flex; align-items: center; height: 42px; margin-top: 36px; }
.timeline-node { position: relative; z-index: 2; width: 42px; height: 42px; border-radius: 50%; background: var(--surface); border: 2px solid var(--blue); display: grid; place-items: center; box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent), 0 8px 18px rgba(0,0,0,.14); transition: transform .35s var(--ease), border-color .3s ease, box-shadow .35s ease; }
.node-number { font-size: 11px; font-weight: 800; letter-spacing: .5px; color: var(--blue); line-height: 1; font-variant-numeric: tabular-nums; transition: color .3s ease; }
.node-pulse { position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--blue); opacity: 0; animation: timeline-pulse 2.8s cubic-bezier(.2,.8,.2,1) infinite; pointer-events: none; }
@keyframes timeline-pulse { 0% { transform: scale(.85); opacity: .65; } 60% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } }
.timeline-node.future-node { border-color: #8b5cf6; box-shadow: 0 0 0 4px rgba(139,92,246,.14), 0 8px 18px rgba(0,0,0,.14); }
.timeline-node.future-node .node-number { color: #8b5cf6; }
.node-pulse.future-pulse { border-color: #8b5cf6; animation-delay: 1.2s; }
.timeline-connector { position: absolute; left: 42px; width: 22px; height: 2px; background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 35%, var(--border))); opacity: .75; transition: opacity .3s ease, background .3s ease; }
.timeline-item:hover .timeline-connector { opacity: 1; background: linear-gradient(90deg, var(--blue), var(--blue)); }
.timeline-item:hover .timeline-node { transform: scale(1.12); border-color: #38bdf8; box-shadow: 0 0 0 6px color-mix(in srgb, var(--blue) 25%, transparent), 0 0 20px rgba(56,189,248,.4); }
.timeline-item:hover .timeline-node.future-node { border-color: #a78bfa; box-shadow: 0 0 0 6px rgba(139,92,246,.25), 0 0 20px rgba(139,92,246,.4); }
.timeline-content { display: flex; flex-direction: column; gap: 9px; }
.timeline-phase-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; }
.timeline-phase-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent); border: 1px solid color-mix(in srgb, var(--blue) 24%, transparent); padding: 3px 9px; border-radius: 6px; }
.timeline-phase-badge.future-badge { color: #a78bfa; background: rgba(139,92,246,.1); border-color: rgba(139,92,246,.28); }
.timeline-phase-date { font-size: 11px; font-weight: 600; color: var(--text-faint); letter-spacing: .2px; }
.future-icon { background: #f3e8ff; color: #7c3aed; }
html[data-theme="dark"] .future-icon { background: #23163a; color: #b794f6; }
.roadmap-card { display: grid; grid-template-columns: 57px minmax(0,1fr) 28px; gap: 19px; align-items: start; padding: 24px 23px; background: var(--surface); border: 1px solid var(--border); border-radius: 17px; cursor: pointer; isolation: isolate; will-change: transform, box-shadow; transition: transform .4s var(--ease), box-shadow .4s ease, border-color .35s ease; background-image: radial-gradient(450px circle at var(--mouse-x, -999px) var(--mouse-y, -999px), rgba(36,103,232,.07), transparent 75%); }
.roadmap-card:hover, .roadmap-card.reveal-pending:hover, .roadmap-card.is-visible:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--blue) 38%, var(--border)); box-shadow: var(--shadow-hover); }
.roadmap-card.reveal-pending { transition: transform .4s var(--ease), box-shadow .4s ease, border-color .35s ease, opacity .72s var(--ease), translate .72s var(--ease); }
.roadmap-card-icon { width: 53px; height: 53px; border-radius: 15px; display: grid; place-items: center; transition: transform .4s var(--ease); }.roadmap-card:hover .roadmap-card-icon { transform: translateY(-2px); }.roadmap-card-icon svg { width: 37px; height: 37px; }.parcel-icon { background: #e6efff; color: #2467e8; }.rent-icon { background: #e0f5ef; color: #209a79; }html[data-theme="dark"] .parcel-icon { background: #142746; color: #7aabff; }html[data-theme="dark"] .rent-icon { background: #113129; color: #67d7b5; }
.roadmap-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 1px 0 11px; }.roadmap-badge { color: var(--text-faint); border: 1px solid var(--border); padding: 3px 7px; border-radius: 5px; letter-spacing: .5px; font-size: 10.5px; font-weight: 800; }.roadmap-code { color: var(--text-faint); opacity: 1; font-size: 10px; font-weight: 700; letter-spacing: .5px; }.roadmap-card h3 { font-size: 16px; line-height: 1.45; letter-spacing: -.4px; margin: 0 0 8px; }.roadmap-card h3 span { color: var(--text-faint); font-size: 12px; font-weight: 500; }.roadmap-card-content p { margin: 0; color: var(--text-soft); font-size: 11px; line-height: 1.85; }.roadmap-tags { margin-top: 14px; }.roadmap-tags span { padding: 4px 7px; }.roadmap-arrow { color: var(--text-faint); font-size: 16px; padding-top: 5px; transition: transform .35s var(--ease), color .25s ease; }.roadmap-card:hover .roadmap-arrow { color: var(--blue); transform: translate(2px,-2px); }
html[data-theme="dark"] .button-primary { background: #2572f6; color: #ffffff; box-shadow: 0 10px 25px rgba(37,114,246,.35); }
html[data-theme="dark"] .button-primary:hover { background: #3b82f6; box-shadow: 0 15px 32px rgba(59,130,246,.45); }
.contact-section { position: relative; isolation: isolate; padding-block: 122px 105px; overflow: hidden; background: linear-gradient(180deg, #1059df 0%, #0d4abf 100%); color: white; text-align: center; }
html[data-theme="dark"] .contact-section { background: radial-gradient(ellipse at 50% 120%, rgba(20,75,190,.55), transparent 70%), linear-gradient(180deg, #081122 0%, #0a1733 45%, #0d2765 100%); border-top: 1px solid rgba(85,145,255,.2); }
.contact-section .section-kicker { color: rgba(255,255,255,.95); }.contact-aura { position: absolute; z-index: -1; inset: -70% -10%; background: radial-gradient(ellipse at 50% 55%, rgba(93,171,255,.20), transparent 45%), radial-gradient(ellipse at 20% 70%, rgba(4,42,141,.3), transparent 50%); pointer-events: none; }.contact-inner { position: relative; }.contact-section h2 { margin: 0; font-size: clamp(47px,6.3vw,76px); line-height: 1.06; font-weight: 650; letter-spacing: -.07em; }.contact-section h2 span { color: rgba(255,255,255,.85); }.contact-lead { color: rgba(255,255,255,.95); margin: 23px auto 0; font-size: 13px; line-height: 1.85; max-width: 440px; }.contact-actions { margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }.button-light { color: #1258d7; background: #fff; box-shadow: 0 10px 25px rgba(1,28,100,.12); }.button-light:hover { background: #eaf1ff; box-shadow: 0 15px 32px rgba(1,28,100,.2); }.button-light > svg:first-child { width: 19px; height: 19px; }.button-arrow { width: 17px!important; height: 17px!important; }
.contact-email-box { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.11); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.22); border-radius: 99px; padding: 4px 5px 4px 15px; transition: background .2s ease, border-color .2s ease; }
.contact-email-box:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); }
.contact-email-box .contact-email { border: 0; padding: 0; color: white; font-size: 12px; font-weight: 700; text-decoration: none; }
.contact-email-box .contact-email span { margin-left: 3px; }
.copy-email-btn { display: inline-flex; align-items: center; gap: 5px; background: #fff; color: #1059df; border: 0; border-radius: 99px; padding: 7px 13px; font-size: 11px; font-weight: 700; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.copy-email-btn:hover { background: #eaf1ff; transform: scale(1.04); }
.copy-email-btn svg { width: 13px; height: 13px; }
.contact-trust-note { margin: 28px auto 0; max-width: 620px; font-size: 11px; line-height: 1.7; color: rgba(255,255,255,.82); font-weight: 500; letter-spacing: .25px; }
.contact-meta { margin-top: 45px; display: flex; justify-content: center; align-items: center; gap: 18px; color: rgba(255,255,255,.95); font-size: 11px; font-weight: 600; }.contact-meta span,.contact-meta a { display: inline-flex; align-items: center; gap: 7px; }.contact-meta svg { width: 14px; height: 14px; }.contact-meta-divider { width: 3px; height: 3px; background: rgba(255,255,255,.6); border-radius: 50%; }
.toast { position: fixed; bottom: 28px; right: 28px; z-index: 9999; display: flex; align-items: center; gap: 10px; background: rgba(10, 18, 34, 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #fff; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; padding: 12px 18px; font-size: 12px; font-weight: 600; box-shadow: 0 16px 36px rgba(0,0,0,0.35); opacity: 0; transform: translateY(14px) scale(.95); pointer-events: none; transition: opacity .25s ease, transform .25s cubic-bezier(.2,.75,.25,1); }
.toast.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.toast svg { width: 16px; height: 16px; color: #22c55e; flex: 0 0 auto; }
.site-footer { background: var(--footer); color: #fff; }.footer-main { min-height: 95px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(255,255,255,.11); }.footer-brand { color: #fff; }.footer-brand .brand-logo { height: 32px; width: auto; max-height: 32px; }.footer-main > p { margin: 0; color: rgba(255,255,255,.48); font-size: 11px; }.back-top { display: inline-flex; align-items: center; gap: 11px; color: rgba(255,255,255,.65); font-size: 11px; font-weight: 600; transition: color .2s ease; min-height: 44px; }.back-top:hover { color: white; }.back-top span:last-child { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.19); border-radius: 50%; font-size: 14px; }.footer-bottom { display: flex; align-items: center; justify-content: space-between; min-height: 54px; gap: 20px; color: rgba(255,255,255,.62); font-size: 11px; letter-spacing: .1px; }
.noscript-note { padding: 12px 20px; text-align: center; color: var(--text); background: var(--blue-soft); font-size: 12px; }
/* Progressive enhancement: content remains visible unless JS successfully enables scroll reveals. */
.reveal { opacity: 1; transform: none; translate: 0 0; }
.reveal.reveal-pending { opacity: 0; translate: 0 22px; transition-property: opacity, translate; transition-duration: .72s; transition-timing-function: var(--ease); transition-delay: var(--reveal-delay, 0ms); }
.reveal.reveal-pending.is-visible { opacity: 1; translate: 0 0; }
@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes stack-float { 0%,100% { transform: rotateX(56deg) rotateZ(-45deg) translateY(0); } 50% { transform: rotateX(56deg) rotateZ(-45deg) translateY(-14px); } }
@keyframes glow-breathe { from { opacity: .55; transform: scale(.94); } to { opacity: 1; transform: scale(1.04); } }
@keyframes scroll-down { 0%,100% { transform: translateY(0); opacity: 1; } 75% { transform: translateY(9px); opacity: .25; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto!important; animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; } .reveal { opacity: 1; transform: none; translate: none; } .hero-fade, .hero-visual, .float-card, .visual-caption { opacity: 1!important; translate: none!important; animation: none!important; } }

/* Lao text uses a slightly more open rhythm, especially in headings. */
html[lang="lo"] .hero-title { letter-spacing: -.045em; line-height: 1.2; font-size: clamp(42px,4.8vw,65px); }
html[lang="lo"] .section-heading h2, html[lang="lo"] .roadmap-heading h2, html[lang="lo"] .contact-section h2 { letter-spacing: -.035em; line-height: 1.25; }
html[lang="lo"] .hero-description, html[lang="lo"] .section-lead, html[lang="lo"] .stack-card p, html[lang="lo"] .stack-checklist li, html[lang="lo"] .service-card p, html[lang="lo"] .service-checklist li, html[lang="lo"] .project-info > p, html[lang="lo"] .roadmap-card-content p { line-height: 1.95; }

@media (max-width: 1020px) {
  .container { width: min(100% - 48px, 900px); }
  .nav { gap: 18px; }.nav-links { gap: 17px; }.nav-links a { font-size: 11px; }.nav-actions { gap: 9px; }.nav-cta { padding: 9px 10px 9px 13px; gap: 8px; }
  .hero { padding-top: 70px; min-height: auto; }.hero-grid { grid-template-columns: minmax(0,1fr) minmax(330px,.92fr); gap: 10px; }.hero-title { font-size: clamp(48px,6vw,64px); }.hero-visual { height: 440px; }.hero-stack-wrap { width: 250px; height: 250px; }.hero-stack-inner { width: 175px; height: 175px; }.float-card-top { right: -4px; top: 55px; }.float-card-bottom { bottom: 65px; left: -4px; }
  .section-pad { padding-block: 100px; }.roadmap-wrap { gap: 40px; }
}
@media (max-width: 780px) {
  .container { width: calc(100% - 40px); }.site-header { position: sticky; }.nav { min-height: 72px; }.brand-logo { height: 33px; max-height: 33px; }
  .menu-toggle { display: flex; }.nav-cta { display: none; }.nav-links { position: absolute; top: calc(100% + 1px); left: 0; right: 0; margin: 0; padding: 13px 20px 21px; display: flex; flex-direction: column; align-items: stretch; gap: 0; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }.nav-links.open { opacity: 1; visibility: visible; transform: translateY(0); }.nav-links a { padding: 12px 3px; border-bottom: 1px solid var(--border); font-size: 13px; }.nav-links a:last-child { border-bottom: 0; }
  .hero { padding-top: 66px; padding-bottom: 71px; }.hero-grid { grid-template-columns: 1fr; gap: 15px; }.hero-copy { padding: 0; }.eyebrow { margin-bottom: 20px; }.hero-title { font-size: clamp(48px, 9vw, 70px); max-width: 650px; }.hero-description { font-size: 14px; max-width: 510px; margin-top: 20px; }.hero-actions { margin-top: 26px; }.hero-proof { margin-top: 31px; }.hero-visual { margin-top: 3px; width: 100%; height: min(430px, 95vw); }.float-card-top { right: 4%; top: 40px; }.float-card-bottom { left: 3%; bottom: 48px; }.visual-caption { bottom: 15px; right: 8px; }.scroll-cue { display: none; }.hero-glow { width: 100%; height: 80%; right: 0; top: 30%; }
  .intro-strip-inner { min-height: auto; gap: 14px; justify-content: flex-start; }
  .section-pad { padding-block: 83px; }.section-heading { align-items: start; flex-direction: column; gap: 18px; margin-bottom: 34px; }.section-heading h2, .roadmap-heading h2 { font-size: clamp(34px,7vw,45px); }.section-lead { width: min(100%, 500px); font-size: 12px; }
  .services-grid, .stack-grid { grid-template-columns: 1fr; gap: 13px; }.service-card, .stack-card { min-height: 0; padding: 23px; }.service-card-top, .stack-card-top { margin-bottom: 18px; }.service-card p, .stack-card p { max-width: 500px; }.card-link { margin-top: 5px; }
  .work-section { padding-block: 84px; }.projects-grid { grid-template-columns: 1fr; gap: 34px; }.project-art { height: clamp(255px,61vw,320px); }.project-info { padding-top: 17px; }
  .roadmap-section { padding-block: 84px; }.roadmap-wrap { grid-template-columns: 1fr; gap: 35px; }.roadmap-heading { position: static; }.roadmap-heading > p:not(.section-kicker) { margin-top: 18px; }.roadmap-legend { margin-top: 20px; }
  .roadmap-timeline::before { left: 17px; top: 28px; bottom: 28px; }.timeline-item { grid-template-columns: 36px minmax(0,1fr); gap: 16px; }.timeline-marker { height: 36px; margin-top: 32px; }.timeline-node { width: 36px; height: 36px; }.timeline-connector { left: 36px; width: 16px; }.node-number { font-size: 10px; }.timeline-phase-bar { flex-direction: column; align-items: flex-start; gap: 4px; }
  .roadmap-card { grid-template-columns: 46px minmax(0,1fr) 18px; gap: 14px; padding: 19px 17px; }.roadmap-card-icon { width: 45px; height: 45px; border-radius: 13px; }.roadmap-card-icon svg { width: 32px; height: 32px; }.roadmap-card h3 { font-size: 14px; }
  .contact-section { padding-block: 87px 72px; }.contact-section h2 { font-size: clamp(45px,9vw,65px); }.contact-lead { font-size: 12px; }.contact-actions { gap: 19px; }.contact-meta { margin-top: 35px; }
  .contact-trust-note { margin-top: 24px; font-size: 10.5px; }
  .toast { left: 20px; right: 20px; bottom: 20px; justify-content: center; }
  .footer-main { min-height: 83px; }.footer-main > p { display: none; }
}
@media (max-width: 460px) {
  .container { width: calc(100% - 32px); }.nav { min-height: 66px; }.nav-actions { gap: 9px; }.theme-toggle { width: 40px; height: 40px; }.language-toggle { font-size: 10.5px; gap: 4px; min-height: 44px; }.brand-logo { height: 29px; max-height: 29px; }.footer-brand .brand-logo { height: 28px; max-height: 28px; }
  .hero { padding-top: 50px; padding-bottom: 58px; }.hero-title { font-size: clamp(43px,11.3vw,54px); }.hero-description { font-size: 13px; }.hero-actions { gap: 21px; }.button { padding: 13px 16px 13px 18px; }.text-link { font-size: 11px; }.hero-visual { height: 340px; }.hero-stack-wrap { width: 200px; height: 200px; }.hero-stack-inner { width: 140px; height: 140px; }.float-card { padding: 9px 10px; gap: 8px; border-radius: 12px; }.float-icon { width: 27px; height: 27px; border-radius: 8px; }.float-card-top { top: 20px; right: 0; }.float-card-bottom { left: -1px; bottom: 36px; }.float-card strong { font-size: 10px; }.float-card small { font-size: 9px; }
  .intro-strip-inner { gap: 10px; min-height: auto; }.strip-headline-badge { font-size: 9.5px; }.tech-chip { font-size: 10px; padding: 4px 9px; }
  .section-pad { padding-block: 72px; }.section-heading h2, .roadmap-heading h2 { font-size: 35px; }.services-section, .stack-section { padding-block: 73px; }.service-card, .stack-card { padding: 20px; }.service-card h3, .stack-card h3 { font-size: 16px; }.service-card p, .stack-card p { font-size: 11px; }.service-foot, .stack-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .work-section { padding-block: 72px; }.project-art { height: 250px; }.art-caption { left: 14px; right: 14px; bottom: 13px; }
  .roadmap-timeline::before { left: 14px; }.timeline-item { grid-template-columns: 30px minmax(0,1fr); gap: 12px; }.timeline-marker { height: 30px; margin-top: 28px; }.timeline-node { width: 30px; height: 30px; border-width: 1.5px; }.timeline-connector { left: 30px; width: 12px; }
  .node-number { font-size: 9px; }.timeline-phase-badge { font-size: 9px; padding: 2px 7px; }.timeline-phase-date { font-size: 10px; }
  .roadmap-card { grid-template-columns: 1fr 18px; }.roadmap-card-icon { display: none; }.roadmap-card-content { grid-column: 1; grid-row: 1; }.roadmap-arrow { grid-column: 2; grid-row: 1; }.roadmap-card h3 { font-size: 14px; }.roadmap-card-content p { font-size: 10px; }.roadmap-code { display: none; }
  .contact-section { padding-block: 75px 64px; }.contact-section h2 { font-size: 47px; }.contact-actions { flex-direction: column; gap: 18px; }.contact-meta { flex-direction: column; gap: 12px; font-size: 10px; }.contact-meta-divider { display: none!important; }
  .contact-trust-note { font-size: 10px; line-height: 1.6; }
  .copy-email-btn { padding: 6px 11px; font-size: 10.5px; }
  .contact-email-box { padding-left: 12px; }
  .contact-email-box .contact-email { font-size: 11px; }
  .footer-main { flex-wrap: wrap; }.footer-bottom { font-size: 10px; }
}