/* ===========================================================
   Roborise — Go-To-Market B2B landing
   Design tokens from Figma: bg #1A1A1A, off #F2F2F2,
   olive #5A6049, lime #BDFF00. Fonts: Syne / Roboto / Roboto Mono
   =========================================================== */
:root{
  --black:#1A1A1A;
  --black-pure:#000000;
  --card-dark:#232323;
  --off:#F2F2F2;
  --green:#5A6049;
  --lime:#BDFF00;
  --lime-hi:#CFFF3A;
  --grey:#AAAAAA;
  --line:rgba(242,242,242,.14);
  --line-dark:rgba(26,26,26,.12);
  --font-display:'Syne',sans-serif;
  --font-body:'Roboto',sans-serif;
  --font-mono:'Roboto Mono',monospace;
  --maxw:1440px;                       /* Figma frame width */
  --pad:clamp(20px,8.5vw,122px);       /* side margin = 122px @1440, jak w Figmie */
  --radius:15px;
}

/* ---- arrow icon (lime bent arrow, pointing down-left) ---- */
:root{
  --arrow-svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><g fill='none' stroke='black' stroke-width='2.6' stroke-linecap='square' stroke-linejoin='miter'><path d='M21 7 L9 19'/><path d='M19 19 L9 19 L9 9'/></g></svg>");
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--off);color:var(--black);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);width:100%}
/* narrow = ten sam kontener i ta sama lewa krawędź; węższy tekst robimy wewnątrz */
.wrap.narrow{max-width:var(--maxw)}
/* luźne akapity zostają czytelne, ale wyrównane do tej samej lewej krawędzi */
section>.wrap>p{max-width:64ch}

/* ---- typography ---- */
/* Headings — Syne Bold (700), line-height Auto (normal), letter-spacing 0% per Figma */
h1,h2,h3,.display{font-family:var(--font-display);font-weight:700;line-height:normal;letter-spacing:0}
h1{font-size:clamp(2.2rem,5.5vw,48px)}
h2{font-size:clamp(1.9rem,4.5vw,48px)}
h3{font-size:clamp(1.1rem,1.7vw,1.3rem)}
p{font-size:clamp(.98rem,1.05vw,1.06rem)}
.mt{margin-top:1.1rem}

.eyebrow{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;font-weight:400;color:var(--grey)}
.lead{font-size:clamp(1.02rem,1.3vw,1.18rem);opacity:.92;margin-top:1.1rem;max-width:62ch}
/* MODEL: nagłówek w jednej linii + większy body text */
#model h2{white-space:nowrap}
@media(max-width:600px){#model h2{white-space:normal}}
#model .lead,#onas .lead{font-size:36px;line-height:normal;max-width:953px}

/* ---- buttons ---- */
/* przyciski — wymiary z Figmy: padding 15/10, radius 15, gap 10, H~39 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-mono);font-weight:400;font-size:16px;line-height:1.2;text-transform:uppercase;letter-spacing:.04em;padding:10px 15px;border-radius:var(--radius);border:1.5px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;text-align:center;transition:background .15s,color .15s}

/* primary (zielony) — kolor stały, bez podskoku; na hover wysuwa strzałkę i delikatnie się rozszerza */
.btn-primary{background:var(--lime);color:var(--black);gap:0}
.btn-primary:hover{background:var(--lime)}            /* kolor stały */
.btn-secondary{background:transparent;border-color:currentColor;gap:0}
.on-dark .btn-secondary{color:var(--off)}
.sec-light .btn-secondary{color:var(--black)}
.btn-secondary:hover{background:transparent}         /* kolor stały */

/* wspólny hover: wysuwa się strzałka w prawo, przycisk się delikatnie rozszerza */
.btn-primary::after,.btn-secondary::after{content:"→";display:inline-block;max-width:0;opacity:0;margin-left:0;overflow:hidden;transform:translateX(-2px);
  transition:max-width .25s ease,opacity .2s ease,margin-left .25s ease,transform .25s ease;font-weight:700}
.btn-primary:hover::after,.btn-secondary:hover::after{max-width:1.4em;opacity:1;margin-left:10px;transform:translateX(0)}
.btn-wide{min-width:300px}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:1.3rem;margin-top:4rem;align-items:center}

