/* =========================================================
   TMS Confort V8.2 — DARK PREMIUM HIGH-TECH
   Visual pass faithful to the approved concept.
   ========================================================= */

:root{
  --v8-bg:#02080e;
  --v8-panel:#06141f;
  --v8-panel-2:#091d2a;
  --v8-line:rgba(93,219,255,.16);
  --v8-cyan:#39f1df;
  --v8-blue:#2f9cff;
  --v8-text:#f7fbff;
  --v8-soft:#b7cbd7;
}

html{background:var(--v8-bg)}
body{
  background:
    radial-gradient(circle at 82% 5%,rgba(47,156,255,.11),transparent 30rem),
    radial-gradient(circle at 12% 30%,rgba(57,241,223,.055),transparent 27rem),
    var(--v8-bg)!important;
}

/* Header */
.site-header{
  background:rgba(2,8,14,.93)!important;
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(93,219,255,.12)!important;
  box-shadow:0 12px 35px rgba(0,0,0,.20);
}

/* HERO — split composition like the approved mockup */
.hero-v4{
  min-height:700px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 72% 35%,rgba(47,156,255,.09),transparent 28rem),
    linear-gradient(180deg,#02080e,#030b12)!important;
  border-bottom:1px solid rgba(57,241,223,.11);
}
.hero-v4::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:160px;
  background:linear-gradient(transparent,var(--v8-bg));
  pointer-events:none;
}
.hero-v4-grid{
  position:relative;
  z-index:2;
  display:grid!important;
  grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr)!important;
  gap:54px!important;
  align-items:center!important;
}
.hero-v4-copy{max-width:650px!important}
.hero-signal{
  display:inline-flex!important;
  max-width:100%;
  white-space:normal!important;
}
.hero-v4 h1{
  margin:24px 0 24px!important;
  color:#fff!important;
  font-size:clamp(4rem,6.3vw,6.6rem)!important;
  line-height:.89!important;
  letter-spacing:-.067em!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
  text-wrap:balance;
}
.hero-v4 h1 em{
  color:transparent!important;
  background:linear-gradient(100deg,#41eadf 10%,#4ab6ff 92%);
  -webkit-background-clip:text;
  background-clip:text;
  font-style:normal!important;
}
.hero-lead{
  max-width:610px!important;
  color:#bcd0dc!important;
  font-size:1.08rem!important;
  line-height:1.65!important;
}
.hero-lead strong{color:#fff!important}
.hero-stage{
  position:relative!important;
  min-width:0;
}
.hero-stage-img{
  min-height:500px!important;
  border-radius:26px!important;
  overflow:hidden;
  border:1px solid rgba(93,219,255,.18)!important;
  box-shadow:
    0 35px 90px rgba(0,0,0,.52),
    0 0 65px rgba(47,156,255,.075)!important;
}
.hero-stage-img img{
  width:100%!important;
  height:100%!important;
  min-height:500px!important;
  object-fit:cover!important;
  object-position:center!important;
  filter:saturate(1.04) contrast(1.05);
}
.hero-stage-img::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(2,8,14,.18),transparent 45%),
    linear-gradient(0deg,rgba(2,8,14,.34),transparent 45%);
  pointer-events:none;
}
.ambient-tag{
  background:rgba(2,8,14,.78)!important;
  border:1px solid rgba(57,241,223,.22)!important;
  color:#dffdfa!important;
}
.hero-ticket{
  background:rgba(4,18,28,.91)!important;
  border-color:rgba(57,241,223,.18)!important;
  backdrop-filter:blur(14px);
  box-shadow:0 18px 50px rgba(0,0,0,.38)!important;
}
.hero-side-note{
  background:rgba(5,21,32,.93)!important;
  border-color:rgba(93,219,255,.16)!important;
  backdrop-filter:blur(14px);
}

