@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Outfit:wght@200;300;400;500;600;700&family=Zen+Kaku+Gothic+New:wght@300;400;500;700&family=Bricolage+Grotesque:opsz,wght@12..96,200;12..96,400;12..96,600;12..96,800&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#fbfbfa;
  --bg-warm:#f5f4f0;
  --bg-card:#ffffff;
  --bg-glass:rgba(255,255,255,.72);
  --glass-border:rgba(0,0,0,.06);
  --glass-border-h:rgba(0,0,0,.12);
  --tx:#1a1a1a;
  --tx-2:#5c5c5c;
  --tx-3:#9a9a9a;
  --tx-inv:#fbfbfa;
  --ac:#0d9373;
  --ac-light:#e6f5f0;
  --ac2:#0891b2;
  --warm:#d97706;
  --warm-light:#fef3c7;
  --rose:#be123c;
  --shadow-sm:0 1px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 16px rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:0 12px 40px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.04);
  --fd:'Instrument Serif',serif;
  --fh:'Bricolage Grotesque',sans-serif;
  --fb:'Outfit',sans-serif;
  --fj:'Zen Kaku Gothic New',sans-serif;
  --expo:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

html{overflow-x:hidden;scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--bg);color:var(--tx);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;border:none;background:none;color:inherit;cursor:pointer}
img{display:block}
::selection{background:var(--ac);color:#fff}

/* ══════ CURSOR ══════ */
.cur{position:fixed;pointer-events:none;z-index:99999;border-radius:50%;transform:translate(-50%,-50%)}
.cur-dot{width:8px;height:8px;background:var(--ac);transition:width .3s var(--expo),height .3s var(--expo),background .3s}
.cur-ring{width:44px;height:44px;border:1px solid rgba(13,147,115,.3);transition:width .45s var(--expo),height .45s var(--expo),border-color .3s;z-index:99998}
.cur-dot.on{width:60px;height:60px;background:rgba(13,147,115,.1)}
.cur-ring.on{width:84px;height:84px;border-color:rgba(217,119,6,.35)}
.cur-label{position:fixed;pointer-events:none;z-index:99999;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--tx);background:var(--bg-card);padding:4px 10px;border-radius:20px;box-shadow:var(--shadow-sm);opacity:0;transition:opacity .3s;transform:translate(28px,-50%)}
.cur-label.show{opacity:1}

/* ══════ PROGRESS ══════ */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:100000;
  background:linear-gradient(90deg,var(--ac),var(--ac2),var(--warm));
  background-size:300% 100%;animation:progGrad 4s linear infinite;
  transform-origin:left;transform:scaleX(0)}
@keyframes progGrad{to{background-position:-300% 0}}

/* ══════ PRELOADER ══════ */
.preloader{position:fixed;inset:0;z-index:100001;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:32px;transition:clip-path 1.4s var(--expo);clip-path:inset(0)}
.preloader.bye{clip-path:inset(0 0 100% 0)}
.pre-num{font-family:var(--fd);font-size:clamp(56px,12vw,120px);font-weight:400;font-style:italic;color:var(--ac);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pre-bar{width:160px;height:2px;background:var(--bg-warm);border-radius:2px;overflow:hidden}
.pre-bar span{display:block;height:100%;background:var(--ac);border-radius:2px;transition:width .08s}
.pre-tag{font-size:10px;font-weight:500;letter-spacing:.35em;text-transform:uppercase;color:var(--tx-3)}

/* ══════ HEADER (Glass pill) ══════ */
.hdr{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:9000;padding:12px 32px;display:flex;align-items:center;gap:40px;
  background:var(--bg-glass);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid var(--glass-border);border-radius:100px;box-shadow:var(--shadow-sm);transition:border-color .3s,box-shadow .3s}
.hdr:hover{border-color:var(--glass-border-h);box-shadow:var(--shadow-md)}
.hdr-logo{font-family:var(--fd);font-size:18px;font-style:italic;letter-spacing:.06em;color:var(--ac)}
.hdr-nav{display:flex;gap:28px;list-style:none}
.hdr-nav a{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-2);transition:color .3s;position:relative}
.hdr-nav a:hover{color:var(--tx)}
.hdr-nav a::after{content:'';position:absolute;bottom:-4px;left:50%;width:4px;height:4px;border-radius:50%;background:var(--ac);transform:translateX(-50%) scale(0);transition:transform .4s var(--spring)}
.hdr-nav a:hover::after{transform:translateX(-50%) scale(1)}
.hdr-burger{display:none;width:24px;height:14px;flex-direction:column;justify-content:space-between}
.hdr-burger span{height:1.5px;background:var(--tx);border-radius:1px;transition:all .3s}
.hdr-burger span:last-child{width:60%;margin-left:auto}

/* ══════ HERO ══════ */
.hero{position:relative;width:100%;height:100vh;min-height:800px;overflow:hidden}
.hero-canvas{position:absolute;bottom:0;left:0;width:100%;height:40%;z-index:1;opacity:.5}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:115%;object-fit:cover;object-position:center 15%;will-change:transform;filter:brightness(.92) contrast(1.05) saturate(.95)}
.hero-media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(251,251,250,.15) 0%,transparent 30%),linear-gradient(180deg,transparent 45%,var(--bg) 100%),linear-gradient(90deg,rgba(251,251,250,.5) 0%,transparent 55%)}

