/* ====== Design Tokens (Light, brand red) ====== */
:root{
  --bg:#ffffff; --panel:#ffffff; --panel-2:#f8f9fb;
  --text:#0b0c0f; --muted:#5b6474;
  --brand:#C4122F; --brand-2:#E22A46; --accent:#FFB41F;
  --ring:#e7e9ee; --hair:#e9ebf0; --hair-2:#dfe3ea;
  --radius:16px; --shadow:0 8px 28px rgba(0,0,0,.06);
  --maxw:1200px; --gap:clamp(16px,2vw,28px); --mx:min(5vw,28px);

  /* NEW: band background for full-bleed section */
  --band-bg:#f6f8fb; /* tweak to #f4f6f9 for slightly darker */
}
html {
  scroll-behavior: smooth;
}
/* ====== Reset / Base ====== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  color:var(--text); background:#fff; line-height:1.55;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--mx)}
.muted{color:var(--muted)}
.hdline{width:56px; height:3px; border-radius:999px; background:var(--brand)}

/* Buttons & chips */
.btn{display:inline-flex; align-items:center; gap:.6rem; padding: 8px 26px;
  border-radius:999px; font-weight:700; letter-spacing:.2px;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.btn.primary{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#fff; box-shadow:0 6px 16px rgba(196,18,47,.25);
}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost{border:1px solid var(--hair); background:#fff; color:var(--text)}
.btn.ghost:hover{background:#fafbfc}
.pill{
  display:inline-flex; gap:.5rem; align-items:center; padding:.4rem .8rem;
  border:1px solid var(--hair); border-radius:999px; font-size:.85rem; color:var(--muted); background:#fff;
}
.badge{
  display:inline-block; padding:.25rem .6rem; border-radius:999px; font-size:.75rem;
  background:#fff1f3; color:var(--brand); border:1px solid #ffd6dc;
}

/* ====== Header (light frosted) ====== */
header{
  position:sticky; top:0;
  backdrop-filter:saturate(1.2) blur(10px);
  background:rgba(255,255,255,.78);
  border-bottom:1px solid var(--hair);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:var(--gap); padding:.8rem 0}
.brand{display:flex; align-items:center; gap:.8rem; font-weight:800; letter-spacing:.2px}
.brand svg{width:28px; height:28px}
nav ul{display:none; gap:1.2rem; list-style:none; margin:0; padding:0}
nav a{color:var(--muted)} nav a:hover{color:var(--text)}
.nav-cta{display:none; gap:.6rem}
@media (min-width:860px){nav ul,.nav-cta{display:flex}}

/* ====== Hero ====== */
.hero{position:relative; z-index:0; overflow:hidden;}
.hero-inner{display:grid; align-items:center; grid-template-columns:1fr; gap:var(--gap); padding-block:clamp(48px,12vh,0px)}
@media (min-width:980px){.hero-inner{grid-template-columns:1fr 1.1fr}} /* MODIFIED: Gave visual column more space (1.1fr) */
.hero .visual{
  position:relative; /* aspect-ratio:16/10; REMOVED THIS */ border-radius:var(--radius); overflow:hidden; background:#f3f5f8;
  box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; border:1px solid #fff;
  min-height:380px; /* NEW: Added minimum height */
}
/* ===== Fix hero video: show full video, no cropped edges ===== */
.hero .visual{
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  height: auto;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: #f3f5f8;
  box-shadow: var(--shadow);
  border: 1px solid #fff;
}

.hero-video{
  position: relative !important;
  inset: auto !important;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain !important;
  object-position: center;
  background: #f3f5f8;
}
.hero h1{font-size:clamp(2rem,5vw,3.2rem); line-height:1.05; margin:0 0 .6rem}
.hero em{color:var(--brand); font-style:normal}
.hero p.lead{color:var(--muted); font-size:clamp(1rem,2.2vw,1.2rem); max-width:65ch}
.hero .actions{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.1rem}

/* ====== Intro ====== */
/* ===== Intro spec layout ===== */

.intro-spec {

  padding-block: clamp(52px, 9vh, 80px);
}

.intro-spec-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.5fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* left block */

.intro-spec-main {
  position: relative;
  padding-left: 18px;
}



.intro-spec-eyebrow {
  margin: 0 0 .35rem;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.intro-spec-title {
  margin: .2rem 0 .9rem;
  font-size: clamp(2rem, 3.8vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -.01em;
}

.intro-spec-title .accent {
  color: var(--brand-2);
}

.intro-spec-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.4rem;
}

/* right panel */

.intro-spec-panel {
  border-radius: 20px;
  border: 1px solid var(--ring);
  background:
    radial-gradient(circle at top right, rgba(196,18,47,.03), transparent 60%),
    #ffffff;
  box-shadow: 0 18px 40px rgba(15,23,42,.06);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.intro-spec-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  padding-block: 10px;
  border-bottom: 1px solid var(--hair);
}

.intro-spec-row-last {
  border-bottom: none;
  padding-bottom: 6px;
}

.intro-spec-label {
  font-size: .75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
}

.intro-spec-value {
  font-size: .95rem;
}

.intro-spec-note {
  display: block;
  margin-top: .15rem;
  font-size: .82rem;
  color: var(--muted);
}

/* small bullet list inside the last row */

.intro-spec-list {
  list-style: none;
  padding: 0;
  margin: .35rem 0 0;
  display: grid;
  gap: .35rem;
}

.intro-spec-list li {
  position: relative;
  padding-left: 1.4rem;
}

.intro-spec-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 2px solid var(--brand);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(196,18,47,.08);
}

/* actions at bottom */

.intro-spec-actions {
  display: flex;
  justify-content: center;
  gap: .6rem;
  margin-top: 10px;
}

/* responsive */

@media (max-width: 900px) {
  .intro-spec-grid {
    grid-template-columns: 1fr;
  }

  .intro-spec-panel {
    order: 2;
  }
}

@media (max-width: 640px) {
  .intro-spec-row {
    grid-template-columns: 1fr;
  }
}

/* ====== Feature Split (cards) ====== */
/* Full-bleed band background only for this section */
.split{
  position: relative;
  isolation: isolate;                            /* prevent margin collapse */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);

  /* more space inside the band */
  padding-block: clamp(64px, 10vh, 120px);

  /* white space outside the band (above & below) */
  margin-block: clamp(32px, 6vh, 80px);
}

/* full-bleed background for the band + soft separators */
.split::before{
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%);
  width: 99vw;         /* bleed to edges */
  top: 0;
  bottom: 0;
  background: var(--band-bg);        /* from earlier: #f6f8fb (tweak if needed) */
  
}
@media (min-width:980px){
  .split{ grid-template-columns: 1.1fr 1fr; }
}
.card{
  background:#fff; border:1px solid var(--ring); border-radius:var(--radius);
  padding:clamp(16px,2.2vw,24px); box-shadow:var(--shadow); height:100%;
  display:flex; flex-direction:column; gap:14px;
}
.kpis{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:4px}
.kpi{background:var(--panel-2); border:1px solid var(--hair); padding:14px; border-radius:12px; text-align:center; display:flex; flex-direction:column; justify-content:center; min-height:96px}
.kpi .n{font-size:1.6rem; font-weight:800; color:var(--brand)}
.feature-list{list-style:none; margin:0; padding:0; display:grid; gap:12px; line-height:1.8}
.feature-list li{position:relative; padding-left:1.2rem}
.feature-list li::before{  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid var(--brand);}
.card .actions{margin-top:auto}





/* ====== Sections & product cards ====== */
.section{padding: 70px 0px 50px 0px;; background:#fff}
.section .hd{display:flex; justify-content:space-between; align-items:end; gap:var(--gap); margin-bottom:18px}
.section .hd h2{font-size:clamp(1.4rem,3.6vw,2.2rem); margin:0}
.grid{display:grid; grid-template-columns:1fr; gap:var(--gap)}
@media (min-width:680px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}

.product{
  background:#fff; border:1px solid var(--ring); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;
}
.product .thumb{
  aspect-ratio:16/10; background:linear-gradient(120deg,rgba(226,42,70,.12),rgba(196,18,47,.10));
  border-bottom:1px solid var(--hair);
}
.product .body{padding:16px}
.product h3{margin:0 0 6px; font-size:1.1rem; font-weight: 500;}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.chip{font-size:.75rem; border:1px solid var(--hair); padding:.25rem .55rem; border-radius:999px; color:var(--muted); background:#fff}

/* ====== Carousel (unchanged JS, light UI) ====== */
.tcarousel{ position:relative; display:flex; flex-direction:column; gap:16px; height:100% }
.tviewport{ overflow:hidden; border-radius:12px; background:#fff }
.ttrack{ display:flex; transition:transform .4s ease }
.tslide{ flex:0 0 100%; padding:2px }
.tnav{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto }
.tdots{ display:flex; gap:8px }
.tdot{ width:8px; height:8px; border-radius:999px; background:#e7e9ee; border:1px solid #e7e9ee }
.tdot.is-active{ background:var(--brand); border-color:var(--brand) }
.tbtn{
  display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px;
  border-radius:10px; border:1px solid var(--hair); color:var(--text); background:#fff; cursor:pointer;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.tbtn:hover{ transform:translateY(-1px); background:#fafbfc; border-color:var(--hair-2) }

/* Compact product carousel */
.pcarousel .tviewport { overflow:hidden; border-radius:16px; padding-inline:4px; background:transparent }
.pcarousel .ttrack { display:flex; gap:16px; transition:transform .4s ease }
.pcarousel .tslide { flex:0 0 var(--slide-w,100%) }
.pcarousel .product { border-radius:16px }
.pcarousel .product .thumb { aspect-ratio:16/9 }
.pcarousel .chips { margin-top:10px }

/* ====== Footer ====== */
footer{margin-top:80px; border-top:1px solid var(--hair); background:#fff}
.foot{display:grid; grid-template-columns:1fr; gap:var(--gap); padding-block:28px}
@media (min-width:860px){.foot{grid-template-columns:2fr 1fr 1fr 1fr}}

/* Timeline block styled for Heliotherm */

.timeline-cover {

  padding-block: clamp(56px, 10vh, 56px);
}

.timeline-title {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}

.timeline-title h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.4rem);
  margin: .35rem 0 .4rem;
  line-height: 1.1;
}

.timeline-title p {
  max-width: 60ch;
  margin-inline: auto;
}

.timeline {
  padding-top: 24px;
}

.timeline ul {
  position: relative;
  list-style: none;
  padding: 60px 0 0;
  margin: 0 auto;
  max-width: 960px;
}

/* Vertical line through the middle */
.timeline ul::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: var(--hair-2);
}

/* Each step */
.timeline ul li {
  position: relative;
  width: 2px;
  margin: 0 auto 56px;
}

/* Dot on the line */
.timeline ul li::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -28px;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand);
  box-shadow: 0 0 0 4px rgba(196, 18, 47, .08);
}

/* Card content */
.tcontent {
  position: relative;
  top: -100px;
  width: 300px;
  padding: 18px 20px 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--ring);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Reveal state */
.tcontent.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Year badge */
.tbadge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: #fff1f3;
  color: var(--brand);
  border: 1px solid #ffd6dc;
}

.tcontent h3 {
  margin: 12px 0 6px;
  font-size: 1.05rem;
}

.tcontent p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.6;
}

