/* ═══════════════════════════════════════════════════════════════════════════
   Kerala Nikkah — Main Stylesheet
   Version: 1.0.0
   Author: Niyaz Kannanchery (EverLast Tech Solutions)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS Variables ────────────────────────────────────────────────────────── */
:root {
    --kn-primary:      #1a6b3c;
    --kn-primary-dark: #145530;
    --kn-primary-light:#e8f5ee;
    --kn-secondary:    #f0a500;
    --kn-accent:       #2d8a5e;
    --kn-white:        #ffffff;
    --kn-off-white:    #f8f9fa;
    --kn-light:        #f0f4f8;
    --kn-border:       #e2e8f0;
    --kn-text:         #1a202c;
    --kn-text-muted:   #718096;
    --kn-text-light:   #a0aec0;
    --kn-header-bg:    #ffffff;
    --kn-footer-bg:    #1a1a2e;
    --kn-shadow-sm:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --kn-shadow:       0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
    --kn-shadow-lg:    0 10px 25px rgba(0,0,0,.1), 0 4px 10px rgba(0,0,0,.06);
    --kn-radius-sm:    6px;
    --kn-radius:       12px;
    --kn-radius-lg:    20px;
    --kn-transition:   all .25s ease;
    --kn-font-base:    'Poppins', 'Segoe UI', sans-serif;
    --kn-font-arabic:  'Noto Kufi Arabic', 'Traditional Arabic', serif;
    --kn-font-size:    16px;
    --kn-header-h:     72px;
    --kn-access-h:     36px;
}

/* ── Color Themes ─────────────────────────────────────────────────────────── */
[data-kn-theme="green"] {
    --kn-primary:      #1a6b3c;
    --kn-secondary:    #27ae60;
    --kn-accent:       #2ecc71;
    --kn-primary-light:#e8f5ee;
}
[data-kn-theme="blue"] {
    --kn-primary:      #1a4b8c;
    --kn-secondary:    #2980b9;
    --kn-accent:       #3498db;
    --kn-primary-light:#e8f0f8;
}
[data-kn-theme="gold"] {
    --kn-primary:      #8a6500;
    --kn-secondary:    #f0a500;
    --kn-accent:       #c8860a;
    --kn-primary-light:#fdf8e8;
}

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: var(--kn-font-size);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
html[data-font-size="sm"] { font-size: 14px; }
html[data-font-size="lg"] { font-size: 18px; }
html[data-font-size="xl"] { font-size: 20px; }

body {
    font-family: var(--kn-font-base);
    color: var(--kn-text);
    background: var(--kn-white);
    line-height: 1.7;
    min-height: 100vh;
    overflow-x: hidden;
}

a { color: var(--kn-primary); text-decoration: none; transition: var(--kn-transition); }
a:hover { color: var(--kn-primary-dark); }
a:focus-visible { outline: 3px solid var(--kn-secondary); outline-offset: 3px; border-radius: 4px; }

img { max-width: 100%; height: auto; display: block; }

ul { list-style: none; }

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--kn-text);
}

/* ── Skip Link ────────────────────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--kn-primary);
    color: white;
    padding: 8px 20px;
    border-radius: 0 0 var(--kn-radius-sm) var(--kn-radius-sm);
    font-size: .875rem;
    font-weight: 600;
    z-index: 9999;
    transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ── Container ────────────────────────────────────────────────────────────── */
.kn-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.kn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    font-family: var(--kn-font-base);
    font-size: .9rem;
    font-weight: 500;
    border-radius: var(--kn-radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--kn-transition);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
    -webkit-appearance: none;
}
.kn-btn:focus-visible { outline: 3px solid var(--kn-secondary); outline-offset: 2px; }

.kn-btn-primary {
    background: var(--kn-primary);
    color: white;
    border-color: var(--kn-primary);
}
.kn-btn-primary:hover {
    background: var(--kn-primary-dark);
    border-color: var(--kn-primary-dark);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26,107,60,.35);
}
.kn-btn-outline {
    background: transparent;
    color: var(--kn-primary);
    border-color: var(--kn-primary);
}
.kn-btn-outline:hover {
    background: var(--kn-primary);
    color: white;
    transform: translateY(-1px);
}
.kn-btn-ghost {
    background: transparent;
    color: var(--kn-text-muted);
    border-color: var(--kn-border);
}
.kn-btn-ghost:hover { background: var(--kn-light); color: var(--kn-text); }

