/* =========================================
 CSS CUSTOM PROPERTIES & THEME SYSTEM
========================================= */
:root {
--brand-primary: #2563eb;
--brand-secondary: #7c3aed;
--brand-accent: #0ea5e9;
--brand-gradient: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
--brand-gradient-soft: linear-gradient(135deg, #eff6ff 0%, #f3f0ff 100%);

--bg-base: #ffffff;
--bg-surface: #f8fafc;
--bg-card: #ffffff;
--bg-input: #f1f5f9;
--bg-nav: rgba(255,255,255,0.95);
--bg-code: #f1f5f9;

--text-primary: #0f172a;
--text-secondary: #475569;
--text-muted: #94a3b8;
--text-inverse: #ffffff;

--border-color: #e2e8f0;
--border-focus: #2563eb;

--shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 16px rgba(0,0,0,0.08);
--shadow-lg: 0 10px 40px rgba(0,0,0,0.10);
--shadow-xl: 0 20px 60px rgba(0,0,0,0.12);

--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;

--font-display: 'Outfit', sans-serif;
--font-body: 'Inter', sans-serif;

--success: #10b981;
--warning: #f59e0b;
--danger: #ef4444;
--info: #3b82f6;

--nav-height: 68px;
--transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
}

[data-theme="dark"] {
--bg-base: #0b1120;
--bg-surface: #111827;
--bg-card: #1e293b;
--bg-input: #1e2a3b;
--bg-nav: rgba(11,17,32,0.96);
--bg-code: #0f172a;

--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-muted: #64748b;

--border-color: #1e293b;
--border-focus: #60a5fa;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
--shadow-md: 0 4px 16px rgba(0,0,0,0.4);
--shadow-lg: 0 10px 40px rgba(0,0,0,0.5);
--brand-gradient-soft: linear-gradient(135deg, #1e2a4a 0%, #1a1233 100%);
--bg-code: #162032;
}

/* =========================================
 RESET & BASE
========================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
font-family: var(--font-body);
background: var(--bg-base);
color: var(--text-primary);
line-height: 1.6;
transition: background 0.3s, color 0.3s;
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; font-family: var(--font-body); }
ul { list-style: none; }

.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

/* =========================================
 COOKIE BANNER
========================================= */
#cookie-banner {
position: fixed;
bottom: 0; left: 0; right: 0;
background: var(--bg-card);
border-top: 1px solid var(--border-color);
padding: 14px 20px;
display: flex;
align-items: center;
gap: 16px;
z-index: 9999;
box-shadow: 0 -4px 20px rgba(0,0,0,0.10);
flex-wrap: wrap;
}
#cookie-banner p {
flex: 1;
font-size: 0.83rem;
color: var(--text-secondary);
min-width: 200px;
}
#cookie-banner a { color: var(--brand-primary); font-weight: 500; }
.cookie-btns { display: flex; gap: 10px; }
.cookie-btns button {
padding: 7px 18px;
border-radius: var(--radius-sm);
font-size: 0.83rem;
font-weight: 600;
border: none;
}
#cookie-accept { background: var(--brand-primary); color: #fff; }
#cookie-dismiss { background: var(--bg-input); color: var(--text-secondary); border: 1px solid var(--border-color) !important; }

/* =========================================
 NAVIGATION
========================================= */
nav {
position: fixed;
top: 0; left: 0; right: 0;
height: var(--nav-height);
background: var(--bg-nav);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-color);
z-index: 1000;
transition: var(--transition);
}
.nav-inner {
display: flex;
align-items: center;
height: 100%;
gap: 8px;
}
.nav-logo {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.15rem;
color: var(--text-primary);
white-space: nowrap;
text-decoration: none;
flex-shrink: 0;
}
.nav-logo span { color: var(--brand-primary); }
.nav-spacer { flex: 1; }
.nav-links {
display: flex;
align-items: center;
gap: 4px;
}
.nav-links a {
font-size: 0.88rem;
font-weight: 500;
color: var(--text-secondary);
padding: 6px 12px;
border-radius: var(--radius-sm);
white-space: nowrap;
transition: var(--transition);
}
.nav-links a:hover { color: var(--text-primary); background: var(--bg-surface); text-decoration: none; }