/* Left right alternation */
.timeline ul li:nth-child(odd) .tcontent {
  left: 72px;
}

.timeline ul li:nth-child(even) .tcontent {
  left: calc(-300px - 72px);
}

/* Responsive tweaks */
@media (max-width: 1020px) {
  .tcontent {
    width: 40vw;
  }
  .timeline ul li:nth-child(even) .tcontent {
    left: calc(-40vw - 48px);
  }
}

@media (max-width: 720px) {
  .timeline-title {
    text-align: left;
  }
  .timeline-title h2 {
    font-size: 1.7rem;
  }
  .timeline ul::before {
    left: 32px;
    transform: none;
  }
  .timeline ul li {
    margin-left: 32px;
  }
  .tcontent {
    width: calc(100vw - 96px);
    left: 40px !important;
  }
}



.quality-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr);
  gap: var(--gap);
  align-items: flex-start;
}

.quality-main h2 {
  margin: .4rem 0 .6rem;
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
}

.quality-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 1.4rem;
}

.qstat-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
}

.qstat-value {
  font-weight: 700;
  margin-top: .15rem;
}

.quality-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.quality-panel {
  background: #fff;
  border-radius: 18px;
  border: 1px solid var(--ring);
  box-shadow: var(--shadow);
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quality-quote {
  border-radius: 16px;
  border: 1px dashed var(--hair-2);
  padding: 16px 18px;
  font-size: .9rem;
  background: rgba(196,18,47,.02);
}

.quality-quote p {
  margin: 0 0 .3rem;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 .8rem;
  display: grid;
  gap: .35rem;
}

.check-list li {
  position: relative;
  padding-left: 1.4rem;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid var(--brand);
}

/* Members */

/* ===== Memberships & associations ===== */

.section-members {
  background: #fff;
}

.members-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr);
  gap: var(--gap);
  align-items: flex-start;
}

