/* ============================================================
   KenKonnect — Complete Professional Stylesheet
   Palette: Navy #0b1d35 · Orange #f39b1d · White #ffffff
   ============================================================ */
:root {
  --kk-orange: #f39b1d;
  --kk-orange-hover: #e08810;
  --kk-orange-light: #fff8ef;
  --kk-orange-soft: #ffedd4;
  --kk-night: #0b1d35;
  --kk-night-light: #102a4a;
  --kk-night-lighter: #153660;
  --kk-white: #ffffff;
  --kk-gray-50: #f8fafc;
  --kk-gray-100: #f1f5f9;
  --kk-gray-200: #e2e8f0;
  --kk-gray-300: #cbd5e1;
  --kk-gray-500: #64748b;
  --kk-gray-600: #475569;
  --kk-gray-700: #334155;
  --kk-gray-800: #1e293b;
  --kk-radius: 0.75rem;
  --kk-radius-lg: 1rem;
  --kk-radius-xl: 1.5rem;
  --kk-radius-2xl: 2rem;
  --kk-shadow: 0 4px 24px rgba(11,29,53,.07);
  --kk-shadow-lg: 0 12px 48px rgba(11,29,53,.10);
  --kk-transition: .22s cubic-bezier(.4,0,.2,1);
}

/* ==================== BASE ==================== */
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background: #eef1f6; color: var(--kk-gray-800);
  overflow-x: hidden;
}
::selection { background: var(--kk-orange-soft); color: var(--kk-night); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* ==================== HEADER — NAVY BLUE ==================== */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--kk-night);
  border-bottom: 1px solid rgba(243,155,29,.15);
}
.header-content {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 78px; padding: 0; gap: 1.5rem;
}
.logo { display: flex; align-items: center; flex-shrink: 0; }
.brand-logo, .site-brand-logo {
  height: auto !important;
  max-height: 55px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}
