/* ==========================================================================
   SMARTCARE HOMEPAGE (.svp) - RESTORED 1:1 SOURCE FROM html/home.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   HOMEPAGE SECTION 1
   -------------------------------------------------------------------------- */
/* ===================== SCOPED APPLE-STYLE THEME (.svp) ===================== */
.svp,.svp *{box-sizing:border-box;margin:0;padding:0}
.svp{
  --blk:#000; --pg:#0a0a0c; --pg2:#101014; --wht:#f5f5f7; --grey:#a1a1a6; --ash:#6e6e73; --line:rgba(255,255,255,.12);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter','Segoe UI',Roboto,Arial,sans-serif;
  color:var(--wht);line-height:1.4;-webkit-font-smoothing:antialiased;background:#000;overflow-x:hidden;
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);
}
.svp a{text-decoration:none;color:inherit}
.svp img{max-width:100%;display:block}
.svp .wrap{max-width:1120px;margin:0 auto;padding:0 22px;position:relative;z-index:2}
.svp .narrow{max-width:840px}
.svp h1,.svp h2,.svp h3{line-height:1.06;letter-spacing:-.02em;font-weight:700}
.svp .eyebrow{display:block;font-size:19px;font-weight:600;letter-spacing:0;color:#2997ff;margin-bottom:8px}
.svp .kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);margin-bottom:16px}
/* buttons - Apple pill */
.svp .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:980px;font-weight:500;font-size:16px;cursor:pointer;border:1px solid transparent;transition:transform .2s,background .2s,color .2s,opacity .2s;line-height:1}
.svp .btn-blue{background:#2997ff;color:#fff}
.svp .btn-blue:hover{background:#0077ed}
.svp .btn-light{background:#f5f5f7;color:#000}
.svp .btn-light:hover{background:#e2e2e6}
.svp .btn-ghost{background:transparent;color:#2997ff;border-color:transparent;padding:12px 6px}
.svp .btn-ghost:hover{text-decoration:underline}
.svp .btn-outline{background:transparent;color:#f5f5f7;border-color:rgba(255,255,255,.4)}
.svp .btn-outline:hover{background:#f5f5f7;color:#000;border-color:#f5f5f7}
.svp .btn svg{width:17px;height:17px}
.svp .chev{font-size:15px}
/* sections */
.svp-sec{padding:110px 0;position:relative}
.svp-sec.tight{padding:80px 0}
.svp-sec.plain{background:#000}
.svp-sec.panel{background:#101014}
.svp-sec.white{background:#fbfbfd;color:#1d1d1f}
.svp-sec.white .kicker{color:#6e6e73}
.svp-shead{text-align:center;max-width:760px;margin:0 auto 60px}
.svp-shead h2{font-size:clamp(32px,5.4vw,56px);font-weight:700}
.svp-shead p{color:var(--grey);font-size:clamp(17px,2.2vw,21px);margin-top:16px;font-weight:400}
.svp-sec.white .svp-shead p{color:#6e6e73}
/* reveal motion */
.svp.svp-anim .rv{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.svp.svp-anim .rv.in{opacity:1;transform:none}
.svp .rv.d1{transition-delay:.1s}.svp .rv.d2{transition-delay:.2s}.svp .rv.d3{transition-delay:.3s}
/* ---------- HERO ---------- */
.svp-hero{position:relative;height:100vh;min-height:640px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;overflow:hidden;background:#000;padding-top:16vh}
.svp-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0.45}
.svp-hero .grad{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.45) 35%,rgba(0,0,0,0.6) 65%,#000 100%)}
.svp-hero .wrap{z-index:3}
.svp-hero .brandline{font-size:15px;font-weight:600;letter-spacing:.02em;color:#f5f5f7;margin-bottom:10px;opacity:.9}
.svp-hero h1{font-size:clamp(44px,10vw,104px);font-weight:700;letter-spacing:-.03em;color:#f5f5f7;line-height:.98}
.svp-hero .tag{font-size:clamp(19px,3vw,28px);font-weight:600;color:#f5f5f7;margin-top:14px}
.svp-hero .lead{font-size:clamp(15px,2vw,19px);color:#d6d6d8;max-width:40ch;margin:16px auto 0;font-weight:400}
.svp-hero .cta-row{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;margin-top:26px}
.svp-hero .cta-row .btn-ghost{font-size:19px;color:#2997ff}
.svp-hero .cta-row .btn-ghost:hover{text-decoration:underline}
.svp-hero .scroll-price{margin-top:auto;margin-bottom:32px;z-index:3;color:#f5f5f7;font-size:14px;opacity:.85}
/* ---------- HIGHLIGHTS TICKER ---------- */
.svp-hl{background:#000;padding:0 0 30px}
.svp-hl .band{display:flex;gap:34px;overflow-x:auto;padding:0;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.svp-hl .band::-webkit-scrollbar{display:none}
.svp-hl .hi{scroll-snap-align:center;flex:0 0 auto;display:flex;align-items:center;gap:12px;color:#f5f5f7;font-size:19px;font-weight:600}
.svp-hl .hi b{color:#2997ff;font-size:28px;font-weight:700;letter-spacing:-.02em}
.svp-hl .hi .u{color:var(--grey);font-weight:500;font-size:16px}
/* ---------- STICKY STORY ---------- */
.svp-story{position:relative;background:#000}
.svp-story .stack{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:start}
.svp-story .media{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 90% at 50% 30%,#1a1a20 0,#000 78%)}
.svp-story .media img{max-height:78vh;width:auto;object-fit:contain;filter:drop-shadow(0 40px 80px rgba(0,0,0,.6));transition:opacity .5s}
.svp-story .steps{padding:14vh 0}
.svp-story .step{min-height:82vh;display:flex;flex-direction:column;justify-content:center;padding:0 8% 0 4%}
.svp-story .step .big{font-size:clamp(34px,4.6vw,60px);font-weight:700;letter-spacing:-.02em;line-height:1.02;margin-bottom:18px}
.svp-story .step .big em{font-style:normal;color:#2997ff}
.svp-story .step p{color:var(--grey);font-size:clamp(16px,1.9vw,20px);font-weight:400;max-width:34ch}
/* ---------- BIG SPEC NUMERALS ---------- */
.svp-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.svp-nums .n{text-align:left;padding:30px;border-radius:22px;background:#101014;border:1px solid var(--line)}
.svp-nums .n .big{font-size:clamp(40px,6vw,72px);font-weight:700;letter-spacing:-.03em;background:linear-gradient(180deg,#fff,#a1a1a6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display: flex;align-items: center;gap: 5px;}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.svp-nums .n .big{-webkit-text-fill-color:#fff;color:#fff}}
.svp-nums .n .u{color:var(--grey);font-size:15px;font-weight:500;margin-top:8px}
/* ---------- NEW MODELS ---------- */
.svp-new{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.svp-newcard{position:relative;border-radius:26px;overflow:hidden;color:#f5f5f7;display:flex;flex-direction:column;background:#0e0e12;border:1px solid rgba(255,255,255,.09)}
.svp-newcard .nm-media{position:relative;height:340px;background:radial-gradient(120% 120% at 50% 16%,#1d1d24 0,#0b0b0e 82%);display:flex;align-items:center;justify-content:center;overflow:hidden}
.svp-newcard .nm-media img{width:100%;height:100%;object-fit:contain;padding:26px;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.svp-newcard:hover .nm-media img{transform:scale(1.06)}
.svp-newcard .nb{position:absolute;top:20px;left:20px;background:#f5f5f7;color:#000;font-size:11px;font-weight:800;letter-spacing:.1em;padding:6px 12px;border-radius:999px;z-index:5}
.svp-newcard .nm-body{padding:32px}
.svp-newcard h3{font-size:32px;margin-bottom:6px;font-weight:700}
.svp-newcard .sub{color:var(--grey);font-size:15px;margin-bottom:18px}
.svp-newcard .specs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.svp-newcard .specs span{font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.svp-newcard .acts{display:flex;gap:12px;flex-wrap:wrap}
/* ---------- TAKE A CLOSER LOOK (gallery) ---------- */
.svp-look{background:#000}
.svp-look .stage{position:relative;border-radius:28px;overflow:hidden;background:radial-gradient(120% 100% at 50% 20%,#1a1a20 0,#000 80%);min-height:520px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.svp-look .stage img{max-height:480px;width:auto;object-fit:contain;transition:opacity .5s,transform .6s cubic-bezier(.16,1,.3,1);filter:drop-shadow(0 40px 70px rgba(0,0,0,.55))}
.svp-look .stage img.hide{opacity:0;position:absolute;transform:scale(.96)}
.svp-look .caption{text-align:center;margin:24px auto 0;max-width:46ch;color:var(--grey);font-size:16px;min-height:44px;transition:opacity .3s}
.svp-look .swatches{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.svp-look .sw{cursor:pointer;background:#101014;border:1px solid var(--line);border-radius:16px;padding:10px 16px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .2s,transform .2s;min-width:96px}
.svp-look .sw:hover{transform:translateY(-2px)}
.svp-look .sw.on{border-color:#2997ff;box-shadow:0 0 0 1px #2997ff}
.svp-look .sw .dot{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.25)}
.svp-look .sw .lb{font-size:12.5px;font-weight:600;color:#f5f5f7}
/* ---------- FEATURE (full-bleed video) ---------- */
.svp-feat{position:relative;height:96vh;min-height:600px;display:flex;align-items:flex-end;justify-content:flex-start;overflow:hidden;background:#000}
.svp-feat video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.svp-feat .ov{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.1) 46%,rgba(0,0,0,.35) 100%)}
.svp-feat .wrap{z-index:3;padding-bottom:64px}
.svp-feat .kicker{color:#2997ff}
.svp-feat h2{font-size:clamp(30px,5vw,54px);font-weight:700;max-width:16ch;margin-bottom:14px}
.svp-feat p{color:#d6d6d8;font-size:clamp(16px,2vw,20px);max-width:44ch;font-weight:400;margin-bottom:20px}
/* ---------- SMART FEATURES ---------- */
.svp-smart{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svp-smart .it{border-radius:22px;padding:34px;background:#101014;border:1px solid var(--line)}
.svp-smart .it .k{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);font-weight:700;margin-bottom:12px}
.svp-smart .it h3{font-size:24px;margin-bottom:10px;color:#f5f5f7;font-weight:700}
.svp-smart .it p{color:var(--grey);font-size:15px;font-weight:400}
/* ---------- REVIEWS SLOT ---------- */
.svp-reviews{border-radius:22px;padding:20px}
/* ---------- FAQ ---------- */
.svp-faq{max-width:820px;margin:0 auto}
.svp-q{border-bottom:1px solid var(--line)}
.svp-q button{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:26px 4px;font-size:20px;font-weight:600;color:#f5f5f7;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:inherit}
.svp-q .ans{max-height:0;overflow:hidden;transition:max-height .4s ease}
.svp-q .ans p{color:var(--grey);font-size:16px;padding:0 4px 26px;font-weight:400}
.svp-q .pm{flex:0 0 auto;width:24px;height:24px;position:relative}
.svp-q .pm:before,.svp-q .pm:after{content:"";position:absolute;background:#2997ff;border-radius:2px}
.svp-q .pm:before{top:11px;left:3px;right:3px;height:2px}
.svp-q .pm:after{left:11px;top:3px;bottom:3px;width:2px;transition:transform .3s}
.svp-q.open .pm:after{transform:scaleY(0)}
/* ---------- SHOWROOM ---------- */
.svp-showroom{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:stretch}
.svp-showroom .map{border-radius:22px;overflow:hidden;min-height:440px;border:1px solid var(--line)}
.svp-showroom .map iframe{width:100%;height:100%;min-height:440px;border:0;display:block;filter:grayscale(.2)}
.svp-showroom .panel{border-radius:22px;padding:40px;background:#101014;border:1px solid var(--line)}
.svp-showroom h2{font-size:clamp(26px,3.6vw,40px);margin-bottom:14px;font-weight:700}
.svp-showroom p{color:var(--grey);font-size:16px;margin-bottom:14px;font-weight:400}
.svp-info{list-style:none;margin:22px 0 26px}
.svp-info li{display:flex;gap:14px;padding:13px 0;border-top:1px solid var(--line);align-items:flex-start}
.svp-info li svg{width:20px;height:20px;flex:0 0 auto;margin-top:3px;color:#2997ff}
.svp-info li b{display:block;font-size:14px;color:#f5f5f7}
.svp-info li span{color:var(--grey);font-size:14.5px}
/* ---------- FINAL CTA ---------- */
.svp-cta{text-align:center;padding:120px 0;background:radial-gradient(120% 100% at 50% 0,#15151b 0,#000 70%)}
.svp-cta h2{font-size:clamp(32px,5.4vw,60px);max-width:18ch;margin:0 auto 16px;font-weight:700}
.svp-cta p{color:var(--grey);font-size:19px;max-width:52ch;margin:0 auto 30px;font-weight:400}
.svp-cta .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* ---------- NEWSLETTER ---------- */
.svnl{padding:96px 0;background:#101014;border-top:1px solid var(--line)}
.svnl .card{max-width:720px;margin:0 auto;text-align:center}
.svnl h2{font-size:clamp(28px,4vw,44px);font-weight:700;margin-bottom:12px}
.svnl p.sub{color:var(--grey);font-size:18px;max-width:48ch;margin:0 auto 26px;font-weight:400}
.svnl form{display:flex;flex-wrap:wrap;gap:10px;max-width:520px;margin:0 auto}
.svnl input[type=email]{flex:1 1 240px;min-width:0;padding:15px 20px;border-radius:980px;border:1px solid rgba(255,255,255,.25);font-size:15px;font-family:inherit;background:#0a0a0c;color:#f5f5f7}
.svnl input[type=email]:focus{outline:none;border-color:#2997ff;box-shadow:0 0 0 3px rgba(41,151,255,.25)}
.svnl button{flex:0 0 auto;padding:15px 30px;border-radius:980px;border:none;background:#2997ff;color:#fff;font-weight:600;font-size:15px;cursor:pointer;transition:background .2s}
.svnl button:hover{background:#0077ed}
.svnl .consent{display:flex;align-items:flex-start;gap:9px;justify-content:center;margin-top:16px;color:var(--ash);font-size:12.5px;max-width:46ch;margin:16px auto 0;text-align:left}
.svnl .consent input{margin-top:3px;width:16px;height:16px;flex:0 0 auto}
.svnl .consent a{color:#2997ff}
.svnl .ok{display:none;margin-top:14px;color:#2997ff;font-weight:600}
/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .svp-sec{padding:76px 0}
  .svp-story .stack{grid-template-columns:1fr}
  .svp-story .media{position:relative;height:60vh;top:auto}
  .svp-story .media img{max-height:52vh}
  .svp-story .steps{padding:0}
  .svp-story .step{min-height:auto;padding:44px 4%}
  .svp-nums{grid-template-columns:1fr 1fr}
  .svp-new{grid-template-columns:1fr}
  .svp-smart{grid-template-columns:1fr}
  .svp-showroom{grid-template-columns:1fr;gap:24px}
}
@media(max-width:560px){
  .svp-sec{
    padding:60px 0;
  }
  .svp-hero{
    position:relative;
    height:auto;
    min-height:560px;
    padding:120px 0 80px;
    overflow:hidden;
    background:#000;
    display:flex;
    align-items:center;
  }
  /* Show the hero video on mobile */
  .svp-hero video{
    display:block;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    z-index:0;
  }
  /* Keep the dark overlay for readable text */
  .svp-hero .grad{
    display:block;
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(
      180deg,
      rgba(0,0,0,.35) 0%,
      rgba(0,0,0,.55) 50%,
      rgba(0,0,0,.85) 100%
    );
    pointer-events:none;
  }
  /* Keep hero text and buttons above the video */
  .svp-hero .wrap{
    position:relative;
    z-index:2;
    width:100%;
    padding-left:20px;
    padding-right:20px;
  }
  .svp-hero .scroll-price{
    display:none;
  }
  .svp-hero .cta-row .btn{
    flex:1 1 100%;
  }
  .svp-nums{
    grid-template-columns:1fr;
  }
  .svp-feat{
    height:auto;
    min-height:auto;
    padding:200px 0 40px;
  }
}

@media(prefers-reduced-motion:reduce){
  .svp .rv{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* --------------------------------------------------------------------------
   HOMEPAGE SECTION 2
   -------------------------------------------------------------------------- */
.svp-hl,
  .svp-hl * {
    box-sizing: border-box;
  }

  .svp-hl {
    width: 100%;
    background: #000;
    padding: 60px 20px;
    direction: ltr;
  }

  /* Center the band container and items */
  .svp-hl .band {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px 60px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
  }

  /* Individual highlight item */
  .svp-hl .hi {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 160px;
  }

  .svp-hl .hi b {
    font-size: clamp(26px, 3.5vw, 40px);
    font-weight: 700;
    line-height: 1.1;
  }

  .svp-hl .hi .u {
    display: block;
    font-size: clamp(13px, 1.2vw, 15px);
    margin-top: 8px;
    letter-spacing: 0.5px;
  }

  /* Responsive Adjustments for Mobile & Tablet */
  @media (max-width: 768px) {
    .svp-hl {
      padding: 40px 15px;
    }
    .svp-hl .band {
      gap: 30px 20px;
    }
    .svp-hl .hi {
      min-width: 40%;
    }
  }

/* --------------------------------------------------------------------------
   HOMEPAGE SECTION 3
   -------------------------------------------------------------------------- */
.svp-story,
  .svp-story * {
    box-sizing: border-box;
  }

  .svp-story {
    position: relative;
    width: 100%;
    background: #000;
    color: #fff;
    padding: 30px 20px;
    direction: ltr;
  }

  /* --- DESKTOP MODE (Default) --- */
  .svp-story .stack {
    display: grid;
    /* Gives the image column (1.2fr) more width than text (1fr) */
    grid-template-columns: 1.2fr 1fr;
    grid-template-areas: "media steps";
    gap: 30px; 
    max-width: 1300px; /* Wider container for bigger layout */
    margin: 0 auto;
    align-items: start;
  }

  /* Left Column: Sticky Image */
  .svp-story .media {
    grid-area: media;
    position: sticky;
    top: 90px;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(120% 90% at 50% 30%, #1a1a20 0, #000 78%);
    border-radius: 16px;
    overflow: hidden;
  }

  .svp-story .media img {
    max-height: 75vh;
    max-width: 96%; /* Image stretches wider inside container */
    width: 100%;    /* Fills the column width nicely */
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.8));
    transition: opacity 0.3s ease;
  }

  /* Right Column: Scrolling Text */
  .svp-story .steps {
    grid-area: steps;
    min-width: 0;
  }

  .svp-story .step {
    min-height: 40vh; /* Reduced vertical gap up/down between text steps */
    padding: 20px 0;   /* Tighter padding */
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .svp-story .step.is-active {
    opacity: 1;
  }

  .svp-story .kicker {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #2997ff;
  }

  .svp-story .big {
    font-size: clamp(26px, 3.2vw, 42px);
    line-height: 1.15;
    font-weight: 700;
  }

  .svp-story .big em {
    font-style: normal;
    color: #2997ff;
  }

  .svp-story .step p {
    margin: 10px 0 0;
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.6;
    color: #a1a1a6;
  }


 /* --- TABLET MODE (769px to 1024px) --- */
  @media (min-width: 769px) and (max-width: 1024px) {
    .svp-story {
      padding: 25px 15px;
    }
    .svp-story .stack {
      grid-template-columns: 1.1fr 1fr;
      gap: 25px;
      max-width: 100%;
      align-items: center; /* Centers items vertically on tablet */
    }
    .svp-story .media {
      height: 65vh; /* Balanced height for tablets */
    }
    .svp-story .step {
      min-height: 35vh;
      justify-content: center;
    }
  }


  /* --- MOBILE MODE (768px and below) --- */
  @media (max-width: 768px) {
    .svp-story {
      padding: 15px 10px;
    }

    .svp-story .stack {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    /* Sticky image at top on mobile */
    .svp-story .media {
      position: sticky;
      top: 70px;
      height: 42vh;
      z-index: 10;
      border-radius: 12px;
    }

    .svp-story .media img {
      max-height: 38vh;
      max-width: 98%;
    }

    .svp-story .step {
      min-height: 30vh; /* Much shorter vertical distance between mobile steps */
      padding: 15px 5px;
    }
  }

/* --------------------------------------------------------------------------
   HOMEPAGE SECTION 4
   -------------------------------------------------------------------------- */
/* ==========================================
   SMARTCARE VIDEO FEATURES
   Scoped CSS - Elementor friendly
========================================== */

.svp-feature,
.svp-feature * {
  box-sizing: border-box;
}

.svp-feature {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;

  width: 100%;
  height: auto;
  min-height: 1000px;
  margin: 0;
  padding: 64px 7%;

  overflow: hidden;
  background: #252525;
  color: #fff;
}

/* Prevent Elementor or theme styles from
   adding unwanted spacing between sections */
.svp-feature + .svp-feature {
  margin-top: 0;
}

/* Background video */
.svp-feature .svp-feature__video {
  position: absolute;
  inset: 0;

  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;

  object-fit: cover;
  object-position: center center;

  z-index: -0;
}

/* Bottom-focused gradient for readable text */
.svp-feature .svp-feature__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.68) 28%,
    rgba(0, 0, 0, 0.25) 58%,
    rgba(0, 0, 0, 0.04) 100%
  );

  pointer-events: none;
}

/* Content stays inside its own section */
.svp-feature .svp-feature__content {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 660px;
  margin: 0;
  padding: 0;

  color: #fff;
  overflow-wrap: break-word;
}

/* Small heading */
.svp-feature .svp-feature__kicker {
  display: block;
  margin: 0 0 12px;
  padding: 0;

  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Main heading */
.svp-feature .svp-feature__content h2 {
  margin: 0 0 16px;
  padding: 0;

  color: #fff;
  font-size: clamp(32px, 3.5vw, 52px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: normal;
}

/* Description */
.svp-feature .svp-feature__content p {
  max-width: 620px;
  margin: 0 0 24px;
  padding: 0;

  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
}

/* Button */
.svp-feature .svp-feature__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;
  max-width: 100%;
  margin: 0;
  padding: 13px 25px;

  border: 1px solid #fff;
  border-radius: 3px;

  background: #fff;
  color: #222;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: normal;

  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.svp-feature .svp-feature__btn:hover {
  background: transparent;
  color: #fff;
}

/* ==========================================
   TABLET: 768px - 1024px
========================================== */

@media (min-width: 768px) and (max-width: 1024px) {
  .svp-feature {
    min-height: 600px;
    padding: 48px 6%;
  }

  .svp-feature .svp-feature__content {
    max-width: 560px;
  }

  .svp-feature .svp-feature__content h2 {
    font-size: 40px;
  }

  .svp-feature .svp-feature__content p {
    font-size: 15px;
    line-height: 1.7;
  }
}

/* ==========================================
   SMARTCARE: MOBILE 16:9 VIDEO FIX
========================================== */

@media (max-width: 767px) {

  .svp-feature {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    width: 100%;
    height: auto;
    min-height: 0;

    /* Consistent mobile section height */
    padding: 0 22px 36px;

    overflow: hidden;
    background: #252525;
  }

  /* Keep the complete 16:9 video visible */
  .svp-feature .svp-feature__video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;

    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: none;

    margin: 0;
    padding: 0;

    object-fit: contain;
    object-position: center top;

    z-index: 0;
  }

  /* Darken the lower area for readable text */
  .svp-feature .svp-feature__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.15) 20%,
      rgba(0, 0, 0, 0.72) 48%,
      rgba(0, 0, 0, 0.95) 75%,
      #000 100%
    );

    pointer-events: none;
  }

  /* Keep text above video and overlay */
  .svp-feature .svp-feature__content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin-top: 56vw;
    padding: 0;

    color: #fff;
    overflow-wrap: break-word;
  }

  .svp-feature .svp-feature__kicker {
    margin-bottom: 10px;
    font-size: 11px;
    letter-spacing: 1.5px;
  }

  .svp-feature .svp-feature__content h2 {
    margin-bottom: 12px;
    font-size: clamp(27px, 7vw, 34px);
    line-height: 1.18;
  }

  .svp-feature .svp-feature__content p {
    max-width: 100%;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.65;
  }

  .svp-feature .svp-feature__btn {
    min-height: 44px;
    padding: 11px 18px;
    font-size: 13px;
  }
}

/* Small phones */
@media (max-width: 380px) {
  .svp-feature {
    padding-right: 18px;
    padding-bottom: 30px;
    padding-left: 18px;
  }

  .svp-feature .svp-feature__content {
    margin-top: 56vw;
  }

  .svp-feature .svp-feature__content h2 {
    font-size: 27px;
  }
}

/* ==========================================
   ACCESSIBILITY
========================================== */

@media (prefers-reduced-motion: reduce) {
  .svp-feature .svp-feature__btn {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   HOMEPAGE SECTION 5
   -------------------------------------------------------------------------- */
/* ===== AURA BEAM illuminated RGB border on new models (Helios & HexaGale) ===== */
@keyframes svp-aura-slide{to{background-position:300% 0}}
.svp-newcard.aura::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(90deg,#ff3b3b,#ff8a2c,#ffe53b,#37d67a,#33c4ff,#5b6bff,#b15bff,#ff3b3b);background-size:300% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:svp-aura-slide 7s linear infinite;pointer-events:none;z-index:6;opacity:.9}
@media(prefers-reduced-motion:reduce){.svp-newcard.aura::before{animation:none}}


/* ==========================================================================
   WP & ACF HOMEPAGE ENHANCEMENTS
   ========================================================================== */
.svp-nums .n .big .sfx-word {
  display: block;
  font-size: 0.88em;
  line-height: 1.05;
  white-space: normal;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.svp-story .big em,
.svp-story .step .big em,
.svp-story .big strong,
.svp-story .step .big strong {
  font-style: normal;
  font-weight: 700;
}


.svnl #svnl-embed .fluentform {
  max-width: 520px;
  margin: 0 auto;
}

.svnl #svnl-embed .fluentform .ff-el-group {
  margin-bottom: 0 !important;
}

.svnl #svnl-embed .fluentform .ff-t-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.svnl #svnl-embed .fluentform .ff-t-cell:first-child {
  flex: 1 1 240px !important;
  width: auto !important;
}

.svnl #svnl-embed .fluentform .ff-t-cell:last-child {
  flex: 0 0 auto !important;
  width: auto !important;
}

.svnl #svnl-embed .fluentform input[type="email"] {
  width: 100% !important;
  padding: 15px 20px !important;
  border-radius: 980px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  font-size: 15px !important;
  background: #0a0a0c !important;
  color: #f5f5f7 !important;
}

.svnl #svnl-embed .fluentform input[type="email"]:focus {
  outline: none !important;
  border-color: #2997ff !important;
  box-shadow: 0 0 0 3px rgba(41, 151, 255, 0.25) !important;
}

.svnl #svnl-embed .fluentform .ff-btn-submit,
.svnl #svnl-embed .fluentform button[type="submit"] {
  padding: 15px 30px !important;
  border-radius: 980px !important;
  border: none !important;
  background: #2997ff !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}

.svnl #svnl-embed .fluentform .ff-btn-submit:hover,
.svnl #svnl-embed .fluentform button[type="submit"]:hover {
  background: #0077ed !important;
}

.svnl #svnl-embed .fluentform .ff-el-form-check {
  display: flex !important;
  align-items: flex-start !important;
  gap: 9px !important;
  justify-content: center !important;
  margin-top: 14px !important;
  text-align: left !important;
}

.svnl #svnl-embed .fluentform .ff-el-form-check-label {
  font-size: 12.5px !important;
  color: var(--ash) !important;
}

.svnl #svnl-embed .fluentform .ff-el-form-check-label a {
  color: #2997ff !important;
}

.svnl #svnl-embed .fluentform .ff-message-success {
  background: rgba(41, 151, 255, 0.15) !important;
  color: #2997ff !important;
  border: 1px solid rgba(41, 151, 255, 0.3) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin-top: 14px !important;
}

/* -------------------- RESPONSIVE BREAKPOINTS -------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
  .svp-story { padding: 25px 15px; }
  .svp-story .stack { grid-template-columns: 1.1fr 1fr; gap: 25px; max-width: 100%; align-items: center; }
  .svp-story .media { height: 65vh; }
  .svp-story .step { min-height: 35vh; justify-content: center; }
  .svp-feature { min-height: 600px; padding: 48px 6%; }
  .svp-feature .svp-feature__content { max-width: 560px; }
  .svp-feature .svp-feature__content h2 { font-size: 40px; }
  .svp-feature .svp-feature__content p { font-size: 15px; line-height: 1.7; }
}

@media (max-width: 900px) {
  .svp-sec { padding: 76px 0; }
  .svp-nums { grid-template-columns: 1fr 1fr; }
  .svp-new { grid-template-columns: 1fr; }
  .svp-smart { grid-template-columns: 1fr; }
  .svp-showroom { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 768px) {
  .svp-hl { padding: 40px 15px; }
  .svp-hl .band { gap: 30px 20px; }
  .svp-hl .hi { min-width: 40%; }
  .svp-story { padding: 15px 10px; }
  .svp-story .stack { display: flex; flex-direction: column; gap: 15px; }
  .svp-story .media { position: sticky; top: 70px; height: 42vh; z-index: 10; border-radius: 12px; }
  .svp-story .media img { max-height: 38vh; max-width: 98%; }
  .svp-story .step { min-height: 30vh; padding: 15px 5px; }
}

@media (max-width: 767px) {
  .svp-feature {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0 22px 36px;
    overflow: hidden;
    background: #252525;
  }
  .svp-feature .svp-feature__video {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    min-width: 0; min-height: 0;
    max-width: 100%; max-height: none;
    margin: 0; padding: 0;
    object-fit: contain;
    object-position: center top;
    z-index: 0;
  }
  .svp-feature .svp-feature__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.15) 20%,
      rgba(0, 0, 0, 0.72) 48%,
      rgba(0, 0, 0, 0.95) 75%,
      #000 100%
    );
    pointer-events: none;
  }
  .svp-feature .svp-feature__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 56vw;
    padding: 0;
    color: #fff;
    overflow-wrap: break-word;
  }
  .svp-feature .svp-feature__kicker { margin-bottom: 10px; font-size: 11px; letter-spacing: 1.5px; }
  .svp-feature .svp-feature__content h2 { margin-bottom: 12px; font-size: clamp(27px, 7vw, 34px); line-height: 1.18; }
  .svp-feature .svp-feature__content p { max-width: 100%; margin-bottom: 20px; font-size: 14px; line-height: 1.65; }
  .svp-feature .svp-feature__btn { min-height: 44px; padding: 11px 18px; font-size: 13px; }
}

@media (max-width: 560px) {
  .svp-sec { padding: 60px 0; }
  .svp-hero {
    position: relative;
    height: auto;
    min-height: 560px;
    padding: 120px 0 80px;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
  }
  .svp-hero video {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
  }
  .svp-hero .grad {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.85) 100%);
    pointer-events: none;
  }
  
  .svp-hero .scroll-price { display: none; }
  .svp-hero video { opacity: 0.35 !important; }
  .svp-hero .grad { background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0.92) 100%) !important; }
  .svp-nums { grid-template-columns: 1fr; }
  .svp-feat { height: auto; min-height: auto; padding: 200px 0 40px; }
}

@media (max-width: 380px) {
  .svp-feature { padding-right: 18px; padding-bottom: 30px; padding-left: 18px; }
  .svp-feature .svp-feature__content { margin-top: 56vw; }
  .svp-feature .svp-feature__content h2 { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .svp .rv { opacity: 1; transform: none; transition: none; }
  .svp-newcard.aura::before { animation: none; }
  .svp-feature .svp-feature__btn { transition: none; }
}

@media (max-width: 768px) {
  .animate-aura-pulse,
  [class*="animate-aura-pulse"] {
    display: none !important;
    animation: none !important;
  }
}