.hero-body{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:0 clamp(24px,5vw,56px) 72px;display:grid;grid-template-columns:1fr 320px;align-items:end;gap:40px}
.hero-headline{font-family:var(--fh);font-size:clamp(52px,11vw,150px);font-weight:800;line-height:.88;letter-spacing:-.04em;color:var(--tx)}
.hero-headline .char{display:inline-block;opacity:0;transform:translateY(80px) rotateX(40deg);transition:all .8s var(--expo)}
.hero-headline .char.in{opacity:1;transform:none}
.hero-headline .accent{color:var(--ac)}
.hero-headline .serif{font-family:var(--fd);font-weight:400;font-style:italic;letter-spacing:-.01em}

.hero-aside{padding-bottom:12px}
.hero-tag{font-size:9px;font-weight:600;letter-spacing:.4em;text-transform:uppercase;color:var(--ac);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.hero-tag::before{content:'';width:24px;height:1.5px;background:var(--ac);border-radius:1px}
.hero-desc{font-family:var(--fj);font-size:13px;font-weight:400;color:var(--tx-2);line-height:2.2}

.hero-scroll{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px}
.hero-scroll-txt{font-size:8px;font-weight:600;letter-spacing:.4em;text-transform:uppercase;color:var(--tx-3)}
.hero-scroll-dot{width:4px;height:24px;border-radius:4px;position:relative;overflow:hidden;background:rgba(0,0,0,.08)}
.hero-scroll-dot::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;border-radius:4px;background:var(--ac);animation:sDot 1.8s ease-in-out infinite}
@keyframes sDot{0%{top:-100%}50%{top:100%}100%{top:100%}}

/* ══════ TICKER ══════ */
.ticker{padding:24px 0;border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border);overflow:hidden;user-select:none;background:var(--bg)}
.ticker-track{display:flex;gap:40px;animation:tkSlide 28s linear infinite;width:max-content}
.ticker-w{font-family:var(--fd);font-size:clamp(18px,3vw,36px);font-style:italic;color:var(--tx-3);white-space:nowrap;display:flex;align-items:center;gap:40px}
.ticker-w::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--ac);flex-shrink:0}
@keyframes tkSlide{to{transform:translateX(-50%)}}

/* ══════ BENTO ABOUT ══════ */
.bento{padding:clamp(48px,6vw,100px) clamp(24px,5vw,56px);max-width:1440px;margin:0 auto}
.sec-label{font-size:9px;font-weight:600;letter-spacing:.4em;text-transform:uppercase;color:var(--ac);margin-bottom:12px;display:flex;align-items:center;gap:12px}
.sec-label::before{content:'';width:24px;height:1.5px;background:var(--ac);border-radius:1px}
.sec-heading{font-family:var(--fh);font-size:clamp(28px,5vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:32px;color:var(--tx)}
.bento .sec-heading{text-shadow:2px 0 #ff000030,-2px 0 #00ffff30;animation:glitchText 3s infinite}
@keyframes glitchText{0%,95%,100%{text-shadow:2px 0 #ff000030,-2px 0 #00ffff30;transform:none}96%{text-shadow:-4px 2px #ff000050,4px -2px #00ffff50;transform:skewX(-2deg)}97%{text-shadow:3px -1px #ff000040,-3px 1px #00ffff40;transform:skewX(1deg)}98%{text-shadow:-2px 0 #ff000030,2px 0 #00ffff30;transform:none}}
.sec-heading em{font-family:var(--fd);font-style:italic;font-weight:400;color:var(--ac);letter-spacing:0}

.bento-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(180px,auto);gap:16px;
  perspective:1200px;transform-style:preserve-3d}

.b-card{background:var(--bg-card);border:1px solid var(--glass-border);border-radius:24px;padding:36px 32px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:border-color .4s,box-shadow .4s;
  animation:tremble .15s infinite;transform-origin:bottom center}
.b-card:hover{border-color:var(--glass-border-h);animation:cardFall .6s var(--spring) forwards;z-index:10;box-shadow:0 20px 40px rgba(0,0,0,.2)}
.b-card:nth-child(1){rotate:-1.5deg}
.b-card:nth-child(2){rotate:2deg;translate:0 8px}
.b-card:nth-child(3){rotate:-0.8deg;translate:4px -3px}
.b-card:nth-child(4){rotate:1.2deg;translate:-6px 5px}
.b-card:nth-child(5){rotate:-2.5deg;translate:3px 12px}
.b-card:nth-child(6){rotate:1.8deg;translate:-4px -6px}
.b-card:nth-child(7){rotate:-1deg;translate:8px 4px}
.b-card:nth-child(8){rotate:3deg;translate:-2px 10px}
@keyframes tremble{0%,100%{translate:0 0}25%{translate:1px -1px}50%{translate:-1px 1px}75%{translate:1px 0}}
@keyframes cardFall{0%{rotate:var(--r,0deg);translate:0 0}40%{rotate:calc(var(--r,0deg) + 8deg);translate:0 30px;box-shadow:0 30px 60px rgba(0,0,0,.3)}70%{rotate:calc(var(--r,0deg) - 3deg);translate:0 20px}100%{rotate:calc(var(--r,0deg) + 1deg);translate:0 24px;box-shadow:0 20px 40px rgba(0,0,0,.2)}}
.b-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(13,147,115,.05) 0%,transparent 60%);opacity:0;transition:opacity .5s}
.b-card:hover::before{opacity:1}

.b-hero-card{grid-column:span 8;grid-row:span 2;display:flex;flex-direction:column;justify-content:flex-end;padding:48px 44px;
  background:linear-gradient(135deg,#e6f5f0 0%,#f0faf6 50%,#fef3c7 100%);border:none}
.b-hero-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:24px 24px 0 0;
  background:linear-gradient(90deg,var(--ac),var(--ac2),var(--warm));background-size:300% 100%;animation:progGrad 6s linear infinite}
.b-stat-card{grid-column:span 4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.b-text-card{grid-column:span 4}
.b-wide-card{grid-column:span 6}

.b-card-emoji{font-size:40px;margin-bottom:20px;display:block;transition:transform .5s var(--spring)}
.b-card:hover .b-card-emoji{animation:emojiBounce .6s var(--spring)}
@keyframes emojiBounce{0%{transform:scale(1)}30%{transform:translateY(-12px) scale(1.25) rotate(-8deg)}60%{transform:translateY(-2px) scale(1.05) rotate(3deg)}100%{transform:translateY(-4px) scale(1.15) rotate(-2deg)}}
.b-card-title{font-family:var(--fd);font-size:20px;font-weight:400;font-style:italic;margin-bottom:12px;letter-spacing:-.01em;color:var(--tx)}
.b-card-text{font-family:var(--fj);font-size:13px;font-weight:400;color:var(--tx-2);line-height:2.2}
.b-stat-val{font-family:var(--fd);font-size:56px;font-style:italic;color:var(--ac);line-height:1;margin-bottom:8px;
  text-shadow:0 0 30px var(--ac),0 0 60px rgba(13,147,115,.3),0 4px 8px rgba(0,0,0,.15)}
.b-stat-lbl{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-3)}
.b-hero-card .b-big-text{font-family:var(--fj);font-size:15px;font-weight:400;color:var(--tx-2);line-height:2.4;max-width:520px}

/* ══════ BENTO ANIMATIONS ══════ */

/* Hero card 3D tilt */
.b-hero-card{perspective:800px;transform-style:preserve-3d;will-change:transform}
.b-hero-card .b-card-emoji{animation:heroEmojiFloat 3s ease-in-out infinite}
@keyframes heroEmojiFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(3deg)}}

