/* ================================================================
   WEBLOFTY - STYLESHEET
   style.css

   TABLE OF CONTENTS:
   1.  CSS Custom Properties (Variables)
   2.  Reset & Base Styles
   3.  Custom Scrollbar
   4.  Custom Cursor
   5.  Noise Texture Overlay
   6.  Navigation Bar
   7.  Logo
   8.  Hero Section
   9.  Hero Background (Orbs, Grid, Canvas)
   10. Hero Visual (Orbit Rings, Floating Cards, Center Orb)
   11. Section Shared Styles
   12. Services Section
   13. How It Works Section
   14. Ideas / Library Section  --- Removed
   15. Idea Generator Section
   16. Testimonials Section --- Removed
   17. Pricing Section --- Removed
   18. Contact Section
   19. Newsletter Section --- Removed
   20. Footer
   21. Mobile Menu Overlay
   22. Scroll-to-Top Button
   23. Toast Notification
   24. Scroll Animations (fade-up)
   25. Keyframe Animations
   26. Responsive / Media Queries
   ================================================================ */


/* ================================================================
   1. CSS CUSTOM PROPERTIES (VARIABLES)
   Define reusable values for colors, gradients, shadows, and fonts.
   Using var(--name) throughout keeps everything consistent and
   easy to update — change one variable, update the whole site.
   ================================================================ */
:root {
    /* --- Brand Colors --- */
    --primary:   #6C3FE8;   /* Main purple - used for primary actions, accents */
    --secondary: #FF6B35;   /* Orange - used for secondary accents and highlights */
    --accent:    #00D4AA;   /* Teal/green - used for success states and variety */

    /* --- Background Colors (dark palette) --- */
    --dark:  #0D0D1A;       /* Darkest - main page background */
    --dark2: #141428;       /* Slightly lighter - alternating section backgrounds */
    --dark3: #1E1E3A;       /* Card backgrounds, form backgrounds */

    /* --- Text Colors --- */
    --light: #F8F6FF;       /* Near-white - headings and primary text */
    --text:  #C8C4E0;       /* Soft lavender-gray - body/paragraph text */
    --text2: #8B87A8;       /* Dimmer - captions, meta info, placeholders */

    /* --- Gradient Definitions ---
       Used for buttons, borders, text highlights, and decorative elements */
    --gradient1: linear-gradient(135deg, #6C3FE8, #9B6BFF);  /* Purple gradient */
    --gradient2: linear-gradient(135deg, #FF6B35, #FF9A6C);  /* Orange gradient */
    --gradient3: linear-gradient(135deg, #00D4AA, #00FFD4);  /* Teal gradient  */

    /* --- Glow / Shadow Effects ---
       Used as box-shadow values to create colored glow around elements */
    --glow:  0 0 30px rgba(108, 63, 232, 0.4);  /* Purple glow */
    --glow2: 0 0 30px rgba(255, 107, 53, 0.4);  /* Orange glow */
}


/* ================================================================
   2. RESET & BASE STYLES
   Remove browser default margins/padding and set box model.
   ================================================================ */

/* Universal box-sizing reset: padding/border are included in width/height */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Enable smooth anchor-link scrolling (for nav link clicks) */
html {
    scroll-behavior: smooth;
}

/* Body: set font stack, background, text color, hide horizontal overflow */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--dark);          /* Dark background from variables */
    color: var(--light);              /* Light text from variables */
    overflow-x: hidden;               /* Prevent horizontal scrollbar */
    cursor: none;                     /* Hide default cursor (we have a custom one) */
}



/* Accessible skip link: improves keyboard UX and crawlable page structure */
.skip-link {
    position: fixed;
    top: -80px;
    left: 24px;
    z-index: 100000;
    background: var(--primary);
    color: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    box-shadow: var(--glow);
    transition: top 0.25s ease;
}

.skip-link:focus {
    top: 18px;
    outline: 3px solid rgba(255, 255, 255, 0.65);
    outline-offset: 3px;
}


/* ================================================================
   3. CUSTOM SCROLLBAR
   Styled scrollbar for webkit-based browsers (Chrome, Edge, Safari)
   ================================================================ */
::-webkit-scrollbar {
    width: 6px;  /* Thin scrollbar */
}

::-webkit-scrollbar-track {
    background: var(--dark2);  /* Dark track */
}

::-webkit-scrollbar-thumb {
    background: var(--primary);  /* Purple thumb matches brand color */
    border-radius: 10px;         /* Rounded thumb */
}

::-webkit-scrollbar-thumb:hover {
    background: #9B6BFF;  /* Lighter purple on hover */
}


/* ================================================================
   4. CUSTOM CURSOR
   Two-part cursor: a small filled dot + a larger trailing ring.
   JavaScript positions both elements using mousemove events.
   The ring lags behind slightly using lerp interpolation in JS.
   ================================================================ */

/* Small filled circle - the precise cursor dot */
.cursor {
    width: 12px;
    height: 12px;
    background: var(--primary);     /* Solid purple */
    border-radius: 50%;             /* Perfect circle */
    position: fixed;                /* Fixed to viewport */
    top: 0;
    left: 0;
    pointer-events: none;           /* Don't interfere with mouse events */
    z-index: 99999;                 /* Always on top of everything */
    transition: transform 0.1s ease;  /* Smooth scale on hover states */
    mix-blend-mode: screen;         /* Interesting blend with background */
}

/* Larger hollow ring - lags behind the dot for a trail effect */
.cursor-ring {
    width: 36px;
    height: 36px;
    border: 2px solid rgba(108, 63, 232, 0.5);  /* Semi-transparent purple border */
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99998;                 /* Just below the dot */
    transition: all 0.15s ease;    /* Smooth transitions for color and scale */
}


/* ================================================================
   5. NOISE TEXTURE OVERLAY
   A subtle grainy texture applied over the entire page using an
   inline SVG filter via CSS background-image.
   This adds visual depth and a premium feel to the dark background.
   pointer-events: none ensures it doesn't block any interactions.
   ================================================================ */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Inline SVG with fractalNoise filter creates the grain texture */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;  /* Click-through */
    z-index: 1;
    opacity: 0.4;          /* Very subtle - just a hint of texture */
}


