/* ===== RESET & BASE ===== */
*,
*::before,
*::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

:root {
 --bg: #080f0b;
 --bg2: #0d1a12;
 --bg3: #0a1510;
 --card: #0f1f16;
 --border: rgba(29, 184, 122, 0.12);
 --border2: rgba(255, 255, 255, 0.07);
 --green: #1db87a;
 --green-dim: #16935f;
 --green-glow: rgba(29, 184, 122, 0.18);
 --text: #eef2ee;
 --text-mid: #8fa98f;
 --text-light: #4d6b55;
 --navy: #0d1117;
 --white: #ffffff;
 /* Light section vars */
 --light-bg: #f4f6f2;
 --light-bg2: #eef1ec;
 --light-card: #ffffff;
 --light-text: #1a2b1f;
 --light-mid: #5a7060;
 --light-border: #dde8e0;
 --font-serif: 'Cormorant Garamond', Georgia, serif;
 --font-sans: 'DM Sans', sans-serif;
 --radius: 14px;
 --radius-lg: 20px;
 --shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
 --shadow-light: 0 4px 24px rgba(0, 0, 0, 0.08);
}

html {
 scroll-behavior: smooth;
}

body {
 background: var(--bg);
 color: var(--text);
 font-family: var(--font-sans);
 font-size: 15px;
 line-height: 1.65;
 overflow-x: hidden;
}

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

ul {
 list-style: none;
}

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

/* ===== BUTTONS ===== */
.btn-primary {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 background: var(--green);
 color: #040d07;
 font-family: var(--font-sans);
 font-weight: 600;
 font-size: 14px;
 padding: 10px 22px;
 border-radius: 50px;
 transition: all 0.2s ease;
 white-space: nowrap;
}

.btn-primary:hover {
 background: #22d98e;
 transform: translateY(-1px);
 box-shadow: 0 6px 24px rgba(29, 184, 122, 0.35);
}

.btn-ghost {
 display: inline-flex;
 align-items: center;
 color: var(--text-mid);
 font-size: 14px;
 font-weight: 500;
 padding: 10px 18px;
 border-radius: 50px;
 transition: color 0.2s;
}

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

.btn-outline {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 border: 1px solid var(--border);
 color: var(--text);
 font-family: var(--font-sans);
 font-weight: 500;
 font-size: 14px;
 padding: 10px 22px;
 border-radius: 50px;
 transition: all 0.2s;
}

.btn-outline:hover {
 border-color: var(--green);
 color: var(--green);
}

.btn-lg {
 padding: 14px 30px;
 font-size: 15px;
}

.btn-full {
 width: 100%;
 justify-content: center;
 margin-top: 24px;
}

/* ===== NAV ===== */
.nav {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 100;
 background: rgba(8, 15, 11, 0.88);
 backdrop-filter: blur(18px);
 border-bottom: 1px solid transparent;
 transition: border-color 0.3s;
}

.nav.scrolled {
 border-color: var(--border);
}

.nav-inner {
 max-width: 1200px;
 margin: 0 auto;
 display: flex;
 align-items: center;
 gap: 32px;
 padding: 0 24px;
 height: 64px;
}

.nav-logo {
 display: flex;
 align-items: center;
 gap: 10px;
 font-family: var(--font-serif);
 font-size: 30px;
 font-weight: 700;
 color: #ffffff;
 letter-spacing: 0.02em;
}

.nav-logo-icon {
 width: 36px;
 height: 36px;
 background: var(--green);
 color: #040d07;
 border-radius: 9px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-sans);
 font-size: 12px;
 font-weight: 700;
}

.nav-links {
 display: flex;
 align-items: center;
 gap: 4px;
 margin-left: auto;
}

.nav-links a {
 color: var(--text-mid);
 font-size: 14px;
 font-weight: 500;
 padding: 6px 14px;
 border-radius: 50px;
 transition: color 0.2s, background 0.2s;
}

.nav-links a:hover {
 color: var(--text);
 background: rgba(255, 255, 255, 0.04);
}

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

.nav-hamburger {
 display: none;
 flex-direction: column;
 gap: 5px;
 background: none;
 border: none;
 cursor: pointer;
 padding: 4px;
 margin-left: auto;
}

