/* style.css */
:root {
    --navy: #0a1628;
    --navy-light: #111d32;
    --navy-lighter: #1a2d4a;
    --gold: #c8a45c;
    --gold-light: #d4b76e;
    --gold-pale: #f5ecd7;
    --white: #ffffff;
    --off-white: #f8f7f4;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --success: #10b981;
    --success-light: #d1fae5;
    --error: #ef4444;
    --error-light: #fee2e2;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
    --shadow-lg: 0 20px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.08);
    --shadow-xl: 0 25px 50px rgba(0,0,0,0.18);
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --transition: 0.25s cubic-bezier(0.4,0,0.2,1);
    --transition-slow: 0.4s cubic-bezier(0.4,0,0.2,1);
}

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:90px;
}

body {
    font-family:'Inter', system-ui, -apple-system, sans-serif;
    background-color:var(--off-white);
    color:var(--gray-800);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
}

/* ---------- NAVIGATION ---------- */
.nav {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    background:rgba(10,22,40,0.92);
    backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,0.08);
    padding:0 2rem;
    transition:var(--transition);
}
.nav.scrolled {
    background:rgba(10,22,40,0.98);
    box-shadow:var(--shadow-lg);
}
.nav-inner {
    max-width:1280px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:72px;
}
.nav-logo {
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:var(--white);
    font-family:'Playfair Display', serif;
    font-size:1.4rem;
    font-weight:700;
    letter-spacing:-0.3px;
}
.nav-logo-icon {
    width:42px;
    height:42px;
    background:linear-gradient(135deg, var(--gold), var(--gold-light));
    border-radius:var(--radius-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
    color:var(--navy);
    font-weight:800;
}
.nav-links {
    display:flex;
    align-items:center;
    gap:2rem;
    list-style:none;
}
.nav-links a {
    text-decoration:none;
    color:rgba(255,255,255,0.8);
    font-size:0.925rem;
    font-weight:500;
    transition:var(--transition);
    position:relative;
    padding:6px 0;
}
.nav-links a::after {
    content:'';
    position:absolute;
    bottom:-2px;
    left:0;
    width:0;
    height:2px;
    background:var(--gold);
    border-radius:1px;
    transition:var(--transition);
}
.nav-links a:hover {
    color:var(--white);
}
.nav-links a:hover::after {
    width:100%;
}
.nav-cta {
    background:var(--gold) !important;
    color:var(--navy) !important;
    padding:10px 22px !important;
    border-radius:50px;
    font-weight:600 !important;
    font-size:0.9rem !important;
}
.nav-cta::after {
    display:none !important;
}
.nav-cta:hover {
    background:var(--gold-light) !important;
    transform:translateY(-1px);
    box-shadow:0 8px 24px rgba(200,164,92,0.35);
}

.nav-mobile-toggle {
    display:none;
    background:none;
    border:none;
    cursor:pointer;
    padding:8px;
    color:var(--white);
    z-index:1001;
}
.nav-mobile-toggle span {
    display:block;
    width:26px;
    height:2.5px;
    background:var(--white);
    margin:6px 0;
    border-radius:2px;
    transition:var(--transition);
}
.nav-mobile-toggle.active span:nth-child(1) {
    transform:rotate(45deg) translate(6px,6px);
}
.nav-mobile-toggle.active span:nth-child(2) {
    opacity:0;
}
.nav-mobile-toggle.active span:nth-child(3) {
    transform:rotate(-45deg) translate(6px,-6px);
}

/* ---------- HERO ---------- */
.hero {
    min-height:100vh;
    display:flex;
    align-items:center;
    background:var(--navy);
    position:relative;
    overflow:hidden;
    padding:120px 2rem 100px;
}
.hero::before {
    content:'';
    position:absolute;
    top:-30%;
    right:-15%;
    width:700px;
    height:700px;
    background:radial-gradient(circle, rgba(200,164,92,0.08) 0%, transparent 70%);
    border-radius:50%;
    pointer-events:none;
}
.hero::after {
    content:'';
    position:absolute;
    bottom:-20%;
    left:-10%;
    width:500px;
    height:500px;
    background:radial-gradient(circle, rgba(200,164,92,0.05) 0%, transparent 70%);
    border-radius:50%;
    pointer-events:none;
}
.hero-pattern {
    position:absolute;
    inset:0;
    opacity:0.025;
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.5) 2px, rgba(255,255,255,0.5) 3px),
        repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255,255,255,0.5) 2px, rgba(255,255,255,0.5) 3px);
    pointer-events:none;
}
.hero-inner {
    max-width:1280px;
    margin:0 auto;
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4rem;
    align-items:center;
    position:relative;
    z-index:1;
}
.hero-badge {
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(200,164,92,0.12);
    border:1px solid rgba(200,164,92,0.3);
    padding:8px 18px;
    border-radius:50px;
    color:var(--gold-light);
    font-size:0.85rem;
    font-weight:600;
    letter-spacing:0.3px;
    margin-bottom:1.5rem;
}
.hero-badge-dot {
    width:8px;
    height:8px;
    background:var(--gold);
    border-radius:50%;
    animation:pulse-dot 2s infinite;
}
@keyframes pulse-dot {
    0%,100% { opacity:1; transform:scale(1); }
    50% { opacity:0.4; transform:scale(1.6); }
}
.hero h1 {
    font-family:'Playfair Display', serif;
    font-size:clamp(2.5rem, 5vw, 3.6rem);
    font-weight:700;
    color:var(--white);
    line-height:1.15;
    margin-bottom:1.25rem;
    letter-spacing:-0.5px;
}
.hero h1 .gold-text { color:var(--gold); }
.hero p {
    font-size:1.1rem;
    color:rgba(255,255,255,0.7);
    margin-bottom:2rem;
    max-width:480px;
}
.hero-buttons { display:flex; gap:1rem; flex-wrap:wrap; }

