/* -------- Base -------- */
:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#6b7280;
  --border:#e5e7eb;
  --brand:#111827;

  --violet-100:#ede9fe;
  --violet-200:#ddd6fe;
  --green-100:#CBFFE8;
  --green-500:#22c55e;
  --pink-500:#ec4899;
  
  --blue-500:#3b82f6;

  --lemon-100:#fff0c0;
  --lemon-200:#fef08a;

  --sky-100:#aacdff;

  --shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
small,.small{font-size:.875rem}

/* Containers & Layout */
.container{max-width:1120px;margin-inline:auto;padding:0 1rem}
.container-flex{max-width:1120px;margin-inline:auto;padding:0 1rem;display:flex}
.text-center{text-align:center}
.center{margin-inline:auto}
.max-w-720{max-width:720px}
.hide-sm{display:none}
@media(min-width:640px){.hide-sm{display:inline}}

.mt-12{margin-top:.75rem !important}
.mt-20{margin-top:1.25rem !important}
.mt-48{margin-top:3rem !important}
.ml-12{margin-left:.75rem !important}
.ml-20{margin-left:1.25rem !important}
.ml-48{margin-left:3rem !important}
.mb-12{margin-bottom:.75rem !important}
.mb-20{margin-bottom:1.25rem !important}
.mb-48{margin-bottom:3rem !important}
.mr-12{margin-right:.75rem !important}
.mr-20{margin-right:1.25rem !important}
.mr-48{margin-right:3rem !important}
.mx-12{margin-inline:.75rem !important}
.mx-20{margin-inline:1.25rem !important}
.mx-48{margin-inline:3rem !important}
.my-12{margin-block:.75rem !important}
.my-20{margin-block:1.25rem !important}
.my-48{margin-block:3rem !important}
.m-12{margin:.75rem !important}
.m-20{margin:1.25rem !important}
.m-48{margin:3rem !important}

.pt-12{padding-top:.75rem !important}
.pt-20{padding-top:1.25rem !important}
.pt-48{padding-top:3rem !important}
.pl-12{padding-left:.75rem !important}
.pl-20{padding-left:1.25rem !important}
.pl-48{padding-left:3rem !important}
.pb-12{padding-bottom:.75rem !important}
.pb-20{padding-bottom:1.25rem !important}
.pb-48{padding-bottom:3rem !important}
.pr-12{padding-right:.75rem !important}
.pr-20{padding-right:1.25rem !important}
.pr-48{padding-right:3rem !important}
.px-12{padding-inline:.75rem !important}
.px-20{padding-inline:1.25rem !important}
.px-48{padding-inline:3rem !important}
.py-12{padding-block:.75rem !important}
.py-20{padding-block:1.25rem !important}
.py-48{padding-block:3rem !important}
.p-12{padding:.75rem !important}
.p-20{padding:1.25rem !important}
.p-48{padding:3rem !important}

.w-32{width:320px !important}
.w-48{width:480px !important}
.w-65{width:650px !important}

.gap-145{gap:145px}
.border-radius-12{border-radius:.75rem !important}
.border-radius-20{border-radius:1.25rem !important}
.border-radius-48{border-radius:3rem !important}

.feature-section{align-items:flex-end;display:flex;}

.row{display:flex;gap:.75rem;align-items:center}
.v-center{align-items:center}
.gap-40{gap:2.5rem}
.grid-2{display:grid;grid-template-columns:1fr;}
@media(min-width:880px){.grid-2{grid-template-columns:1fr 1fr}}

/* Typography */
.serif{font-family:Georgia, "Times New Roman", Times, serif}
h1{font-size:2rem;font-weight:800;letter-spacing:-.01em;line-height:1.2;margin:0}
@media(min-width:768px){h1{font-size:3rem}}
h2{font-size:1.5rem;margin:0 0 .25rem}
.h3, h3{font-size:1.4rem;margin:0}
.muted{color:var(--muted);margin:.75rem auto 0;max-width: 550px;}
.lede{max-width:650px;margin:.75rem auto 0;color:var(--muted)}

