/* ================================================================
   glass.css — bulged glass morphism, 4 brand tokens only
   Target: digitalskillid.com (digitalskillid-se-website)
   ================================================================
   Palette (strict):
     --color-indigo: #1B1F3B
     --color-gold:   #D4A574
     --color-cream:  #F8F4ED
     --color-teal:   #6FB7A8

   Scope: visual layer only. Zero HTML changes. Zero copy changes.
   Zero functionality changes. Revert = delete the <link> tag.
   Date: 2026-10-18
================================================================ */

:root{
  --color-indigo:#1B1F3B;
  --color-gold:#D4A574;
  --color-cream:#F8F4ED;
  --color-teal:#6FB7A8;
}

/* ===================================================
   BODY — cream canvas + 6 soft gold/teal auras
   =================================================== */
/* Perf: no background-attachment:fixed. Reduced 6 auras to 3. */
body{
  background:
    radial-gradient(circle at 10% 10%, rgba(212,165,116,.14), transparent 50%),
    radial-gradient(circle at 90% 50%, rgba(111,183,168,.12), transparent 50%),
    radial-gradient(circle at 20% 85%, rgba(85,96,168,.11),   transparent 50%),
    var(--color-cream);
}

/* ===================================================
   NAV — floating glass pill, full-width (minus 24px gutters)
   =================================================== */
nav{
  top:12px !important;
  left:24px !important;
  right:24px !important;
  border-radius:100px !important;
  border:1px solid rgba(27,31,59,.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 4px rgba(27,31,59,.04),
    0 12px 32px rgba(27,31,59,.08) !important;
}

/* ===================================================
   LIGHT BULGE — hero, content sections, footer
   =================================================== */
.hero,
section.s,
footer{
  margin:28px 24px;
  border-radius:28px;
  position:relative;
  overflow:hidden;
  background:rgba(248,244,237,.65);
  backdrop-filter:blur(14px) saturate(140%);  /* reduced from 26 for scroll perf */
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(27,31,59,.08);
  will-change:transform;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(27,31,59,.04),
    0 1px 2px rgba(27,31,59,.04),
    0 10px 24px rgba(27,31,59,.08),
    0 24px 48px rgba(27,31,59,.08);
}

/* Hero needs extra top-margin to clear the fixed nav pill */
.hero{
  margin-top:96px !important;
}

.hero::before,
section.s::before,
footer::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(212,165,116,.55),transparent);
  pointer-events:none;z-index:1;
}

/* The wallet section has an inline cream→cream-warm gradient. Override. */
section.s#wallet{
  background:rgba(248,244,237,.5) !important;
  border-top:0 !important;
  border-bottom:0 !important;
}

/* ===================================================
   DARK BULGE — CTA (~8% translucent)
   =================================================== */
.cta-section{
  margin:28px 24px;
  border-radius:28px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%,    rgba(111,183,168,.2), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(212,165,116,.2), transparent 60%),
    rgba(27,31,59,.94) !important;
  backdrop-filter:blur(12px) saturate(130%);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  border:1px solid rgba(212,165,116,.45);
  color:var(--color-cream);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.18),
    inset 0 0 0 1px rgba(212,165,116,.1),
    inset 0 -2px 0 rgba(0,0,0,.4),
    0 1px 2px rgba(0,0,0,.3),
    0 10px 24px rgba(27,31,59,.4),
    0 24px 56px rgba(27,31,59,.5),
    0 0 60px rgba(212,165,116,.08);
}
.cta-section::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(212,165,116,.9),transparent);
  pointer-events:none;z-index:1;
}

/* ===================================================
   MINI-BULGES — pillar cards
   =================================================== */
/* Mini-bulges — NO nested backdrop-filter (scroll perf) */
.pillar{
  background:rgba(255,255,255,.75);
  border:1px solid rgba(27,31,59,.06);
  position:relative;
  overflow:hidden;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    0 2px 4px rgba(27,31,59,.04),
    0 8px 20px rgba(27,31,59,.06);
}
.pillar::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,165,116,.5),transparent);
  pointer-events:none;
}

/* ===================================================
   DSI flip card — stays flat
   =================================================== */
.id-card-wrap,
.id-card-inner,
.id-card-front,
.id-card-back{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* ===================================================
   Progressive enhancement — fallback for older browsers
   =================================================== */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero, section.s, .pillar{background:rgba(248,244,237,.9)}
  .cta-section{background:var(--color-indigo) !important}
}

/* ===================================================
   MOBILE — tighten gutters, radii + hero padding
   =================================================== */
@media (max-width: 700px){
  nav{
    top:8px !important;
    left:10px !important;
    right:10px !important;
    padding:6px 12px !important;
    border-radius:999px !important;
  }
  nav.scrolled{padding:5px 12px !important}
  nav .logo{font-size:17px !important; gap:8px !important}
  nav .logo-mark{width:28px !important; height:28px !important}
  nav .logo-mark img,
  nav .logo-mark svg{width:22px !important; height:22px !important}
  nav .hamburger{width:34px !important; height:34px !important}
  nav .nav-cta{padding:7px 14px !important; font-size:13px !important}
  .hero,
  section.s,
  footer{
    margin:16px 10px !important;
    border-radius:20px !important;
  }
  .hero{
    margin-top:72px !important;
  }
  .cta-section{
    margin:16px 10px !important;
    border-radius:20px !important;
  }
}

@media (max-width: 420px){
  nav{
    top:6px !important;
    left:8px !important;
    right:8px !important;
  }
  .hero,
  section.s,
  footer,
  .cta-section{
    margin:12px 8px !important;
    border-radius:18px !important;
  }
  .hero{
    margin-top:64px !important;
  }
}