/* =========================================================
   Odentech — design tokens
   Colors sampled directly from the brand mark (logo_ot.png)
   ========================================================= */
:root{
  --bg: #070B16;
  --bg-alt: #0A0F1F;
  --surface: #0F1830;
  --surface-2: #141F3D;
  --surface-border: rgba(150,175,230,0.14);
  --header-bg: rgba(7,11,22,0.82);

  --blue: #0039A6;
  --blue-bright: #3D6BFF;
  --blue-dim: #1C3A78;
  --brand-navy-1: #0E192B;
  --brand-navy-2: #263D5F;
  --red: #D4293D;

  --text: #EDF2FF;
  --text-muted: #90A0C4;
  --text-faint: #5A6A90;

  --grad-1: rgba(61,107,255,0.10);
  --grad-2: rgba(38,61,95,0.10);
  --watermark-opacity: 0.08;

  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;

  --radius: 2px;
  --max-w: 1180px;
}

:root[data-theme="light"]{
  --bg: #FFFFFF;
  --bg-alt: #F3F5FA;
  --surface: #F5F7FC;
  --surface-2: #EAEEF7;
  --surface-border: rgba(20,40,90,0.12);
  --header-bg: rgba(255,255,255,0.82);

  --blue-dim: #C7D4F5;

  --text: #0B1220;
  --text-muted: #46536B;
  --text-faint: #6B7890;

  --grad-1: rgba(61,107,255,0.06);
  --grad-2: rgba(38,61,95,0.05);
  --watermark-opacity: 0.05;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 85% 0%, var(--grad-1), transparent 45%),
    radial-gradient(circle at 0% 100%, var(--grad-2), transparent 40%);
  background-attachment:fixed;
  transition:background-color .2s ease, color .2s ease;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}

.wrap{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 32px;
}

/* Focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--blue-bright);
  outline-offset:3px;
}

/* =========================================================
   Bracket mark — the signature motif, drawn from the logo:
   a squared outline split by a vertical bar, echoing the
   split-O brand mark
   ========================================================= */
.bracket{
  display:inline-block;
  position:relative;
  width:1em; height:1em;
}
.bracket svg{width:100%; height:100%; display:block;}

.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:18px;
}
.eyebrow .bracket{width:14px; height:14px; color:var(--blue-bright);}

