:root{
  --blue:#063B66;
  --blue-light:#0B5C93;
  --yellow:#FFC928;
  --white:#FFFFFF;
  --offwhite:#F5F7FA;
  --navy:#071A2B;
  --text-muted:#5B6675;
  --logo-chip:#FFFFFF;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif; color:var(--navy); background:var(--white); overflow-x:hidden;}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}
::selection{background:var(--yellow); color:var(--navy);}
.container{max-width:1280px; margin:0 auto; padding:0 24px;}
@media(min-width:768px){.container{padding:0 40px;}}

/* ---------- Skip link (a11y) ---------- */
.skip-link{position:absolute; left:-9999px; top:0; background:var(--yellow); color:var(--navy); font-weight:700; padding:12px 20px; border-radius:0 0 8px 0; z-index:200;}
.skip-link:focus{left:0;}

/* ---------- Nav ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:100; transition:all .4s ease; border-bottom:1px solid transparent;}

.nav.scrolled{
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(6,59,102,0.1);
  box-shadow:0 4px 20px rgba(6,59,102,0.06);
}

.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 24px;}
@media(min-width:768px){.nav-inner{padding:16px 40px;}}

.brand{display:flex; align-items:center;}

.logo-chip{
  background:transparent;
  border-radius:12px;
  padding:4px 0;
  display:flex;
  align-items:center;
  box-shadow:none;
  transition:opacity .3s ease, transform .3s ease;
}
.brand:hover .logo-chip{
  opacity:.85;
}

.nav-logo{
  height:60px;
  width:auto;
  object-fit:contain;
  display:block;
}

.nav-links{display:none; gap:32px; align-items:center;}
@media(min-width:900px){.nav-links{display:flex;}}
.nav-links a{position:relative; color:var(--navy); opacity:.7; font-size:14px; transition:color .2s, opacity .2s;}
.nav-links a:hover{opacity:1; color:var(--blue);}
.nav-links a::after{content:''; position:absolute; left:0; bottom:-6px; width:0; height:1.5px; background:var(--yellow); transition:width .3s;}
.nav-links a:hover::after{width:100%;}
.nav-links a.active::after{width:100%;}
.nav-links a.active{color:var(--blue); opacity:1; font-weight:600;}

.btn-cta{display:inline-flex; align-items:center; gap:8px; background:var(--yellow); color:var(--navy); font-weight:700; font-size:12px; letter-spacing:.03em; padding:12px 22px; border-radius:999px; transition:transform .25s; border:none; cursor:pointer;}
.btn-cta:hover{transform:scale(1.05);}
.nav-cta{display:none;}
@media(min-width:900px){.nav-cta{display:inline-flex;}}
.hamburger{display:flex; background:none; border:none; color:var(--navy); cursor:pointer; z-index:101;}
@media(min-width:900px){.hamburger{display:none;}}
.mobile-menu{max-height:0; overflow:hidden; background:rgba(255,255,255,0.98); border-bottom:1px solid #E4E8EE; transition:max-height .4s ease;}
.mobile-menu.open{max-height:420px;}
.mobile-menu-inner{display:flex; flex-direction:column; gap:16px; padding:8px 24px 24px;}
.mobile-menu-inner a{color:var(--navy); font-size:15px;}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:100vh; display:flex; align-items:flex-end; overflow:hidden; background:linear-gradient(180deg, #ffffff, var(--offwhite) 55%, var(--offwhite));}
.hero-bg{position:absolute; inset:0; background:url('../images/hero-bg.jpg') center/cover; opacity:.10;}
.hero-glow{position:absolute; width:560px; height:560px; right:-140px; top:-160px; border-radius:50%; background:radial-gradient(circle, rgba(255,201,40,0.25) 0%, transparent 70%);}
.hero-sun{position:absolute; width:200px; height:200px; right:10%; top:14%; border-radius:50%; background:var(--yellow); opacity:.85; box-shadow:0 0 120px 30px rgba(255,201,40,0.25); filter:blur(1px);}
.hero-content{position:relative; z-index:2; width:100%; padding:160px 0 100px;}
.badge{display:inline-flex; align-items:center; gap:8px; background:rgba(255,201,40,0.15); border:1px solid rgba(255,201,40,0.5); color:#8A6200; font-size:11px; font-weight:700; letter-spacing:.2em; padding:8px 16px; border-radius:999px; margin-bottom:28px;}
.hero h1{color:var(--navy); font-weight:700; line-height:.95; letter-spacing:-.02em; font-size:clamp(3rem,9vw,7rem);}
.hero h1 span{color:var(--blue);}
.hero p{color:var(--text-muted); font-size:clamp(1.05rem,2vw,1.3rem); max-width:560px; margin-top:28px; line-height:1.6;}
.hero-actions{display:flex; flex-wrap:wrap; gap:16px; margin-top:36px;}
.btn-outline{display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(6,59,102,.25); color:var(--navy); font-weight:700; font-size:13px; padding:14px 26px; border-radius:999px; transition:background .2s;}
.btn-outline:hover{background:rgba(6,59,102,.06);}
.btn-cta-lg{display:inline-flex; align-items:center; gap:8px; background:var(--yellow); color:var(--navy); font-weight:700; font-size:13px; padding:14px 26px; border-radius:999px; transition:transform .25s;}
.btn-cta-lg:hover{transform:scale(1.05);}

/* ---------- Page hero (sub-pages) ---------- */
.page-hero{position:relative; padding:170px 0 70px; background:linear-gradient(180deg, #ffffff, var(--offwhite) 90%);}
.page-hero h1{font-weight:700; font-size:clamp(2.4rem,6vw,4.2rem); letter-spacing:-.02em;}
.page-hero p{color:var(--text-muted); font-size:1.1rem; max-width:600px; margin-top:18px; line-height:1.6;}
.breadcrumb{font-size:.8rem; color:var(--text-muted); margin-bottom:18px;}
.breadcrumb a{color:var(--blue); font-weight:600;}

/* ---------- Section basics ---------- */
section{padding:100px 0;}
@media(min-width:768px){section{padding:130px 0;}}
.eyebrow{font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--blue);}
.eyebrow.yellow{color:var(--yellow);}
.h2-xl{font-weight:700; font-size:clamp(2rem,4.5vw,3.2rem); margin-top:14px; letter-spacing:-.01em;}
.lede{color:var(--text-muted); font-size:1.1rem; max-width:640px; margin-top:16px;}

.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1);}
.reveal.visible{opacity:1; transform:translateY(0);}

