/* ==========================================================================
   U2 AI — glass layer v1 (2026-09)
   One file, identical on every sibling site, loaded after the site's own
   stylesheet. It does not replace those styles; it lifts the shared surfaces
   onto one material so twenty brands read as one family:

     · a fixed, brand-tinted wash behind the page
     · frosted cards, panels, forms, accordions
     · a frosted navigation bar and mobile sheet
     · frosted legal modals and the cookie bar
     · one focus ring, one selection colour, one scrollbar

   The nineteen generated sites share one class vocabulary; U2 AI Carbon's
   landing predates the generator and names the same things differently, so its
   selectors are listed alongside — .fcard for a card, .dash for the hero
   console, .rep for a report row, .modal-ov > .modal for the dialog. None of
   them occurs on the other sites, so naming them here costs nothing there.

   Each site bridges two variables at the end of its own stylesheet:
     --brand      the official Pantone value of that brand
     --brand-lit  the lightened variant used for small text on dark ground
   Nothing else here is brand specific, so a fix made once is a fix everywhere.
   ========================================================================== */

:root{
  --g-r: 20px;                                   /* the family's corner radius */
  --g-r-sm: 14px;
  --g-line: rgba(255,255,255,.13);
  --g-line-2: rgba(255,255,255,.22);
  --g-fill: linear-gradient(158deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  --g-fill-2: linear-gradient(158deg,rgba(255,255,255,.11),rgba(255,255,255,.04));
  --g-blur: blur(20px) saturate(150%);
  --g-shadow: 0 28px 64px -38px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.16);
}

/* ---------- the wash ------------------------------------------------------
   Three brand blooms, fixed behind everything. Glass needs something to
   refract; on a flat background it reads as a grey box. ---------------------- */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 620px at 10% 6%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 62%),
    radial-gradient(820px 560px at 92% 14%, color-mix(in srgb, var(--brand-lit) 10%, transparent), transparent 64%),
    radial-gradient(900px 640px at 72% 96%, rgba(34,211,238,.05), transparent 62%);
}
/* z-index:-1 keeps the wash behind every child without touching their own
   positioning: a rule on body > * would have turned the fixed cookie bar and
   the fixed mobile sheet into in-flow blocks. */

/* ---------- the material -------------------------------------------------- */
.u2-glass,
.modal__panel,
.modal-ov > .modal,
.cookiebar,
.mobilemenu,
:is(.module,.case,.why__card,.card,.persona,.pillar,.feature,.usecase,.plan,.price,.spec,.metric,.stat-card,.value,.proof),
:is(.fcard,.dash,.rep),
.faq details{
  /* .form is deliberately absent: the sites lay their forms out as a bare grid
     with no padding, so turning the form itself into a card pushed the labels
     and fields against its edge. The fields carry the material instead. */
  background:var(--g-fill);
  border:1px solid var(--g-line);
  border-radius:var(--g-r);
  -webkit-backdrop-filter:var(--g-blur);
  backdrop-filter:var(--g-blur);
  box-shadow:var(--g-shadow);
}

/* The inner highlight that makes a surface read as glass rather than as fog.
   position:relative is set only on the cards: the cookie bar and the modal are
   already positioned by the site, and overriding that would drop the fixed bar
   back into the page flow. */
:is(.u2-glass,.module,.case,.why__card,.card,.persona,.pillar,.feature,.usecase,.plan,.price,.spec,.fcard,.dash,.rep,.faq details){
  position:relative;
}
:is(.u2-glass,.modal__panel,:where(.modal-ov) > .modal,.cookiebar,.module,.case,.why__card,.card,.persona,.pillar,.feature,.usecase,.plan,.price,.spec,.fcard,.dash,.rep,.faq details){
  isolation:isolate;
}
:is(.u2-glass,.modal__panel,:where(.modal-ov) > .modal,.cookiebar,.module,.case,.why__card,.card,.persona,.pillar,.feature,.usecase,.plan,.price,.spec,.fcard,.dash,.rep,.faq details)::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(130% 90% at 0% 0%,rgba(255,255,255,.10),transparent 58%);
}

/* a card lifts on hover, once, everywhere */
:is(.module,.case,.why__card,.card,.persona,.pillar,.feature,.usecase,.plan,.price,.fcard){
  transition:transform .22s ease, border-color .22s ease, background .22s ease;
}
:is(.module,.case,.why__card,.card,.persona,.pillar,.feature,.usecase,.plan,.price,.fcard):hover{
  transform:translateY(-3px);
  border-color:var(--g-line-2);
  background:var(--g-fill-2);
}

/* ---------- navigation ---------------------------------------------------- */
.nav,
header#hdr,
.navbar{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border-bottom:1px solid var(--g-line);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
}
.nav.is-stuck,
header#hdr.scrolled,
.navbar.scrolled{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  box-shadow:0 18px 40px -30px rgba(0,0,0,.9);
}
.mobilemenu{border-radius:0}