/* ================================================================
   6. NAVIGATION BAR
   Fixed at top, full-width. Transparent by default.
   JavaScript adds .scrolled class when user scrolls past 50px,
   which triggers the blur background and border-bottom effect.
   ================================================================ */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;          /* Above all content, below cursor (99999) */
    padding: 20px 0;
    transition: all 0.4s ease;  /* Smooth transition when .scrolled class applies */
}

/* State when user has scrolled down: adds frosted glass effect */
nav.scrolled {
    background: rgba(13, 13, 26, 0.95);   /* Semi-transparent dark bg */
    backdrop-filter: blur(20px);           /* Blurs content behind the nav */
    -webkit-backdrop-filter: blur(20px);   /* Safari support */
    padding: 14px 0;                       /* Slightly smaller padding when scrolled */
    border-bottom: 1px solid rgba(108, 63, 232, 0.2);  /* Subtle purple line */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* Inner nav wrapper: centers content and applies max-width */
.nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;  /* Logo left, links right */
}

/* Desktop navigation links list */
.nav-links {
    display: flex;
    align-items: center;
    gap: 36px;
    list-style: none;
}

/* Individual nav link styles */
.nav-links a {
    color: var(--text);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    position: relative;        /* For the underline pseudo-element */
    transition: color 0.3s ease;
}

/* Animated underline on hover using ::after pseudo-element */
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;               /* Starts at 0 width */
    height: 2px;
    background: var(--gradient1);  /* Purple gradient underline */
    transition: width 0.3s ease;  /* Grows from left to right on hover */
    border-radius: 2px;
}

.nav-links a:hover {
    color: var(--light);   /* Brighter text on hover */
}

/* Expand the underline to full width on hover */
.nav-links a:hover::after {
    width: 100%;
}

/* Special CTA button in the nav - different from regular links */
.nav-cta {
    background: var(--gradient1) !important;
    color: white !important;
    padding: 10px 24px;
    border-radius: 50px;         /* Pill shape */
    font-weight: 600 !important;
    box-shadow: var(--glow);
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.nav-cta:hover {
    transform: translateY(-2px);                              /* Lift on hover */
    box-shadow: 0 0 40px rgba(108, 63, 232, 0.6) !important;  /* Stronger glow */
}

/* Remove the underline animation from the CTA button */
.nav-cta::after {
    display: none !important;
}

/* Hamburger menu button: hidden on desktop, shown on mobile */
.hamburger {
    display: none;              /* Hidden by default (desktop) */
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 5px;
}

/* Each bar of the hamburger icon */
.hamburger span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--light);
    border-radius: 2px;
    transition: all 0.3s ease;  /* For potential X transformation animation */
}


/* ================================================================
   7. LOGO
   The logo is used in the navbar and footer.
   It combines an SVG icon + text with gradient styling.
   ================================================================ */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

/* Container for the SVG icon */
.logo-icon {
    width: 46px;
    height: 46px;
    position: relative;
}

/* Make SVG fill its container */
.logo-icon svg {
    width: 100%;
    height: 100%;
}

/* "WebLofty" text next to the icon */
.logo-text {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}

/* "Web" part - plain white */
.logo-text span:first-child {
    color: var(--light);
}

/* "Lofty" part - purple gradient text */
.logo-text span:last-child {
    background: var(--gradient1);
    -webkit-background-clip: text;  /* Clip gradient to text shape */
    -webkit-text-fill-color: transparent;  /* Make text transparent to show gradient */
    background-clip: text;
}


/* ================================================================
   8. HERO SECTION
   Full-height first section. Uses CSS Grid for two-column layout:
   left column = text content, right column = visual illustration.
   ================================================================ */
.hero {
    min-height: 100vh;          /* At least full viewport height */
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;           /* Clip overflowing orbs */
    padding: 120px 40px 80px;  /* Top padding accounts for fixed nav height */
}

/* Two-column grid layout for hero content */
.hero-content {
    position: relative;
    z-index: 2;                 /* Above the background layer */
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;  /* Equal columns */
    gap: 80px;
    align-items: center;
    width: 100%;
}

/* Small pill badge above the hero title */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(108, 63, 232, 0.15);  /* Translucent purple bg */
    border: 1px solid rgba(108, 63, 232, 0.3);
    color: var(--text);
    padding: 8px 18px;
    border-radius: 50px;               /* Pill shape */
    font-size: 0.85rem;
    margin-bottom: 28px;
    backdrop-filter: blur(10px);       /* Frosted glass */
}