/* Tools Dropdown */
.nav-dropdown {
position: relative;
}
.nav-dropdown > button {
font-size: 0.88rem;
font-weight: 500;
color: var(--text-secondary);
padding: 6px 12px;
border-radius: var(--radius-sm);
border: none;
background: transparent;
display: flex;
align-items: center;
gap: 5px;
transition: var(--transition);
}
.nav-dropdown > button:hover { color: var(--text-primary); background: var(--bg-surface); }
.nav-dropdown > button svg { width: 14px; height: 14px; transition: transform 0.2s; }
.nav-dropdown.open > button svg { transform: rotate(180deg); }

.dropdown-mega {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 640px;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
padding: 20px;
display: none;
z-index: 100;
}
.nav-dropdown.open .dropdown-mega { display: block; }
.dropdown-mega-title {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
margin-bottom: 12px;
}
.dropdown-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
}
.dropdown-grid a {
font-size: 0.83rem;
color: var(--text-secondary);
padding: 8px 10px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
gap: 8px;
transition: var(--transition);
}
.dropdown-grid a:hover { background: var(--bg-surface); color: var(--brand-primary); text-decoration: none; }
.dropdown-grid a svg { width: 14px; height: 14px; color: var(--brand-primary); flex-shrink: 0; }

.nav-theme {
width: 38px; height: 38px;
border-radius: 50%;
border: 1px solid var(--border-color);
background: var(--bg-input);
color: var(--text-primary);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.nav-theme svg { width: 17px; height: 17px; }

/* Hamburger */
.nav-hamburger {
display: none;
flex-direction: column;
gap: 5px;
width: 38px; height: 38px;
align-items: center; justify-content: center;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
background: var(--bg-input);
}
.nav-hamburger span {
display: block;
width: 18px; height: 2px;
background: var(--text-primary);
border-radius: 2px;
transition: var(--transition);
}

.mobile-menu {
display: none;
position: fixed;
top: var(--nav-height);
left: 0; right: 0; bottom: 0;
background: var(--bg-base);
z-index: 999;
overflow-y: auto;
padding: 20px;
}
.mobile-menu.open { display: block; }
.mobile-menu a, .mobile-menu button {
display: block;
width: 100%;
padding: 12px 0;
font-size: 0.95rem;
font-weight: 500;
color: var(--text-primary);
border-bottom: 1px solid var(--border-color);
background: none; border-top: none; border-left: none; border-right: none;
text-align: left;
}
.mobile-menu-section-title {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
padding: 16px 0 6px;
}

/* =========================================
 BREADCRUMB
========================================= */
.breadcrumb-bar {
background: var(--bg-surface);
border-bottom: 1px solid var(--border-color);
padding-top: var(--nav-height);
}
.breadcrumb {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 0;
font-size: 0.80rem;
color: var(--text-muted);
flex-wrap: wrap;
}
.breadcrumb a { color: var(--text-secondary); transition: var(--transition); }
.breadcrumb a:hover { color: var(--brand-primary); text-decoration: none; }
.breadcrumb-sep { color: var(--text-muted); }
.breadcrumb span:last-child { color: var(--brand-primary); font-weight: 500; }

/* =========================================
 HERO SECTION
========================================= */
.hero {
background: var(--brand-gradient-soft);
padding: 64px 0 50px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(37,99,235,0.08) 0%, transparent 70%);
pointer-events: none;
}
.hero::after {
content: '';
position: absolute;
bottom: -60px; left: -60px;
width: 300px; height: 300px;
background: radial-gradient(circle, rgba(124,58,237,0.07) 0%, transparent 70%);
pointer-events: none;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 7px;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 100px;
padding: 5px 14px;
font-size: 0.78rem;
font-weight: 600;
color: var(--brand-primary);
margin-bottom: 20px;
}
.hero-badge span.dot { width: 7px; height: 7px; background: var(--success); border-radius: 50%; display: inline-block; animation: pulse-dot 2s infinite; }
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(0.8); }
}
.hero h1 {
font-family: var(--font-display);
font-size: clamp(2rem, 5vw, 3.2rem);
font-weight: 800;
line-height: 1.15;
color: var(--text-primary);
margin-bottom: 16px;
max-width: 700px;
}
.hero h1 em {
font-style: normal;
background: var(--brand-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-sub {
font-size: 1.05rem;
color: var(--text-secondary);
max-width: 580px;
margin-bottom: 36px;
line-height: 1.7;
}
.hero-stats {
display: flex;
gap: 32px;
margin-top: 36px;
flex-wrap: wrap;
}
.hero-stat { text-align: left; }
.hero-stat strong { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: var(--brand-primary); display: block; }
.hero-stat span { font-size: 0.80rem; color: var(--text-muted); font-weight: 500; }

/* =========================================
 CHECKER TOOL
========================================= */
.checker-section {
background: var(--bg-base);
padding: 56px 0 64px;
}
.checker-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
padding: 36px;
max-width: 900px;
margin: 0 auto;
}
.checker-title {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 6px;
}
.checker-subtitle {
font-size: 0.88rem;
color: var(--text-secondary);
margin-bottom: 24px;
}
.input-row {
display: flex;
gap: 12px;
margin-bottom: 8px;
}
.input-wrap {
flex: 1;
position: relative;
}
.input-wrap svg {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 17px; height: 17px;
color: var(--text-muted);
pointer-events: none;
}
#domain-input {
width: 100%;
height: 50px;
padding: 0 14px 0 42px;
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
background: var(--bg-input);
color: var(--text-primary);
font-size: 0.97rem;
font-family: var(--font-body);
transition: var(--transition);
outline: none;
}
#domain-input:focus { border-color: var(--border-focus); background: var(--bg-card); }
#domain-input.error { border-color: var(--danger); }
#domain-input.valid { border-color: var(--success); }
.input-hint {
font-size: 0.76rem;
margin-top: 5px;
min-height: 16px;
}
.hint-error { color: var(--danger); }
.hint-ok { color: var(--success); }

