:root {
  --theme-scheme: dark;
  --base: #080c13;
  --ink: #edf2fb;
  --muted: #a1aec2;
  --accent: #87b6ff;
  --line: rgba(167,197,243,.18);
  --backdrop-glow: #163454;
  --backdrop-mid: #0c1726;
  --beam-color: rgba(126,183,255,.35);
  --grid-color: var(--line);
  --logo-color-start: #8e88a0;
  --logo-color-middle: #829da9;
  --logo-color-end: #95aca8;
  --logo-gradient-angle: 135deg;
  --logo-gradient-start: 0%;
  --logo-gradient-middle: 55%;
  --logo-gradient-end: 100%;
  --logo-opacity: .07;
  --logo-size: min(65vw, 650px);
  --logo-top: 15%;
  --logo-right: -15%;
  --logo-halo-inner: rgba(136,187,255,.045);
  --logo-halo-outer: rgba(136,187,255,.025);
  --logo-halo-step: 9%;
  --title-accent: #a8caff;
  --focus-color: var(--accent);
  --contact-icon-color: var(--accent);
  --contact-hover-ink: #bdd8ff;
  --hover-bg: rgba(135,182,255,.08);
  --button-border: rgba(167,197,243,.3);
  --button-bg: rgba(255,255,255,.045);
  --button-hover-bg: rgba(111,161,243,.13);
  --button-hover-border: var(--accent);
  --card-bg-start: rgba(24,39,59,.75);
  --card-bg-end: rgba(11,19,31,.82);
  --card-highlight: rgba(213,231,255,.06);
  --card-shadow: rgba(0,0,0,.16);
  --drawer-bg: #0c1421;
  --drawer-scrim: rgba(2,5,10,.68);
  --drawer-shadow: rgba(0,0,0,.4);
  --close-bg: rgba(255,255,255,.04);
  --close-hover-bg: rgba(135,182,255,.14);
  --social-bg: rgba(12,20,33,.6);
  --social-hover-bg: var(--hover-bg);
  --social-icon-cutout: var(--base);
  --social-facebook: #1877f2;
  --social-instagram: #f16caa;
  --social-linkedin: #369ddd;
  --social-x: #f0f3f8;
  --social-threads: #edf2fb;
  --social-tiktok: #42e3dd;
  --social-youtube: #ff4747;
  --social-whatsapp: #25d366;
  --social-telegram: #38b4ee;
  --social-viber: #b490ff;
  --social-messenger: #7c8cff;
  --social-pinterest: #ff5064;
  --social-reddit: #ff662b;
  --social-snapchat: #ffef00;
  --social-discord: #8991ff;
  --social-bluesky: #53a5ff;
  --social-mastodon: #b39bff;
  --social-twitch: #b98aff;
  --clear: transparent;
  --mask-solid: black;
  --grid-opacity: .28;
  --beam-secondary-opacity: .6;
  --beam-tertiary-opacity: .3;
  --social-cols: 1;
  --social-cols-md: 1;
  --social-cols-lg: 1;
  --social-cols-xs: 1;
  --gutter: clamp(16px, 4vw, 64px);
  color-scheme: var(--theme-scheme);
  font-family: system-ui, -apple-system, 'Segoe UI', 'Noto Sans Greek', sans-serif;
}
/* The STATIC_STARTER page, below its `:root` block -- which app/templates/starter.py
   writes per client from the palette in app/services/site_colors.py.

   **No colour is spelled out in this file.** Every paint value is var(--token), so the
   generated block is the whole palette and nothing here can disagree with it.

   Content determines its minimum size; spare viewport height belongs to the main row.
   No JS sizing and no overflow masking is required at any width. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { min-height: 100%; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; color: var(--ink); background: var(--base); -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: var(--clear); }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 3px; }
[hidden] { display: none !important; }

/* Fixed decoration never participates in document sizing. */
.cs-backdrop { position: fixed; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 78% 35%, var(--backdrop-glow) 0%, var(--backdrop-mid) 35%, var(--base) 73%); }
.cs-backdrop::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--grid-color) 1px, var(--clear) 1px), linear-gradient(90deg, var(--grid-color) 1px, var(--clear) 1px); background-size: 76px 76px; opacity: var(--grid-opacity); mask-image: radial-gradient(ellipse at 75% 35%, var(--mask-solid), var(--clear) 75%); }
/* Polygon follows the supplied angular mark in its original square canvas.
   Preserving that canvas keeps its size and placement consistent. Declared once, here,
   because the mark and both of its halos have to be the same shape -- three copies of
   these eight points would drift apart the first time one of them was adjusted. */
