/* =====================================================================================================
   Epro.io prototype - "HPE colours"  (linked LAST in <head> of every copied page by build.py)
   Layout, components, type and texts are the live site's; only colour changes.

   Palette (measured on hpe.com, HPE Web Design Tokens):
     brand green #01A982 · green strong #068667 · green text on light #006750 (hover #074738)
     bright green on dark #05CC93 · mint on dark #00E0AF
     light: bg #FFFFFF · card #F7F7F7 · sunken #E6E8E9 · headings #292D3A · body #3E4550 · weak #606A70
            hairline #D4D8DB · border #B1B9BE
     dark:  bg #1D1F27 · card #292D3A · sunken #22252E · headings #FFFFFF · body #E6E8E9 · weak #B1B9BE
            hairline rgba(255,255,255,.12) · border rgba(255,255,255,.36)
     status: critical #CC1F1A (dark #FC6161) · OK #009A71

   Filled-element policy (HPE uses almost no green fills):
     * PRIMARY actions = monochrome, like hpe.com: slate #292D3A + white text on light (13.6:1),
       white + slate text on dark (13.6:1). Hover: #535C66 / #D4D8DB. ONE per group: the featured
       VPS card, the featured product card, the featured plan row, hero/CTA primaries.
     * SECONDARY / outline actions (every other card, row and "secondary" button, site-wide, one
       recipe) = transparent, 3px green outline (1px border + 2px inset ring; #01A982 light,
       #00E0AF dark) + slate/white text. Hover = HPE colour swap of the outline (#006750 / #05CC93).
     * "Popular / featured" markers (VPS featured frame + band, POPULAR badges, save chips on toggles,
       ::selection, theme switch ON, social-icon hover) = HPE brand green #01A982 fill with INK text
       #1D1F27 (5.5:1). White on #01A982 would be 3.0:1, so white is never used on green.
     * Green as text = #006750 on light (6.9:1 on white), #05CC93 on dark (7.9:1 on #1D1F27).
   Kept as-is on purpose: logo PNGs, the multicolour Google wordmark (inline colours), the green
   Trustpilot star (inline #00B67A), amber rating stars (--warn #FFAA00), WhatsApp green (third-party
   brand marks keep their brand colours, same as Google / Trustpilot).
   Amber as TEXT in the light theme uses --hpe-warn-text #9A5000 (HPE warning hue #D36D00, darkened to
   6.0:1 on white); #FFAA00 is only 1.9:1 there. Dark keeps #FFAA00 (8.6:1).
   ===================================================================================================== */

