/*
 * BECKER · LIQUID GLASS V4
 * Translucent optical surfaces with chromatic rim lighting and natural
 * colour bleeding, inspired by glass UI (not Apple's proprietary renderer).
 * Follows BECKER's bright silver / cyan identity; no dark blue panels.
 */
:root{
  --liquid-ink:#153c58;
  --liquid-muted:#426b83;
  --liquid-border:rgba(149,217,252,.72);
  --liquid-shadow:0 21px 48px rgba(27,115,170,.13),0 3px 13px rgba(45,146,196,.08),
     inset 0 1px 0 rgba(255,255,255,.97), inset 0 -2px 5px rgba(68,150,234,.15),
     inset 2px 0 6px rgba(255,255,255,.65);
}
/* The luminous environment is essential: true transparent glass must have
   coloured detail BEHIND it to transmit. Page stays predominantly white. */
body:not(.launch-page){
  background:radial-gradient(ellipse 45% 32% at 7% 28%,rgba(74,207,248,.14),transparent 84%),
    radial-gradient(ellipse 51% 22% at 90% 60%,rgba(234,154,237,.13),transparent 87%),#fbfdff;
}
body:not(.launch-page) .section:not(.section-alt){
  background:
    radial-gradient(ellipse 23% 30% at 8% 26%,rgba(43,191,250,.27),transparent 89%),
    radial-gradient(ellipse 27% 33% at 48% 54%,rgba(221,153,255,.19),transparent 91%),
    radial-gradient(ellipse 24% 25% at 94% 72%,rgba(26,171,250,.23),transparent 90%),
    radial-gradient(ellipse 31% 22% at 74% 11%,rgba(255,194,224,.16),transparent 95%),
    linear-gradient(155deg,#fbfdff 0%,#f2faff 57%,#fff 100%);
}
body:not(.launch-page) .section-alt{
  background:
    radial-gradient(ellipse 30% 48% at 11% 25%,rgba(39,190,252,.22),transparent 92%),
    radial-gradient(ellipse 38% 30% at 84% 67%,rgba(216,142,241,.20),transparent 92%),
    linear-gradient(140deg,#f0faff 0%,#fff 52%,#edf8ff 100%);
  border-block:1px solid rgba(161,208,236,.38);
}
/* A subtle set of colourful transparent prisms, a scale-safe page texture. */
body:not(.launch-page) .page-hero{
  background:
    radial-gradient(ellipse 27% 76% at 75% 33%,rgba(181,109,237,.17),transparent 90%),
    radial-gradient(ellipse 28% 76% at 93% 79%,rgba(45,194,249,.23),transparent 92%),
    linear-gradient(135deg,#ffffff,#e8f8ff 60%,#fdfdff);
}
/* Optical surface group. */
:is(.service-card,.feature-tile,.faq-item,.step,.side-card,
  .intro-note,.info-box,.mini-kpi,.contact-card,.glow-panel,.contact-form,.orbit-tag){
  --glx:20%;--gly:0%;
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(ellipse 62% 57% at var(--glx) var(--gly),rgba(255,255,255,.52),transparent 85%),
    radial-gradient(ellipse 76% 92% at 110% 106%,rgba(33,176,251,.16),transparent 84%),
    radial-gradient(ellipse 86% 80% at -24% -45%,rgba(255,181,235,.18),transparent 88%),
    linear-gradient(133deg,rgba(255,255,255,.43) 0%,rgba(206,239,255,.28) 41%,rgba(179,211,251,.25) 77%,rgba(255,255,255,.43) 100%);
  border:1px solid rgba(166,215,249,.72);
  border-radius:28px;
  box-shadow:var(--liquid-shadow);
  -webkit-backdrop-filter:blur(11px) saturate(230%) brightness(1.065);
  backdrop-filter:blur(11px) saturate(230%) brightness(1.065);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s ease,box-shadow .35s ease;
  overflow:hidden;
}
/* Chromatic rim: thin refracted cyan-violet-pink silver reflections. */
:is(.service-card,.feature-tile,.faq-item,.step,.side-card,
  .intro-note,.info-box,.mini-kpi,.contact-card,.glow-panel,.contact-form,.orbit-tag)::before{
  content:"";pointer-events:none;
  position:absolute;z-index:4;inset:-1px;border-radius:inherit;
  padding:2px;
  background:conic-gradient(from 214deg at 50% 50%,
    rgba(110,215,255,.22) 0deg,rgba(255,255,255,.97) 35deg,
    rgba(122,226,253,.96) 69deg,rgba(202,143,255,.60) 119deg,
    rgba(255,255,255,.94) 178deg,rgba(255,153,202,.76) 241deg,
    rgba(80,195,255,.84) 299deg,rgba(255,255,255,.95) 333deg,
    rgba(110,215,255,.22) 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:.98;
  filter:drop-shadow(0 0 5px rgba(77,195,255,.30));
}
/* Surface reflection: a bright crescent plus a subtle blue/pink ripple.
   All text elements sit on a higher layer and remain readable. */
:is(.service-card,.feature-tile,.faq-item,.step,.side-card,
  .intro-note,.info-box,.mini-kpi,.contact-card,.glow-panel,.contact-form,.orbit-tag)::after{
  content:"";pointer-events:none;position:absolute;z-index:0;inset:0;border-radius:inherit;
  background:
    radial-gradient(ellipse 98% 40% at 48% -7%,rgba(255,255,255,.95),rgba(255,255,255,.18) 67%,transparent 95%),
    linear-gradient(112deg,rgba(255,255,255,.48),transparent 20%,rgba(252,144,236,.075) 49%,rgba(64,165,255,.09) 65%,transparent 84%),
    radial-gradient(ellipse 80% 28% at 55% 114%,rgba(46,173,255,.18),transparent 88%);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.98),
    inset 0 -2px 3px rgba(32,145,243,.20),inset 2px 0 3px rgba(255,255,255,.7);
  opacity:.88;
}
:is(.service-card,.feature-tile,.faq-item,.step,.side-card,.intro-note,
  .info-box,.mini-kpi,.contact-card,.glow-panel,.contact-form,.orbit-tag)>*{
  position:relative;z-index:1;
}
@media(hover:hover) and (pointer:fine){
  :is(.service-card,.feature-tile,.faq-item,.step,.side-card,.intro-note,
   .info-box,.mini-kpi,.contact-card,.glow-panel,.orbit-tag):hover{
    transform:translateY(-4px) scale(1.006);
    border-color:rgba(110,208,252,.95);
    box-shadow:0 25px 54px rgba(36,125,184,.19),0 3px 15px rgba(191,108,229,.08),
      inset 0 2px 0 rgba(255,255,255,.99),inset 0 -2px 7px rgba(40,172,246,.20);
  }
}
/* Typographic contrast without opaque backgrounds. */
:is(.service-card,.feature-tile,.faq-item,.step,.side-card,.intro-note,
    .info-box,.mini-kpi,.contact-card,.glow-panel){color:var(--liquid-ink)}
.feature-tile{border-radius:24px;min-height:95px;}
.feature-tile b,.service-card h3,.step h3,.side-card h3,.contact-card h3,.glow-panel h3{color:#103c60}
.feature-tile span,.service-card p,.step p,.side-card p,.contact-card p,.glow-panel p{color:#3e657f}
.service-card .service-icon{
  background:linear-gradient(130deg,rgba(255,255,255,.53),rgba(68,207,254,.2),rgba(236,178,255,.21));
  border:1px solid rgba(126,212,251,.78);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.92),0 10px 23px rgba(32,157,211,.10);
}
/* Keep visual hierarchy and original decorative step rule. */
.step:after{background:linear-gradient(90deg,rgba(59,196,241,.3),#fff 45%,rgba(226,155,245,.3));}
.info-box{border-left:3px solid #38c0ef;color:#345d77}
.intro-note{color:#3d6682}
.mini-kpi strong{color:#067ca8}.mini-kpi span{color:#4d7490}
/* Accordion glass. Native <details> stays fully accessible. */
.faq-item{margin-bottom:14px}
.faq-item[open],.faq-item:focus-within{
  border-color:rgba(84,190,249,.90);
  box-shadow:0 22px 51px rgba(34,135,200,.14),0 4px 15px rgba(207,134,238,.07),
    inset 0 2px 0 rgba(255,255,255,.98),inset 0 -1px 3px rgba(44,143,226,.16);
}
.faq-item summary{position:relative;color:#113c5a}
.faq-item summary:after{color:#008dc2}
.faq-item p{position:relative;color:#395d78}
.faq-item summary:focus-visible{outline:2px solid #008fc4;outline-offset:-4px;border-radius:20px;}
/* Form glass - inputs intentionally less transparent than their surrounds. */
.contact-form{background:linear-gradient(135deg,rgba(255,255,255,.44),rgba(181,228,255,.31));}
.form-field input,.form-field select,.form-field textarea{
  background:rgba(255,255,255,.80);
  border:1px solid rgba(142,200,237,.72);
  box-shadow:inset 0 1px 2px rgba(24,114,174,.035);
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  background:rgba(255,255,255,.97);box-shadow:0 0 0 3px rgba(29,176,235,.17);
}
/* Small pills, filters and countdown have same liquid optics as the cards. */
.filter-btn,.launch-page .pill{
  background:linear-gradient(145deg,rgba(255,255,255,.44),rgba(98,208,254,.19));
  border:1px solid rgba(135,206,246,.64);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.95),0 6px 17px rgba(37,145,202,.09);
  -webkit-backdrop-filter:blur(12px) saturate(220%);backdrop-filter:blur(12px) saturate(220%);
}
.filter-btn.active{background:linear-gradient(133deg,rgba(64,204,248,.27),rgba(246,170,243,.16),rgba(255,255,255,.75));}
.launch-page .countdown-wrap{
  position:relative;
  background:
    radial-gradient(ellipse at 12% 5%,rgba(255,255,255,.65),transparent 69%),
    linear-gradient(130deg,rgba(249,253,255,.46),rgba(119,209,250,.26),rgba(238,183,251,.18));
  border:1.5px solid rgba(150,217,249,.79);border-radius:30px;
  box-shadow:0 22px 52px rgba(41,130,192,.18),inset 0 2px 0 rgba(255,255,255,.98),inset 0 -2px 5px rgba(71,169,234,.21);
  -webkit-backdrop-filter:blur(17px) saturate(240%);backdrop-filter:blur(17px) saturate(240%);
}
.launch-page .countdown-wrap:before{
  content:"";pointer-events:none;position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(105deg,rgba(255,255,255,.55),transparent 29%,rgba(197,154,248,.13) 66%,transparent 88%);
}
.launch-page .count-unit{
  background:linear-gradient(130deg,rgba(255,255,255,.42),rgba(111,211,255,.20),rgba(228,172,255,.13));
  border:1px solid rgba(145,211,249,.78);border-radius:19px;
  box-shadow:0 7px 19px rgba(40,128,192,.12),inset 0 2px 1px rgba(255,255,255,.93),inset 0 -1px 3px rgba(68,156,221,.18);
  -webkit-backdrop-filter:blur(14px) saturate(225%);backdrop-filter:blur(14px) saturate(225%);
}
.launch-page .count-number{color:#113d5c}.launch-page .count-label{color:#476d89}
/* Preview-of-launch countdown background tint gives actual colour to the glass. */
.launch-page .launch-stage{
  background:radial-gradient(ellipse 49% 38% at 31% 75%,rgba(79,190,254,.19),transparent 88%),
    radial-gradient(ellipse 36% 55% at 37% 93%,rgba(231,165,244,.17),transparent 90%),
    linear-gradient(115deg,#fff,#f6fbff 48%,#effaff);
}
/* On older browsers, keep frosted appearance even without backdrop-filter. */
@supports not ((backdrop-filter:blur(5px)) or (-webkit-backdrop-filter:blur(5px))){
  :is(.service-card,.feature-tile,.faq-item,.step,.side-card,.intro-note,
    .info-box,.mini-kpi,.contact-card,.glow-panel,.contact-form,.orbit-tag){
      background:linear-gradient(135deg,#eef9ff,#deeeff 63%,#f6faff);
  }
  .launch-page .countdown-wrap,.launch-page .count-unit{background:linear-gradient(135deg,#f7fcff,#dbedfa);}
}
@media(max-width:560px){
  :is(.feature-tile,.faq-item,.step,.side-card,.intro-note,.info-box,.mini-kpi,.contact-card){border-radius:22px}
  .faq-item summary{padding:20px 21px}.faq-item p{padding:0 21px 22px}
  .feature-tile{min-height:0}
  .launch-page .countdown-wrap{border-radius:23px}.launch-page .count-unit{border-radius:14px}
}
@media(prefers-reduced-motion:reduce){
  :is(.service-card,.feature-tile,.faq-item,.step,.side-card,.intro-note,
    .info-box,.mini-kpi,.contact-card,.glow-panel,.contact-form,.orbit-tag){transition:none!important;}
}
/* V4 finishing touches: older component pseudo-elements had fixed dimensions.
   Reset them so the refractive rim follows the ENTIRE new card perimeter. */
:is(.service-card,.feature-tile,.faq-item,.step,.side-card,
  .intro-note,.info-box,.mini-kpi,.contact-card,.glow-panel,.contact-form,.orbit-tag)::before,
:is(.service-card,.feature-tile,.faq-item,.step,.side-card,
  .intro-note,.info-box,.mini-kpi,.contact-card,.glow-panel,.contact-form,.orbit-tag)::after{
  width:auto;height:auto;left:0;right:0;top:0;bottom:0;
}
/* Short legal/availability notes remain text, rather than glass within glass. */
.side-card .intro-note{
  position:relative;background:transparent!important;border:0!important;
  border-radius:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  overflow:visible!important;padding:0!important;margin-top:18px;
  font-size:12px;line-height:1.65;color:#4d7187;
}
.side-card .intro-note::before,.side-card .intro-note::after{display:none!important}