@import url('../assets/fonts.css');
@import url('../assets/main.css');

/* Universal box-sizing and mobile stability */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Prevent horizontal scrolling on all elements */
* {
    max-width: 100%;
}

:root {
  /* Stella Colors - New Teal Theme */
  --stella-primary: #50B5B8;
  /* Text-on-light variant of --stella-primary. The brand teal is only 2.43:1
     against white, below the WCAG AA 4.5:1 floor for normal text, so it must
     not be used as a text colour. This is the same hue and saturation,
     darkened until it clears AA on both white (4.86:1) and the #f4fafa
     callout background (4.60:1). Use --stella-primary for fills and borders,
     --stella-primary-ink for type. */
  --stella-primary-ink: #337C7E;
  --stella-secondary: #ffffff;
  --stella-accent: #50B5B8;
  --stella-text: #2C2C2C;
  --stella-border: #B2DFDB;
  --stella-cta: #50B5B8;

  /* Responsive Design Tokens */
  --container-max: 1200px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Fluid Typography (mobile-first) */
  --text-xs: clamp(0.75rem, 1.5vw, 0.875rem);
  --text-sm: clamp(0.875rem, 1.6vw, 1rem);
  --text-base: clamp(1rem, 1.8vw, 1.125rem);
  --text-lg: clamp(1.125rem, 2vw, 1.25rem);
  --text-xl: clamp(1.25rem, 2.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 3vw, 2rem);
  --text-3xl: clamp(2rem, 4vw, 2.5rem);
  --text-4xl: clamp(2.5rem, 5vw, 3.5rem);

  /* Border Radius */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  /* Breakpoints (for reference in comments) */
  /* xs: 360px, sm: 600px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1440px */
}

/* Dark mode disabled - keeping consistent design */

html {
    overflow-x: hidden;
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background: var(--stella-secondary);
    color: var(--stella-text);
    font-size: var(--text-base);
    min-height: 100vh;
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}

/* Headings use Cocogoose Pro */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cocogoose Pro', sans-serif;
}

/* Global responsive utilities */
img, svg, canvas, video {
    max-width: 100%;
    height: auto;
}

/* CLS Optimization - Aspect Ratios for Images */
.platform-image-placeholder,
.complexity-image-placeholder {
    aspect-ratio: 16 / 9;
}

.hero-section {
    aspect-ratio: auto; /* Prevent CLS on background image */
}

.product-icon {
    aspect-ratio: 1 / 1; /* Square icons */
}

