*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Source Sans 3',sans-serif;font-size:1rem;line-height:1.7;font-weight:400;color:#8B7D8E;background:#FFF9F0;overflow-x:hidden;position:relative}

h1,h2{font-family:'Inter',sans-serif;font-weight:700;color:#4A3B5C}
h1{font-size:clamp(1.8rem,3.5vw,3rem)}
h2{font-size:clamp(1.1rem,2vw,1.5rem);margin-bottom:.75rem}

/* Blobs */
.blob{position:fixed;border-radius:50%;pointer-events:none;z-index:0;opacity:.2}
.blob-1{width:40vw;height:40vw;background:radial-gradient(circle,#E8B4B8,transparent 70%);top:-10vh;right:-5vw;animation:blobDrift1 20s ease-in-out infinite}
.blob-2{width:35vw;height:35vw;background:radial-gradient(circle,#B4E8D4,transparent 70%);bottom:5vh;left:-8vw;animation:blobDrift2 25s ease-in-out infinite}
.blob-3{width:30vw;height:30vw;background:radial-gradient(circle,#D4C4E8,transparent 70%);top:40vh;left:50vw;animation:blobDrift3 22s ease-in-out infinite}
@keyframes blobDrift1{0%,100%{transform:translate(0,0)}50%{transform:translate(-3vw,4vh)}}
@keyframes blobDrift2{0%,100%{transform:translate(0,0)}50%{transform:translate(4vw,-3vh)}}
@keyframes blobDrift3{0%,100%{transform:translate(0,0)}50%{transform:translate(-2vw,5vh)}}

/* Hero */
.hero{position:relative;z-index:1;text-align:center;padding:6rem 2rem 3rem}
.subtitle{color:#8B7D8E;font-size:.9rem;margin-top:.5rem}

/* Bento Grid */
.bento-section{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:2rem}
.bento-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bento-cell{background:rgba(255,255,255,.6);backdrop-filter:blur(10px);border-radius:16px;padding:1.5rem;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease}
.bento-cell:hover{transform:scale(1.02);box-shadow:0 8px 30px rgba(74,59,92,.08)}
.bento-cell.featured{grid-column:span 2;grid-row:span 2;padding:2rem}
.bento-cell.wide{grid-column:span 2}
.cell-label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#8B7D8E;margin-bottom:.5rem;font-weight:600}
.bento-cell p{font-size:.9rem;margin-bottom:.75rem}
.accent-tag{display:inline-block;font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;padding:.2rem .6rem;border-radius:8px;font-weight:600}
.accent-tag.rose{background:rgba(232,180,184,.2);color:#E8B4B8}
.accent-tag.mint{background:rgba(180,232,212,.2);color:#6dab94}
.accent-tag.lavender{background:rgba(212,196,232,.2);color:#9b87b0}

/* Abstract-tech marks */
.bento-grid::before{content:'';position:absolute;top:-8px;left:50%;width:1px;height:16px;background:#D4C4E8;opacity:.3}
.bento-grid::after{content:'';position:absolute;bottom:-8px;right:25%;width:6px;height:6px;border-radius:50%;border:1px solid #E8B4B8;opacity:.3}

/* Footer */
.site-footer{position:relative;z-index:1;text-align:center;padding:3rem 2rem;font-size:.8125rem;color:#8B7D8E}

/* Card reveal */
.card{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.card.visible{opacity:1;transform:translateY(0)}

@media(max-width:768px){
  .bento-grid{grid-template-columns:repeat(2,1fr)}
  .bento-cell.featured{grid-column:span 2}
  .bento-cell.wide{grid-column:span 2}
}
@media(max-width:480px){
  .bento-grid{grid-template-columns:1fr}
  .bento-cell.featured,.bento-cell.wide{grid-column:span 1}
}