/* mbaakliny.com v3 "Studio OS" : shared design system (all pages) */
:root{
  --bg:#F6F6F4;--card:#FFFFFF;--line:#E6E6E2;--line2:#EFEFEC;
  --ink:#0B0B0C;--ink2:#3E3E3A;--mute:#5E5E5A;--mute2:#6E6E69;
  --night:#0B0B0C;--night2:#141416;--night3:#232326;--paper:#F3F3F0;--dimnight:#A3A39E;
  --violet:#4B3BFF;--violet2:#8E5BFF;--violetSoft:#F1EFFF;--teal:#1EB7A8;--tealDeep:#0A6B64;--peach:#FF8A5B;
  --font:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --edge:clamp(16px,4vw,40px);--maxw:1200px;--r:24px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
a:hover{color:var(--violet)}
::selection{background:var(--violet);color:#fff}
button{font:inherit}
.mono{font-family:var(--mono)}
.wrap{max-width:var(--maxw);margin:0 auto}
.sec{padding:120px var(--edge)}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px}
.skip:focus{left:16px}

@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ── type ── */
.h-sec{font-weight:600;font-size:clamp(38px,5vw,68px);line-height:1.02;letter-spacing:-.045em;margin:0}
.eyebrow{font-family:var(--mono);font-size:13px;color:var(--mute)}
.night .eyebrow{color:var(--dimnight)}
.grad{background:linear-gradient(100deg,var(--violet),var(--violet2) 35%,var(--teal) 65%,var(--violet));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s ease-in-out infinite alternate}
@keyframes shine{to{background-position:100% 0}}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px}

