/* ============================================================
   LIPIKA — main.css (COMPLETE REVISION)
   Tokens, base, layout, cultural motifs
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --bg:#FAF6EE; --bg-soft:#F3ECDD; --surface:#FFFDF8; --surface-2:#FBF4E7;
  --text:#241C12; --text-muted:#6E6052; --text-faint:#9A8B79;
  --border:#E8DCC6; --border-strong:#D8C6A6;
  --accent:#B23A22; --accent-deep:#8F2B14; --accent-2:#D97E1E;
  --gold:#B8891F; --copper:#A8672F; --ink:#2B2118;
  --accent-soft:rgba(178,58,34,.08); --gold-soft:rgba(184,137,31,.13);
  --line-faint:rgba(43,33,24,.07); --loom:rgba(43,33,24,.05);
  --nav-bg:rgba(250,246,238,.82);
  --code-bg:#F2E9D7; --kbd-bg:#FFFDF8; --success:#2E7D4F;
  --grad-accent:linear-gradient(135deg,#B23A22 0%,#D97E1E 100%);
  --grad-soft:linear-gradient(180deg,var(--bg) 0%,var(--bg-soft) 100%);
  --shadow-sm:0 1px 2px rgba(43,33,24,.05),0 4px 14px rgba(43,33,24,.06);
  --shadow-lg:0 10px 30px rgba(43,33,24,.12),0 2px 8px rgba(43,33,24,.06);
  --shadow-accent:0 10px 28px rgba(178,58,34,.28);
  --radius-s:10px; --radius:16px; --radius-l:24px;
  --nav-h:68px;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-odia:'Noto Serif Odia',serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
[data-theme="dark"]{
  --bg:#101319; --bg-soft:#141924; --surface:#171D28; --surface-2:#1D2432;
  --text:#EDE6D8; --text-muted:#ABA08D; --text-faint:#7E7462;
  --border:#272F3E; --border-strong:#374153;
  --accent:#D96C4A; --accent-deep:#E88663; --accent-2:#E09A45;
  --gold:#C9A24B; --copper:#B87344; --ink:#0B0D12;
  --accent-soft:rgba(217,108,74,.12); --gold-soft:rgba(201,162,75,.12);
  --line-faint:rgba(237,230,216,.055); --loom:rgba(237,230,216,.045);
  --nav-bg:rgba(16,19,25,.8);
  --code-bg:#0C0F16; --kbd-bg:#1F2634; --success:#5FBF85;
  --grad-accent:linear-gradient(135deg,#C24E2E 0%,#D98A33 100%);
  --grad-soft:linear-gradient(180deg,var(--bg) 0%,var(--bg-soft) 100%);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.35);
  --shadow-lg:0 14px 36px rgba(0,0,0,.5);
  --shadow-accent:0 10px 28px rgba(217,108,74,.22);
}
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after{
  transition:background-color .35s ease,border-color .35s ease,color .35s ease,box-shadow .35s ease,fill .35s ease !important;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);background:var(--bg);color:var(--text);
  line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--accent);color:#FFF8F0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--copper)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Typography ---------- */
h1,h2,h3,h4{line-height:1.15;font-weight:700;letter-spacing:-.02em;color:var(--text)}
h1{font-size:clamp(2.6rem,5.6vw,4.35rem);font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:1.35rem}
h4{font-size:1.05rem;letter-spacing:-.01em}
p{color:var(--text-muted)}
.odia-text{font-family:var(--font-odia)}
code,kbd,pre{font-family:var(--font-mono)}
strong{color:var(--text);font-weight:600}
[id]{scroll-margin-top:calc(var(--nav-h) + 28px)}

/* ---------- Layout ---------- */
.container{width:min(1180px,100% - 48px);margin-inline:auto}
.section{position:relative;padding:96px 0}
.section-tight{padding:64px 0}
.section-head{max-width:640px;margin:0 auto 56px;text-align:center}
.section-head.left{margin-left:0;text-align:left}
.section-sub{font-size:1.075rem;margin-top:14px}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.eyebrow .filigree{width:26px;height:14px;color:var(--gold);flex:none}

