:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100vw;height:100vh;margin:0;padding:0}:root{--bg-primary: #FDFDFD;--bg-secondary: #FFFFFF;--bg-soft: #F3F4F6;--teal-primary: #0F5156;--teal-light: #2A7A7F;--teal-soft: rgba(15, 81, 86, .08);--coral: #FF8F70;--gold: #FFC043;--charcoal: #111827;--gray: #6B7280;--gray-light: #E5E7EB;--text-primary: #111827;--text-secondary: #6B7280;--text-accent: #0F5156;--surface-white: rgba(255, 255, 255, .95);--border-subtle: rgba(0, 0, 0, .06);--border-accent: rgba(15, 81, 86, .15);--font-sans: "Geist Mono", "SF Mono", "Monaco", "Inconsolata", monospace;--font-mono: "Geist Mono", monospace;--space-xs: .5rem;--space-sm: .75rem;--space-md: 1.5rem;--space-lg: 2.5rem;--space-xl: 4rem;--ease-out: cubic-bezier(.23, 1, .32, 1);--ease-bounce: cubic-bezier(.34, 1.56, .64, 1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-sans);background:var(--bg-primary);min-height:100vh;margin:0;overflow-x:hidden;color:var(--text-primary);position:relative;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse 80% 50% at 80% 20%,rgba(15,81,86,.04),transparent 60%),radial-gradient(circle at 0% 100%,rgba(255,143,112,.03),transparent 40%);pointer-events:none;z-index:0}.container{position:relative;width:100vw;min-height:100vh;display:flex;flex-direction:row;align-items:center;justify-content:center;z-index:1;padding:var(--space-lg) var(--space-xl);gap:var(--space-xl);max-width:1400px;margin:0 auto}.content-wrapper{flex:1;display:flex;flex-direction:column;align-items:flex-start;text-align:left;max-width:600px;gap:var(--space-md);z-index:10}.logo{width:140px;height:auto;opacity:0;transform:translateY(-10px);animation:entranceSlide .8s var(--ease-out) forwards;animation-delay:.2s;transition:transform .4s var(--ease-out)}.logo:hover{transform:translateY(-2px)}.tagline{font-family:var(--font-sans);font-size:1.125rem;font-weight:500;color:var(--text-secondary);max-width:480px;opacity:0;animation:entranceFade .8s var(--ease-out) forwards;animation-delay:.4s;line-height:1.6}.coming-soon{opacity:0;transform:translateY(10px);animation:entranceFade .8s var(--ease-out) forwards;animation-delay:.6s}.coming-soon-title{font-family:var(--font-sans);font-size:3.5rem;font-weight:800;color:var(--text-primary);letter-spacing:-.03em;line-height:1.1;background:linear-gradient(135deg,var(--text-primary) 0%,var(--teal-primary) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:var(--space-sm)}.coming-soon-subtitle{font-family:var(--font-sans);font-size:1.25rem;font-weight:500;color:var(--text-secondary);letter-spacing:-.01em}.scene{flex:1;position:relative;width:100%;max-width:500px;height:600px;perspective:2000px;display:flex;justify-content:center;align-items:center;transform:translate(20px)}.phone{position:relative;width:300px;height:600px;background:linear-gradient(145deg,#e3e3e3,#d1d1d6,#e3e3e3);border-radius:56px;box-shadow:0 50px 100px -20px #0f515633,0 30px 60px -30px #00000026,inset 0 0 0 2px #fffc,inset 0 0 0 4px #0000000d;animation:phoneFloat 6s ease-in-out infinite;z-index:10;opacity:0;animation:phoneFloat 6s ease-in-out infinite,entranceScale 1s var(--ease-bounce) forwards;animation-delay:0s,.8s;border:1px solid rgba(255,255,255,.4)}.phone:before{content:"";position:absolute;top:20px;left:50%;transform:translate(-50%);width:96px;height:28px;background:#000;border-radius:14px;z-index:20;box-shadow:0 1px 2px #0003}.phone-screen{position:absolute;inset:10px;background:#fff;border-radius:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-primary);text-align:center;overflow:hidden;padding:40px 24px;box-shadow:inset 0 0 40px #00000005;-webkit-mask-image:-webkit-radial-gradient(white,black)}.pet-avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--bg-soft) 0%,#FFFFFF 100%);margin-bottom:var(--space-sm);display:flex;align-items:center;justify-content:center;font-size:2.25rem;box-shadow:0 10px 30px #0f51560f,0 4px 10px #00000005;position:relative;z-index:1}.pet-name{font-family:var(--font-sans);font-size:1.125rem;font-weight:700;margin-bottom:.25rem;color:var(--text-primary);letter-spacing:-.02em}.pet-story{font-family:var(--font-sans);font-size:.875rem;padding:1rem;text-align:center;background:var(--bg-soft);border-radius:20px;margin-top:.5rem;line-height:1.5;color:var(--text-secondary);font-weight:400}.floating-element{position:absolute;opacity:0;display:flex;align-items:center;justify-content:center;animation:floatDrift 8s ease-in-out infinite alternate,entranceFloat .8s var(--ease-out) forwards;z-index:5;filter:drop-shadow(0 10px 20px rgba(15,81,86,.08))}.floating-icon{width:100%;height:100%;color:var(--teal-primary);opacity:.8;transition:transform .3s ease}.floating-element:nth-child(1){top:15%;left:0%;width:56px;animation-delay:0s,1s}.floating-element:nth-child(2){top:10%;right:5%;width:48px;animation-delay:.5s,1.2s}.floating-element:nth-child(3){bottom:20%;left:-10%;width:44px;animation-delay:1s,1.4s}.floating-element:nth-child(4){bottom:25%;right:-5%;width:36px;animation-delay:1.5s,1.6s}.floating-element:nth-child(5){top:45%;right:-12%;width:40px;animation-delay:2s,1.8s}.floating-element:nth-child(6){top:5%;left:40%;width:32px;animation-delay:2.5s,2s}.social-links{margin-top:var(--space-sm);opacity:0;transform:translateY(10px);animation:entranceFade .8s var(--ease-out) forwards;animation-delay:.8s;display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}.social-title{font-family:var(--font-sans);font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);opacity:.8}.social-icons{display:flex;flex-direction:row;gap:.75rem;flex-wrap:wrap;justify-content:flex-start}.social-link{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;height:40px;width:auto;border-radius:20px;text-decoration:none;font-size:.8rem;font-weight:500;transition:all .3s cubic-bezier(.175,.885,.32,1.275);background:#fff;color:var(--text-secondary);box-shadow:0 4px 12px #0000000d;border:1px solid var(--border-subtle);position:relative;overflow:hidden}.social-link span{display:inline-block;opacity:.9}.social-link:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 10px 20px #0f51561a;color:#fff;border-color:transparent}.social-link.facebook:hover{background:#1877f2}.social-link.instagram:hover{background:#e4405f}.social-link.twitter:hover{background:#1da1f2}.social-link.linkedin:hover{background:#0a66c2}.social-link svg{width:18px;height:18px;flex-shrink:0}@keyframes entranceSlide{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes entranceFade{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes entranceScale{0%{opacity:0;transform:scale(.9) translateY(40px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes entranceFloat{0%{opacity:0;transform:translateY(40px) scale(.5)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes phoneFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes floatDrift{0%{transform:translateY(0) rotate(0)}to{transform:translateY(-15px) rotate(5deg)}}@media(max-width:1024px){.container{flex-direction:column;padding:var(--space-md);gap:var(--space-lg);text-align:center}.content-wrapper{align-items:center;text-align:center;max-width:100%}.scene{transform:none;height:500px}.social-links{align-items:center}.social-icons{justify-content:center}}@media(max-width:768px){.container{padding:var(--space-md) var(--space-sm);gap:var(--space-md)}.logo{width:110px}.coming-soon-title{font-size:2.5rem}.coming-soon-subtitle{font-size:1rem}.scene{height:460px;margin-top:-1rem}.phone{width:240px;height:440px}}@media(max-width:480px){.coming-soon-title{font-size:2rem}.phone{width:210px;height:400px}.phone-screen{padding:24px}.pet-name{font-size:1rem}.pet-story{font-size:.8rem;padding:.75rem}.floating-element:nth-child(3),.floating-element:nth-child(4){display:none}.social-icons{gap:.5rem}.social-link{padding:6px 12px;font-size:.75rem}}
