/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
a{color:var(--ink);text-decoration:none;}
a:hover{color:var(--ink);}
::selection{background:#111;color:#fff;}
img{display:block;max-width:100%;}
button{font:inherit;cursor:pointer;border:none;background:none;}
input,textarea,select{font:inherit;}

/* ── Tokens: Light ── */
:root{
  --bg:linear-gradient(158deg,#f1f1f3 0%,#e4e5e9 50%,#cdced2 100%);
  --ink:#141417;--head:#141417;--sub:#5a5a5e;--mut:#6a6a70;--faint:#8a8a90;--navmut:#3a3a3d;
  --line:rgba(0,0,0,.12);--bord:rgba(0,0,0,.14);--chip:rgba(0,0,0,.22);--chipInk:#3a3a3d;
  --card:rgba(255,255,255,.35);--grid:rgba(0,0,0,.08);
  --btnBg:#111;--btnFg:#fff;
  --footBg:#111;--footFg:#f3f3f4;--footBtnBg:#fff;--footBtnFg:#111;
  --img1:linear-gradient(140deg,#d8d9dd,#b9babf);--img2:linear-gradient(140deg,#cfd0d5,#aeafb5);
  --img3:linear-gradient(140deg,#dedfe3,#c2c3c8);--img4:linear-gradient(140deg,#d3d4d9,#b3b4ba);
  --grainOp:.45;
  --font-mono:'SF Mono',ui-monospace,Menlo,monospace;
  --font-logo:'DotGothic16',ui-monospace,monospace;
  --font-head:'Helvetica Neue',Helvetica,Arial,sans-serif;
}

/* ── Tokens: Dark ── */
[data-theme="dark"]{
  --bg:linear-gradient(180deg,#050506 0%,#101116 100%);
  --ink:#f0f0f2;--head:#f4f4f5;--sub:#9a9a9f;--mut:#8a8a90;--faint:#6a6a70;--navmut:#8a8a90;
  --line:rgba(255,255,255,.14);--bord:rgba(255,255,255,.14);--chip:rgba(255,255,255,.3);--chipInk:#c9c9cd;
  --card:rgba(255,255,255,.04);--grid:rgba(255,255,255,.07);
  --btnBg:#f0f0f2;--btnFg:#0b0c0f;
  --footBg:#000;--footFg:#f3f3f4;--footBtnBg:#fff;--footBtnFg:#111;
  --img1:linear-gradient(140deg,#26272c,#15161a);--img2:linear-gradient(140deg,#222329,#131418);
  --img3:linear-gradient(140deg,#2a2b31,#17181c);--img4:linear-gradient(140deg,#25262b,#141519);
  --grainOp:.3;
}

/* ── Base ── */
body{
  font-family:var(--font-mono);
  color:var(--ink);
  background:var(--bg);
  min-height:100vh;
}
.site{position:relative;min-height:100vh;}

/* ── Grain overlay ── */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px;
  mix-blend-mode:overlay;
  opacity:var(--grainOp);
}

/* ── Grid bg ── */
.grid-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:96px 96px;
}

/* ── Mass blobs container ── */
.masses{position:absolute;inset:0;filter:blur(46px);pointer-events:none;animation:massWander 30s ease-in-out infinite;}
.mass{position:absolute;}
.mass--drift{animation:massDrift 26s ease-in-out infinite;}
.mass--drift-rev{animation:massDrift 26s ease-in-out infinite reverse;}
.mass--drift2{animation:massDrift2 32s ease-in-out infinite;}
.mass--drift2-rev{animation:massDrift2 28s ease-in-out infinite reverse;}
.mass--drift2-30{animation:massDrift2 30s ease-in-out infinite reverse;}

/* ── Animations ── */
@keyframes massWander{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  20%{transform:translate(260px,-90px) rotate(8deg);}
  45%{transform:translate(120px,150px) rotate(-6deg);}
  70%{transform:translate(-240px,60px) rotate(5deg);}
  85%{transform:translate(-120px,-130px) rotate(-3deg);}
}
@keyframes massDrift{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(40px,-24px) scale(1.04);}
  66%{transform:translate(-30px,20px) scale(.98);}
}
@keyframes massDrift2{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-50px,30px) scale(1.06);}
}

/* ── Navigation ── */
.nav{
  position:relative;z-index:5;
  display:flex;align-items:center;justify-content:space-between;
  padding:36px 56px;
}
.nav__logo{
  font-family:var(--font-logo);font-size:26px;letter-spacing:.04em;color:var(--ink);
}
.nav__links{display:flex;align-items:center;gap:44px;font-size:15px;}
.nav__link{color:var(--navmut);cursor:pointer;transition:color .15s;}
.nav__link:hover{color:var(--ink);}
.nav__link--active{color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px;}
.nav__right{display:flex;align-items:center;gap:14px;}
.nav__theme{
  cursor:pointer;font-size:12px;letter-spacing:.14em;color:var(--navmut);
  border:1px solid var(--chip);border-radius:100px;padding:9px 18px;
  background:none;font-family:var(--font-mono);
}
.nav__start{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--btnBg);color:var(--btnFg);
  font-size:14px;padding:12px 24px;border-radius:100px;
}

/* ── Hamburger ── */
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px 2px;background:none;border:none;}
.burger__line{display:block;width:24px;height:2px;background:var(--ink);}

