:root{
  --ink:#06232c; --ink-2:#3a5a63; --ink-3:#6e8a90;
  --blue:#57A8E3; --pool:#46b9cb; --cobalt:#2f72b4; --deep:#0a2f3d;
  --aqua-1:#eafafb; --aqua-2:#cdeef0;
  --gold-1:#f6cf73; --gold-2:#e89a36;
  --cta-1:#37c9df; --cta-2:#2f7cc1;
  --glass:rgba(255,255,255,.62); --glass-line:rgba(255,255,255,.85);
  --r:18px; --r-lg:28px; --maxw:1180px;
  --sans:'Hanken Grotesk',system-ui,sans-serif; --disp:'Fraunces',Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:radial-gradient(1100px 700px at 80% -4%,#d8f1f3,rgba(216,241,243,0) 58%),radial-gradient(1000px 900px at 5% 12%,#eafafb,rgba(234,250,251,0) 55%),linear-gradient(168deg,#f0fafb,#dcf1f3 50%,#cdeef0)}
a{color:inherit;text-decoration:none}
::selection{background:var(--blue);color:#fff}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  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='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#nav{position:fixed;top:0;left:0;right:0;z-index:100}
nav .bar{max-width:var(--maxw);margin:14px auto 0;padding:13px 22px;display:flex;align-items:center;justify-content:space-between;border-radius:20px;transition:.4s}
nav.scrolled .bar{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 10px 30px -16px rgba(8,40,55,.4),inset 0 1px 0 rgba(255,255,255,.7);margin-top:10px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:600;font-size:25px;color:var(--ink);letter-spacing:-.01em}
.brand .mk{width:30px;height:31px;color:var(--blue)}
nav .links{display:flex;align-items:center;gap:30px;font-size:15px;font-weight:500;color:var(--ink-2)}
nav .links a:hover{color:var(--cobalt)}
.navtoggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;margin-left:auto;margin-right:12px;border:none;cursor:pointer;border-radius:12px;background:rgba(255,255,255,.5);box-shadow:inset 0 1px 0 var(--glass-line);color:var(--ink)}
.navtoggle svg{width:22px;height:22px;stroke:currentColor;fill:none}
@media(max-width:760px){
  .navtoggle{display:inline-flex}
  nav .bar{position:relative}
  nav .links{display:flex;position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-radius:18px;padding:8px;box-shadow:0 24px 50px -20px rgba(8,40,55,.5),inset 0 1px 0 rgba(255,255,255,.7);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
  nav .links[data-open]{opacity:1;visibility:visible;transform:none}
  nav .links a{padding:12px 14px;border-radius:12px;font-size:16px;color:var(--ink-2)}
}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;border:none;cursor:pointer;border-radius:16px;padding:13px 22px;color:#fff;background:linear-gradient(120deg,var(--cta-1),var(--cta-2));box-shadow:0 14px 26px -12px rgba(47,124,193,.7),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn.dark{background:linear-gradient(150deg,#0c2530,#06161d);box-shadow:0 14px 26px -12px rgba(6,22,29,.6)}
.btn .apple{width:18px;height:18px;fill:#fff}
/* inner page */
.page{padding:170px 0 90px;position:relative}
.page .kicker{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:#0c6470;font-weight:700}
.page h1{font-family:var(--disp);font-weight:500;font-size:clamp(44px,6vw,76px);line-height:1.0;letter-spacing:-.02em;color:var(--ink);margin:14px 0 0}
.page h1 em{font-style:italic;color:var(--gold-2)}
.page .sub{font-size:20px;color:var(--ink-2);margin-top:20px;max-width:620px}
.panel{background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:var(--r-lg);box-shadow:inset 0 1px 0 var(--glass-line),0 30px 60px -38px rgba(8,40,55,.4);padding:36px 38px}
.prose{max-width:760px;color:var(--ink-2);font-size:16.5px}
.prose h2{font-family:var(--disp);font-weight:500;font-size:26px;color:var(--ink);margin:34px 0 10px;letter-spacing:-.01em}
.prose h3{font-weight:600;font-size:18px;color:var(--ink);margin:22px 0 6px}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 16px 20px}.prose li{margin:6px 0}
.prose a{color:var(--cobalt);font-weight:600}
.prose .muted{color:var(--ink-3);font-size:14px}
footer{background:linear-gradient(165deg,#06222c,#04181f);color:#9fc3cb;padding:64px 0 38px;margin-top:80px}
footer .top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:42px;border-bottom:1px solid rgba(255,255,255,.08)}
footer .brand{color:#eafafb}.footer-mk{color:var(--blue)}
footer .cols{display:flex;gap:60px;flex-wrap:wrap}
footer .col h5{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#86a4ac;font-weight:700;margin-bottom:14px}
footer .col a,footer .col span{display:block;color:#bcd6dc;font-size:15px;padding:5px 0}
footer .col a:hover{color:#fff}
footer .bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;font-size:13.5px;color:#86a4ac}

/* --- accessibility, motion & responsive polish (added) --- */
.skip{position:absolute;left:14px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:11px 18px;border-radius:11px;font-weight:600;font-size:15px;transition:top .2s}
.skip:focus{top:14px}
a:focus-visible,.btn:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:8px}
@media(max-width:760px){
  footer .col a{padding:11px 0;min-height:44px;display:flex;align-items:center}
}
@media(max-width:560px){
  .panel{padding:24px 20px}
  .wrap{padding:0 18px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}