/* ========= Teknete Design System ========= */
:root{
  /* Color tokens */
  --bg: #0b0d10;
  --surface: #0f1318;
  --card: #121821;
  --elev: #0a0d12;
  --text: #eef2f7;
  --muted: #9aa6b2;
  --border: #1e2732;
  --accent: {{@site.accent_color}};
  --hanuman: #ff6f00;
  --brown: #795548;
  --dark-brown: #4e342e;

  /* Effects */
  --radius: 14px;
  --radius-lg: 18px;
  --shadow-1: 0 6px 18px rgba(0,0,0,.25);
  --shadow-2: 0 16px 40px rgba(0,0,0,.35);

  /* Type scale */
  --step--1: clamp(.82rem, .80rem + .1vw, .9rem);
  --step-0: clamp(.95rem, .92rem + .15vw, 1rem);
  --step-1: clamp(1.15rem, 1rem + .6vw, 1.35rem);
  --step-2: clamp(1.45rem, 1.2rem + 1.2vw, 1.8rem);
  --step-3: clamp(1.85rem, 1.4rem + 2.4vw, 2.4rem);
  --step-4: clamp(2.4rem, 1.6rem + 4vw, 3.1rem);
}
:root[data-theme="light"]{
  --bg:#ffffff; --surface:#f6f8fa; --card:#ffffff; --elev:#fff;
  --text:#0b0d10; --muted:#4b5662; --border:#e5eaf0;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background: var(--bg); color: var(--text);
  font: 400 var(--step-0)/1.65 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.nav-open{ overflow:hidden; }
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
a:hover{color:var(--accent)}

/* Containers */
.container{ width: min(1180px, 92vw); margin-inline:auto; }
.page .block{ margin: clamp(1.2rem,2vw,2rem) 0; }
.hero-bg{ background: radial-gradient(1200px 500px at 10% -10%, rgba(255,111,0,.15), transparent 60%),
                       radial-gradient(1000px 500px at 110% -20%, rgba(121,85,72,.15), transparent 60%); }

/* Header */
.site-header{ position:sticky; top:0; z-index:2200; background: color-mix(in srgb, var(--surface), transparent 0%);
  backdrop-filter: saturate(1.2) blur(8px); border-bottom:1px solid var(--border); }
.header-inner{ display:flex; align-items:center; gap:.6rem; padding:.6rem 0; }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:800 }
.brand .logo-img{ height:28px; width:auto }
.nav{ display:flex; align-items:center; gap:1rem; margin-left:auto; z-index:2201; }
.nav-links{ display:flex; align-items:center; gap:.9rem; }
.nav a{ opacity:.9; font-weight:700; padding:.45rem .75rem; border-radius:12px; }
.nav a:hover{ opacity:1; color:var(--accent); background: color-mix(in srgb, var(--accent), transparent 88%); }
.nav a.active{ color:var(--accent); background: color-mix(in srgb, var(--accent), transparent 88%); }
.nav-cta .btn{ padding:.55rem .9rem; border-radius:10px; }
.nav-top{ display:none; }
.nav-title{ font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: var(--muted); }
.nav-close{ background:transparent; border:1px solid var(--border); color:var(--text); border-radius:10px; padding:.35rem .6rem; cursor:pointer; }
#navClose{ display:none; }
#themeToggle{ margin-left:0 }

#global-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .12s ease-out, visibility .12s ease-out;
  z-index:1100;
}
body.nav-open #global-backdrop{ opacity:.7; pointer-events:auto; visibility:visible; }

.header-actions{ display:inline-flex; align-items:center; gap:.35rem; margin: 0 .35rem; }
.search-btn{ margin-right: .35rem; }
.hdr-btn,.search-btn,.burger,#themeToggle{
  background: var(--card); border:1px solid var(--border); color: var(--text);
  border-radius: 12px; cursor:pointer; box-shadow: var(--shadow-1);
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; font-size:1.05rem;
}
.burger{ position:relative; z-index:110; font-size:1.25rem; }
.hdr-btn:hover,.search-btn:hover,#themeToggle:hover{ border-color: var(--accent) }
.lang-switcher{ position:relative; display:inline-flex; align-items:center; }
.lang-menu{
  position:absolute; top:calc(100% + .4rem); right:0;
  min-width:160px; padding:.35rem; border-radius:12px;
  border:1px solid var(--border); background: var(--surface);
  box-shadow: var(--shadow-2); display:none; z-index:2300;
  max-height: calc(10 * 2.2rem); column-count: 2; column-gap: .5rem;
  column-fill: auto; overflow:auto;
}
.lang-menu.open{ display:block; }
.lang-menu a{
  display:flex; align-items:center; justify-content:space-between;
  padding:.45rem .6rem; border-radius:10px; text-decoration:none;
  color: var(--text); font-weight:700; font-size:.92rem;
  break-inside: avoid; line-height:1.2;
}
.lang-menu a:hover,
.lang-menu a.active{
  color: var(--accent);
  background: color-mix(in srgb, var(--accent), transparent 88%);
}

