/*=============== VARIABLES CSS ===============*/
/* Design tokens (2026-08-27 redesign, toptier.relats.com reference):
   ONE warm near-black theme. The OLD variable names (--body-color,
   --container-color, --title-color, --first-color …) are aliases of the
   semantic tokens below, so every stylesheet that consumes them follows
   this palette automatically. */
:root {
    --header-height: 3.5rem;

    /*========== Semantic tokens — DARK (default) ==========*/
    /* 2026-08-27 v3 palette (user): monochrome black & white, accent =
       near-white with a touch of gray-blue. */
    --bg: #0A0A0B;             /* neutral near-black            */
    --bg-rgb: 10, 10, 11;
    --bg-elev: #131315;        /* cards / panels                */
    --bg-elev-2: #1A1A1D;      /* raised hover / featured       */
    --ink: #F5F5F5;            /* titles (white)                */
    --ink-2: #C9CBCE;          /* body text (cool gray)         */
    --ink-3: #86898E;          /* muted                         */
    --ink-rgb: 245, 245, 245;
    --line: rgba(245, 245, 245, 0.09);
    --accent: #D6DEE9;         /* near-white with gray-blue tint*/
    --accent-rgb: 214, 222, 233;
    --accent-strong: #F2F5F9;  /* almost pure white             */
    --accent-ink: #0A0A0B;     /* black text ON accent surfaces */
    --glass: rgba(19, 19, 21, 0.55);
    --glass-strong: rgba(19, 19, 21, 0.85);
    --gloss: rgba(255, 255, 255, 0.22);     /* specular top edge */
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.5);

    /*========== Legacy aliases (consumed across all css files) ==========*/
    --first-color: var(--accent);
    --first-color-rgb: var(--accent-rgb);
    --first-color-alt: var(--accent-strong);
    --first-color-light: #EDF1F7;
    --first-color-lighten: #FBFCFE;
    --title-color: var(--ink);
    --text-color: var(--ink-2);
    --text-color-light: var(--ink-3);
    --border-color: var(--line);
    --container-color: var(--bg-elev);
    --body-color: var(--bg);

    /*========== Aurora (warm glow, was blue) ==========*/
    --aurora-blue: var(--accent);
    --aurora-blue-rgb: var(--accent-rgb);

    /*========== Font and typography ==========*/
    --body-font: "Instrument Sans", Helvetica, Arial, sans-serif;
    --biggest-font-size: 2.25rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 0.9rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;
  
    /*========== Font weight ==========*/
    --font-medium: 500;
    --font-semi-bold: 600;
  
    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
  }
  
/* (Light theme removed 2026-08-27 per user decision — the warm dark
   palette above is the single theme. The semantic-token layer stays so a
   future second theme is one override block away.) */

  /*========== Font Imports ==========*/
/* NOTE: late @import is ignored by browsers (must precede all rules) —
   fonts are loaded via <link> tags in each page's <head> instead. */

/*========== Responsive typography ==========*/
  @media screen and (min-width: 1150px) {
    :root {
      --biggest-font-size: 4rem;
      --h1-font-size: 2.25rem;
      --h2-font-size: 1.5rem;
      --h3-font-size: 0.9rem;
      --normal-font-size: 1rem;
      --small-font-size: .875rem;
      --smaller-font-size: .813rem;
    }
  }

html{
    scroll-behavior: smooth;
}

body{
    margin: 0; /* Ensure no default margin */
    padding: 0;
    background-color: var(--body-color);
    font-family: var(--body-font);
    color: var(--text-color);
    /* Smooth theme flips */
    transition: background-color .35s ease, color .35s ease;
}

.global-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(var(--accent-rgb), 0.14) 0%, rgba(var(--accent-rgb), 0.05) 40%, transparent 70%),
        radial-gradient(ellipse 40% 30% at 50% 0%, rgba(var(--accent-rgb), 0.18) 0%, transparent 60%);
    z-index: -1; /* Between bg-animation (-2) and glass panels (0) */
    pointer-events: none;
}

/* ── Hero kicker (Photyra-style spaced-caps label over the display type) */
.hero-kicker {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 10px 2px;
}

/* ── Hero scroll cue (Photyra-style "Scroll" + breathing tick) */
.hero-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    transition: color 0.3s ease;
}
.hero-scroll-cue:hover { color: rgba(255, 255, 255, 0.85); }
.hero-scroll-cue-line {
    width: 1px;
    height: 26px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.7), transparent);
    animation: hero-scroll-breathe 2.2s ease-in-out infinite;
    transform-origin: top;
}
@keyframes hero-scroll-breathe {
    0%, 100% { transform: scaleY(0.35); opacity: 0.4; }
    50%      { transform: scaleY(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-scroll-cue-line { animation: none; }
}

/* Hero AI-content badge sits above the overlay, clear of the scroll cue */
.media-ai-badge--hero { z-index: 3; }

/* ── Gloss utility (2026-08-27 redesign) ─────────────────────────────
   Specular top edge + inner hairline, the reference's "glossy pill"
   read. Applied to the card surfaces below via their own selectors. */
.card, .pricing-card, .beta-cta-card {
    position: relative;
}
.card::before, .pricing-card::before, .beta-cta-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--gloss), transparent 18%);
    opacity: .5;
    mix-blend-mode: soft-light;
}



.main{
    /* overflow:hidden breaks position:sticky — use clip instead.
       clip is Safari 16+, so add a fallback that keeps sticky working
       by clipping on <html> rather than on a mid-tree ancestor. */
    overflow: clip;
}
@supports not (overflow: clip) {
    .main { overflow: visible; }
    html { overflow-x: hidden; }
}

.container{
    max-width: 1200px;
    margin: 0 auto;
}

/* Reference typography (Roobert look): tight tracking on all headings */
h1, h2, h3, h4 {
    letter-spacing: -0.02em;
}

/* HEADER extracted to css/header.css */

