/* 
==============================================================
|   Tred-Mark Communications | Developed by Javorsky Studio  |
|    Viewing File: ~/public-site/assets/css/pages/home.css   |
| ---   Styling/CSS for `~/public-site/home/index.html   --- |
==============================================================
*/

/* Homepage — Landing Image & Headline */
/* Full-screen landing image with fixed top navigation overlay. */
.page-home .site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: none;
  opacity: 1;
}

.page-home .home-landing{
  position: relative;
  z-index: 1;
  height: 100vh;
  min-height: 420px;
  background: #070a12;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.page-home .home-landing::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(7,10,18,.08) 0%,
      rgba(7,10,18,.18) 58%,
      rgba(7,10,18,.72) 84%,
      #070a12 100%
    );
}

.page-home .home-landing-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.home-landing-title{
  position: absolute;
  top: 26%;
  right: clamp(28px, 11vw, 210px);
  z-index: 3;

  width: auto;
  max-width: 72vw;

  pointer-events: none;

  overflow: visible !important;
}

.home-landing-text{
  display: block;

  white-space: nowrap;
  overflow: visible !important;

  text-align: left;

  font-size: clamp(42px, 4.8vw, 82px);
  line-height: .92;
  font-weight: 1000;
  letter-spacing: -.025em;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,.98) 0%,
    rgba(235,245,255,.95) 45%,
    rgba(180,220,255,.92) 100%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  text-shadow:
    0 8px 34px rgba(0,0,0,.55),
    0 0 28px rgba(74,163,255,.12);
}

.home-landing-subtitle{
  margin-top: 0px;

  text-align: right;

  font-size: clamp(16px, 1.45vw, 28px);
  font-weight: 700;
  letter-spacing: .08em;

  color: rgba(190,226,255,.86);
  font-style: italic;

  text-shadow:
    0 5px 22px rgba(0,0,0,.60);
}

.home-scroll-cue{
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 4;

  width: 50px;
  height: 50px;
  border-radius: 999px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;

  transform: translateX(-50%);

  background: rgba(7,10,18,.42);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);

  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.home-scroll-cue:hover{
  transform: translateX(-50%) translateY(2px);
  background: rgba(7,10,18,.62);
  border-color: rgba(125,227,255,.42);
}

.home-scroll-cue span{
  width: 10px;
  height: 10px;

  border-right: 2px solid rgba(220,242,255,.9);
  border-bottom: 2px solid rgba(220,242,255,.9);

  transform: rotate(45deg);
}

/* =========================================================
   04. Homepage Body
   ========================================================= */

.page-home main{
  position: relative;
  margin-top: -80px;
}

.page-home main::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    linear-gradient(
      180deg,
      rgba(7,10,18,.20),
      rgba(7,10,18,.40)
    ),
    url('/assets/media/home/home-body-bg.webp');

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: scroll;

  pointer-events: none;
}

.page-home main > *{
  position: relative;
  z-index: 1;
}

.page-home .hero{
  position: relative;
  z-index: 2;
  padding-top: 120px;
}

/* =========================================================
   05. Homepage — Cards, Boxes, Panels
   ========================================================= */

.hero{
  padding-top: var(--space-7);
}

/* Keep hero-inner as a generic wrapper; V2 controls columns */
.hero-inner{
  display:grid;
  gap: var(--space-6);
  align-items:start;
}

.hero-v2{
  grid-template-columns: 3fr 2fr;
  align-items: stretch;
}

/* Full-width services block under the two columns */
.hero-v2 .services-wide{
  grid-column: 1 / -1;
  margin-top: 18px;
}