.kn-btn-sm  { padding: 7px 16px; font-size: .82rem; }
.kn-btn-lg  { padding: 14px 32px; font-size: 1rem; }
.kn-btn-block { width: 100%; }

/* ── Accessibility Bar ────────────────────────────────────────────────────── */
#kn-accessibility-bar {
    background: var(--kn-light);
    border-bottom: 1px solid var(--kn-border);
    height: var(--kn-access-h);
    display: flex;
    align-items: center;
    font-size: .78rem;
}
.kn-access-inner {
    display: flex;
    align-items: center;
    gap: 16px;
}
.kn-access-label {
    color: var(--kn-text-muted);
    font-size: .76rem;
    font-weight: 500;
}
.kn-access-controls {
    display: flex;
    gap: 4px;
}
.kn-access-btn {
    background: white;
    border: 1px solid var(--kn-border);
    border-radius: var(--kn-radius-sm);
    padding: 2px 9px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--kn-text);
    transition: var(--kn-transition);
    font-family: var(--kn-font-base);
}
.kn-access-btn:hover { background: var(--kn-primary); color: white; border-color: var(--kn-primary); }

.kn-color-themes {
    display: flex;
    gap: 6px;
    align-items: center;
}
.kn-theme-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--kn-border);
    cursor: pointer;
    transition: var(--kn-transition);
}
.kn-theme-btn:hover, .kn-theme-btn.active { transform: scale(1.2); border-color: var(--kn-text); }
.kn-theme-default { background: #ffffff; }
.kn-theme-green   { background: #1a6b3c; }
.kn-theme-blue    { background: #1a4b8c; }
.kn-theme-gold    { background: #f0a500; }

/* ── Site Header ──────────────────────────────────────────────────────────── */
.kn-site-header {
    background: var(--kn-header-bg);
    height: var(--kn-header-h);
    border-bottom: 1px solid var(--kn-border);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--kn-shadow-sm);
    transition: box-shadow .3s;
}
.kn-site-header.kn-scrolled { box-shadow: var(--kn-shadow); }

.kn-header-inner {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 32px;
}

/* Logo */
.kn-text-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}
.kn-logo-icon {
    font-size: 1.8rem;
    color: var(--kn-primary);
    line-height: 1;
}
.kn-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.kn-logo-primary {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--kn-primary);
    letter-spacing: -.3px;
}
.kn-logo-secondary {
    font-size: .85rem;
    font-weight: 400;
    color: var(--kn-text-muted);
}
.kn-logo img { max-height: 56px; width: auto; }

/* Primary Nav */
.kn-primary-nav { flex: 1; }
.kn-nav-menu {
    display: flex;
    align-items: center;
    gap: 4px;
}
.kn-nav-menu li a {
    display: block;
    padding: 8px 14px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--kn-text);
    border-radius: var(--kn-radius-sm);
    position: relative;
    transition: var(--kn-transition);
}
.kn-nav-menu li a:hover,
.kn-nav-menu li.current-menu-item > a {
    color: var(--kn-primary);
    background: var(--kn-primary-light);
}
.kn-nav-menu li.current-menu-item > a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--kn-primary);
    border-radius: 2px;
}

/* Dropdown */
.kn-nav-menu li { position: relative; }
.kn-nav-menu li ul {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: white;
    border: 1px solid var(--kn-border);
    border-radius: var(--kn-radius);
    box-shadow: var(--kn-shadow-lg);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: var(--kn-transition);
    z-index: 100;
    flex-direction: column;
    gap: 0;
}
.kn-nav-menu li:hover > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.kn-nav-menu li ul li a { border-radius: 0; color: var(--kn-text); padding: 10px 18px; }

