/* ==========================================================================
   SIDA SOLAR — Website design system (Plus Jakarta Sans)
   ========================================================================== */

:root{
  --primary:#1D63C0;
  --primary-dark:#0C3568;
  --primary-light:#4A93E0;
  --secondary:#0A2647;
  --accent:#F2871A;
  --accent-dark:#D06F0F;
  --accent-soft:#FFF3E3;
  --green:#0B8A47;
  --green-dark:#046E36;

  --dark:#0E1621;
  --light:#F4F7FB;
  --background:#FFFFFF;
  --card:#FFFFFF;

  --text:#121826;
  --muted:#5B6678;
  --border:#E4E9F0;

  --success:#0B8A47;
  --danger:#C4463A;

  --font:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  --container:1240px;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-xl:34px;

  --sh-sm:0 2px 10px rgba(12,53,104,.06);
  --sh-md:0 10px 34px rgba(12,53,104,.10);
  --sh-lg:0 24px 64px rgba(12,53,104,.16);
  --sh-glow:0 12px 34px rgba(242,135,26,.32);

  --ease:cubic-bezier(.16,1,.3,1);
  --top-h:44px;
  --nav-h:80px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{
  margin:0;font-family:var(--font);font-size:16px;line-height:1.65;
  color:var(--text);background:var(--background);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
h1,h2,h3,h4{margin:0;color:var(--dark);line-height:1.18;letter-spacing:-.025em;font-weight:800}
p{margin:0}
ul{list-style:none;margin:0;padding:0}

.section-inner{max-width:var(--container);margin:0 auto;padding:0 28px}
section{padding:100px 0}
@media(max-width:768px){section{padding:64px 0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- Shared type ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--primary);margin-bottom:16px;
}
.eyebrow.center{display:flex;justify-content:center}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px}
.section-title{font-size:clamp(30px,4.2vw,46px);font-weight:800;letter-spacing:-.03em}
.section-title.center{text-align:center}
.section-title .hl{color:var(--accent)}
.section-sub{font-size:17px;color:var(--muted);max-width:640px;line-height:1.7;margin-top:16px}
.section-sub.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- Buttons ---------- */
.navbar .nav-actions>.btn{padding:13px 24px;font-size:14.6px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border-radius:999px;border:1.5px solid transparent;
  font-weight:700;font-size:15px;white-space:nowrap;position:relative;overflow:hidden;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),background .28s,color .28s,border-color .28s;
}
.btn svg{width:18px;height:18px;flex:none}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--sh-glow)}
.btn-primary::before{
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);transition:left .65s var(--ease);
}
.btn-primary:hover::before{left:140%}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-3px);box-shadow:0 18px 40px rgba(242,135,26,.42)}
.btn-green{background:var(--green);color:#fff;box-shadow:0 10px 26px rgba(11,138,71,.3)}
.btn-green:hover{background:var(--green-dark);transform:translateY(-3px)}
.btn-outline{background:transparent;color:var(--primary);border-color:var(--border)}
.btn-outline:hover{border-color:var(--primary);background:rgba(29,99,192,.05);transform:translateY(-3px)}
.btn-outline-light{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.38);backdrop-filter:blur(8px)}
.btn-outline-light:hover{background:rgba(255,255,255,.18);transform:translateY(-3px)}
.btn-lg{padding:17px 36px;font-size:16px}
.btn-sm{padding:11px 22px;font-size:14px}
.btn-full{width:100%}

/* ==========================================================================
   HEADER — utility strip + main nav
   ========================================================================== */
.site-head{position:fixed;top:0;left:0;right:0;z-index:300}

.topstrip{
  background:linear-gradient(100deg,var(--primary-dark),#123f7a 60%,var(--primary));
  color:rgba(255,255,255,.94);font-size:13px;height:var(--top-h);
  display:flex;align-items:center;
  transition:margin-top .35s var(--ease),opacity .3s;
}
.topstrip-inner{
  max-width:var(--container);margin:0 auto;padding:0 28px;width:100%;
  display:flex;align-items:center;gap:24px;
}
.top-links{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.top-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;transition:color .25s,transform .25s}
.top-link svg{width:15px;height:15px;color:var(--accent)}
.top-link:hover{color:var(--accent);transform:translateY(-1px)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.top-social{display:flex;gap:9px}
.top-social a{
  width:29px;height:29px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.11);transition:background .25s,transform .25s;
}
.top-social a svg{width:15px;height:15px}
.top-social a:hover{background:var(--accent);transform:translateY(-2px)}
.top-portal{
  display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:12.5px;
  padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.22);transition:background .25s,transform .25s;
}
.top-portal:hover{background:var(--accent);border-color:transparent;transform:translateY(-1px)}
.top-portal svg{width:14px;height:14px}

.navbar{
  background:rgba(255,255,255,.97);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .35s var(--ease),background .35s;
}
.site-head.scrolled .topstrip{margin-top:calc(var(--top-h) * -1);opacity:0}
.site-head.scrolled .navbar{box-shadow:0 6px 28px rgba(12,53,104,.10)}
.navbar-inner{
  max-width:var(--container);margin:0 auto;padding:0 28px;height:var(--nav-h);
  display:flex;align-items:center;gap:16px;
}
.nav-logo{display:flex;align-items:center;flex:none;transition:transform .3s var(--ease)}
.nav-logo img{height:42px;width:auto}
.nav-logo:hover{transform:scale(1.03)}