.members-title {
  margin: .45rem 0 .8rem;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.01em;
}

.members-main p.muted {
  max-width: 60ch;
}

/* small meta blocks under the text */

.members-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: 1.6rem;
}

.members-meta-item {
  min-width: 210px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: #fff;
}

.members-meta-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
}

.members-meta-value {
  margin-top: .25rem;
  font-size: .95rem;
}

/* right side card */

.members-side {
  display: flex;
  align-items: stretch;
}

.members-card {
  width: 100%;
  border-radius: 20px;
  border: 1px solid var(--ring);
  background: #fff;
  box-shadow: 0 16px 40px rgba(15,23,42,.06);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.members-card-head h3 {
  margin: 0 0 .25rem;
  font-size: 1.05rem;
}

.members-card-head p {
  margin: 0;
  font-size: .9rem;
}

/* chip cloud */

.members-chip-cloud {
  margin-top: .4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.members-chip-cloud .logo-chip {
  font-size: .78rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: #fff;
  color: var(--muted);
}

/* responsive */

@media (max-width: 900px) {
  .members-grid {
    grid-template-columns: 1fr;
  }

  .members-card {
    margin-top: .8rem;
  }
}


/* responsive tweaks */

@media (max-width: 900px) {
  .members-header-row {
    flex-direction: column;
  }

  .members-meta {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .members-marquee-shell {
    padding-inline: 14px;
  }

  .logo-chip {
    font-size: .78rem;
    padding-inline: .8rem;
  }
}


/* Responsive */

@media (max-width: 900px) {
  .quality-wrap,
  .social-grid,
  .contact-shell {
    grid-template-columns: 1fr;
  }
  .quality-stats {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .members-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .quality-stats {
    grid-template-columns: 1fr;
  }
}
.section-terms {
  background: #fff;
}

.terms-shell {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.terms-shell h2 {
  margin: .4rem 0 .6rem;
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
}

.terms-shell p {
  max-width: 70ch;
  margin-inline: auto;
  text-align: center;
}

.terms-card {
  margin-top: 1.6rem;
  display: inline-flex;
  flex-direction: column;
  gap: .8rem;
  text-align: left;
  padding: 18px 22px 20px;
  border-radius: 18px;
  border: 1px solid var(--ring);
  box-shadow: var(--shadow);
  background: #fff;
}

.terms-card .btn {
  align-self: center;
}

.terms-footnote {
  font-size: .85rem;
}

.terms-footnote a {
  color: var(--brand);
  text-decoration: none;
}

.terms-footnote a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .terms-card {
    padding: 16px 16px 18px;
  }
}
/* ===== ISO 9001 quality band ===== */

.section-quality {
  position: relative;
  
  
  padding-block: clamp(64px, 10vh, 56px) 40px;
}

/* subtle top hairline for the band */
.section-quality::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  
  opacity: .7;
}

.quality-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.25fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: stretch;
}

/* Typography */

.quality-main h2.quality-title {
  margin: .45rem 0 .7rem;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -.01em;
}

.quality-title-accent {
  padding: .15rem .5rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.04);
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
}

/* meta stats */

.quality-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 26px;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hair);
}

