/* Layout: white canvas, left-aligned. The hero pairs the tagline with a live build window that assembles whatever the visitor says they need. Navy bands carry the bigger motion (capability ticker, scale simulator, footer). Cobalt is the action color, sun-yellow marks progress and users. Single light theme at the client's request. */
:root{
  color-scheme: light;
  --bg:#FFFFFF;
  --soft:#F4F4F4;
  --ink:#0A0A0A;
  --ink-2:#171717;
  --ink-3:#262626;
  --text:#0A0A0A;
  --muted:#5C5C5C;
  --line:#E5E5E5;
  --line-2:#D0D0D0;
  --accent:#000000;
  --accent-dk:#2B2B2B;
  --accent-soft:#F0F0F0;
  --accent-lt:#D4D4D4;
  --mint:#B6F5B0;
  --mint-soft:#EDFCEB;
  --mint-deep:#1F9D55;
  --mint-hi:#E4FFE0;
  --mint-lo:#8EE58A;
  --mint-ink:#14532D;
  --dawn:#F0FDEE;
  --ok:#11A061;
  --ok-soft:#E5F6EE;
  --warn:#E89A0C;
  --danger:#C93434;
  --white:#FFFFFF;
  --on-ink:#F5F5F5;
  --muted-ink:#A3A3A3;
  --line-ink:#2E2E2E;
  --shadow:0 28px 64px -30px rgba(0,0,0,.4),0 8px 20px -12px rgba(0,0,0,.14);
  --shadow-sm:0 12px 26px -16px rgba(0,0,0,.34);

  --font-display:"Archivo","Arial Black","Helvetica Neue",Arial,sans-serif;
  --font-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --t-xs:.75rem;
  --t-sm:.875rem;
  --t-base:1rem;
  --t-md:1.125rem;
  --t-lg:clamp(1.1rem,1.45vw,1.3rem);
  --t-h3:clamp(1.3rem,2vw,1.6rem);
  --t-h2:clamp(2rem,4.4vw,3.5rem);
  --t-h1:clamp(2.5rem,6.2vw,5.4rem);

  --header-h:84px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
html.menu-open{overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--t-base);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent);color:var(--white)}
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus{outline:none}

.wrap{width:100%;max-width:1260px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--accent);color:var(--white);padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}

/* Type */
.display{font-family:var(--font-display);font-stretch:125%;font-weight:800;letter-spacing:-.02em;line-height:.95;text-wrap:balance}
.h2{font-size:var(--t-h2)}
.muted{color:var(--muted)}
.lede{font-size:var(--t-lg);line-height:1.55;max-width:38em;color:var(--muted)}
.prose{display:grid;gap:1.1em;max-width:62ch;font-size:var(--t-md)}
.prose p{color:var(--muted)}
.dot{color:var(--mint-deep)}
.small{font-size:var(--t-sm);font-weight:600;color:var(--muted)}
.kicker{font-size:var(--t-sm);font-weight:600;color:var(--accent)}
.text-link{display:inline-flex;align-items:center;gap:.4em;font-weight:600;color:var(--accent);text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom/0 1.5px no-repeat;padding-bottom:2px;transition:background-size .3s}
.text-link:hover{background-size:100% 1.5px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:50px;padding:0 1.5rem;border-radius:999px;border:1.5px solid transparent;font-weight:600;font-size:var(--t-base);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s,transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.btn-primary{background:var(--accent);color:var(--white);box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
.btn-primary:hover{background:var(--accent-dk)}
.btn-ghost{background:var(--white);color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--text)}
.btn-white{background:var(--white);color:var(--accent)}
.btn-white:hover{background:var(--mint);color:var(--ink)}
.btn-sun{background:var(--mint);color:var(--ink)}
.btn-sun:hover{background:var(--white)}
.btn-sm{min-height:40px;padding:0 1.05rem;font-size:var(--t-sm)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.ic{width:1em;height:1em;flex:none}

/* Header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;margin-bottom:calc(-1 * var(--header-h));padding:10px clamp(10px,2.5vw,28px);pointer-events:none}
.nav-shell{pointer-events:auto;display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);max-width:1220px;height:64px;margin-inline:auto;padding:0 8px 0 clamp(16px,2vw,24px);border:1px solid transparent;border-radius:999px;background:transparent;transition:max-width .6s cubic-bezier(.2,.8,.2,1),height .4s ease,background-color .4s ease,border-color .4s ease,box-shadow .4s ease}
.site-header.scrolled .nav-shell,html.menu-open .nav-shell{max-width:1040px;height:58px;background:color-mix(in srgb,var(--white) 74%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border-color:color-mix(in srgb,var(--ink) 9%,transparent);box-shadow:0 18px 40px -22px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.7)}
html.menu-open .nav-shell{background:var(--white)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.brand{position:relative;display:inline-flex;align-items:center;text-decoration:none;margin-right:auto;min-width:0;color:var(--text)}
.logo{display:block;height:20px;width:auto;max-width:100%;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.brand:hover .logo{transform:translateY(-1px) scale(1.02)}
@media (max-width:400px){.logo{height:18px}}
.nav{position:relative;display:flex;gap:2px;padding:4px;border-radius:999px;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.nav-ind{position:absolute;left:0;top:4px;bottom:4px;width:0;border-radius:999px;background:var(--mint);box-shadow:0 6px 16px -8px color-mix(in srgb,var(--mint-deep) 60%,transparent);opacity:0;transform:translateX(0);transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1),opacity .25s ease}
.nav.no-anim .nav-ind{transition:none}
.nav a{position:relative;z-index:1;padding:9px 16px;border-radius:999px;text-decoration:none;font-family:var(--font-display);font-stretch:108%;font-weight:600;font-size:.92rem;letter-spacing:-.005em;color:color-mix(in srgb,var(--ink) 72%,transparent);transition:color .25s}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current="page"]{color:var(--ink)}
.nav a:focus-visible{outline-offset:1px}
.nav-right{display:flex;align-items:center;gap:12px}
.nav-social{padding-right:12px;border-right:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.nav-social .social{gap:2px}
.nav-social .social a{width:36px;height:36px;border:0;color:color-mix(in srgb,var(--ink) 70%,transparent)}
.nav-social .social a:hover{background:var(--ink);color:var(--mint);transform:translateY(-2px)}
.nav-social .social svg{width:17px;height:17px}
.header-cta{gap:10px;padding:0 6px 0 18px;min-height:44px;font-family:var(--font-display);font-stretch:108%;font-weight:700;font-size:.9rem;letter-spacing:-.005em}
.cta-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--mint);color:var(--ink);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.cta-ic svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.header-cta:hover .cta-ic{transform:rotate(45deg)}
@media (max-width:1180px){.nav-social{display:none}}
.menu-btn{display:none;align-items:center;gap:10px;min-height:42px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line-2);background:var(--white);cursor:pointer;font-weight:600;font-size:var(--t-sm)}
.menu-icon{position:relative;width:16px;height:10px}
.menu-icon::before,.menu-icon::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--text);transition:transform .25s,top .25s}
.menu-icon::before{top:0}
.menu-icon::after{top:8.5px}
.menu-btn[aria-expanded="true"] .menu-icon::before{top:4.25px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-icon::after{top:4.25px;transform:rotate(-45deg)}
.mobile-menu{position:fixed;left:0;right:0;bottom:0;top:calc(var(--header-h) + env(safe-area-inset-top,0px));z-index:49;background:var(--white);overflow-y:auto;padding-block:16px 40px}
.mobile-menu nav{display:grid}
.mobile-menu nav a{display:flex;justify-content:space-between;align-items:center;padding-block:14px;border-bottom:1px solid var(--line);font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:clamp(1.9rem,9vw,2.8rem);line-height:1.1;text-decoration:none}
.mobile-menu nav a[aria-current="page"]{color:var(--accent)}
.mobile-menu-foot{display:grid;gap:16px;margin-top:28px;justify-items:start}
@media (max-width:880px){
  .nav,.header-cta{display:none}
  .menu-btn{display:inline-flex}
}
@media (min-width:881px){.mobile-menu{display:none!important}}

/* Sections */
.section{padding-block:clamp(72px,10vw,136px)}
.soft{background:var(--soft)}
.ruled{border-top:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:20px clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(40px,6vw,68px)}
.sec-head p{color:var(--muted);font-size:var(--t-md);max-width:44ch}
@media (max-width:880px){.sec-head{grid-template-columns:minmax(0,1fr)}}

/* Hero */
.hero{position:relative;isolation:isolate;overflow:hidden;background:
  radial-gradient(60% 85% at 84% 32%,var(--dawn) 0%,color-mix(in srgb,var(--dawn) 45%,transparent) 45%,transparent 75%),
  linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--dawn) 30%,var(--bg)) 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-bg{position:absolute;inset:0;z-index:-3;width:100%;height:100%;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 14%,#000 60%);mask-image:linear-gradient(90deg,transparent 0%,transparent 14%,#000 60%)}
@media (max-width:980px){.hero-bg{-webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 30%,#000 62%);mask-image:linear-gradient(180deg,transparent 0%,transparent 30%,#000 62%)}}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--bg))}
.hero-inner{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(40px,5vw,80px);align-items:center;padding-block:calc(var(--header-h) + clamp(24px,5vw,72px)) clamp(88px,10vw,136px)}
@media (max-width:980px){.hero-inner{grid-template-columns:minmax(0,1fr)}}
.hero-copy{display:grid;gap:clamp(22px,2.6vw,30px);min-width:0;container-type:inline-size}
.hero-title{font-size:clamp(3rem,6.4vw,6.4rem);line-height:.88}
.hero-title .line{display:block}
.hero-title .w{display:inline-block}
.rot-line{font-family:var(--font-display);font-stretch:110%;font-weight:700;font-size:clamp(1.35rem,2.6vw,2.2rem);line-height:1.2;letter-spacing:-.01em}
@supports (font-size:1cqi){
  .hero-title{font-size:clamp(2.6rem,16cqi,7.4rem)}
  .hero-title .line{white-space:nowrap}
  .rot-line{font-size:clamp(1.35rem,5.4cqi,2.3rem)}
}
.rot{display:inline-flex;align-items:center;vertical-align:bottom;min-height:1.3em;border-radius:.35em;background:var(--mint);color:var(--ink);padding:.02em .3em .04em;margin-left:.08em}
.rot-word{white-space:pre}
.caret{display:inline-block;width:.07em;height:.95em;margin-left:.06em;border-radius:2px;background:var(--accent);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

.picker{border:0;padding:0;margin:0;min-width:0}
.picker legend{padding:0;margin-bottom:12px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.chip span{position:relative;overflow:hidden;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid var(--line-2);border-radius:999px;background:var(--white);font-weight:500;transition:background-color .2s,border-color .2s,color .2s,transform .2s}
.chip:hover span{border-color:var(--text)}
.chip:active span{transform:scale(.97)}
.chip input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--white)}
.chip input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px}
.picker.auto .chip input:checked + span::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--mint);transform-origin:left;animation:fillbar var(--cycle,7.2s) linear both}
@keyframes fillbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.chip .ci{width:17px;height:17px;flex:none;margin:0 8px 0 -4px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.7;transition:opacity .2s,color .2s}
.chip input:checked + span .ci{opacity:1;color:var(--mint)}
.trust{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:var(--t-sm);font-weight:500;color:var(--muted)}
.trust li{display:inline-flex;align-items:center;gap:7px}
.trust svg{width:18px;height:18px;flex:none;color:var(--ok)}

/* Build window */
.build-wrap{position:relative;z-index:0;isolation:isolate;min-width:0;padding-bottom:44px}
.hero-sun{position:absolute;z-index:-1;left:68%;top:38%;width:100%;max-width:100%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle at 36% 32%,var(--mint-hi) 0%,var(--mint) 46%,var(--mint-lo) 100%);
  box-shadow:0 0 70px 18px color-mix(in srgb,var(--mint) 45%,transparent),0 0 200px 80px color-mix(in srgb,var(--mint) 22%,transparent)}
