/*!
 * ============================================================================
 * Copyright (c) 2026 ATH SOLUTIONS (PTY) LTD. All rights reserved.
 * KwaZulu-Natal, Republic of South Africa.
 * ============================================================================
 *
 * @BEGIN Developer Log Header Block
 * @FILENAME: public/css/pages/landing.css
 * @TITLE: SYNATHRA
 * @DESCRIPTION: Landing page stylesheet - typography, layout, hero, features, pricing, footer
 * @AUTHOR: Ary van der Pijl
 * @COMPANY: ATH SOLUTIONS (PTY) LTD
 * @WEBSITE: https://www.ath.solutions/
 * @EMAIL: info@ath.solutions
 * @COPYRIGHT: All Rights Reserved
 * @LICENSE: ATH SOLUTIONS - PROPRIETARY SOFTWARE LICENCE AGREEMENT (https://www.ath.solutions/documents/ath_solutions_software_licence_agreement.pdf)
 *
 * BEGIN CHANGELOG
 * @IMPORTANT NOTICE: Developers working on these files MUST update and maintain the Developers Change Log, failure to do is not an option:
 * !==================================================================================================================================================================
 * VERSION 1.0.0.1
 * - File Modified | Ary van der Pijl | 2026-06-17 | PMS-001 | Added compliant file header block |
 * - File Created  | Ary van der Pijl | 2026/05/01 | PMS-001 | Initial file creation. |
 * ==================================================================================================================================================================!
 * END CHANGELOG
 */