/* ---- nav ---- */
/* nav — jasny pasek (systemowy biały), własne marginesy ~24px jak w Figmie */
.nav{position:sticky;top:0;z-index:60;background:var(--off);border-bottom:1px solid rgba(26,26,26,.1)}
.nav-inner{width:100%;padding:0 20px;display:flex;align-items:center;justify-content:space-between;min-height:50px}
.logo{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:0;color:var(--black);text-decoration:none}
.nav-links{display:flex;gap:clamp(1.4rem,2.4vw,2.4rem);align-items:center}
.nav-links a{position:relative;color:var(--black);text-decoration:none;font-family:var(--font-body);font-weight:700;font-size:14px;letter-spacing:.01em}
.nav-links a::after{content:"";display:inline-block;width:0;height:12px;overflow:hidden;
  background:url("../assets/arrow_black.svg") left center/contain no-repeat;
  vertical-align:-1px;opacity:0;transition:width .2s ease,margin-left .2s ease,opacity .2s ease}
.nav-links a:hover::after,.nav-links a:focus-visible::after{width:12px;margin-left:7px;opacity:1}
.menu-toggle{display:none;background:none;border:0;color:var(--black);font-size:1.7rem;line-height:1;cursor:pointer}
@media(max-width:880px){
  .nav-links{position:absolute;top:50px;left:0;right:0;flex-direction:column;gap:0;background:var(--off);border-bottom:1px solid rgba(26,26,26,.1);display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:1rem 20px;width:100%}
  .menu-toggle{display:block}
}

/* ---- sections ---- */
section{padding:clamp(64px,8vw,112px) 0}
.sec-dark{background:var(--black);color:var(--off)}
.sec-green{background:var(--green);color:var(--off)}
.sec-light{background:var(--off);color:var(--black)}
.sec-head{max-width:780px;margin-bottom:clamp(36px,4vw,56px)}
.sec-head .eyebrow{display:block;margin-bottom:1.1rem;color:var(--lime)}
.sec-head .eyebrow-dark{color:var(--green)}
.sec-head-tight{margin-bottom:1.2rem}
.sec-head-center{text-align:center;margin-left:auto;margin-right:auto}
.sec-head-wide{max-width:1040px}
.sec-head-wide .lead{max-width:none}

/* visually-hidden (a11y labels) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- HERO ---- */
.hero{background:var(--black);color:var(--off);padding-top:clamp(70px,9vw,120px);padding-bottom:clamp(80px,10vw,140px)}
.hero .wrap{position:relative}
.hero-copy{max-width:660px}
.hero .eyebrow{display:block;margin-bottom:1.5rem}
.hero-copy{max-width:760px}
.hero h1{margin-bottom:1.6rem;white-space:normal}
.hero-sub{font-family:var(--font-body);font-weight:400;font-size:clamp(18px,2vw,24px);line-height:1.5;color:var(--off);opacity:.92;margin-bottom:2.4rem;max-width:680px}

/* hero graphic — koła statyczne (332), korbka obraca się w prawo (206); całość 391×332 po prawej */
.hero-art{position:absolute;top:50%;right:90px;transform:translateY(-50%) scale(.8);transform-origin:center right;width:391px;height:332px;pointer-events:none;display:none}
.hero-art .art-static{position:absolute;right:0;top:0;width:332px;height:332px}
.hero-art .art-rotating{position:absolute;left:0;top:126px;width:206px;height:206px;transform-origin:50% 50%;animation:heroSpin 18s linear infinite}
@keyframes heroSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
body.scroll-spin .art-rotating{animation:none !important;will-change:transform}
@media(prefers-reduced-motion:reduce){.hero-art .art-rotating{animation:none}}
@media(min-width:1300px){.hero-art{display:block}}

/* arrow bullet list (hero) — ikona z assets/arrow.svg */
.arrow-list{list-style:none;display:grid;gap:1.25rem;max-width:640px}
.arrow-list li{position:relative;padding-left:2.6rem;font-size:1.06rem;color:var(--off)}
.arrow-list li::before{content:"";position:absolute;left:0;top:0;width:1.75rem;height:1.75rem;
  background:url("../assets/arrow.svg") center/contain no-repeat}

