/* Solvertica — shared stylesheet */

:root{
  --ivory:#F6F4EE;
  --surface:#FFFFFF;
  --ink:#14201B;
  --graphite:#4C564F;
  --line:#DEE3DA;
  --green:#2E6B4E;
  --green-ink:#173D2A;
  --green-soft:#E3EEE4;
  --green-strong:#3C8A64;

  --max:1200px;
  --gap-xs:8px; --gap-sm:16px; --gap-md:24px; --gap-lg:48px; --gap-xl:96px;
  --radius-sm:4px; --radius-md:6px;
}

@media (prefers-color-scheme: dark){
  :root{
    --ivory:#10160F;
    --surface:#161E17;
    --ink:#F1EFE7;
    --graphite:#A6B0A3;
    --line:#293428;
    --green:#55B98A;
    --green-ink:#DCF3E6;
    --green-soft:#1B2A20;
    --green-strong:#6BCB9B;
  }
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
h1,h2,h3,h4{
  font-family:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  font-weight:600;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
}
p{margin:0; line-height:1.65;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
button{font-family:inherit; cursor:pointer;}
:focus-visible{outline:2px solid var(--green); outline-offset:2px;}

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

.eyebrow{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--green);
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; padding:12px 22px;
  border-radius:var(--radius-sm); border:1px solid transparent;
  transition:transform .15s ease, opacity .15s ease;
}
.btn.pri{background:var(--green); color:#fff;}
.btn.sec{border-color:var(--line); color:var(--ink);}
.btn.small{padding:9px 16px; font-size:13px;}
.btn:hover{transform:translateY(-1px);}
.btn.pri:hover{box-shadow:0 8px 20px -6px rgba(46,107,78,.45);}
.btn.sec:hover{border-color:var(--green); color:var(--green-ink);}
@media (prefers-color-scheme: dark){ .btn.pri{color:var(--ink);} .btn.pri:hover{box-shadow:0 8px 20px -6px rgba(85,185,138,.35);} }

/* header */
.site-header{
  border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--ivory);
  z-index:20;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:76px; gap:24px;
}
.brand{display:flex; align-items:center; gap:10px; font-family:'Bricolage Grotesque'; font-weight:600; font-size:18px; flex:none;}
.brand svg{width:22px; height:22px;}
.site-nav{display:flex; gap:30px; font-size:14px; color:var(--graphite); flex:1;}
.site-nav a{position:relative; padding-bottom:3px;}
.site-nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--green); transition:right .22s cubic-bezier(.4,0,.2,1);}
.site-nav a:hover{color:var(--ink);}
.site-nav a:hover::after{right:0;}
.header-inner > .btn{flex:none;}
.nav-toggle{
  display:none; width:36px; height:36px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:transparent; align-items:center; justify-content:center; flex:none;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:16px; height:1.5px; background:var(--ink); position:relative;
}
.nav-toggle span::before{position:absolute; top:-5px;}
.nav-toggle span::after{position:absolute; top:5px;}

