:root {
--bg:#0c0c12;
--card:#0f111a;
--muted:#a5adcb;
--text:#e6e9f2;
--primary:#2b6bff;
--primary-600:#265dde;
--ring:#3b82f6;
--surface:#171a26;
--success:#2ecc71;
--danger:#ff5b6e;
/* Footer width controller */
--footer-width: 860px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
color: var(--text);
background: radial-gradient(1000px 800px at -10% -10%, #1a1f2e 0%, rgba(10,10,16,0) 60%),
            radial-gradient(900px 700px at 110% 110%, #13232e 0%, rgba(10,10,16,0) 60%),
            linear-gradient(180deg, #0b0c12 0%, #0a0b10 100%);
background-attachment: fixed;
}

/* Subtle diagonal pattern overlay */
body::before {
content: "";
position: fixed;
inset: 0;
background-image: url('dashboard_images/background.png');
background-size: 600px;
background-repeat: repeat;
opacity: .08;
pointer-events: none;
}

.page {
min-height: 100dvh;
display: grid;
grid-template-rows: 1fr auto;
}

.content {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 40px 24px 20px;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 48px;
align-items: center;
}

/* Left - feature carousel */
.left {
display: grid;
gap: 18px;
}

.feature-stack {
display: grid;
gap: 18px;
max-width: 520px;
}

/* Carousel container */
.carousel-wrapper {
position: relative;
width: 100%;
min-height: 600px; /* Tall enough for chart card */
}

.carousel-slides {
position: relative;
width: 100%;
min-height: 600px;
}

/* Slide container for card pairs */
.carousel-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s;
display: grid;
gap: 18px;
}
.carousel-slide.active {
opacity: 1;
visibility: visible;
position: relative;
}

/* Feature cards - base styles */
.feature-card {
position: relative;
width: 100%;
background: #ffffff;
color: #1a1a1a;
border-radius: 20px;
padding: 28px 32px 80px;
box-shadow: 0 2px 12px rgba(0,0,0,.08);
min-height: 190px;
display: flex;
flex-direction: column;
overflow: hidden;
}

/* ===========================================
SLIDE 1 - Secure & Swift Access + Your Hub
=========================================== */
.slide-1-card {
height: 200px;
margin-top: 60px; /* Top margin from top edge */
overflow: hidden; /* Contain cutout */
}
.slide-1-card-dark {
background: #3366ff;
color: #ffffff;
border: none;
min-height: 190px;
height: 220px;
margin-top: 40px; /* Gap between cards */
overflow: hidden; /* Contain cutout */
}

/* Base styles for titles and descriptions */
.feature-title { 
font-weight: 700; 
font-size: 24px; 
margin: 0 0 14px; 
letter-spacing: -.3px; 
line-height: 1.3;
}
.feature-desc { 
margin: 0; 
color: #666666;
line-height: 1.7;
flex: 1;
font-size: 15px;
}
.slide-1-desc-dark { 
color: #aaaaaa; 
}

/* ===========================================
SLIDE 2 - All-In-One Platform with Chart
=========================================== */
.slide-2-chart-card {
min-height: 400px; /* Taller for chart */
padding-bottom: 28px;
margin-top: 80px; /* Maximum top margin */
overflow: hidden; /* Allow dark background element to show */
}
.slide-2-desc {
margin-bottom: 16px;
flex: 0;
}
.slide-2-tagline {

left: 68px; /* Right next to icon (12px icon left + 46px icon width + 10px gap) */
bottom: 38px; /* Aligned with icon vertically */
margin: 0px 38px -10px;
color: #666666;
font-size: 14px;
line-height: 1.6;
max-width: calc(100% - 80px); /* Prevent text cutoff */
}

/* Slide 2 - dark background element for icon */
.slide-2-chart-card::before {
content: '';
position: absolute;
left: -14px;
bottom: -14px;
width: 70px;
height: 70px;
background: #1a1a1a; /* Dark element - background image element */
border-radius: 18px;
box-shadow: 0 4px 14px rgba(0,0,0,.4);
z-index: 1;
}

/* ===========================================
SLIDE 2 - Icon Styles (Unique Class)
=========================================== */
.slide-2-chip {

left: 1px;
bottom: 3px;
width: 51px;
height: 50px;
border-radius: 12px;
background: #ffffff;
color: #1a1a1a; /* Dark icon */
box-shadow: 0 3px 10px rgba(0,0,0,.3);
z-index: 3;
}

/* ===========================================
SLIDE 3 - Built for Simplicity
=========================================== */
.slide-3-simplicity-card {
height: 450px; /* Fixed height */
margin-top: 60px; /* Top margin */
overflow: hidden; /* Allow cutout to show */
}
.slide-3-desc {
margin-bottom: 20px;
flex: 0;
}
.slide-3-tagline {
position: absolute;
left: 68px; /* Next to icon (10px icon left + 48px icon width + 10px gap) */
bottom: 38px;
margin: 0;
color: #666666;
font-size: 14px;
line-height: 1.6;
max-width: calc(100% - 80px); /* Prevent text cutoff */
}

/* Slide 3 - dark rounded square element (background image element) overlapping */
.slide-3-simplicity-card::before {
content: '';
position: absolute;
left: -16px;
bottom: -16px;
width: 68px;
height: 68px;
background: #1a1a1a; /* Dark element - acts like background image */
border-radius: 16px;
box-shadow: 0 4px 16px rgba(0,0,0,.4);
z-index: 1;
}

/* ===========================================
SLIDE 3 - Icon Styles (Unique Class)
=========================================== */
.slide-3-chip {
position: absolute;
left: 1px;
bottom: 1px;
width: 48px;
height: 48px;
border-radius: 12px;
background: #ffffff;
color: #1a1a1a; /* Dark gray/black icon */
box-shadow: 0 3px 10px rgba(0,0,0,.3);
z-index: 3;
}

/* Slide 2 - Chart Container Styles */
.slide-2-chart-container {
background: #ffffff;
border-radius: 12px;
padding: 16px;
margin: 16px 0;
box-shadow: 0 2px 8px rgba(0,0,0,.08);
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
}
.slide-2-chart-title {
font-size: 13px;
color: #666666;
font-weight: 500;
margin-bottom: 8px;
}
.slide-2-chart-wrapper {
display: flex;
flex-direction: column;
gap: 8px;
height: 160px;
position: relative;
padding-left: 32px;
}
/* Slide 2 - Y-axis labels */
.slide-2-y-axis {
position: absolute;
left: 0;
top: 0;
bottom: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 10px;
color: #999999;
width: 28px;
}
.slide-2-y-axis span {
display: block;
text-align: right;
}
.slide-2-bars {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 4px;
height: 120px;
position: relative;
padding-bottom: 20px;
/* Grid lines - vertical lines between bars */
background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent 31px,
    rgba(0,0,0,.05) 31px,
    rgba(0,0,0,.05) 32px
);
}
.slide-2-bar-wrapper {
flex: 1;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
position: relative;
max-width: 32px;
}
.slide-2-bar-bg {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.05);
border-radius: 4px 4px 0 0;
}
.slide-2-bar-blue {
width: 100%;
max-width: 28px;
border-radius: 4px 4px 0 0;
position: relative;
transition: all 0.3s ease;
min-height: 4px;
z-index: 2;
background: #1e40af; /* Darker blue to match reference */
}
.slide-2-bar-green {
width: 100%;
max-width: 28px;
border-radius: 4px 4px 0 0;
position: relative;
transition: all 0.3s ease;
min-height: 4px;
z-index: 2;
background: #84cc16; /* Lime green to match reference */
}
.slide-2-label {
position: absolute;
top: -22px;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
color: #666666;
white-space: nowrap;
display: flex;
align-items: center;
gap: 4px;
}
.slide-2-label::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: #a855f7; /* Purple dot */
}
.slide-2-x-axis {
display: flex;
justify-content: space-between;
font-size: 11px;
color: #999999;
padding: 0 2px;
margin-top: 4px;
}
.slide-2-x-axis span {
flex: 1;
text-align: center;
}