.qmeta-item {
  min-width: 150px;
}

.qmeta-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
}

.qmeta-value {
  font-weight: 600;
  margin-top: .2rem;
}

/* Right card */

.quality-side {
  display: flex;
  align-items: stretch;
}

.quality-panel {
  background: rgba(255,255,255,.96);
  border-radius: 22px;
  border: 1px solid rgba(233,235,240,.9);
  box-shadow:
    0 18px 45px rgba(15,23,42,.10),
    0 0 0 1px rgba(255,255,255,.8);
  padding: 22px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  backdrop-filter: blur(12px);
}

.quality-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quality-panel h3 {
  margin: 0;
  font-size: 1.1rem;
}

/* little ISO pill in the corner */

.quality-pill {
  display: inline-flex;
  align-items: center;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: #fff1f3;
  color: var(--brand);
  border: 1px solid #ffd6dc;
}

/* checklist with checkmarks, less aggressive red circles */

.check-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 1rem;
  display: grid;
  gap: .45rem;
}

.check-list li {
  position: relative;
  padding-left: 1.6rem;
}

.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: .1em;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  background: #e6f5ec;
  color: #17813a;
  border: 1px solid #c0e8cf;
}

/* footer inside card */

.quality-foot {
  margin-top: .5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  align-items: center;
}

.quality-foot-note {
  font-size: .8rem;
}

/* quote band */

.quality-quote-row {
  padding-block: 22px 0;
}

.quality-quote {
  border-radius: 18px;
  border: 1px dashed var(--hair-2);
  padding: 16px 18px;
  font-size: .9rem;
  background: rgba(255,255,255,.8);
  box-shadow: 0 16px 40px rgba(15,23,42,.08);
}

.quality-quote p {
  margin: 0 0 .35rem;
}

/* responsive */

@media (max-width: 900px) {
  .quality-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .quality-panel {
    padding: 18px 18px 18px;
  }
  .quality-meta {
    flex-direction: column;
  }
}
.section-quality {
  padding-block: clamp(56px, 9vh, 50px);
}

.quality-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: flex-start;
}

/* left side */

.quality-heading {
  margin: .5rem 0 .9rem;
  font-size: clamp(1.9rem, 3.6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  position: relative;
}

.quality-heading::after {
  content: "";
  display: block;
  width: 170px;
  height: 2px;
  margin-top: .7rem;
  border-radius: 999px;
  background: linear-gradient(to right, var(--brand), transparent);
  opacity: .7;
}

.quality-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 30px;
  margin-top: 1.8rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hair);
}

.qmeta-item {
  min-width: 150px;
}

.qmeta-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
}

.qmeta-value {
  font-weight: 600;
  margin-top: .2rem;
}

/* right side card */