/* ── Mobile drawer ── */
.drawer{
  display:none;position:fixed;inset:0;z-index:20;
  background:var(--bg);padding:34px 22px;flex-direction:column;
}
.drawer.is-open{display:flex;}
.drawer__top{display:flex;align-items:center;justify-content:space-between;}
.drawer__logo{font-family:var(--font-logo);font-size:22px;color:var(--ink);}
.drawer__close{font-size:24px;line-height:1;color:var(--ink);cursor:pointer;padding:4px 8px;background:none;border:none;}
.drawer__links{margin-top:56px;display:grid;gap:26px;font-size:22px;letter-spacing:.06em;}
.drawer__link{color:var(--ink);}
.drawer__cta{
  margin-top:auto;text-align:center;
  background:var(--btnBg);color:var(--btnFg);
  font-size:15px;padding:17px 24px;border-radius:100px;
}

/* ── Layout ── */
.pad{padding-left:56px;padding-right:56px;}
.section{position:relative;z-index:2;}

/* ── Hero ── */
.hero{position:relative;padding:70px 56px 80px;overflow:hidden;}
.hero--home{height:820px;overflow:hidden;}

/* ── Eyebrow ── */
.eyebrow{position:relative;font-size:12px;letter-spacing:.2em;color:var(--mut);}

/* ── Headlines ── */
.h1-big{
  position:relative;margin:24px 0 0;
  font-family:var(--font-head);font-weight:700;font-size:84px;
  line-height:.94;letter-spacing:-.04em;color:var(--head);
}
.h2-big{
  font-family:var(--font-head);font-size:38px;font-weight:600;
  letter-spacing:-.02em;max-width:620px;
}

/* ── Grids ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.gside{display:grid;grid-template-columns:340px 1fr;gap:60px;}
.gside--wide{display:grid;grid-template-columns:1fr 300px;gap:80px;align-items:end;}
.gside--pricing{display:grid;grid-template-columns:1fr 340px;gap:80px;align-items:end;}
.grow3{display:grid;grid-template-columns:80px 1fr 300px;gap:40px;align-items:baseline;}

/* ── Divider ── */
.divider{border-top:1px solid var(--line);}

/* ── Cards (work page) ── */
.card{border:1px solid var(--bord);border-radius:14px;overflow:hidden;background:var(--card);}
.card:hover{border-color:rgba(0,0,0,.3);}
[data-theme="dark"] .card:hover{border-color:rgba(255,255,255,.3);}
.card__img{height:340px;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.2em;color:var(--mut);}
.card__caption{padding:24px 26px;display:flex;justify-content:space-between;align-items:baseline;}
.card__name{font-size:17px;font-weight:700;letter-spacing:.06em;color:var(--ink);}
.card__cat{margin-top:8px;font-size:12px;letter-spacing:.14em;color:var(--mut);}
.card__year{font-size:12px;color:var(--faint);}

/* ── Pricing cards ── */
.price-card{
  border:1px solid var(--bord);border-radius:14px;background:var(--card);
  padding:34px 30px 30px;display:flex;flex-direction:column;gap:22px;min-height:520px;
}
.price-card__title{font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--ink);}
.price-card__price{font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--head);line-height:1.2;}
.price-card__for{font-size:13px;line-height:1.8;color:var(--sub);border-top:1px solid var(--line);padding-top:18px;}
.price-card__features{display:grid;gap:11px;font-size:13px;color:var(--sub);}
.price-card__feature{display:flex;gap:12px;}
.price-card__check{color:var(--ink);}
.price-card__footer{margin-top:auto;border-top:1px solid var(--line);padding-top:18px;display:grid;gap:8px;}
.price-card__timeline{font-size:12px;letter-spacing:.14em;color:var(--mut);}
.price-card__payment{font-size:12px;line-height:1.8;color:var(--sub);}

