:root{
  --black:#0b0b0c; --ink-900:#141416; --ink-800:#1e1e21; --ink-700:#2a2a2e;
  --gray-500:#6b6b70; --gray-400:#98989c; --gray-300:#c2c2c4; --gray-200:#dedede; --gray-100:#ececec;
  --paper:#fafaf8; --paper-dim:#f1f0ee; --white:#fff;
  --line:rgba(0,0,0,0.10); --line-dark:rgba(255,255,255,0.12);
  --serif:'Newsreader',Georgia,serif; --sans:'Space Grotesk',sans-serif; --mono:'Space Mono',monospace;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0; overflow-x:hidden; width:100%;}
body{font-family:var(--sans); background:var(--paper); color:var(--ink-900); line-height:1.6;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none; cursor:pointer;}
ul{margin:0; padding:0; list-style:none;}
h1,h2,h3,h4{margin:0;}
.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gray-500); display:flex; align-items:center; gap:8px; margin-bottom:16px;}
.eyebrow::before{content:""; width:6px; height:6px; background:currentColor; transform:rotate(45deg);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans); font-weight:500; font-size:15px; padding:13px 26px; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:.15s ease; white-space:nowrap;}
.btn.primary{background:var(--black); color:var(--white);}
.btn.primary:hover{background:var(--ink-800);}
.btn.secondary{background:transparent; color:var(--ink-900); border-color:var(--ink-700);}
.btn.secondary:hover{background:var(--white); border-color:var(--black);}
.btn:active{transform:scale(0.97);}
.btn:disabled{opacity:0.4; cursor:not-allowed;}

/* ---- nav ---- */
.nav{position:sticky; top:0; z-index:50; background:rgba(250,250,248,0.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:72px; position:relative;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:600; font-size:16px;}
.brand .mark{width:26px; height:26px; border-radius:6px; display:flex; align-items:center; justify-content:center; overflow:hidden; flex:none;}
.brand .mark img{width:100%; height:100%; object-fit:cover; display:block;}
.nav .links{display:flex; align-items:center; gap:30px; font-size:14.5px;}
.nav .links a:hover{color:var(--gray-500);}
.crumbs{font-family:var(--mono); font-size:12px; color:var(--gray-500); display:flex; gap:8px; align-items:center;}
.crumbs a:hover{color:var(--black);}

.nav-toggle{display:none; align-items:center; justify-content:center; width:40px; height:36px; background:var(--white); border:1px solid var(--line); border-radius:8px; cursor:pointer; padding:0; flex:none;}
.nav-toggle span{display:block; width:18px; height:2px; background:var(--ink-900); position:relative;}
.nav-toggle span::before, .nav-toggle span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink-900);}
.nav-toggle span::before{top:-6px;}
.nav-toggle span::after{top:6px;}
.nav-mobile-menu{display:none;}
.nav-mobile-menu.open{
  display:flex; flex-direction:column;
  position:absolute; top:72px; left:0; right:0;
  background:var(--paper); border-bottom:1px solid var(--line);
  padding:6px 20px 16px; z-index:60;
}
.nav-mobile-menu a{padding:13px 4px; font-size:15.5px; border-bottom:1px solid var(--line);}
.nav-mobile-menu a:last-child{border-bottom:none;}

/* ---- hero / editorial ---- */
.hero{padding:96px 0 64px;}
.hero h1{font-family:var(--serif); font-weight:500; font-size:clamp(36px,5.4vw,68px); line-height:1.06; max-width:15ch;}
.hero .sub{font-size:18px; color:var(--gray-500); max-width:52ch; margin-top:22px;}
.hero .actions{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;}
.blob{position:relative; border-radius:28px; overflow:hidden; background:linear-gradient(135deg,var(--ink-900),var(--black)); aspect-ratio:4/3; min-height:240px;}
.blob svg{position:absolute; inset:0; width:100%; height:100%;}

.kicker{font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gray-400); margin-bottom:14px;}
.section{padding:72px 0;}
.prose h2{font-family:var(--serif); font-weight:500; font-size:clamp(26px,3.4vw,38px); max-width:16ch; margin-bottom:14px;}
.prose p.lede{font-size:17px; color:var(--gray-500); max-width:58ch;}

.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px;}
.card{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:28px; transition:.2s ease;}
.card:hover{transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,0.06);}
.card .idx{font-family:var(--mono); font-size:11px; color:var(--gray-400);}
.card h3{font-size:17px; margin:14px 0 10px;}
.card p{color:var(--gray-500); font-size:14.5px; margin:0;}

