:root{
  color-scheme:dark;
  --bg:#050607;
  --panel:rgba(10,11,12,.72);
  --panel-strong:rgba(12,13,14,.88);
  --field:rgba(37,39,41,.9);
  --line:rgba(255,255,255,.14);
  --line-soft:rgba(255,255,255,.08);
  --text:#f2f2f2;
  --muted:#b6b8bb;
  --danger:#ff8f8f;
  --glow:0 24px 64px rgba(0,0,0,.48);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg)}
body{color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;overflow-x:hidden}
button,input,textarea{font:inherit}
a{color:inherit;text-underline-offset:3px}
button{cursor:pointer}
.honeypot,.captcha-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:.001!important;pointer-events:none!important;left:-9999px!important}
.page{min-height:100vh;background:#050607}

.desktop-scene{position:relative;width:100%;height:100svh;min-height:620px;overflow:hidden;background:radial-gradient(circle at 50% 25%,rgba(55,58,61,.08),transparent 34%), #050607}
.desktop-stage{position:relative;isolation:isolate;width:100%;height:100%}
.scene-master,.scene-atmosphere,.scene-mountains,.scene-valley-fog,.scene-panda,.scene-vignette{position:absolute;inset:0;pointer-events:none;will-change:transform}

.scene-master{
  z-index:0;
  inset:-1.2%;
  background:#050607 url('assets/panda-canonical.webp') center center/cover no-repeat;
  filter:brightness(.98) contrast(1.03);
}

.scene-atmosphere{opacity:.48}
.scene-atmosphere--one{
  filter:blur(30px);
  background:
    radial-gradient(42svw 30svh at 24% 30%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(30svw 20svh at 72% 36%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(36svw 18svh at 50% 56%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(26svw 18svh at 16% 74%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(26svw 18svh at 84% 76%, rgba(255,255,255,.08), transparent 60%);
}
.scene-atmosphere--two{
  filter:blur(52px);
  opacity:.68;
  background:
    radial-gradient(34svw 22svh at 12% 48%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(28svw 16svh at 88% 46%, rgba(255,255,255,.07), transparent 60%),
    radial-gradient(38svw 18svh at 52% 72%, rgba(255,255,255,.06), transparent 60%);
}
.scene-mountains{display:none}
.scene-valley-fog{display:none}

.scene-panda{display:none}
.scene-vignette{
  background:
    linear-gradient(180deg,rgba(4,5,6,.16) 0%, rgba(4,5,6,0) 18%, rgba(4,5,6,0) 74%, rgba(4,5,6,.48) 100%),
    linear-gradient(90deg,rgba(0,0,0,.42) 0%, transparent 18%, transparent 82%, rgba(0,0,0,.42) 100%);
}
.scene-ui{position:relative;z-index:2;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:clamp(32px,4.2vh,44px) 16px 18px}
.scene-slogan{
  margin-top:clamp(8px,1.1vh,16px);
  color:rgba(255,255,255,.95);
  font-size:clamp(15px,1.55vh,19px);
  font-weight:600;
  letter-spacing:.34em;
  line-height:1.1;
  text-shadow:0 2px 20px rgba(0,0,0,.9);
  text-align:center;
}
.contact-launch{
  border:1px solid rgba(255,255,255,.18);
  color:#111;
  background:linear-gradient(180deg,#ffffff 0%,#ececec 100%);
  box-shadow:0 12px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.65);
  border-radius:999px;
  font-weight:700;
  letter-spacing:.01em;
}
.contact-launch--desktop{
  position:absolute;left:50%;top:66.8%;transform:translate(-50%,-50%);
  min-width:min(88vw,380px);height:74px;padding:0 36px;font-size:1.18rem;z-index:3;
  transition:opacity .25s ease, transform .25s ease;
}
.contact-panel,
.desktop-success{
  position:absolute;left:50%;top:auto;bottom:clamp(24px,4.2svh,54px);transform:translate(-50%,0) scale(.985);
  width:min(92vw,640px);
  padding:28px 26px 18px;
  border-radius:30px;
  background:linear-gradient(180deg, rgba(18,19,20,.84), rgba(11,12,13,.90));
  border:1px solid var(--line);
  box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;visibility:hidden;pointer-events:none;z-index:4;transition:opacity .28s ease, transform .28s ease, visibility .28s ease;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.form-open .contact-launch--desktop,.is-success .contact-launch--desktop{opacity:0;pointer-events:none;transform:translate(-50%,-48%)}
.form-open #desktop-form[aria-hidden="false"], .is-success #success-desktop[aria-hidden="false"]{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) scale(1)}
.is-success #desktop-form{display:none}
.field-row,.captcha-row,.mobile-field,.mobile-captcha-row{
  display:flex;align-items:center;gap:14px;width:100%;
  min-height:74px;padding:0 20px;border-radius:18px;
  background:var(--field);border:1px solid var(--line-soft);box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.field-row+.field-row,.field-row+.captcha-row,.captcha-row+.consent-row,.mobile-field+.mobile-field,.mobile-field+.mobile-captcha-row,.mobile-captcha-row+.mobile-consent{margin-top:14px}
.field-row--message,.mobile-field--message{align-items:flex-start;min-height:146px;padding-top:18px;padding-bottom:18px}
.field-row input,.field-row textarea,.mobile-field input,.mobile-field textarea{
  flex:1;border:0;outline:0;background:transparent;color:var(--text);font-size:1.15rem;line-height:1.45;font-weight:500;
}
.field-row input::placeholder,.field-row textarea::placeholder,.mobile-field input::placeholder,.mobile-field textarea::placeholder{color:#b3b6b9;opacity:1}
.field-row textarea,.mobile-field textarea{resize:vertical;min-height:92px}
.field-icon{position:relative;flex:0 0 24px;width:24px;height:24px;color:#f0f0f0;opacity:.95}
.field-icon::before,.field-icon::after{content:"";position:absolute;box-sizing:border-box}
.field-icon--mail::before{inset:4px 2px 6px;border:2px solid currentColor;border-radius:4px}
.field-icon--mail::after{left:4px;right:4px;top:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:skewY(-28deg) rotate(-45deg)}
.field-icon--message::before{left:2px;right:2px;top:2px;bottom:6px;border:2px solid currentColor;border-radius:6px}
.field-icon--message::after{left:7px;bottom:2px;width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:skewX(-26deg)}
.field-icon--shield::before{left:4px;right:4px;top:2px;bottom:2px;border:2px solid currentColor;border-radius:9px 9px 11px 11px;clip-path:polygon(50% 0%,100% 14%,100% 50%,50% 100%,0% 50%,0% 14%)}
.captcha-row,.mobile-captcha-row{color:#e9ebed;font-size:1.08rem}
.captcha-dots{margin-left:auto;display:grid;grid-template-columns:repeat(4,6px);gap:8px 9px}
.captcha-dots i{width:4px;height:4px;border-radius:50%;background:#dadde1;opacity:.85}
.consent-row,.mobile-consent{display:flex;align-items:flex-start;gap:12px;margin-top:16px;color:#e9ebed;font-size:1rem;line-height:1.55;font-weight:500}
.consent-row input,.mobile-consent input{margin-top:.24em;inline-size:20px;block-size:20px;accent-color:#ffffff;flex:0 0 20px}
.submit-button,.mobile-submit,.success-card__close{
  width:100%;min-height:72px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,#ffffff 0%,#ececec 100%);color:#111;font-weight:800;font-size:1.16rem;margin-top:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.65)
}
.close-form{display:block;margin:12px auto 0;border:0;background:transparent;color:#9fa3a8;font-size:.98rem}
.form-status,.mobile-status{min-height:1.4em;margin:12px 0 0;text-align:center;color:var(--danger);font-size:.98rem}
.success-card{text-align:center;padding:10px 2px}
.success-card__title{font-size:1.9rem;font-weight:800;margin-bottom:10px}
.success-card__text{font-size:1.08rem;color:#d0d2d4;line-height:1.5;margin-bottom:20px}
.scene-footer{margin-top:auto;padding-top:8px;color:#bfc2c6;font-size:clamp(13px,1.3vh,15px);letter-spacing:.08em;text-align:center;opacity:.95}

.mobile-scene{display:none;position:relative;min-height:100svh;background:#050607;padding:16px 14px 24px;overflow:hidden;flex-direction:column}
.mobile-hero{position:relative;height:61svh;min-height:400px;border-radius:28px;overflow:hidden;background:#070809 url('assets/panda-canonical.webp') center 48%/auto 100% no-repeat;border:1px solid rgba(255,255,255,.08);box-shadow:var(--glow)}
.mobile-atmosphere,.mobile-mountains,.mobile-panda{display:none!important}.mobile-vignette{z-index:3;background:linear-gradient(180deg,rgba(4,5,6,.06),transparent 18%,transparent 74%,rgba(4,5,6,.28) 100%),linear-gradient(90deg,rgba(0,0,0,.18),transparent 12%,transparent 88%,rgba(0,0,0,.18))}
.mobile-atmosphere--one{display:none}
.mobile-atmosphere--two{display:none}
.mobile-mountains{display:none!important}
.mobile-panda{display:none!important}
.mobile-vignette{z-index:3;background:linear-gradient(180deg,rgba(4,5,6,.08),transparent 22%,transparent 72%,rgba(4,5,6,.34) 100%),linear-gradient(90deg,rgba(0,0,0,.28),transparent 12%,transparent 88%,rgba(0,0,0,.28) 100%)}
.mobile-slogan{position:absolute;left:50%;top:20px;transform:translateX(-50%);width:min(92%,560px);text-align:center;color:#fff;font-size:clamp(12px,3vw,15px);font-weight:600;letter-spacing:.28em;line-height:1.2;text-shadow:0 2px 18px rgba(0,0,0,.9);z-index:4}
.mobile-action{margin-top:-74px;position:relative;z-index:5;display:flex;justify-content:center}
.contact-launch--mobile{width:min(100%,360px);min-height:64px;padding:0 26px;font-size:1.06rem}
.mobile-card{position:relative;z-index:6;max-width:440px;margin:14px auto 0}
.mobile-form,.mobile-success{display:none;padding:18px;border-radius:28px;background:linear-gradient(180deg, rgba(18,19,20,.84), rgba(11,12,13,.90));border:1px solid var(--line);box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.form-open .mobile-form[aria-hidden="false"], .is-success .mobile-success[aria-hidden="false"]{display:block}
.is-success #mobile-form{display:none}
.mobile-field,.mobile-captcha-row{min-height:64px;padding:0 16px}
.mobile-field--message{min-height:126px;padding-top:16px;padding-bottom:16px}
.mobile-field input,.mobile-field textarea{font-size:1.02rem}
.mobile-consent{font-size:.98rem}
.mobile-submit{min-height:64px;font-size:1.08rem}
.close-form--mobile{font-size:.94rem}
.mobile-footer{margin:auto auto 0;padding-top:18px;text-align:center;color:#bfc2c6;font-size:14px;letter-spacing:.08em}

@media (max-width: 820px){
  .desktop-scene{display:none}
  .mobile-scene{display:flex}
}
@media (min-width: 821px){
  .mobile-scene{display:none}
}
@media (min-width: 1600px){
  .scene-panda{width:min(42vw,820px);bottom:11svh}
  .scene-mountains{height:min(30svh,360px)}
}
@media (max-width: 1280px){
  .scene-panda{width:min(54vw,700px);bottom:12svh}
  .contact-panel,.desktop-success{width:min(92vw,600px)}
}

@media (max-width: 480px){
  .mobile-scene{padding:10px 10px 18px}
  .mobile-hero{height:61svh;min-height:390px;border-radius:24px}
  .mobile-slogan{top:18px;font-size:clamp(11px,3.4vw,14px);letter-spacing:.23em}
  .mobile-action{margin-top:-70px}
  .contact-launch--mobile{min-height:64px;font-size:1.08rem}
}

@media (min-width: 600px) and (max-width: 820px){
  .mobile-hero{height:64svh;min-height:500px}
  .mobile-action{margin-top:-78px}
  .contact-launch--mobile{width:min(100%,420px)}
}







@media (min-width: 821px) and (max-width: 1400px){
  .scene-panda{width:min(48vw,760px)}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}

@media (min-width:821px) and (max-height:900px){
  .contact-panel,.desktop-success{bottom:18px;padding:22px 22px 14px;width:min(92vw,600px)}
  .field-row,.captcha-row{min-height:64px}
  .field-row--message{min-height:118px;padding-top:15px;padding-bottom:15px}
  .field-row input,.field-row textarea{font-size:1.06rem}
  .consent-row{font-size:.95rem;line-height:1.45;margin-top:13px}
  .submit-button,.success-card__close{min-height:62px;margin-top:13px;font-size:1.08rem}
  .close-form{margin-top:9px}
  .form-status{margin-top:8px}
  .scene-footer{font-size:13px}
}


/* ===== v21: one canonical panda, no duplicate layers ===== */

/* Phone */
@media (max-width:480px){
  .mobile-scene{padding:10px 10px 18px}
  .mobile-hero{
    height:62svh;
    min-height:410px;
    border-radius:24px;
    background-size:auto 100%;
    background-position:center 49%;
    background-repeat:no-repeat;
  }
  .mobile-slogan{
    top:18px;
    font-size:clamp(11px,3.4vw,14px);
    letter-spacing:.23em;
  }
  .mobile-action{margin-top:-72px}
  .contact-launch--mobile{min-height:64px;font-size:1.08rem}
}

/* Larger phones / tablets */
@media (min-width:481px) and (max-width:820px){
  .mobile-hero{
    height:64svh;
    min-height:500px;
    background-size:auto 100%;
    background-position:center 49%;
    background-repeat:no-repeat;
  }
  .mobile-action{margin-top:-78px}
  .contact-launch--mobile{width:min(100%,420px)}
}

/* "Desktop site" requested on touch devices: keep the same scene, just denser. */
@media (hover:none) and (pointer:coarse) and (min-width:821px) and (max-width:1200px){
  .desktop-scene{display:none!important}
  .mobile-scene{display:flex!important;min-height:100svh;padding:10px 14px 18px}
  .mobile-hero{
    height:72svh;
    min-height:500px;
    max-height:780px;
    background-size:cover;
    background-position:center 50%;
    background-repeat:no-repeat;
  }
  .mobile-slogan{
    top:20px;
    font-size:clamp(12px,1.55vw,16px);
    letter-spacing:.28em;
  }
  .mobile-action{margin-top:-80px}
  .contact-launch--mobile{
    width:min(58vw,420px);
    min-height:66px;
    font-size:1.08rem;
  }
}

/* Touch landscape */
@media (orientation:landscape) and (hover:none) and (pointer:coarse) and (max-width:1200px){
  .mobile-hero{
    height:78svh;
    min-height:340px;
    background-size:cover;
    background-position:center 50%;
  }
  .mobile-action{margin-top:-66px}
}

/* Safety: old individual art layers must never render in v21. */
.mobile-panda,
.mobile-mountains{
  display:none!important;
}


/* ===== v23: clean fade scene + floating mobile CTA ===== */
.desktop-scene{
  background:#050607 !important;
}
.scene-master{
  inset:0 !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(255,255,255,.08), transparent 24%),
    linear-gradient(180deg,
      rgba(5,6,7,0) 0%,
      rgba(5,6,7,0) 54%,
      rgba(5,6,7,.18) 62%,
      rgba(5,6,7,.62) 76%,
      rgba(5,6,7,.92) 88%,
      #050607 100%),
    url('assets/panda-canonical.webp') center 46%/cover no-repeat !important;
  filter:brightness(.99) contrast(1.03) !important;
}
.scene-vignette{
  background:
    linear-gradient(180deg,rgba(4,5,6,.12) 0%, rgba(4,5,6,0) 18%, rgba(4,5,6,0) 60%, rgba(5,6,7,.40) 82%, #050607 100%),
    linear-gradient(90deg,rgba(0,0,0,.32) 0%, transparent 16%, transparent 84%, rgba(0,0,0,.32) 100%) !important;
}
.contact-launch--desktop{
  top:71.5% !important;
  min-width:min(88vw,360px) !important;
  height:72px !important;
}

.mobile-scene{
  min-height:100svh !important;
  padding:10px 10px calc(env(safe-area-inset-bottom, 0px) + 104px) !important;
  background:#050607 !important;
}
.mobile-hero{
  height:68svh !important;
  min-height:430px !important;
  border-radius:26px !important;
  background:
    linear-gradient(180deg,
      rgba(5,6,7,0) 0%,
      rgba(5,6,7,0) 54%,
      rgba(5,6,7,.22) 63%,
      rgba(5,6,7,.72) 79%,
      #050607 100%),
    url('assets/panda-canonical.webp') center 46%/cover no-repeat,
    #070809 !important;
  border:1px solid rgba(255,255,255,.08) !important;
}
.mobile-vignette{
  background:
    linear-gradient(180deg,rgba(4,5,6,.06) 0%, transparent 24%, transparent 66%, rgba(5,6,7,.26) 82%, rgba(5,6,7,.56) 100%),
    linear-gradient(90deg,rgba(0,0,0,.24) 0%, transparent 10%, transparent 90%, rgba(0,0,0,.24) 100%) !important;
}
.mobile-action{
  position:fixed !important;
  left:10px !important;
  right:10px !important;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
  margin-top:0 !important;
  display:flex !important;
  justify-content:center !important;
  z-index:40 !important;
  pointer-events:none !important;
  transition:opacity .25s ease, transform .25s ease !important;
}
.contact-launch--mobile{
  width:min(100%, 420px) !important;
  min-height:64px !important;
  pointer-events:auto !important;
  box-shadow:0 12px 30px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.65) !important;
}
.form-open .mobile-action,
.is-success .mobile-action{
  opacity:0 !important;
  transform:translateY(14px) !important;
  pointer-events:none !important;
}
.mobile-card{
  width:min(100%, 440px) !important;
  margin:18px auto 0 !important;
}

@media (max-width:480px){
  .mobile-hero{
    height:66svh !important;
    min-height:410px !important;
    background-position:center 44% !important;
  }
  .mobile-slogan{
    top:18px !important;
    font-size:clamp(11px,3.4vw,14px) !important;
    letter-spacing:.22em !important;
    width:92% !important;
  }
}

@media (min-width:481px) and (max-width:820px){
  .mobile-hero{
    height:72svh !important;
    min-height:500px !important;
    background-position:center 45% !important;
  }
  .contact-launch--mobile{
    width:min(100%, 460px) !important;
  }
}

@media (hover:none) and (pointer:coarse) and (min-width:821px) and (max-width:1200px){
  .mobile-scene{
    padding:10px 14px calc(env(safe-area-inset-bottom, 0px) + 112px) !important;
  }
  .mobile-hero{
    height:78svh !important;
    min-height:520px !important;
    max-height:820px !important;
    background-position:center 45% !important;
  }
  .contact-launch--mobile{
    width:min(58vw, 460px) !important;
    min-height:66px !important;
  }
}

@media (orientation:landscape) and (hover:none) and (pointer:coarse) and (max-width:1200px){
  .mobile-hero{
    height:76svh !important;
    min-height:340px !important;
    background-position:center 42% !important;
  }
}

/* ===== v27: floating services cloud ===== */
.services-cloud{
  position:relative;
  z-index:3;
  width:min(92vw,1200px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.service-tag{
  position:absolute;
  display:inline-block;
  color:rgba(255,255,255,.72);
  font-weight:500;
  letter-spacing:.01em;
  line-height:1;
  white-space:nowrap;
  text-shadow:0 4px 20px rgba(0,0,0,.55);
  opacity:.86;
  transform:translate3d(0,0,0);
  transition:color .22s ease, opacity .22s ease, text-shadow .22s ease, transform .22s ease;
  pointer-events:auto;
}
.service-tag:hover{
  color:#ffffff;
  opacity:1;
  text-shadow:0 0 24px rgba(255,255,255,.28), 0 8px 26px rgba(0,0,0,.48);
  transform:translateY(-2px) scale(1.035);
}

.services-cloud--desktop{
  position:absolute;
  left:50%;
  top:76.5%;
  transform:translateX(-50%);
  height:220px;
}
.services-cloud--desktop .service-tag{
  font-size:clamp(19px,1.55vw,31px);
}
.services-cloud--desktop .tag-web{left:9%; top:60%;}
.services-cloud--desktop .tag-admin{left:18%; top:76%;}
.services-cloud--desktop .tag-max{left:33%; top:41%;}
.services-cloud--desktop .tag-vps{left:36%; top:83%;}
.services-cloud--desktop .tag-linux{left:55%; top:58%;}
.services-cloud--desktop .tag-wp{left:45%; top:72%;}
.services-cloud--desktop .tag-net{left:60%; top:86%;}
.services-cloud--desktop .tag-vpn{left:74%; top:66%;}
.services-cloud--desktop .tag-auto{left:75%; top:44%;}
.services-cloud--desktop .tag-mon{left:86%; top:76%; transform:translateX(-100%);}

.form-open .services-cloud--desktop,
.is-success .services-cloud--desktop,
.form-open .services-cloud--mobile,
.is-success .services-cloud--mobile{
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
}

.services-cloud--mobile{
  width:min(100%,440px);
  min-height:168px;
  margin:22px auto 0;
}
.services-cloud--mobile .service-tag{
  font-size:clamp(13px,4.4vw,21px);
  color:rgba(255,255,255,.78);
}
.services-cloud--mobile .tag-web{left:3%; top:8%;}
.services-cloud--mobile .tag-admin{left:23%; top:25%;}
.services-cloud--mobile .tag-max{left:40%; top:0;}
.services-cloud--mobile .tag-vps{left:16%; top:56%;}
.services-cloud--mobile .tag-linux{left:64%; top:22%;}
.services-cloud--mobile .tag-wp{left:44%; top:48%;}
.services-cloud--mobile .tag-net{left:6%; top:76%;}
.services-cloud--mobile .tag-vpn{left:74%; top:44%;}
.services-cloud--mobile .tag-auto{left:58%; top:72%;}
.services-cloud--mobile .tag-mon{left:84%; top:84%; transform:translateX(-100%);}

@media (min-width: 821px) and (max-width: 1200px){
  .services-cloud--desktop{
    top:78.2%;
    height:190px;
    width:min(94vw,1000px);
  }
  .services-cloud--desktop .service-tag{
    font-size:clamp(17px,1.45vw,25px);
  }
}

@media (min-width: 821px) and (max-height: 860px){
  .services-cloud--desktop{
    top:78.6%;
    height:168px;
  }
  .services-cloud--desktop .service-tag{
    font-size:clamp(16px,1.28vw,23px);
  }
}

@media (max-width: 820px){
  .mobile-scene{
    padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 200px) !important;
  }
}

@media (max-width: 480px){
  .services-cloud--mobile{
    min-height:184px;
    margin-top:18px;
  }
  .services-cloud--mobile .tag-web{left:2%; top:8%;}
  .services-cloud--mobile .tag-admin{left:23%; top:27%;}
  .services-cloud--mobile .tag-max{left:42%; top:0;}
  .services-cloud--mobile .tag-vps{left:10%; top:57%;}
  .services-cloud--mobile .tag-linux{left:66%; top:22%;}
  .services-cloud--mobile .tag-wp{left:43%; top:47%;}
  .services-cloud--mobile .tag-net{left:4%; top:76%;}
  .services-cloud--mobile .tag-vpn{left:72%; top:43%;}
  .services-cloud--mobile .tag-auto{left:54%; top:71%;}
  .services-cloud--mobile .tag-mon{left:84%; top:84%; transform:translateX(-100%);}
}

@media (prefers-reduced-motion: no-preference){
  .service-tag{animation:servicesFloat 7s ease-in-out infinite;}
  .services-cloud .service-tag:nth-child(2n){animation-duration:9s}
  .services-cloud .service-tag:nth-child(3n){animation-duration:11s}
  .services-cloud .service-tag:nth-child(4n){animation-delay:-2s}
  .services-cloud .service-tag:nth-child(5n){animation-delay:-4s}
}
@keyframes servicesFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-4px,0)}
}
.services-cloud .service-tag:hover{animation-play-state:paused}


/* ===== v28: desktop service cloud fits inside viewport ===== */
.services-cloud--desktop{
  top:73.8% !important;
  height:150px !important;
  width:min(88vw,1080px) !important;
}
.services-cloud--desktop .service-tag{
  font-size:clamp(16px,1.25vw,24px) !important;
}
.services-cloud--desktop .tag-web{left:10%; top:48%;}
.services-cloud--desktop .tag-admin{left:20%; top:70%;}
.services-cloud--desktop .tag-max{left:34%; top:28%;}
.services-cloud--desktop .tag-vps{left:37%; top:86%;}
.services-cloud--desktop .tag-linux{left:54%; top:46%;}
.services-cloud--desktop .tag-wp{left:45%; top:66%;}
.services-cloud--desktop .tag-net{left:59%; top:83%;}
.services-cloud--desktop .tag-vpn{left:73%; top:64%;}
.services-cloud--desktop .tag-auto{left:74%; top:33%;}
.services-cloud--desktop .tag-mon{left:86%; top:78%; transform:translateX(-100%);}

@media (min-width: 821px) and (max-width: 1200px){
  .services-cloud--desktop{
    top:74.6% !important;
    height:138px !important;
    width:min(92vw,940px) !important;
  }
  .services-cloud--desktop .service-tag{
    font-size:clamp(15px,1.18vw,21px) !important;
  }
}

@media (min-width: 821px) and (max-height: 860px){
  .services-cloud--desktop{
    top:74.8% !important;
    height:124px !important;
    width:min(92vw,900px) !important;
  }
  .services-cloud--desktop .service-tag{
    font-size:clamp(14px,1.08vw,19px) !important;
  }
}

@media (min-width: 821px) and (max-height: 760px){
  .services-cloud--desktop{
    top:74.4% !important;
    height:112px !important;
    width:min(92vw,860px) !important;
  }
  .services-cloud--desktop .service-tag{
    font-size:clamp(13px,1vw,17px) !important;
  }
}


/* ===== v29: controlled service cloud, no overlaps ===== */

/* Desktop: airy cloud, but constrained to viewport */
.services-cloud--desktop{
  top:75.2% !important;
  width:min(86vw,1040px) !important;
  height:142px !important;
}
.services-cloud--desktop .service-tag{
  font-size:clamp(16px,1.15vw,22px) !important;
  font-weight:550 !important;
  color:rgba(255,255,255,.64) !important;
}

/* Re-spaced desktop coordinates */
.services-cloud--desktop .tag-web{left:7%; top:42%;}
.services-cloud--desktop .tag-admin{left:17%; top:68%;}
.services-cloud--desktop .tag-max{left:34%; top:22%;}
.services-cloud--desktop .tag-vps{left:37%; top:84%;}
.services-cloud--desktop .tag-linux{left:55%; top:40%;}
.services-cloud--desktop .tag-wp{left:45%; top:66%;}
.services-cloud--desktop .tag-net{left:59%; top:82%;}
.services-cloud--desktop .tag-vpn{left:73%; top:61%;}
.services-cloud--desktop .tag-auto{left:73%; top:26%;}
.services-cloud--desktop .tag-mon{left:89%; top:76%; transform:translateX(-100%);}

/* Tablet/mobile: stop using absolute cloud placement.
   Use a staggered wrapping layout instead. */
.services-cloud--mobile{
  position:relative !important;
  width:min(92vw,560px) !important;
  min-height:0 !important;
  margin:22px auto 92px !important;
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
  gap:16px 26px !important;
  padding:2px 8px 0 !important;
}
.services-cloud--mobile .service-tag{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  font-size:clamp(15px,2.6vw,20px) !important;
  color:rgba(255,255,255,.72) !important;
  line-height:1.15 !important;
}
.services-cloud--mobile .service-tag:nth-child(2){transform:translateY(8px) !important;}
.services-cloud--mobile .service-tag:nth-child(3){transform:translateY(-4px) !important;}
.services-cloud--mobile .service-tag:nth-child(4){transform:translateY(10px) !important;}
.services-cloud--mobile .service-tag:nth-child(5){transform:translateY(-2px) !important;}
.services-cloud--mobile .service-tag:nth-child(6){transform:translateY(8px) !important;}
.services-cloud--mobile .service-tag:nth-child(7){transform:translateY(-4px) !important;}
.services-cloud--mobile .service-tag:nth-child(8){transform:translateY(8px) !important;}
.services-cloud--mobile .service-tag:nth-child(9){transform:translateY(-2px) !important;}
.services-cloud--mobile .service-tag:nth-child(10){transform:translateY(6px) !important;}

/* Keep the fixed mobile CTA separated from the cloud */
@media (max-width:820px){
  .mobile-scene{
    padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 110px) !important;
  }
  .services-cloud--mobile{
    margin-bottom:96px !important;
  }
}

/* Phones: readable two/three-line cloud without crowding */
@media (max-width:480px){
  .services-cloud--mobile{
    width:min(94vw,410px) !important;
    gap:14px 20px !important;
    margin-top:20px !important;
    margin-bottom:92px !important;
    padding-inline:10px !important;
  }
  .services-cloud--mobile .service-tag{
    font-size:clamp(14px,4vw,17px) !important;
  }
}

/* Narrow phones: force comfortable wrapping */
@media (max-width:380px){
  .services-cloud--mobile{
    gap:13px 16px !important;
  }
  .services-cloud--mobile .service-tag{
    font-size:13.5px !important;
  }
}

/* Tablets: larger, more intentional spacing */
@media (min-width:600px) and (max-width:820px){
  .services-cloud--mobile{
    width:min(88vw,620px) !important;
    gap:20px 34px !important;
    margin-top:26px !important;
    margin-bottom:108px !important;
  }
  .services-cloud--mobile .service-tag{
    font-size:clamp(17px,2.2vw,21px) !important;
  }
}

/* Touch devices requesting desktop site */
@media (hover:none) and (pointer:coarse) and (min-width:821px) and (max-width:1200px){
  .services-cloud--mobile{
    width:min(78vw,760px) !important;
    gap:20px 36px !important;
    margin-top:24px !important;
    margin-bottom:112px !important;
  }
  .services-cloud--mobile .service-tag{
    font-size:clamp(17px,1.8vw,22px) !important;
  }
}

/* Hover should brighten words, without underline */
.service-tag:hover{
  color:#fff !important;
  opacity:1 !important;
  text-shadow:0 0 22px rgba(255,255,255,.34), 0 8px 28px rgba(0,0,0,.52) !important;
}


/* ===== v30: tuned responsive service cloud ===== */

/* Base mobile CTA spacing */
@media (max-width:820px){
  .mobile-scene{
    padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 112px) !important;
  }
  .mobile-action{
    left:12px !important;
    right:12px !important;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
  }
  .contact-launch--mobile{
    width:min(calc(100vw - 24px), 430px) !important;
  }
}

/* Portrait phones/tablets: deliberate floating layout, not a table */
@media (max-width:820px) and (orientation:portrait){
  .services-cloud--mobile{
    position:relative !important;
    display:block !important;
    width:min(92vw, 620px) !important;
    height:136px !important;
    min-height:0 !important;
    margin:20px auto 108px !important;
    padding:0 !important;
  }
  .services-cloud--mobile .service-tag{
    position:absolute !important;
    left:auto !important;
    top:auto !important;
    font-size:clamp(14px, 2.5vw, 20px) !important;
    line-height:1 !important;
    transform:none !important;
    color:rgba(255,255,255,.7) !important;
  }

  .services-cloud--mobile .tag-web{left:7%; top:18px;}
  .services-cloud--mobile .tag-admin{left:38%; top:42px;}
  .services-cloud--mobile .tag-max{left:41%; top:2px;}
  .services-cloud--mobile .tag-vps{left:28%; top:74px;}
  .services-cloud--mobile .tag-linux{left:72%; top:24px;}
  .services-cloud--mobile .tag-wp{left:58%; top:76px;}
  .services-cloud--mobile .tag-net{left:8%; top:98px;}
  .services-cloud--mobile .tag-vpn{left:74%; top:54px;}
  .services-cloud--mobile .tag-auto{left:44%; top:100px;}
  .services-cloud--mobile .tag-mon{left:90%; top:102px; transform:translateX(-100%) !important;}
}

/* Smaller portrait phones: slightly tighter but still airy */
@media (max-width:480px) and (orientation:portrait){
  .services-cloud--mobile{
    width:min(94vw, 410px) !important;
    height:128px !important;
    margin-top:18px !important;
    margin-bottom:102px !important;
  }
  .services-cloud--mobile .service-tag{
    font-size:clamp(13px, 3.9vw, 16px) !important;
  }
  .services-cloud--mobile .tag-web{left:6%; top:16px;}
  .services-cloud--mobile .tag-admin{left:39%; top:40px;}
  .services-cloud--mobile .tag-max{left:42%; top:0;}
  .services-cloud--mobile .tag-vps{left:26%; top:70px;}
  .services-cloud--mobile .tag-linux{left:73%; top:24px;}
  .services-cloud--mobile .tag-wp{left:56%; top:72px;}
  .services-cloud--mobile .tag-net{left:7%; top:94px;}
  .services-cloud--mobile .tag-vpn{left:73%; top:52px;}
  .services-cloud--mobile .tag-auto{left:43%; top:96px;}
  .services-cloud--mobile .tag-mon{left:89%; top:98px; transform:translateX(-100%) !important;}
}

/* Tablets in portrait: spread the cloud a bit wider */
@media (min-width:600px) and (max-width:820px) and (orientation:portrait){
  .services-cloud--mobile{
    width:min(88vw, 700px) !important;
    height:150px !important;
    margin-top:24px !important;
    margin-bottom:112px !important;
  }
  .services-cloud--mobile .service-tag{
    font-size:clamp(16px, 2vw, 21px) !important;
  }
  .services-cloud--mobile .tag-web{left:10%; top:20px;}
  .services-cloud--mobile .tag-admin{left:34%; top:48px;}
  .services-cloud--mobile .tag-max{left:43%; top:4px;}
  .services-cloud--mobile .tag-vps{left:30%; top:82px;}
  .services-cloud--mobile .tag-linux{left:68%; top:26px;}
  .services-cloud--mobile .tag-wp{left:55%; top:84px;}
  .services-cloud--mobile .tag-net{left:15%; top:114px;}
  .services-cloud--mobile .tag-vpn{left:71%; top:58px;}
  .services-cloud--mobile .tag-auto{left:52%; top:116px;}
  .services-cloud--mobile .tag-mon{left:88%; top:116px; transform:translateX(-100%) !important;}
}

/* Landscape phones/tablets: compact cloud in 2-ish rows and shorter hero */
@media (orientation:landscape) and (hover:none) and (pointer:coarse) and (max-width:1200px){
  .mobile-scene{
    padding:10px 14px calc(env(safe-area-inset-bottom, 0px) + 108px) !important;
  }
  .mobile-hero{
    height:52svh !important;
    min-height:220px !important;
    max-height:300px !important;
    background-position:center 41% !important;
  }
  .mobile-slogan{
    top:16px !important;
    font-size:clamp(11px, 1.8vw, 14px) !important;
    letter-spacing:.22em !important;
  }
  .services-cloud--mobile{
    position:relative !important;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    align-items:flex-start !important;
    width:min(94vw, 760px) !important;
    min-height:0 !important;
    height:auto !important;
    margin:12px auto 102px !important;
    gap:12px 24px !important;
    padding:0 8px !important;
  }
  .services-cloud--mobile .service-tag{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    font-size:clamp(14px, 1.75vw, 18px) !important;
    color:rgba(255,255,255,.7) !important;
  }
  .contact-launch--mobile{
    width:min(68vw, 420px) !important;
    min-height:58px !important;
  }
}

/* Very short landscape screens: compress the hero and spacing further */
@media (orientation:landscape) and (hover:none) and (pointer:coarse) and (max-width:1200px) and (max-height:430px){
  .mobile-hero{
    height:48svh !important;
    min-height:185px !important;
    max-height:240px !important;
  }
  .services-cloud--mobile{
    gap:10px 20px !important;
    margin-top:10px !important;
    margin-bottom:96px !important;
  }
  .services-cloud--mobile .service-tag{
    font-size:clamp(13px, 1.55vw, 16px) !important;
  }
  .contact-launch--mobile{
    min-height:54px !important;
  }
}


/* ===== v31: fix portrait service-tag positioning =====
   v29 had left/top:auto !important on mobile tags, so v30 coordinates
   without !important were ignored. These explicit overrides restore the
   intended controlled-chaotic layout on portrait phones/tablets. */

@media (max-width:820px) and (orientation:portrait){
  .services-cloud--mobile .tag-web{left:7% !important; top:18px !important;}
  .services-cloud--mobile .tag-admin{left:38% !important; top:42px !important;}
  .services-cloud--mobile .tag-max{left:41% !important; top:2px !important;}
  .services-cloud--mobile .tag-vps{left:28% !important; top:74px !important;}
  .services-cloud--mobile .tag-linux{left:72% !important; top:24px !important;}
  .services-cloud--mobile .tag-wp{left:58% !important; top:76px !important;}
  .services-cloud--mobile .tag-net{left:8% !important; top:98px !important;}
  .services-cloud--mobile .tag-vpn{left:74% !important; top:54px !important;}
  .services-cloud--mobile .tag-auto{left:44% !important; top:100px !important;}
  .services-cloud--mobile .tag-mon{left:90% !important; top:102px !important; transform:translateX(-100%) !important;}
}

@media (max-width:480px) and (orientation:portrait){
  .services-cloud--mobile .tag-web{left:6% !important; top:16px !important;}
  .services-cloud--mobile .tag-admin{left:39% !important; top:40px !important;}
  .services-cloud--mobile .tag-max{left:42% !important; top:0 !important;}
  .services-cloud--mobile .tag-vps{left:26% !important; top:70px !important;}
  .services-cloud--mobile .tag-linux{left:73% !important; top:24px !important;}
  .services-cloud--mobile .tag-wp{left:56% !important; top:72px !important;}
  .services-cloud--mobile .tag-net{left:7% !important; top:94px !important;}
  .services-cloud--mobile .tag-vpn{left:73% !important; top:52px !important;}
  .services-cloud--mobile .tag-auto{left:43% !important; top:96px !important;}
  .services-cloud--mobile .tag-mon{left:89% !important; top:98px !important; transform:translateX(-100%) !important;}
}

@media (min-width:600px) and (max-width:820px) and (orientation:portrait){
  .services-cloud--mobile .tag-web{left:10% !important; top:20px !important;}
  .services-cloud--mobile .tag-admin{left:34% !important; top:48px !important;}
  .services-cloud--mobile .tag-max{left:43% !important; top:4px !important;}
  .services-cloud--mobile .tag-vps{left:30% !important; top:82px !important;}
  .services-cloud--mobile .tag-linux{left:68% !important; top:26px !important;}
  .services-cloud--mobile .tag-wp{left:55% !important; top:84px !important;}
  .services-cloud--mobile .tag-net{left:15% !important; top:114px !important;}
  .services-cloud--mobile .tag-vpn{left:71% !important; top:58px !important;}
  .services-cloud--mobile .tag-auto{left:52% !important; top:116px !important;}
  .services-cloud--mobile .tag-mon{left:88% !important; top:116px !important; transform:translateX(-100%) !important;}
}


/* ===== v32: final polish for service cloud ===== */

/* Slight emphasis for primary skills */
.services-cloud .tag-web,
.services-cloud .tag-admin,
.services-cloud .tag-max,
.services-cloud .tag-auto{
  color:rgba(255,255,255,.78) !important;
  font-weight:600 !important;
}

/* Portrait phones: tighter vertical rhythm and safer right edge */
@media (max-width:480px) and (orientation:portrait){
  .services-cloud--mobile{
    height:118px !important;
    margin-top:14px !important;
    margin-bottom:96px !important;
  }
  .services-cloud--mobile .tag-web{left:6% !important; top:12px !important;}
  .services-cloud--mobile .tag-admin{left:39% !important; top:34px !important;}
  .services-cloud--mobile .tag-max{left:42% !important; top:0 !important;}
  .services-cloud--mobile .tag-vps{left:27% !important; top:62px !important;}
  .services-cloud--mobile .tag-linux{left:72% !important; top:20px !important;}
  .services-cloud--mobile .tag-wp{left:55% !important; top:64px !important;}
  .services-cloud--mobile .tag-net{left:7% !important; top:86px !important;}
  .services-cloud--mobile .tag-vpn{left:72% !important; top:46px !important;}
  .services-cloud--mobile .tag-auto{left:42% !important; top:88px !important;}
  .services-cloud--mobile .tag-mon{left:84% !important; top:90px !important; transform:translateX(-100%) !important;}
}

/* Medium portrait devices */
@media (min-width:481px) and (max-width:599px) and (orientation:portrait){
  .services-cloud--mobile{
    height:124px !important;
    margin-top:16px !important;
    margin-bottom:100px !important;
  }
  .services-cloud--mobile .tag-web{left:7% !important; top:14px !important;}
  .services-cloud--mobile .tag-admin{left:38% !important; top:36px !important;}
  .services-cloud--mobile .tag-max{left:41% !important; top:0 !important;}
  .services-cloud--mobile .tag-vps{left:28% !important; top:66px !important;}
  .services-cloud--mobile .tag-linux{left:71% !important; top:22px !important;}
  .services-cloud--mobile .tag-wp{left:57% !important; top:68px !important;}
  .services-cloud--mobile .tag-net{left:8% !important; top:90px !important;}
  .services-cloud--mobile .tag-vpn{left:73% !important; top:48px !important;}
  .services-cloud--mobile .tag-auto{left:43% !important; top:92px !important;}
  .services-cloud--mobile .tag-mon{left:85% !important; top:94px !important; transform:translateX(-100%) !important;}
}

/* Tablets: slightly larger labels and a tighter cloud */
@media (min-width:600px) and (max-width:820px) and (orientation:portrait){
  .services-cloud--mobile{
    height:136px !important;
    margin-top:18px !important;
    margin-bottom:104px !important;
  }
  .services-cloud--mobile .service-tag{
    font-size:clamp(17px,2.15vw,22px) !important;
  }
  .services-cloud--mobile .tag-web{left:10% !important; top:16px !important;}
  .services-cloud--mobile .tag-admin{left:34% !important; top:42px !important;}
  .services-cloud--mobile .tag-max{left:43% !important; top:2px !important;}
  .services-cloud--mobile .tag-vps{left:30% !important; top:72px !important;}
  .services-cloud--mobile .tag-linux{left:68% !important; top:22px !important;}
  .services-cloud--mobile .tag-wp{left:55% !important; top:74px !important;}
  .services-cloud--mobile .tag-net{left:15% !important; top:100px !important;}
  .services-cloud--mobile .tag-vpn{left:71% !important; top:52px !important;}
  .services-cloud--mobile .tag-auto{left:52% !important; top:102px !important;}
  .services-cloud--mobile .tag-mon{left:84% !important; top:104px !important; transform:translateX(-100%) !important;}
}

/* Landscape: keep it compact and lightly staggered */
@media (orientation:landscape) and (hover:none) and (pointer:coarse) and (max-width:1200px){
  .services-cloud--mobile{
    margin-top:10px !important;
    margin-bottom:96px !important;
    gap:10px 22px !important;
  }
  .services-cloud--mobile .service-tag:nth-child(2n){transform:translateY(3px) !important;}
  .services-cloud--mobile .service-tag:nth-child(3n){transform:translateY(-2px) !important;}
}


/* ===== v33: final responsive polish ===== */

/* Phone portrait: use full cloud width safely, keep Monitoring inside */
@media (max-width:480px) and (orientation:portrait){
  .services-cloud--mobile{
    width:calc(100% - 20px) !important;
    max-width:420px !important;
    height:116px !important;
    margin-top:14px !important;
    margin-bottom:94px !important;
  }
  .services-cloud--mobile .service-tag{
    font-size:clamp(12.8px,3.65vw,15.5px) !important;
  }
  .services-cloud--mobile .tag-web{left:4% !important; top:12px !important;}
  .services-cloud--mobile .tag-max{left:42% !important; top:0 !important;}
  .services-cloud--mobile .tag-linux{left:70% !important; top:18px !important;}
  .services-cloud--mobile .tag-admin{left:35% !important; top:36px !important;}
  .services-cloud--mobile .tag-vpn{left:70% !important; top:44px !important;}
  .services-cloud--mobile .tag-vps{left:25% !important; top:62px !important;}
  .services-cloud--mobile .tag-wp{left:52% !important; top:64px !important;}
  .services-cloud--mobile .tag-net{left:4% !important; top:86px !important;}
  .services-cloud--mobile .tag-auto{left:40% !important; top:88px !important;}
  .services-cloud--mobile .tag-mon{left:auto !important; right:3% !important; top:88px !important; transform:none !important;}
}

/* Tablets portrait: a little more spread and a touch larger */
@media (min-width:600px) and (max-width:820px) and (orientation:portrait){
  .services-cloud--mobile{
    width:min(90vw,720px) !important;
    height:142px !important;
    margin-top:20px !important;
    margin-bottom:104px !important;
  }
  .services-cloud--mobile .service-tag{
    font-size:clamp(17.5px,2.22vw,22.5px) !important;
  }
  .services-cloud--mobile .tag-web{left:7% !important; top:18px !important;}
  .services-cloud--mobile .tag-max{left:42% !important; top:0 !important;}
  .services-cloud--mobile .tag-linux{left:71% !important; top:20px !important;}
  .services-cloud--mobile .tag-admin{left:31% !important; top:46px !important;}
  .services-cloud--mobile .tag-vpn{left:72% !important; top:54px !important;}
  .services-cloud--mobile .tag-vps{left:27% !important; top:76px !important;}
  .services-cloud--mobile .tag-wp{left:55% !important; top:78px !important;}
  .services-cloud--mobile .tag-net{left:10% !important; top:108px !important;}
  .services-cloud--mobile .tag-auto{left:47% !important; top:108px !important;}
  .services-cloud--mobile .tag-mon{left:auto !important; right:5% !important; top:110px !important; transform:none !important;}
}

/* Medium portrait devices: same edge safety */
@media (min-width:481px) and (max-width:599px) and (orientation:portrait){
  .services-cloud--mobile .tag-mon{left:auto !important; right:4% !important; transform:none !important;}
}

/* Large desktop displays: don't let CTA and skills look tiny */
@media (min-width:1600px) and (min-height:900px){
  .contact-launch--desktop{
    width:clamp(400px,27vw,540px) !important;
    min-height:clamp(72px,7vh,92px) !important;
    font-size:clamp(22px,1.45vw,30px) !important;
  }
  .services-cloud--desktop{
    width:min(82vw,1320px) !important;
    height:170px !important;
    top:74.4% !important;
  }
  .services-cloud--desktop .service-tag{
    font-size:clamp(19px,1.2vw,27px) !important;
  }
}

/* Very large desktop / 2K+ */
@media (min-width:2200px) and (min-height:1400px){
  .contact-launch--desktop{
    width:560px !important;
    min-height:96px !important;
    font-size:31px !important;
  }
  .services-cloud--desktop{
    width:min(78vw,1500px) !important;
    height:190px !important;
  }
  .services-cloud--desktop .service-tag{
    font-size:28px !important;
  }
}


/* ===== v34: mobile portrait fixed composition ===== */

/* Phones portrait: stable non-overlapping 4-level composition */
@media (max-width:480px) and (orientation:portrait){
  .services-cloud--mobile{
    width:calc(100% - 24px) !important;
    max-width:420px !important;
    height:126px !important;
    margin-top:16px !important;
    margin-bottom:96px !important;
  }
  .services-cloud--mobile .service-tag{
    font-size:clamp(12.5px,3.45vw,15px) !important;
    line-height:1 !important;
  }

  /* level 1 */
  .services-cloud--mobile .tag-max{
    left:43% !important;
    top:0 !important;
  }

  /* level 2 */
  .services-cloud--mobile .tag-web{
    left:4% !important;
    top:24px !important;
  }
  .services-cloud--mobile .tag-linux{
    left:72% !important;
    top:24px !important;
  }

  /* level 3 */
  .services-cloud--mobile .tag-admin{
    left:31% !important;
    top:50px !important;
  }
  .services-cloud--mobile .tag-vpn{
    left:auto !important;
    right:10% !important;
    top:54px !important;
    transform:none !important;
  }

  /* level 4 */
  .services-cloud--mobile .tag-net{
    left:5% !important;
    top:82px !important;
  }
  .services-cloud--mobile .tag-vps{
    left:27% !important;
    top:76px !important;
  }
  .services-cloud--mobile .tag-wp{
    left:49% !important;
    top:82px !important;
  }
  .services-cloud--mobile .tag-auto{
    left:37% !important;
    top:106px !important;
  }
  .services-cloud--mobile .tag-mon{
    left:auto !important;
    right:4% !important;
    top:104px !important;
    transform:none !important;
  }
}

/* Extra narrow phones */
@media (max-width:370px) and (orientation:portrait){
  .services-cloud--mobile{
    width:calc(100% - 20px) !important;
    height:128px !important;
  }
  .services-cloud--mobile .service-tag{
    font-size:12px !important;
  }
  .services-cloud--mobile .tag-admin{left:29% !important;}
  .services-cloud--mobile .tag-vpn{right:8% !important;}
  .services-cloud--mobile .tag-wp{left:47% !important;}
  .services-cloud--mobile .tag-auto{left:35% !important;}
  .services-cloud--mobile .tag-mon{right:3% !important;}
}