/* ── Pricing editorial ── */
.price-row{
  display:grid;grid-template-columns:80px 1fr 340px;gap:40px;align-items:baseline;
  padding:48px 0;border-top:1px solid var(--line);
}
.price-row:last-child{border-bottom:1px solid var(--line);}
.price-row__num{font-size:13px;color:var(--faint);}
.price-row__name{font-size:26px;font-weight:700;letter-spacing:.04em;color:var(--ink);}
.price-row__desc{margin:12px 0 0;font-size:13px;line-height:1.9;color:var(--sub);max-width:520px;}
.price-row__tags{margin-top:22px;font-size:12px;letter-spacing:.14em;line-height:2.1;color:var(--mut);}
.price-row__right{text-align:right;}
.price-row__amount{font-size:34px;font-weight:700;letter-spacing:-.02em;color:var(--head);}

/* ── Pricing table ── */
.price-table{display:grid;grid-template-columns:280px repeat(3,1fr);gap:24px;min-width:760px;}
.price-table--header{padding:0 0 20px;align-items:end;}
.price-table--row{padding:16px 0;border-top:1px solid var(--line);align-items:baseline;}
.price-table--row-top{border-top:2px solid var(--ink);}
.price-table--row-bottom{border-bottom:1px solid var(--line);}
.price-table__label{font-size:13px;letter-spacing:.1em;color:var(--mut);}
.price-table__head{font-size:17px;font-weight:700;letter-spacing:.05em;color:var(--ink);line-height:1.4;}
.price-table__price{font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--head);}
.price-table__val{font-size:13px;line-height:1.8;color:var(--sub);}
.price-table__check{font-size:15px;color:var(--ink);}
.price-table__dash{font-size:15px;color:var(--faint);}
.table-wrap{overflow-x:auto;}

/* ── Pricing look toggles ── */
.look-toggles{display:flex;align-items:center;gap:14px;padding-bottom:8px;}
.look-toggles__label{font-size:12px;letter-spacing:.2em;color:var(--faint);}
.look-toggle{
  cursor:pointer;font-size:12px;letter-spacing:.14em;padding:8px 16px;
  border-radius:100px;border:1px solid var(--chip);color:var(--navmut);
  background:none;font-family:var(--font-mono);transition:all .15s;
}
.look-toggle--active{background:var(--btnBg);color:var(--btnFg);border-color:var(--btnBg);}

/* ── Pricing view containers ── */
.pricing-view{display:none;}
.pricing-view.is-active{display:block;}

/* ── How-we-work / process cards ── */
.process-card{border-top:2px solid var(--ink);padding-top:18px;}
.process-card__num{font-size:13px;color:var(--faint);}
.process-card__title{margin:10px 0 8px;font-size:22px;font-weight:700;letter-spacing:.04em;color:var(--ink);}
.process-card__desc{font-size:13px;line-height:1.8;color:var(--sub);}
.process-card__title--sm{margin:10px 0 8px;font-size:20px;font-weight:700;letter-spacing:.04em;color:var(--ink);}

/* ── FAQ cards ── */
.faq-card{border-top:2px solid var(--ink);padding-top:18px;}
.faq-card__q{margin:0 0 10px;font-size:15px;font-weight:700;letter-spacing:.05em;color:var(--ink);}
.faq-card__a{font-size:13px;line-height:1.85;color:var(--sub);}

/* ── Service rows ── */
.service-row{padding:44px 0;border-top:1px solid var(--line);}
.service-row__name{font-size:26px;font-weight:700;letter-spacing:.04em;color:var(--ink);}
.service-row__desc{margin:14px 0 0;font-size:13px;line-height:1.9;color:var(--sub);max-width:520px;}
.service-row__verticals{margin-top:22px;font-size:12px;letter-spacing:.14em;line-height:2.1;color:var(--mut);}
.service-row__tags{font-size:12px;letter-spacing:.14em;color:var(--mut);text-align:right;line-height:2.2;}