/* Hero section styles */
.hero-section{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Video container in hero section */
.hero-vid{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.hero-main-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    padding: 0 50px;
    height: 100%;
}

.hero-text-content {
    color: var(--title-color);
    max-width: 500px;
}

.hero-app-name {
    font-family: var(--body-font);
    font-weight: 600;
    letter-spacing: -0.02em;
    font-size: 5rem; /* 80px */
    font-weight: 700;
    margin: 0 0 1rem 0;
    line-height: 1.1;
    color: var(--title-color);
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

.hero-description {
    font-size: 1.125rem; /* 18px */
    color: var(--text-color);
    margin: 0 0 2rem 0;
    line-height: 1.6;
}

.hero-advert-text-wrapper {
    height: 40px; /* Adjust to fit one line of text */
    overflow: hidden;
}

.hero-advert-text-slider {
    display: flex;
    flex-direction: column;
    transition: transform 0.5s ease-in-out;
}

.hero-advert-text {
    font-size: 1.5rem; /* 24px */
    font-weight: 500;
    height: 40px; /* Match wrapper height */
    margin: 0;
    display: flex;
    align-items: center;
    background: linear-gradient(to right, var(--first-color-light), var(--first-color));
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animate-gradient 3s linear infinite;
}

.video-slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    height: 100%;
}

/* Make the image slideshow a flex item */
/* ── Phone Frame ─────────────────────────────────────────────────── */
.phone-frame {
    position: relative;
    flex-shrink: 0;
    width: 240px;
    height: 496px;
    border-radius: 36px;
    background: linear-gradient(145deg, #1a1a1e 0%, #0d0d0f 100%);
    border: 2.5px solid rgba(255,255,255,0.12);
    box-shadow:
        0 25px 80px rgba(0,0,0,0.7),
        0 0 0 1px rgba(255,255,255,0.06),
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 0 60px rgba(var(--accent-rgb),0.08);
    padding: 10px;
    z-index: 1;
    animation: phoneFloat 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both,
               phoneHover 4s ease-in-out 1.5s infinite;
    transform: rotate(-4deg) perspective(800px) rotateY(8deg);
}

@keyframes phoneFloat {
    0% {
        opacity: 0;
        transform: translateY(120px) rotate(12deg) scale(0.85) perspective(800px) rotateY(-15deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(-4deg) scale(1) perspective(800px) rotateY(8deg);
    }
}

@keyframes phoneHover {
    0%, 100% {
        transform: translateY(0) rotate(-4deg) perspective(800px) rotateY(8deg);
    }
    50% {
        transform: translateY(-15px) rotate(-2deg) perspective(800px) rotateY(5deg);
    }
}

/* Dynamic Island notch */
.phone-notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 28px;
    background: #000;
    border-radius: 20px;
    z-index: 10;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.04);
}

/* Home indicator */
.phone-home-indicator {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 4px;
    z-index: 10;
}

/* Slideshow inside the phone */
.image-slideshow {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 36px;
    overflow: hidden;
    z-index: 1;
}

@media screen and (max-width: 992px) {
    .hero-app-name {
        font-size: 4rem;
    }
    .hero-description {
        font-size: 1rem;
    }
    .hero-advert-text {
        font-size: 1.25rem;
    }
}

@media screen and (max-width: 768px) {
    .hero-section {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .hero-vid {
        position: relative;
        min-height: 100vh;
    }

    .hero-main-content {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 14px;
        padding: calc(var(--header-height) + 1.25rem) 1.2rem 2rem;
        min-height: 100vh;
    }

    .hero-text-content {
        order: 2;
        max-width: 100%;
    }

    .hero-app-name {
        font-size: 2.6rem;
        margin-bottom: .5rem;
    }

    .hero-description {
        font-size: 0.95rem;
    }

    .hero-buttons-container .download-store-buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero-buttons-container .store-btn {
        width: 100%;
        max-width: 240px;
        justify-content: center;
        padding: 10px 18px;
        font-size: 0.85rem;
    }

    .hero-buttons-container .beta-section-pill {
        align-self: center !important;
    }

    /* Kicker: tighter tracking so the label stays on one line at 390px */
    .hero-kicker {
        font-size: 0.66rem;
        letter-spacing: 0.18em;
        margin-left: 0;
    }

    /* Advert slider line: centered like the rest of the mobile hero */
    .hero-advert-text-wrapper { align-self: center; }
    .hero-advert-text { text-align: center; }

    .phone-frame {
        order: 1;
        /* small enough that the store buttons are visible on the first
           screen without scrolling (user request) */
        width: 120px;
        height: 252px;
        border-radius: 22px;
        padding: 5px;
        animation: phoneFloatMobile 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both,
                   phoneHoverMobile 4s ease-in-out 1.5s infinite;
        transform: rotate(-3deg) perspective(600px) rotateY(6deg);
    }

    @keyframes phoneFloatMobile {
        0% {
            opacity: 0;
            transform: translateY(100px) rotate(10deg) scale(0.85) perspective(600px) rotateY(-12deg);
        }
        100% {
            opacity: 1;
            transform: translateY(0) rotate(-3deg) scale(1) perspective(600px) rotateY(6deg);
        }
    }

    @keyframes phoneHoverMobile {
        0%, 100% {
            transform: translateY(0) rotate(-3deg) perspective(600px) rotateY(6deg);
        }
        50% {
            transform: translateY(-10px) rotate(-1deg) perspective(600px) rotateY(3deg);
        }
    }

    .phone-notch {
        width: 70px;
        height: 20px;
        top: 8px;
    }
    .image-slideshow {
        border-radius: 26px;
    }

    .beta-section-pill {
        font-size: 0.65rem;
        padding: 4px 10px;
    }
}

.image-slideshow img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
    opacity: 0;
    transform: scale(1.05); /* Start slightly zoomed in */
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-slideshow img.active {
    opacity: 1;
    transform: scale(1); /* Zoom out to normal size */
    z-index: 1; /* Make sure the active image is on top */
}

/* Styling for the hero video element */
.hero-video{
    width: 100%;
    height: 100vh;
    object-fit: cover;
    filter: brightness(0.8); /* Slightly darken video for better text contrast */
    flex-shrink: 0;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse 50% 35% at 50% 0%, rgba(var(--accent-rgb), 0.20) 0%, transparent 70%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, transparent 30%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}


.card .overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 40%, transparent 100%);
}
/* Hero section information content */
.hero-info{
    z-index: 1;
    position: absolute;
    top: 180px;
    right: 50px;
    padding-top: 50px; /* Add padding to avoid overlap with the logo */
    text-align: right;
}