/* Animated green pulsing dot inside the badge */
.hero-badge .dot {
    width: 8px;
    height: 8px;
    background: var(--accent);  /* Teal/green color */
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

/* Main hero headline */
.hero-title {
    font-size: clamp(2.8rem, 5vw, 4.5rem);  /* Responsive font size */
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -2px;    /* Tight letter spacing for large display text */
    margin-bottom: 24px;
}

/* Line 1 "Transform" - plain white */
.hero-title .line1 { color: var(--light); }

/* Line 2 "Your Vision" - purple gradient text */
.hero-title .line2 {
    background: var(--gradient1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Line 3 "Into Reality" - plain white */
.hero-title .line3 { color: var(--light); }

/* Hero supporting paragraph text */
.hero-subtitle {
    color: var(--text);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 480px;
}

/* Container for the two CTA buttons */
.hero-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;  /* Wraps on small screens */
}

/* Hero statistics row below the CTA buttons */
.hero-stats {
    display: flex;
    gap: 36px;
    margin-top: 56px;
}

/* Individual stat block */
.stat-item {
    display: flex;
    flex-direction: column;
}

/* Large number - gradient color, animated by JavaScript */
.stat-number {
    font-size: 2rem;
    font-weight: 800;
    background: var(--gradient1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Small label below the number */
.stat-label {
    color: var(--text2);
    font-size: 0.85rem;
    margin-top: 2px;
}


/* ================================================================
   9. HERO BACKGROUND (Orbs, Grid Lines, Canvas)
   The decorative background layer sits behind all hero content.
   ================================================================ */

/* Background wrapper - fills the entire hero section */
.hero-bg {
    position: absolute;
    inset: 0;          /* Shorthand for top:0; right:0; bottom:0; left:0 */
    z-index: 0;        /* Behind hero content (z-index: 2) */
}

/* Subtle dot-grid background pattern using CSS gradients */
.grid-lines {
    position: absolute;
    inset: 0;
    background-image:
        /* Horizontal lines */
        linear-gradient(rgba(108, 63, 232, 0.05) 1px, transparent 1px),
        /* Vertical lines */
        linear-gradient(90deg, rgba(108, 63, 232, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;  /* Grid cell size */
}

/* Colored blurred circles for atmospheric depth */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);           /* Heavy blur creates soft glow effect */
    animation: orbFloat 8s ease-in-out infinite;  /* Gentle floating motion */
}

/* Purple orb - top right */
.orb1 {
    width: 500px;
    height: 500px;
    background: rgba(108, 63, 232, 0.25);
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}

/* Orange orb - bottom left */
.orb2 {
    width: 350px;
    height: 350px;
    background: rgba(255, 107, 53, 0.15);
    bottom: -50px;
    left: -80px;
    animation-delay: -3s;   /* Offset delay so orbs don't move in sync */
}

/* Teal orb - center area */
.orb3 {
    width: 250px;
    height: 250px;
    background: rgba(0, 212, 170, 0.15);
    top: 50%;
    left: 40%;
    animation-delay: -6s;
}

/* Particle canvas fills the entire hero background */
#particleCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;  /* Doesn't block mouse events */
    z-index: 1;
}


/* ================================================================
   10. HERO VISUAL (Right Column)
   The decorative illustration: orbit rings + floating cards + center orb.
   ================================================================ */

/* Right column of hero grid - positions the visual illustration */
.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Square container that all visual elements are positioned within */
.floating-card-container {
    position: relative;
    width: 420px;
    height: 420px;
}

/* Central glowing orb with the lightbulb icon */
.center-orb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* Perfect centering */
    width: 160px;
    height: 160px;
    background: var(--gradient1);      /* Purple gradient fill */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--glow), inset 0 0 40px rgba(255, 255, 255, 0.1);
    z-index: 3;                        /* Above orbit rings, below float cards */
    animation: orbPulse 3s ease-in-out infinite;
}

/* Lightbulb icon inside the center orb */
.center-orb svg {
    width: 70px;
    height: 70px;
}

/* Rotating circular rings around the center orb */
.orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(108, 63, 232, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Inner orbit ring - fastest rotation */
.orbit-ring:nth-child(2) {
    width: 240px;
    height: 240px;
    animation: spin 12s linear infinite;
}

/* Middle orbit ring - medium rotation, reversed direction */
.orbit-ring:nth-child(3) {
    width: 340px;
    height: 340px;
    animation: spin 18s linear infinite reverse;
    border-color: rgba(255, 107, 53, 0.15);  /* Slightly orange tint */
}

/* Outer orbit ring - slowest rotation */
.orbit-ring:nth-child(4) {
    width: 420px;
    height: 420px;
    animation: spin 24s linear infinite;
    border-color: rgba(0, 212, 170, 0.1);  /* Slight teal tint */
}

/* Floating mini info cards that bob up and down */
.float-card {
    position: absolute;
    background: rgba(30, 30, 58, 0.9);         /* Dark translucent background */
    border: 1px solid rgba(108, 63, 232, 0.25);
    border-radius: 16px;
    padding: 14px 18px;
    backdrop-filter: blur(20px);
    z-index: 4;                                 /* On top of orbit rings */
    min-width: 130px;
    animation: cardFloat 4s ease-in-out infinite;  /* Vertical bobbing */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Position each card at different spots around the visual */
.float-card:nth-child(6) {  /* Card 1: top right */
    top: 20px;
    right: 10px;
    animation-delay: -1s;
}
.float-card:nth-child(7) {  /* Card 2: bottom left */
    bottom: 40px;
    left: 5px;
    animation-delay: -2.5s;
}
.float-card:nth-child(8) {  /* Card 3: right middle */
    top: 50%;
    right: -20px;
    animation-delay: -0.5s;
}

/* Icon container inside floating card */
.float-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    font-size: 16px;
}

/* Card title text */
.float-card-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--light);
}

