:root{
  --bg:#141820;
  --panel:#202633;
  --panel-2:#272f3d;
  --text:#f5f7fa;
  --muted:#c5ccd6;
  --red:#ec1c2e;
  --red-dark:#bf1020;
  --line:rgba(255,255,255,.10);
  --shadow:0 22px 70px rgba(0,0,0,.35);
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 85% 5%,rgba(236,28,46,.22),transparent 28rem),
    radial-gradient(circle at 10% 20%,rgba(34,199,211,.10),transparent 24rem),
    linear-gradient(180deg,#171c25 0%,#11161d 100%);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
.site-header{
  max-width:1240px;
  margin:auto;
  height:86px;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.brand{
  display:flex;
  align-items:center;
  padding:7px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 24px rgba(0,0,0,.22);
}
.brand img{
  width:170px;
  max-height:54px;
  object-fit:contain;
  display:block;
  filter:none;
}
.nav{display:flex;gap:30px;margin-left:auto}
.nav a{font-weight:700;color:#dbe1e9}
.nav a:hover{color:#fff}
.lang-button{
  width:44px;height:40px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:#fff;font-weight:800;cursor:pointer
}
.hero{
  position:relative;
  max-width:1240px;
  min-height:650px;
  margin:18px auto 0;
  padding:68px 42px 78px;
  display:grid;
  grid-template-columns:1.18fr .82fr;
  gap:52px;
  align-items:center;
  overflow:hidden;
  border-radius:30px;
  border:1px solid var(--line);
  background:
    linear-gradient(90deg,rgba(5,18,21,.80) 0%,rgba(5,18,21,.60) 44%,rgba(5,18,21,.18) 100%),
    url("hero-wallpaper.jpg") center/cover no-repeat;
  box-shadow:var(--shadow);
}
.hero-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%,rgba(27,196,199,.10),transparent 23rem),
    linear-gradient(180deg,rgba(255,255,255,.015),rgba(5,8,11,.20));
}
.hero-content,.quick-panel{position:relative;z-index:1}
.eyebrow{font-size:.82rem;letter-spacing:.18em;font-weight:900;color:#ff6674;margin:0 0 16px}
h1{
  font-size:clamp(2.35rem,4.7vw,4.55rem);
  line-height:1.03;
  letter-spacing:-.045em;
  margin:0;
  max-width:760px;
  text-shadow:0 8px 28px rgba(0,0,0,.38)
}
h2{font-size:clamp(1.8rem,3.4vw,3.05rem);line-height:1.1;letter-spacing:-.03em;margin:0 0 20px}
.hero-text{font-size:1.18rem;color:var(--muted);max-width:720px;margin:28px 0 34px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.button{
  min-height:54px;padding:0 24px;border-radius:15px;display:inline-flex;align-items:center;
  justify-content:center;font-weight:900;border:1px solid var(--line)
}
.button.primary{background:linear-gradient(135deg,var(--red),var(--red-dark));box-shadow:0 12px 30px rgba(236,28,46,.25)}
.button.secondary{background:rgba(255,255,255,.06)}
.trust-row{display:flex;flex-wrap:wrap;gap:22px;margin-top:34px;color:#c9d1dc;font-size:.92rem}
.trust-row span{display:flex;gap:7px}
.quick-panel{
  background:linear-gradient(165deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  border:1px solid var(--line);border-radius:30px;padding:28px;box-shadow:var(--shadow);
  backdrop-filter:blur(14px)
}
.quick-panel h2{font-size:1.75rem;margin:0}
.quick-panel>p{color:var(--muted);margin:4px 0 20px}
.quick-card{
  display:flex;align-items:center;gap:15px;padding:15px;border-radius:17px;
  background:rgba(255,255,255,.055);border:1px solid var(--line);margin-top:11px;
  transition:.2s ease
}
.quick-card:hover{transform:translateY(-2px);background:rgba(255,255,255,.09)}
.quick-card.red{background:linear-gradient(135deg,var(--red),var(--red-dark))}
.quick-card .icon{font-size:1.35rem;width:38px;height:38px;display:grid;place-items:center;background:rgba(255,255,255,.1);border-radius:11px}
.quick-card span:last-child{display:flex;flex-direction:column}
.quick-card strong{line-height:1.2}
.quick-card small{color:#c8d0da;margin-top:2px}
.quick-card.red small{color:#fff}
.section{max-width:1240px;margin:auto;padding:88px 24px}
.section-heading{max-width:760px;margin-bottom:42px}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service-card{
  position:relative;background:linear-gradient(145deg,#252d3a,#1d2430);border:1px solid rgba(255,255,255,.14);padding:30px;border-radius:22px;
  min-height:265px;transition:.22s ease
}
.service-card:hover{transform:translateY(-5px);border-color:rgba(236,28,46,.55)}
.service-card.featured{background:linear-gradient(145deg,#22151a,#171a21)}
.service-icon{font-size:2rem}
.service-card h3{font-size:1.3rem;margin:20px 0 10px}
.service-card p{color:var(--muted);margin:0}
.tag{position:absolute;right:18px;top:18px;background:var(--red);font-size:.72rem;font-weight:900;padding:5px 9px;border-radius:999px}
.split{
  display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
.split p:not(.eyebrow){font-size:1.1rem;color:var(--muted)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.stats div{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:28px}
.stats strong{font-size:2.1rem;display:block;color:#fff}
.stats span{color:var(--muted)}
.contact-section{
  max-width:1240px;margin:100px auto;padding:55px;border-radius:30px;
  background:linear-gradient(135deg,#231217,#151a21 65%);border:1px solid rgba(236,28,46,.28);
  display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center
}
.contact-section>div>p:not(.eyebrow){color:var(--muted)}
.contact-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-actions a{background:rgba(255,255,255,.06);border:1px solid var(--line);padding:17px;border-radius:15px;display:flex;flex-direction:column}
.contact-actions b{overflow-wrap:anywhere}
.contact-actions span{color:var(--muted);font-size:.86rem}
footer{
  max-width:1240px;margin:auto;padding:35px 24px 50px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;color:var(--muted);font-size:.9rem
}
footer img{width:120px;margin-right:auto}
@media(max-width:900px){
  .nav{display:none}
  .hero{grid-template-columns:1fr;padding-top:45px}
  .service-grid{grid-template-columns:1fr 1fr}
  .split,.contact-section{grid-template-columns:1fr}
}
@media(max-width:620px){
  .site-header{height:74px;padding:0 17px}
  .brand img{width:145px}
  .hero{padding:45px 17px 70px;gap:35px}
  h1{font-size:3rem}
  .hero-text{font-size:1.02rem}
  .button{width:100%}
  .quick-panel{padding:20px;border-radius:23px}
  .section{padding:75px 17px}
  .service-grid,.stats,.contact-actions{grid-template-columns:1fr}
  .contact-section{margin:65px 17px;padding:30px 20px}
  footer{padding-left:17px;padding-right:17px}
}

/* Refined visual identity */
#services{
  position:relative;
}
#services::before{
  content:"";
  position:absolute;
  inset:35px 0 auto auto;
  width:360px;
  height:260px;
  background:url("services-wallpaper.jpg") center/cover no-repeat;
  opacity:.16;
  filter:saturate(.9) brightness(1.18);
  border-radius:36px;
  pointer-events:none;
}
.site-header{
  background:rgba(25,31,41,.88);
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;
  margin-top:14px;
  height:74px;
  backdrop-filter:blur(14px);
}
.quick-panel{
  background:linear-gradient(165deg,rgba(24,55,59,.90),rgba(25,31,42,.88));
}
@media(max-width:900px){
  .hero{margin:10px 14px 0;padding:52px 28px 62px}
}
@media(max-width:620px){
  .site-header{margin:8px 9px 0;height:68px}
  .brand{padding:6px 10px}
  .brand img{width:145px;max-height:46px}
  .hero{margin:9px;padding:42px 18px 52px;border-radius:22px}
  h1{font-size:2.45rem}
}

/* v3 brightness refinements */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.04),transparent 45%);
}
.hero-content,.quick-panel{position:relative;z-index:2}
.service-card{
  box-shadow:0 12px 30px rgba(0,0,0,.16);
}
.stats div{
  background:linear-gradient(145deg,#252d3a,#1d2430);
  border-color:rgba(255,255,255,.14);
}
.contact-actions a{
  background:rgba(255,255,255,.10);
}


/* v4: dental focus, premium sections and visible footer logo */
.audience-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.audience-grid article{
  background:linear-gradient(145deg,#252d3a,#1d2430);
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  padding:28px;
  min-height:240px;
  box-shadow:0 14px 34px rgba(0,0,0,.17);
  transition:transform .25s ease,border-color .25s ease;
}
.audience-grid article:hover{
  transform:translateY(-5px);
  border-color:rgba(236,28,46,.55);
}
.audience-grid article>span{
  font-size:2.1rem;
  display:block;
  margin-bottom:18px;
}
.audience-grid h3{
  margin:0 0 10px;
  font-size:1.28rem;
}
.audience-grid p{
  margin:0;
  color:var(--muted);
}
.premium-showcase{
  padding-top:34px;
  padding-bottom:34px;
}
.showcase-card{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  padding:48px;
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:38px;
  align-items:center;
  background:
    linear-gradient(135deg,rgba(8,32,35,.88),rgba(25,31,42,.88)),
    url("wallpaper-alternative-1.jpg") center/cover no-repeat;
  border:1px solid rgba(45,220,210,.22);
  box-shadow:0 24px 60px rgba(0,0,0,.24);
}
.showcase-card.suite{
  background:
    linear-gradient(135deg,rgba(31,18,35,.90),rgba(25,31,42,.88)),
    url("wallpaper-alternative-2.jpg") center/cover no-repeat;
  border-color:rgba(236,28,46,.25);
}
.showcase-card p:not(.eyebrow){
  color:#d7dde6;
  font-size:1.08rem;
  max-width:760px;
}
.showcase-badges{
  display:grid;
  gap:12px;
}
.showcase-badges span{
  display:block;
  padding:14px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.13);
  font-weight:800;
}
.footer-logo{
  padding:8px 14px;
  background:rgba(255,255,255,.96);
  border-radius:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.20);
  display:flex;
  align-items:center;
}
.footer-logo img{
  width:145px;
  height:auto;
  display:block;
  margin:0;
}
footer>img{display:none}
@media(max-width:980px){
  .audience-grid{grid-template-columns:1fr 1fr}
  .showcase-card{grid-template-columns:1fr}
}
@media(max-width:620px){
  .audience-grid{grid-template-columns:1fr}
  .showcase-card{padding:28px 20px}
  .footer-logo img{width:132px}
}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.reveal.visible{opacity:1;transform:none}


/* v5: integrated Backup For You presentation */
.showcase-actions{
  margin-top:26px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
}
.presentation-button{
  width:auto;
  background:linear-gradient(135deg,#18c8c0,#087f86);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 14px 34px rgba(13,190,187,.23);
}
.presentation-button:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
}
.play-symbol{
  margin-right:9px;
  font-size:.88rem;
}
.showcase-actions small{
  color:#d6dde5;
}
.backup-presentation-link{
  border-color:rgba(30,220,210,.28);
  background:linear-gradient(135deg,rgba(15,111,116,.62),rgba(255,255,255,.06));
}
@media(max-width:620px){
  .showcase-actions{align-items:stretch}
  .presentation-button{width:100%}
  .showcase-actions small{width:100%;text-align:center}
}


/* v6 test: compact Backup For You banner above the main hero */
.backup-top-banner{
  position:relative;
  min-height:310px;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:
    linear-gradient(90deg,rgba(3,11,16,.93) 0%,rgba(4,25,29,.76) 48%,rgba(3,11,16,.42) 100%),
    url("../backup-for-you/assets/wallpaper1.jpg") center 44%/cover no-repeat;
  border-bottom:1px solid rgba(40,220,210,.28);
  box-shadow:0 18px 45px rgba(0,0,0,.20);
  transition:background-image .75s ease-in-out;
}
.backup-banner-shade{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 78% 42%,rgba(26,220,209,.16),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.03),transparent 50%);
  pointer-events:none;
}
.backup-banner-content{
  position:relative;
  z-index:2;
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
  padding:46px 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:32px;
  align-items:center;
}
.backup-banner-copy{max-width:780px}
.backup-banner-kicker{
  margin:0 0 10px;
  color:#65fff4;
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.22em;
}
.backup-top-banner h2{
  margin:0;
  max-width:760px;
  color:#fff;
  font-size:clamp(2rem,4vw,3.6rem);
  line-height:1.02;
  text-shadow:0 4px 24px rgba(0,0,0,.45);
}
.backup-top-banner p:not(.backup-banner-kicker){
  margin:18px 0 0;
  max-width:700px;
  color:#e4f4f3;
  font-size:clamp(1rem,1.5vw,1.16rem);
  line-height:1.6;
}
.backup-banner-actions{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:230px;
}
.backup-banner-actions .button{
  justify-content:center;
  text-align:center;
  white-space:nowrap;
}
.banner-primary{
  background:linear-gradient(135deg,#20d5cb,#087f86);
  box-shadow:0 14px 34px rgba(13,190,187,.25);
}
.banner-secondary{
  background:rgba(9,17,24,.62);
  border-color:rgba(255,255,255,.32);
  backdrop-filter:blur(8px);
}
.backup-banner-dots{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  display:flex;
  gap:7px;
}
.backup-banner-dots span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.38);
  transition:.25s ease;
}
.backup-banner-dots span.active{
  width:22px;
  border-radius:8px;
  background:#57eee5;
}
@media(max-width:860px){
  .backup-top-banner{min-height:360px}
  .backup-banner-content{
    grid-template-columns:1fr;
    align-items:end;
    gap:24px;
  }
  .backup-banner-actions{
    flex-direction:row;
    min-width:0;
  }
}
@media(max-width:620px){
  .backup-top-banner{
    min-height:430px;
    background-position:62% center;
  }
  .backup-banner-content{
    width:min(100% - 28px,1180px);
    padding:38px 0 46px;
  }
  .backup-banner-actions{
    flex-direction:column;
  }
  .backup-banner-actions .button{width:100%}
  .backup-top-banner h2{font-size:2.15rem}
}


/* v7: smaller premium Backup For You banner */
.backup-top-banner{
  min-height:190px;
}
.backup-banner-content{
  padding:24px 0 30px;
  gap:24px;
}
.backup-banner-kicker{
  margin-bottom:6px;
  font-size:.72rem;
}
.backup-top-banner h2{
  max-width:720px;
  font-size:clamp(1.55rem,2.65vw,2.65rem);
  line-height:1.04;
}
.backup-top-banner p:not(.backup-banner-kicker){
  margin-top:10px;
  max-width:720px;
  font-size:clamp(.9rem,1.15vw,1rem);
  line-height:1.45;
}
.backup-banner-actions{
  min-width:205px;
  gap:9px;
}
.backup-banner-actions .button{
  min-height:42px;
  padding:10px 15px;
  font-size:.9rem;
}
.backup-banner-dots{
  bottom:9px;
}
@media(max-width:860px){
  .backup-top-banner{
    min-height:245px;
  }
  .backup-banner-content{
    padding:23px 0 32px;
    gap:15px;
  }
  .backup-banner-actions{
    flex-direction:row;
  }
}
@media(max-width:620px){
  .backup-top-banner{
    min-height:310px;
  }
  .backup-banner-content{
    padding:24px 0 38px;
  }
  .backup-top-banner h2{
    font-size:1.78rem;
  }
  .backup-top-banner p:not(.backup-banner-kicker){
    font-size:.92rem;
  }
  .backup-banner-actions{
    flex-direction:column;
    gap:8px;
  }
}


/* Digital Future mobile header / banner patch 2026-07-19 */
@media (max-width:620px){
  body{overflow-x:hidden}
  .site-header{
    box-sizing:border-box!important;
    width:calc(100% - 18px)!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    margin:9px auto 0!important;
    padding:12px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    align-items:center!important;
    overflow:visible!important;
  }
  .site-header .brand{width:100%!important;justify-content:center!important;margin:0!important;padding:8px 12px!important}
  .site-header .brand img{width:min(230px,78vw)!important;max-height:62px!important}
  .site-header .language-switcher{width:100%!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;justify-content:stretch!important;order:initial!important}
  .site-header .language-option{width:100%!important;min-width:0!important;justify-content:center!important;padding:8px 4px!important;font-size:11px!important;white-space:nowrap!important}
  .site-header .flag-icon{width:20px!important;height:14px!important;margin:0!important}
  .backup-top-banner{margin:10px 9px 0!important;border-radius:22px!important;min-height:0!important;padding:34px 20px 48px!important;background-position:center!important}
  .backup-banner-content{display:block!important;width:100%!important}
  .backup-banner-copy{width:100%!important;max-width:none!important}
  .backup-banner-copy h2{font-size:clamp(2rem,10vw,3.15rem)!important;line-height:1.04!important;overflow-wrap:anywhere!important}
  .backup-banner-copy>p:not(.backup-banner-kicker){font-size:1.05rem!important;line-height:1.5!important}
  .backup-banner-actions{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:12px!important;margin-top:24px!important}
  .backup-banner-actions .button{width:100%!important;min-width:0!important;padding:0 14px!important;text-align:center!important}
  .backup-banner-dots{bottom:15px!important}
}
@media (max-width:380px){
  .site-header .language-option{font-size:10px!important;padding:7px 2px!important;gap:3px!important}
  .backup-banner-copy h2{font-size:2rem!important}
}