/* Text deblur */
.b-big-text .deblur-char{display:inline;opacity:0;filter:blur(4px);transition:opacity .5s,filter .5s}
.b-big-text .deblur-char.in{opacity:1;filter:blur(0)}

/* Stat card elastic hover */
.b-stat-card{will-change:transform}
.b-stat-card:hover{transform:scale(1.08) translateY(-5px);animation:statWobble .5s var(--spring)}
.b-stat-card:hover .b-stat-val{transform:scale(1.12);text-shadow:0 0 24px var(--ac),0 0 48px rgba(13,147,115,.2)}
@keyframes statWobble{0%{transform:scale(1.06) rotate(0)}25%{transform:scale(1.06) rotate(-2deg)}50%{transform:scale(1.06) rotate(1.5deg)}100%{transform:scale(1.06) rotate(0)}}
.b-stat-val{font-variant-numeric:tabular-nums;transition:transform .5s var(--spring),text-shadow .6s}
.b-stat-val.glow{text-shadow:0 0 20px var(--ac),0 0 40px rgba(13,147,115,.3)}
.b-stat-lbl{position:relative}
.b-stat-lbl::after{content:'';position:absolute;bottom:-4px;left:50%;width:0;height:1.5px;background:var(--ac);border-radius:1px;transform:translateX(-50%);transition:width .5s var(--expo)}
.b-stat-card:hover .b-stat-lbl::after{width:100%}

/* Wide card magnetic */
.b-wide-card{will-change:transform;transition:border-color .4s,transform .5s var(--spring),box-shadow .4s}

/* Wide card gradient border on hover */
.b-wide-card::after{content:'';position:absolute;inset:-1px;border-radius:24px;padding:1px;
  background:conic-gradient(from var(--border-angle,0deg),var(--ac),var(--ac2),var(--warm),var(--ac));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none}
.b-wide-card:hover::after{opacity:1;animation:borderSpin 3s linear infinite}
@keyframes borderSpin{to{--border-angle:360deg}}
@property --border-angle{syntax:'<angle>';initial-value:0deg;inherits:false}

/* Sun card */
[data-theme="sun"]:hover .b-card-emoji{animation:sunSpin 2s linear infinite}
[data-theme="sun"]::before{background:radial-gradient(circle at 15% 20%,rgba(217,119,6,.1),transparent 60%)!important;opacity:0;transition:opacity .5s}
[data-theme="sun"]:hover::before{opacity:1!important}
@keyframes sunSpin{to{transform:rotate(360deg)}}

/* Water card */
[data-theme="water"]:hover .b-card-emoji{animation:waterDrip .6s var(--spring)}
[data-theme="water"] .b-card-emoji{position:relative}
@keyframes waterDrip{0%{transform:translateY(0)}30%{transform:translateY(-15px)}60%{transform:translateY(2px) scaleX(1.2) scaleY(.8)}100%{transform:translateY(0) scale(1)}}
[data-theme="water"]::before{background:radial-gradient(circle at 10% 25%,rgba(8,145,178,.08),transparent 50%)!important}

/* Leaf card */
[data-theme="leaf"] .b-card-emoji{animation:leafSway 4s ease-in-out infinite}
@keyframes leafSway{0%,100%{transform:rotate(-5deg) translateX(-2px)}50%{transform:rotate(5deg) translateX(2px)}}
[data-theme="leaf"]:hover .b-card-text{color:var(--tx);transition:color .5s}

/* Moon card */
[data-theme="moon"] .b-card-emoji{animation:moonRock 3s ease-in-out infinite}
@keyframes moonRock{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
[data-theme="moon"]::before{background:rgba(15,23,42,.0)!important;transition:background .6s!important}
[data-theme="moon"]:hover::before{background:rgba(15,23,42,.04)!important;opacity:1!important}

/* Moon sparkles */
.sparkle{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--ac);pointer-events:none;opacity:0}
[data-theme="moon"]:hover .sparkle{animation:twinkle 1.5s ease-in-out infinite}
.s1{top:20%;right:15%;animation-delay:0s!important}
.s2{top:40%;right:25%;animation-delay:.5s!important}
.s3{top:15%;right:35%;animation-delay:1s!important}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}