/* =========================================================
   Header / Nav
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--header-bg);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--surface-border);
  transition:background-color .2s ease;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.brand{display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:0.01em;}
.brand img{height:40px; width:auto;}
.brand span{color:var(--text);}
.brand .dot{color:var(--blue-bright);}

.nav-links{display:flex; align-items:center; gap:36px; font-family:var(--font-mono); font-size:13px; letter-spacing:0.03em;}
.nav-links a{color:var(--text-muted); transition:color .15s ease; position:relative; padding:4px 0;}
.nav-links a:hover, .nav-links a.active{color:var(--text);}
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:var(--blue-bright);
}
.nav-cta{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--bg) !important;
  background:var(--text);
  padding:9px 18px;
  border:1px solid var(--text);
  transition:all .15s ease;
}
.nav-cta:hover{background:transparent; color:var(--text) !important;}

.nav-toggle{display:none; background:none; border:none; color:var(--text); font-size:22px; cursor:pointer;}

.theme-toggle{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--text-muted); background:none; border:1px solid var(--surface-border);
  padding:7px 12px; cursor:pointer; transition:all .15s ease; margin-left:20px;
}
.theme-toggle:hover{color:var(--text); border-color:var(--text-faint);}

@media (max-width:840px){
  .nav-links{
    position:fixed; inset:76px 0 0 0; background:var(--bg-alt);
    flex-direction:column; align-items:flex-start; padding:32px;
    gap:24px; border-top:1px solid var(--surface-border);
    transform:translateX(100%); transition:transform .2s ease;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{display:block;}
  .site-header:has(.nav-links.open){backdrop-filter:none;}
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  padding:120px 0 100px;
  overflow:hidden;
  border-bottom:1px solid var(--surface-border);
}
.hero .watermark{
  position:absolute;
  right:-8%; top:50%; transform:translateY(-50%);
  width:640px; height:auto;
  opacity:var(--watermark-opacity);
  pointer-events:none;
}
.hero .watermark img{width:100%; display:block;}
.hero .wrap{position:relative; z-index:1;}
.hero h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(38px, 5.6vw, 68px);
  line-height:1.06;
  letter-spacing:-0.01em;
  max-width:16ch;
  margin-bottom:26px;
}
.hero h1 .accent{color:var(--blue-bright);}
.hero p.lead{
  font-size:18px;
  color:var(--text-muted);
  max-width:52ch;
  margin-bottom:40px;
}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}

.btn{
  font-family:var(--font-mono);
  font-size:13.5px;
  letter-spacing:0.02em;
  padding:14px 26px;
  border:1px solid var(--surface-border);
  transition:all .15s ease;
  display:inline-flex; align-items:center; gap:10px;
}
.btn-primary{background:var(--blue-bright); border-color:var(--blue-bright); color:#fff;}
.btn-primary:hover{background:#5580ff;}
.btn-ghost{color:var(--text); border-color:var(--surface-border);}
.btn-ghost:hover{border-color:var(--text-faint); background:var(--surface);}

.hero-meta{
  display:flex; gap:48px; margin-top:72px; flex-wrap:wrap;
  font-family:var(--font-mono);
}
.hero-meta div span{display:block;}
.hero-meta .num{font-size:26px; color:var(--text); font-family:var(--font-display); font-weight:600;}
.hero-meta .lbl{font-size:12px; color:var(--text-faint); letter-spacing:0.08em; text-transform:uppercase; margin-top:4px;}

/* =========================================================
   Section basics
   ========================================================= */
section{padding:96px 0;}
.section-border{border-bottom:1px solid var(--surface-border);}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head h2{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(28px,3.4vw,40px);
  letter-spacing:-0.01em;
  margin-bottom:16px;
}
.section-head p{color:var(--text-muted); font-size:16.5px;}

/* =========================================================
   Services — asymmetric grid
   ========================================================= */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--surface-border);
  border:1px solid var(--surface-border);
}
.service-card{
  background:var(--bg);
  padding:40px 32px;
  position:relative;
  transition:background .2s ease;
}
.service-card:hover{background:var(--surface);}
.service-card .bracket{width:26px; height:26px; margin-bottom:28px;}
.service-card h3{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:600;
  margin-bottom:12px;
}
.service-card p{color:var(--text-muted); font-size:14.5px;}
.service-card .tag{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em;
  color:var(--text-faint); text-transform:uppercase; margin-top:20px; display:block;
}

@media (max-width:840px){ .services-grid{grid-template-columns:1fr;} }

/* =========================================================
   Process timeline (real sequence -> numbered is justified)
   ========================================================= */
.process{display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative;}
.process::before{
  content:""; position:absolute; top:13px; left:0; right:0; height:1px; background:var(--surface-border);
}
.process-step{position:relative; padding-right:24px;}
.process-step .idx{
  width:26px; height:26px; border:1px solid var(--blue-bright); background:var(--bg);
  color:var(--blue-bright); font-family:var(--font-mono); font-size:12px;
  display:flex; align-items:center; justify-content:center; position:relative; z-index:1; margin-bottom:24px;
}
.process-step h4{font-family:var(--font-display); font-size:17px; font-weight:600; margin-bottom:10px;}
.process-step p{color:var(--text-muted); font-size:14px;}

@media (max-width:840px){
  .process{grid-template-columns:1fr; gap:36px;}
  .process::before{display:none;}
}

/* =========================================================
   About / split
   ========================================================= */
