/* Kabbalah Numerology — Cormorant Garamond + Cinzel + Inter */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=Cinzel:wght@400;600;700;900&family=Inter:wght@300;400;500;600&display=swap');

.kabb-hero, .kabb-calc-section, .kabb-tree-section, .kabb-lettermap-section, .kabb-meanings-section, .kabb-names-section, .kabb-tikkun-section, .kabb-compare-section, .faq-section, .kabb-cta-section {
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-deco: 'Cinzel', Georgia, serif;
    --font-body: 'Inter', sans-serif;
    --gold: #d4a836;
    --gold-light: #f0c560;
    --indigo: #6366f1;
    --bg-deep: #0a0a18;
}

/* === HERO === */
.kabb-hero { position: relative; overflow: hidden; min-height: 65vh; display: flex; align-items: center; }
.kabb-hero-bg { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(180deg, rgba(10,10,24,0.55), rgba(10,10,24,0.95)), url('/kabbalah-numerology-calculator/images/hero-bg.webp'); background-size: cover; background-position: center; }
.kabb-hero .container { position: relative; z-index: 1; text-align: center; }
.kabb-hero-content { max-width: 920px; margin: 0 auto; }
.kabb-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.2rem; border-radius: var(--radius-full); background: rgba(212,168,54,0.1); border: 1px solid rgba(212,168,54,0.3); color: var(--gold-light); font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.12em; margin-bottom: var(--space-2xl); }
.kabb-badge :first-child { font-family: 'Times New Roman', serif; font-size: 1.1rem; }
.kabb-hero .calculator-page-title { font-family: var(--font-display) !important; font-weight: 400 !important; }
.kabb-hero .calculator-page-subtitle { font-family: var(--font-body) !important; font-weight: 300 !important; }
.kabb-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2xl); max-width: 720px; margin: var(--space-3xl) auto 0; }
@media (max-width: 640px) { .kabb-hero-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } }
.kabb-stat { text-align: center; }
.kabb-stat-value { font-family: var(--font-deco); font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 700; color: var(--gold); line-height: 1; }
.kabb-stat-label { font-family: var(--font-body); font-size: 0.72rem; color: rgba(220,220,255,0.55); text-transform: uppercase; letter-spacing: 0.18em; margin-top: 0.4rem; }

