/* Home only: personal positioning and a lightweight product illustration. */
:root{--bg:#080d16;--surface:#0e1522;--surface-2:#151f30;--ink:#edf3fc;--ink-2:#a7b5ca;--ink-3:#91a0b7;--coral:#75d5ff;--teal:#80e8c0;--border:rgba(173,201,240,.1);--border-hi:rgba(173,201,240,.22)}
.hero{min-height:740px;min-height:min(860px,100svh);justify-content:center;padding:150px 0 64px}
.hero__body{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:40px}
.hero__eyebrow{font-size:10px;letter-spacing:1.7px;margin-bottom:24px}
.hero__h1{font-size:clamp(44px,4.8vw,66px);line-height:1.07;letter-spacing:-2.9px;margin-bottom:24px}
.hero__h1 em{color:var(--coral);font-style:normal}
.hero__sub{font-size:16px;line-height:1.8;margin-bottom:28px;max-width:540px}
.hero__sub strong{font-weight:500;color:var(--ink)}
.hero__btns{gap:10px;margin-bottom:24px}.hero__btns .btn-cta{padding:14px 22px}.hero__btns .btn-wa{padding:13px 18px}
.hero__project-link{font-size:13px;color:var(--ink-2);text-decoration:underline;text-underline-offset:5px}
.hero__promise{font-size:12px;color:var(--ink-2);margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 22px}.hero__promise span::before{content:'✓';color:var(--teal);margin-right:7px}
.orb-1{background:rgba(51,112,255,.12);width:540px;height:540px;right:-70px;top:40px}.orb-2{background:rgba(66,216,255,.045)}.orb-3{display:none}
.hero__grid{background-size:48px 48px;opacity:.5}.nav.stuck{background:rgba(8,13,22,.95)}
.btn-cta:hover{box-shadow:0 10px 35px rgba(117,213,255,.2)}.f-btn:hover{background:#a6e4ff}.ct-cta:hover{box-shadow:0 12px 32px rgba(117,213,255,.2)}
/* Hero scene: the real Slotly site plus its booking flow. The static state is the finished booking; .is-playing replays it.
   Only opacity and transform are animated, so the GPU runs it without restyling the page every frame. */
.tech-scene{position:relative;width:100%;min-width:0;aspect-ratio:1.03;container-type:inline-size;isolation:isolate}
.scene-caption{position:absolute;top:0;left:1%;font:10px/1.5 monospace;letter-spacing:2px;text-transform:uppercase;color:var(--ink-3)}
.scene-caption::before{content:'';display:inline-block;width:6px;height:6px;background:var(--teal);border-radius:50%;margin-right:9px}
.scene-stage{position:absolute;inset:7% 0 9% 0}
.scene-stage::before{content:'';position:absolute;inset:10% 5% 0 20%;background:radial-gradient(closest-side,rgba(56,160,255,.18),transparent);z-index:-1}
.browser-mock{position:absolute;top:0;left:0;width:88%;border:1px solid #2c3a52;border-radius:2.2cqw;overflow:hidden;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.browser-bar{height:5.6cqw;display:flex;align-items:center;padding:0 2.2cqw;background:#1a2233;border-bottom:1px solid #0d1320}
.browser-dots{display:flex;gap:1cqw}.browser-dots i{width:1.3cqw;height:1.3cqw;border-radius:50%;background:#ff5f57}.browser-dots i:nth-child(2){background:#febc2e}.browser-dots i:nth-child(3){background:#28c840}
.browser-url{margin:auto;display:flex;align-items:center;gap:.8cqw;padding:.6cqw 4cqw;border-radius:99px;background:#0f1726;font:1.65cqw/1.4 Inter,sans-serif;color:#c3cfdf;transform:translateX(-2.4cqw)}
.browser-url svg{width:1.4cqw;height:1.4cqw;fill:none;stroke:currentColor;stroke-width:1.2}
.browser-view{aspect-ratio:1440/880;overflow:hidden}.browser-view img{display:block;width:100%;height:auto;transform:translateY(-8.8%)}
.phone-mock{position:absolute;top:17%;right:0;width:33%;aspect-ratio:9/18.5;padding:1.3cqw;border:1px solid #33405a;border-radius:5.6cqw;background:#05070b;box-shadow:0 26px 60px rgba(0,0,0,.6),inset 0 0 0 .4cqw #1b2230}
.phone-screen{height:100%;overflow:hidden;border-radius:4.4cqw;background:#fff;color:#0f172a;font-family:Inter,sans-serif}
.phone-status{position:relative;height:6cqw;display:flex;align-items:center;justify-content:space-between;padding:0 3.6cqw;font-size:1.8cqw}
.phone-island{position:absolute;left:50%;top:1.2cqw;width:9cqw;height:2.7cqw;border-radius:99px;background:#05070b;transform:translateX(-50%)}
.phone-icons{display:flex;align-items:flex-end;gap:.35cqw}.phone-icons i{width:.55cqw;background:#0f172a;border-radius:.2cqw}.phone-icons i:nth-child(1){height:.8cqw}.phone-icons i:nth-child(2){height:1.15cqw}.phone-icons i:nth-child(3){height:1.5cqw}
.app-photo{margin:0 2.2cqw;aspect-ratio:382/160;border-radius:2.2cqw;background:url(/assets/projects/slotly.webp) 50% 85.36%/377% auto}
.app-body{padding:0 3cqw}
.app-label{margin:2.4cqw 0 1.1cqw;font-size:1.3cqw;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#64748b}
.app-days,.app-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1cqw;text-align:center}
.app-days span{padding:1cqw 0;border:1px solid #e2e8f0;border-radius:1.8cqw;font-size:1.35cqw;color:#64748b}.app-days b{display:block;font-size:2.3cqw;color:#0f172a}
.app-days .is-on{background:#0f172a;border-color:#0f172a;color:#cbd5e1}.app-days .is-on b{color:#fff}
.app-slots span{position:relative;padding:1.3cqw 0;border:1px solid #e2e8f0;border-radius:1.6cqw;font-size:1.7cqw;font-weight:600}
.app-slots .is-full{color:#cbd5e1;text-decoration:line-through}
.app-slots .slot-pick::before{content:attr(data-t);position:absolute;inset:-1px;display:grid;place-items:center;border-radius:inherit;background:#0ea5e9;color:#fff}
.app-people{display:flex;align-items:center;justify-content:space-between;margin-top:2.6cqw;font-size:1.6cqw;color:#334155}
.app-stepper{display:flex;align-items:center;gap:1.4cqw}.app-stepper i{display:grid;place-items:center;width:3.4cqw;height:3.4cqw;border:1px solid #e2e8f0;border-radius:50%;font-style:normal;color:#64748b}.app-stepper b{font-size:1.8cqw}
.app-pay{position:relative;display:grid;place-items:center;height:6.2cqw;margin-top:3cqw;border-radius:2cqw;background:#0f172a;color:#fff;font-size:1.75cqw;font-weight:700}
.pay-idle{opacity:0}.pay-done{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;background:#16a34a}
.slot-pick::after,.app-pay::after{content:'';position:absolute;left:50%;top:50%;width:5cqw;height:5cqw;margin:-2.5cqw 0 0 -2.5cqw;border-radius:50%;background:rgba(15,23,42,.25);opacity:0}
.notify{position:absolute;left:3%;top:63%;width:52%;display:flex;align-items:center;gap:1.8cqw;padding:1.8cqw 2.2cqw;border-radius:2.6cqw;background:rgba(246,248,251,.97);box-shadow:0 18px 44px rgba(0,0,0,.45);font:1.6cqw/1.45 Inter,sans-serif;color:#475569}
.notify-icon{flex:none;display:grid;place-items:center;width:5.2cqw;height:5.2cqw;border-radius:1.3cqw;background:#0ea5e9;color:#fff;font:800 2.8cqw var(--fh)}
.notify-text b{display:block;font-size:1.8cqw;color:#0f172a}.notify-text em{display:block;font-style:normal;font-weight:600;color:#16a34a}
.scene-footer{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--ink-2)}
.scene-footer a{text-decoration:underline;text-underline-offset:4px}.scene-footer a:hover{color:var(--ink)}
.scene-footer button{flex:none;white-space:nowrap;font:11px monospace;color:var(--coral);padding:8px 11px;border:1px solid var(--border-hi);border-radius:6px;background:var(--surface);cursor:pointer}.scene-footer button:disabled{cursor:default;opacity:.55}
.tech-scene.is-playing .browser-mock{animation:scene-in 6s ease both}
.tech-scene.is-playing .browser-view img{animation:scene-pan 6s ease-in-out both}
.tech-scene.is-playing .phone-mock{animation:scene-phone 6s ease both}
.tech-scene.is-playing .slot-pick::before{animation:scene-pick 6s ease both}
.tech-scene.is-playing .slot-pick::after{animation:scene-tap-1 6s ease-out both}
.tech-scene.is-playing .app-pay{animation:scene-pay 6s ease both}
.tech-scene.is-playing .app-pay::after{animation:scene-tap-2 6s ease-out both}
.tech-scene.is-playing .pay-idle{animation:scene-hide 6s ease both}
.tech-scene.is-playing .pay-done{animation:scene-show 6s ease both}
.tech-scene.is-playing .notify{animation:scene-notify 6s cubic-bezier(.2,.8,.2,1.1) both}
@keyframes scene-in{0%{opacity:0;transform:translateY(16px)}12%,100%{opacity:1;transform:none}}
@keyframes scene-pan{0%,12%{transform:none}70%,100%{transform:translateY(-8.8%)}}
@keyframes scene-phone{0%,8%{opacity:0;transform:translateY(26px)}22%,100%{opacity:1;transform:none}}
@keyframes scene-pick{0%,33%{opacity:0}37%,100%{opacity:1}}
@keyframes scene-tap-1{0%,30%{opacity:0;transform:scale(.4)}33%{opacity:1;transform:scale(.8)}42%,100%{opacity:0;transform:scale(1.6)}}
@keyframes scene-tap-2{0%,50%{opacity:0;transform:scale(.4)}53%{opacity:1;transform:scale(.8)}62%,100%{opacity:0;transform:scale(1.6)}}
@keyframes scene-pay{0%,53%{transform:none}56%{transform:scale(.95)}60%,100%{transform:none}}
@keyframes scene-hide{0%,57%{opacity:1}61%,100%{opacity:0}}
@keyframes scene-show{0%,57%{opacity:0}61%,100%{opacity:1}}
@keyframes scene-notify{0%,68%{opacity:0;transform:translateY(-12px) scale(.96)}76%,100%{opacity:1;transform:none}}
.service-strip{border-block:1px solid var(--border);background:#0c1320}.service-strip .wrap{display:flex;justify-content:space-between;gap:18px;padding-top:18px;padding-bottom:18px;font:11px monospace;color:var(--ink-2)}.service-strip span::before{content:'+';margin-right:10px;color:var(--coral)}
.service-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.service-card{border:1px solid var(--border-hi);border-radius:16px;background:linear-gradient(140deg,#152135,#101824);padding:30px 26px;display:flex;flex-direction:column;align-items:flex-start;transition:transform .2s,border-color .2s}.service-card:hover{transform:translateY(-4px);border-color:#56799d}.service-symbol{width:44px;height:44px;border:1px solid #395975;display:grid;place-items:center;border-radius:11px;color:var(--coral);font:20px monospace;margin-bottom:28px}.service-symbol svg{width:24px;height:24px}.service-card h3{font:700 23px/1.2 var(--fh);letter-spacing:-.6px;margin-bottom:14px}.service-card p{font-size:14px;line-height:1.8;color:var(--ink-2);margin-bottom:20px}.service-card ul{font-size:12px;color:#cad6e8;line-height:2.2;margin-bottom:24px}.service-card li::before{content:'↗';color:var(--coral);margin-right:9px}.service-card a{margin-top:auto;color:var(--coral);font-size:13px;font-weight:600;text-underline-offset:5px;text-decoration:underline}.specialties{margin-top:26px;font-size:13px;color:var(--ink-2);line-height:2}.specialties a{color:var(--ink);text-decoration:underline;text-underline-offset:4px}.service-help{margin-top:20px;font-size:14px;color:var(--ink-2)}.service-help a{color:var(--coral);text-decoration:underline;text-underline-offset:4px}
.price-list{list-style:none;margin:0;padding:0;border:1px solid var(--border-hi);border-radius:18px;overflow:hidden}.price-list li{display:flex;gap:24px;align-items:center;justify-content:space-between;padding:20px 28px;border-top:1px solid var(--border)}.price-list li:first-child{border-top:0}.price-list h3{font:700 18px var(--fh);margin-bottom:4px}.price-list p{font-size:14px;color:var(--ink-2);max-width:560px}.price-list strong{font:700 24px var(--fh);white-space:nowrap;color:var(--coral);text-align:right}.price-list small{display:block;font:600 10px var(--fb,inherit);letter-spacing:1px;text-transform:uppercase;color:var(--ink-3)}.price-foot{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:26px}
@media(min-width:1400px){.hero__body{gap:65px}}
@media(max-width:1000px){.hero__body{gap:25px}.hero__h1{font-size:48px}.service-card{padding:24px 20px}.service-card h3{font-size:21px}}
@media(max-width:760px){.hero{min-height:0;padding:115px 0 42px}.hero__body{grid-template-columns:1fr;gap:42px}.hero__h1{font-size:clamp(40px,8.3vw,60px);letter-spacing:-1.9px;max-width:580px}.hero__sub{max-width:540px}.hero__eyebrow{font-size:9px;letter-spacing:1px}.tech-scene{max-width:480px;margin:0 auto;aspect-ratio:.9}.scene-stage{inset:8% 0 15% 0}.scene-footer{font-size:11px}.service-strip .wrap{flex-wrap:wrap;justify-content:center;font-size:10px;gap:10px 20px}.service-cards{grid-template-columns:1fr}.service-card{padding:26px}.service-symbol{margin-bottom:20px}.service-card h3{font-size:24px}.price-list li{align-items:flex-start;flex-direction:column;gap:8px;padding:18px 20px}.price-list strong{text-align:left}.price-list small{display:inline;margin-right:4px}.sec{padding:64px 0}}
@media(max-width:380px){.hero__h1{font-size:39px}.hero__btns .btn-cta{font-size:13px;padding:14px 17px}}
@media(prefers-reduced-motion:reduce){.tech-scene *{animation:none!important}.scene-footer button{display:none}.service-card:hover{transform:none}}