/* Card subtitle text */
.float-card-sub {
    font-size: 0.7rem;
    color: var(--text2);
    margin-top: 2px;
}


/* ================================================================
   11. SHARED SECTION STYLES
   Reusable styles applied to multiple sections throughout the page.
   ================================================================ */

/* Sections have relative positioning to stack above body::before noise overlay */
section {
    position: relative;
    z-index: 2;
}

/* Centered section header block used at top of each section */
.section-header {
    text-align: center;
    margin-bottom: 70px;
}

/* Small category label above section titles */
.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 16px;
}

/* Decorative lines on either side of the tag text */
.section-tag::before,
.section-tag::after {
    content: '';
    width: 30px;
    height: 1px;
    background: var(--primary);
    opacity: 0.5;
}

/* Large section heading */
.section-title {
    font-size: clamp(2rem, 4vw, 3rem);  /* Fluid type scaling */
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--light);
    line-height: 1.2;
}

/* Gradient-colored word inside section title */
.section-title span {
    background: var(--gradient1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Supporting description below section title */
.section-desc {
    color: var(--text);
    font-size: 1.05rem;
    line-height: 1.8;
    max-width: 560px;
    margin: 16px auto 0;
}

/* Max-width content container - centers content on wide screens */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ---- Button Styles (shared across sections) ---- */

/* Primary gradient button - used for main CTAs */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--gradient1);
    color: white;
    padding: 16px 36px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: var(--glow);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;              /* Clips the ripple effect */
}

/* Ripple effect on primary button using pseudo-element */
.btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease;   /* Expands outward on hover */
}

/* Expand the ripple circle on hover */
.btn-primary:hover::before {
    width: 200px;
    height: 200px;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 50px rgba(108, 63, 232, 0.7);  /* Stronger glow */
}

/* Secondary outlined button */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--light);
    padding: 16px 36px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    background: transparent;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-3px);
}


/* ================================================================
   12. SERVICES SECTION
   ================================================================ */
.services {
    padding: 60px 0;
    background: var(--dark2);  /* Slightly lighter than main dark */
}

/* 3-column grid for service cards */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* Individual service card */
.service-card {
    background: var(--dark3);
    border: 1px solid rgba(108, 63, 232, 0.12);
    border-radius: 24px;
    padding: 36px;
    position: relative;
    overflow: hidden;     /* Clips the top border line pseudo-element */
    cursor: pointer;
    transition: all 0.4s ease;
}

/* Top border accent line - slides in from left on hover */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient1);  /* Purple gradient by default */
    transform: scaleX(0);          /* Hidden: zero width */
    transition: transform 0.4s ease;
    transform-origin: left;        /* Grows from left edge */
}

/* Radial gradient overlay - adds depth on hover */
.service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(108, 63, 232, 0.05) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Hover state: lift, border glow, purple shadow */
.service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(108, 63, 232, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), var(--glow);
}

/* Show the top accent line on hover */
.service-card:hover::before { transform: scaleX(1); }

/* Show the gradient overlay on hover */
.service-card:hover::after  { opacity: 1; }

/* --- Orange variant card --- */
.service-card.orange::before {
    background: var(--gradient2);  /* Orange gradient top line */
}
.service-card.orange:hover {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), var(--glow2);
    border-color: rgba(255, 107, 53, 0.3);
}

/* --- Teal variant card --- */
.service-card.teal::before {
    background: var(--gradient3);  /* Teal gradient top line */
}
.service-card.teal:hover {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 212, 170, 0.3);
    border-color: rgba(0, 212, 170, 0.3);
}

/* Icon container - colored background square */
.service-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 26px;
    position: relative;
    z-index: 1;  /* Above the ::after overlay */
}

/* Color variants for icon backgrounds */
.service-icon.purple { background: rgba(108, 63, 232, 0.2); }
.service-icon.orange { background: rgba(255, 107, 53, 0.2); }
.service-icon.teal   { background: rgba(0, 212, 170, 0.2); }

/* Service card heading */
.service-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--light);
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

/* Service card body text */
.service-desc {
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.7;
    position: relative;
    z-index: 1;
    margin-bottom: 24px;
}

/* Feature bullet list */
.service-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 1;
}

/* Individual feature item with custom bullet dot */
.service-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-size: 0.88rem;
}

/* Custom purple bullet dot before each feature */
.service-features li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);  /* Purple dot */
    flex-shrink: 0;
}

/* Orange variant bullet color */
.service-card.orange .service-features li::before { background: var(--secondary); }

/* Teal variant bullet color */
.service-card.teal .service-features li::before { background: var(--accent); }

/* "Learn more" style link at bottom of card */
.service-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 28px;
    position: relative;
    z-index: 1;
    text-decoration: none;
    transition: gap 0.3s ease;  /* Arrow moves away from text on hover */
}

/* Color variants for service links */
.service-card.orange .service-link { color: var(--secondary); }
.service-card.teal   .service-link { color: var(--accent); }

/* Increase gap between text and arrow on hover */
.service-link:hover { gap: 12px; }


/* ================================================================
   13. HOW IT WORKS SECTION
   ================================================================ */
.how-it-works {
    padding: 60px 0;
    background: var(--dark);
}

/* 4-column grid with a connecting line pseudo-element */
.steps-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
}

