:root {
    --bg: #FFFDF7;
    --bg2: #FFF8EC;
    --bg3: #FFF3E0;
    --accent: #C8956C;
    --accent2: #A0522D;
    --accent-light: rgba(200,149,108,.12);
    --green: #4CAF50;
    --card: rgba(200,149,108,.04);
    --border: rgba(160,82,45,.1);
    --text: #2D1B0E;
    --muted: #8B7355;
    --radius: 20px;
    --shadow: 0 4px 30px rgba(160,82,45,.08);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; }

/* NAV */
nav { position:fixed; top:0; left:0; right:0; z-index:999; padding:1rem 2rem; display:flex; align-items:center; justify-content:space-between; background:rgba(255,253,247,.9); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); transition:all .3s; }
.nav-logo { display:flex; align-items:center; gap:.6rem; font-size:1.3rem; font-weight:800; color:var(--text); text-decoration:none; }
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a { color:var(--muted); text-decoration:none; font-size:.9rem; font-weight:500; transition:.2s; }
.nav-links a:hover { color:var(--accent2); }
.nav-cta { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; padding:.55rem 1.4rem; border-radius:100px; font-size:.85rem; font-weight:600; text-decoration:none; transition:.2s; }
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 4px 20px rgba(200,149,108,.4); color:#fff; }
.nav-toggle { display:none; background:none; border:none; color:var(--text); font-size:1.5rem; cursor:pointer; }

/* ANIMATIONS */
.anim-left { opacity:0; transform:translateX(-40px); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); }
.anim-right { opacity:0; transform:translateX(40px); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); }
.anim-up, .feature-card, .step-card, .pricing-card { opacity:0; transform:translateY(40px); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); }
.anim-visible { opacity:1!important; transform:translate(0,0)!important; }
.anim-scale { opacity:0; transform:scale(.9); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); }
.anim-scale.anim-visible { opacity:1; transform:scale(1); }

/* HERO */
.hero { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:7rem 1.5rem 4rem; position:relative; overflow:hidden; background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%); }
.hero::before { content:''; position:absolute; top:-200px; right:-200px; width:600px; height:600px; background:radial-gradient(circle,rgba(200,149,108,.15) 0%,transparent 70%); border-radius:50%; pointer-events:none; }
.hero::after { content:''; position:absolute; bottom:-200px; left:-200px; width:500px; height:500px; background:radial-gradient(circle,rgba(160,82,45,.1) 0%,transparent 70%); border-radius:50%; pointer-events:none; }

