/* ============================================================
   UNYKORN UI — shared design system
   One file, every property: unykorn.ai, unykorn.org,
   portal.unykorn.ai, broker.unykorn.ai, docs.unykorn.org
   Import: <link rel="stylesheet" href="/ui/unykorn-ui.css">
   ============================================================ */

:root{
  --bg:#08080B;
  --bg2:#0C0C10;
  --ink:#F5F6F8;
  --ink-dim:#A9AEB6;
  --ink-faint:#6E727B;
  --line:rgba(255,255,255,0.08);
  --orange:#E8802A;
  --orange-hot:#FFA11A;
  --orange-deep:#C25115;
  --amber:#F5C878;
  --silver:#C7CDD5;
  --green:#5BD693;
  --red:#E14B4B;
  --radius:22px;
  --maxw:1200px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --glass-bg:linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03) 40%, rgba(255,255,255,0.015));
  --glass-border:rgba(255,255,255,0.16);
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(255,255,255,0.03);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img,video,svg{max-width:100%;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;position:relative;z-index:2;}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;font-weight:650;color:var(--orange);}
h1,h2,h3,h4{font-weight:650;letter-spacing:-0.015em;margin:0;}
p{color:var(--ink-dim);margin:0;}

/* ---------- Liquid mesh background ---------- */
#mesh{position:fixed;inset:-20%;z-index:0;pointer-events:none;filter:blur(90px) saturate(120%);opacity:.55;}
.blob{position:absolute;border-radius:50%;will-change:transform;}
.blob.b1{width:52vw;height:52vw;background:radial-gradient(circle at 35% 35%, rgba(232,128,42,0.55), rgba(232,128,42,0) 65%);top:-6%;left:-8%;animation:drift1 34s ease-in-out infinite alternate;}
.blob.b2{width:44vw;height:44vw;background:radial-gradient(circle at 60% 40%, rgba(120,90,255,0.20), rgba(120,90,255,0) 65%);top:22%;right:-10%;animation:drift2 41s ease-in-out infinite alternate;}
.blob.b3{width:40vw;height:40vw;background:radial-gradient(circle at 50% 50%, rgba(199,205,213,0.16), rgba(199,205,213,0) 60%);bottom:-8%;left:18%;animation:drift3 47s ease-in-out infinite alternate;}
.blob.b4{width:34vw;height:34vw;background:radial-gradient(circle at 45% 55%, rgba(194,81,21,0.4), rgba(194,81,21,0) 62%);bottom:10%;right:14%;animation:drift1 39s ease-in-out infinite alternate-reverse;}
@keyframes drift1{from{transform:translate(0,0) scale(1);}to{transform:translate(9vw,7vh) scale(1.15);}}
@keyframes drift2{from{transform:translate(0,0) scale(1.05);}to{transform:translate(-8vw,10vh) scale(0.92);}}
@keyframes drift3{from{transform:translate(0,0) scale(0.95);}to{transform:translate(7vw,-8vh) scale(1.12);}}
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.7,.25,1),transform .8s cubic-bezier(.2,.7,.25,1);}
.rv.in{opacity:1;transform:none;}
.rv-d1{transition-delay:.1s;}.rv-d2{transition-delay:.2s;}.rv-d3{transition-delay:.3s;}
@media (prefers-reduced-motion: reduce){.rv{opacity:1;transform:none;transition:none;}*{animation:none !important;}#mesh{display:none;}}

/* ---------- Glass ---------- */
.glass{background:var(--glass-bg);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,0.45), var(--glass-highlight);position:relative;}
.glow{overflow:hidden;}
.glow::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(232,128,42,0.14), transparent 65%);opacity:0;transition:opacity .3s ease;}
.glow:hover::after{opacity:1;}