/* szerszy nagłówek Problemu — pierwsza linia kończy się na „czasochłonne" */
#problem .sec-head{max-width:1120px}

/* problem graphic — piksele statyczne (272), koło/zębatka obraca się w prawo (254) */
#problem .wrap{position:relative}
.problem-art{position:absolute;right:90px;bottom:0;transform:scale(.8);transform-origin:bottom right;width:391px;height:332px;pointer-events:none;display:none}
.problem-art .art-static{position:absolute;left:0;top:60px;width:272px;height:272px}
.problem-art .art-rotating{position:absolute;right:0;top:0;width:254px;height:254px;transform-origin:50% 50%;animation:heroSpin 18s linear infinite}
@media(prefers-reduced-motion:reduce){.problem-art .art-rotating{animation:none}}
@media(min-width:1300px){.problem-art{display:block}}

/* dot list (problem) */
.dot-list{list-style:none;display:grid;gap:.9rem;margin-top:1.8rem;max-width:820px}
.dot-list li{position:relative;padding-left:2rem;font-size:1.04rem}
.dot-list li::before{content:"";position:absolute;left:0;top:.1em;width:1.25rem;height:1.25rem;background:url("../assets/circle.svg") center/contain no-repeat}

/* ---- services grid (dark cards on green) ---- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)}
@media(max-width:780px){.grid-2{grid-template-columns:1fr}}
.svc{position:relative;background:var(--black);border-radius:25px;overflow:hidden;
  padding:112px clamp(30px,3.5vw,70px) clamp(34px,4vw,48px) clamp(30px,3.5vw,68px)}
/* strzałka dosunięta do lewego górnego rogu — 109px, rośnie do 148px na hover */
.svc .arr{position:absolute;top:0;left:0;width:109px;height:109px;
  background:url("../assets/arrow.svg") left top/100% 100% no-repeat;
  transition:width .28s ease,height .28s ease}
.svc:hover .arr{width:148px;height:148px}
/* numer: biały w stanie normalnym, czarny na hover (gdy strzałka go zakrywa) */
.svc-no{display:block;position:relative;z-index:2;font-family:var(--font-mono);font-weight:400;font-size:20px;line-height:28px;color:var(--off);transition:color .28s ease}
.svc:hover .svc-no{color:var(--black)}
.svc h3{position:relative;z-index:2;font-family:var(--font-display);font-weight:700;font-size:24px;line-height:28px;color:var(--off);margin-top:28px}
.svc dl{margin-top:28px}
.svc dt{font-family:var(--font-mono);font-weight:500;font-size:16px;line-height:28px;color:var(--lime);text-transform:uppercase;text-decoration:none}
.svc dt:not(:first-of-type){margin-top:28px}
.svc dd{font-family:var(--font-body);font-weight:400;font-size:16px;line-height:28px;color:var(--off)}

/* ---- process rows (Proces współpracy) ---- */
.rows{list-style:none;display:grid;gap:clamp(16px,2vw,23px);max-width:954px;margin-inline:auto}
.prow{position:relative;background:var(--black);border-radius:25px;min-height:167px;display:flex;flex-direction:column;justify-content:center;
  padding:24px clamp(28px,3.5vw,44px) 24px clamp(44px,5vw,57px)}
/* limonkowa ikona „pixels" zachodzi na lewą krawędź boxa */
.prow-icon{position:absolute;left:-45px;top:50%;transform:translateY(-50%);width:71px;height:71px}
.prow-icon::before{content:"";position:absolute;inset:0;
  background:url("../assets/pixels.svg") center/contain no-repeat;transition:transform .3s ease}
.prow:hover .prow-icon::before{transform:scaleY(-1)}
.prow-no{position:absolute;left:14px;top:7px;font-family:var(--font-mono);font-weight:400;font-size:20px;line-height:28px;color:var(--black)}
.prow h3{font-family:var(--font-display);font-weight:700;font-size:24px;line-height:28px;color:var(--off);margin-bottom:4px}
.prow p{font-family:var(--font-body);font-weight:400;font-size:16px;line-height:28px;color:var(--off);max-width:801px}

