/* 105let overrides on top of the Techarin template styles */

/* Hero background: own gradient instead of the template's licensed bg.jpg */
.hero-bg{
  background:
    radial-gradient(900px 520px at 85% 10%, rgba(56,132,255,.22), transparent 70%),
    radial-gradient(700px 480px at 0% 100%, rgba(34,211,238,.12), transparent 70%),
    linear-gradient(180deg,#050912 0%,#070d1b 100%) !important;
}

/* Floating hero decorations: own SVG glyphs instead of the template robots */
.hero::before{background:url("../img/deco-orbit.svg") no-repeat !important}
.hero::after{background:url("../img/deco-nodes.svg") no-repeat !important}
.hero-content::before{background:url("../img/deco-chip.svg") no-repeat !important}
.hero-content::after{background:url("../img/deco-chat.svg") no-repeat !important}

/* CTA: user's own image instead of bg3.jpg, own ring shapes instead of shape13/14 */
.cta-bg{
  background:
    linear-gradient(180deg,rgba(5,9,18,.80),rgba(5,9,18,.55) 45%,rgba(5,9,18,.92)),
    url("../img/landscape/11.jpg") center / cover no-repeat !important;
}
.cta-wrapper::before{background:url("../img/deco-ring.svg") no-repeat !important}
.cta-wrapper::after{background:url("../img/deco-ring2.svg") no-repeat !important}

/* Brand mark in header/footer */
.ol-brand{display:inline-flex;align-items:center;gap:.55rem;font-family:"Outfit",system-ui,sans-serif;font-weight:600;font-size:1.45rem;letter-spacing:-.01em;color:#fff;text-decoration:none}
.ol-brand svg{width:30px;height:30px;flex:none}

/* Language switch */
.ol-lang{display:inline-flex;border:1px solid rgba(148,163,184,.35);border-radius:999px;padding:3px;gap:2px;background:rgba(15,23,42,.6)}
.ol-lang button{all:unset;cursor:pointer;font-size:11px;font-weight:600;letter-spacing:.08em;padding:4px 10px;border-radius:999px;color:#94a3b8}
.ol-lang button[aria-pressed="true"]{background:#3b82f6;color:#fff;box-shadow:0 0 14px rgba(59,130,246,.55)}
.ol-lang button:focus-visible{outline:2px solid #67e8f9;outline-offset:2px}

/* Topic strip (replaces fake client logos) */
.ol-topics span{display:inline-flex;align-items:center;gap:.6rem}
.ol-topics span+span::before{content:"✦";color:#3b82f6;font-size:10px}

/* Process step images */
.ol-step-img{margin-top:1.25rem;width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:.9rem;border:1px solid rgba(148,163,184,.15)}

/* FAQ side image (replaces template video) */
.ol-faq-img{width:100%;height:100%;object-fit:cover}

/* Form status */
.ol-formnote{min-height:1.2em;font-size:12px;color:#67e8f9}

/* Demo badge */
.ol-demo{font-size:11px;letter-spacing:.06em;border:1px dashed rgba(148,163,184,.4);border-radius:999px;padding:3px 10px;color:#94a3b8}

@media (max-width:767px){ .ol-lang{margin-right:.25rem} }

/* keep the floating decorations clear of the hero text */
.hero::before{left:1.5%;top:4%;opacity:.7}
.hero::after{right:1.5%;top:4%;opacity:.7}
.hero-content::before{left:-6%;bottom:4%;opacity:.7}
.hero-content::after{right:-7%;bottom:6%;opacity:.7}
@media (max-width:1100px){.hero::before,.hero::after,.hero-content::before,.hero-content::after{display:none}}

/* 105let: deep indigo hero like the template look, live network canvas on top */
.hero-bg{
  background:
    radial-gradient(1100px 700px at 30% 40%, #10123a 0%, transparent 70%),
    radial-gradient(800px 600px at 90% 10%, rgba(37,58,170,.25), transparent 70%),
    linear-gradient(180deg,#07081a 0%,#090b20 100%) !important;
}
#hero-net{z-index:0}
.hero-content{z-index:2}
.ol-word{letter-spacing:-.01em}
.ol-word b{font-weight:600;background:linear-gradient(90deg,#67e8f9,#60a5fa);-webkit-background-clip:text;background-clip:text;color:transparent}