:root {
    --denim:#0b1b3f;
    --denim-soft:#1d3362;
    --kraft:#f7e4cc;
    --kraft-deep:#c28c4a;
    --pos-green:#25d366;
    --rebaja:#ff7f3f;
    --grafito:#111322;
    --neon:#ff4fd8;
    --cloud:#f5f6fb;
    --ink:#0b0d18;
    --muted:#5b5f73;
    --radius-lg:26px;
    --radius-md:16px;
    --radius-sm:10px;
    --shadow-soft:0 30px 80px rgba(12,18,46,0.18);
    --shadow-card:0 18px 45px rgba(9,13,30,0.12);
}
* { box-sizing:border-box; }
body {
    margin:0;
    font-family:'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background:var(--cloud);
    color:var(--ink);
    line-height:1.55;
}
img { max-width:100%; height:auto; }

.hero {
    position:relative;
    background:radial-gradient(circle at 20% 20%, rgba(255,79,216,0.35), transparent 55%),
              radial-gradient(circle at 80% 0%, rgba(37,211,102,0.25), transparent 45%),
              linear-gradient(120deg, var(--denim) 0%, var(--denim-soft) 60%, #050b1f 100%);
    color:white;
    padding:120px 0 140px;
    overflow:hidden;
}
.hero::after {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 30% 50%, rgba(255,255,255,0.08), transparent 50%);
    pointer-events:none;
}
.hero-inner {
    position:relative;
    max-width:1200px;
    margin:0 auto;
    padding:0 32px;
    display:flex;
    align-items:flex-start;
    gap:60px;
}
.hero-copy { flex:1; }
.hero-eyebrow {
    font-size:14px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.72);
    margin-bottom:16px;
}
.hero h1 {
    font-size:48px;
    line-height:1.05;
    margin:0 0 18px;
}
.hero p { font-size:18px; color:rgba(255,255,255,0.92); margin:0 0 26px; }
.hero-ctas { display:flex; flex-wrap:wrap; gap:14px; }
.cta-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 26px;
    border-radius:var(--radius-sm);
    font-weight:600;
    text-decoration:none;
    background:var(--pos-green);
    color:#031303;
    box-shadow:0 12px 30px rgba(37,211,102,0.35);
}
.cta-outline {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 26px;
    border-radius:var(--radius-sm);
    font-weight:600;
    text-decoration:none;
    border:1px solid rgba(255,255,255,0.28);
    color:white;
}
.hero-micro { display:flex; gap:18px; margin-top:28px; font-size:14px; color:rgba(255,255,255,0.85); }

.hero-board {
    flex:0 0 360px;
    background:rgba(7,11,35,0.65);
    border-radius:var(--radius-lg);
    padding:28px;
    backdrop-filter:blur(18px);
    box-shadow:var(--shadow-soft);
}
.board-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:22px;
    font-size:15px;
    color:rgba(255,255,255,0.7);
}
.board-metric {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:18px;
}
.board-metric strong { font-size:38px; }
.board-metric small { text-transform:uppercase; letter-spacing:0.08em; font-size:12px; color:rgba(255,255,255,0.65); }
.board-stats {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}
.board-chip {
    background:rgba(255,255,255,0.07);
    padding:14px;
    border-radius:var(--radius-sm);
    font-size:13px;
}
.board-chip span { display:block; font-size:22px; font-weight:600; color:white; }

.container {
    max-width:1180px;
    margin:-60px auto 0;
    padding:0 32px 80px;
}
.container section:first-of-type {
    margin-top:80px;
}
section { margin-bottom:90px; }
.section-title { font-size:34px; margin-bottom:12px; color:var(--grafito); }
.section-lede { font-size:18px; color:var(--muted); margin-bottom:32px; max-width:720px; }

