/**
 * ODS CRM Marketing Landing Page - Premium Styles
 */

:root {
    --mkt-bg: #050505;
    --mkt-text: #ffffff;
    --mkt-text-muted: #94a3b8;
    --mkt-primary: #3b82f6;
    --mkt-primary-glow: rgba(59, 130, 246, 0.5);
    --mkt-accent: #8b5cf6;
    --mkt-glass: rgba(255, 255, 255, 0.03);
    --mkt-border: rgba(255, 255, 255, 0.08);
    --mkt-radius: 24px;
}

.crm-mkt-body {
    background-color: var(--mkt-bg);
    color: var(--mkt-text);
    font-family: 'Inter', sans-serif;
    margin: 0;
    line-height: 1.6;
    overflow-x: hidden;
}

.mkt-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Typography */
h1, h2, h3 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    line-height: 1.1;
}

.gradient-text {
    background: linear-gradient(135deg, #fff 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hero Section */
.mkt-hero {
    padding: 8rem 0 4rem;
    text-align: center;
    position: relative;
}

.mkt-hero::before {
    content: '';
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: var(--mkt-primary-glow);
    filter: blur(150px);
    opacity: 0.15;
    z-index: -1;
}

.mkt-hero h1 {
    font-size: 4.5rem;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.mkt-hero p {
    font-size: 1.25rem;
    color: var(--mkt-text-muted);
    max-width: 600px;
    margin: 0 auto 2.5rem;
}

.mkt-cta-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.mkt-btn {
    padding: 1rem 2rem;
    border-radius: 100px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-mkt-primary {
    background: var(--mkt-primary);
    color: white;
    box-shadow: 0 10px 20px -5px rgba(59, 130, 246, 0.4);
}

.btn-mkt-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgba(59, 130, 246, 0.5);
}

.btn-mkt-outline {
    background: var(--mkt-glass);
    color: white;
    border: 1px solid var(--mkt-border);
}

.btn-mkt-outline:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Preview Image */
.mkt-preview {
    margin-top: 5rem;
    perspective: 1000px;
}

.preview-frame {
    background: #0f0f0f;
    border: 1px solid var(--mkt-border);
    border-radius: var(--mkt-radius);
    padding: 0.5rem;
    box-shadow: 0 50px 100px -20px rgba(0,0,0,0.5);
    transform: rotateX(5deg);
    transition: transform 0.5s ease;
}

.preview-frame:hover {
    transform: rotateX(0deg);
}

.preview-frame img {
    width: 100%;
    border-radius: calc(var(--mkt-radius) - 8px);
    display: block;
}

/* Features Section */
.mkt-features {
    padding: 8rem 0;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-header h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: var(--mkt-glass);
    border: 1px solid var(--mkt-border);
    padding: 2.5rem;
    border-radius: var(--mkt-radius);
    transition: all 0.3s ease;
}

.feature-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--mkt-primary);
    transform: translateY(-10px);
}

.feature-card i {
    width: 48px;
    height: 48px;
    color: var(--mkt-primary);
    margin-bottom: 1.5rem;
}

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.feature-card p {
    color: var(--mkt-text-muted);
    font-size: 0.9375rem;
}

/* CTA Footer */
.mkt-footer-cta {
    padding: 8rem 0;
    text-align: center;
}

.cta-box {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    padding: 4rem;
    border-radius: var(--mkt-radius);
    border: 1px solid var(--mkt-border);
    position: relative;
    overflow: hidden;
}

.cta-box::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: var(--mkt-primary);
    filter: blur(100px);
    opacity: 0.2;
}

/* Animations */
[data-aos] {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-aos].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .mkt-hero h1 { font-size: 2.5rem; }
    .mkt-cta-group { flex-direction: column; }
    .cta-box { padding: 2.5rem 1.5rem; }
}


