/* Yatkesh — Apple-style marketing page: large type, generous space, full-bleed light/dark sections */
:root{--bg:#fff;--alt:#f5f5f7;--ink:#1d1d1f;--mut:#6e6e73;--line:#d2d2d7;--red:#d8312f;--red2:#b9221f;--black:#000;--dark:#161617;--on-dark:#f5f5f7;--mut-dark:#a1a1a6}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:17px/1.47 -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img,svg{display:block}
section{padding:120px 0}
.in{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;font-weight:700}

/* ---- nav: thin frosted bar ---- */
.gnav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
.nav{max-width:1120px;margin:0 auto;padding:0 24px;height:52px;display:flex;align-items:center;gap:24px}
.brand img{height:32px;width:auto}
.nav nav{display:flex;gap:30px;margin:0 auto;font-size:13px}
.nav nav a{opacity:.8;transition:opacity .2s}.nav nav a:hover{opacity:1}
.lang{font-size:12px;color:var(--mut)}.lang a[aria-current]{color:var(--ink);font-weight:600}.lang a:hover{color:var(--ink)}

/* ---- buttons ---- */
.pill{display:inline-block;background:var(--red);color:#fff;padding:13px 26px;border-radius:980px;font-size:17px;font-weight:500;border:0;cursor:pointer;font-family:inherit;letter-spacing:-.01em;transition:background .2s,transform .2s}
.pill:hover{background:var(--red2)}.pill:active{transform:scale(.98)}
.pill.sm{padding:6px 14px;font-size:12px}
.pill.block{width:100%;text-align:center;margin-top:4px}
.link{color:var(--red);font-size:19px}.link:hover{text-decoration:underline}

/* ---- hero ---- */
.hero{padding:96px 0 0;text-align:center;overflow:hidden}
.hero .in{max-width:980px}
.eyebrow{font-size:17px;font-weight:600;color:var(--red);margin-bottom:18px}
h1{font-size:clamp(42px,8vw,88px);line-height:1.04;letter-spacing:-.04em}
h1 span{color:var(--red)}
.lead{font-size:clamp(19px,2.4vw,26px);line-height:1.35;color:var(--mut);max-width:760px;margin:26px auto 0;letter-spacing:-.015em}
.cta{display:flex;gap:28px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:34px}
.stage{max-width:1040px;margin:72px auto 0;padding:0 24px}
.stage svg{width:100%;height:auto;border-radius:32px;background:radial-gradient(120% 120% at 50% 0,#26262b 0,#0c0c0e 70%);box-shadow:0 40px 80px -30px rgba(0,0,0,.45)}
.stage text{fill:#86868b;font:600 11px ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.14em}
.stage text.core{fill:#fff;font-size:12px}
.fl{stroke-dasharray:3 9;animation:dash 1.6s linear infinite}
.halo{transform-box:fill-box;transform-origin:center;animation:pulse 4s ease-in-out infinite}
@keyframes dash{to{stroke-dashoffset:-24}}
@keyframes pulse{50%{transform:scale(1.12);opacity:.75}}

/* ---- facts band ---- */
.band{padding:0;border-bottom:1px solid var(--line)}
.band .in{display:grid;grid-template-columns:repeat(4,1fr);padding-top:64px;padding-bottom:64px}
.band div{text-align:center;padding:0 16px;border-left:1px solid var(--line)}
.band div:first-child{border-left:0}
.band strong{display:block;font-size:clamp(22px,2.6vw,32px);font-weight:700;letter-spacing:-.03em}
.band span{color:var(--mut);font-size:14px}

/* ---- section headings ---- */
.gray{background:var(--alt)}
.sh{text-align:center;max-width:820px;margin:0 auto 64px}
.sh h2{font-size:clamp(32px,5.2vw,56px);line-height:1.07;letter-spacing:-.035em}
.sh p{font-size:clamp(18px,2vw,22px);line-height:1.4;color:var(--mut);margin-top:18px}

/* ---- solution tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tile{background:#fff;border-radius:28px;padding:40px;min-height:320px;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.tile.wide{grid-column:span 2}.tile.full{grid-column:span 3;min-height:220px}
.tile h3{font-size:28px;line-height:1.14;letter-spacing:-.03em;margin-bottom:10px}
.tile p{font-size:17px;line-height:1.45;color:var(--mut);max-width:520px}
.ti{width:44px;height:44px;fill:none;stroke:var(--red);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tile.dark{background:#1d1d1f;color:var(--on-dark)}.tile.dark p{color:var(--mut-dark)}.tile.dark .ti{stroke:#ff6b66}
.also{text-align:center;color:var(--mut);font-size:15px;margin-top:40px}

/* ---- vendors: big quiet wordmarks ---- */
.vlist{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 32px;max-width:1000px;margin:0 auto}
.vlist span{font-size:clamp(24px,3.3vw,42px);font-weight:700;letter-spacing:-.035em;color:#aeaeb2;transition:color .25s}
.vlist span:hover{color:var(--ink)}
.vlist span:last-child{color:#d2d2d7;font-weight:500}

/* ---- how: black section ---- */
.black{background:var(--black);color:var(--on-dark)}
.black .sh p{color:var(--mut-dark)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.steps b{display:block;font-size:clamp(48px,6vw,72px);font-weight:700;letter-spacing:-.05em;color:var(--red);line-height:1;margin-bottom:20px}
.steps h3{font-size:24px;letter-spacing:-.025em;margin-bottom:8px}
.steps p{color:var(--mut-dark);font-size:17px}

/* ---- about ---- */
.intro{max-width:860px;margin:0 auto 72px;font-size:clamp(20px,2.4vw,26px);line-height:1.45;color:var(--mut);text-align:center;letter-spacing:-.02em}
.points{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.points div{border-top:1px solid var(--line);padding-top:22px}
.points h3{font-size:19px;letter-spacing:-.02em;margin-bottom:8px}
.points p{font-size:15px;color:var(--mut)}

/* ---- clients ---- */
.clients{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.clients div{background:#fff;border-radius:22px;height:120px;display:grid;place-items:center;padding:20px 28px}
.clients img{max-width:100%;max-height:56px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:.3s}
.clients div:hover img{filter:none;opacity:1}
.clients span{font-size:22px;font-weight:700;color:var(--mut)}

/* ---- contact: dark ---- */
.dark{background:var(--dark);color:var(--on-dark)}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.dark h2{font-size:clamp(34px,5vw,56px);line-height:1.07;letter-spacing:-.035em}
.dark .lead{color:var(--mut-dark);margin:20px 0 0;font-size:21px}
.links{margin-top:36px}.links a{display:block;font-size:clamp(24px,3.2vw,34px);font-weight:600;letter-spacing:-.03em;margin-top:10px}.links a:hover{color:#ff6b66}
address{font-style:normal;color:var(--mut-dark);margin-top:28px;line-height:1.6}
form{display:grid;gap:12px}
input,textarea{width:100%;background:#2a2a2d;border:1px solid transparent;border-radius:14px;padding:16px 18px;color:#fff;font:inherit;font-size:17px}
input::placeholder,textarea::placeholder{color:#86868b}
input:focus,textarea:focus{outline:0;border-color:var(--red);background:#303033}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form small{color:#86868b;font-size:12px}
.form-msg{font-size:14px;min-height:1.4em}.form-msg.ok{color:#8fe3a8}.form-msg.err{color:#ffb4b0}
form button[disabled]{opacity:.6;cursor:wait}

/* ---- footer ---- */
footer{background:var(--alt);color:var(--mut);font-size:12px;padding:22px 0}
footer .in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a:hover{color:var(--ink);text-decoration:underline}

/* ---- a11y helpers ---- */
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;z-index:99}.skip:focus{left:8px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}

/* ---- scroll reveal (class .js is added by main.js, so no-JS shows everything) ---- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.on{opacity:1;transform:none}
.tiles .tile:nth-child(2){transition-delay:.08s}.tiles .tile:nth-child(3){transition-delay:.16s}.steps>div:nth-child(2){transition-delay:.08s}.steps>div:nth-child(3){transition-delay:.16s}.steps>div:nth-child(4){transition-delay:.24s}

/* ---- mobile menu button ---- */
.menu-btn{display:none;margin-left:auto;background:none;border:0;width:44px;height:44px;cursor:pointer;color:var(--ink)}
.menu-btn span,.menu-btn span:before,.menu-btn span:after{display:block;width:18px;height:1.5px;background:currentColor;position:relative;margin:auto;content:"";transition:transform .25s}
.menu-btn span:before{position:absolute;top:-5px;left:0}.menu-btn span:after{position:absolute;top:5px;left:0}
.nav.open .menu-btn span{background:transparent}.nav.open .menu-btn span:before{transform:translateY(5px) rotate(45deg)}.nav.open .menu-btn span:after{transform:translateY(-5px) rotate(-45deg)}

@media(max-width:900px){
 section{padding:80px 0}
 .hero{padding-top:56px}.stage{margin-top:48px;padding:0 12px}.stage svg{border-radius:22px}
 .menu-btn{display:block;margin-left:0}.nav .lang{margin-left:auto}.nav>.pill{display:none}
 .nav nav{display:none}
 .nav.open nav{display:flex;flex-direction:column;gap:6px;position:absolute;top:52px;left:0;right:0;height:calc(100vh - 52px);height:calc(100dvh - 52px);overflow-y:auto;background:#fff;padding:28px 24px;font-size:28px;font-weight:600;letter-spacing:-.03em;margin:0}
 .nav.open nav a{opacity:1;padding:8px 0;border-bottom:1px solid var(--line)}
 .band .in{grid-template-columns:1fr 1fr;row-gap:36px;padding-top:44px;padding-bottom:44px}.band div:nth-child(3){border-left:0}
 .tiles{grid-template-columns:1fr}.tile,.tile.wide,.tile.full{grid-column:auto;min-height:0;padding:30px;border-radius:24px}.tile{gap:36px}
 .steps,.points{grid-template-columns:1fr 1fr;gap:36px 24px}
 .clients{grid-template-columns:1fr 1fr}.clients div{height:92px}
 .cgrid{grid-template-columns:1fr;gap:48px}.r2{grid-template-columns:1fr}
 .sh{margin-bottom:44px}.intro{margin-bottom:48px;text-align:left}
}
@media(max-width:520px){.steps,.points{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}.js .reveal{opacity:1;transform:none}}
.captcha:empty{display:none}.captcha{margin:2px 0}
.mail{font-size:12px;color:var(--mut)}.mail:hover{color:var(--ink)}.mail-m{display:none}
@media(max-width:900px){.nav>.mail{display:none}.nav.open nav .mail-m{display:block}}