/* ============================================================
   PT. CAHAYA PURNAMA GRUP — Main Stylesheet v3.0
   style.css | 2026
   ============================================================ */

/* --- Variables --- */
:root {
    --primary:    #78BE20;
    --primary-dk: #5a9a18;
    --dark:       #0F172A;
    --darker:     #020617;
    --mid:        #1e293b;
    --light:      #F8FAFC;
    --white:      #ffffff;
    --gray:       #64748B;
    --border:     #e2e8f0;
    --transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Reset --- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Plus Jakarta Sans',sans-serif; background:var(--white); color:var(--dark); overflow-x:hidden; line-height:1.6; }
img { display:block; max-width:100%; }
a { text-decoration:none; }
h1,h2,h3,h4,h5,.logo,.footer-logo { font-family:'Archivo',sans-serif; }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader { position:fixed; inset:0; background:var(--darker); display:flex; align-items:center; justify-content:center; z-index:9999; transition:opacity .5s ease,visibility .5s ease; }
.preloader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.loader { width:56px; height:56px; border:4px solid rgba(120,190,32,.12); border-top-color:var(--primary); border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ============================================================
   NAVIGATION
   ============================================================ */
nav { position:fixed; width:100%; top:0; display:flex; justify-content:space-between; align-items:center; padding:18px 8%; background:rgba(255,255,255,.97); backdrop-filter:blur(14px); z-index:1000; border-bottom:1px solid rgba(0,0,0,.05); transition:var(--transition); }
nav.scrolled { padding:12px 8%; box-shadow:0 4px 24px rgba(0,0,0,.07); }
.logo { font-size:19px; font-weight:900; letter-spacing:-.5px; color:var(--dark); }
.logo span { color:var(--primary); }
.nav-links { display:flex; gap:24px; align-items:center; }
.nav-links a { font-size:12px; font-weight:700; color:var(--dark); text-transform:uppercase; letter-spacing:1px; transition:color .3s; }
.nav-links a:hover { color:var(--primary); }
.btn-portal { background:var(--dark); color:var(--white)!important; padding:10px 20px; border-radius:4px; font-size:11px!important; transition:background .3s; }
.btn-portal:hover { background:var(--primary); color:var(--dark)!important; }
.btn-portal i { margin-right:5px; font-size:9px; }
.menu-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.menu-toggle span { width:28px; height:3px; background:var(--dark); border-radius:2px; transition:transform .3s,opacity .3s; }
.menu-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(8px,8px); }
.menu-toggle.active span:nth-child(2) { opacity:0; }
.menu-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(7px,-7px); }

/* ============================================================
   HERO SLIDER
   ============================================================ */
.hero-slider { width:100%; height:100vh; position:relative; }
.swiper-slide { position:relative; overflow:hidden; }
.slide-bg { position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.08); transition:transform 8s linear; z-index:0; }
.swiper-slide-active .slide-bg { transform:scale(1); }
.slide-overlay { position:absolute; inset:0; background:linear-gradient(to right,rgba(2,6,23,.92) 30%,rgba(2,6,23,.3) 100%); z-index:1; }
.slide-content { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; padding:0 8%; max-width:900px; color:var(--white); }
.slide-content h4 { color:var(--primary); font-weight:800; text-transform:uppercase; letter-spacing:4px; margin-bottom:18px; font-size:13px; opacity:0; transform:translateY(20px); }
.slide-content h1 { font-size:clamp(30px,5vw,62px); font-weight:900; line-height:1.1; margin-bottom:22px; opacity:0; transform:translateY(30px); }
.slide-content p { font-size:clamp(14px,1.5vw,17px); color:rgba(255,255,255,.8); margin-bottom:35px; max-width:560px; opacity:0; transform:translateY(20px); }
.swiper-slide-active h4 { opacity:1; transform:translateY(0); transition:all .9s ease .3s; }
.swiper-slide-active h1 { opacity:1; transform:translateY(0); transition:all .9s ease .5s; }
.swiper-slide-active p  { opacity:1; transform:translateY(0); transition:all .9s ease .7s; }
.hero-cta { display:flex; gap:15px; flex-wrap:wrap; }
.cta-btn { padding:14px 30px; border-radius:4px; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:1px; transition:var(--transition); }
.cta-primary { background:var(--primary); color:var(--dark); }
.cta-primary:hover { background:white; transform:translateY(-3px); }
.cta-secondary { border:2px solid rgba(255,255,255,.4); color:white; }
.cta-secondary:hover { background:rgba(255,255,255,.1); }
.business-nav { position:absolute; bottom:0; left:0; width:100%; z-index:10; display:grid; grid-template-columns:repeat(6,1fr); background:rgba(15,23,42,.93); backdrop-filter:blur(14px); }
.biz-link { padding:30px 20px; border-right:1px solid rgba(255,255,255,.05); color:white; transition:.4s; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; }
.biz-link i { font-size:22px; color:var(--primary); transition:.4s; }
.biz-link span { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }
.biz-link:hover { background:var(--primary); }
.biz-link:hover i { color:white; transform:translateY(-4px); }