/* ---------- 1. Tokens: light (default) -------------------------------------------------------------- */
:root{
  /* HPE raw palette, for the component rules below */
  --hpe-green:#01A982; --hpe-green-strong:#068667; --hpe-green-text:#006750; --hpe-green-text-hover:#074738;
  --hpe-green-bright:#05CC93; --hpe-mint:#00E0AF;
  --hpe-ink:#1D1F27; --hpe-slate:#292D3A; --hpe-slate-2:#535C66;
  /* role tokens (switch per theme) */
  --hpe-btn-bg:#292D3A; --hpe-btn-fg:#FFFFFF; --hpe-btn-bg-hover:#535C66;
  --hpe-btn2-line:#01A982; --hpe-btn2-fg:#292D3A; --hpe-btn2-line-hover:#006750;
  --hpe-fill:#01A982; --hpe-on-fill:#1D1F27;
  --hpe-link:#006750; --hpe-link-hover:#074738;
  --hpe-sel-line:#068667;   /* selected segment ring (HPE border-selected; #01A982 is only 2.8:1 on #F7F7F7) */
  --hpe-warn-text:#9A5000;  /* amber TEXT on light: HPE warning hue, 6.0:1 on white / 5.6:1 on #F7F7F7 */
  --hpe-field-line:#7D8A92; /* form-field border (HPE grey 500): 3.3:1 on #F7F7F7 (WCAG 1.4.11) */

  /* VTRON + legacy token names, remapped */
  --acc:#01A982; --acc2:#05CC93;
  --acc-gradient:linear-gradient(100deg,#068667,#006750);
  --brand-green:#006750;    /* stat marks: HPE green text (6.9:1); #068667 was 4.35:1 on the tinted strip at 390 */
  --glow:rgba(1,169,130,.32);
  --glow-cta:0 14px 36px -14px rgba(41,45,58,.45);
  --accent:#006750; --accent-dark:#074738; --accent-light:#006750;
  --accent-glow:rgba(1,169,130,.12); --accent-glow-strong:rgba(1,169,130,.22);
  --secondary:#006750; --secondary-dark:#074738;
  --secondary-glow:rgba(1,169,130,.10); --secondary-glow-strong:rgba(1,169,130,.20);
  --success:#009A71; --danger:#CC1F1A; --danger-glow:rgba(204,31,26,.10);
  /* --warn stays amber #FFAA00 (rating stars) */

  --bg-base:#FFFFFF; --bg-surface:#F7F7F7; --bg-surface-2:#EEF0F1; --bg-surface-3:#EEF0F1; /* #EEF0F1 = midpoint of HPE #F7F7F7/#E6E8E9 */
  --bg-lowest:#F7F7F7; --bg-highest:#E6E8E9;
  --text-primary:#292D3A; --text-secondary:#3E4550; --text-muted:#606A70;
  --text-dim:#606A70; --ink-dim:#606A70; /* HPE has one weak text tone; #7D8A92 is decorative-only (3.3:1) */
  --border-default:#D4D8DB; --border-subtle:#E6E8E9; --border-strong:#B1B9BE; --border-outline:#B1B9BE;
  --ghost:#E6F6F3; --accb:#99DDCD;
  --navbg:rgba(255,255,255,.86); --barbg:#F7F7F7; --footbg:#F7F7F7;
  --bartopA:#FFFFFF; --bartopB:#F7F7F7;
  --wash:rgba(1,169,130,.09);
  --glass-rgb:255,255,255; --glassb-rgb:255,255,255;
}

/* ---------- 2. Tokens: dark ------------------------------------------------------------------------- */
:root[data-theme="dark"]{
  --hpe-btn-bg:#FFFFFF; --hpe-btn-fg:#292D3A; --hpe-btn-bg-hover:#D4D8DB;
  --hpe-btn2-line:#00E0AF; --hpe-btn2-fg:#FFFFFF; --hpe-btn2-line-hover:#05CC93;
  --hpe-fill:#01A982; --hpe-on-fill:#1D1F27;
  --hpe-link:#05CC93; --hpe-link-hover:#00E0AF;
  --hpe-sel-line:#05CC93;
  --hpe-warn-text:#FFAA00;
  --hpe-field-line:rgba(255,255,255,.45); /* 3.5:1 against the dark card */

  --acc:#01A982; --acc2:#05CC93;
  --acc-gradient:linear-gradient(100deg,#00E0AF,#05CC93);
  --brand-green:#05CC93;
  --glow:rgba(5,204,147,.28);
  --glow-cta:0 14px 36px -14px rgba(0,0,0,.6);
  --accent:#05CC93; --accent-dark:#00E0AF; --accent-light:#05CC93;
  --accent-glow:rgba(5,204,147,.16); --accent-glow-strong:rgba(5,204,147,.26);
  --secondary:#05CC93; --secondary-dark:#00E0AF;
  --secondary-glow:rgba(5,204,147,.12); --secondary-glow-strong:rgba(5,204,147,.22);
  --success:#009A71; --danger:#FC6161; --danger-glow:rgba(252,97,97,.12);

  --bg-base:#1D1F27; --bg-surface:#292D3A; --bg-surface-2:#363B47; --bg-surface-3:#363B47; /* #363B47 = 30% step #292D3A->#535C66 */
  --bg-lowest:#16181E; --bg-highest:#3E4550;
  --text-primary:#FFFFFF; --text-secondary:#E6E8E9; --text-muted:#B1B9BE;
  --text-dim:#B1B9BE; --ink-dim:#B1B9BE;
  --border-default:rgba(255,255,255,.12); --border-subtle:rgba(255,255,255,.07);
  --border-strong:rgba(255,255,255,.24); --border-outline:rgba(255,255,255,.36);
  --ghost:#173D34; --accb:#1A5A49; /* hue 166/164 = HPE green (was #243C43/#1B5853, cyan-teal 194/175) */
  --navbg:rgba(29,31,39,.8); --barbg:#22252E; --footbg:#16181E;
  --bartopA:#292D3A; --bartopB:#22252E;
  --wash:rgba(5,204,147,.05);       /* lighter wash = less teal cast over the blue-tinted slate */
  --glass-rgb:41,45,58; --glassb-rgb:29,31,39;
}

/* ---------- 3. Primary actions: HPE monochrome ------------------------------------------------------ */
html .btn-primary:not(.btn-wa),
html .eb-cta-cabinet,
html .prow .prow-cta,
html .prow .prow-cta.prow-pre,
html .prod.feat .prod-cta,
html .vc-feat .vc-cta, html[data-theme="dark"] .vc-feat .vc-cta,
html .cmodal-act-primary,
html .cookie-banner .cb-accept,
html .fab .fab-talk,
html .fab .fab-order,
html .lp-plans .prow.feat .prow-cta{
  background:var(--hpe-btn-bg);color:var(--hpe-btn-fg);border-color:var(--hpe-btn-bg);box-shadow:none;filter:none
}
html .btn-primary:not(.btn-wa):hover,
html .eb-cta-cabinet:hover,
html .prow .prow-cta:hover,
html .prow .prow-cta.prow-pre:hover,
html .prod.feat .prod-cta:hover,
html .vc-feat .vc-cta:hover, html[data-theme="dark"] .vc-feat .vc-cta:hover,
html .cmodal-act-primary:hover,
html .cookie-banner .cb-accept:hover,
html .fab .fab-talk:hover,
html .fab .fab-order:hover,
html .lp-plans .prow .prow-cta:hover{
  background:var(--hpe-btn-bg-hover);color:var(--hpe-btn-fg)!important;border-color:var(--hpe-btn-bg-hover);
  box-shadow:none;filter:none
}
html .fab .fab-talk{box-shadow:var(--glow-cta)}

/* ---------- 4. Secondary actions: ONE HPE outline recipe, site-wide -------------------------------- */
/* transparent + 3px green outline (1px border + 2px inset ring, so no element changes size; the border-less
   .prow-cta gets the whole 3px as an inset ring) + slate/white text. Hover = HPE colour swap of the outline
   (#01A982 -> #006750 light, #00E0AF -> #05CC93 dark). Covers: non-featured VPS cards, non-featured plan
   rows (hosting / dedicated / 1C / private cloud / lp), non-featured product cards, .btn-secondary,
   "show all", "write a review", the modal's WhatsApp action and the cookie "reject" button. */
html .vc-cta, html[data-theme="dark"] .vc-cta,
html .prow:not(.feat) .prow-cta, html .prow:not(.feat) .prow-cta.prow-pre,
html .prod:not(.feat) .prod-cta,
html .btn-secondary:not(.btn-wa),
html .show-all-btn,
html .rv-write,
html .cmodal-act-wa,
html .cookie-banner .cb-reject{
  --hpe-ring:2px;
  background:transparent;color:var(--hpe-btn2-fg);border-color:var(--hpe-btn2-line);
  box-shadow:inset 0 0 0 var(--hpe-ring) var(--hpe-btn2-line);filter:none
}
html .prow:not(.feat) .prow-cta{--hpe-ring:3px}
html .vc-cta:hover, html[data-theme="dark"] .vc-cta:hover,
html .prow:not(.feat) .prow-cta:hover, html .prow:not(.feat) .prow-cta.prow-pre:hover,
html .prod:not(.feat) .prod-cta:hover,
html .btn-secondary:not(.btn-wa):hover,
html .show-all-btn:hover,
html .rv-write:hover,
html .cmodal-act-wa:hover,
html .cookie-banner .cb-reject:hover{
  background:transparent;color:var(--hpe-btn2-fg)!important;border-color:var(--hpe-btn2-line-hover);
  box-shadow:inset 0 0 0 var(--hpe-ring) var(--hpe-btn2-line-hover);filter:none
}
html .lang-trigger:hover,
html .eb-burger:hover{border-color:var(--hpe-btn2-line)}
/* hover colour for green text links that the site turned white on hover (white was invisible on light) */
html .content-block a:not(.btn-primary):not(.btn-secondary):hover,
html .cc .v a:hover, html .pt-card .pt-link:hover, html .seal .st .go:hover,
html .cookie-banner .cb-text a:hover, html .toc a:hover{color:var(--hpe-link-hover)}
/* hard-coded legacy grey captions under article diagrams (3.2:1 on white) -> HPE weak text */
html[data-theme="light"] figcaption[style*="#8e9199" i]{color:var(--text-muted)!important}

/* ---------- 4b. Accessibility: focus ring, form fields, amber text ----------------------------------- */
/* one green focus ring everywhere (HPE uses green; browsers otherwise draw their own, often blue) */
html :focus-visible{outline:2px solid var(--hpe-link);outline-offset:2px}
html .eb-promo :focus-visible, .hpe-proto-strip :focus-visible{outline-color:#05CC93} /* dark bars in both themes */
/* form fields: HPE #B1B9BE is 1.9:1 on the card -> grey 500 / 45% white (>=3:1, WCAG 1.4.11) */
html .form-field input, html .form-field textarea{border-color:var(--hpe-field-line)}
html .form-field input:focus, html .form-field textarea:focus{border-color:var(--hpe-link)}
/* amber used as TEXT (inline style="color:var(--warn)": DDoS article "FLOOD", "Without protection", the
   ✕ markers; the "Layer 4" badge on why.html): #FFAA00 is 1.9:1 on white -> darkened HPE warning */
html[data-theme="light"] [style*="color:var(--warn)"]{color:var(--hpe-warn-text)!important}
/* amber contact icons (phone, ticket) -> the same HPE green icon chip as the rest (amber was 1.8:1) */
html :is(.cc,.help-card,.req-card) .ico.amber{background:var(--ghost);color:var(--hpe-link)}
/* legal index arrows: full-strength HPE green arrow (opacity .6 gave 2.8:1 light / 3.3:1 dark) */
html .doc .arr{opacity:1}

/* ---------- 4c. Logo inside the why.html hero h1 ---------------------------------------------------- */
/* the inline logo is the white-wordmark PNG (data: URI): on the light page only the "E" showed.
   Same 500x110 artwork with the dark wordmark (also an issue on the live site since light became default) */
html[data-theme="light"] .logo-inline{content:url(logo-dark.png)}

/* ---------- 5. Selected / active states: monochrome chips ------------------------------------------- */
html .cur-toggle button.active,
html .bill-toggle button.active,
html .lp-lang a.active{background:var(--hpe-btn-bg);color:var(--hpe-btn-fg)}
html .eb-util .util-menu button.active,
html .eb-util .lang-menu a.active,
html .eb-util .lang-menu button.active,
html .lang-menu button.active, html .lang-menu a.active{background:var(--accent-glow);color:var(--hpe-link)}
/* dark: text on green washes needs mint (#05CC93 on a 16% green wash over slate is only 4.1:1) */
html[data-theme="dark"] .eb-util .util-menu button.active,
html[data-theme="dark"] .eb-util .lang-menu a.active,
html[data-theme="dark"] .eb-util .lang-menu button.active,
html[data-theme="dark"] .lang-menu button.active, html[data-theme="dark"] .lang-menu a.active{background:rgba(255,255,255,.08);color:#00E0AF}
html[data-theme="dark"] .eb-util .util-menu .sym{color:#66EBCF}
html[data-theme="dark"] .cmodal-badge{color:#00E0AF}
html .vc-pill{--vc-on-ink:#006750}
html[data-theme="dark"] .vc-pill{--vc-on:#363B47;--vc-on-ink:#05CC93}
/* selected segment (term / OS): white pill on a #F7F7F7 track was 1.07:1 -> HPE "border-selected" ring
   (#068667 light 4.3:1, #05CC93 dark 5.4:1) */
html .vc-pill button[aria-checked="true"]{border-color:var(--hpe-sel-line);box-shadow:inset 0 0 0 1px var(--hpe-sel-line)}

/* ---------- 6. Green fills (featured markers) with ink text ----------------------------------------- */
html .vc-feat{background:var(--hpe-fill);box-shadow:0 22px 50px -28px rgba(1,169,130,.55)}
html .vc-feat>.vc-band{color:var(--hpe-on-fill)}
html .prod .pop,
html .prow .pname .badge-pop,
html .bill-toggle .save,
html .bill-toggle button.active .save{background:var(--hpe-fill);color:var(--hpe-on-fill)}
html .eb-foot-social a:hover{background:var(--hpe-fill);border-color:var(--hpe-fill);color:var(--hpe-on-fill)}
::selection{background:#01A982;color:#1D1F27}
html .eb-promo{background:#1D1F27;color:#FFFFFF;box-shadow:inset 0 -2px 0 #01A982}
/* theme switch: ON (dark) = green track, ink label; OFF (light) = HPE greys */
html .eb-util .theme-switch{background:var(--hpe-fill)}
html .eb-util .theme-switch .ts-label{color:var(--hpe-on-fill)}
html .eb-util .theme-switch .ts-knob{color:#006750}
html[data-theme="light"] .eb-util .theme-switch{background:#E6E8E9;box-shadow:inset 0 0 0 1px #7D8A92} /* OFF track was 1.34:1 */
html[data-theme="light"] .eb-util .theme-switch .ts-label{color:#3E4550}
html[data-theme="light"] .eb-util .theme-switch .ts-knob{color:#606A70}

/* hero mock "onlayn": small text in brand green needs the text-strength green on light */
html .hm-row .on{color:var(--hpe-link)}

/* article SVG diagrams (hard-coded fills, drawn for dark): green labels that sit on the light page itself
   (translucent green bands, timeline years) take the text-strength green in the light theme */
html[data-theme="light"] svg rect[fill="#01A982" i][fill-opacity] + text[fill="#05CC93" i],
html[data-theme="light"] svg circle[fill="#01A982" i] ~ text[fill="#05CC93" i]{fill:#006750}
/* Diagram labels per actual ground. build.py's script tags every diagram <text> with data-hpe-bg = the
   luminance of what is painted under it (page, translucent green band, or opaque dark box), per theme.
   Labels drawn for dark that land on a LIGHT ground -> HPE light text tones; weak grey on dark boxes ->
   HPE text-weak on dark (#8e9199 was 4.35:1 on #292D3A). */
svg text[data-hpe-bg="light"][fill="#e2e2e6" i]{fill:#292D3A}
svg text[data-hpe-bg="light"][fill="#c4c6d0" i]{fill:#3E4550}
svg text[data-hpe-bg="light"][fill="#8e9199" i]{fill:#606A70}
svg text[data-hpe-bg="light"]:is([fill="#05CC93" i],[fill="#01A982" i]){fill:#006750}
svg text[data-hpe-bg="light"][fill="#fbbf24" i]{fill:#9A5000}
svg text[data-hpe-bg="dark"][fill="#8e9199" i]{fill:#B1B9BE}
/* no-JS fallback for diagrams with no box at all (the virtualization timeline): every label is on the page.
   Legacy dark-theme label colours -> HPE text tones (#c4c6d0 was 1.7:1, #8e9199 3.2:1, #fbbf24 1.7:1) */
html[data-theme="light"] svg:not(:has(rect)) text:is([fill="#01A982" i],[fill="#05CC93" i]){fill:#006750}
html[data-theme="light"] svg:not(:has(rect)) text[fill="#c4c6d0" i]{fill:#3E4550}
html[data-theme="light"] svg:not(:has(rect)) text[fill="#8e9199" i]{fill:#606A70}
html[data-theme="light"] svg:not(:has(rect)) text[fill="#fbbf24" i]{fill:var(--hpe-warn-text)}
html[data-theme="light"] svg:not(:has(rect)) circle[fill="#fbbf24" i]{fill:#D36D00} /* HPE warning */

/* ---------- 7. Save / discount chips: HPE status-OK green -------------------------------------------- */
html .vc-save, html .vc-off{--vc-ok:#006750}
html[data-theme="dark"] .vc-save, html[data-theme="dark"] .vc-off{--vc-ok:#05CC93}

/* ---------- 8. Prototype strip (normal flow at the top of <body>: scrolls away, never overlaps) ----- */
.hpe-proto-strip{position:relative;z-index:70;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.15rem .6rem;padding:6px 16px;background:#1D1F27;color:#E6E8E9;border-bottom:3px solid #01A982;
  font:500 12px/1.35 'Inter',system-ui,-apple-system,sans-serif;letter-spacing:.01em;text-align:center}
.hpe-proto-strip b{font-weight:700;letter-spacing:.08em;color:#05CC93}
.hpe-proto-sep{color:#7D8A92}
.hpe-proto-note{color:#B1B9BE}
.hpe-proto-link{color:#05CC93;text-decoration:none;font-weight:600}
.hpe-proto-link:hover{color:#00E0AF;text-decoration:underline;text-underline-offset:3px}
@media(max-width:480px){.hpe-proto-note,.hpe-proto-sep{display:none}}


/* ---------- Owner tweaks 2026-10-08 ------------------------------------------------------------------ */
/* 1. Homepage hero: no line-art background (cubes / lines) */
.hero-bg .hero-art,.bgill{display:none!important}

/* 2. Dark theme = two-tone like hpe.com: dark hero / bands, but sections 01 (products) and
      03 (trust) are LIGHT islands. Re-declaring the light tokens on the section makes everything inside
      (cards, text, buttons, chips) resolve to the light palette. */
:root[data-theme="dark"] .hc-light{
  /* HPE raw palette, for the component rules below */
  --hpe-green:#01A982; --hpe-green-strong:#068667; --hpe-green-text:#006750; --hpe-green-text-hover:#074738;
  --hpe-green-bright:#05CC93; --hpe-mint:#00E0AF;
  --hpe-ink:#1D1F27; --hpe-slate:#292D3A; --hpe-slate-2:#535C66;
  /* role tokens (switch per theme) */
  --hpe-btn-bg:#292D3A; --hpe-btn-fg:#FFFFFF; --hpe-btn-bg-hover:#535C66;
  --hpe-btn2-line:#01A982; --hpe-btn2-fg:#292D3A; --hpe-btn2-line-hover:#006750;
  --hpe-fill:#01A982; --hpe-on-fill:#1D1F27;
  --hpe-link:#006750; --hpe-link-hover:#074738;
  --hpe-sel-line:#068667;   /* selected segment ring (HPE border-selected; #01A982 is only 2.8:1 on #F7F7F7) */
  --hpe-warn-text:#9A5000;  /* amber TEXT on light: HPE warning hue, 6.0:1 on white / 5.6:1 on #F7F7F7 */
  --hpe-field-line:#7D8A92; /* form-field border (HPE grey 500): 3.3:1 on #F7F7F7 (WCAG 1.4.11) */

  /* VTRON + legacy token names, remapped */
  --acc:#01A982; --acc2:#05CC93;
  --acc-gradient:linear-gradient(100deg,#068667,#006750);
  --brand-green:#006750;    /* stat marks: HPE green text (6.9:1); #068667 was 4.35:1 on the tinted strip at 390 */
  --glow:rgba(1,169,130,.32);
  --glow-cta:0 14px 36px -14px rgba(41,45,58,.45);
  --accent:#006750; --accent-dark:#074738; --accent-light:#006750;
  --accent-glow:rgba(1,169,130,.12); --accent-glow-strong:rgba(1,169,130,.22);
  --secondary:#006750; --secondary-dark:#074738;
  --secondary-glow:rgba(1,169,130,.10); --secondary-glow-strong:rgba(1,169,130,.20);
  --success:#009A71; --danger:#CC1F1A; --danger-glow:rgba(204,31,26,.10);
  /* --warn stays amber #FFAA00 (rating stars) */

  --bg-base:#FFFFFF; --bg-surface:#F7F7F7; --bg-surface-2:#EEF0F1; --bg-surface-3:#EEF0F1; /* #EEF0F1 = midpoint of HPE #F7F7F7/#E6E8E9 */
  --bg-lowest:#F7F7F7; --bg-highest:#E6E8E9;
  --text-primary:#292D3A; --text-secondary:#3E4550; --text-muted:#606A70;
  --text-dim:#606A70; --ink-dim:#606A70; /* HPE has one weak text tone; #7D8A92 is decorative-only (3.3:1) */
  --border-default:#D4D8DB; --border-subtle:#E6E8E9; --border-strong:#B1B9BE; --border-outline:#B1B9BE;
  --ghost:#E6F6F3; --accb:#99DDCD;
  --navbg:rgba(255,255,255,.86); --barbg:#F7F7F7; --footbg:#F7F7F7;
  --bartopA:#FFFFFF; --bartopB:#F7F7F7;
  --wash:rgba(1,169,130,.09);
  --glass-rgb:255,255,255; --glassb-rgb:255,255,255;
  color-scheme:light;
}
/* 01 + 03: plain white like _proto/hpe (no tint: sit above the fixed bg-mesh/glow layers, no wash/gradients) */
:root[data-theme="dark"] .hc-light{position:relative;z-index:1;background:#FFFFFF!important;background-image:none!important}
:root[data-theme="dark"] .hc-light::before,:root[data-theme="dark"] .hc-light::after{display:none!important}
:root[data-theme="dark"] .hc-light .prod,:root[data-theme="dark"] .hc-light .card,:root[data-theme="dark"] .hc-light .prow,:root[data-theme="dark"] .hc-light .vc-card:not(.vc-feat),:root[data-theme="dark"] .hc-light .vc-feat>.vc-body{background:#F7F7F7!important;background-image:none!important;-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---------- Owner tweaks 2026-10-08 (2): final CTA like _proto/hpe, proof row in 03 ------------------- */
/* (a) "Başlamağa hazırsınız?": full-bleed slate band, left copy, green 3-bar element right,
       contacts as hairline columns. Fonts + buttons stay the site's own. Same in both themes. */
.hc-cta{position:relative;overflow:hidden;background:#292D3A!important;padding-block:0!important;z-index:1}
.hc-cta .final{position:relative;text-align:left!important;background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;
  padding:clamp(80px,10vw,150px) 0!important;margin:0!important;-webkit-backdrop-filter:none;backdrop-filter:none}
.hc-cta .final::before,.hc-cta .final::after{display:none!important}
.hc-cta .final h2{color:#fff!important;max-width:640px;position:relative;z-index:1}
.hc-cta .final>p{color:#E6E8E9!important;max-width:560px;margin-left:0!important;margin-right:0!important;position:relative;z-index:1}
.hc-cta .final .actions{justify-content:flex-start!important;position:relative;z-index:1}
.hc-cta .contact-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;max-width:900px;margin-top:72px!important}
.hc-cta .contact-grid .ci-card{background:none!important;border:0!important;border-top:1px solid rgba(255,255,255,.36)!important;border-radius:0!important;padding:18px 0 0!important;box-shadow:none!important}
.hc-cta .contact-grid .k{color:#B1B9BE!important}
.hc-cta .contact-grid .v,.hc-cta .contact-grid a{color:#fff!important}
.hc-el{position:absolute;left:70%;top:50%;transform:translateY(-50%);height:min(36vw,520px);width:auto;max-width:none;aspect-ratio:3.5/1;pointer-events:none}
/* tablet/phone (≤991px): no 3-bar element in the CTA band (owner 2026-10-08) */
@media(max-width:991px){.hc-el{display:none!important}}
@media(max-width:767px){.hc-cta .contact-grid{grid-template-columns:1fr;gap:20px;margin-top:48px!important}}
/* light theme: the band keeps dark buttons readable -> use the dark-theme button recipe inside it */
.hc-cta{--hpe-btn-bg:#FFFFFF;--hpe-btn-fg:#292D3A;--hpe-btn-bg-hover:#D4D8DB;--hpe-btn2-line:#00E0AF;--hpe-btn2-fg:#FFFFFF;--hpe-btn2-line-hover:#05CC93;--text-primary:#fff}

/* (b) 03: second row — Trustpilot, Google, state registry, WHTop */
.hc-proof4{grid-template-columns:repeat(4,minmax(0,1fr))!important;margin-top:16px}
a.hc-proof{display:block;text-decoration:none;color:inherit;transition:transform .2s,border-color .2s}
a.hc-proof:hover{transform:translateY(-2px);border-color:#01A982!important}
.hc-proof .stars{color:#006750!important}
.hc-rv{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:1rem;letter-spacing:0}
.hc-proof p:empty{display:none}
@media(max-width:1100px){.hc-proof4{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){.hc-proof4{grid-template-columns:1fr!important}}
/* fixes: no gap between the CTA band and the footer; contacts never run under the green element */
body:has(.hc-cta) .eb-foot{margin-top:0!important}
body:has(.hc-cta) main{margin-bottom:0!important;padding-bottom:0!important}
.hc-cta .contact-grid{max-width:min(900px,calc(70% - 64px))!important}
.hc-cta .final>p{max-width:min(560px,calc(70% - 64px))!important}
@media(max-width:991px){.hc-cta .contact-grid,.hc-cta .final>p{max-width:none!important}}
/* 03 proof row: 3 cards (Trustpilot, Google, state registry with the ministry logo) */
.hc-proof4{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media(max-width:900px){.hc-proof4{grid-template-columns:1fr!important}}
.hc-proof .stars:has(.hc-mincom){display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hc-mincom{display:block;height:42px;width:auto}
.hc-reg{color:#006750}
/* 03 first row: partner logos + Epro green "14 il · 500+" with the logo bars */
.hc-logo{display:flex;align-items:center;height:72px}
.hc-logo img{display:block;height:100%;width:auto;max-width:100%}
.hc-logo img[src$="ripe-logo.png"]{height:56px}
.hc-epro{display:flex;align-items:center;gap:12px;height:72px;color:#2fb08d!important;font-weight:700;font-size:1.35rem}
.hc-bars{width:30px;height:26px;flex:none}
/* hosting: no stats strip under the hero; the full comparison <details> is a light island in dark theme too */
.trust-strip-sec{display:none!important}
:root[data-theme="dark"] .adv-sec .adv{
  --bg-base:#FFFFFF;--bg-surface:#FFFFFF;--bg-surface-2:#F7F7F7;--bg-surface-3:#F7F7F7;--bg-lowest:#F7F7F7;--bg-highest:#E6E8E9;
  --text-primary:#292D3A;--text-secondary:#3E4550;--text-muted:#606A70;--text-dim:#606A70;--ink-dim:#606A70;
  --border-default:#D4D8DB;--border-subtle:#E6E8E9;--border-strong:#B1B9BE;--border-outline:#B1B9BE;
  --accent:#006750;--accent-light:#006750;--secondary:#006750;--glass-rgb:255,255,255;
  background:#FFFFFF!important;color:#3E4550;color-scheme:light}
:root[data-theme="dark"] .adv-sec .adv *{background-color:transparent}
:root[data-theme="dark"] .adv-sec .adv summary,:root[data-theme="dark"] .adv-sec .adv table{background:#FFFFFF!important}
:root[data-theme="dark"] .adv-sec .adv thead th,:root[data-theme="dark"] .adv-sec .adv tr:nth-child(even) td{background:#F7F7F7!important}
/* prototype is dark (two-tone) only: no light/dark switch */
.theme-switch{display:none!important}

/* popular cards (VPS L, VDS S) inside the light island keep the HPE-green frame + "Ən populyar" band (ink text) */
:root[data-theme="dark"] .hc-light .vc-feat{background:#01A982!important}
:root[data-theme="dark"] .hc-light .vc-feat>.vc-band{color:#1D1F27!important}

/* ---------- light islands on the other page types (why, contact, about, partners, legal docs, blog, posts) -------
   Sections there sit inside .wrap (not full-bleed): paint the white band to the viewport edges with a spread
   shadow and clip it vertically (no layout/overflow impact). */
:root[data-theme="dark"] .hc-light{box-shadow:0 0 0 100vmax #FFFFFF;clip-path:inset(0 -100vmax)}
:root[data-theme="dark"] .content-block.hc-light{padding-block:3rem}
:root[data-theme="dark"] .hc-light .help-card,:root[data-theme="dark"] .hc-light .faq-item,:root[data-theme="dark"] .hc-light details,
:root[data-theme="dark"] .hc-light .post-card,:root[data-theme="dark"] .hc-light .info-card,:root[data-theme="dark"] .hc-light .partner-card,
:root[data-theme="dark"] .hc-light .review{background:#F7F7F7!important;background-image:none!important;-webkit-backdrop-filter:none;backdrop-filter:none}