.nav-hamburger span {
 display: block;
 width: 22px;
 height: 2px;
 background: var(--text);
 border-radius: 2px;
 transition: all 0.3s;
}

.nav-hamburger.open span:nth-child(1) {
 transform: translateY(7px) rotate(45deg);
}

.nav-hamburger.open span:nth-child(2) {
 opacity: 0;
}

.nav-hamburger.open span:nth-child(3) {
 transform: translateY(-7px) rotate(-45deg);
}

.nav-mobile {
 display: none;
 flex-direction: column;
 gap: 4px;
 padding: 12px 24px 20px;
 border-top: 1px solid var(--border);
}

.nav-mobile.open {
 display: flex;
}

.nav-mobile a {
 color: var(--text-mid);
 font-size: 15px;
 padding: 10px 0;
 border-bottom: 1px solid var(--border2);
 transition: color 0.2s;
}

.nav-mobile a:last-child {
 border-bottom: none;
 margin-top: 8px;
 text-align: center;
}

.nav-mobile a:hover {
 color: var(--text);
}

/* ===== SECTION COMMON ===== */
.section-inner {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 24px;
}

.section-label {
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.14em;
 color: var(--green);
 margin-bottom: 12px;
}

.section-title {
 font-family: var(--font-serif);
 font-size: clamp(32px, 5vw, 52px);
 font-weight: 600;
 line-height: 1.15;
 color: var(--white);
 margin-bottom: 16px;
}

.section-sub {
 color: var(--text-mid);
 font-size: 16px;
 max-width: 520px;
 margin-bottom: 48px;
}

/* Light variants */
.light .section-label {
 color: var(--green-dim);
}

.light .section-title {
 color: var(--light-text);
}

.light .section-sub {
 color: var(--light-mid);
}

/* ===== HERO (dark) ===== */
.hero {
 min-height: 100vh;
 display: flex;
 align-items: center;
 position: relative;
 overflow: hidden;
 padding: 100px 0 80px;
}

.hero-bg {
 position: absolute;
 inset: 0;
 pointer-events: none;
}

.hero-orb {
 position: absolute;
 border-radius: 50%;
 filter: blur(80px);
 opacity: 0.25;
}

.orb1 {
 width: 500px;
 height: 500px;
 background: radial-gradient(circle, #1db87a, transparent);
 top: -100px;
 left: -100px;
}

.orb2 {
 width: 400px;
 height: 400px;
 background: radial-gradient(circle, #0d6b45, transparent);
 bottom: -80px;
 right: 200px;
}

.hero-grid {
 position: absolute;
 inset: 0;
 background-image: linear-gradient(rgba(29, 184, 122, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 184, 122, 0.04) 1px, transparent 1px);
 background-size: 60px 60px;
 mask-image: radial-gradient(ellipse at 30% 40%, black 20%, transparent 70%);
}

.hero-inner {
 position: relative;
 z-index: 2;
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 24px;
 flex: 1;
}

.hero-badge {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 border: 1px solid var(--border);
 border-radius: 50px;
 padding: 6px 14px;
 font-size: 12px;
 font-weight: 500;
 color: var(--green);
 margin-bottom: 28px;
 background: rgba(29, 184, 122, 0.06);
}

.badge-dot {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--green);
 animation: pulse 2s infinite;
}

@keyframes pulse {

 0%,
 100% {
  opacity: 1;
  transform: scale(1);
 }

 50% {
  opacity: 0.5;
  transform: scale(0.8);
 }
}

.hero-headline {
 font-family: var(--font-serif);
 font-size: clamp(52px, 8vw, 96px);
 font-weight: 700;
 line-height: 1.05;
 color: var(--white);
 margin-bottom: 24px;
}

.hero-headline em {
 font-style: italic;
 color: var(--green);
}

.hero-sub {
 font-size: 17px;
 color: var(--text-mid);
 max-width: 500px;
 margin-bottom: 36px;
 line-height: 1.7;
}

.hero-cta {
 display: flex;
 align-items: center;
 gap: 14px;
 flex-wrap: wrap;
 margin-bottom: 52px;
}

.hero-stats {
 display: flex;
 align-items: center;
 gap: 28px;
 flex-wrap: wrap;
}

.stat {
 display: flex;
 flex-direction: column;
 gap: 2px;
}

.stat-num {
 font-family: var(--font-serif);
 font-size: 22px;
 font-weight: 600;
 color: var(--white);
}

.stat-label {
 font-size: 12px;
 color: var(--text-light);
}

.stat-div {
 width: 1px;
 height: 32px;
 background: var(--border);
}

/* Hero mockup */
.hero-mockup {
 position: absolute;
 right: 24px;
 top: 50%;
 transform: translateY(-50%);
 display: flex;
 flex-direction: column;
 gap: 14px;
 z-index: 2;
}

.mockup-card {
 background: var(--card);
 border: 1px solid var(--border);
 border-radius: var(--radius-lg);
 padding: 22px 26px;
 width: 320px;
 box-shadow: var(--shadow);
 animation: floatCard 4s ease-in-out infinite;
}

.card2 {
 margin-left: 40px;
 animation-delay: -2s;
 padding: 18px 22px;
}

@keyframes floatCard {

 0%,
 100% {
  transform: translateY(0);
 }

 50% {
  transform: translateY(-8px);
 }
}

.mockup-header {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 10px;
 letter-spacing: 0.1em;
 color: var(--text-light);
 margin-bottom: 10px;
}

.mh-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
}