.quality-side {
  display: flex;
  align-items: stretch;
}

.quality-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--ring);
  box-shadow: 0 20px 40px rgba(15,23,42,.08);
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}


.quality-card-header h3 {
  margin: .15rem 0 0;
  font-size: 1.1rem;
}

.quality-card-eyebrow {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
  margin: 0;
}

/* checklist, same style you can reuse later */

.check-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 1.1rem;
  display: grid;
  gap: .45rem;
}

.check-list li {
  position: relative;
  padding-left: 1.6rem;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #c4122fb0;
  box-shadow: 0 0 0 4px rgba(238, 206, 206, 0.12);
}

/* footer inside card */

.quality-foot {
  margin-top: .4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  align-items: center;
}

.quality-foot-note {
  font-size: .8rem;
}

/* make the button calmer only here, not global */

.section-quality .quality-btn {
  background: #0b0c0f;
  color: #fff;
  box-shadow: none;
  padding: .8rem 1.4rem;
  font-weight: 600;
}

.section-quality .quality-btn:hover {
  transform: translateY(-1px);
  background: #111827;
}

/* quote row */

.quality-quote-row {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

.quality-quote {
  border-radius: 18px;
  border: 1px dashed var(--hair-2);
  padding: 14px 16px;
  font-size: .9rem;
  background: rgba(255,255,255,.9);
}

.quality-quote p {
  margin: 0 0 .3rem;
}

/* responsive */

@media (max-width: 900px) {
  .quality-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .quality-card {
    padding: 18px 18px 16px;
  }
  .quality-meta {
    flex-direction: column;
  }
}

.quality-quote-row {
  margin-top: 20px;
}

.quality-quote {
  max-width: 640px;
  margin: 0;                 /* no big centered pill */
  padding: 10px 0 0 16px;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  font-size: .9rem;
}

.quality-quote p {
  margin: 0 0 .25rem;
  font-style: italic;
}

.quality-quote span.muted {
  display: flex;
  justify-content: flex-end;
  font-size: .82rem;
}
.feature-list,
.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.feature-list li,
.check-list li {
  position: relative;
  padding-left: 1.6rem;
}

/* ring-style dot like on Heliotherm site */
.feature-list li::before,
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid var(--brand);          /* red ring */
  background: #fff;                         /* white center */
  box-shadow: 0 0 0 4px rgba(196,18,47,.08);/* soft outer glow */
}
/* ===== Konstruēts ziemeļu ziemām section ===== */


.climate-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: stretch;
}

/* left side */