.hero-left{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Group title + description */
.hero-left .hero-copy{
  flex: 1 1 auto;
}

/* Lock buttons to bottom */
.hero-left .hero-actions{
  margin-top: auto;
}

.hero-right{
  padding: 22px;
  background: rgba(15,26,46,.46);
}

/* Headline / copy */
.hero-title{
  margin: 10px 0 12px 0;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.hero-desc{
  margin: 1.5rem 0 var(--space-4) var(--space-4);
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
  max-width: 60ch;
  text-align: center;
}

.hero-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

/* Split hero headline into designed lines */
.hero-lines{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-line{
  display: block;
}

/* Alignment pattern */
.line-1{
  text-align: left;
}

.line-2{
  text-align: left;
  margin-left: 2.5rem;
}

.line-3{
  text-align: left;
  margin-left: 5rem;
}

/* "Certified" special coloring */
.cert1,
.cert2,
.cert3{
  font-weight: 1000;

  background: linear-gradient(
    165deg,
    #d7ffe2 0%, 
    #7cffab 35%, 
    #2de27d 70%, 
    #0d9f4e 100%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;

  text-shadow:
    0 0 18px rgba(255,255,255,.08);
}

/* "Certified" trailword coloring */
.trail1{
  background: linear-gradient(
    135deg,
    #7de3ff 0%,
    #4cb8ff 35%,
    #4f7cff 70%,
    #8b5cff 100%
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  text-transform:uppercase;
  font-size:.9em;
  margin-left:.5rem;
}

.trail2{
  background: linear-gradient(
    225deg,
    #7de3ff 0%,
    #4cb8ff 35%,
    #4f7cff 70%,
    #8b5cff 100%
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  text-transform:uppercase;
  font-size:.9em;
  margin-left:.5rem;
}

.trail3{
  background: linear-gradient(
    135deg,
    #7de3ff 0%,
    #4cb8ff 35%,
    #4f7cff 70%,
    #8b5cff 100%
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  text-transform:uppercase;
  font-size:.9em;
  margin-left:.5rem;
}

/* Slider */

.cert-logo-slider{
  margin-top: 28px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.cert-logo-track{
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;

  animation: certScroll 30s linear infinite;
}

.cert-logo-slider:hover .cert-logo-track{
  animation-play-state: running;
}

.cert-logo-track img{
  height: 58px;
  width: auto;
  object-fit: contain;

  opacity: .75;
  transition: opacity .2s ease;
}

.cert-logo-track img:hover{
  opacity: 1;
}

@keyframes certScroll{
  from{
    transform: translateX(0);
  }

  to{
    transform: translateX(-20%);
  }
}

/* Right Card */
.lowvolt-card{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 34px;
  min-height: 100%;
}

.lowvolt-title{
  margin: 0;
  line-height: .90;
  letter-spacing: -.05em;
  font-weight: 1000;
  color: #fff;
}

.lowvolt-title{
  font-size: clamp(28px, 2.2vw, 40px);
}

.lowvolt-title span{
  display: block;

  font-size: clamp(58px, 5vw, 72px);
  line-height: .85;

  text-transform: uppercase;

  background: linear-gradient(
    192deg,
    #42e8ff 0%,
    #2f8dff 30%,
    #8a54ff 60%,
    #ff4fd8 100%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.lowvolt-stats{
  display: grid;
  gap: 22px;
}

.lowvolt-stat{
  position: relative;

  display: flex;
  flex-direction: column;

  padding: 12px 0 12px 70px;
  min-height: 110px;
}

.stat-icon{
  position: absolute;

  top: 50%;
  left: 0;

  width: 90px;
  height: 90px;

  object-fit: contain;

  transform: translateY(-50%);

  filter:
    brightness(0)
    saturate(100%)
    invert(85%)
    sepia(6%)
    saturate(851%)
    hue-rotate(180deg);

  opacity: .25;

  pointer-events: none;
  user-select: none;

  z-index: 0;
}

.stat-number,
.stat-label{
  position: relative;
  z-index: 1;
}

.stat-number{
  font-size: clamp(38px,3vw,56px);
  font-weight: 1000;
  line-height: .9;
}

.stat-label{
  color: #d8e7ff;
  font-weight: 700;
}

/* Checkmark */
.hero-cert-mark{
  position: absolute;
  top: -50px;
  right: -10px;

  font-size: 250px;
  line-height: 1;

  font-weight: 900;

  background: linear-gradient(
    180deg,
    rgba(72,255,167,.50),
    rgba(72,255,167,.04)
  );
  overflow: visible;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  pointer-events: none;
  user-select: none;

  z-index: 0;
}

/* Shared dark treatment for homepage hero cards. */
.page-home .hero .card,
.page-home .hero .services-wide,
.page-home .hero .flip-back{
  background-image:
    linear-gradient(
      180deg,
      rgba(7,10,18,.70),
      rgba(7,10,18,.70)
    );

  background-size: 100vw auto;
  background-position: center;
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: padding-box;
}

.page-home .hero .flip-front{
  border-style: none;
  background-size: 100vw auto;
  background-position: center;
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: padding-box;
}
/* Card 1 */
.page-home .hero .flip-card:nth-child(1) .flip-front{
  background: linear-gradient(135deg, #000000 10%, #152331 90%);
}

/* Card 2 */
.page-home .hero .flip-card:nth-child(2) .flip-front{
  background: linear-gradient(45deg, #000000 10%, #152331 90%);
}

/* Card 3 */
.page-home .hero .flip-card:nth-child(3) .flip-front{
  background: linear-gradient(160deg, #000000 10%, #0d3649 90%);
}

/* Card 4 */
.page-home .hero .flip-card:nth-child(4) .flip-front{
  background: linear-gradient(25deg, #000000 10%, #152331 90%);
}

/* Card 5 */
.page-home .hero .flip-card:nth-child(5) .flip-front{
  background: linear-gradient(120deg, #000000 10%, #0a2c3d 90%);
}

/* Card 6 */
.page-home .hero .flip-card:nth-child(6) .flip-front{
  background: linear-gradient(60deg, #000000 10%, #152331 90%);
}

/* Card 7 */
.page-home .hero .flip-card:nth-child(7) .flip-front{
  background: linear-gradient(145deg, #000000 10%, #0d3649 90%);
}

/* Card 8 */
.page-home .hero .flip-card:nth-child(8) .flip-front{
  background: linear-gradient(35deg, #000000 10%, #152331 90%);
}

/* Card 9 */
.page-home .hero .flip-card:nth-child(9) .flip-front{
  background: linear-gradient(100deg, #000000 10%, #0a2c3d 90%);
}

.page-home .hero .flip-back{
  border-style: none;
  background-size: 100vw auto;
  background-position: center;
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: padding-box;
}

/* Card 1 */
.page-home .hero .flip-card:nth-child(1) .flip-back{
  background: linear-gradient(135deg, #152331 10%, #000000 90%);
}

/* Card 2 */
.page-home .hero .flip-card:nth-child(2) .flip-back{
  background: linear-gradient(45deg, #152331 10%, #000000 90%);
}

/* Card 3 */
.page-home .hero .flip-card:nth-child(3) .flip-back{
  background: linear-gradient(160deg, #0d3649 10%, #000000 90%);
}

/* Card 4 */
.page-home .hero .flip-card:nth-child(4) .flip-back{
  background: linear-gradient(25deg, #152331 10%, #000000 90%);
}

/* Card 5 */
.page-home .hero .flip-card:nth-child(5) .flip-back{
  background: linear-gradient(120deg, #0a2c3d 10%, #000000 90%);
}

/* Card 6 */
.page-home .hero .flip-card:nth-child(6) .flip-back{
  background: linear-gradient(60deg, #152331 10%, #000000 90%);
}

/* Card 7 */
.page-home .hero .flip-card:nth-child(7) .flip-back{
  background: linear-gradient(145deg, #0d3649 10%, #000000 90%);
}

/* Card 8 */
.page-home .hero .flip-card:nth-child(8) .flip-back{
  background: linear-gradient(35deg, #152331 10%, #000000 90%);
}

/* Card 9 */
.page-home .hero .flip-card:nth-child(9) .flip-back{
  background: linear-gradient(100deg, #0a2c3d 10%, #000000 90%);
}

/* =========================================================
   06. Homepage — Services / Flip Cards
   ========================================================= */

.services-wide-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px;
}

.services-title{
  margin:4px 0 0;
  font-size:clamp(32px,3vw,48px);
  line-height:.95;
  letter-spacing:-.04em;
  font-weight:1000;

  background:linear-gradient(
    -90deg,
    #ffffff 0%,
    #dcecff 40%,
    #7de3ff 100%
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
}

/* =========================
   Commercial services (flip cards)
   ========================= */
.flip-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}

.flip-card{
  perspective:1000px;
  min-height:110px;
}

.flip-inner{
  position:relative;
  height:110px;
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
  border-radius:16px;
}

.flip-card:hover .flip-inner{
  transform:rotateY(180deg);
}

.flip-front,
.flip-back{
  position:absolute;
  inset:0;

  border-radius:16px;

  border:1px solid rgba(125,227,255,.12);

  background:
    linear-gradient(
      180deg,
      rgba(7,10,18,.65),
      rgba(7,10,18,.65)
    );

  backface-visibility:hidden;

  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
}

.flip-front{
  transform:rotateY(0deg);
}

.flip-back{
  transform:rotateY(180deg);
  justify-content:center;
  text-align:left;
}

.flip-icon{
  width:36px;
  height:36px;
  border-radius:12px;

  display:grid;
  place-items:center;

  background:
    radial-gradient(
      circle at top left,
      rgba(125,227,255,.18),
      transparent 5%
    ),
    rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.10);

  flex:0 0 auto;
}

.flip-icon img{
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

.flip-title{
  font-weight:800;
  line-height:1.05;
}

.flip-back-text{
  font-size:.95rem;
  line-height:1.3;
  opacity:.95;
}

/* Touch devices: disable hover flip */
@media (hover: none) {
  .flip-card:hover .flip-inner{ transform:none; }
  .flip-back{ display:none; }
}

/* =========================================================
   07. Homepage — Strip
   ========================================================= */
.strip{
  padding: var(--space-5);
  border-radius: var(--radius);

  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);

  text-align:center;
}

.strip-title{
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.04em;

  background: linear-gradient(
    -90deg,
  rgba(131, 58, 180, 1) 0%, 
  rgba(253, 29, 29, 1) 50%, 
  rgba(252, 176, 69, 1) 100%);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.strip-subtitle{
  margin-top: .5rem;

  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.01em;

  background: linear-gradient(45deg,
  rgb(184, 92, 187) 25%, 
  rgb(106, 218, 139) 75%);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 900px){
  .strip-mainline{
    flex-direction: column;
    gap: .35rem;
    white-space: normal;
  }

  .strip-subgrid{
    grid-template-columns: 1fr;
    gap: .35rem;
  }
}

/* =========================================================
   08. Homepage Responsive
   ========================================================= */

/* Desktop default should use the full desktop image from your HTML:
   /assets/media/home/head-img.webp */

/* Tablets + smaller laptops/desktops */
@media (max-width: 1366px){
  .page-home .home-landing-img{
    content:url("/assets/media/home/head-img-tablet.webp");
  }
}

/* Phones */
@media (max-width: 600px){
  .page-home .home-landing-img{
    content:url("/assets/media/home/head-img-mobile.webp");
  }

  .page-home .home-landing{
    min-height: 520px;
  }

  .home-landing-title{
    top: 28%;
    left: var(--space-4);
    right: var(--space-4);
    max-width: none;
  }

  .home-landing-text{
    white-space: normal;
    font-size: clamp(34px, 12vw, 48px);
  }

  .home-landing-subtitle{
    text-align: left;
    font-size: clamp(14px, 4vw, 18px);
  }

  .flip-grid{
    grid-template-columns: 1fr;
  }

  .flip-inner,
  .flip-card{
    min-height: 100px;
    height: 100px;
  }
}

@media (max-width: 1080px){
  .strip{
    grid-template-columns: 1fr;
    gap: var(--space-4);
    text-align: center;
  }

  .strip-title,
  .strip-titleL,
  .strip-titleR{
    text-align: center;
    font-size: clamp(1.25rem, 5vw, 1.7rem);
    margin-bottom: .25rem;
  }

  .strip-sub{
    font-size: .85rem;
  }
}

@media (max-width: 980px){
  .hero-v2{
    grid-template-columns: 1fr;
  }

  .hero-title{
    font-size: 38px;
  }
}

@media (max-width: 900px){
  .strip-mainline{
    flex-direction: column;
    gap: .35rem;
    white-space: normal;
  }

  .strip-subgrid{
    grid-template-columns: 1fr;
    gap: .35rem;
  }
}