/* Hero info heading */
.hero-info h1{
    font-size: 120px;
    font-family: var(--body-font);
    font-weight: 600;
    letter-spacing: -0.02em;
    font-weight: 900;
    font-style: normal;
    margin-top: 30px;
    margin-bottom: 20px;
    color: var(--title-color);
}
/* Hero info paragraph */
.hero-info p{
    color: white;
    max-width: 210px;
}



.btn {
    padding: 12px 30px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    border: 2px solid transparent;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.hero-button {
    background-color: rgba(var(--first-color-rgb), 0.2);
    border: 1px solid rgba(var(--first-color-rgb), 0.3);
    color: var(--title-color);
    font-size: 20px;
    font-family: "Poppins", sans-serif;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 18px 40px;
    border-radius: 50px;
}

.hero-button:hover {
    background-color: rgba(var(--first-color-rgb), 0.4);
    border-color: rgba(var(--first-color-rgb), 0.5);
    color: var(--title-color);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(-3px); /* Keep the hover effect from the base .btn class */
}



@keyframes pulse {
    0% {
        transform: translateX(-50%) scale(1);
    }
    50% {
        transform: translateX(-50%) scale(1.05);
    }
    100% {
        transform: translateX(-50%) scale(1);
    }
}


/* Chat Search Container */
/* Chat styles moved to css/chat.css */

.language-switcher {
    display: none; /* Hide old switcher */
}

/* Nav Dropdown */
/* Nav Dropdown */
.nav__item.dropdown {
    position: relative;
    cursor: pointer;
    perspective: 1000px; /* For 3D transitions */
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 1rem); /* Slight gap */
    right: 0;
    
    /* Styles for "Cooler" Look */
    background: rgba(30, 30, 35, 0.85); /* Darker, sleek base */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    
    /* Animation Properties */
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy spring effect */
    
    list-style: none;
    display: flex; /* Always flex, visibility handles hide/show */
    flex-direction: column;
    min-width: 150px;
    z-index: 1002;
}

/* Show State */
.nav__item.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.dropdown-menu::before {
    /* Little triangle pointer */
    content: '';
    position: absolute;
    top: -6px;
    right: 20px;
    width: 12px;
    height: 12px;
    background: inherit;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    transform: rotate(45deg);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.dropdown-menu li {
    width: 100%;
}

.dropdown-menu li a {
    color: var(--title-color);
    text-decoration: none;
    font-size: 0.95rem;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.dropdown-menu li a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--first-color);
    transform: translateX(5px);
}

/* Active language indication could go here if managed by JS */





.intro-text-wrapper {
    position: absolute;
    bottom: 150px;
    right: 20px;
    overflow: hidden;
    height: 100px; /* Adjust to fit the text size */
    z-index: 2;
}

.intro-text-slider {
    display: flex;
    flex-direction: column;
    transition: transform 0.5s ease-in-out;
}

.intro-text {
    font-size: 60px;
    font-family: var(--body-font);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    background: linear-gradient(to right, #e0e0e0, #d6d6d6, #bfbfbf, #a8a8a8, #d6d6d6, #e0e0e0);
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animate-gradient 2.5s linear infinite;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center; /* Center buttons horizontally */
    margin-top: 2rem; /* Add space above the buttons */
}

.about-section{
    width: 100%;
    padding-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--title-color);
    position: relative;
    z-index: 5;
}

.creator-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.about-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* About headline + subtext (restored after section rebuild) */
.about-section p {
    font-size: 12px;
}
.about-section h1 {
    font-family: var(--body-font);
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: clamp(2.4rem, 6vw, 80px);
    max-width: 1150px;
    text-align: center;
    margin: 25px 0;
    text-transform: uppercase;
    background: linear-gradient(to right, var(--ink), var(--ink-2), var(--ink-3), var(--ink-2), var(--ink));
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animate-gradient 2.5s linear infinite;
}
@keyframes animate-gradient {
    to { background-position: 200%; }
}
.about-section h5 {
    margin-top: 5px;
    color: var(--text-color-light);
    max-width: 425px;
    text-align: center;
    line-height: 25px;
    opacity: 0.8;
}

/* ── About grid: compare widget + mission card (2026-08-27 v4) ── */
.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    padding: 70px 1.5rem 30px;
    width: 100%;
    box-sizing: border-box;
}

/* Interactive before/after compare */
.cmp { max-width: 420px; margin: 0 auto; width: 100%; }
.cmp-frame {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    cursor: ew-resize;
    touch-action: pan-y;
    user-select: none;
    --cmp: 50%;
}
.cmp-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.cmp-clip {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--cmp)) 0 0);
    will-change: clip-path;
}
.cmp-clip .cmp-img { position: absolute; inset: 0; }
.cmp-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--cmp);
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,.9) 12%, rgba(255,255,255,.9) 88%, transparent);
    box-shadow: 0 0 16px rgba(255,255,255,.45);
    pointer-events: none;
}
.cmp-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(10,10,11,.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 6px 24px rgba(0,0,0,.5);
}
.cmp-tag {
    position: absolute;
    top: 16px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: #fff;
    background: rgba(10,10,11,.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.18);
    pointer-events: none;
}
.cmp-tag--a { left: 16px; }
.cmp-tag--b { right: 16px; }
/* subtle CRT scanlines + periodic glitch flicker over the compare */
.cmp-scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
    mix-blend-mode: overlay;
    animation: cmpFlicker 7s steps(1) infinite;
}
@keyframes cmpFlicker {
    0%, 92%, 100% { opacity: .5; transform: none; }
    93% { opacity: 1; transform: translateX(2px); }
    94% { opacity: .3; transform: translateX(-2px); }
    95% { opacity: 1; transform: none; }
}
.cmp-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    font-size: .85rem;
    color: var(--text-color-light);
}
.cmp-hint i { color: var(--accent); }

/* Mission card — neutral glossy glass (the old absolute overlay card
   carried a purple tint; rebuilt as a grid partner) */
