/* ============================================================
   LIPIKA — components.css (COMPLETE REVISION)
   ============================================================ */

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 24px;border-radius:12px;
  font-weight:600;font-size:.95rem;line-height:1;
  border:1px solid transparent;white-space:nowrap;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s,border-color .25s;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--grad-accent);color:#FFF8F0;box-shadow:var(--shadow-accent)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(178,58,34,.4)}
.btn-secondary{border-color:var(--border-strong);color:var(--text);background:transparent}
.btn-secondary:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.btn-ghost{color:var(--text-muted)}
.btn-ghost:hover{color:var(--accent);background:var(--accent-soft)}
.btn-lg{padding:16px 32px;font-size:1.05rem;border-radius:14px}
.btn-sm{padding:8px 16px;font-size:.85rem;border-radius:9px}
.btn-block{width:100%}
.btn.is-loading{pointer-events:none;opacity:.85}
.btn.is-loading .btn-label{display:none}
.btn.is-loading::after{content:"";width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
.btn-secondary.is-loading::after{border-color:var(--border-strong);border-top-color:var(--accent)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Icon buttons ---------- */
.icon-btn{
  width:40px;height:40px;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-muted);border:1px solid transparent;
  transition:all .25s var(--ease);
}
.icon-btn:hover{color:var(--accent);background:var(--accent-soft);border-color:var(--border)}
.icon-btn svg{width:20px;height:20px}
[data-theme="dark"] .icon-toggle .i-moon{display:none}
:root:not([data-theme="dark"]) .icon-toggle .i-sun{display:none}

/* ---------- Badges & chips ---------- */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:999px;
  font-size:.8rem;font-weight:600;letter-spacing:.02em;
  background:var(--accent-soft);color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.badge-gold{background:var(--gold-soft);color:var(--gold);border-color:color-mix(in srgb,var(--gold) 30%,transparent)}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;
  background:var(--gold-soft);color:var(--gold);
}

/* ---------- Generic card ---------- */
.card{
  position:relative;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:100;
  background:var(--nav-bg);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color .3s,box-shadow .3s,background .3s;
}
.nav.is-scrolled{border-bottom-color:var(--border);box-shadow:0 6px 24px rgba(43,33,24,.07)}
.nav-inner{height:100%;display:flex;align-items:center;gap:24px}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{
  position:relative;padding:8px 13px;border-radius:9px;
  font-size:.92rem;font-weight:500;color:var(--text-muted);
  transition:color .3s var(--ease),background .3s var(--ease);
}
.nav-links a:hover{color:var(--text);background:var(--accent-soft)}
.nav-links a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;
  background:var(--grad-accent);border-radius:2px;
  transform:scaleX(0);transform-origin:center;
  transition:transform .35s var(--ease);
}
.nav-links a.active{color:var(--accent);font-weight:600}
.nav-links a.active::after{transform:scaleX(1)}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-search-btn{width:auto;padding:0 12px;gap:8px;border:1px solid var(--border);font-size:.82rem;color:var(--text-faint)}
.nav-search-btn kbd{font-family:var(--font-mono);font-size:.68rem;background:var(--kbd-bg);border:1px solid var(--border);border-radius:5px;padding:1px 5px;color:var(--text-muted)}