.cs-backdrop { --logo-shape: polygon(
    50% 22.778%, 77.222% 77.778%, 46.111% 77.778%,
    49.444% 68.889%, 60.556% 68.889%, 50% 49.444%,
    37.778% 77.778%, 23.333% 77.778%
  ); }
.cs-backdrop::after, .cs-halo {
  content: ''; position: absolute;
  width: var(--logo-size); aspect-ratio: 1;
  top: var(--logo-top); right: var(--logo-right);
  clip-path: var(--logo-shape);
}
.cs-backdrop::after {
  background: linear-gradient(
    var(--logo-gradient-angle),
    var(--logo-color-start) var(--logo-gradient-start),
    var(--logo-color-middle) var(--logo-gradient-middle),
    var(--logo-color-end) var(--logo-gradient-end)
  );
  opacity: var(--logo-opacity);
}
/* The halos, in the mark's own shape. box-shadow cannot draw them: a clip-path clips the
   element's shadow away along with everything else outside the polygon, and
   `filter: drop-shadow()` on the same element is clipped for exactly the same reason --
   the filter is applied first and then the clip. So each is its own layer wearing the
   same shape.
   They are offset rather than concentric: the two ghosts step up and to the left and the
   solid mark ends the run at the right, so it reads as one mark arriving rather than as
   three rings around a target. One step controls the spacing and the second is twice it,
   which is what keeps the run even. The step is a percentage of the mark, so the trail
   stays in proportion from a phone to a desktop. The backdrop clips whatever runs past
   the viewport. */
.cs-halo {
  background: var(--logo-halo-inner);
  transform: translate(calc(-1 * var(--logo-halo-step)), calc(-1 * var(--logo-halo-step)));
}
.cs-halo--outer {
  background: var(--logo-halo-outer);
  transform: translate(calc(-2 * var(--logo-halo-step)), calc(-2 * var(--logo-halo-step)));
}
.cs-backdrop i { position: absolute; top: -30%; left: 65%; width: 1px; height: 150%; background: linear-gradient(var(--clear) 10%, var(--beam-color), var(--clear) 85%); transform: rotate(35deg); }
.cs-backdrop i:nth-child(2) { left: 73%; opacity: var(--beam-secondary-opacity); }
.cs-backdrop i:nth-child(3) { left: 81%; opacity: var(--beam-tertiary-opacity); }

/* Mobile first. Flex items do not compress below their actual content.
   At ordinary sizes the middle stretches and contacts sit at the bottom.
   At high zoom / tiny heights the page grows instead of clipping anything. */
.cs-page {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  width: 100%; max-width: 1600px; margin-inline: auto;
  min-height: 100vh; min-height: 100svh; min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top))
    max(var(--gutter), env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(var(--gutter), env(safe-area-inset-left));
}
.cs-page > * { min-width: 0; flex-shrink: 0; }
.cs-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 132px); align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cs-titlelayer, .cs-topbar { min-width: 0; }

/* The client's uploaded logo, when there is one -- the file beside the headline,
   not the --logo-* tokens, which paint the watermark traced into the backdrop.
   The template writes the modifier rather than the sheet matching :has(), so a page
   without a logo is the block box it always was and a long company name wraps
   exactly as it did before the logo existed. max-width keeps a wide wordmark from
   crowding out the name it sits beside. */