.mh-dot.green {
 background: var(--green);
}

.mh-live {
 margin-left: auto;
 display: flex;
 align-items: center;
 gap: 5px;
 color: var(--green);
 font-size: 10px;
 font-weight: 600;
}

.live-dot {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--green);
 animation: pulse 1.5s infinite;
}

.mockup-amount {
 font-family: var(--font-serif);
 font-size: 32px;
 font-weight: 700;
 color: var(--white);
 line-height: 1;
}

.mockup-sub {
 font-size: 12px;
 color: var(--text-light);
 margin-top: 4px;
 margin-bottom: 16px;
}

.mockup-row {
 display: flex;
 gap: 10px;
}

.mockup-pill {
 flex: 1;
 background: rgba(255, 255, 255, 0.04);
 border-radius: 10px;
 padding: 10px 12px;
 display: flex;
 flex-direction: column;
 gap: 3px;
}

.pill-label {
 font-size: 9px;
 letter-spacing: 0.1em;
 color: var(--text-light);
}

.pill-val {
 font-size: 16px;
 font-weight: 600;
 color: var(--white);
}

.green-val {
 color: var(--green);
}

.mc2-name {
 font-family: var(--font-serif);
 font-size: 18px;
 font-weight: 600;
 color: var(--white);
}

.mc2-resto {
 font-size: 11px;
 color: var(--green);
 margin-top: 2px;
 margin-bottom: 10px;
}

.mc2-amt {
 font-size: 22px;
 font-weight: 700;
 color: var(--white);
 font-family: var(--font-serif);
}

.mc2-status {
 font-size: 10px;
 letter-spacing: 0.1em;
 color: var(--text-light);
 margin-top: 4px;
}

/* ===== FEATURES (LIGHT) ===== */
.features {
 padding: 100px 0;
 background: var(--light-bg);
 border-top: 1px solid var(--light-border);
}

.features-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
 margin-top: 48px;
}

