:root {
  --brand-primary-color: #c1ff00;
  --brand-primary-color-dark: #9ecc00;
  --brand-background-color: #0f0f0f;
  --brand-secondary-background: #1a1a1a;
  --brand-text-color: #f5f5f0;
  --brand-login-background: #0f0f0f;
  --brand-login-container-bg: #1a1a1a;
  --highlight-color: #c1ff00;

  --auth-page-bg: #0f0f0f;
  --auth-page-gradient-mid: #1a1a1a;
  --auth-page-gradient-end: #242418;
  --auth-submit-bg: #c1ff00;
  --auth-focus-color: #c1ff00;
  --auth-link-color: #c8e86a;
  --auth-nav-bg: rgba(15, 15, 15, 0.75);
  --auth-nav-border: rgba(255, 255, 255, 0.08);
  --auth-nav-link-color: #f5f5f0;

  --header-bg: #0f0f0f;
  --header-text-color: #f5f5f0;
  --header-link-bg: rgba(255, 255, 255, 0.08);
  --header-link-hover-bg: #9ecc00;
  --header-btn-hover-text: #0f0f0f;
  --navbar-button-bg: #c1ff00;
  --navbar-button-text: #0f0f0f;
  --footer-bg: #0f0f0f;
}

main {
background: var(--brand-background-color);
}

*,
*::before,
*::after {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
margin: 0;
background: var(--brand-background-color);
color: var(--brand-text-color);
font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}

button,
input,
textarea {
font: inherit;
}

a {
color: inherit;
text-decoration: none;
}

img,
svg {
display: block;
max-width: 100%;
}

.page-shell {
min-height: 100vh;
overflow-x: clip;
}

.page-shell .container,
.site-footer .container {
width: min(calc(100% - 48px), 1280px);
max-width: none;
margin: 0 auto;
padding-left: 0;
padding-right: 0;
}

.glass-card {
background: color-mix(in srgb, var(--brand-secondary-background) 80%, transparent);
backdrop-filter: blur(18px);
border: 1px solid var(--auth-nav-border);
border-radius: 1.75rem;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
}

.site-nav {
position: fixed;
inset: 0 0 auto;
z-index: 50;
padding: 24px 0;
background: var(--brand-background-color);
}

.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}

.brand-lockup {
display: flex;
align-items: center;
gap: 16px;
}

.brand-lockup:hover {
color: var(--brand-primary-color);
text-decoration: none;
}

.brand-mark {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 999px;
background: var(--brand-primary-color);
color: var(--brand-background-color);
font-size: 2rem;
font-weight: 800;
}

.brand-name,
.hero-title,
.section-title,
.contact-title,
.footer-brand,
.plan-name,
.plan-price {
font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
letter-spacing: -0.03em;
text-transform: uppercase;
}

.brand-name {
font-size: 1.9rem;
line-height: 1;
}

.nav-links {
display: flex;
align-items: center;
gap: 32px;
padding: 14px 32px;
}

.nav-links a,
.pill-button,
.section-kicker,
.eyebrow,
.module-subtitle,
.module-index,
.footer-heading,
.plan-period {
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.28em;
text-transform: uppercase;
}

.nav-links a {
transition: color 0.2s ease;
}

.nav-links a:hover,
.footer-links a:hover {
color: var(--brand-primary-color);
}

.nav-actions {
display: flex;
align-items: center;
gap: 16px;
}

.pill-button,
.cta-button,
.plan-button,
.control-button,
.icon-button,
.text-button {
border: 0;
cursor: pointer;
}

.accent-button {
padding: 14px 32px;
border-radius: 999px;
background: var(--brand-primary-color);
color: var(--brand-background-color);
}

.accent-button:hover,
.plan-button:hover,
.control-button:hover,
.icon-button:hover {
transform: translateY(-1px);
}

.icon-button {
position: relative;
display: none;
width: 48px;
height: 48px;
border-radius: 18px;
background: color-mix(in srgb, var(--brand-secondary-background) 80%, transparent);
color: var(--brand-text-color);
border: 1px solid var(--auth-nav-border);
}