.btn-check {
height: 50px;
padding: 0 28px;
background: var(--brand-gradient);
color: #fff;
border: none;
border-radius: var(--radius-md);
font-size: 0.95rem;
font-weight: 700;
font-family: var(--font-display);
white-space: nowrap;
display: flex;
align-items: center;
gap: 8px;
transition: var(--transition);
box-shadow: 0 4px 15px rgba(37,99,235,0.3);
}
.btn-check:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,99,235,0.4); }
.btn-check:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-check svg { width: 18px; height: 18px; }
.spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Options row */
.checker-options {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border-color);
}
.option-label {
font-size: 0.80rem;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 6px;
display: block;
}
.record-type-btns {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.rtbtn {
padding: 5px 12px;
border-radius: 100px;
border: 1.5px solid var(--border-color);
background: var(--bg-surface);
font-size: 0.78rem;
font-weight: 600;
color: var(--text-secondary);
transition: var(--transition);
}
.rtbtn.active, .rtbtn:hover { border-color: var(--brand-primary); color: var(--brand-primary); background: rgba(37,99,235,0.06); }
.rtbtn.active { background: rgba(37,99,235,0.10); }
.dns-resolver-sel {
padding: 6px 12px;
border: 1.5px solid var(--border-color);
border-radius: var(--radius-sm);
background: var(--bg-input);
color: var(--text-primary);
font-size: 0.83rem;
font-family: var(--font-body);
outline: none;
cursor: pointer;
}
.dns-resolver-sel:focus { border-color: var(--brand-primary); }

/* =========================================
 RESULTS
========================================= */
#results-section { display: none; margin-top: 28px; }
.results-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 12px;
}
.status-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 18px;
border-radius: 100px;
font-size: 0.88rem;
font-weight: 700;
}
.status-badge.secure { background: rgba(16,185,129,0.12); color: var(--success); border: 1.5px solid rgba(16,185,129,0.25); }
.status-badge.insecure { background: rgba(239,68,68,0.10); color: var(--danger); border: 1.5px solid rgba(239,68,68,0.25); }
.status-badge.partial { background: rgba(245,158,11,0.10); color: var(--warning); border: 1.5px solid rgba(245,158,11,0.25); }
.status-badge svg { width: 16px; height: 16px; }

.result-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
margin-bottom: 24px;
}
.summary-card {
background: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: 16px;
text-align: center;
}
.summary-card .sc-icon {
width: 36px; height: 36px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 8px;
}
.sc-icon.found { background: rgba(16,185,129,0.12); color: var(--success); }
.sc-icon.not-found { background: rgba(239,68,68,0.10); color: var(--danger); }
.sc-icon.warn { background: rgba(245,158,11,0.10); color: var(--warning); }
.sc-icon svg { width: 18px; height: 18px; }
.summary-card .sc-label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.summary-card .sc-value { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin: 2px 0; }
.summary-card .sc-sub { font-size: 0.71rem; color: var(--text-muted); }