/* CRM Marketing Landing Page responsive layer */
.mkt-header { position: fixed; inset: 0 0 auto; z-index: 1000; background: rgba(5,5,5,.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--mkt-border); }
.mkt-header-inner { min-height: 80px; display:flex; align-items:center; gap: 1.5rem; }
.mkt-brand { color:var(--mkt-text); text-decoration:none; font-family:'Outfit',sans-serif; font-weight:800; font-size:1.5rem; display:flex; align-items:center; gap:10px; white-space:nowrap; }
.mkt-brand-dot { width:10px; height:10px; background:var(--mkt-primary); border-radius:50%; box-shadow:0 0 10px var(--mkt-primary); }
.mkt-nav { margin-left:auto; display:flex; gap:1.35rem; align-items:center; }
.mkt-nav > a:not(.mkt-btn) { color:var(--mkt-text-muted); text-decoration:none; font-size:.875rem; font-weight:500; transition:color .2s; white-space:nowrap; }
.mkt-nav > a:not(.mkt-btn):hover { color:#fff; }
.mkt-nav .mkt-btn { padding:.62rem 1.1rem; font-size:.875rem; white-space:nowrap; }
.mkt-login-btn { margin-left:auto; border-color:rgba(59,130,246,.55); color:#dbeafe; }
.mkt-login-btn:hover { border-color:var(--mkt-primary); background:rgba(59,130,246,.16); }
.mkt-menu-toggle { display:none; margin-left:auto; border:1px solid var(--mkt-border); background:var(--mkt-glass); color:#fff; border-radius:12px; width:42px; height:42px; align-items:center; justify-content:center; cursor:pointer; }
.mkt-menu-toggle svg { width:20px; height:20px; }
.mkt-hero { padding-top: 11rem; }
.mkt-preview { width:100%; max-width:1100px; margin-left:auto; margin-right:auto; }
.mkt-preview > .preview-frame { overflow:hidden; }
@media (max-width: 768px) {
  .mkt-container { padding-left:1rem; padding-right:1rem; }
  .mkt-header-inner { min-height:68px; }
  .mkt-brand { font-size:1.25rem; }
  .mkt-menu-toggle { display:flex; }
  .mkt-nav { display:none; position:absolute; left:1rem; right:1rem; top:calc(100% + 8px); padding:1rem; flex-direction:column; align-items:stretch; gap:.5rem; background:rgba(12,12,16,.98); border:1px solid var(--mkt-border); border-radius:18px; box-shadow:0 18px 50px rgba(0,0,0,.45); }
  .mkt-nav.is-open { display:flex; }
  .mkt-nav > a:not(.mkt-btn) { padding:.75rem .6rem; }
  .mkt-nav .mkt-btn { text-align:center; margin-left:0; }
  .mkt-login-btn { order:4; }
  .mkt-nav-cta { order:5; }
  .mkt-hero { padding-top:8.5rem; padding-bottom:2.5rem; }
  .mkt-hero h1 { font-size:clamp(2.15rem, 10vw, 3.1rem); line-height:1.05; }
  .mkt-hero h1 br { display:none; }
  .mkt-hero p { font-size:1rem; }
  .mkt-hero::before { width:320px; height:320px; filter:blur(90px); }
  .mkt-cta-group { width:100%; flex-direction:column; gap:.75rem; }
  .mkt-cta-group .mkt-btn { width:100%; box-sizing:border-box; text-align:center; }
  .mkt-preview { margin-top:2.5rem; }
  .preview-frame { transform:none; border-radius:16px; }
  .preview-frame > div > div { grid-template-columns:1fr !important; height:360px !important; }
  .preview-frame > div > div > div:first-child { display:none; }
  .preview-frame > div > div > div:last-child { padding:18px !important; }
  .preview-frame > div > div > div:last-child > div:nth-child(2) { grid-template-columns:1fr !important; gap:10px !important; }
  .preview-frame > div > div > div:last-child > div:nth-child(2) > div:not(:first-child) { display:none; }
  .mkt-features { padding:4.5rem 0; }
  .section-header { margin-bottom:2rem; }
  .section-header h2 { font-size:2.1rem; }
  .feature-grid { grid-template-columns:1fr; gap:1rem; }
  .feature-card { padding:1.5rem; }
  .feature-card:hover { transform:none; }
  .mkt-container[style*="grid-template-columns: 1fr 1fr"] { display:block !important; }
  .mkt-container[style*="grid-template-columns: 1fr 1fr"] > div:last-child { margin-top:2rem; }
  .mkt-footer-cta { padding:4.5rem 0; }
  .cta-box { padding:2rem 1.25rem; }
  .cta-box h2 { font-size:2rem !important; }
  footer .mkt-container > div:first-child { grid-template-columns:1fr !important; gap:2rem !important; }
  footer .mkt-container > div:last-child { margin-top:2rem !important; flex-direction:column; gap:1rem; align-items:flex-start !important; }
}
@media (max-width: 380px) {
  .mkt-brand { font-size:1.1rem; }
  .mkt-hero h1 { font-size:2rem; }
}