/* Header Actions */
.kn-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Language Switcher */
.kn-lang-switcher { position: relative; }
.kn-lang-btn {
    background: transparent;
    border: 1px solid var(--kn-border);
    border-radius: var(--kn-radius-sm);
    padding: 5px 12px;
    font-size: .8rem;
    color: var(--kn-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--kn-font-base);
    transition: var(--kn-transition);
}
.kn-lang-btn:hover { border-color: var(--kn-primary); color: var(--kn-primary); }
.kn-lang-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: white;
    border: 1px solid var(--kn-border);
    border-radius: var(--kn-radius);
    box-shadow: var(--kn-shadow-lg);
    min-width: 130px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: var(--kn-transition);
    z-index: 200;
}
.kn-lang-switcher:hover .kn-lang-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.kn-lang-dropdown li a { display: block; padding: 9px 16px; font-size: .85rem; color: var(--kn-text); }
.kn-lang-dropdown li a:hover { color: var(--kn-primary); background: var(--kn-primary-light); }

/* Mobile Toggle */
.kn-mobile-toggle {
    display: none;
    background: none;
    border: 1px solid var(--kn-border);
    border-radius: var(--kn-radius-sm);
    padding: 8px;
    cursor: pointer;
    transition: var(--kn-transition);
}
.kn-mobile-toggle:hover { background: var(--kn-light); }
.kn-hamburger,
.kn-hamburger::before,
.kn-hamburger::after {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--kn-text);
    border-radius: 2px;
    transition: var(--kn-transition);
}
.kn-hamburger { position: relative; }
.kn-hamburger::before { content: ''; position: absolute; top: -7px; width: 100%; }
.kn-hamburger::after  { content: ''; position: absolute; bottom: -7px; width: 100%; }

.kn-mobile-toggle[aria-expanded="true"] .kn-hamburger { background: transparent; }
.kn-mobile-toggle[aria-expanded="true"] .kn-hamburger::before { transform: rotate(45deg) translate(5px, 5px); }
.kn-mobile-toggle[aria-expanded="true"] .kn-hamburger::after  { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile Menu */
.kn-mobile-menu {
    background: white;
    border-top: 1px solid var(--kn-border);
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}
.kn-mobile-menu.kn-open { max-height: 600px; }
.kn-mobile-nav-menu { padding: 16px 0; }
.kn-mobile-nav-menu li a { display: block; padding: 12px 0; color: var(--kn-text); font-weight: 500; border-bottom: 1px solid var(--kn-border); }
.kn-mobile-nav-menu li:last-child a { border-bottom: none; }
.kn-mobile-actions { padding: 16px 0; display: flex; flex-direction: column; gap: 10px; }

/* ── Hero Section ─────────────────────────────────────────────────────────── */
.kn-hero-section {
    position: relative;
    min-height: 640px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #0d3d22 0%, #1a6b3c 50%, #2d8a5e 100%);
    overflow: hidden;
    padding: 80px 0 60px;
}
.kn-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
}
.kn-hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,.05) 0%, transparent 70%);
}
.kn-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
}
.kn-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50px;
    padding: 8px 20px;
    font-size: .82rem;
    font-weight: 500;
    color: rgba(255,255,255,.9);
    margin-bottom: 24px;
}
.kn-badge-icon { font-size: 1rem; }

.kn-hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: white;
    margin-bottom: 18px;
    text-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.kn-hero-subtitle {
    font-size: clamp(.95rem, 2vw, 1.15rem);
    color: rgba(255,255,255,.85);
    max-width: 560px;
    margin: 0 auto 40px;
    font-weight: 300;
}