@media (prefers-reduced-motion:no-preference){.hero-sun{animation:breathe 8s ease-in-out infinite}}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-50%) scale(1.035)}}
.floater{position:absolute;z-index:3;left:-22px;bottom:0;display:flex;align-items:center;gap:11px;padding:10px 16px 10px 10px;background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);font-size:var(--t-sm);font-weight:600;line-height:1.25}
.floater small{display:block;font-size:.76rem;font-weight:500;color:var(--muted)}
.floater .fi{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px;background:var(--mint);color:var(--ink)}
@media (max-width:980px){
  .hero-sun{left:64%;top:42%}
  .floater{left:8px}
}
@media (prefers-reduced-motion:no-preference){.floater{animation:float 6s ease-in-out infinite}}
.stats.stats-card{position:relative;z-index:2;margin-top:-56px;border:1px solid var(--line);border-radius:26px;background:var(--white);box-shadow:var(--shadow)}
.stats.stats-card .stat{padding-left:clamp(20px,3vw,40px)}
.build{position:relative;background:var(--white);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden;min-width:0;transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s ease-out}
.build-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--soft)}
.dots{display:flex;gap:6px;flex:none}
.dots i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.build-path{flex:1;min-width:0;font-family:var(--font-mono);font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.build-status{flex:none;display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600;padding:4px 11px;border-radius:999px;background:var(--ok-soft);color:var(--ok);transition:background-color .3s,color .3s}
.build-status i{width:7px;height:7px;border-radius:50%;background:currentColor}
.build-status[data-state="building"]{background:var(--mint-soft);color:var(--mint-ink)}
.build-status[data-state="building"] i{animation:pulse 1s ease-in-out infinite}
.build-stage{position:relative;height:clamp(250px,24vw,300px);background-color:var(--soft);background-image:radial-gradient(var(--line-2) 1px,transparent 1.4px);background-size:18px 18px;border-bottom:1px solid var(--line);overflow:hidden}
.build-foot{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px 22px;padding:16px 18px 18px}
@media (max-width:560px){.build-foot{grid-template-columns:minmax(0,1fr)}}
.build-log{display:grid;gap:7px;font-family:var(--font-mono);font-size:.75rem;line-height:1.3}
.build-log li{display:flex;gap:9px;align-items:center;min-width:0;color:var(--muted);opacity:.45;transition:opacity .3s,color .3s}
.build-log li > span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.build-log li.run,.build-log li.done{opacity:1;color:var(--text)}
.st{position:relative;flex:none;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line-2)}
.build-log li.run .st{border-color:var(--accent);border-right-color:transparent;animation:spin .7s linear infinite}
.build-log li.done .st{background:var(--ok);border-color:var(--ok)}
.build-log li.done .st::after{content:"";position:absolute;left:3.6px;top:1.2px;width:3.5px;height:6.5px;border:solid var(--white);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.build-meter{display:grid;gap:8px;align-content:end;min-width:0}
.meter-top{font-size:.8rem;color:var(--muted);font-weight:500}
.meter-num{font-family:var(--font-display);font-stretch:118%;font-weight:800;font-size:clamp(1.5rem,2.3vw,2rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.progress{height:8px;border-radius:999px;background:var(--soft);border:1px solid var(--line);overflow:hidden}
.progress i{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent) 70%,var(--mint));transition:width .45s ease}

/* Mockups inside the build stage */
.mk{position:relative;width:100%;height:100%;display:grid;place-items:center;padding:16px}
.run .pp{animation:pop .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
.bar{display:block;height:7px;border-radius:4px;background:var(--line)}
.bar.sm{height:5px}
.bar.lg{height:10px}
.bar.c{background:var(--accent)}
.bar.lt{background:rgba(255,255,255,.55)}
.av{flex:none;width:16px;height:16px;border-radius:50%;background:var(--accent-soft)}
.okdot{position:relative;flex:none;width:18px;height:18px;border-radius:50%;background:var(--ok)}
.okdot::after{content:"";position:absolute;left:6.2px;top:3.4px;width:4.5px;height:8px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg)}
.float-card{position:absolute;z-index:2;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm)}
.toast{right:6%;top:14%;display:flex;gap:9px;align-items:center;padding:9px 13px}
.toast b{display:block;font-size:.76rem;font-weight:600;line-height:1.2}
.toast small{display:block;font-size:.68rem;color:var(--muted)}
.tagcard{left:6%;bottom:13%;padding:7px 11px;font-size:.72rem;font-weight:600}

.phone{width:134px;height:236px;border-radius:26px;border:6px solid var(--ink);background:var(--white);padding:12px 9px 8px;display:flex;flex-direction:column;gap:8px;overflow:hidden;box-shadow:var(--shadow-sm)}
.ph-top{display:flex;align-items:center;gap:6px}
.ph-top .bell{margin-left:auto;width:10px;height:10px;border-radius:3px;background:var(--line)}
.ph-hero{background:var(--accent);border-radius:12px;padding:10px;display:grid;gap:6px}
.ph-cta{justify-self:start;margin-top:2px;font-size:8px;font-weight:600;background:var(--mint);color:var(--ink);padding:3px 7px;border-radius:999px}
.ph-row{display:flex;gap:7px;align-items:center;padding:6px;border:1px solid var(--line);border-radius:9px}
.sq{flex:none;width:20px;height:20px;border-radius:6px;background:var(--accent-soft)}
.sq.b{background:var(--mint-soft)}
.sq.c{background:var(--soft)}
.stack{display:grid;gap:4px;flex:1;min-width:0}
.ph-tab{margin-top:auto;display:flex;justify-content:space-around;padding-top:6px;border-top:1px solid var(--line)}
.ph-tab i{width:12px;height:12px;border-radius:4px;background:var(--line)}
.ph-tab i.on{background:var(--accent)}

.win{width:min(90%,430px);height:84%;background:var(--white);border:1px solid var(--line);border-radius:12px;display:grid;grid-template-columns:24% minmax(0,1fr);overflow:hidden;box-shadow:var(--shadow-sm)}
.win-side{background:var(--ink);padding:10px;display:grid;gap:9px;align-content:start}
.win-side .bar{background:var(--ink-3)}
.win-side .wlogo{width:18px;height:18px;border-radius:5px;background:var(--mint);margin-bottom:4px}
.win-main{padding:10px;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:8px;min-width:0}
.win-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.win-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.kpi{border:1px solid var(--line);border-radius:8px;padding:7px;display:grid;gap:5px}
.win-chart{border:1px solid var(--line);border-radius:8px;padding:8px;display:flex;align-items:flex-end;gap:5px;min-height:0}
.win-chart i{flex:1;height:var(--h);background:var(--accent-soft);border-radius:3px 3px 0 0;transform-origin:bottom}
.win-chart i:last-child{background:var(--accent)}
.run .win-chart i{animation:grow .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(1.6s + var(--n) * .07s)}

.chat{width:min(88%,360px);background:var(--white);border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;gap:9px;box-shadow:var(--shadow-sm)}
.chat-head{display:flex;gap:8px;align-items:center;padding-bottom:8px;border-bottom:1px solid var(--line)}
.chat-head .spark{width:16px;height:16px;border-radius:50%;background:conic-gradient(var(--accent),var(--mint),var(--accent))}
.msg{font-size:.74rem;line-height:1.4;padding:8px 11px;border-radius:12px;max-width:86%}
.msg.me{justify-self:end;background:var(--ink);color:var(--white);border-bottom-right-radius:4px}
.msg.bot{position:relative;justify-self:start;width:80%;min-height:48px;background:var(--soft);border-bottom-left-radius:4px}
.ans{display:grid;gap:6px}
.typing{display:none}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
.run .typing{display:flex;gap:4px;position:absolute;left:11px;top:50%;margin-top:-3px;animation:hide .2s 1.8s forwards}
.run .ans .bar{animation:pop .4s both;animation-delay:calc(1.9s + var(--n) * .12s)}
.srcs{display:flex;gap:6px;flex-wrap:wrap}
.srcs span{font-family:var(--font-mono);font-size:.64rem;padding:3px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}

.mk-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:center;place-items:stretch;padding-inline:max(16px,6%)}
.pane{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:13px;display:grid;gap:8px;align-content:start;box-shadow:var(--shadow-sm);min-width:0}
.pane-btn{justify-self:start;margin-top:6px;font-size:.68rem;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--ink);color:var(--white)}
.pane-btn.c{background:var(--accent)}
.mini{font-size:.68rem;font-weight:600;color:var(--muted)}
.paid{display:flex;align-items:center;gap:6px;font-size:.68rem;font-weight:600;color:var(--ok)}
.paid .okdot{width:15px;height:15px}
.paid .okdot::after{left:5px;top:2.6px;width:4px;height:7px}

.graph{width:min(90%,420px);background:var(--white);border:1px solid var(--line);border-radius:12px;padding:13px;display:grid;gap:10px;box-shadow:var(--shadow-sm)}
.graph-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.live-pill{display:inline-flex;gap:6px;align-items:center;font-size:.66rem;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--ok-soft);color:var(--ok)}
.live-pill i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 1.4s ease-in-out infinite}
.graph svg{width:100%;height:auto}
.g-grid{fill:none;stroke:var(--line);stroke-width:1}
.g-area{fill:var(--accent-soft)}
.g-line{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.run .g-line{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s .35s cubic-bezier(.4,0,.2,1) forwards}
.run .g-area{animation:fade .8s 1.3s both}
.graph-pills{display:flex;flex-wrap:wrap;gap:6px}
.graph-pills span{font-size:.66rem;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--soft);border:1px solid var(--line)}

