/* ============================================
   EpokTech v2.0 - Modern SaaS-Style CSS
   Mobile-first, Dark/Light theme
   Font: Inter
   ============================================ */

:root,
[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-card: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #94a3b8;
    --border-color: #e2e8f0;
    --border-light: #f1f5f9;
    --accent: #1e293b;
    --accent-hover: #64748b;
    --accent-light: rgba(30,41,59,0.08);
    --accent-2: #475569;
    --accent-2-light: rgba(71,85,105,0.08);
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --gradient-1: linear-gradient(135deg, #1e293b 0%, #64748b 100%);
    --gradient-2: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.07);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.1);
    --shadow-xl: 0 24px 60px rgba(0,0,0,0.14);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --header-height: 64px;
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-card: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    --border-color: #334155;
    --border-light: #1e293b;
    --accent: #94a3b8;
    --accent-hover: #cbd5e1;
    --accent-light: rgba(148,163,184,0.15);
    --accent-2: #64748b;
    --accent-2-light: rgba(100,116,139,0.12);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.4);
    --shadow-xl: 0 24px 60px rgba(0,0,0,0.5);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background var(--transition), color var(--transition);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: var(--header-height);
}
a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-hover); }
img { max-width:100%; height:auto; display:block; }
ul { list-style: none; }
.container { width:100%; max-width:1200px; margin:0 auto; padding:0 1.5rem; }

/* Typography */
h1,h2,h3,h4,h5,h6 { color: var(--text-primary); line-height:1.2; font-weight:700; }
.section__subtitle {
    color: var(--accent); font-weight:600; font-size:0.85rem;
    text-transform:uppercase; letter-spacing:0.1em; margin-bottom:0.5rem;
}
.section__title { font-size: clamp(1.85rem,4vw,2.65rem); margin-bottom:1rem; letter-spacing:-0.02em; }
.section__desc { font-size:1.05rem; color:var(--text-secondary); max-width:600px; margin:0 auto 3rem; line-height:1.7; }
.section { padding:5rem 0; }
.section--gray { background: var(--bg-secondary); }
.text-center { text-align:center; }
.text-gradient {
    background: var(--gradient-1);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* Buttons */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
    padding:0.7rem 1.65rem; border-radius:var(--radius-sm); font-weight:600;
    font-size:0.9rem; border:1.5px solid transparent; cursor:pointer;
    transition:all var(--transition); text-decoration:none; line-height:1.4; font-family:inherit;
    white-space:nowrap;
}
.btn--primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn--primary:hover {
    background:var(--accent-hover); border-color:var(--accent-hover); color:#fff;
    transform:translateY(-1px); box-shadow:0 6px 20px rgba(30,41,59,0.25);
}
.btn--outline { background:transparent; color:var(--text-primary); border-color:var(--border-color); }
.btn--outline:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }
.btn--ghost { background:transparent; color:var(--accent); border-color:transparent; padding:0.5rem 1rem; }
.btn--ghost:hover { background:var(--accent-light); }
.btn--sm { padding:0.45rem 1.1rem; font-size:0.82rem; }
.btn--lg { padding:0.85rem 2rem; font-size:1rem; }
.btn--white { background:#fff; color:var(--accent); border-color:#fff; }
.btn--white:hover { background:rgba(255,255,255,0.9); color:var(--accent); transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,0.15); }
.btn--outline-light { background:transparent; color:#fff; border-color:rgba(255,255,255,0.4); }
.btn--outline-light:hover { background:rgba(255,255,255,0.1); border-color:#fff; color:#fff; transform:translateY(-1px); }

/* Header */
.header {
    position:fixed; top:0; left:0; width:100%; z-index:1000;
    background:var(--bg-primary); transition:all var(--transition);
    border-bottom:1px solid var(--border-light);
}
.header.scrolled {
    border-bottom-color:var(--border-color); box-shadow:var(--shadow-md);
    backdrop-filter:saturate(180%) blur(16px); background:rgba(255,255,255,0.85);
}
[data-theme="dark"] .header.scrolled { background:rgba(15,23,42,0.88); }
.nav { display:flex; align-items:center; justify-content:space-between; height:var(--header-height); }
.nav__logo { font-size:1.5rem; font-weight:800; text-decoration:none; display:flex; align-items:center; gap:0; }
.logo-ep { color:var(--text-primary); }
.logo-tech { color:var(--accent); }
.nav__list { display:flex; align-items:center; gap:0.15rem; }
.nav__link {
    color:var(--text-secondary); font-weight:500; font-size:0.875rem; padding:0.45rem 0.9rem;
    border-radius:var(--radius-sm); transition:all var(--transition); text-decoration:none;
}
.nav__link:hover, .nav__link.active { color:var(--accent); background:var(--accent-light); }

.nav__dropdown { position:relative; }
.nav__dropdown-menu {
    position:absolute; top:calc(100% + 4px); left:0; min-width:220px; background:var(--bg-card);
    border:1px solid var(--border-color); border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
    padding:0.4rem; opacity:0; visibility:hidden; transform:translateY(8px);
    transition:all var(--transition); z-index:100;
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown.open .nav__dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }
.nav__dropdown-link {
    display:flex; align-items:center; gap:0.65rem; padding:0.6rem 0.85rem;
    color:var(--text-secondary); border-radius:var(--radius-sm); font-size:0.85rem;
    font-weight:500; transition:all var(--transition); text-decoration:none;
}
.nav__dropdown-link:hover { background:var(--accent-light); color:var(--accent); }
.nav__dropdown-link i { font-size:0.95rem; width:18px; text-align:center; color:var(--accent); }

.nav__actions { display:flex; align-items:center; gap:0.6rem; }
.theme-toggle {
    background:var(--bg-secondary); border:1px solid var(--border-color); color:var(--text-secondary);
    width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all var(--transition); font-size:0.9rem;
}
.theme-toggle:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-light); }