/* Word breaking for long text */
.content, p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Enhanced Focus Styles for Accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--stella-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Touch targets minimum size */
button,
a,
input[type="checkbox"],
input[type="radio"],
.checkbox-item,
.nav-link {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Override for text links that need to flow inline */
a:not(.btn-primary):not(.nav-link):not(.nav-cta):not(.nav-cta-page):not(.about-btn):not(.about-hero-navlink) {
    min-height: auto;
    min-width: auto;
    display: inline;
}

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

/* Contact Sales Page Styles */
.contact-sales-container {
    background: white;
    min-height: calc(100vh - 120px);
    padding: 2rem;
}

.contact-main-content {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    align-items: flex-start;
}

.contact-left-section {
    width: 100%;
    position: relative;
    order: 1;
}

.contact-form-section {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    order: 2;
}

/* md: 768px */
@media (min-width: 768px) {
    .contact-main-content {
        flex-direction: row;
        gap: var(--space-6);
    }

    .contact-left-section {
        width: 40%;
        order: 0;
    }

    .contact-form-section {
        width: 60%;
        order: 0;
    }
}

.contact-form-container {
    background: #B8E6E1;
    border: 3px solid #B8E6E1;
    border-radius: 8px;
    padding: 2rem;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Contact Description */
.contact-description {
    margin-bottom: 1rem;
    color: #064561;
}

.contact-description h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #064561;
    margin-bottom: 0.75rem;
}

.contact-description p {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Grouped Cubes Container */
.contact-cubes-group {
    position: relative;
    width: 300px;
    height: 250px;
    margin: 0 auto;
}

/* Contact Cube Positioning - Grouped Together */
.contact-cube {
    position: absolute;
    pointer-events: none;
}

.contact-cube-red {
    width: 90px;
    height: 90px;
    top: 80px;
    left: 25px;
    opacity: 0.7;
    z-index: 1;
}

.contact-cube-blue {
    width: 120px;
    height: 120px;
    top: 10px;
    left: 100px;
    opacity: 0.8;
    transform: rotate(180deg);
}

.contact-cube-teal {
    width: 60px;
    height: 60px;
    top: 150px;
    left: 130px;
    opacity: 0.8;
    transform: rotate(90deg);
}

.contact-cube-yellow {
    width: 45px;
    height: 45px;
    top: 205px;
    left: 70px;
    opacity: 0.8;
    transform: rotate(-90deg);
}

/* Contact Form Styles */
.contact-title {
    font-size: var(--text-3xl);
    color: #044560;
    margin-bottom: var(--space-5);
    font-weight: 400;
    line-height: 1.2;
}

.contact-sales-form {
    display: flex;
    flex-direction: column;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* sm: 600px */
@media (min-width: 600px) {
    .form-row {
        flex-direction: row;
        gap: var(--space-4);
    }
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.half-width {
    flex: 1;
}

.form-group label {
    color: #064561;
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.form-group input,
.form-group textarea {
    padding: var(--space-3);
    border: 1px solid #B8E6E1;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-family: inherit;
    min-height: 44px; /* Touch target minimum */
    width: 100%;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--stella-primary);
    box-shadow: 0 0 0 2px rgba(78, 205, 196, 0.2);
}

/* Interest Sections */
.interest-section {
    margin-top: 1.5rem;
}

.interest-section h3 {
    color: #064561;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.interest-section p {
    color: #064561;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.checkbox-grid {
    container-type: inline-size;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
}

/* Container query: md ~400px for 2-column layout on tablets and desktop */
@container (min-width: 400px) {
    .checkbox-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Custom Checkbox Styling */
.checkbox-item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    cursor: pointer;
    font-size: 0.85rem;
    color: #064561;
    padding: 0.125rem 0;
    min-height: auto;
}

.checkbox-item input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 16px;
    height: 16px;
    border: 2px solid #064561;
    border-radius: 3px;
    margin-right: 0.5rem;
    position: relative;
    flex-shrink: 0;
}

.checkbox-item input[type="checkbox"]:checked + .checkmark {
    background: #064561;/*var(--stella-primary);*/
    border-color: var(--stella-secondary);
}

.checkbox-item input[type="checkbox"]:checked + .checkmark::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Privacy Text */
.privacy-text {
    margin-top: 2rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
    border-left: 4px solid var(--stella-primary);
}

.privacy-text p {
    margin-bottom: 0.75rem;
    color: #6c757d;
    line-height: 1.4;
}

.privacy-consent {
    margin-top: 1rem;
    font-weight: 500;
    position: relative;
    padding: 0.5rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* Checkbox validation error states */
.privacy-consent.error {
    background-color: rgba(220, 53, 69, 0.15) !important;
    border: 2px solid #dc3545 !important;
    border-radius: 4px !important;
    animation: shake 0.3s ease-in-out;
}

.privacy-consent.error .checkmark {
    border-color: #dc3545 !important;
    border-width: 2px !important;
}

.checkbox-error-message {
    display: none;
    color: #dc3545;
    font-size: 0.75rem;
    margin-top: 0.5rem;
    font-weight: 500;
    padding: 0.25rem;
    background-color: rgba(220, 53, 69, 0.1);
    border-radius: 3px;
}

.privacy-consent.error .checkbox-error-message {
    display: block !important;
}

/* Shake animation for error highlighting */
@keyframes shake {
    0%, 20%, 40%, 60%, 80% {
        transform: translateX(0);
    }
    10% {
        transform: translateX(-3px);
    }
    30% {
        transform: translateX(3px);
    }
    50% {
        transform: translateX(-2px);
    }
    70% {
        transform: translateX(2px);
    }
}

/* Submit Button */
.contact-submit-btn {
    background: #50B5B8;
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 6px;
    font-family: 'Cocogoose Pro', sans-serif;
    font-weight: 350;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 1rem;
    border-bottom-right-radius: 20px;
}

.contact-submit-btn:hover {
    background: #459A9D;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(80, 181, 184, 0.3);
}

/* Mobile-specific styles (max-width approach for specific overrides) */
@media (max-width: 767px) {
    /* Make contact cubes smaller on mobile */
    .contact-cubes-group {
        width: 200px;
        height: 150px;
        margin: 0 auto 2rem;
    }

    /* White input backgrounds on mobile */
    .form-group input,
    .form-group textarea {
        background: white !important;
        color: #064561 !important;
        border: 1px solid #B8E6E1;
    }

    /* Hide specific cubes on mobile */
    .cube-yellow-1,
    .cube-blue-1,
    .cube-yellow-2,
    .cube-teal-2 {
        display: none;
    }

    .contact-cube-red {
        width: 45px;
        height: 45px;
        top: 50px;
        left: 15px;
    }

    .contact-cube-blue {
        width: 60px;
        height: 60px;
        top: 10px;
        left: 60px;
    }

    .contact-cube-teal {
        width: 30px;
        height: 30px;
        top: 90px;
        left: 80px;
    }

    .contact-cube-yellow {
        width: 22px;
        height: 22px;
        top: 120px;
        left: 40px;
    }

    /* About page mobile heading colors */
    .about-section h2,
    .about-section h3,
    .main-content h2,
    .main-content h3 {
        color: #064561 !important;
    }

    /* About page mobile body text */
    .about-section p,
    .main-content p,
    .main-content li {
        color: #5a6b73 !important;
    }

    /* Value cards: navy heading, muted body on white cards */
    .value-card h3 {
        color: #064561 !important;
    }
    .value-card p {
        color: #5a6b73 !important;
    }

    /* Themed teal borders on mobile */
    .about-section,
    .main-content .about-section {
        border-color: var(--stella-border) !important;
    }
}

/* Header Styles */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    border-bottom: none;
    position: relative;
    z-index: 10;
    background: var(--stella-primary);
}

/* Transparent header on home page - overlays hero image */
.header-transparent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
}

.logo {
    display: flex;
    align-items: center;
    margin-left: 2rem;
}

.logo a {
    text-decoration: none;
    color: white;
}

/* Logo visibility control - use logo-dark.svg on mobile/tablet, STELLA-logo.png on desktop */
.logo-desktop {
    display: none;
}

.logo-desktop img {
    display: block;
}

.logo-mobile {
    display: block;
}

/* Show full logo on desktop */
@media (min-width: 1280px) {
    .logo-desktop {
        display: block;
    }

    .logo-mobile {
        display: none;
    }
}

.nav-menu {
    display: flex;
    gap: 2rem;
    align-items: center;
    margin-right: 6rem;
}

.nav-link {
    text-decoration: none;
    color: white;
    font-family: 'Cocogoose Pro', sans-serif;
    font-weight: 600;
    transition: color 0.2s ease;
    white-space: nowrap;
    font-size: clamp(0.85rem, 1.2vw, 1rem);
}

.nav-link:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* Logo styling */
.logo a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
}

/* CTA Button Styling */
.nav-cta {
    background-color: #95D2D4 !important;
    color: white !important;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 350;
    border-bottom-right-radius: 20px;
    transition: all 0.2s ease;
}

.nav-cta:hover {
    background-color: #7FC1C3 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(149, 210, 212, 0.3);
}

/* Page CTA Button Styling (for home.ejs buttons) */
.nav-cta-page {
    background-color: #50B5B8 !important;
    color: white !important;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-family: 'Cocogoose Pro', sans-serif;
    font-weight: 350;
    border-bottom-right-radius: 20px;
    transition: all 0.2s ease;
}

.nav-cta-page:hover {
    background-color: #459A9D !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(80, 181, 184, 0.3);
}

/* Main Content Styles */
.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem;
    position: relative;
    z-index: 1;
}