.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-link{
  position:relative;padding:10px 13px;border-radius:10px;white-space:nowrap;
  font-size:14.6px;font-weight:600;color:var(--text);
  transition:color .28s,background .28s;
}
.nav-link::after{
  content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2.5px;
  background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-link:hover{color:var(--primary);background:rgba(29,99,192,.05)}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.nav-link.active{color:var(--primary)}

.nav-actions{display:flex;align-items:center;gap:10px;flex:none}

.hamburger{
  display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:46px;height:46px;border-radius:12px;background:var(--light);
}
.hamburger span{display:block;width:22px;height:2.4px;border-radius:2px;background:var(--dark);transition:all .3s var(--ease)}
.hamburger.active span:nth-child(1){transform:translateY(7.4px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}

/* mobile drawer */
.mobile-menu{
  position:fixed;top:0;right:0;width:min(360px,88vw);height:100%;z-index:400;
  background:var(--primary-dark);color:#fff;transform:translateX(100%);
  transition:transform .42s var(--ease);padding:28px 26px 40px;overflow-y:auto;
}
.mobile-menu.active{transform:none}
.mobile-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.mobile-head img{height:34px;background:#fff;padding:8px 11px;border-radius:11px;box-sizing:content-box}
.mobile-close{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center}
.mobile-close svg{width:19px;height:19px}
.mobile-link{
  display:flex;align-items:center;justify-content:space-between;
  color:#fff;font-weight:600;font-size:17px;padding:15px 4px;
  border-bottom:1px solid rgba(255,255,255,.1);transition:padding-left .25s,color .25s;
}
.mobile-link:hover{padding-left:10px;color:var(--accent)}
.mobile-menu .btn{margin-top:22px}
.mobile-contact{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:12px}
.mobile-contact a{display:flex;align-items:center;gap:11px;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.9)}
.mobile-contact a svg{width:17px;height:17px;color:var(--accent)}
.mobile-overlay{position:fixed;inset:0;z-index:390;background:rgba(8,20,38,.62);opacity:0;pointer-events:none;transition:opacity .4s var(--ease);backdrop-filter:blur(3px)}
.mobile-overlay.active{opacity:1;pointer-events:auto}

@media(max-width:1180px){
  .nav-link{padding:9px 10px;font-size:14px}
}
@media(max-width:1080px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .nav-actions .btn{display:none}
  /* The links carried the margin-left:auto that pushed everything to the right
     edge. Hiding them took that away with it, so the menu button came to rest
     against the logo instead of at the edge of the screen. The actions hold it
     now, which is where it belongs on a phone - thumb side, far from the
     logo. */
  .nav-actions{margin-left:auto}
}
@media(max-width:768px){
  .topstrip{display:none}
  :root{--top-h:0px;--nav-h:70px}
  .nav-logo img{height:34px}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;min-height:96vh;display:flex;align-items:center;
  padding-top:calc(var(--top-h) + var(--nav-h) + 60px);padding-bottom:120px;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:heroZoom 22s ease-in-out infinite alternate}
@keyframes heroZoom{from{transform:scale(1.06)}to{transform:scale(1.16)}}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(8,24,46,.96) 0%,rgba(10,38,71,.88) 42%,rgba(10,38,71,.62) 72%,rgba(10,38,71,.5) 100%);
}
.hero-glow{
  position:absolute;top:2%;right:2%;width:52vw;height:52vw;max-width:720px;max-height:720px;
  background:radial-gradient(circle,rgba(242,135,26,.42) 0%,rgba(242,135,26,.13) 44%,transparent 70%);
  z-index:0;pointer-events:none;animation:sunGlow 8s ease-in-out infinite;
}
@keyframes sunGlow{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}
.hero-content{position:relative;z-index:1;max-width:var(--container);margin:0 auto;padding:0 28px;color:#fff;width:100%}

.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 20px 9px 12px;border-radius:999px;margin-bottom:26px;
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);font-size:13.5px;font-weight:600;
}
.hero-badge .stars{display:flex;gap:2px;color:#FFC24D}
.hero-badge .stars svg{width:14px;height:14px;fill:currentColor}
.hero-title{font-size:clamp(38px,6.4vw,68px);font-weight:800;letter-spacing:-.035em;color:#fff;max-width:880px;line-height:1.08}
.hero-title .hl{color:var(--accent)}
.hero-sub{margin-top:24px;font-size:18.5px;line-height:1.7;max-width:600px;color:rgba(255,255,255,.87)}
.hero-cta{margin-top:38px;display:flex;flex-wrap:wrap;gap:15px;align-items:center}
.hero-badges{
  margin-top:48px;display:flex;flex-wrap:wrap;gap:16px 34px;
  padding-top:30px;border-top:1px solid rgba(255,255,255,.17);
}
.hero-badges li{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.94)}
.hero-badges .ico{
  width:24px;height:24px;border-radius:50%;flex:none;
  background:rgba(242,135,26,.2);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
}
.hero-badges .ico svg{width:14px;height:14px}
.hero-scroll-cue{
  position:absolute;bottom:118px;left:50%;transform:translateX(-50%);z-index:1;
  width:27px;height:44px;border:2px solid rgba(255,255,255,.45);border-radius:20px;
}
.hero-scroll-cue span{display:block;width:4px;height:9px;background:var(--accent);border-radius:2px;margin:8px auto 0;animation:scrollcue 1.9s infinite}
@keyframes scrollcue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(15px);opacity:0}100%{opacity:0}}
@media(max-width:900px){.hero-scroll-cue{display:none}.hero{min-height:auto;padding-bottom:90px}}