.creator-card {
    position: relative;
    background: linear-gradient(145deg, rgba(var(--ink-rgb),.06), rgba(var(--ink-rgb),.02));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 42px 44px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.creator-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--gloss), transparent 16%);
    opacity: .4;
    mix-blend-mode: soft-light;
}
.creator-card-pill {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), .12);
    border: 1px solid rgba(var(--accent-rgb), .35);
    color: var(--accent-strong);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.creator-card h2 {
    font-family: var(--body-font);
    font-weight: 600;
    letter-spacing: -0.02em;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin: 0 0 16px;
    color: var(--title-color);
}
.creator-card p {
    color: var(--text-color);
    line-height: 1.75;
    font-size: .98rem;
    margin: 0;
}
.creator-card-stats {
    display: flex;
    gap: 36px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}
.ccs { display: flex; flex-direction: column; gap: 4px; }
.ccs-num {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--title-color);
}
.ccs-label { font-size: .8rem; color: var(--text-color-light); }

/* ── Glitch title (RGB-split, periodic) ───────────────────── */
.glitch-title { position: relative; }
.glitch-title::before,
.glitch-title::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    margin: inherit;
    background: inherit;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    pointer-events: none;
}
.glitch-title::before {
    text-shadow: -2px 0 rgba(140, 170, 210, 0.9);
    animation: glitchSliceA 6s steps(1) infinite;
}
.glitch-title::after {
    text-shadow: 2px 0 rgba(255, 255, 255, 0.85);
    animation: glitchSliceB 6s steps(1) infinite;
}
@keyframes glitchSliceA {
    0%, 88%, 100% { opacity: 0; }
    89% { opacity: 1; clip-path: inset(12% 0 74% 0); transform: translateX(-5px); }
    91% { opacity: 1; clip-path: inset(58% 0 22% 0); transform: translateX(4px); }
    93% { opacity: 0; }
}
@keyframes glitchSliceB {
    0%, 89%, 100% { opacity: 0; }
    90% { opacity: 1; clip-path: inset(38% 0 42% 0); transform: translateX(5px); }
    92% { opacity: 1; clip-path: inset(76% 0 8% 0); transform: translateX(-4px); }
    94% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .glitch-title::before, .glitch-title::after, .cmp-scanlines { animation: none; opacity: 0; }
}

@media (max-width: 900px) {
    .about-grid { grid-template-columns: 1fr; gap: 36px; padding-top: 50px; }
    .creator-card { padding: 32px 26px; }
}

.autoFlyIn {
    opacity: 0;
    transform: translateY(100px);
    transition: all 1s ease-out;
}

.autoFlyIn.in-view {
    opacity: 1;
    transform: translateY(0);
}


.drones-img {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    z-index: 3;
}


.services-section{
    display: flex;
    flex-direction: column;
    align-items: center;   /* explicit horizontal centering — Safari-safe */
    position: relative;
    width: 100%;
    padding-top: 100px;
    text-align: center;
}

.services-section .container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

.services-section h3{
    font-family: var(--body-font);
    font-weight: 600;
    letter-spacing: -0.02em;
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.1;
    margin: 0 0 14px;
    text-align: center;
    background: linear-gradient(to right, #e0e0e0, #d6d6d6, #bfbfbf, #a8a8a8, #d6d6d6, #e0e0e0);
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animate-gradient 2.5s linear infinite;
}

.services-section p{
    margin-top: 5px;
    color: gray;
    max-width: 560px;
    font-size: 1rem;
    line-height: 1.65;
    text-align: center;
}
.info-cards{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    width: 100%;
    max-width: 1180px;
    margin: 56px auto 0;
    padding: 0 2rem;
    box-sizing: border-box;
}

/* ── Feature card — glass morph, image-top layout ──────────── */
.card{
    --accent-1: #E2E8F0;
    --accent-2: #AEBBCC;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(var(--ink-rgb),0.05) 0%, rgba(var(--ink-rgb),0.018) 100%);
    border: 1px solid var(--line);
    box-shadow:
        0 14px 40px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.08);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transition: transform 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
    isolation: isolate;
}

/* Warm accent triad (2026-08-27 redesign): terracotta / rosewood / sand.
   The data-accent attribute names stay (live in index.html) — only the
   palettes behind them changed. */
.card[data-accent="purple"]{ --accent-1:#E2E8F0; --accent-2:#AEBBCC; }
.card[data-accent="pink"]  { --accent-1:#CBD3DD; --accent-2:#98A4B5; }
.card[data-accent="blue"]  { --accent-1:#F0F2F5; --accent-2:#B8BEC7; }

.card:hover{
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--accent-1) 55%, transparent);
    box-shadow:
        0 26px 64px rgba(0,0,0,0.5),
        0 0 48px color-mix(in srgb, var(--accent-1) 18%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.14);
}

/* Accent glow ring that appears on hover */
.card::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--accent-1), transparent 45%, var(--accent-2));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
    z-index: 3;
}
.card:hover::after{ opacity: 0.9; }

/* Visual header — image + fade + floating icon */
.card-visual{
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    flex: 0 0 auto;
}

.card-visual img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
    will-change: transform;
}

.card:hover .card-visual img{
    transform: scale(1.06);
}

.card-visual-fade{
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(10,10,14,0.1) 0%,
        rgba(10,10,14,0.35) 45%,
        rgba(10,10,14,0.95) 100%);
    pointer-events: none;
}

.card-visual-icon{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    color: #fff;
    font-size: 1.25rem;
    box-shadow:
        0 8px 24px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.2);
}

.card-visual-icon i{
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Body — title, description, CTA */
.card-body{
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 26px 28px;
    flex: 1 1 auto;
    z-index: 2;
}

.card-body h1{
    font-family: var(--body-font);
    font-weight: 600;
    letter-spacing: -0.02em;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--title-color);
    margin: 0 0 10px;
    line-height: 1.2;
    text-transform: none;
}

.card-body .card-description{
    font-size: 0.92rem;
    color: var(--text-color);
    line-height: 1.6;
    margin: 0 0 22px;
    flex: 1 1 auto;
}

.btn-card{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 11px 20px 11px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-1) 22%, transparent),
        color-mix(in srgb, var(--accent-2) 16%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent-1) 40%, transparent);
    color: var(--title-color);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-card i{
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.btn-card:hover{
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-1) 38%, transparent),
        color-mix(in srgb, var(--accent-2) 26%, transparent));
    border-color: color-mix(in srgb, var(--accent-1) 65%, transparent);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--accent-1) 25%, transparent);
}

.btn-card:hover i{
    transform: translate(2px, -2px);
}