.cs-titlelayer--logo { display: flex; align-items: center; gap: clamp(10px, 2.5vw, 22px); }
.cs-logo { flex: none; width: auto; height: clamp(36px, 10vw, 56px); max-width: 38%; object-fit: contain; }
.cs-title { font-size: clamp(24px, 7.5vw, 44px); line-height: 1; font-weight: 650; letter-spacing: -.055em; overflow-wrap: anywhere; }
.cs-title span { display: block; }
.cs-title span:last-child { color: var(--title-accent); }
.cs-pill { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 8px 10px; gap: 8px; border: 1px solid var(--button-border); border-radius: 24px; color: var(--ink); background: var(--button-bg); font-size: 12px; line-height: 1.4; font-weight: 550; overflow-wrap: anywhere; backdrop-filter: blur(12px); transition: background .2s, border-color .2s; }
.cs-pill::after { content: '+'; flex: none; font-size: 22px; font-weight: 300; line-height: 1; color: var(--accent); }
.cs-pill:hover { background: var(--button-hover-bg); border-color: var(--button-hover-border); }
.cs-shell { flex: 1 0 auto; display: flex; align-items: center; padding-block: clamp(12px, 3vh, 32px); }
.cs-sub { min-width: 0; max-width: 760px; padding-left: 14px; border-left: 2px solid var(--accent); font-size: clamp(14px, 3.7vw, 19px); line-height: 1.45; font-weight: 450; letter-spacing: .025em; overflow-wrap: anywhere; text-wrap: balance; }

/* Platform colors are configured in :root, never in the HTML. */
.cs-social__link[data-social="facebook"] { --brand: var(--social-facebook); }
.cs-social__link[data-social="instagram"] { --brand: var(--social-instagram); }
.cs-social__link[data-social="linkedin"] { --brand: var(--social-linkedin); }
.cs-social__link[data-social="x"] { --brand: var(--social-x); }
.cs-social__link[data-social="threads"] { --brand: var(--social-threads); }
.cs-social__link[data-social="tiktok"] { --brand: var(--social-tiktok); }
.cs-social__link[data-social="youtube"] { --brand: var(--social-youtube); }
.cs-social__link[data-social="whatsapp"] { --brand: var(--social-whatsapp); }
.cs-social__link[data-social="telegram"] { --brand: var(--social-telegram); }
.cs-social__link[data-social="viber"] { --brand: var(--social-viber); }
.cs-social__link[data-social="messenger"] { --brand: var(--social-messenger); }
.cs-social__link[data-social="pinterest"] { --brand: var(--social-pinterest); }
.cs-social__link[data-social="reddit"] { --brand: var(--social-reddit); }
.cs-social__link[data-social="snapchat"] { --brand: var(--social-snapchat); }
.cs-social__link[data-social="discord"] { --brand: var(--social-discord); }
.cs-social__link[data-social="bluesky"] { --brand: var(--social-bluesky); }
.cs-social__link[data-social="mastodon"] { --brand: var(--social-mastodon); }
.cs-social__link[data-social="twitch"] { --brand: var(--social-twitch); }

/* Predictable 6 / 9 / 18-column grids, with no automatic intrinsic widths -- each
   capped in :root at the number of tiles this client actually has, so three
   profiles do not sit in the first three of eighteen columns. */
.cs-social { display: grid; grid-template-columns: repeat(var(--social-cols), minmax(0, 1fr)); gap: 4px; width: 100%; max-width: 1000px; align-self: center; justify-items: center; margin-bottom: 12px; }
.cs-social__link { display: grid; place-items: center; width: 44px; max-width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; color: var(--brand); background: var(--social-bg); text-decoration: none; transition: border-color .2s, background .2s, transform .2s; }
.cs-social__link svg { display: block; width: 22px; height: 22px; flex: none; }
.cs-social__link:hover, .cs-social__link:focus-visible { border-color: var(--brand); background: var(--social-hover-bg); }
.cs-social__link:hover { transform: translateY(-2px); }

