:root{--ink:#101426;--navy:#131a34;--blue:#2448f5;--blue-hover:#1835c4;--lime:#daf751;--cream:#faf9f3;--muted:#505b70;--line:#dce0ec;--white:#fff;--gutter:clamp(20px,5vw,72px);--radius:22px;color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.6 "Inter","Segoe UI",system-ui,sans-serif}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:3px solid #5270ff;outline-offset:4px}
.skip{position:fixed;top:12px;left:12px;z-index:20;background:var(--lime);padding:12px 16px;border-radius:8px;transform:translateY(-150%)}
.skip:focus{transform:none}
.wrap{width:min(100% - var(--gutter)*2,1232px);margin-inline:auto}
.top{position:sticky;top:0;z-index:10;background:var(--cream);border-bottom:1px solid var(--line)}
.nav-wrap{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;flex-shrink:0}
.brand img{width:208px}
.top nav,.actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.top nav{gap:clamp(20px,3vw,40px);font-size:.94rem;font-weight:650}
.top nav>a:not(.button):hover,.text-link:hover{color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.button{border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:14px;border-radius:10px;padding:11px 17px;min-height:46px;font-size:.93rem;font-weight:750;line-height:1.25;transition:background-color .2s,color .2s,transform .2s}
.button:hover{transform:translateY(-2px)}
.button-dark{background:var(--ink);color:white}
.button-dark:hover{background:#283350}
.button-lime{background:var(--lime);color:var(--ink)}
.button-lime:hover{background:#edffa2}
.button-blue{background:var(--blue);color:white}
.button-blue:hover{background:var(--blue-hover)}
.button-outline{border-color:#707da3;color:white}
.button-outline:hover{background:#28365e}
.menu-toggle{border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink);padding:8px 12px;font-size:.9rem;font-weight:750}
.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 76% 44%,#263f9f 0%,#151f43 41%,#101426 79%);color:white}
.hero-grid{display:grid;grid-template-columns:1.02fr 1fr;align-items:center;gap:clamp(10px,4vw,60px);min-height:clamp(520px,46vw,660px);padding-block:55px 40px}
.hero-copy{position:relative;z-index:1}
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 16px;color:#364366;font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.eyebrow i,.hero-art figcaption i{flex:none;width:8px;height:8px;border-radius:2px;background:var(--blue)}
.hero .eyebrow{color:#d5defc}
.hero .eyebrow i,.quote .eyebrow i{background:var(--lime);box-shadow:0 0 14px #daf75155}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{line-height:1.05;letter-spacing:-.047em}
h1{font-size:clamp(3.15rem,6.15vw,6rem);font-weight:850;margin-bottom:24px}
h1 em,h2 em{display:block;color:var(--blue);font-style:normal}
h1 em,.quote h2 em{color:var(--lime)}
h2{font-size:clamp(2.55rem,5vw,4.65rem);margin-bottom:0;font-weight:820}
h3{font-size:1.43rem;margin-bottom:10px}
.hero-description{max-width:47ch;margin-bottom:29px;color:#dce3f6;font-size:clamp(1rem,1.25vw,1.13rem)}
.hero-end,.footer-end{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #ffffff35;padding-block:17px;color:#c0cbe9;font-size:.71rem;letter-spacing:.12em;font-weight:700}
.hero-end span span{color:var(--lime);margin-left:4px}
.hero-art{margin:0;min-width:0}
.hero-art figcaption{text-align:right;display:flex;align-items:center;justify-content:flex-end;gap:8px;color:#dce3f6;font-size:.72rem;letter-spacing:.06em}
.hero-art figcaption i{background:var(--lime);width:6px;height:6px}
.device-scene{position:relative;aspect-ratio:1.25;isolation:isolate;container-type:inline-size}
.device-scene::before{content:"";position:absolute;inset:3% -3% 1%;background-image:radial-gradient(#98adff72 1px,transparent 1.5px);background-size:19px 19px;mask-image:radial-gradient(black,transparent 73%)}
.orbit{position:absolute;border:1px solid #8097ff4f;border-radius:50%;inset:11% 2%;transform:rotate(-24deg)}
.orbit-b{inset:4% 10%;transform:rotate(31deg)}
.spark{position:absolute;right:5%;top:7%;color:var(--lime);font-size:clamp(22px,5cqw,40px)}
.desktop-device{position:absolute;inset:13% 12% 19% 2%;border:1px solid #a9b6ec;border-radius:3cqw;overflow:hidden;box-shadow:0 28px 60px #070d2bbb;background:#f8f7ef;transform:rotate(-5deg);color:#132421}
.browser-bar{display:flex;align-items:center;gap:1cqw;padding:2cqw 2.5cqw;background:#f3f3ff;border-bottom:1px solid #dbe0f3;color:#3e4b75}
.browser-bar i{width:1.1cqw;height:1.1cqw;border-radius:50%;background:#8496da}
.browser-bar i:first-child{background:#2448f5}
.browser-bar span{margin-inline:auto;font-size:1.65cqw;font-weight:750}
.sample-top{display:flex;justify-content:space-between;padding:2.4cqw 3.8cqw;font-size:1.55cqw}
.sample-top strong,.phone-device small{letter-spacing:.11em}
.sample-main{display:grid;grid-template-columns:1fr .95fr;align-items:center;gap:1cqw;padding:2.3cqw 3.8cqw;background:#e3eccd}
.sample-main small{display:block;color:#445634;font-size:1.4cqw;font-weight:800;letter-spacing:.15em}
.sample-main strong{display:block;font-family:Georgia,serif;font-size:7cqw;letter-spacing:-.07em;line-height:.92;margin:1.4cqw 0 2.6cqw}
.sample-main span,.phone-device span{display:inline-block;border-radius:4px;background:#263b2d;color:white;font-size:1.55cqw;padding:.6cqw 1.4cqw;font-weight:700}
.product-art,.phone-art{position:relative;min-height:26cqw;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;gap:1.2cqw;padding-bottom:3cqw;background:radial-gradient(ellipse at 54% 40%,#f4f8d8,#bac798 76%);border-radius:44% 44% 8px 8px}
.bottle{display:block;position:relative;width:8.7cqw;height:12cqw;background:linear-gradient(110deg,#5b391e,#9e683a 24%,#e6a965 52%,#9b6439 84%);border-radius:1cqw 1cqw 1.6cqw 1.6cqw;box-shadow:1cqw 1.3cqw 1.5cqw #43513055}
.bottle::before{content:"";position:absolute;bottom:100%;left:26%;width:48%;height:29%;background:linear-gradient(100deg,#181917,#55574a,#272b25);border-radius:.6cqw .6cqw 0 0}
.bottle::after{content:"";position:absolute;left:14%;right:14%;top:35%;height:43%;background:#f4e5c2;border-radius:1px}
.small-bottle{height:8.5cqw;width:6cqw;filter:saturate(.6)}
.sample-items{display:flex;gap:2cqw;padding:2cqw 3.8cqw}
.sample-items i{display:block;flex:1;height:5cqw;border-radius:4px;background:#ece9dc}
.phone-device{position:absolute;z-index:2;right:3%;top:31%;width:25%;height:59%;border:.85cqw solid #101426;border-radius:3.5cqw;background:#f8f7ef;color:#17281e;box-shadow:0 15px 33px #050a26a0;transform:rotate(9deg);padding:5.4cqw 1.8cqw 1cqw;overflow:hidden}
.phone-notch{position:absolute;top:1cqw;left:34%;width:32%;height:1.2cqw;background:#101426;border-radius:1cqw}
.phone-device small{display:block;font-size:1.25cqw;font-weight:850;margin-bottom:1.2cqw}
.phone-art{min-height:17cqw;margin-bottom:1.3cqw;padding-bottom:1.9cqw}
.phone-art .bottle{width:5.5cqw;height:7.5cqw}
.phone-device strong{display:block;font-family:Georgia,serif;font-size:3.1cqw;line-height:1}
.phone-line{display:block;width:55%;height:.65cqw;background:#ccd3bb;margin:1cqw 0;border-radius:3px}
.art-sticker{position:absolute;z-index:3;bottom:9%;left:8%;width:13%;aspect-ratio:1;display:grid;place-items:center;border-radius:25%;background:var(--lime);transform:rotate(-12deg);box-shadow:0 10px 20px #070d2b5c}
.art-sticker img{width:77%}
.section{padding-block:clamp(65px,8vw,118px)}
.about,.reasons-grid,.quote-grid{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:clamp(25px,6vw,95px)}
.about-text{color:var(--muted);font-size:clamp(1rem,1.55vw,1.2rem);align-self:end}
.about-text p:last-child,.section-head p:last-child{margin-bottom:0}
.services{background:#eff2ff;border-block:1px solid #dce3fa}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:32px}
.section-head>p{max-width:35ch;color:var(--muted)}
.service-grid,.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.service-card,.project-card{position:relative;display:flex;flex-direction:column;padding:clamp(20px,3vw,32px);border:1px solid #dce1f1;border-radius:var(--radius);background:white;transition:transform .2s,border-color .2s,box-shadow .2s}
.service-card:hover,.service-card:focus-within,.project-card:hover{transform:translateY(-4px);border-color:#97a8f7;box-shadow:0 14px 30px #243b8314}
.card-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:23px}
.card-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:15px;background:#e9edff;color:var(--blue)}
.card-icon svg{width:29px;height:29px}
.service-card:nth-child(even) .card-icon{background:#edfaaf;color:#26351a}
.card-index{font-size:.75rem;color:#465476;font-weight:800;letter-spacing:.1em}
.service-card p,.project-card p,.portfolio-empty p:last-child,.steps p{color:var(--muted);margin-bottom:13px}
.tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:2px 0 21px;padding:0}
.tags li{border-radius:99px;background:#f0f3fa;padding:3px 9px;font-size:.74rem;color:#36445f}
.text-link{color:var(--blue-hover);font-weight:750;width:max-content;max-width:100%;margin-top:auto;padding-block:5px}
.service-note{font-size:.84rem}
.portfolio-empty{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(16px,4vw,42px);padding:clamp(20px,5vw,47px);border:1px dashed #aab6e9;border-radius:var(--radius);background:#f1f3ff}
.portfolio-empty .eyebrow{margin-bottom:8px}
.portfolio-empty p:last-child{margin-bottom:0}
.empty-decoration{width:clamp(72px,12vw,132px);aspect-ratio:1;border-radius:18px;background:var(--blue);color:var(--lime);display:grid;place-items:center;background-image:radial-gradient(#a7b3ff75 1px,transparent 1.2px);background-size:12px 12px}
.empty-decoration span{font-size:clamp(2.5rem,6vw,5rem);font-weight:500}
.project-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;margin-bottom:20px}
.reasons{background:#eafa9a}
.reasons h2 em{color:#314213}
.reason-list{margin:0;padding:0;list-style:none}
.reason-list li{display:flex;align-items:center;gap:12px;border-bottom:1px solid #a8bd65;padding:11px 0;font-weight:650}
.reason-list li::before{content:"✓";color:#334314;font-weight:850}
.steps{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;gap:0;margin:0;padding:0}
.steps li{border-top:2px solid #a9b7ef;padding:20px 20px 0 0}
.steps li span{display:grid;place-items:center;width:44px;height:44px;background:#e8edff;color:var(--blue-hover);border-radius:50%;font-weight:850;margin-bottom:16px}
.steps p{max-width:25ch}
.quote{background:#17244c;color:white}
.quote .eyebrow{color:#dce3f6}
.quote-copy p:not(.eyebrow){margin:22px 0 14px;color:#dae3ff;max-width:40ch}
.quote .text-link{color:var(--lime)}
.quote-form{background:white;color:var(--ink);padding:clamp(18px,3vw,32px);border-radius:var(--radius)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 13px;margin-bottom:20px}
.full{grid-column:1/-1}
label{display:block;font-size:.88rem;font-weight:750;min-width:0}
label small{color:#515a6f;font-weight:500}
input,select,textarea{width:100%;margin-top:5px;padding:10px 11px;border:1px solid #bfc8dc;border-radius:8px;background:#fcfdff;color:var(--ink);min-height:44px}
textarea{resize:vertical}
.form-note{margin:10px 0 0;color:var(--muted);font-size:.82rem}
.form-note:empty{display:none}
.form-result{border-top:1px solid var(--line);margin-top:16px;padding-top:15px}
.form-result .actions{margin-top:10px}
.footer{background:var(--ink);color:white;padding-top:44px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:24px;padding-bottom:25px}
.brand-footer img{width:220px}
.footer p{margin:8px 0;color:#c2cce8}
.footer nav,.footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.footer nav a:hover,.footer-contact>a:not(.button):hover{text-decoration:underline;text-underline-offset:4px}
.footer-end{letter-spacing:0;color:#c2cce8}
.floating{position:fixed;right:clamp(15px,3vw,42px);bottom:clamp(15px,3vw,36px);z-index:8;display:grid;place-items:center;width:55px;height:55px;border:1px solid #fff9;border-radius:50%;background:var(--lime);color:var(--ink);box-shadow:0 6px 22px #10142655;transition:transform .2s}
.floating svg{width:29px;height:29px}
.floating:hover{transform:translateY(-3px)}
.no-script{text-align:center;margin:0;padding:12px}
.no-script a{text-decoration:underline}
@media(prefers-reduced-motion:no-preference){.reveal-in{animation:arrive .48s ease-out both}@keyframes arrive{from{opacity:.55;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media(max-width:900px){.hero-grid{gap:24px}.portfolio-empty{grid-template-columns:auto 1fr}.portfolio-empty>.button{grid-column:2;justify-self:start}.quote-grid{gap:30px}}
@media(max-width:740px){
  html{scroll-padding-top:72px}
  .nav-wrap{min-height:64px;flex-wrap:wrap;gap:0}
  .brand img{width:176px}
  .top nav{width:100%;align-items:stretch;flex-direction:column;gap:0;padding-bottom:12px}
  .top nav>a{padding:10px 12px}
  .top nav .button{align-self:start}
  .menu-toggle{display:inline-flex;gap:7px}
  .hero-grid,.about,.reasons-grid,.quote-grid{grid-template-columns:1fr}
  .hero-grid{padding-top:50px;gap:28px}
  .hero-art{width:min(100%,495px);justify-self:center}
  .section-head{display:block}
  .section-head>p{margin:13px 0 0}
  .steps{grid-template-columns:1fr 1fr;row-gap:12px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:first-child{grid-column:1/-1}
}
@media(max-width:500px){.service-grid,.project-grid,.form-grid{grid-template-columns:1fr}.portfolio-empty{grid-template-columns:1fr}.portfolio-empty>.button{grid-column:1}.empty-decoration{width:65px}.hero-end{font-size:.57rem}.footer-end{flex-direction:column;padding-right:56px}.footer-grid{grid-template-columns:1fr}.hero-grid{padding-bottom:28px}.actions{gap:9px}.button{padding-inline:12px;gap:8px}}