:root{
  --cream:#FBF8F2;
  --ink:#0A0A0A;
  --ink-60:rgba(10,10,10,.56);
  --ink-20:rgba(10,10,10,.16);
  --chrome-a:#F4F6FA;
  --chrome-b:#C8D2E2;
  --chrome-line:rgba(28,40,66,.42);
  --ease:cubic-bezier(.22,1,.36,1);
  --gut:clamp(20px,5vw,64px);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:'Inter Tight',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-locked{overflow:hidden}
h1,h2,p{margin:0}
button{font:inherit;color:inherit}

/* ---------- boot ---------- */
.boot{
  position:fixed;inset:0;z-index:300;background:var(--cream);
  display:grid;place-items:center;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  transition:opacity .7s var(--ease);
}
.boot.out{opacity:0;pointer-events:none}
.boot i{font-style:normal;animation:blink 1.2s infinite}
.boot i:nth-child(2){animation-delay:.2s}
.boot i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.18}30%{opacity:1}}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:120;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,2.4vw,26px) var(--gut);pointer-events:none;
}
.nav>*{pointer-events:auto}
.nav__brand,.link-cta{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  text-decoration:none;color:inherit;background:none;border:0;padding:0;cursor:pointer;position:relative;
}
.link-cta::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.link-cta:hover::after{transform:scaleX(1)}
.arrow{display:inline-block;transition:transform .45s var(--ease)}
.link-cta:hover .arrow,.btn:hover .arrow{transform:translateX(4px)}

/* ---------- the globe ---------- */
.stage{
  position:fixed;inset:0;z-index:1;
  display:grid;place-items:center;
  perspective:1500px;pointer-events:none;
}
.globe{
  width:min(74vh,88vw);aspect-ratio:1;position:relative;
  transform-style:preserve-3d;will-change:transform;
}
.globe__spin{
  position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;
}
.pane{
  position:absolute;top:50%;left:50%;
  width:var(--w);height:calc(var(--w)*.72);
  margin:calc(var(--w)*-.36) 0 0 calc(var(--w)*-.5);
  transform-style:preserve-3d;backface-visibility:hidden;
  pointer-events:auto;cursor:pointer;
  transition:filter .45s var(--ease);
}
.pane .win{
  filter:brightness(calc(.58 + .42 * var(--z,1))) saturate(calc(.72 + .28 * var(--z,1)));
  transition:filter .2s linear;
}
.pane.dim .win{filter:brightness(calc(.42 + .3 * var(--z,1))) saturate(.72)}
.pane:hover{z-index:5}