/* Card click hint */
.b-card-hint{position:absolute;bottom:16px;right:20px;font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ac);
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--expo);pointer-events:none}
.b-card:hover .b-card-hint{opacity:.6;transform:translateY(0)}
.b-card{cursor:pointer}

/* ══════ BENTO MODAL ══════ */
.bento-modal{position:fixed;inset:0;z-index:10000;pointer-events:none;opacity:0;transition:opacity .1s}
.bento-modal.open{pointer-events:all;opacity:1}
.bento-modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;transition:opacity .5s}
.bento-modal.open .bento-modal-bg{opacity:1}
.bento-modal-content{position:absolute;border-radius:24px;overflow:hidden;overflow-y:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 48px;
  transition:all .65s cubic-bezier(.16,1,.3,1);box-shadow:0 24px 80px rgba(0,0,0,.2)}
.bento-modal-content.expanded{top:5vh!important;left:5vw!important;width:90vw!important;height:90vh!important;border-radius:28px}
.bento-modal-close{position:fixed;top:3vh;right:3vw;z-index:10001;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.15);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);color:#fff;font-size:18px;cursor:pointer;
  opacity:0;transform:scale(.8);transition:opacity .3s .3s,transform .3s .3s var(--spring);
  display:flex;align-items:center;justify-content:center}
.bento-modal.open .bento-modal-close{opacity:1;transform:scale(1)}
.bento-modal-close:hover{background:rgba(255,255,255,.25);transform:scale(1.1)}

/* Modal scene themes */
.modal-scene{position:absolute;inset:0;pointer-events:none;overflow:hidden}

/* Scene: hero */
.scene-hero{background:linear-gradient(135deg,#e6f5f0,#f0faf6 50%,#fef3c7)}
.scene-hero .modal-scene::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 40%,rgba(13,147,115,.08),transparent 60%)}

