@font-face{
  font-family:'Geist';
  src:url('/assets/fonts/geist-variable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:linear-gradient(165deg,#FFFBFD 0%, #FFF9FC 45%, #FFF5FA 100%);
  color:var(--ink);
  font-family:var(--font);
  line-height:1.55;
  letter-spacing:0.005em;
  -webkit-font-smoothing:antialiased;
  font-weight:400;
}
.wrap{max-width:1140px; margin:0 auto; padding:0 32px;}

/* ambient background — layered radial illumination, varied depth via blur */
.bg-blob{position:fixed; z-index:0; border-radius:50%; pointer-events:none;}
.bg-blob.one{width:640px; height:640px; top:-260px; left:-160px; background:radial-gradient(circle, var(--pink-2), transparent 68%); opacity:0.24; filter:blur(70px);}
.bg-blob.two{width:560px; height:560px; top:14vh; right:-240px; background:radial-gradient(circle, var(--pink-pale), transparent 70%); opacity:0.5; filter:blur(60px);}
.bg-blob.three{width:620px; height:620px; bottom:-260px; left:16vw; background:radial-gradient(circle, var(--pink-2), transparent 68%); opacity:0.18; filter:blur(90px);}
.bg-blob.four{width:340px; height:340px; top:52vh; left:44vw; background:radial-gradient(circle, #fff, transparent 70%); opacity:0.35; filter:blur(50px);}

.noise-overlay{
  position:fixed; inset:0; z-index:3; pointer-events:none; opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main{position:relative; z-index:1;}

/* ===== material primitives, shared across components ===== */

.capsule{
  position:relative; background:var(--glass-rgba);
  backdrop-filter:blur(16px) saturate(170%); -webkit-backdrop-filter:blur(16px) saturate(170%);
  border-radius:100px; box-shadow:0 0 0 1px rgba(255,255,255,0.55), 0 8px 18px -8px rgba(226,70,136,0.16);
}
.capsule::before{content:""; position:absolute; top:1px; left:14%; right:14%; height:44%; border-radius:100px 100px 50% 50%/100px 100px 100% 100%; background:linear-gradient(180deg, rgba(255,255,255,0.75), transparent); pointer-events:none;}

.porcelain{
  position:relative; background:linear-gradient(165deg,#FFFFFF 0%, #FFF7FA 58%, #FFF0F6 100%);
  border-radius:22px; overflow:hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 -16px 24px -20px rgba(226,70,136,0.16) inset,
    0 0 0 1px rgba(226,70,136,0.05),
    0 3px 6px rgba(226,70,136,0.05),
    0 14px 26px -14px rgba(226,70,136,0.16),
    0 34px 60px -32px rgba(226,70,136,0.13);
}
.porcelain::before{content:""; position:absolute; top:0; left:0; width:65%; height:46%; background:radial-gradient(ellipse at top left, rgba(255,255,255,0.95), transparent 72%); pointer-events:none;}

.glass-panel{
  position:relative; background:var(--glass-rgba);
  backdrop-filter:blur(26px) saturate(180%); -webkit-backdrop-filter:blur(26px) saturate(180%);
  border-radius:26px; overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.55),
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 22px 44px -22px rgba(226,70,136,0.20),
    0 44px 80px -42px rgba(226,70,136,0.14);
}
.glass-panel::before{content:""; position:absolute; top:0; left:7%; right:7%; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);}
.glass-panel::after{content:""; position:absolute; top:-30%; left:-20%; width:65%; height:85%; background:linear-gradient(122deg, rgba(255,255,255,0.4), transparent 60%); transform:rotate(-6deg); pointer-events:none;}

.sculpted{
  position:relative; overflow:hidden;
  background:linear-gradient(165deg, var(--pink-pale) 0%, #FFEAF3 50%, #FFDCEC 100%);
  border-radius:32px;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.85) inset,
    0 -28px 44px -30px rgba(226,70,136,0.26) inset,
    0 0 0 1px rgba(226,70,136,0.07),
    0 34px 64px -32px rgba(226,70,136,0.28);
}

.btn-tactile{
  position:relative; overflow:hidden; display:block; text-align:center; color:#fff;
  font-family:var(--font); font-size:14px; font-weight:560; letter-spacing:0.015em; padding:14px; border-radius:16px;
  background:linear-gradient(180deg,var(--pink-hi) 0%, var(--pink) 55%, var(--pink-deep) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 -9px 15px rgba(0,0,0,0.12) inset,
    0 3px 8px rgba(226,70,136,0.35),
    0 16px 30px -10px rgba(226,70,136,0.55);
}
.btn-tactile .sheen{position:absolute; top:0; left:0; right:0; height:54%; background:linear-gradient(180deg, rgba(255,255,255,0.36), rgba(255,255,255,0)); pointer-events:none;}
.btn-tactile .spec{position:absolute; top:0; left:8%; right:8%; height:2px; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);}
.btn-tactile span.label{position:relative;}

a.btn-tactile{text-decoration:none;}

.capsule:focus-visible,
.glass-panel:focus-visible,
.porcelain:focus-visible,
.btn-tactile:focus-visible,
a:focus-visible{outline:2px solid var(--pink); outline-offset:2px;}