/* Mobile nav */
.burger{ display:none }
@media (max-width: 860px){
  #global-backdrop{
    backdrop-filter:none;
    background: rgba(0,0,0,.7);
  }
  .burger{ display:inline-flex; }
  .nav{
        position:fixed; left:0; top:0; width:100vw; height:100vh;
        background: var(--surface);
        border-right:1px solid var(--border); box-shadow: var(--shadow-2);
        padding: 1.25rem 1.1rem 1.4rem;
        transform: translateX(-100%);
        transition: transform .16s ease-out, box-shadow .16s ease-out, opacity .16s ease-out;
        z-index:1201; opacity:0; pointer-events:none;
        display:none; flex-direction:column; gap:1rem; flex:0 0 auto;
        overflow-y:auto;
  }
  .nav.open{ display:flex; transform: translateX(0); opacity:1; pointer-events:auto; }
  .header-inner{ position:relative; z-index:1300; }
  .burger{ z-index:1301; }
  .nav-top{ display:flex; align-items:center; justify-content:space-between; }
  .nav-links{ flex-direction:column; align-items:stretch; gap:.4rem; }
  .nav a{ display:flex; align-items:center; gap:.5rem; padding:.65rem .75rem; border-radius:12px; font-weight:700; }
  .nav a:hover,.nav a.active{ background: color-mix(in srgb, var(--accent), transparent 88%); color: var(--accent); }
  .nav-cta .btn{ width:100%; justify-content:center; text-align:center; }
  #navClose{
    display:inline-flex; align-items:center; justify-content:center;
    position:absolute; top:.75rem; right:.75rem;
    width:40px; height:40px; padding:0;
  }
}

/* Grids */
.grid2,.grid3,.grid4,.posts-grid{ display:grid; gap: 1rem }
.grid2{ grid-template-columns: repeat(2, minmax(0,1fr)) }
.grid3{ grid-template-columns: repeat(3, minmax(0,1fr)) }
.grid4{ grid-template-columns: repeat(4, minmax(0,1fr)) }
.posts-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) }
@media (max-width: 980px){ .grid3,.posts-grid{ grid-template-columns:repeat(2,1fr) } .grid4{ grid-template-columns:repeat(2,1fr) } }
@media (max-width: 680px){ .grid2,.grid3,.grid4,.posts-grid{ grid-template-columns:1fr } }

/* Blocks */
.block.hero h1{ font-size: var(--step-4); margin: .2rem 0 .4rem }
.block.hero .eyebrow{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); font-weight:800 }
.block h2{ font-size: var(--step-2) }
.block h3{ font-size: var(--step-1) }
.muted{ color: var(--muted) }

/* Cards */
.card{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  padding: 1rem; box-shadow: var(--shadow-1); transition: transform .1s ease-out, border-color .1s ease-out;
}
.card:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent), var(--border) 70%) }
.badge{ display:inline-block; padding:.25rem .5rem; border-radius: 999px; border:1px solid var(--border); background: var(--elev); font-size:.8rem }

/* Post cards */
.post-card .card-image{ width:100%; height:200px; object-fit:cover }
.post-card .card-body{ padding:1rem }
.card-title{ font-weight:800; margin:0 0 .3rem }
.card-excerpt{ color:var(--muted); margin:0 0 .5rem }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:.45rem; padding:.65rem 1rem; border-radius: 12px;
      border:1px solid var(--border); background: var(--surface); color: var(--text); font-weight:700 }
.btn.primary{ background: var(--accent); border-color: var(--accent); color:#fff }
.btn.ghost{ background:transparent }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset: 2px }

