:root{
  --ink:#14273D; --ink-2:#2B3A4D; --muted:#5C6B7E; --line:#DCE3EB;
  --blue:#00A6E1; --blue-d:#0081C9; --green:#00A53C; --green-d:#009142;
  --paper:#F3F6F9; --navy:#14273D; --navy-d:#0A1726;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ font-family:'Zen Kaku Gothic New',sans-serif; -webkit-font-smoothing:antialiased; color:var(--ink); background:var(--paper); overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
h1,.lead{ word-break:auto-phrase; text-wrap:balance; }
.en{ font-family:'Space Grotesk',sans-serif; }
.grain::after{ content:""; position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); }
.wrap{ width:min(1320px,100% - 64px); margin:0 auto; }
/* header */
.hd{ position:absolute; left:0; right:0; top:0; z-index:20; }
.hd .wrap{ display:flex; align-items:center; justify-content:space-between; padding:26px 0; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:30px; }
.brand b{ font-family:'Space Grotesk',sans-serif; font-size:21px; letter-spacing:.03em; }
.brand small{ display:block; font-size:10px; letter-spacing:.12em; opacity:.7; font-weight:500; margin-top:-2px; }
.nav{ display:flex; align-items:center; gap:28px; font-size:14px; font-weight:500; }
.nav a:not(.pill){ position:relative; }
.nav a:not(.pill)::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease); }
.nav a:not(.pill):hover::after{ transform:scaleX(1); transform-origin:left; }
.pill{ padding:11px 22px; border-radius:999px; border:1px solid currentColor; font-weight:700; transition:background .25s,color .25s; }
.dark .pill:hover{ background:#fff; color:var(--ink); }
.light .pill:hover{ background:var(--ink); color:#fff; }
.dark{ color:#fff; } .light{ color:var(--ink); }
/* buttons */
.btn{ display:inline-flex; align-items:center; gap:16px; min-height:60px; padding:0 12px 0 30px; border-radius:999px; font-weight:700; font-size:15px; transition:background .3s, color .3s; }
.btn .ar{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; transition:transform .35s var(--ease); }
.btn:hover .ar{ transform:rotate(-45deg); }
.btn.on-light{ background:var(--ink); color:#fff; } .btn.on-light .ar{ background:var(--blue); }
.btn.on-light:hover{ background:var(--navy-d); }
.btn.on-dark{ background:#fff; color:var(--ink); } .btn.on-dark .ar{ background:var(--ink); color:#fff; }
.btn.on-dark:hover{ background:var(--blue); color:#fff; }
.txt{ font-size:14px; font-weight:700; border-bottom:1px solid currentColor; padding-bottom:3px; }
.btn:focus-visible,.txt:focus-visible,.pill:focus-visible{ outline:2px solid var(--blue); outline-offset:4px; }
.fade{ opacity:0; animation:fade .9s ease forwards; }
@keyframes fade{ to{ opacity:1; } }
.ln{ display:block; overflow:hidden; padding-bottom:.06em; }
.ln > span{ display:inline-block; transform:translateY(105%); animation:up 1.1s var(--ease) forwards; }
@keyframes up{ to{ transform:none; } }
@media (max-width:768px){ .wrap{ width:calc(100% - 32px); } .nav a:not(.pill){ display:none; } .btn{ width:100%; justify-content:space-between; } }
@media (prefers-reduced-motion: reduce){ .fade{ animation:none; opacity:1; } .ln > span{ animation:none; transform:none; } }