/* === SHARED === */
.kabb-section-header { text-align: center; margin-bottom: var(--space-4xl); }
.kabb-section-title { font-family: var(--font-display); font-size: clamp(1.85rem, 4vw, 2.85rem); font-weight: 500; color: #f5efe2; line-height: 1.2; margin-bottom: var(--space-md); }
.kabb-section-subtitle { font-family: var(--font-body); font-size: clamp(0.95rem, 1.5vw, 1.05rem); color: rgba(220,220,255,0.65); line-height: 1.7; max-width: 660px; margin: var(--space-md) auto 0; font-weight: 300; }
.kabb-eyebrow { color: var(--gold) !important; font-family: var(--font-body) !important; font-size: 0.78rem !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; font-weight: 600 !important; }

/* === CALC === */
.kabb-calc-section { padding: var(--space-6xl) 0; }
.kabb-calc-card { max-width: 760px; margin: 0 auto; background: rgba(255,255,255,0.04); border: 1px solid rgba(212,168,54,0.22); border-radius: var(--radius-2xl); padding: clamp(1.75rem, 3vw, 2.5rem); backdrop-filter: blur(24px); box-shadow: 0 30px 60px rgba(0,0,0,0.35); }
.kabb-form { display: flex; flex-direction: column; gap: var(--space-lg); }
.kabb-field label { display: block; font-family: var(--font-body); font-size: 0.78rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; margin-bottom: 0.5rem; }
.kabb-optional { color: rgba(220,220,255,0.45); font-weight: 400; text-transform: none; letter-spacing: 0.02em; }
.kabb-input { width: 100%; padding: 1rem 1.1rem; border-radius: var(--radius-lg); background: rgba(255,255,255,0.05); border: 1px solid rgba(212,168,54,0.22); color: #fff; font-family: var(--font-body); font-size: 1rem; transition: all var(--transition-normal); }
.kabb-input:focus { outline: none; background: rgba(255,255,255,0.08); border-color: rgba(212,168,54,0.65); box-shadow: 0 0 0 3px rgba(212,168,54,0.15); }
.kabb-input::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
.kabb-error { padding: 0.85rem 1rem; border-radius: var(--radius-lg); background: rgba(220,38,38,0.1); border: 1px solid rgba(220,38,38,0.3); color: #fca5a5; font-family: var(--font-body); font-size: 0.92rem; }
.kabb-btn-primary { padding: 1.1rem 1.5rem; border: none; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: var(--bg-deep); font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.05em; cursor: pointer; box-shadow: 0 0 30px rgba(212,168,54,0.35); transition: transform var(--transition-normal), box-shadow var(--transition-normal); animation: kabb-pulse 3.5s ease-in-out infinite; }
.kabb-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 50px rgba(212,168,54,0.6); }
@keyframes kabb-pulse { 0%,100% { box-shadow: 0 0 25px rgba(212,168,54,0.3); } 50% { box-shadow: 0 0 50px rgba(212,168,54,0.55); } }

/* === RESULT === */
.kabb-result { margin-top: var(--space-2xl); padding-top: var(--space-2xl); border-top: 1px solid rgba(212,168,54,0.2); display: flex; flex-direction: column; gap: var(--space-xl); }
.kabb-result[hidden] { display: none; }
.kabb-result-hero { text-align: center; padding: var(--space-2xl); background: rgba(212,168,54,0.06); border: 1px solid rgba(212,168,54,0.3); border-radius: var(--radius-2xl); }
.kabb-result-name { font-family: var(--font-display); font-size: 1.5rem; color: #f5efe2; font-weight: 400; font-style: italic; margin-bottom: var(--space-md); }
.kabb-result-num-wrap { display: inline-flex; flex-direction: column; align-items: center; padding: var(--space-md) var(--space-2xl); border-radius: var(--radius-2xl); background: rgba(255,255,255,0.04); border: 2px solid var(--sef-color, var(--gold)); margin-bottom: var(--space-md); box-shadow: 0 0 40px color-mix(in srgb, var(--sef-color, var(--gold)) 30%, transparent); }
.kabb-result-num { font-family: var(--font-deco); font-size: clamp(3rem, 6vw, 5rem); color: var(--sef-color, var(--gold)); font-weight: 700; line-height: 1; }
.kabb-result-num-label { font-family: var(--font-display); font-size: 1.2rem; color: #f5efe2; font-weight: 600; margin-top: 0.4rem; }
.kabb-result-num-hebrew { font-family: 'Times New Roman', serif; font-size: 1.6rem; color: var(--sef-color, var(--gold)); margin-top: 0.3rem; }
.kabb-result-meta { font-family: var(--font-body); font-size: 0.88rem; color: rgba(220,220,255,0.65); margin-top: var(--space-md); }

.kabb-letters-card { padding: var(--space-xl); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-2xl); }
.kabb-letters-card h3 { font-family: var(--font-display); font-size: 1.2rem; color: #f5efe2; text-align: center; margin-bottom: var(--space-md); font-weight: 500; }
.kabb-letters-row { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-bottom: var(--space-md); }
.kabb-letter-tile { display: flex; flex-direction: column; align-items: center; padding: 0.5rem 0.45rem; min-width: 50px; background: rgba(255,255,255,0.04); border: 1px solid rgba(212,168,54,0.2); border-radius: var(--radius-md); }
.kabb-letter-char { font-family: var(--font-deco); font-size: 1.4rem; color: #f5efe2; line-height: 1; font-weight: 600; }
.kabb-letter-val { font-family: var(--font-deco); font-size: 0.85rem; color: var(--gold); font-weight: 700; margin-top: 0.2rem; }
.kabb-letters-sum { text-align: center; font-family: var(--font-deco); font-size: 0.92rem; color: rgba(220,220,255,0.7); padding: var(--space-md); background: rgba(255,255,255,0.03); border-radius: var(--radius-md); }

.kabb-profile { padding: var(--space-xl); background: rgba(255,255,255,0.03); border: 1px solid color-mix(in srgb, var(--sef-color) 30%, rgba(255,255,255,0.07)); border-radius: var(--radius-2xl); }
.kabb-profile-eyebrow { font-family: var(--font-body); font-size: 0.82rem; color: var(--sef-color, var(--gold)); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; margin-bottom: var(--space-md); }
.kabb-profile-meaning { font-family: var(--font-display); font-size: 1.1rem; color: rgba(245,239,226,0.9); line-height: 1.7; font-style: italic; margin-bottom: var(--space-xl); }
.kabb-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 720px) { .kabb-profile-grid { grid-template-columns: 1fr; } }
.kabb-profile-block { padding: var(--space-md) var(--space-lg); background: rgba(255,255,255,0.03); border: 1px solid color-mix(in srgb, var(--bc) 30%, rgba(255,255,255,0.06)); border-radius: var(--radius-lg); }
.kabb-profile-label { font-family: var(--font-body); font-size: 0.78rem; color: var(--bc); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; margin-bottom: 0.4rem; }
.kabb-profile-block p { font-family: var(--font-body); color: rgba(220,220,255,0.75); font-size: 0.92rem; line-height: 1.65; }

.kabb-tikkun-card { padding: var(--space-xl); text-align: center; background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.3); border-radius: var(--radius-2xl); }
.kabb-tikkun-eyebrow { font-family: var(--font-body); font-size: 0.78rem; color: #c4b5fd; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; margin-bottom: var(--space-md); }
.kabb-tikkun-num { font-family: var(--font-deco); font-size: 4rem; color: #c4b5fd; font-weight: 700; line-height: 1; text-shadow: 0 0 30px rgba(196,181,253,0.5); }
.kabb-tikkun-name { font-family: var(--font-display); font-size: 1.6rem; color: #f5efe2; font-weight: 500; margin: var(--space-sm) 0 var(--space-md); }
.kabb-tikkun-text { font-family: var(--font-body); color: rgba(220,220,255,0.75); line-height: 1.7; font-size: 0.95rem; max-width: 580px; margin: 0 auto; }

/* === TREE === */
.kabb-tree-section { padding: var(--space-6xl) 0; }
.kabb-tree-grid { display: grid; grid-template-columns: 420px 1fr; gap: var(--space-2xl); align-items: center; max-width: 1100px; margin: 0 auto; }
@media (max-width: 900px) { .kabb-tree-grid { grid-template-columns: 1fr; } }
.kabb-tree-wrap { background: rgba(255,255,255,0.03); border: 1px solid rgba(212,168,54,0.18); border-radius: var(--radius-2xl); padding: var(--space-md); aspect-ratio: 400/510; }
.kabb-tree-svg { width: 100%; height: 100%; }
.kabb-tree-detail { padding: var(--space-xl); background: rgba(255,255,255,0.03); border: 1px solid color-mix(in srgb, var(--sef-color) 30%, rgba(212,168,54,0.18)); border-radius: var(--radius-2xl); }
.kabb-tree-detail-eyebrow { font-family: var(--font-body); font-size: 0.78rem; color: var(--sef-color); text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; margin-bottom: 0.5rem; }
.kabb-tree-detail-title { font-family: var(--font-display); font-size: 1.6rem; color: #f5efe2; font-weight: 500; margin-bottom: 0.3rem; }
.kabb-tree-detail-hebrew { font-family: 'Times New Roman', serif; font-size: 1.4rem; color: var(--sef-color); margin-bottom: var(--space-md); }
.kabb-tree-detail-attr { font-family: var(--font-display); font-style: italic; color: rgba(220,220,255,0.85); margin-bottom: var(--space-md); font-size: 1rem; }
.kabb-tree-detail-meaning { font-family: var(--font-body); color: rgba(220,220,255,0.7); line-height: 1.7; margin-bottom: var(--space-md); font-size: 0.92rem; }
.kabb-tree-detail-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.kabb-tree-meta-pill { display: inline-flex; flex-direction: column; padding: 0.45rem 0.85rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(212,168,54,0.2); border-radius: var(--radius-lg); }
.kabb-tree-meta-label { font-family: var(--font-body); font-size: 0.65rem; color: rgba(220,220,255,0.5); text-transform: uppercase; letter-spacing: 0.12em; }
.kabb-tree-meta-val { font-family: var(--font-display); font-size: 0.92rem; color: #f5efe2; font-weight: 500; }

/* === LETTER MAP === */
.kabb-lettermap-section { padding: var(--space-6xl) 0; }
.kabb-lettermap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-md); max-width: 1100px; margin: 0 auto; }
.kabb-lettermap-card { padding: var(--space-lg); text-align: center; background: rgba(255,255,255,0.04); border: 1px solid color-mix(in srgb, var(--c) 35%, rgba(212,168,54,0.18)); border-radius: var(--radius-xl); transition: all var(--transition-normal); }
.kabb-lettermap-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px color-mix(in srgb, var(--c) 25%, transparent); }
.kabb-lettermap-num { font-family: var(--font-deco); font-size: 3rem; color: var(--c); font-weight: 700; line-height: 1; }
.kabb-lettermap-name { font-family: var(--font-display); font-size: 1.15rem; color: #f5efe2; font-weight: 500; margin: 0.3rem 0; }
.kabb-lettermap-letters { font-family: var(--font-deco); font-size: 1.05rem; color: var(--c); font-weight: 600; letter-spacing: 0.05em; }

/* === MEANINGS === */
.kabb-meanings-section { padding: var(--space-6xl) 0; }
.kabb-meanings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-lg); max-width: 1240px; margin: 0 auto; }
.kabb-meaning-card { padding: var(--space-xl); background: rgba(255,255,255,0.03); border: 1px solid color-mix(in srgb, var(--c) 35%, rgba(212,168,54,0.15)); border-radius: var(--radius-2xl); transition: all var(--transition-normal); }
.kabb-meaning-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px color-mix(in srgb, var(--c) 18%, transparent); }
.kabb-meaning-head { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); }
.kabb-meaning-num { font-family: var(--font-deco); font-size: 3rem; color: var(--c); font-weight: 700; line-height: 1; min-width: 50px; }
.kabb-meaning-card h3 { font-family: var(--font-display); font-size: 1.3rem; color: #f5efe2; font-weight: 600; }
.kabb-meaning-attr { font-family: var(--font-body); font-size: 0.82rem; color: var(--c); margin-top: 0.2rem; font-style: italic; }
.kabb-meaning-text { font-family: var(--font-display); font-style: italic; font-size: 1rem; color: rgba(220,220,255,0.8); line-height: 1.7; margin-bottom: var(--space-md); }
.kabb-meaning-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.kabb-meaning-mini { padding: var(--space-sm) var(--space-md); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-md); }
.kabb-meaning-mini-label { font-family: var(--font-body); font-size: 0.65rem; color: var(--c); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; margin-bottom: 0.25rem; }
.kabb-meaning-mini p { font-family: var(--font-body); font-size: 0.78rem; color: rgba(220,220,255,0.7); line-height: 1.55; }

/* === 72 NAMES === */
.kabb-names-section { position: relative; padding: var(--space-6xl) 0; overflow: hidden; }
.kabb-names-bg { position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(10,10,24,0.85), rgba(10,10,24,0.95)), url('/kabbalah-numerology-calculator/images/72-names-bg.webp'); background-size: cover; background-position: center; opacity: 0.45; pointer-events: none; z-index: 0; }
.kabb-names-section .container { position: relative; z-index: 1; }
.kabb-names-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); max-width: 1180px; margin: 0 auto; }
.kabb-name72-card { padding: var(--space-lg); background: rgba(255,255,255,0.04); border: 1px solid rgba(212,168,54,0.2); border-radius: var(--radius-xl); text-align: center; transition: all var(--transition-normal); }
.kabb-name72-card:hover { transform: translateY(-3px); border-color: rgba(212,168,54,0.5); }
.kabb-name72-num { font-family: var(--font-deco); font-size: 0.85rem; color: var(--gold); font-weight: 700; }
.kabb-name72-hebrew { font-family: 'Times New Roman', serif; font-size: 1.8rem; color: #f5efe2; margin: 0.4rem 0; letter-spacing: 0.1em; }
.kabb-name72-tr { font-family: var(--font-deco); font-size: 0.85rem; color: var(--gold-light); margin-bottom: var(--space-sm); }
.kabb-name72-purpose { font-family: var(--font-body); color: rgba(220,220,255,0.7); font-size: 0.85rem; line-height: 1.55; font-style: italic; }

/* === TIKKUN GRID === */
.kabb-tikkun-section { padding: var(--space-6xl) 0; }
.kabb-tikkun-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.6rem; max-width: 1240px; margin: 0 auto; }
.kabb-tikkun-tile { padding: 0.85rem 0.75rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(212,168,54,0.18); border-radius: var(--radius-md); transition: all var(--transition-normal); }
.kabb-tikkun-tile:hover { transform: translateY(-2px); border-color: rgba(212,168,54,0.5); background: rgba(212,168,54,0.05); }
.kabb-tikkun-tile-num { font-family: var(--font-deco); font-size: 1.1rem; color: var(--gold); font-weight: 700; line-height: 1; }
.kabb-tikkun-tile-theme { font-family: var(--font-body); font-size: 0.78rem; color: rgba(220,220,255,0.75); margin-top: 0.3rem; line-height: 1.4; }