/* HERO MARQUEE */
.hero-marquee-wrap { width:100%; position:absolute; top:80px; left:0; background:rgba(200,149,108,.06); border-top:1px solid rgba(200,149,108,.15); border-bottom:1px solid rgba(200,149,108,.15); padding:.85rem 0; overflow:hidden; white-space:nowrap; z-index:10; }
.hero-marquee { display:inline-block; animation:marquee 25s linear infinite; }
.hero-marquee span { display:inline-flex; align-items:center; gap:.6rem; color:var(--accent2); font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; margin-right:3rem; }
.hero-marquee .dot { width:6px; height:6px; border-radius:50%; background:var(--green); animation:blink 1.5s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

.hero h1 { font-size:clamp(2.4rem,6vw,4.5rem); font-weight:900; line-height:1.08; margin-top:4rem; margin-bottom:1.5rem; }
.hero h1 .grad { background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero p { font-size:clamp(1rem,2.5vw,1.2rem); color:var(--muted); max-width:620px; line-height:1.7; margin-bottom:2.5rem; }
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
.btn-hero-primary { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; padding:.85rem 2.2rem; border-radius:12px; font-size:1rem; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; transition:.3s; box-shadow:0 4px 25px rgba(200,149,108,.35); }
.btn-hero-primary:hover { transform:translateY(-3px); box-shadow:0 8px 40px rgba(200,149,108,.5); color:#fff; }
.btn-hero-outline { border:1px solid var(--border); color:var(--text); padding:.85rem 2.2rem; border-radius:12px; font-size:1rem; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.6); transition:.3s; backdrop-filter:blur(8px); }
.btn-hero-outline:hover { border-color:var(--accent); color:var(--accent2); transform:translateY(-3px); }

/* HERO IMAGE SHOWCASE */
.hero-showcase { position:relative; margin-top:3rem; width:100%; max-width:900px; }
.hero-showcase img { width:100%; border-radius:20px; box-shadow:0 20px 60px rgba(160,82,45,.15); }
.hero-showcase::before { content:''; position:absolute; inset:-4px; border-radius:24px; background:linear-gradient(135deg,rgba(200,149,108,.3),rgba(160,82,45,.1)); z-index:-1; }

/* STATS */
.stats { display:flex; justify-content:center; gap:3rem; flex-wrap:wrap; padding:3rem 2rem; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-top:3rem; background:rgba(255,255,255,.5); }
.stat-item { text-align:center; }
.stat-item .num { font-size:2.2rem; font-weight:900; background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.stat-item .lbl { font-size:.85rem; color:var(--muted); margin-top:.25rem; }

/* SECTION */
section { padding:5rem 1.5rem; }
.section-tag { display:inline-block; background:var(--accent-light); border:1px solid rgba(200,149,108,.25); color:var(--accent2); padding:.3rem .9rem; border-radius:100px; font-size:.75rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:1rem; }
.section-title { font-size:clamp(1.8rem,4vw,3rem); font-weight:800; line-height:1.2; margin-bottom:1rem; }
.section-sub { color:var(--muted); font-size:1.05rem; line-height:1.7; max-width:580px; }
.container { max-width:1200px; margin:0 auto; }
.text-center { text-align:center; }
.mx-auto { margin-left:auto; margin-right:auto; }

/* SHOWCASE ROWS */
.showcase-wrap { display:flex; flex-direction:column; gap:6rem; padding:3rem 0; }
.showcase-row { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.showcase-row:nth-child(even) .showcase-img { order:2; }
.showcase-row:nth-child(even) .showcase-text { order:1; text-align:right; }
.showcase-row:nth-child(even) .showcase-text .feature-icon { margin-left:auto; margin-right:0; }
.showcase-text h3 { font-size:1.6rem; font-weight:800; margin-bottom:1rem; }
.showcase-text p { color:var(--muted); line-height:1.7; font-size:1.05rem; }
.showcase-img { border-radius:24px; overflow:hidden; position:relative; min-height:300px; box-shadow:var(--shadow); }
.showcase-img img { width:100%; height:100%; object-fit:cover; min-height:300px; border-radius:24px; transition:transform .5s; }
.showcase-img:hover img { transform:scale(1.03); }
.feature-icon { width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1.25rem; }

/* PLATFORM INTEGRATION */
.platform-section { background:var(--bg2); }
.platform-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; margin-top:3rem; }
.platform-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:2rem; text-align:center; transition:.3s; box-shadow:var(--shadow); }
.platform-card:hover { transform:translateY(-6px); box-shadow:0 12px 40px rgba(160,82,45,.12); }
.platform-card img { height:48px; object-fit:contain; margin-bottom:1rem; }
.platform-card h4 { font-size:1rem; font-weight:700; margin-bottom:.4rem; }
.platform-card p { color:var(--muted); font-size:.85rem; line-height:1.5; }
.platform-badge { display:inline-flex; align-items:center; gap:.4rem; background:rgba(76,175,80,.1); color:#2e7d32; padding:.2rem .7rem; border-radius:100px; font-size:.7rem; font-weight:700; margin-top:.75rem; }

/* EASY UI SECTION */
.easy-ui-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3rem; }
.easy-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:2rem; text-align:center; transition:.3s; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.easy-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--accent),var(--accent2)); transform:scaleX(0); transition:.3s; transform-origin:left; }
.easy-card:hover { transform:translateY(-5px); }
.easy-card:hover::before { transform:scaleX(1); }
.easy-card .card-icon { width:64px; height:64px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin:0 auto 1.2rem; }
.easy-card h3 { font-size:1.1rem; font-weight:700; margin-bottom:.5rem; }
.easy-card p { color:var(--muted); font-size:.9rem; line-height:1.6; }

