/* TryFogerVape V3 — light tech visual system */
:root{--tf-ink:#102a35;--tf-muted:#657b85;--tf-teal:#00bdb8;--tf-paper:#f8fafc;--tf-border:#e4edf1}
html{scroll-behavior:smooth}body.tf-site{margin:0;background:var(--tf-paper);color:var(--tf-ink)}.tf-site .site,.tf-site #page{background:transparent}.tf-site *{box-sizing:border-box}.tf-site a{text-decoration:none}.tf-skip{position:absolute;left:-9999px;top:0;z-index:999}.tf-skip:focus{left:15px;top:15px;padding:10px;background:white}
.tf-header{background:#fff;border-bottom:1px solid #edf0f2;position:relative;z-index:30;font-family:Arial,Helvetica,sans-serif}.tf-header-inner{max-width:1360px;margin:auto;padding:0 38px;min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px}.tf-brand,.tf-footer-brand{color:#122b35!important;font-size:24px;line-height:1.1;letter-spacing:-.9px;font-weight:900;white-space:nowrap}.tf-brand span,.tf-footer-brand span{color:#00aaa6}.tf-brand b,.tf-footer-brand b{color:#ff7477}.tf-desktop-nav{display:flex;align-items:center;gap:34px}.tf-desktop-nav a,.tf-cart{color:#223d48!important;font-size:13px;font-weight:650}.tf-desktop-nav a:hover,.tf-cart:hover{color:#00a8a3!important}.tf-header-actions{display:flex;align-items:center;gap:18px}.tf-cart{display:inline-flex;gap:9px;align-items:center}.tf-mobile-menu{display:none}
.tf-main{width:100%;margin:0;max-width:none}.tf-hero{width:100%;position:relative;background:#0b0f14}.tf-hero picture,.tf-hero img{display:block;width:100%}.tf-hero img{height:auto}.tf-hero-link{position:absolute;display:block;z-index:3;border-radius:50px}.tf-hero-link:focus-visible{outline:3px solid white;outline-offset:2px}.tf-hero-link-primary{left:3.6%;top:62%;width:17%;height:8%}.tf-hero-link-secondary{left:21.2%;top:62%;width:17%;height:8%}
.tf-container{max-width:1230px;padding:0 28px;margin:0 auto}.tf-series{padding:100px 0 105px;background:#f8fafc;scroll-margin-top:25px}.tf-section-heading{text-align:center;max-width:700px;margin:0 auto 44px}.tf-eyebrow{color:#008f8d!important;font-weight:800;letter-spacing:2.5px;font-size:11px;margin:0 0 14px}.tf-section-heading h1{font-size:clamp(32px,4vw,52px);color:#102a35;letter-spacing:-1.7px;line-height:1.12;margin:0 0 18px;font-weight:800}.tf-section-heading>p:last-child{color:#607783;font-size:16px;line-height:1.6;margin:0}.tf-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.tf-card{background:#fff;border:1px solid var(--tf-border);border-radius:20px;overflow:hidden;box-shadow:0 15px 45px rgba(22,57,68,.045)}.tf-card-image{height:360px;padding:20px;display:flex;align-items:center;justify-content:center}.tf-card-image img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply}.tf-card-red{background:linear-gradient(145deg,#fff4f3,#fffafa)}.tf-card-mint{background:linear-gradient(145deg,#e9fbf8,#f8fdfc)}.tf-card-blue{background:linear-gradient(145deg,#edf4ff,#f9fbff)}.tf-card-info{padding:26px 26px 30px}.tf-tag{font-size:10px;color:#069c97;font-weight:800;letter-spacing:1.5px}.tf-card-info h2{margin:12px 0 9px;color:#152f38;font-size:23px;letter-spacing:-.5px;font-weight:800}.tf-card-info p{margin:0;min-height:46px;color:#68808a;line-height:1.6;font-size:14px}.tf-detail{display:block;border-top:1px solid #e9f0f2;padding-top:17px;margin-top:22px;color:#008e8b;font-size:13px;font-weight:750}
.tf-feature{background:#eaf7f7;padding:77px 0;overflow:hidden}.tf-feature-inner{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:30px}.tf-feature h2{max-width:590px;font-size:clamp(31px,4vw,48px);color:#102a35;letter-spacing:-1.5px;line-height:1.15;margin:0 0 18px}.tf-feature p:not(.tf-eyebrow){max-width:570px;color:#597681;line-height:1.7;font-size:16px}.tf-feature-graphic{position:relative;height:290px;display:flex;align-items:center;justify-content:center}.tf-ring{border:1px solid rgba(0,174,169,.26);border-radius:50%;position:absolute;transform:rotate(-22deg)}.tf-ring-one{width:390px;height:175px}.tf-ring-two{width:285px;height:285px;border-color:rgba(0,174,169,.16)}.tf-feature-word{color:#0caaa5;font-weight:900;letter-spacing:12px;font-size:clamp(38px,5vw,72px)}.tf-next{background:#fff;padding:72px 0}.tf-next-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.tf-next h2{font-size:36px;letter-spacing:-1px;color:#102a35;margin:0 0 9px}.tf-next p:not(.tf-eyebrow){color:#667e89;margin:0}.tf-next-link{background:#00bdb8;color:#082f36!important;padding:16px 27px;border-radius:50px;font-size:14px;font-weight:800;white-space:nowrap}
.tf-footer{background:#f2f6f8;border-top:1px solid #e1ebef;font-family:Arial,Helvetica,sans-serif}.tf-footer-inner{max-width:1230px;margin:auto;padding:64px 28px 22px}.tf-footer-top{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:32px;padding-bottom:52px}.tf-footer-brand{font-size:24px}.tf-footer-about p{max-width:290px;color:#6d838e;font-size:14px;line-height:1.6;margin:18px 0}.tf-footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.tf-footer-col h2{font-size:14px;color:#183440;font-weight:800;margin:0 0 8px}.tf-footer-col a{font-size:13px;color:#627b88!important}.tf-footer-col a:hover{color:#00aaa6!important}.tf-footer-bottom{border-top:1px solid #dae5e9;padding-top:20px;display:flex;justify-content:space-between;gap:15px;font-size:12px;color:#79909a}.tf-footer-bottom span:last-child{letter-spacing:1.5px;font-size:10px}
/* Neutralize v2 header/footer CSS still enqueued only if old files exist */
.tf-site .tf-header{background:#fff}.tf-site .tf-footer{background:#f2f6f8}.tf-site .tf-brand-sub{display:none}
@media(max-width:900px){.tf-header-inner{min-height:68px;padding:0 18px}.tf-brand{font-size:21px}.tf-desktop-nav{display:none}.tf-mobile-menu{display:block;position:relative}.tf-mobile-menu summary{list-style:none;display:flex;width:36px;height:36px;align-items:center;justify-content:center;cursor:pointer;color:#102a35}.tf-mobile-menu summary::-webkit-details-marker{display:none}.tf-mobile-menu nav{position:absolute;top:43px;right:0;width:min(270px,calc(100vw - 30px));display:flex;flex-direction:column;background:#fff;box-shadow:0 15px 40px #0e364233;border:1px solid #e4edf1;border-radius:12px;padding:8px}.tf-mobile-menu nav a{padding:13px;color:#173743!important;font-size:14px;border-radius:8px}.tf-mobile-menu nav a:hover{background:#ecfaf9}.tf-cards{gap:14px}.tf-card-image{height:280px}.tf-feature-inner{grid-template-columns:1fr}.tf-feature-graphic{height:190px}.tf-ring-one{width:300px;height:150px}.tf-ring-two{width:190px;height:190px}}
@media(max-width:767px){.tf-header-inner{min-height:62px;padding:0 15px;gap:8px}.tf-brand{font-size:19px}.tf-cart span{display:none}.tf-header-actions{gap:14px}.tf-hero-link-primary{left:11%;top:79.5%;width:77%;height:6.4%}.tf-hero-link-secondary{left:11%;top:86.8%;width:77%;height:6.4%}.tf-series{padding:62px 0 67px}.tf-container{padding:0 18px}.tf-section-heading{margin-bottom:27px;text-align:left}.tf-section-heading h1{font-size:34px;letter-spacing:-1px}.tf-section-heading>p:last-child{font-size:14px}.tf-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:10px;margin-right:-18px;padding-right:18px;scrollbar-width:thin}.tf-card{flex:0 0 min(78vw,310px);scroll-snap-align:start}.tf-card-image{height:260px}.tf-card-info{padding:20px}.tf-card-info h2{font-size:21px}.tf-feature{padding:56px 0}.tf-feature h2{font-size:34px}.tf-feature p:not(.tf-eyebrow){font-size:14px}.tf-feature-graphic{height:140px}.tf-feature-word{font-size:40px;letter-spacing:6px}.tf-next{padding:55px 0}.tf-next-inner{flex-direction:column;align-items:flex-start;gap:23px}.tf-next h2{font-size:30px}.tf-footer-inner{padding:50px 18px 20px}.tf-footer-top{grid-template-columns:1fr 1fr;gap:34px}.tf-footer-about{grid-column:1/-1}.tf-footer-bottom{flex-direction:column}}
@media(max-width:360px){.tf-brand{font-size:17px}.tf-header-actions{gap:8px}.tf-card{flex-basis:84vw}}


/* TRYFOGERVAPE HERO V4 FINAL */
.tf-hero-v4 {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #edf8fb;
  isolation: isolate;
}
.tf-hero-v4-picture,
.tf-hero-v4-picture img {
  display: block;
  width: 100%;
}
.tf-hero-v4-picture img {
  height: auto;
  object-fit: cover;
}
.tf-hero-v4-content {
  position: absolute;
  z-index: 2;
  left: max(4.5%, calc((100% - 1360px) / 2));
  top: 50%;
  transform: translateY(-50%);
  width: min(44%, 630px);
  color: #102a35;
}
.tf-hero-v4-eyebrow {
  color: #008f8d;
  font-size: clamp(10px, .9vw, 13px);
  font-weight: 800;
  letter-spacing: 2.5px;
  margin: 0 0 22px;
}
.tf-hero-v4 h1 {
  font-size: clamp(35px, 4.2vw, 74px);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -.045em;
  color: #102a35;
  margin: 0 0 24px;
}
.tf-hero-v4 h1 span {
  color: #00aaa6;
}
.tf-hero-v4-description {
  max-width: 520px;
  color: #536f7d;
  font-size: clamp(13px, 1.2vw, 18px);
  line-height: 1.65;
  margin: 0 0 30px;
}
.tf-hero-v4-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.tf-hero-v4-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  min-height: 49px;
  padding: 12px 24px;
  border-radius: 100px;
  font-weight: 750;
  font-size: 14px;
  text-align: center;
  text-decoration: none !important;
  transition: transform .2s ease, background .2s ease;
}
.tf-hero-v4-button:hover {
  transform: translateY(-2px);
}
.tf-hero-v4-primary {
  background: #00bdb8;
  color: #082f36 !important;
}
.tf-hero-v4-secondary {
  background: rgba(255,255,255,.8);
  border: 1px solid #00aaa6;
  color: #102a35 !important;
}
.tf-series .tf-section-heading h2 {
  font-size: clamp(32px,4vw,52px);
  color: #102a35;
  letter-spacing: -1.7px;
  line-height: 1.12;
  margin: 0 0 18px;
  font-weight: 800;
}
@media (min-width: 768px) and (max-width: 1100px) {
  .tf-hero-v4-content {
    left: 4%;
    width: 45%;
  }
  .tf-hero-v4 h1 {
    font-size: clamp(33px,4vw,48px);
    margin-bottom: 14px;
  }
  .tf-hero-v4-description {
    font-size: 13px;
    margin-bottom: 16px;
  }
  .tf-hero-v4-eyebrow {
    margin-bottom: 12px;
  }
  .tf-hero-v4-button {
    min-height: 40px;
    padding: 10px 15px;
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  .tf-hero-v4 {
    display: flex;
    flex-direction: column;
    background: #f2fbfd;
  }
  .tf-hero-v4-content {
    order: -1;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    padding: 35px 22px 16px;
  }
  .tf-hero-v4-picture {
    width: 100%;
    margin-top: -2px;
  }
  .tf-hero-v4-picture img {
    width: 100%;
    height: auto;
  }
  .tf-hero-v4-eyebrow {
    font-size: 10px;
    letter-spacing: 1.7px;
    margin-bottom: 13px;
  }
  .tf-hero-v4 h1 {
    font-size: clamp(34px,9vw,46px);
    letter-spacing: -.04em;
    margin-bottom: 15px;
  }
  .tf-hero-v4-description {
    max-width: 500px;
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 22px;
  }
  .tf-hero-v4-actions {
    gap: 10px;
  }
  .tf-hero-v4-button {
    min-height: 44px;
    padding: 11px 17px;
    font-size: 12px;
    gap: 8px;
  }
  .tf-series .tf-section-heading h2 {
    font-size: 34px;
    letter-spacing: -1px;
  }
}
@media (max-width: 360px) {
  .tf-hero-v4-content {
    padding: 28px 16px 12px;
  }
  .tf-hero-v4 h1 {
    font-size: 32px;
  }
  .tf-hero-v4-button {
    font-size: 11px;
    padding: 10px 12px;
  }
}


/* TRYFOGERVAPE HERO V5 MOBILE */
@media (max-width:767px) {
  .tf-hero-v4 {
    display:flex;
    flex-direction:column;
    background:#f1f9fc;
    overflow:hidden;
  }

  .tf-hero-v4-content {
    position:relative;
    order:-1;
    left:auto;
    top:auto;
    transform:none;
    width:100%;
    padding:27px 20px 8px;
    margin:0;
    z-index:2;
  }

  .tf-hero-v4-eyebrow {
    font-size:10px;
    line-height:1.4;
    letter-spacing:1.5px;
    margin:0 0 11px;
  }

  .tf-hero-v4 h1 {
    font-size:clamp(30px,8.2vw,39px);
    line-height:1.11;
    letter-spacing:-.04em;
    margin:0 0 12px;
  }

  .tf-hero-v4-description {
    font-size:13px;
    line-height:1.5;
    max-width:480px;
    margin:0 0 17px;
  }

  .tf-hero-v4-actions {
    display:flex;
    flex-wrap:nowrap;
    gap:9px;
    margin:0;
  }

  .tf-hero-v4-button {
    min-width:0;
    flex:1;
    padding:10px 9px;
    min-height:43px;
    font-size:11.5px;
    line-height:1.25;
    gap:5px;
    white-space:nowrap;
  }

  .tf-hero-v4-picture {
    order:0;
    width:100%;
    display:block;
    margin:0;
    padding:0;
    line-height:0;
  }

  .tf-hero-v4-picture img {
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    object-fit:contain;
    object-position:center;
    margin:0;
    padding:0;
  }
}

@media (max-width:360px) {
  .tf-hero-v4-content {
    padding:23px 15px 7px;
  }
  .tf-hero-v4 h1 {
    font-size:29px;
  }
  .tf-hero-v4-button {
    font-size:10.5px;
    padding:9px 6px;
  }
}