/* Hero Search */
.kn-hero-search {
    background: white;
    border-radius: var(--kn-radius-lg);
    padding: 16px;
    max-width: 900px;
    margin: 0 auto 40px;
    box-shadow: var(--kn-shadow-lg);
}
.kn-search-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.kn-search-field { flex: 1; min-width: 150px; }
.kn-select {
    width: 100%;
    padding: 10px 14px;
    font-family: var(--kn-font-base);
    font-size: .875rem;
    color: var(--kn-text);
    background: var(--kn-off-white);
    border: 1px solid var(--kn-border);
    border-radius: var(--kn-radius-sm);
    cursor: pointer;
    transition: var(--kn-transition);
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1 4l5 5 5-5' stroke='%23718096' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.kn-select:focus { outline: none; border-color: var(--kn-primary); box-shadow: 0 0 0 3px rgba(26,107,60,.15); }
.kn-search-submit { flex-shrink: 0; padding: 10px 28px; }

/* Hero Stats */
.kn-hero-stats {
    display: flex;
    justify-content: center;
    gap: clamp(16px, 4vw, 48px);
    flex-wrap: wrap;
}
.kn-stat-item {
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kn-stat-number { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; }
.kn-stat-label  { font-size: .8rem; color: rgba(255,255,255,.75); font-weight: 400; }

/* ── Section Common Styles ────────────────────────────────────────────────── */
.kn-section-header {
    text-align: center;
    margin-bottom: 48px;
}
.kn-section-badge {
    display: inline-block;
    background: var(--kn-primary-light);
    color: var(--kn-primary);
    padding: 5px 16px;
    border-radius: 50px;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.kn-section-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--kn-text);
    margin-bottom: 12px;
}
.kn-section-subtitle { color: var(--kn-text-muted); max-width: 520px; margin: 0 auto; }

.kn-section-footer { text-align: center; margin-top: 40px; }

/* ── Profile Cards ────────────────────────────────────────────────────────── */
.kn-profiles-section { padding: 80px 0; }
.kn-brides-section   { background: var(--kn-white); }
.kn-grooms-section   { background: var(--kn-off-white); }

.kn-profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}
.kn-profile-card {
    background: white;
    border: 1px solid var(--kn-border);
    border-radius: var(--kn-radius);
    overflow: hidden;
    transition: var(--kn-transition);
    position: relative;
    box-shadow: var(--kn-shadow-sm);
}
.kn-profile-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--kn-shadow-lg);
    border-color: var(--kn-primary);
}
.kn-profile-card.kn-profile-premium {
    border-color: var(--kn-secondary);
    box-shadow: 0 0 0 1px var(--kn-secondary), var(--kn-shadow-sm);
}
.kn-premium-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--kn-secondary);
    color: white;
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 50px;
    z-index: 1;
}

.kn-profile-photo {
    position: relative;
    aspect-ratio: 1;
    background: var(--kn-light);
    overflow: hidden;
}
.kn-profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.kn-profile-card:hover .kn-profile-img { transform: scale(1.04); }