/* Progress bar */
.scroll-progress{ appearance:none; position:fixed; top:0; left:0; width:100%; height:4px; z-index:1000; background:transparent; border:0 }
.scroll-progress::-webkit-progress-value{ background: var(--accent) }
.scroll-progress::-webkit-progress-bar{ background: transparent }
.scroll-progress::-moz-progress-bar{ background: var(--accent) }

/* Pagination (shared) */
.pagination{ display:flex; justify-content:center; gap:.5rem; margin: 2rem 0; flex-wrap:wrap; }
.pagination a, .pagination span{ padding:.5rem .75rem; border:1px solid var(--border); border-radius: 10px }
.pagination .current{ background: var(--accent); border-color: var(--accent); color:#fff }
.fancy-pagination{ gap: .8rem; align-items:center; }
.fancy-pagination .page-btn{
  padding:.55rem 1rem; border-radius: 12px; border:1px solid var(--border); background: var(--surface);
  box-shadow: var(--shadow-1); font-weight:800;
}
.fancy-pagination .page-btn:hover{ border-color: var(--accent); color: var(--accent); }
.fancy-pagination .page-btn.disabled{ opacity:.5; pointer-events:none; box-shadow:none; }
.fancy-pagination .page-count{ color: var(--muted); font-weight:700; }

/* Koenig essentials */
.kg-width-wide{ width:min(1180px,92vw); margin: clamp(1rem,2vw,2rem) auto }
.kg-width-full{ width:100vw; margin-left:50%; transform: translateX(-50%) }
.kg-image{ border-radius: 12px }

/* Page loader */
#page-loader{
  position:fixed; inset:0; display:grid; place-items:center;
  background: color-mix(in srgb, var(--bg), var(--surface) 40%);
  z-index:1200; transition: opacity .35s ease, visibility .35s ease;
}
body.page-loaded #page-loader{ opacity:0; visibility:hidden; pointer-events:none; }
#page-loader .loader-inner{
  position:relative; width:140px; height:140px; display:grid; place-items:center;
}
.loader-ring{
  width:140px; height:140px; border-radius:50%;
  border:3px solid color-mix(in srgb, var(--accent), transparent 70%);
  border-top-color: var(--accent);
  animation: spin 1s linear infinite;
}
.loader-logo{
  position:absolute; width:86px; height:86px; border-radius:20px;
  background: var(--card); display:grid; place-items:center;
  box-shadow: var(--shadow-2); overflow:hidden; border:1px solid var(--border);
}
.loader-logo img{ width:70%; height:70%; object-fit:contain; }
.loader-initials{ font-weight:800; text-align:center; padding:.5rem; }
.loader-favicon{
  position:absolute; bottom:-6px; right:-6px; width:40px; height:40px;
  border-radius:50%; border:2px solid var(--card);
  box-shadow: var(--shadow-1);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes pulse{ 0%,100%{ transform: scale(.9); opacity:.8; } 50%{ transform: scale(1.05); opacity:1; } }

/* Footer */
.site-footer{ margin-top: clamp(2rem,5vw,4rem); position:relative; overflow:hidden; border-top:1px solid var(--border); background: linear-gradient(180deg, color-mix(in srgb, var(--surface), transparent 20%) 0%, var(--surface) 100%); }
.site-footer::before{
  content:""; position:absolute; inset:-20% -10% auto; height:60%; pointer-events:none;
  background: radial-gradient(800px 420px at 18% 30%, color-mix(in srgb, var(--accent), transparent 75%), transparent 70%),
              radial-gradient(620px 320px at 78% 10%, color-mix(in srgb, var(--accent), transparent 82%), transparent 70%);
  opacity:.6;
}
.footer-inner{ padding: clamp(2.5rem, 4vw, 3.5rem) 0; position:relative; }
.footer-hero{
  position:relative; background: linear-gradient(145deg, color-mix(in srgb, var(--surface), var(--bg) 40%) 0%, var(--surface) 100%);
  border:1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.4rem,3vw,2.2rem);
  box-shadow: var(--shadow-2); overflow:hidden;
}
.footer-hero::after{
  content:""; position:absolute; inset:-5% 40% auto; height:55%; pointer-events:none;
  background: radial-gradient(400px 240px at 40% 10%, color-mix(in srgb, var(--accent), transparent 70%), transparent 70%);
  opacity:.7; filter: blur(30px);
}
.footer-top{ display:grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1rem, 3vw, 1.8rem); position:relative; z-index:1; }
.footer-branding h3{ margin:.15rem 0 .25rem; }
.footer-title{ font-size: var(--step-2); margin:0 0 .2rem; }
.footer-chips,.footer-contact-chips{ display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; margin-bottom:.6rem; }
.footer-chip{
  display:inline-flex; align-items:center; gap:.25rem; padding:.35rem .75rem; border-radius:999px;
  border:1px solid var(--border); background: var(--card); color: var(--text); font-weight:700; box-shadow: var(--shadow-1);
}
.footer-chip.muted{ background: var(--surface); color: var(--muted); box-shadow:none; }
.footer-chip.link{ background: transparent; color: var(--accent); border-color: color-mix(in srgb, var(--accent), var(--border) 70%); box-shadow:none; }
.footer-contact-chips{ margin-top:.8rem; }
.footer-cta-card{
  background: var(--card); border:1px solid color-mix(in srgb, var(--accent), var(--border) 60%); border-radius: var(--radius-lg);
  padding: 1.1rem 1.2rem; box-shadow: var(--shadow-2); display:flex; flex-direction:column; gap:.65rem; position:relative; overflow:hidden;
}
.footer-cta-card::before{
  content:""; position:absolute; inset:-10% -5% auto; height:60%; background: radial-gradient(380px 280px at 75% 20%, color-mix(in srgb, var(--accent), transparent 70%), transparent 70%);
  opacity:.7; filter: blur(18px); pointer-events:none;
}
.footer-cta-meta{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.footer-actions{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.footer-columns{
  margin-top: clamp(1.1rem, 3vw, 1.6rem);
  display:grid; gap: 1rem 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  position:relative; z-index:1;
}
.footer-col h4{ margin:0 0 .6rem }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.35rem }
.footer-col a{ color: var(--muted); font-weight:600; }
.footer-col a:hover{ color: var(--accent) }
.footer-meta{
  margin-top: clamp(1.1rem, 2vw, 1.6rem); padding-top: 1rem; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem; color: var(--muted); position:relative; z-index:1;
}
.footer-meta-right{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.footer-social-inline a{ color: var(--text); opacity:.75; }
.footer-social-inline a:hover{ opacity:1; color: var(--accent); }
.footer-dots{ opacity:.5; }
.partner-badges .badge{ background: var(--elev); }

@media (max-width: 900px){
  .footer-top{ grid-template-columns:1fr; }
  .footer-cta-card{ order:-1; }
}

/* Accessibility & motion */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important }
}

