/* Buildcrew landing page. Tokens locked 12 Sep 2026 (brand/tokens.json). */
:root{
  --orange:#FF6900; --orange-50:#FFF7ED; --orange-100:#FFEDD4; --orange-200:#FFD6A8; --orange-600:#F54900;
  --black:#0A0A0A; --white:#FFFFFF;
  --n50:#FAFAFA; --n100:#F5F5F5; --n200:#E5E5E5; --n300:#D4D4D4; --n400:#A1A1A1; --n500:#737373; --n600:#525252; --n700:#404040; --n800:#262626; --n900:#171717;
  --head:'Satoshi','DM Sans',sans-serif; --body:'DM Sans',sans-serif;
  --container:1200px; --gutter:24px;
  --r:16px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-size:16px;line-height:1.6;color:var(--black);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section{padding:112px 0;position:relative}
.section--grey{background:var(--n50)}
.section--dark{background:var(--black);color:var(--white)}
h1,h2,h3{font-family:var(--head);font-weight:400;letter-spacing:-.02em}
h1{font-size:clamp(42px,5.4vw,72px);line-height:1.02}
h2{font-size:clamp(32px,3.8vw,52px);line-height:1.06;max-width:22ch}
h3{font-size:22px;line-height:1.25;font-family:var(--body);font-weight:700;letter-spacing:-.01em}
.h-center{text-align:center;margin-left:auto;margin-right:auto}
.lead{font-size:20px;line-height:1.5;color:var(--n700);max-width:56ch}
.section--dark .lead{color:var(--n300)}
.eyebrow{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-600);margin-bottom:20px}
.eyebrow--light{color:var(--orange)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--orange);margin-right:12px;vertical-align:middle;transform:translateY(-2px)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--body);font-weight:700;border-radius:999px;transition:transform .2s var(--ease),background .2s,box-shadow .2s;white-space:nowrap}
.btn--primary{background:var(--orange);color:var(--black);box-shadow:0 1px 0 rgba(0,0,0,.05),0 10px 30px -12px rgba(255,105,0,.6)}
.btn--primary:hover{background:var(--orange-600);transform:translateY(-1px);box-shadow:0 14px 34px -12px rgba(255,105,0,.7)}
.btn--primary:active{transform:translateY(0)}
.btn--sm{font-size:14px;padding:10px 18px}
.btn--lg{font-size:17px;padding:18px 30px}
.btn--block{width:100%}
.cta__sub{font-size:14px;color:var(--n500);margin-top:14px;max-width:48ch;line-height:1.5}
.cta__sub--light{color:var(--n400)}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.is-stuck{border-bottom-color:var(--n200)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav__logo img{height:28px;width:auto}

/* Reveal on load / scroll */
.reveal{opacity:0;transform:translateY(18px);animation:rise .9s var(--ease) forwards;animation-delay:calc(var(--d,0) * 110ms + 80ms)}
@keyframes rise{to{opacity:1;transform:none}}
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

/* Hero */
.hero{position:relative;padding:72px 0 88px;overflow:hidden}
.hero__glow{position:absolute;width:820px;height:820px;right:-180px;top:-260px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,105,0,.28),rgba(255,105,0,0));filter:blur(40px);pointer-events:none}
.hero__b{position:absolute;right:-140px;bottom:-190px;width:620px;opacity:.045;pointer-events:none;user-select:none}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"head demo" "rest demo";column-gap:56px;align-items:center;position:relative}
.hero__head{grid-area:head;align-self:end}
.hero__demo{grid-area:demo}
.hero__rest{grid-area:rest;align-self:start}
.hero__head h1{max-width:13ch}
.hero__rest{margin-top:28px}
.cta{margin-top:32px}
.hero__trust{display:flex;align-items:center;gap:14px;margin-top:40px;font-size:15px;color:var(--n600);max-width:52ch}
.trust__avatars{display:inline-flex;flex-shrink:0}
.trust__avatars img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--white);margin-left:-10px;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.trust__avatars img:first-child{margin-left:0}
.hero__demo{display:flex;flex-direction:column;align-items:center}