/* ── Footer CTA band ── */
.foot{
  position:relative;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:70px 56px;background:var(--footBg);color:var(--footFg);
}
.foot__cta{
  align-self:center;
  background:var(--footBtnBg);color:var(--footBtnFg);
  font-size:14px;padding:15px 30px;border-radius:100px;
}

/* ── Home-specific ── */
.home-coord{position:absolute;z-index:2;font-size:14px;letter-spacing:.22em;color:var(--sub);}
.home-coord--n{left:230px;top:150px;}
.home-coord--w{right:200px;top:260px;}
.home-title{position:absolute;z-index:2;left:140px;bottom:250px;}
.home-title__head{font-size:26px;letter-spacing:.28em;color:var(--ink);font-weight:700;}
.home-title__sub{margin-top:18px;font-size:13px;letter-spacing:.14em;line-height:2;color:var(--sub);}
.home-strip{
  position:absolute;z-index:2;left:56px;right:56px;bottom:44px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;letter-spacing:.2em;color:var(--mut);
}
.home-mcta{
  display:none;position:relative;z-index:2;text-align:center;
  background:var(--btnBg);color:var(--btnFg);
  font-size:15px;padding:17px 24px;border-radius:100px;
}

/* ── Body text helpers ── */
.body-text{font-size:13.5px;line-height:1.95;letter-spacing:.02em;color:var(--sub);}
.body-text p{margin:0 0 26px;}
.body-text p:last-child{margin:0;}
.body-lg{font-size:18px;line-height:1.5;letter-spacing:.01em;color:var(--sub);}
.body-lg strong{color:var(--head);font-weight:700;}
.label{font-size:14px;letter-spacing:.08em;color:var(--ink);}
.num{font-size:13px;color:var(--faint);}
.tag-line{font-size:12px;letter-spacing:.2em;color:var(--faint);}

/* ── Contact page ── */
.contact-wrap{
  position:relative;z-index:2;
  display:flex;justify-content:center;align-items:flex-start;gap:90px;
  max-width:1360px;margin:0 auto;padding:80px 56px 0;
}
.contact-left{max-width:520px;padding-top:20px;}
.contact-left__intro{margin-top:34px;font-size:14px;line-height:2.1;letter-spacing:.08em;color:var(--sub);}
.contact-left__email{
  display:inline-block;margin-top:40px;
  font-size:22px;letter-spacing:.06em;color:var(--ink);
  border-bottom:2px solid var(--ink);padding-bottom:6px;
}
.contact-card{
  width:560px;flex:none;
  border:1px solid var(--bord);border-radius:16px;background:var(--card);
  padding:34px 34px 30px;display:grid;gap:20px;
}
.contact-card__header{
  display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--line);padding-bottom:18px;
}
.contact-card__title{font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--ink);}
.contact-card__time{font-size:11px;letter-spacing:.16em;color:var(--faint);}
.contact-foot{
  position:absolute;z-index:2;left:56px;right:56px;bottom:44px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;letter-spacing:.2em;color:var(--mut);
}

/* ── Form ── */
.form-label{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);}
.form-input,.form-select,.form-textarea{
  width:100%;margin-top:9px;padding:13px 14px;
  background:transparent;border:1px solid var(--chip);border-radius:8px;
  font-family:var(--font-mono);font-size:14px;letter-spacing:.02em;color:var(--ink);
  outline:none;transition:border-color .15s;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--ink);}
.form-select{appearance:none;cursor:pointer;}
.form-textarea{min-height:132px;line-height:1.7;resize:vertical;}
.form-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:4px;}
.form-footer__note{font-size:11px;line-height:1.7;letter-spacing:.06em;color:var(--faint);max-width:230px;}
.form-submit{
  background:var(--btnBg);color:var(--btnFg);
  font-size:14px;padding:14px 30px;border-radius:100px;
  white-space:nowrap;border:none;font-family:var(--font-mono);cursor:pointer;
}

/* ── Pill button (outlined) ── */
.pill{
  font-size:14px;padding:15px 30px;border-radius:100px;
  border:1px solid var(--chip);color:var(--ink);
  font-family:var(--font-mono);
}