/* === COMPARE === */
.kabb-compare-section { padding: var(--space-6xl) 0; }
.kabb-compare-wrap { max-width: 1100px; margin: 0 auto; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-2xl); overflow: hidden; overflow-x: auto; }
.kabb-compare-table { width: 100%; border-collapse: collapse; min-width: 760px; font-family: var(--font-body); }
.kabb-compare-table thead th { padding: 1rem 1.2rem; text-align: left; font-family: var(--font-body); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(220,220,255,0.5); background: rgba(0,0,0,0.25); border-bottom: 1px solid rgba(255,255,255,0.08); }
.kabb-compare-table thead th.kabb-compare-highlight { color: var(--gold); }
.kabb-compare-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.05); }
.kabb-compare-table tbody tr:last-child { border-bottom: none; }
.kabb-compare-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.kabb-compare-table td { padding: 0.95rem 1.2rem; color: rgba(220,220,255,0.75); font-size: 0.92rem; }
.kabb-compare-feat { color: rgba(245,239,226,0.85) !important; font-weight: 600; font-family: var(--font-display); font-size: 1rem !important; }
.kabb-compare-table td.kabb-compare-highlight { color: var(--gold-light) !important; font-weight: 500; background: rgba(212,168,54,0.04); }

/* === CTA === */
.kabb-cta-section { padding: var(--space-6xl) 0; background: radial-gradient(ellipse at center, rgba(212,168,54,0.12), transparent 70%); }
.kabb-cta-content { text-align: center; max-width: 720px; margin: 0 auto; }
.kabb-cta-ornament { font-family: 'Times New Roman', serif; font-size: 2.5rem; color: var(--gold); margin-bottom: var(--space-md); text-shadow: 0 0 30px rgba(212,168,54,0.5); }
.kabb-cta-text { font-family: var(--font-body); font-size: 1rem; color: rgba(220,220,255,0.7); line-height: 1.75; margin: var(--space-lg) 0 var(--space-2xl); font-weight: 300; }
.kabb-cta-btn { display: inline-flex; padding-left: 2.5rem; padding-right: 2.5rem; }