.ds{width:min(90%,410px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ds-cell{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;min-height:74px;box-shadow:var(--shadow-sm);min-width:0}
.sw{display:grid;grid-template-columns:repeat(2,20px);gap:4px}
.sw i{width:20px;height:20px;border-radius:6px}
.sw .s1{background:var(--accent)}
.sw .s2{background:var(--mint)}
.sw .s3{background:var(--muted)}
.sw .s4{background:var(--accent-soft)}
.ds-aa{font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:1.9rem;line-height:1}
.ds-btn{font-size:.64rem;font-weight:600;padding:4px 9px;border-radius:999px;background:var(--accent);color:var(--white)}
.ds-btn.ghost{background:none;color:var(--text);border:1px solid var(--line-2)}
.tog{position:relative;width:30px;height:17px;border-radius:999px;background:var(--line-2)}
.tog i{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--white)}
.tog.on{background:var(--accent)}
.tog.on i{left:15px}
.run .tog.on{animation:togbg .3s 2.2s both}
.run .tog.on i{animation:togk .3s 2.2s both}
.ds-input{width:100%;border:1px solid var(--line-2);border-radius:7px;padding:7px}
.ds-avs{display:flex}
.ds-avs i{width:22px;height:22px;border-radius:50%;border:2px solid var(--white);margin-left:-6px;background:var(--accent-soft)}
.ds-avs i:first-child{margin-left:0}
.ds-avs i:nth-child(2){background:var(--mint)}
.ds-avs i:nth-child(3){background:var(--accent)}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line)}
.stat{display:grid;gap:8px;align-content:start;padding:clamp(24px,3vw,36px) clamp(16px,2.5vw,32px) clamp(24px,3vw,36px) 0;min-width:0}
.stat + .stat{border-left:1px solid var(--line);padding-left:clamp(16px,2.5vw,32px)}
.stat-num{font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:clamp(2.6rem,5vw,4.2rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat-label{color:var(--muted);max-width:24ch}
@media (max-width:760px){
  .stats{grid-template-columns:minmax(0,1fr)}
  .stat + .stat{border-left:0;border-top:1px solid var(--line);padding-left:0}
}

/* Ticker */
.ticker{background:var(--mint);color:var(--ink);overflow:hidden;padding-block:clamp(18px,2.4vw,28px)}
.ticker-track{display:flex;width:max-content;animation:ticker 32s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-group{display:flex;align-items:center;gap:clamp(24px,3vw,44px);padding-right:clamp(24px,3vw,44px)}
.ticker-group span{font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:clamp(1.6rem,3.6vw,3rem);line-height:1;white-space:nowrap;letter-spacing:-.02em}
.ticker-group i{flex:none;width:clamp(12px,1.4vw,18px);aspect-ratio:1;border-radius:50%;background:var(--ink)}
.ticker-group i:nth-of-type(even){background:var(--white)}

/* Services tabs */
.svc-tabs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:start}
.svc-tablist{display:grid;border-top:1px solid var(--line);min-width:0}
.svc-tab{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:22px 4px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer}
.svc-tab::before{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.svc-tab[aria-selected="true"]::before{transform:scaleX(1)}
.svc-name{font-family:var(--font-display);font-stretch:115%;font-weight:700;font-size:clamp(1.2rem,1.9vw,1.6rem);line-height:1.15;color:var(--muted);transition:color .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.svc-tab:hover .svc-name{color:var(--text)}
.svc-tab[aria-selected="true"] .svc-name{color:var(--text);transform:translateX(10px)}
.svc-go{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--white);opacity:0;transform:scale(.6) rotate(-45deg);transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.svc-tab[aria-selected="true"] .svc-go{opacity:1;transform:none}
.svc-panel{position:sticky;top:calc(var(--header-h) + 24px);background:var(--soft);border:1px solid var(--line);border-radius:26px;padding:clamp(20px,3vw,32px);display:grid;gap:18px;min-width:0}
.svc-visual{aspect-ratio:2/1;max-width:100%;border-radius:18px;background:var(--white);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.svc-visual svg{width:92%;height:auto}
.svc-panel h3{font-family:var(--font-display);font-stretch:115%;font-weight:800;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.1}
.svc-panel > p{color:var(--muted);font-size:var(--t-md)}
.svc-cols{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px}
.svc-cols h4{font-size:var(--t-sm);font-weight:600;color:var(--muted);margin-bottom:8px}
.svc-panel.swap > *{animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
.svc-panel.swap > *:nth-child(2){animation-delay:.04s}
.svc-panel.swap > *:nth-child(3){animation-delay:.08s}
.svc-panel.swap > *:nth-child(4){animation-delay:.12s}
.svc-panel.swap > *:nth-child(5){animation-delay:.16s}
@media (max-width:980px){
  .svc-tabs{grid-template-columns:minmax(0,1fr)}
  .svc-tablist{display:flex;gap:8px;overflow-x:auto;border:0;padding-bottom:8px;scroll-snap-type:x proximity;scrollbar-width:thin}
  .svc-tab{flex:none;display:inline-flex;padding:10px 16px;border:1.5px solid var(--line-2);border-radius:999px;scroll-snap-align:start}
  .svc-tab::before,.svc-go{display:none}
  .svc-name{font-family:var(--font-body);font-stretch:100%;font-weight:600;font-size:var(--t-sm);color:var(--text)}
  .svc-tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink)}
  .svc-tab[aria-selected="true"] .svc-name{color:var(--white);transform:none}
  .svc-panel{position:static}
}
@media (max-width:520px){.svc-cols{grid-template-columns:minmax(0,1fr)}}

.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-family:var(--font-mono);font-size:.74rem;padding:4px 10px;border:1px solid var(--line-2);border-radius:999px;background:var(--white);color:var(--text);white-space:nowrap}
.ticks{display:grid;gap:2px}
.ticks li{position:relative;padding:4px 0 4px 24px}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:14px;border-radius:50%;background:var(--accent-soft)}
.ticks li::after{content:"";position:absolute;left:5px;top:calc(.55em + 3px);width:3.5px;height:6.5px;border:solid var(--accent);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}

/* Illustrations */
.il-faint{fill:none;stroke:var(--line-2);stroke-width:2}
.il-line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.il-flow{stroke-dasharray:6 10;animation:dash16 1.4s linear infinite}
.il-fill{fill:var(--accent)}
.il-softfill{fill:var(--accent-soft)}
.il-sunfill{fill:var(--mint)}
.il-sunsoft{fill:var(--mint-soft)}
.il-card{fill:var(--white);stroke:var(--line-2);stroke-width:2}
.il-txt{font-family:var(--font-body);font-size:13px;font-weight:600;fill:var(--text);text-anchor:middle}
.il-txt.on{fill:var(--white)}
.il-pulse{transform-box:fill-box;transform-origin:center;animation:ipulse 2.4s ease-in-out infinite;animation-delay:var(--d,0s)}
.il-float{animation:float 5s ease-in-out infinite}
.il-orbit{transform-box:view-box;transform-origin:200px 100px;animation:orbit 14s linear infinite}
.il-orbit.rev{animation-duration:22s;animation-direction:reverse}

/* Scale simulator */
.dark{background:var(--ink);color:var(--on-ink)}
.dark .sec-head p{color:var(--muted-ink)}
.dark :focus-visible{outline-color:var(--mint)}
.sim{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:980px){.sim{grid-template-columns:minmax(0,1fr)}}
.sim-panel{display:grid;gap:14px;align-content:start;min-height:320px;min-width:0}
.sim-stage{font-weight:600;color:var(--mint);font-size:var(--t-sm)}
.sim-users{font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:clamp(2.5rem,5vw,4.2rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.sim-unit{font-size:var(--t-sm);color:var(--muted-ink);font-weight:500;margin-top:-4px}
.sim-panel h3{font-family:var(--font-display);font-stretch:115%;font-weight:700;font-size:var(--t-h3);margin-top:8px}
.sim-panel p{color:var(--muted-ink);max-width:44ch}
.sim-panel .tag{background:transparent;border-color:var(--line-ink);color:var(--on-ink)}
.sim-panel.swap > *{animation:rise .45s cubic-bezier(.2,.8,.2,1) both}
@media (max-width:980px){.sim-panel{min-height:0}}
.arch-wrap{border:1px solid var(--line-ink);border-radius:22px;padding:clamp(10px,2vw,20px);overflow-x:auto;background:var(--ink-2)}
.arch{width:100%;min-width:580px;height:auto}
.arch .edge{fill:none;stroke:var(--line-ink);stroke-width:2}
.arch .flow{fill:none;stroke:var(--accent-lt);stroke-width:2.2;stroke-dasharray:3 12;stroke-linecap:round;animation:dash15 var(--flow,2.4s) linear infinite}
.arch .node rect{fill:var(--ink);stroke:var(--line-ink);stroke-width:1.5;transition:stroke .4s}
.arch .node text{fill:var(--on-ink);font-family:var(--font-body);font-size:13px;font-weight:600;text-anchor:middle;dominant-baseline:central}
.arch .node.user rect{fill:var(--mint);stroke:var(--mint)}
.arch .node.user text{fill:var(--ink)}
.arch .node.tool rect{fill:transparent;stroke-dasharray:4 4}
.arch .node.tag text{fill:var(--mint);font-size:11px}
.arch .fresh rect{stroke:var(--mint);stroke-width:2}
.arch [data-min]{transition:opacity .5s ease,transform .55s cubic-bezier(.2,.8,.2,1);transform-box:fill-box;transform-origin:center}
.arch .off{opacity:0;transform:scale(.8)}
.arch path.off{transform:none}
.sim-control{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 28px;align-items:start;margin-top:clamp(28px,4vw,44px)}
@media (max-width:640px){.sim-control{grid-template-columns:minmax(0,1fr)}}
.play{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 1.3rem;border:0;border-radius:999px;background:var(--mint);color:var(--ink);font-weight:700;cursor:pointer;justify-self:start;transition:transform .2s,background-color .2s}
.play:hover{background:var(--white)}
.play:active{transform:scale(.97)}
.play .pi{width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.play[aria-pressed="true"] .pi{width:10px;height:12px;border:0;background:linear-gradient(90deg,currentColor 0 35%,transparent 35% 65%,currentColor 65%)}
.range-wrap{position:relative;padding-top:11px;padding-bottom:34px;min-width:0}
.range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:28px;background:transparent;cursor:pointer;margin:0}
.range:focus{outline:none}
.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--ink),0 0 0 6px var(--mint)}
.range::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(to right,var(--accent-lt) 0 var(--fill,0%),var(--line-ink) var(--fill,0%) 100%)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:var(--mint);border:5px solid var(--ink);box-shadow:0 0 0 2px var(--mint);transition:transform .2s}
.range:active::-webkit-slider-thumb{transform:scale(1.12)}
.range::-moz-range-track{height:8px;border-radius:999px;background:var(--line-ink)}
.range::-moz-range-progress{height:8px;border-radius:999px;background:var(--accent-lt)}
.range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--mint);border:5px solid var(--ink);box-shadow:0 0 0 2px var(--mint)}
.range-ticks{position:absolute;left:0;right:0;bottom:0;height:26px}
.range-ticks button{position:absolute;top:0;transform:translateX(-50%);padding:2px 8px;border:0;border-radius:6px;background:none;color:var(--muted-ink);font-weight:600;font-size:var(--t-sm);cursor:pointer;transition:color .2s}
.range-ticks button:hover,.range-ticks button.on{color:var(--mint)}

