/* Layout: comic panels on cool paper. Ink outlines, hard offset shadows, a yellow ping dot with echo rings as the signature; products shown as live mini interfaces. Deliberately light only. */
:root{
  --paper:#F4F6FE; --card:#FFFFFF; --ink:#16162E; --muted:#555A77;
  --sun:#FFD43B; --cobalt:#3557FF; --bubble:#FF70B3; --mint:#21C98B; --tomato:#FF5B3D;
  --sun-soft:#FFF3C4; --cobalt-mid:#8FA5FF; --cobalt-soft:#E5EAFF; --bubble-soft:#FFE5F1; --mint-soft:#DAF6EA;
  --display:'Unbounded','Arial Black',system-ui,sans-serif;
  --body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --line:2.5px solid var(--ink); --shadow:5px 5px 0 var(--ink); --shadow-lg:9px 9px 0 var(--ink);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
main{overflow-x:clip}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:8px}
.wrap{width:100%;max-width:1220px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Logo */
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.mark{width:46px;height:46px;flex:none;overflow:visible}
.mark circle{fill:none;stroke:var(--ink);stroke-width:6;stroke-linecap:round;transform-origin:50px 50px}
.mark .core{fill:var(--sun);stroke-width:5.5}
.mark .r1{stroke-dasharray:132 57;transform:rotate(-58deg)}
.mark .r2{stroke-dasharray:206 70;transform:rotate(-52deg)}
.brand:hover .r1{animation:wave .9s ease-out}
.brand:hover .r2{animation:wave .9s ease-out .14s}
@keyframes wave{0%,100%{opacity:1}40%{opacity:.12}}
.wordmark{display:flex;flex-direction:column;line-height:1}
.wordmark b{font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:-.02em}
.wordmark small{font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;margin-top:4px;color:var(--muted)}
@keyframes blink{50%{opacity:0}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 22px;border:var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-family:var(--display);font-weight:700;font-size:15px;line-height:1.2;text-decoration:none;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;white-space:nowrap}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--ink)}
.btn-sun{background:var(--sun)}
.btn-ink{background:var(--ink);color:#fff}
.btn-small{padding:8px 14px;font-size:13px;box-shadow:3px 3px 0 var(--ink)}
.btn-small:hover{box-shadow:5px 5px 0 var(--ink)}

/* Header */
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:22px}
.links{display:flex;gap:6px}
.links a{font-weight:700;font-size:15px;text-decoration:none;padding:8px 14px;border-radius:999px;border:2px solid transparent}
.links a:hover{border-color:var(--ink);background:var(--card)}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center;padding-block:36px 72px}
.hero-copy{display:grid;gap:26px;justify-items:start;min-width:0}
.sticker{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:var(--line);border-radius:999px;background:var(--card);font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;box-shadow:3px 3px 0 var(--ink)}
.sticker .dot{width:9px;height:9px;border-radius:50%;background:var(--mint);border:2px solid var(--ink)}
.tilt-l{transform:rotate(-2.5deg)}
h1{font-family:var(--display);font-weight:800;font-size:clamp(40px,6.2vw,84px);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
h1 .w{display:inline-block}
.ping{position:relative;display:inline-block;white-space:nowrap;padding:0 .22em .06em;margin-left:.02em;border:.045em solid var(--ink);border-radius:999px;background:var(--sun);box-shadow:.07em .07em 0 var(--ink);isolation:isolate}
.ping::before,.ping::after{content:"";position:absolute;inset:-.045em;border:.035em solid var(--ink);border-radius:inherit;z-index:-1;opacity:0;animation:echo 2.8s ease-out infinite}
.ping::after{animation-delay:1.4s}
@keyframes echo{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.09,1.6);opacity:0}}
.lead{font-size:clamp(17px,1.5vw,20px);max-width:34em;color:var(--muted)}
.lead strong{color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}