/* ---------- Impact statement ---------- */
.impact-statement{background:var(--offwhite); text-align:center;}
.impact-statement h2{font-weight:700; font-size:clamp(2.2rem,6vw,4.5rem); line-height:1.05;}
.impact-statement h2 .accent{color:var(--blue);}
.impact-statement p{color:var(--text-muted); font-size:clamp(1.05rem,2vw,1.3rem); max-width:680px; margin:26px auto 0; line-height:1.6;}

/* ---------- Solutions ---------- */
.grid-4{display:grid; grid-template-columns:1fr; gap:20px; margin-top:56px;}
@media(min-width:640px){.grid-4{grid-template-columns:1fr 1fr;}}
@media(min-width:1100px){.grid-4{grid-template-columns:repeat(4,1fr);}}
.card{background:#fff; border:1px solid #E4E8EE; border-radius:24px; padding:28px; display:flex; flex-direction:column; justify-content:space-between; transition:all .3s ease; cursor:default;}
.card:hover{background:var(--blue); border-color:var(--blue); transform:translateY(-6px); box-shadow:0 20px 40px -12px rgba(6,59,102,.35);}
.card .icon-box{width:48px; height:48px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:rgba(6,59,102,.07); margin-bottom:22px; transition:background .3s;}
.card:hover .icon-box{background:var(--yellow);}
.card .icon-box svg{stroke:var(--blue); transition:stroke .3s;}
.card:hover .icon-box svg{stroke:var(--navy);}
.card h3{font-size:1.05rem; font-weight:700; margin-bottom:10px; transition:color .3s;}
.card:hover h3{color:#fff;}
.card p{font-size:.9rem; line-height:1.6; color:var(--text-muted); transition:color .3s;}
.card:hover p{color:rgba(255,255,255,.75);}
.card .learn{display:flex; align-items:center; gap:6px; font-size:.8rem; font-weight:700; color:var(--blue); margin-top:22px; transition:color .3s;}
.card:hover .learn{color:var(--yellow);}

/* ---------- Why Sagietech ---------- */
.why{background:var(--offwhite); color:var(--navy);}
.why h2{color:var(--navy);}
.why-grid{display:grid; grid-template-columns:1fr; gap:1px; background:#E4E8EE; margin-top:56px; border:1px solid #E4E8EE; border-radius:20px; overflow:hidden;}
@media(min-width:640px){.why-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1100px){.why-grid{grid-template-columns:repeat(5,1fr);}}
.why-item{background:#fff; padding:32px;}
.why-item .num{font-size:1.8rem; font-weight:700; color:var(--blue); margin-bottom:20px;}
.why-item h3{font-size:.9rem; font-weight:700; letter-spacing:.03em; margin-bottom:10px; color:var(--navy);}
.why-item p{font-size:.9rem; line-height:1.6; color:var(--text-muted);}

/* ---------- Process ---------- */
.process{background:var(--offwhite);}
.process-track{position:relative;}
.process-line{display:none; position:absolute; top:24px; left:0; right:0; height:1.5px; background:#D8DEE7;}
@media(min-width:1100px){.process-line{display:block;}}
.process-grid{display:grid; grid-template-columns:1fr; gap:40px; position:relative; z-index:1;}
@media(min-width:640px){.process-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1100px){.process-grid{grid-template-columns:repeat(6,1fr); gap:16px;}}
.process-dot{width:12px; height:12px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 5px var(--offwhite); margin-bottom:18px;}
.process-item .n{font-size:.8rem; font-weight:700; color:var(--blue); margin-bottom:8px;}
.process-item h3{font-size:.9rem; font-weight:700; letter-spacing:.03em; margin-bottom:8px;}
.process-item p{font-size:.9rem; color:var(--text-muted); line-height:1.6;}

/* ---------- Impact goals ---------- */
.goals{background:#fff; color:var(--navy); position:relative; overflow:hidden; border-top:1px solid #EDF0F4; border-bottom:1px solid #EDF0F4;}
.goals h2{color:var(--navy);}
.goals-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:56px;}
@media(min-width:1100px){.goals-grid{grid-template-columns:repeat(4,1fr); gap:48px;}}
.goal-num{font-weight:700; font-size:clamp(2.4rem,5.5vw,4rem); color:var(--blue); line-height:1;}
.goal-label{color:var(--text-muted); font-size:.9rem; margin-top:14px; max-width:220px; line-height:1.6;}
.goals-note{color:#9AA3B0; font-size:.8rem; margin-top:56px; letter-spacing:.02em;}

/* ---------- Community impact ---------- */
.community-grid{display:grid; grid-template-columns:1fr; gap:20px; margin-top:56px;}
@media(min-width:768px){.community-grid{grid-template-columns:1fr 1fr;}}
.community-panel{border-radius:24px; padding:40px; background:linear-gradient(135deg,var(--blue),var(--navy));}
.community-panel h3{color:var(--yellow); font-size:1.5rem; margin-bottom:14px;}
.community-panel p{color:rgba(255,255,255,.7); line-height:1.6;}

/* ---------- Projects ---------- */
.projects{background:var(--offwhite);}
.project-grid{display:grid; grid-template-columns:1fr; gap:20px; margin-top:56px;}
@media(min-width:640px){.project-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1100px){.project-grid{grid-template-columns:repeat(3,1fr);}}
.project-card{position:relative; border-radius:20px; overflow:hidden; aspect-ratio:4/3; border:1px solid #E4E8EE; background:linear-gradient(160deg, rgba(6,59,102,.08) 0%, rgba(6,59,102,.03) 100%); display:flex; flex-direction:column; justify-content:space-between; padding:22px;}
.project-card .coming-soon{font-size:11px; letter-spacing:.2em; font-weight:700; color:var(--blue); opacity:.55;}
.project-card .tag{font-size:10px; letter-spacing:.15em; font-weight:700; color:var(--blue); margin-bottom:6px;}
.project-card h3{color:var(--navy); font-weight:700; font-size:1.05rem;}

/* ---------- Partners ---------- */
.partners{border-top:1px solid #EDF0F4; border-bottom:1px solid #EDF0F4;}
.partners-title{text-align:center; margin-bottom:44px;}
.partners-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media(min-width:640px){.partners-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1100px){.partners-grid{grid-template-columns:repeat(5,1fr);}}
.partner-frame{display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #E4E8EE; border-radius:16px; padding:20px; aspect-ratio:16/10; transition:all .3s ease;}
.partner-frame:hover{border-color:var(--blue); box-shadow:0 12px 28px -10px rgba(6,59,102,.18); transform:translateY(-3px);}
.partner-frame img{max-width:100%; max-height:100%; object-fit:contain; filter:grayscale(100%); opacity:.75; transition:all .3s ease;}
.partner-frame:hover img{filter:grayscale(0%); opacity:1;}
.partner-caption{text-align:center; font-size:.78rem; color:var(--text-muted); margin-top:12px; line-height:1.4;}

/* ---------- About ---------- */
.about-grid{display:grid; grid-template-columns:1fr; gap:60px; align-items:center;}
@media(min-width:1024px){.about-grid{grid-template-columns:1fr 1fr;}}
.about-img{background:#fff; border:1px solid #E4E8EE; border-radius:24px; padding:14px; box-shadow:0 20px 44px -18px rgba(6,59,102,.22);}
.about-img .frame-inner{border-radius:16px; overflow:hidden; aspect-ratio:4/3;}
.about-img img{width:100%; height:100%; object-fit:cover;}
.about-text h2{margin:14px 0 22px; font-size:clamp(1.8rem,3.5vw,2.8rem);}
.about-text p{color:var(--text-muted); font-size:1.05rem; line-height:1.7; margin-bottom:22px;}
.pill-row{display:flex; flex-wrap:wrap; gap:10px;}
.pill{display:inline-flex; align-items:center; gap:8px; background:rgba(6,59,102,.05); color:var(--blue); font-size:.85rem; font-weight:700; padding:9px 16px; border-radius:999px;}
.mv-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px; padding-top:30px; border-top:1px solid #EDF0F4;}
.mv-grid .label{font-size:11px; font-weight:700; letter-spacing:.15em; color:#9AA3B0; margin-bottom:6px;}
.mv-grid p{font-size:.9rem; color:var(--text-muted); line-height:1.6;}

.img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  color: #888;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: inherit;
}

/* ---------- Team ---------- */
.team{background:var(--offwhite);}
.team-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:28px; margin-top:56px; text-align:center;}
@media(min-width:640px){.team-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1100px){.team-grid{grid-template-columns:repeat(5,1fr);}}
.avatar-frame{width:88px; height:88px; border-radius:50%; margin:0 auto 16px; padding:4px; background:#fff; border:1px solid #E4E8EE; box-shadow:0 8px 20px -10px rgba(6,59,102,.2);}
.avatar{width:100%; height:100%; border-radius:50%; background:var(--blue); color:var(--yellow); font-weight:700; font-size:1.1rem; display:flex; align-items:center; justify-content:center;}
.team-grid h3{font-size:.85rem; font-weight:700;}
.team-grid .role{font-size:.75rem; color:var(--text-muted); margin-top:6px; line-height:1.5;}

/* ---------- Final CTA ---------- */
.final-cta{position:relative; background:linear-gradient(160deg, var(--offwhite), #fff); text-align:center; overflow:hidden; border-top:1px solid #EDF0F4;}
.final-cta-bg{position:absolute; inset:0; background:url('../images/cta-bg.jpg') center/cover; opacity:.06;}
.final-cta-inner{position:relative; z-index:1; max-width:760px; margin:0 auto;}
.final-cta h2{color:var(--navy); font-weight:700; font-size:clamp(2.2rem,6vw,4rem); line-height:1.05;}
.final-cta h2 span{color:var(--blue);}
.final-cta p{color:var(--text-muted); font-size:1.1rem; max-width:520px; margin:22px auto 0;}
.final-cta .hero-actions{justify-content:center; margin-top:38px;}
.final-cta .btn-outline{border:1px solid rgba(6,59,102,.25); color:var(--navy);}
.final-cta .btn-outline:hover{background:rgba(6,59,102,.06);}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr; gap:56px;}
@media(min-width:1024px){.contact-grid{grid-template-columns:2fr 3fr;}}
.contact-info-item{display:flex; gap:14px; margin-bottom:22px;}
.contact-info-item p{font-size:.9rem; color:var(--text-muted); line-height:1.6;}
.form-grid{display:grid; grid-template-columns:1fr; gap:18px;}
@media(min-width:640px){.form-grid{grid-template-columns:1fr 1fr;}}
.form-grid .full{grid-column:1/-1;}
.field label{display:block; font-size:11px; font-weight:700; color:#9AA3B0; margin-bottom:6px;}
.field input, .field select, .field textarea{width:100%; background:var(--offwhite); border:1px solid #E4E8EE; border-radius:12px; padding:13px 14px; font-size:.9rem; font-family:inherit; outline:none; transition:border-color .2s;}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--blue);}
.field textarea{resize:none;}
.submit-btn{display:inline-flex; align-items:center; gap:8px; background:var(--blue); color:#fff; font-weight:700; font-size:13px; padding:15px 28px; border-radius:999px; border:none; cursor:pointer; transition:transform .25s;}
.submit-btn:hover{transform:scale(1.03);}
.success-box{background:var(--offwhite); border-radius:24px; padding:56px 32px; text-align:center; display:none;}
.success-box h3{margin:14px 0 8px;}
.success-box p{color:var(--text-muted); font-size:.9rem; max-width:340px; margin:0 auto;}

/* ---------- Footer ---------- */
footer{background:var(--offwhite); color:var(--navy); padding-top:90px; padding-bottom:32px; border-top:1px solid #E4E8EE;}
.footer-grid{display:grid; grid-template-columns:1fr; gap:44px; padding-bottom:56px; border-bottom:1px solid #E4E8EE;}
@media(min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr;}}
.footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.footer-brand .logo-frame{width:34px; height:34px; border-radius:9px; background:#fff; border:1px solid #E4E8EE; display:flex; align-items:center; justify-content:center; padding:5px;}
.footer-brand img{width:100%; height:100%; object-fit:contain;}
.footer-brand span{font-weight:700; color:var(--navy);}
footer p.tag{color:var(--text-muted); font-size:.9rem; max-width:280px;}
footer h4{font-size:11px; font-weight:700; letter-spacing:.15em; margin-bottom:16px; color:var(--navy);}
footer ul{list-style:none;}
footer li{color:var(--text-muted); font-size:.9rem; margin-bottom:10px;}
footer li a{color:var(--text-muted); transition:color .2s;}
footer li a:hover{color:var(--blue);}
.footer-bottom{display:flex; flex-direction:column; gap:12px; justify-content:space-between; align-items:center; padding-top:28px; color:#9AA3B0; font-size:.8rem;}
@media(min-width:640px){.footer-bottom{flex-direction:row;}}

.bounce{position:absolute; bottom:24px; left:50%; transform:translateX(-50%); width:1px; height:32px; background:rgba(6,59,102,.3); animation:bounceY 2s infinite;}
@keyframes bounceY{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,10px);}}

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed;
  bottom:24px;
  right:24px;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  cursor:pointer;
  box-shadow:0 8px 20px -6px rgba(6,59,102,.5);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
  z-index:90;
}
.back-to-top.visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.back-to-top:hover{background:var(--blue-light);}

@media(prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{transition:none; opacity:1; transform:none;}
  .back-to-top{transition:none;}
}

/* =========================================================
   INTERACTIVE SOLAR LAYER
   ========================================================= */

/* ---------- Sun-tracking scroll progress ---------- */
.sun-progress{position:fixed; top:0; left:0; right:0; height:4px; background:rgba(6,59,102,.08); z-index:110; overflow:visible;}
.sun-progress-fill{height:100%; width:0%; background:linear-gradient(90deg, #0B5C93, #FFC928 55%, #FF8A3D); transition:width .05s linear;}
.sun-progress-dot{position:absolute; top:50%; left:0%; width:12px; height:12px; border-radius:50%; background:var(--yellow); box-shadow:0 0 10px 4px rgba(255,201,40,.7); transform:translate(-50%,-50%); transition:left .05s linear; pointer-events:none;}

/* ---------- Hero: cursor-reactive sunlight + drifting particles ---------- */
.hero-cursor-glow{position:absolute; width:520px; height:520px; border-radius:50%; pointer-events:none; left:50%; top:40%; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(255,201,40,.28), transparent 70%); transition:left .2s ease-out, top .2s ease-out; z-index:1;}
.hero-sun{transition:transform .3s ease-out;}
.hero-particle{position:absolute; bottom:-20px; width:4px; height:4px; border-radius:50%; background:var(--yellow); opacity:0; pointer-events:none; animation:floatUp linear infinite; z-index:1;}
@keyframes floatUp{
  0%{transform:translateY(0) scale(0.6); opacity:0;}
  10%{opacity:.8;}
  90%{opacity:.5;}
  100%{transform:translateY(-620px) scale(1.2); opacity:0;}
}

/* ---------- Solar-panel tilt (cards track the "sun" / cursor) ---------- */
.tilt{transition:transform .15s ease-out; transform-style:preserve-3d; will-change:transform; position:relative; overflow:hidden;}
.tilt-shine{position:absolute; inset:0; background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); background-size:220% 220%; background-position:120% 0; opacity:0; transition:opacity .25s ease; pointer-events:none; border-radius:inherit;}
.tilt:hover .tilt-shine{opacity:1; animation:shineSweep 1s ease forwards;}
@keyframes shineSweep{from{background-position:120% 0;} to{background-position:-20% 100%;}}

/* ---------- Process line: animated current flowing through the steps ---------- */
.process-line{overflow:visible;}
.process-line::after{content:''; position:absolute; top:50%; left:0; width:10px; height:10px; margin-top:-5px; border-radius:50%; background:var(--yellow); box-shadow:0 0 14px 4px rgba(255,201,40,.75); animation:flowRight 4.5s linear infinite;}
@keyframes flowRight{
  0%{left:0%; opacity:0;}
  8%{opacity:1;}
  92%{opacity:1;}
  100%{left:100%; opacity:0;}
}

/* ---------- Live energy widget (homepage) ---------- */
.energy-widget{background:linear-gradient(135deg, var(--blue), var(--navy)); border-radius:24px; padding:36px 32px; color:#fff; display:grid; gap:32px; position:relative; overflow:hidden;}
@media(min-width:768px){.energy-widget{grid-template-columns:1fr 1.5fr; align-items:center; padding:44px;}}
.energy-live-dot{display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.15em; color:rgba(255,255,255,.55); margin-bottom:14px;}
.energy-live-dot::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--yellow); box-shadow:0 0 8px 2px rgba(255,201,40,.8); animation:pulseDot 1.6s ease-in-out infinite;}
@keyframes pulseDot{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(.7);}}
.energy-reading{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(2.2rem,6vw,3.2rem); color:var(--yellow); line-height:1;}
.energy-caption{color:rgba(255,255,255,.55); font-size:.8rem; margin-top:16px; line-height:1.55; max-width:340px;}
.energy-bars{display:flex; align-items:flex-end; gap:6px; height:120px;}
.energy-bar{flex:1; background:linear-gradient(180deg, var(--yellow), rgba(255,201,40,.25)); border-radius:4px 4px 0 0; height:4%; transition:height 1.1s cubic-bezier(.16,.84,.44,1);}
.energy-bar.now{background:linear-gradient(180deg, #fff, var(--yellow)); box-shadow:0 0 16px 2px rgba(255,201,40,.6);}
.energy-bar-labels{display:flex; justify-content:space-between; font-size:.65rem; color:rgba(255,255,255,.4); margin-top:8px; letter-spacing:.05em;}

/* ---------- Button spark ripple ---------- */
.spark-ripple{position:fixed; border-radius:50%; background:radial-gradient(circle, rgba(255,201,40,.9), transparent 70%); pointer-events:none; transform:translate(-50%,-50%) scale(0); z-index:200; animation:sparkPop .6s ease-out forwards;}
@keyframes sparkPop{to{transform:translate(-50%,-50%) scale(1); opacity:0;}}

@media(prefers-reduced-motion: reduce){
  .hero-particle{display:none;}
  .process-line::after{animation:none; display:none;}
  .tilt{transition:none;}
  .tilt-shine{display:none;}
  .energy-live-dot::before{animation:none;}
}