/* Process timeline */
.timeline{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;padding-top:44px;--prog:0}
.timeline::before,.timeline::after{content:"";position:absolute;left:0;top:10px;height:3px;border-radius:3px}
.timeline::before{right:0;background:var(--line-2)}
.timeline::after{width:calc(var(--prog) * 100%);background:var(--accent)}
.tl-step{position:relative;display:grid;gap:10px;align-content:start;min-width:0}
.tl-dot{position:absolute;top:-44px;left:0;width:23px;height:23px;border-radius:50%;background:var(--white);border:3px solid var(--line-2);transition:background-color .35s,border-color .35s,box-shadow .35s,transform .35s}
.tl-step.on .tl-dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 6px var(--accent-soft);transform:scale(1.08)}
.tl-when{font-size:var(--t-sm);font-weight:600;color:var(--accent)}
.tl-step h3{font-family:var(--font-display);font-stretch:118%;font-weight:800;font-size:var(--t-h3);line-height:1.1}
.tl-step p{color:var(--muted)}
@media (max-width:880px){
  .timeline{grid-template-columns:minmax(0,1fr);padding-top:0;padding-left:44px;gap:32px}
  .timeline::before,.timeline::after{left:10px;top:0;width:3px;height:auto}
  .timeline::before{bottom:0;right:auto}
  .timeline::after{height:calc(var(--prog) * 100%);width:3px}
  .tl-dot{top:0;left:-44px}
}

/* Founder */
.founder{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.monogram{width:clamp(76px,9vw,116px);aspect-ratio:1;max-width:100%;border-radius:50%;background:var(--accent);color:var(--white);display:grid;place-items:center;font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:clamp(1.5rem,2.6vw,2.3rem);position:relative}
.monogram::after{content:"";position:absolute;right:4%;bottom:4%;width:24%;aspect-ratio:1;border-radius:50%;background:var(--mint);border:4px solid var(--bg)}
.founder figure{display:grid;gap:22px;min-width:0;justify-items:start}
.quote{font-family:var(--font-display);font-stretch:100%;font-weight:500;font-size:clamp(1.4rem,2.8vw,2.3rem);line-height:1.28;letter-spacing:-.01em;max-width:30em;text-wrap:pretty}
.quote-by{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.quote-by strong{font-weight:600;font-size:var(--t-md)}
@media (max-width:620px){.founder{grid-template-columns:minmax(0,1fr)}}

/* Testimonials */
.tm-section{overflow:hidden}
.tm{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:center}
@media (max-width:900px){.tm{grid-template-columns:minmax(0,1fr)}}
.tm-side{display:grid;gap:26px;align-content:start;min-width:0}
.tm-side > p{color:var(--muted);font-size:var(--t-md);max-width:38ch}
.tm-count{font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tm-count .of{color:var(--line-2)}
.tm-nav{display:flex;align-items:center;gap:12px}
.tm-btn{display:grid;place-items:center;width:54px;height:54px;flex:none;border-radius:50%;border:1.5px solid var(--line-2);background:var(--white);color:var(--text);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,transform .2s}
.tm-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.tm-btn:active{transform:scale(.94)}
.tm-btn svg{width:20px;height:20px}
.tm-progress{flex:1;max-width:200px;height:3px;margin-left:8px;border-radius:3px;background:var(--line);overflow:hidden}
.tm-progress i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.tm-progress.run i{animation:fillbar 7s linear forwards}
.tm-people{display:flex;flex-wrap:wrap;gap:12px}
.tm-person{width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;background:var(--av,var(--accent));color:var(--avc,var(--white));font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:.82rem;opacity:.5;box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--line-2);transition:opacity .25s,box-shadow .25s,transform .25s}
.tm-person:hover{opacity:.9;transform:translateY(-2px)}
.tm-person.on{opacity:1;box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent)}
.tm-stage{position:relative;isolation:isolate;min-width:0;padding:0 22px 26px 0}
.tm-stage:focus-visible{outline-offset:8px;border-radius:28px}
.tm-stage::before,.tm-stage::after{content:"";position:absolute;border-radius:30px;transition:transform .5s}
.tm-stage::before{z-index:-1;inset:26px 4px 6px 30px;background:var(--mint);transform:rotate(2.5deg)}
.tm-stage::after{z-index:-2;inset:48px -6px -6px 56px;background:var(--line);transform:rotate(5deg)}
.tm-stage.bump::before{animation:bump .65s cubic-bezier(.2,.8,.2,1)}
@keyframes bump{40%{transform:rotate(4.5deg) translateX(10px)}}
.tm-card{position:relative;display:grid;gap:28px;align-content:space-between;min-height:400px;margin:0;padding:clamp(28px,4vw,52px);border-radius:28px;background:var(--ink);color:var(--on-ink);box-shadow:var(--shadow);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.tm-card :focus-visible{outline-color:var(--mint)}
.tm-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.tm-mark{width:54px;height:42px;flex:none;color:var(--mint)}
.tm-meta{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.tm-tag{font-size:.78rem;font-weight:600;padding:5px 12px;border-radius:999px;border:1px solid var(--line-ink);color:var(--on-ink)}
.tm-ph{font-size:.78rem;font-weight:600;padding:5px 12px;border-radius:999px;background:var(--mint-soft);color:var(--mint-ink)}
.tm-quote{margin:0;font-family:var(--font-display);font-stretch:100%;font-weight:500;font-size:clamp(1.3rem,2.3vw,1.85rem);line-height:1.34;letter-spacing:-.01em;text-wrap:pretty}
.tm-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 20px;padding-top:24px;border-top:1px solid var(--line-ink)}
.tm-who{display:flex;align-items:center;gap:14px;min-width:0}
.tm-av{display:grid;place-items:center;width:54px;height:54px;flex:none;border-radius:50%;background:var(--av,var(--accent));color:var(--avc,var(--white));font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:1rem}
.tm-id{display:grid;min-width:0}
.tm-name{font-weight:600;font-size:var(--t-md)}
.tm-role{color:var(--muted-ink);font-size:var(--t-sm)}
.tm-result{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--ink-3);color:var(--mint);font-weight:600;font-size:var(--t-sm)}
.tm-result::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.tm-card.swap .tm-anim{animation:tmIn .55s cubic-bezier(.2,.8,.2,1) both}
.tm-card.swap .tm-quote{animation-delay:.05s}
.tm-card.swap .tm-foot{animation-delay:.1s}
@keyframes tmIn{from{opacity:0;transform:translateX(calc(var(--dx,1) * 32px))}to{opacity:1;transform:none}}
@media (max-width:560px){.tm-card{min-height:440px}.tm-stage{padding-right:14px}}

/* Proof section, shown until real testimonials are added */
.pf-stats{display:flex;flex-wrap:wrap;gap:16px 40px}
.pf-stats div{display:grid;gap:6px}
.pf-stats b{font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;letter-spacing:-.02em}
.pf-stats span{color:var(--muted);font-size:var(--t-sm)}
.pf-actions{display:flex;flex-wrap:wrap;gap:12px}
.tm-card.pf-card{min-height:0;gap:28px;user-select:auto;-webkit-user-select:auto}
.pf-kicker{display:inline-flex;font-size:.78rem;font-weight:600;padding:5px 12px;border-radius:999px;background:var(--mint-soft);color:var(--mint-ink)}
.pf-head h3{margin:16px 0 0;font-family:var(--font-display);font-stretch:100%;font-weight:600;font-size:clamp(1.35rem,2.3vw,1.85rem);line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.pf-list{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.pf-list li{display:flex;gap:14px;align-items:flex-start;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * .12s)}
.pf-list li:nth-child(2){--i:1}.pf-list li:nth-child(3){--i:2}.pf-list li:nth-child(4){--i:3}
.pf-list b{display:block;font-weight:600;font-size:var(--t-md);color:var(--on-ink)}
.pf-list div span{display:block;margin-top:2px;color:var(--muted-ink);font-size:var(--t-sm)}
.pf-tick{flex:none;display:grid;place-items:center;width:30px;height:30px;margin-top:1px;border-radius:50%;background:var(--mint);color:var(--ink)}
.pf-tick svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pf-card.pre:not(.in) .pf-list li{opacity:0;transform:translateY(12px)}
.pf-card.pre .pf-tick svg{stroke-dasharray:16;stroke-dashoffset:16}
.pf-card.pre.in .pf-tick svg{animation:pfTick .5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0) * .12s + .25s)}
.pf-sign{display:flex;align-items:center;gap:14px;padding-top:22px;border-top:1px solid var(--line-ink)}
.pf-av{--av:var(--mint);--avc:var(--ink)}
@keyframes pfTick{to{stroke-dashoffset:0}}
.founder-quote{margin-top:22px;padding-left:18px;border-left:3px solid var(--accent);font-family:var(--font-display);font-stretch:100%;font-weight:500;font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.4;color:var(--text);max-width:52ch}

/* FAQ */
.faq-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px clamp(24px,5vw,72px);align-items:start}
.faq-layout .side p{color:var(--muted);margin-top:20px;max-width:34ch}
@media (max-width:880px){.faq-layout{grid-template-columns:minmax(0,1fr)}}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:22px;font-weight:600;font-size:var(--t-md);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.plus{flex:none;position:relative;width:34px;height:34px;border-radius:50%;background:var(--soft);transition:background-color .25s}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;background:var(--text);transform:translate(-50%,-50%);transition:transform .3s,background-color .25s}
.plus::after{transform:translate(-50%,-50%) rotate(90deg)}
details[open] .plus{background:var(--accent)}
details[open] .plus::before,details[open] .plus::after{background:var(--white)}
details[open] .plus::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq .answer{padding-bottom:24px;color:var(--muted);max-width:62ch}
details[open] .answer{animation:rise .35s cubic-bezier(.2,.8,.2,1) both}

/* CTA band */
.band{position:relative;overflow:hidden;isolation:isolate;background:var(--mint);color:var(--ink)}
.band :focus-visible{outline-color:var(--ink)}
.band-rings{position:absolute;z-index:-1;right:-140px;top:50%;width:560px;aspect-ratio:1;translate:0 -50%;pointer-events:none}
.band-rings circle{fill:none;stroke:rgba(0,0,0,.14);stroke-width:1.5}
.band-rings .spin-a{transform-origin:280px 280px;animation:orbit 40s linear infinite}
.band-rings .spin-b{transform-origin:280px 280px;animation:orbit 60s linear infinite reverse}
.band-rings .sat{fill:var(--ink);stroke:none}
.band-inner{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px 64px;align-items:end;padding-block:clamp(72px,9vw,128px)}
.band .display{font-size:var(--t-h1)}
.band p{color:rgba(0,0,0,.72);font-size:var(--t-md);max-width:40ch;margin-bottom:24px}
@media (max-width:880px){.band-inner{grid-template-columns:minmax(0,1fr)}}

/* Inner page hero */
.page-hero{padding-block:calc(var(--header-h) + clamp(40px,7vw,96px)) clamp(40px,6vw,80px)}
.page-hero .kicker{display:block;margin-bottom:20px}
.page-hero h1{font-size:var(--t-h1);max-width:14em}
.page-hero .lede{margin-top:28px}