/* ============================================================
   COMMON
   ============================================================ */
.section { padding:100px 8%; }
.section-label { display:inline-block; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:3px; color:var(--primary); background:rgba(120,190,32,.1); border:1px solid rgba(120,190,32,.25); padding:6px 14px; border-radius:20px; margin-bottom:18px; }
.section-header { margin-bottom:60px; max-width:640px; }
.section-header h2 { font-size:clamp(28px,3vw,40px); font-weight:900; color:var(--dark); margin-bottom:15px; line-height:1.2; position:relative; }
.section-header h2::after { content:''; display:block; width:55px; height:5px; background:var(--primary); margin-top:18px; border-radius:2px; }
.section-header p { font-size:15px; color:var(--gray); line-height:1.8; margin-top:12px; }
/* Biarkan kosong atau setting ke default, karena animasi di-handle sepenuhnya oleh GSAP di JS */
.reveal {
    /* Hapus opacity: 0 dan transform */
    visibility: visible; 
}

/* ============================================================
   STATS
   ============================================================ */
.stats-section { background:linear-gradient(135deg,var(--darker) 0%,var(--mid) 100%); padding:100px 8%; position:relative; overflow:hidden; }
.stats-section::before { content:''; position:absolute; top:-50%; right:-15%; width:600px; height:600px; background:radial-gradient(circle,rgba(120,190,32,.13) 0%,transparent 70%); border-radius:50%; pointer-events:none; }
.stats-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:30px; position:relative; z-index:2; }
.stat-item { text-align:center; color:var(--white); padding:35px 15px; border-radius:10px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); transition:var(--transition); }
.stat-item:hover { transform:translateY(-10px); background:rgba(120,190,32,.08); border-color:var(--primary); }
.stat-number { font-size:52px; font-weight:900; color:var(--primary); font-family:'Archivo',sans-serif; display:block; margin-bottom:6px; }
.stat-item sup { color:var(--primary); font-size:26px; font-weight:900; vertical-align:top; line-height:1.6; }
.stat-label { font-size:12px; text-transform:uppercase; letter-spacing:2px; opacity:.75; font-weight:600; }

/* ============================================================
   ABOUT
   ============================================================ */