/* IMAGE BANNER */
.img-banner { position:relative; padding:0; overflow:hidden; height:400px; }
.img-banner img { width:100%; height:100%; object-fit:cover; }
.img-banner-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(45,27,14,.7),rgba(200,149,108,.4)); display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:2rem; }
.img-banner-overlay h2 { color:#fff; font-size:clamp(1.8rem,4vw,3rem); font-weight:900; margin-bottom:1rem; }
.img-banner-overlay p { color:rgba(255,255,255,.85); font-size:1.1rem; max-width:600px; line-height:1.7; }

/* HOW IT WORKS */
.how-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2rem; margin-top:3.5rem; }
.step-card { text-align:center; padding:2rem 1.5rem; background:#fff; border:1px solid var(--border); border-radius:var(--radius); transition:.3s; box-shadow:var(--shadow); }
.step-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(160,82,45,.12); }
.step-num { width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.3rem; font-weight:800; margin:0 auto 1.25rem; }
.step-card h3 { font-size:1rem; font-weight:700; margin-bottom:.5rem; }
.step-card p { color:var(--muted); font-size:.875rem; line-height:1.6; }

/* PRICING */
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.5rem; margin-top:3.5rem; max-width:980px; margin-left:auto; margin-right:auto; }
.pricing-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:2.5rem 2rem; position:relative; transition:.3s; box-shadow:var(--shadow); }
.pricing-card:hover { transform:translateY(-5px); box-shadow:0 12px 40px rgba(160,82,45,.12); }
.pricing-card.popular { border-color:var(--accent); background:linear-gradient(135deg,rgba(200,149,108,.06),rgba(160,82,45,.03)); }
.popular-badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; padding:.3rem 1.2rem; border-radius:100px; font-size:.75rem; font-weight:700; white-space:nowrap; }
.pricing-name { font-size:.85rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:.75rem; }
.pricing-price { font-size:3rem; font-weight:900; line-height:1; margin-bottom:.25rem; }
.pricing-price span { font-size:1.1rem; font-weight:400; color:var(--muted); }
.pricing-desc { color:var(--muted); font-size:.875rem; margin-bottom:1.75rem; line-height:1.5; }
.pricing-features { list-style:none; margin-bottom:2rem; display:flex; flex-direction:column; gap:.75rem; }
.pricing-features li { display:flex; align-items:center; gap:.65rem; font-size:.9rem; color:var(--muted); }
.pricing-features li i { color:var(--green); font-size:1rem; flex-shrink:0; }
.pricing-features li.off { opacity:.45; }
.pricing-features li.off i { color:var(--muted); }
.btn-pricing { display:block; text-align:center; padding:.85rem; border-radius:100px; font-weight:700; font-size:.95rem; text-decoration:none; transition:.3s; }
.btn-pricing.primary { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; }
.btn-pricing.primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(200,149,108,.4); }
.btn-pricing.outline { border:1px solid var(--border); color:var(--text); background:transparent; }
.btn-pricing.outline:hover { border-color:var(--accent); color:var(--accent2); }