/* Utilities */
.max-w-prose{ max-width: 68ch }
.center{ text-align:center }
.mt-0{ margin-top:0 } .mb-0{ margin-bottom:0 }


/* v22 hero shading refinement */
.block.hero{
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent), transparent 90%) 0%, transparent 100%);
  padding: clamp(1.2rem, 4vw, 2rem);
  border-radius: var(--radius-lg);
}


/* v23 contact form layout & styles */
#contact-form .grid2 { align-items: start; }
#teknete-contact label { display:block; margin: .6rem 0; }
#teknete-contact label span { display:block; font-weight:700; margin-bottom:.25rem; }
#teknete-contact input, #teknete-contact textarea {
  width:100%; padding:.7rem .9rem; border-radius:12px; border:1px solid var(--border); background: var(--bg); color: var(--text);
}
#teknete-contact input.invalid, #teknete-contact textarea.invalid { border-color: #d33; box-shadow: 0 0 0 2px rgba(211,51,51,.15); }
#teknete-contact .form-actions { margin-top:.8rem; }
#teknete-contact .form-msg { margin-top:.6rem; color: var(--muted); }
@media (max-width: 820px){
  #contact-form .grid2 { display:block; }
  #contact-form .card + .card { margin-top: 1rem; }
}


/* v24 — Professional form UX */
.notice {
  display:flex; align-items:flex-start; gap:.6rem; padding:.75rem .9rem; border-radius:12px;
  border:1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-1);
  margin:.8rem 0;
}
.notice svg{ flex:0 0 auto; margin-top:.15rem }
.notice.success{ border-color: color-mix(in srgb, var(--accent), var(--border) 60%); background: color-mix(in srgb, var(--accent), transparent 88%); }
.notice.error{ border-color:#d33; background: rgba(211,51,51,.08); }
.notice .title{ font-weight:800; margin:0 }
.notice p{ margin:.1rem 0 0; }

#teknete-contact label{ display:block; margin:.6rem 0; }
#teknete-contact label span{ display:block; font-weight:700; margin-bottom:.25rem; }
#teknete-contact input, #teknete-contact textarea {
  width:100%; padding:.7rem .9rem; border-radius:12px; border:1px solid var(--border);
  background: var(--bg); color: var(--text); transition: border-color .15s ease, box-shadow .15s ease;
}
#teknete-contact input:focus, #teknete-contact textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 84%);
  outline: none;
}
.form-row{ margin-bottom:.6rem; }
.input-help{ display:block; font-size:.9em; color: var(--muted); margin-top:.25rem; }
.input-error{ display:block; font-size:.9em; color:#d33; margin-top:.25rem; min-height:1.25em; }
.invalid input, .invalid textarea{
  border-color:#d33; box-shadow: 0 0 0 3px rgba(211,51,51,.12);
}

.btn[aria-busy="true"]{ position:relative; pointer-events:none; opacity:.85; }
.btn[aria-busy="true"]::after{
  content:""; position:absolute; right:.75rem; width:1em; height:1em; border-radius:50%;
  border:2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Keep two-column layout intact on larger screens */
#contact-form .grid2{ align-items:start; }
@media (max-width: 820px){
  #contact-form .grid2 { display:block; }
  #contact-form .card + .card { margin-top:1rem; }
}


/* v31 header luxe & taller */
.site-header{
  position: sticky; top: 0; z-index: 2200;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface), transparent 0%), color-mix(in srgb, var(--surface), transparent 8%));
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(1.25) blur(10px);
}
.header-inner{ padding: .9rem 0; min-height: 68px; position:relative; z-index:2201; }
.brand .logo-img{ height: 34px; }
.header-actions .hdr-btn, .header-actions .search-btn, #themeToggle{
  padding: .6rem .8rem; border-radius: 14px; box-shadow: var(--shadow-1);
}
.header-actions{ gap: .5rem; }
.nav a{ padding:.35rem .5rem; border-radius: 10px; }
.nav a.active{ background: color-mix(in srgb, var(--accent), transparent 88%); color: var(--accent); }