/* Scene: sun */
.scene-sun{background:linear-gradient(180deg,#fef3c7,#fbbf24 60%,#f59e0b)}
.scene-sun .modal-scene::after{content:'';position:absolute;top:-50%;left:50%;width:100vw;height:100vw;transform:translateX(-50%);
  background:conic-gradient(from 0deg,rgba(255,255,255,.15),transparent 10%,rgba(255,255,255,.15) 20%,transparent 30%);
  border-radius:50%;animation:sunRaysSpin 12s linear infinite}
@keyframes sunRaysSpin{to{transform:translateX(-50%) rotate(360deg)}}

/* Scene: water */
.scene-water{background:linear-gradient(180deg,#e0f7fa,#0891b2 60%,#065f84)}

/* Scene: leaf */
.scene-leaf{background:linear-gradient(180deg,#ecfdf5,#6ee7b7 50%,#059669)}

/* Scene: moon */
.scene-moon{background:linear-gradient(180deg,#0f172a,#1e293b 60%,#0f172a)}
.scene-moon .modal-scene::before{content:'';position:absolute;inset:0;
  background:radial-gradient(1px 1px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 25% 45%,#fff,transparent),
  radial-gradient(1px 1px at 40% 15%,#fff,transparent),radial-gradient(1px 1px at 55% 70%,#fff,transparent),
  radial-gradient(1px 1px at 70% 30%,#fff,transparent),radial-gradient(1px 1px at 85% 55%,#fff,transparent),
  radial-gradient(1px 1px at 15% 80%,#fff,transparent),radial-gradient(1px 1px at 60% 90%,#fff,transparent),
  radial-gradient(1px 1px at 90% 10%,#fff,transparent),radial-gradient(1px 1px at 35% 60%,#fff,transparent),
  radial-gradient(1.5px 1.5px at 20% 35%,#fff,transparent),radial-gradient(1.5px 1.5px at 75% 85%,#fff,transparent);
  animation:starTwinkle 3s ease-in-out infinite alternate}
@keyframes starTwinkle{0%{opacity:.5}100%{opacity:1}}
.scene-moon .shooting-star{position:absolute;width:80px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.8),transparent);
  transform:rotate(-35deg);animation:shootingStar 4s ease-in infinite}
@keyframes shootingStar{0%{opacity:0;transform:rotate(-35deg) translateX(-100px)}10%{opacity:1}30%{opacity:0;transform:rotate(-35deg) translateX(200px)}100%{opacity:0}}

/* Scene: stat cards */
.scene-adventures{background:linear-gradient(135deg,#0f172a,#1e1b4b,#312e81)}
.scene-swimdays{background:linear-gradient(135deg,#e0f7fa,#67e8f9,#0891b2)}
.scene-fluffy{background:linear-gradient(135deg,#fdf2f8,#fbcfe8,#f472b6)}

/* Modal inner content */
.modal-title{font-family:var(--fh);font-size:clamp(32px,6vw,64px);font-weight:800;letter-spacing:-.03em;margin-bottom:24px;
  opacity:0;transform:translateY(30px);transition:opacity .6s .2s,transform .6s .2s var(--expo);position:relative;z-index:1}
.modal-text{font-family:var(--fj);font-size:clamp(14px,2vw,20px);font-weight:400;line-height:2.2;max-width:600px;text-align:center;
  opacity:0;transform:translateY(20px);transition:opacity .6s .35s,transform .6s .35s var(--expo);position:relative;z-index:1}
.modal-emoji-big{font-size:clamp(60px,12vw,120px);opacity:0;transform:scale(.5);
  transition:opacity .5s .1s,transform .5s .1s var(--spring);position:relative;z-index:1;margin-bottom:20px}
.bento-modal-content.expanded .modal-title,
.bento-modal-content.expanded .modal-text,
.bento-modal-content.expanded .modal-emoji-big{opacity:1;transform:none}

/* Dark scene text */
.scene-moon .modal-title,.scene-moon .modal-text,.scene-adventures .modal-title,.scene-adventures .modal-text{color:#fff}
.scene-sun .modal-title,.scene-sun .modal-text{color:#78350f}
.scene-water .modal-title,.scene-water .modal-text{color:#fff}
.scene-leaf .modal-title,.scene-leaf .modal-text{color:#064e3b}
.scene-fluffy .modal-title,.scene-fluffy .modal-text{color:#831843}
.scene-swimdays .modal-title,.scene-swimdays .modal-text{color:#164e63}
.scene-hero .modal-title{color:var(--tx)}.scene-hero .modal-text{color:var(--tx-2)}

/* Floating emojis in modal */
.float-emoji{position:absolute;font-size:28px;pointer-events:none;animation:floatUp 4s ease-in-out infinite;z-index:0}
@keyframes floatUp{0%{transform:translateY(0) rotate(0);opacity:.7}50%{transform:translateY(-30px) rotate(10deg);opacity:1}100%{transform:translateY(0) rotate(-5deg);opacity:.7}}

/* Bubble in water scene */
.scene-bubble{position:absolute;border-radius:50%;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);
  animation:bubbleRise linear infinite}
@keyframes bubbleRise{0%{transform:translateY(0) translateX(0);opacity:.7}50%{transform:translateY(-40vh) translateX(10px);opacity:.5}100%{transform:translateY(-90vh) translateX(-5px);opacity:0}}

/* Leaf drift */
.drift-leaf{position:absolute;font-size:20px;pointer-events:none;animation:leafDrift linear infinite}
@keyframes leafDrift{0%{transform:translateY(-20px) translateX(0) rotate(0);opacity:.8}100%{transform:translateY(90vh) translateX(60px) rotate(360deg);opacity:0}}

/* Stat scene big value */
.modal-stat-big{font-family:var(--fd);font-size:clamp(80px,18vw,200px);font-style:italic;line-height:1;
  opacity:0;transform:scale(.3);transition:opacity .6s .15s,transform .8s .15s var(--spring);position:relative;z-index:1;margin-bottom:16px}
.bento-modal-content.expanded .modal-stat-big{opacity:1;transform:scale(1)}
.scene-adventures .modal-stat-big{color:rgba(255,255,255,.9)}
.scene-swimdays .modal-stat-big{color:rgba(8,145,178,.8)}
.scene-fluffy .modal-stat-big{color:rgba(244,114,182,.8)}

/* Orbiting emojis for stat scenes */
.orbit-emoji{position:absolute;font-size:24px;animation:orbit 6s linear infinite;pointer-events:none}
@keyframes orbit{to{transform:rotate(360deg) translateX(80px) rotate(-360deg)}}

/* Particle canvas */
.bento-particles{position:fixed;inset:0;z-index:10002;pointer-events:none}

/* Modal responsive */
@media(max-width:768px){
  .bento-modal-content.expanded{top:0!important;left:0!important;width:100vw!important;height:100vh!important;border-radius:0}
  .bento-modal-close{top:12px;right:12px}
}

/* ══════ 3D CAROUSEL WORKS ══════ */
.carousel-sec{padding:clamp(48px,6vw,80px) clamp(24px,5vw,56px);background:var(--bg-warm);overflow:clip}
.carousel-header{max-width:1440px;margin:0 auto 32px;display:flex;justify-content:space-between;align-items:flex-end}
.carousel-counter{font-family:var(--fd);font-size:14px;font-style:italic;color:var(--tx-3);letter-spacing:.1em}
.carousel-viewport{position:relative;height:clamp(380px,50vh,520px);perspective:1400px;cursor:grab;user-select:none;overflow:visible}
.carousel-viewport:active{cursor:grabbing}
.carousel-scene{position:absolute;width:220px;height:100%;left:50%;top:0;transform-style:preserve-3d;transition:transform .3s ease-out;margin-left:-110px}
.carousel-hint{text-align:center;margin-top:20px;font-size:9px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--tx-3)}

.c-card{position:absolute;width:220px;height:clamp(280px,38vh,360px);border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow-md);backface-visibility:hidden;transition:filter .4s,opacity .4s}
.c-card-bg{position:absolute;inset:0}
.c-card-bg img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--expo)}
.c-card:hover .c-card-bg img{transform:scale(1.06)}
.c-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(30,30,30,.8) 0%,rgba(30,30,30,.1) 40%,transparent 65%);z-index:1}
.c-card-info{position:absolute;bottom:0;left:0;right:0;padding:24px;z-index:2}
.c-card-cat{font-size:8px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--ac);margin-bottom:8px;
  background:rgba(255,255,255,.15);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:3px 8px;border-radius:20px;display:inline-block}
.c-card-name{font-family:var(--fh);font-size:18px;font-weight:700;letter-spacing:-.02em;color:#fff}
.c-card-num{position:absolute;top:16px;right:20px;z-index:2;font-family:var(--fd);font-size:48px;font-style:italic;color:rgba(255,255,255,.12);line-height:1}

/* ══════ QUOTE ══════ */
.quote{padding:clamp(56px,6vw,100px) clamp(24px,5vw,56px);text-align:center;position:relative;background:var(--bg)}
.quote-bg-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--fh);font-size:clamp(100px,20vw,260px);font-weight:800;color:rgba(0,0,0,.025);letter-spacing:-.06em;white-space:nowrap;pointer-events:none;user-select:none}
.quote-mark{font-family:var(--fd);font-size:100px;color:var(--ac);opacity:.15;line-height:.5;margin-bottom:16px}
.quote-text{font-family:var(--fd);font-size:clamp(22px,4.5vw,52px);font-weight:400;font-style:italic;line-height:1.55;letter-spacing:-.01em;max-width:800px;margin:0 auto;position:relative;z-index:1;color:var(--tx)}
.quote-text .hl{font-style:normal;color:var(--ac)}
.quote-attr{margin-top:36px;font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--tx-3);position:relative;z-index:1}

/* ══════ SKILLS (Pills) ══════ */
.skills-sec{padding:clamp(48px,6vw,80px) clamp(24px,5vw,56px);max-width:1440px;margin:0 auto}
.skills-head{margin-bottom:48px}
.skills-wrap{display:flex;flex-wrap:wrap;gap:12px}
.skill-pill{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border:1px solid var(--glass-border);border-radius:100px;background:var(--bg-card);
  box-shadow:var(--shadow-sm);font-size:14px;font-weight:400;transition:all .4s var(--expo);position:relative;overflow:hidden}
.skill-pill::before{content:'';position:absolute;inset:0;border-radius:100px;background:linear-gradient(135deg,var(--ac-light),#e0f7fa);opacity:0;transition:opacity .4s}
.skill-pill:hover::before{opacity:1}
.skill-pill:hover{border-color:var(--ac);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.skill-pill .pill-emoji{font-size:18px;position:relative;z-index:1}
.skill-pill .pill-name{position:relative;z-index:1;letter-spacing:.02em;color:var(--tx)}
.skill-pill .pill-sub{font-family:var(--fj);font-size:11px;color:var(--tx-3);margin-left:4px;position:relative;z-index:1}

/* ══════ OCEAN GRADIENT ══════ */
.ocean-gradient{height:clamp(200px,30vh,400px);background:linear-gradient(135deg,#0d9373,#67e8f9,#3b82f6,#f5c778,#0d9373);background-size:400% 400%;animation:oceanShift 8s ease infinite;position:relative;overflow:hidden}
@keyframes oceanShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.ocean-cat{position:absolute;opacity:.7;animation:oceanFloat 6s ease-in-out infinite}
.ocean-cat.c1{width:120px;top:15%;left:10%;animation-delay:0s}
.ocean-cat.c2{width:90px;top:40%;left:55%;animation-delay:-2s}
.ocean-cat.c3{width:70px;top:20%;left:80%;animation-delay:-4s;transform:scaleX(-1)}
@keyframes oceanFloat{0%,100%{transform:translate(0,0)}25%{transform:translate(15px,-10px)}50%{transform:translate(30px,0)}75%{transform:translate(15px,10px)}}
.ocean-wave-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ══════ CREATIVE CODING ══════ */
.mouse-bubble{position:fixed;pointer-events:none;z-index:99997;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.6),rgba(13,147,115,.15));border:1px solid rgba(255,255,255,.3);animation:bubbleUp 1.2s ease-out forwards}
@keyframes bubbleUp{0%{opacity:.8;transform:scale(1) translateY(0)}100%{opacity:0;transform:scale(.3) translateY(-80px)}}
.click-ripple{position:fixed;pointer-events:none;z-index:99997;border-radius:50%;border:2px solid rgba(13,147,115,.4);animation:rippleOut .8s ease-out forwards}
@keyframes rippleOut{0%{width:0;height:0;opacity:1;transform:translate(-50%,-50%) scale(0)}100%{width:120px;height:120px;opacity:0;transform:translate(-50%,-50%) scale(1)}}
.noise-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.4}
.noise-sec{position:relative;height:clamp(150px,20vh,300px);overflow:hidden}

/* ══════ PHOTO BOOTH ══════ */
.photo-btn{position:fixed;left:24px;bottom:24px;z-index:9998;width:48px;height:48px;border-radius:50%;border:1px solid var(--glass-border);
  background:var(--bg-card);box-shadow:var(--shadow-md);cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;
  transition:transform .3s var(--spring),box-shadow .3s}
.photo-btn:hover{transform:scale(1.1);box-shadow:var(--shadow-lg)}
.photo-overlay{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .35s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.photo-overlay.show{opacity:1;pointer-events:auto}
.photo-frame{background:#fff;padding:16px 16px 24px;box-shadow:0 8px 40px rgba(0,0,0,.25);text-align:center;
  transform:scale(.85);transition:transform .4s var(--spring)}
.photo-overlay.show .photo-frame{transform:scale(1)}
.photo-inner{width:240px;height:300px;background:#1d4ed8;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.photo-inner img{width:85%;height:auto;object-fit:contain;display:block}
.photo-label{margin-top:12px;font-family:var(--fj);font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--tx-2)}

/* ══════ CHAT WIDGET ══════ */
.chat-widget{position:fixed;right:24px;bottom:24px;z-index:9998}
.chat-toggle{width:56px;height:56px;border-radius:50%;border:1px solid var(--glass-border);background:var(--bg-card);
  box-shadow:var(--shadow-md);cursor:pointer;padding:4px;overflow:hidden;transition:transform .3s var(--spring),box-shadow .3s}
.chat-toggle img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.chat-toggle:hover{transform:scale(1.1);box-shadow:var(--shadow-lg)}
.chat-window{position:absolute;bottom:68px;right:0;width:320px;height:420px;border-radius:20px;background:var(--bg-card);
  border:1px solid var(--glass-border);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;
  transform:scale(0);opacity:0;transform-origin:bottom right;transition:transform .35s var(--spring),opacity .25s;pointer-events:none}
.chat-window.open{transform:scale(1);opacity:1;pointer-events:auto}
.chat-header{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--ac);color:#fff;flex-shrink:0}
.chat-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.3)}
.chat-header span{font-family:var(--fh);font-size:14px;font-weight:600;flex:1}
.chat-close{background:none;border:none;color:#fff;font-size:16px;cursor:pointer;opacity:.7;transition:opacity .2s}
.chat-close:hover{opacity:1}
.chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.chat-msg{max-width:80%;padding:10px 14px;border-radius:16px;font-family:var(--fj);font-size:13px;line-height:1.6;animation:chatPop .3s var(--spring)}
.chat-msg.bot{align-self:flex-start;background:var(--ac-light);color:var(--tx);border-bottom-left-radius:4px}
.chat-msg.user{align-self:flex-end;background:var(--ac);color:#fff;border-bottom-right-radius:4px}
@keyframes chatPop{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
.chat-typing{align-self:flex-start;padding:10px 14px;background:var(--ac-light);border-radius:16px;border-bottom-left-radius:4px;display:flex;gap:4px}
.chat-typing span{width:6px;height:6px;border-radius:50%;background:var(--tx-3);animation:typeDot .8s ease-in-out infinite}
.chat-typing span:nth-child(2){animation-delay:.15s}
.chat-typing span:nth-child(3){animation-delay:.3s}
@keyframes typeDot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.chat-input-wrap{display:flex;gap:8px;padding:12px;border-top:1px solid var(--glass-border);flex-shrink:0}
.chat-input{flex:1;border:1px solid var(--glass-border);border-radius:20px;padding:8px 16px;font-family:var(--fj);font-size:13px;
  outline:none;transition:border-color .3s;background:var(--bg)}
.chat-input:focus{border-color:var(--ac)}
.chat-send{width:36px;height:36px;border-radius:50%;border:none;background:var(--ac);color:#fff;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .2s var(--spring)}
.chat-send:hover{transform:scale(1.1)}
@media(max-width:768px){.chat-window{width:calc(100vw - 48px);right:-12px}}

/* ══════ EXIT INTENT ══════ */
.exit-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .4s}
.exit-modal.show{opacity:1;pointer-events:auto}
.exit-modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.exit-modal-card{position:relative;background:var(--bg-card);border-radius:24px;padding:40px 36px 32px;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.2);max-width:340px;width:90%;
  transform:scale(.8) translateY(30px);transition:transform .45s var(--spring)}
.exit-modal.show .exit-modal-card{transform:scale(1) translateY(0)}
.exit-puppet{width:120px;height:auto;margin:-80px auto 16px;display:block;filter:drop-shadow(0 8px 20px rgba(0,0,0,.15));
  animation:exitBounce .6s var(--spring) .2s both}
@keyframes exitBounce{from{opacity:0;transform:translateY(-40px) scale(.7)}to{opacity:1;transform:translateY(0) scale(1)}}
.exit-text{font-family:var(--fj);font-size:18px;font-weight:500;line-height:1.8;color:var(--tx);margin-bottom:24px}
.exit-stay{display:inline-block;padding:14px 36px;border:none;border-radius:100px;background:var(--ac);color:#fff;
  font-family:var(--fh);font-size:14px;font-weight:600;letter-spacing:.05em;cursor:pointer;
  transition:transform .3s var(--spring),box-shadow .3s}
.exit-stay:hover{transform:scale(1.05);box-shadow:0 4px 20px rgba(13,147,115,.3)}
.exit-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:18px;color:var(--tx-3);cursor:pointer;
  transition:color .2s}
.exit-close:hover{color:var(--tx)}

/* ══════ MISC GALLERY ══════ */
.misc-sec{padding:clamp(48px,6vw,80px) clamp(24px,5vw,56px);max-width:1440px;margin:0 auto}
.misc-grid{columns:3;column-gap:16px}
.misc-item{break-inside:avoid;margin-bottom:16px;border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .5s var(--expo),box-shadow .4s;cursor:pointer}
.misc-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.misc-item img{width:100%;display:block;transition:transform .6s var(--expo)}
.misc-item:hover img{transform:scale(1.03)}

/* ══════ CONTACT ══════ */
.cta{padding:clamp(64px,8vw,120px) clamp(24px,5vw,56px);text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-warm) 100%)}
.cta-circles{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.cta-ring{position:absolute;border-radius:50%;border:1px solid rgba(0,0,0,.04);animation:ringPulse 10s ease-in-out infinite}
.cta-ring:nth-child(1){width:800px;height:800px}
.cta-ring:nth-child(2){width:560px;height:560px;animation-delay:1.5s}
.cta-ring:nth-child(3){width:320px;height:320px;animation-delay:3s}
.cta-ring:nth-child(4){width:120px;height:120px;animation-delay:4.5s}
@keyframes ringPulse{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.05);opacity:.8}}

.cta-inner{position:relative;z-index:1}
.cta-heading{font-family:var(--fh);font-size:clamp(48px,10vw,130px);font-weight:800;line-height:.9;letter-spacing:-.04em;margin-bottom:28px;color:var(--tx)}
.cta-heading em{font-family:var(--fd);font-style:italic;font-weight:400;color:var(--ac)}
.cta-desc{font-family:var(--fj);font-size:14px;font-weight:400;color:var(--tx-2);line-height:2.2;max-width:400px;margin:0 auto 52px}

.mag-btn-wrap{display:inline-block;position:relative}
.mag-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--fh);font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  background:var(--ac);padding:22px 56px;border-radius:100px;position:relative;overflow:hidden;transition:transform .35s var(--expo),box-shadow .35s}
.mag-btn:hover{box-shadow:0 8px 48px rgba(13,147,115,.25)}
.mag-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--ac),var(--ac2));opacity:0;transition:opacity .4s}
.mag-btn:hover::before{opacity:1}
.mag-btn span{position:relative;z-index:1}

.cta-social{margin-top:64px;display:flex;justify-content:center;gap:40px}
.soc-link{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-3);position:relative;transition:color .3s}
.soc-link:hover{color:var(--tx)}
.soc-link::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1.5px;background:var(--ac);border-radius:1px;transition:width .5s var(--expo)}
.soc-link:hover::after{width:100%}

/* ══════ FOOTER ══════ */
.ftr{padding:28px clamp(24px,5vw,56px);border-top:1px solid var(--glass-border);display:flex;justify-content:space-between;align-items:center;max-width:1440px;margin:0 auto;background:var(--bg)}
.ftr-brand{font-family:var(--fd);font-size:14px;font-style:italic;color:var(--tx-3)}
.ftr-copy{font-size:10px;color:var(--tx-3);letter-spacing:.1em}
.ftr-top{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-3);transition:color .3s}
.ftr-top:hover{color:var(--ac)}

/* ══════ PUPPET (Character) ══════ */
.quote-puppet{position:absolute;right:clamp(24px,8vw,120px);bottom:-20px;height:clamp(140px,18vw,220px);z-index:2;
  transform:rotate(5deg);filter:drop-shadow(0 6px 20px rgba(0,0,0,.1));pointer-events:none}
.quote-puppet.in{transform:rotate(5deg)}

.cta-puppet{height:clamp(120px,16vw,200px);margin:32px auto 0;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.1));animation:puppetFloat 3s ease-in-out infinite}
@keyframes puppetFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}}

/* ══════ WALKING PUPPET ══════ */
.walking-puppet{position:fixed;bottom:12px;z-index:8999;pointer-events:none;
  animation:walkAcross 20s linear infinite}
.walking-puppet img{height:90px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.15));
  animation:walkBounce .5s ease-in-out infinite}