.climate-main h2 {
  margin: 0 0 .7rem;
  font-size: clamp(2rem, 3.6vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.01em;
}

.climate-main p.muted {
  max-width: 44rem;
}

.climate-stats {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.climate-stat {
  min-width: 150px;
}

.climate-stat-value {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: .02em;
}

.climate-stat-label {
  margin-top: 6px;
  font-size: .8rem;
  flex-wrap: wrap;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
}

/* right card */

.climate-card {
  background: #fff;
  border-radius: 24px;
  border: 1px solid var(--ring);
  box-shadow: 0 18px 45px rgba(15,23,42,.08);
  padding: 24px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.climate-eyebrow {
  margin: 0;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
}

.climate-card h3 {
  margin: .15rem 0 .6rem;
  font-size: 1.25rem;
}

/* check list */

.why-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 18px;
  display: grid;
  gap: .5rem;
}

.why-list li {
  position: relative;
  padding-left: 1.8rem;
  line-height: 1.7;
}

.why-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: .15em;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  background: #ffeef3;
  color: var(--brand);
  border: 1px solid #ffd6dc;
  box-shadow: 0 8px 18px rgba(196,18,47,.18);
}

/* button */

.climate-cta {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.section-climate .climate-btn {
  padding: 8px 26px;
  border-radius: 999px;
  font-size: .95rem;
  box-shadow: 0 18px 40px rgba(196,18,47,.35);
}

/* responsive */

@media (max-width: 900px) {
  .climate-grid {
    grid-template-columns: 1fr;
  }

  .climate-card {
    order: 2;
  }
}

@media (max-width: 640px) {
  .climate-stats {
    gap: 20px;
  }
}
/* ===== Siltumsūkņu ceļvedis / facts cards ===== */

.facts {
  padding-top: 100px;
  background: #fff;
}

.facts .hd {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;

}

/* FLEX layout: 3 in first row, last 2 centered in second row */
.fact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: center;           /* centers the last row */
}

/* cards: same width and same height */
.fact {
  flex: 1 1 320px;                   /* base width */
  max-width: 360px;
  background: #fff;
  border: 1px solid var(--ring);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-height: 420px;                 /* make all visually same height */
  transition: transform .2s ease;
}

.fact:hover {
  transform: translateY(-2px);
}

.fact .thumb {
  aspect-ratio: 16 / 10;
  background: #f1f3f7 center / cover no-repeat;
  border-bottom: 1px solid var(--hair);
}

.fact .body {
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.fact .rule {
  height: 2px;
  width: 64px;
  background: var(--brand);
  border-radius: 999px;
  margin-bottom: 14px;
}

.fact h3 {
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 400;
}

.fact h3 .em {
  color: var(--brand-2);
  font-weight: 700;
}

.fact .cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}

.fact .cta a {
  font-weight: 500;
  letter-spacing: .2px;
  color: var(--brand);
}



/* mobile: single column full width */
@media (max-width: 800px) {
  .fact-grid {
    justify-content: stretch;
  }
  .fact {
    flex: 1 1 100%;
    max-width: 100%;
    min-height: 0;                   /* let height be natural on small screens */
  }
}
.facts-head {
  max-width: 880px;
  margin: 0 auto 32px;
  text-align: center;

  position: relative;
}

.facts-eyebrow {
  margin: 0 0 .4rem;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.facts-head h2 {
  margin: 0 0 .7rem;
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.01em;
}

.facts-title-main {


  color: var(--brand-2);
}

.facts-lead {
  max-width: 90ch;
  margin: 0 auto;
  padding-bottom: 20px;
  font-size: .98rem;
}

/* soft line under heading */


/* on smaller screens align left so it feels more editorial */
@media (max-width: 720px) {
  .facts-head {
    text-align: left;
    margin-bottom: 24px;
  }
  .facts-head::after {
    margin-left: 0;
  }
}
.hero-inner {
  padding-block: clamp(56px, 10vh, 88px);
}

/* Product section heading layout on narrow screens */
@media (max-width: 900px) {
  .section .hd {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ---------- Hero (video + text) ---------- */

@media (max-width: 1100px) {
  .hero-inner {
    gap: 28px;
  }

  .hero .visual {
    min-height: 340px;
  }
}

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;         /* stack text and video */
    padding-block: 48px 36px;
  }

  .hero .visual {
    order: -1;                          /* show video first on mobile */
    min-height: 320px;
  }
}

@media (max-width: 720px) {
  .hero-inner {
    padding-block: 40px 30px;
  }

  .hero h1 {
    font-size: 1.9rem;
  }

  .hero p.lead {
    font-size: .98rem;
  }

  .hero .actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .hero .actions .btn {
    width: 100%;
    justify-content: center;
  }

  .hero .pill {
    font-size: .8rem;
  }
}

@media (max-width: 480px) {
  .hero-inner {
    padding-block: 32px 24px;
  }

  .hero .visual {
    min-height: 240px;
  }
}

/* ---------- Intro spec (Heliotherm siltumsūkņi) ---------- */

@media (max-width: 900px) {
  .intro-spec {
    padding-block: 44px 36px;
  }

  .intro-spec-main {
    padding-left: 0;
  }

  .intro-spec-panel {
    margin-top: 8px;
  }
}

@media (max-width: 640px) {
  .intro-spec-actions {
    flex-direction: column;
  }

  .intro-spec-actions .btn {
    flex: 1;
    justify-content: center;
  }

  .intro-spec-title {
    font-size: 1.7rem;
  }
}

/* ---------- Konstruēts ziemeļu ziemām ---------- */

.section-climate {
  padding-block: 72px 56px;
}

@media (max-width: 900px) {
  .section-climate {
    padding-block: 52px 44px;
  }

  .climate-main h2 {
    font-size: 1.9rem;
  }

  .climate-stats {
    flex-wrap: wrap;
    gap: 16px;
  }

  .climate-stat {
    min-width: 46%;
  }
}

@media (max-width: 640px) {
  .climate-stats {
    flex-direction: column;
    gap: 16px;
  }

  .climate-stat {
    min-width: 100%;
  }
}

/* ---------- Siltumsūkņu ceļvedis / facts grid ---------- */

.facts {
  padding-top: 80px;
}

@media (max-width: 900px) {
  .facts {
    padding-top: 64px;
  }
}

@media (max-width: 720px) {
  .facts-head {
    text-align: left;
    margin-bottom: 24px;
  }

  .facts .hd {
    align-items: flex-start;
  }

  .facts-lead {
    padding-bottom: 12px;
  }

  .fact {
    min-height: 0;                 /* let cards shrink naturally on small screens */
  }

  .fact .body {
    padding: 16px 16px 14px;
  }

  .fact h3 {
    font-size: 1.15rem;
  }
}

/* ---------- Product carousel section ---------- */

.section#products {
  padding: 64px 0 46px;
}

@media (max-width: 900px) {
  .section#products {
    padding: 52px 0 40px;
  }
}