.about-section { padding:120px 8%; background:var(--white); }
.about-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-media { position:relative; }
.about-img-main { border-radius:4px; overflow:hidden; }
.about-img-main img { width:100%; height:480px; object-fit:cover; }
.about-img-accent { position:absolute; bottom:-40px; right:-40px; width:220px; border-radius:4px; overflow:hidden; border:6px solid white; box-shadow:0 20px 50px rgba(0,0,0,.15); }
.about-img-accent img { width:100%; height:180px; object-fit:cover; }
.about-badge-box { position:absolute; top:40px; left:-30px; background:var(--dark); color:white; padding:20px 24px; border-radius:6px; text-align:center; box-shadow:0 15px 35px rgba(0,0,0,.3); }
.about-badge-box i { font-size:28px; color:var(--primary); display:block; margin-bottom:8px; }
.about-badge-box strong { display:block; font-size:13px; font-weight:800; font-family:'Archivo',sans-serif; margin-bottom:3px; }
.about-badge-box span { font-size:10px; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:2px; }
.about-text { padding-left:10px; }
.about-text h2 { font-size:clamp(28px,3vw,38px); font-weight:900; line-height:1.2; margin-bottom:22px; color:var(--dark); }
.about-text h2::after { content:''; display:block; width:55px; height:5px; background:var(--primary); margin-top:18px; border-radius:2px; }
.about-lead { font-size:17px; font-weight:600; color:var(--dark); line-height:1.75; margin-bottom:16px; }
.about-body { font-size:15px; color:var(--gray); line-height:1.85; margin-bottom:35px; }
.about-pillars { display:flex; flex-direction:column; gap:18px; margin-bottom:40px; }
.pillar { display:flex; align-items:flex-start; gap:16px; }
.pillar-icon { width:44px; height:44px; background:rgba(120,190,32,.1); border:1px solid rgba(120,190,32,.25); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:17px; color:var(--primary); flex-shrink:0; }
.pillar div { display:flex; flex-direction:column; gap:3px; }
.pillar strong { font-size:14px; font-weight:800; color:var(--dark); }
.pillar span { font-size:13px; color:var(--gray); }
.btn-solid { display:inline-flex; align-items:center; gap:10px; background:var(--dark); color:white; padding:15px 30px; border-radius:4px; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:1px; transition:var(--transition); }
.btn-solid:hover { background:var(--primary); color:var(--dark); transform:translateY(-2px); }

/* ============================================================
   SERVICES
   ============================================================ */
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:28px; }
.service-card { background:var(--white); border:1px solid #f1f5f9; border-radius:6px; overflow:hidden; transition:var(--transition); }
.service-card:hover { transform:translateY(-10px); box-shadow:0 30px 60px -15px rgba(0,0,0,.12); }
.service-img-wrap { position:relative; overflow:hidden; }
.service-img-wrap img { width:100%; height:230px; object-fit:cover; filter:grayscale(30%); transition:filter .5s,transform .5s; }
.service-card:hover .service-img-wrap img { filter:grayscale(0%); transform:scale(1.05); }
.service-num { position:absolute; top:16px; right:16px; background:var(--primary); color:var(--dark); width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; font-family:'Archivo',sans-serif; }
.service-info { padding:28px; }
.service-icon-line { font-size:22px; color:var(--primary); margin-bottom:14px; }
.service-info h3 { font-size:19px; font-weight:800; margin-bottom:10px; }
.service-info p { font-size:14px; color:var(--gray); margin-bottom:18px; line-height:1.7; }
.service-tags { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px; list-style:none; padding:0; }
.service-tags li { background:var(--light); border:1px solid var(--border); color:var(--gray); font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; text-transform:uppercase; letter-spacing:.5px; }
.service-link { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--primary); transition:gap .3s; }
.service-link:hover { gap:14px; }

/* ============================================================
   WHY US
   ============================================================ */