.cs-card { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(110deg, var(--card-bg-start), var(--card-bg-end)); backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 var(--card-highlight), 0 15px 50px var(--card-shadow); }
.cs-card > *, .cs-contact > * { min-width: 0; }
.cs-card__title { color: var(--muted); font-size: 12px; line-height: 1.4; font-weight: 550; text-transform: uppercase; letter-spacing: .1em; }
.cs-contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.cs-contact a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px; border-radius: 10px; font-size: 16px; line-height: 1.4; text-decoration: none; transition: background .2s, color .2s; }
.cs-contact a:hover { background: var(--hover-bg); color: var(--contact-hover-ink); }
.cs-contact span { min-width: 0; overflow-wrap: anywhere; }
.cs-contact svg { flex: 0 0 20px; color: var(--contact-icon-color); }
.cs-foot { padding-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
.cs-foot a { text-underline-offset: 3px; }
.cs-foot a:hover { color: var(--ink); }

/* Drawer controls remain reachable while its content scrolls independently. */
html.drawer-open, .drawer-open body { overflow: hidden; }
.cs-drawer-scrim { position: fixed; inset: 0; z-index: 5; opacity: 0; visibility: hidden; background: var(--drawer-scrim); backdrop-filter: blur(6px); transition: opacity .28s ease, visibility .28s ease; }
.cs-drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 6;
  width: min(490px, 100%); height: 100vh; height: 100dvh;
  padding: 0 max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  overflow-y: auto; overflow-wrap: anywhere; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--drawer-bg); border-left: 1px solid var(--line); box-shadow: -20px 0 80px var(--drawer-shadow);
  /* clip-path avoids offscreen transformed content widening the document. */
  clip-path: inset(0 0 0 100%); visibility: hidden;
  transition: clip-path .3s ease, visibility .3s ease;
}
.cs-drawer.is-open { clip-path: inset(0); visibility: visible; }
.cs-drawer-scrim.is-open { opacity: 1; visibility: visible; }
.cs-drawer__head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: max(16px, env(safe-area-inset-top)) 0 16px; background: var(--drawer-bg); border-bottom: 1px solid var(--line); }
.cs-drawer__title { min-width: 0; font-size: 17px; font-weight: 600; }
.cs-drawer__close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; font-size: 28px; font-weight: 300; color: var(--ink); background: var(--close-bg); }
.cs-drawer__close:hover { background: var(--close-hover-bg); }
.cs-drawer ul { list-style: none; font-size: 14px; line-height: 1.55; }
.cs-drawer li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.cs-drawer__label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; font-weight: 550; text-transform: uppercase; letter-spacing: .1em; }
.cs-drawer a { text-underline-offset: 4px; }
.cs-drawer__src { margin-top: 18px; color: var(--muted); font-size: 12px; line-height: 1.6; }

@media (min-width: 480px) {
  .cs-social { --social-cols: var(--social-cols-md); }
  .cs-contact { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; }
  .cs-contact a { font-size: 14px; }
}
@media (min-width: 720px) {
  .cs-header { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding-bottom: 24px; }
  .cs-title { font-size: clamp(44px, 6.2vw, 88px); }
  .cs-logo { height: clamp(56px, 6vw, 88px); }
  .cs-pill { width: auto; padding: 10px 18px; font-size: 13px; }
  .cs-sub { font-size: clamp(19px, 2vw, 28px); padding-left: 22px; }
  .cs-card { grid-template-columns: minmax(0, .65fr) minmax(0, 2fr); padding: 20px; gap: 16px; }
  .cs-contact a { font-size: 16px; }
  .cs-foot { padding-top: 16px; font-size: 12px; }
}
@media (min-width: 1100px) {
  .cs-social { --social-cols: var(--social-cols-lg); margin-bottom: 20px; }
  .cs-card { padding: 24px; }
}
/* Narrow browser panes / high zoom: reflow rather than reduce hit targets. */
@media (max-width: 319px) {
  .cs-header { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cs-topbar { justify-self: start; max-width: 100%; }
  .cs-title { font-size: 30px; }
  .cs-logo { height: 32px; }
  .cs-social { --social-cols: var(--social-cols-xs); }
}
/* Height only reduces spacing and headline size; never hides information. */
@media (max-height: 560px) {
  .cs-page { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .cs-header { padding-bottom: 8px; }
  .cs-title { font-size: clamp(24px, 4vw, 36px); }
  .cs-logo { height: clamp(28px, 6vh, 44px); }
  .cs-shell { padding-block: 8px; }
  .cs-sub { font-size: 14px; }
  .cs-social { gap: 2px; margin-bottom: 8px; }
  .cs-card { padding: 8px; }
  .cs-foot { padding-top: 8px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}