.feat-card {
 background: var(--light-card);
 border: 1px solid var(--light-border);
 border-radius: var(--radius-lg);
 padding: 28px;
 box-shadow: var(--shadow-light);
 transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.feat-card:hover {
 border-color: rgba(29, 184, 122, 0.4);
 transform: translateY(-4px);
 box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.feat-icon {
 width: 44px;
 height: 44px;
 background: rgba(29, 184, 122, 0.1);
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--green-dim);
 margin-bottom: 16px;
}

.feat-card h3 {
 font-size: 16px;
 font-weight: 600;
 color: var(--light-text);
 margin-bottom: 8px;
}

.feat-card p {
 font-size: 14px;
 color: var(--light-mid);
 line-height: 1.6;
}

/* ===== HOW IT WORKS (DARK) ===== */
.how {
 padding: 100px 0;
 background: var(--bg);
 border-top: 1px solid var(--border2);
}

.how-steps {
 display: flex;
 flex-direction: column;
 gap: 0;
 margin-top: 52px;
 max-width: 680px;
}

.how-step {
 display: flex;
 gap: 28px;
 align-items: flex-start;
}

.step-num {
 font-family: var(--font-serif);
 font-size: 48px;
 font-weight: 700;
 color: var(--green);
 opacity: 0.35;
 line-height: 1;
 min-width: 64px;
}

.step-content {
 padding-bottom: 8px;
}

.step-content h3 {
 font-size: 18px;
 font-weight: 600;
 color: var(--white);
 margin-bottom: 6px;
 padding-top: 6px;
}

.step-content p {
 font-size: 14px;
 color: var(--text-mid);
 line-height: 1.65;
}

.how-connector {
 width: 2px;
 height: 40px;
 background: var(--border);
 margin-left: 31px;
}

/* ===== PORTALS (LIGHT) ===== */
.portals {
 padding: 100px 0;
 background: var(--light-bg2);
 border-top: 1px solid var(--light-border);
}

.portals-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
}

.portal-card {
 background: var(--light-card);
 border: 1px solid var(--light-border);
 border-radius: var(--radius-lg);
 padding: 32px;
 display: flex;
 flex-direction: column;
 box-shadow: var(--shadow-light);
 transition: border-color 0.2s, transform 0.2s;
}

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

.portal-restaurant:hover {
 border-color: rgba(29, 184, 122, 0.5);
}

.portal-customer:hover {
 border-color: rgba(99, 130, 255, 0.5);
}

.portal-admin:hover {
 border-color: rgba(255, 160, 80, 0.5);
}

.portal-icon {
 width: 48px;
 height: 48px;
 border-radius: 14px;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 14px;
}

.portal-restaurant .portal-icon {
 background: rgba(29, 184, 122, 0.12);
 color: var(--green-dim);
}

.portal-customer .portal-icon {
 background: rgba(99, 130, 255, 0.12);
 color: #5470e8;
}

.portal-admin .portal-icon {
 background: rgba(255, 160, 80, 0.12);
 color: #d4872a;
}

.portal-tag {
 font-size: 10px;
 font-weight: 600;
 letter-spacing: 0.13em;
 margin-bottom: 8px;
}

.portal-restaurant .portal-tag {
 color: var(--green-dim);
}

.portal-customer .portal-tag {
 color: #5470e8;
}

.portal-admin .portal-tag {
 color: #d4872a;
}

.portal-card h3 {
 font-size: 20px;
 font-weight: 600;
 color: var(--light-text);
 margin-bottom: 8px;
}

.portal-card>p {
 font-size: 13.5px;
 color: var(--light-mid);
 line-height: 1.6;
 margin-bottom: 20px;
}

.portal-features {
 display: flex;
 flex-direction: column;
 gap: 8px;
 flex: 1;
}

.portal-features li {
 font-size: 13px;
 color: var(--light-mid);
 display: flex;
 align-items: center;
 gap: 8px;
}

.portal-features li::before {
 content: '';
 width: 5px;
 height: 5px;
 border-radius: 50%;
 background: #b0c8b8;
 flex-shrink: 0;
}

.btn-portal {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 margin-top: 24px;
 padding: 12px 20px;
 border-radius: 50px;
 font-size: 13.5px;
 font-weight: 600;
 width: 100%;
 transition: all 0.2s;
 border: 1.5px solid var(--light-border);
 color: var(--light-text);
}

.btn-portal:hover {
 background: var(--light-bg);
}

.btn-portal-customer {
 border-color: rgba(84, 112, 232, 0.3);
 color: #5470e8;
}

.btn-portal-customer:hover {
 background: rgba(84, 112, 232, 0.06);
}

.btn-portal-admin {
 border-color: rgba(212, 135, 42, 0.3);
 color: #d4872a;
}

.btn-portal-admin:hover {
 background: rgba(212, 135, 42, 0.06);
}

/* ===== PRICING (DARK) ===== */
.pricing {
 padding: 100px 0;
 background: var(--bg2);
 border-top: 1px solid var(--border2);
}

.pricing-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
}