/* Nav */
.desktop-nav { display: flex; align-items: center; gap: .2rem; }
.desktop-nav .nav-link-custom {
  display: inline-flex; align-items: center;
  padding: .35rem .55rem; border-radius: var(--kk-radius);
  font-weight: 600; font-size: .82rem; color: #cbd5e1;
  transition: all var(--kk-transition); white-space: nowrap;
}
@media (max-width: 1200px) {
  .desktop-nav .nav-link-custom { padding: .3rem .45rem; font-size: .78rem; }
  .header-content { gap: .8rem; }
}
.desktop-nav .nav-link-custom:hover { color: #fff; background: rgba(255,255,255,.1); }
.desktop-nav .nav-link-custom.active { color: var(--kk-orange) !important; background: rgba(243,155,29,.15); font-weight: 700; }
/* Right side */
.header-right { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.lang-form { margin: 0; display: flex; }
.lang-select {
  height: 38px; min-width: 68px; padding: 0 26px 0 10px;
  border: 1px solid rgba(243,155,29,.2); border-radius: var(--kk-radius);
  background: var(--kk-night-light); color: #cbd5e1;
  font-weight: 600; font-size: .82rem;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f39b1d' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  cursor: pointer; transition: all var(--kk-transition);
}
.lang-select:focus { outline: none; border-color: var(--kk-orange); }
/* Hamburger */
.hamburger {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  width: 40px; height: 40px; gap: 5px;
  border: 1px solid rgba(243,155,29,.2); border-radius: var(--kk-radius);
  background: var(--kk-night-light); cursor: pointer; padding: 10px;
  transition: all var(--kk-transition);
}
.hamburger span { display: block; width: 20px; height: 2px; background: #cbd5e1; border-radius: 2px; transition: all var(--kk-transition); }
.hamburger:hover { border-color: var(--kk-orange); }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==================== MOBILE DROPDOWN ==================== */
.nav-dropdown {
  max-height: 0; overflow: hidden; background: var(--kk-night-light);
  border-top: 1px solid rgba(243,155,29,.12);
  transition: max-height .35s cubic-bezier(.4,0,.2,1);
}
.nav-dropdown.open { max-height: 700px; }
.nav-dropdown-inner { padding: 0 1.5rem; display: flex; flex-direction: column; gap: .25rem; }
.nav-dropdown.open .nav-dropdown-inner { padding: 1rem 1.5rem; }
.nav-dropdown-link {
  display: block; padding: .75rem 1rem; border-radius: var(--kk-radius);
  font-weight: 600; font-size: .95rem; color: #cbd5e1;
  transition: all var(--kk-transition);
}
.nav-dropdown-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-dropdown-link.active { background: var(--kk-orange); color: var(--kk-night); font-weight: 700; }
.dropdown-lang { padding-top: .75rem; margin-top: .5rem; border-top: 1px solid rgba(255,255,255,.08); }

/* ==================== BUTTONS ==================== */
.btn-kk {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.4rem; border-radius: var(--kk-radius);
  font-weight: 700; font-size: .93rem; border: 2px solid transparent;
  transition: all var(--kk-transition); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn-kk-primary { background: var(--kk-orange); color: var(--kk-night); border-color: var(--kk-orange); box-shadow: 0 4px 16px rgba(243,155,29,.3); }
.btn-kk-primary:hover { background: var(--kk-orange-hover); border-color: var(--kk-orange-hover); box-shadow: 0 8px 24px rgba(243,155,29,.4); transform: translateY(-1px); color: var(--kk-night); }
.btn-kk-outline { background: transparent; color: var(--kk-night); border-color: var(--kk-gray-300); }
.btn-kk-outline:hover { border-color: var(--kk-orange); color: var(--kk-orange); background: var(--kk-orange-light); }
.btn-kk-lg { padding: .9rem 1.8rem; font-size: 1rem; border-radius: var(--kk-radius-lg); }
.btn-kk-sm { padding: .45rem .9rem; font-size: .82rem; }

/* ==================== HERO ==================== */
.hero-home { background: linear-gradient(180deg, var(--kk-night) 0%, #162d4a 50%, var(--kk-orange-light) 100%); position: relative; overflow: hidden; }
.hero-home::before { content: ''; position: absolute; top: -15%; right: -8%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(243,155,29,.08), transparent 70%); border-radius: 50%; pointer-events: none; }
.hero-img-3d { border-radius: 1.5rem; box-shadow: 0 28px 80px rgba(11,29,53,.16); border: 4px solid #fff; transform: perspective(1000px) rotateY(-3deg) rotateX(2deg); transition: transform .5s ease; }
.hero-img-3d:hover { transform: perspective(1000px) rotateY(-1deg) rotateX(1deg); }
.hero-eyebrow { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; background: var(--kk-orange-light); color: var(--kk-orange); border-radius: 999px; font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.hero-eyebrow::before { content: ''; width: 7px; height: 7px; background: var(--kk-orange); border-radius: 50%; animation: kk-pulse 2s infinite; }
@keyframes kk-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.5)} }
.hero-stats .stat-value { font-size: 2rem; font-weight: 900; color: var(--kk-night); line-height: 1; }
.hero-stats .stat-label { font-size: .82rem; color: var(--kk-gray-500); margin-top: .15rem; }

/* ==================== SECTIONS ==================== */
.section-label-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; background: var(--kk-orange-light); color: var(--kk-orange); border-radius: 999px; font-weight: 700; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .6rem; }
.heading-line { display: inline-block; width: 44px; height: 3px; background: var(--kk-orange); border-radius: 2px; margin-bottom: 1.25rem; }

/* ==================== CARDS ==================== */
.card-feature { background: #fff; border: 1px solid var(--kk-gray-200); border-radius: var(--kk-radius-xl); padding: 2rem; transition: all .3s ease; position: relative; overflow: hidden; }
.card-feature::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--kk-orange), var(--kk-night-lighter)); opacity: 0; transition: opacity .3s ease; }
.card-feature:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(11,29,53,.12); border-color: transparent; }
.card-feature:hover::before { opacity: 1; }
.card-feature-icon { width: 50px; height: 50px; border-radius: .85rem; background: var(--kk-orange-light); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--kk-orange); margin-bottom: 1rem; }
.card-feature img { width: 100%; height: 190px; object-fit: cover; border-radius: .85rem; margin-bottom: .85rem; }