/* Horizontal connecting line between step numbers */
.steps-container::before {
    content: '';
    position: absolute;
    top: 50px;                    /* Aligns with center of the step number circles */
    left: 12.5%;                  /* Starts at center of first step */
    right: 12.5%;                 /* Ends at center of last step */
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(108, 63, 232, 0.4) 20%,
        rgba(108, 63, 232, 0.4) 80%,
        transparent
    );
    z-index: 0;                   /* Behind the step circles */
}

/* Individual step - centered content */
.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;                   /* Above the connecting line */
    padding: 0 10px;
}

/* Circular container for the step number */
.step-number {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--dark3);
    border: 2px solid rgba(108, 63, 232, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    position: relative;
    transition: all 0.4s ease;
}

/* Gradient ring that appears on hover using ::before */
.step-number::before {
    content: '';
    position: absolute;
    inset: -4px;                  /* Slightly larger than the circle */
    border-radius: 50%;
    background: var(--gradient1);
    z-index: -1;                  /* Behind the circle */
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* On hover: hide the default border */
.step-item:hover .step-number {
    border-color: transparent;
}

/* On hover: reveal the gradient ring */
.step-item:hover .step-number::before {
    opacity: 1;
}

/* Step number text ("01", "02", etc.) */
.step-num-text {
    font-size: 1.6rem;
    font-weight: 900;
    background: var(--gradient1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Step title */
.step-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--light);
    margin-bottom: 12px;
}

/* Step description text */
.step-desc {
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.7;
}


/* ================================================================
   15. IDEA GENERATOR SECTION
   ================================================================ */
.generator {
    padding: 60px 0;
    background: var(--dark2);
}

/* Rounded inner card for the generator tool */
.generator-inner {
    background: var(--dark3);
    border: 1px solid rgba(108, 63, 232, 0.2);
    border-radius: 32px;
    padding: 60px;
    text-align: center;
    position: relative;
    overflow: hidden;   /* Clips the rotating background gradient */
}

/* Slowly rotating radial gradient for atmospheric effect */
.generator-inner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(108, 63, 232, 0.06) 0%, transparent 50%);
    animation: rotate 20s linear infinite;
    pointer-events: none;
}

/* Generator heading */
.generator-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--light);
    margin-bottom: 12px;
    position: relative;
    z-index: 1;         /* Above the rotating background */
}

/* Gradient part of generator heading */
.generator-title span {
    background: var(--gradient1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Subtitle text */
.generator-sub {
    color: var(--text);
    margin-bottom: 40px;
    font-size: 1rem;
    position: relative;
    z-index: 1;
}

/* Input row: text input + dropdown + button */
.generator-form {
    display: flex;
    gap: 16px;
    max-width: 680px;
    margin: 0 auto 40px;
    position: relative;
    z-index: 1;
}

/* Text input for user's situation description */
.generator-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(108, 63, 232, 0.25);
    color: var(--light);
    padding: 16px 24px;
    border-radius: 50px;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s ease;
    font-family: inherit;
}

.generator-input:focus {
    border-color: var(--primary);
    background: rgba(108, 63, 232, 0.08);
    box-shadow: 0 0 0 3px rgba(108, 63, 232, 0.1);  /* Focus ring */
}

.generator-input::placeholder { color: var(--text2); }

/* Category dropdown select */
.generator-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(108, 63, 232, 0.25);
    color: var(--light);
    padding: 16px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.generator-select:focus { border-color: var(--primary); }

/* Dropdown options use dark background */
.generator-select option { background: var(--dark3); }

/* Output box: hidden by default */
.idea-output {
    display: none;                         /* Hidden until JavaScript shows it */
    background: rgba(108, 63, 232, 0.08);
    border: 1px solid rgba(108, 63, 232, 0.25);
    border-radius: 20px;
    padding: 28px 36px;
    text-align: left;
    max-width: 680px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    animation: fadeInUp 0.5s ease;        /* Slide up when revealed */
}

/* JavaScript adds .visible class to show the output */
.idea-output.visible { display: block; }

/* "Your Personalized Idea" label */
.output-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 12px;
}

/* The generated idea text */
.output-text {
    color: var(--light);
    font-size: 1.05rem;
    line-height: 1.8;
    font-weight: 500;
}

/* Row of action buttons below the idea */
.output-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* Individual action buttons (Regenerate, Save, Share) */
.output-btn {
    padding: 8px 20px;
    border-radius: 50px;
    border: 1px solid rgba(108, 63, 232, 0.3);
    background: transparent;
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.output-btn:hover {
    background: rgba(108, 63, 232, 0.15);
    color: var(--light);
    border-color: rgba(108, 63, 232, 0.5);
}



/* ================================================================
   17A. FAQ SECTION
   Adds visible FAQ content to support users and FAQ structured data.
   ================================================================ */
.faq {
    padding: 60px 0;
    background: var(--dark);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.faq-item {
    background: var(--dark3);
    border: 1px solid rgba(108, 63, 232, 0.16);
    border-radius: 24px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease;
}

.faq-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient1);
    opacity: 0.85;
}

.faq-item:hover {
    transform: translateY(-6px);
    border-color: rgba(108, 63, 232, 0.32);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.28), var(--glow);
}

.faq-item h3 {
    color: var(--light);
    font-size: 1.08rem;
    line-height: 1.5;
    margin-bottom: 12px;
}

.faq-item p {
    color: var(--text);
    font-size: 0.94rem;
    line-height: 1.8;
}

.faq-item a,
.contact-item-text a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.faq-item a:hover,
.contact-item-text a:hover {
    text-decoration: underline;
}