.nav__toggle {
    display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer;
    padding:6px; border-radius:var(--radius-sm); transition:background var(--transition);
}
.nav__toggle:hover { background:var(--bg-secondary); }
.nav__toggle span { display:block; width:22px; height:2px; background:var(--text-primary); border-radius:2px; transition:all var(--transition); }
.nav__toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav__toggle.active span:nth-child(2) { opacity:0; }
.nav__toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Hero */
.hero {
    min-height:calc(100vh - var(--header-height)); display:flex; align-items:center;
    position:relative; overflow:hidden;
    background-size:cover; background-position:center; background-repeat:no-repeat;
}
.hero__overlay {
    position:absolute; inset:0; z-index:0;
    background:linear-gradient(135deg, rgba(15,23,42,0.88) 0%, rgba(30,41,59,0.75) 50%, rgba(51,65,85,0.7) 100%);
}
.hero .container { position:relative; z-index:1; max-width:800px; text-align:center; }
.hero__content { animation:fadeInUp 0.8s ease-out; }
.hero__badge {
    display:inline-flex; align-items:center; gap:0.5rem; background:rgba(255,255,255,0.12);
    color:#fff; padding:0.4rem 1rem; border-radius:50px; font-size:0.85rem;
    font-weight:600; margin-bottom:1.5rem; border:1px solid rgba(255,255,255,0.2);
    backdrop-filter:blur(4px);
}
.hero__title { font-size:clamp(2.25rem,5vw,3.75rem); font-weight:800; line-height:1.08; margin-bottom:1.25rem; letter-spacing:-0.03em; color:#fff; }
.hero__desc { font-size:1.15rem; color:rgba(255,255,255,0.8); line-height:1.7; margin-bottom:2rem; max-width:600px; margin-left:auto; margin-right:auto; }
.hero__actions { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:3rem; justify-content:center; }
.hero__stats { display:flex; gap:2.5rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,0.15); justify-content:center; }
.hero__stat-number { font-size:1.75rem; font-weight:800; color:#fff; }
.hero__stat-label { font-size:0.85rem; color:rgba(255,255,255,0.6); margin-top:0.15rem; }

/* Process / How We Work */
.process__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.process-step {
    background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg);
    padding:2rem 1.75rem; text-align:center; transition:all var(--transition); position:relative;
}
.process-step:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--accent); }
.process-step__number {
    display:inline-flex; align-items:center; justify-content:center;
    width:52px; height:52px; border-radius:50%; background:var(--accent-light);
    color:var(--accent); font-size:1.25rem; font-weight:800; margin-bottom:1.25rem;
}
.process-step:hover .process-step__number { background:var(--accent); color:#fff; }
.process-step__title { font-size:1.1rem; font-weight:700; margin-bottom:0.65rem; }
.process-step__desc { color:var(--text-secondary); font-size:0.9rem; line-height:1.65; }

/* Services */
.services__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.service-card {
    background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg);
    padding:2rem; transition:all var(--transition); position:relative; overflow:hidden;
}
.service-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--accent); }
.service-card::before {
    content:''; position:absolute; top:0; left:0; width:100%; height:3px;
    background:var(--gradient-1); opacity:0; transition:opacity var(--transition);
}
.service-card:hover::before { opacity:1; }
.service-card__icon {
    width:52px; height:52px; border-radius:var(--radius-md); background:var(--accent-light);
    display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1.25rem; color:var(--accent);
}
.service-card__title { font-size:1.2rem; margin-bottom:0.75rem; font-weight:700; }
.service-card__desc { color:var(--text-secondary); font-size:0.95rem; line-height:1.6; margin-bottom:1.25rem; }
.service-card__link { display:inline-flex; align-items:center; gap:0.4rem; color:var(--accent); font-weight:600; font-size:0.9rem; }
.service-card__link:hover { gap:0.7rem; }

