.elementor-kit-16{--e-global-color-primary:#011640;--e-global-color-secondary:#FFF7F1;--e-global-color-text:#848484;--e-global-color-accent:#FFD6D6;--e-global-color-284b516:#FFFFFF;--e-global-color-fc5ff30:#FFFFFF;--e-global-color-b67616c:#FFFFFF00;--e-global-color-979e0fe:#F2F3F5;--e-global-color-81be640:#CBC8CC;--e-global-color-7d0b5e3:#263659;--e-global-color-fe075fe:#F2EBE7;--e-global-color-cef0432:#000000CC;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-size:30px;--e-global-typography-primary-font-weight:300;--e-global-typography-primary-text-transform:capitalize;--e-global-typography-primary-line-height:1.2em;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-size:15px;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-text-transform:capitalize;--e-global-typography-secondary-line-height:1em;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:300;--e-global-typography-text-line-height:1.8em;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-text-transform:capitalize;--e-global-typography-accent-line-height:1em;--e-global-typography-b43c0ff-font-family:"Montserrat";--e-global-typography-b43c0ff-font-size:16px;--e-global-typography-b43c0ff-font-weight:400;--e-global-typography-b43c0ff-text-transform:capitalize;--e-global-typography-b43c0ff-text-decoration:underline;--e-global-typography-5a11820-font-family:"Montserrat";--e-global-typography-5a11820-font-size:16px;--e-global-typography-5a11820-font-weight:300;--e-global-typography-5a11820-text-transform:uppercase;--e-global-typography-5a11820-line-height:1em;--e-global-typography-42300ad-font-family:"Montserrat";--e-global-typography-42300ad-font-size:18px;--e-global-typography-42300ad-font-weight:400;--e-global-typography-42300ad-text-transform:capitalize;--e-global-typography-42300ad-line-height:1.2em;--e-global-typography-54d6145-font-family:"Montserrat";--e-global-typography-54d6145-font-size:20px;--e-global-typography-54d6145-font-weight:400;--e-global-typography-54d6145-text-transform:capitalize;--e-global-typography-54d6145-font-style:normal;--e-global-typography-54d6145-line-height:1.4em;--e-global-typography-883ce6d-font-family:"Montserrat";--e-global-typography-883ce6d-font-size:80px;--e-global-typography-883ce6d-font-weight:300;--e-global-typography-883ce6d-text-transform:uppercase;--e-global-typography-883ce6d-line-height:1em;--e-global-typography-7ba1c84-font-family:"Montserrat";--e-global-typography-7ba1c84-font-size:15px;--e-global-typography-7ba1c84-font-weight:300;--e-global-typography-7ba1c84-text-transform:capitalize;--e-global-typography-947f909-font-family:"Montserrat";--e-global-typography-947f909-font-size:60px;--e-global-typography-947f909-font-weight:300;--e-global-typography-947f909-text-transform:uppercase;--e-global-typography-947f909-line-height:1em;--e-global-typography-dc8af67-font-family:"Montserrat";--e-global-typography-dc8af67-font-size:25px;--e-global-typography-dc8af67-font-weight:200;--e-global-typography-dc8af67-text-transform:capitalize;--e-global-typography-dc8af67-line-height:1.4em;--e-global-typography-4863f62-font-family:"Montserrat";--e-global-typography-4863f62-font-size:22px;--e-global-typography-4863f62-font-weight:400;--e-global-typography-4863f62-text-transform:capitalize;--e-global-typography-4863f62-font-style:normal;--e-global-typography-4863f62-line-height:1.4em;--e-global-typography-456247d-font-family:"Montserrat";--e-global-typography-456247d-font-size:45px;--e-global-typography-456247d-font-weight:300;--e-global-typography-456247d-text-transform:uppercase;--e-global-typography-456247d-line-height:1em;--e-global-typography-525d066-font-family:"Montserrat";--e-global-typography-525d066-font-size:28px;--e-global-typography-525d066-font-weight:300;--e-global-typography-525d066-text-transform:uppercase;--e-global-typography-525d066-line-height:1.2em;background-color:var( --e-global-color-fc5ff30 );}.elementor-kit-16 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1400px;}.e-con{--container-max-width:1400px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-16{--e-global-typography-42300ad-font-size:15px;--e-global-typography-883ce6d-font-size:60px;--e-global-typography-7ba1c84-font-size:14px;--e-global-typography-947f909-font-size:50px;--e-global-typography-dc8af67-font-size:20px;--e-global-typography-456247d-font-size:50px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-16{--e-global-typography-primary-font-size:25px;--e-global-typography-54d6145-font-size:20px;--e-global-typography-54d6145-line-height:1.4em;--e-global-typography-883ce6d-font-size:33px;--e-global-typography-947f909-font-size:35px;--e-global-typography-4863f62-font-size:20px;--e-global-typography-4863f62-line-height:1.4em;--e-global-typography-456247d-font-size:35px;--e-global-typography-525d066-font-size:20px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SKYLR | Creative Character Studio</title>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap" rel="stylesheet">
    <style>
        :root {
            --pastel-blue: #A2D2FF;
            --pastel-pink: #FFC8DD;
            --pastel-purple: #CDB4DB;
            --bg-color: #F0F4F8;
            --text-main: #4A5568;
            --clay-shadow: 10px 10px 20px #d1d9e6, -10px -10px 20px #ffffff;
            --clay-shadow-hover: 15px 15px 30px #d1d9e6, -15px -15px 30px #ffffff;
            --clay-inset: inset 6px 6px 12px #d1d9e6, inset -6px -6px 12px #ffffff;
        }

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

        body {
            font-family: 'Nunito', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-main);
            overflow-x: hidden;
        }

        /* --- UI Components --- */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .clay-btn {
            display: inline-block;
            padding: 15px 35px;
            background-color: var(--bg-color);
            color: var(--text-main);
            border-radius: 50px;
            text-decoration: none;
            font-weight: 900;
            border: none;
            cursor: pointer;
            box-shadow: var(--clay-shadow);
            transition: all 0.3s ease;
        }

        .clay-btn:hover {
            transform: translateY(-3px);
            box-shadow: var(--clay-shadow-hover);
            color: #FF8FAB;
        }

        .clay-btn:active {
            box-shadow: var(--clay-inset);
            transform: translateY(2px);
        }

        .clay-card {
            background-color: var(--bg-color);
            border-radius: 30px;
            box-shadow: var(--clay-shadow);
            padding: 2rem;
            transition: transform 0.3s ease;
        }

        .clay-card:hover {
            transform: scale(1.02);
        }

        /* --- Header & Nav --- */
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }

        .logo {
            font-size: 2rem;
            font-weight: 900;
            color: var(--pastel-blue);
            text-shadow: 2px 2px 0px var(--pastel-pink);
            letter-spacing: 2px;
        }

        /* --- Hero Section --- */
        .hero {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 80vh;
            padding: 50px 0;
        }

        .hero-text {
            flex: 1;
            padding-right: 50px;
        }

        .hero h1 {
            font-size: 4rem;
            line-height: 1.1;
            margin-bottom: 20px;
            color: var(--text-main);
        }

        .hero h1 span {
            color: var(--pastel-blue);
        }

        .hero p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            color: #718096;
        }

        .hero-image {
            flex: 1;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Simulating a 3D Mascot with CSS for demo purposes */
        .mascot-placeholder {
            width: 350px;
            height: 350px;
            background: radial-gradient(circle at 30% 30%, var(--pastel-pink), #FF8FAB);
            border-radius: 50%;
            box-shadow: 20px 20px 60px #cbd5e0, -20px -20px 60px #ffffff;
            position: relative;
            animation: float 6s ease-in-out infinite;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 5rem;
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }

        /* --- About Section --- */
        .about {
            padding: 80px 0;
            text-align: center;
        }

        .about h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
            color: var(--pastel-pink);
        }

        .about p {
            max-width: 700px;
            margin: 0 auto;
            font-size: 1.2rem;
            line-height: 1.6;
        }

        /* --- Properties Grid --- */
        .properties {
            padding: 80px 0;
        }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 50px;
            color: var(--pastel-blue);
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }

        .product-image {
            height: 200px;
            background-color: #E2E8F0;
            border-radius: 20px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
        }

        .property-tag {
            background-color: var(--pastel-pink);
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 700;
            display: inline-block;
            margin-bottom: 10px;
        }

        /* --- Footer --- */
        footer {
            padding: 50px 0;
            text-align: center;
            margin-top: 50px;
            border-top: 2px solid white;
        }

        .socials {
            margin-bottom: 20px;
        }

        .social-link {
            display: inline-block;
            width: 50px;
            height: 50px;
            line-height: 50px;
            margin: 0 10px;
            border-radius: 50%;
            background: var(--bg-color);
            box-shadow: var(--clay-shadow);
            color: var(--text-main);
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .social-link:hover {
            color: var(--pastel-blue);
            box-shadow: var(--clay-inset);
        }

        /* Mobile tweaks */
        @media (max-width: 768px) {
            .hero {
                flex-direction: column-reverse;
                text-align: center;
            }
            .hero-text { padding-right: 0; margin-top: 40px; }
            .hero h1 { font-size: 2.5rem; }
            .mascot-placeholder { width: 250px; height: 250px; }
        }
    </style>
</head>
<body>

    <div class="container">
        <nav>
            <div class="logo">SKYLR.</div>
            <a href="#" class="clay-btn">Shop Now</a>
        </nav>

        <section class="hero">
            <div class="hero-text">
                <h1>Dream Big.<br><span>Play Soft.</span></h1>
                <p>Welcome to the world of SKYLR, where imagination takes shape. Discover our collection of whimsical characters and creative blind boxes.</p>
                <a href="#properties" class="clay-btn">Meet the Crew</a>
            </div>
            <div class="hero-image">
                <div class="mascot-placeholder">
                    🤖
                </div>
            </div>
        </section>

        <section class="about" id="about">
            <div class="clay-card">
                <h2>Our Mission</h2>
                <p>SKYLR isn't just a brand; it's a playground for the soul. We design high-quality, collectible art toys that bring a splash of pastel joy to your desk, shelf, and heart. We believe in the power of soft colors and bold dreams.</p>
            </div>
        </section>

        <section class="properties" id="properties">
            <h2 class="section-title">The Collection</h2>
            <div class="grid">
                <div class="clay-card">
                    <div class="product-image" style="background: #E0F7FA;">🦄</div>
                    <span class="property-tag">Blind Box Vol. 1</span>
                    <h3>Dreamy Drifters</h3>
                    <p>Collect all 6 sleepy cloud creatures.</p>
                </div>

                <div class="clay-card">
                    <div class="product-image" style="background: #FCE4EC;">🐰</div>
                    <span class="property-tag">Limited Edition</span>
                    <h3>Bunny Bot 3000</h3>
                    <p>The pastel cyborg companion you need.</p>
                </div>

                <div class="clay-card">
                    <div class="product-image" style="background: #F3E5F5;">👾</div>
                    <span class="property-tag">Coming Soon</span>
                    <h3>Glitch Pop</h3>
                    <p>Retro gaming meets soft aesthetics.</p>
                </div>
            </div>
        </section>

        <footer>
            <div class="socials">
                <a href="#" class="social-link">IG</a>
                <a href="#" class="social-link">TT</a>
                <a href="#" class="social-link">YT</a>
            </div>
            <p>&copy; 2024 SKYLR Creative Studio. All Rights Reserved.</p>
        </footer>
    </div>

</body>
</html>/* End custom CSS */