.menu-icon {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 1.35rem;
font-weight: 700;
transition: opacity 0.2s ease;
}

.menu-close {
opacity: 0;
}

.icon-button.is-open .menu-open {
opacity: 0;
}

.icon-button.is-open .menu-close {
opacity: 1;
}

.mobile-menu {
position: fixed;
inset: 0;
z-index: 40;
padding: 128px 40px 40px;
background: color-mix(in srgb, var(--brand-background-color) 98%, transparent);
}

.mobile-menu[hidden] {
display: none;
}

.mobile-menu.is-open {
display: block;
}

.mobile-menu-inner {
display: flex;
flex-direction: column;
gap: 40px;
}

.mobile-menu-inner a {
font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
font-size: clamp(3rem, 14vw, 6rem);
line-height: 0.9;
text-transform: uppercase;
}

.hero-section {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
padding: 112px 0 40px;
}

.hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 40px;
align-items: end;
}

.hero-kicker {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}

.kicker-line {
width: 80px;
height: 1px;
background: var(--brand-primary-color);
}

.hero-kicker span,
.section-kicker,
.eyebrow {
color: var(--brand-primary-color);
}

.hero-title {
margin: 0 0 40px;
font-size: clamp(4rem, 15vw, 12rem);
line-height: 0.85;
}

.text-stroke {
color: transparent;
-webkit-text-stroke: 3px var(--brand-primary-color);
}

.hero-description {
max-width: 34rem;
margin: 0 0 48px;
color: color-mix(in srgb, var(--brand-text-color) 60%, transparent);
font-size: 1.125rem;
line-height: 1.7;
}

.hero-actions {
display: flex;
align-items: center;
gap: 32px;
flex-wrap: wrap;
}

.cta-button {
position: relative;
overflow: hidden;
padding: 24px 40px;
background: var(--brand-primary-color);
color: var(--brand-background-color);
font-weight: 900;
letter-spacing: 0.2em;
text-transform: uppercase;
}

.cta-button::after {
content: "";
position: absolute;
inset: 0;
background: #ffffff;
transform: translateY(100%);
transition: transform 0.3s ease;
}

.cta-button span {
position: relative;
z-index: 1;
}

.cta-button:hover::after {
transform: translateY(0);
}

.avatar-group {
display: flex;
align-items: center;
}

.avatar {
display: grid;
place-items: center;
width: 48px;
height: 48px;
margin-left: -12px;
border-radius: 999px;
border: 2px solid var(--brand-background-color);
font-size: 0.7rem;
font-weight: 800;
color: #fff;
overflow: hidden;
}

.avatar:first-child {
margin-left: 0;
}

.avatar-one {
background: linear-gradient(135deg, #5151ff, #aa43f4);
}

.avatar-two {
background: linear-gradient(135deg, #f97316, #ef4444);
}

.avatar-three {
background: linear-gradient(135deg, #0ea5e9, #14b8a6);
}

.avatar-four {
background: linear-gradient(135deg, #eab308, #84cc16);
}

.avatar-count {
background: var(--brand-primary-color);
color: var(--brand-background-color);
}

.hero-visual {
position: relative;
display: block;
}

.hero-media-frame {
position: relative;
width: min(400px, 30vw);
aspect-ratio: 3 / 5;
border-radius: 4rem;
overflow: hidden;
border: 4px inset rgba(0, 0, 0, 0.5);
background:
  radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--brand-primary-color) 30%, transparent), transparent 24%),
  linear-gradient(135deg, #1f1f1f 0%, #0c0c0c 100%);
}

.hero-media-art {
position: absolute;
inset: 0;
background:
  radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.14), transparent 18%),
  linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 45%),
  linear-gradient(145deg, #252525, #050505 70%);
}

.hero-stripe {
position: absolute;
border-radius: 999px;
transform: rotate(-28deg);
}