/* Products */
.products__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; }
.product-card {
    background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-xl);
    padding:2.5rem; transition:all var(--transition); overflow:hidden;
}
.product-card:hover { box-shadow:var(--shadow-xl); transform:translateY(-4px); }
.product-card__badge {
    display:inline-flex; align-items:center; gap:0.5rem; padding:0.35rem 0.85rem;
    border-radius:50px; font-size:0.8rem; font-weight:600; margin-bottom:1.25rem;
}
.product-card__title { font-size:1.5rem; margin-bottom:0.75rem; font-weight:800; }
.product-card__desc { color:var(--text-secondary); line-height:1.7; margin-bottom:1.5rem; font-size:0.95rem; }
.product-card__features { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; margin-bottom:2rem; }
.product-card__feature { display:flex; align-items:center; gap:0.5rem; font-size:0.875rem; color:var(--text-secondary); }
.product-card__feature i { color:var(--success); font-size:0.75rem; }

/* About */
.about__grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.about__image { position:relative; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg); }
.about__image img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.about__image:hover img { transform:scale(1.03); }
.about__content .section__subtitle, .about__content .section__title { text-align:left; }
.about__text { color:var(--text-secondary); line-height:1.8; margin-bottom:1.5rem; }
.about__features { display:grid; gap:0.75rem; margin-bottom:2rem; }
.about__feature { display:flex; align-items:center; gap:0.75rem; font-weight:500; }
.about__feature i {
    color:var(--success); background:rgba(16,185,129,0.1); width:28px; height:28px;
    border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.75rem;
}
.about__counters { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--border-color); }
.about__counter-number { font-size:2rem; font-weight:800; color:var(--accent); }
.about__counter-label { font-size:0.85rem; color:var(--text-tertiary); }

/* Pricing */
.pricing__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:start; }
.pricing-card {
    background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-xl);
    padding:2.5rem 2rem; text-align:center; transition:all var(--transition); position:relative;
}
.pricing-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.pricing-card.featured { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--shadow-lg); transform:scale(1.02); }
.pricing-card.featured:hover { transform:scale(1.02) translateY(-4px); }
.pricing-card__badge {
    position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--gradient-1);
    color:#fff; padding:0.25rem 1rem; border-radius:50px; font-size:0.75rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.05em;
}
.pricing-card__title { font-size:1.25rem; font-weight:700; margin-bottom:0.25rem; }
.pricing-card__subtitle { color:var(--text-tertiary); font-size:0.9rem; margin-bottom:1.5rem; }
.pricing-card__price { font-size:2.75rem; font-weight:800; margin-bottom:0.25rem; }
.pricing-card__price span { font-size:1rem; font-weight:500; color:var(--text-tertiary); }
.pricing-card__period { font-size:0.85rem; color:var(--text-tertiary); margin-bottom:2rem; }
.pricing-card__features { text-align:left; margin-bottom:2rem; }
.pricing-card__features li {
    display:flex; align-items:center; gap:0.6rem; padding:0.5rem 0; font-size:0.9rem;
    color:var(--text-secondary); border-bottom:1px solid var(--border-light);
}
.pricing-card__features li:last-child { border-bottom:none; }
.pricing-card__features li i { color:var(--success); font-size:0.8rem; }
.pricing-card .btn { width:100%; }

