:root{--bg:#07080d;--panel:#0d0f17;--panel2:#121520;--line:#222633;--text:#f7f7fb;--muted:#a6acba;--violet:#7447ff;--violet2:#9a7bff;--cyan:#19c3ff;--green:#40e0a1;--max:1500px;--radius:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55;overflow-x:hidden}button,input,select,textarea{font:inherit}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}.wrap{width:min(calc(100% - 40px),var(--max));margin:auto}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
nav{position:fixed;z-index:20;top:0;left:0;right:0;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(7,8,13,.78);backdrop-filter:blur(18px)}.nav-inner{height:82px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;padding:0;border:0;background:none;box-shadow:none}.brand img{display:block;width:190px;height:auto}.footer-inner .brand img{width:168px}.nav-links{display:flex;align-items:center;gap:22px;font-size:14px;color:#b5b8c5}.nav-links a:hover{color:#fff}.btn{border:0;border-radius:999px;padding:12px 19px;background:#fff;color:#090a0f;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:transform .2s,background .2s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(105deg,var(--violet),#5f35e8);color:#fff;box-shadow:0 10px 35px rgba(116,71,255,.3)}.btn-ghost{background:transparent;color:#fff;border:1px solid var(--line)}.menu{display:none;background:none;border:0;color:#fff;font-size:24px}.brand{order:1}.nav-links{order:2;margin-left:auto}.language-switcher{position:relative;order:3}.nav-cta{order:4}.menu{order:5}.language-btn{height:42px;padding:0 11px;border:1px solid #2d3241;border-radius:999px;background:rgba(15,18,27,.92);color:#e7e8ee;display:flex;align-items:center;gap:7px;cursor:pointer}.language-btn:hover,.language-switcher.open .language-btn{border-color:#6f55d6;background:#171a26}.language-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.language-btn span{font-size:12px;font-weight:750;letter-spacing:.06em}.language-btn .language-chevron{width:13px;height:13px;transition:transform .2s}.language-switcher.open .language-chevron{transform:rotate(180deg)}.language-menu{display:none;position:absolute;right:0;top:calc(100% + 11px);width:215px;padding:8px;border:1px solid #2d3241;border-radius:16px;background:#10131c;box-shadow:0 22px 60px rgba(0,0,0,.45)}.language-switcher.open .language-menu{display:block}.language-option{width:100%;min-height:44px;padding:10px 11px;border:0;border-radius:10px;background:transparent;color:#a2a8b8;display:flex;align-items:center;justify-content:space-between;text-align:left}.language-option.current{color:#fff;background:rgba(116,71,255,.14)}button.language-option{cursor:not-allowed;opacity:.72}.language-option span{font-size:14px}.language-option small{font-size:11px;color:#8170d9}
.hero{min-height:760px;padding:150px 0 86px;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;z-index:1;width:650px;height:650px;border-radius:50%;right:-180px;top:-170px;background:radial-gradient(circle,rgba(116,71,255,.18),transparent 68%);filter:blur(10px)}.hero-grid{position:relative;z-index:2;min-height:524px;display:grid;grid-template-columns:minmax(0,660px) 1fr;gap:78px;align-items:center}.hero-grid>div:first-child{max-width:660px;text-shadow:0 2px 25px rgba(0,0,0,.4)}.eyebrow{display:inline-flex;align-items:center;gap:9px;color:#beb4ff;text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:750}.eyebrow:before{content:"";width:28px;height:1px;background:var(--violet2)}h1{font-size:clamp(42px,5.2vw,70px);line-height:.98;letter-spacing:-.065em;margin:25px 0 26px;max-width:760px}h1 .gradient{color:transparent;background:linear-gradient(100deg,#fff 5%,#8d68ff 55%,#20bff4);background-clip:text}.lead{font-size:18px;color:#c0c4d0;max-width:610px;margin:0 0 34px}.actions{display:flex;gap:12px;flex-wrap:wrap}.micro{display:flex;align-items:center;gap:17px;margin-top:35px;color:#aeb3c0;font-size:14px}.avatars{display:flex}.avatar{width:29px;height:29px;border:2px solid var(--bg);border-radius:50%;margin-left:-7px;background:linear-gradient(145deg,#1b2131,#6e4ff7)}.avatar:first-child{margin:0}.avatar:nth-child(2){background:linear-gradient(145deg,#24323a,#17aad8)}.avatar:nth-child(3){background:linear-gradient(145deg,#2c263d,#a35bff)}
.hero-media{position:absolute;z-index:0;inset:0;min-height:0;margin:0;border:0;border-radius:0;overflow:hidden;background:#0b0d14}.hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,8,13,.98) 0%,rgba(7,8,13,.88) 32%,rgba(7,8,13,.52) 55%,rgba(7,8,13,.12) 82%),linear-gradient(0deg,rgba(7,8,13,.75),transparent 42%,rgba(7,8,13,.2));pointer-events:none}.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% center}.hero-tags{position:absolute;z-index:2;left:auto;right:clamp(20px,5vw,80px);bottom:28px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.hero-tag{padding:8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(7,8,13,.62);backdrop-filter:blur(10px);font-size:12px;color:#d8dae3;letter-spacing:.04em}
section{padding:100px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:42px}.kicker{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--violet2);font-weight:750}.section-head h2{font-size:clamp(32px,3.6vw,48px);line-height:1.05;letter-spacing:-.045em;margin:12px 0 0;max-width:700px}.section-head p{max-width:420px;color:var(--muted);margin:0}.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0}.proof-grid{display:grid;grid-template-columns:repeat(4,1fr)}.proof-item{padding:31px 26px;border-right:1px solid var(--line)}.proof-item:last-child{border:0}.proof-item strong{display:block;font-size:25px;letter-spacing:-.03em}.proof-item span{color:#9aa0b0;font-size:14px}
.services-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.service{position:relative;min-height:270px;padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,#10121b,#0b0d14);overflow:hidden;transition:border .25s,transform .25s}.service:hover{border-color:#3d355f;transform:translateY(-4px)}.service.large{grid-column:span 7}.service.small{grid-column:span 5}.service.third{grid-column:span 4}.service.wide{grid-column:span 12;min-height:225px}.service-num{font:11px ui-monospace,SFMono-Regular,monospace;color:#6e7485}.service h3{font-size:24px;letter-spacing:-.035em;margin:53px 0 11px}.service p{color:#a6acba;margin:0;max-width:600px;font-size:15px}.service .arrow{position:absolute;right:24px;top:24px;width:35px;height:35px;border:1px solid #2a2e3c;border-radius:50%;display:grid;place-items:center}.service:after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-90px;bottom:-110px;background:radial-gradient(circle,rgba(116,71,255,.2),transparent 66%)}
.process{background:#0a0c12}.process-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.sticky{position:sticky;top:120px;align-self:start}.sticky h2{font-size:clamp(30px,3.4vw,42px);line-height:1.05;letter-spacing:-.045em;margin:14px 0 20px}.sticky p{color:var(--muted)}.step{display:grid;grid-template-columns:56px 1fr;gap:22px;padding:30px 0;border-bottom:1px solid var(--line)}.step:first-child{padding-top:0}.step-n{width:45px;height:45px;border-radius:50%;border:1px solid #333747;display:grid;place-items:center;color:#a48eff;font:12px ui-monospace,SFMono-Regular,monospace}.step h3{margin:3px 0 8px;font-size:21px}.step p{margin:0;color:var(--muted);font-size:15px}
.architecture{display:grid;grid-template-columns:1fr 1fr;gap:18px}.arch-copy{padding:42px;border:1px solid var(--line);border-radius:25px;background:#0d0f17}.arch-copy h3{font-size:31px;line-height:1.15;margin:14px 0}.arch-copy p{color:var(--muted)}.checks{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:27px}.check{font-size:14px;color:#c8cbd4}.check:before{content:"✓";color:var(--green);margin-right:8px}.code-panel{border:1px solid #282c3a;border-radius:25px;padding:25px;background:#0b0d14;font:13px/1.8 ui-monospace,SFMono-Regular,monospace;color:#777e91;overflow:hidden}.code-panel .purple{color:#9b82ff}.code-panel .cyan{color:#50cfff}.code-panel .white{color:#e9eaf0}.code-panel .green{color:#54dba7}.terminal-line{display:flex;gap:9px}.terminal-line span:first-child{color:#444a5c}.bar{height:8px;border-radius:8px;background:#1e2230;overflow:hidden;margin:17px 0 8px}.bar span{display:block;width:96%;height:100%;background:linear-gradient(90deg,var(--violet),var(--cyan))}.terminal-result{display:flex;justify-content:space-between;color:#747b8d;font-size:11px}
.cta{padding:120px 0}.cta-box{position:relative;text-align:center;border:1px solid #302a4d;border-radius:30px;padding:80px 25px;background:radial-gradient(circle at 50% 100%,rgba(116,71,255,.2),transparent 50%),#0d0f17;overflow:hidden}.cta-box h2{font-size:clamp(34px,4.2vw,54px);line-height:1;letter-spacing:-.055em;margin:15px auto 20px;max-width:800px}.cta-box p{color:#9ba0b0;max-width:580px;margin:0 auto 30px}.cta-box .btn{padding:14px 23px}
footer{border-top:1px solid var(--line);padding:30px 0;color:#8b91a2;font-size:14px}.footer-inner{display:flex;justify-content:space-between;gap:20px;align-items:center}.footer-links{display:flex;flex-wrap:wrap;gap:12px 22px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.73);z-index:50;display:none;place-items:center;padding:20px;backdrop-filter:blur(8px)}.modal.open{display:grid}.modal-card{width:min(100%,560px);background:#11141e;border:1px solid #303545;border-radius:24px;padding:28px;box-shadow:0 30px 100px #000}.modal-head{display:flex;justify-content:space-between;gap:20px}.modal h2{margin:0 0 5px;font-size:28px}.modal p{margin:0 0 24px;color:var(--muted)}.close{border:0;background:#1d202b;color:#fff;width:34px;height:34px;border-radius:50%;cursor:pointer}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:14px;color:#aeb3c1}.field input,.field select,.field textarea{width:100%;background:#0b0d14;border:1px solid #2c3040;border-radius:11px;padding:12px 13px;color:#fff;outline:none}.field textarea{min-height:96px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--violet)}.submit{width:100%;margin-top:16px}.success{display:none;text-align:center;padding:35px 15px}.success .tick{font-size:35px;color:var(--green)}
.reveal{opacity:0;transform:translateY(18px);transition:.7s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){section{padding:80px 0}.cta{padding:84px 0}.nav-links{display:none;position:absolute;top:76px;left:0;right:0;background:#0b0d14;padding:22px;flex-direction:column;border-bottom:1px solid var(--line)}.nav-links.open{display:flex}.menu{display:block}.nav-cta{display:none}.hero{min-height:0;padding-top:125px}.hero-grid,.process-grid,.architecture{grid-template-columns:1fr;gap:55px}.hero-grid{min-height:0}.hero-media{min-height:0;max-width:none}.proof-grid{grid-template-columns:1fr 1fr}.proof-item:nth-child(2){border-right:0}.proof-item:nth-child(-n+2){border-bottom:1px solid var(--line)}.service.large,.service.small,.service.third{grid-column:span 6}.service.wide{grid-column:span 12}.sticky{position:static}.section-head{align-items:start;flex-direction:column}}
@media(max-width:620px){section{padding:67px 0}.cta{padding:70px 0}.wrap{width:min(calc(100% - 28px),var(--max))}.hero{min-height:0;padding-bottom:65px}.hero-grid{gap:38px}h1{font-size:42px}.lead{font-size:16px}.hero-media{min-height:0}.hero-media:after{background:linear-gradient(90deg,rgba(7,8,13,.94),rgba(7,8,13,.5)),linear-gradient(0deg,rgba(7,8,13,.85),transparent 55%)}.hero-media img{object-position:64% center}.hero-tags{display:none}.proof-grid{grid-template-columns:1fr 1fr}.proof-item{padding:24px 16px}.section-head h2,.sticky h2{font-size:33px}.services-grid{display:block}.service{margin-bottom:13px;min-height:235px}.process-grid{gap:40px}.arch-copy{padding:28px}.checks{grid-template-columns:1fr}.code-panel{font-size:11px;padding:18px}.cta-box{padding:58px 18px}.footer-inner{align-items:start;flex-direction:column}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.modal-card{padding:22px}}
@media(max-width:900px){.nav-links{top:82px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.btn,.service{transition:none}}
.skip-link{position:absolute;left:-9999px;top:0;z-index:60;padding:12px 18px;border-radius:0 0 12px 0;background:#fff;color:#090a0f;font-weight:700}.skip-link:focus{left:0}
a:focus-visible,button:focus-visible{outline:2px solid var(--violet2);outline-offset:3px;border-radius:6px}
a.service{display:block;color:inherit}
.mobile-cta{display:none}
.pay-terms{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;margin:0 auto 30px;color:#c2c6d2;font-size:14px}.pay-terms b{color:#fff}.pay-terms .dot{width:4px;height:4px;border-radius:50%;background:#5c4bb0}
@media(max-width:900px){.mobile-cta{display:inline-flex;justify-content:center;margin-top:6px;padding:12px 19px;border-radius:999px;background:linear-gradient(105deg,var(--violet),#5f35e8);color:#fff;font-weight:700}}
.success-copy{margin:20px auto 18px;max-width:460px;text-align:left}
.success-copy pre{margin:0 0 12px;padding:14px 15px;border:1px solid var(--line);border-radius:13px;background:#090b11;color:#c2c6d2;font:13px/1.65 ui-monospace,SFMono-Regular,monospace;white-space:pre-wrap;word-break:break-word;max-height:190px;overflow:auto}
.success-copy .btn{width:100%}
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* Nav with no CTA button: keep the language selector off the right edge. */
.nav-links{margin-right:4px}

/* ---- Icons -------------------------------------------------------------
   One inline SVG sprite per page; every icon inherits currentColor so it
   picks up the surrounding text colour automatically. */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico-chip{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;border:1px solid #2c3044;background:linear-gradient(150deg,rgba(116,71,255,.24),rgba(25,195,255,.09));color:#c3b3ff;flex:none;transition:border-color .25s,color .25s}
.ico-inline{width:18px;height:18px;stroke-width:1.7;color:#a89bff;flex:none}
.service .ico-chip{margin-top:26px}
.service h3{margin:16px 0 11px}
.service:hover .ico-chip{border-color:#4b3f86;color:#d8ceff}
.proof-item strong{display:flex;align-items:center;gap:9px}
.step h3{display:flex;align-items:center;gap:9px}
.service-num{display:block}
.service .ico-chip{display:grid;margin-top:22px}

/* ---- Service cards with a background image ------------------------------
   The image is a full-card layer under a black gradient; card content sits
   above it. The existing border, radius and purple glow are unchanged. */
.service.has-media{position:relative;overflow:hidden;min-height:318px}
.service-media{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden}
.service-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transform:scale(1.01);transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.service.has-media:hover .service-media img{transform:scale(1.06)}
/* darker where the text sits, lighter over the interface artwork */
.service-media:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,8,13,.16) 0%,rgba(7,8,13,.40) 46%,rgba(7,8,13,.76) 80%,rgba(7,8,13,.88) 100%),
             linear-gradient(90deg,rgba(7,8,13,.56) 0%,rgba(7,8,13,.26) 50%,rgba(7,8,13,.04) 100%)}
/* Full-width cards keep their text in the left column, so the right side of
   the panorama can stay almost clear. */
.service.wide.has-media .service-media:after{
  background:linear-gradient(180deg,rgba(7,8,13,.10) 0%,rgba(7,8,13,.26) 55%,rgba(7,8,13,.52) 100%),
             linear-gradient(90deg,rgba(7,8,13,.82) 0%,rgba(7,8,13,.60) 32%,rgba(7,8,13,.18) 62%,rgba(7,8,13,0) 100%)}
@media(max-width:900px){.service.wide.has-media .service-media:after{
  background:linear-gradient(180deg,rgba(7,8,13,.14) 0%,rgba(7,8,13,.42) 50%,rgba(7,8,13,.82) 100%),
             linear-gradient(90deg,rgba(7,8,13,.62) 0%,rgba(7,8,13,.30) 60%,rgba(7,8,13,.06) 100%)}}
/* keep the existing purple glow and every piece of card content above the image */
.service.has-media:after{z-index:1}
.service.has-media > *:not(.service-media){position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.service-media img,.service.has-media:hover .service-media img{transition:none;transform:none}}
@media(max-width:900px){.service.has-media{min-height:300px}}
@media(max-width:620px){.service.has-media{min-height:290px}}
/* Grid tracks must be allowed to shrink below their content's min-content
   width, or an icon + long word forces the track wider than the viewport. */
.proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.proof-item{min-width:0}
.proof-item strong{flex-wrap:wrap}
@media(min-width:901px){.proof-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* The two full-width cards carry 3:1 panoramas; give them a little more
   height so the dashboard row stays readable, and keep them centred. */
.service.wide.has-media{min-height:340px}
@media(max-width:900px){.service.wide.has-media{min-height:310px}}
@media(max-width:620px){.service.wide.has-media{min-height:300px}}

/* ---- Larger icons ------------------------------------------------------- */
.ico{width:26px;height:26px;stroke-width:1.5}
.ico-chip{width:54px;height:54px;border-radius:16px}
.ico-inline{width:22px;height:22px;stroke-width:1.6}
/* small uppercase labels keep a proportionate icon */
.kicker .ico-inline{width:17px;height:17px}
/* The proof band sets 25px words in a narrow two-column grid; on small
   phones that word alone is wider than its column. */
@media(max-width:620px){.proof-item strong{font-size:21px}}
@media(max-width:400px){.proof-grid{grid-template-columns:1fr}.proof-item{border-right:0;border-bottom:1px solid var(--line)}.proof-item:last-child{border-bottom:0}}

/* ---- Floating glass capsule header --------------------------------------
   At the top of the page the header is a full-width bar. Once scrolled it
   contracts into a rounded, blurred capsule floating over the content. */
nav{transition:background .35s ease,border-color .35s ease,padding .35s ease,backdrop-filter .35s ease}
.nav-inner{position:relative;border:1px solid transparent;
  transition:width .35s cubic-bezier(.4,.14,.3,1),height .35s cubic-bezier(.4,.14,.3,1),
             padding .35s ease,background .35s ease,border-radius .35s ease,
             border-color .35s ease,box-shadow .35s ease,backdrop-filter .35s ease}
.brand img{transition:width .35s cubic-bezier(.4,.14,.3,1)}

nav.scrolled{background:transparent;border-bottom-color:transparent;backdrop-filter:none;padding:11px 0}
nav.scrolled .nav-inner{
  width:min(calc(100% - 26px),1180px);
  height:64px;
  padding:0 14px 0 18px;
  border-radius:999px;
  background:rgba(15,17,26,.24);
  -webkit-backdrop-filter:blur(32px) saturate(170%);
  backdrop-filter:blur(32px) saturate(170%);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 22px 54px rgba(0,0,0,.42),0 2px 10px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.09);
}
nav.scrolled .nav-links{gap:19px}

/* The mobile menu hangs from the capsule rather than the window edge. */
@media(max-width:900px){
  nav.scrolled .nav-inner{height:60px}
  .nav-links{top:calc(100% + 11px);left:0;right:0;border:1px solid var(--line);
    border-radius:20px;background:rgba(11,13,20,.97);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    box-shadow:0 24px 60px rgba(0,0,0,.5)}
}
@media(max-width:620px){
  nav.scrolled .nav-inner{width:calc(100% - 20px);padding:0 10px 0 12px}
}
@media(prefers-reduced-motion:reduce){
  nav,.nav-inner,.brand img{transition:none}
}
/* The capsule is deliberately thin glass, so the nav text carries its own
   local contrast for the moments it floats over a bright photo. */
nav.scrolled .nav-links a{color:#d3d6de;text-shadow:0 1px 8px rgba(7,8,13,.92),0 0 3px rgba(7,8,13,.8),0 0 14px rgba(7,8,13,.6)}
nav.scrolled .nav-links a:hover,nav.scrolled .nav-links a.active{color:#fff}
nav.scrolled .menu{text-shadow:0 1px 8px rgba(7,8,13,.92),0 0 3px rgba(7,8,13,.8)}
nav.scrolled .language-btn{background:rgba(15,18,27,.5);border-color:rgba(255,255,255,.17)}
nav.scrolled .brand img{filter:drop-shadow(0 2px 10px rgba(7,8,13,.7))}
@media(max-width:900px){nav.scrolled .nav-links a{text-shadow:none;color:#b5b8c5}}

/* ---- Logo: capsule morph + hover sweep ----------------------------------
   The mark and the wordmark live in one raster file, and the X occupies the
   left 27.6% of it. So the morph crops the container rather than resizing the
   image: the wordmark wipes away and the X stays exactly the same size. */
nav .brand{--logo-w:190px;position:relative;width:var(--logo-w);overflow:hidden;
  transition:width .42s cubic-bezier(.4,.14,.3,1)}
nav .brand img{width:var(--logo-w);max-width:none;height:auto;display:block;transition:none}
nav.scrolled .brand{width:calc(var(--logo-w) * .273)}

/* Specular sweep, masked to the logo's own shape so the light travels across
   the mark itself and not across an empty rectangle. */
nav .brand:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.62) 50%,transparent 58%);
  background-size:260% 100%;background-position:150% 0;
  -webkit-mask-image:url("xartdesign-logo-colour.webp");mask-image:url("xartdesign-logo-colour.webp");
  -webkit-mask-size:var(--logo-w) auto;mask-size:var(--logo-w) auto;
  -webkit-mask-position:left center;mask-position:left center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
nav .brand:hover:after,nav .brand:focus-visible:after{opacity:1;animation:brand-sweep .9s cubic-bezier(.35,.1,.25,1)}
@keyframes brand-sweep{from{background-position:150% 0}to{background-position:-70% 0}}

@media(max-width:620px){nav .brand{--logo-w:155px}}
@media(prefers-reduced-motion:reduce){
  nav .brand{transition:none}
  nav .brand:hover:after,nav .brand:focus-visible:after{animation:none;opacity:0}
}
/* The capsule was sized to the page grid, which left a wide empty run between
   the mark and the links. Above the mobile breakpoint it now sizes to its
   own content (measured at 660px) instead. */
@media(min-width:901px){
  nav.scrolled .nav-inner{width:min(680px,calc(100% - 26px));gap:24px;justify-content:center}
  nav.scrolled .nav-links{margin-left:0}
}

/* =========================================================================
   GLASS MORPHISM
   Frosted panels need something behind them to refract, so an ambient light
   field sits under the whole page and the panels become translucent shells
   with an inner top highlight instead of solid fills.
   ========================================================================= */

/* 1. Ambient light field ------------------------------------------------- */
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(760px 520px at 10% 4%,  rgba(116,71,255,.17), transparent 62%),
    radial-gradient(720px 480px at 92% 16%, rgba(25,195,255,.10), transparent 60%),
    radial-gradient(860px 580px at 74% 66%, rgba(139,60,255,.13), transparent 62%),
    radial-gradient(640px 460px at 16% 88%, rgba(25,195,255,.07), transparent 60%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}

/* 2. The glass surface --------------------------------------------------- */
.card,.price-card,.form-card,.arch-copy,.code-panel,.flow-step,.mini-panel,
.dashboard,.product-shot,.contact-channel,.demo-note,.demo-disclaimer,
.price-note,.service,.modal-card{
  background:linear-gradient(158deg,rgba(255,255,255,.062),rgba(255,255,255,.022) 44%,rgba(255,255,255,.008));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 22px 48px rgba(0,0,0,.40),
             inset 0 1px 0 rgba(255,255,255,.10),
             inset 0 -1px 0 rgba(255,255,255,.028);
}
/* blur only on the larger surfaces — cheap where it counts, skipped on the
   small repeated panels which read as glass from the translucency alone */
.card,.price-card,.form-card,.arch-copy,.product-shot,.dashboard,.modal-card{
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  backdrop-filter:blur(18px) saturate(145%);
}

/* 3. Softer, larger radii ------------------------------------------------ */
.card{border-radius:24px}
.price-card{border-radius:28px}
.form-card{border-radius:26px}
.flow-step{border-radius:18px}
.mini-panel{border-radius:16px}
.dashboard{border-radius:24px}
.product-shot{border-radius:26px}
.service{border-radius:24px}
.modal-card{border-radius:26px}

/* 4. Nested panels sit a shade brighter, as in a real stack of glass ------ */
.product-shot .mini-panel,.dashboard .mini-panel,.shot-main .mini-panel{
  background:linear-gradient(158deg,rgba(255,255,255,.075),rgba(255,255,255,.03) 50%,rgba(255,255,255,.012));
  border-color:rgba(255,255,255,.10)}

/* 5. Accent panels keep their tint, now on glass -------------------------- */
.cta-box{border:1px solid rgba(255,255,255,.10);border-radius:30px;
  background:radial-gradient(circle at 50% 100%,rgba(116,71,255,.26),transparent 55%),
             linear-gradient(158deg,rgba(255,255,255,.06),rgba(255,255,255,.02) 45%,rgba(255,255,255,.008));
  -webkit-backdrop-filter:blur(18px) saturate(145%);backdrop-filter:blur(18px) saturate(145%);
  box-shadow:0 26px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.12)}
.card.accent-crm{background:linear-gradient(158deg,rgba(39,188,146,.10),rgba(255,255,255,.02) 48%,rgba(255,255,255,.008));
  border-color:rgba(63,201,158,.22)}
.price-card.featured{border-color:rgba(140,104,255,.30);
  box-shadow:0 26px 64px rgba(116,71,255,.16),inset 0 1px 0 rgba(255,255,255,.13)}

/* 6. Controls pick up the same material ---------------------------------- */
.btn-ghost{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn-ghost:hover{background:rgba(255,255,255,.10)}
.ico-chip{background:linear-gradient(150deg,rgba(116,71,255,.30),rgba(25,195,255,.12));
  border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.field input,.field select,.field textarea{background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.11)}
.field input:focus,.field select:focus,.field textarea:focus{background:rgba(255,255,255,.07)}

/* 7. Hover lifts the sheet slightly -------------------------------------- */
.service:hover,a.card:hover{border-color:rgba(255,255,255,.17);
  box-shadow:0 30px 64px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.14)}

@media(max-width:900px){body{background-attachment:scroll}}

/* ---- Staggered card entrance -------------------------------------------
   Cards in a group animate in one after another. The per-element delay is
   set in pages.js and cleared once played. */
.reveal{opacity:0;transform:translateY(24px) scale(.988);
  transition:opacity .62s cubic-bezier(.22,.68,.28,1),transform .62s cubic-bezier(.22,.68,.28,1)}
.reveal.visible{opacity:1;transform:none}

/* .reveal.visible{transform:none} and .service:hover have equal specificity,
   so the hover lift needs a more specific selector to survive. */
.service.reveal.visible:hover,a.card.reveal.visible:hover,
.demo-jump-grid a.reveal.visible:hover{transform:translateY(-4px)}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .service.reveal.visible:hover,a.card.reveal.visible:hover,
  .demo-jump-grid a.reveal.visible:hover{transform:none}
}

/* ---- CTA video background ----------------------------------------------
   The video sits under the panel content behind a gradient scrim. A round
   loader shows until the first frame can play; the poster covers the gap. */
.cta-box.has-video{position:relative;overflow:hidden;isolation:isolate}
.cta-media{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;background:#0b0d14}
.cta-video{width:100%;height:100%;object-fit:cover;display:block;opacity:0;
  transition:opacity .9s cubic-bezier(.3,.7,.3,1)}
.cta-media.ready .cta-video{opacity:1}
/* scrim keeps the heading and body copy readable over moving footage */
.cta-media:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,8,13,.58) 0%,rgba(7,8,13,.40) 42%,rgba(7,8,13,.62) 100%),
             radial-gradient(circle at 50% 108%,rgba(116,71,255,.34),transparent 58%)}
.cta-box.has-video > *:not(.cta-media){position:relative;z-index:2}

/* round loader */
.media-loader{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;z-index:1;
  border-radius:50%;border:2px solid rgba(255,255,255,.13);
  border-top-color:#8d68ff;border-right-color:#20bff4;
  animation:media-spin .9s linear infinite;
  transition:opacity .4s ease,transform .4s ease}
.cta-media.ready .media-loader{opacity:0;transform:scale(.8);visibility:hidden}
@keyframes media-spin{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){
  .cta-video{transition:none}
  .media-loader{animation:none;border-top-color:rgba(255,255,255,.4);border-right-color:rgba(255,255,255,.25)}
}

/* ---- Tighter vertical rhythm -------------------------------------------
   Sections were 100px top and bottom (120 on the CTA), so consecutive
   sections opened a 220px gap. Roughly a third comes back. */
section{padding:72px 0}
.cta{padding:78px 0}
.hero{padding-bottom:72px}
@media(max-width:900px){section{padding:62px 0}.cta{padding:66px 0}}
@media(max-width:620px){section{padding:52px 0}.cta{padding:56px 0}}

/* ---- Compact mobile header ---------------------------------------------
   The links live in the dropdown on small screens, so the bar only carries
   the mark, the language button and the menu toggle. Those are pushed
   together on the right instead of being spread by space-between. */
@media(max-width:900px){
  .nav-inner{height:66px;gap:10px}
  nav.scrolled .nav-inner{height:52px;padding:0 8px 0 12px;gap:8px}
  nav.scrolled{padding:9px 0}
  nav .brand{--logo-w:132px}
  .language-switcher{margin-left:auto}
  .language-btn{height:34px;padding:0 9px;gap:6px}
  .language-btn svg{width:15px;height:15px}
  .language-btn span{font-size:11px;letter-spacing:.05em}
  .language-btn .language-chevron{width:11px;height:11px}
  .menu{font-size:21px;line-height:1;padding:0 2px}
  .nav-links{top:calc(100% + 9px);padding:16px;left:0;right:0;margin:0}
  .nav-links a{padding:9px 0}
}
@media(max-width:620px){
  .nav-inner{height:62px}
  nav.scrolled .nav-inner{height:50px;padding:0 6px 0 10px;gap:6px}
  nav .brand{--logo-w:118px}
  .language-btn{height:32px;padding:0 8px}
  .menu{font-size:20px}
}

/* ---- Compact mobile capsule --------------------------------------------
   With the links in a dropdown the bar only needs ~156px of content, so the
   capsule shrinks to fit. The dropdown gets its own width, right-aligned,
   because a 176px menu is too narrow for "Booking + CRM". */
@media(max-width:900px){
  nav.scrolled .nav-inner{width:min(190px,calc(100% - 20px))}
  .nav-links{left:auto;right:0;width:min(258px,calc(100vw - 30px))}
}
@media(max-width:620px){
  nav.scrolled .nav-inner{width:min(176px,calc(100% - 18px))}
  .nav-links{width:min(232px,calc(100vw - 26px))}
}