/* Burger */
.nav-burger{display:none;width:40px;height:40px;flex-direction:column;justify-content:center;align-items:center;gap:5px;border-radius:10px;z-index:101}
.nav-burger span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Overlay — heavy blur so content behind doesn't distract */
.nav-overlay{
  position:fixed;inset:0;z-index:90;
  background:rgba(20,14,8,.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
}
[data-theme="dark"] .nav-overlay{background:rgba(0,0,0,.6)}
.nav-overlay.show{opacity:1;pointer-events:auto}

/* Mobile slide-in panel — solid frosted glass, fully readable */
@media (max-width:900px){
  .nav-burger{display:flex}
  .nav-search-btn kbd{display:none}
  .nav-links{
    position:fixed;top:0;right:0;bottom:0;z-index:95;
    width:min(320px,84vw);margin:0;
    flex-direction:column;gap:4px;
    padding:calc(var(--nav-h) + 20px) 20px 24px;
    overflow-y:auto;
    background:rgba(250,246,238,.96);
    -webkit-backdrop-filter:blur(28px) saturate(1.6);
    backdrop-filter:blur(28px) saturate(1.6);
    border-left:1px solid var(--border);
    box-shadow:-24px 0 60px rgba(0,0,0,.25);
    transform:translateX(105%);
    transition:transform .4s var(--ease);
  }
  [data-theme="dark"] .nav-links{background:rgba(16,19,25,.97)}
  .nav-links.open{transform:translateX(0)}
  .nav-links a{padding:14px 16px;font-size:1.02rem;border-radius:11px}
  .nav-links a::after{display:none}
  .nav-links a.active{background:var(--accent-soft)}
  .nav-actions .nav-cta-label{display:none}
}

/* ---------- Hero ---------- */
.hero{position:relative;padding:calc(var(--nav-h) + 72px) 0 90px;overflow:hidden;background:var(--grad-soft)}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero-title .accent{
  background:var(--grad-accent);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hero-sub{font-size:1.15rem;max-width:520px;margin:22px 0 30px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px}
.hero-stats{display:flex;gap:32px;margin-top:40px;padding-top:26px;border-top:1px dashed var(--border-strong)}
.stat-mini .num{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.stat-mini .num em{font-style:normal;color:var(--accent)}
.stat-mini .lbl{font-size:.8rem;color:var(--text-faint);letter-spacing:.04em;text-transform:uppercase;margin-top:2px}

/* App window frame */
.app-window{
  position:relative;border-radius:var(--radius-l);overflow:hidden;
  background:var(--surface);border:1px solid var(--border-strong);
  box-shadow:var(--shadow-lg);
}
.win-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.win-bar .dot{width:11px;height:11px;border-radius:50%}
.win-bar .d-r{background:#E2574B}.win-bar .d-y{background:#E8B54A}.win-bar .d-g{background:#5FB97A}
.win-bar .win-title{margin-left:8px;font-size:.78rem;color:var(--text-faint);font-family:var(--font-mono)}
.win-body{padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.win-pane{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--bg)}
.win-pane .tag{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;display:block}
.win-pane.alt .tag{color:var(--gold)}
.win-pane p{font-size:.92rem;line-height:1.75;color:var(--text)}
.win-pane .odia-text{font-size:1rem}
.win-arrow{
  position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;
  background:var(--grad-accent);color:#FFF8F0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-accent);z-index:2;
}
.hero-art{position:relative}
.hero-art .app-window{animation:drift-y 9s ease-in-out infinite}
.float-chip{
  position:absolute;z-index:3;display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:9px 14px;font-size:.8rem;font-weight:600;box-shadow:var(--shadow-lg);
}
.float-chip svg{width:15px;height:15px;color:var(--accent)}
.chip-a{top:-16px;right:-14px;animation:drift-y 6s ease-in-out infinite}
.chip-b{bottom:-14px;left:-18px;animation:drift-y 7.5s ease-in-out infinite;animation-delay:-2.5s}
@keyframes drift-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ---------- Problem / feature cards ---------- */
.problem-card .p-num{
  font-family:var(--font-odia);font-size:1rem;font-weight:700;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold-soft);color:var(--gold);margin-bottom:18px;
}
.feature-card .fc-icon{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);
  margin-bottom:18px;transition:transform .35s var(--ease),background .3s,color .3s;
}
.feature-card:hover .fc-icon{transform:scale(1.08) rotate(-3deg);background:var(--grad-accent);color:#FFF8F0}
.feature-card h3{font-size:1.13rem;margin-bottom:8px}
.feature-card p{font-size:.93rem}
.feature-card::before{
  content:"";position:absolute;top:0;left:22px;right:22px;height:2.5px;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 8px,var(--gold) 8px 16px,var(--ink) 16px 21px);
  opacity:0;transform:scaleX(.5);transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.feature-card:hover::before{opacity:.6;transform:scaleX(1)}

/* ---------- Showcase bullets ---------- */
.showcase-bullets{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.showcase-bullets li{
  display:flex;align-items:center;gap:8px;font-size:.87rem;font-weight:500;color:var(--text-muted);
  border:1px solid var(--border);border-radius:999px;padding:8px 16px;background:var(--surface);
}
.showcase-bullets svg{width:15px;height:15px;color:var(--success)}

/* ============================================================
   TIMELINE — scroll-linked filling line + gradient markers
   ============================================================ */
.timeline{
  position:relative;max-width:640px;margin:0 auto;padding-left:8px;
  --tl-x:25px;--tl-progress:0;
}
/* Dashed base line */
.timeline::before{
  content:"";position:absolute;left:var(--tl-x);top:14px;bottom:14px;
  border-left:2px dashed var(--border-strong);
}
/* Solid gradient line that fills 1:1 with scroll (set by main.js) */
.timeline::after{
  content:"";position:absolute;left:calc(var(--tl-x) - 1px);top:14px;
  width:2px;border-radius:2px;background:var(--grad-accent);
  height:calc((100% - 28px) * var(--tl-progress));
  box-shadow:0 0 12px var(--accent-soft);
}
.tl-item{position:relative;display:flex;gap:26px;padding:22px 0}
.tl-marker{
  flex:none;width:52px;height:52px;border-radius:50%;z-index:1;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-odia);font-size:1.3rem;font-weight:700;
  background:var(--surface);
  border:2px solid var(--border-strong);color:var(--text-faint);
  box-shadow:0 0 0 6px var(--bg);
  position:relative;overflow:hidden;
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease);
}
/* Gradient fill layer */
.tl-marker::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--grad-accent);
  transform:scale(0);
  transition:transform .6s var(--ease);
}
.tl-marker span{position:relative;z-index:1;transition:color .35s var(--ease) .15s}
/* Active state (toggled by main.js as the line reaches each step) */
.tl-item.is-active .tl-marker{
  border-color:var(--accent);
  box-shadow:0 0 0 6px var(--bg),var(--shadow-accent);
  transform:scale(1.05);
}
.tl-item.is-active .tl-marker::before{transform:scale(1)}
.tl-item.is-active .tl-marker span{color:#FFF8F0}
.tl-content{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.tl-item:not(.is-active) .tl-content{opacity:.5;transform:translateX(-6px)}
.tl-item.is-active .tl-content{opacity:1;transform:translateX(0)}
.tl-content h3{font-size:1.15rem;margin-bottom:6px}
.tl-content p{font-size:.95rem}

/* ---------- Performance counters ---------- */
.stat-card{text-align:center;padding:36px 24px}
.stat-card .stat-icon{
  width:64px;height:64px;margin:0 auto 18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-odia);font-size:1.6rem;font-weight:700;
  background:var(--accent-soft);color:var(--accent);
  border:1.5px solid color-mix(in srgb,var(--accent) 28%,transparent);
  position:relative;
}
.stat-card .stat-icon::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px dotted color-mix(in srgb,var(--gold) 45%,transparent);
  animation:konark-spin 40s linear infinite;
}
.stat-num{font-size:2.5rem;font-weight:800;letter-spacing:-.03em;color:var(--text)}
.stat-num .suffix{color:var(--accent);font-size:1.6rem;margin-left:2px}
.stat-card .lbl{color:var(--text-muted);font-size:.92rem;margin-top:6px}