/* v31 home hero with metrics sidebar */
.home-hero{
  display:grid; grid-template-columns: 1.5fr .9fr; gap: 1.2rem; align-items: stretch;
}
@media (max-width: 980px){ .home-hero{ grid-template-columns: 1fr; } }
.metrics-rail{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:.8rem; }
.metric-card{
  position:relative; overflow:hidden;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent), var(--card) 90%), var(--card));
  border:1px solid color-mix(in srgb, var(--accent), var(--border) 60%); border-radius: 16px; padding: 1rem;
  box-shadow: var(--shadow-2);
}
.metric-card::after{
  content:""; position:absolute; inset:-10% -20% auto auto; height:70%; width:70%;
  background: radial-gradient(220px 160px at 60% 40%, color-mix(in srgb, var(--accent), transparent 75%), transparent);
  opacity:.8; pointer-events:none; filter: blur(12px);
}
.metric-head{ display:flex; align-items:center; gap:.5rem; }
.metric-icon{
  width:34px; height:34px; border-radius:12px;
  border:1px solid color-mix(in srgb, var(--accent), var(--border) 65%);
  background: color-mix(in srgb, var(--accent), transparent 88%);
  display:grid; place-items:center;
  font-size: 1.1rem; box-shadow: var(--shadow-1);
}
.metric-card .value{ font-size: clamp(1.8rem, 1.4rem + 2.4vw, 2.8rem); font-weight: 900; line-height: 1; position:relative; z-index:1; }
.metric-card .label{
  color: var(--muted); margin-top: .25rem; font-weight: 800; letter-spacing:.08em;
  text-transform: uppercase; position:relative; z-index:1;
}
.hero-slider{
  position:relative; padding: clamp(1rem, 2vw, 1.6rem); background: linear-gradient(135deg, color-mix(in srgb, var(--card), var(--bg) 18%) 0%, var(--card) 100%);
  border:1px solid color-mix(in srgb, var(--accent), var(--border) 70%);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2); overflow:hidden;
}
.hero-slides{ position:relative; min-height: 260px; }
.hero-slide{
  position:absolute; inset:0; opacity:0; transform: translateY(10px) scale(.99);
  transition: opacity .18s ease-out, transform .18s ease-out; padding: .25rem;
}
.hero-slide.active{ position:relative; opacity:1; transform: translateY(0) scale(1); }
.hero-slide h1{ margin: .1rem 0 .4rem; }
.hero-pills{ display:flex; gap:.4rem; flex-wrap:wrap; margin: .4rem 0 .9rem; }
.hero-pill{
  display:inline-flex; align-items:center; gap:.25rem; padding:.35rem .65rem; border-radius: 999px;
  border:1px solid var(--border); background: var(--surface); color: var(--muted); font-weight:700; letter-spacing:.01em;
}
.hero-slider-controls{
  margin-top: .9rem; display:flex; align-items:center; gap:.7rem;
  justify-content:space-between;
  background: transparent; border:0; padding:0; box-shadow:none;
}
.hero-dots{ display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; flex:1; }
.hero-dot{
  width:26px; height:4px; border-radius:999px;
  border:0; background: color-mix(in srgb, var(--accent), var(--border) 65%);
  cursor:pointer; padding:0; transition: width .12s ease-out, background .12s ease-out, transform .12s ease-out;
}
.hero-dot.active{
  width:38px; background: var(--accent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent), transparent 55%);
}
.hero-dot:hover{ transform: translateY(-1px); background: color-mix(in srgb, var(--accent), var(--border) 35%); }
.hero-arrows{ display:inline-flex; gap:.45rem; margin-left:auto; }
.slider-btn{
  width:34px; height:34px; border-radius: 999px; border:1px solid color-mix(in srgb, var(--accent), var(--border) 70%);
  background: transparent; color: var(--text); cursor:pointer;
  box-shadow:none; font-size: 1.15rem; line-height: 1;
}
.slider-btn:hover{
  border-color: var(--accent); color: var(--accent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent), transparent 70%);
}
.hero-slider .actions{ margin-top: .8rem; }