/* Tab System */
.result-tabs {
display: flex;
gap: 4px;
border-bottom: 2px solid var(--border-color);
margin-bottom: 20px;
overflow-x: auto;
padding-bottom: 1px;
}
.rtab {
padding: 9px 18px;
border: none;
background: transparent;
font-size: 0.86rem;
font-weight: 600;
color: var(--text-muted);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
white-space: nowrap;
position: relative;
transition: var(--transition);
}
.rtab:hover { color: var(--text-primary); }
.rtab.active { color: var(--brand-primary); }
.rtab.active::after {
content: '';
position: absolute;
bottom: -2px; left: 0; right: 0;
height: 2px;
background: var(--brand-primary);
border-radius: 2px 2px 0 0;
}
.rtab-count {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
background: var(--bg-surface);
border-radius: 100px;
font-size: 0.68rem;
font-weight: 700;
margin-left: 5px;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Record Table */
.record-table-wrap { overflow-x: auto; }
.record-table {
width: 100%;
border-collapse: collapse;
font-size: 0.83rem;
}
.record-table th {
background: var(--bg-surface);
padding: 10px 14px;
text-align: left;
font-weight: 600;
color: var(--text-muted);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
border-bottom: 1px solid var(--border-color);
white-space: nowrap;
}
.record-table td {
padding: 10px 14px;
border-bottom: 1px solid var(--border-color);
color: var(--text-primary);
vertical-align: top;
}
.record-table tr:last-child td { border-bottom: none; }
.record-table tr:hover td { background: var(--bg-surface); }
.mono {
font-family: 'Courier New', monospace;
font-size: 0.80rem;
word-break: break-all;
}
.tag {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.72rem;
font-weight: 700;
background: rgba(37,99,235,0.10);
color: var(--brand-primary);
}
.tag.ksk { background: rgba(124,58,237,0.10); color: var(--brand-secondary); }
.tag.zsk { background: rgba(37,99,235,0.10); color: var(--brand-primary); }
.tag.valid { background: rgba(16,185,129,0.10); color: var(--success); }
.tag.expired { background: rgba(239,68,68,0.10); color: var(--danger); }

/* Empty state */
.empty-state {
text-align: center;
padding: 36px 20px;
color: var(--text-muted);
}
.empty-state svg { width: 44px; height: 44px; margin: 0 auto 12px; opacity: 0.4; }
.empty-state p { font-size: 0.90rem; }

/* Chain of trust */
.chain-visual {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: 8px;
}
.chain-node {
display: flex;
align-items: flex-start;
gap: 16px;
position: relative;
}
.chain-node::before {
content: '';
position: absolute;
left: 22px;
top: 46px;
width: 2px;
height: calc(100% - 8px);
background: var(--border-color);
}
.chain-node:last-child::before { display: none; }
.chain-circle {
width: 46px; height: 46px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
margin-top: 4px;
}
.chain-circle.root { background: rgba(16,185,129,0.15); color: var(--success); }
.chain-circle.tld { background: rgba(59,130,246,0.12); color: var(--info); }
.chain-circle.zone { background: rgba(124,58,237,0.12); color: var(--brand-secondary); }
.chain-circle.fail { background: rgba(239,68,68,0.12); color: var(--danger); }
.chain-circle svg { width: 22px; height: 22px; }
.chain-info { padding: 12px 0 24px; }
.chain-info strong { display: block; font-size: 0.90rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.chain-info p { font-size: 0.82rem; color: var(--text-secondary); }

/* Raw JSON */
.raw-json {
background: var(--bg-code);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: 16px;
font-size: 0.79rem;
font-family: 'Courier New', monospace;
white-space: pre-wrap;
word-break: break-all;
color: var(--text-secondary);
max-height: 320px;
overflow-y: auto;
}

/* Share & Feedback */
.share-feedback-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 0 0;
border-top: 1px solid var(--border-color);
margin-top: 20px;
flex-wrap: wrap;
}
.share-feedback-bar span { font-size: 0.83rem; color: var(--text-muted); font-weight: 500; }
.share-btn, .feedback-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 16px;
border-radius: var(--radius-sm);
font-size: 0.83rem;
font-weight: 600;
border: 1px solid var(--border-color);
background: var(--bg-surface);
color: var(--text-primary);
transition: var(--transition);
}
.share-btn:hover, .feedback-btn:hover { background: var(--bg-input); border-color: var(--brand-primary); color: var(--brand-primary); text-decoration: none; }
.share-btn svg, .feedback-btn svg { width: 15px; height: 15px; }
.feedback-btn { background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.25); color: var(--brand-primary); }