/* Slide 3 - Feature List Styles */
.slide-3-feature-list {
display: flex;
flex-direction: column;
gap: 14px;
margin: 20px 0;
flex: 1;
}
.slide-3-feature-item {
display: flex;
align-items: flex-start;
gap: 12px;
}
.slide-3-feature-check {
width: 24px;
height: 24px;
border-radius: 50%;
background: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.slide-3-feature-check i {
color: #3366ff;
font-size: 16px;
}
.slide-3-feature-text {
color: #666666;
font-size: 15px;
line-height: 1.5;
flex: 1;
}

/* Base inline-chip styles - minimal, only for structure */
.inline-chip {
position: absolute; 
display: flex; 
align-items: center;
justify-content: center;
font-size: 22px;
}

/* ===========================================
SLIDE 1 - Icon Styles (Unique Classes)
=========================================== */
.slide-1-chip {
left: 2px; 
bottom: 0px;
width: 52px; 
height: 52px; 
border-radius: 14px;
background: #ffffff;
color: #1a1a1a; 
border: none;
box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.slide-1-chip-dark {
left: 2px; 
bottom: 0px;
width: 52px; 
height: 52px; 
border-radius: 14px;
background: #3366ff; 
color: #ffffff; 
border: none;
box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Slide 1 - L-shaped corner cutout (carved into card) */
.slide-1-corner-socket {
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
width: 100px;
height: 88px;
background: #1a1a1a; /* Dark background visible through cutout */
border: none;
border-radius: 0 0 20px 0; /* Match card's bottom-right corner */
/* Create L-shape with clip-path - clean carved look */
clip-path: polygon(
    0 0,
    calc(100% - 30px) 0,
    calc(100% - 30px) 30px,
    calc(100% - 12px) 30px,
    calc(100% - 12px) 100%,
    0 100%
);
}
/* Rounded inner corner of L-shape - smooth transition */
.slide-1-corner-socket::before {
content: '';
position: absolute;
right: 12px;
bottom: 30px;
width: 18px;
height: 18px;
background: #1a1a1a;
border-radius: 0 0 0 18px; /* Rounded inner corner */
z-index: 2;
}
/* Blue card cutout - same styling */
.slide-1-corner-socket-dark {
background: #1a1a1a;
}
.slide-1-corner-socket-dark::before {
background: #1a1a1a;
}

/* Slide 1 - White padlock chip (positioned inside L-shaped cutout) */
.slide-1-corner-chip {
position: absolute;
right: 30px;
bottom: 30px;
width: 46px;
height: 46px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
z-index: 4;
background: #ffffff; /* White background */
box-shadow: 0 3px 10px rgba(0,0,0,.35); /* Subtle shadow */
color: #1a1a1a; /* Black padlock icon for white card */
}
/* Bottom card (blue): blue padlock icon */
.slide-1-corner-chip-dark {
color: #3366ff; /* Blue padlock icon for blue card */
}

/* Corner padlock chip - white rounded square container with icon inside */
.corner-chip {
position: absolute; 
right: 30px; 
bottom: 30px;
width: 46px; 
height: 46px; 
border-radius: 14px; /* More rounded corners to match reference */
display: flex; 
align-items: center;
justify-content: center;
font-size: 20px;
z-index: 4;
background: #ffffff;
box-shadow: 0 3px 10px rgba(0,0,0,.35); /* Slightly stronger shadow */
}
/* Top card (white): dark padlock icon on white chip */
.feature-card:not(.dark) .corner-chip {
color: #1a1a1a;
}
/* Bottom card (blue): blue padlock icon on white chip */
.feature-card.dark .corner-chip {
color: #3366ff;
}
/* Second slide padlock positioning */
.carousel-slide:nth-child(2) .corner-chip {
right: 34px;
bottom: 22px;
}

/* Corner socket/cutout - L-shaped indentation carved into card */
.corner-socket {
position: absolute; 
right: 0; 
bottom: 0; 
z-index: 1;
width: 100px; 
height: 88px; 
background: #1a1a1a;
border: none;
/* Rounded outer corner to match card */
border-radius: 0 0 20px 0;
/* Create L-shape - clean polygon */
clip-path: polygon(
    0 0, 
    calc(100% - 30px) 0, 
    calc(100% - 30px) 30px, 
    calc(100% - 12px) 30px,
    calc(100% - 12px) 100%, 
    0 100%
);
}

/* Add rounded inner corner for first slide only */
.carousel-slide:first-child .corner-socket::before {
content: '';
position: absolute;
right: 12px;
bottom: 30px;
width: 18px;
height: 18px;
background: #1a1a1a;
border-radius: 0 0 0 18px;
z-index: 2;
}

/* Blue card cutout - same styling */
.feature-card.dark .corner-socket {
background: #1a1a1a;
}
.carousel-slide:first-child .feature-card.dark .corner-socket::before {
background: #1a1a1a;
}

/* Second slide: overlapping decorative shapes extending beyond card */
.carousel-slide:nth-child(2) .corner-socket {
width: 110px;
height: 75px;
border-radius: 18px;
right: -16px;
bottom: -12px;
clip-path: none;
background: #2c2c3e;
box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.carousel-slide:nth-child(2) .corner-socket::before {
content: '';
position: absolute;
right: 70px;
bottom: -8px;
width: 92px;
height: 68px;
border-radius: 16px;
background: #2c2c3e;
z-index: -1;
box-shadow: 0 4px 14px rgba(0,0,0,.3);
}

.dots { 
display: flex; 
gap: 10px; 
margin-top: 12px; 
justify-content: flex-start;
}
.dot { 
width: 10px; 
height: 10px; 
border-radius: 50%; 
border: 2px solid rgba(255, 255, 255, 0.4);
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
}
.dot.active { 
background: var(--primary);
border-color: var(--primary);
box-shadow: 0 0 8px rgba(43, 107, 255, 0.6);
}

/* Right - login card */
.login-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0,0,0,.45);
padding: 28px 32px;
width: 100%;
max-width: 680px;
margin-left: auto;
}

.brand {
display: grid;
place-items: center;
margin-bottom: 6px;
}
.brand img { height: 46px; width: auto; }
.card-title { 
text-align: center; 
font-weight: 700; 
margin: 10px 0 14px;
color: #1a1a1a;
font-size: 22px;
line-height: 1.2;
}

form { display: grid; gap: 12px; }
label { 
font-size: 13px; 
color: #6C7293;
font-weight: 500;
display: block;
margin-bottom: 4px;
}
.field {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
}
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.input-wrap { position: relative; width: 100%; }
input[type="email"], input[type="password"], input[type="text"], input[type="tel"] {
width: 100%;
border: 1px solid #d5dae7;
border-radius: 10px;
padding: 10px 40px 10px 16px;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
background: #fff;
color: #1a1a1a;
font-size: 14px;
box-sizing: border-box;
}

/* Validation states */
.field.valid input,
.field.valid select {
border-color: #28a745;
padding-right: 40px;
}

.field.invalid input,
.field.invalid select {
border-color: #dc3545;
padding-right: 40px;
}

/* Validation icons */
.input-wrap {
position: relative;
}

.field-icon {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
display: none;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 2;
}

.field.valid .field-icon {
display: flex;
color: #28a745;
}

.field.valid .field-icon i {
font-size: 18px;
}

.field.invalid .field-icon {
display: flex;
color: #dc3545;
}

.field.invalid .field-icon i {
font-size: 18px;
}

.field-icon i.bi-check-circle-fill {
display: none;
}

.field-icon i.bi-exclamation-circle-fill {
display: none;
}

.field.valid .field-icon i.bi-check-circle-fill {
display: block;
}

.field.invalid .field-icon i.bi-exclamation-circle-fill {
display: block;
}

/* Validation messages */
.field-message {
display: none;
font-size: 12px;
margin-top: 4px;
padding-left: 4px;
}

.field-message.valid-msg {
color: #28a745;
}

.field-message.invalid-msg {
color: #dc3545;
}

.field.valid .field-message.valid-msg {
display: block;
}

.field.invalid .field-message.invalid-msg {
display: block;
}

select {
width: 100%;
border: 1px solid #d5dae7;
border-radius: 10px;
padding: 10px 40px 10px 16px;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
background: #fff;
color: #1a1a1a;
font-size: 14px;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236C7293' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
box-sizing: border-box;
}

.field.valid select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2328a745' d='M6 9L1 4h10z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2328a745' d='M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z'/%3E%3C/svg%3E");
background-position: right 14px center, right 36px center;
background-size: 12px 12px, 16px 16px;
}

.field.invalid select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23dc3545' d='M6 9L1 4h10z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23dc3545' d='M8 15A7 7 0 118 1a7 7 0 010 14zM4.646 4.646a.5.5 0 01.708 0L8 7.293l2.646-2.647a.5.5 0 01.708.708L8.707 8l2.647 2.646a.5.5 0 01-.708.708L8 8.707l-2.646 2.647a.5.5 0 01-.708-.708L7.293 8 4.646 5.354a.5.5 0 010-.708z'/%3E%3C/svg%3E");
background-position: right 14px center, right 36px center;
background-size: 12px 12px, 16px 16px;
}

