/* Yavi — Website UI Kit styles. Pairs with ../../colors_and_type.css */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);color:var(--fg-1);background:var(--bg-1);-webkit-font-smoothing:antialiased}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
section{position:relative}

/* ---------- buttons ---------- */
.btn{font-family:var(--font-sans);font-weight:600;font-size:15px;border:0;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:var(--radius-pill);line-height:1;
  white-space:nowrap;transition:transform var(--dur-fast) var(--ease-out),background var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--yavi-blue);color:#fff;box-shadow:var(--shadow-brand)}
.btn-primary:hover{background:var(--yavi-blue-600);transform:translateY(-1px)}
.btn-primary:active{background:var(--yavi-blue-700);transform:scale(.98)}
.btn-secondary{background:#fff;color:var(--fg-1);border:1px solid var(--border-strong)}
.btn-secondary:hover{border-color:var(--yavi-blue);color:var(--yavi-blue)}
.btn-ghost{background:transparent;color:var(--yavi-blue);padding-left:8px;padding-right:8px}
.btn-ghost:hover{gap:11px}
.btn-on-dark{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22)}
.btn-on-dark:hover{background:rgba(255,255,255,.18)}
.btn-sm{padding:9px 16px;font-size:14px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border)}
.nav.on-dark{background:rgba(10,15,31,.7);border-bottom-color:rgba(255,255,255,.08)}
.nav-inner{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.03em}
.brand .mk{width:32px;height:32px;border-radius:8px;background:var(--yavi-gradient);display:grid;place-items:center;box-shadow:var(--shadow-brand)}
.brand .mk span{color:#fff;font-size:19px;font-weight:800;line-height:1}
.brand sup{color:var(--yavi-blue);font-size:11px;font-weight:600}
.nav.on-dark .brand{color:#fff}
.nav-links{display:flex;gap:26px;margin-left:8px}
.nav-links a{font-size:15px;font-weight:500;color:var(--fg-2);cursor:pointer;transition:color var(--dur-base)}
.nav-links a:hover,.nav-links a.active{color:var(--yavi-blue)}
.nav.on-dark .nav-links a{color:#AEB8CE}.nav.on-dark .nav-links a:hover{color:#fff}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-login{font-size:15px;font-weight:600;cursor:pointer;color:var(--fg-1)}
.nav.on-dark .nav-login{color:#fff}

/* ---------- hero ---------- */
.hero{background:var(--ink-900);color:#fff;overflow:hidden;padding:84px 0 96px}
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5}
.glow-a{width:520px;height:520px;background:radial-gradient(circle,#2F6BFF55,transparent 70%);top:-160px;right:-80px}
.glow-b{width:440px;height:440px;background:radial-gradient(circle,#15C2C944,transparent 70%);bottom:-180px;left:-60px}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000,transparent 75%)}
.hero-inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(47,107,255,.14);border:1px solid rgba(47,107,255,.3);
  color:var(--yavi-blue-300);font-size:13px;font-weight:600;padding:6px 13px;border-radius:var(--radius-pill);margin-bottom:22px;white-space:nowrap}
.eyebrow svg{width:14px;height:14px}
.hero h1{font-family:var(--font-display);font-weight:800;font-size:58px;line-height:1.04;letter-spacing:-.03em;margin:0 0 8px}
.rotator{display:inline-block;min-height:1.1em}
.rotator .word{background:var(--yavi-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{font-size:19px;line-height:1.6;color:#C2CBE0;max-width:520px;margin:18px 0 30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{margin-top:34px;display:flex;align-items:center;gap:18px;color:#7E88A3;font-size:13px;font-weight:500}
.hero-trust .sep{width:1px;height:14px;background:rgba(255,255,255,.16)}

/* pipeline panel (abstract product graphic) */
.panel{background:linear-gradient(160deg,#0F1730,#0B1124);border:1px solid var(--ink-600);border-radius:var(--radius-xl);
  padding:20px;box-shadow:var(--shadow-xl)}
.panel-head{display:flex;align-items:center;gap:8px;padding:4px 6px 14px;border-bottom:1px solid var(--ink-600);margin-bottom:16px}
.panel-head .d{width:10px;height:10px;border-radius:50%}
.panel-title{margin-left:8px;font-size:13px;color:#9AA5BE;font-weight:600}
.flowrow{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.node{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--ink-600);border-radius:var(--radius-md);
  padding:11px 13px;display:flex;align-items:center;gap:9px;font-size:13px;color:#D9E2F2;font-weight:500}
.node svg{width:16px;height:16px;color:var(--yavi-blue-300)}
.node.cyan svg{color:var(--yavi-cyan)}
.conn{width:26px;height:2px;background:var(--yavi-gradient);position:relative;flex:none}
.conn::after{content:"";position:absolute;right:-1px;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--yavi-cyan)}
.pulse{animation:pulse 2.4s var(--ease-in-out) infinite}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------- section heads ---------- */
.sec{padding:88px 0}
.sec.alt{background:var(--bg-2)}
.sec-head{text-align:center;max-width:680px;margin:0 auto 52px}
.sec-head .overline{color:var(--yavi-blue);justify-content:center}
.sec-head h2{font-family:var(--font-display);font-weight:800;font-size:40px;line-height:1.12;letter-spacing:-.02em;margin:10px 0 14px;text-wrap:balance}
.sec-head p{font-size:18px;line-height:1.6;color:var(--fg-2);margin:0;text-wrap:pretty}

/* ---------- pillar cards ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pcard{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;
  box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base),border-color var(--dur-base);cursor:default}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.pchip{width:46px;height:46px;border-radius:var(--radius-md);background:var(--yavi-blue-tint);display:grid;place-items:center;margin-bottom:18px}
.pchip svg{width:23px;height:23px;color:var(--yavi-blue)}
.pcard:nth-child(even) .pchip{background:var(--yavi-cyan-tint)}
.pcard:nth-child(even) .pchip svg{color:var(--yavi-cyan-600)}
.pcard h3{font-family:var(--font-display);font-weight:700;font-size:19px;margin:0 0 8px;letter-spacing:-.01em}
.pcard p{font-size:14px;line-height:1.55;color:var(--fg-2);margin:0 0 14px}
.pcard .lk{font-size:14px;font-weight:600;color:var(--yavi-blue);display:inline-flex;align-items:center;gap:6px}
.pcard .lk svg{width:15px;height:15px}

/* ---------- ecosystem ---------- */
.eco-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
.eco-tab{padding:10px 20px;border-radius:var(--radius-pill);font-size:14px;font-weight:600;cursor:pointer;
  border:1px solid var(--border);background:#fff;color:var(--fg-2);transition:all var(--dur-base)}
.eco-tab:hover{border-color:var(--border-strong)}
.eco-tab.active{background:var(--ink-900);color:#fff;border-color:var(--ink-900)}
.eco-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.logo-cell{aspect-ratio:1.7/1;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  box-shadow:var(--shadow-xs);transition:transform var(--dur-base),box-shadow var(--dur-base);padding:8px}
.logo-cell:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.logo-cell .ph{width:26px;height:26px;border-radius:7px;background:var(--bg-3);display:grid;place-items:center}
.logo-cell .ph svg{width:15px;height:15px;color:var(--fg-3)}
.logo-cell .nm{font-size:11.5px;font-weight:600;color:var(--fg-2);text-align:center;line-height:1.2}
.eco-note{text-align:center;margin-top:20px;font-size:12.5px;color:var(--fg-3)}

/* ---------- stats ---------- */
.stats{background:var(--ink-900);color:#fff;padding:72px 0;position:relative;overflow:hidden}
.stats .glow-a{top:-200px;left:30%}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.stat{text-align:center}
.stat .num{font-family:var(--font-display);font-weight:800;font-size:52px;line-height:1;letter-spacing:-.02em;
  background:var(--yavi-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lab{margin-top:10px;font-size:14px;color:#AEB8CE;font-weight:500}

/* ---------- solutions ---------- */
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sol{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px 26px;
  box-shadow:var(--shadow-sm);transition:transform var(--dur-base),box-shadow var(--dur-base)}
.sol:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.sol.feature{background:var(--ink-900);color:#fff;border-color:var(--ink-700)}
.sol-ic{width:52px;height:52px;border-radius:var(--radius-md);background:var(--yavi-gradient-soft);display:grid;place-items:center;margin-bottom:20px}
.sol-ic svg{width:26px;height:26px;color:var(--yavi-blue)}
.sol.feature .sol-ic{background:rgba(47,107,255,.16)}.sol.feature .sol-ic svg{color:var(--yavi-blue-300)}
.sol h3{font-family:var(--font-display);font-weight:700;font-size:22px;margin:0 0 10px;letter-spacing:-.01em}
.sol p{font-size:15px;line-height:1.6;color:var(--fg-2);margin:0 0 20px}
.sol.feature p{color:#AEB8CE}

/* ---------- CTA ---------- */
.cta{background:var(--ink-900);color:#fff;padding:84px 0;text-align:center;overflow:hidden}
.cta-card{position:relative;background:linear-gradient(150deg,#13203f,#0c1126);border:1px solid var(--ink-600);
  border-radius:var(--radius-2xl);padding:64px 40px;overflow:hidden;box-shadow:var(--shadow-xl)}
.cta h2{font-family:var(--font-display);font-weight:800;font-size:44px;letter-spacing:-.02em;margin:0 0 14px}
.cta p{font-size:19px;color:#C2CBE0;max-width:540px;margin:0 auto 30px}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- footer ---------- */
.footer{background:#070B16;color:#9AA5BE;padding:64px 0 30px}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08)}
.foot-brand .brand{color:#fff;margin-bottom:14px}
.foot-brand p{font-size:14px;line-height:1.6;max-width:280px;margin:0 0 18px}
.foot-soc{display:flex;gap:10px}
.foot-soc a{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.06);display:grid;place-items:center;cursor:pointer;transition:background var(--dur-base);color:#fff;font-family:var(--font-display);font-weight:700;font-size:13px;line-height:1}
.foot-soc a:hover{background:var(--yavi-blue)}
.foot-soc svg{width:16px;height:16px;color:#fff}
.foot-col h5{font-family:var(--font-display);color:#fff;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:0 0 16px}
.foot-col a{display:block;font-size:14px;margin-bottom:11px;cursor:pointer;transition:color var(--dur-base)}
.foot-col a:hover{color:#fff}
.foot-bot{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:13px;flex-wrap:wrap;gap:10px}
.badge-soc{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#AEB8CE;background:rgba(255,255,255,.05);padding:5px 11px;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.08)}
.badge-soc svg{width:13px;height:13px;color:var(--success)}

/* ---------- demo modal ---------- */
.modal-ov{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:100;
  animation:fade var(--dur-base) var(--ease-out)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:var(--radius-xl);width:min(440px,92vw);box-shadow:var(--shadow-xl);overflow:hidden;
  animation:rise var(--dur-slow) var(--ease-out)}
@keyframes rise{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-head{background:var(--ink-900);color:#fff;padding:24px 26px;position:relative}
.modal-head h3{font-family:var(--font-display);font-weight:700;font-size:22px;margin:0 0 4px}
.modal-head p{margin:0;font-size:14px;color:#AEB8CE}
.modal-x{position:absolute;top:18px;right:18px;width:30px;height:30px;border-radius:8px;border:0;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;display:grid;place-items:center}
.modal-x:hover{background:rgba(255,255,255,.2)}
.modal-body{padding:24px 26px;display:flex;flex-direction:column;gap:14px}
.fld label{display:block;font-size:13px;font-weight:600;color:var(--fg-2);margin-bottom:6px}
.fld .inp{display:flex;align-items:center;gap:9px;border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:11px 13px}
.fld .inp:focus-within{border-color:var(--yavi-blue);box-shadow:var(--ring-focus)}
.fld .inp svg{width:16px;height:16px;color:var(--fg-3)}
.fld input,.fld select{border:0;outline:0;font-family:var(--font-sans);font-size:14px;width:100%;background:transparent;color:var(--fg-1)}
.modal-done{text-align:center;padding:36px 26px}
.modal-done .ok{width:58px;height:58px;border-radius:50%;background:var(--success-tint);display:grid;place-items:center;margin:0 auto 16px}
.modal-done .ok svg{width:30px;height:30px;color:var(--success)}
.modal-done h3{font-family:var(--font-display);font-weight:700;font-size:22px;margin:0 0 8px}
.modal-done p{margin:0;color:var(--fg-2);font-size:15px}

@media(max-width:920px){
  .hero-inner{grid-template-columns:1fr}.pillars{grid-template-columns:1fr 1fr}
  .eco-grid{grid-template-columns:repeat(3,1fr)}.stat-grid{grid-template-columns:1fr 1fr}
  .sol-grid{grid-template-columns:1fr}.foot-top{grid-template-columns:1fr 1fr}.nav-links{display:none}
}