@media (max-width: 720px) {
  .section#products .hd {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .pcarousel .product .body {
    padding: 14px 14px 16px;
  }

  .pcarousel .product h3 {
    font-size: 1rem;
  }

  .pcarousel .chips {
    margin-top: 8px;
  }

  .tnav {
    justify-content: center;
  }
}

/* Make carousel dots and arrows easier to tap on touch devices */
@media (max-width: 640px) {
  .tbtn {
    min-width: 40px;
    height: 40px;
  }

  .tdot {
    width: 9px;
    height: 9px;
  }
}

/* ---------- Generic layout helpers across pages ---------- */

@media (max-width: 900px) {
  .quality-wrap,
  .members-grid,
  .contact-shell,
  .quality-grid,
  .members-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .section {
    padding: 56px 0 40px;
  }

  .section .hd h2 {
    font-size: 1.6rem;
  }
}

/* Slightly tighter paddings on very small phones */
@media (max-width: 480px) {
  .container {
    padding-inline: 18px;
  }

  .btn {
    padding-inline: 18px;
  }

  .pill {
    padding-inline: .7rem;
  }
}

/* ---------- Premium positioning polish ---------- */
.premium-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.premium-pill{
  display:inline-flex;align-items:center;padding:.38rem .78rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.66);
  background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.45));
  box-shadow:0 8px 22px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.85);
  font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:#394152
}
.premium-story{position:relative}
.premium-story-wrap{
  border:1px solid var(--ring);border-radius:26px;padding:clamp(20px,3vw,32px);
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(248,250,253,.86));
  box-shadow:0 16px 40px rgba(15,23,42,.08);
}
.premium-story-eyebrow{margin:0 0 .35rem;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:#7b8493}
.premium-story-lead{max-width:80ch}
.premium-story-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.premium-story-card{
  border:1px solid var(--hair);border-radius:16px;padding:14px 14px 12px;background:rgba(255,255,255,.8);
}
.premium-story-card h3{font-size:.96rem;margin:0 0 .3rem}

.fact, .product-card{
  background:linear-gradient(160deg,#fff 0%,#fafbfd 100%);
  border:1px solid var(--ring);
  box-shadow:0 12px 34px rgba(15,23,42,.06);
}
.fact:hover, .product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 42px rgba(15,23,42,.12);
}
.fact .body h3::after{
  content:"Premium klase";display:inline-flex;margin-left:.5rem;padding:.12rem .52rem;border-radius:999px;
  font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;color:#7a8392;background:#f5f7fb;border:1px solid #e6eaf2;
}

.premium-parallax-layer{will-change:transform}
@media (prefers-reduced-motion: reduce){.premium-parallax-layer{transform:none !important}}
@media (max-width: 980px){
  .premium-story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 620px){
  .premium-story-grid{grid-template-columns:1fr}
}
/* ===== Site-wide premium engineering mesh background ===== */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}

body{
  position:relative;
  isolation:isolate;
  background:#fff;
}

