/* ==========================================================
   SalesCRM Landing Page — custom.css
   Structure: base → keyframes → layout container → header →
   hero visual → sections (generated, grouped) → states →
   lightbox → responsive breakpoints
   ========================================================== */

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; background: #0F1015; font-family: 'Poppins', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img { display: block; max-width: 100%; }
a { color: #E21F3A; text-decoration: none; }
a:not([class]):hover { color: #B8152B; }
button { font-family: 'Poppins', sans-serif; }
template { display: none; }
.page-root { font-family: 'Poppins', sans-serif; color: #111217; background: #0F1015; overflow-x: hidden; }
.main-content { display: block; }

/* ---------- Keyframes ---------- */
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes scx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes scy{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pop{0%{opacity:0;transform:translateY(14px) scale(.92)}100%{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scanX{0%{transform:translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(960px);opacity:0}}
@keyframes cur{0%{transform:translate(1150px,700px)}55%,100%{transform:translate(1826px,92px)}}
@keyframes ripple{0%{transform:scale(0);opacity:.8}100%{transform:scale(1);opacity:0}}
@keyframes ecg{0%{stroke-dashoffset:1}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
@keyframes blobA{0%{transform:translate(0,0) scale(1)}100%{transform:translate(140px,90px) scale(1.25)}}
@keyframes blobB{0%{transform:translate(0,0) scale(1.1)}100%{transform:translate(-120px,-70px) scale(.9)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(226,31,58,.65)}100%{box-shadow:0 0 0 10px rgba(226,31,58,0)}}
@keyframes pulseG{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}100%{box-shadow:0 0 0 10px rgba(34,197,94,0)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes flash{0%{opacity:0}35%{opacity:.16}100%{opacity:.05}}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.8}}

/* ---------- Hybrid container ----------
   Small/medium: 100% width (sections supply responsive side padding).
   Large/XL: content capped at 1760px (within the 1660–1920px range) and centred.
   Section backgrounds stay full-bleed because only the inner container is capped. */
.site-container { width: 100%; max-width: 1760px; margin-left: auto; margin-right: auto; min-width: 0; }

/* ==========================================================
   HEADER / NAVIGATION
   ========================================================== */
.header-section { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(15,16,21,.72); border-bottom: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: background .4s ease, border-color .4s ease; }
.header-section.is-light { background: rgba(255,255,255,.88); border-bottom-color: #ECECF1; }
.header-inner { height: 80px; padding: 0 clamp(20px,4vw,56px); display: flex; align-items: center; gap: 20px; }
.header-logo-link { display: flex; align-items: center; flex-shrink: 0; }
.header-logo-link:hover { opacity: .85; }
.header-logo { height: 34px; width: auto; }
.header-logo-light { display: none; }
.is-light .header-logo-light { display: block; }
.is-light .header-logo-dark { display: none; }
.header-nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.header-nav-pill { display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); transition: background .4s ease, border-color .4s ease; }
.is-light .header-nav-pill { background: #F4F4F7; border-color: #E9E9EE; box-shadow: inset 0 1px 2px rgba(17,18,23,.04); }
.header-nav-link { position: relative; display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border-radius: 10px; font-size: 15px; font-weight: 500; color: #B4B7C4; background: transparent; transition: all .3s cubic-bezier(.2,.7,.2,1); white-space: nowrap; }
.header-nav-link:hover { color: #FFFFFF; background: rgba(255,255,255,.07); }
.is-light .header-nav-link { color: #5B5E6B; }
.is-light .header-nav-link:hover { color: #111217; background: rgba(17,18,23,.05); }
.header-section .header-nav-link.is-active { color: #FFFFFF; background: #E21F3A; font-weight: 600; box-shadow: 0 6px 16px rgba(226,31,58,.35), inset 0 1px 0 rgba(255,255,255,.25); }
.header-nav-dot { width: 6px; height: 6px; border-radius: 50%; background: #FFFFFF; opacity: 0; transform: scale(0); transition: all .3s ease; margin-right: -13px; }
.is-active .header-nav-dot { opacity: 1; transform: scale(1); margin-right: 0; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-demo-btn { display: flex; align-items: center; gap: 9px; height: 50px; padding: 0 20px; white-space: nowrap; flex-shrink: 0; border-radius: 10px; background: #E21F3A; color: #FFFFFF; font-size: 15px; font-weight: 600; transition: all .25s ease; box-shadow: 0 6px 20px rgba(226,31,58,.3); }
.header-demo-btn:hover { background: #C8192E; color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(226,31,58,.45); }
.header-demo-dot { width: 7px; height: 7px; border-radius: 50%; background: #FFFFFF; }
.header-vibe-btn { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 18px; white-space: nowrap; flex-shrink: 0; border-radius: 10px; border: 1px solid rgba(255,255,255,.22); color: #FFFFFF; font-size: 14.5px; font-weight: 500; transition: all .25s ease; }
.header-vibe-btn:hover { border-color: #E21F3A; transform: translateY(-2px); color: #FFFFFF; }
.is-light .header-vibe-btn { border-color: #D9D9E1; color: #111217; }
.is-light .header-vibe-btn:hover { border-color: #E21F3A; color: #111217; }
.header-vibe-logo { height: 21px; width: auto; }
.header-burger { display: none; width: 42px; height: 42px; padding: 0; border-radius: 10px; border: 1px solid rgba(255,255,255,.22); background: transparent; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.header-burger-line { width: 18px; height: 2px; border-radius: 2px; background: #FFFFFF; }
.is-light .header-burger { border-color: #D9D9E1; }
.is-light .header-burger-line { background: #111217; }
.header-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: linear-gradient(90deg,#E21F3A,#FF6B7D); transform-origin: left; transform: scaleX(0); }
.mobile-menu { display: none; background: #0F1015; border-top: 1px solid rgba(255,255,255,.07); max-height: calc(100vh - 80px); overflow-y: auto; }
.is-light .mobile-menu { background: #FFFFFF; border-top-color: #ECECF1; }
.mobile-menu-inner { padding: 12px clamp(20px,4vw,56px) 20px; display: flex; flex-direction: column; gap: 4px; }
.mobile-menu-link { padding: 12px 14px; border-radius: 10px; font-size: 15px; font-weight: 500; color: #B4B7C4; }
.is-light .mobile-menu-link { color: #5B5E6B; }
.header-section .mobile-menu-link.is-active { color: #FFFFFF; background: #E21F3A; font-weight: 600; }
.mobile-menu-vibe { margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 9px; height: 46px; border-radius: 10px; border: 1px solid rgba(255,255,255,.22); color: #FFFFFF; font-size: 14px; font-weight: 500; }
.is-light .mobile-menu-vibe { border-color: #D9D9E1; color: #111217; }
.mobile-menu-vibe-logo { height: 17px; width: auto; }

/* ==========================================================
   HERO VISUAL (animated product screens)
   ========================================================== */
.hero-visual { position: relative; }
.hero-chip { position: absolute; top: -58px; right: 16px; z-index: 3; }
.hero-chip.is-anim { animation: pop .6s 1.2s cubic-bezier(.2,.7,.2,1) both; }
.hero-chip-card, .hero-sync-card { position: relative; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: #FFFFFF; color: #111217; box-shadow: 0 20px 50px rgba(0,0,0,.4); font-family: 'Poppins', sans-serif; }
.hero-chip-icon { width: 34px; height: 34px; border-radius: 10px; background: #FDE8EB; display: flex; align-items: center; justify-content: center; }
.hero-chip-pulse { width: 10px; height: 10px; border-radius: 50%; background: #E21F3A; animation: pulse 1.6s infinite; }
.hero-chip-label { font-size: 11px; color: #5B5E6B; font-weight: 500; }
.hero-chip-value { font-size: 14px; font-weight: 600; }
.hero-frame { position: relative; border-radius: 16px; background: #1A1B22; border: 1px solid #2D2F3A; overflow: hidden; box-shadow: 0 50px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03), 0 0 80px rgba(226,31,58,.15); }
.hero-frame-bar { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid #2D2F3A; }
.hero-window-dots { display: flex; gap: 6px; }
.hero-window-dot { width: 10px; height: 10px; border-radius: 50%; }
.hero-window-dot-red { background: #FF5F57; }
.hero-window-dot-yellow { background: #FEBC2E; }
.hero-window-dot-green { background: #28C840; }
.hero-url { flex: 1; min-width: 0; padding: 5px 12px; border-radius: 8px; background: #0F1015; color: #A3A6B4; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-url-text { display: inline-block; }
.hero-url-text.is-anim { animation: fadeIn .5s ease both; }
.hero-live { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #D5D7E0; font-weight: 500; }
.hero-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; animation: pulseG 1.8s infinite; }
.hero-screen { position: relative; aspect-ratio: 1910 / 944; background: #F3F4F8; overflow: hidden; }
.hero-screen-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transform: scale(1.04); transition: opacity .8s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.hero-screen-img.is-active { opacity: 1; transform: scale(1); }
.hero-overlay-host { position: absolute; inset: 0; pointer-events: none; }
.hero-sync { position: absolute; left: 16px; bottom: 70px; z-index: 3; animation: floaty 4s ease-in-out infinite; }
.hero-sync-card { padding: 10px 14px; }
.hero-sync-dot { width: 9px; height: 9px; border-radius: 50%; background: #22C55E; animation: pulseG 1.8s infinite; }
.hero-sync-text { font-size: 12.5px; font-weight: 600; }
.hero-sync-muted { color: #5B5E6B; font-weight: 400; }

/* ---------- hero-bg ---------- */
.hero-bg-block {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  pointer-events: none;
  width: 620px;
  height: 620px;
  left: -12%;
  top: -18%;
  background: radial-gradient(circle,rgba(226,31,58,.38),transparent 65%);
  animation: blobA 16s ease-in-out infinite alternate;
}
.hero-bg-block-2 {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  pointer-events: none;
  width: 720px;
  height: 720px;
  right: -14%;
  bottom: -30%;
  background: radial-gradient(circle,rgba(226,31,58,.26),transparent 65%);
  animation: blobB 19s ease-in-out infinite alternate;
}
.hero-bg-block-3 {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  pointer-events: none;
  width: 420px;
  height: 420px;
  left: 40%;
  top: 30%;
  background: radial-gradient(circle,rgba(120,40,70,.25),transparent 65%);
  animation: blobA 23s ease-in-out infinite alternate-reverse;
}
.hero-bg-label {
  position: absolute;
  left: 12%;
  top: 22%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  animation: twinkle 3s 0s ease-in-out infinite;
}
.hero-bg-label-2 {
  position: absolute;
  left: 28%;
  top: 70%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  animation: twinkle 4s 0.4s ease-in-out infinite;
}
.hero-bg-label-3 {
  position: absolute;
  left: 46%;
  top: 14%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  animation: twinkle 5s 0.8s ease-in-out infinite;
}
.hero-bg-label-4 {
  position: absolute;
  left: 64%;
  top: 82%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  animation: twinkle 6s 1.2000000000000002s ease-in-out infinite;
}
.hero-bg-label-5 {
  position: absolute;
  left: 82%;
  top: 30%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  animation: twinkle 3s 1.6s ease-in-out infinite;
}
.hero-bg-label-6 {
  position: absolute;
  left: 90%;
  top: 64%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  animation: twinkle 4s 2s ease-in-out infinite;
}
.hero-bg-label-7 {
  position: absolute;
  left: 8%;
  top: 88%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  animation: twinkle 5s 2.4000000000000004s ease-in-out infinite;
}
.hero-bg-label-8 {
  position: absolute;
  left: 56%;
  top: 48%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  animation: twinkle 6s 2.8000000000000003s ease-in-out infinite;
}
.hero-bg-label-9 {
  position: absolute;
  left: 72%;
  top: 10%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  animation: twinkle 3s 3.2s ease-in-out infinite;
}
.hero-bg-label-10 {
  position: absolute;
  left: 36%;
  top: 40%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  animation: twinkle 4s 3.6s ease-in-out infinite;
}
.hero-bg-block-4 {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---------- hero-overlay ---------- */
.hero-overlay-shape {
  transform-box: fill-box;
  transform-origin: left center;
  animation: scx 1.1s 0.3s cubic-bezier(.2,.7,.2,1) both;
}
.hero-overlay-shape-2 {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s 0.5s cubic-bezier(.45,.05,.2,1) forwards;
}
.hero-overlay-shape-3 {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s 0.62s cubic-bezier(.45,.05,.2,1) forwards;
}
.hero-overlay-shape-4 {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s 0.74s cubic-bezier(.45,.05,.2,1) forwards;
}
.hero-overlay-shape-5 {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s 0.86s cubic-bezier(.45,.05,.2,1) forwards;
}
.hero-overlay-shape-6 {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s 0.98s cubic-bezier(.45,.05,.2,1) forwards;
}
.hero-overlay-shape-7 {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s 1.1s cubic-bezier(.45,.05,.2,1) forwards;
}
.hero-overlay-shape-8 {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s 1.22s cubic-bezier(.45,.05,.2,1) forwards;
}
.hero-overlay-shape-9 {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s 1.3399999999999999s cubic-bezier(.45,.05,.2,1) forwards;
}
.hero-overlay-shape-10 {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.6s 1.4s cubic-bezier(.45,.05,.2,1) forwards;
}
.hero-overlay-shape-11 {
  transform-box: fill-box;
  transform-origin: center;
  animation: pop .4s 1.4s ease both;
}
.hero-overlay-shape-12 {
  transform-box: fill-box;
  transform-origin: center;
  animation: pop .4s 1.5299999999999998s ease both;
}
.hero-overlay-shape-13 {
  transform-box: fill-box;
  transform-origin: center;
  animation: pop .4s 1.66s ease both;
}
.hero-overlay-shape-14 {
  transform-box: fill-box;
  transform-origin: center;
  animation: pop .4s 1.79s ease both;
}
.hero-overlay-shape-15 {
  transform-box: fill-box;
  transform-origin: center;
  animation: pop .4s 1.92s ease both;
}
.hero-overlay-shape-16 {
  transform-box: fill-box;
  transform-origin: center;
  animation: pop .4s 2.05s ease both;
}
.hero-overlay-shape-17 {
  transform-box: fill-box;
  transform-origin: center;
  animation: pop .4s 2.1799999999999997s ease both;
}
.hero-overlay-shape-18 {
  transform-box: fill-box;
  transform-origin: center;
  animation: pop .4s 2.31s ease both;
}
.hero-overlay-shape-19 {
  transform-box: fill-box;
  transform-origin: center;
  animation: pop .4s 2.44s ease both;
}
.hero-overlay-shape-20 {
  transform-box: fill-box;
  transform-origin: center;
  animation: pop .4s 2.57s ease both;
}
.hero-overlay-shape-21 {
  transform-box: fill-box;
  transform-origin: center;
  animation: pop .4s 2.7s ease both;
}
.hero-overlay-shape-22 {
  transform-box: fill-box;
  transform-origin: center;
  animation: pop .4s 2.83s ease both;
}
.hero-overlay-shape-23 {
  animation: scanX 2.6s 1s linear infinite;
}
.hero-overlay-shape-24 {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s 1.2s cubic-bezier(.45,.05,.2,1) forwards;
}
.hero-overlay-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-overlay-shape-25 {
  opacity: 0;
  animation: flash .9s 0.4s ease forwards;
}
.hero-overlay-shape-26 {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s 0.4s cubic-bezier(.45,.05,.2,1) forwards;
}
.hero-overlay-shape-27 {
  opacity: 0;
  animation: flash .9s 0.68s ease forwards;
}
.hero-overlay-shape-28 {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s 0.68s cubic-bezier(.45,.05,.2,1) forwards;
}
.hero-overlay-shape-29 {
  opacity: 0;
  animation: flash .9s 0.9600000000000001s ease forwards;
}
.hero-overlay-shape-30 {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s 0.9600000000000001s cubic-bezier(.45,.05,.2,1) forwards;
}
.hero-overlay-shape-31 {
  opacity: 0;
  animation: flash .9s 1.2400000000000002s ease forwards;
}
.hero-overlay-shape-32 {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s 1.2400000000000002s cubic-bezier(.45,.05,.2,1) forwards;
}
.hero-overlay-shape-33 {
  opacity: 0;
  animation: flash .9s 1.52s ease forwards;
}
.hero-overlay-shape-34 {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s 1.52s cubic-bezier(.45,.05,.2,1) forwards;
}
.hero-overlay-shape-35 {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s 1.9s cubic-bezier(.45,.05,.2,1) forwards;
}
.hero-overlay-shape-36 {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s 1.6s cubic-bezier(.45,.05,.2,1) forwards;
}
.hero-overlay-shape-37 {
  transform-box: fill-box;
  transform-origin: center;
  animation: ripple .9s 1.3s ease-out 2 both;
}
.hero-overlay-shape-38 {
  animation: cur 1.6s .2s cubic-bezier(.5,0,.2,1) both;
}
.hero-overlay-shape-39 {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: scy 1.1s 0.3s cubic-bezier(.2,.7,.2,1) both;
}
.hero-overlay-shape-40 {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: scy 1.1s 0.5s cubic-bezier(.2,.7,.2,1) both;
}
.hero-overlay-shape-41 {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: scy 1.1s 0.7s cubic-bezier(.2,.7,.2,1) both;
}
.hero-overlay-shape-42 {
  opacity: 0;
  animation: fadeIn .6s 1.3s ease forwards;
}
.hero-overlay-shape-43 {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.4s 1.1s cubic-bezier(.45,.05,.2,1) forwards;
}
.hero-overlay-shape-44 {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s 1.8s cubic-bezier(.45,.05,.2,1) forwards;
}
.hero-overlay-shape-45 {
  transform-box: fill-box;
  transform-origin: center;
  animation: pop .4s 1s ease both;
}
.hero-overlay-shape-46 {
  transform-box: fill-box;
  transform-origin: center;
  animation: pop .4s 1.2s ease both;
}
.hero-overlay-shape-47 {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s 0.3s cubic-bezier(.45,.05,.2,1) forwards;
}
.hero-overlay-shape-48 {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s 0.7s cubic-bezier(.45,.05,.2,1) forwards;
}
.hero-overlay-shape-49 {
  transform-box: fill-box;
  transform-origin: left center;
  animation: scx 1.1s 0.9s cubic-bezier(.2,.7,.2,1) both;
}
.hero-overlay-shape-50 {
  transform-box: fill-box;
  transform-origin: left center;
  animation: scx 1.1s 1s cubic-bezier(.2,.7,.2,1) both;
}
.hero-overlay-shape-51 {
  transform-box: fill-box;
  transform-origin: left center;
  animation: scx 1.1s 1.1s cubic-bezier(.2,.7,.2,1) both;
}
.hero-overlay-shape-52 {
  transform-box: fill-box;
  transform-origin: left center;
  animation: scx 1.1s 1.2000000000000002s cubic-bezier(.2,.7,.2,1) both;
}
.hero-overlay-shape-53 {
  transform-box: fill-box;
  transform-origin: left center;
  animation: scx 1.1s 1.3s cubic-bezier(.2,.7,.2,1) both;
}
.hero-overlay-shape-54 {
  transform-box: fill-box;
  transform-origin: left center;
  animation: scx 1.1s 1.4s cubic-bezier(.2,.7,.2,1) both;
}
.hero-overlay-shape-55 {
  transform-box: fill-box;
  transform-origin: left center;
  animation: scx 1.1s 1.5s cubic-bezier(.2,.7,.2,1) both;
}
.hero-overlay-shape-56 {
  transform-box: fill-box;
  transform-origin: left center;
  animation: scx 1.1s 1.6s cubic-bezier(.2,.7,.2,1) both;
}
.hero-overlay-shape-57 {
  stroke-dasharray: 1;
  animation: ecg 2.2s .6s linear infinite;
}
.hero-overlay-shape-58 {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s 2.1s cubic-bezier(.45,.05,.2,1) forwards;
}


/* ==========================================================
   HERO SECTION
   ========================================================== */
.hero-section {
  position: relative;
  min-height: 100vh;
  background: #0F1015;
  color: #FFFFFF;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: clamp(110px,14vh,150px) clamp(20px,4vw,56px) clamp(64px,9vh,100px);
}
.hero-block {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 60% 40%,#000 30%,transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 40%,#000 30%,transparent 80%);
}
.hero-block-2 {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr);
  gap: clamp(36px,4vw,56px);
  align-items: center;
}
.hero-block-3 {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hero-block-4 {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  background: rgba(226,31,58,.1);
  border: 1px solid rgba(226,31,58,.35);
  font-size: 13px;
  font-weight: 500;
  color: #FFC9D0;
}
.hero-label {
  padding: 3px 10px;
  border-radius: 999px;
  background: #E21F3A;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
}
.hero-title {
  margin: 0;
  font-size: clamp(38px,5vw,66px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.hero-label-2 {
  color: #E21F3A;
}
.hero-text {
  margin: 0;
  font-size: clamp(16px,1.3vw,18px);
  line-height: 1.7;
  color: #B4B7C4;
  max-width: 560px;
  text-wrap: pretty;
}
.hero-block-5 {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
}
.hero-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  box-sizing: border-box;
  padding: 0 7px 0 24px;
  border-radius: 10px;
  border: 1px solid #F0435B;
  background: linear-gradient(180deg,#EE2D48 0%,#D41A33 100%);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28),0 12px 32px rgba(226,31,58,.38);
  transition: all .3s cubic-bezier(.2,.7,.2,1);
}
.hero-link:hover {
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32),0 0 0 4px rgba(226,31,58,.22),0 18px 44px rgba(226,31,58,.55);
}
.hero-label-3 {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.hero-label-4 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(255,255,255,.22);
}
.hero-label-5 {
  width: 42px;
  height: 42px;
  border-radius: 7px;
  background: #FFFFFF;
  color: #E21F3A;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.hero-label-5:hover {
  transform: translateX(3px);
}
.hero-link-2 {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  box-sizing: border-box;
  padding: 0 24px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 500;
  transition: all .25s ease;
}
.hero-link-2:hover {
  border-color: #FFFFFF;
  background: rgba(255,255,255,.09);
  color: #FFFFFF;
  transform: translateY(-3px);
}
.hero-img {
  height: 20px;
  width: auto;
}
.hero-block-6 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding-top: 6px;
}
.hero-block-7 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: #D5D7E0;
}
.hero-label-6 {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: rgba(226,31,58,.18);
  border: 1px solid #E21F3A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #FF6B7D;
}
.hero-block-8 {
  position: relative;
  perspective: 1600px;
  margin-right: 0px;
}
.hero-tilt {
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
  transform-style: preserve-3d;
}

/* ==========================================================
   BENEFITS SECTION
   ========================================================== */
.benefits-section {
  position: relative;
  background: #FFFFFF;
  padding: clamp(80px,10vw,136px) clamp(20px,4vw,56px);
  overflow: hidden;
}
.benefits-block {
  position: absolute;
  top: clamp(24px,4vw,56px);
  right: -0.04em;
  font-size: clamp(90px,15vw,240px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px #E6E6EC;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.benefits-block-2 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.benefits-block-3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.benefits-block-4 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 700px;
}
.benefits-block-5 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #C8192E;
}
.benefits-title {
  margin: 0;
  font-size: clamp(32px,4vw,52px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.025em;
  color: #111217;
  text-wrap: balance;
}
.benefits-label {
  color: #E21F3A;
}
.benefits-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #5B5E6B;
  max-width: 400px;
  text-wrap: pretty;
}
.benefits-block-6 {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.5fr);
  gap: 20px;
  align-items: stretch;
}
.benefits-block-7 {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: #111217;
  color: #FFFFFF;
  padding: clamp(26px,3vw,36px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.benefits-block-8 {
  position: absolute;
  right: -120px;
  top: -120px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(226,31,58,.4),transparent 68%);
  pointer-events: none;
}
.benefits-block-9 {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.benefits-block-10 {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #E21F3A;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(226,31,58,.4);
}
.benefits-label-2 {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  color: #FFC9D0;
}
.benefits-block-11 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.benefits-block-12 {
  font-size: clamp(26px,2.6vw,34px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.02em;
}
.benefits-text-2 {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #B4B7C4;
  max-width: 460px;
}
.benefits-block-13 {
  position: relative;
  margin-top: auto;
  border-radius: 18px;
  background: #17181F;
  border: 1px solid #262833;
  padding: 20px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.benefits-block-14 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
}
.benefits-label-3 {
  color: #8C8FA0;
  letter-spacing: .06em;
}
.benefits-label-4 {
  display: flex;
  gap: 14px;
}
.benefits-label-5 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #B4B7C4;
}
.benefits-label-6 {
  width: 14px;
  height: 2px;
  background: #6B6E7D;
}
.benefits-label-7 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #FFFFFF;
}
.benefits-label-8 {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: #E21F3A;
}
.benefits-icon {
  width: 100%;
  height: 150px;
  display: block;
  overflow: visible;
}
.benefits-shape {
  transition: stroke-dashoffset 2.2s .3s cubic-bezier(.45,.05,.2,1);
}
.benefits-shape-2 {
  transition: stroke-dashoffset 1.6s .6s cubic-bezier(.45,.05,.2,1);
}
.benefits-block-15 {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: #6B6E7D;
}
.benefits-block-16 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}
.benefits-block-17 {
  position: relative;
  padding: clamp(22px,2.4vw,28px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-radius: 20px;
  background: #FFFFFF;
  border: 1px solid #ECECF1;
  box-shadow: 0 1px 2px rgba(17,18,23,.04);
  transition: all .4s cubic-bezier(.2,.7,.2,1);
}
.benefits-block-17:hover {
  border-color: #F5B5BF;
  transform: translateY(-5px);
  box-shadow: 0 22px 44px rgba(17,18,23,.09);
}
.benefits-block-18 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.benefits-block-19 {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #FDE8EB;
  color: #E21F3A;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .35s ease;
}
.benefits-block-19:hover {
  background: #E21F3A;
  color: #FFFFFF;
  transform: rotate(-6deg) scale(1.05);
}
.benefits-block-20 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.benefits-block-21 {
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #111217;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.benefits-text-3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  color: #5B5E6B;
  text-wrap: pretty;
}
.benefits-block-22 {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #F1F1F4;
  color: #111217;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .35s ease;
}
.benefits-block-22:hover {
  background: #E21F3A;
  color: #FFFFFF;
  transform: rotate(-6deg) scale(1.05);
}

/* ==========================================================
   FEATURES SECTION
   ========================================================== */
.features-section {
  position: relative;
  background: #0F1015;
  color: #FFFFFF;
  padding: clamp(80px,10vw,136px) clamp(20px,4vw,56px);
  overflow: hidden;
}
.features-block {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 70% at 100% 0%,rgba(226,31,58,.16) 0%,transparent 55%),radial-gradient(90% 60% at 0% 100%,rgba(120,30,60,.22) 0%,transparent 60%),linear-gradient(180deg,#101117 0%,#0C0D12 100%);
}
.features-block-2 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.2px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 45%,#000 25%,transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%,#000 25%,transparent 85%);
}
.features-block-3 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,transparent,rgba(226,31,58,.55),transparent);
}
.features-block-4 {
  position: absolute;
  top: clamp(24px,4vw,56px);
  left: -0.04em;
  font-size: clamp(90px,15vw,240px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.09);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.features-block-5 {
  position: absolute;
  left: -240px;
  top: 30%;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(226,31,58,.18),transparent 65%);
  pointer-events: none;
}
.features-block-6 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.features-block-7 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 16px;
}
.features-block-8 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #FF6B7D;
}
.features-title {
  margin: 0;
  max-width: 820px;
  font-size: clamp(32px,4vw,52px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.features-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #A3A6B4;
  max-width: 560px;
}
.features-block-9 {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: 16px;
}
.features-block-10 {
  grid-column: span 7;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(180deg,#191A21 0%,#141519 100%);
  border: 1px solid #262833;
  display: flex;
  flex-direction: column;
  transition: border-color .4s ease,transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease;
}
.features-block-10:hover {
  border-color: rgba(226,31,58,.55);
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(0,0,0,.4),0 0 50px rgba(226,31,58,.1);
}
.features-block-11 {
  padding: 28px 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.features-block-12 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.features-block-13 {
  display: flex;
  align-items: center;
  gap: 12px;
}
.features-label {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(226,31,58,.14);
  border: 1px solid rgba(226,31,58,.4);
  color: #FF6B7D;
  display: flex;
  align-items: center;
  justify-content: center;
}
.features-label-2 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #FF8FA0;
}
.features-block-14 {
  font-size: clamp(19px,1.8vw,23px);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.features-block-15 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.features-label-3 {
  padding: 6px 11px;
  border-radius: 8px;
  background: #1F2029;
  border: 1px solid #2A2C36;
  font-size: 12.5px;
  color: #C9CBD6;
  line-height: 1.4;
}
.features-block-16 {
  margin-top: auto;
  padding: 0 0 0 28px;
}
.features-block-17 {
  border-radius: 14px 0 0 0;
  border: 1px solid #2D2F3A;
  border-right: none;
  border-bottom: none;
  background: #FFFFFF;
  overflow: hidden;
  height: 200px;
  box-shadow: 0 -10px 40px rgba(0,0,0,.35);
}
.features-block-18 {
  display: flex;
  gap: 5px;
  padding: 8px 12px;
  background: #1E1F27;
}
.features-label-4 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF5F57;
}
.features-label-5 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FEBC2E;
}
.features-label-6 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #28C840;
}
.features-img {
  width: 118%;
  max-width: none;
  height: auto;
  transform-origin: top left;
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.features-img:hover {
  transform: translateY(-6%) scale(1.04);
}
.features-block-19 {
  grid-column: span 5;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(180deg,#191A21 0%,#141519 100%);
  border: 1px solid #262833;
  display: flex;
  flex-direction: column;
  transition: border-color .4s ease,transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease;
}
.features-block-19:hover {
  border-color: rgba(226,31,58,.55);
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(0,0,0,.4),0 0 50px rgba(226,31,58,.1);
}
.features-img-2 {
  width: 160%;
  max-width: none;
  height: auto;
  transform-origin: top left;
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.features-img-2:hover {
  transform: translateY(-6%) scale(1.04);
}
.features-block-20 {
  grid-column: span 4;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(180deg,#191A21 0%,#141519 100%);
  border: 1px solid #262833;
  display: flex;
  flex-direction: column;
  transition: border-color .4s ease,transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease;
}
.features-block-20:hover {
  border-color: rgba(226,31,58,.55);
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(0,0,0,.4),0 0 50px rgba(226,31,58,.1);
}
.features-img-3 {
  width: 150%;
  max-width: none;
  height: auto;
  transform-origin: top left;
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.features-img-3:hover {
  transform: translateY(-6%) scale(1.04);
}
.features-block-21 {
  grid-column: span 12;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(180deg,#191A21 0%,#141519 100%);
  border: 1px solid #262833;
  display: flex;
  flex-direction: column;
  transition: border-color .4s ease,transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease;
}
.features-block-21:hover {
  border-color: rgba(226,31,58,.55);
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(0,0,0,.4),0 0 50px rgba(226,31,58,.1);
}
.features-block-22 {
  border-radius: 14px 0 0 0;
  border: 1px solid #2D2F3A;
  border-right: none;
  border-bottom: none;
  background: #FFFFFF;
  overflow: hidden;
  height: 240px;
  box-shadow: 0 -10px 40px rgba(0,0,0,.35);
}
.features-img-4 {
  width: 100%;
  max-width: none;
  height: auto;
  transform-origin: top left;
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.features-img-4:hover {
  transform: translateY(-6%) scale(1.04);
}
.features-block-23 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap: 12px;
}
.features-block-24 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #17181F;
  border: 1px solid #262833;
  transition: all .3s ease;
}
.features-block-24:hover {
  border-color: rgba(226,31,58,.5);
  transform: translateY(-3px);
}
.features-label-7 {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(226,31,58,.14);
  color: #FF6B7D;
  display: flex;
  align-items: center;
  justify-content: center;
}
.features-label-8 {
  font-size: 14px;
  line-height: 1.4;
  color: #E6E7EE;
  font-weight: 500;
}

/* ==========================================================
   MOBILE SECTION
   ========================================================== */
.mobile-section {
  position: relative;
  background: #FFFFFF;
  padding: clamp(80px,10vw,136px) clamp(20px,4vw,56px);
  overflow: hidden;
}
.mobile-block {
  position: absolute;
  top: clamp(24px,4vw,56px);
  left: -0.04em;
  font-size: clamp(90px,15vw,240px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px #E6E6EC;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.mobile-block-2 {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: clamp(48px,6vw,96px);
  align-items: center;
}
.mobile-block-3 {
  display: flex;
  justify-content: center;
  position: relative;
}
.mobile-block-4 {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(226,31,58,.16),transparent 65%);
  top: 50%;
  left: 50%;
  margin: -210px 0 0 -210px;
}
.mobile-block-5 {
  position: relative;
  width: 300px;
  border-radius: 46px;
  background: #111217;
  padding: 11px;
  box-shadow: 0 40px 80px rgba(17,18,23,.25),0 0 0 1px #2A2C36;
}
.mobile-block-6 {
  border-radius: 36px;
  background: #F6F6F8;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mobile-block-7 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px 6px;
  font-size: 12px;
  font-weight: 600;
  color: #111217;
}
.mobile-label {
  width: 80px;
  height: 22px;
  border-radius: 12px;
  background: #111217;
}
.mobile-label-2 {
  font-size: 11px;
  color: #5B5E6B;
}
.mobile-block-8 {
  padding: 10px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mobile-block-9 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile-img {
  height: 18px;
  width: auto;
}
.mobile-label-3 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #FDE8EB;
  color: #C8192E;
  font-size: 10.5px;
  font-weight: 600;
}
.mobile-label-4 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E21F3A;
}
.mobile-block-10 {
  font-size: 18px;
  font-weight: 600;
  color: #111217;
}
.mobile-block-11 {
  padding: 12px;
  border-radius: 12px;
  background: #111217;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mobile-label-5 {
  width: 30px;
  height: 22px;
  border-radius: 4px;
  border: 1.5px solid #FFFFFF;
}
.mobile-block-12 {
  font-size: 12.5px;
  font-weight: 600;
}
.mobile-block-13 {
  font-size: 10.5px;
  color: #A3A6B4;
}
.mobile-block-14 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-label-6 {
  font-size: 10.5px;
  color: #5B5E6B;
  font-weight: 500;
}
.mobile-block-15 {
  padding: 9px 11px;
  border-radius: 9px;
  background: #FFFFFF;
  border: 1px solid #E4E4EA;
  font-size: 12.5px;
  color: #111217;
}
.mobile-block-16 {
  padding: 9px 11px;
  border-radius: 9px;
  background: #FFFFFF;
  border: 1.5px solid #E21F3A;
  font-size: 12.5px;
  color: #111217;
}
.mobile-label-7 {
  color: #E21F3A;
}
.mobile-block-17 {
  padding: 9px 11px;
  border-radius: 9px;
  background: #FFF6E0;
  border: 1px solid #F6D58A;
  font-size: 11px;
  color: #7A5300;
  line-height: 1.45;
}
.mobile-block-18 {
  display: flex;
  gap: 6px;
}
.mobile-label-8 {
  flex: 1;
  text-align: center;
  padding: 7px 0;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid #E4E4EA;
  font-size: 11.5px;
  color: #5B5E6B;
}
.mobile-label-9 {
  flex: 1;
  text-align: center;
  padding: 7px 0;
  border-radius: 8px;
  background: #E21F3A;
  font-size: 11.5px;
  color: #FFFFFF;
  font-weight: 600;
}
.mobile-block-19 {
  padding: 11px;
  border-radius: 10px;
  background: #E21F3A;
  color: #FFFFFF;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}
.mobile-block-20 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 9px;
  background: #111217;
  color: #FFFFFF;
  font-size: 10.5px;
}
.mobile-label-10 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FBBF24;
  flex-shrink: 0;
}
.mobile-block-21 {
  position: absolute;
  right: max(0px,calc(50% - 260px));
  top: 70px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 18px 40px rgba(17,18,23,.14);
  border: 1px solid #ECECF1;
  font-size: 12.5px;
  color: #111217;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mobile-label-11 {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22C55E;
}
.mobile-label-12 {
  color: #5B5E6B;
}
.mobile-block-22 {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.mobile-block-23 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mobile-block-24 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #C8192E;
}
.mobile-title {
  margin: 0;
  font-size: clamp(32px,4vw,52px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.025em;
  color: #111217;
  text-wrap: balance;
}
.mobile-text {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: #5B5E6B;
  text-wrap: pretty;
}
.mobile-block-25 {
  padding: 22px;
  border-radius: 18px;
  background: #F7F7F9;
  border: 1px solid #ECECF1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mobile-block-26 {
  font-size: 14px;
  font-weight: 600;
  color: #111217;
}
.mobile-block-27 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mobile-capture-chip {
  padding: 9px 14px;
  border-radius: 10px;
  background: #FFFFFF;
  color: #5B5E6B;
  border: 1px solid #E4E4EA;
  font-size: 13.5px;
  font-weight: 500;
  transform: scale(1);
  transition: all .4s cubic-bezier(.2,.7,.2,1);
}
.mobile-block-28 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap: 18px 28px;
}
.mobile-block-29 {
  display: flex;
  gap: 14px;
}
.mobile-label-13 {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #FDE8EB;
  color: #E21F3A;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
}
.mobile-label-13:hover {
  background: #E21F3A;
  color: #FFFFFF;
  transform: rotate(-6deg);
}
.mobile-block-30 {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mobile-block-31 {
  font-size: 15px;
  font-weight: 600;
  color: #111217;
}
.mobile-block-32 {
  font-size: 13.5px;
  line-height: 1.55;
  color: #5B5E6B;
}
.mobile-label-14 {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #F1F1F4;
  color: #111217;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
}
.mobile-label-14:hover {
  background: #E21F3A;
  color: #FFFFFF;
  transform: rotate(-6deg);
}

/* ==========================================================
   AI SECTION
   ========================================================== */
.ai-section {
  position: relative;
  background: #0F1015;
  color: #FFFFFF;
  padding: clamp(80px,10vw,136px) clamp(20px,4vw,56px);
  overflow: hidden;
}
.ai-block {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 70% at 100% 0%,rgba(226,31,58,.16) 0%,transparent 55%),radial-gradient(90% 60% at 0% 100%,rgba(120,30,60,.22) 0%,transparent 60%),linear-gradient(180deg,#101117 0%,#0C0D12 100%);
}
.ai-block-2 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.2px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 45%,#000 25%,transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%,#000 25%,transparent 85%);
}
.ai-block-3 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,transparent,rgba(226,31,58,.55),transparent);
}
.ai-block-4 {
  position: absolute;
  top: clamp(24px,4vw,56px);
  right: -0.04em;
  font-size: clamp(90px,15vw,240px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.09);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.ai-block-5 {
  position: absolute;
  right: -220px;
  top: 0;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(226,31,58,.2),transparent 65%);
  pointer-events: none;
}
.ai-block-6 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.ai-block-7 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
}
.ai-block-8 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.ai-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #FF6B7D;
}
.ai-title {
  margin: 0;
  font-size: clamp(32px,4vw,52px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.ai-text {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: #A3A6B4;
  text-wrap: pretty;
}
.ai-block-9 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}
.ai-block-10 {
  border-radius: 22px;
  background: #17181F;
  border: 1px solid #262833;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  transition: border-color .35s ease,transform .35s ease;
}
.ai-block-10:hover {
  border-color: rgba(226,31,58,.6);
  transform: translateY(-4px);
}
.ai-block-11 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-block-12 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #FF6B7D;
}
.ai-block-13 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
}
.ai-text-2 {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: #A3A6B4;
}
.ai-block-14 {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #2A2C36;
  aspect-ratio: 16/9;
  background: #FFFFFF;
}
.ai-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.ai-img:hover {
  transform: scale(1.06);
}
.ai-img-2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.ai-img-2:hover {
  transform: scale(1.06);
}
.ai-block-15 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap: 16px;
}
.ai-block-16 {
  border-radius: 20px;
  background: #17181F;
  border: 1px solid #262833;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all .35s ease;
}
.ai-block-16:hover {
  border-color: rgba(226,31,58,.6);
  background: #1B1C24;
  transform: translateY(-4px);
}
.ai-block-17 {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(226,31,58,.14);
  border: 1px solid rgba(226,31,58,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF6B7D;
}
.ai-block-18 {
  font-size: 18px;
  font-weight: 600;
}
.ai-text-3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #A3A6B4;
}
.ai-block-19 {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}
.ai-block-20 {
  border-radius: 26px;
  background: linear-gradient(135deg,#1A1B23,#14151B);
  border: 1px solid #262833;
  padding: clamp(28px,4vw,48px);
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(28px,4vw,56px);
  align-items: center;
}
.ai-block-21 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ai-block-22 {
  font-size: clamp(24px,2.6vw,32px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.ai-block-23 {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  color: #D5D7E0;
  line-height: 1.5;
}
.ai-label-2 {
  color: #E21F3A;
}
.ai-block-24 {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #2A2C36;
  aspect-ratio: 16/10;
  background: #FFFFFF;
}
.ai-img-3 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.ai-img-3:hover {
  transform: scale(1.05);
}
.ai-block-25 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.ai-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding: 0 7px 0 24px;
  border-radius: 10px;
  background: linear-gradient(180deg,#EE2D48 0%,#D41A33 100%);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28),0 0 0 1px rgba(226,31,58,.55),0 12px 32px rgba(226,31,58,.38);
  transition: all .3s cubic-bezier(.2,.7,.2,1);
}
.ai-link:hover {
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32),0 0 0 4px rgba(226,31,58,.22),0 18px 44px rgba(226,31,58,.55);
}
.ai-label-3 {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ai-label-4 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(255,255,255,.22);
}
.ai-label-5 {
  width: 42px;
  height: 42px;
  border-radius: 7px;
  background: #FFFFFF;
  color: #E21F3A;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-link-2 {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 24px;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: all .25s ease;
}
.ai-link-2:hover {
  border-color: #FFFFFF;
  background: rgba(255,255,255,.09);
  color: #FFFFFF;
  transform: translateY(-3px);
}
.ai-img-4 {
  height: 20px;
  width: auto;
}

/* ==========================================================
   GALLERY SECTION
   ========================================================== */
.gallery-section {
  position: relative;
  background: #FFFFFF;
  padding: clamp(80px,10vw,136px) clamp(20px,4vw,56px);
  overflow: hidden;
}
.gallery-block {
  position: absolute;
  top: clamp(24px,4vw,56px);
  right: -0.04em;
  font-size: clamp(90px,15vw,240px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px #E6E6EC;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.gallery-block-2 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.gallery-block-3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.gallery-block-4 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 680px;
}
.gallery-block-5 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #C8192E;
}
.gallery-title {
  margin: 0;
  font-size: clamp(32px,4vw,52px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.025em;
  color: #111217;
  text-wrap: balance;
}
.gallery-block-6 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gallery-prev-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #E4E4EA;
  background: #FFFFFF;
  color: #111217;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s ease;
}
.gallery-prev-btn:hover {
  background: #111217;
  border-color: #111217;
  color: #FFFFFF;
}
.gallery-next-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: #E21F3A;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s ease;
  box-shadow: 0 8px 20px rgba(226,31,58,.3);
}
.gallery-next-btn:hover {
  background: #C8192E;
  transform: translateX(2px);
}
.gallery-block-7 {
  display: grid;
  grid-template-columns: minmax(0,1fr) 300px;
  gap: 20px;
  align-items: stretch;
}
.gallery-stage {
  position: relative;
  border-radius: 22px;
  background: #F3F4F8;
  border: 1px solid #ECECF1;
  padding: clamp(10px,1.4vw,18px);
  cursor: zoom-in;
  transition: box-shadow .4s ease;
}
.gallery-stage:hover {
  box-shadow: 0 30px 60px rgba(17,18,23,.12);
}
.gallery-block-8 {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
  aspect-ratio: 1910 / 944;
  box-shadow: 0 10px 30px rgba(17,18,23,.08);
}
.gallery-stage-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .6s ease,transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.gallery-label {
  position: absolute;
  right: 30px;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(17,18,23,.86);
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 500;
  backdrop-filter: blur(6px);
}
.gallery-block-9 {
  border-radius: 22px;
  background: #111217;
  color: #FFFFFF;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  position: relative;
  overflow: hidden;
}
.gallery-block-10 {
  position: absolute;
  right: -60px;
  top: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(226,31,58,.35),transparent 70%);
}
.gallery-block-11 {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #E21F3A;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(226,31,58,.4);
}
.gallery-block-12 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gallery-current-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.015em;
}
.gallery-current-desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: #A3A6B4;
}
.gallery-block-13 {
  position: relative;
  display: flex;
  gap: 5px;
}
.gallery-progress-dot {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: #2A2C36;
  transition: background .4s ease;
}
.gallery-block-14 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(100%,108px),1fr));
  gap: 12px;
}
.gallery-thumb {
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
}
.gallery-thumb-frame {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #F3F4F8;
  border: 2px solid #ECECF1;
  opacity: 0.6;
  transition: all .35s ease;
}
.gallery-thumb-frame:hover {
  opacity: 1;
  transform: translateY(-3px);
}
.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
.gallery-thumb-label {
  font-size: 12px;
  font-weight: 400;
  color: #5B5E6B;
  line-height: 1.35;
  transition: color .3s ease;
}

/* ==========================================================
   TECH SECTION
   ========================================================== */
.tech-section {
  position: relative;
  background: #0F1015;
  color: #FFFFFF;
  padding: clamp(80px,10vw,136px) clamp(20px,4vw,56px);
  overflow: hidden;
}
.tech-block {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 70% at 100% 0%,rgba(226,31,58,.16) 0%,transparent 55%),radial-gradient(90% 60% at 0% 100%,rgba(120,30,60,.22) 0%,transparent 60%),linear-gradient(180deg,#101117 0%,#0C0D12 100%);
}
.tech-block-2 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.2px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 45%,#000 25%,transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%,#000 25%,transparent 85%);
}
.tech-block-3 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,transparent,rgba(226,31,58,.55),transparent);
}
.tech-block-4 {
  position: absolute;
  top: clamp(24px,4vw,56px);
  left: -0.04em;
  font-size: clamp(90px,15vw,240px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.09);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.tech-block-5 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.tech-block-6 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 40px;
  align-items: end;
}
.tech-block-7 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tech-block-8 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #FF6B7D;
}
.tech-title {
  margin: 0;
  font-size: clamp(32px,4vw,52px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.tech-text {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: #A3A6B4;
}
.tech-block-9 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
}
.tech-block-10 {
  padding: 20px;
  border-radius: 18px;
  background: #17181F;
  border: 1px solid #262833;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all .3s ease;
}
.tech-block-10:hover {
  border-color: rgba(226,31,58,.5);
  transform: translateY(-3px);
}
.tech-label {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(226,31,58,.14);
  border: 1px solid rgba(226,31,58,.4);
  color: #FF6B7D;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tech-block-11 {
  font-size: clamp(34px,4vw,48px);
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1;
}
.tech-block-12 {
  font-size: 13px;
  color: #A3A6B4;
  margin-top: 8px;
}
.tech-label-2 {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tech-block-13 {
  font-size: clamp(34px,4vw,48px);
  font-weight: 600;
  color: #E21F3A;
  line-height: 1;
}
.tech-block-14 {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 12px;
}
.tech-block-15 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: 18px;
  background: #17181F;
  border: 1px solid #262833;
  transition: all .3s ease;
}
.tech-block-15:hover {
  border-color: rgba(226,31,58,.5);
  background: #1B1C24;
  transform: translateY(-4px);
}
.tech-block-16 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tech-label-3 {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #8C8FA0;
}
.tech-label-4 {
  font-size: 15px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.45;
}
.tech-block-17 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}
.tech-block-18 {
  border-radius: 22px;
  background: #17181F;
  border: 1px solid #262833;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tech-block-19 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tech-label-5 {
  font-size: 18px;
  font-weight: 600;
}
.tech-label-6 {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(226,31,58,.15);
  color: #FF8FA0;
  font-size: 12px;
  font-weight: 500;
}
.tech-block-20 {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid #262833;
  font-size: 14px;
}
.tech-label-7 {
  font-weight: 500;
  color: #FFFFFF;
  flex-shrink: 0;
}
.tech-label-8 {
  color: #A3A6B4;
  text-align: right;
  line-height: 1.5;
}
.tech-label-9 {
  padding: 4px 10px;
  border-radius: 999px;
  background: #22232C;
  color: #B4B7C4;
  font-size: 12px;
  font-weight: 500;
}
.tech-block-21 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-top: 1px solid #262833;
  font-size: 14px;
}
.tech-label-10 {
  font-weight: 500;
  color: #FFFFFF;
}
.tech-label-11 {
  color: #8C8FA0;
  font-weight: 400;
}
.tech-label-12 {
  color: #A3A6B4;
  font-size: 13px;
  line-height: 1.5;
}
.tech-block-22 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: flex-start;
  padding: 20px 24px;
  border-radius: 16px;
  border: 1px dashed #3A3C4A;
  font-size: 13.5px;
  line-height: 1.65;
  color: #B4B7C4;
}
.tech-label-13 {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 6px;
  background: #FBBF24;
  color: #111217;
  font-weight: 600;
  font-size: 12px;
}
.tech-label-14 {
  flex: 1;
  min-width: 240px;
}

/* ==========================================================
   AUDIENCE SECTION
   ========================================================== */
.audience-section {
  position: relative;
  background: #FFFFFF;
  padding: clamp(80px,10vw,136px) clamp(20px,4vw,56px);
  overflow: hidden;
}
.audience-block {
  position: absolute;
  top: clamp(24px,4vw,56px);
  right: -0.04em;
  font-size: clamp(90px,15vw,240px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px #E6E6EC;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.audience-block-2 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.audience-block-3 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}
.audience-block-4 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #C8192E;
}
.audience-title {
  margin: 0;
  font-size: clamp(32px,4vw,52px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.025em;
  color: #111217;
  text-wrap: balance;
}
.audience-block-5 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,215px),1fr));
  gap: 14px;
}
.audience-block-6 {
  position: relative;
  border-radius: 22px;
  background: #FFFFFF;
  border: 1px solid #ECECF1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: all .4s cubic-bezier(.2,.7,.2,1);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(17,18,23,.04);
}
.audience-block-6:hover {
  border-color: #F5B5BF;
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(17,18,23,.09);
}
.audience-block-7 {
  position: absolute;
  right: -40px;
  top: -40px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(226,31,58,.08),transparent 70%);
  pointer-events: none;
}
.audience-block-8 {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.audience-block-9 {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: #FDE8EB;
  border: 1px solid #F9CDD4;
  color: #E21F3A;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .35s ease;
}
.audience-block-9:hover {
  background: #E21F3A;
  color: #FFFFFF;
  transform: rotate(-6deg);
}
.audience-label {
  padding: 4px 10px;
  border-radius: 999px;
  background: #F4F4F7;
  font-size: 12px;
  font-weight: 600;
  color: #5B5E6B;
  white-space: nowrap;
}
.audience-block-10 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.audience-block-11 {
  font-size: 16.5px;
  font-weight: 600;
  color: #111217;
  line-height: 1.35;
  text-wrap: balance;
}
.audience-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #5B5E6B;
  text-wrap: pretty;
}
.audience-block-12 {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: #F1F1F4;
  border: 1px solid #E4E4EA;
  color: #111217;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .35s ease;
}
.audience-block-12:hover {
  background: #E21F3A;
  color: #FFFFFF;
  transform: rotate(-6deg);
}
.audience-block-13 {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #111217;
  padding: clamp(22px,3vw,32px);
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap: 14px 20px;
  align-items: center;
}
.audience-block-14 {
  position: absolute;
  left: -60px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(226,31,58,.3),transparent 70%);
  pointer-events: none;
}
.audience-block-15 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.audience-label-2 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #FF6B7D;
}
.audience-label-3 {
  font-size: 20px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.audience-block-16 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  transition: all .3s ease;
}
.audience-block-16:hover {
  border-color: rgba(226,31,58,.5);
  background: rgba(226,31,58,.06);
}
.audience-label-4 {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(226,31,58,.16);
  color: #FF6B7D;
  display: flex;
  align-items: center;
  justify-content: center;
}
.audience-block-17 {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.audience-label-5 {
  font-size: 14.5px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.35;
}
.audience-label-6 {
  font-size: 13px;
  color: #A3A6B4;
  line-height: 1.5;
}

/* ==========================================================
   CUSTOMISE SECTION
   ========================================================== */
.customise-section {
  position: relative;
  background: #0F1015;
  color: #FFFFFF;
  padding: clamp(80px,10vw,136px) clamp(20px,4vw,56px);
  overflow: hidden;
}
.customise-block {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 70% at 100% 0%,rgba(226,31,58,.16) 0%,transparent 55%),radial-gradient(90% 60% at 0% 100%,rgba(120,30,60,.22) 0%,transparent 60%),linear-gradient(180deg,#101117 0%,#0C0D12 100%);
}
.customise-block-2 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.2px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 45%,#000 25%,transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%,#000 25%,transparent 85%);
}
.customise-block-3 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,transparent,rgba(226,31,58,.55),transparent);
}
.customise-block-4 {
  position: absolute;
  top: clamp(24px,4vw,56px);
  left: -0.04em;
  font-size: clamp(90px,15vw,240px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.09);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.customise-block-5 {
  position: absolute;
  right: -200px;
  top: 10%;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(226,31,58,.2),transparent 62%);
  pointer-events: none;
}
.customise-block-6 {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(40px,5vw,72px);
  align-items: center;
}
.customise-block-7 {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.customise-block-8 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.customise-block-9 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #FF6B7D;
}
.customise-title {
  margin: 0;
  font-size: clamp(32px,4vw,52px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.customise-label {
  color: #E21F3A;
}
.customise-text {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: #A3A6B4;
  max-width: 540px;
  text-wrap: pretty;
}
.customise-block-10 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}
.customise-block-11 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #17181F;
  border: 1px solid #262833;
  transition: all .3s ease;
}
.customise-block-11:hover {
  border-color: rgba(226,31,58,.55);
  transform: translateY(-3px);
}
.customise-label-2 {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(226,31,58,.14);
  border: 1px solid rgba(226,31,58,.4);
  color: #FF6B7D;
  display: flex;
  align-items: center;
  justify-content: center;
}
.customise-label-3 {
  font-size: 14px;
  font-weight: 500;
  color: #E6E7EE;
  line-height: 1.4;
}
.customise-label-4 {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.customise-block-12 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.customise-block-13 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
}
.modify-tool-tab {
  position: relative;
  height: 96px;
  border-radius: 16px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  opacity: 0.5;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
  transform: none;
  transition: all .4s cubic-bezier(.2,.7,.2,1);
}
.modify-tool-tab:hover {
  opacity: 1;
}
.customise-img {
  height: 84px;
  width: auto;
  max-width: 92%;
  object-fit: contain;
}
.customise-block-14 {
  border-radius: 20px;
  background: #14151B;
  border: 1px solid #2A2C36;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,.5);
}
.customise-block-15 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid #2A2C36;
  background: #17181F;
}
.customise-block-16 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.customise-block-17 {
  display: flex;
  gap: 6px;
}
.customise-label-5 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FF5F57;
}
.customise-label-6 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FEBC2E;
}
.customise-label-7 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #28C840;
}
.customise-label-8 {
  font-size: 12.5px;
  color: #A3A6B4;
}
.customise-label-9 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: #D5D7E0;
}
.customise-label-10 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22C55E;
  animation: pulseG 1.8s infinite;
}
.customise-block-18 {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 290px;
}
.customise-block-19 {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.customise-label-11 {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #E21F3A;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.customise-block-20 {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #1E1F27;
  border: 1px solid #2A2C36;
  font-size: 14.5px;
  line-height: 1.55;
  color: #FFFFFF;
  min-height: 48px;
}
.customise-label-12 {
  display: inline-block;
  width: 2px;
  height: 16px;
  margin-left: 2px;
  vertical-align: -3px;
  background: #FF6B7D;
  animation: twinkle 1s steps(2) infinite;
}
.customise-block-21 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 40px;
}
.modify-terminal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #1A1B22;
  font-size: 13px;
  color: #D5D7E0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease,transform .4s cubic-bezier(.2,.7,.2,1);
}
.modify-terminal-mark {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  font-weight: 600;
  color: #FBBF24;
}
.modify-terminal-file {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================
   FOOTER SECTION
   ========================================================== */
.footer-section {
  background: #FFFFFF;
  border-top: 1px solid #ECECF1;
  padding: 26px clamp(20px,4vw,56px);
}
.footer-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
}
.footer-block-2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}
.footer-img {
  height: 26px;
  width: auto;
}
.footer-block-3 {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
}
.footer-label {
  font-size: 13px;
  color: #5B5E6B;
  line-height: 1.5;
  min-width: 0;
  text-wrap: pretty;
}
.back-to-top-btn {
  position: fixed;
  right: clamp(16px,2.5vw,32px);
  bottom: clamp(16px,2.5vw,32px);
  z-index: 60;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: none;
  background: #111217;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
  box-shadow: 0 10px 24px rgba(17,18,23,.18);
}
.back-to-top-btn:hover {
  background: #E21F3A;
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(226,31,58,.35);
}
.footer-icon {
  position: absolute;
  inset: 0;
}
.footer-icon-2 {
  position: relative;
}

/* ==========================================================
   INTERACTIVE STATES (toggled by js/main.js)
   ========================================================== */
.mobile-capture-chip.is-on { background: #E21F3A; color: #FFFFFF; border-color: #E21F3A; }
.mobile-capture-chip.is-pop { transform: scale(1.07); }
.gallery-stage-img.is-active { opacity: 1; transform: scale(1); }
.gallery-progress-dot.is-done { background: rgba(226,31,58,.45); }
.gallery-progress-dot.is-active { background: #E21F3A; }
.gallery-thumb.is-active .gallery-thumb-frame { border-color: #E21F3A; opacity: 1; }
.gallery-thumb.is-active .gallery-thumb-label { font-weight: 600; color: #111217; }
.modify-tool-tab.is-active { opacity: 1; box-shadow: 0 0 0 3px #E21F3A, 0 18px 40px rgba(226,31,58,.3); transform: translateY(-4px); }
.modify-terminal-row.is-visible { opacity: 1; transform: translateY(0); }
.modify-terminal-row.is-ok { background: rgba(34,197,94,.1); color: #86EFAC; }
.modify-terminal-row.is-add .modify-terminal-mark, .modify-terminal-row.is-ok .modify-terminal-mark { color: #4ADE80; }
.back-to-top-btn.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top-btn.is-visible:hover { transform: translateY(-4px); }

/* Keep "Buy from" + Vibe96 logo on one line everywhere */
a[href="https://vibe96.com/"] { white-space: nowrap; flex-shrink: 0; }

/* ==========================================================
   LIGHTBOX
   ========================================================== */
.lightbox-section { position: fixed; inset: 0; z-index: 100; background: rgba(10,10,14,.92); backdrop-filter: blur(6px); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; }
.lightbox-section.is-open { display: flex; }
.lightbox-img { max-width: min(92vw,1500px); max-height: 78vh; width: auto; height: auto; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox-controls { display: flex; align-items: center; gap: 16px; color: #FFFFFF; }
.lightbox-caption { text-align: center; min-width: min(220px, 50vw); }
.lightbox-title { font-size: 16px; font-weight: 600; }
.lightbox-count { font-size: 13px; color: #A3A6B4; }
.lightbox-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #FFFFFF; font-size: 18px; cursor: pointer; }
.lightbox-btn:hover { background: #E21F3A; border-color: #E21F3A; }
.lightbox-close { position: absolute; top: 20px; right: 20px; font-size: 20px; }

/* ==========================================================
   RESPONSIVE BREAKPOINTS
   ========================================================== */
@media (max-width: 1279px) {
  .header-nav { display: none; }
  .header-burger { display: flex; }
  .header-section.is-menu-open .mobile-menu { display: block; }
}
@media (max-width: 559px) {
  .header-vibe-btn { display: none; }
}
@media (max-width: 479px) {
  .hero-block-5 { flex-wrap: wrap; }
}

@media (max-width: 1079px) {
  .hero-block-2 {
    grid-template-columns: minmax(0,1fr);
  }
  .benefits-block-6 {
    grid-template-columns: minmax(0,1fr);
  }
  .features-block-9 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .features-block-10 {
    grid-column: span 1;
  }
  .features-img {
    width: 150%;
  }
  .features-block-19 {
    grid-column: span 1;
  }
  .features-img-2 {
    width: 150%;
  }
  .features-block-20 {
    grid-column: span 1;
  }
  .features-block-21 {
    grid-column: span 2;
  }
  .features-block-22 {
    height: 200px;
  }
  .features-img-4 {
    width: 150%;
  }
  .tech-block-14 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .customise-block-6 {
    grid-template-columns: minmax(0,1fr);
  }
}

@media (max-width: 959px) {
  .mobile-block-2 {
    grid-template-columns: minmax(0,1fr);
  }
  .gallery-block-7 {
    grid-template-columns: minmax(0,1fr);
  }
}

@media (max-width: 899px) {
  .ai-block-9 {
    grid-template-columns: minmax(0,1fr);
  }
  .ai-block-20 {
    grid-template-columns: minmax(0,1fr);
  }
  .tech-block-6 {
    grid-template-columns: minmax(0,1fr);
  }
  .tech-block-17 {
    grid-template-columns: minmax(0,1fr);
  }
}

@media (max-width: 719px) {
  .features-block-9 {
    grid-template-columns: minmax(0,1fr);
  }
  .features-block-10 {
    grid-column: auto;
  }
  .features-block-19 {
    grid-column: auto;
  }
  .features-block-20 {
    grid-column: auto;
  }
  .features-block-21 {
    grid-column: auto;
  }
  .tech-block-14 {
    grid-template-columns: minmax(0,1fr);
  }
}

@media (max-width: 639px) {
  .benefits-block-16 {
    grid-template-columns: minmax(0,1fr);
  }
}

@media (max-width: 519px) {
  .customise-block-10 {
    grid-template-columns: minmax(0,1fr);
  }
}

/* Large & extra-large screens: keep type proportional — all fluid
   clamp() sizes reach their maximum by ~1320px, so 1660–1920px renders
   at the designed scale inside the centred 1760px container. */
@media (min-width: 1920px) {
  .site-container { max-width: 1760px; }
}