.faq-item-wide {
    grid-column: 1 / -1;
}

/* ================================================================
   18. CONTACT SECTION
   ================================================================ */
.contact {
    padding: 60px 0;
    background: var(--dark2);
}

/* Two-column layout: info left, form right */
.contact-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

/* Left column heading */
.contact-info h3 {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--light);
    line-height: 1.3;
    margin-bottom: 20px;
}

/* Gradient colored word in contact heading */
.contact-info h3 span {
    background: var(--gradient1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Contact description paragraph */
.contact-info p {
    color: var(--text);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 40px;
}

/* Stack of contact detail items */
.contact-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Individual contact detail row */
.contact-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Icon box for each contact detail */
.contact-item-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(108, 63, 232, 0.15);
    border: 1px solid rgba(108, 63, 232, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

/* Contact detail label and value */
.contact-item-text strong {
    display: block;
    color: var(--light);
    font-size: 0.92rem;
    margin-bottom: 2px;
}

.contact-item-text span {
    color: var(--text2);
    font-size: 0.85rem;
}

/* Right column: the contact form card */
.contact-form {
    background: var(--dark3);
    border: 1px solid rgba(108, 63, 232, 0.15);
    border-radius: 28px;
    padding: 44px;
}

/* Form field group: label + input */
.form-group {
    margin-bottom: 22px;
}

/* Form field label */
.form-group label {
    display: block;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

/* Input, textarea, select shared styles */
.form-control {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(108, 63, 232, 0.2);
    color: var(--light);
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 0.92rem;
    outline: none;
    transition: all 0.3s ease;
    font-family: inherit;
}

.form-control:focus {
    border-color: var(--primary);
    background: rgba(108, 63, 232, 0.06);
    box-shadow: 0 0 0 3px rgba(108, 63, 232, 0.1);
}

.form-control::placeholder { color: var(--text2); }

/* Textarea: allow vertical resize only */
textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

/* Side-by-side fields row (first name + last name) */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Form submit button */
.form-submit {
    width: 100%;
    padding: 16px;
    background: var(--gradient1);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--glow);
    font-family: inherit;
}

.form-submit:hover {
    box-shadow: 0 0 50px rgba(108, 63, 232, 0.7);
    transform: translateY(-2px);
}


/* ================================================================
   20. FOOTER
   ================================================================ */
footer {
    background: var(--dark2);
    border-top: 1px solid rgba(108, 63, 232, 0.1);
    padding: 40px 0 40px;
}

/* Main footer 4-column grid */
.footer-inner {
    display: grid;
    grid-template-columns: 2fr 1fr;  /* Brand col is wider */
    gap: 80px;
    margin-bottom: 35px;
}

/* Footer brand column */
.footer-brand .logo {
    margin-bottom: 18px;
}

.footer-brand p {
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 24px;
}

/* Social media icon row */
.social-links {
    display: flex;
    gap: 12px;
}

/* Individual social icon link */
.social-link {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(108, 63, 232, 0.1);
    border: 1px solid rgba(108, 63, 232, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    transform: translateY(-3px);
    box-shadow: var(--glow);
}

/* Footer link column headings */
.footer-col h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--light);
    margin-bottom: 20px;
    letter-spacing: 0.3px;
}

/* Footer link list */
.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Footer link items */
.footer-col ul li a {
    color: var(--text2);
    text-decoration: none;
    font-size: 0.88rem;
    transition: color 0.3s ease;
}

.footer-col ul li a:hover { color: var(--primary); }

/* Bottom bar: copyright + legal links */
.footer-bottom {
    border-top: 1px solid rgba(108, 63, 232, 0.1);
    padding-top: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-bottom p {
    color: var(--text2);
    font-size: 0.85rem;
}

/* Highlighted brand name in copyright text */
.footer-bottom p span {
    color: var(--primary);
}

/* Row of legal links in footer bottom */
.footer-links {
    display: flex;
    gap: 24px;
}

.footer-links a {
    color: var(--text2);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

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


/* ================================================================
   21. MOBILE MENU OVERLAY
   Full-screen menu that slides in on mobile devices.
   JavaScript toggles the .open class to show/hide it.
   ================================================================ */
.mobile-menu {
    display: none;                         /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 13, 26, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 999;                          /* Above everything except cursor */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

/* JavaScript adds .open class to show the menu */
.mobile-menu.open { display: flex; }

/* Mobile menu navigation links */
.mobile-menu a {
    color: var(--light);
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 700;
    transition: color 0.3s ease;
}

.mobile-menu a:hover { color: var(--primary); }

/* X close button in top-right of mobile menu */
.mobile-menu-close {
    position: absolute;
    top: 24px;
    right: 30px;
    font-size: 1.8rem;
    color: var(--text);
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
}

.mobile-menu-close:hover { color: var(--light); }


/* ================================================================
   22. SCROLL-TO-TOP BUTTON
   Fixed button in bottom-right corner.
   Appears when user scrolls past 400px (JavaScript toggles .visible)
   ================================================================ */
.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    background: var(--gradient1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    box-shadow: var(--glow);
    opacity: 0;                        /* Hidden by default */
    transform: translateY(20px);       /* Slightly below final position */
    transition: all 0.4s ease;
    border: none;
    color: white;
    font-size: 1.1rem;
    font-family: inherit;
}

/* JavaScript adds .visible when user scrolls past 400px */
.scroll-top.visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-top:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 50px rgba(108, 63, 232, 0.7);
}


/* ================================================================
   23. TOAST NOTIFICATION
   Slides up from the bottom to confirm user actions.
   JavaScript adds .show class to trigger the animation.
   ================================================================ */
.success-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);  /* Start off-screen below */
    background: rgba(0, 212, 170, 0.15);
    border: 1px solid rgba(0, 212, 170, 0.4);
    color: var(--accent);
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 10000;
    transition: all 0.4s ease;
    backdrop-filter: blur(20px);
    white-space: nowrap;
}

/* JavaScript adds .show to slide the toast into view */
.success-toast.show {
    transform: translateX(-50%) translateY(0);  /* Slide up to final position */
}


/* ================================================================
   24. SCROLL ANIMATIONS (fade-up)
   Elements with .fade-up class start invisible and below their
   final position. When they enter the viewport (detected by
   IntersectionObserver in JavaScript), the .visible class is added,
   which transitions them to full opacity and correct position.
   ================================================================ */

/* Initial hidden state */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.7s ease;
}

/* Revealed state - added by JavaScript */
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delay classes for sequential animations within a group */
.fade-up-delay-1 { transition-delay: 0.1s; }
.fade-up-delay-2 { transition-delay: 0.2s; }
.fade-up-delay-3 { transition-delay: 0.3s; }
.fade-up-delay-4 { transition-delay: 0.4s; }
.fade-up-delay-5 { transition-delay: 0.5s; }


/* ================================================================
   25. KEYFRAME ANIMATIONS
   All @keyframes used throughout the stylesheet.
   ================================================================ */

/* Gentle pulsing scale for the green dot in hero badge */
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.8); }
}

