/*
Theme Name: Energ K Elango - Human Energy Expert
Theme URI: https://example.com/
Author: Energ K Elango
Description: Modern premium theme for Energ K Elango, Human Energy Expert.
Version: 1.0.5
Text Domain: energ-k-elango
*/
:root{
  --navy:#080b2b; --navy2:#11135b; --purple:#4d0f91; --gold:#f7a915;
  --orange:#ff8b22; --white:#fff; --text:#151a42; --muted:#5f6480;
  --soft:#f7f5fb; --border:#e7e2f1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff;line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}
.container{width:min(1180px,92%);margin:auto}
.topbar{background:#070a27;color:#fff;font-size:14px}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:9px 0}
.top-left{display:flex;gap:25px}.top-right{color:#ffbd2e;font-style:italic}
.site-header{background:#fff;position:relative;z-index:20;box-shadow:0 3px 18px rgba(15,10,50,.08)}
.nav-wrap{min-height:94px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:13px;white-space:nowrap}
.brand-mark{width:58px;height:58px;border:3px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:26px;font-weight:700}
.brand-name{font-family:Georgia,serif;font-size:29px;font-weight:700;color:#11184f;line-height:1.05}
.brand-sub{color:#df8616;font-weight:700;font-size:16px}
.main-nav{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:700}
.main-nav a:hover{color:var(--purple)}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:9px;padding:14px 23px;font-weight:800;transition:.2s}
.btn-primary{background:linear-gradient(135deg,#f39b11,#ffd05b);color:#14122b}
.btn-outline{border:1px solid #f3a61a;color:#fff}
.btn-purple{background:linear-gradient(135deg,#5d0aa5,#8d20c4);color:#fff}
.hero{background:
 radial-gradient(circle at 75% 55%,rgba(145,43,255,.5),transparent 28%),
 radial-gradient(circle at 92% 30%,rgba(40,38,200,.45),transparent 32%),
 linear-gradient(120deg,#070b2e 0%,#0d103f 55%,#28105e 100%);
color:#fff;overflow:hidden}
.hero-grid{min-height:610px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:15px}
.kicker{color:#ffb91e;font-weight:800;letter-spacing:.4px}
.hero h1{font-family:Georgia,serif;font-size:clamp(48px,5.2vw,76px);line-height:1.02;margin:12px 0 22px}
.hero h1 span{color:#ffad19}
.hero-copy{font-size:19px;max-width:650px;color:#f3f3fa}
.hero-actions{display:flex;gap:18px;margin:28px 0}
.trust{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(220,180,255,.5);border-radius:14px;padding:18px 12px;max-width:850px}
.trust-item{text-align:center;border-right:1px solid rgba(255,255,255,.15);padding:0 10px}
.trust-item:last-child{border:0}.trust strong{display:block;font-size:22px;color:#fff}.trust small{color:#ddd}
.hero-person{height:610px;display:flex;align-items:flex-end;justify-content:center;position:relative}
.hero-person:before{content:"";position:absolute;width:510px;height:510px;border-radius:50%;background:radial-gradient(circle,rgba(170,65,255,.65),transparent 65%)}
.hero-person img{position:relative;z-index:2;max-height:590px;width:auto;filter:drop-shadow(0 15px 35px rgba(0,0,0,.35))}
.services{margin-top:-30px;position:relative;z-index:5}
.service-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.service{background:#fff;border-radius:15px;padding:24px 20px;box-shadow:0 12px 35px rgba(30,15,70,.13);min-height:195px}
.icon{width:58px;height:58px;border-radius:50%;background:#f2eaff;display:grid;place-items:center;font-size:26px;margin-bottom:14px}
.service h3{font-size:17px;margin:0 0 8px;color:#10164a}
.service p{font-size:13px;color:var(--muted);margin:0 0 12px}
.learn{font-size:12px;color:#6a13a2;font-weight:800}
.features{padding:70px 0;background:#faf8fd}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
.feature{text-align:center;padding:15px}
.feature h3{margin:10px 0 5px}.feature p{color:var(--muted);font-size:14px}
.section{padding:75px 0}.section-title{text-align:center;margin-bottom:42px}
.section-title .kicker{font-size:14px}.section-title h2{font-family:Georgia,serif;font-size:42px;margin:7px 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}
.about-card{background:linear-gradient(135deg,#0b0e43,#40117b);color:#fff;border-radius:20px;padding:45px}
.about-card h2{font-family:Georgia,serif;font-size:42px;margin:0 0 15px}.about-card h2 span{color:#ffad19}
.site-footer{background:#070a27;color:#fff;padding:45px 0 20px}.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}.site-footer h3{color:#ffb01b}.site-footer p,.site-footer a{color:#d7d8e5;font-size:14px}.copyright{text-align:center;border-top:1px solid #26294c;margin-top:30px;padding-top:18px;color:#aaa;font-size:13px}
@media(max-width:1050px){.main-nav{gap:12px;font-size:12px}.service-grid{grid-template-columns:repeat(3,1fr)}.hero-grid{grid-template-columns:1fr .8fr}}
@media(max-width:780px){
 .topbar .container,.nav-wrap{flex-direction:column;align-items:flex-start}.top-right{display:none}
 .nav-wrap{padding:15px 0}.main-nav{display:none}.brand-name{font-size:24px}
 .hero-grid{grid-template-columns:1fr}.hero{padding-top:35px}.hero h1{font-size:46px}.hero-copy{font-size:16px}
 .hero-person{height:430px}.hero-person img{max-height:420px}.trust{grid-template-columns:repeat(2,1fr);gap:15px}.trust-item:nth-child(2){border:0}
 .service-grid{grid-template-columns:1fr}.features,.section{padding:50px 0}.feature-grid,.about-grid,.footer-grid{grid-template-columns:1fr}
 .hero-actions{flex-direction:column;align-items:stretch}.btn{width:100%}
}

/* Version 2 refinements */
html, body { overflow-x: hidden; }
.site-header, .topbar, .hero, main, footer { max-width: 100%; }
.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr); }
.hero-person { justify-content: flex-end; padding-right: 1%; }
.hero-person:before { width: 460px; height: 460px; }
.hero-person img { max-height: 560px; max-width: 92%; }
@media (min-width: 781px) {
  .hero h1 { font-size: clamp(44px, 4.6vw, 70px); }
  .hero-copy { max-width: 610px; }
}
@media (max-width: 1100px) and (min-width: 781px) {
  .main-nav { gap: 9px; font-size: 11px; }
  .brand-name { font-size: 24px; }
  .brand-mark { width: 50px; height: 50px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, .65fr); }
}

/* Version 3: clean primary navigation */
.main-nav { list-style:none; margin:0; padding:0; flex:1; justify-content:flex-end; }
.main-nav a { display:inline-flex; align-items:center; white-space:nowrap; }
.header-cta { flex:0 0 auto; white-space:nowrap; }
@media (max-width:1200px) and (min-width:781px) {
  .main-nav { gap:10px; font-size:11px; }
  .header-cta { padding:11px 14px; font-size:11px; }
}
@media (max-width:900px) and (min-width:781px) {
  .main-nav a:nth-child(n+5) { display:none; }
}

/* Version 4: final header/hero polish */
.main-nav { gap: 17px; }
.header-cta { padding: 13px 18px; font-size: 14px; }
.hero-person { padding-right: 0; transform: translateX(2%); }
.hero-person img { max-height: 555px; max-width: 88%; }
@media (max-width: 1200px) and (min-width: 781px) {
  .main-nav { gap: 7px; font-size: 10.5px; }
  .header-cta { padding: 11px 12px; font-size: 10.5px; }
}
@media (max-width: 900px) and (min-width: 781px) {
  .main-nav { gap: 6px; font-size: 10px; }
  .header-cta { padding: 10px 10px; }
}

/* Version 5: final viewport fit */
.container { width:min(1200px,96%); }
.nav-wrap { gap:14px; }
.brand-name { font-size:27px; }
.main-nav { gap:12px; min-width:0; }
.main-nav a { font-size:13px; }
.header-cta { padding:12px 15px; font-size:13px; }
@media (max-width:1250px) and (min-width:901px) {
  .brand-name { font-size:24px; }
  .brand-sub { font-size:14px; }
  .brand-mark { width:50px; height:50px; }
  .main-nav { gap:8px; }
  .main-nav a { font-size:11px; }
  .header-cta { padding:10px 11px; font-size:11px; }
}
@media (max-width:900px) and (min-width:781px) {
  .main-nav a:nth-child(n+6) { display:none; }
  .header-cta { padding:9px 10px; font-size:10px; }
}