/* ---------- Doc preview cards ---------- */
.doc-card{display:flex;flex-direction:column;gap:10px;padding:24px}
.doc-card .dc-icon{color:var(--accent);width:26px;height:26px}
.doc-card h3{font-size:1.05rem}
.doc-card p{font-size:.88rem;flex:1}
.doc-card .dc-link{font-size:.85rem;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:6px;transition:gap .25s var(--ease)}
.doc-card:hover .dc-link{gap:10px}

/* ---------- Pricing cards ---------- */
.plan-card{display:flex;flex-direction:column;padding:34px 30px;text-align:left}
.plan-card .plan-name{font-size:.85rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.plan-price{display:flex;align-items:baseline;gap:6px;margin:14px 0 4px}
.plan-price .cur{font-size:1.3rem;font-weight:700;color:var(--text-muted)}
.plan-price .amt{font-size:3rem;font-weight:800;letter-spacing:-.04em}
.plan-price .per{color:var(--text-faint);font-size:.9rem}
.plan-desc{font-size:.9rem;margin-bottom:20px}
.plan-features{display:flex;flex-direction:column;gap:11px;margin-bottom:26px;flex:1}
.plan-features li{display:flex;gap:10px;font-size:.92rem;color:var(--text-muted)}
.plan-features svg{width:17px;height:17px;flex:none;color:var(--success);margin-top:3px}
.plan-card.is-popular{
  border-color:var(--accent);box-shadow:var(--shadow-accent);
  transform:scale(1.03);
  background:linear-gradient(180deg,var(--accent-soft),var(--surface) 42%);
}
.plan-card.is-popular:hover{transform:scale(1.03) translateY(-5px)}
.plan-card.is-selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),var(--shadow-lg)}
.popular-tag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--grad-accent);color:#FFF8F0;
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 16px;border-radius:999px;box-shadow:var(--shadow-accent);white-space:nowrap;
}