.stage{position:relative;height:520px;min-width:0}
.float{position:absolute;left:var(--x);top:var(--y);translate:var(--px,0) var(--py,0);transition:translate .25s ease-out}
.float>*{animation:bob var(--d,6s) ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-12px) rotate(calc(var(--r,0deg) + 2deg))}}
.sonar{width:clamp(220px,24vw,300px);aspect-ratio:1;max-width:100%;position:relative;display:grid;place-items:center}
.sonar .wave{position:absolute;inset:0;border-radius:50%;border:2.5px solid var(--ink);transform:scale(var(--s));opacity:var(--o);animation:ripple 3.6s ease-out infinite;animation-delay:var(--w)}
@keyframes ripple{0%{transform:scale(.45);opacity:1}100%{transform:scale(1.05);opacity:0}}
.sonar .disc{position:relative;width:52%;aspect-ratio:1;border-radius:50%;border:var(--line);background:var(--sun);box-shadow:var(--shadow);display:grid;place-items:center;overflow:hidden}
.sonar .disc::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--ink) 1.3px,transparent 1.7px);background-size:9px 9px;opacity:.14}
.sonar .disc span{position:relative;font-family:var(--display);font-weight:900;font-size:clamp(28px,3.2vw,40px);letter-spacing:-.03em}
.term{width:272px;border:var(--line);border-radius:16px;background:var(--ink);color:#E9ECFF;box-shadow:var(--shadow);overflow:hidden;font-family:var(--mono);font-size:12.5px;line-height:1.6}
.term-head{display:flex;gap:6px;padding:9px 12px;border-bottom:2px solid #2E2E52}
.term-head i{width:9px;height:9px;border-radius:50%;background:#3A3A66}
.term-head i:first-child{background:var(--tomato)}.term-head i:nth-child(2){background:var(--sun)}.term-head i:nth-child(3){background:var(--mint)}
.term-body{padding:12px 14px 14px;white-space:pre}
.term-body span{display:block}
.term .cmd{color:var(--sun)}
.term .ok{color:var(--mint)}
.anim .term-body span{animation:rise .35s ease-out both;animation-delay:calc(.9s + var(--k)*.4s)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:var(--line);border-radius:14px;background:var(--card);box-shadow:4px 4px 0 var(--ink);font-weight:700;font-size:14px;white-space:nowrap}
.chip .mono{font-weight:500}
.chip i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid var(--ink);font-style:normal;font-size:12px;font-weight:800}
.c-blue i{background:var(--cobalt);color:#fff}.c-pink i{background:var(--bubble)}.c-mint i{background:var(--mint)}
.code{font-family:var(--mono);font-weight:500;font-size:22px;padding:10px 16px;border:var(--line);border-radius:14px;background:var(--cobalt);color:#fff;box-shadow:4px 4px 0 var(--ink)}
.deco{display:block;overflow:visible}
.deco path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cursor path{fill:var(--card);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}

/* Load sequence, only when JS runs and motion is allowed */
.anim h1 .w{animation:rise .7s cubic-bezier(.2,.9,.25,1.2) both;animation-delay:calc(var(--i)*70ms)}
.anim h1 .ping{animation:pop .8s cubic-bezier(.3,1.6,.4,1) .4s both}
.anim .hero-copy>.sticker,.anim .lead,.anim .cta-row{animation:rise .7s ease-out both}
.anim .lead{animation-delay:.25s}.anim .cta-row{animation-delay:.35s}
.anim .float{animation:drop .8s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(.3s + var(--n,0)*90ms)}
@keyframes rise{from{translate:0 28px;opacity:0}to{translate:0 0;opacity:1}}
@keyframes pop{0%{transform:scale(.2);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes drop{from{opacity:0;scale:.6}to{opacity:1;scale:1}}

/* Marquee */
.band{background:var(--ink);color:var(--sun);border-block:var(--line);overflow:hidden;transform:rotate(-1.2deg);margin-block:8px 0;width:104%;margin-left:-2%}
.band-track{display:flex;width:max-content;animation:slide 26s linear infinite}
.band-track span{display:inline-flex;align-items:center;gap:22px;padding:16px 22px 16px 0;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.01em;white-space:nowrap}
.blip{width:12px;height:12px;flex:none;border-radius:50%;background:var(--sun);box-shadow:0 0 0 4px var(--ink),0 0 0 6.5px var(--sun)}
@keyframes slide{to{transform:translateX(-50%)}}

/* Sections */
.section{padding-block:96px 24px}
.section-head{display:grid;gap:14px;max-width:760px;margin-bottom:44px}
.kicker{justify-self:start}
h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,4.2vw,54px);line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
.sub{font-size:18px;color:var(--muted);max-width:40em}

/* Products */
.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:stretch}
.product{display:flex;flex-direction:column;border:var(--line);border-radius:24px;background:var(--card);box-shadow:var(--shadow);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.product:nth-child(1){--tilt:-1.2deg}.product:nth-child(2){--tilt:1deg}.product:nth-child(3){--tilt:-.8deg}
.product:hover{transform:translate(-3px,-3px) rotate(var(--tilt));box-shadow:var(--shadow-lg)}
.screen{padding:18px;border-bottom:var(--line);height:276px;display:grid;align-content:center;gap:10px;font-size:13px;line-height:1.35}
.p-blue .screen{background:var(--cobalt-soft)}.p-pink .screen{background:var(--bubble-soft)}.p-mint .screen{background:var(--mint-soft)}
.window{border:2px solid var(--ink);border-radius:14px;background:var(--card);overflow:hidden}
.win-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-bottom:2px solid var(--ink);font-family:var(--mono);font-size:11.5px}
.win-head .dots{display:flex;gap:5px}
.win-head .dots i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink);background:var(--card)}
.win-head .dots i:first-child{background:var(--tomato)}.win-head .dots i:nth-child(2){background:var(--sun)}
.product-body{padding:22px 24px 26px;display:grid;gap:12px;align-content:start;flex:1}
.product-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
h3{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1.15}
.status{justify-self:start;font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;padding:4px 10px;border:2px solid var(--ink);border-radius:999px;background:var(--sun-soft);white-space:nowrap}
.product p{color:var(--muted);font-size:16px}
.for{font-family:var(--mono);font-size:12.5px !important;color:var(--ink) !important;text-transform:uppercase;letter-spacing:.06em}

/* Mock: quote check */
.q-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 12px;border-top:1.5px dashed #C9CEE6}
.q-row:first-of-type{border-top:0}
.q-row .mono{font-size:12px}
.flag{font-family:var(--mono);font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;padding:3px 7px;border:1.5px solid var(--ink);border-radius:6px;white-space:nowrap}
.f-ok{background:var(--mint)}.f-miss{background:var(--tomato);color:#fff}.f-up{background:var(--sun)}.f-ask{background:var(--bubble)}
.q-total{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border-top:2px solid var(--ink);font-family:var(--mono);font-size:12px;background:var(--sun-soft)}
.play .flag{animation:stamp .45s cubic-bezier(.3,1.7,.5,1) both;animation-delay:calc(.25s + var(--k)*.22s)}
@keyframes stamp{0%{transform:scale(2.4) rotate(-14deg);opacity:0}100%{transform:none;opacity:1}}

/* Mock: booking */
.cal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:12px}
.cal b{font-family:var(--mono);font-weight:500;font-size:11px;text-align:center;color:var(--muted)}
.slot{height:22px;border-radius:6px;border:1.5px dashed #B9BEDA;background:var(--card)}
.slot.booked{border:1.5px solid var(--ink);background:var(--bubble)}
.slot.new{border:1.5px solid var(--ink);background:var(--bubble)}
.play .slot.new{animation:book 1.6s ease both .3s}
@keyframes book{0%{background:var(--sun);transform:scale(1)}35%{background:var(--sun);transform:scale(1.18)}55%{background:var(--sun);transform:scale(1)}70%{background:var(--bubble);transform:scale(1.12)}100%{background:var(--bubble);transform:none}}
.toast{display:flex;align-items:center;gap:8px;margin:0 12px 12px;padding:8px 10px;border:2px solid var(--ink);border-radius:10px;background:var(--card);font-weight:700;font-size:12.5px;box-shadow:3px 3px 0 var(--ink)}
.toast i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--mint);border:1.5px solid var(--ink);font-style:normal;font-size:11px}
.play .toast{animation:rise .5s ease-out 1.3s both}

/* Mock: platform */
.search{display:flex;align-items:center;gap:8px;margin:12px 12px 0;padding:8px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--card);font-weight:600}
.search svg{width:15px;height:15px;flex:none}
.search svg path{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.typed{min-height:1.35em}
.typing::after{content:"";display:inline-block;width:2px;height:1.05em;background:var(--ink);margin-left:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
.map{position:relative;height:94px;margin:10px 12px 12px;border:2px solid var(--ink);border-radius:12px;overflow:hidden;background-color:#F7FCF9;background-image:linear-gradient(#DDEFE6 1.5px,transparent 1.5px),linear-gradient(90deg,#DDEFE6 1.5px,transparent 1.5px);background-size:20px 20px}
.road{position:absolute;background:var(--card);border-block:2px solid #BFD8CB}
.road.r1{left:-10%;right:-10%;top:52%;height:14px;transform:rotate(-8deg)}
.road.r2{top:-10%;bottom:-10%;left:38%;width:14px;border-block:0;border-inline:2px solid #BFD8CB;transform:rotate(12deg)}
.pin{position:absolute;left:var(--x);top:var(--y);width:22px;height:28px;translate:-50% -100%}
.pin path{fill:var(--mint);stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.pin circle{fill:var(--card);stroke:var(--ink);stroke-width:1.5}
.me{position:absolute;left:44%;top:58%;width:14px;height:14px;border-radius:50%;background:var(--cobalt);border:2.5px solid var(--card);box-shadow:0 0 0 2px var(--ink)}
.me::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--cobalt);animation:ping 1.8s ease-out infinite}
@keyframes ping{from{transform:scale(.4);opacity:1}to{transform:scale(1.4);opacity:0}}
.play .pin{animation:drop .55s cubic-bezier(.3,1.7,.5,1) both;animation-delay:calc(1.1s + var(--k)*.18s)}
.found{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 12px 12px;font-weight:700;font-size:12.5px}
.found .mono{font-weight:500;font-size:11.5px;color:var(--muted)}

/* How we work */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;counter-reset:step}
.step{position:relative;display:grid;gap:12px;align-content:start;padding:24px 22px 26px;border:var(--line);border-radius:22px;background:var(--card);box-shadow:var(--shadow)}
.step:nth-child(odd){transform:rotate(-1deg)}.step:nth-child(even){transform:rotate(1deg) translateY(14px)}
.step-num{position:absolute;top:-20px;right:18px;width:44px;height:44px;display:grid;place-items:center;border:var(--line);border-radius:50%;background:var(--sun);font-family:var(--display);font-weight:900;font-size:17px;box-shadow:0 0 0 5px var(--paper),0 0 0 7.5px var(--ink)}
.step:nth-child(2) .step-num{background:var(--bubble)}.step:nth-child(3) .step-num{background:var(--mint)}.step:nth-child(4) .step-num{background:var(--cobalt-mid)}
.icon{width:52px;height:52px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:14px;background:var(--paper)}
.icon svg{width:28px;height:28px}
.icon path,.icon circle,.icon rect{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.step p{color:var(--muted);font-size:15.5px}
.motto{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:44px;padding:18px 22px;border:var(--line);border-radius:18px;background:var(--sun-soft);font-weight:700;font-size:18px}
.motto .mono{font-weight:500;font-size:13px;text-transform:uppercase;letter-spacing:.08em;padding:4px 10px;border:2px solid var(--ink);border-radius:999px;background:var(--card)}

/* Services */
.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.service{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;padding:24px;border:var(--line);border-radius:22px;background:var(--card);transition:transform .2s ease,box-shadow .2s ease}
.service:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow)}
.service .icon{width:58px;height:58px}
.s1 .icon{background:var(--cobalt-soft)}.s2 .icon{background:var(--bubble-soft)}.s3 .icon{background:var(--mint-soft)}.s4 .icon{background:var(--sun-soft)}
.service div{display:grid;gap:6px;min-width:0}
.service p{color:var(--muted);font-size:16px}

/* Contact */
.contact-panel{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:30px;align-items:center;padding:clamp(28px,5vw,64px);border:var(--line);border-radius:32px;background:var(--sun);box-shadow:var(--shadow-lg);overflow:hidden;isolation:isolate}
.contact-panel::before{content:"";position:absolute;right:-60px;top:-60px;width:420px;height:420px;border-radius:50%;background-image:radial-gradient(var(--ink) 1.6px,transparent 2px);background-size:12px 12px;opacity:.13;z-index:-1}
.contact-copy{display:grid;gap:22px;justify-items:start;min-width:0}
.contact-copy h2 .ink{background:var(--ink);color:var(--sun);padding:0 .18em;border-radius:12px;display:inline-block;transform:rotate(-3deg)}
.contact-copy p{font-size:18px;max-width:30em}
.mail-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 10px 10px 18px;border:var(--line);border-radius:999px;background:var(--card);max-width:100%}
.mail{font-family:var(--mono);font-size:17px;font-weight:500;user-select:all;overflow-wrap:anywhere}
.copied{font-family:var(--mono);font-size:13px;min-height:1.2em}
.hello{justify-self:center;width:min(100%,320px)}
.hello .disc{width:62%;background:var(--card)}
.hello .disc span{font-size:clamp(24px,2.8vw,34px)}

/* Footer */
.foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:64px 40px}
.foot nav{display:flex;gap:18px;flex-wrap:wrap;font-weight:700;font-size:15px}
.foot small{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.foot .mark{width:36px;height:36px}

/* Confetti */
.bit{position:fixed;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border:3px solid var(--ink);border-radius:50%;pointer-events:none;z-index:50}

@media (max-width:980px){
  .hero{grid-template-columns:minmax(0,1fr);padding-block:20px 56px}
  .stage{height:420px}
  .products{grid-template-columns:minmax(0,1fr);max-width:560px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .contact-panel{grid-template-columns:minmax(0,1fr)}
  .hello{width:min(100%,240px)}
}
@media (max-width:720px){
  body{font-size:16px}
  .links{display:none}
  .stage{height:410px}
  .hide-sm{display:none}
  .f-term{--x:0% !important;--y:0% !important}
  .f-sonar{--x:calc(100% - 196px) !important;--y:33% !important}
  .f-euro{--x:0% !important;--y:52% !important}
  .f-experts{--x:0% !important;--y:70% !important}
  .f-book{--x:calc(100% - 178px) !important;--y:89% !important}
  .f-cursor{--x:62% !important;--y:58% !important}
  .stage .sonar{width:200px}
  .term{width:248px;font-size:11.5px}
  .section{padding-block:72px 16px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .step:nth-child(even){transform:rotate(1deg)}
  .services{grid-template-columns:minmax(0,1fr)}
  .service{padding:20px}
  .band-track span{font-size:18px;padding-block:13px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}