/* =========================================
 FEATURES
========================================= */
.features-section {
padding: 72px 0;
background: var(--bg-surface);
}
.section-eyebrow {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.10em;
color: var(--brand-primary);
margin-bottom: 12px;
}
.section-heading {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3.5vw, 2.4rem);
font-weight: 800;
color: var(--text-primary);
margin-bottom: 14px;
line-height: 1.25;
}
.section-desc {
font-size: 0.97rem;
color: var(--text-secondary);
max-width: 560px;
line-height: 1.7;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 48px;
}
.feature-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 28px;
transition: var(--transition);
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: rgba(37,99,235,0.2); }
.feature-icon {
width: 48px; height: 48px;
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
margin-bottom: 18px;
}
.fi-blue { background: rgba(37,99,235,0.10); color: var(--brand-primary); }
.fi-purple { background: rgba(124,58,237,0.10); color: var(--brand-secondary); }
.fi-green { background: rgba(16,185,129,0.10); color: var(--success); }
.fi-amber { background: rgba(245,158,11,0.10); color: var(--warning); }
.fi-sky { background: rgba(14,165,233,0.10); color: var(--brand-accent); }
.fi-red { background: rgba(239,68,68,0.10); color: var(--danger); }
.feature-icon svg { width: 24px; height: 24px; }
.feature-card h3 { font-family: var(--font-display); font-size: 1.03rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.feature-card p { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.65; }

/* =========================================
 HOW IT WORKS
========================================= */
.how-section { padding: 72px 0; background: var(--bg-base); }
.how-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0;
margin-top: 48px;
position: relative;
}
.how-grid::before {
content: '';
position: absolute;
top: 28px; left: 12%; right: 12%;
height: 2px;
background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
opacity: 0.25;
}
.how-step { text-align: center; padding: 0 20px; }
.step-num {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--brand-gradient);
color: #fff;
font-family: var(--font-display);
font-weight: 800;
font-size: 1.15rem;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 18px;
position: relative;
z-index: 1;
}
.how-step h3 { font-family: var(--font-display); font-size: 1.0rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.how-step p { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.6; }

/* =========================================
 SEO CONTENT SECTION
========================================= */
.content-section { padding: 64px 0; background: var(--bg-surface); }
.content-inner {
max-width: 820px;
margin: 0 auto;
}
.content-inner h2 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: var(--text-primary); margin-bottom: 18px; }
.content-inner p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.85; margin-bottom: 16px; }
.content-inner strong { color: var(--text-primary); font-weight: 600; }

/* =========================================
 RELATED TOOLS (pre-footer)
========================================= */
.related-section { padding: 60px 0; background: var(--bg-base); }
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 10px;
margin-top: 36px;
}
.related-link {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 16px;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-size: 0.84rem;
font-weight: 500;
color: var(--text-secondary);
transition: var(--transition);
}
.related-link:hover { color: var(--brand-primary); border-color: rgba(37,99,235,0.3); background: rgba(37,99,235,0.03); text-decoration: none; transform: translateX(3px); }
.related-link svg { width: 15px; height: 15px; color: var(--brand-primary); flex-shrink: 0; }

/* =========================================
 FAQ
========================================= */
.faq-section { padding: 72px 0; background: var(--bg-surface); }
.faq-list { max-width: 760px; margin: 40px auto 0; }
.faq-item {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
margin-bottom: 10px;
overflow: hidden;
}
.faq-q {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
cursor: pointer;
font-weight: 600;
font-size: 0.95rem;
color: var(--text-primary);
gap: 12px;
}
.faq-q svg { width: 18px; height: 18px; color: var(--brand-primary); flex-shrink: 0; transition: transform 0.3s; }
.faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0,1,0,1);
}
.faq-item.open .faq-a { max-height: 500px; transition: max-height 0.45s ease; }
.faq-a-inner {
padding: 0 22px 18px;
font-size: 0.90rem;
color: var(--text-secondary);
line-height: 1.75;
border-top: 1px solid var(--border-color);
padding-top: 14px;
}

