/* variant: organic. Soft drifting blobs, scroll parallax, pill and blob shapes, gentle lifts, wavy dividers. */
:root{--radius-lg:clamp(1.5rem,1rem + 1.5vw,2.25rem);--btn-radius:999px;--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V32C180 4 360 4 540 22s360 38 540 20 270-34 360-30v48z'/%3E%3C/svg%3E")}
.hero .btn,.contact-panel .btn{padding-inline:1.75rem}
.btn-accent{box-shadow:0 14px 30px -14px rgb(var(--accent-rgb) / .9)}

/* hero: layered blobs that drift (always) and part with scroll (parallax), wavy bottom edge */
.hero{padding-bottom:calc(clamp(4rem,2rem + 8vw,8.5rem) + 2.5rem)}
.hero.has-stats{padding-bottom:calc(clamp(4rem,2rem + 8vw,8.5rem) + 5rem)}
.hero-fx{inset:-15%;background:radial-gradient(closest-side,rgb(var(--brand-rgb) / .55),transparent) 78% 12%/42% 55% no-repeat,radial-gradient(closest-side,rgb(var(--accent-rgb) / .3),transparent) 8% 92%/38% 48% no-repeat}
.hero-fx::before,.hero-fx::after{content:"";position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--accent-rgb) / .28),transparent);width:34%;aspect-ratio:1;left:52%;top:46%}
.hero-fx::after{background:radial-gradient(closest-side,rgb(var(--brand-rgb) / .45),transparent);width:26%;left:14%;top:8%}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(28px,4vw,60px);background:var(--bg);-webkit-mask:var(--wave) 0 0/100% 100%;mask:var(--wave) 0 0/100% 100%;pointer-events:none}
.hero-inner{position:relative;z-index:1}
.hero-figure>img{border-radius:42% 58% 46% 54% / 38% 42% 58% 62%}
.hero-figure::before{inset:-18px;border-radius:50% 46% 54% 48% / 46% 52% 48% 54%;border-style:dashed}
.emblem,.emblem-ring{border-radius:46% 54% 50% 50% / 52% 46% 54% 48%}
.emblem--wide,.emblem--wide .emblem-ring{border-radius:999px}
.emblem--wide{padding-inline:2.5rem}

/* waves between alternating sections */
.section--alt{position:relative;z-index:1;border:0}
.section--alt::before,.section--alt::after{content:"";position:absolute;left:0;right:0;height:clamp(24px,3.5vw,52px);background:var(--card);-webkit-mask:var(--wave) 0 0/100% 100%;mask:var(--wave) 0 0/100% 100%;pointer-events:none}
.section--alt::before{bottom:calc(100% - 1px)}
.section--alt::after{top:calc(100% - 1px);transform:scale(-1,-1)}

/* soft rounded cards with blob icons */
.stats{border:0;box-shadow:0 24px 60px -30px rgb(var(--brand-rgb) / .5)}
.card,.step{border-color:transparent;box-shadow:0 2px 6px rgb(var(--brand-rgb) / .05),0 18px 40px -26px rgb(var(--brand-rgb) / .45)}
.card::after{display:none}
.chip{width:3.5rem;height:3.5rem;border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;background:linear-gradient(135deg,var(--chip-bg),rgb(var(--accent-rgb) / .2))}
.step-num{width:3.5rem;height:3.5rem;border-radius:58% 42% 50% 50% / 48% 56% 44% 52%;box-shadow:0 0 0 7px var(--chip-bg),0 10px 22px -8px var(--primary)}
.about-media img{border-radius:var(--radius-lg) var(--radius-lg) var(--radius-lg) 5rem}
.about-media::before{inset:-6% 8% 10% -6%;border-radius:46% 54% 42% 58% / 52% 44% 56% 48%;background:radial-gradient(circle at 30% 30%,rgb(var(--accent-rgb) / .35),rgb(var(--brand-rgb) / .2) 70%)}
.shot-frame{border-radius:var(--radius-lg)}
.points li{padding:.5rem .875rem;border-radius:999px;background:var(--chip-bg);color:var(--fg)}
.points .icon{margin-top:.15rem}
.contact-panel{border-radius:clamp(1.75rem,1rem + 3vw,3.5rem)}
.ccard{border-radius:1.5rem}
.ccard .chip{border-radius:42% 58% 63% 37% / 41% 44% 56% 59%}
@media (min-width:48em){.gallery>li:nth-child(3n+2){translate:0 1.75rem}.gallery{padding-bottom:1.75rem}}

@media (prefers-reduced-motion:no-preference){
  :root{--enter:bloom}
  .io .reveal{transform:translateY(1.75rem) scale(.97);transition:opacity 1.1s var(--ease),transform 1.1s cubic-bezier(.34,1.4,.64,1);transition-delay:calc(var(--i,0) * 110ms)}
  .hero-fx{animation:drift 26s ease-in-out infinite alternate;translate:0 calc(var(--sy,0) * .12px)}
  .hero-fx::before{animation:wander 18s ease-in-out infinite alternate;translate:0 calc(var(--sy,0) * -.18px)}
  .hero-fx::after{animation:wander 22s ease-in-out -6s infinite alternate-reverse;translate:0 calc(var(--sy,0) * .25px)}
  .about-media::before{translate:0 calc(var(--sy,0) * -.02px)}
  .emblem{animation:float 7s ease-in-out infinite}
  .emblem:not(.emblem--wide) .emblem-ring{animation:wobble 14s ease-in-out infinite alternate}
  .step-num{animation:wobble 6s ease-in-out infinite alternate}
  .card,.step,.shot-frame,.chip{transition:transform .5s cubic-bezier(.34,1.4,.64,1),box-shadow .5s var(--ease)}
  @media (hover:hover){
    .card:hover,.step:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgb(var(--brand-rgb) / .6)}
    .card:hover .chip{transform:scale(1.1) rotate(8deg)}
    .shot-frame:hover{transform:rotate(-1deg) scale(1.02)}
  }
}
@keyframes bloom{from{opacity:0;transform:translateY(1.5rem) scale(.96)}}
@keyframes wander{to{transform:translate(-18%,14%) scale(1.25)}}
@keyframes wobble{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}