/* Safari / older browser fallback when color-mix isn't supported */
@supports not (color: color-mix(in srgb, red, blue)){
    .card:hover{
        border-color: rgba(var(--accent-rgb),0.55);
        box-shadow:
            0 26px 64px rgba(0,0,0,0.5),
            0 0 48px rgba(var(--accent-rgb),0.18),
            inset 0 1px 0 rgba(255,255,255,0.14);
    }
    .btn-card{
        background: linear-gradient(135deg, rgba(var(--accent-rgb),0.22), rgba(var(--accent-rgb),0.14));
        border-color: rgba(var(--accent-rgb),0.4);
    }
    .btn-card:hover{
        background: linear-gradient(135deg, rgba(var(--accent-rgb),0.38), rgba(var(--accent-rgb),0.24));
        border-color: rgba(var(--accent-rgb),0.65);
        box-shadow: 0 12px 30px rgba(var(--accent-rgb),0.25);
    }
}

.pricing-section {
    padding: 120px 0;
    text-align: center;
    position: relative;
}

.pricing-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
}

.section-title {
    font-family: var(--body-font);
    font-weight: 600;
    letter-spacing: -0.02em;
    font-weight: 900;
    font-size: 80px;
    max-width: 1150px;
    text-align: center;
    margin: 25px auto 20px auto;
    text-transform: uppercase;
    background: linear-gradient(to right, #e0e0e0, #d6d6d6, #bfbfbf, #a8a8a8, #d6d6d6, #e0e0e0);
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animate-gradient 2.5s linear infinite;
}

/* ── Pricing Cards Grid ────────────────────────────────────── */
.pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
    margin-top: 2.2rem;
    align-items: stretch;
}

/* ── Base Card ─────────────────────────────────────────────── */
.pricing-card {
    position: relative;
    background: rgba(var(--ink-rgb), 0.04);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: 2rem 1.6rem 1.6rem;
    border-radius: 24px;
    border: 1px solid var(--line);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, box-shadow 0.4s;
    z-index: 1;
    overflow: hidden;
}

/* Subtle inner glow */
.pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gloss), transparent);
}

.pricing-card:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--ink-rgb), 0.18);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    z-index: 10;
}

/* ── Featured Card ─────────────────────────────────────────── */
.pricing-card--featured {
    border-color: rgba(var(--accent-rgb), 0.35);
    background: linear-gradient(165deg, rgba(var(--accent-rgb),0.1) 0%, rgba(255,255,255,0.03) 50%, rgba(var(--accent-rgb),0.06) 100%);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.25),
        0 0 60px rgba(var(--accent-rgb), 0.08);
    transform: scale(1.04);
    padding-top: 3rem;
}

.pricing-card--featured::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.3), transparent 40%, transparent 60%, rgba(var(--accent-rgb),0.2));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    padding: 1px;
    pointer-events: none;
}

.pricing-card--featured:hover {
    transform: scale(1.04) translateY(-8px);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35),
        0 0 80px rgba(var(--accent-rgb), 0.12);
}

/* ── Badge ─────────────────────────────────────────────────── */
.pc-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--accent-strong), var(--accent));
    color: #0a0a0a;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 20px;
    border-radius: 0 0 14px 14px;
}

.pc-badge--pro {
    background: linear-gradient(135deg, #a8a8a8, #e0e0e0);
}

/* ── Card Header ───────────────────────────────────────────── */
.pc-header {
    margin-bottom: 1rem;
}

.pc-tier {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    display: block;
    margin-bottom: 0.5rem;
}

.pc-credits {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.pc-credits-num {
    font-family: var(--body-font);
    font-weight: 600;
    letter-spacing: -0.02em;
    font-size: 3rem;
    font-weight: 800;
    color: var(--title-color);
    line-height: 1;
    display: block;
    margin-bottom: 0.2rem;
    background: linear-gradient(135deg, #ffffff, rgba(255,255,255,0.7));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pricing-card--featured .pc-credits-num {
    background: linear-gradient(135deg, var(--accent-strong), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Price ──────────────────────────────────────────────────── */
.pc-price {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--title-color);
    margin-bottom: 0.3rem;
    line-height: 1;
}

.pc-per {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pc-save {
    display: inline-block;
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 0.02em;
}

/* ── Features List ─────────────────────────────────────────── */
.pc-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.4rem 0;
    width: 100%;
    text-align: left;
}

.pc-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--line);
}

.pc-features li:last-child {
    border-bottom: none;
}

.pc-features li i {
    color: #34d399;
    font-size: 1rem;
    flex-shrink: 0;
}

.pc-features li i.ri-star-fill {
    color: #D4AFB9;
}

.pc-features li i.ri-vip-crown-fill {
    color: #fbbf24;
}

/* ── Button ────────────────────────────────────────────────── */
.pc-btn {
    display: block;
    width: 100%;
    padding: 14px 0;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    color: var(--first-color);
    background: transparent;
    border: 1.5px solid rgba(var(--accent-rgb), 0.3);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: pointer;
    margin-top: auto;
}

.pc-btn:hover {
    background: rgba(var(--accent-rgb), 0.12);
    border-color: rgba(var(--accent-rgb), 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.15);
}

.pc-btn--featured {
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.25), rgba(var(--accent-rgb),0.12));
    border-color: rgba(var(--accent-rgb), 0.4);
    color: var(--title-color);
}

.pc-btn--featured:hover {
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.35), rgba(var(--accent-rgb),0.25));
    border-color: rgba(var(--accent-rgb), 0.6);
    box-shadow: 0 8px 30px rgba(var(--accent-rgb), 0.2);
}