@keyframes walkAcross{
  0%{left:-100px;transform:scaleX(1)}
  49.9%{left:calc(100vw + 10px);transform:scaleX(1)}
  50%{left:calc(100vw + 10px);transform:scaleX(-1)}
  99.9%{left:-100px;transform:scaleX(-1)}
  100%{left:-100px;transform:scaleX(1)}
}
@keyframes walkBounce{0%,100%{margin-bottom:0}50%{margin-bottom:6px}}

.puppet-bubble{position:absolute;top:-52px;left:50%;transform:translateX(-50%);
  background:var(--bg-card);color:var(--tx);font-family:var(--fj);font-size:12px;font-weight:500;
  padding:8px 16px;border-radius:16px;white-space:nowrap;
  box-shadow:var(--shadow-md);opacity:0;transition:opacity .4s;pointer-events:none}
.puppet-bubble::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--bg-card)}
.puppet-bubble.show{opacity:1}

.walking-puppet-2{animation:walkAcross 15s linear infinite;animation-delay:-7s}
.walking-puppet-2 img{height:80px}

.walking-puppet-3{animation:walkAcross 18s linear infinite;animation-delay:-4s}
.walking-puppet-3 img{height:85px}

.walking-puppet-4{animation:walkAcross 22s linear infinite;animation-delay:-12s}
.walking-puppet-4 img{height:75px}