.hero-stripe-a {
inset: 10% 15% auto auto;
width: 62%;
height: 24%;
background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary-color) 90%, transparent), rgba(255, 255, 255, 0.1));
}

.hero-stripe-b {
inset: 42% auto auto -10%;
width: 95%;
height: 18%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), color-mix(in srgb, var(--brand-primary-color) 65%, transparent));
}

.hero-orb {
position: absolute;
right: 16%;
bottom: 18%;
width: 120px;
height: 120px;
border-radius: 999px;
background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--brand-primary-color) 35%, white), var(--brand-primary-color) 55%, color-mix(in srgb, var(--brand-primary-color) 15%, transparent) 100%);
box-shadow: 0 0 80px color-mix(in srgb, var(--brand-primary-color) 35%, transparent);
}

.hero-media-card {
position: absolute;
right: 40px;
bottom: 40px;
left: 40px;
padding: 24px;
}

.hero-media-copy {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.2;
}

.vertical-rail {
position: absolute;
top: 50%;
right: -80px;
transform: translateY(-50%);
writing-mode: vertical-rl;
text-orientation: mixed;
color: color-mix(in srgb, var(--brand-text-color) 40%, transparent);
font-size: 0.625rem;
font-weight: 800;
letter-spacing: 0.5em;
text-transform: uppercase;
}

.background-grid {
position: absolute;
inset: 0;
opacity: 0.03;
background-image: radial-gradient(circle, white 1px, transparent 1px);
background-size: 40px 40px;
}

.modules-section,
.pricing-section,
.contact-section {
padding: 128px 0;
}

.modules-section,
.contact-section {
background: var(--brand-secondary-background);
}

.contact-section {
border-top: 1px solid var(--auth-nav-border);
}

.section-header {
display: flex;
justify-content: space-between;
align-items: end;
gap: 40px;
margin-bottom: 80px;
}

.section-title {
margin: 0;
font-size: clamp(3rem, 8vw, 5.5rem);
line-height: 0.95;
}

.modules-track {
display: flex;
gap: 32px;
overflow-x: auto;
padding: 16px 16px 40px 16px;
margin: 0 -16px;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
scrollbar-color: var(--brand-primary-color) var(--auth-nav-border);
}

.modules-track::-webkit-scrollbar {
height: 4px;
}

.modules-track::-webkit-scrollbar-track {
background: var(--header-link-bg);
border-radius: 999px;
}

.modules-track::-webkit-scrollbar-thumb {
background: var(--brand-primary-color);
border-radius: 999px;
}

.module-card {
position: relative;
flex: 0 0 320px;
width: 320px;
aspect-ratio: 4 / 5;
border-radius: 3rem;
overflow: hidden;
scroll-snap-align: center;
cursor: pointer;
opacity: 0.4;
filter: grayscale(1);
transition: transform 0.4s ease, opacity 0.4s ease, filter 0.4s ease, box-shadow 0.4s ease;
}

.module-card.is-active {
opacity: 1;
filter: grayscale(0);
box-shadow: 0 0 0 2px var(--brand-primary-color), 0 0 0 10px var(--brand-secondary-background), 0 24px 80px rgba(0, 0, 0, 0.4);
}

.module-card:hover {
transform: translateY(-4px);
}

.module-media,
.module-overlay,
.module-content {
position: absolute;
inset: 0;
}

.module-overlay {
background: linear-gradient(180deg, transparent 30%, rgba(15, 15, 15, 0.16) 55%, rgba(15, 15, 15, 0.95) 100%);
}

.module-content {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 40px;
}

.module-top {
display: flex;
justify-content: space-between;
align-items: start;
}

.module-icon {
display: grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: 1rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.module-icon svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}

.nutrition-icon {
background: #10b981;
}

.fitness-icon {
background: #f97316;
}

.gaming-icon {
background: #6366f1;
}

.sports-icon {
background: #3b82f6;
}

.deals-icon {
background: #f43f5e;
}

.module-index {
color: rgba(255, 255, 255, 0.4);
}

