@font-face {
    font-family: 'Chivo';
    src: url('Chivo-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 400 800;        /* Supports 400 to 800 */
    font-style: normal;
    font-display: swap;
}


 :root {
            --primary: #ad26ec;
            --primary-container: #ad26ec;
            --primary-fixed: #f7d9ff;
            --on-primary: #ffffff;
            --surface: #f9f9ff;
            --surface-container: #e7eefe;
            --surface-container-low: #f0f3ff;
            --surface-container-lowest: #ffffff;
            --surface-container-high: #e2e8f8;
            --surface-container-highest: #dce2f3;
            --on-surface: #151c27;
            --on-surface-variant: #4f4254;
            --outline: #817285;
            --outline-variant: #d3c1d6;
            --inverse-surface: #2a313d;
            --surface-variant: #dce2f3;
            --error: #ba1a1a;
            
            --container-max: 1280px;
            --margin-desktop: 40px;
            --margin-mobile: 16px;
            --gutter: 24px;
        }

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

html {
    scroll-behavior: smooth;
	
}

        body {
            font-family: 'Chivo', sans-serif;
            background-color: var(--surface);
            color: var(--on-surface);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
        }


        .container {
            max-width: var(--container-max);
            margin: 0 auto;
            padding: 0 var(--margin-mobile);
            
        }

        @media (min-width: 768px) {
            .container {
                padding: 0 var(--margin-desktop);
                
            }
        }

        /* Header & Navigation */
        .header {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 100;
            background: rgba(249, 249, 255, 0.8);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--outline-variant);
        }

        .nav {
            height: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            height: 60px;
            object-fit: contain;
        }

        .nav-links {
            display: none;
            align-items: center;
            gap: 32px;
        }

        @media (min-width: 768px) {
            .nav-links {
                display: flex;
            }
        }

        .nav-link {
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            color: var(--on-surface-variant);
            transition: color 0.2s;
        }

        .nav-link.active {
            color: var(--primary);
            border-bottom: 2px solid var(--primary);
            padding-bottom: 4px;
        }

        .nav-link:hover {
            color: var(--primary);
        }

        .btn-primary {
            background-color: var(--primary);
            color: white;
            padding: 10px 24px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .btn-primary:hover {
            background-color: var(--primary-container);
            transform: scale(0.98);
        }

        .mobile-menu-icon {
            display: block;
        }

        @media (min-width: 768px) {
            .mobile-menu-icon {
                display: none;
            }
        }

        /* Hero Section */
        .hero {
            margin-top:20px;
            padding: 100px 0 64px;
            padding-left:50px;
            padding-right:50px;
        }

        .hero-grid {
            display: grid;
            gap: 48px;

            	display: flex;
  flex-direction:horizontal;       /* ← this stacks children vertically */
  justify-content: left;      /* centers the whole column vertically */
  align-items: left;          /* centers each child horizontally */

  /* min-height: 100vh;            so you can see vertical centering */
  /* gap: 4px;      */

            /* align-items: center; */
        }

        @media (min-width: 768px) {
            .hero-grid {
                grid-template-columns: 1fr 1fr;
            }
            .hero {
                padding: 100px 0 0px;
                padding-left:50px;
            padding-right:50px;

            }
        }

        .hero-title {
            font-size: 40px;
            line-height: 1.1;
            font-weight: 700;
            margin-bottom: 24px;
            color: var(--on-surface);
        }

        @media (min-width: 768px) {
            .hero-title {
                font-size: 48px;
                line-height: 56px;
            }
        }

        .hero-title span, .hero-description span {
            color: var(--primary);
        }

        .hero-description {
            font-size: 18px;
            color: var(--on-surface-variant);
            margin-bottom: 20px;
            /* max-width: 500px; */
        }

        .hero-actions {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        @media (min-width: 640px) {
            .hero-actions {
                flex-direction: row;
            }
        }

        .btn-hero-main {
            padding: 16px 32px;
            font-size: 18px;
        }

        .btn-outline {
            background: transparent;
            border: 2px solid var(--outline);
            color: var(--on-surface);
            padding: 16px 32px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-outline:hover {
            background-color: var(--surface-container);
        }

        .hero-image-wrapper {
            position: relative;
        }

        .hero-image-card {
            background: var(--surface-container-lowest);
            padding: 0px;
            border-radius: 12px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            /* border: 1px solid var(--outline-variant); */
            position: relative;
            z-index: 10;
        }

        .hero-img {
            width: 100%;
            /* height: 400px; */
            object-fit: cover;
            border-radius: 8px;
        }

        .hero-floating-badge {
            position: absolute;
            bottom: -24px;
            left: -24px;
            background: var(--surface-container-lowest);
            padding: 24px;
            border-radius: 12px;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            border: 1px solid var(--outline-variant);
            max-width: 240px;
            z-index: 20;
        }

        .hero-floating-widget {
            position: absolute;
            top: 184px;
            right: -24px;
            background: var(--surface-container-lowest);
            padding: 0px;
            border-radius: 12px;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            border: 1px solid var(--outline-variant);
            max-width: 200px;
            z-index: 20;
        }

        .widget-img {
            width: 100%;
            /* height: 400px; */
            object-fit: cover;
            border-radius: 12px;
        }

        .badge-status {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 8px;
            font-weight: 500;
            font-size: 14px;
        }



        .badge-text {
            font-size: 12px;
            color: var(--on-surface-variant);
        }



        /* Results Section */
        .results {
            padding: 96px 0;
            text-align: center;
            padding-left:50px;
            padding-right:50px;
        }

        .results-title {
            font-size: 32px;
            margin-bottom: 64px;
            font-weight: 600;
        }

        .results-grid {
            display: grid;
            gap: 32px;
        }

        @media (min-width: 768px) {
            .results-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        .result-card {
            padding: 32px;
            background: var(--surface-container-lowest);
            border-radius: 12px;
            border: 1px solid var(--outline-variant);
            transition: border-color 0.3s;
        }

        .result-card:hover {
            border-color: var(--primary);
        }

        .result-icon-wrapper {
            width: 64px;
            height: 64px;
            background: var(--primary-fixed);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 24px;
        }

        .result-icon-wrapper {
            color: var(--primary);
            font-size: 32px;
        }

        .result-card h3 {
            font-size: 24px;
            margin-bottom: 12px;
            font-weight: 600;
        }

        .result-card p {
            color: var(--on-surface-variant);
        }

        .highlight-text {
            font-weight: 600;
            color: var(--primary);
        }

        /* Feature Sections */
        .feature-section {
            padding: 0px 0;
            padding-bottom:90px;
            padding-left:50px;
            padding-right:50px;
        }

        .feature-grid {
            display: grid;
            gap: 64px;
            align-items: left;
        }

        @media (min-width: 768px) {
            .feature-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        .feature-eyebrow {
            color: var(--primary);
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 16px;
            display: block;
        }

        .feature-title {
            font-size: 32px;
            font-weight: 600;
            margin-bottom: 24px;
        }

        .feature-desc {
            font-size: 18px;
            color: var(--on-surface-variant);
            margin-bottom: 32px;
        }

         .feature-desc a {
            display:block;
            width:50%;
            text-decoration:none;
            cursor: pointer;
            transition: all 0.2s;
            margin-top: 10px;
            text-align:center;
            font-size:18px;
            line-height:24px;
            font-weight:400;
        }

        .feature-desc a:hover {
            text-decoration:none;
            transform: scale(0.98);
         }

        .feature-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .feature-list li {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 16px;
        }



       

        /* Website Builder Section */
        .bg-low {
            background-color: var(--surface-container-low);
        }

        .builder-detail-card {
            background: var(--surface-container-lowest);
            padding: 32px;
            border-radius: 12px;
            border: 1px solid var(--outline-variant);
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .detail-item {
            display: flex;
            gap: 16px;
            align-items: flex-start;
        }

        .detail-item:not(:last-child) {
            margin-bottom: 24px;
        }

        .detail-icon {
            background: var(--primary-fixed);
            padding: 12px;
            border-radius: 8px;
            display: flex;
        }

        .detail-icon  {
            color: var(--primary);
        }

        .detail-content h4 {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .detail-content p {
            font-size: 12px;
            color: var(--on-surface-variant);
        }

        .booking-preview {
            position: relative;
            /* height: 400px; */
        }

        .builder-preview {
            position: relative;
            height: 500px;
        }

        .builder-main-img {
            width: 100%;
            /* height: 100%;
            object-fit: cover; */
            border-radius: 12px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }

        .builder-floating-ui {
            position: absolute;
            bottom: 0px;
            right: -40px;
            background: var(--on-surface);
            color: white;
            padding: 0px;
            border-radius: 12px;
            width: 256px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            /* display: none; */
        }

        .builder-website {
            width: 350px;
            bottom: 20px;
            right: -20px;
        }

        .builder-website-mob {
            width: 150px;
            bottom: 40px;
            left: -30px;
        }

        .builder-booking {
            width: 400px;
            bottom: 40px;
            right: -30px;
        }

        .ui-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        

        /* Video Section */
        .video-section {
            padding: 64px 0;
            text-align: center;
        }

        .video-player {
            position: relative;
            width: 100%;
            aspect-ratio: 16/9;
            background: var(--surface-container-highest);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border: 1px solid var(--outline-variant);
            max-width: 896px;
            margin: 0 auto;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
            cursor: pointer;
        }

        .video-overlay {
            position: absolute;
            inset: 0;
            background: rgba(21, 28, 39, 0.05);
            transition: background 0.3s;
        }

        .video-player:hover .video-overlay {
            background: transparent;
        }

        .play-btn {
            position: relative;
            z-index: 10;
            background: rgba(141, 0, 198, 0.9);
            color: white;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            transition: transform 0.3s;
        }

        .video-player:hover .play-btn {
            transform: scale(1.1);
        }

        .play-btn  {
            font-size: 36px;
            font-variation-settings: 'FILL' 1;
        }

        .video-thumbnail {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.2;
        }

        /* Pricing Section */
        .pricing {
            padding: 0px 0;
            margin-bottom:50px;
            text-align: center;
        }

        .pricing-header h2 {
            font-size: 32px;
            margin-bottom: 16px;
        }

        .pricing-header .desc {
            font-size: 18px;
            color: var(--on-surface-variant);
            margin-bottom: 8px;
        }

        .pricing-header .sub {
            color: var(--primary);
            font-weight: 700;
            font-size: 18px;
            text-transform: uppercase;
        }

        .pricing-card {
            max-width: 576px;
            margin: 64px auto 0;
            background: var(--surface-container-lowest);
            border-radius: 12px;
            border: 2px solid var(--primary);
            padding: 48px;
            position: relative;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            overflow: hidden;
            text-align: left;
        }

        .popular-badge {
            position: absolute;
            top: 0;
            right: 0;
            background: var(--primary);
            color: white;
            padding: 8px 24px;
            border-bottom-left-radius: 12px;
            font-size: 14px;
            font-weight: 500;
        }

        .price-row {
            text-align: center;
            margin-bottom: 40px;
        }

        .price-amount {
            font-size: 48px;
            font-weight: 700;
        }

        .price-period {
            font-size: 18px;
            color: var(--on-surface-variant);
        }

        .price-features {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 24px;
            margin-bottom: 48px;
        }

        .price-features li {
            display: flex;
            align-items: center;
            gap: 16px;
            font-size: 16px;
        }

        .price-features  {
            /* color: var(--primary); */
            font-variation-settings: 'FILL' 1;
        }

        .price-features li span:last-child {
            font-weight: 400;
        }

        .btn-full {
            width: 100%;
            padding: 20px;
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 16px;
        }

        .pricing-footer {
            text-align: center;
            font-size: 12px;
            color: var(--on-surface-variant);
        }

        /* Lead Capture Section */
        .lead-capture {
            padding: 96px 0;
            background: var(--inverse-surface);
            color: white;
            position: relative;
            overflow: hidden;
            text-align: center;
        }

        .lead-capture::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at center, var(--primary), transparent 70%);
            opacity: 0.1;
        }

        .lead-content {
            position: relative;
            z-index: 10;
            max-width: 768px;
            margin: 0 auto;
        }

        .lead-content h2 {
            font-size: 32px;
            margin-bottom: 24px;
        }

        .lead-content p {
            font-size: 18px;
            color: var(--surface-variant);
            margin-bottom: 48px;
        }

        .lead-form {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .form-grid {
            display: grid;
            gap: 24px;
        }

        @media (min-width: 768px) {
            .form-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        .form-group {
            text-align: left;
        }

        .form-group label {
            display: block;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 8px;
            color: var(--surface-variant);
        }

        .form-input {
            width: 100%;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            padding: 16px 24px;
            color: white;
            font-size: 16px;
            transition: all 0.2s;
        }

        .form-input-error {
            border: 1px solid #faf201;
        }

        .form-input::placeholder {
            color: rgba(220, 226, 243, 0.4);
        }

        .form-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 1px var(--primary);
        }

        /* Footer */
        .footer {
            background: var(--surface-container);
            padding: 64px 0 0;
        }

        .footer a {
            text-decoration:none;
            color:rgb(0, 0, 0, 0.6);
        }

         .footer a:hover {
            text-decoration:none;
            color:rgb(0, 0, 0, 0.9);
        }

        .footer-grid {
            display: flex;
            flex-direction: column;
            gap: 24px;
            margin-bottom: 64px;
        }

        @media (min-width: 768px) {
            .footer-grid {
                flex-direction: row;
                justify-content: space-between;
                align-items: flex-start;
            }
        }

        .footer-brand {
            max-width: 320px;
        }

        .footer-logo {
            height: 40px;
            margin-bottom: 16px;
        }

        .footer-brand p {
            color: var(--on-surface-variant);
            font-size: 16px;
            margin-bottom: 24px;
        }

        .social-icons {
            display: flex;
            gap: 16px;
        }

        .social-icon {
            color: var(--on-surface-variant);
            cursor: pointer;
            transition: color 0.2s;
        }

        .social-icon:hover {
            color: var(--primary);
        }

        .footer-links-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 28px;
        }

        @media (min-width: 768px) {
            .footer-links-wrapper {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        .footer-col h5 {
            font-size: 14px;
            font-weight: 500;
            color: var(--on-surface);
            margin-bottom: 10px;
        }

        .footer-links {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .footer-links a {
            text-decoration: none;
            font-size: 12px;
            color: var(--on-surface-variant);
            transition: color 0.2s;
        }

        .footer-links a:hover {
            color: var(--primary);
        }

        .footer-bottom {
            border-top: 1px solid rgba(129, 114, 133, 0.3);
            padding: 32px 0;
            text-align: center;
            font-size: 12px;
            color: var(--on-surface-variant);
        }

.hero1 {
    width:65%;
}

.hero2 {
    width:35%;
}

.herotext {
	background:rgb(255, 255, 255);
	border:1px solid #ccc;
	/* border-bottom:2px solid #fff;
	border-right:2px solid #fff; */
	border-radius:10px;
    margin-top:50px;
	width:calc(100% - 0px);
	padding:20px;
	padding-top:30px;
    /* box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); */
}

.herotext p {
	margin-bottom:10px;
}

.purple {
	color:#ad26ec;
}

.navright {
	text-align:right;

	width:calc(100% - 140px);
	/* padding:10px;
	padding-right:20px; */
	display: grid;
    place-items: center;
	display:none;
}

.navopener {
	/* background: rgba(0, 0, 0, 0.2); */
	/* border:1px solid #ad26ec; */
	border:1px solid #ad26ec;
	border-bottom:2px solid #ad26ec;
	width:40px;
	height:40px;
	/* margin-top:10px; */
	text-align:center !important;
	padding:10px;
	font-size:24px; line-height:18px;
	border-radius:10px;
	cursor:pointer;
	right:0;
}

.navmenuline {
	width:100%;
	height:1px;
	background:rgb(0, 0, 0, 0.6);
	margin-bottom:5px;
	border-radius:5px;
}


.navmenu {
	position:fixed;
	z-index:1001;
	background:rgba(173, 38, 236, 0.9);
    background:#fff;
	width:calc(100% - 40px);
	height:auto;
	padding:5px;
	left:20px;
	top:80px;
	text-align:left;
	border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}

.navmenu a {
	display:block;
	width:calc(100% - 0px);
	padding:10px;
	background:rgba(173, 38, 236, 0.75);
    /* background:#ad26ec; */
    border-bottom:1px solid rgba(255, 255, 255, 0.2);
	margin-bottom:2px;
	border-radius:5px;
	text-decoration:none;
    text-align:center;
	color:#fff;
	font-family: 'DMsans-Light', Arial, sans-serif;
}

.navmenu a:hover {
	background:rgba(173, 38, 236, 0.95);
    color:#fff;
}

.navmenu i {
	font-size:16px;
}

.fixedScrollUp {
	position:fixed; bottom:20px; right:20px; color:#fff; z-index:9999;
	height:40px; 
	width:40px;
	cursor: pointer;
	background:#ad26ec;
	border-radius: 50%;
	text-align:center;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35);
}

.fixedScrollUp h6 {
	transform: rotate(-90deg);
	font-size:20px; line-height:36px;
}

.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.5s;
}

.emailform_warn {
    margin-top:5px;
    color:#faf201;
}

.hide {
	display:none;
}

.show {
	display:inline;
}

#about {
	scroll-margin-top: 40px;
}

#signupbutton a {
    display:block;
    text-decoration: none;
    width:100%;
}
.animation {
    opacity: 0;
    /* transform: translateX(30px); */
    transform:scale(0.5);
    transition: all 0.7s ease-out;
    transition-delay: 0.1s;

}

.scroll-animation {
    opacity: 1;
    /* transform: translateX(0); */
    transform:scale(1);
}

.youtube-container {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /*16:9 aspect ratio*/
	height: 0;
	overflow: hidden;
	max-width: 100%;
	/* background: #000; */
	/* border-radius:25px; */
}

.youtube-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.hidex {
    position:fixed;
    left:-1000px;
}

 /* Smartphones (portrait and landscape) ----------- */
@media screen 
and (min-width: 320px) 
and (max-width: 600px) 
{

    .navright {
	text-align:right;
	/* width:calc(100% - 140px); */
    /* background:#ccc; */
	/* padding:10px;
	padding-right:20px; */
	display: grid;
    place-items: center right;
	
}

/* Feature Sections */
.feature-section {
    width:calc(100% - 0px);
    padding: 0px 0;
    padding-bottom:0px;
    padding-left:20px;
    padding-right:20px;
    margin-top: 30px;
}

.results {
    padding: 46px 0;
    text-align: center;
    padding-left:10px;
    padding-right:10px;
     width:calc(100% - 20px);
}

.hero {
    padding-bottom: 0px;
    padding-right:0px;
    padding-left:00px;
    width:calc(100% - 40px);
}




.hero-description {
    /* text-align:center; */
    margin-bottom: 30px;
}

.hero-title {
    text-align:left;
    margin-bottom:10px;
}

.hero1 {
    width:100%;
}

.hero2 {
    width:100%;
}

.hero-grid {
	display:block;
}

.herotext {
    margin-top:60px;
}

.hero-floating-badge {
    padding:10px;
    bottom: -34px;
    left: 24px;
}


.hero-floating-widget {
    width:150px;
    top:-20px;
    right:-10px;
}

.pricing {
    padding:30px;
    margin-bottom:40px;
}

.pricing-card {
    padding:20px;
    padding-top:50px;
}

.builder-website {
    width: 300px;
    bottom: 170px;
    right: 20px;
}

.builder-website-mob {
    width: 150px;
    bottom: 50px;
    left: 10px;
}

.builder-booking {
    width: 300px;
    bottom: -40px;
    right: 30px;
}

 .video-section {
    padding-left:20px;
    padding-right:20px;
 }

 .feature-desc a {
    width:100%;
 }

}