.why-section { background:linear-gradient(135deg,var(--darker) 0%,var(--mid) 100%); padding:120px 8%; position:relative; overflow:hidden; }
.why-bg-text { position:absolute; right:-2%; top:50%; transform:translateY(-50%); font-size:clamp(120px,20vw,280px); font-weight:900; font-family:'Archivo',sans-serif; color:rgba(255,255,255,.02); line-height:1; pointer-events:none; user-select:none; }
.why-inner { display:grid; grid-template-columns:1fr 1.3fr; gap:80px; align-items:start; position:relative; z-index:2; }
.why-left h2 { font-size:clamp(28px,3vw,40px); font-weight:900; line-height:1.2; margin-bottom:0; }
.why-left h2::after { content:''; display:block; width:55px; height:5px; background:var(--primary); margin-top:18px; border-radius:2px; }
.why-visual { margin-top:40px; border-radius:8px; overflow:hidden; position:relative; }
.why-visual img { width:100%; height:260px; object-fit:cover; }
.why-visual-caption { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top,rgba(2,6,23,.95),transparent); padding:30px 24px 20px; }
.why-visual-caption strong { display:block; color:white; font-size:15px; font-weight:800; margin-bottom:4px; }
.why-visual-caption span { font-size:13px; color:rgba(255,255,255,.55); }
.why-right { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.why-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:24px 20px; display:flex; gap:16px; align-items:flex-start; transition:var(--transition); }
.why-card:hover { background:rgba(120,190,32,.08); border-color:var(--primary); transform:translateY(-4px); }
.why-card-icon { width:42px; height:42px; background:rgba(120,190,32,.12); border:1px solid rgba(120,190,32,.2); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--primary); flex-shrink:0; }
.why-card-text h4 { font-size:14px; font-weight:800; color:white; margin-bottom:6px; }
.why-card-text p { font-size:13px; color:rgba(255,255,255,.5); line-height:1.7; }

/* ============================================================
   PROJECTS
   ============================================================ */
.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:auto auto; gap:20px; }
.project-card { position:relative; border-radius:8px; overflow:hidden; cursor:pointer; }
.project-card img { width:100%; height:260px; object-fit:cover; transition:transform .6s ease; }
.project-card:hover img { transform:scale(1.07); }
.project-featured { grid-column:span 2; grid-row:span 1; }
.project-featured img { height:400px; }
.project-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(2,6,23,.95) 0%,rgba(2,6,23,.3) 60%,transparent 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:28px; transform:translateY(10px); transition:transform .4s ease; }
.project-card:hover .project-overlay { transform:translateY(0); }
.project-tag { display:inline-block; background:var(--primary); color:var(--dark); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:1px; padding:4px 12px; border-radius:20px; margin-bottom:12px; width:fit-content; }
.project-overlay h3 { font-size:18px; font-weight:800; color:white; margin-bottom:8px; line-height:1.3; }
.project-overlay p { font-size:13px; color:rgba(255,255,255,.65); line-height:1.6; margin-bottom:14px; }
.project-meta { display:flex; gap:20px; }
.project-meta span { font-size:12px; color:rgba(255,255,255,.5); display:flex; align-items:center; gap:6px; }
.project-meta i { color:var(--primary); font-size:11px; }
.projects-cta { text-align:center; margin-top:50px; }
.btn-outline-dark { display:inline-flex; align-items:center; gap:10px; border:2px solid var(--dark); color:var(--dark); padding:15px 32px; border-radius:4px; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:1px; transition:var(--transition); }
.btn-outline-dark:hover { background:var(--dark); color:white; gap:16px; }

/* ============================================================
   TRACKING
   ============================================================ */
.tracking-container { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09); padding:60px; border-radius:8px; max-width:820px; margin:0 auto; text-align:center; }
.tracking-form { display:flex; gap:10px; margin-top:28px; }
.tracking-form input { flex:1; padding:17px 20px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:white; font-size:15px; border-radius:4px; outline:none; transition:border-color .3s; font-family:'Plus Jakarta Sans',sans-serif; }
.tracking-form input::placeholder { color:rgba(255,255,255,.35); }
.tracking-form input:focus { border-color:var(--primary); }
.btn-action { background:var(--primary); color:var(--dark); border:none; padding:0 36px; font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:1px; cursor:pointer; border-radius:4px; transition:.3s; font-family:'Plus Jakarta Sans',sans-serif; white-space:nowrap; }
.btn-action:hover { background:white; }
#tracking-result { margin-top:25px; padding:20px 25px; border-radius:6px; display:none; text-align:left; font-size:14px; line-height:1.7; }
.progress-bar { width:100%; height:8px; background:rgba(0,0,0,.1); border-radius:10px; margin:15px 0; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--primary) 0%,#FF6B35 100%); border-radius:10px; transition:width 1s ease; }