.module-subtitle {
margin-bottom: 8px;
color: var(--brand-primary-color);
}

.module-bottom h3 {
margin: 0 0 16px;
font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
font-size: 2.5rem;
letter-spacing: -0.03em;
}

.module-bottom p {
margin: 0 0 24px;
color: color-mix(in srgb, var(--brand-text-color) 60%, transparent);
font-size: 0.95rem;
line-height: 1.6;
}

.text-button {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 0;
background: transparent;
color: inherit;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.2em;
text-transform: uppercase;
}

.text-button span {
transition: transform 0.2s ease;
}

.text-button:hover span {
transform: translate(2px, -2px);
}

.module-nutrition .module-media {
background-image: url(/brand-assets/appikontent/nutrition.jpg);
background-size: cover;
}

.module-fitness .module-media {
background-image: url(/brand-assets/appikontent/fitness.jpg);
background-size: cover;
}

.module-gaming .module-media {
background-image: url(/brand-assets/appikontent/gaming.jpg);
background-size: cover;
}

.module-sports .module-media {
background-image: url(/brand-assets/appikontent/sports.jpg);
background-size: cover;
}

.module-deals .module-media {
background-image: url(/brand-assets/appikontent/deals.jpg);
background-size: cover;
}

.modules-controls {
display: flex;
align-items: center;
gap: 24px;
max-width: 760px;
margin: 48px auto 0;
}

.control-button {
width: 48px;
height: 48px;
border-radius: 999px;
border: 1px solid var(--auth-nav-border);
background: transparent;
color: #fff;
font-size: 1.2rem;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.control-button:hover:not(:disabled) {
background: var(--brand-primary-color);
color: var(--brand-background-color);
border-color: var(--brand-primary-color);
}

.control-button:disabled {
border-color: var(--auth-nav-border);
color: color-mix(in srgb, var(--brand-text-color) 40%, transparent);
cursor: not-allowed;
}

.progress-shell {
position: relative;
flex: 1;
height: 18px;
}

.progress-shell input {
position: absolute;
inset: 0;
width: 100%;
opacity: 0;
cursor: pointer;
margin: 0;
z-index: 2;
}

.progress-track {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 4px;
transform: translateY(-50%);
border-radius: 999px;
overflow: hidden;
background: var(--header-link-bg);
}

.progress-fill {
width: 0;
height: 100%;
background: var(--brand-primary-color);
}

.pricing-grid,
.contact-grid,
.footer-inner {
display: grid;
gap: 80px;
}

.pricing-grid {
grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
align-items: center;
}

.accent-text {
color: var(--brand-primary-color);
}

.pricing-copy {
max-width: 34rem;
margin: 32px 0 48px;
color: color-mix(in srgb, var(--brand-text-color) 60%, transparent);
font-size: 1.25rem;
line-height: 1.7;
}

.pricing-list {
display: grid;
gap: 24px;
}

.pricing-item {
display: flex;
align-items: center;
gap: 16px;
font-weight: 700;
}

.checkmark {
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 999px;
background: color-mix(in srgb, var(--brand-primary-color) 15%, transparent);
color: var(--brand-primary-color);
font-size: 0.75rem;
font-weight: 900;
}

.plan-shell {
position: relative;
}

.plan-glow {
position: absolute;
inset: -16px;
border-radius: 999px;
background: color-mix(in srgb, var(--brand-primary-color) 15%, transparent);
filter: blur(56px);
}

.plan-card {
position: relative;
padding: 48px;
background: var(--header-link-bg);
border-color: color-mix(in srgb, var(--brand-text-color) 40%, transparent);
}

.plan-header {
display: flex;
justify-content: space-between;
gap: 24px;
margin-bottom: 40px;
}

.plan-name {
font-size: 2.5rem;
}

.plan-price-wrap {
text-align: right;
}

.plan-price {
font-size: 3rem;
line-height: 1;
}

.plan-period {
margin-top: 6px;
color: color-mix(in srgb, var(--brand-text-color) 40%, transparent);
}

.plan-button {
width: 100%;
padding: 24px 20px;
margin-bottom: 24px;
border-radius: 1.5rem;
background: var(--brand-primary-color);
color: var(--brand-background-color);
font-weight: 900;
letter-spacing: 0.2em;
text-transform: uppercase;
}

.plan-note {
color: color-mix(in srgb, var(--brand-text-color) 40%, transparent);
font-size: 0.75rem;
font-weight: 600;
text-align: center;
}

.contact-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.contact-title {
margin: 0 0 40px;
font-size: clamp(3rem, 9vw, 7rem);
line-height: 0.92;
}

.contact-meta-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0px;
}

