/* =============================== 
   :ROOT VARIABLES
=============================== */
:root {
  --primary: #10B981;
  --primary-dark: #059669;
  --primary-soft: #ECFDF5;
  --text: #0f172a;
  --muted: #64748b;
  --shadow-md: 0 12px 30px rgba(16,24,40,.12);
  --transition: .25s ease;
}

/* =============================== 
   RESET
=============================== */
* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }

/* =============================== 
   HEADER
=============================== */
header {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  transition: background 0.3s, padding 0.3s;
}
header.scrolled {
  background: #fff;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  padding:8px 32px;
}
.header-inner {
  max-width:1300px;
  margin:auto;
  padding:16px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.brand { display:flex; align-items:center; gap:14px; }
.logo {
  width:46px; height:46px; border-radius:14px;
  background: linear-gradient(135deg,var(--primary),#34D399);
  color:#fff; font-weight:900; font-size:20px;
  display:grid; place-items:center;
  box-shadow:0 8px 22px rgba(16,185,129,.35);
}
.brand-text strong { display:block; font-size:18px; }
.brand-text small { font-size:12px; color: var(--muted); }
.menu {
  display:flex; align-items:center; gap:6px; padding:6px;
  background:#f8faf9; border-radius:999px; margin:auto;
}
.nav-link {
  padding:10px 16px; border-radius:999px; font-size:14px; font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
  transition:var(--transition);
}
.nav-link:hover, .nav-link.active { background:var(--primary-soft); color:var(--primary-dark); }
.nav-dropdown { position:relative; }
.dropdown-menu {
  position:absolute; top:120%; left:0; min-width:240px;
  padding:12px; background:#fff; border-radius:16px;
  border:1px solid rgba(15,23,42,.08); box-shadow:var(--shadow-md);
  display:none; opacity:0; transform:translateY(-10px);
  transition:all 0.3s ease; z-index:100;
}
.nav-dropdown.open .dropdown-menu {
  display:block; opacity:1; transform:translateY(0);
}
.dropdown-menu a { display:block; padding:12px 14px; border-radius:12px; font-size:14px; font-weight:500; }
.dropdown-menu a:hover { background:var(--primary-soft); color:var(--primary-dark); }
.arrow { margin-left:4px; transition:transform 0.3s; }
.arrow.rotated { transform:rotate(180deg); }
.nav-right { display:flex; align-items:center; gap:14px; }
.btn { padding:10px 18px; border-radius:999px; font-size:14px; font-weight:700; border:1px solid rgba(15,23,42,.08); background:#fff; transition:var(--transition); }
.btn.ghost:hover { background:var(--primary-soft); color:var(--primary-dark); }
.btn.primary {
  background: linear-gradient(135deg,var(--primary),#34D399);
  color:#fff; border:none;
  box-shadow:0 8px 22px rgba(16,185,129,.35);
}
.btn.primary:hover { transform:translateY(-2px) scale(1.02); }
#hamburger {
  display:none; width:44px; height:44px; border-radius:12px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff; font-size:22px; justify-content:center; align-items:center;
}
.mobile-panel {
  position:fixed; inset:0; width:100vw; max-width:100%; height:100vh;
  background:#ffffff; transform:translateX(100%);
  transition:transform 0.3s ease; z-index:1200;
  display:flex; flex-direction:column; overflow-x:hidden; overflow-y:auto; padding:0;
}
.mobile-panel.open { transform:translateX(0); }
.mobile-header { display:flex; align-items:center; justify-content:space-between; padding:24px; }
.mobile-header .logo { width:40px; height:40px; }
.close-btn { font-size:24px; background:none; border:none; cursor:pointer; }
.mobile-nav { padding:24px; display:flex; flex-direction:column; gap:16px; flex-grow:1; }
.mobile-link, .mobile-dropdown-toggle { width:100%; padding:14px; border-radius:12px; font-size:16px; font-weight:600; text-align:left; background:none; border:none; }
.mobile-link:hover, .mobile-dropdown-toggle:hover { background:var(--primary-soft); color:var(--primary-dark); }
.mobile-dropdown-menu { display:none; flex-direction:column; padding-left:0; margin-top:6px; }
.mobile-dropdown-menu a { display:block; width:100%; padding:12px 16px; white-space:normal; }
.mobile-dropdown.open .mobile-dropdown-menu { display:flex; }
.mobile-dropdown-toggle span.rotated { transform:rotate(180deg); transition:transform 0.3s; }
.mobile-cta { padding:24px; border-top:1px solid rgba(15,23,42,.08); display:flex; flex-direction:column; gap:12px; }
.mobile-cta .btn { width:100%; padding:16px; font-size:16px; transition:all .3s ease; }
@media(max-width:860px){
  .menu, .brand-text, .nav-right .btn { display:none; }
  #hamburger { display:flex; }
  .header-inner { padding:16px 12px; }
}
@media(min-width:861px){
  #hamburger { display:none !important; }
  .mobile-panel { display:none !important; left:100%; }
}

/* =============================== 
   HERO / SLIDER
=============================== */
.hero{ padding:90px 20px; background:#ffffff; }
.hero-inner{ max-width:1200px; margin:auto; display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center; }
.hero-title{ font-size:42px; line-height:1.2; font-weight:800; margin-bottom:20px; color:#0f172a; }
.hero-title span{ color:#10B981; }
.hero-sub{ font-size:17px; color:#475569; max-width:520px; margin-bottom:26px; }
.subscribe{ display:flex; gap:12px; max-width:420px; }
.subscribe input{ flex:1; padding:14px 16px; border-radius:10px; border:1px solid #d1fae5; font-size:14px; }
.subscribe button{ padding:14px 22px; border:none; border-radius:10px; font-weight:600; background:#10B981; color:#fff; cursor:pointer; transition:.3s; }
.subscribe button:hover{ background:#059669; }
.subscribe-note{ margin-top:10px; font-size:13px; color:#64748b; }
.hero-slider{ position:relative; }
.slides-wrapper{ height:420px; position:relative; overflow:hidden; border-radius:18px; box-shadow:0 20px 40px rgba(15,23,42,.12); }
.slide{ position:absolute; inset:0; opacity:0; transform:scale(.98); transition:all .6s ease; }
.slide.active{ opacity:1; transform:scale(1); z-index:1; }
.slide img{ width:100%; height:100%; object-fit:cover; }
.slide-overlay{ position:absolute; bottom:24px; left:24px; background:rgba(15,23,42,.65); color:#fff; padding:18px 22px; border-radius:14px; backdrop-filter:blur(6px); max-width:75%; }
.slide-overlay h2{ font-size:22px; margin-bottom:6px; }
.slide-overlay p{ font-size:14px; opacity:.9; }
.nav{ position:absolute; top:50%; transform:translateY(-50%); border:none; background:rgba(255,255,255,.95); width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:22px; color:#059669; }
.prev{ left:15px; } .next{ right:15px; }
.dots{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:8px; }
.dots span{ width:8px; height:8px; background:#e5e7eb; border-radius:50%; cursor:pointer; }
.dots span.active{ background:#10B981; }
@media(max-width:900px){ .hero-inner{ grid-template-columns:1fr; } .slides-wrapper{height:320px;} }



/* =============================== 
   WHY CHOOSE
=============================== */
.why-choose-section{ padding:100px 20px; background:#ffffff; }
.why-choose-inner{ max-width:1200px; margin:auto; display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center; }
.badge{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.08em; color:#065f46; background:#ECFDF5; padding:6px 14px; border-radius:999px; margin-bottom:14px; }
.why-choose-text h2{ font-size:36px; font-weight:800; margin-bottom:18px; line-height:1.25; }
.why-choose-text strong{ color:#10B981; }
.why-choose-text p{ font-size:16px; line-height:1.7; color:#444; max-width:520px; margin-bottom:26px; }
.why-list{ list-style:none; padding:0; margin-bottom:34px; }
.why-list li{ position:relative; padding-left:34px; margin-bottom:14px; font-size:15px; color:#333; }
.why-list li::before{ content:"✔"; position:absolute; left:0; color:#10B981; font-weight:700; }
.btn-primary{ display:inline-block; padding:14px 26px; font-weight:600; border-radius:10px; background:linear-gradient(135deg,#10B981,#34D399); color:#fff; text-decoration:none; transition:.3s ease; }
.btn-primary:hover{ background:linear-gradient(135deg,#059669,#10B981); }
.why-choose-image img{ width:100%; border-radius:20px; box-shadow:0 20px 40px rgba(16,185,129,.2); }
@media(max-width:900px){ .why-choose-inner{ grid-template-columns:1fr; text-align:center; } .why-choose-text p{ margin-left:auto; margin-right:auto; } .why-list li{ padding-left:0; } .why-list li::before{ position:static; margin-right:6px; } }

/* =============================== 
   TEMPLATES / ARTICLES
=============================== */
.templates-section{ padding:100px 20px; background:#ffffff; }
.templates-inner{ max-width:1200px; margin:auto; display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:center; }
.templates-image img{ width:100%; border-radius:20px; box-shadow:0 20px 40px rgba(16,185,129,.2); }
.templates-text h2{ font-size:36px; font-weight:800; line-height:1.25; margin-bottom:20px; }
.templates-text strong{ color:#10B981; }
.templates-text p{ font-size:16px; line-height:1.7; color:#444; max-width:520px; margin-bottom:26px; }
.template-points{ list-style:none; padding:0; margin-bottom:34px; }
.template-points li{ position:relative; padding-left:34px; margin-bottom:14px; font-size:15px; color:#333; }
.template-points li::before{ content:"✔"; position:absolute; left:0; color:#10B981; font-weight:700; }
@media(max-width:900px){ .templates-inner{ grid-template-columns:1fr; text-align:center; } .templates-text p{ margin-left:auto; margin-right:auto; } .template-points li{ padding-left:0; } .template-points li::before{ position:static; margin-right:6px; } }

/* =============================== 
   TOOLS
=============================== */
.tools-section{ padding:100px 20px; background:#ffffff; }
.tools-inner{ max-width:1200px; margin:auto; display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:center; }
.tools-image img{ width:100%; border-radius:20px; box-shadow:0 20px 40px rgba(16,185,129,.2); }
.tools-text h2{ font-size:36px; font-weight:800; line-height:1.25; margin-bottom:20px; }
.tools-text strong{ color:#10B981; }
.tools-text p{ font-size:16px; line-height:1.7; color:#444; max-width:520px; margin-bottom:26px; }
.tools-points{ list-style:none; padding:0; margin-bottom:34px; }
.tools-points li{ position:relative; padding-left:34px; margin-bottom:14px; font-size:15px; color:#333; }
.tools-points li::before{ content:"✔"; position:absolute; left:0; color:#10B981; font-weight:700; }
.tools-image{ order:2; }
.tools-text{ order:1; }
@media(max-width:900px){ .tools-inner{ grid-template-columns:1fr; text-align:center; } .tools-text p{ margin-left:auto; margin-right:auto; } .tools-points li{ padding-left:0; } .tools-points li::before{ position:static; margin-right:6px; } }

/* FORMULAS / FUNCTIONS */
.formulas-section{padding:100px 20px;background:#ffffff;}
.formulas-inner{max-width:1200px;margin:auto;display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center;}
.formulas-image img{width:100%;border-radius:20px;box-shadow:0 20px 40px rgba(16,185,129,.2);}
.formulas-text h2{font-size:36px;font-weight:800;line-height:1.25;margin-bottom:20px;}
.formulas-text strong{color:#10B981;}
.formulas-text p{font-size:16px;line-height:1.7;color:#444;max-width:520px;margin-bottom:26px;}
.formula-points{list-style:none;padding:0;margin-bottom:34px;}
.formula-points li{position:relative;padding-left:34px;margin-bottom:14px;font-size:15px;color:#333;}
.formula-points li::before{content:"ƒx";position:absolute;left:0;color:#10B981;font-weight:700;}
@media(max-width:900px){.formulas-inner{grid-template-columns:1fr;text-align:center;}.formulas-text p{margin-left:auto;margin-right:auto;}.formula-points li{padding-left:0;}.formula-points li::before{position:static;margin-right:6px;}}

/* EXCEL KEYBOARD SHORTCUTS */
.shortcuts-section{padding:100px 20px;background:#ffffff;}
.shortcuts-inner{max-width:1200px;margin:auto;display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center;}
.shortcuts-image img{width:100%;border-radius:20px;box-shadow:0 20px 40px rgba(16,185,129,.2);}
.shortcuts-text h2{font-size:36px;font-weight:800;line-height:1.25;margin-bottom:20px;}
.shortcuts-text strong{color:#10B981;}
.shortcuts-text p{font-size:16px;line-height:1.7;color:#444;max-width:520px;margin-bottom:26px;}
.shortcuts-points{list-style:none;padding:0;margin-bottom:34px;}
.shortcuts-points li{position:relative;padding-left:38px;margin-bottom:14px;font-size:15px;color:#333;}
.shortcuts-points li::before{content:"⌨";position:absolute;left:0;top:0;color:#10B981;font-weight:700;font-size:16px;}
.shortcuts-image{order:2;}
.shortcuts-text{order:1;}
@media(max-width:900px){.shortcuts-inner{grid-template-columns:1fr;text-align:center;}.shortcuts-text p{margin-left:auto;margin-right:auto;}.shortcuts-points li{padding-left:0;}.shortcuts-points li::before{position:static;margin-right:6px;}}



/* =============================== 
   TOOLS
=============================== */
.tools-section{ padding:100px 20px; background:#ffffff; }
.tools-inner{ max-width:1200px; margin:auto; display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:center; }
.tools-image img{ width:100%; border-radius:20px; box-shadow:0 20px 40px rgba(16,185,129,.2); }
.tools-text h2{ font-size:36px; font-weight:800; line-height:1.25; margin-bottom:20px; }
.tools-text strong{ color:#10B981; }
.tools-text p{ font-size:16px; line-height:1.7; color:#444; max-width:520px; margin-bottom:26px; }
.tools-points{ list-style:none; padding:0; margin-bottom:34px; }
.tools-points li{ position:relative; padding-left:34px; margin-bottom:14px; font-size:15px; color:#333; }
.tools-points li::before{ content:"✔"; position:absolute; left:0; color:#10B981; font-weight:700; }
.tools-image{ order:2; }
.tools-text{ order:1; }
@media(max-width:900px){ .tools-inner{ grid-template-columns:1fr; text-align:center; } .tools-text p{ margin-left:auto; margin-right:auto; } .tools-points li{ padding-left:0; } .tools-points li::before{ position:static; margin-right:6px; } }



/* =============================== 
   TESTIMONIALS
=============================== */
.testimonials-section{ text-align:center; padding:100px 20px; background:#ffffff; }
.testimonials-section h2{ font-size:36px; font-weight:800; margin-bottom:14px; color:#111; }
.testimonial-subtitle{ color:#475569; font-size:16px; margin-bottom:50px; max-width:720px; margin-left:auto; margin-right:auto; line-height:1.6; }
.testimonial-cards{ display:flex; flex-wrap:wrap; gap:30px; justify-content:center; max-width:1200px; margin:auto; }
.testimonial-card{ background:#ffffff; padding:42px 26px 28px; width:320px; border-radius:18px; box-shadow:0 10px 28px rgba(16,185,129,.2); text-align:center; position:relative; transition:.35s ease; }
.testimonial-card:hover{ transform:translateY(-10px); box-shadow:0 18px 40px rgba(16,185,129,.14); }
.testimonial-card img{ width:90px; height:90px; border-radius:50%; object-fit:cover; margin-top:-60px; border:3px solid #10B981; background:#fff; }
.testimonial-card p{ color:#475569; margin:22px 0; font-size:15px; line-height:1.65; }
.testimonial-card h4{ color:#10B981; margin-bottom:4px; font-weight:600; }
.testimonial-card small{ color:#777; font-size:13px; }
@media(max-width:900px){ .testimonial-card{ width:92%; } .testimonials-section{ padding:80px 18px; } }

/* =============================== 
   FAQ
=============================== */
.exl-faq-section { padding:100px 20px; font-family:"Poppins",sans-serif; max-width:1200px; margin:0 auto; background:#ffffff; }
.exl-faq-title { text-align:center; font-size:34px; font-weight:700; color:#0f172a; margin-bottom:8px; }
.exl-faq-subtitle { text-align:center; color:#475569; max-width:720px; margin:0 auto 30px; line-height:1.6; }
.exl-faq-container { display:flex; flex-direction:column; gap:20px; align-items:center; }
.exl-faq-item { background:#fff; border-radius:10px; border-left:4px solid #10B981; box-shadow:0 10px 28px rgba(16,185,129,.2); overflow:hidden; transition:box-shadow 0.3s ease,border-color 0.3s ease; width:100%; max-width:900px; }
.exl-faq-item.exl-open { border-left-color:#059669; box-shadow:0 18px 40px rgba(16,185,129,.14); }
.exl-faq-question { width:100%; padding:18px 20px; background:#fff; border:none; outline:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; font-size:16px; font-weight:600; color:#0f172a; text-align:left; transition:background 0.3s ease; }
.exl-faq-question:hover { background:#f0fdf4; }
.exl-faq-icon { font-size:20px; line-height:1; transition:transform 0.34s cubic-bezier(0.4,0,0.2,1); color:#10B981; }
.exl-faq-answer { max-height:0; overflow:hidden; padding:0 20px; transition:max-height 0.34s ease,padding 0.34s ease; background:#fff; }
.exl-faq-answer p { margin:14px 0; color:#444; line-height:1.7; font-size:15px; }
.exl-faq-item.exl-open .exl-faq-answer { padding:14px 20px; }
.exl-faq-item.exl-open .exl-faq-icon { transform:rotate(45deg); }
@media(max-width:900px){ .exl-faq-section{ padding:80px 20px; } }
@media(max-width:600px){ .exl-faq-title{ font-size:26px; } .exl-faq-question{ font-size:15px; padding:14px 16px; } .exl-faq-answer{ font-size:14px; padding:12px 16px; } }
@media(max-width:400px){ .exl-faq-question{ padding:12px 14px; font-size:14px; } .exl-faq-answer{ padding:12px 14px; font-size:14px; } }


/* =============================== ARTICLES / BLOG SLIDER ================================ */
.articles-slider-section{padding:30px 16px;background:#ffffff;}
.articles-slider-section h2{font-size:26px;font-weight:800;margin-bottom:8px;background:linear-gradient(90deg,#10B981,#34D399);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.articles-slider-section p{font-size:13px;color:#64748b;margin-bottom:16px;}
.articles-slider-wrapper{max-width:1200px;margin:0 auto;position:relative;}
.slider-viewport{overflow:hidden;border-radius:12px;}
.articles-slider{display:flex;gap:12px;will-change:transform;transition:transform 0.3s ease;}
.article-card{min-width:240px;background:#fff;padding:12px;border-radius:12px;box-shadow:0 14px 28px rgba(16,185,129,.12);transition:transform 0.25s ease,box-shadow 0.25s ease;}
.article-card:hover{transform:translateY(-4px);box-shadow:0 24px 48px rgba(16,185,129,.2);}
.article-card img{border-radius:10px;margin-bottom:8px;height:100px;width:100%;object-fit:cover;}
.article-card h3{margin:4px 0 4px 0;font-size:16px;color:#0f172a;font-weight:700;}
.article-card p{font-size:12px;color:#64748b;margin-bottom:0;}
.slider-controls{position:absolute;left:10px;right:10px;top:45%;display:flex;justify-content:space-between;pointer-events:none;transform:translateY(-50%);}
.slider-controls button{pointer-events:auto;background:rgba(255,255,255,0.95);border:1px solid rgba(15,23,36,.06);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:20px;color:#059669;box-shadow:0 8px 18px rgba(0,0,0,.1);transition:0.25s ease;}
.slider-controls button:hover{background:#ECFDF5;transform:scale(1.08);}
.dots{display:flex;gap:5px;justify-content:center;margin-top:10px;}
.dots span{width:8px;height:8px;background:#d1fae5;border-radius:50%;cursor:pointer;transition:0.25s ease;}
.dots span.active{background:#10B981;transform:scale(1.2);}
@media(max-width:900px){.articles-slider{gap:10px;}.article-card{min-width:200px;padding:10px;}.article-card img{height:90px;}}
@media(max-width:600px){.articles-slider{gap:8px;}.article-card{min-width:160px;padding:8px;}.article-card img{height:80px;}.articles-slider-section h2{font-size:22px;}.articles-slider-section p{font-size:12px;}}

/* =============================== 
   FOOTER
=============================== */
.site-footer{background:#0f172a;padding:60px 30px 25px;color:#e5e7eb}
.footer-container{max-width:1300px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px}
.footer-column h4{color:#10B981;font-size:18px;margin-bottom:14px;font-weight:700}
.footer-column p,.footer-column ul li{color:#cbd5e1;font-size:14px;line-height:1.7}
.footer-column ul{list-style:none;padding:0}
.footer-column ul li{margin-bottom:10px}
.footer-column ul li a{color:#cbd5e1;transition:.25s}
.footer-column ul li a:hover{color:#10B981}
.newsletter-form{display:flex;margin-top:14px}
.newsletter-form input{flex:1;padding:12px 14px;border:1px solid rgba(16,185,129,.25);border-radius:8px 0 0 8px;background:#020617;color:#fff}
.newsletter-form input::placeholder{color:#94a3b8}
.newsletter-form button{padding:12px 18px;background:#10B981;border:0;border-radius:0 8px 8px 0;font-weight:600;color:#ffffff;cursor:pointer;transition:.25s}
.newsletter-form button:hover{background:#059669}
.social-icons{margin-top:18px}
.social-icons a{margin-right:14px;font-size:20px;color:#10B981;transition:.25s}
.social-icons a:hover{color:#ffffff;transform:translateY(-2px)}
.footer-bottom{text-align:center;margin-top:40px;padding-top:18px;border-top:1px solid rgba(16,185,129,.25)}
.footer-bottom p{color:#94a3b8;font-size:13px}
@media(max-width:768px){.newsletter-form{flex-direction:column}.newsletter-form input,.newsletter-form button{width:100%;border-radius:8px}}