/* Visual media cards — this is what was missing from the site */
.v8-media-section{
  padding:72px 0 108px;
  background:var(--v8-bg);
}
.v8-media-head{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:50px;
  align-items:end;
  margin-bottom:34px;
}
.v8-media-head h2{
  color:#fff!important;
  font:700 clamp(2.45rem,4.7vw,4.5rem)/.95 "Space Grotesk",system-ui,sans-serif!important;
  letter-spacing:-.052em;
  margin:14px 0 0!important;
  max-width:13ch;
}
.v8-media-head p{
  color:#b5c9d5!important;
  max-width:570px;
  line-height:1.7;
  margin:0;
}
.v8-media-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.v8-media-card{
  display:flex!important;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  border-radius:22px;
  background:linear-gradient(160deg,#081b28,#04111a);
  border:1px solid var(--v8-line);
  color:inherit!important;
  text-decoration:none!important;
  box-shadow:0 20px 58px rgba(0,0,0,.27);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.v8-media-card:hover{
  transform:translateY(-6px);
  border-color:rgba(57,241,223,.34);
  box-shadow:0 28px 72px rgba(0,0,0,.40),0 0 35px rgba(57,241,223,.035);
}
.v8-media-card img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  filter:saturate(.96) contrast(1.04);
}
.v8-media-card>div{padding:22px 22px 24px}
.v8-media-card span{
  color:#4fe7dc!important;
  font:700 .71rem/1 "Space Grotesk",system-ui,sans-serif;
  letter-spacing:.095em;
}
.v8-media-card strong{
  display:block;
  color:#fff!important;
  font:700 1.2rem/1.18 "Space Grotesk",system-ui,sans-serif;
  margin:10px 0 11px;
}
.v8-media-card small{
  color:#9fb7c5!important;
  font-size:.83rem;
  line-height:1.5;
}

/* Cards / sections */
.service-bento .svc{
  background:linear-gradient(150deg,rgba(9,28,41,.98),rgba(4,16,25,.98))!important;
  border-color:rgba(93,219,255,.15)!important;
  box-shadow:0 20px 58px rgba(0,0,0,.25);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.service-bento .svc:hover{
  transform:translateY(-5px);
  border-color:rgba(57,241,223,.31)!important;
  box-shadow:0 28px 70px rgba(0,0,0,.37),0 0 35px rgba(57,241,223,.035);
}
.workflow-v4,.human-v4,.pro-v4,.final-v4{position:relative}
.workflow-v4::before,.pro-v4::before{
  content:"";
  position:absolute;
  width:420px;height:420px;border-radius:50%;
  background:rgba(47,156,255,.055);
  filter:blur(100px);
  pointer-events:none;
}
.workflow-v4::before{right:-180px;top:5%}
.pro-v4::before{left:-180px;top:10%}
footer{
  background:#01070c!important;
  border-top:1px solid rgba(93,219,255,.10)!important;
}

/* Inner page headers: subtle visual richness without faking realizations */
.phead{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(2,8,14,.98),rgba(2,8,14,.78)),
    url('hero-tv-v82.jpg') center 48%/cover no-repeat!important;
}
.phead::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at 78% 40%,rgba(47,156,255,.11),transparent 24rem);
  pointer-events:none;
}
.phead>.wrap{position:relative;z-index:2}

/* Tablet */
@media(max-width:1050px){
  .hero-v4-grid{
    grid-template-columns:minmax(0,1fr) minmax(360px,.9fr)!important;
    gap:34px!important;
  }
  .hero-v4 h1{font-size:clamp(3.4rem,7vw,5.1rem)!important}
  .hero-stage-img,.hero-stage-img img{min-height:430px!important}
  .v8-media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Mobile / narrow browser windows */
@media(max-width:760px){
  .hero-v4{
    min-height:auto!important;
    padding:54px 0 72px!important;
  }
  .hero-v4-grid{
    grid-template-columns:1fr!important;
    gap:34px!important;
  }
  .hero-v4-copy{max-width:none!important}
  .hero-v4 h1{
    font-size:clamp(3rem,13vw,4.45rem)!important;
    line-height:.91!important;
    letter-spacing:-.06em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
    text-wrap:balance;
  }
  .hero-stage{display:block!important}
  .hero-stage-img,.hero-stage-img img{min-height:320px!important}
  .hero-ticket,.hero-side-note{
    position:relative!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:auto!important;
    margin-top:12px!important;
  }
  .v8-media-section{padding:55px 0 78px}
  .v8-media-head{grid-template-columns:1fr;gap:18px;margin-bottom:26px}
  .v8-media-head h2{max-width:none}
  .v8-media-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .hero-v4 h1{
    font-size:clamp(2.85rem,15vw,3.75rem)!important;
    letter-spacing:-.055em!important;
  }
  .hero-stage-img,.hero-stage-img img{min-height:260px!important}
  .v8-media-grid{grid-template-columns:1fr}
  .v8-media-card img{aspect-ratio:16/8.7}
}