.contact-detail {
margin-bottom: 8px;
font-size: 1.2rem;
font-weight: 700;
word-break: break-word;
}

.contact-subdetail,
.footer-copy {
color: color-mix(in srgb, var(--brand-text-color) 40%, transparent);
font-size: 0.95rem;
}

.contact-form {
display: grid;
gap: 32px;
}

.contact-form input,
.contact-form textarea {
width: 100%;
padding: 16px 0;
border: 0;
border-bottom: 1px solid var(--auth-nav-border);
background: transparent;
color: var(--brand-text-color);
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
outline: none;
transition: border-color 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
border-color: var(--brand-primary-color);
}

.contact-form textarea {
resize: none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: color-mix(in srgb, var(--brand-text-color) 60%, transparent);
}

.contact-submit {
justify-self: start;
color: var(--brand-primary-color);
}

.site-footer {
padding: 80px 0 0;
border-top: 1px solid var(--auth-nav-border);
background: var(--brand-background-color);
color: var(--brand-text-color);
}

.footer-inner {
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
padding-bottom: 40px;
}

.footer-brand {
margin-bottom: 16px;
font-size: 2.5rem;
}

.footer-copy {
max-width: 18rem;
}

.footer-company {
margin-top: 24px;
max-width: 28rem;
color: color-mix(in srgb, var(--brand-text-color) 55%, transparent);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1.6;
}

.footer-company p {
margin: 0 0 8px;
}

.footer-company-address {
white-space: pre-line;
}

.footer-company a {
color: inherit;
text-decoration: none;
}

.footer-company a:hover {
color: var(--brand-primary-color);
}

.footer-links-grid {
display: grid;
grid-template-columns: repeat(2, minmax(120px, 1fr));
gap: 64px;
}

.footer-heading {
margin-bottom: 24px;
color: var(--brand-primary-color);
}

.footer-links {
display: flex;
flex-direction: column;
gap: 16px;
color: color-mix(in srgb, var(--brand-text-color) 60%, transparent);
font-size: 0.95rem;
font-weight: 700;
}

.footer-bar {
margin-top: 80px;
padding: 40px 0;
border-top: 1px solid var(--auth-nav-border);
color: color-mix(in srgb, var(--brand-text-color) 40%, transparent);
font-size: 0.625rem;
font-weight: 800;
letter-spacing: 0.5em;
text-align: center;
text-transform: uppercase;
}

@media (min-width: 1024px) {
.module-card {
  flex-basis: 400px;
  width: 400px;
}
}

@media (max-width: 1023px) {

.hero-grid,
.pricing-grid,
.contact-grid,
.footer-inner {
  grid-template-columns: 1fr;
}

.hero-visual {
  display: none;
}
}

@media (max-width: 767px) {

.page-shell .container,
.site-footer .container {
  width: min(calc(100% - 32px), 1280px);
}

.brand-name,
.nav-links {
  display: none;
}

.icon-button {
  display: grid;
}

.hero-section,
.modules-section,
.pricing-section,
.contact-section {
  padding-top: 112px;
  padding-bottom: 96px;
}

.section-header {
  margin-bottom: 56px;
}

.hero-actions,
.modules-controls,
.plan-header,
.contact-meta-grid,
.footer-links-grid {
  grid-template-columns: 1fr;
  flex-direction: column;
  align-items: flex-start;
}

.modules-controls {
  gap: 20px;
}

.progress-shell {
  width: 100%;
}

.module-content,
.plan-card {
  padding: 32px;
}

.contact-detail {
  font-size: 1.5rem;
}

.footer-bar {
  letter-spacing: 0.25em;
  line-height: 1.8;
}
}