/* Floating motion for background orbs */
@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(20px, -20px) scale(1.05); }
    66%       { transform: translate(-15px, 15px) scale(0.95); }
}

/* Pulsing glow for the center orb in hero visual */
@keyframes orbPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(108, 63, 232, 0.4), inset 0 0 40px rgba(255, 255, 255, 0.1); }
    50%       { box-shadow: 0 0 60px rgba(108, 63, 232, 0.8), inset 0 0 40px rgba(255, 255, 255, 0.15); }
}

/* Continuous rotation for orbit rings and generator background */
@keyframes spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Vertical bobbing motion for floating cards */
@keyframes cardFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

/* Full rotation (used for generator inner ::before element) */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Fade and slide up for idea output box */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ================================================================
   26. RESPONSIVE / MEDIA QUERIES
   Breakpoints:
   - 1024px: Tablet landscape
   - 768px:  Tablet portrait / large mobile
   - 480px:  Small mobile
   ================================================================ */

/* ---- TABLET LANDSCAPE (max-width: 1024px) ---- */
@media (max-width: 1024px) {

    /* Services: 2 columns instead of 3 */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* How It Works: 2 columns instead of 4, hide connecting line */
    .steps-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .steps-container::before {
        display: none;  /* Connecting line doesn't work in 2-col layout */
    }

    /* Footer: 2 columns instead of 4 */
    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---- TABLET PORTRAIT / LARGE MOBILE (max-width: 768px) ---- */
@media (max-width: 768px) {

    /* Navigation: hide desktop links, show hamburger */
    .nav-links  { display: none; }
    .hamburger  { display: flex; }

    /* Hero: stack columns vertically */
    .hero-content {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    /* Hero: hide the visual illustration on small screens */
    .hero-visual { display: none; }

    /* Hero stats: smaller gap */
    .hero-stats { gap: 24px; }

    /* Services: single column */
    .services-grid { grid-template-columns: 1fr; }

    /* Steps: single column */
    .steps-container { grid-template-columns: 1fr; }

    /* FAQ: single column */
    .faq-grid { grid-template-columns: 1fr; }
    .faq-item-wide { grid-column: auto; }

    /* Contact: stack columns vertically */
    .contact-inner { grid-template-columns: 1fr; gap: 50px; }

    /* Footer: single column */
    .footer-inner  { grid-template-columns: 1fr; gap: 40px; }

    /* Footer bottom: center everything */
    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    /* Generator form: stack vertically */
    .generator-form { flex-direction: column; }


    /* Reduce horizontal padding on containers */
    .container { padding: 0 24px; }

    /* Reduce hero section padding */
    .hero { padding: 100px 24px 60px; }

    /* Reduce inner padding of generator and contact form cards */
    .generator-inner { padding: 40px 28px; }
    .contact-form    { padding: 32px 24px; }

    /* Form name row: stack to single column */
    .form-row { grid-template-columns: 1fr; }

    /* Footer links: allow wrapping */
    .footer-links { flex-wrap: wrap; justify-content: center; }
}

/* ---- SMALL MOBILE (max-width: 480px) ---- */
@media (max-width: 480px) {

    /* Reduce letter spacing on very small screens */
    .hero-title { letter-spacing: -1px; }

    /* Stack hero buttons vertically */
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    /* Full-width buttons on small mobile */
    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* Accessibility and Core Web Vitals helpers */
@media (hover: none), (pointer: coarse) {
    body { cursor: auto; }
    .cursor,
    .cursor-ring { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}


/* ================================================================
   27. MULTI-PAGE CONTENT TEMPLATE
   Used by generated SEO pages: services, ideas, blog, city pages,
   language pages, legal pages and informational pages.
   ================================================================ */
body.content-page {
    cursor: auto;
    min-height: 100vh;
}

body.content-page a,
body.content-page button,
body.content-page input,
body.content-page select,
body.content-page textarea {
    cursor: pointer;
}

.content-page .page-navbar {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 14px 0;
    background: rgba(13, 13, 26, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(108, 63, 232, 0.18);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.22);
}

.page-nav-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.page-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--light);
    text-decoration: none;
    font-weight: 900;
    font-size: 1.45rem;
    letter-spacing: -0.5px;
    white-space: nowrap;
}

.page-brand img {
    width: 42px;
    height: 42px;
    border-radius: 12px;
}

.page-brand span span {
    color: #9B6BFF;
}

.page-menu {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.page-menu a {
    color: var(--text);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    transition: color 0.2s ease;
}

.page-menu a:hover,
.page-menu a[aria-current="page"] {
    color: var(--light);
}

.page-main {
    position: relative;
    z-index: 2;
}

.page-hero {
    padding: 82px 0 54px;
    background:
        radial-gradient(circle at 88% 12%, rgba(108, 63, 232, 0.18), transparent 30%),
        radial-gradient(circle at 8% 86%, rgba(255, 107, 53, 0.14), transparent 28%),
        var(--dark);
    border-bottom: 1px solid rgba(108, 63, 232, 0.12);
}

.page-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font-weight: 800;
    font-size: 0.78rem;
    margin-bottom: 20px;
}

.page-kicker::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 18px rgba(0, 212, 170, 0.8);
}

.page-hero h1 {
    max-width: 880px;
    color: var(--light);
    font-size: clamp(2.2rem, 5vw, 4.4rem);
    line-height: 1.08;
    letter-spacing: -2px;
    margin-bottom: 22px;
}

.page-hero h1 span,
.gradient-text {
    background: var(--gradient1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-hero p {
    max-width: 760px;
    color: var(--text);
    font-size: 1.08rem;
    line-height: 1.85;
}

.page-breadcrumb {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--text2);
    font-size: 0.88rem;
    margin-bottom: 24px;
}

.page-breadcrumb a {
    color: var(--text);
    text-decoration: none;
}

.page-breadcrumb a:hover {
    color: var(--primary);
}

.page-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 34px;
}

.page-section {
    padding: 58px 0;
    background: var(--dark2);
}

.page-section:nth-of-type(even) {
    background: var(--dark);
}

.page-section h2 {
    color: var(--light);
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    line-height: 1.25;
    letter-spacing: -0.8px;
    margin-bottom: 18px;
}

.page-section .lead {
    max-width: 820px;
    color: var(--text);
    font-size: 1.02rem;
    line-height: 1.85;
    margin-bottom: 28px;
}

.page-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.page-grid.two {
    grid-template-columns: repeat(2, 1fr);
}

.page-card,
.article-card,
.policy-card {
    background: var(--dark3);
    border: 1px solid rgba(108, 63, 232, 0.16);
    border-radius: 22px;
    padding: 28px;
    position: relative;
    overflow: hidden;
}

.page-card::before,
.article-card::before,
.policy-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--gradient1);
    opacity: 0.9;
}