/* ---------- Offers strip ---------- */
.offers{padding:0;transform:translateY(-52px);position:relative;z-index:2}
.offers-grid{
  background:#fff;border-radius:var(--radius-lg);box-shadow:var(--sh-lg);
  display:grid;grid-template-columns:repeat(6,1fr);overflow:hidden;
}
.offer-card{
  padding:30px 18px;text-align:center;border-right:1px solid var(--border);
  transition:transform .32s var(--ease),background .32s;position:relative;
}
.offer-card:last-child{border-right:none}
.offer-card:hover{background:var(--light);transform:translateY(-6px)}
.offer-icon{
  width:46px;height:46px;border-radius:14px;margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;
  animation:iconFloat 3.8s ease-in-out infinite;
}
.offer-icon svg{width:24px;height:24px}
@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.offer-card:nth-child(2) .offer-icon{animation-delay:.3s}
.offer-card:nth-child(3) .offer-icon{animation-delay:.6s}
.offer-card:nth-child(4) .offer-icon{animation-delay:.9s}
.offer-card:nth-child(5) .offer-icon{animation-delay:1.2s}
.offer-card:nth-child(6) .offer-icon{animation-delay:1.5s}
.icon-solar{background:#FFF4DE;color:#E08700}
.icon-energy{background:#E7F0FE;color:#2563EB}
.icon-loan{background:#E4F7EC;color:#0B8A47}
.icon-subsidy{background:#FFEFE0;color:#F97316}
.icon-warranty{background:#F0E9FE;color:#7C3AED}
.icon-service{background:#E2F6FA;color:#0891B2}
.offer-label{font-size:14px;font-weight:700;color:var(--dark);line-height:1.4}
.offer-hero{background:linear-gradient(180deg,#FFF8EC,#fff)}
@media(max-width:960px){.offers-grid{grid-template-columns:repeat(3,1fr)}.offer-card{border-bottom:1px solid var(--border)}.offer-card:nth-child(3n){border-right:none}}
@media(max-width:560px){.offers{transform:translateY(-30px)}.offers-grid{grid-template-columns:repeat(2,1fr);border-radius:var(--radius-md)}.offer-card:nth-child(2n){border-right:none}.offer-card:nth-child(3n){border-right:1px solid var(--border)}}

/* ---------- Stats band ---------- */
.stats{background:var(--primary-dark);padding:64px 0;position:relative;overflow:hidden}
.stats::before{
  content:"";position:absolute;inset:0;opacity:.12;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:50px 50px;
  mask-image:radial-gradient(circle at 70% 40%,#000,transparent 70%);
  -webkit-mask-image:radial-gradient(circle at 70% 40%,#000,transparent 70%);
}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;position:relative;z-index:1}
.stat{text-align:center;color:#fff}
.stat b{display:block;font-size:clamp(32px,4vw,46px);font-weight:800;letter-spacing:-.03em;color:var(--accent)}
.stat span{font-size:14px;font-weight:600;color:rgba(255,255,255,.78);text-transform:uppercase;letter-spacing:.09em}
@media(max-width:760px){.stats-grid{grid-template-columns:1fr 1fr;gap:34px}}

/* ---------- Cards / services ---------- */
.services{padding-top:70px}
.service-grid{margin-top:56px;display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.service-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:34px 26px;position:relative;overflow:hidden;
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s;
}
.service-card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--primary));
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.service-card:hover{transform:translateY(-9px);box-shadow:var(--sh-md);border-color:transparent}
.service-card:hover::after{transform:scaleX(1)}
.service-icon{
  width:62px;height:62px;border-radius:17px;background:var(--light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;
  transition:background .32s,color .32s,transform .32s var(--ease);
}
.service-icon svg{width:30px;height:30px}
.service-card:hover .service-icon{background:var(--primary);color:#fff;transform:rotate(-7deg) scale(1.08)}
.service-badge{
  display:inline-block;background:var(--accent-soft);color:var(--accent-dark);
  font-size:11.5px;font-weight:800;padding:6px 13px;border-radius:999px;letter-spacing:.02em;
  margin-bottom:14px;
}
.service-card h3{font-size:19.5px;margin:0 0 10px}
.service-card p{color:var(--muted);font-size:15px;line-height:1.65}
@media(max-width:1100px){.service-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.service-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.service-grid{grid-template-columns:1fr}}

/* ---------- Technical ---------- */
.technical{background:var(--light)}
.tech-grid{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tech-card{
  position:relative;background:#fff;border-radius:var(--radius-md);padding:30px 24px;border:1px solid var(--border);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s;
}
.tech-card:hover{transform:translateY(-7px);box-shadow:var(--sh-md);border-color:transparent}
.tech-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:15px;margin-bottom:18px;
  color:var(--accent-dark);background:var(--accent-soft);
  transition:transform .32s var(--ease),background .32s;
}
.tech-ico svg{width:26px;height:26px}
.tech-card:hover .tech-ico{transform:translateY(-2px) scale(1.06)}
/* The number is a quiet marker now that the icon carries the meaning. */
.tech-num{
  position:absolute;top:22px;right:22px;
  font-weight:800;font-size:12.5px;letter-spacing:.06em;color:var(--border-strong,#c9d4e2)
}
.tech-card h3{font-size:17.5px;margin-bottom:9px}
.tech-card p{color:var(--muted);font-size:14.5px;line-height:1.6}
@media(max-width:1024px){.tech-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- CTA strip ---------- */
.cta-strip{
  background:linear-gradient(105deg,var(--primary-dark),#13497f 60%,var(--primary));
  padding:60px 0;position:relative;overflow:hidden;
}
.cta-strip::before{
  content:"";position:absolute;right:-60px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,135,26,.4),transparent 68%);
}
.cta-strip-inner{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;position:relative;z-index:1}
.cta-strip h2{color:#fff;font-size:28px;max-width:560px}
.cta-strip p{color:rgba(255,255,255,.78);margin-top:10px;font-size:16px}

/* ---------- Why us ---------- */
.why-grid{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.why-card{
  padding:36px 30px;border-radius:var(--radius-md);border:1px solid var(--border);background:#fff;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s;
}
.why-card:hover{transform:translateY(-7px);box-shadow:var(--sh-md);border-color:transparent}
.why-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:17px;margin-bottom:18px;
  color:var(--primary);background:rgba(29,99,192,.09);
  transition:transform .32s var(--ease)
}
.why-ico svg{width:28px;height:28px}
.why-card:hover .why-ico{transform:translateY(-2px) scale(1.06)}
.why-card h3{font-size:20px;margin-bottom:10px}
.why-card p{color:var(--muted);font-size:15px;line-height:1.65}
@media(max-width:900px){.why-grid{grid-template-columns:1fr 1fr}}

/* ---------- Process timeline ---------- */
.process{background:var(--light);overflow:hidden}
.timeline{margin-top:70px;position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:18px}
.timeline-track{position:absolute;top:22px;left:0;right:0;height:2px;background:var(--border);z-index:0}
.timeline-step{position:relative;z-index:1;padding-top:62px}
.tl-dot{
  position:absolute;top:0;left:0;width:46px;height:46px;border-radius:14px;
  background:#fff;border:2px solid var(--primary);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;
  transition:background .3s,color .3s,transform .3s var(--ease);
}
.timeline-step:hover .tl-dot{background:var(--primary);color:#fff;transform:scale(1.1)}
.timeline-step h3{font-size:16px;margin-bottom:7px}
.timeline-step p{font-size:13.5px;color:var(--muted);line-height:1.55}
@media(max-width:960px){
  .timeline{grid-template-columns:1fr;gap:0}
  .timeline-track{top:0;bottom:0;left:23px;right:auto;width:2px;height:auto}
  .timeline-step{padding:0 0 40px 72px}
  .tl-dot{top:0;left:0}
}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.slider{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:4/5}
.slider-track{display:flex;height:100%;transition:transform .65s var(--ease)}
.slider-track img{width:100%;height:100%;object-fit:cover;flex:none}
.slider-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:15px;
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;
  color:var(--dark);box-shadow:var(--sh-sm);transition:background .25s,transform .25s var(--ease);
}
.slider-nav:hover{background:#fff;transform:translateY(-50%) scale(1.1)}
.slider-nav svg{width:21px;height:21px}
.slider-nav.prev{left:18px}
.slider-nav.next{right:18px}
.slider-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:9px}
.slider-dots button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.55);padding:0;transition:background .25s,width .25s}
.slider-dots button.active{background:#fff;width:26px;border-radius:5px}
.about-text .lead-text{font-size:19px;line-height:1.7;margin-top:20px;color:var(--text)}
.vision-title{font-size:19px;margin-top:30px;margin-bottom:11px;color:var(--primary)}
.about-text p{color:var(--muted);line-height:1.7}
.about-text .btn{margin-top:30px}
.about-points{margin-top:26px;display:grid;gap:13px}
.about-points li{display:flex;align-items:flex-start;gap:12px;font-size:15px;font-weight:600;color:var(--text)}
.about-points .ic{width:24px;height:24px;border-radius:50%;background:#E4F7EC;color:var(--green);display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.about-points .ic svg{width:14px;height:14px}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:44px}.slider{aspect-ratio:16/11}}

/* ---------- Full CTA ---------- */
.cta-full{position:relative;padding:130px 0;overflow:hidden}
.cta-full-bg{position:absolute;inset:0;z-index:0}
.cta-full-bg img{width:100%;height:100%;object-fit:cover}
.cta-full-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,38,71,.93),rgba(8,24,46,.95))}
.cta-full-content{position:relative;z-index:1;max-width:680px;margin:0 auto;text-align:center;color:#fff;padding:0 24px}
.cta-full-content h2{font-size:clamp(30px,4.2vw,46px);color:#fff}
.cta-full-content p{margin-top:16px;font-size:17.5px;color:rgba(255,255,255,.84)}
.cta-full-actions{margin-top:36px;display:flex;gap:15px;justify-content:center;flex-wrap:wrap}

/* ---------- FAQ ---------- */
.faq-inner{max-width:880px}
.faq-head{text-align:center;margin-bottom:48px}
.faq-item{border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:12px;overflow:hidden;background:#fff;transition:box-shadow .3s,border-color .3s}
.faq-item:hover{border-color:var(--primary-light)}
.faq-item.open{box-shadow:var(--sh-sm);border-color:var(--primary)}
.faq-q{
  width:100%;text-align:left;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;
  font-weight:700;font-size:16.5px;color:var(--dark);transition:color .25s;
}
.faq-q:hover{color:var(--primary)}
.faq-icon{position:relative;width:22px;height:22px;flex:none}
.faq-icon::before,.faq-icon::after{
  content:"";position:absolute;background:var(--primary);top:50%;left:50%;
  transform:translate(-50%,-50%);transition:transform .32s var(--ease);border-radius:2px;
}
.faq-icon::before{width:15px;height:2.5px}
.faq-icon::after{width:2.5px;height:15px}
.faq-q[aria-expanded="true"] .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg) scaleX(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .42s var(--ease)}
.faq-a p{padding:0 24px 24px;color:var(--muted);line-height:1.75;font-size:15.5px}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact-cards{display:grid;gap:16px}
.contact-card{
  display:flex;gap:18px;padding:26px;border:1px solid var(--border);border-radius:var(--radius-md);background:#fff;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
}
.contact-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:transparent}
.contact-card .ic{
  width:52px;height:52px;border-radius:15px;flex:none;
  background:var(--light);color:var(--primary);display:flex;align-items:center;justify-content:center;
}
.contact-card .ic svg{width:23px;height:23px}
.contact-card h4{font-size:15px;margin-bottom:6px}
.contact-card a,.contact-card span{display:block;color:var(--muted);font-size:15px;font-weight:600;transition:color .22s}
.contact-card a:hover{color:var(--primary)}
.social-icons{display:flex;gap:12px;margin-top:8px}
.social-icon{
  width:50px;height:50px;border-radius:15px;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--primary);
  transition:transform .28s var(--ease),background .28s,color .28s;
}
.social-icon svg{width:21px;height:21px}
.social-icon:hover{background:var(--primary);color:#fff;transform:translateY(-4px)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:40px}}

/* inline quote form */
.quote-box{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:34px;box-shadow:var(--sh-md)}
.quote-box h3{font-size:22px;margin-bottom:6px}
.quote-box .sub{color:var(--muted);font-size:14.5px;margin-bottom:24px}

/* ---------- Footer ---------- */
.footer{background:var(--dark);color:#C6CFDB;padding-top:80px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.09)}
.footer-logo{
  height:44px;width:auto;margin-bottom:18px;display:block;
  background:#fff;padding:10px 14px;border-radius:14px;box-sizing:content-box;
}
.footer-brand p{color:#8E9AAB;font-size:14.5px;line-height:1.7;max-width:300px}
.footer-social{display:flex;gap:10px;margin-top:22px}
.footer-social a{
  width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;color:#fff;transition:background .25s,transform .25s;
}
.footer-social a svg{width:18px;height:18px}
.footer-social a:hover{background:var(--accent);transform:translateY(-3px)}
.footer-col h4{color:#fff;font-size:14px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:20px}
.footer-col a{display:flex;align-items:center;gap:8px;color:#A9B4C4;font-size:15px;margin-bottom:13px;transition:color .25s,padding-left .25s}
.footer-col a:hover{color:var(--accent);padding-left:5px}
.footer-bottom{
  max-width:var(--container);margin:0 auto;padding:26px 28px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:center;
  font-size:13.5px;color:#7D8899;
}
.footer-legal{display:flex;gap:22px}
.footer-legal a:hover{color:var(--accent)}
.footer-credit{display:inline-flex;align-items:center;gap:6px}
.footer-credit a{color:var(--accent);font-weight:700;transition:color .25s}
.footer-credit a:hover{color:#fff;text-decoration:underline}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr;gap:34px}.footer-bottom{flex-direction:column;text-align:center}}

/* ---------- Floating actions ---------- */
.floating-actions{position:fixed;right:24px;bottom:24px;z-index:200;display:flex;flex-direction:column;gap:14px}
.fab{
  width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-lg);position:relative;color:#fff;
  transition:transform .28s var(--ease),border-radius .28s var(--ease);
}
.fab svg{width:26px;height:26px}
.fab:hover{transform:translateY(-4px) scale(1.06);border-radius:22px}
.fab-whatsapp{background:#25D366}
.fab-call{background:var(--primary)}
.fab-voice{background:linear-gradient(135deg,var(--accent),var(--accent-dark))}
.fab-pulse{position:absolute;inset:0;border-radius:18px;background:currentColor;opacity:.5;animation:pulse 2.3s infinite;z-index:-1}
@keyframes pulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.95);opacity:0}}
.fab[data-tooltip]::before{
  content:attr(data-tooltip);position:absolute;right:68px;top:50%;
  transform:translateY(-50%) translateX(8px);
  background:var(--dark);color:#fff;padding:9px 15px;border-radius:9px;
  font-size:13px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;
}
.fab:hover[data-tooltip]::before{opacity:1;transform:translateY(-50%)}
@media(max-width:768px){.floating-actions{right:16px;bottom:88px}.fab{width:50px;height:50px}.fab[data-tooltip]::before{display:none}.fab-call{display:none}}

/* mobile sticky bar */
.mobile-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:190;background:#fff;
  box-shadow:0 -8px 28px rgba(12,53,104,.13);padding:11px 13px calc(11px + env(safe-area-inset-bottom));gap:11px;
}
.mobile-bar-btn{flex:1;text-align:center;padding:14px;border-radius:999px;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px}
.mobile-bar-btn svg{width:17px;height:17px}
.mobile-bar-whatsapp{background:#25D366;color:#fff}
.mobile-bar-quote{background:var(--accent);color:#fff}
@media(max-width:768px){.mobile-bar{display:flex}}

/* =========================================================================
   MOBILE
   The phone is where most of these visitors are, so it gets its own pass
   rather than being whatever the desktop layout collapses into.
   ========================================================================= */
@media(max-width:768px){
  /* The sticky bar covers the bottom of the page, so give the page room to
     end above it — otherwise the last section sits under the buttons. */
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}

  /* WhatsApp and Call already live in the sticky bar; a second copy floating
     over the content is clutter that collides with the hero buttons. */
  .fab-whatsapp,.fab-call{display:none}
  .floating-actions{right:14px;bottom:calc(90px + env(safe-area-inset-bottom));gap:12px}

  /* Two across reads far better than one endless column of cards. */
  .tech-grid{grid-template-columns:1fr 1fr;gap:12px;margin-top:34px}
  .tech-card{padding:18px 15px;border-radius:var(--radius-sm)}
  .tech-ico{width:42px;height:42px;border-radius:12px;margin-bottom:12px}
  .tech-ico svg{width:21px;height:21px}
  .tech-num{top:14px;right:14px;font-size:11px}
  .tech-card h3{font-size:14.6px;line-height:1.35;margin-bottom:6px}
  .tech-card p{font-size:12.9px;line-height:1.55}

  .why-grid{grid-template-columns:1fr 1fr;gap:12px;margin-top:34px}
  .why-card{padding:20px 16px;border-radius:var(--radius-sm)}
  .why-ico{width:44px;height:44px;border-radius:13px;margin-bottom:13px}
  .why-ico svg{width:22px;height:22px}
  .why-card h3{font-size:15.2px;line-height:1.35;margin-bottom:6px}
  .why-card p{font-size:12.9px;line-height:1.55}

  /* Sections were sized for a desktop; on a phone they just make the page long. */
  section{padding:62px 0}
  .section-inner{padding:0 18px}
  .section-sub{font-size:15.4px;margin-top:12px}

  /* Touch targets and thumb reach. */
  .mobile-bar-btn{min-height:50px;font-size:15.4px}
  .mobile-bar-btn svg{width:19px;height:19px}

  /* Hero: the badge was breaking into a ragged two lines with the stars
     stranded on the left, and the headline ran to four. */
  .hero-badge{font-size:12.4px;padding:9px 15px;line-height:1.45;text-align:left}
  .hero-badge .stars{flex:none}
  .hero-title{font-size:clamp(30px,8.6vw,38px);line-height:1.12}
  .hero-sub{font-size:15.6px;line-height:1.65}
  .hero-cta{gap:12px}
  .hero-cta .btn{width:100%;justify-content:center}

  /* Keep the last footer line clear of the floating assistant button. */
  .footer-bottom{padding-bottom:20px}
  .footer-credit{padding:0 54px}
}

@media(max-width:400px){
  .tech-grid,.why-grid{gap:10px}
  .tech-card,.why-card{padding:16px 13px}
  .tech-card h3,.why-card h3{font-size:13.8px}
  .tech-card p,.why-card p{font-size:12.4px}

  /* The wordmark is 212px wide at its full height; with the bar's own padding
     and the menu button that is more than a 320px screen has, and the whole
     page picked up a few pixels of sideways scroll. */
  .navbar-inner{padding:0 14px;gap:10px;min-width:0}
  .nav-logo img{height:32px}
  .topstrip-inner{padding:0 14px}
  .section-inner{padding:0 14px}
  .mobile-menu{width:min(360px,92vw)}
}

/* ---------- Voice assistant ---------- */
.voice-panel{
  position:fixed;right:24px;bottom:96px;z-index:410;width:380px;max-width:calc(100vw - 32px);
  max-height:min(580px,72vh);background:#fff;border-radius:var(--radius-lg);box-shadow:var(--sh-lg);
  display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(18px) scale(.96);
  pointer-events:none;transition:opacity .32s var(--ease),transform .32s var(--ease);border:1px solid var(--border);
}
.voice-panel.active{opacity:1;transform:none;pointer-events:auto}
.voice-panel-head{
  display:flex;align-items:center;justify-content:space-between;padding:18px 20px;
  background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff;flex:none;
}
.voice-panel-title{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px}
.voice-dot{width:9px;height:9px;border-radius:50%;background:#4ADE80;animation:voiceDotPulse 1.9s infinite;flex:none}
.voice-dot.listening{background:var(--accent);animation-duration:.9s}
@keyframes voiceDotPulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.6)}70%{box-shadow:0 0 0 9px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.voice-panel-close{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center}
.voice-panel-close svg{width:17px;height:17px}
.voice-panel-body{flex:1;overflow-y:auto;padding:18px 18px 10px;display:flex;flex-direction:column;gap:11px;background:var(--light);min-height:180px}
.voice-msg{padding:12px 16px;border-radius:16px;font-size:14px;line-height:1.6;max-width:88%;animation:msgIn .3s var(--ease) both}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.voice-msg-bot{background:#fff;border:1px solid var(--border);color:var(--text);align-self:flex-start;border-bottom-left-radius:5px}
.voice-msg-user{background:var(--primary);color:#fff;align-self:flex-end;border-bottom-right-radius:5px}
.voice-panel-suggestions{display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px;background:#fff;border-top:1px solid var(--border);flex:none}
.voice-panel-suggestions button{
  border:1px solid var(--border);background:var(--light);color:var(--primary-dark);
  font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:999px;transition:background .22s,border-color .22s;
}
.voice-panel-suggestions button:hover{background:#fff;border-color:var(--primary)}
.voice-panel-controls{display:flex;align-items:center;gap:9px;padding:14px 16px;background:#fff;border-top:1px solid var(--border);flex:none}
.voice-mic-btn,.voice-send-btn{
  width:42px;height:42px;border-radius:13px;background:var(--light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;flex:none;transition:background .22s,color .22s,transform .22s;
}
.voice-mic-btn svg,.voice-send-btn svg{width:19px;height:19px}
.voice-mic-btn:hover,.voice-send-btn:hover{background:var(--primary);color:#fff}
.voice-mic-btn.listening{background:var(--accent);color:#fff;animation:micPulse 1s infinite}
@keyframes micPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.voice-panel-controls input{
  flex:1;min-width:0;border:1.5px solid var(--border);border-radius:13px;padding:12px 14px;
  font-size:14px;font-family:inherit;color:var(--text);background:#fff;outline:none;transition:border-color .22s;
}
.voice-panel-controls input:focus{border-color:var(--primary)}
@media(max-width:480px){.voice-panel{right:16px;left:16px;width:auto;bottom:90px}}

/* ---------- Modal / quote form ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:500;background:rgba(8,20,38,.68);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .38s var(--ease);
}
.modal-overlay.active{opacity:1;pointer-events:auto}
.modal{
  background:#fff;border-radius:var(--radius-lg);width:100%;max-width:520px;max-height:92vh;overflow-y:auto;
  padding:40px 36px 34px;position:relative;box-shadow:var(--sh-lg);
  transform:translateY(28px) scale(.97);opacity:0;transition:transform .42s var(--ease),opacity .42s var(--ease);
}
.modal-overlay.active .modal{transform:none;opacity:1}
.modal-close{
  position:absolute;top:22px;right:22px;width:40px;height:40px;border-radius:13px;
  background:var(--light);color:var(--dark);display:flex;align-items:center;justify-content:center;
  transition:background .25s,transform .3s var(--ease);
}
.modal-close:hover{background:var(--border);transform:rotate(90deg)}
.modal-close svg{width:19px;height:19px}
.modal-head{text-align:center;margin-bottom:28px}
.modal-logo{height:44px;width:auto;margin:0 auto 18px;display:block}
.modal-head h2{font-size:23px;letter-spacing:-.02em}
.modal-head p{color:var(--muted);font-size:14.5px;margin-top:9px}

.progress-bar{display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:32px}
.progress-step{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.progress-step span{
  width:34px;height:34px;border-radius:12px;background:var(--light);color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-weight:800;
  transition:background .34s var(--ease),color .34s,transform .34s var(--ease);
}
.progress-step.active span,.progress-step.done span{background:var(--primary);color:#fff}
.progress-step.active span{transform:scale(1.1);box-shadow:0 6px 18px rgba(29,99,192,.35)}
.progress-step.active,.progress-step.done{color:var(--primary)}
.progress-line{width:40px;height:2.5px;background:var(--border);margin-bottom:18px;border-radius:2px;overflow:hidden;position:relative}
.progress-line::after{content:"";position:absolute;inset:0;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.progress-line.done::after{transform:scaleX(1)}

.form-step{display:none}
.form-step.active{display:block;animation:stepIn .4s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.field{margin-bottom:20px}
.field label{display:block;font-size:13.5px;font-weight:700;color:var(--dark);margin-bottom:9px}
.field select,.field input,.field textarea{
  width:100%;padding:15px 16px;border-radius:13px;border:1.5px solid var(--border);
  font-size:15.5px;font-family:inherit;color:var(--text);background:#fff;outline:none;
  transition:border-color .26s,box-shadow .26s;
}
.field select:focus,.field input:focus,.field textarea:focus{
  border-color:var(--primary);box-shadow:0 0 0 4px rgba(29,99,192,.12);
}
.field select{
  appearance:none;padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%235B6678' stroke-width='2' stroke-linecap='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:19px;
}
.field-error{display:none;color:var(--danger);font-size:12.5px;margin-top:7px;font-weight:600}
.field.invalid select,.field.invalid input{border-color:var(--danger);box-shadow:0 0 0 4px rgba(196,70,58,.09)}
.field.invalid .field-error{display:block}
.hp{position:absolute!important;left:-9999px!important;opacity:0;height:0;width:0}
.form-actions{margin-top:28px}
.form-actions.two{display:grid;grid-template-columns:1fr 1fr;gap:13px}
#submitBtn[disabled]{opacity:.65;pointer-events:none}

.success-state,.error-state{text-align:center;padding:12px 0 6px}
.success-icon,.error-icon{width:74px;height:74px;margin:0 auto 24px}
.success-icon{color:var(--success)}
.error-icon{color:var(--danger)}
.success-state h3,.error-state h3{font-size:24px;margin-bottom:12px}
.success-state p,.error-state p{color:var(--muted);line-height:1.7;font-size:15.5px}
.success-state .btn{margin-top:28px}
.ref-no{
  display:inline-block;margin-top:16px;padding:10px 20px;border-radius:999px;
  background:var(--light);font-weight:800;color:var(--primary-dark);font-size:15px;letter-spacing:.03em;
}
@media(max-width:480px){.modal{padding:32px 22px 26px}}

/* ---------- Scroll reveal ---------- */
.reveal,.reveal-up{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in,.reveal-up.in{opacity:1;transform:none}
.reveal-up[data-delay="0"]{transition-delay:0s}
.reveal-up[data-delay="1"]{transition-delay:.1s}
.reveal-up[data-delay="2"]{transition-delay:.2s}
.reveal-up[data-delay="3"]{transition-delay:.32s}
.reveal-up[data-delay="4"]{transition-delay:.44s}

/* ==========================================================================
   SIDA SOLAR v2 — additions for the pages the ERP drives
   The design system above is unchanged. Everything below only adds the few
   pieces the inner pages need (extra button skins, a page masthead, ticket
   screens) so they read as the same website rather than a second one.
   ========================================================================== */

/* ---------- Button skins used by the inner pages ---------- */
.btn-ghost{background:#fff;color:var(--primary);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--primary);background:rgba(29,99,192,.05);transform:translateY(-3px)}
.btn-accent{background:var(--primary);color:#fff;box-shadow:0 10px 26px rgba(29,99,192,.28)}
.btn-accent:hover{background:var(--primary-dark);transform:translateY(-3px)}
.btn-light{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.34);backdrop-filter:blur(8px)}
.btn-light:hover{background:rgba(255,255,255,.2);transform:translateY(-3px)}
.btn-wa{background:#25D366;color:#fff;box-shadow:0 10px 26px rgba(37,211,102,.3)}
.btn-wa:hover{background:#1DAF53;transform:translateY(-3px)}
.btn-block{width:100%}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#A63328;transform:translateY(-3px)}

/* ---------- Page masthead (every page except the home page) ---------- */
.page-head{
  position:relative;padding:calc(var(--top-h) + var(--nav-h) + 58px) 0 58px;
  background:linear-gradient(135deg,var(--primary-dark) 0%,var(--secondary) 58%,#071C36 100%);
  color:#fff;overflow:hidden;
}
.page-head::before{
  content:"";position:absolute;right:-8%;top:-40%;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,135,26,.22),transparent 68%);pointer-events:none;
}
.page-head .section-inner{position:relative;z-index:1}
.page-head .eyebrow{color:var(--accent)}
.page-head .eyebrow::before{background:#fff}
.page-head h1{font-size:clamp(30px,4.6vw,50px);color:#fff;letter-spacing:-.032em;font-weight:800}
.page-head p{margin-top:15px;font-size:17px;color:rgba(255,255,255,.84);max-width:680px;line-height:1.7}
.page-head .crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;
  color:rgba(255,255,255,.66);margin-bottom:18px}
.page-head .crumbs a{color:rgba(255,255,255,.88);font-weight:600}
.page-head .crumbs a:hover{color:var(--accent)}
.page-head .crumbs span{opacity:.5}
.page-body{padding:78px 0}
.page-body.soft-bg{background:var(--light)}
@media(max-width:768px){
  .page-head{padding:calc(var(--nav-h) + 40px) 0 44px}
  .page-body{padding:52px 0}
}

/* ---------- Simple content prose ---------- */
.prose{max-width:820px;font-size:16.5px;line-height:1.85;color:var(--muted)}
.prose h2{font-size:26px;margin:38px 0 14px;color:var(--dark)}
.prose h3{font-size:20px;margin:30px 0 12px;color:var(--dark)}
.prose p{margin-bottom:18px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px;list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:9px}
.prose a{color:var(--primary);font-weight:600;text-decoration:underline}
.prose img{border-radius:var(--radius-md);margin:22px 0}
.prose blockquote{margin:22px 0;padding:16px 22px;border-left:4px solid var(--accent);
  background:var(--accent-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text)}

/* ---------- Notices ---------- */
.notice{display:flex;gap:12px;align-items:flex-start;padding:15px 18px;border-radius:var(--radius-md);
  font-size:15px;font-weight:600;line-height:1.6;margin-bottom:20px;border:1px solid transparent}
.notice svg{width:19px;height:19px;flex:none;margin-top:2px}
.notice-ok{background:#E4F7EC;color:#076B36;border-color:#BFE9D2}
.notice-bad{background:#FDECEA;color:#94281D;border-color:#F6CFC9}
.notice-info{background:#E7F0FE;color:#14487F;border-color:#CBDFFA}
.notice-warn{background:var(--accent-soft);color:#8A4C05;border-color:#FADCB5}

/* ---------- Support / ticket screens ---------- */
.ticket-wrap{max-width:720px;margin:0 auto}
.ticket-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:34px;box-shadow:var(--sh-md)}
.ticket-card h2{font-size:24px;margin-bottom:8px}
.ticket-card .sub{color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:26px}
.ticket-steps{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 auto 30px}
.ticket-steps i{width:34px;height:34px;border-radius:50%;background:var(--light);color:var(--muted);
  display:grid;place-items:center;font-size:13px;font-weight:800;font-style:normal;
  border:1.5px solid var(--border)}
.ticket-steps i.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.ticket-steps s{width:36px;height:2.5px;background:var(--border);border-radius:2px;text-decoration:none}
.ticket-steps s.on{background:var(--primary)}
.ticket-status{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
  font-size:12.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.ticket-status.open{background:var(--accent-soft);color:#8A4C05}
.ticket-status.progress{background:#E7F0FE;color:#14487F}
.ticket-status.closed{background:#E4F7EC;color:#076B36}
.ticket-log{margin-top:26px;border-top:1px solid var(--border);padding-top:22px;display:grid;gap:16px}
.ticket-log .row{display:flex;gap:13px;align-items:flex-start}
.ticket-log .dot{width:11px;height:11px;border-radius:50%;background:var(--primary);flex:none;margin-top:6px}
.ticket-log b{display:block;font-size:14.5px;color:var(--dark)}
.ticket-log span{font-size:13.5px;color:var(--muted)}
.ticket-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:8px}
.ticket-meta div{background:var(--light);border-radius:var(--radius-sm);padding:13px 15px}
.ticket-meta small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ticket-meta b{font-size:15px;color:var(--dark);font-weight:700}
@media(max-width:560px){.ticket-card{padding:24px 20px}}

/* ---------- Support entry cards (home page + support page) ---------- */
.support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}
.support-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:30px;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.support-card:hover{transform:translateY(-8px);box-shadow:var(--sh-md);border-color:transparent}
.support-card .ic{width:56px;height:56px;border-radius:16px;background:var(--accent-soft);color:var(--accent-dark);
  display:grid;place-items:center;margin-bottom:20px}
.support-card .ic svg{width:27px;height:27px}
.support-card h3{font-size:19px;margin-bottom:9px}
.support-card p{color:var(--muted);font-size:15px;line-height:1.65;margin-bottom:18px}
@media(max-width:900px){.support-grid{grid-template-columns:1fr}}

/* ---------- Tidy up: the page shell around ERP-driven content ---------- */
.pg{padding-top:0}
.pg .site-head{position:fixed}
.pg main{padding-top:0}
.pg .sec{padding:70px 0}
.pg .sec:first-child{padding-top:0}

/* ---------- "More" menu, for pages past the eighth ---------- */
.nav-more{position:relative}
.nav-more-btn{display:inline-flex;align-items:center;gap:5px}
.nav-more-btn svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.nav-more.open .nav-more-btn svg{transform:rotate(180deg)}
.nav-more-menu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:208px;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--sh-md);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;z-index:320;
}
.nav-more.open .nav-more-menu{opacity:1;visibility:visible;transform:none}
.nav-more-menu a{display:block;padding:10px 13px;border-radius:9px;font-size:14.6px;font-weight:600;color:var(--text)}
.nav-more-menu a:hover{background:var(--light);color:var(--primary)}
.nav-more-menu a.active{color:var(--primary);background:rgba(29,99,192,.07)}

/* ---------- "Read more" on a service card ---------- */
.service-more{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:14px;font-weight:700;color:var(--primary);transition:gap .25s var(--ease),color .25s;
}
.service-more svg{width:15px;height:15px}
.service-more:hover{gap:11px;color:var(--accent)}

/* ---------- Customer support: the two jobs, and the ticket list ---------- */
.support-tabs{display:flex;gap:9px;margin-top:26px;flex-wrap:wrap}
.support-tabs a{
  padding:10px 20px;border-radius:999px;font-size:14.4px;font-weight:700;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.24);transition:background .25s,color .25s,transform .25s;
}
.support-tabs a:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.support-tabs a.on{background:var(--accent);border-color:transparent;color:#fff;box-shadow:var(--sh-glow)}

.ticket-list{display:grid;gap:18px;margin-top:22px}
.ticket-row{border:1px solid var(--border);border-radius:var(--radius-md);padding:22px;background:#fff}
.ticket-row header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.ticket-row header b{font-size:14.5px;font-weight:800;color:var(--primary);letter-spacing:.02em}
.ticket-row header span{display:block;font-size:12.8px;color:var(--muted);margin-top:2px}
.ticket-row h4{font-size:17px;margin-bottom:8px;color:var(--dark)}
.ticket-row>p{color:var(--muted);font-size:14.8px;line-height:1.65;margin-bottom:6px}

/* ---------- The bar holds more pages than the one-page site did ----------
   Eight links plus a logo and a button is a tight fit, so the links tighten
   in two stages and give up a little earlier than before rather than letting
   anything spill out of the row. */
@media(max-width:1440px){
  .nav-link{padding:10px 10px;font-size:14px}
  .nav-link::after{left:10px;right:10px}
}
@media(max-width:1300px){
  .nav-link{padding:9px 8px;font-size:13.4px}
  .nav-link::after{left:8px;right:8px}
  .navbar .nav-actions>.btn{padding:12px 18px;font-size:14px}
  .nav-logo img{height:38px}
}
@media(max-width:1200px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .nav-actions .btn{display:none}
  .nav-actions{margin-left:auto}
}