.btn {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 28px;
    border-radius:50px;
    font-weight:600;
    font-size:0.95rem;
    cursor:pointer;
    text-decoration:none;
    transition:var(--transition);
    border:none;
    font-family:'Inter', sans-serif;
    letter-spacing:0.1px;
}
.btn-primary {
    background:var(--gold);
    color:var(--navy);
    box-shadow:0 8px 28px rgba(200,164,92,0.3);
}
.btn-primary:hover {
    background:var(--gold-light);
    transform:translateY(-2px);
    box-shadow:0 14px 36px rgba(200,164,92,0.4);
}
.btn-outline {
    background:transparent;
    color:var(--white);
    border:2px solid rgba(255,255,255,0.3);
}
.btn-outline:hover {
    border-color:var(--gold);
    color:var(--gold);
    background:rgba(200,164,92,0.06);
}
.btn-lg { padding:16px 34px; font-size:1rem; }
.btn-sm { padding:10px 20px; font-size:0.85rem; }

.hero-visual { display:flex; align-items:center; justify-content:center; position:relative; }
.hero-card {
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:var(--radius-xl);
    padding:2.5rem 2rem;
    backdrop-filter:blur(10px);
    width:100%;
    max-width:420px;
    box-shadow:var(--shadow-xl);
}
.hero-card-icon-row { display:flex; gap:10px; margin-bottom:1.5rem; }
.hero-card-icon {
    width:44px; height:44px; border-radius:var(--radius-sm);
    display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.hero-card-icon.box { background:rgba(200,164,92,0.2); color:var(--gold); }
.hero-card-icon.truck { background:rgba(255,255,255,0.1); color:#fff; }
.hero-card-icon.check { background:rgba(16,185,129,0.2); color:var(--success); }
.hero-card h3 { color:var(--white); font-size:1.2rem; font-weight:700; margin-bottom:0.5rem; }
.hero-card p { font-size:0.9rem; color:rgba(255,255,255,0.55); margin-bottom:0; max-width:100%; }
.hero-card-stats { display:flex; gap:2rem; margin-top:1.8rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,0.1); }
.hero-stat-value { font-size:1.6rem; font-weight:700; color:var(--gold); font-family:'Playfair Display', serif; }
.hero-stat-label { font-size:0.78rem; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:0.5px; }

/* ---------- SECTIONS ---------- */
.section { padding:5rem 2rem; }
.section-inner { max-width:1280px; margin:0 auto; }
.section-label {
    display:inline-block;
    font-size:0.8rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    color:var(--gold);
    margin-bottom:0.75rem;
}
.section-title {
    font-family:'Playfair Display', serif;
    font-size:clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight:700;
    color:var(--navy);
    margin-bottom:1rem;
}
.section-subtitle {
    color:var(--gray-500);
    font-size:1.05rem;
    max-width:600px;
}

.about { background:var(--white); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; margin-top:3rem; }
.about-image-wrapper {
    border-radius:var(--radius-lg);
    overflow:hidden;
    background:var(--navy-light);
    aspect-ratio:4/3;
    display:flex;
    align-items:center;
    justify-content:center;
}
.about-image-placeholder { text-align:center; color:var(--white); padding:2rem; }
.big-icon { font-size:5rem; display:block; margin-bottom:1rem; }
.about-features { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2rem; }
.about-feature { display:flex; gap:12px; align-items:flex-start; }
.about-feature-icon {
    width:40px; height:40px;
    border-radius:var(--radius-sm);
    background:var(--gold-pale);
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem;
}
.about-feature h4 { font-size:0.95rem; font-weight:700; color:var(--navy); margin-bottom:2px; }
.about-feature p { font-size:0.82rem; color:var(--gray-500); }

.portal-section { background:var(--off-white); }

.portal-wrapper {
    background:var(--white);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-lg);
    overflow:hidden;
    margin-top:3rem;
    border:1px solid var(--gray-200);
}
.portal-header {
    background:var(--navy);
    padding:2rem 2.5rem;
    display:flex;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
    justify-content:space-between;
}
.portal-header-left { display:flex; align-items:center; gap:1rem; }
.portal-header-icon {
    width:50px; height:50px;
    background:var(--gold);
    border-radius:var(--radius);
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem;
}
.portal-header h2 { color:var(--white); font-family:'Playfair Display', serif; font-size:1.4rem; }
.portal-badge {
    background:rgba(255,255,255,0.1);
    color:var(--gold-light);
    padding:6px 14px;
    border-radius:50px;
    font-size:0.78rem;
    font-weight:600;
    white-space:nowrap;
}
.portal-body { padding:2.5rem; }

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label { font-size:0.85rem; font-weight:600; color:var(--gray-700); }
.form-group input,
.form-group select,
.form-group textarea {
    padding:12px 16px;
    border:2px solid var(--gray-200);
    border-radius:var(--radius);
    font-family:'Inter', sans-serif;
    font-size:0.95rem;
    color:var(--gray-800);
    transition:var(--transition);
    background:var(--gray-100);
    resize:vertical;
    width:100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline:none;
    border-color:var(--gold);
    background:var(--white);
    box-shadow:0 0 0 4px rgba(200,164,92,0.08);
}
.form-group textarea { min-height:100px; }
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--gray-400); }
.form-group select {
    cursor:pointer;
    appearance:none;
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:16px;
    padding-right:40px;
}