/* New Homepage Styles */

/* Hero Section - Mobile First */
.hero-section {
    background-image: url('../assets/img/People2.webp');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    color: white;
    padding: calc(100px + var(--space-8)) var(--space-4) var(--space-8);
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 50vh;
}

/* md: 768px */
@media (min-width: 768px) {
    .hero-section {
        min-height: 60vh;
        padding: calc(100px + var(--space-8)) var(--space-6) var(--space-8);
    }
}

/* lg: 1024px */
@media (min-width: 1024px) {
    .hero-section {
        min-height: 70vh;
        padding: calc(100px + var(--space-8)) var(--space-8) var(--space-8);
    }
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}


.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

/* Cube Image System - Positioned according to PDF mockup */
/* Picture elements for WebP support - make them transparent wrappers */
.hero-section picture {
    display: contents;
}

.contact-cubes-group picture {
    display: contents;
}

.cube-image {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

/* Hero Section Cubes */
.cube-red-1 {
    width: 50px;
    height: 50px;
    top: 25%;
    left: 15%;
    transform: rotate(180deg); 
    opacity: 0.5;
}

.cube-blue-1 {
    width: 100px;
    height: 100px;
    top: 20%;
    right: 10%;
    transform: rotate(270deg);
    opacity: 0.5;
}

.cube-yellow-1 {
    width: 60px;
    height: 60px;
    bottom: 20%;
    right: 25%;
    transform: rotate(270deg);
    opacity: 0.5;
}

.cube-teal-1 {
    width: 45px;
    height: 45px;
    bottom: 20%;
    left: 8%;
    transform: rotate(90deg);
    opacity: 0.5;
}

/* Platform Section Cubes */
.cube-yellow-2 {
    width: 35px;
    height: 35px;
    top: 15%;
    left: 5%;
    opacity: 0.5;
}

.cube-teal-2 {
    width: 130px;
    height: 130px;
    bottom: 2%;
    right: 32%;
    opacity: 0.6;
    transform: rotate(180deg);
}


.hero-cta {
    margin-top: 1rem;
}

/* Section Styles */
.platform-section,
.complexity-section,
.result-section,
.cta-section {
    padding: 4rem 2rem;
}

.section-content {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: center;
}

/* sm: 600px */
@media (min-width: 600px) {
    .section-content {
        gap: var(--space-6);
    }
}

/* md: 768px - Tablet layout med smalare bilder, mer text-utrymme */
@media (min-width: 768px) {
    .platform-section .section-content {
        grid-template-columns: 3fr 1fr;
        align-items: start;
    }

    .complexity-section .section-content {
        grid-template-columns: 1fr 3fr;
        align-items: start;
    }

    .platform-image-placeholder,
    .complexity-image-placeholder {
        aspect-ratio: auto;
        width: 100%;
    }
}

/* lg: 1280px - Desktop layout med balanserade proportioner */
@media (min-width: 1280px) {
    .platform-section .section-content {
        grid-template-columns: 2fr 1fr;
    }

    .complexity-section .section-content {
        grid-template-columns: 1fr 2fr;
    }

    .platform-image-placeholder,
    .complexity-image-placeholder {
        aspect-ratio: auto;
        width: 100%;
    }
}

.platform-section {
    background: #50B5B8;
    color: white;
    border-bottom-left-radius: 150px;
    position: relative;
    margin-top: 0;
    padding-top: 4rem;
}

.complexity-section {
    background: white;
}

/* "See Stella in action" - Synthesia demo video, jumped to from the hero CTA.
   Tinted rather than white so it separates from .complexity-section above it.
   The site header is not sticky, so scroll-margin-top only needs to be a small
   breathing gap, not a header offset. */
.video-section {
    background: #f4fafa;
    padding: 4rem 2rem;
    text-align: center;
    scroll-margin-top: var(--space-4);
}

.video-section h2 {
    color: #064561;
    font-size: var(--text-3xl);
    margin: 0 0 var(--space-4);
}

.video-section p {
    color: #5a6b73;
    font-size: var(--text-lg);
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto var(--space-6);
}

/* 16:9 frame holding the embed. The iframe is absolutely positioned to fill
   it, so the box height comes from aspect-ratio and never from the iframe. */
.video-embed {
    position: relative;
    aspect-ratio: 1920 / 1080;
    /* width is required: as a grid item with auto side margins this box would
       otherwise shrink-to-fit, and since the iframe inside is absolutely
       positioned there is no in-flow content, so it would collapse to zero. */
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(6, 69, 97, 0.12);
    background: #0b2a3a;
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

@media (max-width: 600px) {
    .video-section {
        padding: 3rem 1.5rem;
    }
}

.text-column {
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.text-column h2 {
    font-size: var(--text-3xl);
    color: var(--stella-primary-ink);
    margin-bottom: var(--space-5);
    font-weight: 400;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.text-column p {
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--stella-text);
    font-weight: 300;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* White text for platform section */
.platform-section .text-column h2,
.platform-section .text-column p,
.hero-content .text-column h2 {
    color: white;
}

/* Dark text for complexity section */
.complexity-section .text-column h2,
.complexity-section .text-column p {
    color: #044560;
}

.platform-image-placeholder,
.complexity-image-placeholder {
    height: 200px;
    border-radius: 40px;
    border-bottom-left-radius: 125px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Responsive image heights */
@media (min-width: 600px) {
    .platform-image-placeholder,
    .complexity-image-placeholder {
        height: 250px;
    }
}

@media (min-width: 1024px) {
    .platform-image-placeholder,
    .complexity-image-placeholder {
        height: 350px;
    }
}

.platform-image-placeholder {
    background-image: url('../assets/img/Women.webp');
}

.complexity-image-placeholder {
    background-image: url('../assets/img/Opinion.webp');
}

.result-heading-integrated {
    font-size: 2rem;
    margin-bottom: 1rem;
    font-weight: 400;
    color: #044560;
    position: relative;
    z-index: 2;
}

.result-text-integrated {
    font-size: 1.1rem;
    font-weight: 300;
    max-width: 100%;
    margin: 0;
    line-height: 1.6;
    color: #044560;
    position: relative;
    z-index: 2;
}


/* CTA Section */
.cta-section {
    background: #044560;
    color: white;
    text-align: center;
    border-bottom-right-radius: 150px;
    padding: 2rem 2rem;
}

.cta-section h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    font-weight: 400;
}

.cta-button {
    margin-bottom: 0rem;
}

.cta-section .btn-primary {
    background: #4fb5b8;
    color: white;
    border-color: #4fb5b8;
}

.cta-section .btn-primary:hover {
    background: #3a9396;
    border-color: #3a9396;
}

.cta-benefits {
    max-width: 900px;
    margin: 0 auto;
}

.cta-benefits p {
    font-size: 1.1rem;
    line-height: 1.8;
    font-weight: 300;
}

/* Responsive Design */
@media (max-width: 767px) {
    .hero-title {
        font-size: 2.5rem;
        font-family: "Cocogoose Pro";
        font-style: normal;
    }

    .platform-section .section-content,
    .complexity-section .section-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
    
    .complexity-section .image-column {
        order: -1;
    }
    
    .text-column h2,
    .contact-title,
    .cta-section h2 {
        font-size: 1.4rem;
    }

    /* Mobile padding adjustments */
    .platform-section,
    .complexity-section {
        padding: 3rem 1.5rem !important;
    }

    .platform-section .section-content,
    .complexity-section .section-content {
        padding: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .platform-section .text-column,
    .complexity-section .text-column {
        padding: 0;
        max-width: 100%;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .platform-section .image-column,
    .complexity-section .image-column {
        max-width: 100%;
    }
}

.page-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: #064561;
    text-align: center;
    margin-bottom: var(--space-4);
}

.page-subtitle {
    font-size: var(--text-xl);
    font-weight: 400;
    color: #5a6b73;
    text-align: center;
    margin-bottom: var(--space-8);
}

.hero-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 6rem 2rem 2rem 4rem;
    max-width: 720px;
    position: relative;
    z-index: 2;
}


/* Product Grid Styles - Mobile First with Container Queries */
.product-grid {
    container-type: inline-size;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

/* Container query: sm ~600px */
@container (min-width: 600px) {
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Container query: lg ~1024px */
@container (min-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.product-card {
    background: var(--stella-secondary);
    border: 1px solid var(--stella-border);
    border-radius: 12px;
    padding: 2rem;
    text-align: left;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    color: white;
    margin-bottom: 1.5rem;
}

.product-icon.ch { background-color: #054561; }
.product-icon.ta { background-color: #992533; }
.product-icon.ic { background-color: #29b4b8; }
.product-icon.re { background-color: #fed37d; }
.product-icon.vt { background-color: #edd6d9; }
.product-icon.pc { background-color: #992533; }
.product-icon.ps { background-color: #fed37d; }
.product-icon.pm { background-color: #29b4b8; }

.product-card h3 {
    font-size: 1.5rem;
    font-weight: 350;
    color: var(--stella-primary);
    margin: 0 0 1rem 0;
}

.product-card p {
    font-size: 1rem;
    font-weight: 200;
    color: var(--stella-text);
    margin: 0 0 1.5rem 0;
    line-height: 1.6;
}

/* About Page Styles */
.about-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
}

.about-section {
    background: #ffffff;
    border: 1px solid var(--stella-border);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    box-shadow: 0 2px 8px rgba(6, 69, 97, 0.08);
}

.about-section h2 {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: #064561;
    margin: 0 0 1.5rem 0;
}

.about-section p {
    font-size: var(--text-base);
    color: #5a6b73;
    margin: 0 0 1.5rem 0;
    line-height: 1.7;
}

.about-section p.text-value-card {
  font-size: var(--text-sm);
  color: #5a6b73;
  margin: 0;
  line-height: 1.6;
}

.about-section p:last-child {
    margin-bottom: 0;
}

.values-grid {
    container-type: inline-size;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-top: var(--space-7);
}

/* Container query: sm ~600px */
@container (min-width: 600px) {
    .values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Container query: lg ~1024px */
@container (min-width: 1024px) {
    .values-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Fallback media query for browsers that don't support container queries */
@media (min-width: 768px) {
    .values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .values-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.value-card {
    background: #ffffff;
    border: 1px solid var(--stella-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
}

.value-card h3 {
    font-size: var(--text-lg);
    font-weight: 700;
    color: #064561;
    margin: 0 0 1rem 0;
}

.value-card p {
    font-size: var(--text-sm);
    color: #5a6b73;
    margin: 0;
    line-height: 1.6;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-weight: 200;
    color: #064561;
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--stella-border);
    border-radius: 6px;
    font-size: 16px;
    background: var(--stella-secondary);
    color: var(--stella-text);
    transition: border-color 0.2s ease;
    box-sizing: border-box;
    font-weight: 200;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--stella-primary);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

/* Footer Styles */
.footer {
    background: var(--stella-accent);
    border-top: 1px solid var(--stella-border);
    margin-top: 2rem;
    padding: 3rem 2rem 2rem;
    position: relative;
    z-index: 1;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.footer-section h4 {
    font-weight: 350;
    color: var(--stella-primary);
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
}

.footer-content p {
    color: var(--stella-text);
    font-weight: 200;
    margin: 0;
    line-height: 1.5;
}

/* DNV ISO/IEC 27001 mark, right-hand side of the footer. Absolutely
   positioned against .footer (which is already position: relative) so the
   centred footer text keeps its exact original alignment. */
.footer-cert {
    position: absolute;
    /* Align with the right edge of the 1200px .footer-content column on wide
       screens, falling back to the footer's own 2rem padding below that. */
    right: max(2rem, calc((100% - 1200px) / 2));
    top: 50%;
    transform: translateY(-50%);
    line-height: 0;
}

.footer-cert img {
    display: block;
    width: auto;
    height: 64px;
}

/* Mobile Menu Styles */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 24px;
    height: 24px;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1000;
}

.hamburger-line {
    width: 24px;
    height: 2px;
    background-color: var(--stella-primary);
    transition: all 0.3s ease;
    transform-origin: center;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100%;
    background: var(--stella-secondary);
    z-index: 999;
    transition: right 0.3s ease;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}

.mobile-nav-menu.active {
    right: 0;
}

.mobile-nav-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--stella-border);
}

.mobile-nav-logo img {
    width: 100px;
    height: 34px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(64%) sepia(42%) saturate(451%) hue-rotate(134deg) brightness(94%) contrast(88%);
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    padding: 2rem 0;
}

.mobile-nav-link {
    padding: 1rem 2rem;
    color: #064561;
    text-decoration: none;
    font-weight: 200;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--stella-border);
    transition: all 0.2s ease;
}

.mobile-nav-link:hover {
    background: var(--stella-accent);
    color: white;
}

.mobile-nav-link.active {
    color: #064561;
    font-weight: 350;
}

.mobile-nav-signin {
    margin: 1.5rem 2rem;
    padding: 12px 24px;
    background: var(--stella-primary);
    color: var(--stella-secondary);
    text-decoration: none;
    border-radius: 6px;
    text-align: center;
    font-weight: 200;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.mobile-nav-signin:hover {
    background: var(--stella-accent);
    transform: translateY(-1px);
}

.mobile-nav-cta {
    margin: 0.5rem 2rem 1.5rem 2rem;
    padding: 12px 24px;
    background: #95D2D4;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    text-align: center;
    font-weight: 300;
    font-size: 1rem;
    transition: all 0.2s ease;
    border: 2px solid #95D2D4;
}

.mobile-nav-cta:hover {
    background: #7FC1C3;
    border-color: #7FC1C3;
    transform: translateY(-1px);
}

/* Mobile Responsive Styles */
@media (max-width: 767px) {
    /* Prevent any horizontal scrolling on mobile */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative;
    }

    /* Ensure all containers respect mobile viewport */
    .container, .section-content, .main-content, .contact-main-content {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .platform-section, .complexity-section {
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    body::before {
        width: 100%;
        opacity: 0.3;
    }

    .header {
        justify-content: space-between;
        padding: 1rem 1rem;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    .header:not(.header-transparent) {
        background: var(--stella-primary) !important;
        position: relative !important;
    }

    .header.header-transparent {
        position: absolute;
        background: transparent;
    }

    .header-transparent .hamburger-line {
        background-color: white;
    }

    .logo {
        margin-left: 0;
    }

    .logo img {
        max-width: 200px;
        height: auto;
    }

    .logo-mobile {
        width: 120px;
        height: 42px;
    }

    .nav-menu {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
        margin-right: 0;
    }

    .main-content {
        padding: 2rem 1rem;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    .page-title {
        font-size: 2rem;
        word-wrap: break-word;
        hyphens: auto;
    }

    .page-subtitle {
        font-size: 1rem;
        word-wrap: break-word;
        hyphens: auto;
    }

    .hero-content {
        padding: calc(60px + 2rem) 1rem 2rem 1rem;
        max-width: none;
        width: 100%;
        box-sizing: border-box;
    }

    .hero-content h1 {
        font-size: 2rem;
        word-wrap: break-word;
        hyphens: auto;
    }

    /* Contact form mobile improvements */
    .contact-sales-container {
        padding: 1rem;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .contact-main-content {
        flex-direction: column;
        padding: 0;
        gap: 1rem;
    }

    .contact-left-section {
        display: contents;
    }

    .contact-title,
    .contact-description {
        order: 1;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .contact-form-section {
        order: 2;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .contact-cubes-group {
        order: 3;
    }

    .contact-form-container {
        width: 100%;
        max-width: 100%;
        padding: 1.5rem;
        box-sizing: border-box;
    }

    .form-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .form-group {
        width: 100%;
    }

    .form-group input,
    .form-group textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .product-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .product-card {
        padding: 1.5rem;
        width: 100%;
        box-sizing: border-box;
    }

    .about-section {
        padding: 1.5rem;
        width: 100%;
        box-sizing: border-box;
    }

    .values-grid {
        gap: 1.5rem;
    }

    .footer {
        padding: 2rem 1rem 1rem;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        width: 100%;
        box-sizing: border-box;
    }

    /* Not enough width to sit beside the text without overlapping it, so the
       certification mark drops below and centres. */
    .footer-cert {
        position: static;
        transform: none;
        display: flex;
        justify-content: center;
        margin-top: 1.5rem;
    }

    /* The generic `img { height: auto !important }` further down this same
       media block outranks any height set here, so size by width and let the
       forced auto height follow the 215:200 aspect ratio (60px -> ~56px). */
    .footer-cert img {
        width: 60px;
        height: auto;
    }

    /* Fix any text or images that might overflow */
    p, h1, h2, h3, h4, h5, h6, div, span {
        word-wrap: break-word;
        hyphens: auto;
        max-width: 100%;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
    }

    /* Prevent touch actions that could cause panning */
    .main-content, .hero-section, .platform-section, .complexity-section {
        touch-action: pan-y pinch-zoom;
    }
}

/* ===================================================================== */
/* Agents Page                                                           */
/* ===================================================================== */
.agents-content {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-5);
}

.agents-hero {
    padding: var(--space-8) 0 var(--space-6);
    text-align: center;
}

.agents-hero-title {
    font-size: var(--text-3xl);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #064561;
    margin: 0 0 var(--space-5);
}

.agents-hero-title .accent,
.agents-group-tagline .accent {
    color: var(--stella-primary-ink);
}

.agents-hero-lead {
    font-size: var(--text-lg);
    line-height: 1.6;
    color: #5a6b73;
    max-width: 640px;
    margin: 0 auto var(--space-6);
}

.agents-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
}

.agents-btn {
    display: inline-block;
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: var(--text-base);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.agents-btn-primary {
    background-color: #0b2a3a;
    color: #ffffff;
}

.agents-btn-primary:hover {
    background-color: #06405a;
    transform: translateY(-1px);
}

.agents-btn-secondary {
    background-color: #ffffff;
    color: #0b2a3a;
    border: 1px solid var(--stella-border);
}

.agents-btn-secondary:hover {
    border-color: var(--stella-primary);
    transform: translateY(-1px);
}

/* Hero category nav — four compact buttons under the primary CTA */
.agents-hero-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-4);
}

.agents-hero-navlink {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
    border: 1px solid var(--stella-border);
    background-color: #ffffff;
    color: #0b2a3a;
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.agents-hero-navlink:hover {
    border-color: var(--stella-primary);
    background-color: #f4fafa;
    transform: translateY(-1px);
}

/* Callout */
.agents-callout-section {
    padding: var(--space-4) 0 var(--space-6);
}

.agents-callout {
    background-color: #f4fafa;
    border-left: 4px solid var(--stella-primary);
    border-radius: var(--radius);
    padding: var(--space-6);
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

.agents-callout h3 {
    color: #064561;
    font-size: var(--text-xl);
    font-weight: 700;
    margin: 0 0 var(--space-3);
}

.agents-callout p {
    color: #5a6b73;
    line-height: 1.6;
    margin: 0 0 var(--space-4);
}

.agents-callout-link {
    color: var(--stella-primary-ink);
    font-weight: 600;
    text-decoration: none;
}

.agents-callout-link:hover {
    text-decoration: underline;
}

/* Agent groups + cards */
.agents-group {
    padding: var(--space-6) 0;
    text-align: center;
    /* The site header is not sticky, so there is no header height to offset.
       At 90px the jump landed short of the target and left the bottom of the
       previous group in view. The gap above a group is the 32px bottom
       padding of the preceding section, so stay well under that. */
    scroll-margin-top: var(--space-4);
}

.agents-group-title {
    color: #064561;
    font-size: var(--text-3xl);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-2);
}

.agents-group-tagline {
    color: #5a6b73;
    font-size: var(--text-lg);
    margin: 0 0 var(--space-6);
}

.agents-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    max-width: 920px;
    margin: 0 auto;
}

/* Third card of each section spans full width, beneath the first two */
.agents-grid .agent-card:nth-child(3) {
    grid-column: 1 / -1;
}

.agent-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    background: #ffffff;
    border: 1px solid var(--stella-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.agent-card:hover {
    box-shadow: 0 8px 24px rgba(6, 69, 97, 0.08);
    transform: translateY(-2px);
    border-color: var(--stella-primary);
}

.agent-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.agent-card-num {
    color: var(--stella-primary-ink);
    font-weight: 700;
    font-size: var(--text-sm);
}

.agent-card-sep {
    color: var(--stella-border);
}

.agent-card-label {
    color: #7a8a91;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.agent-card-badge {
    background: var(--stella-primary);
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: var(--space-2);
}

.agent-card-title {
    color: #064561;
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 var(--space-3);
}

.agent-card-desc {
    color: #5a6b73;
    font-size: var(--text-sm);
    line-height: 1.6;
    margin: 0 0 var(--space-5);
    flex-grow: 1;
}

.agent-card-link {
    color: var(--stella-primary-ink);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    align-self: flex-start;
}

.agent-card-link:hover {
    text-decoration: underline;
}

/* Final CTA */
.agents-final-cta {
    padding: var(--space-7) 0 var(--space-8);
}

.agents-final-cta-inner {
    background: linear-gradient(135deg, #0b2a3a 0%, #06405a 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6);
    text-align: center;
    color: #ffffff;
}

.agents-final-cta-inner h2 {
    font-size: var(--text-3xl);
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 var(--space-3);
}

.agents-final-cta-inner p {
    color: #cfe6ea;
    max-width: 560px;
    margin: 0 auto var(--space-6);
    line-height: 1.6;
}

.agents-final-cta-inner .agents-hero-actions {
    justify-content: center;
}

.agents-final-cta-inner .agents-btn-primary {
    background: var(--stella-primary);
}

.agents-final-cta-inner .agents-btn-primary:hover {
    background: #3fa3a6;
}

.agents-final-cta-inner .agents-btn-secondary {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.4);
}

.agents-final-cta-inner .agents-btn-secondary:hover {
    border-color: #ffffff;
}

/* Built to be trusted */
.agents-trust {
    padding: var(--space-6) 0;
}

.agents-trust-inner {
    background: #f6f8f9;
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-7);
}

.agents-trust-title {
    color: #064561;
    font-size: var(--text-2xl);
    font-weight: 800;
    margin: 0 0 var(--space-6);
}

.agents-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

.trust-card {
    display: flex;
    gap: var(--space-4);
    background: #ffffff;
    border: 1px solid var(--stella-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.trust-card-featured {
    border-color: var(--stella-primary);
    box-shadow: 0 0 0 1px var(--stella-primary);
}

.trust-card-icon {
    flex-shrink: 0;
    font-size: 1.4rem;
    line-height: 1.5;
}

.trust-card-icon-text {
    font-size: var(--text-sm);
    font-weight: 700;
    color: #7a8a91;
    letter-spacing: 0.04em;
}

.trust-card-title {
    color: #064561;
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 var(--space-2);
}

.trust-card-desc {
    color: #5a6b73;
    font-size: var(--text-sm);
    line-height: 1.6;
    margin: 0;
}

/* Responsive */
@media (max-width: 900px) {
    .agents-trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .agents-grid {
        grid-template-columns: 1fr;
    }
    .agents-trust-grid {
        grid-template-columns: 1fr;
    }
    .agents-trust-inner {
        padding: var(--space-6) var(--space-5);
    }
    .agents-hero {
        padding: var(--space-6) 0 var(--space-5);
    }
    .agents-hero-actions .agents-btn {
        width: 100%;
        text-align: center;
    }
}

/* ===================================================================== */
/* About Page                                                            */
/* ===================================================================== */
.about-wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-5);
}

.about-block {
    padding: var(--space-8) 0;
    /* The site header is not sticky, so no header compensation is needed here.
       The tightest gap above an anchored section is the 32px bottom padding of
       .about-block-tight (#team follows the dark trust panel), so keep this
       well under 32px or the previous section bleeds into view on jump. */
    scroll-margin-top: var(--space-4);
}

.about-block-tight {
    padding: var(--space-6) 0;
}

/* Shared type */
.about-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--stella-primary-ink);
    margin: 0 0 var(--space-4);
}

.about-eyebrow-light {
    color: #7fd3d5;
}

.about-block-title {
    color: #064561;
    font-size: var(--text-3xl);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-5);
}

.about-block-title-light {
    color: #ffffff;
}

.about-lead {
    font-size: var(--text-lg);
    line-height: 1.6;
    color: #3f545d;
    margin: 0 0 var(--space-4);
}

.about-lead-light {
    color: #cfe6ea;
}

.about-body {
    font-size: var(--text-base);
    line-height: 1.6;
    color: #5a6b73;
    margin: 0 0 var(--space-4);
}

.about-body-light {
    color: #b9d6dc;
}

/* Two-column split used by several sections */
.about-split {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--space-8);
    align-items: start;
}

.about-split-middle {
    align-items: center;
}

.about-split-end {
    align-items: end;
}

/* Buttons — geometry matches .agents-btn */
.about-btn {
    display: inline-block;
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: var(--text-base);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.about-btn-primary {
    background-color: #0b2a3a;
    color: #ffffff;
}

.about-btn-primary:hover {
    background-color: #06405a;
    transform: translateY(-1px);
}

.about-btn-secondary {
    background-color: #ffffff;
    color: #0b2a3a;
    border: 1px solid var(--stella-border);
}

.about-btn-secondary:hover {
    border-color: var(--stella-primary);
    transform: translateY(-1px);
}

.about-btn-cta {
    background: var(--stella-primary);
    color: #ffffff;
}

.about-btn-cta:hover {
    background: #3fa3a6;
    transform: translateY(-1px);
}

/* ---------------- Hero ---------------- */
.about-hero {
    padding: var(--space-8) 0 var(--space-7);
    background: linear-gradient(180deg, #f4fafa 0%, #ffffff 100%);
}

.about-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-8);
    align-items: center;
}

.about-hero-title {
    color: #064561;
    font-size: var(--text-4xl);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0 0 var(--space-5);
}

.about-hero-title .accent {
    color: var(--stella-primary-ink);
}

.about-hero-lead {
    font-size: var(--text-lg);
    line-height: 1.6;
    color: #5a6b73;
    max-width: 620px;
    margin: 0 0 var(--space-6);
}

.about-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.about-hero-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.about-hero-navlink {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
    border: 1px solid var(--stella-border);
    background-color: #ffffff;
    color: #0b2a3a;
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.about-hero-navlink:hover {
    border-color: var(--stella-primary);
    background-color: #f4fafa;
    transform: translateY(-1px);
}

/* Hero visual — mock product window */
.about-hero-visual {
    position: relative;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, #0b2a3a 0%, #06405a 100%);
    padding: var(--space-6);
    overflow: hidden;
}

.about-hero-visual::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    top: -110px;
    right: -110px;
    background: rgba(80, 181, 184, 0.28);
}

.about-window {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.about-window-top {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.about-window-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
}

.about-window-question {
    background: #ffffff;
    color: #064561;
    border-radius: var(--radius);
    padding: var(--space-4);
    font-weight: 700;
    font-size: var(--text-sm);
    line-height: 1.5;
    margin: 0 0 var(--space-4);
}

.about-window-answer {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}

.about-window-answer strong {
    display: block;
    color: #ffffff;
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
}

.about-window-answer p {
    color: #b9d6dc;
    font-size: var(--text-sm);
    line-height: 1.5;
    margin: 0;
}

.about-window-sources {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.about-source-tag {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(80, 181, 184, 0.28);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
}

.about-floating-card {
    position: relative;
    z-index: 3;
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-top: var(--space-5);
    box-shadow: 0 8px 24px rgba(6, 69, 97, 0.18);
}

.about-floating-card h3 {
    color: #064561;
    font-size: var(--text-base);
    font-weight: 700;
    margin: 0 0 var(--space-2);
}

.about-floating-card p {
    color: #5a6b73;
    font-size: var(--text-sm);
    line-height: 1.5;
    margin: 0;
}

/* ---------------- Trust bar ---------------- */
.about-trustbar-section {
    padding: var(--space-5) 0;
}

.about-trustbar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
    background: #ffffff;
    border: 1px solid var(--stella-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.about-trustbar-item {
    padding: var(--space-5) var(--space-4);
    text-align: center;
    border-right: 1px solid var(--stella-border);
}

.about-trustbar-item:last-child {
    border-right: none;
}

.about-trustbar-label {
    display: block;
    color: #7a8a91;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}

.about-trustbar-value {
    display: block;
    color: #064561;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.3;
}

/* ---------------- Capability cards ---------------- */
.about-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-7);
}

.about-card {
    background: #ffffff;
    border: 1px solid var(--stella-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.about-card:hover {
    box-shadow: 0 8px 24px rgba(6, 69, 97, 0.08);
    transform: translateY(-2px);
    border-color: var(--stella-primary);
}

.about-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radius);
    background: #f4fafa;
    font-size: 1.3rem;
    margin-bottom: var(--space-5);
}

.about-card-title {
    color: #064561;
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 var(--space-3);
}

.about-card-desc {
    color: #5a6b73;
    font-size: var(--text-sm);
    line-height: 1.6;
    margin: 0;
}

/* ---------------- Trust panel ---------------- */
.about-trust-panel {
    background: linear-gradient(135deg, #0b2a3a 0%, #06405a 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-7);
}

.about-proof-list {
    list-style: none;
    margin: 0;
    padding: var(--space-5) var(--space-6);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-lg);
}

.about-proof-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
    padding: var(--space-4) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.about-proof-row:last-child {
    border-bottom: none;
}

.about-proof-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: rgba(80, 181, 184, 0.30);
    color: #ffffff;
    font-weight: 700;
}

.about-proof-row strong {
    display: block;
    color: #ffffff;
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
}

.about-proof-row p {
    color: #b9d6dc;
    font-size: var(--text-sm);
    line-height: 1.6;
    margin: 0;
}

/* ---------------- Team ---------------- */
.about-team-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-7);
}

.about-team-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--stella-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.about-team-card:hover {
    box-shadow: 0 8px 24px rgba(6, 69, 97, 0.08);
    transform: translateY(-2px);
    border-color: var(--stella-primary);
}

.about-team-portrait {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #e7f1f3;
}

/* `display: contents` lifts the <img> out of <picture> for layout, so the
   absolute fill below resolves against .about-team-portrait itself. A
   percentage height here is unreliable against an aspect-ratio box. */
.about-team-portrait picture {
    display: contents;
}

.about-team-portrait img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-team-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: var(--space-5);
}

.about-team-name {
    color: #064561;
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 var(--space-2);
}

.about-team-role {
    color: var(--stella-primary-ink);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 var(--space-3);
}

.about-team-desc {
    color: #5a6b73;
    font-size: var(--text-sm);
    line-height: 1.6;
    margin: 0 0 var(--space-4);
    flex-grow: 1;
}

/* Class badge — chip geometry matches .agent-card-badge.
   Hidden by default: these are an easter egg, revealed only when the Konami
   code is entered on the About page. display:none also keeps them out of the
   accessibility tree until then. The unlock is per page load and is not
   persisted, so a reload always returns the page to the clean state. See the
   script at the bottom of views/about.ejs. */
.about-class-badge {
    display: none;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    background: #f4fafa;
    border: 1px solid var(--stella-border);
    color: #064561;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Konami unlock: reveal the badges, staggered left to right. */
.about-page.konami-unlocked .about-class-badge {
    display: inline-flex;
    animation: about-badge-reveal 420ms ease both;
}

.about-page.konami-unlocked .about-team-card:nth-child(2) .about-class-badge { animation-delay: 80ms; }
.about-page.konami-unlocked .about-team-card:nth-child(3) .about-class-badge { animation-delay: 160ms; }
.about-page.konami-unlocked .about-team-card:nth-child(4) .about-class-badge { animation-delay: 240ms; }
.about-page.konami-unlocked .about-team-card:nth-child(5) .about-class-badge { animation-delay: 320ms; }

@keyframes about-badge-reveal {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

/* The global reduced-motion block collapses animation-duration but not the
   delays above, which would still trickle the badges in over a third of a
   second. Zero them so the reveal is instant. */
@media (prefers-reduced-motion: reduce) {
    .about-page.konami-unlocked .about-class-badge {
        animation-delay: 0ms !important;
    }
}

.about-class-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.6rem;
    color: #ffffff;
}

.about-class-bard    { background: #8e44ad; }
.about-class-fighter { background: #c0392b; }
.about-class-ranger  { background: #27ae60; }
.about-class-paladin { background: #f39c12; }
/* Deliberately much darker than .about-class-bard (#8e44ad) so the two
   purples stay distinguishable at the 18px dot size. */
.about-class-wizard  { background: #4a235a; }

.about-team-note {
    margin: var(--space-6) 0 0;
    padding: var(--space-5);
    background: #f4fafa;
    border-left: 4px solid var(--stella-primary);
    border-radius: var(--radius);
    color: #064561;
    font-size: var(--text-sm);
    font-weight: 600;
    text-align: center;
}

/* ---------------- Demoskop facts ---------------- */
.about-facts {
    display: grid;
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.about-fact-card {
    background: #ffffff;
    border: 1px solid var(--stella-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.about-fact-card strong {
    display: block;
    color: #064561;
    font-size: var(--text-base);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.about-fact-card p {
    color: #5a6b73;
    font-size: var(--text-sm);
    line-height: 1.6;
    margin: 0;
}

/* ---------------- Final CTA ---------------- */
.about-cta {
    background: linear-gradient(135deg, #0b2a3a 0%, #06405a 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6);
    text-align: center;
}

.about-cta .about-block-title {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.about-cta .about-body {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.about-cta .about-hero-actions {
    justify-content: center;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1024px) {
    .about-team-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .about-hero-inner,
    .about-split {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
    }
    .about-trustbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .about-trustbar-item {
        border-right: 1px solid var(--stella-border);
        border-bottom: 1px solid var(--stella-border);
    }
    .about-trustbar-item:nth-child(2n) {
        border-right: none;
    }
    .about-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .about-trust-panel {
        padding: var(--space-7) var(--space-5);
    }
}

@media (max-width: 600px) {
    .about-block {
        padding: var(--space-7) 0;
    }
    .about-trustbar,
    .about-card-grid,
    .about-team-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .about-trustbar-item {
        border-right: none;
    }
    .about-trustbar-item:last-child {
        border-bottom: none;
    }
    .about-hero-actions .about-btn {
        width: 100%;
        text-align: center;
    }
    /* Single-column team cards: a 1:1 portrait at full card width makes the
       section very tall, so crop to 3:2 biased towards the face. */
    .about-team-portrait {
        aspect-ratio: 3 / 2;
    }
    .about-team-portrait img {
        object-position: center 20%;
    }
    .about-proof-list {
        padding: var(--space-4);
    }
    .about-cta {
        padding: var(--space-7) var(--space-5);
    }
}