/* ══════ REVEAL ══════ */
.rv{opacity:0;transform:translateY(44px);transition:opacity .9s var(--expo),transform .9s var(--expo)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}

/* ══════ RESPONSIVE ══════ */
@media(max-width:1100px){
  .b-hero-card{grid-column:span 12}
  .b-stat-card{grid-column:span 4}
  .b-text-card,.b-wide-card{grid-column:span 6}
}
@media(max-width:768px){
  .hdr-nav{display:none}.hdr-burger{display:flex}
  .hero{min-height:100svh;min-height:100vh}
  .hero-media img{object-position:center 20%;height:100%}
  .hero-body{grid-template-columns:1fr;gap:16px;padding:0 24px 100px}
  .hero-headline{font-size:clamp(44px,14vw,80px)}
  .hero-desc{font-size:12px}
  .hero-desc br{display:none}
  .hero-aside{padding-bottom:0}
  .bento-grid{grid-template-columns:1fr}
  .b-hero-card,.b-stat-card,.b-text-card,.b-wide-card{grid-column:span 1}
  .carousel-scene{width:220px;margin-left:-110px}
  .c-card{width:220px;height:300px}
  .misc-grid{columns:2}
  .cta-social{flex-direction:column;gap:20px}
  .ftr{flex-direction:column;gap:14px;text-align:center}
  .walking-puppet img{height:60px}
  .walking-puppet-2 img{height:50px}
  .walking-puppet-3 img{height:55px}
  .walking-puppet-4 img{height:48px}
  .puppet-bubble{font-size:10px;padding:6px 12px;top:-42px}
  .quote-puppet{height:100px;right:16px;bottom:-10px}
  .cta-puppet{height:100px}
  .cur,.cur-dot,.cur-ring,.cur-label{display:none!important}
  .skills-wrap{gap:8px}
  .skill-pill{padding:12px 20px;font-size:12px}
}
@media(max-width:480px){.b-stat-card{grid-column:span 1}.misc-grid{columns:1}}