/* Header */
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:1rem}
.logo{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;width:170px;}
.logo-mark{width:24px;height:24px;background:#000;border-radius:6px}
.logo-text{letter-spacing:.2px}
.main-nav{display:none;gap:2.5rem}
.main-nav a{color:var(--muted)}
.main-nav a:hover{color:var(--text)}
.header-cta{display:flex;gap:1.5rem;align-items:center}
.link-muted{color:var(--muted)}
@media(min-width:820px){.main-nav{display:flex}}

/* Buttons & UI */
.btn{
  appearance:none;border:1px solid transparent;background:#111827;color:#fff;
  padding:.6rem 1rem;border-radius:.55rem;font-weight:600;cursor:pointer
}
.btn:hover{filter:brightness(0.95)}
.btn-lg{padding:.8rem 1.25rem;font-size:1rem}
.btn-outline{background:transparent;color:#111827;border-color:#d1d5db}
.btn-outline:hover{background:#f3f4f6}
.link-inline{display:inline-flex;align-items:center;gap:.25rem;font-weight:400}
.badge{display:inline-flex;align-items:center;border:1px solid #e5e7eb;border-radius:999px;padding:.25rem .6rem;background:#fff;font-size:.875rem}

/* Hero Wrapper */
.hero-video-wrapper-div {
    align-self: stretch;
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}
img {display: inline-block;}
img {vertical-align: middle;max-width: 100%;display: inline-block;}
img {border: 0;}            

/* Cards */
.features{
  margin-top:1.25rem;
  display:grid;gap:1rem;
  grid-template-columns:1fr;
}
@media(min-width:700px){.features{grid-template-columns:repeat(3,1fr)}}
.card{
  border:1px solid var(--border);border-radius:.9rem;padding:1rem;box-shadow:var(--shadow);background:#fff
}
.card-tint{background:var(--violet-100);box-shadow:none;border-color:#e9e5ff;padding:30px;}
.card h3{margin:.25rem 0 .25rem;font-size:1.05rem;text-align: left;}
.card p{color:var(--muted);font-size:.80rem;text-align: left;}
.card-icon{width:40px;height:40px;border-radius:999px;background:#e5e7eb}
.link-card{text-align:left;font-size:.875rem;font-weight: 400;}
.bg-green{background:#e7f9ef;box-shadow:0 0 0 2px #c7f0d8 inset}
.bg-pink{background:#fde7f3;box-shadow:0 0 0 2px #fbd1e7 inset}
.bg-blue{background:#e6effe;box-shadow:0 0 0 2px #d3e2ff inset}

/* Hero Area */
.hero{padding:2.75rem 0 2rem}
.hero .actions{margin-top:1rem}
.sales{margin:3.75rem auto 0}
.sales h2{font-size:1.875rem}
.logo-row{
  margin-top:1.25rem;display:grid;gap:.75rem;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
.logo-row span{
  display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--border);border-radius:.5rem;padding:.5rem;background:#fafafa;color:#64748b;font-size:.9rem
}
.clients_logo{margin-top:1.25rem;display:flex;gap:5rem;justify-content:center;}
@media(min-width:760px){.logo-row{grid-template-columns:repeat(5,1fr)}}

/* Sections */
.section{padding:3rem 0;border-top:1px solid var(--border)}
.section-purple-100{background:var(--violet-100)}
.section-green-100{background:var(--green-100)}
.section-lemon-100{background:var(--lemon-100)}
.section-sky-100{background:var(--sky-100)}
.section-white-000{background:#ffffff}
.section-black-100{background:#1a1a1a;color:#ffffff}
.section-h1{
  font-size:2rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:0
}  

/* Window mock */
.window{width:100%;overflow:hidden}
.window-110{width:110%;overflow:hidden}
.window-120{width:120%;overflow:hidden}
.chrome{height:34px;border-bottom:1px solid #ecebff;background:linear-gradient(#f6f5ff,#f1f0ff);display:flex;gap:.35rem;align-items:center;padding-left:.6rem}
.chrome > span{width:10px;height:10px;border-radius:999px;background:#ff6b6b;box-shadow:16px 0 0 #f7d060, 32px 0 0 #4ade80}
.window-body{padding:14px}
.chat{display:grid;gap:.5rem}
.bubble{
  max-width:80%;
  padding:.5rem .7rem;border-radius:14px;border:1px solid #e5e7eb;background:#f9fafb;font-size:.95rem
}
.bubble.right{justify-self:end;background:#eef2ff;border-color:#dfe3ff}
.voice{
  display:flex;align-items:center;gap:.5rem;border:1px solid #e6eaf7;background:#f8f9ff;border-radius:.75rem;padding:.5rem .6rem;max-width:360px
}
.voice.compact{max-width:220px}
.voice .bar{width:18px;height:18px;border-radius:999px;background:#111827}
.voice .track{flex:1;display:flex;gap:3px}
.voice .tick{height:8px;width:6px;background:#c7d2fe;border-radius:1px}
.voice .time{font-variant-numeric:tabular-nums;color:#475569;font-size:.85rem}

/* Profile mock */
.profile{display:flex;gap:.9rem;align-items:center}
.avatar{width:56px;height:56px;border-radius:999px;background:linear-gradient(145deg,#dbeafe,#e9d5ff);border:1px solid #e5e7eb}
.profile-main .name{font-weight:700}
.profile-main .meta{color:#64748b;font-size:.9rem}
.tags{margin-top:.35rem;display:flex;gap:.35rem;flex-wrap:wrap}
.tags span{border:1px solid #e5e7eb;border-radius:999px;padding:.15rem .5rem;background:#fff;font-size:.8rem}
.properties{margin-top:1rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.prop{display:flex;justify-content:space-between;border:1px dashed #e5e7eb;padding:.45rem .6rem;border-radius:.5rem;background:#fcfcff}
.prop span{color:#64748b}
.notes{margin-top:1rem}
.note-row{height:10px;background:#eef2ff;border-radius:6px;margin-bottom:.4rem}
.note-row.short{width:70%}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:1.8rem 0}
.footer-inner{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.footer-links{display:flex;gap:1rem}

/* Hero Section */
.hero-all-in-one {
    text-align: center;
    margin-bottom: 60px;
}

.hero-all-in-one h1 {
    font-size: 42px;
    font-weight: 400;
    color: #1a1a1a;
    margin-bottom: 16px;
    line-height: 1.2;
}

.hero-all-in-one-subtitle {
    font-size: 16px;
    color: #666666;
    max-width: 600px;
    margin: 0 auto 32px;
    line-height: 1.5;
}

.cta-button {
    background-color: #e53e3e;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.cta-button:hover {
    background-color: #c53030;
}

/* Features Grid */
.features-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 1.25rem;
}
.features-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}    

.feature-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    min-height: 400px;
}

.card-header {
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
    padding: 0 50px 0 50px;
}

.card-header h3 {
    font-size: 20px;
    font-weight: 400;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.card-header p {
    font-size: 14px;
    color: #666666;
    margin-bottom: 12px;
    line-height: 1.4;
    padding: 0px;
    margin-top: 0px;
}

.learn-more {
    color: #4a5568;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.learn-more:hover {
    color: #2d3748;
}

.card-mockup {
    flex: 1;
    background: white;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #e2e8f0;
}

/* AI Features Section */
.ai-features-section {
    background: #0a0a0a;
    color: white;
    padding: 80px 0;
    position: relative;
}

.ai-features-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.ai-features-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.ai-hero-content {
    text-align: center;
    margin-bottom: 60px;
}

.ai-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 80px;
}

.ai-feature-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.ai-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.5), transparent);
}

.ai-feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
    .features-grid-2 {
        grid-template-columns: 1fr;
    }   
    .features-grid-3 {
        grid-template-columns: 1fr;
    }     
    
    .hero-all-in-one h1 {
        font-size: 32px;
    }
    
    .container {
        padding: 20px 16px;
    }
    
    .feature-card {
        min-height: 350px;
    }

    .ai-features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}