:root{--color-bg:#05080f;--color-bg-surface:#0c1020;--color-gold:#c9a96e;--color-gold-light:#e8c98a;--color-gold-dim:#c9a96e26;--color-text-primary:#f0ede8;--color-text-secondary:#9a9a9a;--color-text-muted:#5a5a6a;--color-border:#c9a96e1f;--font-heading:"Outfit", sans-serif;--font-body:"Inter", sans-serif;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2.5rem;--space-2xl:4rem;--ease-premium:cubic-bezier(.25, .46, .45, .94);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--trans-fast:.2s var(--ease-premium);--trans-medium:.5s var(--ease-premium);--trans-slow:.8s var(--ease-premium);--z-bg:0;--z-canvas:1;--z-ui:10;--z-nav:20}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden}body{background-color:var(--color-bg);color:var(--color-text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:0}h1,h2,h3{font-family:var(--font-heading);letter-spacing:-.02em;font-weight:300;line-height:1.1}p{font-family:var(--font-body);font-weight:300;line-height:1.7}.hero-section{align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.bg-layer{z-index:var(--z-bg);position:absolute;inset:0}.bg-image{object-fit:cover;filter:blur(12px)brightness(.95)saturate(1.2);width:110%;height:110%;position:absolute;inset:-5%}.bg-overlay{z-index:1;background:radial-gradient(60% 80% at 20%,#05080f00 0%,#05080f66 100%),linear-gradient(90deg,#05080fa6 0%,#05080f1a 55%,#05080f4d 100%);position:absolute;inset:0}.canvas-container{z-index:var(--z-canvas);position:absolute;inset:0}.ui-overlay{z-index:var(--z-ui);width:100%;padding:0 var(--space-2xl);pointer-events:none;align-items:center;display:flex;position:relative}.brand-logo{top:2.5rem;left:var(--space-2xl);z-index:var(--z-nav);pointer-events:all;transition:transform var(--trans-medium);display:block;position:absolute}.brand-logo:hover{transform:scale(1.02)}.brand-logo-img{width:auto;height:60px;display:block}.content-panel{pointer-events:all;width:45%;max-width:560px}.pillar-label{align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg);display:flex}.pillar-number{font-family:var(--font-heading);letter-spacing:.25em;color:var(--color-gold);text-transform:uppercase;font-size:.7rem;font-weight:500}.pillar-line{background:var(--color-gold);opacity:.5;flex:1;max-width:3rem;height:1px}.pillar-category{letter-spacing:.25em;color:var(--color-text-muted);text-transform:uppercase;font-size:.65rem;font-weight:400}.pillar-title{color:var(--color-text-primary);margin-bottom:var(--space-xl);font-size:clamp(2.4rem,4.5vw,3.8rem);font-weight:200;line-height:1.08}.pillar-title em{color:var(--color-gold-light);font-style:normal}.pillar-description{color:var(--color-text-secondary);max-width:400px;margin-bottom:var(--space-2xl);font-size:1rem;line-height:1.8}.nav-controls{align-items:center;gap:var(--space-xl);display:flex}.nav-arrows{align-items:center;gap:var(--space-md);display:flex}.nav-btn{border:1px solid var(--color-border);width:48px;height:48px;color:var(--color-gold);cursor:pointer;transition:all var(--trans-fast);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#c9a96e0d;border-radius:50%;justify-content:center;align-items:center;display:flex}.nav-btn:hover{background:var(--color-gold-dim);border-color:#c9a96e66;transform:scale(1.08)}.nav-btn:active{transform:scale(.95)}.nav-btn svg{stroke:currentColor;fill:none;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}.dot-indicators{align-items:center;gap:10px;display:flex}.dot{background:var(--color-text-muted);cursor:pointer;width:6px;height:6px;transition:all var(--trans-medium);border:none;border-radius:50%;padding:0}.dot.active{background:var(--color-gold);transform:scale(1.5);box-shadow:0 0 8px #c9a96e80}.face-indicator{right:var(--space-2xl);z-index:var(--z-ui);pointer-events:none;flex-direction:column;gap:1.5rem;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.face-tick{opacity:.35;transition:opacity var(--trans-medium);flex-direction:column;align-items:flex-end;gap:.4rem;display:flex}.face-tick.active{opacity:1}.face-tick-label{letter-spacing:.2em;text-transform:uppercase;color:var(--color-gold);text-align:right;font-size:.6rem;font-family:var(--font-heading)}.face-tick-bar{background:var(--color-gold);width:24px;height:1px}.face-tick.active .face-tick-bar{width:40px}.progress-line-container{bottom:2.5rem;left:var(--space-2xl);right:var(--space-2xl);z-index:var(--z-ui);align-items:center;gap:var(--space-xl);pointer-events:none;display:flex;position:absolute}.progress-track{background:#ffffff14;flex:1;max-width:200px;height:1px;position:relative;overflow:hidden}.progress-fill{background:var(--color-gold);height:100%;transition:width var(--trans-slow);position:absolute;top:0;left:0}.progress-text{letter-spacing:.2em;color:var(--color-text-muted);text-transform:uppercase;font-size:.65rem}.cta-btn{align-items:center;gap:var(--space-sm);border:1px solid var(--color-gold);color:var(--color-gold);font-family:var(--font-heading);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:all var(--trans-fast);pointer-events:all;background:0 0;padding:.85rem 2rem;font-size:.75rem;font-weight:400;text-decoration:none;display:inline-flex}.cta-btn:hover{background:var(--color-gold);color:var(--color-bg)}.cta-btn svg{stroke:currentColor;fill:none;stroke-width:1.5px;width:14px;height:14px;transition:transform var(--trans-fast)}.cta-btn:hover svg{transform:translate(4px)}@media (width<=900px){html,body,#root{overflow:auto}.hero-section{flex-direction:column;align-items:flex-start;height:100dvh;min-height:600px;overflow:visible}.canvas-container{width:100%;height:55vw;min-height:260px;max-height:400px;position:relative}.ui-overlay{padding:var(--space-xl) var(--space-xl) var(--space-2xl);align-items:flex-start;position:relative}.content-panel{width:100%;max-width:100%}.pillar-title{font-size:clamp(2rem,7vw,2.8rem)}.brand-logo{left:var(--space-xl);top:var(--space-xl)}.face-indicator{display:none}.progress-line-container{bottom:1.5rem;left:var(--space-xl);right:var(--space-xl)}}@media (width<=480px){.ui-overlay{padding:var(--space-lg)}.pillar-description{font-size:.9rem}.nav-btn{width:40px;height:40px}}