/* * Kran-App Landing Page Styles * Construction Management Software *  * Design System: Light mode, mobile-first * Inspired by: Procore, RakenApp, Opteam.ai *//* ============================================   CSS RESET & BASE   ============================================ */*,*::before,*::after {    box-sizing: border-box;    margin: 0;    padding: 0;}html {    scroll-behavior: smooth;    font-size: 16px;}body {    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;    background-color: var(--background);    color: var(--dark);    line-height: 1.6;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;}/* ============================================   DESIGN TOKENS / CSS VARIABLES   ============================================ */:root {    /* Primary Color Palette - LIGHT MODE */    --primary: #001F3D;    --primary-rgb: 0, 31, 61;    --primary-light: #A1D2E2;    --primary-light-rgb: 161, 210, 226;    --accent: #FAA80F;    --accent-rgb: 250, 168, 15;    --background: #F2F2F2;    --background-rgb: 242, 242, 242;    --dark: #141301;    --dark-rgb: 20, 19, 1;    /* Extended Palette */    --white: #FFFFFF;    --gray-50: #FAFAFA;    --gray-100: #F5F5F5;    --gray-200: #E5E5E5;    --gray-300: #D4D4D4;    --gray-400: #A3A3A3;    --gray-500: #737373;    --gray-600: #525252;    --gray-700: #404040;    --gray-800: #262626;    --gray-900: #171717;    /* Semantic Colors */    --success: #22C55E;    --warning: #F59E0B;    --error: #EF4444;    --info: #3B82F6;    /* Typography Scale */    --font-xs: 0.75rem;    /* 12px */    --font-sm: 0.875rem;    /* 14px */    --font-base: 1rem;    /* 16px */    --font-lg: 1.125rem;    /* 18px */    --font-xl: 1.25rem;    /* 20px */    --font-2xl: 1.5rem;    /* 24px */    --font-3xl: 1.875rem;    /* 30px */    --font-4xl: 2.25rem;    /* 36px */    --font-5xl: 3rem;    /* 48px */    --font-6xl: 3.75rem;    /* 60px */    /* Font Weights */    --font-light: 300;    --font-normal: 400;    --font-medium: 500;    --font-semibold: 600;    --font-bold: 700;    /* Spacing Scale */    --space-1: 0.25rem;    /* 4px */    --space-2: 0.5rem;    /* 8px */    --space-3: 0.75rem;    /* 12px */    --space-4: 1rem;    /* 16px */    --space-5: 1.25rem;    /* 20px */    --space-6: 1.5rem;    /* 24px */    --space-8: 2rem;    /* 32px */    --space-10: 2.5rem;    /* 40px */    --space-12: 3rem;    /* 48px */    --space-16: 4rem;    /* 64px */    --space-20: 5rem;    /* 80px */    --space-24: 6rem;    /* 96px */    /* Border Radius */    --radius-sm: 0.25rem;    --radius-md: 0.5rem;    --radius-lg: 0.75rem;    --radius-xl: 1rem;    --radius-2xl: 1.5rem;    --radius-full: 9999px;    /* Shadows */    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);    /* Transitions */    --transition-fast: 150ms ease;    --transition-base: 250ms ease;    --transition-slow: 350ms ease;    /* Container Widths */    --container-sm: 640px;    --container-md: 768px;    --container-lg: 1024px;    --container-xl: 1280px;    --container-2xl: 1440px;    /* Z-Index Scale */    --z-dropdown: 100;    --z-sticky: 200;    --z-fixed: 300;    --z-modal-backdrop: 400;    --z-modal: 500;    --z-popover: 600;    --z-tooltip: 700;}/* ============================================   TYPOGRAPHY   ============================================ */h1,h2,h3,h4,h5,h6 {    font-weight: var(--font-bold);    line-height: 1.2;    color: var(--primary);}h1 {    font-size: var(--font-4xl);}h2 {    font-size: var(--font-3xl);}h3 {    font-size: var(--font-2xl);}h4 {    font-size: var(--font-xl);}h5 {    font-size: var(--font-lg);}h6 {    font-size: var(--font-base);}@media (min-width: 768px) {    h1 {        font-size: var(--font-5xl);    }    h2 {        font-size: var(--font-4xl);    }    h3 {        font-size: var(--font-3xl);    }}@media (min-width: 1024px) {    h1 {        font-size: var(--font-6xl);    }    h2 {        font-size: var(--font-5xl);    }}p {    color: var(--gray-600);    margin-bottom: var(--space-4);}a {    color: var(--primary);    text-decoration: none;    transition: color var(--transition-fast);}a:hover {    color: var(--accent);}/* ============================================   LAYOUT UTILITIES   ============================================ */.container {    width: 100%;    max-width: var(--container-xl);    margin: 0 auto;    padding: 0 var(--space-4);}@media (min-width: 768px) {    .container {        padding: 0 var(--space-6);    }}@media (min-width: 1024px) {    .container {        padding: 0 var(--space-8);    }}.section {    padding: var(--space-16) 0;}@media (min-width: 768px) {    .section {        padding: var(--space-20) 0;    }}@media (min-width: 1024px) {    .section {        padding: var(--space-24) 0;    }}/* Flexbox Utilities */.flex {    display: flex;}.flex-col {    flex-direction: column;}.flex-wrap {    flex-wrap: wrap;}.items-center {    align-items: center;}.items-start {    align-items: flex-start;}.justify-center {    justify-content: center;}.justify-between {    justify-content: space-between;}.justify-end {    justify-content: flex-end;}.gap-2 {    gap: var(--space-2);}.gap-4 {    gap: var(--space-4);}.gap-6 {    gap: var(--space-6);}.gap-8 {    gap: var(--space-8);}/* Grid Utilities */.grid {    display: grid;}.grid-cols-1 {    grid-template-columns: repeat(1, 1fr);}.grid-cols-2 {    grid-template-columns: repeat(2, 1fr);}.grid-cols-3 {    grid-template-columns: repeat(3, 1fr);}.grid-cols-4 {    grid-template-columns: repeat(4, 1fr);}/* Text Utilities */.text-center {    text-align: center;}.text-left {    text-align: left;}.text-right {    text-align: right;}.text-primary {    color: var(--primary);}.text-accent {    color: var(--accent);}.text-white {    color: var(--white);}.text-muted {    color: var(--gray-500);}/* ============================================   BUTTONS   ============================================ */.btn {    display: inline-flex;    align-items: center;    justify-content: center;    gap: var(--space-2);    padding: var(--space-3) var(--space-6);    font-size: var(--font-base);    font-weight: var(--font-semibold);    border-radius: var(--radius-lg);    border: 2px solid transparent;    cursor: pointer;    transition: all var(--transition-base);    text-decoration: none;    white-space: nowrap;}.btn:focus {    outline: none;    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.3);}.btn-primary {    background-color: var(--accent);    color: var(--dark);    border-color: var(--accent);}.btn-primary:hover {    background-color: #e69a0e;    border-color: #e69a0e;    transform: translateY(-2px);    box-shadow: var(--shadow-lg);}.btn-secondary {    background-color: var(--primary);    color: var(--white);    border-color: var(--primary);}.btn-secondary:hover {    background-color: #002d5a;    border-color: #002d5a;    transform: translateY(-2px);    box-shadow: var(--shadow-lg);}.btn-outline {    background-color: transparent;    color: var(--primary);    border-color: var(--primary);}.btn-outline:hover {    background-color: var(--primary);    color: var(--white);}.btn-outline-light {    background-color: transparent;    color: var(--white);    border-color: var(--white);}.btn-outline-light:hover {    background-color: var(--white);    color: var(--primary);}.btn-lg {    padding: var(--space-4) var(--space-8);    font-size: var(--font-lg);}.btn-sm {    padding: var(--space-2) var(--space-4);    font-size: var(--font-sm);}.btn-icon {    width: 20px;    height: 20px;}/* ============================================   HEADER / NAVIGATION   ============================================ */.header {    position: fixed;    top: 0;    left: 0;    right: 0;    z-index: var(--z-fixed);    background-color: rgba(255, 255, 255, 0.95);    backdrop-filter: blur(10px);    border-bottom: 1px solid var(--gray-200);    transition: all var(--transition-base);}.header.scrolled {    box-shadow: var(--shadow-md);}.header-inner {    display: flex;    align-items: center;    justify-content: space-between;    height: 72px;    padding: 0 var(--space-4);}@media (min-width: 768px) {    .header-inner {        padding: 0 var(--space-6);    }}.logo {    display: flex;    align-items: center;    gap: var(--space-3);    font-size: var(--font-xl);    font-weight: var(--font-bold);    color: var(--primary);}.logo img {    height: 40px;    width: auto;}.logo-text {    font-size: var(--font-xl);    font-weight: var(--font-bold);    color: var(--primary);}/* Desktop Navigation */.nav-desktop {    display: none;}@media (min-width: 1024px) {    .nav-desktop {        display: flex;        align-items: center;        gap: var(--space-8);    }}.nav-links {    display: flex;    align-items: center;    gap: var(--space-6);    list-style: none;}.nav-link {    position: relative;    font-size: var(--font-base);    font-weight: var(--font-medium);    color: var(--gray-700);    padding: var(--space-2) 0;    transition: color var(--transition-fast);}.nav-link:hover {    color: var(--primary);}.nav-link::after {    content: '';    position: absolute;    bottom: 0;    left: 0;    width: 0;    height: 2px;    background-color: var(--accent);    transition: width var(--transition-base);}.nav-link:hover::after,.nav-link.active::after {    width: 100%;}/* Dropdown Menu */.nav-item {    position: relative;}.nav-dropdown {    position: absolute;    top: 100%;    left: 0;    min-width: 220px;    background-color: var(--white);    border-radius: var(--radius-lg);    box-shadow: var(--shadow-xl);    padding: var(--space-2) 0;    opacity: 0;    visibility: hidden;    transform: translateY(10px);    transition: all var(--transition-base);    z-index: var(--z-dropdown);    border: 1px solid var(--gray-200);}.nav-item:hover .nav-dropdown {    opacity: 1;    visibility: visible;    transform: translateY(0);}.nav-dropdown-link {    display: flex;    align-items: center;    gap: var(--space-3);    padding: var(--space-3) var(--space-4);    font-size: var(--font-sm);    font-weight: var(--font-medium);    color: var(--gray-700);    transition: all var(--transition-fast);}.nav-dropdown-link:hover {    background-color: var(--gray-100);    color: var(--primary);}.nav-dropdown-link svg {    width: 18px;    height: 18px;    color: var(--gray-400);}.nav-dropdown-link:hover svg {    color: var(--accent);}.nav-link-arrow {    margin-left: 0.25rem;    transition: transform var(--transition-fast);}.nav-item:hover .nav-link-arrow {    transform: rotate(180deg);}.nav-actions {    display: flex;    align-items: center;    gap: var(--space-4);}/* Language Switcher */.lang-switcher {    display: flex;    align-items: center;    gap: var(--space-2);    padding: var(--space-2);    border-radius: var(--radius-md);    background-color: var(--gray-100);    cursor: pointer;    transition: background-color var(--transition-fast);}.lang-switcher:hover {    background-color: var(--gray-200);}.lang-switcher img {    width: 24px;    height: 16px;    border-radius: 2px;    object-fit: cover;}.lang-switcher span {    font-size: var(--font-sm);    font-weight: var(--font-medium);    color: var(--gray-700);}/* Mobile Menu Button */.mobile-menu-btn {    display: flex;    align-items: center;    justify-content: center;    width: 44px;    height: 44px;    background: none;    border: none;    cursor: pointer;    padding: 0;}@media (min-width: 1024px) {    .mobile-menu-btn {        display: none;    }}.hamburger {    width: 24px;    height: 20px;    position: relative;    display: flex;    flex-direction: column;    justify-content: space-between;}.hamburger span {    display: block;    width: 100%;    height: 2px;    background-color: var(--primary);    transition: all var(--transition-base);}.mobile-menu-btn.active .hamburger span:nth-child(1) {    transform: rotate(45deg) translate(6px, 6px);}.mobile-menu-btn.active .hamburger span:nth-child(2) {    opacity: 0;}.mobile-menu-btn.active .hamburger span:nth-child(3) {    transform: rotate(-45deg) translate(6px, -6px);}/* Mobile Navigation */.nav-mobile {    position: fixed;    top: 72px;    left: 0;    right: 0;    bottom: 0;    background-color: var(--white);    padding: var(--space-6);    transform: translateX(100%);    transition: transform var(--transition-base);    overflow-y: auto;    z-index: var(--z-fixed);}.nav-mobile.open {    transform: translateX(0);}@media (min-width: 1024px) {    .nav-mobile {        display: none;    }}.nav-mobile-links {    display: flex;    flex-direction: column;    gap: var(--space-4);    list-style: none;    margin-bottom: var(--space-8);}.nav-mobile-link {    font-size: var(--font-xl);    font-weight: var(--font-medium);    color: var(--gray-700);    padding: var(--space-3) 0;    border-bottom: 1px solid var(--gray-200);}.nav-mobile-link:hover {    color: var(--primary);}.nav-mobile-actions {    display: flex;    flex-direction: column;    gap: var(--space-4);}.nav-mobile-actions .btn {    width: 100%;    justify-content: center;}/* ============================================   HERO SECTION   ============================================ */.hero {    padding-top: calc(72px + var(--space-12));    padding-bottom: var(--space-16);    background: linear-gradient(180deg, var(--white) 0%, var(--background) 100%);    overflow: hidden;}@media (min-width: 768px) {    .hero {        padding-top: calc(72px + var(--space-16));        padding-bottom: var(--space-20);    }}.hero-content {    display: grid;    grid-template-columns: 1fr;    gap: var(--space-12);    align-items: center;}@media (min-width: 1024px) {    .hero-content {        grid-template-columns: 1fr 1fr;        gap: var(--space-16);    }}.hero-text {    text-align: center;}@media (min-width: 1024px) {    .hero-text {        text-align: left;    }}.hero-badge {    display: inline-flex;    align-items: center;    gap: var(--space-2);    padding: var(--space-2) var(--space-4);    background-color: rgba(var(--primary-light-rgb), 0.3);    color: var(--primary);    font-size: var(--font-sm);    font-weight: var(--font-medium);    border-radius: var(--radius-full);    margin-bottom: var(--space-6);}.hero-title {    font-size: var(--font-4xl);    margin-bottom: var(--space-6);    color: var(--primary);}@media (min-width: 768px) {    .hero-title {        font-size: var(--font-5xl);    }}@media (min-width: 1024px) {    .hero-title {        font-size: var(--font-6xl);    }}.hero-title .highlight {    color: var(--accent);}.hero-subtitle {    font-size: var(--font-lg);    color: var(--gray-600);    margin-bottom: var(--space-8);    max-width: 540px;}@media (min-width: 1024px) {    .hero-subtitle {        font-size: var(--font-xl);    }}.hero-features {    display: flex;    flex-direction: column;    gap: var(--space-3);    margin-bottom: var(--space-8);}@media (min-width: 1024px) {    .hero-features {        align-items: flex-start;    }}.hero-feature {    display: flex;    align-items: center;    gap: var(--space-3);    font-size: var(--font-base);    color: var(--gray-700);}.hero-feature-icon {    display: flex;    align-items: center;    justify-content: center;    width: 24px;    height: 24px;    background-color: rgba(var(--accent-rgb), 0.15);    color: var(--accent);    border-radius: var(--radius-full);    flex-shrink: 0;}.hero-feature-icon svg {    width: 14px;    height: 14px;}.hero-actions {    display: flex;    flex-direction: column;    gap: var(--space-4);}@media (min-width: 480px) {    .hero-actions {        flex-direction: row;        justify-content: center;    }}@media (min-width: 1024px) {    .hero-actions {        justify-content: flex-start;    }}/* Hero Visual */.hero-visual {    position: relative;}.device-mockup {    position: relative;    width: 100%;    max-width: 600px;    margin: 0 auto;}.laptop-frame {    position: relative;    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);    border-radius: 20px;    padding: 12px 12px 40px;    box-shadow: var(--shadow-2xl);}.laptop-screen {    position: relative;    border-radius: 8px;    overflow: hidden;    background-color: var(--dark);    aspect-ratio: 16 / 10;}.laptop-screen video,.laptop-screen img {    width: 100%;    height: 100%;    object-fit: cover;}.laptop-base {    position: relative;    height: 12px;    background: linear-gradient(to bottom, #3a3a3a, #2a2a2a);    border-radius: 0 0 4px 4px;    margin: 0 -12px -40px;    display: flex;    align-items: center;    justify-content: center;}.laptop-notch {    width: 100px;    height: 4px;    background-color: #4a4a4a;    border-radius: var(--radius-full);}/* Floating Elements */.hero-float {    position: absolute;    background: var(--white);    border-radius: var(--radius-xl);    padding: var(--space-4);    box-shadow: var(--shadow-lg);    animation: float 6s ease-in-out infinite;}.hero-float-1 {    top: 10%;    right: -20%;    animation-delay: 0s;}.hero-float-2 {    bottom: 20%;    left: -15%;    animation-delay: 2s;}@keyframes float {    0%,    100% {        transform: translateY(0px);    }    50% {        transform: translateY(-15px);    }}/* ============================================   FEATURES SECTION (Interactive Tabs)   ============================================ */.features-section {    background-color: var(--white);}.section-header {    text-align: center;    max-width: 700px;    margin: 0 auto var(--space-12);}.section-header h2 {    margin-bottom: var(--space-4);}.section-header p {    font-size: var(--font-lg);    color: var(--gray-600);}.features-tabs {    display: grid;    grid-template-columns: 1fr;    gap: var(--space-8);    align-items: start;}@media (min-width: 1024px) {    .features-tabs {        grid-template-columns: 350px 1fr;        gap: var(--space-12);    }}.feature-tab-list {    display: flex;    flex-direction: column;    gap: var(--space-2);    list-style: none;}.feature-tab {    display: flex;    align-items: center;    gap: var(--space-4);    padding: var(--space-4) var(--space-5);    background-color: var(--background);    border-radius: var(--radius-lg);    cursor: pointer;    transition: all var(--transition-base);    border: 2px solid transparent;}.feature-tab:hover {    background-color: var(--gray-100);}.feature-tab.active {    background-color: var(--white);    border-color: var(--accent);    box-shadow: var(--shadow-md);}.feature-tab-icon {    display: flex;    align-items: center;    justify-content: center;    width: 48px;    height: 48px;    background-color: rgba(var(--accent-rgb), 0.15);    color: var(--accent);    border-radius: var(--radius-lg);    flex-shrink: 0;}.feature-tab-icon svg {    width: 24px;    height: 24px;}.feature-tab-content h4 {    font-size: var(--font-base);    font-weight: var(--font-semibold);    color: var(--primary);    margin-bottom: var(--space-1);}.feature-tab.active .feature-tab-content h4 {    color: var(--accent);}.feature-tab-arrow {    margin-left: auto;    color: var(--gray-400);    transition: transform var(--transition-fast);}.feature-tab.active .feature-tab-arrow {    color: var(--accent);    transform: translateX(4px);}.feature-tab-arrow svg {    width: 20px;    height: 20px;}.features-explore-link {    display: inline-flex;    align-items: center;    gap: var(--space-2);    margin-top: var(--space-4);    font-weight: var(--font-semibold);    color: var(--accent);}.features-explore-link:hover {    color: var(--primary);}/* Feature Panel */.feature-panels {    position: relative;}.feature-panel {    display: none;    animation: fadeIn 0.3s ease;}.feature-panel.active {    display: block;}@keyframes fadeIn {    from {        opacity: 0;        transform: translateY(10px);    }    to {        opacity: 1;        transform: translateY(0);    }}.feature-panel-content {    display: grid;    grid-template-columns: 1fr;    gap: var(--space-8);    align-items: center;}@media (min-width: 768px) {    .feature-panel-content {        grid-template-columns: 1fr 1.2fr;    }}.feature-panel-text h3 {    font-size: var(--font-2xl);    margin-bottom: var(--space-4);}@media (min-width: 768px) {    .feature-panel-text h3 {        font-size: var(--font-3xl);    }}.feature-panel-text p {    font-size: var(--font-base);    color: var(--gray-600);    margin-bottom: var(--space-6);}.feature-panel-visual {    position: relative;}.phone-mockup {    position: relative;    width: 280px;    margin: 0 auto;    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);    border-radius: 40px;    padding: 12px;    box-shadow: var(--shadow-2xl);}.phone-screen {    border-radius: 28px;    overflow: hidden;    background-color: var(--white);    aspect-ratio: 9 / 19;}.phone-screen img {    width: 100%;    height: 100%;    object-fit: cover;}.phone-notch {    position: absolute;    top: 8px;    left: 50%;    transform: translateX(-50%);    width: 80px;    height: 24px;    background-color: #1a1a1a;    border-radius: 12px;}/* ============================================   BENEFITS SECTION   ============================================ */.benefits-section {    background-color: var(--background);}.benefits-grid {    display: grid;    grid-template-columns: 1fr;    gap: var(--space-8);}@media (min-width: 768px) {    .benefits-grid {        grid-template-columns: repeat(2, 1fr);    }}@media (min-width: 1200px) {    .benefits-grid {        grid-template-columns: repeat(4, 1fr);    }}.benefit-card {    background-color: var(--white);    border-radius: var(--radius-xl);    padding: var(--space-6);    transition: all var(--transition-base);}.benefit-card:hover {    transform: translateY(-4px);    box-shadow: var(--shadow-lg);}.benefit-icon {    display: flex;    align-items: center;    justify-content: center;    width: 56px;    height: 56px;    background-color: rgba(var(--accent-rgb), 0.15);    color: var(--accent);    border-radius: var(--radius-lg);    margin-bottom: var(--space-4);}.benefit-icon svg {    width: 28px;    height: 28px;}.benefit-card h4 {    font-size: var(--font-lg);    margin-bottom: var(--space-3);    color: var(--primary);}.benefit-card p {    font-size: var(--font-sm);    color: var(--gray-600);    margin: 0;}/* ============================================   TRADE DEMOS SECTION   ============================================ */.demos-section {    background-color: var(--gray-100);    border-top: 1px solid var(--gray-200);    border-bottom: 1px solid var(--gray-200);}.demo-filter {    display: flex;    flex-direction: column;    align-items: center;    gap: var(--space-6);    margin-bottom: var(--space-12);}@media (min-width: 768px) {    .demo-filter {        flex-direction: row;        justify-content: center;    }}.demo-select {    position: relative;    min-width: 280px;}.demo-select select {    width: 100%;    padding: var(--space-4) var(--space-6);    padding-right: var(--space-12);    font-size: var(--font-base);    font-weight: var(--font-medium);    color: var(--primary);    background-color: var(--white);    border: 2px solid var(--gray-300);    border-radius: var(--radius-lg);    cursor: pointer;    appearance: none;    transition: all var(--transition-fast);}.demo-select select:focus {    outline: none;    border-color: var(--accent);    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.2);}.demo-select::after {    content: '';    position: absolute;    right: var(--space-5);    top: 50%;    transform: translateY(-50%);    width: 0;    height: 0;    border-left: 6px solid transparent;    border-right: 6px solid transparent;    border-top: 6px solid var(--gray-500);    pointer-events: none;}.demo-play-btn {    opacity: 0;    visibility: hidden;    transform: translateX(-10px);    transition: all var(--transition-base);}.demo-play-btn.visible {    opacity: 1;    visibility: visible;    transform: translateX(0);}/* Demo Video Modal */.demo-modal {    position: fixed;    top: 0;    left: 0;    right: 0;    bottom: 0;    background-color: rgba(0, 0, 0, 0.9);    display: flex;    align-items: center;    justify-content: center;    z-index: var(--z-modal);    opacity: 0;    visibility: hidden;    transition: all var(--transition-base);}.demo-modal.open {    opacity: 1;    visibility: visible;}.demo-modal-content {    position: relative;    width: 90%;    max-width: 900px;    background-color: var(--dark);    border-radius: var(--radius-xl);    overflow: hidden;}.demo-modal-close {    position: absolute;    top: var(--space-4);    right: var(--space-4);    width: 44px;    height: 44px;    display: flex;    align-items: center;    justify-content: center;    background-color: rgba(255, 255, 255, 0.1);    border: none;    border-radius: var(--radius-full);    color: var(--white);    cursor: pointer;    z-index: 10;    transition: background-color var(--transition-fast);}.demo-modal-close:hover {    background-color: rgba(255, 255, 255, 0.2);}.demo-modal-close svg {    width: 24px;    height: 24px;}.demo-video-container {    aspect-ratio: 16 / 9;}.demo-video-container video {    width: 100%;    height: 100%;    object-fit: contain;}/* ============================================   DETAILED FEATURES (Alternating Layout)   ============================================ */.detailed-section {    background-color: var(--background);}.feature-row {    display: grid;    grid-template-columns: 1fr;    gap: var(--space-8);    align-items: center;    margin-bottom: var(--space-16);}@media (min-width: 1024px) {    .feature-row {        grid-template-columns: repeat(2, 1fr);        gap: var(--space-12);    }    .feature-row.reverse .feature-row-visual {        order: -1;    }}.feature-row:last-child {    margin-bottom: 0;}.feature-row-text span {    display: inline-block;    font-size: var(--font-sm);    font-weight: var(--font-semibold);    color: var(--accent);    text-transform: uppercase;    letter-spacing: 0.05em;    margin-bottom: var(--space-3);}.feature-row-text h3 {    font-size: var(--font-2xl);    margin-bottom: var(--space-4);}@media (min-width: 768px) {    .feature-row-text h3 {        font-size: var(--font-3xl);    }}.feature-row-text p {    color: var(--gray-600);    margin-bottom: var(--space-6);}.feature-row-visual {    position: relative;}.feature-screenshot {    border-radius: var(--radius-xl);    overflow: hidden;    box-shadow: var(--shadow-xl);}.feature-screenshot img {    width: 100%;    height: auto;    display: block;}/* ============================================   SHOWCASE CARDS SECTION (RakenApp Style)   ============================================ */.showcase-section {    background-color: var(--background);    padding-bottom: var(--space-16);}.showcase-section .section-header {    margin-bottom: var(--space-12);}.showcase-grid {    display: grid;    grid-template-columns: 1fr;    gap: var(--space-6);}@media (min-width: 768px) {    .showcase-grid {        grid-template-columns: repeat(2, 1fr);    }}.showcase-card {    background-color: var(--gray-50);    border: 1px solid var(--gray-200);    border-radius: var(--radius-xl);    padding: var(--space-8);    transition: all var(--transition-base);}.showcase-card:hover {    transform: translateY(-4px);    box-shadow: var(--shadow-lg);}.showcase-card h3 {    font-size: var(--font-2xl);    margin-bottom: var(--space-3);    color: var(--primary);}@media (min-width: 768px) {    .showcase-card h3 {        font-size: var(--font-3xl);    }}.showcase-card p {    font-size: var(--font-base);    color: var(--gray-600);    margin-bottom: var(--space-6);}.showcase-card-visual {    background-color: var(--white);    border: 2px solid var(--gray-200);    border-radius: var(--radius-lg);    padding: var(--space-4);    min-height: 240px;    display: flex;    align-items: center;    justify-content: center;    overflow: hidden;}.showcase-card-visual img {    max-width: 100%;    max-height: 100%;    object-fit: contain;    border-radius: var(--radius-md);}.showcase-actions {    text-align: center;    margin-top: var(--space-12);}/* ============================================   APP RATINGS / CTA SECTION   ============================================ */.ratings-section {    background-color: var(--white);}.ratings-content {    display: grid;    grid-template-columns: 1fr;    gap: var(--space-12);    align-items: center;}@media (min-width: 1024px) {    .ratings-content {        grid-template-columns: 1fr 1fr;    }}.ratings-text h2 {    font-size: var(--font-3xl);    margin-bottom: var(--space-4);}@media (min-width: 768px) {    .ratings-text h2 {        font-size: var(--font-4xl);    }}.ratings-text p {    font-size: var(--font-lg);    color: var(--gray-600);    margin-bottom: var(--space-8);}.app-ratings {    display: flex;    gap: var(--space-8);    margin-bottom: var(--space-8);}.app-rating {    display: flex;    flex-direction: column;    align-items: center;    gap: var(--space-2);}.app-rating-icon {    width: 48px;    height: 48px;    color: var(--gray-700);}.app-rating-score {    font-size: var(--font-2xl);    font-weight: var(--font-bold);    color: var(--primary);}.app-rating-stars {    display: flex;    gap: 2px;    color: var(--accent);}.app-rating-stars svg {    width: 16px;    height: 16px;    fill: currentColor;}.app-rating-count {    font-size: var(--font-sm);    color: var(--gray-500);}/* ============================================   CONTACT / LEAD CAPTURE (Dark Section)   ============================================ */.contact-section {    background: linear-gradient(135deg, var(--primary) 0%, #002d5a 50%, #001a33 100%);    padding: var(--space-20) 0;}.contact-content {    max-width: 600px;    margin: 0 auto;    text-align: center;}.contact-logo {    width: 64px;    height: 64px;    margin: 0 auto var(--space-6);    background: linear-gradient(135deg, var(--accent) 0%, #e69a0e 100%);    border-radius: var(--radius-xl);    display: flex;    align-items: center;    justify-content: center;}.contact-logo svg {    width: 36px;    height: 36px;    color: var(--white);}.contact-content h2 {    color: var(--white);    font-size: var(--font-3xl);    margin-bottom: var(--space-4);}@media (min-width: 768px) {    .contact-content h2 {        font-size: var(--font-4xl);    }}.contact-content p {    color: rgba(255, 255, 255, 0.8);    font-size: var(--font-lg);    margin-bottom: var(--space-8);}.contact-form {    display: flex;    flex-direction: column;    gap: var(--space-4);    max-width: 400px;    margin: 0 auto var(--space-6);}@media (min-width: 480px) {    .contact-form {        flex-direction: row;    }}.contact-input {    flex: 1;    padding: var(--space-4) var(--space-5);    font-size: var(--font-base);    background-color: var(--white);    border: none;    border-radius: var(--radius-lg);}.contact-input:focus {    outline: none;    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.3);}.contact-input::placeholder {    color: var(--gray-400);}.contact-legal {    font-size: var(--font-xs);    color: rgba(255, 255, 255, 0.6);}.contact-legal a {    color: rgba(255, 255, 255, 0.8);    text-decoration: underline;}.contact-legal a:hover {    color: var(--white);}/* ============================================   PRICING SECTION   ============================================ */.pricing-section {    background-color: var(--background);}.pricing-grid {    display: grid;    grid-template-columns: 1fr;    gap: var(--space-4);    max-width: 1400px;    margin: 0 auto;}@media (min-width: 768px) {    .pricing-grid {        grid-template-columns: repeat(2, 1fr);    }}@media (min-width: 1200px) {    .pricing-grid {        grid-template-columns: repeat(4, 1fr);    }}.pricing-card {    background-color: var(--white);    border-radius: var(--radius-xl);    padding: var(--space-8);    transition: all var(--transition-base);    position: relative;    border: 2px solid transparent;}.pricing-card:hover {    transform: translateY(-4px);    box-shadow: var(--shadow-xl);}.pricing-card.featured {    border-color: var(--accent);    box-shadow: var(--shadow-lg);}@media (min-width: 768px) {    .pricing-card.featured {        transform: scale(1.05);        z-index: 1;    }    .pricing-card.featured:hover {        transform: scale(1.05) translateY(-4px);    }}.pricing-badge {    position: absolute;    top: -12px;    left: 50%;    transform: translateX(-50%);    padding: var(--space-1) var(--space-4);    background-color: var(--accent);    color: var(--dark);    font-size: var(--font-xs);    font-weight: var(--font-bold);    text-transform: uppercase;    letter-spacing: 0.05em;    border-radius: var(--radius-full);}.pricing-header {    text-align: center;    padding-bottom: var(--space-6);    border-bottom: 1px solid var(--gray-200);    margin-bottom: var(--space-6);}.pricing-card h3 {    font-size: var(--font-xl);    color: var(--primary);    margin-bottom: var(--space-2);}.pricing-card .price {    display: flex;    align-items: baseline;    justify-content: center;    gap: var(--space-1);    margin-bottom: var(--space-3);}.pricing-card .price-amount {    font-size: var(--font-4xl);    font-weight: var(--font-bold);    color: var(--primary);}.pricing-card .price-period {    font-size: var(--font-base);    color: var(--gray-500);}.pricing-card .price-desc {    font-size: var(--font-sm);    color: var(--gray-500);}.pricing-features {    list-style: none;    margin-bottom: var(--space-8);}.pricing-feature {    display: flex;    align-items: flex-start;    gap: var(--space-3);    padding: var(--space-3) 0;    font-size: var(--font-sm);    color: var(--gray-700);}.pricing-feature svg {    width: 20px;    height: 20px;    color: var(--success);    flex-shrink: 0;    margin-top: 2px;}.pricing-card .btn {    width: 100%;    justify-content: center;}/* ============================================   FOOTER   ============================================ */.footer {    background-color: var(--primary);    color: var(--white);    padding: var(--space-16) 0 var(--space-8);}.footer-grid {    display: grid;    grid-template-columns: 1fr;    gap: var(--space-8);    margin-bottom: var(--space-12);}@media (min-width: 768px) {    .footer-grid {        grid-template-columns: 2fr repeat(3, 1fr);    }}.footer-brand p {    color: rgba(255, 255, 255, 0.7);    margin-top: var(--space-4);    max-width: 280px;}.footer-column h4 {    font-size: var(--font-sm);    font-weight: var(--font-semibold);    text-transform: uppercase;    letter-spacing: 0.05em;    color: var(--white);    margin-bottom: var(--space-4);}.footer-links {    list-style: none;}.footer-link {    display: block;    padding: var(--space-2) 0;    color: rgba(255, 255, 255, 0.7);    font-size: var(--font-sm);    transition: color var(--transition-fast);}.footer-link:hover {    color: var(--white);}.footer-bottom {    display: flex;    flex-direction: column;    gap: var(--space-4);    padding-top: var(--space-8);    border-top: 1px solid rgba(255, 255, 255, 0.1);}@media (min-width: 768px) {    .footer-bottom {        flex-direction: row;        justify-content: space-between;        align-items: center;    }}.footer-copyright {    font-size: var(--font-sm);    color: rgba(255, 255, 255, 0.6);}.footer-social {    display: flex;    gap: var(--space-4);}.footer-social a {    display: flex;    align-items: center;    justify-content: center;    width: 40px;    height: 40px;    background-color: rgba(255, 255, 255, 0.1);    border-radius: var(--radius-full);    color: var(--white);    transition: all var(--transition-fast);}.footer-social a:hover {    background-color: var(--accent);    color: var(--dark);}.footer-social svg {    width: 20px;    height: 20px;}/* ============================================   ANIMATIONS & SCROLL EFFECTS   ============================================ */.fade-in {    opacity: 1;    transform: translateY(0);    transition: opacity 0.6s ease, transform 0.6s ease;}.fade-in.visible {    opacity: 1;    transform: translateY(0);}.slide-in-left {    opacity: 1;    transform: translateX(0);    transition: opacity 0.6s ease, transform 0.6s ease;}.slide-in-left.visible {    opacity: 1;    transform: translateX(0);}.slide-in-right {    opacity: 1;    transform: translateX(0);    transition: opacity 0.6s ease, transform 0.6s ease;}.slide-in-right.visible {    opacity: 1;    transform: translateX(0);}/* Stagger delays */.stagger-1 {    transition-delay: 0.1s;}.stagger-2 {    transition-delay: 0.2s;}.stagger-3 {    transition-delay: 0.3s;}.stagger-4 {    transition-delay: 0.4s;}.stagger-5 {    transition-delay: 0.5s;}/* ============================================   UTILITY CLASSES   ============================================ */.sr-only {    position: absolute;    width: 1px;    height: 1px;    padding: 0;    margin: -1px;    overflow: hidden;    clip: rect(0, 0, 0, 0);    white-space: nowrap;    border: 0;}.hidden {    display: none !important;}@media (max-width: 767px) {    .hidden-mobile {        display: none !important;    }}@media (min-width: 768px) {    .hidden-desktop {        display: none !important;    }}
/* ============================================
   LANGUAGE DROPDOWN (Enhanced)
   ============================================ */
.lang-switcher {
    position: relative;
}

.lang-current {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--space-2) var(--space-3);
    background-color: var(--gray-100);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--gray-700);
    text-decoration: none;
}

.lang-current:hover {
    background-color: var(--gray-200);
}

.lang-current .current-lang {
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
}

.lang-current svg {
    transition: transform var(--transition-fast);
}

.lang-switcher.open .lang-current svg {
    transform: rotate(180deg);
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 150px;
    background-color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-base);
    z-index: var(--z-dropdown);
    overflow: hidden;
}

.lang-switcher.open .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    color: var(--gray-700);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.lang-option:hover {
    background-color: var(--gray-100);
    color: var(--primary);
}

.lang-option.active {
    background-color: rgba(var(--accent-rgb), 0.1);
    color: var(--accent);
}

.lang-option .lang-flag {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lang-option .lang-flag svg {
    width: 100%;
    height: 100%;
}

/* Mobile language switcher */
.lang-switcher-mobile {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-4);
    border-top: 1px solid var(--gray-200);
    margin-top: var(--space-4);
}

.lang-switcher-mobile .lang-option {
    flex: 1;
    justify-content: center;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

.lang-switcher-mobile .lang-option.active {
    border-color: var(--accent);
    background-color: rgba(var(--accent-rgb), 0.1);
}