/* Services page */
.svc-list{border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.9fr);gap:24px clamp(24px,4vw,56px);padding:clamp(32px,4vw,48px) clamp(12px,2vw,24px);border-bottom:1px solid var(--line);border-radius:18px;transition:background-color .3s}
.svc-row:hover{background:var(--soft)}
.svc-row > div{min-width:0}
.svc-row h2{font-family:var(--font-display);font-stretch:118%;font-weight:800;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.1;margin-block:8px 14px;text-wrap:balance;transition:color .25s}
.svc-row:hover h2{color:var(--accent)}
.svc-row p{color:var(--muted)}
.svc-row h4{font-size:var(--t-sm);font-weight:600;color:var(--muted);margin-bottom:10px}
@media (max-width:900px){.svc-row{grid-template-columns:minmax(0,1fr)}}
.models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
@media (max-width:900px){.models{grid-template-columns:minmax(0,1fr)}}
.model{display:grid;gap:14px;align-content:start;padding:clamp(24px,3vw,34px);border:1px solid var(--line);border-radius:22px;background:var(--white);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.model:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.model.feature{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.model.feature p{color:var(--muted-ink)}
.model.feature .ticks li::before{background:var(--ink-3)}
.model.feature .ticks li::after{border-color:var(--mint)}
.model h3{font-family:var(--font-display);font-stretch:115%;font-weight:800;font-size:var(--t-h3)}
.model p{color:var(--muted)}
.model .kicker{color:var(--accent)}
.model.feature .kicker{color:var(--mint)}
.stack{border-top:1px solid var(--line)}
.stack-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:10px 24px;padding-block:18px;border-bottom:1px solid var(--line);align-items:center}
.stack-row h3{font-weight:600;font-size:var(--t-base)}
.stack-row .tag{transition:background-color .2s,color .2s,border-color .2s,transform .2s}
.stack-row .tag:hover{background:var(--ink);color:var(--white);border-color:var(--ink);transform:translateY(-2px)}
@media (max-width:620px){.stack-row{grid-template-columns:minmax(0,1fr)}}

/* Work page */
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,4vw,52px) clamp(20px,3vw,32px)}
@media (max-width:760px){.cases{grid-template-columns:minmax(0,1fr)}}
.case{display:grid;gap:16px;align-content:start;min-width:0}
.case-cover{aspect-ratio:16/10;max-width:100%;border-radius:22px;border:1px solid var(--line);background-color:var(--soft);background-image:radial-gradient(var(--line-2) 1.2px,transparent 1.5px);background-size:18px 18px;display:grid;place-items:center;overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.case-cover svg{width:80%;height:auto;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.case:hover .case-cover{transform:translateY(-6px);box-shadow:var(--shadow)}
.case:hover .case-cover svg{transform:scale(1.05)}
.case-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ph{font-size:.72rem;font-weight:600;color:var(--mint-ink);background:var(--mint-soft);border-radius:999px;padding:3px 10px}
.case h3{font-family:var(--font-display);font-stretch:112%;font-weight:800;font-size:var(--t-h3);line-height:1.15}
.case p{color:var(--muted)}
.case-stats{display:flex;flex-wrap:wrap;gap:8px 32px;padding-top:14px;border-top:1px solid var(--line)}
.case-stats div{display:grid;gap:2px}
.case-stats dt{font-size:var(--t-sm);color:var(--muted)}
.case-stats dd{font-weight:600}
.note{margin-top:clamp(48px,6vw,72px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 32px;padding:clamp(24px,3vw,36px);border-radius:24px;background:var(--ink);color:var(--on-ink)}
.note h2{font-family:var(--font-display);font-stretch:112%;font-weight:800;font-size:var(--t-h3)}
.note p{color:var(--muted-ink);margin-top:6px;max-width:52ch}

/* About page */
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px clamp(24px,5vw,72px)}
@media (max-width:880px){.split{grid-template-columns:minmax(0,1fr)}}
.founder-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start;padding:clamp(24px,3.5vw,44px);border-radius:26px;background:var(--soft)}
.founder-card h3{font-family:var(--font-display);font-stretch:118%;font-weight:800;font-size:var(--t-h2);line-height:1}
.founder-card .kicker{display:block;margin-block:10px 18px}
.founder-card p{max-width:58ch;font-size:var(--t-md);color:var(--muted)}
@media (max-width:620px){.founder-card{grid-template-columns:minmax(0,1fr)}}
.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,22px)}
@media (max-width:980px){.values{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.values{grid-template-columns:minmax(0,1fr)}}
.value{display:grid;gap:12px;align-content:start;padding:clamp(22px,2.6vw,30px);border:1px solid var(--line);border-radius:22px;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.value:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.value-ic{width:44px;height:44px;border-radius:14px;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent)}
.value h3{font-family:var(--font-display);font-stretch:112%;font-weight:800;font-size:1.25rem;line-height:1.15}
.value p{color:var(--muted)}

/* Contact page */
.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,88px);align-items:start;padding-block:calc(var(--header-h) + clamp(40px,7vw,88px)) clamp(48px,8vw,104px)}
@media (max-width:900px){.contact{grid-template-columns:minmax(0,1fr)}}
.contact-aside{display:grid;gap:26px;min-width:0}
.contact-aside h1{font-size:var(--t-h1)}
.contact-aside > p{color:var(--muted);font-size:var(--t-md);max-width:40ch}
.facts{border-top:1px solid var(--line)}
.fact{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding-block:16px;border-bottom:1px solid var(--line);align-items:center}
.fact > span:first-child{color:var(--muted);font-size:var(--t-sm);font-weight:600}
.email-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;min-width:0}
.email-text{font-weight:600;-webkit-user-select:all;user-select:all;overflow-wrap:anywhere}
.form-card{background:var(--white);border:1px solid var(--line);border-radius:26px;padding:clamp(20px,3.5vw,40px);min-width:0;box-shadow:var(--shadow)}
.form{display:grid;gap:22px}
.field{display:grid;gap:8px;min-width:0;border:0;padding:0;margin:0}
.field > label,.field > legend{font-weight:600;font-size:var(--t-sm);padding:0}
.field > legend{margin-bottom:10px}
.req{color:var(--accent)}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px}
@media (max-width:560px){.field-row{grid-template-columns:minmax(0,1fr)}}
.input{width:100%;min-height:50px;padding:12px 14px;background:var(--soft);border:1.5px solid transparent;border-radius:12px;transition:border-color .2s,box-shadow .2s,background-color .2s}
.input::placeholder{color:var(--muted);opacity:.85}
.input:hover{border-color:var(--line-2)}
.input:focus{outline:none;background:var(--white);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.input[aria-invalid="true"]{border-color:var(--danger);background:var(--white)}
textarea.input{min-height:140px;resize:vertical;line-height:1.5}
select.input{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23575F7A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.form .chip span{min-height:40px;padding:0 14px;font-size:var(--t-sm)}
.form-error{color:var(--danger);font-size:var(--t-sm);font-weight:500}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.form-note{font-size:var(--t-sm);color:var(--muted);max-width:40ch}
.result{display:grid;gap:18px;justify-items:start}
.result .check{width:64px;height:64px}
.result .check circle{fill:var(--ok-soft)}
.result .check path{fill:none;stroke:var(--ok);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.result:not([hidden]) .check path{animation:drawfrom .6s .2s cubic-bezier(.4,0,.2,1) both}
.result h2{font-family:var(--font-display);font-stretch:112%;font-weight:800;font-size:var(--t-h3)}
.result > p{color:var(--muted)}
.result pre{width:100%;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto;padding:16px;background:var(--soft);border-radius:12px;font-family:var(--font-mono);font-size:var(--t-sm);line-height:1.6}

/* Footer */
.site-footer{position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:var(--on-ink);padding-top:clamp(64px,9vw,120px)}
.site-footer :focus-visible{outline-color:var(--mint)}
.footer-glow{position:absolute;z-index:-1;right:-12%;top:-35%;width:70%;max-width:100%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--mint) 20%,transparent),transparent 65%);pointer-events:none}
.footer-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px 56px;align-items:end;padding-bottom:clamp(48px,6vw,72px)}
@media (max-width:900px){.footer-top{grid-template-columns:minmax(0,1fr)}}
.footer-tag{font-size:clamp(2.6rem,7.4vw,6.6rem);line-height:.9}
.footer-tag .w{display:inline-block;transition:transform .45s cubic-bezier(.2,.8,.2,1),color .3s}
.footer-tag .w:hover{transform:translateY(-.08em);color:var(--mint)}
.footer-dot{color:var(--mint)}
.footer-cta{display:grid;gap:20px;justify-items:start}
.footer-cta p{color:var(--muted-ink);font-size:var(--t-md);max-width:34ch}
.btn-mint{gap:12px;padding:0 7px 0 22px;background:var(--mint);color:var(--ink);font-family:var(--font-display);font-stretch:108%;font-weight:700}
.btn-mint:hover{background:var(--white)}
.cta-ic.dark{background:var(--ink);color:var(--mint)}
.btn-mint:hover .cta-ic{transform:rotate(45deg)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:40px 32px;padding-block:clamp(40px,5vw,60px);border-top:1px solid var(--line-ink)}
@media (max-width:980px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.footer-grid{grid-template-columns:minmax(0,1fr)}}
.footer-brand{display:grid;gap:22px;align-content:start;justify-items:start}
.footer-brand p{color:var(--muted-ink);max-width:34ch}
.site-footer .brand{color:var(--on-ink);margin-right:0}
.site-footer .logo{height:24px}
.footer-col{min-width:0}
.footer-col h2{margin-bottom:18px;font-family:var(--font-display);font-stretch:108%;font-size:.85rem;font-weight:700;color:var(--mint)}
.footer-col ul{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.footer-col a{display:inline-flex;align-items:center;gap:0;color:var(--muted-ink);text-decoration:none;transition:color .25s,gap .3s cubic-bezier(.2,.8,.2,1)}
.footer-col a::before{content:"";width:0;height:2px;border-radius:2px;background:var(--mint);transition:width .3s cubic-bezier(.2,.8,.2,1)}
.footer-col a:hover{color:var(--on-ink);gap:8px}
.footer-col a:hover::before{width:12px}
.footer-contact{display:grid;gap:14px;align-content:start;justify-items:start}
.footer-email{font-family:var(--font-display);font-stretch:108%;font-weight:700;font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--on-ink);overflow-wrap:anywhere}
.copy-chip{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line-ink);background:transparent;color:var(--on-ink);font-size:var(--t-sm);font-weight:600;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.copy-chip:hover{background:var(--mint);border-color:var(--mint);color:var(--ink)}
.footer-note{display:inline-flex;align-items:center;gap:10px;color:var(--muted-ink);font-size:var(--t-sm)}
.pulse-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--mint);animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mint) 55%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 28px;padding-block:22px;border-top:1px solid var(--line-ink);color:var(--muted-ink);font-size:var(--t-sm)}
.to-top{display:inline-flex;align-items:center;gap:10px;padding:0;border:0;background:none;color:var(--on-ink);font-size:var(--t-sm);font-weight:600;cursor:pointer}
.to-top-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-ink);transition:background-color .2s,border-color .2s,color .2s,transform .3s cubic-bezier(.2,.8,.2,1)}
.to-top-ic svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.to-top:hover .to-top-ic{background:var(--mint);border-color:var(--mint);color:var(--ink);transform:translateY(-3px)}
.footer-mark{padding-inline:clamp(16px,4vw,40px);color:var(--mint);line-height:0;opacity:.95;-webkit-mask-image:linear-gradient(180deg,#000 5%,transparent 88%);mask-image:linear-gradient(180deg,#000 5%,transparent 88%)}
.footer-mark .logo{display:block;width:100%;height:auto;max-width:1260px;margin-inline:auto;transform:translateY(24%)}

.magnetic{transition:transform .3s cubic-bezier(.2,.8,.2,1),background-color .2s,color .2s,border-color .2s,box-shadow .25s}

/* Social links */
.social{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.social a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line-2);color:var(--text);text-decoration:none;transition:background-color .2s,color .2s,border-color .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.social a:hover{background:var(--ink);border-color:var(--ink);color:var(--white);transform:translateY(-3px)}
.social svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.site-footer .social{display:flex;margin-top:6px}
.site-footer .social a{border-color:var(--line-ink);color:var(--on-ink)}
.site-footer .social a:hover{background:var(--mint);border-color:var(--mint);color:var(--ink)}

.result .check.mail circle{fill:var(--mint-soft)}
.result .check.mail path{stroke:var(--ink);stroke-width:3;stroke-dasharray:none;animation:none}

/* Cursor: a square that inverts whatever is under it (mouse only) */
html.has-cursor,html.has-cursor *{cursor:none!important}
.cursor{position:fixed;left:0;top:0;z-index:300;width:16px;height:16px;border-radius:2px;background:var(--white);mix-blend-mode:difference;pointer-events:none;opacity:0;will-change:transform;transition:width .25s cubic-bezier(.2,.8,.2,1),height .25s cubic-bezier(.2,.8,.2,1),border-radius .25s,opacity .2s}
.cursor.on{opacity:1}
.cursor.big{width:46px;height:46px;border-radius:6px}
.cursor.press{width:11px;height:11px}
.cursor.big.press{width:38px;height:38px}

/* Spam trap, hidden from people */
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.btn[disabled]{opacity:.6;cursor:progress}

/* First-visit loader: the sun appears, its glow floods the screen, fades to white, then the page shows */
html.loading{overflow:hidden}
.loader{position:fixed;inset:0;z-index:200;display:none;place-items:center;overflow:hidden;background:var(--bg);transition:opacity .6s ease}
html.loading .loader,.loader.leaving{display:grid}
.loader.leaving{opacity:0}
.loader-glow{position:absolute;left:50%;top:50%;width:60vmax;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--mint) 0%,color-mix(in srgb,var(--mint) 72%,transparent) 32%,transparent 70%);
  opacity:0;transform:translate(-50%,-50%) scale(.15);animation:glowGrow 1.5s .75s cubic-bezier(.45,0,.2,1) forwards}