/* ---------- Nav pill ---------- */
header.site-nav{position:sticky;top:14px;z-index:60;margin:14px auto 0;max-width:calc(var(--maxw) - 20px);padding:0 10px;}
.nav-pill{display:flex;align-items:center;justify-content:space-between;padding:11px 20px;border-radius:999px;background:linear-gradient(160deg, rgba(20,20,25,0.75), rgba(14,14,18,0.7));backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(255,255,255,0.14);box-shadow:0 14px 44px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.16);}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.03em;font-size:15px;}
.brand img{height:26px;width:auto;}
.brand .org-tag{font-size:10px;letter-spacing:.14em;color:var(--amber);border:1px solid rgba(245,200,120,0.3);border-radius:999px;padding:2px 8px;margin-left:2px;}
nav.links{display:flex;gap:24px;font-size:13.5px;color:var(--ink-dim);}
nav.links a{position:relative;padding-bottom:2px;transition:color .2s;}
nav.links a::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;background:var(--orange);transition:width .25s ease;}
nav.links a:hover{color:var(--ink);}
nav.links a:hover::after{width:100%;}
.nav-cta{font-size:13px;font-weight:650;padding:9px 18px;border-radius:999px;background:linear-gradient(135deg,var(--orange),var(--orange-deep));color:#150C05;transition:box-shadow .25s,transform .2s;box-shadow:inset 0 1px 0 rgba(255,255,255,0.35);}
.nav-cta:hover{box-shadow:0 0 26px rgba(232,128,42,0.5), inset 0 1px 0 rgba(255,255,255,0.35);transform:translateY(-1px);}
@media (max-width:900px){nav.links{display:none;}}

/* ---------- Buttons ---------- */
.btn{padding:14px 26px;border-radius:14px;font-weight:650;font-size:14.5px;border:1px solid var(--line);transition:transform .2s,box-shadow .3s,background .2s;display:inline-block;}
.btn-primary{background:linear-gradient(135deg,var(--orange),var(--orange-deep));color:#150C05;border:none;box-shadow:0 10px 30px rgba(194,81,21,0.35), inset 0 1px 0 rgba(255,255,255,0.4);}
.btn-primary:hover{box-shadow:0 14px 44px rgba(232,128,42,0.55), inset 0 1px 0 rgba(255,255,255,0.4);transform:translateY(-2px);}
.btn-glass{color:var(--ink);background:linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,0.18);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2);}
.btn-glass:hover{background:linear-gradient(160deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06));transform:translateY(-2px);}

/* ---------- Badges ---------- */
.badge{font-size:10.5px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);display:inline-block;}
.badge.live{background:rgba(70,190,120,0.13);color:var(--green);border:1px solid rgba(91,214,147,0.32);}
.badge.dev{background:rgba(200,205,213,0.09);color:var(--silver);border:1px solid rgba(200,205,213,0.24);}
.badge.edu{background:rgba(245,200,120,0.10);color:var(--amber);border:1px solid rgba(245,200,120,0.3);}