/* ── Responsive: swipe carousel so pricing fits one screen ─── */
@media screen and (max-width: 900px) {
    .pricing-section { padding: 80px 0; }
    .pricing-container { padding: 0; }
    .pricing-container .section-title,
    .pricing-intro { padding: 0 1.5rem; }
    .pricing-cards {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        /* side padding = peek of the neighbor cards */
        padding: 12px 11vw 10px;
        margin-top: 1.4rem;
        scrollbar-width: none;
    }
    .pricing-cards::-webkit-scrollbar { display: none; }
    .pricing-card {
        flex: 0 0 78%;
        scroll-snap-align: center;
        padding: 1.7rem 1.4rem 1.3rem;
        border-color: rgba(255, 255, 255, 0.14);
    }
    /* The generic .autoDisplay reveal keys off vertical intersection —
       cards sitting off to the side in the horizontal scroller never
       fire it and would stay invisible. Reveal the whole row instead. */
    .pricing-card.autoDisplay {
        opacity: 1 !important;
        transform: none !important;
    }
    .pricing-card--featured {
        transform: scale(1);
        padding-top: 2.7rem;
    }
    .pricing-card--featured:hover {
        transform: translateY(-8px);
    }
    .pc-credits-num { font-size: 2.4rem; }
    .pc-price { font-size: 2.2rem; }
    .pc-features li { padding: 5px 0; font-size: 0.85rem; }
    .pc-btn { padding: 12px 0; }
}

.location-section {
    padding: 60px 0;
    text-align: center;
    background-color: var(--container-color);
}

.location-container h2 {
    font-family: var(--body-font);
    font-weight: 600;
    letter-spacing: -0.02em;
    font-size: 24px;
    color: var(--text-color-light);
    margin-bottom: 10px;
}

.location-container h3 {
    font-family: var(--body-font);
    font-weight: 600;
    letter-spacing: -0.02em;
    font-size: 48px;
    color: var(--title-color);
    text-transform: uppercase;
    background: linear-gradient(to right, #e0e0e0, #d6d6d6, #bfbfbf, #a8a8a8, #d6d6d6, #e0e0e0);
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animate-gradient 2.5s linear infinite;
}

/*==================== LOCATION ====================*/
.map-container {
    position: relative;
    width: 80%;
    max-width: 800px;
    margin: 40px auto 0;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.map-container:hover {
    transform: scale(1.02);
    box-shadow: 0 0 25px var(--first-color-alt);
    border-color: var(--first-color);
}

.map-image {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease-in-out;
    opacity: 0.7;
}

.map-container:hover .map-image {
    opacity: 1;
}

.map-marker {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: var(--first-color);
    border-radius: 50%;
    border: 3px solid var(--first-color-lighten);
    transform: translate(-50%, -50%);
    animation: pulse-marker 2s infinite ease-in-out;
    box-shadow: 0 0 15px var(--first-color);
}

@keyframes pulse-marker {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

.location-name {
    position: absolute;
    bottom: -50px; /* Start hidden */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: var(--title-color);
    padding: 8px 15px;
    border-radius: 10px;
    font-family: 'Kiona', sans-serif;
    font-size: var(--normal-font-size);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.map-container:hover .location-name {
    bottom: 20px; /* Move up on hover */
    opacity: 1;
}



.contact-section {
    padding: 100px 0;
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 50px;
    align-items: center;
}

.contact-content {
    text-align: center;
}

.contact-images-left, .contact-images-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Stacked image cards ───────────────────────────────────── */
.contact-stack {
    position: relative;
    width: 220px;
    height: 360px;
}

.contact-stack .stack-card {
    position: absolute;
    width: 180px;
    height: 260px;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--si) * 0.15s);
    filter: saturate(0.85) brightness(0.9);
}

/* Left stack — fly in from left, fan out with rotation */
.contact-stack--left .stack-card {
    transform: translateX(-160px) rotate(-20deg) scale(0.8);
}

.contact-stack--left .stack-card:nth-child(1) {
    top: 0; left: 0;
    z-index: 3;
}
.contact-stack--left .stack-card:nth-child(2) {
    top: 30px; left: 20px;
    z-index: 2;
}
.contact-stack--left .stack-card:nth-child(3) {
    top: 60px; left: 40px;
    z-index: 1;
}

/* Right stack — fly in from right, fan opposite */
.contact-stack--right .stack-card {
    transform: translateX(160px) rotate(20deg) scale(0.8);
}

.contact-stack--right .stack-card:nth-child(1) {
    top: 0; right: 0;
    z-index: 3;
}
.contact-stack--right .stack-card:nth-child(2) {
    top: 30px; right: 20px;
    z-index: 2;
}
.contact-stack--right .stack-card:nth-child(3) {
    top: 60px; right: 40px;
    z-index: 1;
}

/* In-view: cards land in stacked fan */
.contact-container.in-view .contact-stack--left .stack-card:nth-child(1) {
    opacity: 1;
    transform: translateX(0) rotate(-6deg) scale(1);
}
.contact-container.in-view .contact-stack--left .stack-card:nth-child(2) {
    opacity: 0.85;
    transform: translateX(10px) rotate(-1deg) scale(0.96);
}
.contact-container.in-view .contact-stack--left .stack-card:nth-child(3) {
    opacity: 0.7;
    transform: translateX(20px) rotate(4deg) scale(0.92);
}

.contact-container.in-view .contact-stack--right .stack-card:nth-child(1) {
    opacity: 1;
    transform: translateX(0) rotate(6deg) scale(1);
}
.contact-container.in-view .contact-stack--right .stack-card:nth-child(2) {
    opacity: 0.85;
    transform: translateX(-10px) rotate(1deg) scale(0.96);
}
.contact-container.in-view .contact-stack--right .stack-card:nth-child(3) {
    opacity: 0.7;
    transform: translateX(-20px) rotate(-4deg) scale(0.92);
}

/* Hover — spread the stack */
.contact-stack:hover .stack-card:nth-child(2) {
    transform: translateY(10px) rotate(0deg) scale(0.98) !important;
    opacity: 0.95 !important;
}
.contact-stack:hover .stack-card:nth-child(3) {
    transform: translateY(20px) rotate(0deg) scale(0.95) !important;
    opacity: 0.85 !important;
}


.contact-section h1{
    font-family: var(--body-font);
    font-weight: 600;
    letter-spacing: -0.02em;
    font-size: 65px;
    max-width: 550px;
    background: linear-gradient(to right, #e0e0e0, #d6d6d6, #bfbfbf, #a8a8a8, #d6d6d6, #e0e0e0);
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-section p{
    margin-bottom: 20px;
}
.btn-contact {
    background-color: var(--first-color);
    border-color: var(--first-color);
    color: var(--accent-ink);
    font-family: var(--body-font);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.btn-contact:hover {
    background-color: transparent;
    border-color: var(--first-color);
    color: var(--first-color);
}

.clickable-text {
    cursor: pointer;
    color: var(--title-color);
    text-decoration: none;
    font-family: var(--body-font);
    font-weight: 600;
    letter-spacing: -0.02em;
    transition: color 0.3s;
}

.clickable-text:hover {
    color: var(--first-color);
}

/* Background Animation */
.background-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    overflow: hidden;
}

.background-animation img {
    position: absolute;
    width: 200px;
    height: 300px;
    object-fit: cover;
    border-radius: 20px;
    animation-name: fly-by;
    animation-timing-function: ease-in-out; /* Smoother animation */
    animation-iteration-count: infinite;
    opacity: 0; /* Start invisible */
}

@keyframes fly-by {
    0% {
        transform: translateX(-150%) translateY(calc(var(--y-start) * 1px)) rotate(-20deg);
        opacity: 0;
    }
    10% {
        opacity: 0.3; /* Fade in */
    }
    90% {
        opacity: 0.3; /* Stay visible */
    }
    100% {
        transform: translateX(100vw) translateY(calc(var(--y-end) * 1px)) rotate(20deg);
        opacity: 0; /* Fade out */
    }
}

.background-animation img:nth-child(1) {
    --y-start: 100;
    --y-end: 200;
    animation-duration: 15s;
    animation-delay: 0s;
}

.background-animation img:nth-child(2) {
    --y-start: 300;
    --y-end: 100;
    animation-duration: 20s;
    animation-delay: 3s;
}

.background-animation img:nth-child(3) {
    --y-start: 500;
    --y-end: 600;
    animation-duration: 18s;
    animation-delay: 5s;
}

.background-animation img:nth-child(4) {
    --y-start: 700;
    --y-end: 400;
    animation-duration: 22s;
    animation-delay: 8s;
}

.background-animation img:nth-child(5) {
    --y-start: 0;
    --y-end: 800;
    animation-duration: 25s;
    animation-delay: 10s;
}

.background-animation img:nth-child(6) {
    --y-start: 800;
    --y-end: 0;
    animation-duration: 17s;
    animation-delay: 12s;
}

.background-animation img:nth-child(7) {
    --y-start: 400;
    --y-end: 700;
    animation-duration: 19s;
    animation-delay: 14s;
}

.background-animation img:nth-child(8) {
    --y-start: 600;
    --y-end: 300;
    animation-duration: 21s;
    animation-delay: 16s;
}

/* ═══ Floating Glass Panels ═══ */
.floating-glasses {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    transform-origin: center center;
}

.glass-panel {
    position: absolute;
    left: var(--gx, 10%);
    top: var(--gy, 10%);
    width: var(--gw, 200px);
    height: var(--gh, 280px);
    border-radius: 18px;
    overflow: hidden;

    /* Glassmorphism */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.02) 40%,
        rgba(255, 255, 255, 0.005) 100%
    );
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04);

    /* Initial rotation from --gr */
    transform: rotate(var(--gr, 0deg));

    /* Fade-in on load — only controls opacity, JS handles transform */
    animation: glass-fade-in 1.8s ease forwards;
    animation-delay: var(--gdelay, 0s);

    /* Smooth transform updates from JS */
    will-change: transform;
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Top edge light reflection */
.glass-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.25),
        transparent
    );
    z-index: 3;
}