.page-card h3,
.article-card h3,
.policy-card h3 {
    color: var(--light);
    font-size: 1.18rem;
    line-height: 1.45;
    margin-bottom: 10px;
}

.page-card p,
.article-card p,
.policy-card p,
.page-copy p,
.page-copy li {
    color: var(--text);
    line-height: 1.85;
    font-size: 0.96rem;
}

.page-card a,
.article-card a,
.page-copy a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
}

.page-card a:hover,
.article-card a:hover,
.page-copy a:hover {
    text-decoration: underline;
}

.page-list {
    margin: 18px 0 0;
    padding-left: 22px;
}

.page-list li {
    margin-bottom: 10px;
}

.page-copy {
    max-width: 900px;
}

.page-copy h2,
.page-copy h3 {
    color: var(--light);
    margin: 32px 0 12px;
}

.page-copy h2:first-child,
.page-copy h3:first-child {
    margin-top: 0;
}

.page-copy blockquote {
    border-left: 4px solid var(--primary);
    padding: 18px 22px;
    margin: 28px 0;
    background: rgba(108, 63, 232, 0.08);
    color: var(--text);
    border-radius: 0 16px 16px 0;
    line-height: 1.8;
}

.cta-band {
    padding: 52px 0;
    background: linear-gradient(135deg, rgba(108, 63, 232, 0.18), rgba(255, 107, 53, 0.12)), var(--dark3);
    border-top: 1px solid rgba(108, 63, 232, 0.16);
    border-bottom: 1px solid rgba(108, 63, 232, 0.16);
}

.cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}

.cta-box h2 {
    color: var(--light);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    margin-bottom: 10px;
}

.cta-box p {
    color: var(--text);
    line-height: 1.8;
    max-width: 680px;
}

.page-footer {
    position: relative;
    z-index: 2;
    background: var(--dark2);
    border-top: 1px solid rgba(108, 63, 232, 0.12);
    padding: 34px 0;
}

.page-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}

.page-footer p {
    color: var(--text2);
    font-size: 0.9rem;
}

.page-footer-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.page-footer-links a {
    color: var(--text2);
    text-decoration: none;
    font-size: 0.88rem;
}

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

@media (max-width: 900px) {
    .page-grid,
    .page-grid.two {
        grid-template-columns: 1fr;
    }

    .page-nav-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-menu {
        gap: 14px;
    }
}

@media (max-width: 520px) {
    .page-hero { padding: 58px 0 38px; }
    .page-hero h1 { letter-spacing: -1px; }
    .page-menu a { font-size: 0.86rem; }
    .page-card, .article-card, .policy-card { padding: 22px; }
}