.split{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start;}
.split .col p{color:var(--text-muted); margin-bottom:18px;}
.fact-list{margin-top:32px; border-top:1px solid var(--surface-border);}
.fact-list li{
  display:flex; justify-content:space-between; padding:16px 0;
  border-bottom:1px solid var(--surface-border);
  font-family:var(--font-mono); font-size:13.5px;
}
.fact-list li span:first-child{color:var(--text-faint); text-transform:uppercase; letter-spacing:0.06em; font-size:11.5px;}
@media (max-width:840px){ .split{grid-template-columns:1fr; gap:40px;} }

/* =========================================================
   CTA band
   ========================================================= */
.cta-band{
  background:var(--surface);
  border-top:1px solid var(--surface-border);
  border-bottom:1px solid var(--surface-border);
  padding:80px 0;
  text-align:center;
}
.cta-band h2{font-family:var(--font-display); font-size:clamp(26px,3.4vw,38px); font-weight:600; margin-bottom:20px;}
.cta-band p{color:var(--text-muted); margin-bottom:36px;}

/* =========================================================
   Footer
   ========================================================= */
footer{padding:64px 0 40px;}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:48px; border-bottom:1px solid var(--surface-border);
}
.footer-grid h5{font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-faint); margin-bottom:18px;}
.footer-grid li{margin-bottom:12px; font-size:14px;}
.footer-grid a{color:var(--text-muted); transition:color .15s ease;}
.footer-grid a:hover{color:var(--text);}
.footer-brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:17px; margin-bottom:14px;}
.footer-brand img{height:24px; width:auto;}
.footer-grid p.desc{color:var(--text-faint); font-size:13.5px; max-width:32ch;}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top:28px; font-family:var(--font-mono); font-size:12px; color:var(--text-faint);
}
@media (max-width:840px){ .footer-grid{grid-template-columns:1fr 1fr; row-gap:32px;} }

/* =========================================================
   Legal pages
   ========================================================= */
.legal-hero{padding:80px 0 48px; border-bottom:1px solid var(--surface-border);}
.legal-hero h1{font-family:var(--font-display); font-size:clamp(30px,4vw,44px); font-weight:600; margin-bottom:14px;}
.legal-hero .updated{font-family:var(--font-mono); font-size:12.5px; color:var(--text-faint);}
.legal-body{padding:64px 0 100px; max-width:760px;}
.legal-body h2{font-family:var(--font-display); font-size:21px; font-weight:600; margin:40px 0 14px;}
.legal-body h2:first-child{margin-top:0;}
.legal-body p{color:var(--text-muted); margin-bottom:14px;}
.legal-body ul{margin:0 0 14px 0;}
.legal-body li{color:var(--text-muted); margin-bottom:8px; padding-left:20px; position:relative;}
.legal-body li::before{content:"—"; position:absolute; left:0; color:var(--text-faint);}
.legal-body a{color:var(--blue-bright); border-bottom:1px solid transparent;}
.legal-body a:hover{border-color:var(--blue-bright);}
.legal-body strong{color:var(--text);}
.legal-toc{
  display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:24px;
  font-family:var(--font-mono); font-size:12.5px;
}
.legal-toc a{color:var(--text-muted);}
.legal-toc a:hover{color:var(--blue-bright);}
.placeholder{color:var(--red); background:rgba(212,41,61,0.08); padding:1px 6px; border:1px dashed rgba(212,41,61,0.4); font-family:var(--font-mono); font-size:0.92em;}

/* =========================================================
   Contact page
   ========================================================= */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:80px;}
.contact-card{
  border:1px solid var(--surface-border); background:var(--surface); padding:32px;
}
.contact-card h3{font-family:var(--font-display); font-size:17px; margin-bottom:8px;}
.contact-card p{color:var(--text-muted); font-size:14px; margin-bottom:16px;}
.contact-card a.big{font-family:var(--font-mono); font-size:15px; color:var(--blue-bright);}
.contact-list{display:flex; flex-direction:column; gap:20px;}
@media (max-width:840px){ .contact-grid{grid-template-columns:1fr; gap:40px;} }

/* small helpers */
.mt-0{margin-top:0;}