.premium-site-flow{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  opacity:.72;
  mix-blend-mode:multiply;
  --site-x:68%;
  --site-y:34%;
  --site-scroll:0px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

.premium-site-flow::before{
  content:"";
  position:absolute;
  inset:-16%;
  opacity:.72;
  background:
    linear-gradient(90deg, rgba(227,6,44,.038) 1px, transparent 1px),
    linear-gradient(0deg, rgba(227,6,44,.032) 1px, transparent 1px),
    radial-gradient(circle at var(--site-x) var(--site-y), rgba(227,6,44,.095), transparent 24rem),
    radial-gradient(circle at 14% 20%, rgba(227,6,44,.070), transparent 24rem),
    radial-gradient(circle at 82% 18%, rgba(227,6,44,.075), transparent 26rem),
    radial-gradient(circle at 22% 58%, rgba(227,6,44,.050), transparent 25rem),
    radial-gradient(circle at 78% 64%, rgba(227,6,44,.060), transparent 28rem),
    radial-gradient(circle at 48% 88%, rgba(227,6,44,.040), transparent 24rem);
  background-size:72px 72px, 72px 72px, auto, auto, auto, auto, auto, auto;
  transform:translate3d(0, var(--site-scroll), 0) rotate(-5deg) scale(1.08);
}

.premium-site-flow::after{
  content:"";
  position:absolute;
  inset:-12%;
  opacity:.32;
  background:
    linear-gradient(90deg, rgba(15,23,42,.026) 1px, transparent 1px),
    linear-gradient(0deg, rgba(15,23,42,.020) 1px, transparent 1px);
  background-size:144px 144px, 144px 144px;
  transform:rotate(-5deg) scale(1.05);
}

.premium-site-svg{
  position:absolute;
  left:-5%;
  top:-5%;
  width:110%;
  height:110%;
  opacity:.36;
}

.premium-site-line{
  fill:none;
  stroke:rgba(227,6,44,.085);
  stroke-width:1;
  stroke-linecap:round;
  stroke-dasharray:7 16;
  animation:siteLineMove 24s linear infinite;
}

.premium-site-line.is-soft{
  stroke:rgba(15,23,42,.035);
  stroke-dasharray:4 18;
  animation-duration:34s;
}

.premium-site-dot{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--brand, #e3062c);
  box-shadow:0 0 0 7px rgba(227,6,44,.075), 0 12px 24px rgba(227,6,44,.13);
  opacity:.26;
  offset-rotate:0deg;
  z-index:0;
}

.premium-site-dot.site-a{
  offset-path:path("M 40 160 C 260 50, 450 190, 680 110 S 980 70, 1180 220 S 1430 350, 1600 230");
  animation:siteDotTravel 15s cubic-bezier(.45,0,.2,1) infinite;
}

.premium-site-dot.site-b{
  offset-path:path("M 70 620 C 270 480, 480 580, 680 430 S 980 260, 1240 380 S 1460 500, 1620 390");
  animation:siteDotTravel 19s cubic-bezier(.45,0,.2,1) infinite;
  animation-delay:3.2s;
  opacity:.22;
}

.premium-site-dot.site-c{
  offset-path:path("M 0 840 C 220 690, 420 780, 650 640 S 1050 520, 1320 690 S 1510 820, 1660 720");
  animation:siteDotTravel 22s cubic-bezier(.45,0,.2,1) infinite;
  animation-delay:6.4s;
  opacity:.18;
}

.premium-site-orb{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:999px;
  border:1px solid rgba(227,6,44,.18);
  background:rgba(255,255,255,.72);
  box-shadow:0 14px 34px rgba(227,6,44,.10);
  animation:siteOrbFloat 7s ease-in-out infinite;
  opacity:.26;
  z-index:0;
}

.premium-site-orb.orb-a{ left:12%; top:28%; }
.premium-site-orb.orb-b{ right:14%; top:34%; animation-delay:1.5s; }
.premium-site-orb.orb-c{ left:72%; bottom:18%; animation-delay:3s; }

app-header,
app-footer,
main,
.page-shell,
.hero,
.section,
.intro,
.intro-spec,
.section-climate,
.facts,
#products,
.contact-section,
.contact-page,
.offer-page,
.about-page,
.product-page,
.page-inner,
.container{
  position:relative;
  z-index:2;
}

.hero .container,
.hero-inner,
.copy,
.visual,
.hd,
.premium-story-wrap,
.intro-spec-grid,
.intro-spec-panel,
.intro-spec-main,
.climate-grid,
.climate-main,
.climate-card,
.fact-grid,
.tcarousel{
  position:relative;
  z-index:5;
}

.premium-story-wrap,
.premium-story-card,
.intro-spec-panel,
.climate-card,
.fact,
.product,
.card,
.panel,
.contact-card,
.legal-card,
.offer-card,
.product-card{
  position:relative;
  z-index:6;
  isolation:isolate;
}

.premium-dynamic-mesh,
.premium-engineering-flow{
  z-index:0 !important;
  opacity:.58;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.premium-dynamic-mesh::before{
  opacity:.38;
}

.premium-moving-dot,
.premium-flow-node{
  opacity:.26;
  z-index:0;
}

@keyframes siteLineMove{
  to{ stroke-dashoffset:-360; }
}

@keyframes siteDotTravel{
  0%{ offset-distance:0%; opacity:0; }
  10%, 82%{ opacity:.26; }
  100%{ offset-distance:100%; opacity:0; }
}

@keyframes siteOrbFloat{
  0%, 100%{ transform:translate3d(0,0,0) scale(1); opacity:.18; }
  50%{ transform:translate3d(0,-16px,0) scale(1.12); opacity:.32; }
}

@media (max-width:900px){
  .premium-site-flow{ opacity:.55; }
  .premium-site-flow::before{
    background-size:64px 64px, 64px 64px, auto, auto, auto, auto, auto, auto;
  }
  .premium-site-svg{
    opacity:.28;
    width:150%;
    left:-25%;
  }
  .premium-site-dot.site-b,
  .premium-site-dot.site-c,
  .premium-site-orb.orb-b,
  .premium-site-orb.orb-c{
    display:none;
  }
}

@media (max-width:720px){
  .premium-site-flow{ opacity:.36; }
  .premium-site-dot,
  .premium-site-orb,
  .premium-moving-dot{
    display:none !important;
  }
  .premium-site-svg{ opacity:.22; }
}

@media (prefers-reduced-motion: reduce){
  .premium-site-flow::before{
    transform:rotate(-5deg) scale(1.08);
  }
  .premium-site-line,
  .premium-site-dot,
  .premium-site-orb,
  .premium-moving-dot,
  .premium-flow-node{
    animation:none !important;
  }
  .premium-site-dot,
  .premium-moving-dot{
    display:none !important;
  }
}