@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Patrick+Hand&family=Inter:wght@500;700;900&display=swap');







        :root {
            --ink:#e8e3d8; --muted:#b9b3a8; --paper:#151515; --header:#101010;
            --card:#222; --glass:rgba(18,18,18,.90); --border:rgba(255,255,255,.12);
            --heading:#e6e0d5; --body-text:#d2cdc3; --nav-text:#dedad2;
            --hero1:#101010; --hero2:#101010ed; --hero3:#101010a8; --hero-mobile:#101010f5;
            --yellow:#ffd51e; --orange:#ff512f; --green:#075b4c;
            --india-saffron:#ff9933; --india-white:#fff; --india-green:#138808; --chakra-blue:#000080;
        }
        html[data-theme="light"] {
            --ink:#171717; --muted:#403d37; --paper:#f8f0df; --header:#fffdf8;
            --card:#fffaf0; --glass:rgba(255,255,255,.82); --border:rgba(0,0,0,.08);
            --heading:#171717; --body-text:#28251f; --nav-text:#171717;
            --hero1:#fffdf9; --hero2:#fffdf9ed; --hero3:#fffdf986; --hero-mobile:#fffdf9f5;
            --orange:#ef4b19;
        }







        * {



            box-sizing: border-box;



        }







        html {



            scroll-behavior: smooth;



        }







        body {



            margin: 0;



            background: var(--paper);



            color: var(--ink);



            font-family: Inter, Arial, sans-serif;



            overflow-x: hidden;



        }







        a {



            color: inherit;



            text-decoration: none;



        }







        /* =========================
           TEXT TONE
           ========================= */

        .logo,
        nav a {
            color: var(--nav-text);
        }

        .hero h1,
        .section-title,
        .feature h3 {
            color: var(--heading);
        }

        .hero p {
            color: var(--body-text);
        }

        .feature p,
        .quote b {
            color: var(--muted);
        }

        .quote {
            color: var(--body-text);
        }

        .wrap {



            width: min(1180px, 92vw);



            margin: auto;



        }







        .scribble {



            font-family: 'Permanent Marker', Impact, sans-serif;



        }







        .hand {



            font-family: 'Patrick Hand', cursive;



        }







        /* =========================



           HEADER



           \\========================= */







        header {



            height: 76px;



            background: var(--header);



            display: flex;



            align-items: center;



            position: sticky;



            top: 0;



            z-index: 20;



            border-bottom: 1px solid var(--border);



        }







        .nav {



            display: flex;



            align-items: center;



            justify-content: space-between;



            gap: 24px;



        }







        .logo {



            font: 900 29px Inter;



        }







        .logo span {



            color: var(--orange);



        }







        nav {



            display: flex;



            gap: 35px;



            font: 700 14px Inter;



        }







        nav a:hover {



            color: var(--orange);



        }







        .pill {
            color: #111;



            display: inline-flex;



            align-items: center;



            justify-content: center;



            background: var(--yellow);



            padding: 16px 27px;



            border-radius: 999px;



            font-weight: 900;



            box-shadow: 0 5px 0 #0002;



            transition: 0.18s;



        }







        .pill:hover {



            transform: translateY(-2px) rotate(-1deg);



            box-shadow: 0 8px 0 #0002;



        }







        /* =========================



           HERO



           \\========================= */







        .hero {



            min-height: 670px;



            position: relative;



            display: flex;



            align-items: center;



            /* Show the whole banner: fit its height and pin it right (people and
               speech bubbles are on the right, the left is space for the headline).
               The colour matches the image's dark edge so wide screens blend. */
            background: url('images/background1.png') right center / auto 100% no-repeat, linear-gradient(180deg, #0d1114 0%, #090c10 50%, #08090b 100%);



            isolation: isolate;



        }







        .hero::before {



            content: "";



            position: absolute;



            inset: 0;



            background: linear-gradient(



                90deg,



                var(--hero1) 0%,



                var(--hero2) 27%,



                var(--hero3) 43%,



                transparent 65%



            );



            z-index: -1;



        }







        .hero::after {



            content: "";



            position: absolute;



            left: 0;



            right: 0;



            bottom: -1px;



            height: 35px;



            background: var(--paper);



            clip-path: polygon(



                0 55%,



                5% 35%,



                11% 62%,



                17% 30%,



                23% 57%,



                29% 33%,



                35% 61%,



                42% 39%,



                49% 66%,



                55% 34%,



                62% 58%,



                70% 37%,



                77% 63%,



                84% 32%,



                91% 57%,



                100% 38%,



                100% 100%,



                0 100%



            );



        }







        .hero-copy {



            width: 510px;



            padding: 65px 0 90px;



        }







        .hero h1 {



            font-size: clamp(58px, 7vw, 94px);



            line-height: 0.86;



            margin: 0 0 20px;



            letter-spacing: -3px;



        }







        .hero h1 em {



            display: block;



            color: var(--orange);



            font-style: normal;



            font-size: 0.67em;



            border-bottom: 7px solid var(--orange);



            padding-bottom: 8px;



        }







        .hero p {



            font-size: 26px;



            line-height: 1.05;



            margin: 26px 0;



        }







        .micro {



            font: 26px 'Patrick Hand';



            margin: 15px 8px !important;



        }







        /* =========================



           SECTIONS



           \\========================= */







        .section {



            padding: 75px 0;



        }







        .section-title {



            text-align: center;



            font-size: 42px;



            margin: 0 0 50px;



        }







        .section-title span {



            position: relative;



            z-index: 1;



        }







        .section-title span::after {



            content: "";



            position: absolute;



            left: -15px;



            right: -15px;



            bottom: 2px;



            height: 16px;



            background: var(--yellow);



            z-index: -1;



            transform: rotate(-1deg);



        }







        /* =========================



           FEATURES



           \\========================= */







        .features {



            display: grid;



            grid-template-columns: repeat(4, 1fr);



            gap: 25px;



            text-align: center;



        }







        .feature-art {



            height: 190px;



            position: relative;



            overflow: hidden;



        }







        .feature-art img {



            width: 210px;



            height: 210px;



            object-fit: cover;



            border-radius: 50%;



            filter: saturate(1.1);



            box-shadow: 0 5px 20px rgba(0,0,0,.32);



        }







        .feature:nth-child(2) img {



            object-position: 34% 72%;



        }







        .feature:nth-child(3) img {



            object-position: 60% 50%;



        }







        .feature:nth-child(4) img {



            object-position: 78% 55%;



        }







        .feature h3 {



            font: 30px 'Permanent Marker';



            margin: 8px 0;



        }







        .feature p {



            font: 21px 'Patrick Hand';



            margin: 0 auto;



            max-width: 240px;



            line-height: 1.05;



        }







        /* =========================



           TESTIMONIALS



           \\========================= */







        .testimonials {



            padding-top: 25px;



        }







        .quotes {



            display: grid;



            grid-template-columns: repeat(3, 1fr);



            gap: 25px;



        }







        .quote {



            background: var(--card);



            border: 1px solid var(--border);



            padding: 26px 25px;



            border-radius: 5px;



            box-shadow: 0 8px 16px rgba(0,0,0,.28);



            transform: rotate(-0.5deg);



            font: 21px/1.25 'Patrick Hand';



            position: relative;



        }







        .quote:nth-child(2) {



            transform: rotate(0.5deg);



        }







        .quote::before,



        .quote::after {



            content: "";



            position: absolute;



            width: 55px;



            height: 18px;



            background: #d4b07877;



            top: -8px;



        }







        .quote::before {



            left: 18px;



            transform: rotate(-8deg);



        }







        .quote::after {



            right: 18px;



            transform: rotate(7deg);



        }







        .quote b {



            display: block;



            margin-top: 15px;



            font-weight: 400;



            font-size: 17px;



        }







        /* =========================



           FINAL CTA



           \\========================= */







        .final {



            margin-top: 60px;



            min-height: 420px;



            display: grid;



            place-items: center;



            background:



                url('a_bright_busy_humorous_landing_page_poster_in_a.png')



                center 91% / cover



                no-repeat;



            position: relative;



        }







        .final::before {



            content: "";



            position: absolute;



            inset: 0;



            background: #0004;



        }







        .sign {



            position: relative;



            background: var(--green);



            border: 8px solid #263c32;



            border-radius: 12px;



            color: white;



            padding: 35px 55px;



            text-align: center;



            box-shadow: 0 12px 20px #0005;



            transform: rotate(-1deg);



            max-width: 670px;



            width: 90%;



        }







        .sign h2 {



            font-size: 43px;



            line-height: 1.1;



            margin: 0 0 25px;



        }







        .sign .pill {



            color: #111;



            width: 90%;



            font-size: 20px;



        }







        .icons {



            display: flex;



            justify-content: center;



            gap: 45px;



            margin-top: 22px;



            font: 20px 'Patrick Hand';



        }







        /* =========================



           INDIAN FLAG FOOTER



           \\========================= */







        footer {



            position: relative;



            min-height: 150px;



            padding: 40px 0;



            overflow: hidden;







            background: linear-gradient(



                to bottom,



                var(--india-saffron) 0%,



                var(--india-saffron) 33.333%,



                var(--india-white) 33.333%,



                var(--india-white) 66.666%,



                var(--india-green) 66.666%,



                var(--india-green) 100%



            );



        }







        footer::before {



            content: "☸";



            position: absolute;



            left: 50%;



            top: 50%;



            transform: translate(-50%, -50%);



            color: var(--chakra-blue);



            font-size: 76px;



            line-height: 1;



            opacity: 0.9;



            pointer-events: none;



        }







        footer::after {



            content: "";



            position: absolute;



            inset: 12px 0;



            background: linear-gradient(



                90deg,



                rgba(255, 255, 255, 0.15),



                rgba(255, 255, 255, 0.32),



                rgba(255, 255, 255, 0.15)



            );



            pointer-events: none;



        }







        .foot {



            position: relative;



            z-index: 2;



            min-height: 70px;



            display: flex;



            align-items: center;



            justify-content: space-between;



            gap: 25px;



        }







        footer .logo,



        .footlinks,



        .made {



            background: var(--glass);



            backdrop-filter: blur(4px);



            -webkit-backdrop-filter: blur(4px);



            border: 1px solid var(--border);



            box-shadow: 0 4px 12px rgba(0,0,0,.28);



        }







        footer .logo {



            padding: 10px 14px;



            border-radius: 12px;



        }







        .footlinks {



            display: flex;



            gap: 25px;



            font-size: 13px;



            padding: 12px 18px;



            border-radius: 999px;



        }







        .footlinks a {



            font-weight: 700;



        }







        .footlinks a:hover {



            color: var(--orange);



        }







        .made {



            font: 20px 'Permanent Marker';



            text-align: right;



            padding: 9px 13px;



            border-radius: 12px;



        }







        .made span {



            color: #e21;



        }







        /* =========================



           RESPONSIVE



           \\========================= */







        @media (max-width: 850px) {



            nav {



                display: none;



            }







            .hero {



                min-height: 730px;



                background-position: 62% center;



            }







            .hero::before {



                background: linear-gradient(



                    90deg,



                    var(--hero-mobile),



                    var(--hero3) 70%,



                    transparent



                );



            }







            .hero-copy {



                width: min(520px, 90%);



            }







            .features {



                grid-template-columns: repeat(2, 1fr);



                row-gap: 50px;



            }







            .quotes {



                grid-template-columns: 1fr;



            }







            .foot {



                flex-direction: column;



                text-align: center;



            }







            .made {



                text-align: center;



            }



        }







        @media (max-width: 520px) {



            .theme-toggle{width:42px;min-width:42px;padding:0}.theme-label{display:none}.nav-actions{gap:8px}

            header .pill {



                padding: 12px 16px;



                font-size: 12px;



            }







            .logo {



                font-size: 22px;



            }







            .hero {



                min-height: 650px;



                background-position: 68% center;



            }







            .hero h1 {



                font-size: 55px;



            }







            .hero p {



                font-size: 22px;



            }







            .features {



                grid-template-columns: 1fr;



            }







            .section-title {



                font-size: 34px;



            }







            .sign {



                padding: 30px 20px;



            }







            .sign h2 {



                font-size: 34px;



            }







            .icons {



                gap: 15px;



                font-size: 16px;



            }







            .footlinks {



                flex-wrap: wrap;



                justify-content: center;



            }







            footer::before {



                font-size: 62px;



            }



        }