/* ---------- legal modals -------------------------------------------------- */
.modal__backdrop,
.modal-ov{
  background:rgba(2,8,16,.62);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  backdrop-filter:blur(14px) saturate(120%);
}
.modal__panel,
.modal-ov > .modal{
  border-radius:24px;
  box-shadow:0 48px 120px -40px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.18);
}
/* the panel scrolls: the frost has to stay behind the text, not travel with it */
.modal__panel::before,
.modal-ov > .modal::before{position:fixed;inset:auto;display:none}
.modal__close,
.modal-close{
  background:rgba(255,255,255,.06);
  border-color:var(--g-line);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.modal__close:hover,
.modal-close:hover{background:color-mix(in srgb, var(--brand) 26%, transparent);border-color:var(--brand-lit);color:#fff}

/* ---------- cookie bar ---------------------------------------------------- */
.cookiebar{
  border-radius:18px;
  box-shadow:0 34px 80px -34px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.18);
}
.cookiebar p button{color:var(--brand-lit)}

/* ---------- accordions ---------------------------------------------------- */
.faq details{padding:0 22px;margin-bottom:10px;border-radius:var(--g-r-sm)}
.faq summary{padding:17px 28px 17px 0;cursor:pointer}
.faq details[open]{background:var(--g-fill-2)}

/* ---------- forms --------------------------------------------------------- */
.form input,.form textarea,.form select,.field input,.field textarea,.field select{
  background:rgba(255,255,255,.04);
  border:1px solid var(--g-line);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.form input:focus,.form textarea:focus,.form select:focus,
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--brand-lit);
  background:rgba(255,255,255,.06);
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}

/* ---------- buttons -------------------------------------------------------
   The primary button is glass too, but only just: the fill stays at 88 % of the
   brand so the label keeps the contrast it was drawn for, and the glass is read
   from the blur, the top highlight and the coloured glow rather than from
   transparency. A call to action that cannot be read is not a design choice. */
:is(.btn--brass,.btn--primary,.btn--accent,.btn--teal,.btn--olive,.btn--volt,.btn--gold,.btn--iris,.btn--azure,.btn--crimson,.btn--indigo,.btn--steel,.btn-primary){
  background:color-mix(in srgb, var(--brand) 88%, transparent);
  border:1px solid color-mix(in srgb, #FFFFFF 34%, transparent);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  backdrop-filter:blur(12px) saturate(140%);
  box-shadow:0 16px 34px -16px color-mix(in srgb, var(--brand) 75%, transparent),
             inset 0 1px 0 rgba(255,255,255,.34);
}
:is(.btn--brass,.btn--primary,.btn--accent,.btn--teal,.btn--olive,.btn--volt,.btn--gold,.btn--iris,.btn--azure,.btn--crimson,.btn--indigo,.btn--steel,.btn-primary):hover{
  background:var(--brand);
  box-shadow:0 20px 40px -16px color-mix(in srgb, var(--brand) 85%, transparent),
             inset 0 1px 0 rgba(255,255,255,.42);
}
/* the language switch and other small pills join the same material */
:is(.nav__lang,.lang,.langswitch,.chip,.tag){
  background:rgba(255,255,255,.05);
  border:1px solid var(--g-line);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.btn--ghost,
.btn-ghost{
  background:rgba(255,255,255,.05);
  border-color:var(--g-line);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.btn--ghost:hover,
.btn-ghost:hover{background:rgba(255,255,255,.09);border-color:var(--g-line-2)}

/* ---------- one focus ring, one selection, one scrollbar ------------------ */
:where(a,button,summary,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--brand-lit);
  outline-offset:2px;
  border-radius:6px;
}
::selection{background:color-mix(in srgb, var(--brand) 45%, transparent);color:#fff}
*{scrollbar-color:color-mix(in srgb, var(--brand) 45%, transparent) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--brand) 40%, transparent);border-radius:999px;
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--brand) 65%, transparent);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------- the footer's brand strip is the family's signature ------------ */
.footer__brands a{transition:color .18s ease}
.footer__brands a:hover{color:#fff}

/* ---------- restraint ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  :is(.module,.case,.why__card,.card,.persona,.pillar,.feature,.usecase,.plan,.price,.fcard):hover{transform:none}
}
/* A browser without backdrop-filter must not be left with transparent cards. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .u2-glass,.modal__panel,.modal-ov > .modal,.cookiebar,.mobilemenu,.nav,header#hdr,.navbar,
  :is(.module,.case,.why__card,.card,.persona,.pillar,.feature,.usecase,.plan,.price,.spec),
  :is(.fcard,.dash,.rep),
  .faq details,.form{background:rgba(10,30,56,.92)}
}