:root{--color-bg: #FDFBF7;--color-text: #2C3E50;--color-accent-1: #E0F7FA;--color-accent-2: #F3E5F5;--color-accent-3: #FFF3E0;--color-glass: rgba(255, 255, 255, .6);--color-glass-border: rgba(255, 255, 255, .8);--font-heading: "Playfair Display", serif;--font-body: "Inter", sans-serif;--spacing-sm: 1rem;--spacing-md: 2rem;--spacing-lg: 4rem;--spacing-xl: 8rem}.cursor{position:fixed;top:0;left:0;width:20px;height:20px;border:1px solid #2C3E50;border-radius:50%;pointer-events:none;z-index:10000;transform:translate(-50%,-50%);transition:width .3s,height .3s,background-color .3s;mix-blend-mode:difference}.cursor.hovered{width:50px;height:50px;background-color:#fff;border-color:transparent;mix-blend-mode:difference}.mesh-bg{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;background:radial-gradient(at 0% 0%,hsla(253,16%,7%,1) 0,transparent 50%),radial-gradient(at 50% 0%,hsla(225,39%,30%,1) 0,transparent 50%),radial-gradient(at 100% 0%,hsla(339,49%,30%,1) 0,transparent 50%);filter:blur(100px);opacity:.5}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-body);background-color:var(--color-bg);color:var(--color-text);overflow-x:hidden;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/200-2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");pointer-events:none;z-index:9999;opacity:.4}h1,h2,h3{font-family:var(--font-heading);font-weight:700}.magnetic-btn{display:inline-block;transition:transform .2s ease}.glass{background:var(--color-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--color-glass-border);box-shadow:0 8px 32px #1f268712}#app{width:100%;min-height:100vh;position:relative}#hero{overflow:hidden}.hero-title{font-size:5rem;margin-bottom:1.5rem;text-align:center;line-height:1.1;opacity:0;transform:translateY(30px)}.hero-subtitle{font-size:1.2rem;max-width:600px;text-align:center;opacity:0;transform:translateY(20px);color:#546e7a}.gradient-text{background:linear-gradient(135deg,#b39ddb,#80deea);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-style:italic}.shape{position:absolute;border-radius:50%;filter:blur(50px);z-index:1;opacity:.6}.shape-1{width:400px;height:400px;background:var(--color-accent-1);top:-10%;left:-5%}.shape-2{width:300px;height:300px;background:var(--color-accent-2);bottom:10%;right:-5%}.shape-3{width:200px;height:200px;background:var(--color-accent-3);top:40%;left:50%;transform:translate(-50%,-50%)}#showcase{padding-top:var(--spacing-xl)}.showcase-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-md);width:100%;max-width:1200px;margin-top:var(--spacing-lg)}.card{height:400px;border-radius:20px;padding:var(--spacing-md);display:flex;flex-direction:column;justify-content:center;align-items:center;transition:transform .3s ease,box-shadow .3s ease;position:relative;overflow:hidden}.card:hover{transform:translateY(-10px);box-shadow:0 15px 40px #0000001a}.card h3{margin-top:var(--spacing-sm);font-size:1.5rem;color:var(--color-text)}.card p{font-size:.9rem;color:#546e7a;text-align:center;margin-top:.5rem}.card-visual{width:100%;height:200px;background:#ffffff80;border-radius:12px;margin-bottom:var(--spacing-sm);display:flex;justify-content:center;align-items:center}@media(max-width:768px){.hero-title{font-size:3rem}.shape-1{width:200px;height:200px;top:-5%;left:-10%}.shape-2{width:150px;height:150px;bottom:5%;right:-10%}.shape-3{width:100px;height:100px}#showcase h2{font-size:2rem!important}}body.dark-mode{--color-text: #ffffff;--color-glass: rgba(0, 0, 0, .6);--color-glass-border: rgba(255, 255, 255, .1)}body.dark-mode .card{background:#ffffff0d}body.dark-mode .cursor{border-color:#fff}@media(max-width:768px){.marquee-content{font-size:4rem!important}}