/* ── nav (fixed floating pill) ── */
.navwrap{position:fixed;top:16px;left:0;right:0;z-index:50;padding:0 clamp(12px,3vw,24px)}
.nav{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:20px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:999px;padding:8px 8px 8px 24px;box-shadow:0 8px 30px -18px rgba(11,11,12,.25);position:relative;overflow:hidden;animation:rise .9s var(--ease) both}
.nav .brand{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.nav .brand svg{width:41px;height:32px;fill:currentColor}
.nav .links{display:flex;gap:30px;margin:0 auto;font-size:14px}
.nav .links a{position:relative;text-decoration:none;color:var(--ink2)}
.nav .links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--violet);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.nav .links a:hover::after,.nav .links a[aria-current]::after{transform:scaleX(1)}
.nav .cta{margin-left:auto;background:var(--ink);color:#fff;text-decoration:none;padding:0 20px;border-radius:999px;font-size:14px;font-weight:500;min-height:44px;display:inline-flex;align-items:center;gap:8px}
.nav .cta:hover{background:var(--violet);color:#fff}
.nav .burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:50%;border:0;background:var(--ink);color:#fff;cursor:pointer;align-items:center;justify-content:center}
.nav .progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--violet),var(--teal));transform-origin:left;transform:scaleX(0)}
.mnav{position:fixed;inset:0;z-index:60;background:var(--night);color:var(--paper);display:none;flex-direction:column;padding:28px 24px;animation:fade .35s ease both}
.mnav.open{display:flex}
.mnav .top{display:flex;justify-content:space-between;align-items:center}
.mnav .top svg.logo{width:41px;height:32px;fill:var(--paper)}
.mnav .close{width:44px;height:44px;border-radius:50%;border:1px solid #2C2C30;background:none;color:var(--paper);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.mnav nav{display:flex;flex-direction:column;gap:8px;margin-top:48px}
.mnav nav a{color:var(--paper);text-decoration:none;font-size:40px;font-weight:600;letter-spacing:-.04em;padding:6px 0}
.mnav .mcta{margin-top:auto;background:var(--violet);color:#fff;text-decoration:none;border-radius:999px;min-height:56px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:500}
@media (max-width:760px){.nav .links,.nav .cta{display:none}.nav .burger{display:inline-flex}}
/* phones: the menu is a floating card under the nav, not a black full screen */
@media (max-width:760px){
  .mnav{inset:auto;top:12px;left:12px;right:12px;max-height:calc(100dvh - 24px);overflow-y:auto;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:var(--ink);border:1px solid var(--line);border-radius:28px;padding:16px 16px 18px 24px;box-shadow:0 30px 60px -20px rgba(11,11,12,.35),0 0 0 100vmax rgba(11,11,12,.28);animation:menuin .35s var(--ease) both}
  @keyframes menuin{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:none}}
  .mnav .top svg.logo{fill:var(--ink)}
  .mnav .close{border-color:var(--line);color:var(--ink);background:#fff}
  .mnav nav{margin-top:14px;gap:0}
  .mnav nav a{color:var(--ink);font-size:24px;letter-spacing:-.03em;padding:14px 4px 14px 0;border-bottom:1px solid var(--line2);display:flex;justify-content:space-between;align-items:center}
  .mnav nav a::after{content:"\2192";font-size:18px;color:var(--violet);transition:transform .3s var(--ease)}
  .mnav nav a:hover,.mnav nav a:focus-visible{color:var(--violet)}
  .mnav nav a:hover::after{transform:translateX(4px)}
  .mnav .mcta{margin-top:18px;min-height:52px;box-shadow:0 14px 30px -12px rgba(75,59,255,.7)}
}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;padding:0 26px;border-radius:999px;font-size:16px;font-weight:500;min-height:52px;border:1px solid transparent;cursor:pointer;transition:transform .35s var(--ease),background .3s,color .3s}
.btn-v{background:var(--violet);color:#fff;box-shadow:0 14px 30px -12px rgba(75,59,255,.7)}
.btn-v:hover{color:#fff;transform:translateY(-2px)}
.btn-o{background:rgba(255,255,255,.88);border-color:var(--line);color:var(--ink)}
.btn-o:hover{transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{color:#fff;background:var(--violet)}

/* ── cards ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.tile{position:relative;transition:transform .45s var(--ease),box-shadow .45s}
.tile:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(75,59,255,.45)}
.tile .ic{transition:transform .5s var(--ease)}
.tile:hover .ic{transform:rotate(-12deg) scale(1.08)}
.ring::before{content:"";position:absolute;inset:-1px;border-radius:25px;padding:1px;background:conic-gradient(from var(--ang),transparent 0 70%,#B9AFFF 85%,#FFFFFF 92%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 4s linear infinite;pointer-events:none}
@keyframes spin{to{--ang:360deg}}

/* ── night zones ── */
.night{background:var(--night);color:var(--paper)}
.night a:hover{color:#A99FFF}

/* ── motion ── */
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.in{animation:rise .9s var(--ease) both}
.d1{animation-delay:.08s}.d2{animation-delay:.18s}.d3{animation-delay:.3s}.d4{animation-delay:.45s}.d5{animation-delay:.6s}.d6{animation-delay:.75s}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none}
@keyframes drift1{to{transform:translate(-160px,120px) scale(1.15)}}
@keyframes drift2{to{transform:translate(140px,-80px) scale(.9)}}
@keyframes drift3{to{transform:translate(120px,140px) scale(1.2)}}
.gridfade{position:absolute;inset:0;background-image:linear-gradient(rgba(11,11,12,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(11,11,12,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent);mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent);pointer-events:none}
/* JS reveal fallback (browsers without scroll timelines) */
.sr{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.sr.on{opacity:1;transform:none}
@supports (animation-timeline: view()){
  .par{animation:par linear both;animation-timeline:view()}
  @keyframes par{from{transform:scale(1.18) translateY(-4%)}to{transform:scale(1.02) translateY(4%)}}
  .grow{animation:grow linear both;animation-timeline:view();animation-range:entry 20% cover 50%}
  .nav .progress{animation:grow linear both;animation-timeline:scroll(root)}
}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── page hero (subpages) ── */
.phero{position:relative;overflow:hidden;padding:170px var(--edge) 70px}
.phero .b1{width:520px;height:520px;background:#7A6BFF;top:-200px;right:-120px;opacity:.4;animation:drift1 18s ease-in-out infinite alternate}
.phero .b3{width:360px;height:360px;background:var(--peach);top:-60px;left:-160px;opacity:.18;animation:drift3 26s ease-in-out infinite alternate}
.phero .inner{max-width:var(--maxw);margin:0 auto;position:relative}
.phero h1{font-weight:600;font-size:clamp(44px,7vw,104px);line-height:1;letter-spacing:-.05em;margin:18px 0 0}
.phero .lead{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--ink2);max-width:640px;margin:26px 0 0}
.crumb{font-family:var(--mono);font-size:13px;color:var(--mute);display:flex;gap:8px;flex-wrap:wrap}
.crumb a{color:var(--mute);text-decoration:none}

/* ── prose (legal, blog, case studies) ── */
.prose{max-width:760px;margin:0 auto;font-size:17px;line-height:1.7;color:var(--ink2)}
.prose h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em;line-height:1.15;color:var(--ink);margin:2.2em 0 .6em;font-weight:600}
.prose h3{font-size:20px;letter-spacing:-.02em;color:var(--ink);margin:1.8em 0 .5em;font-weight:600}
.prose p{margin:0 0 1.1em}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.2em}
.prose li{margin:.35em 0}
.prose a{color:var(--violet)}
.prose strong{color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:15px;display:block;overflow-x:auto}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.prose blockquote{margin:1.4em 0;padding:18px 22px;border-radius:16px;background:var(--violetSoft);color:var(--ink)}
.prose code{font-family:var(--mono);font-size:.9em;background:#EEEEEA;padding:2px 6px;border-radius:6px}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}

/* ── CTA band ── */
.ctaband{padding:0 var(--edge) 40px}
.ctabox{max-width:var(--maxw);margin:0 auto;background-color:#3A2BD9;color:#fff;border-radius:40px;position:relative;overflow:hidden;box-shadow:0 50px 100px -40px rgba(75,59,255,.6)}
.ctabox .bg{position:absolute;inset:0;background:linear-gradient(120deg,#2A1BD9,var(--violet) 30%,#7B4BFF 55%,#13A89A 85%,#2A1BD9);background-size:300% 300%;animation:pan 14s ease-in-out infinite alternate}
@keyframes pan{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.ctabox .cb1{width:460px;height:460px;background:#3FE0D0;opacity:.45;top:-160px;right:-80px;animation:drift1 16s ease-in-out infinite alternate}
.ctabox .cb2{width:420px;height:420px;background:var(--peach);opacity:.35;bottom:-200px;left:10%;animation:drift3 20s ease-in-out infinite alternate}
.ctabox .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(60% 80% at 80% 20%,#000,transparent);mask-image:radial-gradient(60% 80% at 80% 20%,#000,transparent)}
.ctabox .body{position:relative;padding:clamp(40px,7vw,96px);display:flex;flex-wrap:wrap;gap:48px;align-items:flex-end;justify-content:space-between}
.ctabox h2{font-weight:600;font-size:clamp(48px,7vw,104px);line-height:.92;letter-spacing:-.055em;margin:0}
.ctabox .x100{background:linear-gradient(100deg,#FFFFFF,#7FF0E4 45%,#FFD3B8);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4s ease-in-out infinite alternate}
.ctabox .sub{font-size:20px;color:#E9E6FF;margin:24px 0 0}
.ctabox .eyebrow{color:#E9E6FF;margin-bottom:22px}
.ctabox .acts{flex:1 1 300px;display:flex;flex-direction:column;gap:12px;min-width:0}
.ctabox .left{flex:2 1 420px;min-width:0}
.cbtn{text-decoration:none;padding:0 24px;border-radius:999px;font-size:16px;min-height:56px;display:flex;align-items:center;justify-content:space-between;transition:transform .35s var(--ease);color:#fff;border:1px solid rgba(255,255,255,.55)}
.cbtn:hover{transform:translateX(6px);color:#fff}
.cbtn.w{background:#fff;color:var(--ink);font-weight:600;border-color:#fff}
.cbtn.w:hover{color:var(--ink)}
.cbtn.k{background:var(--ink);border-color:var(--ink)}

/* ── footer ── */
.foot{padding:36px var(--edge) 40px}
.foot .row{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;font-size:14px;color:var(--mute)}
.foot .c{display:inline-flex;align-items:center;gap:14px}
.foot .c svg{width:31px;height:24px;fill:var(--ink)}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot nav a{color:var(--ink2);min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
.foot nav a:hover{color:var(--violet)}
@media (max-width:900px){
  .foot .row{flex-direction:column;align-items:flex-start;gap:10px}
  .foot nav{order:-1;gap:0 18px;padding-bottom:12px;border-bottom:1px solid var(--line);width:100%}
  .foot .c{font-size:13px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .sr{opacity:1;transform:none}
  html{scroll-behavior:auto}
}