/* sections */
section{padding:var(--gap-xl) 0; border-bottom:1px solid var(--line);}
section:last-of-type{border-bottom:none;}
section.tight{padding:var(--gap-lg) 0;}
section.on-ink{background:var(--ink); color:var(--ivory); border-bottom:none;}
section.on-ink .eyebrow{color:var(--green-strong);}
section.on-ink h2, section.on-ink h3{color:var(--ivory);}
section.on-ink p{color:#C8CFC5;}
section.on-mint{background:var(--green-soft);}

.section-head{max-width:640px; margin-bottom:var(--gap-lg);}
.section-head .eyebrow{margin-bottom:14px;}
.section-head h2{font-size:clamp(26px,3.4vw,36px); letter-spacing:-.01em;}
.section-head p{margin-top:14px; color:var(--graphite); font-size:16px;}
section.on-ink .section-head p{color:#C8CFC5;}

/* hero */
.hero{padding:var(--gap-xl) 0 var(--gap-lg);}
.hero-inner{max-width:680px;}
.hero .eyebrow{margin-bottom:18px;}
.hero h1{font-size:clamp(40px,6.6vw,74px); letter-spacing:-.025em; line-height:.99;}
.hero h1 .light{font-weight:400; opacity:.62; display:block;}
.hero .lede{margin-top:22px; font-size:18px; color:var(--graphite); max-width:50ch;}
.hero .btns{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
.hero .trust{margin-top:56px; display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.hero .trust span.k{font-size:12px; color:var(--graphite); text-transform:uppercase; letter-spacing:.08em; font-family:'IBM Plex Mono',monospace;}
.pill{
  font-size:13px; font-weight:500; padding:6px 14px; border:1px solid var(--line);
  border-radius:99px; color:var(--graphite);
}

/* hero — two column with rail visual */
.hero-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:var(--gap-xl); align-items:center;}
.hero-grid .hero-inner{max-width:none;}
.rail-panel{
  position:relative; height:380px; padding:28px 28px 22px;
  border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface);
  display:flex; align-items:flex-end; gap:12px; overflow:hidden;
}
.rail-panel .rail{
  flex:1; background:var(--line); border-radius:3px 3px 0 0;
  transform:translateY(0); opacity:1;
}
.rail-panel .rail.active{background:var(--green);}
.rail-node{
  position:absolute; top:64px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:7px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em;
  background:var(--ivory); border:1px solid var(--line); border-radius:99px;
  padding:6px 12px; color:var(--ink); white-space:nowrap;
}
.rail-node .d{width:6px; height:6px; border-radius:50%; background:var(--green);}
.rail-fields{
  margin-top:16px; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  color:var(--graphite); letter-spacing:.02em;
}
@media (prefers-reduced-motion: no-preference){
  .rail-panel .rail{animation:rail-rise .8s cubic-bezier(.2,.7,.2,1) backwards;}
  .rail-panel .rail:nth-child(1){animation-delay:.02s;}
  .rail-panel .rail:nth-child(2){animation-delay:.08s;}
  .rail-panel .rail:nth-child(3){animation-delay:.14s;}
  .rail-panel .rail:nth-child(4){animation-delay:.20s;}
  .rail-panel .rail:nth-child(5){animation-delay:.26s;}
  .rail-panel .rail:nth-child(6){animation-delay:.32s;}
  .rail-panel .rail:nth-child(7){animation-delay:.38s;}
  .rail-node{animation:fade-in .5s ease .55s backwards;}
}
@keyframes rail-rise{
  from{transform:translateY(18px) scaleY(.7); opacity:0; transform-origin:bottom;}
  to{transform:translateY(0) scaleY(1); opacity:1;}
}
@keyframes fade-in{from{opacity:0; transform:translate(-50%,4px);} to{opacity:1; transform:translate(-50%,0);}}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .rail-panel{height:220px;}
}

/* app cards */
.app-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-md);}
.app-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:28px; display:flex; flex-direction:column; gap:14px;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.app-card:not(.ghost):hover{
  transform:translateY(-4px); border-color:var(--green);
  box-shadow:0 14px 30px -14px rgba(20,32,27,.18);
}
.app-card .tag-line{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--graphite);}
.app-card h3{font-size:19px;}
.app-card p{font-size:14.5px; color:var(--graphite);}
.app-card .tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:2px;}
.tag{font-size:11.5px; font-family:'IBM Plex Mono',monospace; background:var(--green-soft); color:var(--green-ink); padding:3px 9px; border-radius:99px;}
.app-card .visit{margin-top:auto; font-size:13.5px; font-weight:600; color:var(--green-ink); display:flex; align-items:center; gap:6px;}
.app-card.ghost{background:transparent; border-style:dashed;}
.app-card.ghost h3{color:var(--graphite);}
.app-card .dot{width:9px; height:9px; border-radius:50%; background:var(--green);}

/* full product block (apps page) */
.product-block{padding:var(--gap-xl) 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-lg); align-items:start;}
.product-block:last-of-type{border-bottom:none;}
.product-block .tag-line{margin-bottom:14px;}
.product-block h3{font-size:clamp(26px,3.2vw,34px);}
.product-block .sub{font-size:17px; color:var(--graphite); margin-top:10px; max-width:44ch;}
.product-block .rows{margin-top:26px; display:flex; flex-direction:column; gap:16px;}
.product-block .row .k{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--graphite); margin-bottom:4px;}
.product-block .row .v{font-size:15px; max-width:46ch;}
.product-visual{
  background:var(--green-soft); border:1px solid var(--line); border-radius:var(--radius-md);
  min-height:280px; display:flex; align-items:center; justify-content:center; padding:32px;
}
.product-visual .mark{width:80px; height:80px; opacity:.85;}

