/* =====================================================================
   Sarsha: main navigation with mega menus (shared by every page)
   Link this after styles.css:  <link rel="stylesheet" href="nav.css">
   ===================================================================== */
.links{align-items:center;gap:0}
.links > li > a{padding:.5rem .45rem;font-size:.9rem;display:flex;align-items:center;gap:.2rem;white-space:nowrap}
.links a::after{left:.45rem;right:.45rem}
.links .caret{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;opacity:.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.links li.mega-li{position:static}
.links li.mega-li:hover > a .caret,.links li.mega-li:focus-within > a .caret{transform:rotate(180deg)}
.links li.mega-li:hover > a,.links li.mega-li:focus-within > a{background:var(--mist)}
.links li.mega-li:hover > a::after,.links li.mega-li:focus-within > a::after{transform:scaleX(1)}
.nav-in{gap:1rem}
.nav-cta{white-space:nowrap;flex:none}
.brand{flex:none}
.bs{white-space:nowrap}
@media(max-width:1480px) and (min-width:1301px){.nav .brand .bs{display:none}}

.mega{position:absolute;left:50%;top:100%;width:min(1180px,calc(100vw - 40px));transform:translate(-50%,12px);
  background:#fff;border:1px solid var(--rule);border-radius:24px;box-shadow:0 40px 80px -30px rgba(19,42,56,.45);
  padding:1.4rem;display:grid;gap:1.2rem;opacity:0;visibility:hidden;z-index:5;
  transition:opacity .25s,transform .35s var(--ease),visibility .25s}
.mega::before{content:"";position:absolute;left:0;right:0;top:-19px;height:19px}
.links li.mega-li:hover .mega,.links li.mega-li:focus-within .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega.c4{grid-template-columns:1.1fr 1fr 1fr 1fr}
.mega.c3{grid-template-columns:1.1fr 1fr 1fr}
.mega ul{list-style:none;display:grid;gap:.1rem;align-content:start}
.mega h5{font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.16em;color:var(--teal);margin:.2rem 0 .5rem .65rem;font-weight:700}
.links .mega a{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem .65rem;border-radius:12px;font-weight:700;font-size:.92rem;color:var(--ink);line-height:1.25;white-space:normal}
.links .mega a::after{display:none}
.links .mega a small{display:block;font-weight:400;font-size:.8rem;color:var(--ink-faint);margin-top:.15rem}
.links .mega a:hover{background:var(--mist);color:var(--teal-hi)}
.mega .mi{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--a,#0E9B86),var(--b,#2563EB))}
.mega .mi svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.links .mega a.mfeat{display:flex;flex-direction:column;justify-content:flex-end;gap:0;min-height:230px;height:100%;padding:1.3rem;border-radius:18px;
  color:#fff;position:relative;overflow:hidden;background:linear-gradient(140deg,#0B6B60,#1D4ED8 60%,#6D28D9)}
.links .mega a.mfeat.v2{background:linear-gradient(140deg,#1D4ED8,#6D28D9 55%,#BE185D)}
.links .mega a.mfeat.v3{background:linear-gradient(140deg,#6D28D9,#BE185D 55%,#0B8071)}
.links .mega a.mfeat:hover{color:#fff;filter:saturate(1.15)}
.links .mega a.mfeat::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-70px;top:-70px;background:radial-gradient(circle,rgba(95,224,192,.5),transparent 70%)}
.mfeat .fk{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.16em;color:#5FE0C0;font-weight:700}
.mfeat b{font-family:Fraunces,Georgia,serif;font-weight:400;font-size:1.4rem;line-height:1.15;display:block;margin:.35rem 0 .4rem}
.links .mega a.mfeat small{color:rgba(255,255,255,.82);font-size:.84rem}
.mfeat .go{margin-top:.9rem;font-size:.82rem;font-weight:700;display:inline-flex;align-items:center;gap:.35rem;color:#fff}
.mega .mfoot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;justify-content:space-between;
  border-top:1px solid var(--rule);padding:1rem .65rem 0;font-size:.88rem;color:var(--ink-dim)}
.links .mega .mfoot a{display:inline-flex;padding:.5rem 1rem;border-radius:999px;background:var(--ink);color:#fff;font-size:.85rem}
.links .mega .mfoot a:hover{background:var(--teal-hi);color:#fff}

/* mobile menu with collapsible groups */
.mnav details{border-bottom:1px solid var(--rule)}
.mnav summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:.85rem 0;
  font-family:Fraunces,serif;font-size:1.4rem}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:"+";font-family:Karla,sans-serif;font-size:1.4rem;color:var(--teal);transition:transform .3s}
.mnav details[open] summary::after{transform:rotate(45deg)}
.mnav details ul{padding:0 0 .8rem .2rem!important}
.mnav details li a{font-family:Karla,sans-serif!important;font-size:1rem!important;padding:.55rem 0!important;border-bottom:0!important;color:var(--ink-dim)}
.mnav .mn-top{list-style:none;padding-top:1rem}
.mnav{overflow-y:auto!important}

/* eight menu items need more room: switch to the burger a little earlier */
@media(max-width:1300px){
  .links,.nav-cta{display:none}
  .burger{display:block}
  .mnav{display:block;position:absolute;left:0;right:0;top:100%;background:rgba(255,255,255,.98);
    backdrop-filter:blur(20px);border-bottom:1px solid var(--rule);max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
  .site-head.open .mnav{max-height:80vh}
  .mnav .btn{margin:1.2rem 0 1.5rem;width:100%}
}
.brand .logo-img{border-radius:11px;display:block;transition:transform .6s var(--ease)}.brand:hover .logo-img{transform:rotate(-8deg) scale(1.06)}


/* tighter layout: no dash before section labels, less space between sections */
.kick::before{display:none!important}
.kick{gap:0}
section{padding-block:clamp(2.4rem,4.5vw,3.8rem)}
.head{margin-bottom:clamp(1.4rem,3vw,2.2rem)}


/* Clean look: no decorative lines, dashes, dots, counters or stat numbers */
.nav::after,.site-foot::before,.fcols h4::before,.tb-item::after,.kick::before,.hero-chips span::before,.chipset button::before,.ind a::before,.tstep+.tstep::before,.proc::before,.ln::before,.prompt::before,.wc::after,.step::before{display:none!important}
.tele,.counts,.p-num,.bss-lab small,.ob-num,.metric,.no,.stats,.loop-pills a span,.wn small,.hw .n,.pc .dot,.chipset button span,.crumbs{display:none!important}
.step{grid-template-columns:1fr!important}
.ent-add{border-top:0!important}
.note{border-left:0!important}
.plan.pro{border-top:1px solid var(--rule)!important}
.mq-track span::after{display:none!important}
.mq-track span{margin-right:3rem}

/* ===== v3: no lines anywhere, bold visible labels, colourful brand line, richer footer ===== */
/* remove every decorative line or bar */
.kick::before,.kick::after,.links a::after,.nav::after,.site-foot::before,.fcols h4::before,.tb-item::after,
.ln::before,.cap li::before,.wc::after,.prompt::before,.composer::before,.proc::before,.tstep+.tstep::before,
.stats .grid::before,.mfeat::after{display:none!important;content:none!important}
.links a.active,.links li.mega-li:hover > a,.links li.mega-li:focus-within > a{background:var(--mist)}
.links a.active{color:var(--teal-hi);font-weight:800}
.fbottom,.mega .mfoot{border-top:0!important}
.ent-add{border-top:0!important}.note{border-left:0!important}
.plan.pro{border-top:1px solid var(--rule)!important}
.cap li{padding-left:0}

/* section labels: large, bold and colourful */
.kick{font-family:Karla,system-ui,sans-serif!important;font-size:clamp(1rem,1.4vw,1.2rem)!important;font-weight:800!important;
  letter-spacing:.12em!important;gap:0!important;margin-bottom:.8rem!important;
  background:linear-gradient(100deg,#059669,#2563EB 50%,#9333EA);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.site-foot .kick,.fcta .kick,.band .kick,.protect .kick,.tailor .kick,.smodel h4,.door h4{
  background:linear-gradient(90deg,#5FE0C0,#8FB4FF 50%,#F0A8E0);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.fcta .kick{font-size:clamp(1.3rem,2vw,1.6rem)!important;letter-spacing:.16em!important}

/* brand tagline under the logo: clearly visible colour */
.bs{font-family:Karla,system-ui,sans-serif!important;font-weight:800!important;font-size:.66rem!important;letter-spacing:.14em!important;
  background:linear-gradient(90deg,#0E9B86,#2563EB 50%,#9333EA);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.fbrand .bs{background:linear-gradient(90deg,#5FE0C0,#8FB4FF,#F0A8E0);-webkit-background-clip:text;background-clip:text}
@media(max-width:1480px) and (min-width:1301px){.nav .brand .bs{display:block!important;font-size:.56rem!important}}

/* appealing footer */
.site-foot{background:linear-gradient(135deg,#052E35 0%,#0B2A5E 48%,#2B1460 100%)!important;color:rgba(255,255,255,.82)}
.aurora i{opacity:.5!important}
.fcta{background:linear-gradient(135deg,rgba(95,224,192,.16),rgba(143,180,255,.12) 50%,rgba(240,168,224,.14))!important;border:1px solid rgba(255,255,255,.22)!important;box-shadow:0 30px 70px -40px rgba(0,0,0,.6)}
.fcta h2{font-size:clamp(1.9rem,3.6vw,3rem)!important}
.fcols h4{font-family:Karla,system-ui,sans-serif!important;font-size:.95rem!important;font-weight:800!important;letter-spacing:.12em!important;color:#5FE0C0!important}
.fcols a,.fcontact span{color:rgba(255,255,255,.86)}
.fcols a:hover{color:#fff}
.social a{background:linear-gradient(135deg,rgba(95,224,192,.25),rgba(143,180,255,.2))!important;border-color:rgba(255,255,255,.3)!important}
.fword{-webkit-text-stroke:0!important;opacity:.9;background:linear-gradient(90deg,rgba(95,224,192,.35),rgba(143,180,255,.35),rgba(240,168,224,.35))!important;-webkit-background-clip:text!important;background-clip:text!important}
.fbottom{color:rgba(255,255,255,.75)}

/* v4: eight menu items fit comfortably */
.links > li > a{font-size:.88rem!important;padding:.5rem .42rem!important}
.nav-in{gap:.8rem!important}
.nav-cta{padding:.55rem 1rem!important}
@media(max-width:1480px) and (min-width:1361px){.nav .brand .bs{font-size:.5rem!important;letter-spacing:.1em!important}}
@media(max-width:1360px){
  .links,.nav-cta{display:none!important}
  .burger{display:block!important}
  .mnav{display:block;position:absolute;left:0;right:0;top:100%;background:rgba(255,255,255,.98);backdrop-filter:blur(20px);border-bottom:1px solid var(--rule);max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
  .site-head.open .mnav{max-height:80vh;overflow-y:auto}
  .mnav .btn{margin:1.2rem 0 1.5rem;width:100%}
}

/* v5: homepage mega fix (page hero .mega style must not affect the nav menu) */
.nav .mega{letter-spacing:normal!important;line-height:1.4!important;font-weight:400}