/* ---- features (white cards on dark) ---- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
@media(max-width:860px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid-3{grid-template-columns:1fr}}
/* ---- DLACZEGO: kafelki (light), pierwszy kafel wysoki (span 2) ---- */
.grid-feat{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;gap:45px 48px}
.feat{position:relative;background:var(--off);color:var(--black);border-radius:25px;padding:56px 34px 40px;overflow:hidden}
.feat h3{font-family:var(--font-display);font-weight:700;font-size:24px;line-height:28px;color:var(--black);margin-bottom:28px}
.feat p{font-family:var(--font-body);font-weight:400;font-size:16px;line-height:28px;color:var(--black)}
.feat-tall{grid-column:1;grid-row:1 / span 2}
/* animacja „Bezpieczeństwo" — wzorzec jak Hero: 2 warstwy img, pozycje z Figmy (Frame 250×300) */
.feat-art{position:absolute;right:24px;bottom:24px;width:200px;aspect-ratio:250/300;pointer-events:none}
.feat-art .art-static{position:absolute;left:20%;top:33.333%;width:80%;height:66.667%}
.feat-art .art-rotating{position:absolute;left:0;top:0;width:80%;height:66.667%;transform-origin:50% 50%;animation:heroSpin 18s linear infinite}
@media(prefers-reduced-motion:reduce){.feat-art .art-rotating{animation:none}}
@media(max-width:860px){.grid-feat{grid-template-columns:1fr 1fr;grid-template-rows:none}.feat-tall{grid-column:auto;grid-row:auto;min-height:520px}}
@media(max-width:560px){.grid-feat{grid-template-columns:1fr}}

/* ---- cases (dark cards on light) ---- */
.case{background:var(--black);color:var(--off);border-radius:14px;padding:clamp(24px,2.8vw,36px)}
.case .tag{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);display:block;margin-bottom:1rem}
.case h3{color:var(--off);margin-bottom:.9rem;font-size:1.18rem}
.case p{font-family:var(--font-body);font-size:16px;line-height:28px;color:var(--off)}

/* ---- FAQ ---- */
.faq{display:grid;gap:.8rem;max-width:954px;margin-inline:auto}
.faq details{background:var(--card-dark);border-radius:14px;padding:0 clamp(20px,2.5vw,30px)}
.faq summary{font-family:var(--font-body);font-weight:600;font-size:20px;color:var(--off);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.2rem 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--lime);font-size:1.7rem;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--off);opacity:.82;padding:0 0 1.3rem;font-size:.96rem;max-width:74ch}

