/* VGRID .cn homepage concept: a light industrial editorial system. */
html.vcn-site[data-theme] {
  --bg:#f7f8f5; --bg-1:#eef2ee; --bg-2:#ffffff; --bg-3:#e7ece8;
  --line:#cdd8d2; --line-soft:#e1e8e3;
  --text:#142c35; --text-2:#52666a; --text-3:#75878a;
  --accent:#008b82; --accent-2:#00766f; --accent-soft:rgba(0,139,130,.08); --accent-line:rgba(0,139,130,.28);
  --on-accent:#fff; --topbar-bg:#17333c; --header-bg:rgba(247,248,245,.93); --header-bg-scrolled:rgba(247,248,245,.98);
  --footer-bg:#102830; --sh-1:0 8px 26px rgba(16,43,46,.06); --sh-2:0 20px 54px rgba(16,43,46,.13);
  --grain-1:transparent; --grain-2:transparent; --theme-color:#f7f8f5;
}
.vcn-site .topbar .theme-switch { display:none; }
.vcn-site .header { border-bottom:1px solid #dce5df; }
.vcn-site .brand .mark { border-radius:4px; }
.vcn-site .vcn-brand-crop { display:block; width:119px; height:41px; overflow:hidden; flex:none; }
.vcn-site .vcn-brand-logo { display:block; width:184px; max-width:none; height:41px; object-fit:contain; object-position:left center; }
.vcn-site .vcn-home { overflow:hidden; }
.vcn-home h1,.vcn-home h2,.vcn-home h3,.vcn-home p { margin-top:0; }
.vcn-home h1,.vcn-home h2 { font-family:var(--font-display); letter-spacing:-.055em; }
.vcn-home .vcn-kicker { color:#007f78; font:700 11px/1.4 var(--font-mono); letter-spacing:.15em; text-transform:uppercase; margin-bottom:20px; }
.vcn-home .vcn-kicker-line { display:inline-block; width:28px; height:1px; background:currentColor; vertical-align:middle; margin-right:12px; }
.vcn-home .vcn-section { padding:96px 0; }
.vcn-home .vcn-section-head { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:38px; }
.vcn-home .vcn-section-head h2 { font-size:clamp(35px,4vw,62px); line-height:1.08; max-width:750px; margin-bottom:12px; }
.vcn-home .vcn-section-head p:not(.vcn-kicker) { color:var(--text-2); max-width:590px; font-size:16px; line-height:1.7; margin-bottom:0; }
.vcn-home .vcn-text-link { color:#007f78; font-weight:700; text-decoration:none; white-space:nowrap; border-bottom:1px solid currentColor; padding-bottom:5px; }
.vcn-home .vcn-text-link:hover { color:#005e59; }
.vcn-home .vcn-button { display:inline-flex; align-items:center; justify-content:center; gap:20px; padding:15px 22px; min-height:52px; border-radius:4px; font-weight:700; text-decoration:none; transition:transform .2s,background .2s,color .2s; }
.vcn-home .vcn-button:hover { transform:translateY(-3px); }
.vcn-home .vcn-button-primary { background:#007f78; color:#fff; border:1px solid #007f78; }
.vcn-home .vcn-button-primary:hover { background:#00645f; color:#fff; }
.vcn-home .vcn-button-outline { border:1px solid #9eb7ae; color:#17333c; background:transparent; }
.vcn-home .vcn-button-outline:hover { color:#17333c; background:#e5eeea; }
.vcn-home .vcn-button-light { background:#dff9ed; color:#12343b; }
.vcn-home .vcn-card-index { font:700 11px/1.3 var(--font-mono); letter-spacing:.13em; text-transform:uppercase; color:#6f8889; }
.vcn-hero { background:#f1f5f0; position:relative; border-bottom:1px solid #d8e2da; }
.vcn-hero:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 49.9%,rgba(17,63,61,.045) 50%,transparent 50.1%),linear-gradient(0deg,transparent 49.9%,rgba(17,63,61,.045) 50%,transparent 50.1%); background-size:80px 80px; pointer-events:none; }
.vcn-hero-grid { position:relative; display:grid; grid-template-columns:1.05fr .95fr; min-height:670px; align-items:center; gap:64px; padding-block:54px 72px; }
.vcn-hero-copy { position:relative; z-index:1; padding-top:28px; }
.vcn-hero h1 { font-size:clamp(50px,5.5vw,84px); line-height:1.03; font-weight:700; max-width:760px; margin-bottom:26px; }
.vcn-hero-lead { font-size:clamp(17px,1.4vw,20px); line-height:1.65; color:#4c6469; max-width:620px; margin-bottom:31px; }
.vcn-actions { display:flex; flex-wrap:wrap; gap:12px; }
.vcn-hero-metrics { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #bfcec6; margin-top:60px; padding-top:25px; gap:16px; }
.vcn-hero-metrics div { display:flex; flex-direction:column; gap:5px; }
.vcn-hero-metrics strong { font:700 clamp(21px,2.2vw,32px)/1.1 var(--font-display); letter-spacing:-.05em; color:#15343c; }
.vcn-hero-metrics small { font-size:.55em; letter-spacing:0; }
.vcn-hero-metrics span { font-size:12px; color:#698082; line-height:1.4; }
.vcn-hero-media { position:relative; padding:35px 26px 15px 10px; }
.vcn-image-frame { background:#dce7e2; border:1px solid #c3d3ca; padding:16px; box-shadow:18px 18px 0 #d7e4dd; }
.vcn-image-frame img { display:block; width:100%; height:480px; object-fit:contain; background:linear-gradient(130deg,#dce9e2,#f8faf6); }
.vcn-image-topline,.vcn-image-caption { display:flex; justify-content:space-between; gap:12px; font:700 10px/1.4 var(--font-mono); letter-spacing:.1em; color:#607b7c; }
.vcn-image-topline { padding:2px 2px 13px; }
.vcn-image-caption { padding:13px 2px 1px; }
.vcn-media-float { position:absolute; left:-20px; bottom:43px; display:flex; flex-direction:column; padding:17px 22px; background:#0c7e75; color:#fff; box-shadow:0 15px 35px rgba(0,70,68,.2); }
.vcn-media-float span { font:600 12px var(--font-mono); letter-spacing:.03em; }
.vcn-media-float b { font:700 28px var(--font-display); }
.vcn-hero-foot { position:relative; display:flex; justify-content:space-between; padding-bottom:20px; font:600 10px var(--font-mono); color:#829896; letter-spacing:.15em; }
.vcn-range { background:#fafbf8; }
.vcn-power-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; }
.vcn-power-card { display:flex; position:relative; flex-direction:column; justify-content:space-between; min-height:220px; background:#e9f0e9; border:1px solid #d8e3da; padding:23px; text-decoration:none; color:#173740; transition:transform .2s,background .2s; }
.vcn-power-card:hover { background:#d9ebe3; transform:translateY(-5px); color:#173740; }
.vcn-power-card-compact { background:#153942; color:#fff; border-color:#153942; }
.vcn-power-card-compact:hover { background:#0b5658; color:#fff; }
.vcn-power-card-compact .vcn-card-index { color:#95bdba; }
.vcn-power-card strong { font:700 clamp(31px,3.3vw,49px)/1 var(--font-display); letter-spacing:-.07em; }
.vcn-power-card strong small { font-size:.44em; letter-spacing:0; }
.vcn-power-card > span:nth-last-child(2) { font-size:13px; line-height:1.45; min-height:38px; }
.vcn-power-card .vcn-card-arrow { position:absolute; right:20px; bottom:19px; font-size:19px; }
.vcn-spec-note { font-size:12px; color:#81918e; margin:15px 0 0; }
.vcn-scale { background:#123640; color:#f1f8f3; position:relative; }
.vcn-scale:before { content:""; position:absolute; inset:0; opacity:.14; background-image:linear-gradient(#8bd0bf 1px,transparent 1px),linear-gradient(90deg,#8bd0bf 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(90deg,transparent,#000); }
.vcn-scale-grid { position:relative; display:grid; grid-template-columns:.9fr 1.1fr; gap:100px; align-items:center; }
.vcn-scale .vcn-kicker { color:#72d6c1; }
.vcn-scale h2 { color:#fff; font-size:clamp(42px,4.5vw,68px); line-height:1.07; margin-bottom:25px; }
.vcn-scale p:not(.vcn-kicker) { color:#b9d0d0; font-size:17px; line-height:1.7; max-width:480px; margin-bottom:32px; }
.vcn-scale-visual { border:1px solid #497078; padding:36px; background:rgba(15,54,61,.76); }
.vcn-scale-line { display:grid; grid-template-columns:120px 1fr 30px; align-items:center; gap:16px; padding:22px 0; border-bottom:1px solid #426b73; }
.vcn-scale-line span { font:700 31px var(--font-display); white-space:nowrap; }
.vcn-scale-line small { font-size:14px; }
.vcn-scale-line i { height:9px; background:linear-gradient(90deg,#6fd3be,#c9f4ce); transform-origin:left; }
.vcn-scale-line:nth-child(1) i { width:50%; }.vcn-scale-line:nth-child(2) i { width:75%; }.vcn-scale-line:nth-child(3) i { width:100%; }
.vcn-scale-line em { color:#80c9bc; font:600 11px var(--font-mono); }
.vcn-scale-caption { color:#8cb7b6; font:600 10px var(--font-mono); letter-spacing:.12em; padding-top:24px; }
.vcn-spotlight { background:#f4f7f3; }.vcn-spotlight-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.vcn-feature-card { border:1px solid #d6e0d9; background:#fff; display:grid; grid-template-columns:45% 55%; min-height:330px; }
.vcn-feature-image { display:flex; align-items:center; justify-content:center; background:#e5efe9; padding:20px; }
.vcn-feature-image img { width:100%; height:270px; object-fit:contain; }
.vcn-feature-copy { padding:32px; display:flex; flex-direction:column; align-items:flex-start; }
.vcn-feature-copy h3 { font-size:clamp(20px,2vw,27px); line-height:1.25; letter-spacing:-.03em; margin:23px 0 16px; }
.vcn-feature-copy p { color:#5f7476; font-size:14px; line-height:1.7; flex:1; }
.vcn-categories { background:#fff; }.vcn-category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.vcn-category-card { position:relative; min-height:200px; padding:28px; background:#f3f7f2; border:1px solid #dde7de; text-decoration:none; color:#173740; }
.vcn-category-card:hover { color:#173740; border-color:#6cb4a5; }
.vcn-category-card h3 { font-size:23px; margin:27px 0 12px; }.vcn-category-card p { color:#718584; font-size:13px; }.vcn-category-card > span:last-child { position:absolute; right:25px; bottom:23px; color:#07847a; font-size:20px; }
.vcn-all-products { background:#f4f7f3; }.vcn-product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.vcn-product-count { flex:none; min-width:105px; padding:16px 20px; border-left:2px solid #05877c; display:flex; flex-direction:column; }
.vcn-product-count strong { color:#163840; font:700 36px/1 var(--font-display); }
.vcn-product-count span { margin-top:5px; color:#718785; font:600 10px/1.3 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }
.vcn-all-products .product-card { background:#fff; }
.vcn-all-products .product-card .card-title { font-size:17px; line-height:1.35; }
.vcn-all-products .product-card .card-desc { min-height:66px; }
.vcn-why { background:#fff; }.vcn-why-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid #d8e4dc; }.vcn-why-grid > div { padding:28px 24px 20px 0; border-right:1px solid #d8e4dc; }.vcn-why-grid > div + div { padding-left:24px; }.vcn-why-grid > div:last-child { border:0; }.vcn-why-grid span { color:#00877c; font:600 12px var(--font-mono); }.vcn-why-grid h3 { font-size:19px; margin:27px 0 13px; }.vcn-why-grid p { color:#6f8180; font-size:13px; line-height:1.65; }
.vcn-resources { background:#f4f7f3; }.vcn-resource-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.vcn-resource-card { background:#fff; border:1px solid #dbe6de; text-decoration:none; color:#18353d; }.vcn-resource-card:hover { color:#006f67; }.vcn-resource-card img { width:100%; height:180px; object-fit:cover; background:#e2eae4; }.vcn-resource-card > div { padding:22px; }.vcn-resource-card time,.vcn-resource-card span { color:#7a9290; font:600 11px var(--font-mono); }.vcn-resource-card h3 { font-size:19px; line-height:1.35; margin:14px 0 20px; }
.vcn-faq { background:#fff; }.vcn-faq-grid { display:grid; grid-template-columns:.65fr 1.35fr; gap:90px; }.vcn-faq h2 { font-size:clamp(38px,4vw,58px); }.vcn-faq details { border-bottom:1px solid #dbe5dd; padding:20px 0; }.vcn-faq summary { cursor:pointer; font-weight:600; }.vcn-faq details p { color:#6b807e; padding-top:15px; line-height:1.7; }
.vcn-cta { background:#dcefe5; }.vcn-cta-grid { display:flex; align-items:end; justify-content:space-between; gap:40px; }.vcn-cta h2 { font-size:clamp(40px,4.8vw,68px); max-width:780px; }.vcn-cta p:not(.vcn-kicker) { color:#4d6d69; max-width:650px; line-height:1.7; }
@media(max-width:1100px){.vcn-hero-grid{gap:25px}.vcn-power-grid{grid-template-columns:repeat(3,1fr)}.vcn-product-grid{grid-template-columns:repeat(3,1fr)}.vcn-feature-card{grid-template-columns:1fr}.vcn-feature-image img{height:220px}}
@media(max-width:800px){.vcn-home .vcn-section{padding:68px 0}.vcn-hero-grid{grid-template-columns:1fr;padding-block:62px 44px}.vcn-hero h1{max-width:650px}.vcn-hero-media{max-width:620px;margin:auto;width:100%}.vcn-scale-grid,.vcn-faq-grid{grid-template-columns:1fr;gap:40px}.vcn-category-grid,.vcn-resource-grid{grid-template-columns:repeat(2,1fr)}.vcn-why-grid{grid-template-columns:repeat(2,1fr)}.vcn-why-grid>div:nth-child(2){border-right:0}.vcn-why-grid>div:nth-child(3){padding-left:0}.vcn-cta-grid{align-items:start;flex-direction:column}.vcn-image-frame img{height:380px}}
@media(max-width:560px){.vcn-home .vcn-section{padding:54px 0}.vcn-home .vcn-section-head{align-items:start;flex-direction:column;gap:16px}.vcn-home .vcn-section-head h2{font-size:36px}.vcn-hero-grid{padding-block:46px 40px}.vcn-hero h1{font-size:46px}.vcn-hero-lead{font-size:16px}.vcn-actions{display:grid;grid-template-columns:1fr}.vcn-hero-metrics{margin-top:40px;gap:8px}.vcn-hero-metrics strong{font-size:19px}.vcn-hero-metrics span{font-size:10px}.vcn-hero-media{padding:20px 15px 20px 0}.vcn-image-frame img{height:290px}.vcn-media-float{left:-8px;bottom:38px;padding:10px 13px}.vcn-image-caption{font-size:8px}.vcn-hero-foot span:first-child{display:none}.vcn-power-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vcn-power-card{padding:17px;min-height:180px}.vcn-power-card strong{font-size:31px}.vcn-power-card .vcn-card-arrow{right:14px;bottom:14px}.vcn-scale-visual{padding:20px}.vcn-scale-line{grid-template-columns:90px 1fr 22px;gap:9px}.vcn-scale-line span{font-size:22px}.vcn-spotlight-grid,.vcn-category-grid,.vcn-resource-grid{grid-template-columns:1fr}.vcn-product-grid{grid-template-columns:1fr;gap:14px}.vcn-product-count{min-width:0;padding:11px 0;border-left:0;border-top:2px solid #05877c;flex-direction:row;align-items:baseline;gap:8px}.vcn-all-products .product-card .card-desc{min-height:0}.vcn-why-grid{grid-template-columns:1fr}.vcn-why-grid>div,.vcn-why-grid>div+div{padding:22px 0;border-right:0;border-bottom:1px solid #d8e4dc}}
/* Curated five-product carousel */
.vcn-carousel { border:1px solid #d4e2d8; background:#fff; box-shadow:0 18px 48px rgba(18,55,60,.06); }
.vcn-carousel-stage { overflow:hidden; }
.vcn-carousel-slide { display:grid; grid-template-columns:53% 47%; min-height:540px; }
.vcn-carousel .vcn-carousel-slide[hidden] { display:none; }
.vcn-carousel-copy { padding:clamp(34px,4vw,62px); display:flex; flex-direction:column; align-items:flex-start; }
.vcn-carousel-count { display:flex; gap:7px; margin-bottom:auto; color:#9bafae; font:600 12px var(--font-mono); }
.vcn-carousel-count span:first-child { color:#008c81; }
.vcn-carousel-copy .vcn-kicker { margin:34px 0 16px; }
.vcn-carousel-copy h2 { font-size:clamp(35px,3.5vw,55px); line-height:1.1; letter-spacing:-.05em; max-width:560px; margin-bottom:20px; }
.vcn-carousel-desc { color:#536b6c; font-size:16px; line-height:1.7; max-width:560px; margin-bottom:23px; }
.vcn-carousel-tags { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0 0 32px; }
.vcn-carousel-tags li { border:1px solid #cfded6; padding:8px 10px; color:#39635f; font:600 11px var(--font-mono); }
.vcn-carousel-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:auto; }
.vcn-carousel-image { display:flex; position:relative; align-items:center; justify-content:center; background:linear-gradient(145deg,#e8f2eb,#d9e8df); overflow:hidden; padding:70px 35px; }
.vcn-carousel-image:after { content:""; position:absolute; width:78%; aspect-ratio:1; border:1px solid rgba(28,101,92,.13); border-radius:50%; }
.vcn-carousel-image img { position:relative; z-index:1; display:block; width:100%; max-width:530px; height:400px; object-fit:contain; filter:drop-shadow(0 25px 24px rgba(20,58,57,.14)); }
.vcn-carousel-model { position:absolute; left:28px; top:28px; z-index:2; color:#50746e; font:600 11px var(--font-mono); letter-spacing:.08em; }
.vcn-carousel-image strong { position:absolute; right:28px; bottom:20px; z-index:2; color:#0c544f; font:700 clamp(27px,3vw,45px) var(--font-display); letter-spacing:-.06em; }
.vcn-carousel-controls { display:flex; justify-content:space-between; align-items:stretch; border-top:1px solid #d9e5dc; }
.vcn-carousel-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); flex:1; }
.vcn-carousel-tabs button { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:5px; min-height:80px; padding:17px 20px; border:0; border-right:1px solid #e0e9e2; border-top:3px solid transparent; background:#f8faf7; color:#345056; text-align:left; cursor:pointer; }
.vcn-carousel-tabs button:hover,.vcn-carousel-tabs button.is-active { background:#e4f2e8; border-top-color:#008c81; }
.vcn-carousel-tabs button span { font:700 17px var(--font-display); white-space:nowrap; }
.vcn-carousel-tabs button small { font:500 10px var(--font-mono); color:#698480; white-space:nowrap; }
.vcn-carousel-arrows { display:flex; }
.vcn-carousel-arrows button { width:57px; border:0; border-left:1px solid #d9e5dc; background:#fff; color:#15786f; font-size:24px; cursor:pointer; }
.vcn-carousel-arrows button:hover { background:#e4f2e8; }
@media(max-width:950px){.vcn-carousel-slide{grid-template-columns:1fr;}.vcn-carousel-copy{min-height:390px}.vcn-carousel-image{min-height:360px}.vcn-carousel-image img{height:300px}.vcn-carousel-tabs button{padding:14px 8px}.vcn-carousel-tabs button span{font-size:14px}.vcn-carousel-tabs button small{font-size:9px}}
@media(max-width:560px){.vcn-carousel-copy{padding:28px 22px;min-height:400px}.vcn-carousel-copy h2{font-size:34px}.vcn-carousel-desc{font-size:14px}.vcn-carousel-tags{margin-bottom:20px}.vcn-carousel-tags li{font-size:10px}.vcn-carousel-actions{gap:15px}.vcn-carousel-image{min-height:310px;padding:45px 18px}.vcn-carousel-image img{height:245px}.vcn-carousel-image strong{font-size:31px}.vcn-carousel-controls{display:block}.vcn-carousel-tabs{overflow:auto;display:flex;scrollbar-width:thin}.vcn-carousel-tabs button{flex:0 0 98px;min-height:66px}.vcn-carousel-arrows{justify-content:flex-end;border-top:1px solid #d9e5dc}.vcn-carousel-arrows button{width:53px;height:45px}}
.vcn-visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.vcn-hero-ad { padding:28px 0 48px; }
.vcn-hero-ad .container { position:relative; }
.vcn-hero-ad .vcn-ad-eyebrow { margin-bottom:18px; }
.vcn-hero-ad .vcn-carousel { position:relative; }
.vcn-hero-ad .vcn-carousel-slide { min-height:570px; }
@media(max-width:950px){.vcn-hero-ad .vcn-carousel-slide{min-height:0}}
@media(max-width:560px){.vcn-hero-ad{padding:18px 0 32px}.vcn-hero-ad .vcn-ad-eyebrow{font-size:9px;margin-bottom:12px}.vcn-hero-ad .vcn-carousel-slide{display:flex;flex-direction:column}.vcn-hero-ad .vcn-carousel-image{order:-1;min-height:240px;padding:26px 20px}.vcn-hero-ad .vcn-carousel-image img{height:205px}.vcn-hero-ad .vcn-carousel-copy{min-height:0}.vcn-hero-ad .vcn-carousel-copy .vcn-kicker{margin:18px 0 12px}.vcn-hero-ad .vcn-carousel-count{margin-bottom:0}}

/* Premium campaign system: midnight blue, warm mineral surfaces and restrained copper. */
html.vcn-site[data-theme] {
  --bg:#f5f4ef; --bg-1:#ebeae3; --bg-2:#fffefa; --bg-3:#e5e9e8;
  --line:#d9dedb; --line-soft:#e8ebe7; --text:#102b3b; --text-2:#53646b;
  --accent:#123c59; --accent-2:#0d314b; --accent-soft:rgba(18,60,89,.08);
  --on-accent:#fff; --topbar-bg:#091f30; --header-bg:rgba(250,249,245,.96); --header-bg-scrolled:rgba(250,249,245,.98);
  --footer-bg:#081e2d; --theme-color:#f5f4ef;
}
.vcn-site .header { border-bottom:1px solid #d7dedb; box-shadow:0 4px 24px rgba(5,28,41,.035); }
.vcn-home .vcn-section { padding:112px 0; }
.vcn-home .vcn-kicker { color:#97734a; letter-spacing:.2em; }
.vcn-home .vcn-section-head { margin-bottom:46px; }
.vcn-home .vcn-section-head h2 { color:#0c293a; font-size:clamp(43px,4.7vw,70px); line-height:1.05; max-width:690px; }
.vcn-home .vcn-section-head p:not(.vcn-kicker) { color:#64747a; }
.vcn-home .vcn-text-link { color:#174c69; border-color:#bd9068; }
.vcn-home .vcn-text-link:hover { color:#a5673d; }
.vcn-home .vcn-button { border-radius:2px; min-height:55px; padding:15px 27px; }
.vcn-home .vcn-button-primary { background:#d89358; border-color:#d89358; color:#102838; }
.vcn-home .vcn-button-primary:hover { background:#e9a976; border-color:#e9a976; color:#102838; }
.vcn-hero-ad { background:#081e2e; padding:28px 0 52px; border:0; }
.vcn-hero-ad:before { background:radial-gradient(circle at 78% 35%,rgba(80,126,144,.22),transparent 44%),linear-gradient(90deg,rgba(183,212,215,.035) 1px,transparent 1px); background-size:auto,94px 94px; }
.vcn-hero-ad .vcn-ad-eyebrow { color:#b9a88f; margin-bottom:22px; }
.vcn-hero-ad .vcn-carousel { border:1px solid #365163; box-shadow:0 36px 68px rgba(1,15,25,.26); background:#0b283c; }
.vcn-hero-ad .vcn-carousel-slide { min-height:620px; grid-template-columns:52% 48%; }
.vcn-hero-ad .vcn-carousel-copy { background:linear-gradient(135deg,#0c2b40,#092234 72%); padding:clamp(38px,5vw,76px); }
.vcn-hero-ad .vcn-carousel-count { color:#718c9b; font-size:13px; }
.vcn-hero-ad .vcn-carousel-count span:first-child { color:#d79560; }
.vcn-hero-ad .vcn-carousel-copy .vcn-kicker { color:#d8aa80; margin:42px 0 21px; }
.vcn-hero-ad .vcn-carousel-copy h2 { color:#f6f3e9; font-size:clamp(47px,4.6vw,75px); line-height:1.045; letter-spacing:-.065em; max-width:650px; margin-bottom:25px; }
.vcn-hero-ad .vcn-carousel-desc { color:#b9cad0; font-size:17px; line-height:1.72; max-width:520px; }
.vcn-hero-ad .vcn-carousel-tags li { border-color:#466174; color:#c7d3d3; background:rgba(255,255,255,.035); }
.vcn-hero-ad .vcn-carousel-actions .vcn-text-link { color:#f2dfce; border-color:#ba8a67; }
.vcn-hero-ad .vcn-carousel-image { background:radial-gradient(circle at 52% 44%,#39576b 0,#18384e 36%,#0a263a 76%); padding:62px 34px; }
.vcn-hero-ad .vcn-carousel-image:after { width:77%; border-color:rgba(235,244,243,.14); box-shadow:0 0 0 48px rgba(235,244,243,.025),0 0 0 98px rgba(235,244,243,.018); }
.vcn-hero-ad .vcn-carousel-image img { max-width:600px; height:485px; filter:drop-shadow(0 34px 36px rgba(0,9,14,.32)); }
.vcn-hero-ad .vcn-carousel-model { color:#d3b393; letter-spacing:.15em; }
.vcn-hero-ad .vcn-carousel-image strong { color:#f2f0e9; font-size:clamp(36px,4vw,58px); }
.vcn-hero-ad .vcn-carousel-controls { border-top:1px solid #365163; background:#0b2638; }
.vcn-hero-ad .vcn-carousel-tabs button { min-height:90px; background:#0b2638; color:#a9bdc4; border-right:1px solid #294557; border-top:3px solid transparent; }
.vcn-hero-ad .vcn-carousel-tabs button:hover,.vcn-hero-ad .vcn-carousel-tabs button.is-active { background:#143a51; border-top-color:#db9762; color:#fff; }
.vcn-hero-ad .vcn-carousel-tabs button span { font-size:20px; }
.vcn-hero-ad .vcn-carousel-tabs button small { color:#8da7b1; }
.vcn-hero-ad .vcn-carousel-arrows button { background:#0d2d42; color:#e3b087; border-left-color:#365163; }
.vcn-hero-ad .vcn-carousel-arrows button:hover { background:#1a475f; }
.vcn-range { background:#f6f5f0; }
.vcn-power-grid { gap:0; border-top:1px solid #ccd7d6; border-bottom:1px solid #ccd7d6; }
.vcn-power-card { min-height:255px; background:transparent; border:0; border-right:1px solid #ccd7d6; padding:28px 24px; }
.vcn-power-card:hover { background:#e9eeea; transform:none; }
.vcn-power-card-compact { background:#12384e; }
.vcn-power-card-compact:hover { background:#1c4a60; }
.vcn-power-card strong { font-size:clamp(37px,3.6vw,56px); }
.vcn-power-card .vcn-card-arrow { color:#b98559; }
.vcn-spec-note { color:#7f8f90; margin-top:18px; }
.vcn-scale { background:#0c2739; }
.vcn-scale h2 { max-width:600px; }
.vcn-scale .vcn-kicker { color:#d6a16e; }
.vcn-scale-visual { border-color:#4a6470; background:#153a4e; box-shadow:26px 26px 0 rgba(198,151,111,.1); }
.vcn-scale-line i { background:linear-gradient(90deg,#bc865b,#e6ba8b); }
.vcn-scale-line em { color:#dbab83; }
.vcn-scale-caption { color:#a8bdc1; }
.vcn-categories { background:#faf9f5; }
.vcn-category-grid { gap:18px; }
.vcn-category-card { min-height:260px; background:#f1f2ed; border:1px solid #d9dfd9; padding:32px; }
.vcn-category-card:hover { border-color:#bc8b65; background:#f7f7f2; }
.vcn-category-card h3 { font-size:26px; margin-top:50px; }
.vcn-category-card > span:last-child { color:#ba865d; }
.vcn-all-products { background:#eeefea; }
.vcn-why { background:#faf9f5; }
.vcn-why-grid > div { padding-top:35px; padding-bottom:30px; }
.vcn-why-grid span { color:#a8754f; }
.vcn-why-grid h3 { color:#15364a; font-size:21px; line-height:1.25; }
.vcn-why-grid p { color:#697b7e; font-size:14px; line-height:1.7; }
.vcn-resource-card { border-color:#d8ded9; }
.vcn-faq { background:#faf9f5; }
.vcn-cta { background:#102f42; }
.vcn-cta h2 { color:#f6f3e9; }
.vcn-cta p:not(.vcn-kicker) { color:#c2d2d2; }
.vcn-cta .vcn-kicker { color:#d5a374; }
@media(max-width:950px){.vcn-hero-ad .vcn-carousel-slide{grid-template-columns:1fr}.vcn-hero-ad .vcn-carousel-image img{height:360px}.vcn-hero-ad .vcn-carousel-copy h2{font-size:clamp(46px,6vw,65px)}}
@media(max-width:560px){.vcn-home .vcn-section{padding:72px 0}.vcn-home .vcn-section-head h2{font-size:42px}.vcn-hero-ad{padding:18px 0 32px}.vcn-hero-ad .vcn-carousel-image{min-height:255px;padding:25px 16px}.vcn-hero-ad .vcn-carousel-image img{height:205px}.vcn-hero-ad .vcn-carousel-copy{padding:30px 25px 35px}.vcn-hero-ad .vcn-carousel-copy .vcn-kicker{margin:20px 0 14px}.vcn-hero-ad .vcn-carousel-copy h2{font-size:39px}.vcn-hero-ad .vcn-carousel-desc{font-size:15px}.vcn-hero-ad .vcn-carousel-tabs button{min-height:68px}.vcn-hero-ad .vcn-carousel-tabs button span{font-size:15px}.vcn-power-grid{border:0;gap:1px;background:#d4ddda}.vcn-power-card{border:0;background:#f6f5f0;min-height:185px}.vcn-category-card{min-height:220px}}
.vcn-power-card-compact,.vcn-power-card-compact:hover { background:#12384e; color:#fff; }

/* .cn identity: an architectural, warm editorial campaign rather than the .com dark banner. */
.vcn-hero-ad { background:#ebe8df; padding:30px 0 54px; }
.vcn-hero-ad:before { background:linear-gradient(90deg,rgba(27,58,67,.05) 1px,transparent 1px); background-size:112px 100%; }
.vcn-hero-ad .vcn-ad-eyebrow { color:#806e57; }
.vcn-hero-ad .vcn-carousel { border:0; background:#f8f7f2; box-shadow:0 25px 60px rgba(41,53,52,.11); }
.vcn-hero-ad .vcn-carousel-slide { grid-template-columns:45% 55%; }
.vcn-hero-ad .vcn-carousel-copy { grid-column:2; grid-row:1; background:#f9f8f3; padding:clamp(40px,5.2vw,82px); }
.vcn-hero-ad .vcn-carousel-count { color:#9b9f99; }
.vcn-hero-ad .vcn-carousel-count span:first-child { color:#af754d; }
.vcn-hero-ad .vcn-carousel-copy .vcn-kicker { color:#9c6b4c; }
.vcn-hero-ad .vcn-carousel-copy h2 { color:#122f3e; }
.vcn-hero-ad .vcn-carousel-desc { color:#586e72; }
.vcn-hero-ad .vcn-carousel-tags li { color:#526b71; border-color:#cad3cf; background:transparent; }
.vcn-hero-ad .vcn-carousel-actions .vcn-button-primary { background:#123a52; border-color:#123a52; color:#fff; }
.vcn-hero-ad .vcn-carousel-actions .vcn-button-primary:hover { background:#20546e; border-color:#20546e; }
.vcn-hero-ad .vcn-carousel-actions .vcn-text-link { color:#204b61; border-color:#c39065; }
.vcn-hero-ad .vcn-carousel-image { grid-column:1; grid-row:1; background:radial-gradient(circle at 50% 42%,#f9f8f3 0,#e7e7df 54%,#d8dfd8 100%); border-right:1px solid #d8ded8; }
.vcn-hero-ad .vcn-carousel-image:after { width:75%; border-color:rgba(46,85,90,.18); box-shadow:0 0 0 49px rgba(255,255,255,.22),0 0 0 98px rgba(255,255,255,.13); }
.vcn-hero-ad .vcn-carousel-image img { filter:drop-shadow(0 28px 28px rgba(30,51,55,.18)); }
.vcn-hero-ad .vcn-carousel-model { color:#6d8586; }
.vcn-hero-ad .vcn-carousel-image strong { color:#123a52; }
.vcn-hero-ad .vcn-carousel-controls { background:#fffefa; border-top:1px solid #d6dcd6; }
.vcn-hero-ad .vcn-carousel-tabs button { background:#fffefa; border-right:1px solid #dce1db; color:#596b70; }
.vcn-hero-ad .vcn-carousel-tabs button:hover,.vcn-hero-ad .vcn-carousel-tabs button.is-active { background:#ecece4; border-top-color:#af754d; color:#15374a; }
.vcn-hero-ad .vcn-carousel-tabs button small { color:#81928f; }
.vcn-hero-ad .vcn-carousel-arrows button { background:#fffefa; border-left-color:#dce1db; color:#8b6a52; }
.vcn-hero-ad .vcn-carousel-arrows button:hover { background:#ecece4; }
@media(max-width:950px){.vcn-hero-ad .vcn-carousel-slide{grid-template-columns:1fr}.vcn-hero-ad .vcn-carousel-image{grid-column:1;grid-row:1}.vcn-hero-ad .vcn-carousel-copy{grid-column:1;grid-row:2}}
@media(max-width:560px){.vcn-hero-ad{padding:16px 0 32px}.vcn-hero-ad .vcn-carousel-image{border-right:0;border-bottom:1px solid #d8ded8}.vcn-hero-ad .vcn-carousel-copy{padding:30px 25px 35px}}

/* Homepage design previews. The selected style is a visual preference, never a URL variant. */
.vcn-hero-intro { display:flex; align-items:end; justify-content:space-between; gap:32px; padding:20px 0 37px; }
.vcn-hero-intro > div:first-child { max-width:790px; }
.vcn-hero-intro .vcn-ad-eyebrow { margin-bottom:16px; }
.vcn-hero-intro h1 { color:#173848; font-size:clamp(35px,3.7vw,57px); line-height:1.06; letter-spacing:-.06em; max-width:780px; margin-bottom:13px; }
.vcn-hero-intro .vcn-hero-lead { color:#647579; font-size:15px; line-height:1.5; margin:0; }
.vcn-style-switch { display:flex; align-items:center; gap:4px; flex:none; padding-bottom:5px; }
.vcn-style-switch > span { color:#7e827d; font:600 10px var(--font-mono); text-transform:uppercase; letter-spacing:.12em; margin-right:10px; }
.vcn-style-switch button { min-height:37px; border:1px solid #cbd2cb; background:rgba(255,255,255,.35); color:#4d646a; padding:7px 11px; font:600 11px var(--font-mono); cursor:pointer; }
.vcn-style-switch button:hover { border-color:#7d8e8f; }
.vcn-style-switch button[aria-pressed="true"] { background:#173c50; color:#fff; border-color:#173c50; }
.vcn-power-card .vcn-card-index { max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
@media(max-width:950px){.vcn-hero-intro{align-items:start;flex-direction:column;gap:16px}.vcn-style-switch{flex-wrap:wrap}}
@media(max-width:560px){.vcn-hero-intro{padding:8px 0 23px}.vcn-hero-intro h1{font-size:35px}.vcn-hero-intro .vcn-hero-lead{font-size:13px}.vcn-style-switch>span{width:100%;margin-bottom:3px}.vcn-style-switch button{font-size:10px;min-height:34px}}

html.vcn-site[data-home-style="arctic"] { --bg:#f2f7f7; --bg-1:#e8f1f1; --bg-2:#fff; --accent:#185b68; --accent-2:#124c58; --footer-bg:#102f36; }
[data-home-style="arctic"] .vcn-hero-ad { background:#dce9e9; }
[data-home-style="arctic"] .vcn-hero-ad:before { background:linear-gradient(90deg,rgba(31,102,112,.07) 1px,transparent 1px); background-size:86px 100%; }
[data-home-style="arctic"] .vcn-hero-intro h1 { color:#11404b; }
[data-home-style="arctic"] .vcn-hero-ad .vcn-carousel-copy { background:#f6faf9; }
[data-home-style="arctic"] .vcn-hero-ad .vcn-carousel-image { background:radial-gradient(circle at 50% 40%,#f9fdfb,#d8e8e7 58%,#c5dddf); }
[data-home-style="arctic"] .vcn-hero-ad .vcn-carousel-tags li { border-color:#bdd2d2; }
[data-home-style="arctic"] .vcn-hero-ad .vcn-carousel-actions .vcn-button-primary { background:#176473; border-color:#176473; }
[data-home-style="arctic"] .vcn-hero-ad .vcn-carousel-tabs button.is-active { background:#e1eeee; border-top-color:#328493; }
[data-home-style="arctic"] .vcn-style-switch button[aria-pressed="true"] { background:#176473; border-color:#176473; }
[data-home-style="arctic"] .vcn-range,[data-home-style="arctic"] .vcn-why { background:#f6faf9; }
[data-home-style="arctic"] .vcn-scale,[data-home-style="arctic"] .vcn-cta { background:#123e47; }
[data-home-style="arctic"] .vcn-categories { background:#ecf4f3; }
[data-home-style="arctic"] .vcn-hero-ad .vcn-carousel-slide { grid-template-columns:55% 45%; }
[data-home-style="arctic"] .vcn-hero-ad .vcn-carousel-copy { grid-column:1; }
[data-home-style="arctic"] .vcn-hero-ad .vcn-carousel-image { grid-column:2; border-right:0; border-left:1px solid #c5d8d7; }

[data-home-style="obsidian"] .vcn-hero-ad { background:#252a2c; }
[data-home-style="obsidian"] .vcn-hero-ad:before { background:linear-gradient(90deg,rgba(242,231,204,.05) 1px,transparent 1px); background-size:112px 100%; }
[data-home-style="obsidian"] .vcn-hero-intro h1 { color:#f4efe3; }
[data-home-style="obsidian"] .vcn-hero-intro .vcn-hero-lead { color:#b8c0bd; }
[data-home-style="obsidian"] .vcn-hero-ad .vcn-ad-eyebrow { color:#cca477; }
[data-home-style="obsidian"] .vcn-style-switch>span { color:#b5b7b0; }
[data-home-style="obsidian"] .vcn-style-switch button { color:#d0d3ca; border-color:#67706b; background:#343c3b; }
[data-home-style="obsidian"] .vcn-style-switch button[aria-pressed="true"] { color:#282b29; border-color:#d2a677; background:#d2a677; }
[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel { background:#2a3030; }
[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-copy { background:#303737; }
[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-copy h2 { color:#f2eee4; }
[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-count { color:#929e9c; }
[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-count span:first-child,[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-copy .vcn-kicker { color:#d5aa7d; }
[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-desc { color:#c2cfca; }
[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-tags li { border-color:#64716e; color:#d1d9d4; }
[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-actions .vcn-button-primary { background:#d2a677; border-color:#d2a677; color:#252c2c; }
[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-actions .vcn-text-link { color:#ecd6bd; }
[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-image { background:radial-gradient(circle at 50% 42%,#6c7069,#444e4e 54%,#303939); border-color:#59635f; }
[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-image strong { color:#f1e9db; }
[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-model { color:#e0c49d; }
[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-controls { background:#262c2d; border-color:#535c59; }
[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-tabs button,[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-arrows button { background:#262c2d; color:#c6d0ca; border-color:#535c59; }
[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-tabs button:hover,[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-tabs button.is-active { background:#3a4341; color:#fff; border-top-color:#d2a677; }
[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-tabs button small { color:#adb9b3; }
[data-home-style="obsidian"] .vcn-scale,[data-home-style="obsidian"] .vcn-cta { background:#343231; }
[data-home-style="obsidian"] .vcn-range { background:#eae9e3; }
[data-home-style="obsidian"] .vcn-categories { background:#f1efe9; }
@media(max-width:950px){[data-home-style="arctic"] .vcn-hero-ad .vcn-carousel-slide{grid-template-columns:1fr}[data-home-style="arctic"] .vcn-hero-ad .vcn-carousel-image{grid-column:1;grid-row:1;border-left:0}[data-home-style="arctic"] .vcn-hero-ad .vcn-carousel-copy{grid-column:1;grid-row:2}}

/* Product studio hero (v14): a distinct equipment stage with a vertical model rail. */
[data-home-style="editorial"] .vcn-hero-ad { background:#eee8dc; }
.vcn-hero-ad:before { background:linear-gradient(90deg,rgba(22,58,73,.045) 1px,transparent 1px),linear-gradient(rgba(22,58,73,.035) 1px,transparent 1px); background-size:96px 96px; }
.vcn-hero-ad .vcn-carousel { display:grid; grid-template-columns:minmax(0,1fr) 188px; gap:14px; border:0; background:transparent; box-shadow:none; }
.vcn-hero-ad .vcn-carousel-stage { min-width:0; overflow:hidden; border:1px solid #c9d1cd; border-radius:30px; box-shadow:0 30px 70px rgba(18,44,54,.14); }
.vcn-hero-ad .vcn-carousel-slide { grid-template-columns:minmax(0,1.2fr) minmax(350px,.8fr); min-height:640px; }
.vcn-hero-ad .vcn-carousel-image { grid-column:1; grid-row:1; min-width:0; padding:72px 42px; background:radial-gradient(circle at 50% 47%,#fff 0,#e8e9e1 47%,#d8ddd8 76%); border-right:1px solid #c8d1cc; }
.vcn-hero-ad .vcn-carousel-image:before { content:""; position:absolute; left:9%; right:9%; bottom:10%; height:17%; border-radius:50%; background:radial-gradient(ellipse,rgba(18,42,49,.22),transparent 68%); filter:blur(10px); }
.vcn-hero-ad .vcn-carousel-image:after { width:65%; border-color:rgba(26,77,83,.16); box-shadow:0 0 0 58px rgba(26,77,83,.04),0 0 0 116px rgba(26,77,83,.025); }
.vcn-hero-ad .vcn-carousel-image img { height:505px; max-width:680px; filter:drop-shadow(0 38px 34px rgba(17,39,45,.22)); }
.vcn-hero-ad .vcn-carousel-model { top:32px; left:34px; color:#697d7c; }
.vcn-hero-ad .vcn-carousel-image strong { left:34px; right:auto; bottom:28px; color:#183f50; font-size:clamp(38px,4.4vw,66px); }
.vcn-hero-ad .vcn-carousel-copy { grid-column:2; grid-row:1; position:relative; padding:54px 46px 48px; background:linear-gradient(155deg,#143b4f,#0b283b 68%,#071f30); }
.vcn-hero-ad .vcn-carousel-copy:before { content:""; position:absolute; inset:22px; border:1px solid rgba(255,255,255,.07); pointer-events:none; }
.vcn-hero-ad .vcn-carousel-count { position:relative; z-index:1; margin-bottom:55px; color:#7893a0; }
.vcn-hero-ad .vcn-carousel-copy .vcn-kicker { position:relative; z-index:1; margin:0 0 18px; color:#d6a477; }
.vcn-hero-ad .vcn-carousel-copy h2 { position:relative; z-index:1; color:#f4f1e9; font-size:clamp(38px,3.6vw,57px); line-height:1.04; margin-bottom:24px; }
.vcn-hero-ad .vcn-carousel-desc { position:relative; z-index:1; color:#bbcad0; font-size:15px; }
.vcn-hero-ad .vcn-carousel-tags,.vcn-hero-ad .vcn-carousel-actions { position:relative; z-index:1; }
.vcn-hero-ad .vcn-carousel-tags li { border-color:#456071; color:#cfdbdc; background:rgba(255,255,255,.035); }
.vcn-hero-ad .vcn-carousel-actions .vcn-text-link { color:#f1d8c3; border-color:#b98560; }
.vcn-hero-ad .vcn-carousel-controls { grid-column:2; grid-row:1; min-width:0; display:flex; flex-direction:column; border:1px solid #c9d1cd; border-radius:24px; overflow:hidden; background:#f8f7f1; box-shadow:0 20px 50px rgba(18,44,54,.08); }
.vcn-hero-ad .vcn-carousel-tabs { display:flex; flex:1; flex-direction:column; }
.vcn-hero-ad .vcn-carousel-tabs button { display:grid; grid-template-columns:30px 1fr; grid-template-rows:auto auto; align-content:center; column-gap:11px; row-gap:4px; flex:1 1 0; min-height:0; padding:16px 15px; border:0; border-bottom:1px solid #d9dfda; border-left:4px solid transparent; background:#f8f7f1; color:#183b4b; }
.vcn-hero-ad .vcn-carousel-tabs button:hover,.vcn-hero-ad .vcn-carousel-tabs button.is-active { background:#e4e7df; border-top-color:transparent; border-left-color:#c88856; color:#102f40; }
.vcn-tab-index { grid-row:1/3; align-self:center; color:#9a836f; font:600 10px/1 var(--font-mono); }
.vcn-hero-ad .vcn-carousel-tabs button span { grid-column:2; font-size:19px; }
.vcn-hero-ad .vcn-carousel-tabs button small { grid-column:2; color:#71827f; }
.vcn-hero-ad .vcn-carousel-arrows { display:grid; grid-template-columns:1fr 1fr; height:66px; border-top:1px solid #cfd7d1; }
.vcn-hero-ad .vcn-carousel-arrows button { width:auto; border:0; background:#143b4f; color:#e7b183; }
.vcn-hero-ad .vcn-carousel-arrows button+button { border-left:1px solid #345567; }
.vcn-hero-ad .vcn-carousel-arrows button:hover { background:#1d5269; }

[data-home-style="arctic"] .vcn-hero-ad .vcn-carousel-image { grid-column:1; grid-row:1; border-left:0; border-right:1px solid #bdd1d0; background:radial-gradient(circle at 50% 45%,#fff,#dbe9e8 55%,#c6dcde); }
[data-home-style="arctic"] .vcn-hero-ad .vcn-carousel-copy { grid-column:2; grid-row:1; background:linear-gradient(155deg,#15515e,#103b49); }
[data-home-style="arctic"] .vcn-hero-ad .vcn-carousel-controls { background:#eef6f5; border-color:#b9cecd; }
[data-home-style="arctic"] .vcn-hero-ad .vcn-carousel-tabs button { background:#eef6f5; border-color:#cbdcda; }
[data-home-style="arctic"] .vcn-hero-ad .vcn-carousel-tabs button:hover,[data-home-style="arctic"] .vcn-hero-ad .vcn-carousel-tabs button.is-active { background:#d9e9e7; border-left-color:#318693; }

[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-stage,[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-controls { border-color:#5a5e5a; }
[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-image { background:radial-gradient(circle at 50% 45%,#73766e,#4a514f 55%,#343b3a); border-color:#5d625e; }
[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-copy { background:linear-gradient(155deg,#343a39,#252b2b); }
[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-controls,[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-tabs button { background:#292e2e; color:#e3e2db; border-color:#4b5250; }
[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-tabs button:hover,[data-home-style="obsidian"] .vcn-hero-ad .vcn-carousel-tabs button.is-active { background:#3a4140; border-top-color:transparent; border-left-color:#d2a677; }

@media(max-width:1100px){
  .vcn-hero-ad .vcn-carousel{grid-template-columns:1fr;gap:12px}
  .vcn-hero-ad .vcn-carousel-controls{grid-column:1;grid-row:2;display:flex;flex-direction:row;border-radius:18px}
  .vcn-hero-ad .vcn-carousel-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));flex:1;flex-direction:initial}
  .vcn-hero-ad .vcn-carousel-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:78px;padding:12px;border-bottom:0;border-right:1px solid #d9dfda;border-left:0;border-top:3px solid transparent}
  .vcn-hero-ad .vcn-carousel-tabs button:hover,.vcn-hero-ad .vcn-carousel-tabs button.is-active{border-left-color:transparent;border-top-color:#c88856}
  .vcn-tab-index{display:none}.vcn-hero-ad .vcn-carousel-arrows{height:auto;min-width:108px;border-top:0;border-left:1px solid #cfd7d1}
}
@media(max-width:800px){
  .vcn-hero-ad .vcn-carousel-slide{display:grid;grid-template-columns:1fr;min-height:0}
  .vcn-hero-ad .vcn-carousel-image,[data-home-style="arctic"] .vcn-hero-ad .vcn-carousel-image{grid-column:1;grid-row:1;min-height:390px;padding:46px 28px;border-right:0;border-bottom:1px solid #c8d1cc}
  .vcn-hero-ad .vcn-carousel-image img{height:330px}
  .vcn-hero-ad .vcn-carousel-copy,[data-home-style="arctic"] .vcn-hero-ad .vcn-carousel-copy{grid-column:1;grid-row:2;min-height:420px}
}
@media(max-width:560px){
  .vcn-hero-ad .vcn-carousel-stage{border-radius:20px}
  .vcn-hero-ad .vcn-carousel-slide{display:grid;grid-template-columns:1fr}
  .vcn-hero-ad .vcn-carousel-image{min-height:290px;padding:34px 18px}
  .vcn-hero-ad .vcn-carousel-image img{height:250px}
  .vcn-hero-ad .vcn-carousel-image strong{left:20px;bottom:18px;font-size:35px}
  .vcn-hero-ad .vcn-carousel-model{left:20px;top:20px}
  .vcn-hero-ad .vcn-carousel-copy{min-height:0;padding:35px 27px 39px}
  .vcn-hero-ad .vcn-carousel-copy:before{inset:14px}
  .vcn-hero-ad .vcn-carousel-count{margin-bottom:28px}
  .vcn-hero-ad .vcn-carousel-copy h2{font-size:36px}
  .vcn-hero-ad .vcn-carousel-controls{display:block;border-radius:16px}
  .vcn-hero-ad .vcn-carousel-tabs{display:flex;overflow:auto}
  .vcn-hero-ad .vcn-carousel-tabs button{flex:0 0 110px;min-height:70px}
  .vcn-hero-ad .vcn-carousel-arrows{display:flex;justify-content:flex-end;height:48px;border-left:0;border-top:1px solid #cfd7d1}
  .vcn-hero-ad .vcn-carousel-arrows button{width:54px}
}

/* Homepage identity + direct microgrid power path (v15). */
.vcn-hero-toolbar {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  padding: 10px 0 0;
}
.vcn-hero-overview {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr);
  align-items: center;
  gap: clamp(42px, 5vw, 86px);
  min-height: 690px;
  padding: 28px 0 78px;
}
.vcn-identity-copy { min-width: 0; }
.vcn-experience-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  margin: 0 0 38px;
  padding: 13px 19px;
  border: 1px solid rgba(202, 165, 116, .46);
  border-radius: 999px;
  color: #8b6546;
  background: rgba(255, 255, 255, .2);
  font: 600 11px/1.35 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vcn-experience-badge span {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #bd8050;
  box-shadow: 0 0 0 6px rgba(189, 128, 80, .11);
}
.vcn-hero-overview h1 {
  max-width: 760px;
  margin: 0 0 26px;
  color: #102f40;
  font-size: clamp(52px, 5.4vw, 86px);
  font-weight: 700;
  line-height: 1.01;
  letter-spacing: -.067em;
}
.vcn-hero-overview .vcn-hero-lead {
  max-width: 720px;
  margin: 0 0 34px;
  color: #596f73;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.68;
}
.vcn-hero-overview .vcn-actions { gap: 12px; }
.vcn-hero-overview .vcn-button { min-width: 175px; }
.vcn-identity-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 58px;
  padding-top: 24px;
  border-top: 1px solid rgba(72, 92, 94, .24);
}
.vcn-identity-metrics div { min-width: 0; }
.vcn-identity-metrics strong {
  display: block;
  color: #163748;
  font: 700 clamp(20px, 2.05vw, 31px)/1.08 var(--font-display);
  letter-spacing: -.045em;
  white-space: nowrap;
}
.vcn-identity-metrics span {
  display: block;
  margin-top: 8px;
  color: #758587;
  font: 500 11px/1.35 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.vcn-flow-board {
  position: relative;
  min-width: 0;
  padding: clamp(18px, 2.2vw, 30px);
  overflow: hidden;
  border: 1px solid rgba(39, 72, 78, .13);
  border-radius: 34px 7px 34px 7px;
  background:
    linear-gradient(rgba(27, 88, 93, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 88, 93, .055) 1px, transparent 1px),
    radial-gradient(circle at 30% 18%, rgba(57, 183, 169, .2), transparent 31%),
    radial-gradient(circle at 80% 72%, rgba(71, 119, 190, .18), transparent 36%),
    #f1f4f1;
  background-size: 44px 44px, 44px 44px, auto, auto, auto;
  box-shadow: 0 30px 70px rgba(13, 33, 38, .2);
}
.vcn-flow-board::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(29, 79, 84, .1);
  border-radius: 24px 4px 24px 4px;
  pointer-events: none;
}
.vcn-flow-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 4px 19px;
  color: #597176;
  font: 650 10px/1.3 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.vcn-flow-head b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #163b48;
  font-weight: 650;
}
.vcn-flow-head b i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0a9c8d;
  box-shadow: 0 0 0 5px rgba(10, 156, 141, .1);
  animation: vcn-flow-pulse 1.8s ease-in-out infinite;
}
.vcn-flow-map {
  position: relative;
  z-index: 2;
  aspect-ratio: 760 / 400;
  min-height: 330px;
}
.vcn-flow-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.vcn-flow-lines path {
  fill: none;
  stroke: #119b8d;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 10 12;
  marker-end: url(#vcn-flow-arrow);
  animation: vcn-flow-run 1.25s linear infinite;
}
.vcn-flow-lines path:nth-of-type(2),
.vcn-flow-lines path:nth-of-type(5) { animation-direction: reverse; }
.vcn-flow-lines marker path { fill: #119b8d; stroke: none; animation: none; }
.vcn-flow-node,
.vcn-flow-core {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(34, 73, 80, .17);
  color: #173747;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 28px rgba(29, 54, 59, .09);
  backdrop-filter: blur(8px);
}
.vcn-flow-node {
  left: 1%;
  width: 22%;
  min-height: 21%;
  padding: 10px 12px 10px 46px;
  border-radius: 14px 3px 14px 3px;
}
.vcn-flow-node strong { font-size: clamp(10px, .95vw, 13px); line-height: 1.2; letter-spacing: .02em; }
.vcn-flow-node strong,
.vcn-flow-node small { min-width: 0; overflow-wrap: break-word; word-break: normal; }
.vcn-flow-node small { margin-top: 5px; color: #728287; font-size: clamp(8px, .76vw, 10px); line-height: 1.25; }
.vcn-flow-icon {
  position: absolute;
  left: 10px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #087f75;
  background: #dcefeb;
  font: 700 8px/1 var(--font-mono);
  letter-spacing: -.02em;
}
.vcn-flow-pv { top: 7%; }
.vcn-flow-battery { top: 39.5%; }
.vcn-flow-source { top: 72%; }
.vcn-flow-core {
  left: 38%;
  top: 24%;
  width: 25%;
  min-height: 52%;
  align-items: center;
  padding: 24px 18px;
  border: 1px solid rgba(16, 130, 119, .35);
  border-radius: 22px 5px 22px 5px;
  text-align: center;
  background: linear-gradient(155deg, rgba(255,255,255,.96), rgba(223,239,236,.92));
  box-shadow: 0 22px 42px rgba(27, 82, 82, .16);
}
.vcn-flow-core > span { color: #0c8b80; font: 700 9px/1.2 var(--font-mono); letter-spacing: .13em; }
.vcn-flow-core strong { max-width: 150px; margin: 13px 0 10px; color: #113541; font-size: clamp(14px, 1.35vw, 20px); line-height: 1.15; }
.vcn-flow-core small { max-width: 160px; color: #6c7d80; font-size: clamp(8px, .78vw, 10px); line-height: 1.4; }
.vcn-flow-core i {
  width: 34px;
  height: 4px;
  margin-top: 18px;
  border-radius: 99px;
  background: linear-gradient(90deg, #0b9588 0 42%, #b9d7d2 42% 58%, #0b9588 58%);
  background-size: 220% 100%;
  animation: vcn-core-scan 1.7s linear infinite;
}
.vcn-flow-load,
.vcn-flow-grid { left: 76%; width: 23%; }
.vcn-flow-load { top: 20%; }
.vcn-flow-grid { top: 62%; }
.vcn-product-showcase {
  position: relative;
  z-index: 2;
  padding-top: 48px;
  border-top: 1px solid rgba(77, 97, 96, .2);
}
.vcn-product-showcase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.vcn-product-showcase-head .vcn-kicker { margin: 0; }
.vcn-home .vcn-home-title { max-width: 18ch; margin: 0 0 28px; color: var(--text); font-size: clamp(34px, 4.2vw, 62px); line-height: 1.04; letter-spacing: -.055em; }
[data-home-style="obsidian"] .vcn-product-showcase .vcn-home-title { color: #f4efe3; }
[data-home-style="arctic"] .vcn-product-showcase .vcn-home-title { color: #113f4b; }
[data-home-style="editorial"] .vcn-product-showcase .vcn-home-title { color: #173848; }
.vcn-range-links { display: flex; align-items: center; justify-content: flex-end; gap: 24px; flex-wrap: wrap; }
.vcn-home .vcn-catalog-entry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid #1b7971;
  border-radius: 2px 14px 2px 2px;
  color: #164c4b;
  background: rgba(255,255,255,.72);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.vcn-home .vcn-catalog-entry span { color: #168d80; }
.vcn-home .vcn-catalog-entry:hover { color: #fff; background: #087f76; border-color: #087f76; transform: translateY(-1px); }
.vcn-home .vcn-catalog-entry:hover span { color: #fff; }

[data-home-style="obsidian"] .vcn-hero-overview h1 { color: #f4efe3; }
[data-home-style="obsidian"] .vcn-hero-overview .vcn-hero-lead { color: #b8c0bd; }
[data-home-style="obsidian"] .vcn-experience-badge { color: #e0b788; border-color: rgba(210,166,119,.52); background: rgba(255,255,255,.025); }
[data-home-style="obsidian"] .vcn-experience-badge span { background: #d2a677; box-shadow: 0 0 0 6px rgba(210,166,119,.1); }
[data-home-style="obsidian"] .vcn-identity-metrics { border-color: rgba(229,222,205,.18); }
[data-home-style="obsidian"] .vcn-identity-metrics strong { color: #f1eadc; }
[data-home-style="obsidian"] .vcn-identity-metrics span { color: #a9b3ae; }
[data-home-style="obsidian"] .vcn-hero-overview .vcn-button-outline { color: #f1eadc; border-color: #67706b; }
[data-home-style="obsidian"] .vcn-hero-overview .vcn-button-outline:hover { color: #282b29; background: #e7dfd0; }
[data-home-style="obsidian"] .vcn-product-showcase { border-color: rgba(229,222,205,.16); }
[data-home-style="obsidian"] .vcn-product-showcase-head .vcn-catalog-entry { color: #f3e6d5; background: rgba(255,255,255,.035); border-color: #a87b59; }
[data-home-style="obsidian"] .vcn-product-showcase-head .vcn-catalog-entry span { color: #e0b788; }
[data-home-style="obsidian"] .vcn-product-showcase-head .vcn-catalog-entry:hover { color: #241c15; background: #e0b788; border-color: #e0b788; }
[data-home-style="obsidian"] .vcn-product-showcase-head .vcn-catalog-entry:hover span { color: #241c15; }
[data-home-style="arctic"] .vcn-hero-overview h1 { color: #113f4b; }
[data-home-style="arctic"] .vcn-hero-overview .vcn-hero-lead { color: #587176; }
[data-home-style="arctic"] .vcn-experience-badge { color: #155f69; border-color: rgba(41,132,141,.4); }
[data-home-style="arctic"] .vcn-experience-badge span { background: #1f8c8f; box-shadow: 0 0 0 6px rgba(31,140,143,.1); }

@keyframes vcn-flow-run { to { stroke-dashoffset: -44; } }
@keyframes vcn-flow-pulse { 50% { opacity: .45; transform: scale(.78); } }
@keyframes vcn-core-scan { to { background-position: -220% 0; } }

@media (max-width: 1120px) {
  .vcn-hero-overview { grid-template-columns: 1fr; min-height: 0; gap: 58px; padding-bottom: 72px; }
  .vcn-identity-copy { max-width: 860px; }
  .vcn-flow-board { width: min(100%, 820px); margin-inline: auto; }
  .vcn-hero-overview h1 { max-width: 880px; }
}
@media (max-width: 680px) {
  .vcn-hero-toolbar { justify-content: flex-start; padding-top: 4px; }
  .vcn-hero-toolbar .vcn-style-switch { width: 100%; }
  .vcn-hero-overview { gap: 42px; padding: 35px 0 58px; }
  .vcn-experience-badge { margin-bottom: 28px; padding: 11px 14px; font-size: 9px; letter-spacing: .08em; }
  .vcn-hero-overview h1 { font-size: clamp(43px, 12vw, 58px); }
  .vcn-hero-overview .vcn-hero-lead { font-size: 15px; }
  .vcn-hero-overview .vcn-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .vcn-hero-overview .vcn-button { min-width: 0; padding-inline: 12px; font-size: 13px; }
  .vcn-identity-metrics { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; margin-top: 42px; }
  .vcn-identity-metrics strong { font-size: 25px; }
  .vcn-flow-board { padding: 18px; border-radius: 24px 5px 24px 5px; }
  .vcn-flow-board::after { inset: 8px; border-radius: 18px 3px 18px 3px; }
  .vcn-flow-head { align-items: flex-start; flex-direction: column; gap: 8px; padding: 2px 2px 17px; }
  .vcn-flow-map { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; aspect-ratio: auto; min-height: 0; }
  .vcn-flow-lines { display: none; }
  .vcn-flow-node,.vcn-flow-core { position: relative; inset: auto; width: auto; min-height: 82px; }
  .vcn-flow-source,.vcn-flow-core { grid-column: 1 / -1; }
  .vcn-flow-core { min-height: 155px; }
  .vcn-flow-load,.vcn-flow-grid { left: auto; }
  .vcn-flow-node strong { font-size: 10px; }
  .vcn-flow-node small { font-size: 8px; }
  .vcn-product-showcase { padding-top: 36px; }
  .vcn-product-showcase-head { align-items: flex-start; flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .vcn-flow-lines path,.vcn-flow-head b i,.vcn-flow-core i { animation: none; }
}

/* Product-first homepage + operating-mode energy flow (v16) */
.vcn-hero-ad .vcn-product-showcase {
  padding-top: 28px;
  border-top: 0;
}
.vcn-microgrid-section {
  margin-top: clamp(70px, 8vw, 120px);
  padding-top: clamp(64px, 7vw, 104px);
  border-top: 1px solid rgba(77, 97, 96, .22);
}
.vcn-flow-board { padding-bottom: clamp(20px, 2.4vw, 32px); }
.vcn-flow-modes {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}
.vcn-flow-modes button {
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid rgba(32, 76, 81, .16);
  border-radius: 8px 2px 8px 2px;
  color: #597176;
  background: rgba(255, 255, 255, .48);
  font: 650 9px/1.25 var(--font-mono);
  letter-spacing: .035em;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.vcn-flow-modes button[aria-pressed="true"] {
  color: #fff;
  border-color: #0b8e83;
  background: #0b8e83;
}
.vcn-flow-caption {
  position: relative;
  z-index: 3;
  min-height: 38px;
  margin: 0 0 10px;
  padding: 9px 12px;
  border-left: 3px solid #0b9689;
  color: #526d71;
  background: rgba(255,255,255,.45);
  font-size: 11px;
  line-height: 1.5;
}
.vcn-flow-map {
  aspect-ratio: 880 / 460;
  min-height: 350px;
}
.vcn-flow-lines path {
  marker-end: none;
  opacity: .13;
  stroke: #119b8d;
  stroke-width: 4;
  stroke-dasharray: 8 15;
  animation-duration: 1.05s;
  transition: opacity .35s ease, stroke-width .35s ease;
}
.vcn-flow-lines path:nth-of-type(2),
.vcn-flow-lines path:nth-of-type(5) { animation-direction: normal; }
.vcn-flow-board[data-flow-mode="solar"] .flow-path-pv,
.vcn-flow-board[data-flow-mode="solar"] .flow-path-battery,
.vcn-flow-board[data-flow-mode="solar"] .flow-path-grid,
.vcn-flow-board[data-flow-mode="solar"] .flow-path-load,
.vcn-flow-board[data-flow-mode="battery"] .flow-path-battery,
.vcn-flow-board[data-flow-mode="battery"] .flow-path-load,
.vcn-flow-board[data-flow-mode="grid"] .flow-path-grid,
.vcn-flow-board[data-flow-mode="grid"] .flow-path-battery,
.vcn-flow-board[data-flow-mode="grid"] .flow-path-load,
.vcn-flow-board[data-flow-mode="diesel"] .flow-path-diesel,
.vcn-flow-board[data-flow-mode="diesel"] .flow-path-battery,
.vcn-flow-board[data-flow-mode="diesel"] .flow-path-load {
  opacity: 1;
  stroke-width: 5;
}
/* Reverse the bidirectional paths when energy moves toward the battery or from the grid. */
.vcn-flow-board[data-flow-mode="solar"] .flow-path-battery,
.vcn-flow-board[data-flow-mode="grid"] .flow-path-battery,
.vcn-flow-board[data-flow-mode="diesel"] .flow-path-battery,
.vcn-flow-board[data-flow-mode="grid"] .flow-path-grid { animation-direction: reverse; }
.vcn-flow-node { opacity: .48; transition: opacity .35s ease, transform .35s ease, box-shadow .35s ease; }
.vcn-flow-board[data-flow-mode="solar"] .vcn-flow-pv,
.vcn-flow-board[data-flow-mode="solar"] .vcn-flow-battery,
.vcn-flow-board[data-flow-mode="solar"] .vcn-flow-grid,
.vcn-flow-board[data-flow-mode="solar"] .vcn-flow-load,
.vcn-flow-board[data-flow-mode="battery"] .vcn-flow-battery,
.vcn-flow-board[data-flow-mode="battery"] .vcn-flow-load,
.vcn-flow-board[data-flow-mode="grid"] .vcn-flow-grid,
.vcn-flow-board[data-flow-mode="grid"] .vcn-flow-battery,
.vcn-flow-board[data-flow-mode="grid"] .vcn-flow-load,
.vcn-flow-board[data-flow-mode="diesel"] .vcn-flow-diesel,
.vcn-flow-board[data-flow-mode="diesel"] .vcn-flow-battery,
.vcn-flow-board[data-flow-mode="diesel"] .vcn-flow-load {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 124, 115, .14);
}
.vcn-flow-pv { top: 3%; }
.vcn-flow-battery { top: 39%; }
.vcn-flow-diesel { top: 75%; }
.vcn-flow-core {
  left: 35%;
  top: 18%;
  width: 30%;
  min-height: 64%;
}
.vcn-flow-load,
.vcn-flow-grid {
  right: 2%;
  left: auto;
  width: 30%;
  min-width: 0;
  max-width: 30%;
  overflow: hidden;
  box-sizing: border-box;
}
.vcn-flow-load strong,
.vcn-flow-grid strong { overflow-wrap: normal; word-break: normal; }
.vcn-flow-grid { top: 12%; }
.vcn-flow-load { top: 65%; }
[data-home-style="obsidian"] .vcn-microgrid-section { border-color: rgba(229,222,205,.18); }

@media (max-width: 1120px) {
  .vcn-microgrid-section { margin-top: 78px; padding-top: 72px; }
}
@media (max-width: 680px) {
  .vcn-hero-ad .vcn-product-showcase { padding-top: 20px; }
  .vcn-microgrid-section { margin-top: 64px; padding-top: 58px; }
  .vcn-flow-modes { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vcn-flow-modes button { min-height: 40px; font-size: 8px; }
  .vcn-flow-caption { min-height: 54px; font-size: 10px; }
  .vcn-flow-map {
    width: 100%;
    min-height: 0;
    aspect-ratio: auto;
    grid-template-areas: "pv battery" "diesel grid" "core core" "load load";
  }
  .vcn-flow-map .vcn-flow-node,
  .vcn-flow-map .vcn-flow-core {
    position: relative;
    inset: auto;
    left: auto;
    top: auto;
    width: auto;
    max-width: none;
    transform: none;
  }
  .vcn-flow-pv { grid-area: pv; }
  .vcn-flow-battery { grid-area: battery; }
  .vcn-flow-diesel { grid-area: diesel; }
  .vcn-flow-grid { grid-area: grid; }
  .vcn-flow-core { grid-area: core; }
  .vcn-flow-load { grid-area: load; }
  .vcn-flow-diesel,.vcn-flow-grid,.vcn-flow-pv,.vcn-flow-battery { grid-column: auto; }
  .vcn-flow-core,.vcn-flow-load { grid-column: 1 / -1; }
  .vcn-flow-core { min-height: 150px; }
  .vcn-flow-load { min-height: 78px; }
}

/* Give the complete flow diagram a full-width stage on desktop. The former
   two-column hero squeezed the AC selector group beyond the visible canvas. */
@media (min-width: 1121px) {
  .vcn-hero-overview {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
    min-height: 0;
    padding-top: 46px;
  }
  .vcn-identity-copy { max-width: 920px; }
  .vcn-hero-overview > .vcn-flow-board { width: 100%; }
  .vcn-hero-overview .vcn-flow-map { min-height: 460px; }
}

/* Reference-style equipment pictograms (v20) */
.vcn-flow-node { padding-left: 66px; }
.vcn-flow-icon {
  left: 12px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(23, 105, 133, .14);
  border-radius: 11px 3px 11px 3px;
  color: #236f8f;
  background: linear-gradient(145deg, #f7fbfb, #dcefeb);
  transition: color .35s ease, background .35s ease, border-color .35s ease;
}
.vcn-flow-icon svg,
.vcn-core-brand svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vcn-flow-icon svg .vcn-icon-fill { fill: currentColor; stroke: none; opacity: .72; }
.vcn-flow-board[data-flow-mode="solar"] .vcn-flow-pv .vcn-flow-icon,
.vcn-flow-board[data-flow-mode="solar"] .vcn-flow-battery .vcn-flow-icon,
.vcn-flow-board[data-flow-mode="solar"] .vcn-flow-grid .vcn-flow-icon,
.vcn-flow-board[data-flow-mode="solar"] .vcn-flow-load .vcn-flow-icon,
.vcn-flow-board[data-flow-mode="battery"] .vcn-flow-battery .vcn-flow-icon,
.vcn-flow-board[data-flow-mode="battery"] .vcn-flow-load .vcn-flow-icon,
.vcn-flow-board[data-flow-mode="grid"] .vcn-flow-grid .vcn-flow-icon,
.vcn-flow-board[data-flow-mode="grid"] .vcn-flow-battery .vcn-flow-icon,
.vcn-flow-board[data-flow-mode="grid"] .vcn-flow-load .vcn-flow-icon,
.vcn-flow-board[data-flow-mode="diesel"] .vcn-flow-diesel .vcn-flow-icon,
.vcn-flow-board[data-flow-mode="diesel"] .vcn-flow-battery .vcn-flow-icon,
.vcn-flow-board[data-flow-mode="diesel"] .vcn-flow-load .vcn-flow-icon {
  color: #078c81;
  border-color: rgba(7, 140, 129, .24);
  background: linear-gradient(145deg, #f4fbf9, #cfece6);
}
.vcn-flow-core .vcn-core-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.vcn-core-brand svg {
  width: 48px;
  height: 48px;
  color: #18748c;
  stroke-width: 1.8;
}
.vcn-flow-core strong { margin-top: 10px; }

/* AC/DC electrical language (v24)
   DC remains blue from PV/battery to the converter; AC is orange from the
   converter to generator, grid and loads. The same mapping stays visible on
   mobile, where the animated SVG lines are intentionally hidden. */
.vcn-flow-board {
  --flow-dc: #157fbd;
  --flow-dc-soft: rgba(21,127,189,.12);
  --flow-ac: #d9692f;
  --flow-ac-soft: rgba(217,105,47,.13);
}
.vcn-flow-head-tools,
.vcn-flow-legend,
.vcn-flow-legend span { display: flex; align-items: center; }
.vcn-flow-head-tools { justify-content: flex-end; gap: 18px; }
.vcn-flow-legend { gap: 7px; letter-spacing: .04em; text-transform: none; }
.vcn-flow-legend span {
  gap: 6px; min-height: 25px; padding: 4px 8px; border: 1px solid currentColor;
  border-radius: 999px; background: rgba(255,255,255,.56); font-size: 8px; white-space: nowrap;
}
.vcn-flow-legend span > i { width: 16px; height: 3px; border-radius: 999px; background: currentColor; }
.vcn-flow-legend .is-dc { color: var(--flow-dc); }
.vcn-flow-legend .is-ac { color: var(--flow-ac); }
.vcn-flow-lines .flow-path-pv,
.vcn-flow-lines .flow-path-battery { stroke: var(--flow-dc); }
.vcn-flow-lines .flow-path-diesel,
.vcn-flow-lines .flow-path-grid,
.vcn-flow-lines .flow-path-load { stroke: var(--flow-ac); }
.vcn-flow-pv .vcn-flow-icon,
.vcn-flow-battery .vcn-flow-icon {
  color: var(--flow-dc);
  border-color: rgba(21,127,189,.28);
  background: linear-gradient(145deg, #f6fbfe, #d9edf8);
}
.vcn-flow-diesel .vcn-flow-icon,
.vcn-flow-grid .vcn-flow-icon,
.vcn-flow-load .vcn-flow-icon {
  color: var(--flow-ac);
  border-color: rgba(217,105,47,.28);
  background: linear-gradient(145deg, #fffaf6, #f7e4d9);
}
/* Mode-active icon rules above use teal for emphasis; keep the electrical
   type color authoritative so the meaning never changes between modes. */
.vcn-flow-board[data-flow-mode] .vcn-flow-pv .vcn-flow-icon,
.vcn-flow-board[data-flow-mode] .vcn-flow-battery .vcn-flow-icon { color: var(--flow-dc); border-color: rgba(21,127,189,.3); background: linear-gradient(145deg,#f6fbfe,#d9edf8); }
.vcn-flow-board[data-flow-mode] .vcn-flow-diesel .vcn-flow-icon,
.vcn-flow-board[data-flow-mode] .vcn-flow-grid .vcn-flow-icon,
.vcn-flow-board[data-flow-mode] .vcn-flow-load .vcn-flow-icon { color: var(--flow-ac); border-color: rgba(217,105,47,.3); background: linear-gradient(145deg,#fffaf6,#f7e4d9); }
.vcn-flow-core {
  border-color: transparent;
  background:
    linear-gradient(rgba(255,255,255,.9), rgba(242,250,249,.88)) padding-box,
    linear-gradient(180deg, var(--flow-dc) 0 48%, var(--flow-ac) 52% 100%) border-box;
}
.vcn-flow-core small {
  padding: 5px 9px; border-radius: 999px;
  background: linear-gradient(90deg, var(--flow-dc-soft) 0 49%, var(--flow-ac-soft) 51% 100%);
}

@media (max-width: 680px) {
  .vcn-flow-head-tools { width: 100%; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .vcn-flow-legend { order: 2; }
  .vcn-flow-legend span { padding-inline: 7px; font-size: 7px; }
  .vcn-flow-node { padding-left: 57px; }
  .vcn-flow-icon { left: 9px; width: 38px; height: 38px; }
  .vcn-flow-icon svg { width: 30px; height: 30px; }
  .vcn-core-brand svg { width: 42px; height: 42px; }
}

/* ATS source selection + live PCS power (v26). Grid and generator are two
   mutually exclusive AC inputs. Their paths meet at the ATS before the PCS. */
.vcn-flow-lines .flow-path-ats { stroke: var(--flow-ac); }
.vcn-flow-board[data-flow-mode="solar"] .flow-path-ats,
.vcn-flow-board[data-flow-mode="grid"] .flow-path-ats,
.vcn-flow-board[data-flow-mode="diesel"] .flow-path-ats { opacity: 1; stroke-width: 5; }
.vcn-flow-board[data-flow-mode="solar"] .flow-path-grid,
.vcn-flow-board[data-flow-mode="solar"] .flow-path-ats { animation-direction: reverse; }
.vcn-flow-board[data-flow-mode="grid"] .flow-path-grid,
.vcn-flow-board[data-flow-mode="grid"] .flow-path-ats,
.vcn-flow-board[data-flow-mode="diesel"] .flow-path-diesel,
.vcn-flow-board[data-flow-mode="diesel"] .flow-path-ats { animation-direction: normal; }

.vcn-flow-pv { top: 5%; }
.vcn-flow-battery { top: 55%; }
.vcn-flow-grid,
.vcn-flow-diesel {
  right: 1%;
  left: auto;
  width: 23%;
  max-width: 23%;
  min-height: 21%;
  overflow: hidden;
  box-sizing: border-box;
}
.vcn-flow-grid { top: 2%; }
.vcn-flow-diesel { top: 69%; }
.vcn-flow-load {
  top: 82%;
  right: auto;
  left: 38%;
  width: 24%;
  max-width: 24%;
  min-height: 17%;
  overflow: hidden;
  box-sizing: border-box;
}
.vcn-flow-ats {
  top: 38%;
  right: 24.5%;
  left: auto;
  width: 11%;
  min-height: 24%;
  padding: 10px 7px;
  align-items: center;
  text-align: center;
  border-color: rgba(217,105,47,.28);
  color: #8b4523;
  background: rgba(255,248,242,.9);
}
.vcn-flow-ats .vcn-flow-icon {
  position: relative;
  left: auto;
  width: 38px;
  height: 30px;
  margin-bottom: 6px;
  color: var(--flow-ac);
  border-color: rgba(217,105,47,.3);
  background: linear-gradient(145deg,#fffaf6,#f7e4d9);
}
.vcn-flow-ats strong { font-size: 9px; }
.vcn-flow-ats small { font-size: 7px; }
.vcn-flow-board[data-flow-mode="solar"] .vcn-flow-ats,
.vcn-flow-board[data-flow-mode="grid"] .vcn-flow-ats,
.vcn-flow-board[data-flow-mode="diesel"] .vcn-flow-ats {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(217,105,47,.13);
}
.vcn-flow-core {
  left: 34%;
  top: 15%;
  width: 31%;
  min-height: 64%;
  padding: 16px 14px;
}
.vcn-flow-core > strong { max-width: 170px; margin: 7px 0 6px; }
.vcn-flow-core > small { max-width: 180px; }
.vcn-flow-core > i { margin-top: 8px; }
.vcn-flow-power {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  gap: 1px 8px;
  min-width: 142px;
  margin-top: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(20,76,88,.14);
  border-radius: 10px 2px 10px 2px;
  color: var(--flow-ac);
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 1px rgba(255,255,255,.7);
}
.vcn-flow-power[data-direction="discharge"] { color: var(--flow-dc); }
.vcn-flow-power strong {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin: 0;
  color: currentColor;
  font: 750 18px/1 var(--font-mono);
  letter-spacing: -.035em;
}
.vcn-flow-power strong em { font: 650 8px/1 var(--font-mono); letter-spacing: .04em; }
.vcn-flow-power-state {
  padding: 0;
  color: currentColor;
  background: none;
  font: 700 8px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vcn-flow-power b {
  grid-column: 1 / -1;
  color: #6e7f83;
  font: 550 7px/1.25 var(--font-mono);
  letter-spacing: .04em;
}

@media (max-width: 680px) {
  .vcn-flow-map {
    grid-template-areas:
      "pv battery"
      "grid diesel"
      "ats ats"
      "core core"
      "load load";
  }
  .vcn-flow-pv { grid-area: pv; }
  .vcn-flow-battery { grid-area: battery; }
  .vcn-flow-grid { grid-area: grid; }
  .vcn-flow-diesel { grid-area: diesel; }
  .vcn-flow-ats { grid-area: ats; }
  .vcn-flow-core { grid-area: core; }
  .vcn-flow-load { grid-area: load; }
  .vcn-flow-map .vcn-flow-ats {
    flex-direction: row;
    gap: 8px;
    min-height: 68px;
    padding: 10px 12px;
  }
  .vcn-flow-ats .vcn-flow-icon { margin: 0; flex: 0 0 38px; }
  .vcn-flow-ats small { margin: 0 0 0 auto; font-size: 8px; }
  .vcn-flow-core { min-height: 210px; }
  .vcn-flow-power { min-width: 160px; }
}

/* Microgrid map layout: DC sources enter from the left; the AC-side devices
   share a compact selector group on the right, with loads shown downstream. */
.vcn-flow-map { overflow: hidden; }
.vcn-flow-pv,
.vcn-flow-battery { left: 1%; width: 22%; max-width: 22%; box-sizing: border-box; }
.vcn-flow-pv { top: 7%; }
.vcn-flow-battery { top: 62%; }
.vcn-flow-core { left: 32%; top: 19%; width: 34%; min-height: 60%; box-sizing: border-box; }
.vcn-flow-grid,
.vcn-flow-diesel {
  top: 4%;
  right: auto;
  width: 14.5%;
  max-width: 14.5%;
  min-height: 17%;
  padding: 8px 7px 8px 42px;
  border-radius: 10px 3px 10px 3px;
  box-sizing: border-box;
}
.vcn-flow-grid { left: 68%; }
.vcn-flow-diesel { left: 83.5%; }
.vcn-flow-grid .vcn-flow-icon,
.vcn-flow-diesel .vcn-flow-icon { left: 7px; width: 28px; height: 28px; }
.vcn-flow-grid strong,
.vcn-flow-diesel strong { font-size: clamp(8px, .78vw, 10px); }
.vcn-flow-grid small,
.vcn-flow-diesel small { font-size: clamp(7px, .65vw, 9px); }
.vcn-flow-ats {
  top: 38%;
  right: 1%;
  left: auto;
  width: 22%;
  min-height: 16%;
  padding: 9px 12px;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  text-align: left;
  box-sizing: border-box;
}
.vcn-flow-ats .vcn-flow-icon { flex: 0 0 38px; width: 38px; height: 30px; margin: 0; }
.vcn-flow-ats strong { font-size: 10px; }
.vcn-flow-ats small { margin: 3px 0 0; font-size: 8px; }
.vcn-flow-load {
  top: 70%;
  right: 1%;
  left: auto;
  width: 29%;
  max-width: 29%;
  min-height: 18%;
  padding: 10px 12px 10px 62px;
  box-sizing: border-box;
}
.vcn-flow-load .vcn-flow-icon { left: 10px; width: 40px; height: 40px; }

@media (max-width: 680px) {
  .vcn-flow-map { overflow: visible; }
  .vcn-flow-pv,
  .vcn-flow-battery,
  .vcn-flow-grid,
  .vcn-flow-diesel,
  .vcn-flow-load { width: auto; max-width: none; min-height: 82px; padding: 10px 10px 10px 57px; }
  .vcn-flow-pv,.vcn-flow-battery,.vcn-flow-grid,.vcn-flow-diesel { left: auto; }
  .vcn-flow-ats { width: auto; min-height: 68px; padding: 10px 12px; }
  .vcn-flow-load { min-height: 78px; }
}