/* ── Utility ── */
.mw-560{max-width:560px;}
.mw-460{max-width:460px;}
.mw-520{max-width:520px;}
.mw-900{max-width:900px;}
.mt-36{margin-top:36px;}
.mt-28{margin-top:28px;}
.mt-22{margin-top:22px;}
.pt-20{padding-top:20px;}
.text-right{text-align:right;}
.text-pretty{text-wrap:pretty;}
.z2{position:relative;z-index:2;}

/* ── Pricing "what affects" section ── */
.affects-list{margin-top:28px;display:grid;gap:14px;font-size:13.5px;line-height:1.9;color:var(--sub);max-width:520px;}
.affects-item{display:flex;gap:14px;}
.affects-dash{color:var(--faint);}

/* ──────────────────────────────────────
   Tablet: 768–1279px
   ────────────────────────────────────── */
@media(max-width:1279px){
  .nav{padding:36px 40px;}
  .pad{padding-left:40px;padding-right:40px;}
  .hero{padding:70px 40px 80px;}
  .h1-big{font-size:58px;}
  .h2-big{font-size:30px;}
  .g3,.g4{grid-template-columns:repeat(2,1fr);}
  .gside,.g2{grid-template-columns:1fr;gap:28px;}
  .gside--wide,.gside--pricing{grid-template-columns:1fr;gap:28px;}
  .grow3{grid-template-columns:56px 1fr;gap:24px;}
  .grow3>div:last-child{grid-column:2;text-align:left;}
  .table-wrap{overflow-x:auto;}
  .price-table{min-width:760px;}
  .contact-wrap{flex-direction:column;align-items:stretch;gap:44px;}
  .contact-card{width:100%;}
  .contact-foot{position:relative;left:auto;right:auto;bottom:auto;margin-top:56px;padding:0 40px 48px;}
  .hero--home{height:640px;}
  .home-title{left:40px;right:40px;bottom:190px;}
  .home-coord--n{left:40px;right:auto;}
  .home-coord--w{left:auto;right:40px;}
  .home-strip{left:40px;right:40px;}
  .foot{padding:70px 40px;}

  .price-row{grid-template-columns:56px 1fr;gap:24px;}
  .price-row__right{grid-column:2;text-align:left;}
}

/* ──────────────────────────────────────
   Mobile: <768px
   ────────────────────────────────────── */
@media(max-width:767px){
  .nav{padding:calc(22px + env(safe-area-inset-top,0px)) 22px 22px;}
  .pad{padding-left:22px;padding-right:22px;}
  .hero{padding:70px 22px 80px;}
  .nav__links{display:none;}
  .nav__start{display:none;}
  .burger{display:flex;}
  .h1-big{font-size:40px;letter-spacing:-.03em;}
  .h2-big{font-size:24px;}
  .price-card__price{font-size:26px;}
  .price-row__amount{font-size:26px;}
  .g2,.g3,.g4,.gside,.gside--wide,.gside--pricing{grid-template-columns:1fr;gap:26px;}
  .grow3{grid-template-columns:1fr;gap:12px;}
  .grow3>div:last-child{text-align:left;}
  .foot{flex-direction:column;align-items:flex-start;gap:26px;padding:44px 22px 54px;}
  .foot__cta{align-self:stretch;text-align:center;}
  .card__img{height:180px;}
  .home-strip{left:22px;right:22px;flex-wrap:wrap;justify-content:flex-start;gap:8px 18px;font-size:11px;}

  .hero--home{
    height:auto;min-height:calc(100vh - 120px);
    display:flex;flex-direction:column;justify-content:flex-end;gap:16px;
    padding:20px 22px 40px;
  }
  .hero--home .home-coord{position:static;font-size:12px;}
  .home-title{position:static;margin-top:auto;}
  .home-title__head{font-size:21px;letter-spacing:.2em;line-height:1.5;}
  .hero--home .home-strip{position:static;}
  .home-mcta{display:block;}

  .contact-wrap{padding-top:40px;flex-direction:column;align-items:stretch;gap:44px;}
  .contact-wrap .h1-big{font-size:40px;}
  .contact-card{padding:26px 22px 24px;}
  .contact-card .g2{grid-template-columns:1fr;}
  .contact-foot{
    flex-direction:column;align-items:flex-start;gap:10px;
    padding:0 22px 48px;font-size:11px;
    position:relative;left:auto;right:auto;bottom:auto;margin-top:56px;
  }

  .price-row{grid-template-columns:1fr;gap:12px;}
  .price-row__right{text-align:left;}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;}
}