.loader-sun{position:relative;width:clamp(96px,16vw,150px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 36% 32%,var(--mint-hi) 0%,var(--mint) 46%,var(--mint-lo) 100%);
  box-shadow:0 0 50px 14px color-mix(in srgb,var(--mint) 55%,transparent);
  animation:sunIn .85s cubic-bezier(.2,.8,.2,1) both,sunPulse 2.4s 1.7s ease-in-out infinite}
.loader-white{position:absolute;inset:0;background:var(--bg);opacity:0;transition:opacity .6s ease}
.loader.whiten .loader-white{opacity:1}
@keyframes glowGrow{to{opacity:1;transform:translate(-50%,-50%) scale(3.2)}}
@keyframes sunIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes sunPulse{0%,100%{box-shadow:0 0 50px 14px color-mix(in srgb,var(--mint) 55%,transparent)}50%{box-shadow:0 0 100px 36px color-mix(in srgb,var(--mint) 75%,transparent)}}

.tm-photo{object-fit:cover;padding:0;border:2px solid var(--line-ink)}
.tm-person{padding:0;overflow:hidden}
.tm-person img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}

/* Work: filters */
.wfilter{position:relative;display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;margin-bottom:clamp(28px,4vw,44px);border-radius:24px;background:color-mix(in srgb,var(--ink) 5%,transparent);max-width:100%}
.wfilter button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:0;border-radius:999px;background:none;cursor:pointer;font-family:var(--font-display);font-stretch:108%;font-weight:600;font-size:.92rem;color:color-mix(in srgb,var(--ink) 70%,transparent);transition:color .25s}
.wfilter button[aria-pressed="true"],.wfilter button:hover{color:var(--ink)}
.wf-n{font-family:var(--font-body);font-size:.72rem;font-weight:600;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--ink) 9%,transparent)}
.wf-ind{position:absolute;left:0;top:0;width:0;height:0;border-radius:999px;background:var(--mint);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1),height .45s,opacity .25s}
.wfilter.no-anim .wf-ind{transition:none}

/* Work: cards */
.wgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,4.5vw,64px) clamp(20px,3vw,36px)}
@media (max-width:820px){.wgrid{grid-template-columns:minmax(0,1fr)}}
.wcase{display:grid;gap:20px;align-content:start;min-width:0}
.wcase-cover{position:relative;isolation:isolate;display:grid;place-items:center;aspect-ratio:6/5;max-width:100%;overflow:hidden;border-radius:28px;background:var(--pa-soft);cursor:pointer;container-type:inline-size;transition:box-shadow .5s,transform .5s cubic-bezier(.2,.8,.2,1)}
.wcase-cover::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 60% at 75% 25%,color-mix(in srgb,var(--pa) 24%,transparent),transparent 70%),radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--pa) 22%,transparent) 1px,transparent 1.6px) 0 0/18px 18px}
.wcase-cover:hover{box-shadow:0 36px 70px -40px color-mix(in srgb,var(--pa) 75%,transparent);transform:translateY(-4px)}
.wcase-stage{position:relative;display:grid;place-items:center;width:100%;height:100%;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.wcase-stage.pair .dev-phone{width:31cqi}
.wcase-stage.pair .w-front,.wcase-stage.pair .w-back{position:absolute;top:50%;left:50%;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.wcase-stage.pair .w-front{z-index:2;transform:translate(-78%,-48%) rotate(-4deg)}
.wcase-stage.pair .w-back{z-index:1;transform:translate(-18%,-54%) rotate(7deg)}
.wcase-cover:hover .w-front{transform:translate(-88%,-50%) rotate(-7deg)}
.wcase-cover:hover .w-back{transform:translate(-6%,-56%) rotate(10deg)}
.wcase-stage.web .dev-web{width:84cqi}
.wfloat{position:absolute;right:5%;bottom:8%;display:grid;gap:2px;padding:12px 16px;border-radius:16px;background:var(--white);box-shadow:var(--shadow);font-size:clamp(.75rem,2.2cqi,.95rem);transform:translateY(10px);opacity:.92;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s}
.wfloat b{font-family:var(--font-display);font-stretch:112%;font-weight:800;font-size:1.35em;color:var(--pa)}
.wcase-cover:hover .wfloat{transform:translateY(-6px);opacity:1}
.wcase-meta{display:grid;gap:10px}
.wcase-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.badge-concept{font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--ink);color:var(--mint)}
.badge-concept.client{background:var(--mint);color:var(--ink)}
.wcase h3{font-family:var(--font-display);font-stretch:115%;font-weight:800;font-size:var(--t-h3);line-height:1.1}
.wcase-meta > p{color:var(--muted);max-width:46ch}
.wcase-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:4px}
.wcase-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 6px 0 16px;border-radius:999px;border:1.5px solid var(--line-2);background:var(--white);font-weight:600;font-size:var(--t-sm);cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.wcase-btn .cta-ic{width:30px;height:30px}
.wcase-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.wcase-btn:hover .cta-ic{transform:rotate(45deg)}

/* Work: case-study viewer */
html.modal-open{overflow:hidden}
.wmodal{position:fixed;inset:0;z-index:150;display:grid;align-items:end;justify-items:center}
.wmodal-backdrop{position:absolute;inset:0;background:rgba(10,10,10,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .35s}
.wmodal-panel{position:relative;width:min(1200px,100%);max-height:calc(100% - 20px);overflow:auto;overscroll-behavior:contain;border-radius:28px 28px 0 0;background:var(--bg);transform:translateY(48px);opacity:0;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .35s}
.wmodal-panel:focus{outline:none}
.wmodal.open .wmodal-backdrop{opacity:1}
.wmodal.open .wmodal-panel{transform:none;opacity:1}
.wm-bar{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px clamp(16px,3vw,28px);background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.wm-count{font-family:var(--font-display);font-stretch:110%;font-weight:700;font-size:var(--t-sm);color:var(--muted);font-variant-numeric:tabular-nums}
.wm-actions{display:flex;gap:8px}
.wm-nav,.wm-close{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--white);cursor:pointer;color:var(--ink);transition:background-color .2s,color .2s,border-color .2s}
.wm-close{background:var(--ink);border-color:var(--ink);color:var(--white)}
.wm-nav:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.wm-close:hover{background:var(--mint);border-color:var(--mint);color:var(--ink)}
.wm-nav svg,.wm-close svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wm-body{padding:clamp(20px,4vw,48px)}
.wm-body.swap > *{animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
.wm-head{display:grid;gap:12px;max-width:52rem}
.wm-head h2{font-family:var(--font-display);font-stretch:120%;font-weight:800;font-size:var(--t-h2);line-height:1}
.wm-gallery{position:relative;display:grid;gap:22px;justify-items:center;margin-top:28px;padding:clamp(24px,4vw,52px) clamp(14px,3vw,40px);border-radius:26px;background:var(--pa-soft);overflow:hidden}
.wm-gallery::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 80% 20%,color-mix(in srgb,var(--pa) 22%,transparent),transparent 70%);pointer-events:none}
.wm-shots{position:relative;display:grid;place-items:center;width:100%}
.wm-shot{grid-area:1/1;display:grid;place-items:center;width:100%;opacity:0;transform:translateY(18px) scale(.98);pointer-events:none;transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1)}
.wm-shot.on{opacity:1;transform:none;pointer-events:auto}
.wm-shot .dev-phone{width:min(300px,66vw)}
.wm-shot .dev-web{width:min(880px,100%)}
.wm-thumbs{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.wm-thumbs button{min-height:40px;padding:0 16px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--ink) 14%,transparent);background:var(--white);font-weight:600;font-size:var(--t-sm);cursor:pointer}
.wm-thumbs button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.wm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px clamp(24px,3vw,40px);margin-top:clamp(28px,4vw,44px)}
@media (max-width:860px){.wm-grid{grid-template-columns:minmax(0,1fr)}}
.wm-grid h3{margin-bottom:10px;font-family:var(--font-display);font-stretch:110%;font-weight:700;font-size:1.1rem}
.wm-grid p{color:var(--muted)}
.wm-grid .wm-h3b{margin-top:20px}
.wm-cta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 24px;margin-top:clamp(28px,4vw,44px);padding:clamp(20px,3vw,28px);border-radius:22px;background:var(--ink);color:var(--on-ink)}
.wm-cta b{font-family:var(--font-display);font-stretch:112%;font-size:1.2rem}
.wm-cta p{color:var(--muted-ink);margin-top:4px}

/* Device frames for the concept screens. Everything inside a screen is sized in em,
   and the screen font size follows the device width, so the same screen scales cleanly. */