.journey-track {
    position:relative;
    padding:50px;
    border-radius:var(--radius-lg);
    background:white;
    box-shadow:var(--shadow-card);
}
.journey-track::before {
    content:"";
    position:absolute;
    left:50%;
    top:40px;
    bottom:40px;
    width:2px;
    background:linear-gradient(180deg, var(--pos-green), var(--rebaja));
    transform:translateX(-50%);
}
.journey-steps { display:grid; grid-template-columns:repeat(2,1fr); gap:40px 60px; position:relative; z-index:1; }
.journey-step {
    padding:0 12px;
}
.step-label {
    font-size:12px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--rebaja);
}
.journey-step h3 { margin:8px 0 12px; font-size:22px; }
.journey-step p { margin:0; color:var(--muted); }

.operation-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.operation-card {
    border-radius:var(--radius-md);
    padding:26px;
    background:white;
    box-shadow:var(--shadow-card);
    position:relative;
}
.operation-card::after {
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:2px;
    background:linear-gradient(135deg, rgba(255,127,63,0.5), rgba(255,79,216,0.4));
    mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite:exclude;
    pointer-events:none;
}
.operation-card h3 { margin:0 0 10px; font-size:22px; }
.operation-card ul { padding-left:20px; margin:0; color:var(--muted); }
.operation-card ul li { margin-bottom:6px; }

.insights-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.insight {
    background:white;
    border-radius:var(--radius-md);
    padding:24px;
    box-shadow:var(--shadow-card);
}
.insight strong { font-size:40px; display:block; color:var(--denim); }
.insight span { color:var(--muted); }