/* browser window chrome */
.win{
  width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;
  border-radius:7px;
  background:linear-gradient(170deg,var(--chrome-a),var(--chrome-b));
  border:1px solid var(--chrome-line);
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 16px 44px rgba(20,30,60,.2);
}
.win__bar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:6px;padding:4px 5px 3px;
  background:linear-gradient(180deg,#FDFEFF,#D4DCEA);
  border-bottom:1px solid var(--chrome-line);
}
.win__title{
  font-size:8px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;
  color:#3A4A6B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.win__btns{display:flex;gap:3px;flex:0 0 auto}
.win__btn{
  width:13px;height:11px;display:grid;place-items:center;font-size:8px;font-style:normal;
  background:linear-gradient(180deg,#FBFCFE,#CAD4E4);
  border:1px solid var(--chrome-line);border-radius:2px;color:#3A4A6B;padding:0;cursor:default;
}
.win__btn--x{background:linear-gradient(180deg,#FF8A6B,#E0391C);color:#fff;cursor:pointer}
.win__body{flex:1 1 auto;position:relative;overflow:hidden;background:#BBD6F2}
.win__body video,.win__body img{width:100%;height:100%;object-fit:cover;display:block}

/* procedural sunset sky for the filler windows */
.sky{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 40% at var(--sx,50%) var(--sy,74%),rgba(255,246,214,.95),rgba(255,198,150,.5) 36%,transparent 68%),
    radial-gradient(ellipse 90% 52% at 22% 70%,rgba(255,206,224,.92),transparent 62%),
    radial-gradient(ellipse 80% 44% at 78% 40%,rgba(226,206,255,.78),transparent 60%),
    linear-gradient(176deg,#5E9BE8 0%,#8FB8F0 36%,#F0B6CE 68%,#FFC89A 100%);
}
.sky::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 34% 20% at 28% 52%,rgba(255,255,255,.82),transparent 70%),
    radial-gradient(ellipse 28% 16% at 68% 64%,rgba(255,236,246,.78),transparent 72%),
    radial-gradient(ellipse 22% 13% at 46% 36%,rgba(255,255,255,.6),transparent 74%);
}

.veil{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 54% 42% at 50% 48%,
    rgba(251,248,242,.93) 0%,rgba(251,248,242,.82) 42%,rgba(251,248,242,0) 78%);
}

/* ---------- scroll panels ---------- */
.scroll{position:relative;z-index:40;pointer-events:none}
.scroll button{pointer-events:auto}
.panel{
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(96px,14vh,150px) var(--gut) clamp(56px,9vh,90px);
}
.panel--world{min-height:120vh;min-height:120dvh}
.hero__title{
  font-size:clamp(2.6rem,7.6vw,7.4rem);font-weight:500;line-height:.94;
  letter-spacing:-.045em;max-width:15ch;text-wrap:balance;
  text-shadow:0 0 22px var(--cream);
}
.hero__sub{
  font-style:italic;color:var(--ink-60);
  font-size:clamp(1rem,1.6vw,1.26rem);
  margin:clamp(16px,2.4vh,28px) 0 clamp(30px,4.4vh,48px);max-width:40ch;
}
.hint{
  margin-top:clamp(34px,6vh,70px);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-60);
  animation:bob 2.6s var(--ease) infinite alternate;
}
@keyframes bob{to{transform:translateY(6px)}}
.finale__title{
  font-size:clamp(2.6rem,10vw,8.5rem);font-weight:500;line-height:.9;
  letter-spacing:-.05em;margin-bottom:clamp(28px,4.4vh,48px);
  text-shadow:0 0 22px var(--cream);
}

/* ---------- button ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.6em;
  background:var(--ink);color:var(--cream);border:0;cursor:pointer;
  padding:1.02em 1.85em;border-radius:999px;
  font-size:clamp(.78rem,1.05vw,.875rem);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  overflow:hidden;isolation:isolate;transition:transform .5s var(--ease);
}
.btn::before{
  content:"";position:absolute;z-index:-1;left:50%;top:50%;
  width:150%;aspect-ratio:1;border-radius:50%;translate:-50% -50%;
  background:conic-gradient(from 0deg,#FFC89A,#F0B6CE,#A98CF0,#5E9BE8,#FFF6D6,#FFC89A);
  filter:blur(14px);opacity:0;scale:.25;
  transition:opacity .55s var(--ease),scale .75s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:hover::before{opacity:.95;scale:1}
.btn--sm{padding:.82em 1.4em;font-size:.74rem}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn:focus-visible,.link-cta:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* ---------- fullscreen portals ---------- */
.portals{position:fixed;inset:0;z-index:60;pointer-events:none}
.portal{
  position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;visibility:hidden;
}
.portal::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(251,248,242,.9),rgba(251,248,242,.62));
  opacity:calc(var(--t,0) * .96);
}
.portal.live{visibility:visible}
.portal .win{
  width:min(430px,86vw);height:min(760px,78vh);
  border-radius:10px;will-change:transform,opacity;
}
.portal .win__bar{padding:7px 9px 6px}
.portal .win__title{font-size:10px}
.portal .win__btn{width:17px;height:14px;font-size:10px}
.portal__label{
  position:absolute;left:var(--gut);bottom:clamp(26px,5vh,54px);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-60);
}
.portal.open{pointer-events:auto}

