/* ================================================================
   SPIDER STUDIOS V12.1 — PRECISION MATCH
   Visual reference: reference/approved-design-1536x1024.png
   Built directly on the V12 clean master; no legacy override stack is loaded.
   Desktop geometry is targeted to the approved 1536 × 1024 design.
   ================================================================ */

/* shared helpers */
.hero-line{display:block;width:max-content;max-width:100%}
.hero-line.nowrap{white-space:nowrap}
.gradient.hero-line{display:block}

@media (min-width:901px){
  html,body{background:#fff}
  .page-shell{overflow-x:hidden;background:#fff}

  /* Approved first fold: 580px of the 1024px reference */
  .top-stage{
    position:relative;
    width:100%;
    max-width:1536px;
    height:580px;
    margin:0 auto;
    overflow:visible;
    isolation:isolate;
    z-index:3;
    background:
      radial-gradient(ellipse 34% 46% at 45% 30%,rgba(84,179,255,.26),transparent 73%),
      radial-gradient(ellipse 39% 53% at 66% 22%,rgba(216,92,255,.23),transparent 75%),
      linear-gradient(108deg,#fbfdff 0%,#f2f8ff 50%,#f8efff 100%);
  }

  /* Exact approved right-side visual, extracted from the master reference.
     Header text from the screenshot is removed so the live navigation remains interactive. */
  .top-stage::before{
    content:"";
    position:absolute;
    z-index:1;
    inset:0 0 auto auto;
    width:886px;
    height:650px;
    background:url("../hero-approved-v12-1-reference.png") right top/886px 650px no-repeat;
    pointer-events:none;
  }

  .site-header{
    position:relative;
    z-index:20;
    width:100%;
    max-width:1536px;
    height:96px;
    margin:0 auto;
    padding:0 68px;
    display:grid;
    grid-template-columns:290px 1fr auto;
    align-items:center;
    gap:34px;
    background:transparent;
    border:0;
    box-shadow:none;
  }
  .brand{width:290px;height:auto;display:flex;align-items:center}
  .logo{display:block;width:290px;max-width:none;height:auto;object-fit:contain}

  .site-header nav{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:43px;
    transform:translateX(4px);
  }
  .site-header nav a{
    position:relative;
    padding:17px 0 13px;
    font-size:15px;
    line-height:1;
    font-weight:500;
    color:#10162f;
    text-decoration:none;
  }
  .site-header nav a.active:after,
  .site-header nav a:hover:after{
    content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;
    background:linear-gradient(90deg,#ff246d,#8a31ff)
  }

  .header-actions{display:flex;align-items:center;gap:25px}
  .lang{padding:0;border:0;background:none;color:#111734;font-size:15px;display:flex;align-items:center;gap:9px;white-space:nowrap}
  .header-cta{width:212px;min-width:212px;height:50px;padding:0 26px;font-size:15px}
  .menu-toggle{display:none}

  .hero{
    position:relative;
    z-index:5;
    width:100%;
    max-width:1536px;
    height:484px;
    margin:0 auto;
    display:block;
    overflow:visible;
    background:transparent;
  }
  .hero-copy{
    position:relative;
    z-index:8;
    width:760px;
    padding:18px 0 0 66px;
  }
  .eyebrow{
    margin:0 0 10px;
    font-size:13px;
    line-height:1.2;
    letter-spacing:.32em;
    color:#2458e7;
    font-weight:600;
  }
  .hero h1{
    width:710px;
    max-width:710px;
    margin:0 0 16px;
    font-size:74px;
    line-height:.91;
    letter-spacing:-.058em;
    font-weight:900;
    color:#08103a;
  }
  .hero h1.is-visible{opacity:1;transform:none}
  .gradient{
    width:max-content;max-width:100%;
    background:linear-gradient(90deg,#fa2088 0%,#b638ff 48%,#118dff 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent
  }
  .hero-copy>p{
    width:620px;
    max-width:620px;
    margin:0;
    font-size:16.4px;
    line-height:1.46;
    color:#19213f;
  }
  .domain-wrap{width:697px;max-width:697px;margin-top:25px}
  .domain{
    width:697px;height:61px;
    display:grid;grid-template-columns:91px 1fr 104px 232px;align-items:center;
    padding:5px;background:rgba(255,255,255,.91);
    border:1px solid #d9e4f1;border-radius:16px;
    box-shadow:0 7px 22px rgba(42,63,116,.11);
    backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)
  }
  .domain b{height:49px;display:flex;align-items:center;padding:0 18px;background:#f4f7fb;border-radius:11px;font-size:17px}
  .domain input,.domain select{height:46px;min-width:0;border:0;background:transparent;outline:0;color:#101734;padding:0 14px;font-size:15px}
  .domain input{border-right:1px solid #e3e8f1}
  .domain button{height:49px;padding:0 20px;font-size:15px}
  .domain-wrap small{display:block;margin:11px 4px 0;font-size:13px;color:#283554}

  /* The approved desktop artwork is carried by top-stage::before. */
  .hero-art{display:none}
  .hero:after{display:none}

  /* 580 + 219 + 128 + 97 = approved 1024px first page */
  .selector{position:relative;z-index:2;height:219px;padding:22px 64px 14px;background:#fff}
  .section-head{margin-bottom:16px}
  .selector h2{font-size:25px;line-height:1.1;letter-spacing:-.035em;margin:0 0 4px}
  .selector p{font-size:14px}
  .section-head>a{font-size:13px;margin-right:3px}
  .service-select{grid-template-columns:repeat(7,minmax(0,1fr));gap:9px}
  .select-card{height:111px;border-radius:13px;padding:10px 7px;gap:9px}
  .service-icon{font-size:30px}.select-card b{font-size:13px;line-height:1.16}

  .feature-stat{height:128px;padding:13px 64px 12px;grid-template-columns:67% 33%;gap:18px;background:#fff}
  .features{grid-template-columns:repeat(4,1fr);gap:14px}
  .features article{gap:11px;padding-top:4px}
  .features article>span{width:50px;height:50px;font-size:24px}
  .features b{font-size:13.5px}.features p{font-size:11.4px;line-height:1.44;margin:5px 0 0;max-width:145px}
  .stats strong{font-size:27px}.stats span{font-size:11px}

  .approved-bottom-bar{height:97px;padding:0 64px;background:#fff}
  .approved-quote{font-size:11px;letter-spacing:.28em}
  .approved-dots{gap:12px;margin-right:10px}.approved-dots span{margin-left:26px}
}

/* Scale the approved desktop composition as a single unit between tablet and 1536px. */
@media (min-width:901px) and (max-width:1535px){
  .top-stage{
    height:37.7604167vw;
  }
  .top-stage::before{
    width:57.6822917vw;
    height:42.3177083vw;
    background-size:57.6822917vw 42.3177083vw;
  }
  .site-header{
    height:6.25vw;
    padding-left:4.4270833vw;padding-right:4.4270833vw;
    grid-template-columns:18.8802083vw 1fr auto;
    gap:2.2135417vw;
  }
  .brand,.logo{width:18.8802083vw}
  .site-header nav{gap:2.7994792vw}
  .site-header nav a{font-size:.9765625vw}
  .header-actions{gap:1.6276042vw}
  .lang{font-size:.9765625vw}
  .header-cta{width:13.8020833vw;min-width:13.8020833vw;height:3.2552083vw;padding:0 1.6927083vw;font-size:.9765625vw}

  .hero{height:31.5104167vw}
  .hero-copy{width:49.4791667vw;padding:1.171875vw 0 0 4.296875vw}
  .eyebrow{font-size:.8463542vw;margin-bottom:.6510417vw}
  .hero h1{width:46.2239583vw;max-width:46.2239583vw;margin-bottom:1.0416667vw;font-size:4.8177083vw}
  .hero-copy>p{width:40.3645833vw;max-width:40.3645833vw;font-size:1.0677083vw}
  .domain-wrap{width:45.3776042vw;max-width:45.3776042vw;margin-top:1.6276042vw}
  .domain{width:45.3776042vw;height:3.9713542vw;grid-template-columns:5.9244792vw 1fr 6.7708333vw 15.1041667vw;padding:.3255208vw;border-radius:1.0416667vw}
  .domain b{height:3.1901042vw;padding:0 1.171875vw;border-radius:.7161458vw;font-size:1.1067708vw}
  .domain input,.domain select{height:2.9947917vw;padding:0 .9114583vw;font-size:.9765625vw}
  .domain button{height:3.1901042vw;padding:0 1.3020833vw;font-size:.9765625vw}
  .domain-wrap small{margin:.7161458vw .2604167vw 0;font-size:.8463542vw}

  .selector{height:14.2578125vw;padding:1.4322917vw 4.1666667vw .9114583vw}
  .selector h2{font-size:1.6276042vw}.selector p{font-size:.9114583vw}.section-head>a{font-size:.8463542vw}
  .select-card{height:7.2265625vw}.service-icon{font-size:1.953125vw}.select-card b{font-size:.8463542vw}
  .feature-stat{height:8.3333333vw;padding:.8463542vw 4.1666667vw .78125vw}
  .features article>span{width:3.2552083vw;height:3.2552083vw;font-size:1.5625vw}.features b{font-size:.8789063vw}.features p{font-size:.7421875vw}
  .stats strong{font-size:1.7578125vw}.stats span{font-size:.7161458vw}
  .approved-bottom-bar{height:6.3151042vw;padding:0 4.1666667vw}.approved-quote{font-size:.7161458vw}
}

/* Responsive behavior: clean and functional, without forcing desktop screenshot geometry. */
@media (max-width:900px){
  .top-stage::before{display:none}
  .top-stage{height:auto;background:linear-gradient(145deg,#fbfdff 0%,#f2f8ff 48%,#f8efff 100%)}
  .site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.90);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .hero{height:auto;display:grid;grid-template-columns:1fr;padding-bottom:0;overflow:hidden}
  .hero-art{display:block;height:auto;margin-top:10px}
  .hero-art img{position:relative;width:100%;height:auto;object-fit:contain;object-position:center;display:block}
  .hero-line.nowrap{white-space:normal}
}

/* =========================================================
   V12.1.1 — APPROVED SERVICE SELECTOR PRECISION PASS
   Recreates the approved seven-card service rail using HTML/CSS/SVG.
   Hero artwork remains untouched.
   ========================================================= */
@media (min-width:1201px){
  .selector{
    height:228px;
    padding:25px 64px 16px;
    overflow:visible;
  }
  .section-head{
    position:relative;
    align-items:flex-end;
    margin-bottom:18px;
    min-height:47px;
  }
  .selector h2{margin:0 0 5px;font-size:25px;line-height:1.08}
  .selector p{margin:0;font-size:14px;line-height:1.3}
  .section-head>a{
    align-self:flex-end;
    margin:0 3px 1px 20px;
    font-size:13px;
    white-space:nowrap;
  }
  .service-select{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:8px;
    width:100%;
  }
  .select-card{
    height:111px;
    min-width:0;
    padding:12px 8px 10px;
    gap:7px;
    border:1px solid #e3e8f2;
    border-radius:12px;
    background:#fff;
    box-shadow:0 4px 14px rgba(31,43,78,.045);
    justify-content:center;
    overflow:visible;
  }
  .select-card.active{
    border:2px solid #ff42b4;
    background:linear-gradient(180deg,#fff 0%,#fff9fd 100%);
    box-shadow:0 5px 16px rgba(255,66,180,.08);
  }
  .select-card .check{
    display:none;
    top:9px;left:9px;
    width:24px;height:24px;
    font-size:14px;
    background:#ff25a0;
    box-shadow:0 2px 7px rgba(255,37,160,.22);
  }
  .select-card.active .check{display:flex}
  .reference-icon{
    width:39px;
    height:39px;
    display:grid;
    place-items:center;
    line-height:0;
    flex:0 0 auto;
  }
  .reference-icon svg{width:39px;height:39px;display:block}
  .select-card:nth-child(1){color:#9229f4}
  .select-card:nth-child(2){color:#2a9b2d}
  .select-card:nth-child(3){color:#ff1f76}
  .select-card:nth-child(4){color:#ff5b00}
  .select-card:nth-child(5){color:#0877ff}
  .select-card:nth-child(6){color:#176cff}
  .select-card:nth-child(7){color:#6427ef}
  .select-card b{
    color:#0b1438;
    font-size:13px;
    line-height:1.16;
    font-weight:700;
    letter-spacing:-.01em;
    max-width:150px;
  }
  .select-card:hover{transform:translateY(-1px)}

  /* Keep the approved first-page rhythm after the slightly taller selector. */
  .feature-stat{height:125px;padding-top:10px}
  .approved-bottom-bar{height:91px}
}

@media (min-width:1201px) and (max-width:1536px){
  .selector{height:14.84375vw;padding:1.6276042vw 4.1666667vw 1.0416667vw}
  .section-head{min-height:3.0598958vw;margin-bottom:1.171875vw}
  .service-select{gap:.5208333vw}
  .select-card{height:7.2265625vw;border-radius:.78125vw;padding:.78125vw .5208333vw .6510417vw;gap:.4557292vw}
  .reference-icon,.reference-icon svg{width:2.5390625vw;height:2.5390625vw}
  .select-card .check{top:.5859375vw;left:.5859375vw;width:1.5625vw;height:1.5625vw}
  .feature-stat{height:8.1380208vw;padding-top:.6510417vw}
  .approved-bottom-bar{height:5.9244792vw}
}

@media (max-width:1200px){
  .reference-icon{width:38px;height:38px;display:grid;place-items:center;line-height:0}
  .reference-icon svg{width:38px;height:38px;display:block}
}


/* Restore original approved hero artwork: disable all later live scene-text overlays */
.scene-live,
.scene-copy,
.scene-monitor,
.scene-pot,
.scene-cup{
  display:none !important;
}
.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}