/* Platform integrations */
.pill-button.accent-button,
.cta-button,
.plan-button {
display: inline-block;
text-align: center;
text-decoration: none;
}

.brand-lockup {
color: inherit;
text-decoration: none;
}

.apk-translator {
position: relative;
z-index: 60;
padding-top: 96px;
}

.contact-page-main {
padding-top: 112px;
}

.contact-intro {
margin-bottom: 32px;
color: color-mix(in srgb, var(--brand-text-color) 60%, transparent);
font-size: 1rem;
line-height: 1.7;
}

.contact-intro p {
margin: 0 0 16px;
}

.contact-pp-section {
color: var(--brand-primary-color);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.contact-form .form-errors,
.contact-form .form-errors p {
margin: 0 0 12px;
color: #ff6b6b;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: normal;
text-transform: none;
}

.contact-form input.error {
border-bottom-color: #ff6b6b;
}

.contact-form input.success {
border-bottom-color: #10b981;
}

.contact-form-submit {
border: 0;
background: transparent;
}

.email_success {
padding: 24px 0;
color: var(--brand-primary-color);
font-size: 1.125rem;
font-weight: 700;
line-height: 1.6;
}

.recaptchapopup {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.85);
}

.recaptchacontainer {
padding: 40px;
border-radius: 1.75rem;
background: var(--brand-secondary-background);
border: 1px solid var(--auth-nav-border);
text-align: center;
}

.recaptchacontainer h3 {
margin: 0 0 16px;
color: var(--brand-text-color);
font-size: 1.125rem;
font-weight: 700;
}

.unsub-panel {
margin-bottom: 40px;
padding: 32px;
border-radius: 1.5rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--auth-nav-border);
}

.unsub-panel label {
display: block;
margin-bottom: 24px;
color: var(--brand-text-color);
font-weight: 700;
}

.unsub-panel select,
.unsub-panel input[type="text"] {
width: 100%;
padding: 16px 0;
border: 0;
border-bottom: 1px solid var(--auth-nav-border);
background: transparent;
color: var(--brand-text-color);
outline: none;
}

.unsub-panel #submitmsisdn {
margin-top: 24px;
padding: 16px 32px;
border: 0;
border-radius: 999px;
background: var(--brand-primary-color);
color: var(--brand-background-color);
font-weight: 900;
letter-spacing: 0.15em;
text-transform: uppercase;
cursor: pointer;
}

.contact-cta-wrap {
margin-top: 40px;
}

/* Page / shell fills use background tokens — not primary accent */
.brand-primary-bg {
background-color: var(--brand-background-color) !important;
}

.product-hub-portal-shell {
background-color: var(--auth-page-bg, var(--brand-background-color)) !important;
background-image: linear-gradient(165deg,
    var(--auth-page-bg) 0%,
    var(--auth-page-gradient-mid) 45%,
    var(--auth-page-gradient-end) 100%) !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
background-size: 100% 100vh !important;
}

.product-hub-portal-shell>main,
.product-hub-portal-shell main.brand-primary-bg {
background-color: transparent !important;
background-image: none !important;
}

button.product-hub-service-btn {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-height: 2.75rem;
border: none;
border-radius: 9999px;
padding: 0.625rem 2rem;
font-size: 0.875rem;
font-weight: 700;
line-height: 1;
text-align: center;
background-color: var(--navbar-button-bg, var(--brand-primary-color)) !important;
color: var(--navbar-button-text, var(--brand-background-color)) !important;
cursor: pointer;
transition: opacity 0.15s ease, background-color 0.15s ease;
}

button.product-hub-service-btn:hover:not(:disabled) {
background-color: var(--brand-primary-color-dark) !important;
opacity: 0.92;
}