/* Testimonials */
.testimonials__slider { max-width:700px; margin:0 auto; position:relative; overflow:hidden; }
.testimonials__track { display:flex; transition:transform 0.5s ease; }
.testimonial-card {
    flex:0 0 100%; background:var(--bg-card); border:1px solid var(--border-color);
    border-radius:var(--radius-xl); padding:2.5rem; text-align:center;
}
.testimonial-card__quote {
    font-size:1.1rem; line-height:1.8; color:var(--text-secondary); font-style:italic;
    margin-bottom:1.5rem; position:relative;
}
.testimonial-card__quote::before {
    content:'\201C'; font-size:4rem; color:var(--accent); opacity:0.2;
    position:absolute; top:-1.5rem; left:50%; transform:translateX(-50%); font-style:normal; line-height:1;
}
.testimonial-card__avatar {
    width:56px; height:56px; border-radius:50%; overflow:hidden; margin:0 auto 0.75rem;
    border:3px solid var(--accent-light);
}
.testimonial-card__avatar img { width:100%; height:100%; object-fit:cover; }
.testimonial-card__name { font-weight:700; font-size:1rem; margin-bottom:0.15rem; }
.testimonial-card__role { color:var(--text-tertiary); font-size:0.85rem; }
.slider__dots { display:flex; justify-content:center; gap:0.5rem; margin-top:2rem; }
.slider__dot {
    width:10px; height:10px; border-radius:50%; background:var(--border-color); border:none;
    cursor:pointer; transition:all var(--transition);
}
.slider__dot.active { background:var(--accent); transform:scale(1.3); }

/* Partners */
.partners__grid { display:flex; flex-wrap:wrap; justify-content:center; gap:2rem; align-items:center; }
.partner__logo {
    background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-md);
    padding:1.25rem 2rem; display:flex; align-items:center; justify-content:center;
    min-width:160px; height:90px; transition:all var(--transition);
}
.partner__logo:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.partner__logo img { max-height:50px; max-width:120px; object-fit:contain; filter:grayscale(100%); opacity:0.6; transition:all var(--transition); }
.partner__logo:hover img { filter:grayscale(0); opacity:1; }

/* CTA */
.cta-section {
    background:var(--gradient-2); padding:5rem 0; text-align:center; color:#fff;
    position:relative; overflow:hidden;
}
.cta-section::before {
    content:''; position:absolute; width:500px; height:500px; border-radius:50%;
    background:rgba(30,41,59,0.08); top:-200px; right:-100px;
}
.cta-section h2 { color:#fff; font-size:clamp(1.75rem,3.5vw,2.5rem); margin-bottom:1rem; }
.cta-section p { color:rgba(255,255,255,0.8); font-size:1.1rem; max-width:600px; margin:0 auto 2rem; }

/* Contact */
.contact__grid { display:grid; grid-template-columns:1fr 1.2fr; gap:3rem; }
.contact__info-card { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.5rem; }
.contact__info-icon {
    width:48px; height:48px; border-radius:var(--radius-md); background:var(--accent-light);
    color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0;
}
.contact__info-title { font-weight:600; margin-bottom:0.2rem; }
.contact__info-text { color:var(--text-secondary); font-size:0.95rem; }
.contact__info-text a { color:var(--text-secondary); }
.contact__info-text a:hover { color:var(--accent); }
.contact__form {
    background:var(--bg-card); border:1px solid var(--border-color);
    border-radius:var(--radius-xl); padding:2.5rem;
}
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form__group { margin-bottom:1.25rem; }
.form__label { display:block; font-weight:500; font-size:0.9rem; margin-bottom:0.4rem; }
.form__input, .form__textarea, .form__select {
    width:100%; padding:0.75rem 1rem; border:1px solid var(--border-color); border-radius:var(--radius-sm);
    font-size:0.95rem; font-family:inherit; background:var(--bg-primary); color:var(--text-primary);
    transition:border-color var(--transition), box-shadow var(--transition);
}
.form__input:focus, .form__textarea:focus, .form__select:focus {
    outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light);
}
.form__textarea { min-height:120px; resize:vertical; }