/* ---------- spawned form window ---------- */
.spawn{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(251,248,242,.74);backdrop-filter:blur(7px);opacity:0;transition:opacity .4s var(--ease)}
.spawn.in{opacity:1}
.win--form{
  width:min(460px,92vw);max-height:88vh;position:relative;
  background:linear-gradient(170deg,#F7F9FC,#DCE4F0);
}
.win--form .win__bar{padding:8px 10px 7px;cursor:grab}
.win--form .win__bar:active{cursor:grabbing}
.win--form .win__title{font-size:10px}
.win--form .win__btn{width:18px;height:15px;font-size:10px}
.win--form .win__body{background:var(--cream);overflow-y:auto}
.win__pane{padding:clamp(20px,4vw,30px)}
.win__q{font-size:1.32rem;font-weight:500;letter-spacing:-.02em;margin-bottom:18px}
.win__pane--done{display:flex;flex-direction:column;gap:7px;align-items:center;text-align:center;padding:52px 30px}
.win__pane--done strong{font-size:1.5rem;font-weight:500;letter-spacing:-.02em}
.win__pane--done span{color:var(--ink-60);font-style:italic}

.form{display:flex;flex-direction:column;gap:14px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;width:0;height:0}
.chips span{
  display:inline-block;padding:.5em 1em;border-radius:999px;
  border:1px solid var(--ink-20);font-size:.84rem;
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.chips label:hover span{border-color:var(--ink)}
.chips input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.chips input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
.line{
  width:100%;font:inherit;font-size:.98rem;color:var(--ink);
  background:none;border:0;border-bottom:1px solid var(--ink-20);
  padding:8px 0;border-radius:0;resize:vertical;
}
.line::placeholder{color:rgba(10,10,10,.34)}
.line:focus{outline:0;border-bottom-color:var(--ink)}
.form__error{color:#C2183B;font-size:.86rem}
.form .btn{align-self:flex-start;margin-top:2px}

/* ---------- footer ---------- */
.footer{
  position:relative;z-index:40;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:18px clamp(24px,5vw,56px);
  padding:clamp(28px,4vw,46px) var(--gut);
  border-top:1px solid var(--ink-20);background:var(--cream);
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;
}
.footer__brand{font-weight:500}
.footer__links{display:flex;flex-wrap:wrap;gap:clamp(14px,2.2vw,26px)}
.footer__links a{color:inherit;text-decoration:none;opacity:.6;transition:opacity .35s var(--ease)}
.footer__links a:hover{opacity:1}
.footer__meta{margin-left:auto;opacity:.6}
.footer__fine{width:100%;opacity:.38;letter-spacing:.1em}

@media (max-width:700px){
  .footer__meta{margin-left:0;width:100%}
  .hint{display:none}
  /* the globe sits right behind the copy on a phone, so the veil works harder */
  .veil{background:radial-gradient(ellipse 80% 46% at 50% 46%,
    rgba(251,248,242,.97) 0%,rgba(251,248,242,.9) 52%,rgba(251,248,242,0) 86%)}
  .portal .win{width:min(340px,88vw);height:min(620px,72vh)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* =================== /business =================== */
.biz{background:var(--cream)}
.biz .footer__brand a{color:inherit;text-decoration:none}
.eyebrow{
  display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-60);margin-bottom:clamp(18px,2.6vh,28px);
}
.biz__hero{
  display:grid;gap:clamp(40px,6vw,88px);align-items:center;
  grid-template-columns:1fr;
  padding:clamp(110px,16vh,180px) var(--gut) clamp(56px,9vh,96px);
  max-width:1240px;margin:0 auto;
}
@media (min-width:900px){.biz__hero{grid-template-columns:1.05fr .95fr}}
.biz__copy h1{
  font-size:clamp(2.5rem,6.2vw,5.2rem);font-weight:500;line-height:.95;
  letter-spacing:-.045em;max-width:12ch;text-wrap:balance;
}
.biz__sub{
  margin:clamp(18px,2.6vh,28px) 0 clamp(30px,4.4vh,44px);
  font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.5;
  color:var(--ink-60);max-width:46ch;
}
.biz__demo{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px}
.biz__demo .win{width:min(330px,80vw);height:min(586px,70vh);border-radius:10px}
.biz__demo .win__bar{padding:7px 9px 6px}
.biz__demo .win__title{font-size:10px}
.biz__demo .win__btn{width:17px;height:14px;font-size:10px}
.biz__demo figcaption{
  font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-60);
  text-align:center;max-width:30ch;line-height:1.7;
}
.biz__steps{
  display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1fr;
  max-width:1240px;margin:0 auto;
  padding:clamp(48px,8vh,96px) var(--gut);
  border-top:1px solid var(--ink-20);
}
@media (min-width:760px){.biz__steps{grid-template-columns:repeat(3,1fr)}}
.biz__steps span{
  display:block;font-size:10px;letter-spacing:.2em;color:var(--ink-60);margin-bottom:14px;
}
.biz__steps strong{
  display:block;font-size:clamp(1.3rem,2.1vw,1.7rem);font-weight:500;
  letter-spacing:-.03em;margin-bottom:8px;
}
.biz__steps p{color:var(--ink-60);font-size:.98rem;line-height:1.55;max-width:32ch}
.biz__close{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:clamp(24px,4vh,40px);
  padding:clamp(72px,14vh,150px) var(--gut);
  border-top:1px solid var(--ink-20);
}
.biz__close h2{
  font-size:clamp(2.4rem,8vw,6rem);font-weight:500;line-height:.92;letter-spacing:-.05em;
}

/* ---- /business work grid ---- */
.biz__work{
  max-width:1240px;margin:0 auto;
  padding:clamp(48px,8vh,96px) var(--gut);
  border-top:1px solid var(--ink-20);
}
.biz__work h2{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-60);font-weight:500;margin-bottom:clamp(26px,4vh,44px);
}
.biz__grid{display:grid;gap:clamp(24px,3.4vw,46px);grid-template-columns:1fr}
@media (min-width:720px){.biz__grid{grid-template-columns:repeat(3,1fr)}}
.biz__grid figure{margin:0;display:flex;flex-direction:column;gap:14px;align-items:center}
.biz__grid .win{width:100%;max-width:300px;aspect-ratio:9/16;border-radius:10px}
.biz__grid .win__bar{padding:6px 8px 5px}
.biz__grid .win__title{font-size:9px}
.biz__grid .win__btn{width:15px;height:12px;font-size:9px}
.biz__grid figcaption{
  font-size:.92rem;color:var(--ink-60);text-align:center;max-width:28ch;line-height:1.5;
}

/* ---- /business case study ---- */
.kicker{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-60);font-weight:500;margin-bottom:clamp(20px,3vh,32px);
}
.biz__case{
  max-width:1240px;margin:0 auto;
  padding:clamp(48px,8vh,96px) var(--gut);
  border-top:1px solid var(--ink-20);
}
.biz__case__top{max-width:52ch;margin-bottom:clamp(32px,5vh,56px)}
.biz__case h3{
  font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:500;
  line-height:1.05;letter-spacing:-.035em;margin-bottom:.7em;text-wrap:balance;
}
.biz__case p{color:var(--ink-60);font-size:1.02rem;line-height:1.55;margin-bottom:.9em}
.biz__note{font-style:italic;opacity:.8}
.biz__lede{color:var(--ink-60);max-width:48ch;margin:-14px 0 clamp(26px,4vh,40px);line-height:1.55}
.biz__grid--two{grid-template-columns:1fr}
@media (min-width:720px){.biz__grid--two{grid-template-columns:repeat(2,1fr);max-width:760px}}
.biz__grid--two .win{max-width:330px}

/* ---- click a clip to hear it ---- */
.sound{
  position:absolute;right:9px;bottom:9px;z-index:3;
  font:inherit;font-size:9px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:rgba(10,10,10,.6);
  border:0;border-radius:999px;padding:.5em .85em;cursor:pointer;
  backdrop-filter:blur(6px);
  transition:background .3s var(--ease),opacity .3s var(--ease);
}
.sound:hover{background:rgba(10,10,10,.88)}
.sound--on{background:rgba(255,255,255,.92);color:var(--ink)}
.sound:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Lovable injects its "Edit with Lovable" badge at publish time. The project
   setting to hide it is enabled but is not being honoured, so hide it here. */
#lovable-badge{display:none!important}