button.product-hub-service-btn--disabled {
background-color: #9ca3af !important;
cursor: not-allowed;
opacity: 0.6;
}

.kinetic-auth-page {
background-color: var(--auth-page-bg) !important;
background-image: linear-gradient(165deg,
    var(--auth-page-bg) 0%,
    var(--auth-page-gradient-mid) 45%,
    var(--auth-page-gradient-end) 100%) !important;
}

.brand-secondary-bg {
background-color: var(--brand-secondary-background);
}

.brand-primary-color {
color: var(--brand-primary-color) !important;
}

.brand-primary-border {
border-color: var(--brand-primary-color) !important;
}

.tag-background {
background-color: var(--brand-primary-color);
}

.category-background {
background-color: var(--footer-bg, var(--header-bg));
}

.band-primary-text {
color: var(--brand-text-color);
}

.btn-brand-primary {
background-color: var(--brand-primary-color);
color: var(--brand-background-color);
transition: background-color 0.3s ease;
}

.btn-brand-primary:hover {
background-color: var(--brand-primary-color-dark);
}

.login-img {
background: var(--brand-login-background);
}

.login-container {
background: var(--brand-login-container-bg);
}

/* Header */
.header-bg,
.navbar-brand {
background-color: var(--header-bg, var(--brand-background-color));
}

.header-btn-bg,
.navbar-button-bg {
background-color: var(--navbar-button-bg, var(--header-link-bg));
color: var(--navbar-button-text, var(--header-text-color));
border-radius: 0.5rem;
}

.header-btn-text,
.navbar-button-text {
color: var(--navbar-button-text, var(--header-text-color));
}

.header-btn-hover-text {
color: var(--header-btn-hover-text);
}

.header-icon-bg {
background-color: transparent;
color: var(--header-text-color);
}

.header-icon-bg:hover {
background-color: var(--header-link-hover-bg);
color: var(--header-btn-hover-text);
}

/* Footer / bottom portal nav (Footer/3) */
.footer-bg {
background-color: var(--footer-bg, var(--header-bg)) !important;
}

#portal-nav .footer-bg {
background-color: var(--brand-secondary-background, var(--footer-bg)) !important;
}

#portal-nav .footer-inactive-icon-bg {
background-color: var(--header-link-bg, var(--header-link-bg));
}

.footer-active-icon-bg {
background-color: var(--brand-primary-color);
}

.footer-inactive-icon-bg {
background-color: var(--header-link-bg);
}

.footer-icon-color {
color: var(--brand-text-color);
}

.footer-border-color {
border-color: var(--brand-primary-color);
}

.product-hub-portal-surface,
.kinetic-portal-surface {
min-height: 100vh;
}

.product-hub-portal-surface .policy-portal-section {
color: var(--brand-text-color);
}

.product-hub-portal-surface .policy-portal-section h1 {
color: var(--brand-text-color);
}

.product-hub-portal-surface .policy-body {
--tw-prose-body: var(--brand-text-color);
--tw-prose-headings: var(--brand-text-color);
--tw-prose-links: var(--brand-primary-color);
}

.product-hub-portal-surface .policy-body :is(p, li, td, th, span, div) {
color: var(--brand-text-color) !important;
}

.product-hub-portal-surface .policy-body :is(h1, h2, h3, h4, h5, h6) {
color: var(--brand-text-color) !important;
}

.product-hub-portal-surface .policy-body a {
color: var(--brand-primary-color) !important;
text-decoration: underline !important;
text-underline-offset: 0.15em;
}

.product-hub-portal-surface .policy-body a:hover {
color: color-mix(in srgb, var(--brand-primary-color) 75%, white) !important;
text-decoration: underline !important;
}

.product-hub-portal-surface .contact-field {
background-color: var(--brand-secondary-background);
color: var(--brand-text-color);
}

.product-hub-portal-surface .contact-field::placeholder {
color: color-mix(in srgb, var(--brand-text-color) 60%, transparent);
}