/* Section hero (shared across about/products/blog/docs) */
.section-hero{
  display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 1.2rem;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface), var(--bg) 40%) 0%, var(--surface) 100%);
  border:1px solid color-mix(in srgb, var(--accent), var(--border) 60%);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
  position:relative; overflow:hidden;
}
.section-hero::after{
  content:""; position:absolute; inset:-8% 35% auto; height:50%;
  background: radial-gradient(400px 320px at 35% 20%, color-mix(in srgb, var(--accent), transparent 70%), transparent 70%);
  opacity:.75; filter: blur(20px); pointer-events:none;
}
.hero-main{ position:relative; z-index:1; }
.hero-main h1{ margin: .2rem 0 .4rem; }
.hero-main p{ margin: 0 0 .8rem; }
.hero-badges,.hero-actions,.hero-meta{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.hero-badges{ margin-bottom:.4rem; }
.hero-chip{
  display:inline-flex; align-items:center; gap:.25rem; padding:.35rem .7rem; border-radius:999px;
  border:1px solid var(--border); background: var(--card); color: var(--muted); font-weight:700; letter-spacing:.01em;
}
.hero-chip.strong{ color: var(--text); background: color-mix(in srgb, var(--accent), transparent 80%); border-color: color-mix(in srgb, var(--accent), var(--border) 60%); }
.hero-actions{ margin-top:.2rem; }
.hero-panel{
  position:relative; z-index:1;
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1rem 1.1rem; box-shadow: var(--shadow-2); display:grid; gap:.9rem;
}
.hero-panel-header{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color: var(--muted); font-size:.85rem; }
.hero-list{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.hero-list li{ padding:.5rem .55rem; border:1px solid var(--border); border-radius:12px; background: var(--surface); }
.hero-list strong{ display:block; font-weight:800; }
.hero-stats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap:.6rem; }
.hero-stat{
  background: var(--surface); border:1px solid var(--border); border-radius:12px; padding:.75rem;
}
.hero-stat .num{ font-size: var(--step-2); font-weight:900; line-height:1; }
.hero-stat .label{ color: var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-top:.1rem; }

@media (max-width: 940px){
  .section-hero{ grid-template-columns:1fr; }
}