.kn-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}
.kn-photo-female { background: linear-gradient(135deg, #fde8f0, #f9c1d4); }
.kn-photo-male   { background: linear-gradient(135deg, #e8f0f8, #c1d4f9); }

.kn-profile-id {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,.55);
    color: white;
    font-size: .68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
}
.kn-profile-info { padding: 14px; }
.kn-profile-name {
    font-size: .9rem;
    font-weight: 600;
    color: var(--kn-text);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kn-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}
.kn-profile-meta li {
    font-size: .73rem;
    color: var(--kn-text-muted);
    background: var(--kn-light);
    padding: 2px 8px;
    border-radius: 4px;
}

/* ── How It Works ─────────────────────────────────────────────────────────── */
.kn-hiw-section { padding: 80px 0; background: var(--kn-primary); }
.kn-hiw-section .kn-section-title { color: white; }
.kn-hiw-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    margin-top: 48px;
}
.kn-hiw-step {
    text-align: center;
    color: white;
    position: relative;
    padding: 32px 20px;
    background: rgba(255,255,255,.08);
    border-radius: var(--kn-radius);
    border: 1px solid rgba(255,255,255,.15);
    transition: var(--kn-transition);
}
.kn-hiw-step:hover { background: rgba(255,255,255,.14); transform: translateY(-4px); }
.kn-hiw-icon { font-size: 2.5rem; margin-bottom: 8px; }
.kn-hiw-num {
    width: 32px; height: 32px;
    background: var(--kn-secondary);
    color: white;
    font-size: .85rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.kn-hiw-title { font-size: 1.05rem; font-weight: 600; color: white; margin-bottom: 8px; }
.kn-hiw-desc  { font-size: .85rem; color: rgba(255,255,255,.75); line-height: 1.6; }

/* ── Success Stories ──────────────────────────────────────────────────────── */
.kn-stories-section { padding: 80px 0; background: var(--kn-white); }
.kn-stories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}
.kn-story-card {
    background: white;
    border: 1px solid var(--kn-border);
    border-radius: var(--kn-radius);
    overflow: hidden;
    box-shadow: var(--kn-shadow-sm);
    transition: var(--kn-transition);
}
.kn-story-card:hover { transform: translateY(-4px); box-shadow: var(--kn-shadow-lg); }
.kn-story-img { width: 100%; height: 200px; object-fit: cover; }
.kn-story-photo-placeholder {
    height: 160px;
    background: linear-gradient(135deg, #fde8f0, #e8f0f8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
}
.kn-story-body { padding: 24px; }
.kn-story-quote {
    font-size: .9rem;
    color: var(--kn-text-muted);
    font-style: italic;
    margin-bottom: 12px;
    line-height: 1.6;
}
.kn-story-names { font-size: .95rem; color: var(--kn-primary); display: block; margin-bottom: 8px; }
.kn-story-hearts { color: #e53e3e; font-size: .85rem; }

/* ── Membership Plans ─────────────────────────────────────────────────────── */
.kn-membership-section { padding: 80px 0; background: var(--kn-off-white); }
.kn-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    max-width: 700px;
    margin: 0 auto;
}
.kn-plan-card {
    background: white;
    border: 1px solid var(--kn-border);
    border-radius: var(--kn-radius-lg);
    padding: 36px 28px;
    box-shadow: var(--kn-shadow-sm);
    position: relative;
    transition: var(--kn-transition);
}
.kn-plan-card:hover { transform: translateY(-4px); box-shadow: var(--kn-shadow-lg); }
.kn-plan-premium {
    border: 2px solid var(--kn-primary);
    box-shadow: 0 0 0 4px var(--kn-primary-light), var(--kn-shadow);
}
.kn-plan-ribbon {
    position: absolute;
    top: -1px;
    right: 28px;
    background: var(--kn-primary);
    color: white;
    font-size: .75rem;
    font-weight: 700;
    padding: 5px 16px 8px;
    border-radius: 0 0 12px 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.kn-plan-header { margin-bottom: 28px; }
.kn-plan-name { font-size: 1.1rem; font-weight: 600; color: var(--kn-text-muted); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px; }
.kn-plan-price { display: flex; align-items: baseline; gap: 4px; }
.kn-price-currency { font-size: 1.2rem; color: var(--kn-primary); font-weight: 700; }
.kn-price-amount { font-size: 2.4rem; font-weight: 800; color: var(--kn-text); }
.kn-price-period { font-size: .85rem; color: var(--kn-text-muted); margin-left: 4px; }
.kn-plan-features { margin-bottom: 28px; }
.kn-plan-features li { padding: 8px 0; border-bottom: 1px solid var(--kn-border); font-size: .875rem; color: var(--kn-text-muted); }
.kn-plan-features li:last-child { border-bottom: none; }

/* ── Community Section ────────────────────────────────────────────────────── */
.kn-community-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f5ff 0%, #e8f5ee 100%);
}
.kn-community-inner {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
.kn-community-icon { font-size: 3rem; margin-bottom: 24px; }
.kn-community-quote {
    background: white;
    border: 1px solid var(--kn-border);
    border-left: 4px solid var(--kn-primary);
    border-radius: var(--kn-radius);
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: var(--kn-shadow-sm);
}
.kn-community-quote p {
    font-size: 1.05rem;
    color: var(--kn-text);
    line-height: 1.8;
    margin-bottom: 16px;
}
.kn-community-quote cite {
    font-size: .875rem;
    color: var(--kn-primary);
    font-style: normal;
    font-weight: 600;
}

/* ── Page Hero / Header ───────────────────────────────────────────────────── */
.kn-page-hero {
    background: linear-gradient(135deg, #0d3d22 0%, #1a6b3c 100%);
    padding: 48px 0;
    color: white;
}
.kn-page-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: white;
    font-weight: 700;
}
.kn-page-body { padding: 48px 0; max-width: 860px; margin: 0 auto; }
.kn-page-content { font-size: .95rem; line-height: 1.8; color: var(--kn-text); }

/* Breadcrumbs */
.kn-breadcrumbs { margin-bottom: 12px; }
.kn-bc-list { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.kn-bc-item a, .kn-bc-sep, .kn-bc-item { font-size: .8rem; color: rgba(255,255,255,.75); }
.kn-bc-item a:hover { color: white; }
.kn-bc-current { color: rgba(255,255,255,.9); font-weight: 500; }

/* ── Site Footer ──────────────────────────────────────────────────────────── */
.kn-site-footer { background: var(--kn-footer-bg); color: rgba(255,255,255,.75); }

.kn-footer-main { padding: 64px 0 48px; }
.kn-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
}
.kn-footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.kn-footer-logo-icon { font-size: 1.8rem; color: var(--kn-secondary); }
.kn-footer-logo-name { font-size: 1.1rem; font-weight: 700; color: white; }
.kn-footer-about { font-size: .85rem; line-height: 1.7; color: rgba(255,255,255,.65); margin-bottom: 20px; }

.kn-footer-social { display: flex; gap: 10px; }
.kn-social-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--kn-transition);
    color: rgba(255,255,255,.8);
}
.kn-social-btn:hover { background: var(--kn-primary); color: white; transform: translateY(-2px); }
.kn-social-whatsapp:hover { background: #25D366; }

.kn-footer-heading {
    font-size: .9rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.kn-footer-links li { margin-bottom: 10px; }
.kn-footer-links a { font-size: .85rem; color: rgba(255,255,255,.65); transition: var(--kn-transition); }
.kn-footer-links a:hover { color: white; padding-left: 4px; }

.kn-footer-contact li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 14px;
    font-size: .83rem;
}
.kn-contact-label { color: rgba(255,255,255,.4); font-size: .73rem; text-transform: uppercase; letter-spacing: .5px; }
.kn-footer-contact a { color: rgba(255,255,255,.8); }
.kn-footer-contact a:hover { color: white; }

.kn-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 20px 0;
}
.kn-footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.kn-copyright, .kn-developer {
    font-size: .8rem;
    color: rgba(255,255,255,.45);
}
.kn-developer a { color: rgba(255,255,255,.65); }
.kn-developer a:hover { color: white; }

/* ── WhatsApp Widget ──────────────────────────────────────────────────────── */
.kn-wa-widget {
    position: fixed;
    bottom: 28px;
    right: 24px;
    z-index: 9000;
}
.kn-wa-trigger {
    width: 58px;
    height: 58px;
    background: #25D366;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(37,211,102,.45);
    transition: var(--kn-transition);
    position: relative;
}
.kn-wa-trigger:hover { background: #1da851; transform: scale(1.08); }
.kn-wa-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(37,211,102,.4);
    animation: kn-pulse 2s infinite;
}
@keyframes kn-pulse {
    0%   { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

.kn-wa-panel {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    width: 300px;
    background: white;
    border-radius: var(--kn-radius-lg);
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: scale(.92) translateY(10px);
    transform-origin: bottom right;
    transition: all .25s ease;
}
.kn-wa-panel.kn-open { opacity: 1; visibility: visible; transform: scale(1) translateY(0); }

.kn-wa-header {
    background: #25D366;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
}
.kn-wa-avatar {
    width: 44px; height: 44px;
    background: rgba(255,255,255,.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.kn-wa-info { flex: 1; }
.kn-wa-info strong { display: block; font-size: .9rem; }
.kn-wa-info span   { font-size: .75rem; opacity: .85; }
.kn-wa-close {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1rem;
    padding: 4px;
    border-radius: 4px;
    opacity: .8;
    transition: var(--kn-transition);
}
.kn-wa-close:hover { opacity: 1; background: rgba(255,255,255,.2); }

.kn-wa-body { padding: 16px; }
.kn-wa-options { display: flex; flex-direction: column; gap: 8px; }
.kn-wa-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--kn-off-white);
    border-radius: var(--kn-radius);
    color: var(--kn-text);
    text-decoration: none;
    transition: var(--kn-transition);
}
.kn-wa-option:hover { background: var(--kn-primary-light); color: var(--kn-primary); }
.kn-wa-option > div { display: flex; flex-direction: column; gap: 1px; }
.kn-wa-option strong { font-size: .82rem; font-weight: 600; }
.kn-wa-option span   { font-size: .76rem; color: var(--kn-text-muted); }

/* ── Form Elements ────────────────────────────────────────────────────────── */
.kn-input, .kn-textarea {
    width: 100%;
    padding: 11px 14px;
    font-family: var(--kn-font-base);
    font-size: .9rem;
    color: var(--kn-text);
    background: var(--kn-off-white);
    border: 1px solid var(--kn-border);
    border-radius: var(--kn-radius-sm);
    transition: var(--kn-transition);
}
.kn-input:focus, .kn-textarea:focus {
    outline: none;
    border-color: var(--kn-primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(26,107,60,.12);
}
.kn-label {
    display: block;
    font-size: .84rem;
    font-weight: 500;
    color: var(--kn-text);
    margin-bottom: 6px;
}
.kn-form-group { margin-bottom: 20px; }
.kn-form-hint { font-size: .78rem; color: var(--kn-text-muted); margin-top: 4px; }
.kn-form-error { font-size: .78rem; color: #e53e3e; margin-top: 4px; }

/* Checkbox / Radio */
.kn-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: .875rem;
    color: var(--kn-text);
}
.kn-check-label input[type="checkbox"],
.kn-check-label input[type="radio"] { accent-color: var(--kn-primary); width: 16px; height: 16px; cursor: pointer; }

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.kn-alert {
    padding: 14px 18px;
    border-radius: var(--kn-radius-sm);
    font-size: .875rem;
    margin-bottom: 16px;
    border-left: 4px solid;
}
.kn-alert-success { background: #f0fdf4; border-color: #22c55e; color: #166534; }
.kn-alert-error   { background: #fff5f5; border-color: #e53e3e; color: #c53030; }
.kn-alert-info    { background: #eff6ff; border-color: #3b82f6; color: #1d4ed8; }
.kn-alert-warning { background: #fffbeb; border-color: #f59e0b; color: #92400e; }

/* ── Utilities ────────────────────────────────────────────────────────────── */
.kn-text-center { text-align: center; }
.kn-text-muted  { color: var(--kn-text-muted); }
.kn-mt-4 { margin-top: 16px; }
.kn-mt-8 { margin-top: 32px; }
.kn-mb-4 { margin-bottom: 16px; }
.sr-only, .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .kn-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 768px) {
    :root {
        --kn-header-h: 64px;
        --kn-access-h: 32px;
    }

    .kn-primary-nav { display: none; }
    .kn-mobile-toggle { display: flex; }
    .kn-header-actions .kn-btn-outline,
    .kn-header-actions .kn-btn-primary { display: none; }
    .kn-header-actions .kn-btn-outline:first-of-type,
    .kn-header-actions .kn-btn-primary:first-of-type { display: none; }

    /* Show only register on header */
    .kn-header-actions > a.kn-btn-primary { display: inline-flex; }

    .kn-hero-section { padding: 60px 0 40px; min-height: 520px; }
    .kn-search-row { flex-direction: column; }
    .kn-search-field { width: 100%; min-width: unset; }

    .kn-profiles-grid { grid-template-columns: repeat(2, 1fr); }
    .kn-hiw-steps     { grid-template-columns: 1fr 1fr; }

    .kn-footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .kn-footer-bottom-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
    .kn-container { padding: 0 16px; }
    .kn-profiles-grid { grid-template-columns: 1fr 1fr; }
    .kn-hiw-steps     { grid-template-columns: 1fr; }
    .kn-plans-grid    { grid-template-columns: 1fr; }
    .kn-access-inner  { gap: 10px; }
    .kn-access-label  { display: none; }
}

/* ── Print Styles ─────────────────────────────────────────────────────────── */
@media print {
    #kn-accessibility-bar, #kn-header, #kn-whatsapp-widget, .kn-mobile-toggle { display: none !important; }
    .kn-site-footer { background: white !important; color: black !important; }
    a[href]::after { content: " (" attr(href) ")"; font-size: .8em; }
}