.form-file-wrapper { position:relative; }
.form-file-wrapper input[type="file"] {
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
    z-index:2;
}
.form-file-display {
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 16px;
    border:2px dashed var(--gray-300);
    border-radius:var(--radius);
    background:var(--gray-100);
    cursor:pointer;
    transition:var(--transition);
    color:var(--gray-500);
    font-size:0.9rem;
}
.form-file-display:hover {
    border-color:var(--gold);
    background:var(--gold-pale);
}
.file-icon { font-size:1.3rem; }
.form-file-name { color:var(--gray-700); font-weight:500; }

.form-submit-row { display:flex; align-items:center; gap:1.5rem; margin-top:1rem; flex-wrap:wrap; }
.form-note { font-size:0.8rem; color:var(--gray-400); }

/* ---------- MULTI-ITEM SECTION ---------- */
.items-container { margin-top:2rem; }
.items-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.items-header h3 { font-family:'Playfair Display', serif; font-size:1.2rem; color:var(--navy); }

.item-entry {
    background:var(--gray-100);
    border:1px solid var(--gray-200);
    border-radius:var(--radius);
    padding:1.5rem;
    margin-bottom:1rem;
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr auto;
    gap:1rem;
    align-items:end;
    position:relative;
}
.item-entry .form-group { margin-bottom:0; }
.item-remove {
    background:none;
    border:none;
    color:var(--gray-400);
    font-size:1.3rem;
    cursor:pointer;
    padding:8px;
    transition:var(--transition);
    align-self:start;
    margin-top:0.8rem;
}
.item-remove:hover { color:var(--error); }

.add-item-btn {
    background:transparent;
    border:2px dashed var(--gray-300);
    color:var(--gray-500);
    padding:12px 24px;
    border-radius:var(--radius);
    font-weight:600;
    cursor:pointer;
    width:100%;
    transition:var(--transition);
    font-size:0.9rem;
    margin-top:0.5rem;
}
.add-item-btn:hover {
    border-color:var(--gold);
    color:var(--gold);
    background:var(--gold-pale);
}

/* ---------- SUCCESS MESSAGE ---------- */
.form-success {
    display:none;
    text-align:center;
    padding:3rem 2rem;
    animation:fadeInUp 0.5s ease;
}
.form-success.show { display:block; }
.form-success-icon {
    width:80px;
    height:80px;
    background:var(--success-light);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 1.5rem;
    font-size:2.5rem;
}
.form-success h3 { font-family:'Playfair Display', serif; font-size:1.6rem; color:var(--navy); margin-bottom:0.5rem; }
.form-success p { color:var(--gray-500); max-width:400px; margin:0 auto 1.5rem; }
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(20px); }
    to { opacity:1; transform:translateY(0); }
}

