:root{ --ink:#10131A; --ink-soft:#2B313D; --canvas:#EDEFF2; --canvas-2:#E4E8EE; --paper:#FFFFFF; --blue:#1C40D8; --blue-deep:#1230A6; --blue-tint:#E5EAFE; --blue-line:rgba(28,64,216,0.28); --fg:var(--ink); --muted:#565E6C; --line:rgba(16,19,26,0.13); --card-bg:#FFFFFF; --card-line:rgba(16,19,26,0.12); --accent:var(--blue); --maxw:1280px; --gut:max(28px, calc((100vw - var(--maxw)) / 2)); --font-display:"Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif; --font-body:"Hanken Grotesk", system-ui, -apple-system, sans-serif; --font-mono:"Space Mono", ui-monospace, monospace; --r-sm:8px; --r:14px; --r-lg:22px; --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--font-body); background:var(--canvas); color:var(--fg); line-height:1.6; font-size:1.0625rem; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font-family:inherit} ul{list-style:none} ::selection{background:var(--blue);color:#fff} .frame{position:fixed;inset:0;pointer-events:none;z-index:5} .frame .v-line{ position:absolute;top:0;bottom:0;width:1px; background:var(--blue-line);opacity:.55; } .frame .v-line.left{left:var(--gut)} .frame .v-line.right{right:var(--gut)} .frame .v-line::before{ content:"+";position:absolute;top:88px;left:50%; transform:translate(-50%,-50%); font-family:var(--font-mono);font-size:14px;color:var(--blue);opacity:.7; } .frame .v-line::after{ content:"+";position:absolute;bottom:60px;left:50%; transform:translate(-50%,50%); font-family:var(--font-mono);font-size:14px;color:var(--blue);opacity:.55; } .frame .coord{ position:absolute;font-family:var(--font-mono);font-size:10.5px; letter-spacing:.05em;color:var(--blue);opacity:.6; } .frame .coord.tl{top:84px;left:calc(var(--gut) + 12px)} .frame .coord.br{bottom:54px;right:calc(var(--gut) + 12px)} @media (max-width:860px){ .frame{display:none} } .container{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,56px)} .section{padding-block:clamp(64px,9vw,128px);position:relative} .section--tight{padding-block:clamp(48px,6vw,80px)} .section--ink{background:var(--ink);--fg:#E9ECF2;--muted:#9AA2B2;--line:rgba(255,255,255,.14);--card-bg:#191E29;--card-line:rgba(255,255,255,.12);--accent:#7E96FF} .section--blue{background:var(--blue);--fg:#FFFFFF;--muted:#C9D2FF;--line:rgba(255,255,255,.24);--card-bg:rgba(255,255,255,.08);--card-line:rgba(255,255,255,.22);--accent:#FFFFFF} .section--sky{background:var(--blue-tint)} .section--paper{background:var(--paper)} .eyebrow{ display:inline-flex;align-items:center;gap:.6em; font-family:var(--font-mono);font-size:.72rem;font-weight:700; letter-spacing:.18em;text-transform:uppercase;color:var(--accent); margin-bottom:1.2rem; } .eyebrow::before{content:"";width:9px;height:9px;background:var(--accent);display:inline-block;transform:rotate(0deg)} .display{ font-family:var(--font-display);font-weight:700;line-height:1.0; letter-spacing:-.022em;color:var(--fg);text-wrap:balance; } h1.display{font-size:clamp(2.7rem,7.2vw,5.6rem)} h2.display{font-size:clamp(2.05rem,4.6vw,3.6rem);line-height:1.04} h3{font-family:var(--font-display);font-weight:600;font-size:1.32rem;letter-spacing:-.01em;line-height:1.18} .lead{font-size:clamp(1.08rem,1.6vw,1.32rem);color:var(--muted);max-width:60ch;line-height:1.55} .muted{color:var(--muted)} .hl{ color:var(--blue);position:relative;white-space:nowrap; } .section--ink .hl,.section--blue .hl{color:var(--accent)} .hl::after{ content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.30em; background:var(--blue-tint);z-index:-1;border-radius:2px; } .section--ink .hl::after,.section--blue .hl::after{background:rgba(126,150,255,.22)} .kicker-num{font-family:var(--font-mono);font-size:.82rem;font-weight:700;color:var(--accent);letter-spacing:.04em} .btn{ display:inline-flex;align-items:center;gap:.55em; font-family:var(--font-body);font-weight:600;font-size:.97rem; padding:.92em 1.5em;border-radius:999px;border:1px solid transparent; cursor:pointer;transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s,box-shadow .25s; line-height:1;white-space:nowrap; } .btn .arrow{transition:transform .3s var(--ease)} .btn:hover .arrow{transform:translateX(4px)} .btn--primary{background:var(--blue);color:#fff} .btn--primary:hover{background:var(--blue-deep);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(28,64,216,.6)} .btn--ink{background:var(--ink);color:var(--canvas)} .btn--ink:hover{background:#000;transform:translateY(-2px)} .btn--light{background:var(--paper);color:var(--ink);border-color:var(--card-line)} .btn--light:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:0 12px 26px -16px rgba(16,19,26,.5)} .btn--ghost{background:transparent;color:var(--fg);border-color:var(--line)} .btn--ghost:hover{background:var(--fg);color:var(--canvas)} .btn--white{background:#fff;color:var(--blue)} .btn--white:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,0,0,.4)} .btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center} .arrow{width:18px;height:18px;flex:none} .txtlink{display:inline-flex;align-items:center;gap:.4em;font-weight:600;color:var(--accent);position:relative} .txtlink::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)} .txtlink:hover::after{transform:scaleX(1)} .txtlink:hover .arrow{transform:translateX(4px)} .ico{width:24px;height:24px;flex:none} .icon-chip{ width:50px;height:50px;border:1px solid var(--card-line);border-radius:12px; display:grid;place-items:center;color:var(--accent);flex:none; transition:background .3s,color .3s,border-color .3s; } .card:hover .icon-chip{background:var(--blue);border-color:var(--blue);color:#fff} .header{position:sticky;top:0;z-index:40;transition:background .3s,box-shadow .3s,border-color .3s} .header::after{content:"";position:absolute;inset:0;border-bottom:1px solid transparent;pointer-events:none;transition:border-color .3s} .header.scrolled{background:rgba(237,239,242,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} .header.scrolled::after{border-color:var(--line)} .nav{height:74px;display:flex;align-items:center;justify-content:space-between;gap:2rem} .brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:1.28rem;letter-spacing:-.02em} .brand svg{width:30px;height:30px;flex:none} .brand span{line-height:1} .nav-links{display:flex;align-items:center;gap:2rem} .nav-links a{font-size:.97rem;font-weight:500;color:var(--ink-soft);position:relative;padding:.2em 0;transition:color .2s} .nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)} .nav-links a:hover{color:var(--ink)} .nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)} .nav-links a[aria-current="page"]{color:var(--ink)} .nav-right{display:flex;align-items:center;gap:1rem} .hamburger{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:10px;background:transparent;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px} .hamburger span{display:block;width:20px;height:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s} .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hamburger.open span:nth-child(2){opacity:0} .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobile-menu{ position:fixed;inset:0;z-index:39;background:var(--canvas); padding:96px clamp(24px,7vw,48px) 40px; display:flex;flex-direction:column; transform:translateY(-100%);opacity:0;visibility:hidden; transition:transform .45s var(--ease),opacity .3s,visibility .45s; } .mobile-menu.open{transform:translateY(0);opacity:1;visibility:visible} .mobile-menu a.m-link{font-family:var(--font-display);font-weight:600;font-size:2rem;letter-spacing:-.02em;color:var(--ink);padding:.45rem 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center} .mobile-menu a.m-link .idx{font-family:var(--font-mono);font-size:.85rem;color:var(--blue);font-weight:700} .mobile-menu .m-foot{margin-top:auto;display:flex;flex-direction:column;gap:1.4rem} .mobile-menu .btn{justify-content:center} .m-social{display:flex;gap:1rem;color:var(--ink-soft)} .m-social a{width:42px;height:42px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center} .m-coord{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);letter-spacing:.05em} @media (max-width:900px){ .nav-links,.nav-right .btn{display:none} .hamburger{display:flex} } .hero{padding-block:clamp(48px,8vw,92px) clamp(40px,6vw,72px);position:relative;overflow:hidden} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} .hero h1{margin:.2rem 0 1.6rem} .hero .lead{margin-bottom:2.2rem} .hero-meta{display:flex;align-items:center;gap:1.6rem;margin-top:2.4rem;flex-wrap:wrap} .hero-meta .tick{display:inline-flex;align-items:center;gap:.5em;font-size:.92rem;font-weight:500;color:var(--ink-soft)} .hero-meta .tick svg{width:16px;height:16px;color:var(--blue);flex:none} .hero-visual{position:relative} .hero-media{ position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/4.4; background:linear-gradient(150deg,var(--blue),var(--ink)); box-shadow:0 40px 80px -40px rgba(16,19,26,.45); } .hero-media img{width:100%;height:100%;object-fit:cover;transition:opacity .4s} .hero-media .tag{ position:absolute;top:16px;left:16px;font-family:var(--font-mono);font-size:.66rem; letter-spacing:.12em;text-transform:uppercase;color:#fff; background:rgba(16,19,26,.4);backdrop-filter:blur(6px);padding:.5em .8em;border-radius:99px;border:1px solid rgba(255,255,255,.25) } .float-card{ position:absolute;left:-22px;bottom:30px;background:var(--paper); border:1px solid var(--card-line);border-radius:16px;padding:1rem 1.2rem; box-shadow:0 24px 50px -24px rgba(16,19,26,.4);display:flex;align-items:center;gap:.9rem; } .float-card .fc-ico{width:42px;height:42px;border-radius:10px;background:var(--blue-tint);color:var(--blue);display:grid;place-items:center} .float-card .big{font-family:var(--font-display);font-weight:700;font-size:1.5rem;line-height:1;color:var(--ink)} .float-card small{color:var(--muted);font-size:.78rem} .float-card.top{left:auto;right:-18px;bottom:auto;top:24px} .trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:1.6rem;background:var(--paper)} .trust-label{text-align:center;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem} .marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .marquee__track{display:flex;gap:3.4rem;width:max-content;animation:scroll 34s linear infinite} .marquee:hover .marquee__track{animation-play-state:paused} .marquee__track span{font-family:var(--font-display);font-weight:600;font-size:1.18rem;letter-spacing:-.01em;color:var(--ink-soft);opacity:.6;display:inline-flex;align-items:center;gap:3.4rem;white-space:nowrap} .marquee__track span::after{content:"✳";color:var(--blue);font-size:.8rem;opacity:.8} @keyframes scroll{to{transform:translateX(-50%)}} .sec-head{max-width:760px;margin-bottom:clamp(2.4rem,4vw,3.6rem)} .sec-head.center{margin-inline:auto;text-align:center} .sec-head .lead{margin-top:1.1rem} .sec-head.center .lead{margin-inline:auto} .head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.4rem,4vw,3.4rem)} .head-row .sec-head{margin-bottom:0} .grid{display:grid;gap:1.4rem} .g-3{grid-template-columns:repeat(3,1fr)} .g-2{grid-template-columns:repeat(2,1fr)} .card{ background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--r); padding:clamp(1.6rem,2.4vw,2.2rem);transition:transform .35s var(--ease),border-color .3s,box-shadow .35s; position:relative;height:100%; } .card:hover{transform:translateY(-5px);border-color:var(--blue);box-shadow:0 26px 50px -30px rgba(28,64,216,.4)} .card .kicker-num{display:block;margin-bottom:1.1rem} .card h3{margin:1.1rem 0 .7rem} .card p{color:var(--muted);font-size:.98rem} .card-top{display:flex;justify-content:space-between;align-items:flex-start} .benefit h3{font-size:1.45rem} .svc-card{display:flex;flex-direction:column} .svc-card .corner{position:absolute;top:1.5rem;right:1.5rem;color:var(--muted);transition:color .3s,transform .3s var(--ease)} .svc-card:hover .corner{color:var(--blue);transform:translate(3px,-3px)} .quote-card{display:flex;flex-direction:column;gap:1.4rem} .quote-card blockquote{font-family:var(--font-display);font-weight:500;font-size:1.22rem;line-height:1.4;letter-spacing:-.01em;color:var(--fg)} .who{display:flex;align-items:center;gap:.85rem;margin-top:auto} .avatar{width:46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:1rem;flex:none} .who .nm{font-weight:600;color:var(--fg);font-size:.97rem;line-height:1.2} .who .ro{font-size:.82rem;color:var(--muted)} .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} .split-media{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:5/4.6;background:linear-gradient(150deg,var(--ink),var(--blue));position:relative} .split-media img{width:100%;height:100%;object-fit:cover;transition:opacity .4s} .split-media .badge{position:absolute;bottom:18px;left:18px;background:var(--paper);border-radius:12px;padding:.7rem 1rem;display:flex;align-items:center;gap:.7rem;box-shadow:0 20px 40px -20px rgba(0,0,0,.4)} .split-media .badge b{font-family:var(--font-display);font-size:1.3rem;line-height:1;color:var(--ink)} .split-media .badge small{font-size:.74rem;color:var(--muted)} .split-body p+p{margin-top:1.1rem} .split-body .lead{margin-bottom:1.6rem} .feat-list{display:grid;gap:0;border-top:1px solid var(--line)} .feat{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;padding:1.7rem 0;border-bottom:1px solid var(--line);align-items:start} .feat .num{font-family:var(--font-mono);font-weight:700;color:var(--blue);font-size:.9rem;padding-top:.35rem} .section--ink .feat .num{color:var(--accent)} .feat h3{margin-bottom:.45rem} .feat p{color:var(--muted);max-width:60ch} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center} .stat__num{font-family:var(--font-display);font-weight:700;font-size:clamp(2.6rem,5vw,4rem);line-height:1;letter-spacing:-.02em;color:var(--fg)} .stat__num.word{font-size:clamp(1.7rem,3.2vw,2.5rem);letter-spacing:-.01em} .stat__label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:.7rem} .stat{position:relative} .stat:not(:last-child)::after{content:"";position:absolute;right:-1rem;top:10%;height:80%;width:1px;background:var(--line)} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem} .step{position:relative;padding-top:1.6rem;border-top:2px solid var(--line)} .step::before{content:"";position:absolute;top:-2px;left:0;width:42px;height:2px;background:var(--blue)} .step .st-num{font-family:var(--font-mono);font-weight:700;color:var(--blue);font-size:.85rem;margin-bottom:.8rem;display:block} .step h3{font-size:1.25rem;margin-bottom:.6rem} .step p{color:var(--muted);font-size:.96rem} .faq{max-width:860px;margin-inline:auto} .faq details{border-bottom:1px solid var(--line)} .faq summary{ list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem; padding:1.45rem 0;font-family:var(--font-display);font-weight:600;font-size:1.18rem;letter-spacing:-.01em;color:var(--fg) } .faq summary::-webkit-details-marker{display:none} .faq .faq-ico{width:22px;height:22px;flex:none;color:var(--blue);transition:transform .35s var(--ease)} .faq details[open] .faq-ico{transform:rotate(45deg)} .faq .faq-a{padding:0 3rem 1.6rem 0;color:var(--muted)} .filterbar{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.4rem} .filter-btn{ font-family:var(--font-body);font-weight:500;font-size:.9rem; padding:.6em 1.15em;border-radius:99px;border:1px solid var(--line); background:transparent;color:var(--ink-soft);cursor:pointer;transition:all .25s } .filter-btn:hover{border-color:var(--ink)} .filter-btn.active{background:var(--ink);color:var(--canvas);border-color:var(--ink)} .work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem} .work-card{border-radius:var(--r);overflow:hidden;background:var(--paper);border:1px solid var(--card-line);transition:transform .35s var(--ease),box-shadow .35s,border-color .3s;display:flex;flex-direction:column} .work-card:hover{transform:translateY(-5px);box-shadow:0 28px 54px -30px rgba(16,19,26,.45);border-color:var(--blue)} .work-media{position:relative;aspect-ratio:16/11;overflow:hidden;background:linear-gradient(150deg,var(--blue),var(--ink))} .work-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),opacity .4s} .work-card:hover .work-media img{transform:scale(1.06)} .work-media .chip{position:absolute;top:14px;left:14px;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.92);color:var(--ink);padding:.45em .75em;border-radius:99px} .work-body{padding:1.35rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.4rem;flex:1} .work-body .res{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.04em;color:var(--blue);text-transform:uppercase} .work-body h3{font-size:1.28rem;margin-bottom:.2rem} .work-body p{color:var(--muted);font-size:.92rem;flex:1} .work-body .txtlink{margin-top:.7rem} .work-card.hide{display:none} .contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:start} .form-card{background:var(--paper);border:1px solid var(--card-line);border-radius:var(--r-lg);padding:clamp(1.6rem,3vw,2.6rem)} .field{margin-bottom:1.2rem} .field label{display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.5rem} .field input,.field textarea{ width:100%;font-family:var(--font-body);font-size:1rem;color:var(--ink); background:var(--canvas);border:1px solid var(--card-line);border-radius:10px; padding:.85rem 1rem;transition:border-color .2s,box-shadow .2s,background .2s } .field textarea{resize:vertical;min-height:130px} .field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px var(--blue-tint)} .field .err{display:none;color:#C32D2D;font-size:.8rem;margin-top:.4rem} .field.invalid .err{display:block} .field.invalid input,.field.invalid textarea{border-color:#C32D2D;box-shadow:0 0 0 4px rgba(195,45,45,.1)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem} #contactForm .btn{width:100%;justify-content:center;margin-top:.4rem} .form-note{font-size:.82rem;color:var(--muted);margin-top:1rem;text-align:center} .form-success{display:none;text-align:center;padding:2rem 1rem} .form-success.show{display:block} .form-success .ok-ico{width:60px;height:60px;border-radius:50%;background:var(--blue-tint);color:var(--blue);display:grid;place-items:center;margin:0 auto 1.2rem} .form-success h3{font-size:1.5rem;margin-bottom:.6rem} .form-success p{color:var(--muted);max-width:42ch;margin:0 auto 1.4rem} .info-list{display:grid;gap:.4rem;margin:1.6rem 0} .info-item{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem 0;border-bottom:1px solid var(--line)} .info-item .icon-chip{width:44px;height:44px} .info-item .lbl{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .info-item .val{font-weight:600;color:var(--fg);font-size:1.02rem} .info-item a.val:hover{color:var(--blue)} .social-row{display:flex;gap:.8rem;margin-top:1.6rem} .social-row a{width:46px;height:46px;border:1px solid var(--line);border-radius:11px;display:grid;place-items:center;color:var(--ink-soft);transition:all .25s} .social-row a:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px)} .map-wrap{margin-top:1.8rem;border-radius:var(--r);overflow:hidden;border:1px solid var(--card-line);aspect-ratio:16/9;background:var(--canvas-2)} .map-wrap iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.15)} .cta-band{text-align:center} .cta-band h2{margin-bottom:1.4rem;max-width:18ch;margin-inline:auto} .cta-band .lead{margin:0 auto 2.2rem} .cta-band .btn-row{justify-content:center} .cta-sub{margin-top:1.6rem;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .footer{background:var(--ink);color:#E9ECF2;padding-block:clamp(3.5rem,6vw,5rem) 2rem;--muted:#8C95A6;--line:rgba(255,255,255,.12)} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid var(--line)} .foot-brand .brand{color:#fff;margin-bottom:1.1rem} .foot-brand p{color:var(--muted);max-width:34ch;margin-bottom:1.6rem;font-size:.96rem} .foot-social{display:flex;gap:.7rem} .foot-social a{width:42px;height:42px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;color:#C7CDD8;transition:all .25s} .foot-social a:hover{background:var(--blue);border-color:var(--blue);color:#fff} .foot-col h4{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1.2rem;font-weight:700} .foot-col ul{display:grid;gap:.7rem} .foot-col a{color:#C7CDD8;font-size:.96rem;transition:color .2s} .foot-col a:hover{color:#fff} .foot-contact .ci{margin-bottom:.9rem} .foot-contact .ci small{display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem} .foot-contact .ci a,.foot-contact .ci span{color:#E9ECF2;font-size:.96rem} .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:1.8rem;flex-wrap:wrap} .foot-bottom p{color:var(--muted);font-size:.85rem} .foot-bottom .made{font-family:var(--font-mono);font-size:.74rem;color:var(--muted);letter-spacing:.04em} .totop{position:fixed;bottom:24px;right:24px;width:48px;height:48px;border-radius:50%;background:var(--ink);color:#fff;border:none;cursor:pointer;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .3s var(--ease);z-index:30;box-shadow:0 12px 30px -10px rgba(0,0,0,.5)} .totop.show{opacity:1;visibility:visible;transform:none} .totop:hover{background:var(--blue)} .skip{position:absolute;left:-999px;top:0;background:var(--blue);color:#fff;padding:.7em 1.2em;border-radius:0 0 8px 0;z-index:100} .skip:focus{left:0} .reveal{opacity:0;transform:translateY(20px);transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--d,0s)} .reveal.in{opacity:1;transform:none} :focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;border-radius:3px} @media (max-width:1080px){ .g-3,.work-grid,.steps,.stats{grid-template-columns:repeat(2,1fr)} .stat:nth-child(2)::after{display:none} } @media (max-width:880px){ .hero-grid,.split{grid-template-columns:1fr} .hero-visual{order:-1;max-width:480px} .split-media{order:-1} .contact-grid{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr;gap:2rem} .float-card.top{display:none} } @media (max-width:600px){ body{font-size:1rem} .g-3,.g-2,.work-grid,.steps,.stats,.foot-grid,.form-row{grid-template-columns:1fr} .stat::after{display:none} .stat{padding-bottom:1.4rem;border-bottom:1px solid var(--line)} .stat:last-child{border-bottom:none} .float-card{left:50%;transform:translateX(-50%);bottom:-22px} .head-row{align-items:flex-start} .faq .faq-a{padding-right:1.5rem} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} html{scroll-behavior:auto} .reveal{opacity:1;transform:none} .marquee__track{animation:none} }