select:focus {
border-color: var(--ring);
box-shadow: 0 0 0 4px rgba(59,130,246,.15);
}
input::placeholder { color: #9aa3bf; }
input:focus {
border-color: var(--ring);
box-shadow: 0 0 0 4px rgba(59,130,246,.15);
}

/* Password toggle positioning with validation icon */
.field:not(.valid):not(.invalid) .toggle-pass {
right: 10px;
}
.field.valid .toggle-pass,
.field.invalid .toggle-pass {
right: 36px;
}

/* Two-column layout for form fields */
.field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
width: 100%;
}

/* Phone number split input */
.phone-group {
display: flex;
gap: 8px;
width: 100%;
}
.phone-group .input-wrap {
position: relative;
}
.phone-code {
width: 100%;
flex-shrink: 0;
}
.phone-group .phone-code {
width: 90px;
}
.phone-number {
width: 100%;
flex: 1;
min-width: 0;
}

.toggle-pass {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #9aa3bf;
cursor: pointer;
padding: 4px 6px;
border-radius: 6px;
}
.toggle-pass:hover { color: var(--text); }

.row {
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 12px;
}
.link { color: #E21C26; font-size: 13px; }


.checkbox { 
display: inline-flex; 
align-items: center; 
gap: 8px; 
font-size: 13px; 
color: #1a1a1a;
cursor: pointer;
}
.checkbox input { 
accent-color: var(--primary);
cursor: pointer;
width: 18px;
height: 18px;
margin: 0;
border: 2px solid #d5dae7;
border-radius: 4px;
}
.checkbox.invalid input {
border-color: #dc3545;
}
.checkbox.valid input {
border-color: #28a745;
}
.checkbox a { 
color: var(--primary); 
text-decoration: none; 
}
.checkbox a:hover { 
text-decoration: underline; 
}

.checkbox-message {
display: none;
font-size: 12px;
color: #dc3545;
margin-top: 4px;
padding-left: 26px;
}
.checkbox.invalid .checkbox-message {
display: block;
}

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 10px 16px;
background: var(--primary);
color: white;
font-weight: 600;
font-size: 15px;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background .15s ease, transform .02s ease;
}
.btn:hover { background: var(--primary-600); }
.btn:active { transform: translateY(1px); }