/* Phone + WhatsApp UI */
.phone{width:352px;height:724px;background:#0d0d0d;border-radius:52px;padding:12px;box-shadow:0 40px 90px -30px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.6),inset 0 0 0 2px #2a2a2a;position:relative;flex-shrink:0}
.phone__notch{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:110px;height:30px;background:#0d0d0d;border-radius:20px;z-index:3}
.wa{width:100%;height:100%;border-radius:42px;overflow:hidden;background:#efe7dd;display:flex;flex-direction:column;position:relative;font-family:var(--body)}
.wa::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:14px 14px;pointer-events:none;opacity:.9}
.wa__status{background:#008069;color:#fff;font-size:13px;font-weight:600;display:flex;justify-content:space-between;padding:14px 26px 0;height:48px}
.wa__icons{letter-spacing:1px;font-size:11px}
.wa__header{background:#008069;color:#fff;display:flex;align-items:center;gap:10px;padding:8px 14px 12px}
.wa__back{font-size:30px;line-height:1;margin-top:-4px}
.wa__avatar{width:38px;height:38px;border-radius:50%;background:#0A0A0A;display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.wa__avatar img{width:18px;height:auto}
.wa__who{display:flex;flex-direction:column;line-height:1.15}
.wa__who strong{font-size:16px;font-weight:600}
.wa__who small{font-size:12px;opacity:.85;min-height:14px}
.wa__chat{flex:1;min-height:0;overflow:hidden;padding:12px 10px 8px;display:flex;flex-direction:column;gap:6px;position:relative}
.wa__day,.wa__notice{align-self:center;font-size:11.5px;background:#fff;color:#54656f;border-radius:8px;padding:5px 10px;box-shadow:0 1px 1px rgba(0,0,0,.06);text-align:center}
.wa__notice{background:#ffeecd;color:#5b4a1e;max-width:86%;line-height:1.35;margin-bottom:4px}
.msg{max-width:84%;padding:7px 9px 5px 10px;border-radius:9px;font-size:14px;line-height:1.38;position:relative;box-shadow:0 1px 1px rgba(0,0,0,.08);animation:pop .32s var(--ease);white-space:pre-line;word-wrap:break-word}
.msg--in{align-self:flex-start;background:#fff;border-top-left-radius:2px}
.msg--out{align-self:flex-end;background:#d9fdd3;border-top-right-radius:2px}
.msg b{font-weight:700}
.msg__meta{display:flex;justify-content:flex-end;align-items:center;gap:4px;font-size:10.5px;color:#667781;margin-top:3px;line-height:1}
.msg__tick{display:inline-block;width:14px;height:10px;color:#8696a0}
.msg__tick.is-read{color:#53bdeb}
.msg__file{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.04);border-radius:7px;padding:9px 10px;margin:-2px -3px 8px -4px}
.msg__file-ic{width:30px;height:36px;border-radius:4px;background:#e2432e;color:#fff;font-size:9px;font-weight:700;display:grid;place-items:center;letter-spacing:.03em;flex-shrink:0}
.msg__file-body{min-width:0;flex:1}
.msg__file-name{font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg__file-size{font-size:11px;color:#667781}
.typing{align-self:flex-start;background:#fff;border-radius:9px;border-top-left-radius:2px;padding:11px 14px;display:flex;gap:4px;box-shadow:0 1px 1px rgba(0,0,0,.08);animation:pop .3s var(--ease)}
.typing i{width:7px;height:7px;border-radius:50%;background:#9aa6ad;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.wa__composer{display:flex;align-items:center;gap:8px;padding:8px 10px 26px;background:#f0f2f5;position:relative}
.wa__plus{font-size:26px;color:#54656f;padding:0 6px;line-height:1}
.wa__input{flex:1;background:#fff;border-radius:22px;min-height:40px;padding:9px 14px;font-size:14px;line-height:1.4;color:#111b21;display:flex;align-items:center}
.wa__placeholder{color:#8696a0}
.wa__input.is-typing::after{content:"";width:1.5px;height:16px;background:#111b21;margin-left:1px;animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
.wa__send{width:40px;height:40px;border-radius:50%;background:#008069;color:#fff;display:grid;place-items:center;transition:transform .15s}
.wa__send.is-pressed{transform:scale(.86)}

/* Works with */
.works{border-top:1px solid var(--n200);border-bottom:1px solid var(--n200);padding:22px 0}
.works__inner{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.works__label{font-size:13px;font-weight:700;color:var(--n500);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.works__list{display:flex;flex-wrap:wrap;gap:8px 10px}
.works__list li{font-family:var(--head);font-size:15px;font-weight:500;color:var(--n700);padding:6px 14px;border:1px solid var(--n200);border-radius:999px;background:var(--white)}

/* Problem */
.problem__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:start}
.problem__head{position:sticky;top:110px}
.problem__list{border-top:1px solid var(--n200)}
.problem__list li{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--n200);font-size:18px}
.problem__k{font-weight:700}
.problem__v{color:var(--n500)}
.problem__answer{font-family:var(--head);font-size:26px;line-height:1.3;margin-top:28px;padding:26px 28px;background:var(--black);color:var(--white);border-radius:var(--r)}

/* Capabilities */
.cap__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.card{background:var(--white);border:1px solid var(--n200);border-radius:var(--r);padding:30px 28px 32px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(10,10,10,.35);border-color:var(--orange-200)}
.card__icon{width:34px;height:34px;fill:none;stroke:var(--orange);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:22px}
.card h3{margin-bottom:10px}
.card p{color:var(--n600);font-size:16px}

/* Case study */
.case{overflow:hidden}
.case__glow{position:absolute;width:900px;height:900px;left:-300px;bottom:-500px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,105,0,.35),rgba(255,105,0,0));filter:blur(50px);pointer-events:none}
.case__grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;position:relative}
.case__text{margin-top:30px;display:grid;gap:14px;color:var(--n300);font-size:18px;line-height:1.55;max-width:50ch}
.case__facts{display:flex;gap:40px;margin-top:40px;padding-top:28px;border-top:1px solid var(--n800)}
.case__facts dt{font-size:13px;color:var(--n500);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.case__facts dd{font-family:var(--head);font-size:24px;margin-top:4px}
.quote{position:relative;background:var(--n900);border:1px solid var(--n800);border-radius:24px;padding:48px 44px 40px}
.quote__mark{position:absolute;top:8px;left:30px;font-family:var(--head);font-size:120px;line-height:1;color:var(--orange);font-weight:700}
.quote blockquote{font-family:var(--head);font-size:clamp(22px,2vw,28px);line-height:1.35;letter-spacing:-.01em;margin-top:34px}
.quote figcaption{display:flex;align-items:center;gap:14px;margin-top:32px}
.quote figcaption img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--orange)}
.quote figcaption span{display:flex;flex-direction:column;line-height:1.3}
.quote figcaption strong{font-size:16px}
.quote figcaption small{font-size:14px;color:var(--n400)}

/* Proof */
.proof{overflow:hidden}
.proof__glow{position:absolute;width:760px;height:760px;right:-240px;top:120px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,105,0,.22),rgba(255,105,0,0));filter:blur(50px);pointer-events:none}
.video{position:relative;max-width:880px;margin:44px auto 0;border-radius:16px;overflow:hidden;border:1px solid var(--n200);background:var(--black);aspect-ratio:16/9;box-shadow:0 40px 80px -40px rgba(10,10,10,.4)}
.video video{width:100%;height:100%;object-fit:cover}
.video__play{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;border:0;background:var(--orange);color:var(--black);cursor:pointer;display:grid;place-items:center;box-shadow:0 20px 50px -10px rgba(255,105,0,.7);transition:transform .25s var(--ease),opacity .25s}
.video__play:hover{transform:scale(1.06)}
.video__play svg{margin-left:4px}
.video.is-playing .video__play{opacity:0;pointer-events:none}
.video__caption{text-align:center;font-size:14px;color:var(--n500);margin-top:16px}
.proof__h2{margin-top:96px}
.marquee{margin-top:40px;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 80px,#000 calc(100% - 80px),transparent);mask-image:linear-gradient(90deg,transparent,#000 80px,#000 calc(100% - 80px),transparent)}
.marquee__track{display:flex;gap:24px;width:max-content;padding:8px 0 16px;animation:scroll 40s linear infinite}
.marquee:hover .marquee__track,.marquee.is-paused .marquee__track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(calc(-50% - 12px))}}
.tcard{width:360px;flex-shrink:0;background:var(--white);border:1px solid var(--n200);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:16px;border-left:3px solid var(--orange)}
.tcard__head{display:flex;align-items:center;gap:12px}
.tcard__head img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.tcard__head strong{display:block;font-size:16px;font-weight:700;line-height:1.2}
.tcard__head small{display:block;font-size:14px;color:var(--n500);margin-top:2px}
.tcard__head small a{text-decoration:underline;text-underline-offset:2px}
.tcard p{font-size:16px;color:var(--n800);line-height:1.5}

/* How it works */
.how__lead{margin-top:18px}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:64px;counter-reset:s}
.steps li{position:relative;padding-top:24px;border-top:2px solid var(--n200)}
.steps li::before{content:"";position:absolute;top:-2px;left:0;width:48px;height:2px;background:var(--orange)}
.steps__n{font-family:var(--head);font-weight:300;font-size:52px;line-height:1;color:var(--n300);display:block;margin-bottom:22px;transition:color .4s}
.steps li.is-in .steps__n{color:var(--black)}
.steps h3{font-size:20px;margin-bottom:8px}
.steps p{font-size:15px;color:var(--n600)}

/* Offer */
.offer{overflow:hidden}
.offer__glow{position:absolute;width:800px;height:800px;right:-260px;top:-300px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,105,0,.3),rgba(255,105,0,0));filter:blur(50px);pointer-events:none}
.offer__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:center;position:relative}
.offer__list ul{margin-top:36px;display:grid;gap:14px}
.offer__list li{display:flex;align-items:center;gap:14px;font-size:18px;padding:14px 0;border-bottom:1px solid var(--n800)}
.offer__list li::before{content:"";width:22px;height:22px;flex-shrink:0;border-radius:50%;background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5 9-10' fill='none' stroke='%230A0A0A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.offer__card{background:var(--white);color:var(--black);border-radius:24px;padding:44px 40px;box-shadow:0 50px 100px -40px rgba(0,0,0,.7)}
.offer__label{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--n500)}
.offer__label{color:var(--orange-600)}
.offer__big{font-family:var(--head);font-size:clamp(26px,2.4vw,32px);line-height:1.2;letter-spacing:-.01em;margin:12px 0 32px}
.offer__card .cta__sub{text-align:center;margin-left:auto;margin-right:auto}
.offer__card .cta__sub--light{color:var(--n500)}

/* Fit */
.fit__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;margin-top:56px}
.fit__col{border:1px solid var(--n200);border-radius:var(--r);padding:36px}
.fit__col h3{display:flex;align-items:center;gap:12px;margin-bottom:22px;font-size:20px}
.fit__tick,.fit__cross{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:700}
.fit__tick{background:var(--orange);color:var(--black)}
.fit__cross{background:var(--n200);color:var(--n600);font-size:20px}
.fit__col ul{display:grid;gap:12px}
.fit__col li{padding-left:22px;position:relative;font-size:17px;color:var(--n700)}
.fit__col li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.fit__col--no{background:var(--n50)}
.fit__col--no li::before{background:var(--n300)}
.fit__col--no li{color:var(--n600)}

/* Final CTA */
.final{overflow:hidden;padding:140px 0}
.final__glow{position:absolute;width:900px;height:900px;left:50%;top:-200px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,105,0,.28),rgba(255,105,0,0));filter:blur(60px);pointer-events:none}
.final__b{position:absolute;right:-160px;top:-60px;width:560px;opacity:.09;pointer-events:none}
.final__inner{position:relative;max-width:820px;text-align:center;display:grid;gap:28px;justify-items:center}
.final__inner h2{max-width:none}
.final__inner .lead{text-align:center}

/* Footer */
.footer{background:var(--black);color:var(--n400);padding:36px 0;border-top:1px solid var(--n800)}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px}
.footer img{height:24px;width:auto;opacity:.9}

/* Responsive */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;grid-template-areas:"head" "demo" "rest";row-gap:40px}
  .hero__head h1{max-width:none}
  .hero__rest{margin-top:0}
  .cap__grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:40px 28px}
  .problem__grid,.case__grid,.offer__grid,.fit__grid{grid-template-columns:1fr;gap:44px}
  .problem__head{position:static}
  .hero__b{display:none}
}
@media (max-width:640px){
  .section{padding:80px 0}
  .hero{padding:44px 0 64px}
  .nav__inner{height:64px}
  .nav .btn{font-size:13px;padding:9px 14px}
  .nav__logo img{height:24px}
  .phone{width:300px;height:620px;border-radius:44px;padding:10px}
  .wa{border-radius:36px}
  .msg{font-size:13px}
  .cap__grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .problem__list li{grid-template-columns:1fr;gap:2px;font-size:17px}
  .problem__answer{font-size:22px;padding:22px}
  .quote{padding:40px 26px 32px}
  .quote__mark{left:18px}
  .offer__card{padding:32px 24px}
  .case__facts{gap:24px;flex-wrap:wrap}
  .final{padding:96px 0}
  .tcard{width:300px}
  .btn--lg{font-size:16px;padding:16px 24px;white-space:normal;text-align:center}
  .footer__inner{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .reveal,[data-reveal]{animation:none;opacity:1;transform:none;transition:none}
  .marquee{mask-image:none;-webkit-mask-image:none;overflow-x:auto}
  .marquee__track{animation:none}
  html{scroll-behavior:auto}
}