/* Architecture / flow diagram */
.architecture { background:linear-gradient(180deg,#ffffff, #fbfdff); padding:28px; border-radius:18px; box-shadow:var(--shadow-card); }
.arch-steps { display:flex; gap:18px; justify-content:space-between; margin-top:18px; flex-wrap:wrap; }
.arch-step { flex:1 1 180px; background:#fff; border-radius:12px; padding:18px; text-align:center; box-shadow:0 8px 30px rgba(9,13,30,0.06); position:relative; }
.arch-icon { width:56px; height:56px; margin:0 auto 12px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:26px; background:linear-gradient(135deg,var(--denim-soft),var(--pos-green)); color:white; box-shadow:var(--shadow-soft); }
.arch-step h4 { margin:6px 0 8px; font-size:16px; }
.arch-step p { margin:0; color:var(--muted); font-size:13px; }
.arch-step:not(:last-child)::after { content:""; position:absolute; right:-12px; top:50%; width:28px; height:2px; background:linear-gradient(90deg,var(--pos-green),var(--rebaja)); transform:translateY(-50%); border-radius:2px; }
.arch-legend { display:flex; gap:18px; margin-top:16px; color:var(--muted); font-size:14px; justify-content:center; }
@media (max-width:900px) {
    .arch-steps { flex-direction:column; }
    .arch-step:not(:last-child)::after { display:none; }
}

.testimonials { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.testimonial {
    background:var(--grafito);
    color:white;
    border-radius:var(--radius-md);
    padding:26px;
    position:relative;
}
.testimonial::before {
    content:"";
    position:absolute;
    width:4px;
    inset:24px auto 24px 0;
    background:linear-gradient(180deg, var(--pos-green), var(--rebaja));
    border-radius:4px;
}
.testimonial cite { display:block; margin-top:14px; font-style:normal; color:rgba(255,255,255,0.7); }
.testimonial .client-logos { margin-top:12px; display:flex; gap:10px; align-items:center; }
.testimonial .client-logo { width:56px; height:36px; border-radius:6px; background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:14px; }

.case-studies { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:18px; }
.case-card { background:#fff; padding:16px; border-radius:12px; box-shadow:var(--shadow-card); color:var(--grafito); }

.checklist-board {
    background:var(--kraft);
    border-radius:var(--radius-lg);
    padding:36px;
    box-shadow:var(--shadow-card);
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}
.checklist-item {
    display:flex;
    gap:12px;
    align-items:flex-start;
}
.checklist-item span {
    width:26px;
    height:26px;
    border-radius:50%;
    background:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    color:var(--denim);
}
.checklist-item p { margin:0; color:var(--grafito); }

.faq details {
    background:white;
    margin-bottom:14px;
    border-radius:var(--radius-sm);
    padding:18px 22px;
    box-shadow:0 8px 22px rgba(15,17,34,0.08);
}
.faq summary { cursor:pointer; font-weight:600; }

.cta-panel {
    background:var(--grafito);
    border-radius:var(--radius-lg);
    padding:48px;
    color:white;
    display:flex;
    gap:32px;
    align-items:center;
    justify-content:space-between;
}
.cta-panel h3 { font-size:32px; margin:0 0 12px; }
.cta-panel p { margin:0 0 24px; color:rgba(255,255,255,0.75); }
.cta-panel .cta-button { background:var(--pos-green); color:#031303; }
.cta-panel .cta-outline { border-color:rgba(255,255,255,0.35); }

/* WhatsApp floating button */
.whatsapp-float { position:fixed; right:18px; bottom:18px; z-index:9999; display:flex; align-items:center; gap:10px; }
.whatsapp-float a {
    width:56px;
    height:56px;
    border-radius:50%;
    background:var(--pos-green);
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    box-shadow:0 8px 30px rgba(0,0,0,0.15);
    text-decoration:none;
    position:relative;
    animation: wa-bounce 4s ease-in-out infinite;
}
.whatsapp-float a::after {
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:56px;
    height:56px;
    border-radius:50%;
    background:rgba(37,211,102,0.08);
    box-shadow:0 0 0 rgba(37,211,102,0.6);
    animation:wa-pulse 2.6s infinite;
    pointer-events:none;
}
@keyframes wa-pulse {
    0% { transform:translate(-50%, -50%) scale(1); opacity:0.9; }
    60% { transform:translate(-50%, -50%) scale(1.45); opacity:0.2; }
    100% { transform:translate(-50%, -50%) scale(1.6); opacity:0; }
}
@keyframes wa-bounce {
    0%, 20%, 50%, 80%, 100% { transform:translateY(0); }
    40% { transform:translateY(-6px); }
    60% { transform:translateY(-3px); }
}
.whatsapp-float a:hover { transform:translateY(-6px) scale(1.04); box-shadow:0 12px 36px rgba(0,0,0,0.2); }
.whatsapp-float .wa-bubble {
    background:rgba(0,0,0,0.85);
    color:#fff;
    padding:8px 12px;
    border-radius:8px;
    font-size:13px;
    display:none;
    transform-origin:right center;
    transition:transform .18s ease, opacity .18s ease;
    opacity:0;
}
.whatsapp-float:hover .wa-bubble { display:block; opacity:1; transform:translateX(-6px); }

@media (max-width: 1024px) {
    .hero-inner { flex-direction:column; }
    .hero-board { width:100%; }
    .operation-cards { grid-template-columns:repeat(2,1fr); }
    .testimonials { grid-template-columns:1fr; }
    .journey-track { padding:40px 30px; }
    .journey-steps { grid-template-columns:1fr; }
    .journey-track::before { left:20px; }
    .journey-step { padding-left:40px; position:relative; }
    .journey-step::before { content:""; position:absolute; width:12px; height:12px; border-radius:50%; background:var(--pos-green); left:10px; top:6px; }
}
@media (max-width: 680px) {
    .container { padding:0 20px 70px; }
    .hero { padding:80px 0 100px; }
    .hero h1 { font-size:36px; }
    .hero-micro { flex-direction:column; }
    .operation-cards { grid-template-columns:1fr; }
    .insights-grid { grid-template-columns:1fr; }
    .checklist-board { grid-template-columns:1fr; }
    .cta-panel { flex-direction:column; text-align:center; }
}

/* Pricing utilities (replaces inline styles in pricing cards) */
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.pricing-card { text-align: left; padding: 28px; }
.plan-price { font-size: 20px; margin: 8px 0 14px; font-weight: 700; }
.plan-price small { font-size: 12px; color: var(--muted); }
.plan-annual { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.savings-badge { background: #e6f7ff; color: #0366a6; padding: 4px 8px; border-radius: 6px; margin-left: 8px; font-weight: 700; display: inline-block; }
.plan-ctas { margin-top: 16px; display: flex; gap: 8px; align-items: center; }

@media (max-width: 1024px) {
    .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .plan-ctas { flex-wrap: wrap; }
}