.price-card {
 background: var(--card);
 border: 1px solid var(--border2);
 border-radius: var(--radius-lg);
 padding: 32px;
 position: relative;
 transition: transform 0.2s;
}

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

.price-featured {
 border-color: var(--green);
 background: linear-gradient(160deg, #0f231a 0%, var(--card) 100%);
}

.price-badge {
 position: absolute;
 top: -1px;
 left: 50%;
 transform: translateX(-50%);
 background: var(--green);
 color: #040d07;
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.1em;
 padding: 4px 14px;
 border-radius: 0 0 10px 10px;
}

.price-plan {
 font-size: 12px;
 font-weight: 600;
 letter-spacing: 0.1em;
 color: var(--text-mid);
 margin-bottom: 12px;
 margin-top: 8px;
}

.price-amt {
 font-family: var(--font-serif);
 font-size: 44px;
 font-weight: 700;
 color: var(--white);
 line-height: 1;
}

.price-featured .price-amt {
 color: var(--green);
}

.price-period {
 font-size: 13px;
 color: var(--text-light);
 margin-top: 4px;
 margin-bottom: 24px;
}

.price-features {
 display: flex;
 flex-direction: column;
 gap: 10px;
}

.price-features li {
 font-size: 13.5px;
 color: var(--text-mid);
 display: flex;
 align-items: center;
 gap: 10px;
}

.price-features li::before {
 content: '✓';
 color: var(--green);
 font-weight: 700;
 font-size: 12px;
}

.price-features li.disabled {
 color: var(--text-light);
}

.price-features li.disabled::before {
 content: '–';
 color: var(--text-light);
}

/* ===== DOWNLOAD (SPLIT: dark left, light right) ===== */
.download {
 padding: 0;
 border-top: 1px solid var(--border2);
 overflow: hidden;
}

.download-split {
 display: flex;
 min-height: 520px;
}

.download-left {
 flex: 1;
 background: var(--bg3);
 padding: 80px 60px 80px 0;
 display: flex;
 align-items: center;
 justify-content: flex-end;
}

.download-left-inner {
 max-width: 440px;
}

.download-left .section-label {
 color: var(--green);
}

.download-left .section-title {
 color: var(--white);
}

.download-left p {
 font-size: 16px;
 color: var(--text-mid);
 margin-bottom: 32px;
}

.download-right {
 flex: 1;
 background: var(--light-bg);
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 60px 40px;
 position: relative;
 overflow: hidden;
}

.download-right::before {
 content: '';
 position: absolute;
 top: -60px;
 right: -60px;
 width: 300px;
 height: 300px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(29, 184, 122, 0.1), transparent);
}

.download-btns {
 display: flex;
 flex-direction: column;
 gap: 14px;
}

.btn-download {
 display: flex;
 align-items: center;
 gap: 14px;
 background: var(--light-card);
 border: 1px solid var(--light-border);
 border-radius: var(--radius);
 padding: 14px 22px;
 transition: all 0.2s;
 color: var(--light-text);
 box-shadow: var(--shadow-light);
}

.btn-download:hover {
 border-color: var(--green);
 transform: translateY(-2px);
 box-shadow: 0 8px 28px rgba(29, 184, 122, 0.15);
}

.btn-download svg {
 color: var(--green-dim);
}

.dl-small {
 display: block;
 font-size: 11px;
 color: var(--light-mid);
}

.dl-big {
 display: block;
 font-size: 15px;
 font-weight: 600;
 color: var(--light-text);
}

/* ===== APP MOCKUP PHONE ===== */
.app-mockup-wrap {
 display: flex;
 gap: 16px;
 align-items: flex-start;
}

.app-phone {
 width: 200px;
 background: #0d1a12;
 border: 1px solid rgba(29, 184, 122, 0.2);
 border-radius: 28px;
 overflow: hidden;
 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 6px rgba(29, 184, 122, 0.06);
 animation: floatCard 4s ease-in-out infinite;
}