.dev-phone{position:relative;width:200px;max-width:100%;aspect-ratio:9/18.6;padding:3.4%;border-radius:15% / 7.4%;background:#0B0B0C;box-shadow:0 34px 60px -30px rgba(0,0,0,.5),inset 0 0 0 1.5px #2C2C2E;container-type:inline-size}
.dev-phone::before{content:"";position:absolute;z-index:4;left:50%;top:4.4%;width:27%;height:2.7%;border-radius:999px;background:#0B0B0C;transform:translateX(-50%)}
.dev-phone .scr{position:relative;width:100%;height:100%;overflow:hidden;border-radius:12% / 5.8%;background:#fff;font-size:5.1cqi}
.dev-web{position:relative;width:100%;max-width:100%;overflow:hidden;border-radius:12px;border:1px solid rgba(0,0,0,.08);background:#fff;box-shadow:0 34px 60px -32px rgba(0,0,0,.45);container-type:inline-size}
.dev-web .wbar{display:flex;align-items:center;gap:.55em;height:2.7em;padding:0 1em;background:#F4F4F4;border-bottom:1px solid #E8E8E8;font-size:1.55cqi}
.dev-web .wbar i{width:.8em;height:.8em;border-radius:50%;background:#D5D5D5}
.dev-web .wbar span{display:flex;align-items:center;flex:1;max-width:26em;height:1.75em;margin-left:1em;padding:0 1em;border-radius:999px;background:#fff;border:1px solid #E6E6E6;color:#8A8A8A;font-size:.85em;white-space:nowrap;overflow:hidden}
.dev-web.dark{border-color:#222}
.dev-web.dark .wbar{background:#17181C;border-color:#26272C}
.dev-web.dark .wbar i{background:#3A3B40}
.dev-web.dark .wbar span{background:#0F1013;border-color:#2A2B30;color:#8C8F98}
.dev-web .scr{position:relative;aspect-ratio:16/10;overflow:hidden;background:#fff;font-size:1.72cqi}
.scr{color:#151515;font-family:var(--font-body);line-height:1.35;text-align:left;--ink2:#151515}
.scr b{font-weight:600}
.scr p{margin:0}
.scr-inner{position:absolute;left:0;right:0;top:0;min-height:100%;transition:transform 4.5s cubic-bezier(.3,.1,.2,1)}
.wcase-cover:hover .scr-inner,.wm-shot.on .dev-phone:hover .scr-inner,.wm-shot.on .dev-web:hover .scr-inner{transform:translateY(calc(var(--scroll,0em) * -1))}

/* Concept UI kit */
.u-status{display:flex;justify-content:space-between;align-items:center;padding:1.15em 1.7em .3em;font-size:.82em;font-weight:600}
.u-status.over{position:absolute;left:0;right:0;top:0;z-index:2}
.u-sig{display:flex;align-items:flex-end;gap:.15em;height:.8em}
.u-sig i{width:.22em;background:currentColor;border-radius:.1em}
.u-sig i:nth-child(1){height:40%}.u-sig i:nth-child(2){height:70%}.u-sig i:nth-child(3){height:100%}
.u-top{display:flex;align-items:center;justify-content:space-between;gap:.8em;padding:.6em 1.3em}
.u-strong{font-weight:700;font-size:1.05em}
.u-sub{color:#7A7A7A;font-size:.8em}
.u-h{font-size:1.4em;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.u-h.xl{font-size:2.4em;line-height:1.05;color:#fff;text-shadow:0 .1em .4em rgba(0,0,0,.25)}
.u-av{display:grid;place-items:center;flex:none;width:2.5em;height:2.5em;border-radius:50%;background:var(--pa);color:#fff;font-weight:700;font-size:.82em}
.u-av.dark{background:#151515}
.u-grow{flex:1;min-width:0}
.u-row{display:flex;align-items:center;gap:.6em}
.u-row.between{justify-content:space-between}
.u-row.wrap{flex-wrap:wrap}
.u-search{display:flex;align-items:center;gap:.6em;margin:.5em 1.3em;padding:.75em 1em;border-radius:.9em;background:#F3F3F3;color:#8A8A8A;font-size:.85em}
.u-search::before{content:"";flex:none;width:.85em;height:.85em;border-radius:50%;border:.14em solid #9A9A9A}
.u-banner{display:flex;align-items:center;justify-content:space-between;gap:.6em;margin:.6em 1.3em;padding:1em 1.1em;border-radius:1em;background:var(--pa);color:#fff}
.u-banner b{display:block;font-size:1.1em}
.u-banner span{font-size:.78em;opacity:.92}
.u-big{font-size:2.2em;line-height:1}
.u-chips{display:flex;gap:.45em;padding:.45em 1.3em;overflow:hidden;white-space:nowrap}
.u-chips span{padding:.45em .9em;border-radius:999px;background:#F2F2F2;font-size:.8em;font-weight:500}
.u-chips .on{background:#151515;color:#fff}
.u-sec{display:flex;justify-content:space-between;align-items:baseline;padding:.8em 1.3em .3em}
.u-sec.wide{padding:1.2em 2em .4em}
.u-link{color:var(--pa);font-size:.8em;font-weight:600}
.u-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.65em;padding:.4em 1.3em 7em}
.u-prod{display:grid;gap:.15em;padding:.55em;border:1px solid #EFEFEF;border-radius:1em}
.u-img{display:grid;place-items:center;aspect-ratio:1.25;border-radius:.7em;background:var(--bg,#F5F5F5);font-size:2.4em;line-height:1}
.u-price{display:flex;justify-content:space-between;align-items:center;margin-top:.15em}
.u-add{display:grid;place-items:center;width:1.8em;height:1.8em;border-radius:.6em;background:var(--pa-soft);color:var(--pa);font-weight:700}
.u-cartbar{position:absolute;z-index:2;left:1em;right:1em;bottom:4.6em;display:flex;justify-content:space-between;align-items:center;padding:.85em 1.1em;border-radius:1em;background:var(--pa);color:#fff;font-size:.9em;box-shadow:0 .8em 1.6em -.6em color-mix(in srgb,var(--pa) 70%,transparent)}
.u-tabbar{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:.9em 0 1.6em;background:#fff;border-top:1px solid #EFEFEF;color:#9A9A9A;font-size:.72em;font-weight:500}
.u-tabbar .on{color:var(--pa);font-weight:700}
.u-btn{display:block;padding:.85em 1em;border-radius:.85em;background:var(--pa);color:#fff;font-weight:600;text-align:center;white-space:nowrap}
.u-btn.sm{display:inline-block;padding:.6em 1em;font-size:.85em}
.u-btn.ghost{background:var(--pa-soft);color:var(--pa)}
.u-pillbtn{padding:.4em .9em;border-radius:999px;background:var(--pa-soft);color:var(--pa);font-size:.8em;font-weight:600}
.u-card{padding:.8em .9em;border:1px solid #EFEFEF;border-radius:1em;background:#fff}
.u-badge{display:inline-flex;align-items:center;padding:.25em .65em;border-radius:999px;background:var(--pa-soft);color:var(--pa);font-size:.72em;font-weight:600;white-space:nowrap}
.u-badge.ok{background:#E6F6EC;color:#18884A}
.u-badge.warn{background:#FFF3DC;color:#A86200}
.u-badge.bad{background:#FDE8E8;color:#C23030}
.u-stars{color:#F2A516;font-size:.75em;letter-spacing:.06em}
.u-stack{display:grid;gap:.6em;padding:.4em 1.3em 6em}
.u-doc{display:grid;gap:.6em}
.u-bell{width:2.3em;height:2.3em;border-radius:50%;background:#F2F2F2}
.u-back{display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;background:#F2F2F2;font-size:1.1em}
.u-mx{margin:.4em 1.3em}
.u-days{display:grid;grid-template-columns:repeat(6,1fr);gap:.4em;padding:.3em 1.3em}
.u-days span{display:grid;justify-items:center;gap:.1em;padding:.55em 0;border-radius:.8em;background:#F4F4F4;font-weight:700}
.u-days small{font-weight:500;font-size:.7em;color:#8A8A8A}
.u-days .on{background:var(--pa);color:#fff}
.u-days .on small{color:#fff}
.u-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:.45em;padding:.3em 1.3em}
.u-slots span{padding:.6em 0;border-radius:.7em;border:1px solid #E6E6E6;text-align:center;font-size:.85em;font-weight:600}
.u-slots .off{color:#C2C2C2;text-decoration:line-through}
.u-slots .on{background:var(--pa);border-color:var(--pa);color:#fff}
.u-bottom{position:absolute;left:1.3em;right:1.3em;bottom:1.8em}
.u-map{position:absolute;inset:0 0 38% 0}
.u-map svg{width:100%;height:100%;display:block}
.m-bg{fill:#EEF1EC}.m-park{fill:#D9EED3}.m-water{fill:#D3E6F4}
.m-road{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round}
.m-road.thin{stroke-width:3.5}
.m-route{fill:none;stroke:var(--pa);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:7 5;animation:dash12 1.2s linear infinite}
.m-pin{stroke:#fff;stroke-width:2.5}
.m-pin.home{fill:#151515}.m-pin.store{fill:var(--pa)}.m-pin.rider{fill:var(--pa)}
.m-pulse{fill:var(--pa);opacity:.35;transform-box:fill-box;transform-origin:center;animation:mpulse 1.8s ease-out infinite}
.m-stop{fill:#151515;stroke:#fff;stroke-width:2}
.m-num{fill:#fff;font-size:6.5px;font-weight:700;text-anchor:middle;font-family:var(--font-body)}
.u-sheet{position:absolute;left:0;right:0;bottom:0;top:58%;display:grid;gap:.65em;align-content:start;padding:.6em 1.2em 1.4em;border-radius:1.4em 1.4em 0 0;background:#fff;box-shadow:0 -.6em 1.6em -1em rgba(0,0,0,.25)}
.u-grab{justify-self:center;width:3em;height:.3em;border-radius:999px;background:#DDD}
.u-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:.35em;font-size:.72em;color:#9A9A9A}
.u-steps span{padding-top:.5em;border-top:.3em solid #EEE}
.u-steps .done{color:#151515;border-color:var(--pa);font-weight:600}
.u-app{display:grid;grid-template-columns:12.5em minmax(0,1fr)}
.u-side{display:grid;align-content:start;gap:.25em;padding:1.2em .8em;background:#FAFAFA;border-right:1px solid #EEE;min-height:100%}
.u-brand{display:flex;align-items:center;gap:.55em;margin-bottom:1em;font-weight:700}
.lg{display:inline-block;width:1.7em;height:1.7em;border-radius:.5em;background:var(--pa)}
.u-side a{display:block;padding:.55em .75em;border-radius:.6em;color:#5A5A5A;font-size:.88em}
.u-side a.on{background:var(--pa-soft);color:var(--pa);font-weight:600}
.u-main{display:grid;gap:1em;align-content:start;padding:1.4em 1.6em 2em;min-width:0}
.u-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8em}
.u-kpi{display:grid;gap:.15em;padding:.85em .95em;border:1px solid #EEE;border-radius:.9em}
.u-kpi b{font-size:1.55em;letter-spacing:-.01em}
.u-up{color:#18884A;font-size:.75em;font-weight:600}
.u-chart{display:grid;gap:.6em;padding:.9em;border:1px solid #EEE;border-radius:.9em}
.u-svg{display:block;width:100%;height:7em}
.c-grid{fill:none;stroke:#EFEFEF;stroke-width:1;vector-effect:non-scaling-stroke}
.c-area{fill:var(--pa-soft)}
.c-line{fill:none;stroke:var(--pa);stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.c-bar.h{fill:#E9E9EE}.c-bar.a{fill:var(--pa)}
.u-key{display:inline-flex;align-items:center;gap:.35em;font-size:.75em;color:#7A7A7A}
.u-key::before{content:"";width:.7em;height:.7em;border-radius:.2em;background:#E9E9EE}
.u-key.a::before{background:var(--pa)}
.u-table{overflow:hidden;border:1px solid #EEE;border-radius:.9em;font-size:.86em}
.u-tr{display:grid;grid-template-columns:6em minmax(0,1fr) 6em 8em;gap:.6em;align-items:center;padding:.6em .9em;border-top:1px solid #F1F1F1}
.u-tr.h{border-top:0;background:#FAFAFA;color:#8A8A8A;font-size:.85em;font-weight:600}
.u-split{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
.u-form{display:grid;gap:.75em}
.u-field{display:grid;gap:.25em}
.u-input{padding:.6em .8em;border:1px solid #E3E3E3;border-radius:.6em;font-size:.88em}
.u-two{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.u-lines{border:1px solid #EEE;border-radius:.8em;overflow:hidden;font-size:.86em}
.u-line{display:grid;grid-template-columns:minmax(0,1fr) 3em 5.5em;gap:.5em;padding:.55em .8em;border-top:1px solid #F1F1F1}
.u-line.h{border-top:0;background:#FAFAFA;color:#8A8A8A;font-size:.85em}
.u-total{padding-top:.5em;border-top:1px dashed #DDD;font-size:1.05em}
.u-paper{display:grid;gap:.8em;align-content:start;padding:1.3em;border-radius:.6em;background:#fff;box-shadow:0 .8em 2em -1em rgba(0,0,0,.25);border:1px solid #F0F0F0}
.u-bars{display:grid;gap:.4em}
.u-bars i{display:block;height:.55em;border-radius:.3em;background:#EEE}
.u-paid{justify-self:start;padding:.3em .7em;border-radius:.4em;background:var(--pa-soft);color:var(--pa);font-size:.8em;font-weight:600}
.u-app3{display:grid;grid-template-columns:15em minmax(0,1fr) 12em}
.u-list{display:grid;align-content:start;gap:.4em;padding:1.1em .8em;border-right:1px solid #EEE;background:#FAFAFA;min-height:100%}
.u-item{display:flex;align-items:center;gap:.55em;padding:.6em;border-radius:.7em;font-size:.88em}
.u-item.on{background:#fff;box-shadow:0 .3em 1em -.5em rgba(0,0,0,.25)}
.u-convo{display:grid;align-content:start;gap:.9em;padding:1.3em 1.4em}
.u-msg{justify-self:start;max-width:85%;padding:.8em 1em;border-radius:1em 1em 1em .3em;background:#F2F2F2;font-size:.9em}
.u-draft{display:grid;gap:.7em;padding:1em;border:1.5px solid var(--pa);border-radius:1em;background:var(--pa-soft);font-size:.9em}
.u-src{padding:.3em .7em;border-radius:.5em;background:#fff;border:1px solid #E2DDF8;font-size:.78em;font-family:var(--font-mono)}
.u-panel{display:grid;align-content:start;gap:.7em;padding:1.3em 1em;border-left:1px solid #EEE;font-size:.9em}
.u-topics{display:grid;gap:.55em;padding:.9em;border:1px solid #EEE;border-radius:.9em}
.u-topic{display:grid;grid-template-columns:11em minmax(0,1fr);align-items:center;gap:.8em;font-size:.85em}
.u-topic i{display:block;height:.6em;border-radius:.3em;background:linear-gradient(90deg,var(--pa) var(--w),#EFEFEF var(--w))}
.u-nav{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:1em 2em}
.u-brandmark{display:flex;align-items:center;gap:.5em;font-weight:800;font-size:1.15em;color:var(--pa)}
.u-links{display:flex;gap:1.4em;font-size:.9em;color:#6A6A6A}
.u-links .on{color:#151515;font-weight:600}
.u-hero{position:relative;margin:0 2em;height:19em;border-radius:1.2em;overflow:hidden}
.u-hero .ph{position:absolute;inset:0;border-radius:0}
.u-hero-copy{position:absolute;left:2em;right:2em;bottom:1.8em;display:grid;gap:1em}
.u-searchbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:center;gap:.4em;padding:.5em .5em .5em 1em;border-radius:999px;background:#fff;box-shadow:0 1em 2em -1em rgba(0,0,0,.4);font-size:.88em}
.u-searchbar span{display:grid;padding-right:.8em;border-right:1px solid #EEE;font-weight:600;white-space:nowrap;overflow:hidden}
.u-searchbar small{color:#8A8A8A;font-weight:500;font-size:.8em}
.u-searchbar b{padding:.75em 1.4em;border-radius:999px;background:var(--pa);color:#fff}
.u-stays{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2em;padding:.4em 2em 2em}
.u-stay{display:grid;gap:.3em;font-size:.92em}
.u-stay .ph{aspect-ratio:4/3;margin-bottom:.3em}
.u-pad2{padding:.4em 2em .8em}
.u-gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:7.5em 7.5em;gap:.5em;margin:0 2em;border-radius:1em;overflow:hidden}
.u-gallery .ph{border-radius:0}
.u-gallery .ph:first-child{grid-row:span 2}
.u-gallery .ph:nth-child(n+4){display:none}
.u-detail{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1.6em;padding:1.4em 2em 2em}
.u-about{display:grid;gap:.6em;align-content:start}
.u-amen{display:flex;flex-wrap:wrap;gap:.4em}
.u-amen span{padding:.35em .75em;border-radius:999px;border:1px solid #E6E6E6;font-size:.8em}
.u-book{display:grid;gap:.6em;padding:1.1em;border:1px solid #EAEAEA;border-radius:1em;box-shadow:0 1em 2em -1.4em rgba(0,0,0,.3)}
.u-dates{display:grid;grid-template-columns:1fr 1fr;border:1px solid #E3E3E3;border-radius:.7em;overflow:hidden}
.u-dates span{display:grid;padding:.5em .7em;font-weight:600;font-size:.9em}
.u-dates span+span{border-left:1px solid #E3E3E3}
.u-dates small{color:#8A8A8A;font-weight:500;font-size:.75em}
.ph{position:relative;overflow:hidden;border-radius:.8em}
.ph svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ph-lake{background:linear-gradient(180deg,#FFC9A8 0%,#F6A9A0 35%,#B9A7C9 62%,#8FB3D6 63%,#5E8FBF 100%)}
.ph-lake .p1{fill:#5E5A84}.ph-lake .p2{fill:#3E3D63}.ph-lake .p3{fill:#7FA6CF;opacity:.85}
.ph-beach{background:linear-gradient(180deg,#7CC8F0 0%,#BFE6F7 55%,#46A9D6 56%,#2F8BBE 72%)}
.ph-beach .p4{fill:#FFE7A3}.ph-beach .p3{fill:#3B9CCB}.ph-beach .p5{fill:#F0D6A2}.ph-beach .p6{fill:none;stroke:#2F5D3A;stroke-width:2.2;stroke-linecap:round}
.ph-mount{background:linear-gradient(180deg,#A9D7F2 0%,#E2F2FA 70%)}
.ph-mount .p1{fill:#6E8CA8}.ph-mount .p2{fill:#2F6A5A}.ph-mount .p7{fill:#fff}
.ph-city{background:linear-gradient(180deg,#2B2D5A 0%,#7A4E86 55%,#F08A6C 100%)}
.ph-city .p1{fill:#1C1B33}.ph-city .p2{fill:#28264A}.ph-city .p8{fill:#FFD27A}
.ph-forest{background:linear-gradient(180deg,#D7EFE4 0%,#A8D8C2 60%,#6FB597 100%)}
.ph-forest .p1{fill:#2E6B52}.ph-forest .p2{fill:#24543F}
.scr.dark{background:#0F1013;color:#E9EAEE}
.scr.dark .u-side{background:#131418;border-color:#232429}
.scr.dark .u-sub{color:#8C8F98}
.scr.dark .u-kpi{border-color:#25262C;background:#15161A}
.scr.dark .u-side a{color:#A4A7B0}
.f-veh-row{display:flex;align-items:flex-start;gap:.6em;padding:.6em .5em;border-radius:.6em;font-size:.88em}
.f-veh-row:first-of-type{background:#1C1D23}
.f-veh-row .dot{flex:none;width:.7em;height:.7em;margin-top:.3em;border-radius:50%;background:#5A5D66}
.dot.a,.f-veh.a{background:var(--pa);fill:var(--pa)}
.dot.b,.f-veh.b{background:#F2555A;fill:#F2555A}
.dot.c,.f-veh.c{background:#5FB8FF;fill:#5FB8FF}
.f-main{grid-template-rows:auto minmax(0,1fr)}
.f-mapwrap{position:relative;min-height:19em;border-radius:1em;overflow:hidden;border:1px solid #25262C}
.f-mapwrap.light{border-color:#EEE;min-height:22em}
.f-map{position:absolute;inset:0;width:100%;height:100%}
.f-bg{fill:#14161B}.f-water{fill:#18222E}
.f-road{fill:none;stroke:#23262E;stroke-width:6}
.f-road.thin{stroke-width:3}
.f-route{fill:none;stroke-width:2.2;stroke-dasharray:5 5;opacity:.85}
.f-route.a{stroke:var(--pa)}.f-route.b{stroke:#F2555A}.f-route.c{stroke:#5FB8FF}
.f-veh{stroke:#0F1013;stroke-width:2}
.f-hub{fill:#fff;stroke:#0F1013;stroke-width:2}
.f-alert{position:absolute;left:1em;bottom:1em;padding:.55em .9em;border-radius:.7em;background:rgba(242,85,90,.15);border:1px solid rgba(242,85,90,.4);color:#FFB3B5;font-size:.8em}
.u-split2{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:stretch}
.u-stops{display:grid;gap:.5em;align-content:start}
.u-stop{display:flex;align-items:center;gap:.7em;padding:.5em .6em;border:1px solid #EFEFEF;border-radius:.7em;font-size:.88em}
.u-stop .n{display:grid;place-items:center;flex:none;width:1.8em;height:1.8em;border-radius:50%;background:#151515;color:#fff;font-size:.8em;font-weight:700}
@keyframes dash12{to{stroke-dashoffset:-24}}
@keyframes mpulse{0%{transform:scale(1);opacity:.45}100%{transform:scale(3.2);opacity:0}}

/* Keyframes */
@keyframes pop{from{opacity:.12;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:.2;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleY(.08)}to{transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes drawfrom{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes hide{to{opacity:0;visibility:hidden}}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes togbg{from{background:var(--line-2)}}
@keyframes togk{from{left:2px}}
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes dash16{to{stroke-dashoffset:-32}}
@keyframes dash15{to{stroke-dashoffset:-30}}
@keyframes ipulse{0%,100%{transform:none}50%{transform:scale(1.3)}}
@keyframes float{0%,100%{transform:none}50%{transform:translateY(-6px)}}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes wordin{from{opacity:.15;transform:translateY(.32em)}to{opacity:1;transform:none}}
@keyframes enter{from{opacity:.5;transform:translateY(12px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:no-preference){
  .hero-title .w{animation:wordin .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 90ms)}
  html.loading .hero-title .w{animation-play-state:paused}
  .page.enter{animation:enter .5s cubic-bezier(.2,.8,.2,1)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .build{transform:none}
}