/* Footer */
.footer { background:var(--bg-secondary); border-top:1px solid var(--border-color); padding:4rem 0 2rem; }
.footer__grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.5fr; gap:2.5rem; margin-bottom:3rem; }
.footer__logo { font-size:1.5rem; font-weight:800; text-decoration:none; display:inline-block; margin-bottom:0.75rem; }
.footer__desc { color:var(--text-secondary); font-size:0.95rem; line-height:1.6; margin-bottom:1.5rem; }
.footer__social { display:flex; gap:0.6rem; }
.social__link {
    width:38px; height:38px; border-radius:50%; background:var(--bg-tertiary); color:var(--text-secondary);
    display:flex; align-items:center; justify-content:center; font-size:0.9rem;
    transition:all var(--transition); text-decoration:none;
}
.social__link:hover { background:var(--accent); color:#fff; transform:translateY(-3px); }
.footer__title { font-size:0.95rem; font-weight:700; margin-bottom:1rem; }
.footer__links li { margin-bottom:0.5rem; }
.footer__links a { color:var(--text-secondary); font-size:0.9rem; transition:all var(--transition); }
.footer__links a:hover { color:var(--accent); padding-left:4px; }
.footer__contact li { display:flex; align-items:flex-start; gap:0.75rem; margin-bottom:0.75rem; font-size:0.9rem; color:var(--text-secondary); }
.footer__contact li i { margin-top:0.2rem; color:var(--accent); width:16px; }
.footer__contact li a { color:var(--text-secondary); }
.footer__contact li a:hover { color:var(--accent); }
.newsletter__form { display:flex; gap:0; margin-top:0.5rem; }
.newsletter__input {
    flex:1; padding:0.6rem 0.85rem; border:1px solid var(--border-color);
    border-radius:var(--radius-sm) 0 0 var(--radius-sm); font-size:0.85rem; font-family:inherit;
    background:var(--bg-primary); color:var(--text-primary);
}
.newsletter__input:focus { outline:none; border-color:var(--accent); }
.newsletter__btn {
    background:var(--accent); color:#fff; border:none; padding:0 1rem;
    border-radius:0 var(--radius-sm) var(--radius-sm) 0; cursor:pointer; transition:background var(--transition);
}
.newsletter__btn:hover { background:var(--accent-hover); }
.newsletter__msg { font-size:0.8rem; margin-top:0.4rem; min-height:1rem; }
.newsletter__msg.success { color:var(--success); }
.newsletter__msg.error { color:var(--danger); }
.footer__bottom { text-align:center; padding-top:2rem; border-top:1px solid var(--border-color); font-size:0.85rem; color:var(--text-tertiary); }

/* WhatsApp Float */
.whatsapp-float {
    position:fixed; bottom:1.5rem; right:1.5rem; width:56px; height:56px; border-radius:50%;
    background:#25d366; color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:1.75rem; box-shadow:0 4px 20px rgba(37,211,102,0.4); z-index:999;
    transition:all var(--transition); text-decoration:none;
}
.whatsapp-float:hover { transform:scale(1.1); box-shadow:0 6px 30px rgba(37,211,102,0.5); color:#fff; }

/* Back to Top */
.back-to-top {
    position:fixed; bottom:1.5rem; right:5rem; width:44px; height:44px; border-radius:50%;
    background:var(--bg-card); border:1px solid var(--border-color); color:var(--text-secondary);
    display:flex; align-items:center; justify-content:center; font-size:1rem; cursor:pointer;
    z-index:999; opacity:0; visibility:hidden; transform:translateY(20px); transition:all var(--transition);
}
.back-to-top.show { opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover { background:var(--accent); color:#fff; border-color:var(--accent); }

/* Scroll Animations */
.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* Page Header */
.page-header { padding:4rem 0 3rem; background:var(--bg-secondary); text-align:center; }
.page-header__title { font-size:clamp(1.75rem,4vw,2.75rem); margin-bottom:0.5rem; }
.page-header__breadcrumb { display:flex; justify-content:center; gap:0.5rem; font-size:0.85rem; color:var(--text-tertiary); }
.page-header__breadcrumb a { color:var(--accent); }

/* Product Detail */
.product-detail { padding:4rem 0; }
.product-detail__header { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; margin-bottom:4rem; }
.product-detail__icon {
    width:64px; height:64px; border-radius:var(--radius-lg); display:flex; align-items:center;
    justify-content:center; font-size:1.75rem; color:#fff; margin-bottom:1.5rem;
}
.product-detail__title { font-size:clamp(2rem,4vw,2.75rem); margin-bottom:0.5rem; }
.product-detail__tagline { color:var(--text-secondary); font-size:1.15rem; margin-bottom:1.5rem; }
.product-detail__desc { color:var(--text-secondary); line-height:1.8; margin-bottom:2rem; }
.product-detail__features { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; margin-bottom:2rem; }
.product-detail__feature { display:flex; align-items:center; gap:0.6rem; font-size:0.95rem; }
.product-detail__feature i { color:var(--success); }
.product-detail__visual {
    display:flex; align-items:center; justify-content:center; background:var(--bg-secondary);
    border-radius:var(--radius-xl); padding:3rem; min-height:400px;
}
.product-detail__visual i { font-size:6rem; opacity:0.2; }

/* Alert */
.alert { padding:1rem 1.25rem; border-radius:var(--radius-sm); margin-bottom:1.5rem; font-size:0.95rem; }
.alert--success { background:rgba(16,185,129,0.1); color:#065f46; border:1px solid rgba(16,185,129,0.2); }
.alert--error { background:rgba(239,68,68,0.1); color:#991b1b; border:1px solid rgba(239,68,68,0.2); }

/* Keyframes */
@keyframes fadeInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInRight { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

/* Responsive */
@media(max-width:1024px) {
    .services__grid { grid-template-columns:repeat(2,1fr); }
    .process__grid { grid-template-columns:repeat(2,1fr); }
    .about__grid { grid-template-columns:1fr; gap:2.5rem; }
    .about__image { order:-1; max-height:380px; }
    .pricing__grid { grid-template-columns:repeat(2,1fr); }
    .contact__grid { grid-template-columns:1fr; }
    .footer__grid { grid-template-columns:repeat(2,1fr); }
    .product-detail__header { grid-template-columns:1fr; }
}

@media(max-width:768px) {
    .nav__menu {
        position:fixed; top:var(--header-height); left:0; width:100%; background:var(--bg-primary);
        border-bottom:1px solid var(--border-color); box-shadow:var(--shadow-lg);
        padding:0.75rem 1.25rem 1.25rem; transform:translateY(-120%); opacity:0;
        transition:transform 0.3s ease, opacity 0.3s ease; z-index:999;
    }
    .nav__menu.show { transform:translateY(0); opacity:1; }
    .nav__list { flex-direction:column; gap:0.1rem; }
    .nav__link {
        display:flex; align-items:center; width:100%; padding:0.75rem 1rem;
        border-radius:var(--radius-sm); font-size:0.925rem;
    }
    .nav__link:hover, .nav__link.active { background:var(--accent-light); }
    .nav__dropdown-menu {
        position:static; box-shadow:none; border:none; background:var(--bg-secondary);
        border-radius:var(--radius-sm); opacity:1; visibility:visible; transform:none;
        max-height:0; overflow:hidden; transition:max-height 0.35s ease, padding 0.35s ease;
        padding:0; margin-left:0.5rem;
    }
    .nav__dropdown.open .nav__dropdown-menu { max-height:200px; padding:0.4rem; margin-top:0.25rem; }
    .nav__dropdown-link { padding:0.65rem 0.85rem; font-size:0.875rem; }
    .nav__toggle { display:flex; }
    .nav__cta { display:none; }
    .hero { min-height:70vh; padding:3rem 0; }
    .services__grid { grid-template-columns:1fr; }
    .products__grid { grid-template-columns:1fr; }
    .process__grid { grid-template-columns:1fr; }
    .pricing__grid { grid-template-columns:1fr; }
    .product-card__features { grid-template-columns:1fr; }
    .product-detail__features { grid-template-columns:1fr; }
    .hero__stats { flex-direction:column; gap:0.75rem; align-items:center; }
    .about__counters { grid-template-columns:repeat(3,1fr); gap:1rem; }
    .footer__grid { grid-template-columns:1fr; gap:2rem; }
    .form__row { grid-template-columns:1fr; }
    .section { padding:3.5rem 0; }
    .page-header { padding:3rem 0 2rem; }
    .product-detail { padding:2.5rem 0; }
    .cta-section { padding:3.5rem 0; }
}

@media(max-width:480px) {
    .hero__title { font-size:1.85rem; }
    .hero__actions { flex-direction:column; align-items:stretch; }
    .hero__actions .btn { justify-content:center; }
    .about__counters { grid-template-columns:repeat(3,1fr); text-align:center; }
    .btn--lg { width:100%; justify-content:center; }
    .container { padding:0 1.15rem; }
}