:root {
  --sc-blue:#1b0a73;
  --sc-blue-dark:#10034a;
  --sc-bg:#f4f2f8;
  --sc-text:#17152b;
  --sc-muted:#33384a;
  --sc-red:#ff3347;
  --sc-orange:#ff8900;
  --sc-green:#93c89a;
  --sc-cyan:#b9f2f1;
  --sc-sky:#6dc0ef;
  --sc-lime:#c9db00;
  --white:#ffffff;
  --radius:24px;
  --shadow:0 22px 60px rgba(27,10,115,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Source Sans 3", Arial, sans-serif;
  background:var(--sc-bg);
  color:var(--sc-text);
}
a{color:inherit;text-decoration:none}
.container{width:min(1160px,calc(100% - 40px));margin:0 auto}
.topbar{background:white;border-bottom:1px solid rgba(27,10,115,.10);position:sticky;top:0;z-index:20}
.nav{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo img{height:64px;width:auto;display:block}
.menu{display:flex;align-items:center;gap:20px;font-weight:800;color:var(--sc-blue)}
.menu a{opacity:.78}
.menu a.active,.menu a:hover{opacity:1}
.button{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:0 22px;border-radius:999px;font-weight:900;border:1px solid transparent;transition:.2s ease;
}
.button.primary{background:var(--sc-blue);color:white}
.button.primary:hover{background:var(--sc-blue-dark);transform:translateY(-2px)}
.button.light{background:white;color:var(--sc-blue);border-color:rgba(27,10,115,.18)}
.button.light:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(27,10,115,.12)}

.hero{
  background:
    radial-gradient(circle at 82% 20%, rgba(185,242,241,.85), transparent 28%),
    radial-gradient(circle at 10% 80%, rgba(255,137,0,.15), transparent 28%),
    linear-gradient(135deg,#fff,#f7f6fb);
}
.hero .container{min-height:640px;display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center;padding:68px 0}
.kicker{
  display:inline-flex;align-items:center;gap:10px;padding:9px 14px;border-radius:999px;
  color:var(--sc-blue);background:white;font-weight:900;box-shadow:0 10px 28px rgba(27,10,115,.08);
}
h1,h2,h3{font-family:"Source Sans 3", Arial, sans-serif;color:var(--sc-blue);margin:0;letter-spacing:-.045em}
h1{font-size:clamp(46px,7vw,84px);line-height:.9;margin-top:24px;font-weight:900}
h2{font-size:clamp(34px,5vw,56px);line-height:1;font-weight:900}
h3{font-size:25px;line-height:1.08;font-weight:900}
.lead{font-size:20px;line-height:1.72;color:#2f2a4d;max-width:720px;margin:28px 0 0}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

.visual{min-height:500px;position:relative}
.brand-block{position:absolute;inset:24px 0 0 34px;background:var(--sc-blue);border-radius:36px;overflow:hidden;box-shadow:var(--shadow)}
.brand-block:before{content:"";position:absolute;right:-55px;top:-55px;width:260px;height:260px;border-radius:50%;background:var(--sc-red)}
.brand-block:after{content:"";position:absolute;left:42px;bottom:42px;width:190px;height:190px;border-radius:34px;background:linear-gradient(135deg,var(--sc-orange),var(--sc-lime))}
.float-card{position:absolute;background:white;border-radius:28px;padding:26px;box-shadow:var(--shadow);border:1px solid rgba(27,10,115,.08)}
.float-card.one{left:0;top:95px;width:70%}
.float-card.two{right:0;bottom:76px;width:48%}
.float-card strong{display:block;color:var(--sc-blue);font-size:36px;line-height:1;font-weight:900}
.float-card p{color:var(--sc-muted);line-height:1.55;margin:10px 0 0}
.palette{display:flex;gap:8px;margin-top:20px}
.palette i{width:28px;height:28px;border-radius:8px;display:block}

.section{padding:84px 0}
.section-head{max-width:830px;margin-bottom:42px}
.copy,.section-head p,.card p,.about p,.note{font-size:18px;line-height:1.72;color:var(--sc-muted)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:white;border-radius:var(--radius);padding:30px;box-shadow:0 16px 45px rgba(27,10,115,.08);border:1px solid rgba(27,10,115,.08)}
.icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:var(--sc-blue);color:white;font-size:28px;margin-bottom:24px}

.band{background:var(--sc-blue);color:white;border-radius:34px;padding:54px;display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;box-shadow:var(--shadow)}
.band h2,.band h3{color:white}
.band p{color:#eeeaff}
.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.check{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:20px;line-height:1.55;font-weight:800;color:white}

.about{display:grid;grid-template-columns:.75fr 1.25fr;gap:24px;align-items:start;background:white;border-radius:34px;padding:42px;box-shadow:var(--shadow)}
.about-badge{background:var(--sc-blue);color:white;border-radius:28px;padding:30px}
.about-badge strong{font-size:34px;display:block;line-height:1;color:white}
.about-badge p{color:#eeeaff}

.steps{display:grid;gap:16px}
.step{
  display:grid;grid-template-columns:58px 1fr;gap:18px;background:white;color:var(--sc-text);
  border-radius:22px;padding:22px;border:1px solid rgba(27,10,115,.10);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.step h3{color:var(--sc-blue);font-size:23px;margin:0 0 6px}
.step p{color:#252a3a;font-size:17px;line-height:1.6;margin:0}
.num{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--sc-blue);color:white;font-weight:900}

.note{background:white;border-left:8px solid var(--sc-red);border-radius:22px;padding:24px;box-shadow:0 15px 45px rgba(27,10,115,.08)}
.cta{background:white;border-radius:34px;padding:50px;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;margin-bottom:80px}
.footer{background:var(--sc-blue);color:white;padding:38px 0}
.footer .container{display:grid;gap:7px}
.footer span{opacity:.88}
.jp{font-family:"Source Sans 3","Hiragino Sans","Yu Gothic",Arial,sans-serif}
@media(max-width:960px){
  .hero .container,.band,.about,.cta{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .container{width:min(100% - 28px,1160px)}
  .menu{display:none}
  .logo img{height:46px}
  .nav{min-height:76px}
  .hero .container{min-height:auto;padding:50px 0}
  .visual{display:none}
  .grid-3,.checks{grid-template-columns:1fr}
  .band,.about,.cta{padding:30px;border-radius:26px}
  .button{width:100%}
}


/* Image cards */
.card-img {
  height: 150px;
  border-radius: 20px;
  margin: -6px -6px 24px;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 999px rgba(27,10,115,.10);
}
.img-systems { background-image: url('https://images.unsplash.com/photo-1753272691001-4d68806ac590?auto=format&fit=crop&w=900&q=80'); }
.img-pv { background-image: url('https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=900&q=80'); }
.img-battery { background-image: url('https://images.unsplash.com/photo-1613665813446-82a78c468a1d?auto=format&fit=crop&w=900&q=80'); }
.img-ems { background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=900&q=80'); }
.img-island { background-image: url('https://images.unsplash.com/photo-1497440001374-f26997328c1b?auto=format&fit=crop&w=900&q=80'); }
.img-business { background-image: url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=900&q=80'); }
.img-loxone { background-image: url('https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=900&q=80'); }
.img-engineering { background-image: url('https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&w=900&q=80'); }

@media(max-width:760px){
  .card-img{height:180px}
}


/* v3 refinements */
.img-loxone {
  background-image: url('https://pim.loxone.com//01%20Product%20Data/01%20Products/Energy/100401%20-%20Power%20Supply%20%26%20Backup/Images/ph-shop-100401-power-supply-backup-02.jpg') !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #f7f7f7;
  box-shadow: inset 0 0 0 999px rgba(255,255,255,.08);
}

/* Japan pages: smaller, calmer technical visuals instead of large corporate stock photos */
.jp-visual {
  height: 118px;
  border-radius: 18px;
  margin: -6px -6px 24px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff, #f1eff9);
  border: 1px solid rgba(27,10,115,.10);
}
.jp-visual::before, .jp-visual::after {
  content: "";
  position: absolute;
  border-radius: 14px;
}
.jp-restore::before {
  left: 22px; top: 24px; width: 74px; height: 48px;
  background: repeating-linear-gradient(90deg, var(--sc-blue) 0 6px, #ffffff 6px 12px);
  opacity: .88;
}
.jp-restore::after {
  right: 24px; bottom: 22px; width: 100px; height: 10px;
  background: var(--sc-cyan);
  box-shadow: 0 -20px 0 var(--sc-orange), 0 -40px 0 var(--sc-red);
}
.jp-pv::before {
  left: 22px; top: 28px; width: 118px; height: 54px;
  background: linear-gradient(135deg, var(--sc-blue), var(--sc-sky));
  transform: skewX(-13deg);
}
.jp-pv::after {
  right: 30px; top: 32px; width: 48px; height: 48px; border-radius: 999px;
  background: var(--sc-lime);
}
.jp-battery::before {
  left: 26px; top: 34px; width: 120px; height: 46px;
  background: var(--sc-blue);
  box-shadow: inset 18px 0 0 var(--sc-green), inset 42px 0 0 var(--sc-lime);
}
.jp-battery::after {
  right: 44px; top: 44px; width: 18px; height: 26px;
  background: var(--sc-blue);
}
.jp-ems::before {
  left: 28px; top: 24px; width: 132px; height: 70px;
  background: white;
  border: 4px solid var(--sc-blue);
}
.jp-ems::after {
  left: 48px; top: 54px; width: 112px; height: 8px;
  background: var(--sc-red);
  box-shadow: 0 -18px 0 var(--sc-cyan), 0 18px 0 var(--sc-lime);
}
.jp-island::before {
  left: 30px; top: 38px; width: 86px; height: 40px;
  background: var(--sc-blue);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.jp-island::after {
  right: 28px; top: 28px; width: 84px; height: 56px;
  background: linear-gradient(135deg, var(--sc-orange), var(--sc-red));
  border-radius: 999px;
}
.jp-business::before {
  left: 28px; bottom: 24px; width: 26px; height: 42px;
  background: var(--sc-red);
  box-shadow: 36px -18px 0 var(--sc-orange), 72px -34px 0 var(--sc-lime), 108px -8px 0 var(--sc-sky);
}
.jp-business::after {
  right: 24px; top: 28px; width: 76px; height: 76px;
  background: radial-gradient(circle at center, white 0 34%, var(--sc-blue) 36% 100%);
}

/* Replace Japan visuals with realistic small-scale images */
.jp-real {
  height:120px;
  border-radius:18px;
  margin:-6px -6px 24px;
  background-size:cover;
  background-position:center;
}

.jp-restore { background-image:url('https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc?auto=format&fit=crop&w=800&q=80'); }
.jp-pv { background-image:url('https://images.unsplash.com/photo-1592838064575-70ed626d3a0e?auto=format&fit=crop&w=800&q=80'); }
.jp-battery { background-image:url('https://images.unsplash.com/photo-1621905251918-48416bd8575a?auto=format&fit=crop&w=800&q=80'); }
.jp-ems { background-image:url('https://images.unsplash.com/photo-1558008258-3256797b43f3?auto=format&fit=crop&w=800&q=80'); }
.jp-island { background-image:url('https://images.unsplash.com/photo-1603791440384-56cd371ee9a7?auto=format&fit=crop&w=800&q=80'); }
.jp-business { background-image:url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&w=800&q=80'); }

/* refined japan images */
.jp-restore { background-image:url('https://images.unsplash.com/photo-1621905252507-b35492cc74b4?auto=format&fit=crop&w=800&q=80'); }
.jp-pv { background-image:url('https://images.unsplash.com/photo-1611365892117-00c4b91b0c6f?auto=format&fit=crop&w=800&q=80'); }
.jp-battery { background-image:url('https://images.unsplash.com/photo-1621905251918-48416bd8575a?auto=format&fit=crop&w=800&q=80'); }
.jp-ems { background-image:url('https://images.unsplash.com/photo-1581093588401-16ecbeea0f03?auto=format&fit=crop&w=800&q=80'); }
.jp-island { background-image:url('https://images.unsplash.com/photo-1509395176047-4a66953fd231?auto=format&fit=crop&w=800&q=80'); }


/* v6 polish */
.logo img {
  height: 82px !important;
  max-width: 320px;
}
.nav {
  min-height: 112px !important;
}
.hero.has-photo {
  background:
    linear-gradient(90deg, rgba(244,242,248,.96) 0%, rgba(244,242,248,.88) 48%, rgba(244,242,248,.35) 100%),
    url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1600&q=82') center right / cover no-repeat;
}
.hero.has-photo .visual {
  min-height: 470px;
}
.hero-photo-card {
  height: 470px;
  border-radius: 36px;
  overflow: hidden;
  background: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1600&q=82') center / cover no-repeat;
  box-shadow: var(--shadow);
  border: 10px solid rgba(255,255,255,.85);
}
.hero-photo-card::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(27,10,115,.12), rgba(185,242,241,.18));
}

.jp-real {
  height: 140px;
  border-radius: 18px;
  margin: -6px -6px 24px;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 999px rgba(27,10,115,.03);
}
.jp-restore { background-image: url('https://images.unsplash.com/photo-1621905252507-b35492cc74b4?auto=format&fit=crop&w=900&q=82') !important; }
.jp-pv { background-image: url('https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=900&q=82') !important; }
.jp-battery { background-image: url('https://images.unsplash.com/photo-1621905251918-48416bd8575a?auto=format&fit=crop&w=900&q=82') !important; }
.jp-ems { background-image: url('https://images.unsplash.com/photo-1558008258-3256797b43f3?auto=format&fit=crop&w=900&q=82') !important; }
.jp-island { background-image: url('https://images.unsplash.com/photo-1518780664697-55e3ad937233?auto=format&fit=crop&w=900&q=82') !important; }
.jp-business { background-image: url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&w=900&q=82') !important; }

@media(max-width:760px){
  .logo img{height:56px !important; max-width:230px;}
  .nav{min-height:86px !important;}
}

/* Replace NL hero with real Berlage building */
.hero-photo-card {
    background: url('assets_berlage.png') center/cover no-repeat !important;
}
.img-building {
    background-image: url('assets_berlage.png') !important;
}

/* Berlage image on landing hero */
.hero {
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(247,246,251,0.85)),
    url('assets_berlage.png') center/cover no-repeat !important;
}



/* FINAL JAPAN IMAGES (LOCAL FILES) */

.jp-real.jp-pv {
  background-image: url('assets/japan-pv.jpg') !important;
}
.jp-real.jp-battery {
  background-image: url('assets/japan-battery.jpg') !important;
}
.jp-real.jp-ems {
  background-image: url('assets/japan-energy.jpg') !important;
}
.jp-real.jp-island {
  background-image: url('assets/japan-island.jpg') !important;
}
.jp-real.jp-business {
  background-image: url('assets/japan-cost.jpg') !important;
}

.jp-real.jp-restore { background-image: url('assets/japan-restore.jpg') !important; }

/* EU pages hero / first card image */
.hero-photo-card {
  background: url('assets/eu-energy-square.jpg') center/cover no-repeat !important;
}

.img-building {
  background-image: url('assets/eu-energy-square.jpg') !important;
}


/* Final typography softening */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

h1, h2, h3 {
  letter-spacing: -0.025em !important;
}

h1 {
  font-weight: 850 !important;
  line-height: 0.96 !important;
}

h2 {
  font-weight: 850 !important;
  line-height: 1.05 !important;
}

h3 {
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

.lead {
  font-weight: 400;
  line-height: 1.78 !important;
}

.copy,
.section-head p,
.card p,
.about p,
.note {
  line-height: 1.78 !important;
}

.card {
  padding-top: 32px;
}

.kicker {
  letter-spacing: 0.01em;
}

.button {
  font-weight: 800 !important;
}

.menu {
  font-weight: 750 !important;
}

.jp h1,
.jp h2,
.jp h3 {
  letter-spacing: -0.01em !important;
  line-height: 1.18 !important;
}

.jp .lead,
.jp .card p,
.jp .copy,
.jp .note {
  line-height: 1.95 !important;
}


/* Fix image scaling (less aggressive crop) */
.hero-photo-card,
.img-building {
  background-size: contain !important;
  background-position: center !important;
  background-color: #f4f2f8;
}


/* Clean image - no tag, no aggressive crop */
.hero-photo-card,
.img-building {
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #f4f2f8;
}

/* Square EU image - correct fit */
.hero-photo-card,
.img-building {
  background-image: url('assets/eu-energy-square.jpg') !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #f4f2f8;
}

/* Fit square image nicely into rounded frame */
.hero-photo-card,
.img-building {
  background-image: url('assets/eu-energy-square.jpg') !important;
  background-size: cover !important; /* fill frame */
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
}

/* ensure rounding clips image cleanly */
.hero-photo-card {
  border-radius: 36px;
}
.img-building {
  border-radius: 18px;
}