:root {
            --color-primary: #d5deef;
            --color-primary-medium: #8aa9d6;
            --color-secondary: #648dcb;
            --color-secondary-dark: #3f6296;
            --text: #1a1a2e;
            --muted: #607D8B;
            --surface: #f8fafc;
            --card-border: #e2e8f0;
            --color-danger: #f41938;
            --color-warning: #f7a11f;
            --color-success: #01a476;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Inter', sans-serif; color: var(--text); background: #fff; line-height: 1.6; }
        a { text-decoration: none; }

        /* ── NAV ── */
        .nav-bar { 
            position: sticky; 
            top: 0; 
            z-index: 100; 
            background: var(--color-primary); 
            backdrop-filter: blur(8px); 
            border-bottom: 1px solid var(--card-border);
        }

        .nav-inner { 
            max-width: 1250px; 
            margin: 0 auto; 
            padding: 0 24px; 
            height: 64px; 
            display: flex; 
            align-items: center; 
            justify-content: space-between; 
        }

        .nav-logo {
            display: flex;
            align-items: center;
            gap: 10px;

            font-size: 1.3rem;
            font-weight: 800;
            color: var(--text);
        }

        .nav-logo img {
            height: 28px;
            width: auto;
            display: block;
        }

        .nav-links { 
            display: flex; 
            gap: 32px; 
            align-items: center; 
            letter-spacing: 0.05rem;
            text-transform: uppercase;
        }

        .nav-links a { 
            color: var(--color-secondary-dark); 
            font-size: .9rem; 
            font-weight: 500; 
            transition: color .2s; 
        }

        .nav-links a:hover { 
            color: var(--text); 
        }

        .btn-nav { 
            background: var(--color-secondary-dark); 
            color: #fff !important; 
            padding: 8px 20px; 
            border-radius: 8px; 
            font-weight: 600; 
        }

        .btn-nav:hover { 
            background: var(--color-secondary) !important; 
        }

        /* ── HERO ── */

        .hero {
            position: relative;
            overflow: hidden;    
            width: 100%;
            padding: 100px 24px 90px;
            text-align: left;
        }

        .hero::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1; 
            background-image: url(/assets/images/SynATHra_bg.png);
            background-size: cover;
            background-position: center;                
            transform: rotate(180deg); 
            
        }

        .hero-badge { 
            display: inline-block;
            background: transparent;
            color: var(--color-secondary-dark);
            font-size: .75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 2px;
            padding: 0;
            margin-bottom: 24px;
            border-radius: 0; 
        }

        .hero h1 { 
            font-size: clamp(2rem, 5vw, 3.4rem); 
            font-weight: 700; line-height: 1.15; 
            max-width: 700px; 
            margin: 0 0 20px; 
            letter-spacing: -2px;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

        .hero h1 span { 
            color: var(--text); 
        }

        .hero p { 
            font-size: 1.05rem; 
            color: var(--text); 
            max-width: 560px; 
            margin: 0 0 36px; 
            line-height: 1.7;
        }

        .hero-cta { 
            display: flex; 
            gap: 14px; 
            justify-content: flex-start; 
            flex-wrap: wrap; 
            margin-top: 28px;
            margin-bottom: 20px;
        }

        .btn-primary-lg { 
            background: var(--color-secondary-dark); 
            color: #fff; 
            padding: 14px 32px; 
            border-radius: 10px; 
            font-size: 1rem; 
            font-weight: 700; 
            border: none; 
            cursor: pointer; 
            transition: background .2s; 
        }

        .btn-primary-lg:hover {
            background: var(--color-primary-medium);
            color: #1a1a1a;   /* dark text on amber hover - passes WCAG AA */
        }

        .btn-ghost-lg { 
            background: white; 
            color: var(--color-secondary-dark); 
            padding: 14px 32px; 
            border-radius: 10px; 
            font-size: 1rem; 
            font-weight: 700; 
            border: 2px solid var(--color-secondary-dark); 
            cursor: pointer; 
            transition: all .2s; 
        }

        .btn-ghost-lg:hover { 
            background: white; 
        }

        .hero-benefits {
            display: flex;
            gap: 24px;
            flex-wrap: wrap;
            margin-top: 24px;
            font-size: .95rem;
            font-weight: 500;
        }

        .hero-benefits div {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* ── SOCIAL PROOF ── */
        .social-proof { 
            padding: 24px; 
            background: #fff; 
            border-bottom: 1px solid var(--card-border); 
            text-align: center; 
        }

        .social-proof p { 
            font-size: .85rem; 
            color: var(--muted); 
            margin-bottom: 16px; 
            font-weight: 500; 
            letter-spacing: .5px; 
            text-transform: uppercase; 
        }

        .logo-strip { 
            display: flex; 
            gap: 32px; 
            justify-content: center; 
            align-items: center; 
            flex-wrap: wrap; 
            opacity: .5; 
            font-size: .9rem; 
            font-weight: 700; 
            letter-spacing: 1px; 
            color: #607D8B; 
        }

        /* ── REPLACES ── */
        .replaces { 
            background: var(--color-secondary-dark); 
            padding: 32px 24px; 
            text-align: center; 
        }

        .replaces h3 { 
            font-size: 1rem; 
            font-weight: 700; 
            margin-bottom: 16px; 
            color: white; 
        }

        .replaces-strip { 
            display: flex; 
            flex-wrap: wrap; 
            gap: 10px; 
            justify-content: center; 
        }

        .replaces-tag { 
            background: #fff; 
            border: 1px solid var(--color-primary); 
            border-radius: 20px; 
            padding: 5px 14px; 
            font-size: .85rem; 
            color: var(--color-secondary); 
            font-weight: 500; 
        }

        .replaces-tag s { 
            color: #bbb; 
            margin-left: 5px; 
            font-size: .75rem; 
        }

        .replaces-cta { 
            margin-top: 16px; 
            font-size: 1rem; 
            font-weight: 700; 
            color: white; 
        }

        /* ── FEATURES ── */
        .features { 
            padding: 80px 24px; 
            background: var(--surface); 
        }

        .section-header { 
            text-align: center; 
            margin-bottom: 60px; 
        }

        .section-tag { 
            display: inline-block;
            background: transparent;
            color: var(--color-secondary-dark);
            font-size: .75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 2px;
            padding: 0;
            margin-bottom: 24px;
            border-radius: 0;
        }

        .section-header h2 { 
            font-size: clamp(1.6rem, 3vw, 2.4rem); 
            font-weight: 800; 
            margin-bottom: 12px; 
        }

        .section-header p { 
            color: var(--muted); 
            max-width: 600px; 
            margin: 0 auto; 
        }

        .features-grid { 
            max-width: 1140px; 
            margin: 0 auto; 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
            gap: 24px; 
        }

        .feature-label {
            display:block;
            text-align: center;
            font-weight: 800;
            font-size: 0.8rem;
            letter-spacing: 0.15rem;
            text-transform: uppercase;
            margin-bottom: 18px;
            color: black;
        }

        .feature-card { 
            background: #fff; 
            border: 1px solid var(--card-border); 
            border-radius: 16px; 
            padding: 28px; 
            transition: box-shadow .2s; 
        }

        .feature-card:hover { 
            box-shadow: 3px 8px 32px rgba(5, 46, 79, 0.1); 
        }
        
        .feature-icon { 
            width: 48px; 
            height: 48px; 
            border-radius: 12px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-size: 1.4rem; 
            margin: 0 auto 16px;
        }

        .feature-card h3 { 
            font-size: 1rem; 
            font-weight: 700; 
            margin-bottom: 14px; 
        }

        .feature-card p { 
            font-size: 0.9rem; 
            color: var(--color-secondary); 
            line-height: 1.8; 
        }

        .feature-badge { 
            display: inline-block; 
            font-size: .65rem; 
            font-weight: 700; 
            text-transform: uppercase; 
            padding: 2px 8px; 
            border-radius: 8px; 
            margin-left: 8px; 
            vertical-align: middle; 
        }

        .badge-ai { 
            background: #f3e5f5; 
            color: #7b1fa2; 
        }

        .badge-unique { 
            background: #e8f5e9; 
            color: #2e7d32; 
        }

        /* ── AI SECTION ── */
        .ai-section { 
            padding: 80px 24px; 
            background: linear-gradient(135deg, white 0%, var(--color-secondary-dark) 100%); 
            color: #fff; 
            text-align: center; 
        }

        .ai-section h2 { 
            color: var(--text); 
        }

        .ai-section p { 
            color: var(--text); 
        }

        .ai-features-row { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
            gap: 20px; 
            max-width: 900px; 
            margin: 40px auto 0; 
        }

        .ai-pill { 
            background: white; 
            border: 1px solid rgba(255,255,255,.15); 
            border-radius: 12px; 
            padding: 20px; 
        }

        .ai-pill .icon { 
            font-size: 2rem; 
            margin-bottom: 10px; 
        }

        .ai-pill h4 { 
            font-size: .9rem; 
            font-weight: 600; 
            margin-bottom: 4px; 
            color: var(--text);
        }

        .ai-pill p { 
            font-size: .8rem; 
            color: var(--text); 
        }

        .icon {
            width: 64px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }

        .icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* ── PRICING TEASER ── */
        .pricing-teaser { 
            padding: 80px 24px; 
            background: #fff; 
            text-align: center; 
        }

        .price-cards { 
            display: flex; 
            gap: 24px; 
            justify-content: center; 
            flex-wrap: wrap; 
            max-width: 900px; 
            margin: 40px auto 0; 
        }

        .price-card { 
            border: 2px solid var(--card-border); 
            border-radius: 16px; 
            padding: 28px; 
            min-width: 240px; 
            flex: 1; 
            max-width: 280px; 
            text-align: left; 
        }

        .price-card.featured { 
            border-color: var(--color-secondary-dark); 
        }

        .price-card .plan-name { 
            font-size: .8rem; 
            font-weight: 700; 
            text-transform: uppercase; 
            letter-spacing: 1px; 
            margin-bottom: 8px; 
        }

        .price-card .price { 
            font-size: 2.4rem; 
            font-weight: 800; 
            margin-bottom: 4px; 
        }

        .price-card .price span { 
            font-size: 1rem; 
            font-weight: 400; 
            color: var(--muted); 
        }

        .price-card .perks { 
            margin-top: 16px; 
        }

        .price-card .perk { 
            font-size: .85rem;
            padding: 4px 0; 
            color: var(--muted); 
        }

        .price-card .perk::before { 
            content: '✓ '; 
            color: var(--accent); 
            font-weight: 700; 
        }
        
        .price-btn {
            display: block;
            margin-top: 20px;
            padding: 12px;
            border-radius: 8px;
            text-align: center;
            font-weight: 700;
            text-decoration: none;
            transition: all 0.2s ease;
        }

        .price-btn-free {
            border: 2px solid var(--color-secondary-dark);
            color: var(--color-secondary-dark);
        }

        .price-btn-free:hover {
            background: var(--color-secondary-dark);
            color: #fff;
        }

        .price-btn-primary {
            background: transparent;
            border: 2px solid var(--color-secondary-dark);
            color: var(--color-secondary-dark);
        }

        .price-btn-primary:hover {
            opacity: 0.9;
        }

        .price-btn-outline {
            border: 2px solid #3f6296;
            color: #3f6296;
        }

        .price-btn-outline:hover {
            background: #3f6296;
            color: #fff;
        }

        .price-card:last-child .plan-name,
        .price-card:last-child .price {
            color: var(--text);
        }

        /* ── TESTIMONIALS ── */
        .testimonials { 
            padding: 80px 24px; 
            background: var(--surface); 
            transition: all .25s ease;
        }

        .testimonials-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
            gap: 24px; 
            max-width: 1000px; 
            margin: 40px auto 0; 
        }

        .testimonial { 
            background: #fff; 
            border: 1px solid var(--card-border); 
            border-radius: 16px; 
            padding: 24px; 
        }

        .testimonial p { 
            font-size: 1.05rem; 
            line-height: 1.8; 
            color: var(--text); 
            margin-bottom: 16px; 
            font-style: italic; 
        }

        .testimonial .author { 
            display: flex; 
            align-items: center; 
            gap: 10px; 
        }

        .testimonial .avatar { 
            width: 36px; 
            height: 36px; 
            border-radius: 50%; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-size: .8rem; 
            font-weight: 700; 
            color: #fff; 
        }

        .testimonial .author-info strong { 
            font-size: 1rem; 
            display: block; 
            color: var(--text);
        }

        .testimonial .author-info span { 
            font-size: .85rem; 
            color: var(--muted); 
        }

        .stars { 
            color: var(--color-secondary-dark); 
            font-size: .9rem; 
            margin-bottom: 8px; 
        }

        /* ── CTA SECTION ── */
        .cta-section { 
            padding: 80px 24px; 
            background: white; 
            text-align: center; color: var(--text); 
        }

        .cta-section h2 { 
            font-size: clamp(1.8rem, 3vw, 2.6rem); 
            font-weight: 800; 
            margin-bottom: 16px; 
        }

        .cta-section p { 
            font-size: 1.1rem; 
            opacity: .85; 
            max-width: 500px;
            margin: 0 auto 32px; 
            margin-top: 16px;
        }

        .btn-white { 
            background: var(--color-primary-medium); 
            color: #fff; 
            padding: 14px 32px; 
            border-radius: 10px; 
            font-size: 1rem; 
            font-weight: 700; 
            border: none; 
            cursor: pointer; 
            transition: all .2s; 
        }

        .btn-white:hover { 
            background: transparent;
            border: 2px solid var(--color-secondary-dark); 
            color: var(--text); 
        }

        .cta-buttons {
            display: flex;
            gap: 14px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .cta-link {
            color: var(--color-secondary-dark);
            font-weight: 600;
            padding: 14px 24px;
            display: inline-block;
            text-decoration: none;
            transition: all .2s ease;
        }

        .cta-link:hover {
            color: var(--color-secondary);
        }

        .cta-note {
            margin-top: 16px;
            font-size: .85rem;
            opacity: .65;
        }

        /* ── FOOTER ── */
        .footer { 
            background: #f1efef; 
            color: var(--color-secondary); 
            padding: 48px 24px 24px; 
        }

        .footer-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); 
            gap: 32px; 
            max-width: 1140px; 
            margin: 0 auto 32px; 
        }

        .footer-col h4 { 
            color: var(--color-secondary-dark); 
            font-size: .9rem; 
            font-weight: 700; 
            margin-bottom: 16px; 
            letter-spacing: 0.05rem;
        }

        .footer-col a { 
            display: block; 
            color: var(--color-secondary- ); 
            font-size: .85rem; 
            margin-bottom: 10px; 
            transition: color .2s ease; 
        }

        .footer-col a:hover { 
            color: #fff; 
        }

        .footer-bottom { 
            max-width: 1140px; 
            margin: 0 auto; 
            padding-top: 24px; 
            border-top: 1px solid rgba(255,255,255,.12); 
            display: flex; 
            justify-content: space-between; 
            flex-wrap: wrap; 
            gap: 12px; 
            font-size: .8rem; 
            font-size: .8rem;
            color: var(--color-secondary-dark);
        }

        .footer-brand {
            min-width: 260px;
        }

        .footer-logo img {
            height: 48px;
            width: auto;
            display: block;
        }

        .footer-tagline {
            margin-top: 16px;
            font-size: 0.85rem;
            line-height: 1.7;
            color: var(--color-secondary-dark);
            max-width: 280px;
        }

        @media(max-width:640px) {
            .nav-links { display: none; }
            .hero-cta { flex-direction: column; align-items: center; }
            .price-cards { flex-direction: column; align-items: center; }
        }