/* CSS Custom Properties */
:root {
    --hero-text-color: #000000;
    --button-bg: #FFFFFFCC;
    --button-border-start: #D3D3D3;
    --feature-box-bg-start: #EDEDED;
    --feature-box-border-start: rgba(255, 255, 255, 0.28);
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, sans-serif;
    overflow-x: hidden;
    transform: scale(0.6);
    transform-origin: top left;
    width: 166.667%; /* Compensate for scale to maintain layout */
    height: 166.667%;
}

/* Header Styles */
.header {
    position: relative;
    z-index: 10;
}

/* Logo Section */
.logo-section {
    position: absolute;
    top: 72px;
    left: 140px;
    z-index: 11;
}

.logo {
    width: 189px;
    height: 71px;
    opacity: 1;
    transform: rotate(0deg);
    display: block;
}

.nav {
    position: relative;
    z-index: 11;
}

/* Menu Container */
.menu-container {
    position: absolute;
    width: 1168px;
    height: 46px;
    top: 78px;
    left: 656px;
    opacity: 1;
    transform: rotate(0deg);
    display: flex;
    align-items: center;
    gap: 40px; /* Spacing between menu items */
}

/* Menu Items */
.menu-item {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, sans-serif;
    font-weight: 590;
    font-style: normal;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: var(--hero-text-color);
    text-decoration: none;
    opacity: 1;
    transform: rotate(0deg);
    cursor: pointer;
}

.menu-home {
    width: 83.63392639160156px;
    height: 20px;
    display: flex;
    align-items: center;
}

/* Auth Container (Frame 4) */
.auth-container {
    position: absolute;
    width: 199px;
    height: 46px;
    top: 78px;
    left: 1625px;
    opacity: 1;
    transform: rotate(0deg);
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 11;
}

/* Auth Links */
.auth-link {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, sans-serif;
    font-weight: 590;
    font-style: normal;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--hero-text-color);
    text-decoration: none;
    opacity: 1;
    transform: rotate(0deg);
    cursor: pointer;
    vertical-align: middle;
}

.auth-login {
    width: 59px;
    height: 20px;
    display: flex;
    align-items: center;
}

/* Sign Up Frame (Frame 1) */
.auth-signup {
    width: 124px;
    height: 46px;
    border-radius: 40px;
    background: #FFFFFF;
    opacity: 1;
    transform: rotate(0deg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px 8px 16px;
    box-sizing: border-box;
}

/* Hero Section */
.hero-section {
    position: relative;
    width: 100%;
    min-height: 1118px;
    overflow: hidden;
}

/* Banner Image */
.banner-image {
    position: absolute;
    width: 2471px;
    height: 1118px;
    left: -221px;
    top: 0;
    background-image: url('images/3d-cartoon-airplane-sky 2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: 1;
}

/* Hero Content Container */
.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 1118px;
    overflow: visible;
}

/* Hero Text */
.hero-text {
    position: absolute;
    width: 875px;
    height: 399px;
    top: 248px;
    left: 140px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 76px;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: capitalize;
    color: var(--hero-text-color);
    background: transparent;
    mix-blend-mode: hard-light;
    margin: 0;
    padding: 0;
    opacity: 1;
    transform: rotate(0deg);
}

/* Subtitle Text */
.hero-subtitle {
    position: absolute;
    top: 550px; /* Positioned immediately below hero text with spacing */
    left: 140px;
    width: auto;
    max-width: 875px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, sans-serif;
    font-weight: 500; /* Changed from 510 to 500 for better browser support */
    font-style: normal;
    font-size: 20px;
    line-height: 1.2; /* Changed from 100% to 1.2 for better visibility */
    letter-spacing: 0%;
    color: #000000;
    background: transparent;
    margin: 0;
    padding: 0;
    opacity: 1;
    transform: rotate(0deg);
    z-index: 10;
    visibility: visible;
    display: block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Know More Button */
.know-more-btn {
    position: absolute;
    width: 240px;
    height: 50px;
    top: 639px;
    left: 140px;
    border-radius: 30px;
    background: var(--button-bg);
    opacity: 1;
    transform: rotate(0deg);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: none;
}

/* Gradient border using pseudo-element */
.know-more-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 30px;
    background: linear-gradient(180deg, var(--button-border-start) 0%, rgba(255, 255, 255, 0) 100%);
    padding: 1px;
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    z-index: -1;
    pointer-events: none;
}

/* Button Text Container */
.know-more-btn .btn-text {
    position: relative;
    width: 167px;
    height: 43px;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 26px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    color: var(--hero-text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transform: rotate(0deg);
    z-index: 1;
}

/* Feature Boxes Container */
.feature-boxes {
    position: absolute;
    top: 769px;
    left: 555px;
    display: flex;
    gap: 20px; /* Spacing between boxes - adjust based on design */
    z-index: 3;
}

/* Feature Box Base Styles (Rectangle 14340) */
.feature-box {
    width: 395px;
    height: 315px;
    border-radius: 30px;
    background: linear-gradient(180deg, var(--feature-box-bg-start) 0%, rgba(255, 255, 255, 0) 100%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px); /* Safari support */
    opacity: 1;
    transform: rotate(0deg);
    position: relative;
    border: none;
    overflow: visible; /* Changed from hidden to visible so title can be seen */
}

/* Gradient border using pseudo-element */
.feature-box::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 30px;
    background: linear-gradient(180deg, var(--feature-box-border-start) 0%, rgba(255, 255, 255, 0) 100%);
    padding: 3px;
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    z-index: -1;
    pointer-events: none;
}

.feature-box-left {
    /* Left box - Rectangle 14340 */
}

/* Feature Box Title */
.feature-box-title {
    position: absolute;
    width: 237px; /* Increased to better fit feature box width (395px * 0.6 = 237px) */
    height: 45.6px; /* 76px * 0.6 */
    top: 32.4px; /* 54px * 0.6 */
    left: 20px; /* Adjusted for better alignment */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 26px; /* Increased from 22px for better prominence */
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #000000;
    background: transparent;
    margin: 0;
    padding: 0;
    opacity: 1;
    transform: rotate(0deg);
    z-index: 1;
}

/* Feature Box Content */
.feature-box-content {
    position: absolute;
    width: 220px; /* Increased to better fit feature box width */
    height: auto; /* Allow height to adjust for text wrapping */
    top: 106.8px; /* (947px - 769px) * 0.6 = 178px * 0.6 */
    left: 20px; /* Adjusted to align with title */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, sans-serif;
    font-weight: 500; /* 510 converted to 500 for browser support */
    font-style: normal;
    font-size: 13px; /* Slightly increased from 12px for better readability */
    line-height: 1.4; /* Increased line-height for better text wrapping */
    letter-spacing: 0%;
    color: #000000;
    background: transparent;
    margin: 0;
    padding: 0;
    opacity: 1;
    transform: rotate(0deg);
    z-index: 1;
}

.feature-box-center {
    /* Center box - will match left box styling */
}

.feature-box-right {
    /* Right box - will match left box styling */
}

/* Responsive adjustments can be added in next phase */