/* Subtle inner glow / light refraction */
.glass-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        ellipse 70% 50% at 30% 20%,
        rgba(255, 255, 255, 0.06) 0%,
        transparent 70%
    );
    z-index: 2;
    pointer-events: none;
}

.glass-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    opacity: 0.55;
    filter: saturate(0.8) brightness(0.9);
    transition: opacity 0.5s ease, filter 0.5s ease;
}

@keyframes glass-fade-in {
    0%   { opacity: 0; }
    100% { opacity: 0.85; }
}

/* ── Glass panel responsive ──────────────────────────────────── */
@media screen and (max-width: 768px) {
    .glass-panel {
        --gw: 120px !important;
        --gh: 170px !important;
    }
    .floating-glasses {
        opacity: 0.5;
    }
}

@media screen and (max-width: 480px) {
    .floating-glasses {
        opacity: 0.35;
    }
}

/* Footer extracted to css/footer.css */


/* BLUR EFFECT */

.autoBlur {
    filter: blur(40px);
    opacity: 0;
    transform: translateY(-200px);
    transition: all 1s ease;
}

.autoBlur.in-view {
    filter: blur(0);
    opacity: 1;
    transform: translateY(0);
}

.autoTakeFull {
    width: 300px;
    height: 200px;
    border-radius: 20px;
    background: #ccc;
    margin: 0 auto;
    margin-bottom: 0;
    transition: all 1s ease;
  }
  
  .autoTakeFull.in-view {
    width: 100% !important;
    height: 100vh !important;
    border-radius: 0 !important;
    margin-bottom: 100px !important;
  }

  .autoDisplay {
    opacity: 0;
    transform: translateY(200px) scale(0.3);
    transition: all 1s ease;
  }

  .autoDisplay.in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  /* Cards override generic autoDisplay completely */
  .info-cards.autoDisplay,
  .info-cards.autoDisplay.in-view {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .card.autoDisplay {
    opacity: 0 !important;
    transform: translateY(60px) !important;
    transition: opacity 0.7s ease, transform 0.7s ease !important;
    scale: unset !important;
  }
  .card.autoDisplay:nth-child(2) { transition-delay: 0.15s !important; }
  .card.autoDisplay:nth-child(3) { transition-delay: 0.3s !important; }

  .card.autoDisplay.in-view {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

/* SCROLL UP */
.scrollup {
    position: fixed;
    right: 1rem;
    bottom: -20%;
    display: flex;
    background-color: var(--container-color);
    border-radius: .25rem;
    padding: .45rem;
    opacity: 9;
    z-index: 10;
    transition: .4s;
}
    
.scrollup:hover {
    background-color: var(--black-color);
    opacity: 1;
}

.scrollup__icon {
    color: var(--white-color);
    font-size: 1.35rem;
}

/* Media query for smaller screens */
@media screen and (max-width: 992px) {
    .section-title {
        font-size: 50px;
    }
    .info-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 480px) {
    .section-title {
        font-size: 36px;
        margin: 15px auto 10px;
    }
    .pricing-section {
        padding: 60px 0;
    }
    .pricing-container {
        padding: 0 1rem;
    }
    .pc-credits-num {
        font-size: 2.2rem;
    }
    .pc-price {
        font-size: 2.2rem;
    }
    .beta-section {
        padding: 60px 1rem;
    }
    .beta-section-title {
        font-size: 1.6rem;
    }
    .beta-cta-cards {
        grid-template-columns: 1fr;
    }
    .contact-section {
        padding: 60px 0;
    }
    .contact-section h1 {
        font-size: 28px;
    }
    .download-section {
        padding: 60px 0;
    }
}

@media screen and (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-left, .footer-center, .footer-right {
        align-items: center;
    }
    .footer-center .footer-links {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
    .footer-right .social-links {
        justify-content: center;
    }
    .legal-links {
        justify-content: center;
    }
    .creator-container {
    flex-direction: column;
    text-align: center;
    }   

    .creator-image {
        margin: 0 auto 20px auto;
    }
}

@media screen and (max-width: 650px){
    header{
        padding: 0 5px;
    }
    .header {
        padding: 0 1rem;
    }
    .nav {
        padding: 0 0.5rem;
    }
    .nav__logo img {
        width: 42px;
    }
    .scroll-header .nav__logo {
        top: .25rem;
        left: 1rem;
    }
    .intro-text-wrapper{
        height: 60px;
    }
    .intro-text{
        font-size: 30px;
        height: 60px;
    }
    .hero-section h1{
        font-size: 40px;
    }
    .about-section {
        padding-top: 100px;
    }
    .about-section h1{
        font-size: 32px;
        padding: 0 1rem;
    }
    .about-section p, .about-section h4 {
        padding: 0 1rem;
        font-size: 0.85rem;
    }
    .image-box{
        width: 100%;
        height: 350px;
    }
    .creator-section {
        width: 92%;
        padding: 24px;
    }
    .creator-text h2 {
        font-size: 24px;
    }
    .creator-text p {
        font-size: 0.85rem;
    }
    .services-section {
        padding-top: 60px;
    }
    .services-section h3 {
        padding: 0 1rem;
    }
    .services-section p {
        padding: 0 1rem;
        font-size: 0.95rem;
    }
    .about-section h4, .about-section h5{
        max-width: 350px;
        text-align: center;
    }
    .contact-container {
        grid-template-columns: 1fr;
        gap: 5px;
    }
    .contact-section h1 {
        font-size: 40px;
    }
    .contact-stack {
        width: 140px;
        height: 240px;
        margin: 0 auto;
    }
    .contact-stack .stack-card {
        width: 120px;
        height: 180px;
    }
    .info-cards {
      grid-template-columns: 1fr;
      padding: 0 1.1rem;
      gap: 18px;
      margin-top: 32px;
    }
    .card {
      border-radius: 22px;
    }
    .card-visual {
      aspect-ratio: 16 / 10;
    }
    .card-body {
      padding: 20px 22px 24px;
    }
    .card-body h1 {
      font-size: 1.35rem;
    }
    .card-body .card-description {
      font-size: 0.87rem;
      margin-bottom: 18px;
    }
    .btn-card {
      padding: 9px 18px;
      font-size: 0.8rem;
    }
}
/* Fade Transition for Language Switch */
.fade-transition {
    opacity: 0 !important;
    transition: opacity 0.3s ease-in-out;
}

body {
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

/* Ask AI Button */
/* Ask AI Button */
.btn-ask-ai {
    background: transparent;
    color: var(--first-color);
    border: 2px solid var(--first-color); /* Match btn-secondary border thickness */
    padding: 15px 40px; /* Match btn-secondary padding */
    border-radius: 30px; /* Match btn-secondary radius */
    cursor: pointer;
    font-weight: bold; /* Match btn-secondary weight */
    transition: all 0.3s ease-in-out;
    margin-top: 10px;
    width: auto; /* Default to auto width */
    display: inline-flex; /* Use flex for icon alignment */
    align-items: center;
    justify-content: center;
    gap: 8px; /* Space between icon and text */
    font-family: inherit; /* inherit or match header font */
    -webkit-appearance: none; /* iOS Safari fix */
    appearance: none;
    vertical-align: middle;
}

.btn-ask-ai:hover {
    background: var(--first-color);
    color: var(--body-color); /* Match btn-secondary hover text color */
    box-shadow: none; /* Reset shadow if not in btn-secondary, or match it */
}

/* Specific for Pricing Card in Index to stack properly */
.pricing-card .btn-ask-ai {
    width: 100%;
}

/* Ensure secondary buttons (Contact) also have spacing if stacked */
.btn-secondary {
    width: 100%;
    margin-top: 20px; /* Separation from list */
}

/* ── AI-content badge (EU AI Act Art. 50 visible disclosure) ── */
.media-ai-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(10, 10, 11, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    pointer-events: none;
    user-select: none;
}
.media-ai-badge i { font-size: 0.75rem; color: var(--accent); }

/* ── AI badge placement variants ─────────────────────────────────
   Art. 50 EU AI Act asks for a disclosure that is visible on the
   content itself; these keep the badge above the showcase overlays
   and anchored to the contact image stacks. */
.media-ai-badge--vs {
    z-index: 11;          /* above .vs-overlay (2), .vs-texts (5), .vs-reveal (8) */
    bottom: 18px;
    right: 18px;
}
.media-ai-badge--stack {
    bottom: 0;
    right: 0;
    z-index: 6;
}

/* ── PAngV / UWG price disclosure under the credit packs ───────── */
.pricing-legal {
    max-width: 900px;
    margin: 28px auto 0;
    padding: 0 16px;
    font-size: 0.78rem;
    line-height: 1.6;
    text-align: center;
    color: var(--text-color, rgba(255, 255, 255, 0.6));
    opacity: 0.75;
}

/* ── Visible keyboard focus indicator (WCAG 2.1 AA, 2.4.7 / BFSG) ──
   Applies site-wide; :focus-visible keeps mouse clicks unaffected. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    border-radius: 4px;
    /* dark halo so the white ring also reads on light surfaces */
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.75);
}
@media (forced-colors: active) {
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible {
        outline: 3px solid CanvasText;
    }
}

/* Respect users who ask for reduced motion (WCAG 2.3.3 / BFSG) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}