/* ---------- HOW IT WORKS ---------- */
.how-it-works { background:var(--white); }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3rem; }
.step-card {
    text-align:center;
    padding:2rem 1.5rem;
    border-radius:var(--radius-lg);
    border:1px solid var(--gray-200);
    transition:var(--transition);
    background:var(--white);
    position:relative;
}
.step-card:hover {
    box-shadow:var(--shadow-lg);
    border-color:transparent;
    transform:translateY(-4px);
}
.step-number {
    width:48px;
    height:48px;
    background:var(--navy);
    color:var(--gold);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:1.2rem;
    margin:0 auto 1rem;
    font-family:'Playfair Display', serif;
}
.step-card h4 { font-weight:700; color:var(--navy); margin-bottom:0.5rem; }
.step-card p { font-size:0.85rem; color:var(--gray-500); }

/* ---------- TESTIMONIALS ---------- */
.testimonials { background:var(--navy); color:var(--white); }
.testimonials .section-title { color:var(--white); }
.testimonials .section-subtitle { color:rgba(255,255,255,0.6); }
.testimonials .section-label { color:var(--gold-light); }
.testimonial-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3rem; }
.testimonial-card {
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:var(--radius-lg);
    padding:2rem;
}
.testimonial-card:hover { background:rgba(255,255,255,0.07); }
.testimonial-card .quote {
    font-size:0.9rem;
    line-height:1.7;
    color:rgba(255,255,255,0.75);
    margin-bottom:1.5rem;
    font-style:italic;
}
.testimonial-card .author { display:flex; align-items:center; gap:10px; }
.testimonial-card .author-avatar {
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--gold);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    color:var(--navy);
}
.testimonial-card .author-name { font-weight:600; font-size:0.9rem; }
.testimonial-card .author-role { font-size:0.75rem; color:rgba(255,255,255,0.5); }

/* ---------- CTA BANNER ---------- */
.cta-banner {
    background:linear-gradient(135deg, var(--navy-light), var(--navy));
    text-align:center;
    padding:5rem 2rem;
}
.cta-banner .section-title { color:var(--white); }
.cta-banner .section-subtitle { color:rgba(255,255,255,0.6); margin:0 auto 2rem; }

/* ---------- FOOTER ---------- */
.footer {
    background:var(--navy);
    color:rgba(255,255,255,0.6);
    padding:4rem 2rem 2rem;
    border-top:1px solid rgba(255,255,255,0.06);
}
.footer-inner {
    max-width:1280px;
    margin:0 auto;
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:3rem;
}
.footer-brand-name {
    font-family:'Playfair Display', serif;
    font-size:1.3rem;
    color:var(--white);
    font-weight:700;
    margin-bottom:0.75rem;
}
.footer p { font-size:0.85rem; line-height:1.7; }
.footer h4 {
    color:var(--white);
    font-weight:600;
    font-size:0.9rem;
    margin-bottom:1rem;
    text-transform:uppercase;
    letter-spacing:0.3px;
}
.footer ul { list-style:none; }
.footer ul li { margin-bottom:0.6rem; }
.footer ul li a {
    color:rgba(255,255,255,0.55);
    text-decoration:none;
    font-size:0.85rem;
    transition:var(--transition);
}
.footer ul li a:hover { color:var(--gold-light); }
.footer-bottom {
    max-width:1280px;
    margin:3rem auto 0;
    padding-top:2rem;
    border-top:1px solid rgba(255,255,255,0.08);
    text-align:center;
    font-size:0.8rem;
    color:rgba(255,255,255,0.4);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px) {
    .hero-inner { grid-template-columns:1fr; gap:3rem; }
    .hero-visual { order:-1; }
    .hero-card { max-width:100%; }
    .about-grid { grid-template-columns:1fr; }
    .steps-grid { grid-template-columns:1fr 1fr; }
    .testimonial-grid { grid-template-columns:1fr 1fr; }
    .footer-inner { grid-template-columns:1fr 1fr; }
    .item-entry { grid-template-columns:1fr 1fr 1fr; }
}

@media (max-width:768px) {
    .nav-links {
        position:fixed;
        top:0;
        right:-100%;
        width:280px;
        height:100vh;
        background:var(--navy);
        flex-direction:column;
        padding:100px 2rem 2rem;
        gap:1.5rem;
        transition:var(--transition-slow);
        box-shadow:var(--shadow-xl);
        align-items:flex-start;
    }
    .nav-links.active { right:0; }
    .nav-mobile-toggle { display:block; }
    .form-grid { grid-template-columns:1fr; }
    .steps-grid { grid-template-columns:1fr; }
    .testimonial-grid { grid-template-columns:1fr; }
    .footer-inner { grid-template-columns:1fr; }
    .about-features { grid-template-columns:1fr; }
    .item-entry { grid-template-columns:1fr 1fr; }
    .portal-header { flex-direction:column; align-items:flex-start; }
}

@media (max-width:480px) {
    .section { padding:3rem 1rem; }
    .hero { padding:100px 1rem 60px; }
    .portal-body { padding:1.5rem; }
    .item-entry { grid-template-columns:1fr; }
    .hero-card-stats { flex-direction:column; gap:1rem; }
}