/* ---------- Roadmap ---------- */
.roadmap-card{border-style:dashed;border-color:var(--border-strong);background:var(--surface-2);box-shadow:none}
.roadmap-card:hover{box-shadow:var(--shadow-sm);border-color:var(--gold)}
.roadmap-card .rc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.roadmap-card .rc-icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--gold-soft);color:var(--gold)}
.roadmap-card .rc-icon svg{width:20px;height:20px}
.roadmap-card h3{font-size:1.02rem;margin-bottom:6px}
.roadmap-card p{font-size:.87rem}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:0 auto}
.faq-item{
  border:1px solid var(--border);border-radius:14px;
  background:var(--surface);margin-bottom:12px;overflow:hidden;
  transition:border-color .3s,box-shadow .3s;
}
.faq-item.open{border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 22px;text-align:left;font-weight:600;font-size:1rem;color:var(--text);
}
.faq-q .faq-plus{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);
  transition:transform .35s var(--ease),background .3s,color .3s;
}
.faq-q .faq-plus svg{width:14px;height:14px}
.faq-item.open .faq-plus{transform:rotate(45deg);background:var(--grad-accent);color:#FFF8F0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.faq-a-inner{padding:0 22px 20px;font-size:.94rem;color:var(--text-muted)}

/* ---------- CTA banner ---------- */
.cta-banner{
  position:relative;overflow:hidden;text-align:center;
  border-radius:var(--radius-l);
  background:var(--grad-accent);
  color:#FFF8F0;padding:72px 40px;
  box-shadow:var(--shadow-accent);
}
.cta-banner h2{color:#FFF8F0}
.cta-banner p{color:rgba(255,248,240,.85);max-width:520px;margin:14px auto 30px}
.cta-banner .konark{color:#FFF8F0;opacity:.14;width:420px;left:-140px;top:-140px}
.cta-banner .konark.k2{left:auto;right:-120px;top:auto;bottom:-160px}
.cta-banner .btn-light{background:#FFF8F0;color:var(--accent-deep)}
.cta-banner .btn-light:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.25)}
.cta-banner .btn-outline-light{border-color:rgba(255,248,240,.5);color:#FFF8F0}
.cta-banner .btn-outline-light:hover{background:rgba(255,248,240,.14)}

/* ---------- Footer ---------- */
.footer{position:relative;border-top:1px solid var(--border);background:var(--bg-soft);padding:72px 0 0;overflow:hidden}
.footer .konark{width:340px;right:-110px;bottom:-160px;color:var(--gold);opacity:.06}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;position:relative;z-index:1}
.footer-brand p{font-size:.92rem;max-width:300px;margin-top:14px}
.footer-col h4{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:16px}
.footer-col li{margin-bottom:10px}
.footer-col a{font-size:.92rem;color:var(--text-muted);transition:color .2s}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{
  margin-top:56px;padding:22px 0;position:relative;z-index:1;
  border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  font-size:.82rem;color:var(--text-faint);
}
.footer-bottom .ver{font-family:var(--font-mono);color:var(--gold)}

/* ---------- Forms ---------- */
.field{margin-bottom:20px}
.field label{display:block;font-size:.88rem;font-weight:600;margin-bottom:8px}
.field label .req{color:var(--accent)}
.input,.select,.textarea{
  width:100%;padding:13px 16px;border-radius:12px;
  background:var(--surface);border:1.5px solid var(--border);
  color:var(--text);font-size:.95rem;
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.textarea{min-height:150px;resize:vertical}
.input:hover,.select:hover,.textarea:hover{border-color:var(--border-strong)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.field.invalid .input,.field.invalid .textarea,.field.invalid .select{border-color:#D64545;box-shadow:0 0 0 4px rgba(214,69,69,.12)}
.field-error{display:none;font-size:.8rem;color:#D64545;margin-top:6px}
.field.invalid .field-error{display:block}
.check-row{display:flex;gap:10px;align-items:flex-start;font-size:.87rem;color:var(--text-muted)}
.check-row input{margin-top:3px;accent-color:var(--accent);width:16px;height:16px}

/* ---------- Search modal ---------- */
.search-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:12vh 20px 20px}
.search-modal[hidden]{display:none}
.search-backdrop{position:absolute;inset:0;background:rgba(18,12,6,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.search-panel{
  position:relative;width:min(600px,100%);
  background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--radius-l);box-shadow:var(--shadow-lg);overflow:hidden;
}
.search-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border)}
.search-head svg{width:19px;height:19px;color:var(--text-faint);flex:none}
.search-head input{flex:1;border:none;background:none;font-size:1rem;color:var(--text)}
.search-head input:focus{outline:none}
.search-head kbd{font-family:var(--font-mono);font-size:.7rem;background:var(--kbd-bg);border:1px solid var(--border);border-radius:6px;padding:2px 7px;color:var(--text-faint)}
.search-results{max-height:340px;overflow-y:auto;padding:10px}
.search-result{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;font-size:.93rem;color:var(--text-muted)}
.search-result svg{width:16px;height:16px;color:var(--text-faint);flex:none}
.search-result .crumb{margin-left:auto;font-size:.72rem;color:var(--text-faint);font-family:var(--font-mono)}
.search-result:hover,.search-result.is-active{background:var(--accent-soft);color:var(--text)}
.search-result:hover svg,.search-result.is-active svg{color:var(--accent)}
.search-empty{padding:28px;text-align:center;color:var(--text-faint);font-size:.9rem}
.search-footer{padding:10px 20px;border-top:1px solid var(--border);font-size:.72rem;color:var(--text-faint);display:flex;gap:16px}
.search-footer kbd{font-family:var(--font-mono);background:var(--kbd-bg);border:1px solid var(--border);border-radius:4px;padding:1px 5px}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;padding:32px;background:rgba(15,10,5,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lightbox[hidden]{display:none}
.lightbox-img{max-width:min(920px,100%);max-height:80vh;border-radius:14px;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px rgba(0,0,0,.5);background:var(--surface)}
.lightbox-cap{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(255,250,240,.8);font-size:.85rem}
.lightbox-close{
  position:absolute;top:22px;right:26px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,250,240,.1);color:#FFF8F0;font-size:1.4rem;
  display:flex;align-items:center;justify-content:center;transition:background .2s;
}
.lightbox-close:hover{background:rgba(255,250,240,.22)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:220;
  background:var(--text);color:var(--bg);
  padding:12px 22px;border-radius:999px;font-size:.88rem;font-weight:600;
  box-shadow:var(--shadow-lg);display:flex;gap:9px;align-items:center;
}
.toast svg{width:16px;height:16px}

/* ---------- Tables / kbd / code / callouts ---------- */
kbd.k{
  display:inline-block;font-family:var(--font-mono);font-size:.78rem;
  background:var(--kbd-bg);border:1px solid var(--border-strong);border-bottom-width:2.5px;
  border-radius:7px;padding:2px 8px;color:var(--text);
}
.code-block{
  background:var(--code-bg);border:1px solid var(--border);border-radius:12px;
  padding:16px 18px;font-size:.85rem;overflow-x:auto;line-height:1.7;
}
.callout{
  display:flex;gap:12px;padding:15px 18px;border-radius:12px;
  border:1px solid var(--border);border-left:3px solid var(--gold);
  background:var(--gold-soft);font-size:.9rem;color:var(--text-muted);
}
.callout svg{width:18px;height:18px;flex:none;color:var(--gold);margin-top:2px}
.callout-warn{border-left-color:var(--accent);background:var(--accent-soft)}
.callout-warn svg{color:var(--accent)}
.callout strong{color:var(--text)}
.doc-table{width:100%;border-collapse:collapse;font-size:.9rem}
.doc-table th,.doc-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border)}
.doc-table th{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.doc-table tr:hover td{background:var(--accent-soft)}

/* Docs page mini Konark ticks also spin */
.docs-main h2::before{animation:konark-spin 30s linear infinite}


/* ============================================================
   MOBILE NAV FIX — append at END of components.css (overrides
   earlier mobile rules via cascade). Panel sits below the bar,
   burger stays clickable, links always readable.
   ============================================================ */
@media (max-width:900px){
  .nav{z-index:130}
  .nav-overlay{z-index:110}
  .nav-links{
    z-index:120;
    display:flex;
    visibility:hidden;pointer-events:none;
    transform:translateX(105%);
    background:var(--surface); /* solid fallback */
    background:color-mix(in srgb, var(--surface) 94%, transparent);
    -webkit-backdrop-filter:blur(24px) saturate(1.5);
    backdrop-filter:blur(24px) saturate(1.5);
    box-shadow:-24px 0 60px rgba(0,0,0,.28);
    overscroll-behavior:contain;
    transition:transform .45s var(--ease), visibility 0s linear .45s;
  }
  .nav-links.open{
    visibility:visible;pointer-events:auto;
    transform:translateX(0);
    transition:transform .45s var(--ease);
  }
  .nav-links a{color:var(--text-muted);font-size:1.05rem;padding:14px 16px;border-radius:11px}
  .nav-links a:hover{color:var(--text);background:var(--accent-soft)}
  .nav-links a.active{color:var(--accent);background:var(--accent-soft);font-weight:600}
}

/* ============================================================
   TIMELINE STACKING FIX — append at END of components.css
   Order: dashed base (0) → progress line (1) → steps (2+)
   ============================================================ */
.timeline::before{ z-index:0; }
.timeline::after{ z-index:1; }
.tl-item{ position:relative; z-index:2; }
.tl-marker{ position:relative; z-index:3; }

/* ============================================================
   TIMELINE CENTER-LINE FIX — append at END of components.css
   Line x-position is now derived from the marker itself,
   so it always passes through the exact centre of the circles.
   (Doubled selector = higher specificity, wins over older rules
   in components.css AND responsive.css)
   ============================================================ */
.timeline.timeline{
  --tl-pad:8px;          /* timeline padding-left   */
  --tl-marker:52px;      /* marker diameter (desktop) */
  --tl-x:calc(var(--tl-pad) + (var(--tl-marker) / 2));
  padding-left:var(--tl-pad);
}
.timeline.timeline::before,
.timeline.timeline::after{
  left:calc(var(--tl-x) - 1px);   /* 2px line centred on --tl-x */
}
.timeline.timeline::before{ border-left-width:2px; }
.timeline.timeline::after{ width:2px; }

@media (max-width:767px){
  .timeline.timeline{ --tl-marker:44px; }  /* mobile marker size */
}