/* philosophy / three-up */
.three-up{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-md);}
.three-up .card{padding:28px 0 0; border-top:1px solid var(--line);}
section.on-ink .three-up .card{border-top-color:#2A362F;}
.three-up .num{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--green-ink); background:var(--green-soft);
  padding:4px 10px; border-radius:99px; margin-bottom:16px;
}
section.on-ink .three-up .num{background:rgba(85,185,138,.14); color:var(--green-strong);}
.three-up h4{font-size:17px; margin-bottom:8px;}
.three-up p{font-size:14.5px; color:var(--graphite);}
section.on-ink .three-up p{color:#C8CFC5;}

/* platform pills */
.platform-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px;}
.platform-pill{
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 22px;
  font-family:'Bricolage Grotesque'; font-weight:600; font-size:16px; color:var(--graphite);
  background:var(--surface);
}

/* big statement */
.statement{padding:var(--gap-xl) 0;}
.statement h2{font-size:clamp(30px,5.4vw,56px); max-width:15ch; letter-spacing:-.02em; line-height:1.05;}

/* final cta */
.final-cta{text-align:left; padding:var(--gap-xl) 0;}
.final-cta-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.final-cta h2{font-size:clamp(28px,4vw,40px);}

/* footer */
.site-footer{padding:var(--gap-xl) 0 var(--gap-md);}
.footer-inner{display:flex; justify-content:space-between; gap:var(--gap-lg); flex-wrap:wrap; padding-bottom:var(--gap-lg); border-bottom:1px solid var(--line);}
.footer-brand p{margin-top:10px; color:var(--graphite); font-size:14px; max-width:26ch;}
.footer-cols{display:flex; gap:var(--gap-xl); flex-wrap:wrap;}
.footer-cols .col-title{display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--graphite); margin-bottom:14px;}
.footer-cols div{display:flex; flex-direction:column; gap:10px; font-size:14px;}
.footer-cols a:hover{color:var(--green-ink);}
.footer-bottom{display:flex; justify-content:space-between; padding-top:var(--gap-md); font-size:13px; color:var(--graphite); flex-wrap:wrap; gap:8px;}

/* generic content pages (company / careers / insights) */
.prose{max-width:66ch;}
.prose p{font-size:16.5px; color:var(--ink); margin-top:16px;}
.prose p:first-child{margin-top:0;}
.stat-line{padding:20px 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:4px;}
.stat-line:last-child{border-bottom:1px solid var(--line);}
.stat-line .k{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--graphite); font-weight:600;}
.stat-line .v{font-size:18px; max-width:60ch;}

.empty-state{
  border:1px dashed var(--line); border-radius:var(--radius-md); padding:48px 32px;
  text-align:center; max-width:560px; margin:0 auto;
}
.empty-state h3{font-size:20px; margin-bottom:10px;}
.empty-state p{color:var(--graphite); font-size:15px;}
.topic-list{margin-top:28px; display:flex; flex-direction:column; gap:0; max-width:560px; margin-inline:auto;}
.topic-row{display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-top:1px solid var(--line); font-size:14.5px;}
.topic-row:last-child{border-bottom:1px solid var(--line);}
.topic-row .soon{font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--graphite);}

.role-row{display:flex; justify-content:space-between; align-items:center; padding:20px 0; border-top:1px solid var(--line); gap:16px; flex-wrap:wrap;}
.role-row:last-child{border-bottom:1px solid var(--line);}
.role-row .name{font-size:16px; font-weight:600;}
.role-row .meta{font-size:13px; color:var(--graphite); margin-top:4px;}

@media (max-width:860px){
  .site-nav, .header-inner > .btn{display:none;}
  .nav-toggle{display:flex;}
  .site-header.open .site-nav{
    display:flex; flex-direction:column; position:absolute; top:76px; left:0; right:0;
    background:var(--ivory); border-bottom:1px solid var(--line); padding:20px 32px; gap:18px;
  }
  .app-grid, .three-up{grid-template-columns:1fr;}
  .product-block{grid-template-columns:1fr;}
  .final-cta-inner{flex-direction:column; align-items:flex-start;}
}
