/* 2026 UI/UX reboot: light-first, calmer hierarchy, stronger contrast */
:root{
  --ui-bg:#f5f7fb;
  --ui-surface:#ffffff;
  --ui-surface-soft:#eef4fb;
  --ui-border:#d8e2ef;
  --ui-border-strong:#c7d4e3;
  --ui-text:#10233a;
  --ui-text-2:#31465f;
  --ui-text-3:#5f7187;
  --ui-brand:#e11d48;
  --ui-brand-2:#0ea5b7;
  --ui-brand-3:#2563eb;
  --ui-shadow:0 18px 54px rgba(16,35,58,.12);
  --ui-shadow-lg:0 28px 80px rgba(16,35,58,.16);
  --ui-radius:24px;
}

html{scroll-padding-top:88px}
body{
  color:var(--ui-text);
  background:
    radial-gradient(980px 460px at 0% 0%, rgba(225,29,72,.09), transparent 58%),
    radial-gradient(980px 520px at 100% 0%, rgba(14,165,183,.08), transparent 60%),
    linear-gradient(180deg,#f8fbff 0%, #f3f6fb 100%);
}
body[data-ui-locked="1"]{overflow:hidden}
main, section, article, p, li, dt, dd, label, input, textarea, select{ color:inherit; }
a{text-underline-offset:3px}
.container{max-width:1180px}

.header{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.1) blur(14px);
  border-bottom:1px solid rgba(16,35,58,.08);
  box-shadow:0 8px 24px rgba(16,35,58,.06);
}
.header[data-scrolled="1"]{box-shadow:0 14px 32px rgba(16,35,58,.10)}
.nav{height:80px; gap:16px}
.brand-name{color:var(--ui-text); font-size:18px}
.brand-sub{color:var(--ui-text-3)}
.nav-links{gap:6px; flex-wrap:wrap}
.nav-links a{
  color:var(--ui-text-2);
  padding:12px 14px;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  font-size:14px;
  border:1px solid transparent;
}
.nav-links a:hover,
.nav-links a.active{color:var(--ui-text); background:#f3f7fc; border-color:rgba(16,35,58,.08); text-decoration:none}
.nav-cta{gap:10px}
.btn{
  min-height:48px;
  padding:12px 18px;
  font-size:14px;
}
.btn-primary{
  background:linear-gradient(135deg, #e11d48, #fb7185);
  color:#fff;
  box-shadow:0 14px 34px rgba(225,29,72,.20);
}
.btn-primary:hover{background:linear-gradient(135deg, #be123c, #f43f5e)}
.btn-ghost{
  background:#fff;
  color:var(--ui-text);
  border-color:var(--ui-border);
}
.btn-ghost:hover{background:#f7f9fc; color:var(--ui-text)}
.nav-icon-btn{width:48px; min-width:48px; padding:0}
.theme-toggle-btn{width:48px; min-width:48px; padding:0}
.hamburger{color:var(--ui-text); border:1px solid rgba(16,35,58,.08); background:#fff; min-width:48px; min-height:48px; display:none}
.hamburger:hover{background:#f3f7fc}
.mobile-panel{
  background:#fff;
  border-top:1px solid rgba(16,35,58,.08);
  padding:10px 0 18px;
}
.mobile-links a{
  background:#fff;
  color:var(--ui-text);
  border-color:var(--ui-border);
  min-height:48px;
  display:flex;
  align-items:center;
}
.mobile-links a:hover{background:#f5f8fc; color:var(--ui-text)}
.mobile-actions, .mobile-panel .row{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.mobile-actions .btn, .mobile-panel .row .btn{flex:1 1 180px}

.page-home .hero{
  color:var(--ui-text);
  background:
    radial-gradient(800px 420px at 12% 4%, rgba(225,29,72,.13), transparent 58%),
    radial-gradient(840px 460px at 100% 0%, rgba(14,165,183,.12), transparent 60%),
    linear-gradient(180deg,#ffffff 0%, #f6f9fd 100%);
  padding:40px 0 28px;
}
.page-home .hero::before{display:none}
.page-home .hero-grid{
  grid-template-columns: minmax(0, 1fr) minmax(420px, 540px);
  gap:40px;
  padding:22px 0 22px;
  align-items:center;
}
.page-home .kicker{
  background:#fff;
  color:var(--ui-text-2);
  border:1px solid var(--ui-border);
  box-shadow:0 8px 20px rgba(16,35,58,.06);
}
.page-home .dot{box-shadow:none}
.page-home h1{
  color:var(--ui-text);
  max-width:11ch;
  margin-top:18px;
  font-size:clamp(38px, 6vw, 66px);
  line-height:.95;
}
.page-home .hero p{
  color:var(--ui-text-2);
  max-width:62ch;
  font-size:clamp(16px, 2vw, 19px);
  margin-top:16px;
}
.hero-inline-links{display:flex; align-items:center; gap:12px; margin-top:18px; flex-wrap:wrap}
.inline-button{appearance:none; border:0; background:transparent; padding:0; color:var(--ui-brand-3); font-weight:800; cursor:pointer;}
.inline-button:hover{text-decoration:underline}
.hero-inline-divider{width:1px; height:18px; background:var(--ui-border-strong)}
.hero-inline-note{color:var(--ui-text-3); font-weight:700}
.hero-visual{display:block}
.hero-art-stage{
  position:relative;
  min-height:500px;
  border-radius:32px;
  background:
    radial-gradient(420px 240px at 12% 16%, rgba(225,29,72,.12), transparent 65%),
    radial-gradient(420px 260px at 88% 8%, rgba(14,165,183,.12), transparent 62%),
    linear-gradient(180deg,#ffffff 0%, #eef5fc 100%);
  border:1px solid var(--ui-border);
  box-shadow:var(--ui-shadow-lg);
  overflow:hidden;
}
.hero-illustration{width:100%; height:auto}
.hero-floating-card{
  position:absolute;
  z-index:2;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(16,35,58,.10);
  box-shadow:0 18px 42px rgba(16,35,58,.12);
  display:flex; flex-direction:column; gap:2px;
}
.hero-floating-card strong{font-size:13px; color:var(--ui-text)}
.hero-floating-card span{font-size:12px; color:var(--ui-text-3); font-weight:700}
.hero-floating-card-a{top:22px; left:22px}
.hero-floating-card-b{right:22px; bottom:24px}
.hero-illustration .hero-screen-card-a,
.hero-illustration .hero-screen-card-b,
.hero-illustration .hero-scribble,
.hero-illustration .hero-orb{animation:floatCard 8s ease-in-out infinite}
.hero-illustration .hero-screen-card-b{animation-delay:-2s}
.hero-illustration .hero-scribble{animation-delay:-1s}
.hero-illustration .hero-orb{animation-duration:10s}
@keyframes floatCard{0%,100%{transform:translateY(0px)}50%{transform:translateY(-10px)}}

.page-home .section{padding:34px 0}
.page-home .home-shell{display:grid; gap:24px}
.page-home .home-band{
  background:linear-gradient(180deg,#ffffff 0%, #f8fbff 100%);
  border:1px solid var(--ui-border);
  border-radius:28px;
  box-shadow:var(--ui-shadow);
  padding:28px;
}
.page-home .home-section-intro{display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:18px}
.page-home .section h2{color:var(--ui-brand); font-size:12px; letter-spacing:.16em}
.page-home .section h3, .page-home .service-card h3, .page-home .work-card h3, .page-home .cta-card h3{color:var(--ui-text)}
.page-home .lead{color:var(--ui-text-2); max-width:60ch}
.home-section-link{font-weight:800; color:var(--ui-brand-3)}
.home-section-link:hover{text-decoration:underline}
.service-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px}
.service-card{background:linear-gradient(180deg,#ffffff 0%, #f8fbff 100%); border:1px solid var(--ui-border); border-radius:24px; box-shadow:0 14px 34px rgba(16,35,58,.08); padding:20px; display:grid; gap:14px}
.service-card:hover, .work-card:hover{transform:translateY(-2px); box-shadow:0 20px 44px rgba(16,35,58,.12)}
.service-eyebrow{font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--ui-brand); font-weight:900}
.service-card p{color:var(--ui-text-2); margin:0}
.service-link{font-weight:800; color:var(--ui-brand-3)}
.service-link:hover{text-decoration:underline}
.service-figure{border-radius:18px; border:1px solid var(--ui-border); background:linear-gradient(180deg,#f8fbff 0%, #eef5fc 100%); min-height:160px; display:grid; place-items:center; overflow:hidden}
.service-figure svg{width:100%; height:auto; display:block}
.work-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px}
.work-card{background:#fff; border:1px solid var(--ui-border); border-radius:24px; box-shadow:0 14px 34px rgba(16,35,58,.08); overflow:hidden; display:flex; flex-direction:column}
.work-card img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:#eef5fc}
.work-copy{padding:18px; display:grid; gap:10px}
.work-copy p{margin:0; color:var(--ui-text-2)}
.work-tag{font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.14em; color:var(--ui-brand)}
.cta-card{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center; background:linear-gradient(135deg,#ffffff 0%, #eef6ff 100%); border:1px solid var(--ui-border); border-radius:28px; box-shadow:var(--ui-shadow); padding:26px 28px}
.cta-card p{margin:0; color:var(--ui-text-2); max-width:54ch}
.cta-actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end}
.contact-strip{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; color:var(--ui-text-3); font-weight:700}
.contact-strip a{color:var(--ui-brand-3)}

.page-hero{background:linear-gradient(180deg,#ffffff 0%, #f6f9fd 100%); color:var(--ui-text); border-bottom:1px solid rgba(16,35,58,.05); padding:38px 0 28px}
.page-hero .title{color:var(--ui-text); margin-top:12px}
.page-hero .desc,.breadcrumbs,.lead,.card p,.list li,.step p,.faq .a,.small,.hint,.muted,.mockup-copy p,.visual-sidekick-card .muted,.eco-card p,.spotlight-card p{color:var(--ui-text-2)}
.breadcrumbs a{color:var(--ui-brand-3)}
.subnav{position:sticky; top:80px; z-index:30; background:rgba(245,247,251,.92); backdrop-filter:blur(12px); border-bottom:1px solid rgba(16,35,58,.06)}
.subnav .row{display:flex; gap:10px; overflow:auto; padding:10px 0}
.chip{display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:10px 14px; border-radius:999px; background:#fff; border:1px solid var(--ui-border); color:var(--ui-text-2); font-weight:800; white-space:nowrap; text-decoration:none}
.chip.active, .chip:hover{background:#eff6ff; color:var(--ui-text); border-color:#bfd3ee; text-decoration:none}
.card, .faq, .step, .callout, .visual-sidekick-card, .mockup-card, .eco-card, .spotlight-card{background:linear-gradient(180deg,#ffffff 0%, #f8fbff 100%); border:1px solid var(--ui-border); box-shadow:0 16px 40px rgba(16,35,58,.08)}
.card h4, .faq summary, .mockup-copy h4, .spotlight-card h3, .spotlight-card h4, .visual-sidekick-card h4{color:var(--ui-text)}
.section .pill, .page-hero .pill, .card .pill, .badge, .section .badge{background:#f3f7fc; color:var(--ui-text); border-color:var(--ui-border)}
.list li{display:flex; gap:10px}
.check svg{width:18px; height:18px; stroke:var(--ui-brand-2); fill:none; stroke-width:2.5; margin-top:2px}

.search-backdrop, #searchBackdrop{background:rgba(16,35,58,.42); backdrop-filter:blur(6px)}
.search-modal, #searchModal{background:#fff; color:var(--ui-text); border:1px solid var(--ui-border); box-shadow:var(--ui-shadow-lg)}
.search-head{border-bottom:1px solid rgba(16,35,58,.08)}
.search-body{color:var(--ui-text)}
.search-item{color:var(--ui-text); border-color:rgba(16,35,58,.08); background:#fff}
.search-item .d, .search-body .d{color:var(--ui-text-2)}
.search-item:hover, .search-item.active{background:#f4f8ff}
.search-shortcuts .chip{background:#fff}

.footer{background:#0f172a; color:rgba(248,250,252,.92); margin-top:44px}
.footer a{color:rgba(248,250,252,.86)}
.footer a:hover{color:#fff}
.footer .muted{color:rgba(226,232,240,.76)}
.footer h5{color:#fff}
.footer .social a{display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10)}

.utility-dock{background:rgba(255,255,255,.94); border:1px solid rgba(16,35,58,.10); box-shadow:var(--ui-shadow)}
.dock-btn{color:var(--ui-text)}
body.page-home .nav-cta > .theme-toggle-btn{display:none}

@media (max-width: 1100px){.page-home .hero-grid{grid-template-columns:1fr;}.hero-art-stage{min-height:420px}.page-home h1{max-width:12ch}}
@media (max-width: 980px){.nav-links{display:none}.hamburger{display:inline-flex; align-items:center; justify-content:center}.mobile-panel{display:block}.subnav{top:72px}.page-home .home-section-intro,.cta-card{grid-template-columns:1fr}.work-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 760px){.nav{height:72px}.nav-cta .btn-primary{display:none}.page-home .hero{padding:26px 0 16px}.page-home .hero-grid{gap:22px}.page-home h1{font-size:clamp(34px, 12vw, 52px); max-width:100%}.hero-art-stage{min-height:320px; border-radius:24px}.hero-floating-card{padding:10px 12px}.service-grid, .work-grid{grid-template-columns:1fr}.page-home .home-band{padding:20px}.cta-actions{justify-content:flex-start}.mobile-actions .btn, .mobile-panel .row .btn{flex:1 1 100%}}
@media (prefers-reduced-motion: reduce){*, *::before, *::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}}

html[data-theme="dark"] body{color:rgba(248,250,252,.94); background:radial-gradient(980px 460px at 0% 0%, rgba(225,29,72,.18), transparent 58%),radial-gradient(980px 520px at 100% 0%, rgba(14,165,183,.16), transparent 60%),linear-gradient(180deg,#0b1220 0%, #09111f 100%)}
html[data-theme="dark"] .header{background:rgba(11,18,32,.90); border-bottom-color:rgba(255,255,255,.08); box-shadow:0 12px 28px rgba(0,0,0,.28)}
html[data-theme="dark"] .brand-name,html[data-theme="dark"] .nav-links a.active,html[data-theme="dark"] .nav-links a:hover,html[data-theme="dark"] .btn-ghost,html[data-theme="dark"] .hamburger,html[data-theme="dark"] .mobile-links a,html[data-theme="dark"] .chip.active,html[data-theme="dark"] .chip:hover,html[data-theme="dark"] .search-item,html[data-theme="dark"] .search-modal,html[data-theme="dark"] .service-eyebrow,html[data-theme="dark"] .work-tag,html[data-theme="dark"] .home-section-link,html[data-theme="dark"] .service-link,html[data-theme="dark"] .inline-button,html[data-theme="dark"] .breadcrumbs a,html[data-theme="dark"] .dock-btn{color:#fff}
html[data-theme="dark"] .brand-sub,html[data-theme="dark"] .nav-links a,html[data-theme="dark"] .page-home .hero p,html[data-theme="dark"] .hero-inline-note,html[data-theme="dark"] .lead,html[data-theme="dark"] .card p,html[data-theme="dark"] .faq .a,html[data-theme="dark"] .muted,html[data-theme="dark"] .search-item .d,html[data-theme="dark"] .search-body .d,html[data-theme="dark"] .page-hero .desc,html[data-theme="dark"] .breadcrumbs{color:rgba(226,232,240,.82)}
html[data-theme="dark"] .btn-ghost,html[data-theme="dark"] .hamburger,html[data-theme="dark"] .mobile-links a,html[data-theme="dark"] .chip,html[data-theme="dark"] .service-card,html[data-theme="dark"] .work-card,html[data-theme="dark"] .page-home .home-band,html[data-theme="dark"] .cta-card,html[data-theme="dark"] .page-home .kicker,html[data-theme="dark"] .hero-art-stage,html[data-theme="dark"] .hero-floating-card,html[data-theme="dark"] .page-hero,html[data-theme="dark"] .card,html[data-theme="dark"] .faq,html[data-theme="dark"] .step,html[data-theme="dark"] .callout,html[data-theme="dark"] .visual-sidekick-card,html[data-theme="dark"] .mockup-card,html[data-theme="dark"] .eco-card,html[data-theme="dark"] .spotlight-card,html[data-theme="dark"] .search-modal,html[data-theme="dark"] .subnav,html[data-theme="dark"] .utility-dock{background:linear-gradient(180deg,rgba(15,23,42,.96) 0%, rgba(15,23,42,.98) 100%); border-color:rgba(255,255,255,.12); box-shadow:0 24px 70px rgba(0,0,0,.34)}
html[data-theme="dark"] .page-home .hero{color:#fff; background:radial-gradient(820px 420px at 12% 4%, rgba(225,29,72,.28), transparent 58%),radial-gradient(840px 460px at 100% 0%, rgba(14,165,183,.22), transparent 60%),linear-gradient(180deg,#09111f 0%, #0b1220 100%)}
html[data-theme="dark"] .page-home h1,html[data-theme="dark"] .page-hero .title,html[data-theme="dark"] .service-card h3,html[data-theme="dark"] .work-card h3,html[data-theme="dark"] .cta-card h3,html[data-theme="dark"] .card h4,html[data-theme="dark"] .faq summary,html[data-theme="dark"] .page-home .section h3,html[data-theme="dark"] .section .pill,html[data-theme="dark"] .card .pill,html[data-theme="dark"] .badge,html[data-theme="dark"] .section .badge,html[data-theme="dark"] .kicker{color:#fff}
html[data-theme="dark"] .btn-ghost:hover,html[data-theme="dark"] .nav-links a:hover,html[data-theme="dark"] .nav-links a.active,html[data-theme="dark"] .mobile-links a:hover,html[data-theme="dark"] .chip.active,html[data-theme="dark"] .chip:hover,html[data-theme="dark"] .search-item.active,html[data-theme="dark"] .search-item:hover{background:rgba(255,255,255,.08)}
html[data-theme="dark"] .btn-ghost,html[data-theme="dark"] .hamburger,html[data-theme="dark"] .mobile-links a,html[data-theme="dark"] .chip,html[data-theme="dark"] .section .pill,html[data-theme="dark"] .card .pill,html[data-theme="dark"] .badge,html[data-theme="dark"] .section .badge{border-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .footer{background:#050b16}