/* ============================================================
   PROCESS / HOW WE WORK
   ============================================================ */
.process-section { padding:120px 8%; background:var(--light); }
.process-inner { max-width:1200px; margin:0 auto; }
.process-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; }
.process-step { text-align:center; padding:0 20px; position:relative; }
.step-num { font-size:11px; font-weight:900; color:var(--primary); text-transform:uppercase; letter-spacing:3px; margin-bottom:20px; font-family:'Archivo',sans-serif; }
.step-icon { width:72px; height:72px; background:white; border:2px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--primary); margin:0 auto 22px; transition:var(--transition); box-shadow:0 8px 24px rgba(0,0,0,.06); position:relative; z-index:2; }
.process-step:hover .step-icon { background:var(--primary); color:white; border-color:var(--primary); transform:scale(1.1); }
.step-connector { position:absolute; top:72px; left:calc(50% + 36px); right:calc(-50% + 36px); height:2px; background:linear-gradient(90deg,var(--border),var(--border)); z-index:1; }
.step-connector.last { display:none; }
.process-step h4 { font-size:15px; font-weight:800; color:var(--dark); margin-bottom:12px; }
.process-step p { font-size:13px; color:var(--gray); line-height:1.75; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-section { background:var(--white); padding:120px 8%; }
.testimonials-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:30px; margin-top:60px; }
.testimonial-card { background:var(--white); padding:38px; border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.05); border:1px solid var(--border); transition:var(--transition); }
.testimonial-card:hover { transform:translateY(-10px); box-shadow:0 22px 50px rgba(0,0,0,.1); }
.testi-stars { color:#f59e0b; margin-bottom:16px; font-size:14px; letter-spacing:2px; }
.quote-icon { font-size:36px; color:var(--primary); opacity:.2; margin-bottom:16px; }
.testimonial-text { font-size:15px; line-height:1.85; color:#475569; margin-bottom:22px; font-style:italic; }
.testimonial-author { display:flex; align-items:center; gap:14px; padding-top:18px; border-top:1px solid var(--border); }
.author-avatar { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-weight:800; font-size:17px; flex-shrink:0; }
.author-info h5 { font-size:15px; font-weight:800; color:var(--dark); margin-bottom:2px; }
.author-info p { font-size:12px; color:var(--gray); }

/* ============================================================
   LEGAL
   ============================================================ */
.legal-box { max-width:900px; margin:0 auto; }
.legal-item { border-bottom:1px solid var(--border); cursor:pointer; }
.legal-item:first-child { border-top:1px solid var(--border); }
.legal-header { display:flex; justify-content:space-between; align-items:center; padding:24px 0; }
.legal-header h4 { font-size:16px; font-weight:700; color:var(--dark); }
.legal-item:hover .legal-header h4 { color:var(--primary); }
.legal-header i { font-size:12px; color:var(--gray); transition:transform .35s; }
.legal-item.active .legal-header i { transform:rotate(90deg); color:var(--primary); }
.legal-content { max-height:0; overflow:hidden; transition:max-height .4s ease,padding .4s ease; }
.legal-item.active .legal-content { max-height:400px; padding-bottom:24px; }
.legal-content p { color:var(--gray); line-height:1.85; font-size:14px; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-section { background:linear-gradient(135deg,var(--darker) 0%,var(--mid) 100%); padding:120px 8%; }
.contact-inner { display:grid; grid-template-columns:1fr 1.3fr; gap:80px; align-items:start; }
.contact-left h2 { font-size:clamp(28px,3vw,40px); font-weight:900; line-height:1.2; margin-top:16px; }
.contact-left h2::after { content:''; display:block; width:55px; height:5px; background:var(--primary); margin-top:18px; border-radius:2px; }
.contact-info-list { margin-top:40px; display:flex; flex-direction:column; gap:20px; }
.contact-info-item { display:flex; align-items:flex-start; gap:16px; }
.ci-icon { width:44px; height:44px; background:rgba(120,190,32,.12); border:1px solid rgba(120,190,32,.2); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--primary); flex-shrink:0; }
.ci-text { display:flex; flex-direction:column; gap:3px; }
.ci-text strong { font-size:12px; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.65); font-weight:700; }
.ci-text span { font-size:14px; color:rgba(255,255,255,.45); line-height:1.6; }
.contact-form-box { background:white; border-radius:12px; padding:45px; box-shadow:0 30px 80px rgba(0,0,0,.3); }
.contact-form-box h3 { font-size:24px; font-weight:900; color:var(--dark); margin-bottom:8px; }
.contact-form-box > p { font-size:14px; color:var(--gray); margin-bottom:28px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.form-group label { font-size:12px; font-weight:700; color:var(--dark); text-transform:uppercase; letter-spacing:.5px; }
.form-group input, .form-group select, .form-group textarea { padding:12px 16px; border:1.5px solid var(--border); border-radius:6px; font-size:14px; font-family:'Plus Jakarta Sans',sans-serif; color:var(--dark); outline:none; transition:border-color .3s,box-shadow .3s; background:var(--white); resize:none; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(120,190,32,.12); }
.form-group textarea { min-height:110px; }
.btn-submit { width:100%; background:var(--dark); color:white; border:none; padding:16px; border-radius:6px; font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:1px; cursor:pointer; transition:var(--transition); font-family:'Plus Jakarta Sans',sans-serif; display:flex; align-items:center; justify-content:center; gap:10px; margin-top:6px; }
.btn-submit:hover { background:var(--primary); color:var(--dark); transform:translateY(-2px); }

/* ============================================================
   FOOTER
   ============================================================ */
footer { background:var(--darker); color:rgba(255,255,255,.6); position:relative; overflow:hidden; }
.footer-cta-band { background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dk) 100%); padding:65px 8%; display:flex; align-items:center; justify-content:space-between; gap:40px; position:relative; overflow:hidden; }
.footer-cta-band::before { content:''; position:absolute; right:-80px; top:-80px; width:340px; height:340px; border-radius:50%; background:rgba(255,255,255,.07); pointer-events:none; }
.footer-cta-band::after { content:''; position:absolute; left:32%; bottom:-100px; width:240px; height:240px; border-radius:50%; background:rgba(0,0,0,.06); pointer-events:none; }
.footer-cta-text { position:relative; z-index:1; }
.footer-cta-text h3 { font-size:clamp(20px,2.5vw,30px); font-weight:900; color:var(--dark); margin-bottom:8px; }
.footer-cta-text p { font-size:15px; color:rgba(15,23,42,.72); max-width:480px; }
.footer-cta-actions { display:flex; gap:14px; flex-shrink:0; flex-wrap:wrap; position:relative; z-index:1; }
.btn-cta-dark { background:var(--dark); color:white; padding:15px 28px; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:1px; border-radius:4px; transition:.3s; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; }
.btn-cta-dark:hover { background:var(--mid); transform:translateY(-2px); }
.btn-cta-ghost { border:2px solid rgba(15,23,42,.35); color:var(--dark); padding:13px 26px; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:1px; border-radius:4px; transition:.3s; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; }
.btn-cta-ghost:hover { background:rgba(15,23,42,.08); }
.footer-body { padding:80px 8% 55px; border-bottom:1px solid rgba(255,255,255,.06); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1.5fr; gap:45px; }
.footer-col h4 { color:var(--white); margin-bottom:26px; font-weight:800; text-transform:uppercase; font-size:11px; letter-spacing:2.5px; padding-bottom:12px; border-bottom:2px solid var(--primary); display:inline-block; }
.footer-col a { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.52); margin-bottom:12px; font-size:14px; transition:color .3s,padding-left .3s; }
.link-arrow { font-size:9px; color:var(--primary); flex-shrink:0; transition:transform .3s; }
.footer-col a:hover { color:var(--primary); padding-left:4px; }
.footer-col a:hover .link-arrow { transform:translateX(3px); }
.footer-logo-wrap { margin-bottom:20px; }
.footer-logo { font-size:21px; font-weight:900; color:white; letter-spacing:-.5px; }
.footer-logo span { color:var(--primary); }
.footer-tagline { font-size:10px; text-transform:uppercase; letter-spacing:3px; color:rgba(255,255,255,.28); margin-top:5px; }
.footer-brand-desc { font-size:13.5px; line-height:1.9; color:rgba(255,255,255,.46); margin-bottom:26px; }
.cert-badges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.cert-badge { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); padding:7px 12px; border-radius:4px; font-size:10px; font-weight:700; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.5px; display:flex; align-items:center; gap:6px; }
.cert-badge i { color:var(--primary); font-size:11px; }
.social-links { display:flex; gap:9px; }
.social-link { width:38px; height:38px; border-radius:6px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.45); font-size:14px; transition:var(--transition); }
.social-link:hover { background:var(--primary); color:white; border-color:var(--primary); transform:translateY(-3px); }
.contact-item { display:flex; align-items:flex-start; gap:13px; margin-bottom:18px; }
.contact-icon { width:36px; height:36px; border-radius:7px; background:rgba(120,190,32,.1); border:1px solid rgba(120,190,32,.2); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:13px; color:var(--primary); }
.contact-detail { font-size:13px; line-height:1.65; }
.contact-detail strong { display:block; color:rgba(255,255,255,.65); font-size:11px; text-transform:uppercase; letter-spacing:1px; margin-bottom:2px; }
.contact-detail span { color:rgba(255,255,255,.46); }
.newsletter-box { margin-top:22px; }
.newsletter-box > p { font-size:12.5px; color:rgba(255,255,255,.4); margin-bottom:12px; line-height:1.6; }
.newsletter-form { display:flex; gap:7px; }
.newsletter-form input { flex:1; padding:11px 14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:white; font-size:13px; border-radius:4px; outline:none; transition:border-color .3s; font-family:'Plus Jakarta Sans',sans-serif; }
.newsletter-form input::placeholder { color:rgba(255,255,255,.28); }
.newsletter-form input:focus { border-color:var(--primary); }
.newsletter-form button { background:var(--primary); color:var(--dark); border:none; padding:11px 16px; font-size:14px; border-radius:4px; cursor:pointer; transition:background .3s; }
.newsletter-form button:hover { background:white; }
.footer-partners-strip { padding:32px 8%; display:flex; align-items:center; gap:36px; border-bottom:1px solid rgba(255,255,255,.05); flex-wrap:wrap; }
.partners-label { font-size:10px; text-transform:uppercase; letter-spacing:2px; color:rgba(255,255,255,.28); white-space:nowrap; font-weight:700; }
.partner-logos { display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.partner-logo-item { font-size:11px; font-weight:800; color:rgba(255,255,255,.18); text-transform:uppercase; letter-spacing:1.5px; transition:color .3s; cursor:default; }
.partner-logo-item:hover { color:rgba(255,255,255,.4); }
.footer-bottom { padding:26px 8%; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.bottom-copyright { font-size:12.5px; color:rgba(255,255,255,.32); }
.bottom-copyright strong { color:rgba(255,255,255,.52); }
.bottom-links { display:flex; gap:22px; }
.bottom-links a { font-size:12px; color:rgba(255,255,255,.28); transition:color .3s; }
.bottom-links a:hover { color:var(--primary); }
.bottom-made-with { font-size:11.5px; color:rgba(255,255,255,.2); display:flex; align-items:center; gap:5px; }
.bottom-made-with i { color:var(--primary); }

/* ============================================================
   WHATSAPP FLOAT
   ============================================================ */
.wa-float { position:fixed; bottom:28px; right:28px; z-index:1000; }
.wa-btn { background:#25D366; width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; color:white; box-shadow:0 8px 24px rgba(37,211,102,.32); cursor:pointer; transition:transform .3s; }
.wa-btn:hover { transform:scale(1.1); }
.wa-menu { position:absolute; bottom:74px; right:0; background:white; width:248px; border-radius:10px; box-shadow:0 14px 32px rgba(0,0,0,.18); display:none; overflow:hidden; }
.wa-menu a { display:flex; align-items:center; padding:14px 18px; color:var(--dark); font-size:13px; font-weight:600; border-bottom:1px solid #f1f5f9; transition:.3s; }
.wa-menu a:hover { background:#f8fafc; color:var(--primary); }
.wa-menu a i { margin-right:10px; color:#25D366; width:16px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1200px) {
    .footer-grid { grid-template-columns:1fr 1fr 1fr; }
    .footer-grid .footer-col:first-child { grid-column:span 3; }
    .footer-grid .footer-col:nth-child(5) { grid-column:span 1; }
    .why-right { grid-template-columns:1fr; }
    .projects-grid { grid-template-columns:1fr 1fr; }
    .project-featured { grid-column:span 2; }
    .stats-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:992px) {
    .nav-links { display:none; }
    .menu-toggle { display:flex; }
    .about-inner { grid-template-columns:1fr; gap:60px; }
    .about-img-accent { width:160px; bottom:-20px; right:-15px; }
    .why-inner { grid-template-columns:1fr; }
    .contact-inner { grid-template-columns:1fr; }
    .business-nav { grid-template-columns:repeat(3,1fr); }
    .tracking-form { flex-direction:column; }
    .btn-action { padding:16px; }
    .process-steps { grid-template-columns:1fr 1fr; gap:40px; }
    .step-connector { display:none; }
}
@media (max-width:768px) {
    .nav-links { position:fixed; top:0; right:-100%; width:72%; height:100vh; background:var(--white); flex-direction:column; padding:100px 40px; transition:right .35s ease; box-shadow:-5px 0 24px rgba(0,0,0,.12); z-index:999; }
    .nav-links.active { right:0; }
    .business-nav { grid-template-columns:1fr 1fr; }
    .stats-grid { grid-template-columns:1fr 1fr; }
    .projects-grid { grid-template-columns:1fr; }
    .project-featured { grid-column:span 1; }
    .footer-grid { grid-template-columns:1fr 1fr; }
    .footer-grid .footer-col:first-child { grid-column:span 2; }
    .footer-cta-band { flex-direction:column; text-align:center; }
    .footer-cta-text p { margin:0 auto; }
    .footer-cta-actions { justify-content:center; }
    .footer-bottom { flex-direction:column; text-align:center; }
    .footer-partners-strip { justify-content:center; text-align:center; }
    .partner-logos { justify-content:center; }
    .bottom-links { justify-content:center; }
    .form-row { grid-template-columns:1fr; }
    .process-steps { grid-template-columns:1fr; }
}
@media (max-width:540px) {
    .footer-grid { grid-template-columns:1fr; }
    .footer-grid .footer-col:first-child { grid-column:span 1; }
    .section { padding:70px 5%; }
    .about-section, .why-section, .process-section, .contact-section, .testimonials-section { padding:80px 5%; }
    .stats-grid { grid-template-columns:1fr 1fr; }
    .hero-cta { flex-direction:column; }
    .cta-btn { text-align:center; }
    .tracking-container { padding:36px 20px; }
    .contact-form-box { padding:30px 20px; }
}