/* Biizline — site-wide styles */
:root{
  --ink:#0E0E10;
  --ink-2:#1F2024;
  --slate:#5A5F6B;
  --slate-2:#878C97;
  --line:#E6E4DC;
  --line-2:#EFEDE5;
  --bg:#FAFAF7;
  --paper:#FFFFFF;
  --cream:#F4EFE2;
  --yellow:#F5B400;
  --hero-pad-y:60px;
  --section-pad-y:96px;
  --display-size:84px;
  --section-size:48px;
  --lede-size:19px;
}
/* === MOOD: editorial (default) is in :root above === */
body[data-mood="vivid"]{
  --ink:#0E0E10;
  --bg:#FFE8A0;
  --paper:#FFFFFF;
  --cream:#FFD27A;
  --line:#E8C44A;
  --line-2:#F0D770;
  --yellow:#0E0E10;
  --yellow-soft:#FFFFFF;
  --yellow-tint:#FFF6DA;
}
body[data-mood="vivid"] .nav{ background:rgba(255,232,160,.86); border-bottom-color:#E8C44A }
body[data-mood="vivid"] .btn-primary{ background:#0E0E10; color:#F5B400 }
body[data-mood="vivid"] .btn-soft{ background:#FFFFFF; color:#0E0E10; border-color:#0E0E10 }

body[data-mood="night"]{
  --ink:#F4F2EC;
  --ink-2:#D8D8D6;
  --slate:#A8A8A6;
  --slate-2:#7A7A78;
  --line:#26262A;
  --line-2:#1F1F23;
  --bg:#0E0E10;
  --paper:#16161A;
  --cream:#1C1A14;
  --yellow:#F5B400;
}
body[data-mood="night"] .nav{ background:rgba(14,14,16,.78); border-bottom-color:#26262A }
body[data-mood="night"] .btn-primary{ background:#F5B400; color:#0E0E10 }
body[data-mood="night"] .btn-soft{ background:transparent; color:#F4F2EC; border-color:#3A3A40 }
body[data-mood="night"] .card{ background:#16161A; border-color:#26262A; color:#F4F2EC }

/* === DENSITY === */
body[data-density="spacious"]{ --hero-pad-y:96px; --section-pad-y:128px; --display-size:96px; --section-size:54px; --lede-size:21px }
body[data-density="compact"]{ --hero-pad-y:32px; --section-pad-y:56px; --display-size:62px; --section-size:36px; --lede-size:16px }

/* === extra tokens (must remain on :root for cascade) === */
:root{
  --yellow-soft:#FFE9A6;
  --yellow-tint:#FFF6DA;
  --blue:#2A5BFF;
  --blue-tint:#EAF1FF;
  --blue-deep:#0B1F4E;
  --orange:#E8651A;
  --orange-tint:#FFEFE2;
  --green:#1F8A53;
  --green-tint:#E5F5EC;
  --rose:#C5364B;
  --rose-tint:#FBE7EA;
  --r-sm:8px;
  --r-md:14px;
  --r-lg:22px;
  --r-xl:32px;
  --shadow-1:0 1px 0 rgba(14,14,16,.04), 0 1px 2px rgba(14,14,16,.04);
  --shadow-2:0 1px 0 rgba(14,14,16,.04), 0 12px 32px -16px rgba(14,14,16,.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Geist","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  background-color:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.serif{font-family:"Instrument Serif","Times New Roman",serif;font-weight:400;font-style:normal;letter-spacing:-.01em}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* layout */
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.wrap-narrow{max-width:1080px;margin:0 auto;padding:0 32px}

/* nav */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(250,250,247,.82);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;gap:40px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:22px;letter-spacing:-.02em}
.brand-mark{width:32px;height:32px;display:grid;place-items:center}
.brand-name{display:flex;align-items:flex-end;line-height:.9}
.nav-links{display:flex;gap:28px;font-size:14.5px;color:var(--ink-2);font-weight:500}
.nav-links a{padding:6px 0;position:relative}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-22px;height:2px;background:var(--ink)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-cta a.ghost{font-size:14.5px;font-weight:500;color:var(--ink-2)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 22px;border-radius:999px;
  font-weight:600;font-size:14.5px;letter-spacing:-.01em;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn-lg{height:52px;padding:0 26px;font-size:15.5px}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#000;transform:translateY(-1px);box-shadow:0 8px 24px -10px rgba(0,0,0,.4)}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.btn-yellow:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(245,180,0,.6)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-soft{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-soft:hover{border-color:var(--ink)}
.btn .arrow{transition:transform .2s ease}
.btn:hover .arrow{transform:translateX(3px)}

/* shared */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"JetBrains Mono",monospace;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--yellow)}
.h-display{font-family:"Instrument Serif",serif;font-weight:400;line-height:1.02;letter-spacing:-.02em}
.h-section{font-family:"Instrument Serif",serif;font-weight:400;line-height:1.05;letter-spacing:-.015em;font-size:var(--section-size,54px)}
.h-display{font-size:var(--display-size,84px)}
.lede{font-size:var(--lede-size,18px);color:var(--slate);max-width:62ch;line-height:1.55}
.k{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--slate-2);letter-spacing:.08em}

/* section spacing */
section{padding:var(--section-pad-y,96px) 0;position:relative;transition:background-color .4s ease, color .4s ease}
.section-head{display:flex;flex-direction:column;gap:18px;margin-bottom:56px;max-width:780px}

/* hero brand mark eyes */
.eye{display:inline-block;width:.78em;height:.78em;border-radius:50%;background:var(--yellow);position:relative;vertical-align:middle;margin:0 .04em}
.eye::after{content:"";position:absolute;width:42%;height:42%;background:#000;border-radius:50%;top:18%;left:18%}

/* footer */
footer{background:var(--ink);color:#D8D8D6;padding:80px 0 32px;margin-top:80px}
footer h4{color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin:0 0 18px}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:14.5px}
footer ul a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:48px}
.foot-bottom{margin-top:64px;padding-top:24px;border-top:1px solid #2A2A2E;display:flex;justify-content:space-between;font-size:13px;color:#888}

/* utilities */
.row{display:flex}
.col{display:flex;flex-direction:column}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}.gap-32{gap:32px}.gap-48{gap:48px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}.mt-64{margin-top:64px}
.tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:999px;
  background:#fff;border:1px solid var(--line);
  font-size:12.5px;font-weight:500;color:var(--ink-2);
}
.tag.problem{background:var(--orange-tint);border-color:#F2CDA8;color:#7A3A0E}
.tag.solution{background:var(--blue-tint);border-color:#C9D8FB;color:#1B3A9A}
.tag.win{background:var(--green-tint);border-color:#B7E0C7;color:#185D38}
.tag.fail{background:var(--rose-tint);border-color:#EDC1C7;color:#7E1F2C}

/* card */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px}
.card-cream{background:var(--cream);border:1px solid #E6DDC0}

/* responsive */
@media (max-width: 980px){
  .h-section{font-size:40px}
  .nav-links{display:none}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  section{padding:72px 0}
  .wrap,.wrap-narrow{padding:0 20px}
}