/* =========================================
 CTA SECTION
========================================= */
.cta-section {
padding: 80px 0;
background: var(--bg-base);
}
.cta-card {
background: var(--brand-gradient);
border-radius: var(--radius-xl);
padding: 56px 48px;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-card::before {
content: '';
position: absolute;
top: -60px; right: -60px;
width: 250px; height: 250px;
background: rgba(255,255,255,0.05);
border-radius: 50%;
}
.cta-card::after {
content: '';
position: absolute;
bottom: -40px; left: -40px;
width: 180px; height: 180px;
background: rgba(255,255,255,0.04);
border-radius: 50%;
}
.cta-card h2 {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3vw, 2.4rem);
font-weight: 800;
color: #fff;
margin-bottom: 14px;
}
.cta-card p { font-size: 1.0rem; color: rgba(255,255,255,0.80); margin-bottom: 32px; max-width: 520px; margin-left: auto; margin-right: auto; }
.cta-btns { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; position: relative; z-index: 1; }
.cta-btn-white {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
background: #fff;
color: var(--brand-primary);
border-radius: var(--radius-md);
font-weight: 700;
font-size: 0.95rem;
font-family: var(--font-display);
transition: var(--transition);
}
.cta-btn-white:hover { opacity: 0.92; transform: translateY(-1px); text-decoration: none; }
.cta-btn-outline {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
border: 2px solid rgba(255,255,255,0.45);
color: #fff;
border-radius: var(--radius-md);
font-weight: 700;
font-size: 0.95rem;
font-family: var(--font-display);
transition: var(--transition);
}
.cta-btn-outline:hover { background: rgba(255,255,255,0.12); text-decoration: none; }

/* =========================================
 FOOTER
========================================= */
footer {
background: var(--bg-surface);
border-top: 1px solid var(--border-color);
padding: 56px 0 24px;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr repeat(3, 1fr);
gap: 40px;
margin-bottom: 40px;
}
.footer-brand .nav-logo { font-size: 1.2rem; margin-bottom: 12px; display: block; }
.footer-brand p { font-size: 0.83rem; color: var(--text-secondary); line-height: 1.7; max-width: 250px; }
.footer-col h4 {
font-family: var(--font-display);
font-size: 0.80rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
margin-bottom: 14px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col ul li a {
font-size: 0.84rem;
color: var(--text-secondary);
transition: var(--transition);
}
.footer-col ul li a:hover { color: var(--brand-primary); text-decoration: none; }
.footer-bottom {
border-top: 1px solid var(--border-color);
padding-top: 22px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.footer-bottom p { font-size: 0.78rem; color: var(--text-muted); }
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { font-size: 0.78rem; color: var(--text-muted); transition: var(--transition); }
.footer-bottom-links a:hover { color: var(--brand-primary); text-decoration: none; }
.disclaimer-note { font-size: 0.74rem; color: var(--text-muted); margin-top: 10px; line-height: 1.5; }

/* =========================================
 UTILITIES
========================================= */
.text-center { text-align: center; }
.mt-auto { margin-top: auto; }

/* =========================================
 COPY BUTTON
========================================= */
.copy-btn {
padding: 4px 10px;
font-size: 0.74rem;
border: 1px solid var(--border-color);
border-radius: 4px;
background: var(--bg-surface);
color: var(--text-muted);
cursor: pointer;
transition: var(--transition);
}
.copy-btn:hover { color: var(--brand-primary); border-color: var(--brand-primary); }

/* =========================================
 PROGRESS BAR
========================================= */
.progress-bar-wrap {
display: none;
margin-top: 20px;
}
.progress-bar-wrap.show { display: block; }
.progress-label {
font-size: 0.82rem;
color: var(--text-secondary);
margin-bottom: 8px;
display: flex;
justify-content: space-between;
}
.progress-track {
height: 5px;
background: var(--bg-surface);
border-radius: 100px;
overflow: hidden;
border: 1px solid var(--border-color);
}
.progress-fill {
height: 100%;
background: var(--brand-gradient);
border-radius: 100px;
width: 0%;
transition: width 0.5s ease;
}

/* =========================================
 RESPONSIVE
========================================= */
@media (max-width: 900px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.nav-links, .nav-dropdown { display: none; }
.nav-hamburger { display: flex; }
.input-row { flex-direction: column; }
.btn-check { width: 100%; justify-content: center; }
.how-grid::before { display: none; }
.checker-card { padding: 24px 18px; }
.cta-card { padding: 40px 24px; }
.hero h1 { font-size: 1.9rem; }
.footer-grid { grid-template-columns: 1fr; }
.footer-col:nth-child(2), .footer-col:nth-child(3), .footer-col:nth-child(4) { display: none; }
.footer-mobile-links { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.footer-mobile-link { font-size: 0.80rem; color: var(--text-secondary); }
}
@media (max-width: 480px) {
.result-summary-grid { grid-template-columns: repeat(2,1fr); }
.hero-stats { gap: 20px; }
.checker-options { flex-direction: column; }
.dropdown-mega { width: calc(100vw - 40px); right: -10px; }
}