/* ---- founders ---- */
.founders{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.5vw,28px);margin-top:clamp(40px,5vw,64px)}
@media(max-width:680px){.founders{grid-template-columns:1fr}}
.founder{background:var(--off);color:var(--black);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.founder-mark{background:var(--black);color:var(--off);font-family:var(--font-display);font-weight:800;letter-spacing:.04em;font-size:clamp(1.6rem,3.2vw,2.4rem);padding:clamp(28px,4vw,44px) clamp(24px,3vw,34px)}
.founder-role{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#6b6b6b;padding:1.4rem clamp(24px,3vw,34px) 0;text-align:center}
.founder-name{text-align:center;padding:.5rem clamp(24px,3vw,34px) 0;background:linear-gradient(transparent 62%,rgba(189,255,0,.55) 62%);background-clip:padding-box;display:inline-block;align-self:center}
.founder-contact{list-style:none;text-align:center;padding:1rem clamp(24px,3vw,34px) clamp(26px,3.5vw,38px);display:grid;gap:.35rem}
.founder-contact a{font-family:var(--font-mono);font-size:.84rem;color:#333;text-decoration:none}
.founder-contact a:hover{color:var(--black)}

/* ---- contact form ---- */
.contact-form{display:grid;gap:1.1rem;max-width:720px}
/* animacja kontakt — wzorzec Hero: 2 warstwy img, pozycje z Figmy (Frame 391×332) */
.field-msg{position:relative}
.kontakt-art{position:absolute;left:100%;bottom:39.5px;margin-left:clamp(24px,3.5vw,64px);width:391px;height:332px;pointer-events:none;transform:rotate(90deg);transform-origin:center}
.kontakt-art .art-static{position:absolute;left:138px;top:79px;width:253px;height:253px;transform:rotate(-90deg)}
.kontakt-art .art-rotating{position:absolute;left:0;top:0;width:276px;height:276px;transform-origin:50% 50%;animation:heroSpin 22s linear infinite}
@media(prefers-reduced-motion:reduce){.kontakt-art .art-rotating{animation:none}}
@media(max-width:1366px){.kontakt-art{display:none}}
.contact-form .field input,.contact-form .field textarea{width:100%;background:var(--black);border:0;color:var(--off);font-family:var(--font-mono);font-size:.9rem;letter-spacing:.04em;padding:1.05rem 1.6rem;border-radius:999px}
.contact-form .field textarea{resize:vertical;min-height:320px;border-radius:28px}
.contact-form .field input::placeholder,.contact-form .field textarea::placeholder{color:#9a9a9a;letter-spacing:.08em}
.contact-form .field input:focus,.contact-form .field textarea:focus{outline:2px solid rgba(242,242,242,.45);outline-offset:2px}
/* nadpisanie autouzupełniania przeglądarki (Chrome maluje pola na jasnoniebiesko) */
.contact-form .field input:-webkit-autofill,
.contact-form .field input:-webkit-autofill:hover,
.contact-form .field input:-webkit-autofill:focus,
.contact-form .field textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--off);
  -webkit-box-shadow:0 0 0 1000px var(--black) inset;
  box-shadow:0 0 0 1000px var(--black) inset;
  caret-color:var(--off);
  transition:background-color 9999s ease-out 0s}
.consent{font-family:var(--font-mono);font-size:.78rem;line-height:1.55;color:#555;margin-top:.3rem}
.consent-row{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer}
.consent-policy{font-size:inherit;margin-top:.5rem;padding-left:calc(18px + .7rem)}
.consent input{flex:0 0 auto;width:18px;height:18px;accent-color:var(--lime)}
.consent a{color:#555}
.consent a:hover{color:var(--black)}
.contact-form .btn-block{margin-top:.5rem;padding:1.05rem;font-size:1.05rem}
.thanks{padding:2rem;border:1.5px solid var(--green);border-radius:14px;max-width:720px}
.thanks h3{color:var(--green)}
.thanks p{margin-top:.5rem;opacity:.85}

/* ---- footer ---- */
.footer{background:var(--black);color:var(--off);padding-top:clamp(64px,8vw,110px);padding-bottom:0;overflow:hidden}
.foot-cols{display:grid;grid-template-columns:minmax(160px,1fr) auto;gap:3rem;margin-bottom:clamp(48px,7vw,90px);max-width:960px}
.foot-col{display:grid;gap:1rem;align-content:start}
.foot-h{font-family:var(--font-body);font-weight:700;font-size:14px;letter-spacing:.06em;color:var(--off)}
.foot-col a{color:var(--off);text-decoration:none;font-family:var(--font-body);font-weight:700;font-size:14px;letter-spacing:.06em;opacity:.9}
.foot-col a:hover{opacity:1;color:var(--lime)}
.foot-contacts{display:flex;flex-wrap:nowrap;gap:3rem}
.foot-person{display:grid;gap:1rem;align-content:start}
.foot-name{font-family:var(--font-body);font-weight:500;font-size:20px;letter-spacing:.02em;color:var(--off);white-space:nowrap}
.foot-person a{font-size:20px;font-weight:500;letter-spacing:.02em;white-space:nowrap}
@media(max-width:620px){.foot-cols{grid-template-columns:1fr}.foot-contacts{flex-wrap:wrap;gap:2rem}}
/* wielki ROBORISE: edge-to-edge przez skalowanie SAMEGO rozmiaru czcionki (bez ściskania liter) */
.foot-mark{display:block;width:100%;overflow:hidden;font-family:var(--font-display);font-weight:800;line-height:.78;letter-spacing:-.02em;white-space:nowrap;font-size:19.2vw;transform:translate(-3px,6px)}
.foot-mark span{display:inline-block}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);margin-top:clamp(24px,4vw,48px);padding-top:1.4rem;font-size:.82rem;opacity:.7}

/* ---- reveal-on-scroll ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}