.product-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px;}
.product-card{border-radius:20px; padding:36px; display:flex; flex-direction:column; gap:14px; transition:.2s ease;}
.product-card.live{background:var(--black); color:var(--white); cursor:pointer;}
.product-card.live:hover{transform:translateY(-3px);}
.product-card.soon{background:var(--paper-dim); border:1px solid var(--line); color:var(--ink-900);}
.badge{font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; border:1px solid currentColor; padding:5px 10px; border-radius:6px; display:inline-flex; align-items:center; gap:6px; width:fit-content;}
.badge.live::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
.product-card h3{font-family:var(--serif); font-size:26px; font-weight:500;}
.product-card p{color:var(--gray-400); font-size:14.5px; max-width:42ch;}
.product-card.soon p{color:var(--gray-500);}
.link-row{margin-top:auto; font-weight:500; font-size:14.5px; display:flex; align-items:center; gap:8px;}

.logo-bar{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent); mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent);}
.logo-track{display:flex; width:max-content; animation:scroll 26s linear infinite;}
.logo-bar:hover .logo-track{animation-play-state:paused;}
.logo-item{padding:0 40px; height:44px; display:flex; align-items:center; opacity:0.5; flex:none;}
@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

footer{background:var(--paper-dim); padding:56px 0 28px; margin-top:40px;}
footer .top{display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; padding-bottom:32px; border-bottom:1px solid var(--line);}
footer h4{font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gray-400); margin-bottom:14px;}
footer a{display:block; font-size:14px; color:var(--ink-700); margin-bottom:10px;}
footer a:hover{color:var(--black);}
footer .bottom{padding-top:20px; font-size:13px; color:var(--gray-400); display:flex; justify-content:space-between;}

/* ---- about ---- */
.stat-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-top:44px;}
.stat-strip div{background:var(--white); padding:28px 24px;}
.stat-strip .num{font-family:var(--serif); font-size:clamp(20px,2.4vw,32px); font-weight:500; white-space:nowrap;}
.stat-strip .lab{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--gray-500); margin-top:8px;}
.principle-row{display:flex; gap:22px; padding:26px 0; border-top:1px solid var(--line);}
.principle-row:last-child{border-bottom:1px solid var(--line);}
.principle-row .mk{font-family:var(--mono); font-size:11px; color:var(--gray-400); flex:none; width:32px; padding-top:4px;}
.principle-row h3{font-size:17px; margin-bottom:8px;}
.principle-row p{color:var(--gray-500); font-size:14.5px; max-width:56ch; margin:0;}
.cta-panel{background:var(--black); color:var(--white); border-radius:24px; margin:0 32px 72px; padding:64px 48px;}

/* ---- contact ---- */
.contact-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; margin-top:44px; align-items:start;}
.contact-form{background:var(--white); border:1px solid var(--line); border-radius:16px; padding:32px;}
.contact-side .side-card{padding:22px 0; border-top:1px solid var(--line);}
.contact-side .side-card:first-child{border-top:none; padding-top:0;}
.contact-side .side-card h4{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--gray-400); margin-bottom:8px;}
.contact-side .side-card p, .contact-side .side-card a{font-size:15px; color:var(--ink-900); display:block; margin-bottom:2px;}
.field{margin-bottom:18px;}
.field label{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gray-500); margin-bottom:6px;}
.field input{width:100%; padding:12px 14px; font-size:14.5px; border:1px solid var(--gray-200); border-radius:8px; background:var(--white);}
.field input:focus{outline:none; border-color:var(--black); box-shadow:0 0 0 3px rgba(0,0,0,0.06);}
.field textarea{width:100%; padding:12px 14px; font-size:14.5px; border:1px solid var(--gray-200); border-radius:8px; background:var(--white); font-family:var(--sans); resize:vertical;}
.field textarea:focus{outline:none; border-color:var(--black); box-shadow:0 0 0 3px rgba(0,0,0,0.06);}
.success-panel{text-align:center; padding:40px 20px;}
.success-panel .mark-circle{width:48px; height:48px; border-radius:50%; background:var(--black); display:flex; align-items:center; justify-content:center; margin:0 auto 18px;}