/* ---------- Page transitions ---------- */
main{animation:page-in .55s var(--ease) both}
@keyframes page-in{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
body.page-leaving main{
  opacity:0;transform:translateY(-10px);
  transition:opacity .26s ease,transform .26s ease;
}

/* ============================================================
   KONARK CHAKRA
   Rotation is applied to the INNER layers (spokes + bead ring),
   never to the positioned .konark element itself — so wheels
   stay exactly where placed while spinning. EVERY wheel spins.
   ============================================================ */
.konark{
  position:absolute;border-radius:50%;
  border:2px solid currentColor;
  color:var(--accent);opacity:.05;
  pointer-events:none;user-select:none;aspect-ratio:1;
}
/* Bead ring — spinning dotted border = moving carved beads */
.konark::before{
  content:"";position:absolute;inset:5%;
  border-radius:50%;border:5px dotted currentColor;opacity:.85;
  animation:konark-spin 90s linear infinite;
}
/* Spoke field — spins */
.konark .konark-spokes{
  position:absolute;inset:10.5%;border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg,    currentColor 0deg 4.6deg, transparent 4.6deg 45deg),
    repeating-conic-gradient(from 11.25deg,currentColor 0deg 1.3deg, transparent 1.3deg 22.5deg);
  -webkit-mask-image:radial-gradient(circle,transparent 0 13%,#000 13.5% 100%);
          mask-image:radial-gradient(circle,transparent 0 13%,#000 13.5% 100%);
  animation:konark-spin 90s linear infinite;
}
/* Hub — static, concentric rings */
.konark .konark-hub{
  position:absolute;inset:37.5%;border-radius:50%;
  border:2px solid currentColor;
}
.konark .konark-hub::before{content:"";position:absolute;inset:20%;border-radius:50%;border:1.5px solid currentColor}
.konark .konark-hub::after{content:"";position:absolute;inset:43%;border-radius:50%;background:currentColor}
.konark--gold{color:var(--gold)}
@keyframes konark-spin{to{transform:rotate(360deg)}}

/* ---------- Floating Odia glyphs ---------- */
.glyph-field{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.glyph{
  position:absolute;left:var(--x,50%);top:var(--y,50%);
  font-family:var(--font-odia);font-weight:600;
  font-size:var(--size,110px);color:var(--accent);opacity:var(--op,.04);
  animation:glyph-float var(--dur,16s) ease-in-out var(--delay,0s) infinite alternate;
  will-change:transform;
}
[data-theme="dark"] .glyph{color:var(--gold)}
@keyframes glyph-float{
  0%{transform:translate3d(0,0,0) rotate(var(--rot,0deg))}
  100%{transform:translate3d(var(--dx,0px),var(--dy,-26px),0) rotate(calc(var(--rot,0deg) + 6deg))}
}

/* ---------- Cultural textures ---------- */
.texture-palm{position:relative}
.texture-palm::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 30px,var(--line-faint) 30px 31px);
  -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);
          mask-image:linear-gradient(180deg,#000 60%,transparent);
}
.texture-loom{
  background-image:
    repeating-linear-gradient(45deg,var(--loom) 0 1px,transparent 1px 16px),
    repeating-linear-gradient(-45deg,var(--loom) 0 1px,transparent 1px 16px);
}
.patta-edge{position:relative}
.patta-edge::after{
  content:"";position:absolute;left:12%;right:12%;bottom:-1px;height:3px;border-radius:3px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 10px,var(--gold) 10px 20px,var(--ink) 20px 26px,var(--accent-2) 26px 36px);
  opacity:0;transform:scaleX(.6);transform-origin:center;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.patta-edge:hover::after,.patta-edge.patta-static::after{opacity:.55;transform:scaleX(1)}
.wave-divider{display:block;width:100%;height:64px;color:var(--accent);opacity:.22;margin:0 auto;max-width:900px}
.wave-divider svg{width:100%;height:100%}

/* ---------- Utilities ---------- */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.center{text-align:center}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-40{margin-top:40px}
.muted{color:var(--text-muted)}
.link-accent{color:var(--accent);font-weight:600}
.link-accent:hover{color:var(--accent-deep);text-decoration:underline}

/* ---------- Logo: image only, no text ---------- */
.nav-logo{display:flex;align-items:center;gap:0;flex-shrink:0}
.nav-logo img{height:36px;width:auto}
.nav-logo span,.nav-logo .odia-mark{display:none !important}
.footer-brand .nav-logo img{height:32px}
.footer-brand .nav-logo{margin-bottom:4px}

/* ---------- Hero chakra positioning (uses translate property,
              keeps JS parallax transform working) ---------- */
.hero .konark{width:min(760px,72vw);right:-220px;top:50%;translate:0 -50%}

/* ---------- Trusted section — redesigned ---------- */
.trusted{position:relative;padding:52px 0;border-block:1px solid var(--border);background:var(--surface);overflow:hidden}
.trusted .lbl{
  text-align:center;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:26px;font-weight:600;
}
.trusted-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.trust-mark{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 22px;border-radius:999px;
  border:1px solid var(--border);background:var(--bg);
  font-size:.9rem;font-weight:600;color:var(--text-muted);
  box-shadow:var(--shadow-sm);white-space:nowrap;
  transition:transform .3s var(--ease),border-color .3s,color .3s,box-shadow .3s;
}
/* Bandha-diamond accent dot */
.trust-mark::before{
  content:"";width:7px;height:7px;flex:none;
  background:var(--grad-accent);border-radius:2px;
  transform:rotate(45deg);opacity:.85;
}
.trust-mark:hover{transform:translateY(-3px);border-color:var(--border-strong);color:var(--text);box-shadow:var(--shadow-lg)}
.trust-mark .odia-text{display:none !important}

/* ---------- Showcase: gif flush inside window frame ---------- */
.showcase-frame{max-width:880px;margin:0 auto;position:relative}
.showcase-frame .app-window{border-radius:var(--radius-l);overflow:hidden}
.showcase-frame img{
  width:100%;height:auto;display:block;
  background:var(--bg-soft);
  /* no aspect-ratio, no object-fit, no padding — sits flush */
}

/* ---------- CTA banner: single chakra on mobile ---------- */
@media (max-width:767px){
  .cta-banner .k2{display:none !important}
  .cta-banner .konark{
    width:320px !important;left:50% !important;top:50% !important;
    right:auto !important;bottom:auto !important;
    translate:-50% -50%;opacity:.09;
  }
}