.muted { color: #43444B; font-size: 14px; text-align: center; }
.muted a { color: #0A5BE2;  }

/* centered OR divider */
.or-sep {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin: 10px 0 4px;
}
.or-sep::before,
.or-sep::after {
content: "";
height: 1px;
width: 120px;
background: #e6eaf3;
}
.or-sep span { color: #9aa3bf; font-size: 12px; }

/* ===========================================
EMAIL VERIFICATION MODAL STYLES
=========================================== */
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 9999;
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
}

.modal-overlay.show {
display: flex;
}

.email-modal {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 40px 32px;
max-width: 480px;
width: 90%;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
position: relative;
animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
from {
    opacity: 0;
    transform: scale(0.9);
}
to {
    opacity: 1;
    transform: scale(1);
}
}

.modal-close {
position: absolute;
top: 16px;
right: 16px;
background: none;
border: none;
font-size: 24px;
color: #9aa3bf;
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.2s ease;
}

.modal-close:hover {
background: #f3f4f6;
color: #1a1a1a;
}

.modal-icon {
display: flex;
justify-content: center;
margin-bottom: 20px;
}

.modal-icon svg {
width: 64px;
height: 64px;
}

.modal-title {
text-align: center;
font-size: 24px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 16px;
text-decoration: underline;
text-underline-offset: 4px;
}

.modal-text {
text-align: center;
color: #6C7293;
font-size: 14px;
line-height: 1.7;
margin-bottom: 24px;
font-weight: 400;
}

.modal-btn {
width: 100%;
padding: 14px 16px;
background: var(--primary);
color: white;
font-weight: 600;
font-size: 15px;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background .15s ease;
margin-bottom: 16px;
}

.modal-btn:hover {
background: var(--primary-600);
}

.modal-resend {
text-align: center;
font-size: 14px;
color: #6C7293;
}

.modal-resend a {
color: var(--primary);
text-decoration: underline;
}

.modal-resend a:hover {
color: var(--primary-600);
}

@media (max-width: 576px) {
.email-modal {
    padding: 32px 24px;
    margin: 20px;
}

.modal-title {
    font-size: 20px;
}

.modal-icon svg {
    width: 56px;
    height: 56px;
}
}

/* ===========================================
FOOTER STYLES
=========================================== */
.footer {
background: linear-gradient(135deg, #171224 0%, #3F3163 50%, #171224 100%);
border-radius: 20px;
/* Centered fixed width (tweak --footer-width above) */

margin: 30px 269px 20px 240px;
padding: 30px;
color: white;
font-family: 'Lufga', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
position: relative;
z-index: 1;
}

/* Remove dashboard-style offsets on large screens; keep centered */

.footer-content {
display: flex;
flex-direction: column;
gap: 25px;
}

.footer-nav {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 16px;
margin-bottom: 8px;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
}

.footer-link {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 8px;
color: white;
text-decoration: none;
transition: all 0.3s ease;
padding: 6px 10px;
border-radius: 16px;
flex: 0 0 auto;
}

.footer-disclaimer {
margin-top: 8px;
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}

.footer-disclaimer p {
color: #e5e7eb;
font-size: 0.8rem;
line-height: 1.6;
margin: 0;
text-align: left;
max-width: 100%;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

/* ===========================================
RESPONSIVE STYLES
=========================================== */
@media (max-width: 991px) {
/* Main layout - stack vertically */
.content {
grid-template-columns: 1fr;
padding: 20px 16px;
gap: 24px;
}

/* Login form - show first on mobile */
.right {
order: 1;
}

.login-card {
max-width: 100%;
margin-left: 0;
padding: 32px 24px;
}

/* Registration form responsive */
.field-row {
grid-template-columns: 1fr;
gap: 16px;
}

.phone-group {
flex-direction: column;
gap: 8px;
}

.phone-code {
width: 100%;
min-width: 100%;
}

.phone-number {
width: 100%;
}

/* Left carousel section - show after login form */
.left {
order: 2;
margin-top: 8px;
margin-right: 0;
}

.feature-stack {
max-width: 100%;
margin-right: 0;
}

.carousel-wrapper {
min-height: 400px;
margin-top: 0;
margin-right: 0;
}

.carousel-slides {
min-height: 400px;
margin-right: 0;
overflow: hidden;
}

.carousel-slide {
margin-right: 0;
}

/* Feature cards - adjust for mobile */
.feature-card {
padding: 24px 20px 60px;
border-radius: 16px;
min-height: 160px;
margin-right: 0;
overflow: hidden;
}

.feature-title {
font-size: 20px;
margin-bottom: 12px;
}

.feature-desc {
font-size: 14px;
line-height: 1.6;
}

/* Slide 1 cards */
.slide-1-card {
height: auto;
min-height: 160px;
margin-top: 8px;
margin-right: 0;
}

.slide-1-card-dark {
height: auto;
min-height: 160px;
margin-top: 16px;
margin-right: 0;
}

/* Slide 2 chart card */
.slide-2-chart-card {
min-height: 350px;
margin-top: 8px;
margin-right: 0;
padding-bottom: 20px;
}

.slide-2-chart-container {
padding: 12px;
margin: 12px 0;
}

.slide-2-chart-wrapper {
height: 140px;
padding-left: 28px;
}

.slide-2-bars {
height: 100px;
padding-bottom: 16px;
}

.slide-2-tagline {
position: relative;
left: auto;
bottom: auto;
margin-top: 12px;
max-width: 100%;
}

.slide-2-chip {
position: relative;
left: auto;
bottom: auto;
margin-top: 12px;
display: inline-flex;
}

/* Slide 3 simplicity card */
.slide-3-simplicity-card {
height: auto;
min-height: 400px;
margin-top: 8px;
margin-right: 0;
padding-bottom: 20px;
overflow: hidden;
}

/* Hide dark background element on mobile to prevent overflow */
.slide-3-simplicity-card::before {
display: none;
}

.slide-3-tagline {
position: relative;
left: auto;
bottom: auto;
margin-top: 12px;
max-width: 100%;
}

.slide-3-chip {
position: relative;
left: auto;
bottom: auto;
margin-top: 12px;
display: inline-flex;
}

/* Icons - adjust positioning for mobile */
.slide-1-chip,
.slide-1-chip-dark {
position: absolute;
left: 16px;
bottom: 16px;
width: 44px;
height: 44px;
font-size: 20px;
}

/* Footer responsive */
.footer {
width: 100%;
margin: 0;
padding: 20px 16px;
border-radius: 0;
}

.footer-content {
max-width: 100%;
padding: 0;
}

.footer-nav {
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-bottom: 16px;
}

.footer-link {
gap: 4px;
padding: 8px 12px;
font-size: 0.85rem;
flex: 0 0 auto;
}

.footer-link i {
font-size: 0.9rem;
}

.footer-link span {
font-size: 0.8rem;
}

.footer-disclaimer {
max-width: 100%;
margin-top: 12px;
padding: 0;
}

.footer-disclaimer p {
font-size: 0.75rem;
line-height: 1.5;
text-align: left;
padding: 0;
}
}

/* Mobile specific (max-width: 576px) */
@media (max-width: 576px) {
.content {
padding: 16px 12px;
gap: 20px;
}

.feature-card {
padding: 20px 16px 50px;
border-radius: 14px;
}

.feature-title {
font-size: 18px;
}

.feature-desc {
font-size: 13px;
}

.slide-2-chart-card {
min-height: 320px;
}

.slide-2-chart-wrapper {
height: 120px;
padding-left: 24px;
}

.slide-2-bars {
height: 80px;
}

.slide-3-simplicity-card {
min-height: 350px;
margin-top: 8px;
margin-right: 0;
}

.left {
margin-top: 8px;
margin-right: 0;
}

.feature-stack {
margin-right: 0;
}

.slide-1-chip,
.slide-1-chip-dark {
width: 40px;
height: 40px;
font-size: 18px;
}

/* Footer - extra small mobile */
.footer {
padding: 16px 12px;
}

.footer-nav {
gap: 6px;
margin-bottom: 12px;
}

.footer-link {
padding: 6px 8px;
font-size: 0.75rem;
}

.footer-link i {
font-size: 0.8rem;
}

.footer-link span {
font-size: 0.7rem;
}

.footer-disclaimer p {
font-size: 0.7rem;
line-height: 1.4;
}
}