/* ==================== SPOTLIGHT ==================== */
.spotlight-section { background: linear-gradient(135deg, var(--kk-night), var(--kk-night-light)); border-radius: var(--kk-radius-2xl); padding: 3rem; position: relative; overflow: hidden; color: #fff; }
.spotlight-section::before { content: ''; position: absolute; top: -35%; right: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(243,155,29,.12), transparent 70%); border-radius: 50%; }
.spotlight-section h2, .spotlight-section h3 { color: #fff; }
.spotlight-section p { color: rgba(255,255,255,.7); }
.spotlight-section .btn-kk-primary { background: #fff; color: var(--kk-night); border-color: #fff; }
.spotlight-section .btn-kk-primary:hover { background: var(--kk-orange); color: #fff; border-color: var(--kk-orange); }
.spotlight-link-card { display: block; padding: .75rem 1rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: .75rem; color: rgba(255,255,255,.85); font-weight: 600; font-size: .88rem; transition: all var(--kk-transition); }
.spotlight-link-card:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }

/* ==================== WHY + CTA ==================== */
.card-why { background: #fff; border: 1px solid var(--kk-gray-200); border-radius: var(--kk-radius-xl); padding: 1.75rem; text-align: center; transition: all .3s ease; }
.card-why:hover { transform: translateY(-3px); box-shadow: var(--kk-shadow-lg); border-color: var(--kk-orange-soft); }
.card-why-icon { width: 48px; height: 48px; margin: 0 auto .85rem; border-radius: .75rem; background: linear-gradient(135deg, var(--kk-orange-light), #eef3ff); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.cta-banner { background: linear-gradient(135deg, var(--kk-orange), var(--kk-orange-hover)); border-radius: var(--kk-radius-2xl); padding: 3rem; text-align: center; position: relative; overflow: hidden; }
.cta-banner::before { content: ''; position: absolute; bottom: -3rem; right: -2rem; width: 240px; height: 240px; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); border-radius: 50%; }
.cta-banner h2, .cta-banner p { color: var(--kk-night); }
.cta-banner .btn-kk-outline { color: var(--kk-night); border-color: var(--kk-night); }
.cta-banner .btn-kk-outline:hover { background: var(--kk-night); color: #fff; }

/* ==================== INNER PAGES ==================== */
.page-hero-img { border-radius: 1.5rem; box-shadow: 0 24px 56px rgba(11,29,53,.12); border: 4px solid #fff; }
.page-rich-content { font-size: 1.03rem; line-height: 1.8; }
.page-rich-content h2 { font-size: 1.45rem; color: var(--kk-night); margin: 1.75rem 0 .6rem; font-weight: 800; }
.page-rich-content h3 { font-size: 1.15rem; color: var(--kk-night-light); margin: 1.25rem 0 .5rem; font-weight: 700; }
.page-rich-content p { margin-bottom: .85rem; color: var(--kk-gray-700); }
.page-rich-content ul, .page-rich-content ol { margin: 0 0 1rem 1.5rem; }
.page-rich-content li { margin-bottom: .4rem; color: var(--kk-gray-700); }

/* ==================== CONTACT ==================== */
.contact-action-card { background: #fff; border: 1px solid var(--kk-gray-200); border-radius: var(--kk-radius-xl); padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 1rem; text-decoration: none; color: inherit; transition: all .3s ease; }
.contact-action-card:hover { box-shadow: var(--kk-shadow-lg); transform: translateY(-2px); border-color: var(--kk-orange-soft); }
.contact-action-icon { width: 44px; height: 44px; border-radius: .75rem; background: var(--kk-orange-light); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--kk-orange); flex-shrink: 0; }

/* ==================== FORMS ==================== */
.form-control-kk { width: 100%; padding: .7rem .9rem; border: 1px solid var(--kk-gray-200); border-radius: .7rem; background: var(--kk-gray-50); font-size: .93rem; color: var(--kk-gray-800); transition: all var(--kk-transition); }
.form-control-kk:focus { outline: none; border-color: var(--kk-orange); background: #fff; box-shadow: 0 0 0 3px rgba(243,155,29,.1); }
.form-card { background: #fff; border: 1px solid var(--kk-gray-200); border-radius: var(--kk-radius-xl); padding: 1.75rem; box-shadow: var(--kk-shadow); }
.success-panel { background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: .75rem; padding: 1rem; color: #065f46; }
.error-panel { background: #fef2f2; border: 1px solid #fecaca; border-radius: .75rem; padding: 1rem; color: #991b1b; }
.register-meta-badge { background: #fff; border: 1px solid var(--kk-gray-200); border-radius: .85rem; padding: 1rem; text-align: center; }

/* ==================== FOOTER ==================== */
.site-footer { background: var(--kk-night); color: #fff; margin-top: 2.5rem; }
.footer-logo, .site-footer-logo { height: auto !important; max-height: 60px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; }
.site-footer a { color: rgba(255,255,255,.6); transition: color var(--kk-transition); text-decoration: none; }
.site-footer a:hover { color: var(--kk-orange); }
.footer-heading { color: #fff; font-size: .88rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.footer-divider { border-color: rgba(255,255,255,.08); }

/* ==================== ADMIN ==================== */
.admin-body { background: var(--kk-gray-50); min-height: 100vh; }
.admin-layout { display: flex; min-height: calc(100vh - 78px); }
.admin-sidebar { width: 250px; flex-shrink: 0; background: var(--kk-night); color: #fff; padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 78px; height: calc(100vh - 78px); overflow-y: auto; }
.admin-sidebar-brand { font-size: 1rem; font-weight: 800; color: var(--kk-orange); padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.admin-nav { display: flex; flex-direction: column; gap: .3rem; }
.admin-nav a { display: flex; align-items: center; gap: .65rem; padding: .7rem .9rem; border-radius: .65rem; font-weight: 600; font-size: .9rem; color: rgba(255,255,255,.65); transition: all var(--kk-transition); }
.admin-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-nav a.active { background: var(--kk-orange); color: var(--kk-night); font-weight: 700; }
.admin-nav-icon { font-size: 1.1rem; width: 22px; text-align: center; }
.admin-main { flex: 1; padding: 1.5rem 2rem; max-width: calc(100vw - 250px); overflow-x: hidden; }
.admin-card { background: #fff; border: 1px solid var(--kk-gray-200); border-radius: var(--kk-radius-xl); padding: 1.5rem; box-shadow: var(--kk-shadow); margin-bottom: 1.25rem; }
.admin-card-header { margin-bottom: 1rem; }
.admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.admin-stat-card { background: #fff; border: 1px solid var(--kk-gray-200); border-radius: var(--kk-radius-lg); padding: 1.25rem; transition: all .3s ease; position: relative; overflow: hidden; }
.admin-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--kk-orange), var(--kk-night-lighter)); }
.admin-stat-card:hover { box-shadow: var(--kk-shadow-lg); transform: translateY(-2px); }
.admin-stat-value { font-size: 2rem; font-weight: 900; color: var(--kk-night); line-height: 1; }
.admin-stat-label { font-size: .8rem; color: var(--kk-gray-500); text-transform: uppercase; letter-spacing: .04em; margin-top: .25rem; }
.admin-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-table th { text-align: left; padding: .65rem .75rem; border-bottom: 2px solid var(--kk-gray-200); font-size: .78rem; color: var(--kk-gray-500); text-transform: uppercase; letter-spacing: .04em; }
.admin-table td { padding: .6rem .75rem; border-bottom: 1px solid var(--kk-gray-100); color: var(--kk-gray-700); }
.admin-table tr:hover td { background: var(--kk-gray-50); }
.admin-badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.admin-badge-success { background: #ecfdf5; color: #065f46; }
.admin-badge-warning { background: var(--kk-orange-light); color: var(--kk-orange); }
.admin-badge-info { background: #eff6ff; color: var(--kk-night-lighter); }

/* ==================== ADMIN COMPAT (old classes) ==================== */
.card, .contact-form { background: #fff; border: 1px solid var(--kk-gray-200); border-radius: var(--kk-radius-xl); padding: 1.5rem; box-shadow: var(--kk-shadow); margin-bottom: 1.25rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid .full { grid-column: 1/-1; }
.form-grid label { font-weight: 600; font-size: .85rem; color: var(--kk-gray-700); display: block; margin-bottom: .25rem; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; padding: .65rem .8rem; border: 1px solid var(--kk-gray-200); border-radius: .65rem; font-size: .9rem; background: var(--kk-gray-50); color: var(--kk-gray-800); }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { outline: none; border-color: var(--kk-orange); box-shadow: 0 0 0 3px rgba(243,155,29,.1); }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: .65rem 1.2rem; border-radius: .65rem; font-weight: 700; font-size: .9rem; border: 2px solid var(--kk-gray-200); background: #fff; color: var(--kk-gray-700); cursor: pointer; text-decoration: none; transition: all var(--kk-transition); }
.btn:hover { border-color: var(--kk-orange); color: var(--kk-orange); background: var(--kk-orange-light); }
.btn-primary { background: var(--kk-orange); color: var(--kk-night); border-color: var(--kk-orange); }
.btn-primary:hover { background: var(--kk-orange-hover); border-color: var(--kk-orange-hover); color: var(--kk-night); }
.btn-small { padding: .4rem .8rem; font-size: .8rem; }
.media-preview { display: block; max-width: 100%; border-radius: .75rem; border: 1px solid var(--kk-gray-200); object-fit: contain; margin: .5rem 0; background: var(--kk-gray-50); padding: 8px; }
.media-preview-logo { height: 80px; }
.media-preview-icon { height: 60px; }
.media-preview-hero { height: 120px; }
.media-placeholder { display: flex; align-items: center; justify-content: center; color: var(--kk-gray-400); font-weight: 600; background: var(--kk-gray-50); height: 80px; }
.muted-meta { font-size: .82rem; color: var(--kk-gray-500); }
.plan-visibility-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem; }
.plan-visibility-item { display: flex; align-items: flex-start; gap: .6rem; padding: .8rem; border: 1px solid var(--kk-gray-200); border-radius: .75rem; background: #fff; cursor: pointer; }
.plan-visibility-item input[type='checkbox'] { width: auto; margin-top: .2rem; accent-color: var(--kk-orange); }
.soft-card { background: var(--kk-gray-50); border-style: dashed; box-shadow: none; }
.page-editor-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .75rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.inbox-card { display: flex; flex-direction: column; gap: .5rem; }
.admin-page-form { margin-top: 1rem; }
.eyebrow { display: inline-block; padding: .2rem .75rem; background: var(--kk-orange-light); color: var(--kk-orange); border-radius: 999px; font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 992px) {
  .desktop-nav { display: none !important; }
  .hamburger { display: flex !important; }
  .header-content { min-height: 64px; }
  .brand-logo, .site-brand-logo { max-height: 40px !important; }
}
@media (min-width: 993px) { .nav-dropdown { display: none !important; } }
@media (max-width: 900px) {
  .admin-layout { flex-direction: column; }
  .admin-sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; gap: .5rem; padding: .75rem 1rem; }
  .admin-sidebar-brand { display: none; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; gap: .25rem; }
  .admin-nav a { padding: .45rem .75rem; font-size: .82rem; }
  .admin-main { max-width: 100%; padding: 1rem; }
  .admin-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .spotlight-section { padding: 1.75rem; border-radius: 1.5rem; }
  .cta-banner { padding: 2rem; border-radius: 1.5rem; }
  .footer-logo, .site-footer-logo { max-height: 40px !important; }
}

/* ==================== ANIMATIONS ==================== */
@keyframes kk-fade-up { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:translateY(0) } }
.kk-animate { animation: kk-fade-up .6s ease forwards; }
.kk-animate-d1 { animation-delay: .1s; opacity: 0; }
.kk-animate-d2 { animation-delay: .2s; opacity: 0; }
.kk-animate-d3 { animation-delay: .3s; opacity: 0; }

/* ==================== UTILITY ==================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.no-scroll { overflow: hidden !important; }
.text-kk-orange { color: var(--kk-orange) !important; }
.text-kk-night { color: var(--kk-night) !important; }
.btn-kk-white { background: #fff; color: var(--kk-night); border-color: #fff; box-shadow: 0 4px 16px rgba(255,255,255,.25); }
.btn-kk-white:hover { background: var(--kk-orange); color: #fff; border-color: var(--kk-orange); transform: translateY(-1px); }
.border-dashed { border-style: dashed !important; }

/* ==================== PRICING SIMULATOR ==================== */
.simulator-section { background: linear-gradient(135deg, var(--kk-night), var(--kk-night-lighter)); border-radius: var(--kk-radius-2xl); padding: 2.5rem; color: #fff; position: relative; overflow: hidden; }
.simulator-section::before { content: ''; position: absolute; top: -20%; right: -5%; width: 350px; height: 350px; background: radial-gradient(circle, rgba(243,155,29,.10), transparent 70%); border-radius: 50%; pointer-events: none; }
.simulator-section h2, .simulator-section h3, .simulator-section label { color: #fff; }
.simulator-section .text-muted-sim { color: rgba(255,255,255,.55); }
.simulator-plan-select { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem; }
.simulator-plan-option { position: relative; }
.simulator-plan-option input[type='radio'] { position: absolute; opacity: 0; width: 0; height: 0; }
.simulator-plan-option label { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .85rem .6rem; background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.10); border-radius: var(--kk-radius-lg); cursor: pointer; transition: all var(--kk-transition); text-align: center; color: rgba(255,255,255,.7); font-weight: 600; font-size: .88rem; }
.simulator-plan-option label:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); }
.simulator-plan-option input:checked + label { background: rgba(243,155,29,.18); border-color: var(--kk-orange); color: var(--kk-orange); }
.simulator-plan-option .plan-price-tag { font-size: 1.1rem; font-weight: 800; }
.simulator-plan-option .plan-trial-tag { font-size: .78rem; opacity: .7; }
.simulator-slider-wrap { position: relative; }
.simulator-slider { width: 100%; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 4px; background: rgba(255,255,255,.15); outline: none; }
.simulator-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--kk-orange); cursor: pointer; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.simulator-slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--kk-orange); cursor: pointer; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.simulator-result { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: var(--kk-radius-xl); padding: 1.5rem; text-align: center; }
.simulator-result .total-amount { font-size: 2.4rem; font-weight: 900; color: var(--kk-orange); line-height: 1; }
.simulator-result .per-month { font-size: .9rem; color: rgba(255,255,255,.5); margin-top: .2rem; }
.simulator-result .savings-badge { display: inline-block; padding: .25rem .7rem; background: rgba(243,155,29,.2); color: var(--kk-orange); border-radius: 999px; font-weight: 700; font-size: .82rem; margin-top: .5rem; }
.pricing-navy-card { background: var(--kk-night); color: #fff; border: 1px solid rgba(255,255,255,.08); border-radius: var(--kk-radius-xl); padding: 2rem; transition: all .3s ease; position: relative; overflow: hidden; }
.pricing-navy-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--kk-orange), var(--kk-orange-hover)); }
.pricing-navy-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(11,29,53,.25); }
.pricing-navy-card .plan-icon-circle { width: 56px; height: 56px; border-radius: 50%; background: rgba(243,155,29,.15); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1rem; }
.pricing-navy-card h4 { color: #fff !important; }
.pricing-navy-card .price-value { font-size: 1.8rem; font-weight: 900; color: var(--kk-orange); }
.pricing-navy-card .price-unit { font-size: .85rem; color: rgba(255,255,255,.5); }
.pricing-navy-card p { color: rgba(255,255,255,.6); }
.pricing-navy-card .btn-kk-primary { background: var(--kk-orange); color: var(--kk-night); }
.pricing-navy-card .btn-kk-primary:hover { background: #fff; color: var(--kk-night); }
.navy-bg-section { background: linear-gradient(180deg, var(--kk-night) 0%, #0d2340 50%, #122b4a 100%); color: #fff; }
.navy-bg-section h1, .navy-bg-section h2 { color: #fff; }
.navy-bg-section p { color: rgba(255,255,255,.65); }
.navy-bg-section .section-label-pill { background: rgba(243,155,29,.15); color: var(--kk-orange); }