.app-phone-2 {
 margin-top: 32px;
 animation-delay: -2s;
 background: #f4f6f2;
 border-color: var(--light-border);
 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

/* Dark phone screen (restaurant dashboard) */
.phone-topbar {
 background: #0a1510;
 padding: 10px 14px 6px;
 display: flex;
 align-items: center;
 gap: 8px;
}

.ptb-logo {
 width: 22px;
 height: 22px;
 background: var(--green);
 border-radius: 6px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 8px;
 font-weight: 700;
 color: #040d07;
}

.ptb-name {
 font-size: 10px;
 font-weight: 600;
 color: var(--text);
}

.ptb-sub {
 font-size: 8px;
 color: var(--green);
}

.phone-hero-card {
 margin: 8px;
 border-radius: 14px;
 padding: 16px;
 background: linear-gradient(135deg, #0f3d26 0%, #0a1f14 100%);
 border: 1px solid rgba(29, 184, 122, 0.2);
}

.phc-label {
 font-size: 8px;
 letter-spacing: 0.1em;
 color: rgba(255, 255, 255, 0.45);
 margin-bottom: 4px;
}

.phc-amt {
 font-family: var(--font-serif);
 font-size: 22px;
 font-weight: 700;
 color: #fff;
 line-height: 1;
}

.phc-sub {
 font-size: 8px;
 color: rgba(255, 255, 255, 0.4);
 margin-top: 2px;
 margin-bottom: 10px;
}

.phc-stats {
 display: flex;
 gap: 6px;
}

.phc-stat {
 flex: 1;
 background: rgba(255, 255, 255, 0.06);
 border-radius: 8px;
 padding: 6px 8px;
}

.phcs-label {
 font-size: 7px;
 letter-spacing: 0.08em;
 color: rgba(255, 255, 255, 0.3);
}

.phcs-val {
 font-size: 12px;
 font-weight: 600;
 color: #fff;
}

.phcs-val.g {
 color: var(--green);
}

.phone-section-label {
 font-size: 8px;
 font-weight: 600;
 color: var(--text-light);
 letter-spacing: 0.1em;
 padding: 8px 14px 4px;
}

.phone-debtor-row {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 8px 14px;
 border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.pdr-avatar {
 width: 24px;
 height: 24px;
 border-radius: 50%;
 background: rgba(29, 184, 122, 0.2);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 9px;
 font-weight: 600;
 color: var(--green);
 flex-shrink: 0;
}

.pdr-info {
 flex: 1;
}

.pdr-name {
 font-size: 10px;
 font-weight: 500;
 color: var(--text);
}

.pdr-tab {
 font-size: 8px;
 color: var(--text-light);
}

.pdr-amt {
 font-size: 10px;
 font-weight: 600;
 color: var(--white);
 font-family: var(--font-serif);
}

.phone-nav-bar {
 display: flex;
 background: #0a1510;
 border-top: 1px solid rgba(255, 255, 255, 0.06);
 padding: 8px 0 10px;
}

.pnb-item {
 flex: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 3px;
 font-size: 7px;
 color: var(--text-light);
 cursor: pointer;
}

.pnb-item.active {
 color: var(--green);
}

.pnb-dot {
 width: 3px;
 height: 3px;
 border-radius: 50%;
 background: var(--green);
 margin-top: 1px;
}

/* Light phone screen (customer view) */
.phone-light-header {
 background: #fff;
 padding: 10px 14px 8px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 border-bottom: 1px solid #eee;
}

.plh-name {
 font-size: 14px;
 font-weight: 600;
 color: var(--light-text);
 font-family: var(--font-serif);
}

.plh-live {
 display: flex;
 align-items: center;
 gap: 4px;
 font-size: 8px;
 color: var(--green-dim);
 font-weight: 600;
}

.plh-live-dot {
 width: 5px;
 height: 5px;
 border-radius: 50%;
 background: var(--green);
 animation: pulse 1.5s infinite;
}

.phone-light-card {
 margin: 8px;
 border-radius: 14px;
 padding: 16px;
 background: linear-gradient(135deg, #0a1f14 0%, #0f3d26 100%);
}

.plc-label {
 font-size: 8px;
 letter-spacing: 0.1em;
 color: rgba(255, 255, 255, 0.45);
 margin-bottom: 4px;
}

.plc-amt {
 font-family: var(--font-serif);
 font-size: 24px;
 font-weight: 700;
 color: #fff;
}

.plc-sub {
 font-size: 8px;
 color: rgba(255, 255, 255, 0.45);
 margin-top: 2px;
 margin-bottom: 10px;
}

.plc-row {
 display: flex;
 gap: 6px;
}

.plc-pill {
 flex: 1;
 background: rgba(255, 255, 255, 0.1);
 border-radius: 8px;
 padding: 6px 8px;
}

.plcp-label {
 font-size: 7px;
 letter-spacing: 0.07em;
 color: rgba(255, 255, 255, 0.45);
}

.plcp-val {
 font-size: 13px;
 font-weight: 600;
 color: #fff;
}

.phone-tab-row {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 10px 14px;
 background: #fff;
 margin: 0 8px 6px;
 border-radius: 10px;
 border: 1px solid #eee;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.ptr-thumb {
 width: 28px;
 height: 28px;
 border-radius: 8px;
 background: linear-gradient(135deg, #1db87a, #0a5c35);
 flex-shrink: 0;
}

.ptr-info {
 flex: 1;
}

.ptr-name {
 font-size: 10px;
 font-weight: 600;
 color: var(--light-text);
}

.ptr-code {
 font-size: 8px;
 color: var(--green-dim);
}

.ptr-amt {
 font-size: 11px;
 font-weight: 700;
 color: var(--light-text);
 font-family: var(--font-serif);
}

.ptr-status {
 font-size: 7px;
 color: #aaa;
}

/* ===== FOOTER ===== */
.footer {
 background: var(--navy);
 border-top: 1px solid var(--border2);
 padding: 60px 0 32px;
}

.footer-inner {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 24px;
}

.footer-top {
 display: flex;
 justify-content: space-between;
 gap: 48px;
 padding-bottom: 48px;
 border-bottom: 1px solid var(--border2);
 flex-wrap: wrap;
}

.footer-brand {
 display: flex;
 align-items: flex-start;
 gap: 12px;
}

.footer-name {
 font-family: var(--font-serif);
 font-size: 32px;
 font-weight: 700;
 color: #ffffff;
 letter-spacing: 0.02em;
 line-height: 1;
}

.footer-tagline {
 font-size: 12px;
 color: var(--text-light);
}

.footer-links {
 display: flex;
 gap: 60px;
 flex-wrap: wrap;
}

.footer-col {
 display: flex;
 flex-direction: column;
 gap: 10px;
}

.footer-col-title {
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.12em;
 color: var(--text-mid);
 margin-bottom: 4px;
}

.footer-col a {
 font-size: 13.5px;
 color: var(--text-light);
 transition: color 0.2s;
}

.footer-col a:hover {
 color: var(--green);
}

.footer-bottom {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding-top: 24px;
 font-size: 12.5px;
 color: var(--text-light);
 flex-wrap: wrap;
 gap: 8px;
}

/* ===== ANIMATIONS ===== */
.fade-in {
 opacity: 0;
 transform: translateY(24px);
 transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
 opacity: 1;
 transform: translateY(0);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
 .hero-mockup {
  display: none;
 }
}

@media (max-width: 900px) {

 .features-grid,
 .portals-grid,
 .pricing-grid {
  grid-template-columns: 1fr 1fr;
 }

 .download-split {
  flex-direction: column;
 }

 .download-left {
  padding: 60px 24px;
  justify-content: flex-start;
 }

 .download-left-inner {
  max-width: 100%;
 }

 .download-right {
  padding: 40px 24px;
 }
}

@media (max-width: 640px) {

 .features-grid,
 .portals-grid,
 .pricing-grid {
  grid-template-columns: 1fr;
 }

 .nav-links,
 .nav-actions {
  display: none;
 }

 .nav-hamburger {
  display: flex;
 }

 .hero {
  padding: 90px 0 60px;
 }

 .hero-cta {
  flex-direction: column;
  align-items: flex-start;
 }

 .how-steps {
  max-width: 100%;
 }

 .footer-links {
  gap: 32px;
 }

 .app-mockup-wrap {
  justify-content: center;
 }

 .app-phone-2 {
  display: none;
 }
}

.features .section-title,
.portals .section-title {
 color: var(--light-text);
}

.portals .section-sub {
 color: var(--light-mid);
}