/* ---- legal docs ---- */
.doc-page{max-width:760px; margin:0 auto;}
.doc-page h2{font-family:var(--serif); font-weight:500; font-size:clamp(28px,4vw,42px); margin-bottom:8px;}
.doc-updated{font-family:var(--mono); font-size:12px; color:var(--gray-500); margin-bottom:40px;}
.doc-section{padding:26px 0; border-top:1px solid var(--line);}
.doc-section:first-of-type{border-top:none;}
.doc-section h3{font-family:var(--sans); font-size:16px; font-weight:600; margin-bottom:12px; display:flex; gap:10px; align-items:baseline;}
.doc-section h3 .n{font-family:var(--mono); font-size:12px; color:var(--gray-400); font-weight:400;}
.doc-section p{color:var(--ink-800); font-size:14.5px; margin:0 0 12px;}
.doc-section p:last-child{margin-bottom:0;}
.doc-section ul{margin-top:8px;}
.doc-section li{position:relative; padding-left:18px; margin-bottom:8px; font-size:14.5px; color:var(--ink-800);}
.doc-section li::before{content:""; position:absolute; left:0; top:7px; width:5px; height:5px; background:currentColor; transform:rotate(45deg); opacity:0.6;}
.doc-toc{background:var(--paper-dim); border-radius:12px; padding:20px 24px; margin-bottom:40px;}
.doc-toc .lab{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--gray-500); margin-bottom:10px;}
.doc-toc a{display:block; font-size:13.5px; padding:4px 0; color:var(--ink-700);}
.doc-toc a:hover{color:var(--black);}

/* ---- chat widget ---- */
#chat-widget{position:fixed; right:24px; bottom:24px; z-index:500; font-family:var(--sans);}
#chat-fab{width:56px; height:56px; border-radius:50%; border:none; background:var(--black); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px rgba(0,0,0,0.25); overflow:hidden; padding:11px; transition:.15s ease;}
#chat-fab:hover{transform:translateY(-2px);}
#chat-fab img{width:100%; height:100%; object-fit:cover; border-radius:6px;}
.chat-panel{position:fixed; right:24px; bottom:92px; width:350px; max-width:calc(100vw - 32px); height:min(480px, 70vh); background:var(--white); border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,0.2); display:none; flex-direction:column; overflow:hidden;}
.chat-panel.open{display:flex;}
.chat-head{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); flex:none;}
.chat-head img{width:28px; height:28px; border-radius:6px; flex:none;}
.chat-head strong{font-size:14px;}
.chat-sub{font-size:11.5px; color:var(--gray-500); margin-top:1px;}
.chat-close{margin-left:auto; background:none; border:none; font-size:15px; cursor:pointer; color:var(--gray-500); padding:4px;}
.chat-close:hover{color:var(--black);}
.chat-body{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--paper);}
.chat-msg{font-size:13.5px; line-height:1.55; padding:10px 13px; border-radius:12px; max-width:86%; white-space:pre-wrap;}
.chat-msg.bot{background:var(--white); border:1px solid var(--line); align-self:flex-start;}
.chat-msg.user{background:var(--black); color:var(--white); align-self:flex-end;}
.chat-msg.typing{color:var(--gray-500); font-style:italic;}
.chat-input-row{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); flex:none; background:var(--white);}
.chat-input-row input{flex:1; padding:10px 13px; border:1px solid var(--gray-200); border-radius:8px; font-size:13.5px; font-family:var(--sans);}
.chat-input-row input:focus{outline:none; border-color:var(--black); box-shadow:0 0 0 3px rgba(0,0,0,0.06);}
.chat-input-row button{padding:10px 16px; border:none; border-radius:8px; background:var(--black); color:var(--white); font-size:13.5px; font-weight:500; cursor:pointer;}
.chat-input-row button:hover{background:var(--ink-800);}

@media (max-width:900px){
  .card-grid{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .stat-strip{grid-template-columns:1fr;}
  .hero .wrap{grid-template-columns:1fr !important;}
  footer .top{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .wrap{padding:0 20px;}
  .hero{padding:56px 0 40px;}
  .section{padding:48px 0;}
  .card-grid{grid-template-columns:1fr;}
  .product-grid{grid-template-columns:1fr;}
  .product-card{padding:24px;}
  .card{padding:20px;}
  .cta-panel{margin:0 16px 48px; padding:40px 24px; border-radius:16px;}
  .nav .links{display:none;}
  .nav-toggle{display:flex;}
  footer .top{grid-template-columns:1fr;}
  .chat-panel{width:calc(100vw - 32px); right:16px;}
  #chat-widget{right:16px; bottom:16px;}
}