/* ItundaFace Showcase — TossFace-inspired product experience
   Original Itunda implementation: same level of discipline and storytelling,
   never copied TossFace artwork or source styling. */
:root{
  --premium-max:1200px;
  --premium-ease:cubic-bezier(.2,.8,.2,1);
  --premium-hairline:color-mix(in srgb,var(--ink) 10%,transparent);
  --premium-blue:#7472F4;
}
*{box-sizing:border-box}
html{scroll-padding-top:72px;scroll-behavior:smooth}
body{letter-spacing:-.02em;-webkit-font-smoothing:antialiased;background:var(--bg)}
body:before{display:none}
.nav{height:72px;padding:0 max(24px,calc((100vw - var(--premium-max))/2));background:rgba(255,255,255,.86);border:0;box-shadow:none;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:background .3s,height .35s var(--premium-ease)}
:root[data-theme=dark] .nav{background:rgba(17,17,20,.86)}
.nav.scrolled{height:64px;background:rgba(255,255,255,.94);box-shadow:0 1px 0 rgba(0,0,0,.05)}
:root[data-theme=dark] .nav.scrolled{background:rgba(17,17,20,.94)}
.brand{font-size:20px;font-weight:800;letter-spacing:-.055em}.brand span{color:var(--premium-blue)}
.navlinks{gap:28px}.navlinks a{font-size:13px;font-weight:600;color:color-mix(in srgb,var(--ink) 62%,transparent);transition:color .2s}.navlinks a:hover{color:var(--ink)}
.tools{gap:4px}.tool{height:34px;padding:0 12px;border:0;background:transparent;font-size:12px;font-weight:650}.tool:hover{background:var(--soft)}
.hero{min-height:100svh;padding:150px 24px 80px;background:#fff;overflow:hidden;text-align:center}
:root[data-theme=dark] .hero{background:#111114}
.hero:before{display:none}
.hero-inner{width:min(1040px,100%);margin:auto}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--premium-blue)}
h1{font-size:clamp(58px,9vw,132px);font-weight:800;line-height:.9;letter-spacing:-.095em;max-width:1000px;margin:24px auto 0}
h1 span{display:block;color:var(--premium-blue)}
.hero-copy{font-size:19px;line-height:1.6;max-width:600px;margin:30px auto 0;color:color-mix(in srgb,var(--ink) 66%,transparent)}
.hero-actions{justify-content:center;margin-top:32px}.btn{min-height:48px;padding:0 21px;border-radius:14px;font-size:14px;font-weight:700;transition:transform .25s var(--premium-ease),box-shadow .25s}.btn:hover{transform:translateY(-2px)}.primary{background:var(--ink);box-shadow:none}.secondary{background:#f3f3f6}
.hero-orbit{height:min(560px,55vw);min-height:360px;margin:50px auto 0;position:relative;max-width:900px}.hero-ring{width:min(560px,58vw);top:48%;opacity:.32}.hero-face{width:min(330px,34vw);height:min(330px,34vw);filter:drop-shadow(0 34px 45px rgba(44,40,90,.18))}.hero-dot{display:none}
section{padding:150px 24px}.inner{width:min(var(--premium-max),100%);margin:auto}.title{font-size:clamp(48px,6.5vw,86px);line-height:.95;letter-spacing:-.085em;font-weight:800}.copy{font-size:18px;line-height:1.7;color:color-mix(in srgb,var(--ink) 66%,transparent)}
.principles{background:#f7f7f8}.principle-grid{margin-top:80px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:0;border-top:1px solid #ddd;border-bottom:1px solid #ddd;border-radius:0}.principle{min-height:330px;padding:38px 36px 38px 0;border-right:1px solid #ddd;border-radius:0;background:transparent!important}.principle:nth-child(n+2){padding-left:36px}.principle:last-child{border-right:0}.num{font-size:11px;font-weight:750;letter-spacing:.12em;color:var(--premium-blue)}.principle h3{margin-top:100px;font-size:30px;line-height:1.05;letter-spacing:-.065em}.principle p{font-size:14px;line-height:1.65;max-width:270px;color:#707078}
.demo{padding:160px 24px 180px;background:#111114;color:#fff}.demo .title{max-width:900px;margin:auto;color:#fff}.demo .copy{color:rgba(255,255,255,.62)}
.stage{margin:80px auto 0;width:min(1120px,100%);min-height:720px;border-radius:0;background:radial-gradient(circle at 50% 43%,#2b2850 0,#17161d 39%,#101014 72%);box-shadow:none;border:1px solid rgba(255,255,255,.09);overflow:hidden}.stage-face{width:340px;height:340px;filter:drop-shadow(0 45px 50px rgba(0,0,0,.55))}.stage-glow{width:560px;height:560px;opacity:.16}.stage-ui{bottom:30px}.picker{top:26px;gap:8px;justify-content:center}.pick{height:38px;padding:0 14px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:12px;color:rgba(255,255,255,.62)}.pick.active{background:#fff;color:#111;border-color:#fff;box-shadow:none}
.phone-section{background:#fff}.phone-layout{gap:130px;align-items:center}.phone-copy h3{font-size:clamp(48px,5.5vw,76px);line-height:.95;letter-spacing:-.085em}.phone-copy p{font-size:18px;line-height:1.7;color:#707078}.phone{box-shadow:0 35px 90px rgba(10,10,18,.14),inset 0 0 0 1px #dadade;border-radius:38px;transition:transform .6s var(--premium-ease)}.phone:hover{transform:translateY(-8px) rotateY(-2deg)}
.agent{background:#f7f7f8}.agent-grid{gap:80px}.agent-visual{min-height:610px;border-radius:0;padding:56px;background:#111114}.agent-visual h3{font-size:clamp(52px,5.5vw,80px);line-height:.95;letter-spacing:-.09em;color:#fff}.agent-visual p{color:rgba(255,255,255,.62)}.agent-step{border-radius:0;background:transparent;padding:30px 0;border:0;border-bottom:1px solid #ddd;transition:none}.agent-step:hover{transform:none;box-shadow:none}.agent-step:last-child{border-bottom:0}
.gallery-section{background:#fff}.gallery-head{display:flex;justify-content:space-between;align-items:end;gap:30px}.gallery{grid-template-columns:repeat(6,1fr);gap:1px;background:#e6e6e9;border:1px solid #e6e6e9}.glyph{min-height:170px;border:0;border-radius:0;background:#fff;transition:background .2s,transform .2s}.glyph:hover{transform:none;box-shadow:none;background:#f7f7f8}.filter{padding:9px 13px;border-radius:9px;background:transparent}.filter.active{background:var(--ink);color:#fff}
footer{border-top:1px solid #ddd!important;background:#fff!important}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--premium-ease),transform .7s var(--premium-ease)}.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){.principle-grid{grid-template-columns:1fr}.principle,.principle:nth-child(n+2){padding:30px 0;border-right:0;border-bottom:1px solid #ddd;min-height:220px}.principle h3{margin-top:55px}.principle:last-child{border-bottom:0}.gallery{grid-template-columns:repeat(4,1fr)}.phone-layout,.agent-grid{grid-template-columns:1fr;gap:55px}}
@media(max-width:760px){.nav{height:64px;padding-inline:18px}.nav.scrolled{height:60px}.hero{padding:118px 20px 60px}.hero-copy{font-size:17px}.hero-orbit{height:330px;min-height:0;margin-top:30px}.hero-face{width:210px;height:210px}.hero-ring{width:330px}.stage{min-height:560px}.stage-face{width:235px;height:235px}.picker{justify-content:flex-start;overflow:auto;padding-inline:18px}.gallery{grid-template-columns:repeat(3,1fr)}.glyph{min-height:130px}section{padding:105px 20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}