/* ---------- Sections ---------- */
section{padding:96px 0;position:relative;z-index:2;}
.section-head{max-width:720px;margin:0 auto 54px;text-align:center;}
.section-head h2{font-size:clamp(26px,3.2vw,38px);margin-top:12px;color:#fff;}
.section-head p{margin-top:15px;font-size:15.5px;}

/* ---------- Hero ---------- */
.hero{position:relative;padding:120px 0 80px;text-align:center;}
.hero-badge{display:inline-flex;align-items:center;gap:9px;margin-bottom:28px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:650;color:var(--amber);border:1px solid rgba(245,200,120,0.3);border-radius:999px;padding:8px 18px;background:linear-gradient(160deg, rgba(245,200,120,0.10), rgba(245,200,120,0.03));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.45;}}
.hero h1{font-size:clamp(34px,5.2vw,62px);max-width:940px;margin:0 auto;color:#fff;line-height:1.12;}
.liquid{background:linear-gradient(100deg,#F0B45C 5%,var(--orange-hot) 28%,#F5C878 52%,var(--orange) 76%,#F0B45C 95%);background-size:240% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s linear infinite;}
@keyframes shimmer{to{background-position:240% center;}}
.hero p.lead{max-width:700px;margin:26px auto 0;font-size:17.5px;color:#D9DCE2;}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:40px;}

/* ---------- Card grids ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media (max-width:1000px){.grid-3{grid-template-columns:1fr 1fr;}.grid-4{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.grid-3,.grid-4{grid-template-columns:1fr;}}
.card{padding:28px;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .35s;}
.card:hover{transform:translateY(-6px);border-color:rgba(232,128,42,0.4);box-shadow:0 28px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(232,128,42,0.12), var(--glass-highlight);}
.card .ico{width:48px;height:48px;border-radius:14px;margin-bottom:18px;background:linear-gradient(150deg, rgba(232,128,42,0.22), rgba(194,81,21,0.08));border:1px solid rgba(232,128,42,0.3);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2), 0 6px 18px rgba(194,81,21,0.2);}
.card .ico svg{width:24px;height:24px;stroke:var(--orange-hot);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.card h3{font-size:17.5px;color:#fff;margin:0 0 8px;}
.card p{font-size:13.5px;flex:1;}
.card .entity{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:11px;color:var(--ink-faint);line-height:1.6;}
.card .go{display:inline-block;margin-top:14px;font-size:13px;font-weight:650;color:var(--orange);transition:transform .2s ease;}
.card:hover .go{transform:translateX(4px);}

/* ---------- Mega footer ---------- */
footer{border-top:1px solid var(--line);position:relative;z-index:2;background:rgba(8,8,11,0.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.mega{max-width:var(--maxw);margin:0 auto;padding:64px 26px 40px;display:grid;grid-template-columns:repeat(5,1fr);gap:36px 28px;}
@media (max-width:1000px){.mega{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.mega{grid-template-columns:repeat(2,1fr);}}
.mega h6{margin:0 0 14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);font-weight:700;}
.mega ul{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:9px;}
.mega a,.mega span{font-size:12.5px;color:var(--ink-dim);transition:color .2s;display:inline-flex;align-items:center;gap:7px;}
.mega a:hover{color:var(--ink);}
.mega .soon{color:var(--ink-faint);}
.mega .soon i{font-style:normal;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--silver);border:1px solid rgba(200,205,213,0.25);border-radius:999px;padding:1.5px 7px;background:rgba(200,205,213,0.06);}
.foot-base{border-top:1px solid var(--line);padding:34px 26px 44px;text-align:center;}
.foot-base img{height:24px;margin:0 auto 16px;display:block;}
.foot-base p{font-size:12px;color:var(--ink-faint);max-width:760px;margin:0 auto;line-height:1.75;}

/* ---------- Breadcrumb (product pages) ---------- */
.crumb{padding:34px 0 0;position:relative;z-index:2;}
.crumb .wrap{font-size:12.5px;color:var(--ink-faint);display:flex;gap:8px;align-items:center;}
.crumb a:hover{color:var(--ink);}

/* ---------- Feature rows (product pages) ---------- */
.feat-row{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;}
@media (max-width:900px){.feat-row{grid-template-columns:1fr;}}
.feat-row .txt h3{font-size:22px;color:#fff;margin-bottom:12px;}
.feat-row .txt p{font-size:14.5px;}
.feat-row ul{margin:16px 0 0;padding-left:18px;color:var(--ink-dim);font-size:14px;}
.feat-row li{margin-bottom:8px;}
.feat-row li b{color:var(--ink);}

/* ===== LIGHT THEME ===== */
html[data-theme="light"]{
  --bg:#F6F3EE; --bg2:#EFEAE2;
  --ink:#17181C; --ink-dim:#4A4E57; --ink-faint:#7A7E87;
  --line:rgba(20,20,25,0.10);
  --glass-bg:linear-gradient(160deg, rgba(255,255,255,0.82), rgba(255,255,255,0.55) 40%, rgba(255,255,255,0.42));
  --glass-border:rgba(20,20,25,0.12);
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(20,20,25,0.03);
  --uk-bg:#F6F3EE; --uk-bg-raise:#EFEAE2; --uk-ink:#17181C; --uk-ink-dim:#4A4E57; --uk-ink-faint:#7A7E87;
  --uk-line:rgba(20,20,25,0.10); --uk-glass-tint:rgba(255,255,255,0.6);
}
html[data-theme="light"] #mesh{opacity:.34;}
html[data-theme="light"] body::after{opacity:.03;}
html[data-theme="light"] .nav-pill{background:linear-gradient(160deg, rgba(255,255,255,0.85), rgba(246,243,238,0.8));border-color:rgba(20,20,25,0.12);box-shadow:0 14px 44px rgba(20,20,25,0.10), inset 0 1px 0 rgba(255,255,255,0.9);}
html[data-theme="light"] .hero h1,html[data-theme="light"] h2,html[data-theme="light"] h3,html[data-theme="light"] h4,html[data-theme="light"] .hero-badge{color:var(--ink);}
html[data-theme="light"] h1,html[data-theme="light"] .section-head h2{color:#17181C !important;}
html[data-theme="light"] .hero p.lead{color:#3C4048;}
html[data-theme="light"] .glass, html[data-theme="light"] .uk-glass{box-shadow:0 20px 50px rgba(20,20,25,0.10), var(--glass-highlight);}
html[data-theme="light"] .btn-glass{color:var(--ink);background:rgba(255,255,255,0.7);border-color:rgba(20,20,25,0.14);}
html[data-theme="light"] .btn-glass:hover{background:rgba(255,255,255,0.95);}
html[data-theme="light"] footer{background:rgba(246,243,238,0.85);}
html[data-theme="light"] .num b, html[data-theme="light"] .metric b{color:#17181C;}
html[data-theme="light"] .key, html[data-theme="light"] .dl, html[data-theme="light"] .pr{background:rgba(255,255,255,0.65);border-color:rgba(20,20,25,0.10);}
html[data-theme="light"] .key h5,html[data-theme="light"] .dl h5,html[data-theme="light"] .pr h5,html[data-theme="light"] .flow-item h4,html[data-theme="light"] .pstep h4,html[data-theme="light"] .fstep h4,html[data-theme="light"] .step h4{color:#17181C;}
html[data-theme="light"] .gate-svg .node,html[data-theme="light"] .gate-diagram .node{fill:#FFFFFF;stroke:rgba(20,20,25,0.2);}
html[data-theme="light"] .gate-svg .nl,html[data-theme="light"] .gate-diagram .node-label{fill:#17181C;}
html[data-theme="light"] .gate-svg .ns,html[data-theme="light"] .gate-diagram .node-sub{fill:#4A4E57;}
html[data-theme="light"] .cmp thead th{background:rgba(20,20,25,0.04);}
html[data-theme="light"] .status-demo thead th{background:rgba(20,20,25,0.04);}
html[data-theme="light"] .proof, html[data-theme="light"] .trust-strip, html[data-theme="light"] .ticker{background:rgba(246,243,238,0.8);}
html[data-theme="light"] .proof-row b{color:#2A2D33;}
html[data-theme="light"] .stage{box-shadow:0 -30px 90px rgba(232,128,42,0.10), 0 30px 70px rgba(20,20,25,0.18);}

/* ===== MOBILE NAV (shared) ===== */
.nav-burger{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;font-size:18px;line-height:1;margin-left:10px;}
@media (max-width:960px){.nav-burger{display:inline-flex;align-items:center;justify-content:center;}}
#mobileMenu{display:none;position:fixed;left:12px;right:12px;top:76px;z-index:70;border-radius:20px;padding:18px;background:var(--glass-bg);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid var(--glass-border);box-shadow:0 30px 80px rgba(0,0,0,0.55), var(--glass-highlight);}
#mobileMenu.open{display:block;}
#mobileMenu a{display:block;padding:13px 14px;border-radius:12px;font-size:15px;font-weight:600;color:var(--ink);}
#mobileMenu a:active,#mobileMenu a:hover{background:rgba(232,128,42,0.12);color:var(--orange-hot);}
html[data-theme="light"] #mobileMenu{background:rgba(255,255,255,0.92);}
html{scroll-padding-top:96px;}