/* CONTACT */
.contact-wrap { max-width:800px; margin:3.5rem auto 0; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:3rem 2.5rem; display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; box-shadow:var(--shadow); }
.contact-text h3 { font-size:1.5rem; font-weight:800; margin-bottom:.75rem; }
.contact-text p { color:var(--muted); line-height:1.65; font-size:.95rem; }
.contact-btns { display:flex; flex-direction:column; gap:1rem; }
.btn-wa { display:flex; align-items:center; justify-content:center; gap:.65rem; background:linear-gradient(135deg,#25D366,#128C7E); color:#fff; padding:1rem 1.5rem; border-radius:14px; font-weight:700; font-size:.95rem; text-decoration:none; transition:.3s; }
.btn-wa:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(37,211,102,.35); color:#fff; }
.btn-mail { display:flex; align-items:center; justify-content:center; gap:.65rem; background:var(--bg2); border:1px solid var(--border); color:var(--text); padding:1rem 1.5rem; border-radius:14px; font-weight:600; font-size:.95rem; text-decoration:none; transition:.3s; }
.btn-mail:hover { border-color:var(--accent); color:var(--accent2); transform:translateY(-2px); }

/* PANEL CTA */
.panel-cta { background:var(--bg3); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:1rem 2rem; display:flex; align-items:center; justify-content:center; gap:1.5rem; flex-wrap:wrap; }
.panel-cta a { color:var(--muted); text-decoration:none; font-size:.85rem; font-weight:500; display:flex; align-items:center; gap:.4rem; transition:.2s; }
.panel-cta a:hover { color:var(--accent2); }

/* FOOTER */
.footer-container { position:relative; display:flex; justify-content:center; border-top:1px solid var(--border); padding:2.5rem 1.5rem; color:var(--muted); font-size:.85rem; background:var(--bg2); }
.footer-logo-wrap { position:absolute; left:2.5rem; bottom:2.5rem; text-align:left; }
.footer-content-wrap { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem; }
.footer-container a { color:var(--muted); text-decoration:none; }
.footer-container a:hover { color:var(--accent2); }

/* FLOATING WA */
.wa-float { position:fixed; bottom:2rem; right:2rem; z-index:998; width:58px; height:58px; border-radius:50%; background:linear-gradient(135deg,#25D366,#128C7E); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.6rem; text-decoration:none; box-shadow:0 4px 20px rgba(37,211,102,.5); animation:float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.wa-float:hover { color:#fff; transform:scale(1.1); }

/* TESTIMONIAL */
.testimonial-section { background:var(--bg2); }
.testimonial-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3rem; }
.testimonial-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:2rem; box-shadow:var(--shadow); transition:.3s; }
.testimonial-card:hover { transform:translateY(-4px); }
.testimonial-card .stars { color:#f5a623; font-size:1rem; margin-bottom:.75rem; }
.testimonial-card blockquote { color:var(--muted); font-size:.95rem; line-height:1.65; font-style:italic; margin-bottom:1rem; }
.testimonial-card .author { font-weight:700; font-size:.9rem; }
.testimonial-card .role { color:var(--muted); font-size:.8rem; }

/* KEYFRAMES */
@keyframes sway { 0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(5deg)} }
@keyframes float-anim { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes pulse-glow { 0%,100%{box-shadow:0 0 20px rgba(200,149,108,.2)} 50%{box-shadow:0 0 40px rgba(200,149,108,.4)} }
@keyframes slideInRight { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }

/* RESPONSIVE */
@media(max-width:768px) {
    .nav-links,.nav-cta { display:none; }
    .nav-toggle { display:block; }
    .nav-links.open { display:flex; flex-direction:column; position:fixed; top:65px; left:0; right:0; background:var(--bg); padding:1.5rem; gap:1.5rem; border-bottom:1px solid var(--border); }
    .contact-wrap { grid-template-columns:1fr; }
    .stats { gap:2rem; }
    .hero { padding-top:5rem; }
    .showcase-row { grid-template-columns:1fr; gap:2.5rem; text-align:center!important; }
    .showcase-row:nth-child(even) .showcase-img { order:1; }
    .showcase-row:nth-child(even) .showcase-text { order:2; }
    .showcase-row:nth-child(even) .showcase-text .feature-icon { margin:0 auto 1.25rem; }
    .showcase-text .feature-icon { margin:0 auto 1.25rem; }
    .platform-grid { grid-template-columns:repeat(2,1fr); }
    .easy-ui-grid { grid-template-columns:1fr; }
    .testimonial-grid { grid-template-columns:1fr; }
    .img-banner { height:300px; }
    .footer-container { flex-direction:column; align-items:center; gap:2rem; }
    .footer-logo-wrap { position:static; text-align:center; order:2; }
    .footer-content-wrap { order:1; }
}