/* Extracted page styles for cs6. */

/* about-us.html */
:root {
	--site-bg: #EDFFF9;
	--site-surface: #D3FAED;
	--site-text: #0F1211;
	--site-muted: #353C3A;
	--site-border: #C8E6DC;
	--site-primary: #229379;
	--site-on-primary: #000000;
	--site-secondary: #629091;
	--site-on-secondary: #000000;
	--site-accent: #C28698;
	--site-on-accent: #000000;
	--site-success: #22C55E;
	--site-warning: #F59E0B;
	--site-error: #EF4444;
	--site-info: #3B82F6;

	--color-bg: var(--site-bg);
	--color-surface: var(--site-surface);
	--color-text: var(--site-text);
	--color-muted: var(--site-muted);
	--color-border: var(--site-border);
	--color-primary: var(--site-primary);
	--color-on-primary: var(--site-on-primary);
	--color-secondary: var(--site-secondary);
	--color-on-secondary: var(--site-on-secondary);
	--color-accent: var(--site-accent);
	--color-on-accent: var(--site-on-accent);
	--color-success: var(--site-success);
	--color-warning: var(--site-warning);
	--color-error: var(--site-error);
	--color-info: var(--site-info);

	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--site-bg: #02110C;
		--site-surface: #081E18;
		--site-text: #DBE8E3;
		--site-muted: #A3B6AF;
		--site-border: #1B332C;
		--site-primary: #62E3C0;
		--site-on-primary: #000000;
		--site-secondary: #9BCBCC;
		--site-on-secondary: #000000;
		--site-accent: #DFB6C1;
		--site-on-accent: #000000;
	}
}

/* ==========================================================================
     BASE + SHARED SHELL
     ========================================================================== */
* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 300;
	background: var(--site-bg);
	color: var(--site-text);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; margin: 0; }

.col {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 32px;
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	border-bottom: 1px solid var(--site-border);
	background-image: linear-gradient(115deg, color-mix(in oklch, var(--site-primary) 14%, var(--site-bg)), var(--site-bg) 48%, color-mix(in oklch, var(--site-accent) 16%, var(--site-bg)));
	backdrop-filter: blur(12px);
}

/* ==========================================================================
     GRADIENT COMPONENTS
     ========================================================================== */
.btn-gradient {
	background-image: linear-gradient(115deg, var(--site-primary), var(--site-accent));
	color: var(--site-on-primary);
	border: none;
	text-decoration: none;
	box-shadow: 0 6px 18px color-mix(in oklch, var(--site-primary) 32%, transparent);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-gradient:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px color-mix(in oklch, var(--site-accent) 38%, transparent);
}

.gradient-text {
	background-image: linear-gradient(100deg, var(--site-primary), var(--site-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: color-mix(in oklch, var(--site-accent) 16%, transparent);
	color: var(--site-primary);
	flex-shrink: 0;
}

.nav-link {
	color: var(--site-text);
	text-decoration: none;
	padding: 0.35rem 0;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-link:hover {
	color: var(--site-primary);
	border-bottom-color: var(--site-primary);
}

.mobile-link {
	display: block;
	color: var(--site-text);
	text-decoration: none;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--site-border);
}

.mobile-link:hover { color: var(--site-primary); }

@media (max-width: 720px) {
	.col { padding: 0 20px; }
}

/* Keep the shared header stable when opened directly from file://. */
.topbar > .col {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 76px;
}

.topbar > .col > a:first-child {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
	color: var(--site-text);
	text-decoration: none;
}

.topbar nav[aria-label="Primary navigation"] {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}

.topbar > .col > div:last-child {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.topbar .material-symbols-outlined {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
}

.topbar .icon-tile .material-symbols-outlined::before { content: "*"; }
.topbar .icon-tile .material-symbols-outlined { font-size: 0; }
.topbar .icon-tile .material-symbols-outlined::before { font-size: 1.25rem; }
.topbar .btn-gradient .material-symbols-outlined::before { content: "->"; }
.topbar .btn-gradient .material-symbols-outlined { font-size: 0; }
.topbar .btn-gradient .material-symbols-outlined::before { font-size: 1rem; }

@media (max-width: 767px) {
	.topbar nav[aria-label="Primary navigation"],
	.topbar .btn-gradient.hidden.sm\:inline-flex { display: none; }
	.topbar > .col { min-height: 68px; }
	.topbar > .col > div:last-child button { display: inline-flex; }
	.topbar #mobileMenu.hidden { display: none; }
	.topbar #mobileMenu:not(.hidden) { display: block; }
	.topbar #mobileMenu > nav { display: flex; flex-direction: column; gap: 0; }
}

@media (min-width: 768px) {
	.topbar button#navToggle { display: none; }
	.topbar #mobileMenu { display: none; }
}

/* about-us.html */
@theme {
  --color-primary: var(--site-primary);
  --color-on-primary: var(--site-on-primary);
  --color-secondary: var(--site-secondary);
  --color-on-secondary: var(--site-on-secondary);
  --color-accent: var(--site-accent);
  --color-on-accent: var(--site-on-accent);
  --color-bg: var(--site-bg);
  --color-surface: var(--site-surface);
  --color-text: var(--site-text);
  --color-muted: var(--site-muted);
  --color-border: var(--site-border);
  --color-success: var(--site-success);
  --color-warning: var(--site-warning);
  --color-error: var(--site-error);
  --color-info: var(--site-info);
}

/* about-us.html */
.about-page {
      color: var(--color-text);
      font-family: var(--font-body);
    }

    .about-page section {
      width: 100%;
      height: auto;
      padding: 96px 0;
      border-bottom: 1px solid var(--color-border);
    }

    .about-page h1,
    .about-page h2,
    .about-page h3 {
      color: var(--color-text);
      font-weight: 700;
      letter-spacing: -0.035em;
    }

    .about-page h1 {
      max-width: 780px;
      font-family: var(--font-display);
      font-size: clamp(2.6rem, 6vw, 4.8rem);
      line-height: 1.08;
    }

    .about-page h2 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3rem);
      line-height: 1.16;
    }

    .about-page h3 {
      font-size: 1.35rem;
      line-height: 1.25;
    }

    .about-page p {
      color: var(--color-muted);
      font-size: 1.05rem;
      font-weight: 300;
      line-height: 1.8;
    }

    .about-hero {
      min-height: 420px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 24px;
      padding-top: 112px !important;
      background: linear-gradient(135deg, color-mix(in oklch, var(--color-primary) 10%, var(--color-bg)), var(--color-bg) 55%, color-mix(in oklch, var(--color-accent) 12%, var(--color-bg)));
      color: var(--color-text);
    }

    .about-kicker {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin: 0;
      color: var(--color-primary) !important;
      font-size: 0.78rem !important;
      font-weight: 700 !important;
      letter-spacing: 0.14em;
      line-height: 1.2 !important;
      text-transform: uppercase;
    }

    .about-kicker .material-symbols-outlined {
      font-size: 1.2rem;
    }

    .about-hero-copy {
      max-width: 720px;
      margin: 0;
      font-size: 1.18rem !important;
      line-height: 1.7 !important;
    }

    .about-cta {
      display: inline-flex;
      min-height: 50px;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 13px 22px;
      border-radius: 999px;
      background: linear-gradient(115deg, var(--color-primary), var(--color-accent));
      box-shadow: 0 6px 18px color-mix(in oklch, var(--color-primary) 32%, transparent);
      color: var(--color-on-primary);
      font-size: 0.96rem;
      font-weight: 700;
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .about-cta:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 28px color-mix(in oklch, var(--color-accent) 38%, transparent);
    }

    .about-hero-image {
      width: 100%;
      margin-top: 12px;
      overflow: hidden;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      background: linear-gradient(115deg, var(--color-primary), var(--color-accent));
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .about-hero-image img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      object-fit: cover;
    }

    .about-story {
      background: linear-gradient(110deg, color-mix(in oklch, var(--color-surface) 55%, var(--color-bg)), var(--color-bg) 75%);
      color: var(--color-text);
    }

    .about-reading-block {
      max-width: 720px;
    }

    .about-reading-block h2 {
      margin-bottom: 24px;
    }

    .about-reading-block p {
      margin: 0 0 16px;
    }

    .about-reading-block .story-short {
      margin: 0;
      color: var(--color-primary);
      font-weight: 600;
    }

    .about-section-heading {
      max-width: 720px;
      margin-bottom: 36px;
    }

    .about-section-heading p {
      margin: 14px 0 0;
    }

    .operations-row {
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      gap: 32px;
      align-items: center;
      padding: 28px;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      background: var(--color-surface);
      color: var(--color-text);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .operations-row + .operations-row {
      margin-top: 24px;
    }

    .operations-row:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 24px color-mix(in oklch, var(--color-primary) 20%, transparent);
    }

    .operations-row:nth-of-type(even) {
      grid-template-columns: minmax(0, 1fr) 280px;
    }

    .operations-row:nth-of-type(even) .operations-photo {
      order: 2;
    }

    .operations-photo {
      display: block;
      width: 100%;
      height: 192px;
      border-radius: 12px;
      object-fit: cover;
    }

    .operations-copy h3 {
      margin: 0 0 10px;
    }

    .operations-copy p {
      margin: 0;
    }

    .operations-note {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-top: 28px;
      padding: 18px 20px;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      background: linear-gradient(115deg, color-mix(in oklch, var(--color-primary) 12%, var(--color-surface)), var(--color-surface));
      color: var(--color-text);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .operations-note .material-symbols-outlined {
      flex: 0 0 auto;
      color: var(--color-primary);
      font-size: 1.5rem;
    }

    .operations-note p {
      margin: 0;
    }

    .team-section {
      background: linear-gradient(130deg, color-mix(in oklch, var(--color-accent) 8%, var(--color-bg)), var(--color-bg) 60%, color-mix(in oklch, var(--color-primary) 7%, var(--color-bg)));
      color: var(--color-text);
    }

    .team-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 32px;
    }

    .team-role {
      display: flex;
      align-items: flex-start;
      gap: 18px;
      padding: 20px;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      background: var(--color-surface);
      color: var(--color-text);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .team-role:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 24px color-mix(in oklch, var(--color-accent) 22%, transparent);
    }

    .team-icon {
      display: inline-flex;
      width: 48px;
      height: 48px;
      flex: 0 0 48px;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: color-mix(in oklch, var(--color-accent) 16%, transparent);
      color: var(--color-primary);
    }

    .team-icon .material-symbols-outlined {
      font-size: 1.55rem;
    }

    .team-role h3 {
      margin: 1px 0 6px;
    }

    .team-role p {
      margin: 0;
    }

    .team-short {
      margin: 24px 0 0 !important;
      color: var(--color-primary) !important;
      font-weight: 600 !important;
    }

    .contact-section {
      padding-bottom: 112px !important;
      border-bottom: 0 !important;
    }

    .contact-panel {
      padding: clamp(28px, 6vw, 56px);
      border: 1px solid color-mix(in oklch, var(--color-accent) 48%, transparent);
      border-radius: 16px;
      background: linear-gradient(115deg, var(--color-primary), var(--color-accent));
      color: var(--color-on-primary);
      box-shadow: 0 12px 28px color-mix(in oklch, var(--color-primary) 28%, transparent);
    }

    .contact-panel h2 {
      max-width: 680px;
      color: var(--color-on-primary);
    }

    .contact-panel > p {
      max-width: 720px;
      margin: 16px 0 24px;
      color: var(--color-on-primary);
    }

    .contact-line {
      margin: 0 0 18px !important;
      color: var(--color-on-primary) !important;
      font-weight: 600 !important;
    }

    .contact-details {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 24px;
      margin-bottom: 24px;
    }

    .contact-details a {
      display: inline-flex;
      min-height: 44px;
      align-items: center;
      gap: 9px;
      color: var(--color-on-primary);
      font-weight: 600;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
    }

    .contact-details .material-symbols-outlined {
      font-size: 1.3rem;
    }

    .contact-link {
      display: inline-flex;
      min-height: 46px;
      align-items: center;
      gap: 9px;
      padding: 11px 18px;
      border: 1px solid color-mix(in oklch, var(--color-on-primary) 30%, transparent);
      border-radius: 999px;
      background: color-mix(in oklch, var(--color-on-primary) 10%, transparent);
      color: var(--color-on-primary);
      font-weight: 700;
      text-decoration: none;
      transition: transform 0.2s ease, background 0.2s ease;
    }

    .contact-link:hover {
      transform: translateY(-4px);
      background: color-mix(in oklch, var(--color-on-primary) 18%, transparent);
    }

    @media (max-width: 720px) {
      .about-page section {
        padding: 64px 0;
      }

      .about-hero {
        min-height: 0;
        padding-top: 72px !important;
      }

      .about-hero .about-cta {
        width: 100%;
      }

      .operations-row,
      .operations-row:nth-of-type(even) {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 20px;
      }

      .operations-row:nth-of-type(even) .operations-photo {
        order: 0;
      }

      .operations-photo {
        height: auto;
        aspect-ratio: 3 / 2;
      }

      .team-role {
        padding: 18px;
      }

      .contact-section {
        padding-bottom: 72px !important;
      }

      .contact-details {
        flex-direction: column;
        gap: 6px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .about-cta,
      .operations-row,
      .team-role,
      .contact-link {
        transition: none;
      }
    }

/* about-us.html */
.footer-heading {
		font-size: 0.75rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		font-weight: 700;
		color: var(--site-text);
		margin: 0 0 0.5rem;
	}

	.footer-link {
		display: inline-block;
		padding: 0.25rem 0;
		color: var(--site-muted);
		text-decoration: none;
		transition: color 0.15s ease, transform 0.15s ease;
	}

	.footer-link:hover {
		color: var(--site-primary);
		transform: translateX(4px);
	}

/* Inline style from about-us.html */
.extracted-about-us-html-1 { min-height:64px; }

/* Inline style from about-us.html */
.extracted-about-us-html-1 { text-decoration:none;color:var(--site-text); }

/* Inline style from about-us.html */
.extracted-about-us-html-1 { width:42px;height:42px; }

/* Inline style from about-us.html */
.extracted-about-us-html-1 { font-size:1.5rem; }

/* Inline style from about-us.html */
.extracted-about-us-html-1 { font-size:1.15rem; }

/* Inline style from about-us.html */
.extracted-about-us-html-1 { background:var(--site-surface); }

/* Inline style from about-us.html */
.extracted-about-us-html-1 { border-bottom:none; }

/* Inline style from about-us.html */
.extracted-about-us-html-1 { font-size:1.15rem; }

/* Inline style from about-us.html */
.extracted-about-us-html-1 { border-top:1px solid var(--site-border);background-image:linear-gradient(160deg, color-mix(in oklch, var(--site-primary) 12%, var(--site-bg)), var(--site-bg) 55%, color-mix(in oklch, var(--site-accent) 14%, var(--site-bg))); }

/* Inline style from about-us.html */
.extracted-about-us-html-1 { font-size:1.5rem; }

/* Inline style from about-us.html */
.extracted-about-us-html-1 { max-width:40rem; }

/* Inline style from about-us.html */
.extracted-about-us-html-1 { font-size:1.35rem; }

/* Inline style from about-us.html */
.extracted-about-us-html-1 { font-size:1.35rem; }

/* Inline style from about-us.html */
.extracted-about-us-html-1 { font-size:1.35rem; }

/* Inline style from about-us.html */
.extracted-about-us-html-1 { width:40px;height:40px; }

/* Inline style from about-us.html */
.extracted-about-us-html-1 { font-size:1.25rem; }

/* Inline style from about-us.html */
.extracted-about-us-html-1 { width:40px;height:40px; }

/* Inline style from about-us.html */
.extracted-about-us-html-1 { font-size:1.25rem; }

/* Inline style from about-us.html */
.extracted-about-us-html-1 { width:40px;height:40px; }

/* Inline style from about-us.html */
.extracted-about-us-html-1 { font-size:1.25rem; }

/* Inline style from about-us.html */
.extracted-about-us-html-1 { color:var(--site-text); }

/* community.html */
:root {
	--site-bg: #EDFFF9;
	--site-surface: #D3FAED;
	--site-text: #0F1211;
	--site-muted: #353C3A;
	--site-border: #C8E6DC;
	--site-primary: #229379;
	--site-on-primary: #000000;
	--site-secondary: #629091;
	--site-on-secondary: #000000;
	--site-accent: #C28698;
	--site-on-accent: #000000;
	--site-success: #22C55E;
	--site-warning: #F59E0B;
	--site-error: #EF4444;
	--site-info: #3B82F6;

	--color-bg: var(--site-bg);
	--color-surface: var(--site-surface);
	--color-text: var(--site-text);
	--color-muted: var(--site-muted);
	--color-border: var(--site-border);
	--color-primary: var(--site-primary);
	--color-on-primary: var(--site-on-primary);
	--color-secondary: var(--site-secondary);
	--color-on-secondary: var(--site-on-secondary);
	--color-accent: var(--site-accent);
	--color-on-accent: var(--site-on-accent);
	--color-success: var(--site-success);
	--color-warning: var(--site-warning);
	--color-error: var(--site-error);
	--color-info: var(--site-info);

	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--site-bg: #02110C;
		--site-surface: #081E18;
		--site-text: #DBE8E3;
		--site-muted: #A3B6AF;
		--site-border: #1B332C;
		--site-primary: #62E3C0;
		--site-on-primary: #000000;
		--site-secondary: #9BCBCC;
		--site-on-secondary: #000000;
		--site-accent: #DFB6C1;
		--site-on-accent: #000000;
	}
}

/* ==========================================================================
     BASE + SHARED SHELL
     ========================================================================== */
* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 300;
	background: var(--site-bg);
	color: var(--site-text);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; margin: 0; }

.col {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 32px;
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	border-bottom: 1px solid var(--site-border);
	background-image: linear-gradient(115deg, color-mix(in oklch, var(--site-primary) 14%, var(--site-bg)), var(--site-bg) 48%, color-mix(in oklch, var(--site-accent) 16%, var(--site-bg)));
	backdrop-filter: blur(12px);
}

/* ==========================================================================
     GRADIENT COMPONENTS
     ========================================================================== */
.btn-gradient {
	background-image: linear-gradient(115deg, var(--site-primary), var(--site-accent));
	color: var(--site-on-primary);
	border: none;
	text-decoration: none;
	box-shadow: 0 6px 18px color-mix(in oklch, var(--site-primary) 32%, transparent);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-gradient:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px color-mix(in oklch, var(--site-accent) 38%, transparent);
}

.gradient-text {
	background-image: linear-gradient(100deg, var(--site-primary), var(--site-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: color-mix(in oklch, var(--site-accent) 16%, transparent);
	color: var(--site-primary);
	flex-shrink: 0;
}

.nav-link {
	color: var(--site-text);
	text-decoration: none;
	padding: 0.35rem 0;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-link:hover {
	color: var(--site-primary);
	border-bottom-color: var(--site-primary);
}

.mobile-link {
	display: block;
	color: var(--site-text);
	text-decoration: none;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--site-border);
}

.mobile-link:hover { color: var(--site-primary); }

@media (max-width: 720px) {
	.col { padding: 0 20px; }
}

/* community.html */
@theme {
  --color-primary: var(--site-primary);
  --color-on-primary: var(--site-on-primary);
  --color-secondary: var(--site-secondary);
  --color-on-secondary: var(--site-on-secondary);
  --color-accent: var(--site-accent);
  --color-on-accent: var(--site-on-accent);
  --color-bg: var(--site-bg);
  --color-surface: var(--site-surface);
  --color-text: var(--site-text);
  --color-muted: var(--site-muted);
  --color-border: var(--site-border);
  --color-success: var(--site-success);
  --color-warning: var(--site-warning);
  --color-error: var(--site-error);
  --color-info: var(--site-info);
}

/* community.html */
.community-main {
      color: var(--color-text);
    }

    .community-main section {
      width: 100%;
      height: auto;
      padding: 96px 0;
      border-bottom: 1px solid var(--color-border);
    }

    .community-main h1,
    .community-main h2,
    .community-main h3 {
      color: var(--color-text);
      font-weight: 700;
      letter-spacing: -0.035em;
    }

    .community-main h1 {
      max-width: 760px;
      font-size: clamp(2.7rem, 7vw, 5.2rem);
      line-height: 1.04;
    }

    .community-main h2 {
      font-size: clamp(2rem, 4vw, 3rem);
      line-height: 1.12;
    }

    .community-main h3 {
      font-size: 1.45rem;
      line-height: 1.25;
    }

    .community-main p {
      color: var(--color-muted);
      font-weight: 300;
      line-height: 1.75;
    }

    .community-kicker {
      color: var(--color-primary);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .community-lede {
      max-width: 650px;
      margin: 20px 0 0;
      font-size: 1.15rem;
    }

    .community-gradient-text {
      background-image: linear-gradient(100deg, var(--color-primary), var(--color-accent));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .community-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 52px;
      width: fit-content;
      padding: 13px 22px;
      border: 0;
      border-radius: 999px;
      background-image: linear-gradient(115deg, var(--color-primary), var(--color-accent));
      box-shadow: 0 6px 18px color-mix(in oklch, var(--color-primary) 28%, transparent);
      color: var(--color-on-primary);
      font-weight: 700;
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .community-button:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 24px color-mix(in oklch, var(--color-accent) 34%, transparent);
    }

    .community-button:focus-visible,
    .community-main a:focus-visible {
      outline: 3px solid var(--color-info);
      outline-offset: 4px;
    }

    .community-hero {
      min-height: 420px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 24px;
      padding-top: 80px !important;
    }

    .community-hero-copy {
      width: 100%;
      padding: clamp(24px, 5vw, 48px);
      border: 1px solid var(--color-border);
      border-radius: 16px;
      background:
        radial-gradient(ellipse at 88% 4%, color-mix(in oklch, var(--color-accent) 19%, transparent), transparent 40%),
        linear-gradient(125deg, var(--color-surface), var(--color-bg) 75%);
      color: var(--color-text);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .community-hero-copy .community-lede {
      margin-bottom: 24px;
    }

    .community-hero-image {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .community-section-intro {
      max-width: 720px;
      margin: 16px 0 28px;
    }

    .community-space-row {
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      gap: 32px;
      align-items: center;
      padding: 32px 0;
      border-top: 1px solid var(--color-border);
    }

    .community-space-row:nth-of-type(even) {
      grid-template-columns: minmax(0, 1fr) 280px;
    }

    .community-space-row:nth-of-type(even) img {
      order: 2;
    }

    .community-space-row img {
      display: block;
      width: 100%;
      height: 192px;
      object-fit: cover;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .community-space-row p {
      max-width: 620px;
      margin: 10px 0 0;
    }

    .community-soft-band {
      padding: 36px;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      background:
        radial-gradient(ellipse at 100% 0%, color-mix(in oklch, var(--color-primary) 15%, transparent), transparent 45%),
        var(--color-surface);
      color: var(--color-text);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .community-session-list {
      margin-top: 28px;
      border-top: 1px solid var(--color-border);
    }

    .community-session {
      display: grid;
      grid-template-columns: minmax(145px, 0.35fr) minmax(0, 1fr);
      gap: 24px;
      padding: 24px 0;
      border-bottom: 1px solid var(--color-border);
    }

    .community-session-label {
      color: var(--color-primary);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .community-session h3 {
      font-size: 1.2rem;
    }

    .community-session p {
      margin: 6px 0 0;
    }

    .community-status-list {
      margin-top: 30px;
      border-top: 1px solid var(--color-border);
    }

    .community-status-row {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) auto;
      gap: 18px;
      align-items: center;
      padding: 20px 0;
      border-bottom: 1px solid var(--color-border);
    }

    .community-icon-tile {
      display: inline-flex;
      width: 48px;
      height: 48px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border-radius: 12px;
      background: color-mix(in oklch, var(--color-accent) 16%, transparent);
      color: var(--color-primary);
    }

    .community-status-row h3 {
      font-size: 1.05rem;
    }

    .community-status-row p {
      margin: 4px 0 0;
    }

    .community-status-note {
      color: var(--color-muted);
      font-size: 0.85rem;
      text-align: right;
    }

    .community-contact {
      padding-bottom: 80px !important;
      border-bottom: 0 !important;
    }

    .community-contact-panel {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 18px;
      padding: clamp(28px, 5vw, 48px);
      border: 1px solid var(--color-border);
      border-radius: 16px;
      background:
        radial-gradient(ellipse at 96% 4%, color-mix(in oklch, var(--color-accent) 22%, transparent), transparent 40%),
        linear-gradient(120deg, var(--color-surface), var(--color-bg));
      color: var(--color-text);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .community-contact-panel p {
      margin: 0;
    }

    .community-contact-links {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 18px;
      margin-top: 6px;
    }

    .community-email,
    .community-secondary-link {
      color: var(--color-primary);
      font-weight: 600;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
    }

    .community-email:hover,
    .community-secondary-link:hover {
      color: var(--color-accent);
    }

    @media (max-width: 720px) {
      .community-main section {
        padding: 64px 0;
      }

      .community-hero {
        min-height: 0;
        padding-top: 48px !important;
      }

      .community-space-row,
      .community-space-row:nth-of-type(even) {
        grid-template-columns: 1fr;
        gap: 18px;
      }

      .community-space-row:nth-of-type(even) img {
        order: 0;
      }

      .community-space-row img {
        height: auto;
        aspect-ratio: 3 / 2;
      }

      .community-soft-band {
        padding: 24px;
      }

      .community-session {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .community-status-row {
        grid-template-columns: 48px minmax(0, 1fr);
      }

      .community-status-note {
        grid-column: 2;
        text-align: left;
      }

      .community-contact {
        padding-bottom: 64px !important;
      }

      .community-contact .community-button {
        width: 100%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .community-button {
        transition: none;
      }

      .community-button:hover {
        transform: none;
      }
    }

/* community.html */
.footer-heading {
		font-size: 0.75rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		font-weight: 700;
		color: var(--site-text);
		margin: 0 0 0.5rem;
	}

	.footer-link {
		display: inline-block;
		padding: 0.25rem 0;
		color: var(--site-muted);
		text-decoration: none;
		transition: color 0.15s ease, transform 0.15s ease;
	}

	.footer-link:hover {
		color: var(--site-primary);
		transform: translateX(4px);
	}

/* Inline style from community.html */
.extracted-community-html-1 { min-height:64px; }

/* Inline style from community.html */
.extracted-community-html-1 { text-decoration:none;color:var(--site-text); }

/* Inline style from community.html */
.extracted-community-html-1 { width:42px;height:42px; }

/* Inline style from community.html */
.extracted-community-html-1 { font-size:1.5rem; }

/* Inline style from community.html */
.extracted-community-html-1 { font-size:1.15rem; }

/* Inline style from community.html */
.extracted-community-html-1 { background:var(--site-surface); }

/* Inline style from community.html */
.extracted-community-html-1 { border-bottom:none; }

/* Inline style from community.html */
.extracted-community-html-1 { font-size:1.15rem; }

/* Inline style from community.html */
.extracted-community-html-1 { border-top:1px solid var(--site-border);background-image:linear-gradient(160deg, color-mix(in oklch, var(--site-primary) 12%, var(--site-bg)), var(--site-bg) 55%, color-mix(in oklch, var(--site-accent) 14%, var(--site-bg))); }

/* Inline style from community.html */
.extracted-community-html-1 { font-size:1.5rem; }

/* Inline style from community.html */
.extracted-community-html-1 { max-width:40rem; }

/* Inline style from community.html */
.extracted-community-html-1 { font-size:1.35rem; }

/* Inline style from community.html */
.extracted-community-html-1 { font-size:1.35rem; }

/* Inline style from community.html */
.extracted-community-html-1 { font-size:1.35rem; }

/* Inline style from community.html */
.extracted-community-html-1 { width:40px;height:40px; }

/* Inline style from community.html */
.extracted-community-html-1 { font-size:1.25rem; }

/* Inline style from community.html */
.extracted-community-html-1 { width:40px;height:40px; }

/* Inline style from community.html */
.extracted-community-html-1 { font-size:1.25rem; }

/* Inline style from community.html */
.extracted-community-html-1 { width:40px;height:40px; }

/* Inline style from community.html */
.extracted-community-html-1 { font-size:1.25rem; }

/* Inline style from community.html */
.extracted-community-html-1 { color:var(--site-text); }

/* contact.html */
:root {
	--site-bg: #EDFFF9;
	--site-surface: #D3FAED;
	--site-text: #0F1211;
	--site-muted: #353C3A;
	--site-border: #C8E6DC;
	--site-primary: #229379;
	--site-on-primary: #000000;
	--site-secondary: #629091;
	--site-on-secondary: #000000;
	--site-accent: #C28698;
	--site-on-accent: #000000;
	--site-success: #22C55E;
	--site-warning: #F59E0B;
	--site-error: #EF4444;
	--site-info: #3B82F6;

	--color-bg: var(--site-bg);
	--color-surface: var(--site-surface);
	--color-text: var(--site-text);
	--color-muted: var(--site-muted);
	--color-border: var(--site-border);
	--color-primary: var(--site-primary);
	--color-on-primary: var(--site-on-primary);
	--color-secondary: var(--site-secondary);
	--color-on-secondary: var(--site-on-secondary);
	--color-accent: var(--site-accent);
	--color-on-accent: var(--site-on-accent);
	--color-success: var(--site-success);
	--color-warning: var(--site-warning);
	--color-error: var(--site-error);
	--color-info: var(--site-info);

	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--site-bg: #02110C;
		--site-surface: #081E18;
		--site-text: #DBE8E3;
		--site-muted: #A3B6AF;
		--site-border: #1B332C;
		--site-primary: #62E3C0;
		--site-on-primary: #000000;
		--site-secondary: #9BCBCC;
		--site-on-secondary: #000000;
		--site-accent: #DFB6C1;
		--site-on-accent: #000000;
	}
}

/* ==========================================================================
     BASE + SHARED SHELL
     ========================================================================== */
* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 300;
	background: var(--site-bg);
	color: var(--site-text);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; margin: 0; }

.col {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 32px;
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	border-bottom: 1px solid var(--site-border);
	background-image: linear-gradient(115deg, color-mix(in oklch, var(--site-primary) 14%, var(--site-bg)), var(--site-bg) 48%, color-mix(in oklch, var(--site-accent) 16%, var(--site-bg)));
	backdrop-filter: blur(12px);
}

/* ==========================================================================
     GRADIENT COMPONENTS
     ========================================================================== */
.btn-gradient {
	background-image: linear-gradient(115deg, var(--site-primary), var(--site-accent));
	color: var(--site-on-primary);
	border: none;
	text-decoration: none;
	box-shadow: 0 6px 18px color-mix(in oklch, var(--site-primary) 32%, transparent);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-gradient:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px color-mix(in oklch, var(--site-accent) 38%, transparent);
}

.gradient-text {
	background-image: linear-gradient(100deg, var(--site-primary), var(--site-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: color-mix(in oklch, var(--site-accent) 16%, transparent);
	color: var(--site-primary);
	flex-shrink: 0;
}

.nav-link {
	color: var(--site-text);
	text-decoration: none;
	padding: 0.35rem 0;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-link:hover {
	color: var(--site-primary);
	border-bottom-color: var(--site-primary);
}

.mobile-link {
	display: block;
	color: var(--site-text);
	text-decoration: none;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--site-border);
}

.mobile-link:hover { color: var(--site-primary); }

@media (max-width: 720px) {
	.col { padding: 0 20px; }
}

/* contact.html */
@theme {
  --color-primary: var(--site-primary);
  --color-on-primary: var(--site-on-primary);
  --color-secondary: var(--site-secondary);
  --color-on-secondary: var(--site-on-secondary);
  --color-accent: var(--site-accent);
  --color-on-accent: var(--site-on-accent);
  --color-bg: var(--site-bg);
  --color-surface: var(--site-surface);
  --color-text: var(--site-text);
  --color-muted: var(--site-muted);
  --color-border: var(--site-border);
  --color-success: var(--site-success);
  --color-warning: var(--site-warning);
  --color-error: var(--site-error);
  --color-info: var(--site-info);
}

/* contact.html */
.contact-page {
      color: var(--color-text);
    }

    .contact-page > section {
      width: 100%;
      height: auto;
      padding: 96px 0;
      border-bottom: 1px solid var(--color-border);
    }

    .contact-hero {
      min-height: 420px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 20px;
      background:
        radial-gradient(ellipse at 88% 18%, color-mix(in oklch, var(--color-accent) 20%, transparent), transparent 42%),
        radial-gradient(ellipse at 10% 90%, color-mix(in oklch, var(--color-primary) 15%, transparent), transparent 48%);
    }

    .contact-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin: 0;
      color: var(--color-primary);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .contact-page h1,
    .contact-page h2 {
      color: var(--color-text);
      font-weight: 700;
      letter-spacing: -0.035em;
    }

    .contact-page h1 {
      max-width: 760px;
      font-size: clamp(2.75rem, 7vw, 5.3rem);
      line-height: 1.04;
    }

    .contact-page h2 {
      font-size: clamp(1.9rem, 4vw, 2.7rem);
      line-height: 1.12;
    }

    .contact-gradient-text {
      background: linear-gradient(100deg, var(--color-primary), var(--color-accent));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .contact-lede {
      max-width: 660px;
      margin: 0;
      color: var(--color-muted);
      font-size: 1.1rem;
      line-height: 1.75;
      font-weight: 300;
    }

    .contact-hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 8px;
    }

    .contact-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 13px;
      border: 1px solid var(--color-border);
      border-radius: 999px;
      background: color-mix(in oklch, var(--color-surface) 72%, transparent);
      color: var(--color-text);
      font-size: 0.88rem;
    }

    .contact-page .icon-tile {
      display: inline-flex;
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: color-mix(in oklch, var(--color-accent) 16%, transparent);
      color: var(--color-primary);
    }

    .contact-action {
      display: inline-flex;
      min-height: 48px;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 10px;
      padding: 12px 21px;
      border: 0;
      border-radius: 999px;
      background: linear-gradient(115deg, var(--color-primary), var(--color-accent));
      color: var(--color-on-primary);
      box-shadow: 0 6px 18px color-mix(in oklch, var(--color-primary) 32%, transparent);
      font: inherit;
      font-size: 0.95rem;
      font-weight: 700;
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .contact-action:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 28px color-mix(in oklch, var(--color-accent) 38%, transparent);
    }

    .contact-form-section {
      background:
        linear-gradient(115deg, color-mix(in oklch, var(--color-primary) 9%, var(--color-bg)), var(--color-bg) 54%, color-mix(in oklch, var(--color-accent) 10%, var(--color-bg)));
      color: var(--color-text);
    }

    .contact-form-layout {
      display: grid;
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
      gap: 48px;
      align-items: start;
    }

    .contact-form-copy p,
    .contact-service-copy {
      max-width: 720px;
      color: var(--color-muted);
      font-weight: 300;
      line-height: 1.8;
    }

    .contact-form {
      padding: 28px;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      background: var(--color-surface);
      color: var(--color-text);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .contact-form label {
      display: block;
      margin-bottom: 9px;
      color: var(--color-text);
      font-size: 0.94rem;
      font-weight: 600;
    }

    .contact-form input {
      width: 100%;
      min-height: 48px;
      padding: 12px 14px;
      border: 1px solid var(--color-border);
      border-radius: 10px;
      background: var(--color-bg);
      color: var(--color-text);
      font: inherit;
      outline: none;
    }

    .contact-form input:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 20%, transparent);
    }

    .contact-form .contact-action {
      width: 100%;
      min-height: 48px;
      cursor: pointer;
    }

    .contact-form-note {
      margin: 14px 0 0;
      color: var(--color-muted);
      font-size: 0.88rem;
      line-height: 1.6;
    }

    .contact-status {
      min-height: 1.5em;
      margin: 12px 0 0;
      color: var(--color-text);
      font-size: 0.9rem;
    }

    .contact-details-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-top: 30px;
    }

    .contact-detail {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 18px;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      background: var(--color-surface);
      color: var(--color-text);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .contact-detail:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 20px color-mix(in oklch, var(--color-primary) 18%, transparent);
    }

    .contact-detail-copy {
      display: flex;
      min-width: 0;
      flex-direction: column;
      gap: 4px;
    }

    .contact-detail-label {
      color: var(--color-muted);
      font-size: 0.79rem;
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .contact-detail-value {
      overflow-wrap: anywhere;
      color: var(--color-text);
      font-size: 1rem;
      line-height: 1.5;
    }

    .contact-service-section {
      background:
        radial-gradient(ellipse at 100% 0%, color-mix(in oklch, var(--color-accent) 12%, transparent), transparent 45%);
    }

    .contact-service-copy {
      margin: 20px 0 0;
      font-size: 1.05rem;
    }

    .contact-service-links {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 24px;
    }

    .contact-service-link {
      display: inline-flex;
      min-height: 44px;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border: 1px solid var(--color-border);
      border-radius: 12px;
      background: var(--color-surface);
      color: var(--color-text);
      font-weight: 600;
      text-decoration: none;
      transition: transform 0.2s ease, border-color 0.2s ease;
    }

    .contact-service-link:hover {
      transform: translateY(-4px);
      border-color: var(--color-primary);
    }

    @media (max-width: 720px) {
      .contact-page > section {
        padding: 64px 0;
      }

      .contact-hero {
        min-height: 0;
      }

      .contact-form-layout {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      .contact-form {
        padding: 22px;
      }

      .contact-action {
        width: 100%;
      }

      .contact-hero-meta {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .contact-action,
      .contact-detail,
      .contact-service-link {
        transition: none;
      }

      .contact-action:hover,
      .contact-detail:hover,
      .contact-service-link:hover {
        transform: none;
      }
    }

/* contact.html */
.footer-heading {
		font-size: 0.75rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		font-weight: 700;
		color: var(--site-text);
		margin: 0 0 0.5rem;
	}

	.footer-link {
		display: inline-block;
		padding: 0.25rem 0;
		color: var(--site-muted);
		text-decoration: none;
		transition: color 0.15s ease, transform 0.15s ease;
	}

	.footer-link:hover {
		color: var(--site-primary);
		transform: translateX(4px);
	}

/* Inline style from contact.html */
.extracted-contact-html-1 { min-height:64px; }

/* Inline style from contact.html */
.extracted-contact-html-1 { text-decoration:none;color:var(--site-text); }

/* Inline style from contact.html */
.extracted-contact-html-1 { width:42px;height:42px; }

/* Inline style from contact.html */
.extracted-contact-html-1 { font-size:1.5rem; }

/* Inline style from contact.html */
.extracted-contact-html-1 { font-size:1.15rem; }

/* Inline style from contact.html */
.extracted-contact-html-1 { background:var(--site-surface); }

/* Inline style from contact.html */
.extracted-contact-html-1 { border-bottom:none; }

/* Inline style from contact.html */
.extracted-contact-html-1 { font-size:1.15rem; }

/* Inline style from contact.html */
.extracted-contact-html-1 { border-top:1px solid var(--site-border);background-image:linear-gradient(160deg, color-mix(in oklch, var(--site-primary) 12%, var(--site-bg)), var(--site-bg) 55%, color-mix(in oklch, var(--site-accent) 14%, var(--site-bg))); }

/* Inline style from contact.html */
.extracted-contact-html-1 { font-size:1.5rem; }

/* Inline style from contact.html */
.extracted-contact-html-1 { max-width:40rem; }

/* Inline style from contact.html */
.extracted-contact-html-1 { font-size:1.35rem; }

/* Inline style from contact.html */
.extracted-contact-html-1 { font-size:1.35rem; }

/* Inline style from contact.html */
.extracted-contact-html-1 { font-size:1.35rem; }

/* Inline style from contact.html */
.extracted-contact-html-1 { width:40px;height:40px; }

/* Inline style from contact.html */
.extracted-contact-html-1 { font-size:1.25rem; }

/* Inline style from contact.html */
.extracted-contact-html-1 { width:40px;height:40px; }

/* Inline style from contact.html */
.extracted-contact-html-1 { font-size:1.25rem; }

/* Inline style from contact.html */
.extracted-contact-html-1 { width:40px;height:40px; }

/* Inline style from contact.html */
.extracted-contact-html-1 { font-size:1.25rem; }

/* Inline style from contact.html */
.extracted-contact-html-1 { color:var(--site-text); }

/* game-catalog.html */
:root {
	--site-bg: #EDFFF9;
	--site-surface: #D3FAED;
	--site-text: #0F1211;
	--site-muted: #353C3A;
	--site-border: #C8E6DC;
	--site-primary: #229379;
	--site-on-primary: #000000;
	--site-secondary: #629091;
	--site-on-secondary: #000000;
	--site-accent: #C28698;
	--site-on-accent: #000000;
	--site-success: #22C55E;
	--site-warning: #F59E0B;
	--site-error: #EF4444;
	--site-info: #3B82F6;

	--color-bg: var(--site-bg);
	--color-surface: var(--site-surface);
	--color-text: var(--site-text);
	--color-muted: var(--site-muted);
	--color-border: var(--site-border);
	--color-primary: var(--site-primary);
	--color-on-primary: var(--site-on-primary);
	--color-secondary: var(--site-secondary);
	--color-on-secondary: var(--site-on-secondary);
	--color-accent: var(--site-accent);
	--color-on-accent: var(--site-on-accent);
	--color-success: var(--site-success);
	--color-warning: var(--site-warning);
	--color-error: var(--site-error);
	--color-info: var(--site-info);

	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--site-bg: #02110C;
		--site-surface: #081E18;
		--site-text: #DBE8E3;
		--site-muted: #A3B6AF;
		--site-border: #1B332C;
		--site-primary: #62E3C0;
		--site-on-primary: #000000;
		--site-secondary: #9BCBCC;
		--site-on-secondary: #000000;
		--site-accent: #DFB6C1;
		--site-on-accent: #000000;
	}
}

/* ==========================================================================
     BASE + SHARED SHELL
     ========================================================================== */
* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 300;
	background: var(--site-bg);
	color: var(--site-text);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; margin: 0; }

.col {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 32px;
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	border-bottom: 1px solid var(--site-border);
	background-image: linear-gradient(115deg, color-mix(in oklch, var(--site-primary) 14%, var(--site-bg)), var(--site-bg) 48%, color-mix(in oklch, var(--site-accent) 16%, var(--site-bg)));
	backdrop-filter: blur(12px);
}

/* ==========================================================================
     GRADIENT COMPONENTS
     ========================================================================== */
.btn-gradient {
	background-image: linear-gradient(115deg, var(--site-primary), var(--site-accent));
	color: var(--site-on-primary);
	border: none;
	text-decoration: none;
	box-shadow: 0 6px 18px color-mix(in oklch, var(--site-primary) 32%, transparent);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-gradient:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px color-mix(in oklch, var(--site-accent) 38%, transparent);
}

.gradient-text {
	background-image: linear-gradient(100deg, var(--site-primary), var(--site-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: color-mix(in oklch, var(--site-accent) 16%, transparent);
	color: var(--site-primary);
	flex-shrink: 0;
}

.nav-link {
	color: var(--site-text);
	text-decoration: none;
	padding: 0.35rem 0;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-link:hover {
	color: var(--site-primary);
	border-bottom-color: var(--site-primary);
}

.mobile-link {
	display: block;
	color: var(--site-text);
	text-decoration: none;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--site-border);
}

.mobile-link:hover { color: var(--site-primary); }

@media (max-width: 720px) {
	.col { padding: 0 20px; }
}

/* game-catalog.html */
@theme {
  --color-primary: var(--site-primary);
  --color-on-primary: var(--site-on-primary);
  --color-secondary: var(--site-secondary);
  --color-on-secondary: var(--site-on-secondary);
  --color-accent: var(--site-accent);
  --color-on-accent: var(--site-on-accent);
  --color-bg: var(--site-bg);
  --color-surface: var(--site-surface);
  --color-text: var(--site-text);
  --color-muted: var(--site-muted);
  --color-border: var(--site-border);
  --color-success: var(--site-success);
  --color-warning: var(--site-warning);
  --color-error: var(--site-error);
  --color-info: var(--site-info);
}

/* game-catalog.html */
.catalog-main {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 32px;
      color: var(--color-text);
    }

    .catalog-main > section {
      width: 100%;
      height: auto;
      padding: 96px 0;
      border-bottom: 1px solid var(--color-border);
    }

    .catalog-hero {
      display: flex;
      flex-direction: column;
      gap: 24px;
      min-height: 420px;
    }

    .catalog-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--color-primary);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .catalog-title {
      max-width: 780px;
      font-family: var(--font-display);
      font-size: clamp(2.5rem, 6vw, 4.6rem);
      line-height: 1.08;
      letter-spacing: -0.045em;
    }

    .catalog-gradient-text {
      background: linear-gradient(100deg, var(--color-primary), var(--color-accent));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .catalog-lede {
      max-width: 680px;
      color: var(--color-muted);
      font-size: 1.12rem;
      line-height: 1.75;
    }

    .catalog-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      align-self: flex-start;
      min-height: 52px;
      padding: 0.85rem 1.35rem;
      border: 0;
      border-radius: 999px;
      background: linear-gradient(115deg, var(--color-primary), var(--color-accent));
      box-shadow: 0 6px 18px color-mix(in oklch, var(--color-primary) 30%, transparent);
      color: var(--color-on-primary);
      font-weight: 700;
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .catalog-button:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 26px color-mix(in oklch, var(--color-accent) 36%, transparent);
    }

    .catalog-button:focus-visible,
    .catalog-email:focus-visible {
      outline: 3px solid var(--color-secondary);
      outline-offset: 4px;
    }

    .catalog-hero-image-wrap {
      overflow: hidden;
      padding: 7px;
      border-radius: 16px;
      background: linear-gradient(115deg, var(--color-primary), var(--color-accent));
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .catalog-hero-image {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 11px;
      object-fit: cover;
    }

    .catalog-section-heading {
      margin-bottom: 16px;
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3rem);
      line-height: 1.16;
      letter-spacing: -0.035em;
    }

    .catalog-section-intro {
      max-width: 680px;
      margin-bottom: 34px;
      color: var(--color-muted);
      line-height: 1.75;
    }

    .catalog-games {
      background: linear-gradient(180deg, color-mix(in oklch, var(--color-surface) 44%, var(--color-bg)), var(--color-bg));
      color: var(--color-text);
    }

    .catalog-row {
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      align-items: center;
      gap: 32px;
      padding: 30px 0;
      border-top: 1px solid var(--color-border);
    }

    .catalog-row:nth-of-type(even) {
      grid-template-columns: minmax(0, 1fr) 280px;
    }

    .catalog-row:nth-of-type(even) .catalog-row-image {
      order: 2;
    }

    .catalog-row-image {
      display: block;
      width: 100%;
      aspect-ratio: 3 / 2;
      border-radius: 16px;
      object-fit: cover;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .catalog-row-image:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
    }

    .catalog-row-copy h3 {
      margin-bottom: 10px;
      font-size: 1.4rem;
      font-weight: 700;
      letter-spacing: -0.025em;
    }

    .catalog-row-copy p {
      max-width: 570px;
      color: var(--color-muted);
      line-height: 1.7;
    }

    .catalog-mode {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 14px;
      padding: 7px 11px;
      border: 1px solid var(--color-border);
      border-radius: 999px;
      color: var(--color-text);
      font-size: 0.86rem;
      font-weight: 600;
    }

    .catalog-mode .material-symbols-outlined {
      color: var(--color-primary);
      font-size: 1.1rem;
    }

    .catalog-platform-copy {
      max-width: 720px;
      color: var(--color-muted);
      font-size: 1.05rem;
      line-height: 1.85;
    }

    .catalog-platform-copy p + p {
      margin-top: 18px;
    }

    .catalog-platform-note {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      max-width: 720px;
      margin-top: 30px;
      padding: 20px;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      background: var(--color-surface);
      color: var(--color-text);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .catalog-icon-tile {
      display: inline-flex;
      flex: 0 0 48px;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: color-mix(in oklch, var(--color-accent) 16%, transparent);
      color: var(--color-primary);
    }

    .catalog-platform-note p {
      line-height: 1.65;
    }

    .catalog-community-list {
      max-width: 760px;
      margin-top: 30px;
    }

    .catalog-community-item {
      padding: 22px 0;
      border-top: 1px solid var(--color-border);
    }

    .catalog-community-item h3 {
      margin-top: 14px;
      font-size: 1.2rem;
      font-weight: 700;
    }

    .catalog-community-item p {
      max-width: 650px;
      margin-top: 7px;
      color: var(--color-muted);
      line-height: 1.7;
    }

    .catalog-contact-panel {
      padding: clamp(26px, 5vw, 52px);
      border-radius: 16px;
      background: linear-gradient(115deg, var(--color-primary), var(--color-accent));
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      color: var(--color-on-primary);
    }

    .catalog-contact-panel .catalog-section-heading {
      max-width: 650px;
    }

    .catalog-contact-panel p {
      max-width: 620px;
      line-height: 1.7;
    }

    .catalog-contact-detail {
      margin-top: 8px;
      opacity: 0.82;
      font-size: 0.95rem;
    }

    .catalog-email {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      margin-top: 24px;
      padding: 16px 18px;
      border: 1px solid color-mix(in oklch, var(--color-on-primary) 24%, transparent);
      border-radius: 16px;
      background: color-mix(in oklch, var(--color-bg) 76%, transparent);
      color: var(--color-text);
      font-weight: 700;
      text-decoration: none;
      overflow-wrap: anywhere;
      transition: transform 0.2s ease;
    }

    .catalog-email:hover {
      transform: translateY(-4px);
    }

    @media (max-width: 720px) {
      .catalog-main {
        padding: 0 20px;
      }

      .catalog-main > section {
        padding: 64px 0;
      }

      .catalog-row,
      .catalog-row:nth-of-type(even) {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .catalog-row:nth-of-type(even) .catalog-row-image {
        order: 0;
      }

      .catalog-button {
        width: 100%;
      }

      .catalog-email {
        align-items: flex-start;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .catalog-button,
      .catalog-row-image,
      .catalog-email {
        transition: none;
      }
    }

/* game-catalog.html */
.footer-heading {
		font-size: 0.75rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		font-weight: 700;
		color: var(--site-text);
		margin: 0 0 0.5rem;
	}

	.footer-link {
		display: inline-block;
		padding: 0.25rem 0;
		color: var(--site-muted);
		text-decoration: none;
		transition: color 0.15s ease, transform 0.15s ease;
	}

	.footer-link:hover {
		color: var(--site-primary);
		transform: translateX(4px);
	}

/* Inline style from game-catalog.html */
.extracted-game-catalog-html-1 { min-height:64px; }

/* Inline style from game-catalog.html */
.extracted-game-catalog-html-1 { text-decoration:none;color:var(--site-text); }

/* Inline style from game-catalog.html */
.extracted-game-catalog-html-1 { width:42px;height:42px; }

/* Inline style from game-catalog.html */
.extracted-game-catalog-html-1 { font-size:1.5rem; }

/* Inline style from game-catalog.html */
.extracted-game-catalog-html-1 { font-size:1.15rem; }

/* Inline style from game-catalog.html */
.extracted-game-catalog-html-1 { background:var(--site-surface); }

/* Inline style from game-catalog.html */
.extracted-game-catalog-html-1 { border-bottom:none; }

/* Inline style from game-catalog.html */
.extracted-game-catalog-html-1 { font-size:1.15rem; }

/* Inline style from game-catalog.html */
.extracted-game-catalog-html-1 { border-top:1px solid var(--site-border);background-image:linear-gradient(160deg, color-mix(in oklch, var(--site-primary) 12%, var(--site-bg)), var(--site-bg) 55%, color-mix(in oklch, var(--site-accent) 14%, var(--site-bg))); }

/* Inline style from game-catalog.html */
.extracted-game-catalog-html-1 { font-size:1.5rem; }

/* Inline style from game-catalog.html */
.extracted-game-catalog-html-1 { max-width:40rem; }

/* Inline style from game-catalog.html */
.extracted-game-catalog-html-1 { font-size:1.35rem; }

/* Inline style from game-catalog.html */
.extracted-game-catalog-html-1 { font-size:1.35rem; }

/* Inline style from game-catalog.html */
.extracted-game-catalog-html-1 { font-size:1.35rem; }

/* Inline style from game-catalog.html */
.extracted-game-catalog-html-1 { width:40px;height:40px; }

/* Inline style from game-catalog.html */
.extracted-game-catalog-html-1 { font-size:1.25rem; }

/* Inline style from game-catalog.html */
.extracted-game-catalog-html-1 { width:40px;height:40px; }

/* Inline style from game-catalog.html */
.extracted-game-catalog-html-1 { font-size:1.25rem; }

/* Inline style from game-catalog.html */
.extracted-game-catalog-html-1 { width:40px;height:40px; }

/* Inline style from game-catalog.html */
.extracted-game-catalog-html-1 { font-size:1.25rem; }

/* Inline style from game-catalog.html */
.extracted-game-catalog-html-1 { color:var(--site-text); }

/* game-development.html */
:root {
	--site-bg: #EDFFF9;
	--site-surface: #D3FAED;
	--site-text: #0F1211;
	--site-muted: #353C3A;
	--site-border: #C8E6DC;
	--site-primary: #229379;
	--site-on-primary: #000000;
	--site-secondary: #629091;
	--site-on-secondary: #000000;
	--site-accent: #C28698;
	--site-on-accent: #000000;
	--site-success: #22C55E;
	--site-warning: #F59E0B;
	--site-error: #EF4444;
	--site-info: #3B82F6;

	--color-bg: var(--site-bg);
	--color-surface: var(--site-surface);
	--color-text: var(--site-text);
	--color-muted: var(--site-muted);
	--color-border: var(--site-border);
	--color-primary: var(--site-primary);
	--color-on-primary: var(--site-on-primary);
	--color-secondary: var(--site-secondary);
	--color-on-secondary: var(--site-on-secondary);
	--color-accent: var(--site-accent);
	--color-on-accent: var(--site-on-accent);
	--color-success: var(--site-success);
	--color-warning: var(--site-warning);
	--color-error: var(--site-error);
	--color-info: var(--site-info);

	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--site-bg: #02110C;
		--site-surface: #081E18;
		--site-text: #DBE8E3;
		--site-muted: #A3B6AF;
		--site-border: #1B332C;
		--site-primary: #62E3C0;
		--site-on-primary: #000000;
		--site-secondary: #9BCBCC;
		--site-on-secondary: #000000;
		--site-accent: #DFB6C1;
		--site-on-accent: #000000;
	}
}

/* ==========================================================================
     BASE + SHARED SHELL
     ========================================================================== */
* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 300;
	background: var(--site-bg);
	color: var(--site-text);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; margin: 0; }

.col {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 32px;
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	border-bottom: 1px solid var(--site-border);
	background-image: linear-gradient(115deg, color-mix(in oklch, var(--site-primary) 14%, var(--site-bg)), var(--site-bg) 48%, color-mix(in oklch, var(--site-accent) 16%, var(--site-bg)));
	backdrop-filter: blur(12px);
}

/* ==========================================================================
     GRADIENT COMPONENTS
     ========================================================================== */
.btn-gradient {
	background-image: linear-gradient(115deg, var(--site-primary), var(--site-accent));
	color: var(--site-on-primary);
	border: none;
	text-decoration: none;
	box-shadow: 0 6px 18px color-mix(in oklch, var(--site-primary) 32%, transparent);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-gradient:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px color-mix(in oklch, var(--site-accent) 38%, transparent);
}

.gradient-text {
	background-image: linear-gradient(100deg, var(--site-primary), var(--site-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: color-mix(in oklch, var(--site-accent) 16%, transparent);
	color: var(--site-primary);
	flex-shrink: 0;
}

.nav-link {
	color: var(--site-text);
	text-decoration: none;
	padding: 0.35rem 0;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-link:hover {
	color: var(--site-primary);
	border-bottom-color: var(--site-primary);
}

.mobile-link {
	display: block;
	color: var(--site-text);
	text-decoration: none;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--site-border);
}

.mobile-link:hover { color: var(--site-primary); }

@media (max-width: 720px) {
	.col { padding: 0 20px; }
}

/* game-development.html */
@theme {
  --color-primary: var(--site-primary);
  --color-on-primary: var(--site-on-primary);
  --color-secondary: var(--site-secondary);
  --color-on-secondary: var(--site-on-secondary);
  --color-accent: var(--site-accent);
  --color-on-accent: var(--site-on-accent);
  --color-bg: var(--site-bg);
  --color-surface: var(--site-surface);
  --color-text: var(--site-text);
  --color-muted: var(--site-muted);
  --color-border: var(--site-border);
  --color-success: var(--site-success);
  --color-warning: var(--site-warning);
  --color-error: var(--site-error);
  --color-info: var(--site-info);
}

/* game-development.html */
.dev-main {
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
      color: var(--color-text);
      background: var(--color-bg);
    }

    .dev-main * {
      box-sizing: border-box;
    }

    .dev-section {
      width: 100%;
      height: auto;
      padding: 96px 0;
      border-bottom: 1px solid var(--color-border);
      background: var(--color-bg);
      color: var(--color-text);
    }

    .dev-hero {
      min-height: 420px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 24px;
      padding-top: 112px;
    }

    .dev-kicker {
      margin: 0;
      color: var(--color-primary);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .dev-title {
      max-width: 800px;
      font-family: var(--font-display);
      font-size: clamp(2.6rem, 7vw, 5rem);
      font-weight: 700;
      line-height: 1.06;
      letter-spacing: -0.045em;
    }

    .dev-gradient-text {
      background-image: linear-gradient(100deg, var(--color-primary), var(--color-accent));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .dev-lede {
      max-width: 680px;
      margin: 0;
      color: var(--color-muted);
      font-size: clamp(1.05rem, 2vw, 1.2rem);
      font-weight: 300;
      line-height: 1.75;
    }

    .dev-button {
      display: inline-flex;
      min-height: 52px;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 13px 23px;
      border: 0;
      border-radius: 999px;
      background: linear-gradient(115deg, var(--color-primary), var(--color-accent));
      color: var(--color-on-primary);
      box-shadow: 0 6px 18px color-mix(in oklch, var(--color-primary) 32%, transparent);
      font-size: 0.95rem;
      font-weight: 700;
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .dev-button:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 28px color-mix(in oklch, var(--color-accent) 38%, transparent);
    }

    .dev-button .material-symbols-outlined {
      font-size: 1.2rem;
    }

    .dev-hero-image {
      width: 100%;
      margin-top: 16px;
      padding: 7px;
      overflow: hidden;
      border-radius: 18px;
      background: linear-gradient(115deg, var(--color-primary), var(--color-accent));
      box-shadow: 0 8px 24px color-mix(in oklch, var(--color-primary) 18%, transparent);
    }

    .dev-hero-image img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      border-radius: 12px;
    }

    .dev-section-heading {
      max-width: 760px;
      margin: 0 0 16px;
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3.1rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.035em;
    }

    .dev-section-intro {
      max-width: 690px;
      margin: 0 0 34px;
      color: var(--color-muted);
      font-size: 1.05rem;
      font-weight: 300;
      line-height: 1.75;
    }

    .dev-row {
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      align-items: center;
      gap: 32px;
      margin-top: 28px;
      padding: 20px;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      background: var(--color-surface);
      color: var(--color-text);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .dev-row:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 22px color-mix(in oklch, var(--color-primary) 18%, transparent);
    }

    .dev-row:nth-child(even) {
      grid-template-columns: minmax(0, 1fr) 280px;
    }

    .dev-row:nth-child(even) .dev-row-image {
      order: 2;
    }

    .dev-row-image {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
      border-radius: 12px;
      object-fit: cover;
    }

    .dev-row-copy {
      display: flex;
      align-items: flex-start;
      gap: 18px;
    }

    .dev-icon-tile {
      display: inline-flex;
      width: 48px;
      height: 48px;
      flex: 0 0 48px;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: color-mix(in oklch, var(--color-accent) 16%, transparent);
      color: var(--color-primary);
    }

    .dev-icon-tile .material-symbols-outlined {
      font-size: 1.55rem;
    }

    .dev-row h3 {
      margin: 1px 0 8px;
      font-size: 1.3rem;
      font-weight: 700;
      letter-spacing: -0.025em;
    }

    .dev-row p {
      margin: 0;
      color: var(--color-muted);
      font-size: 0.98rem;
      font-weight: 300;
      line-height: 1.7;
    }

    .dev-about {
      background:
        radial-gradient(ellipse at 95% 15%, color-mix(in oklch, var(--color-accent) 12%, transparent), transparent 42%),
        var(--color-bg);
    }

    .dev-about-copy {
      max-width: 720px;
      margin: 0;
      color: var(--color-muted);
      font-size: 1.08rem;
      font-weight: 300;
      line-height: 1.85;
    }

    .dev-process-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin: 38px 0 0;
      padding: 0;
      list-style: none;
    }

    .dev-process-step {
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr);
      gap: 20px;
      padding: 24px;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      background: var(--color-surface);
      color: var(--color-text);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      transition: transform 0.2s ease;
    }

    .dev-process-step:hover {
      transform: translateY(-4px);
    }

    .dev-step-number {
      display: inline-flex;
      width: 48px;
      height: 48px;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
      color: var(--color-on-primary);
      font-size: 1.05rem;
      font-weight: 700;
    }

    .dev-process-step h3 {
      margin: 1px 0 7px;
      font-size: 1.2rem;
      font-weight: 700;
    }

    .dev-process-step p {
      margin: 0;
      color: var(--color-muted);
      font-size: 0.96rem;
      font-weight: 300;
      line-height: 1.7;
    }

    .dev-deliverable {
      display: block;
      margin-top: 9px;
      color: var(--color-text);
      font-size: 0.9rem;
      line-height: 1.6;
    }

    .dev-platform-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
      max-width: 820px;
      margin-top: 34px;
    }

    .dev-platform-item {
      display: flex;
      align-items: flex-start;
      gap: 18px;
      padding: 20px;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      background: var(--color-surface);
      color: var(--color-text);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .dev-platform-item h3 {
      margin: 1px 0 6px;
      font-size: 1.08rem;
      font-weight: 700;
    }

    .dev-platform-item p {
      margin: 0;
      color: var(--color-muted);
      font-size: 0.96rem;
      font-weight: 300;
      line-height: 1.65;
    }

    .dev-contact {
      padding: 52px;
      border: 0;
      border-radius: 16px;
      background: linear-gradient(115deg, var(--color-primary), var(--color-accent));
      color: var(--color-on-primary);
      box-shadow: 0 10px 28px color-mix(in oklch, var(--color-primary) 28%, transparent);
    }

    .dev-contact .dev-section-heading {
      max-width: 690px;
      margin-bottom: 12px;
      color: var(--color-on-primary);
    }

    .dev-contact-copy {
      margin: 0 0 22px;
      color: var(--color-on-primary);
      font-size: 1.02rem;
      font-weight: 300;
      line-height: 1.7;
    }

    .dev-contact-links {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px 24px;
    }

    .dev-email-link {
      display: inline-flex;
      min-height: 48px;
      align-items: center;
      gap: 9px;
      color: var(--color-on-primary);
      font-size: 1.05rem;
      font-weight: 700;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
    }

    .dev-phone {
      color: var(--color-on-primary);
      font-size: 0.95rem;
      font-weight: 500;
      text-decoration: none;
    }

    @media (max-width: 720px) {
      .dev-section {
        padding: 64px 0;
      }

      .dev-hero {
        min-height: 0;
        padding-top: 72px;
      }

      .dev-row,
      .dev-row:nth-child(even) {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 16px;
      }

      .dev-row:nth-child(even) .dev-row-image {
        order: 0;
      }

      .dev-row-image {
        aspect-ratio: 16 / 10;
      }

      .dev-row-copy {
        gap: 14px;
      }

      .dev-process-step {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 14px;
        padding: 18px;
      }

      .dev-contact {
        padding: 30px 22px;
      }

      .dev-contact-links {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
      }

      .dev-email-link {
        max-width: 100%;
        overflow-wrap: anywhere;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .dev-button,
      .dev-row,
      .dev-process-step {
        transition: none;
      }
    }

/* game-development.html */
.footer-heading {
		font-size: 0.75rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		font-weight: 700;
		color: var(--site-text);
		margin: 0 0 0.5rem;
	}

	.footer-link {
		display: inline-block;
		padding: 0.25rem 0;
		color: var(--site-muted);
		text-decoration: none;
		transition: color 0.15s ease, transform 0.15s ease;
	}

	.footer-link:hover {
		color: var(--site-primary);
		transform: translateX(4px);
	}

/* Inline style from game-development.html */
.extracted-game-development-html-1 { min-height:64px; }

/* Inline style from game-development.html */
.extracted-game-development-html-1 { text-decoration:none;color:var(--site-text); }

/* Inline style from game-development.html */
.extracted-game-development-html-1 { width:42px;height:42px; }

/* Inline style from game-development.html */
.extracted-game-development-html-1 { font-size:1.5rem; }

/* Inline style from game-development.html */
.extracted-game-development-html-1 { font-size:1.15rem; }

/* Inline style from game-development.html */
.extracted-game-development-html-1 { background:var(--site-surface); }

/* Inline style from game-development.html */
.extracted-game-development-html-1 { border-bottom:none; }

/* Inline style from game-development.html */
.extracted-game-development-html-1 { font-size:1.15rem; }

/* Inline style from game-development.html */
.extracted-game-development-html-1 { border-top:1px solid var(--site-border);background-image:linear-gradient(160deg, color-mix(in oklch, var(--site-primary) 12%, var(--site-bg)), var(--site-bg) 55%, color-mix(in oklch, var(--site-accent) 14%, var(--site-bg))); }

/* Inline style from game-development.html */
.extracted-game-development-html-1 { font-size:1.5rem; }

/* Inline style from game-development.html */
.extracted-game-development-html-1 { max-width:40rem; }

/* Inline style from game-development.html */
.extracted-game-development-html-1 { font-size:1.35rem; }

/* Inline style from game-development.html */
.extracted-game-development-html-1 { font-size:1.35rem; }

/* Inline style from game-development.html */
.extracted-game-development-html-1 { font-size:1.35rem; }

/* Inline style from game-development.html */
.extracted-game-development-html-1 { width:40px;height:40px; }

/* Inline style from game-development.html */
.extracted-game-development-html-1 { font-size:1.25rem; }

/* Inline style from game-development.html */
.extracted-game-development-html-1 { width:40px;height:40px; }

/* Inline style from game-development.html */
.extracted-game-development-html-1 { font-size:1.25rem; }

/* Inline style from game-development.html */
.extracted-game-development-html-1 { width:40px;height:40px; }

/* Inline style from game-development.html */
.extracted-game-development-html-1 { font-size:1.25rem; }

/* Inline style from game-development.html */
.extracted-game-development-html-1 { color:var(--site-text); }

/* index.html */
:root {
	--site-bg: #EDFFF9;
	--site-surface: #D3FAED;
	--site-text: #0F1211;
	--site-muted: #353C3A;
	--site-border: #C8E6DC;
	--site-primary: #229379;
	--site-on-primary: #000000;
	--site-secondary: #629091;
	--site-on-secondary: #000000;
	--site-accent: #C28698;
	--site-on-accent: #000000;
	--site-success: #22C55E;
	--site-warning: #F59E0B;
	--site-error: #EF4444;
	--site-info: #3B82F6;

	--color-bg: var(--site-bg);
	--color-surface: var(--site-surface);
	--color-text: var(--site-text);
	--color-muted: var(--site-muted);
	--color-border: var(--site-border);
	--color-primary: var(--site-primary);
	--color-on-primary: var(--site-on-primary);
	--color-secondary: var(--site-secondary);
	--color-on-secondary: var(--site-on-secondary);
	--color-accent: var(--site-accent);
	--color-on-accent: var(--site-on-accent);
	--color-success: var(--site-success);
	--color-warning: var(--site-warning);
	--color-error: var(--site-error);
	--color-info: var(--site-info);

	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--site-bg: #02110C;
		--site-surface: #081E18;
		--site-text: #DBE8E3;
		--site-muted: #A3B6AF;
		--site-border: #1B332C;
		--site-primary: #62E3C0;
		--site-on-primary: #000000;
		--site-secondary: #9BCBCC;
		--site-on-secondary: #000000;
		--site-accent: #DFB6C1;
		--site-on-accent: #000000;
	}
}

/* ==========================================================================
     BASE + SHARED SHELL
     ========================================================================== */
* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 300;
	background: var(--site-bg);
	color: var(--site-text);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; margin: 0; }

.col {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 32px;
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	border-bottom: 1px solid var(--site-border);
	background-image: linear-gradient(115deg, color-mix(in oklch, var(--site-primary) 14%, var(--site-bg)), var(--site-bg) 48%, color-mix(in oklch, var(--site-accent) 16%, var(--site-bg)));
	backdrop-filter: blur(12px);
}

/* ==========================================================================
     GRADIENT COMPONENTS
     ========================================================================== */
.btn-gradient {
	background-image: linear-gradient(115deg, var(--site-primary), var(--site-accent));
	color: var(--site-on-primary);
	border: none;
	text-decoration: none;
	box-shadow: 0 6px 18px color-mix(in oklch, var(--site-primary) 32%, transparent);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-gradient:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px color-mix(in oklch, var(--site-accent) 38%, transparent);
}

.gradient-text {
	background-image: linear-gradient(100deg, var(--site-primary), var(--site-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: color-mix(in oklch, var(--site-accent) 16%, transparent);
	color: var(--site-primary);
	flex-shrink: 0;
}

.nav-link {
	color: var(--site-text);
	text-decoration: none;
	padding: 0.35rem 0;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-link:hover {
	color: var(--site-primary);
	border-bottom-color: var(--site-primary);
}

.mobile-link {
	display: block;
	color: var(--site-text);
	text-decoration: none;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--site-border);
}

.mobile-link:hover { color: var(--site-primary); }

@media (max-width: 720px) {
	.col { padding: 0 20px; }
}

/* index.html */
@theme {
  --color-primary: var(--site-primary);
  --color-on-primary: var(--site-on-primary);
  --color-secondary: var(--site-secondary);
  --color-on-secondary: var(--site-on-secondary);
  --color-accent: var(--site-accent);
  --color-on-accent: var(--site-on-accent);
  --color-bg: var(--site-bg);
  --color-surface: var(--site-surface);
  --color-text: var(--site-text);
  --color-muted: var(--site-muted);
  --color-border: var(--site-border);
  --color-success: var(--site-success);
  --color-warning: var(--site-warning);
  --color-error: var(--site-error);
  --color-info: var(--site-info);
}

/* index.html */
.home-main {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 32px;
      background: var(--color-bg);
      color: var(--color-text);
    }

    .home-main *,
    .home-main *::before,
    .home-main *::after {
      box-sizing: border-box;
    }

    .home-main h1,
    .home-main h2,
    .home-main h3 {
      margin: 0;
      color: var(--color-text);
      font-weight: 700;
      letter-spacing: -0.035em;
      line-height: 1.12;
    }

    .home-main p {
      color: var(--color-muted);
      font-weight: 300;
      line-height: 1.75;
    }

    .home-main > section {
      width: 100%;
      height: auto;
      padding: 96px 0;
      border-bottom: 1px solid var(--color-border);
    }

    .home-main .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin: 0;
      color: var(--color-primary);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .home-main .eyebrow::before {
      width: 25px;
      height: 2px;
      background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
      content: "";
    }

    .home-main .hero {
      display: flex;
      min-height: 420px;
      flex-direction: column;
      align-items: flex-start;
      gap: 24px;
      padding-top: 120px;
    }

    .home-main .hero h1 {
      max-width: 780px;
      font-size: clamp(2.7rem, 7vw, 5.3rem);
    }

    .home-main .hero-copy {
      max-width: 700px;
      margin: 0;
      font-size: clamp(1rem, 2vw, 1.2rem);
    }

    .home-main .gradient-button {
      display: inline-flex;
      min-height: 52px;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border: 0;
      border-radius: 999px;
      padding: 14px 23px;
      background: linear-gradient(115deg, var(--color-primary), var(--color-accent));
      box-shadow: 0 6px 18px color-mix(in oklch, var(--color-primary) 32%, transparent);
      color: var(--color-on-primary);
      font-size: 0.95rem;
      font-weight: 700;
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .home-main .gradient-button:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 28px color-mix(in oklch, var(--color-accent) 38%, transparent);
    }

    .home-main .hero-media {
      width: 100%;
      margin-top: 12px;
      overflow: hidden;
      border-radius: 16px;
      padding: 7px;
      background: linear-gradient(120deg, var(--color-primary), var(--color-accent));
      box-shadow: 0 8px 24px color-mix(in oklch, var(--color-primary) 20%, transparent);
    }

    .home-main .hero-media img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      border-radius: 11px;
      object-fit: cover;
    }

    .home-main .section-heading {
      max-width: 720px;
      margin-bottom: 28px;
    }

    .home-main .section-heading h2,
    .home-main .about h2,
    .home-main .proof h2,
    .home-main .contact h2 {
      margin-top: 12px;
      font-size: clamp(2rem, 4vw, 3.2rem);
    }

    .home-main .section-heading p {
      margin: 14px 0 0;
    }

    .home-main .game-row {
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      align-items: center;
      gap: 32px;
      padding: 30px 0;
      border-bottom: 1px solid var(--color-border);
    }

    .home-main .game-row:last-of-type {
      border-bottom: 0;
    }

    .home-main .game-row:nth-of-type(even) {
      grid-template-columns: minmax(0, 1fr) 280px;
    }

    .home-main .game-row:nth-of-type(even) .game-photo {
      order: 2;
    }

    .home-main .game-photo {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 5 / 3;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      object-fit: cover;
      transition: transform 0.2s ease;
    }

    .home-main .game-row:hover .game-photo {
      transform: translateY(-4px);
    }

    .home-main .game-copy {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      align-items: start;
      gap: 17px;
    }

    .home-main .icon-tile {
      display: inline-flex;
      width: 48px;
      height: 48px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border-radius: 12px;
      background: color-mix(in oklch, var(--color-accent) 16%, transparent);
      color: var(--color-primary);
    }

    .home-main .game-copy h3 {
      margin: 2px 0 8px;
      font-size: clamp(1.3rem, 2.5vw, 1.65rem);
    }

    .home-main .game-copy p {
      margin: 0;
    }

    .home-main .catalog-note {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 16px 0 0;
      border-radius: 16px;
      padding: 18px 20px;
      background: var(--color-surface);
      color: var(--color-text);
    }

    .home-main .catalog-note p {
      margin: 0;
    }

    .home-main .about {
      background: linear-gradient(135deg, color-mix(in oklch, var(--color-primary) 7%, var(--color-bg)), var(--color-bg) 64%, color-mix(in oklch, var(--color-accent) 9%, var(--color-bg)));
      color: var(--color-text);
    }

    .home-main .about-content {
      max-width: 720px;
    }

    .home-main .about p {
      margin: 20px 0 0;
      font-size: 1.08rem;
    }

    .home-main .text-link {
      color: var(--color-primary);
      font-weight: 700;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
    }

    .home-main .proof {
      color: var(--color-text);
    }

    .home-main .proof-list {
      max-width: 760px;
      margin-top: 30px;
    }

    .home-main .proof blockquote {
      margin: 0 0 20px;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      padding: 24px 26px;
      background: var(--color-surface);
      color: var(--color-text);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      transition: transform 0.2s ease;
    }

    .home-main .proof blockquote:hover {
      transform: translateY(-4px);
    }

    .home-main .proof blockquote:last-child {
      margin-bottom: 0;
    }

    .home-main .proof blockquote p {
      margin: 0 0 13px;
      color: var(--color-text);
      font-size: 1.05rem;
      line-height: 1.65;
    }

    .home-main .proof cite {
      color: var(--color-muted);
      font-size: 0.9rem;
      font-style: normal;
      font-weight: 600;
    }

    .home-main .contact {
      border-bottom: 0;
      border-radius: 16px;
      padding: 38px;
      background: var(--color-surface);
      color: var(--color-text);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .home-main .contact h2 {
      margin-top: 0;
    }

    .home-main .contact > p {
      margin: 12px 0 20px;
    }

    .home-main .contact-links {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px 24px;
    }

    .home-main .contact-links a {
      color: var(--color-primary);
      font-weight: 700;
      overflow-wrap: anywhere;
      text-underline-offset: 4px;
    }

    .home-main .contact-links .phone-link {
      color: var(--color-text);
      text-decoration: none;
    }

    @media (max-width: 720px) {
      .home-main {
        padding: 0 20px;
      }

      .home-main > section {
        padding: 64px 0;
      }

      .home-main .hero {
        min-height: 420px;
        gap: 20px;
        padding-top: 120px;
      }

      .home-main .game-row,
      .home-main .game-row:nth-of-type(even) {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
      }

      .home-main .game-row:nth-of-type(even) .game-photo {
        order: 0;
      }

      .home-main .contact {
        padding: 26px 22px;
      }

      .home-main .contact-links {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
      }
    }

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

/* index.html */
.footer-heading {
		font-size: 0.75rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		font-weight: 700;
		color: var(--site-text);
		margin: 0 0 0.5rem;
	}

	.footer-link {
		display: inline-block;
		padding: 0.25rem 0;
		color: var(--site-muted);
		text-decoration: none;
		transition: color 0.15s ease, transform 0.15s ease;
	}

	.footer-link:hover {
		color: var(--site-primary);
		transform: translateX(4px);
	}

/* Inline style from index.html */
.extracted-index-html-1 { min-height:64px; }

/* Inline style from index.html */
.extracted-index-html-1 { text-decoration:none;color:var(--site-text); }

/* Inline style from index.html */
.extracted-index-html-1 { width:42px;height:42px; }

/* Inline style from index.html */
.extracted-index-html-1 { font-size:1.5rem; }

/* Inline style from index.html */
.extracted-index-html-1 { font-size:1.15rem; }

/* Inline style from index.html */
.extracted-index-html-1 { background:var(--site-surface); }

/* Inline style from index.html */
.extracted-index-html-1 { border-bottom:none; }

/* Inline style from index.html */
.extracted-index-html-1 { font-size:1.15rem; }

/* Inline style from index.html */
.extracted-index-html-1 { border-top:1px solid var(--site-border);background-image:linear-gradient(160deg, color-mix(in oklch, var(--site-primary) 12%, var(--site-bg)), var(--site-bg) 55%, color-mix(in oklch, var(--site-accent) 14%, var(--site-bg))); }

/* Inline style from index.html */
.extracted-index-html-1 { font-size:1.5rem; }

/* Inline style from index.html */
.extracted-index-html-1 { max-width:40rem; }

/* Inline style from index.html */
.extracted-index-html-1 { font-size:1.35rem; }

/* Inline style from index.html */
.extracted-index-html-1 { font-size:1.35rem; }

/* Inline style from index.html */
.extracted-index-html-1 { font-size:1.35rem; }

/* Inline style from index.html */
.extracted-index-html-1 { width:40px;height:40px; }

/* Inline style from index.html */
.extracted-index-html-1 { font-size:1.25rem; }

/* Inline style from index.html */
.extracted-index-html-1 { width:40px;height:40px; }

/* Inline style from index.html */
.extracted-index-html-1 { font-size:1.25rem; }

/* Inline style from index.html */
.extracted-index-html-1 { width:40px;height:40px; }

/* Inline style from index.html */
.extracted-index-html-1 { font-size:1.25rem; }

/* Inline style from index.html */
.extracted-index-html-1 { color:var(--site-text); }

/* privacy-policy.html */
:root {
	--site-bg: #EDFFF9;
	--site-surface: #D3FAED;
	--site-text: #0F1211;
	--site-muted: #353C3A;
	--site-border: #C8E6DC;
	--site-primary: #229379;
	--site-on-primary: #000000;
	--site-secondary: #629091;
	--site-on-secondary: #000000;
	--site-accent: #C28698;
	--site-on-accent: #000000;
	--site-success: #22C55E;
	--site-warning: #F59E0B;
	--site-error: #EF4444;
	--site-info: #3B82F6;

	--color-bg: var(--site-bg);
	--color-surface: var(--site-surface);
	--color-text: var(--site-text);
	--color-muted: var(--site-muted);
	--color-border: var(--site-border);
	--color-primary: var(--site-primary);
	--color-on-primary: var(--site-on-primary);
	--color-secondary: var(--site-secondary);
	--color-on-secondary: var(--site-on-secondary);
	--color-accent: var(--site-accent);
	--color-on-accent: var(--site-on-accent);
	--color-success: var(--site-success);
	--color-warning: var(--site-warning);
	--color-error: var(--site-error);
	--color-info: var(--site-info);

	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--site-bg: #02110C;
		--site-surface: #081E18;
		--site-text: #DBE8E3;
		--site-muted: #A3B6AF;
		--site-border: #1B332C;
		--site-primary: #62E3C0;
		--site-on-primary: #000000;
		--site-secondary: #9BCBCC;
		--site-on-secondary: #000000;
		--site-accent: #DFB6C1;
		--site-on-accent: #000000;
	}
}

/* ==========================================================================
     BASE + SHARED SHELL
     ========================================================================== */
* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 300;
	background: var(--site-bg);
	color: var(--site-text);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; margin: 0; }

.col {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 32px;
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	border-bottom: 1px solid var(--site-border);
	background-image: linear-gradient(115deg, color-mix(in oklch, var(--site-primary) 14%, var(--site-bg)), var(--site-bg) 48%, color-mix(in oklch, var(--site-accent) 16%, var(--site-bg)));
	backdrop-filter: blur(12px);
}

/* ==========================================================================
     GRADIENT COMPONENTS
     ========================================================================== */
.btn-gradient {
	background-image: linear-gradient(115deg, var(--site-primary), var(--site-accent));
	color: var(--site-on-primary);
	border: none;
	text-decoration: none;
	box-shadow: 0 6px 18px color-mix(in oklch, var(--site-primary) 32%, transparent);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-gradient:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px color-mix(in oklch, var(--site-accent) 38%, transparent);
}

.gradient-text {
	background-image: linear-gradient(100deg, var(--site-primary), var(--site-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: color-mix(in oklch, var(--site-accent) 16%, transparent);
	color: var(--site-primary);
	flex-shrink: 0;
}

.nav-link {
	color: var(--site-text);
	text-decoration: none;
	padding: 0.35rem 0;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-link:hover {
	color: var(--site-primary);
	border-bottom-color: var(--site-primary);
}

.mobile-link {
	display: block;
	color: var(--site-text);
	text-decoration: none;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--site-border);
}

.mobile-link:hover { color: var(--site-primary); }

@media (max-width: 720px) {
	.col { padding: 0 20px; }
}

/* privacy-policy.html */
@theme {
  --color-primary: var(--site-primary);
  --color-on-primary: var(--site-on-primary);
  --color-secondary: var(--site-secondary);
  --color-on-secondary: var(--site-on-secondary);
  --color-accent: var(--site-accent);
  --color-on-accent: var(--site-on-accent);
  --color-bg: var(--site-bg);
  --color-surface: var(--site-surface);
  --color-text: var(--site-text);
  --color-muted: var(--site-muted);
  --color-border: var(--site-border);
  --color-success: var(--site-success);
  --color-warning: var(--site-warning);
  --color-error: var(--site-error);
  --color-info: var(--site-info);
}

/* privacy-policy.html */
/* ==========================================================================
		   PRIVACY POLICY
		   ========================================================================== */
		.policy-main {
			color: var(--color-text);
		}

		.policy-section {
			width: 100%;
			padding: 96px 0;
			border-bottom: 1px solid var(--color-border);
		}

		.policy-reading {
			max-width: 760px;
		}

		.policy-intro {
			padding-top: 88px;
			background: linear-gradient(120deg, color-mix(in oklch, var(--color-primary) 12%, var(--color-bg)), var(--color-bg) 72%);
		}

		.policy-eyebrow {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			margin: 0 0 18px;
			color: var(--color-primary);
			font-size: 0.8rem;
			font-weight: 700;
			letter-spacing: 0.12em;
			text-transform: uppercase;
		}

		.policy-title {
			max-width: 760px;
			font-family: var(--font-display);
			font-size: clamp(2.5rem, 7vw, 4.5rem);
			line-height: 1.08;
		}

		.policy-lead {
			max-width: 680px;
			margin: 24px 0 0;
			color: var(--color-muted);
			font-size: 1.15rem;
			line-height: 1.8;
		}

		.policy-section h2 {
			margin: 0 0 22px;
			font-size: clamp(1.65rem, 4vw, 2.25rem);
			line-height: 1.2;
		}

		.policy-section h3 {
			margin: 30px 0 8px;
			font-size: 1.1rem;
			line-height: 1.4;
		}

		.policy-section p,
		.policy-section li {
			color: var(--color-muted);
			font-size: 1rem;
			line-height: 1.85;
		}

		.policy-section p {
			margin: 0 0 16px;
		}

		.policy-list {
			display: grid;
			gap: 14px;
			margin: 24px 0 0;
			padding: 0;
			list-style: none;
		}

		.policy-list li {
			padding: 18px 20px;
			border: 1px solid var(--color-border);
			border-radius: 16px;
			background: var(--color-surface);
			color: var(--color-text);
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		}

		.policy-list strong {
			display: block;
			margin-bottom: 4px;
			color: var(--color-text);
			font-weight: 700;
		}

		.policy-callout {
			margin-top: 28px;
			padding: 22px 24px;
			border: 1px solid var(--color-border);
			border-radius: 16px;
			background: linear-gradient(120deg, color-mix(in oklch, var(--color-accent) 14%, var(--color-surface)), var(--color-surface));
			color: var(--color-text);
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		}

		.policy-callout p {
			margin: 0;
			color: var(--color-text);
		}

		.policy-contact {
			margin-top: 28px;
			padding: 24px;
			border: 1px solid var(--color-border);
			border-radius: 16px;
			background: var(--color-surface);
			color: var(--color-text);
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		}

		.policy-contact p {
			margin: 0 0 12px;
			color: var(--color-muted);
		}

		.policy-contact a {
			display: block;
			width: fit-content;
			margin: 10px 0;
			color: var(--color-primary);
			font-weight: 600;
			overflow-wrap: anywhere;
			text-underline-offset: 4px;
		}

		.policy-contact a:hover {
			transform: translateY(-2px);
		}

		.policy-toc {
			display: flex;
			flex-wrap: wrap;
			gap: 10px 20px;
			margin: 28px 0 0;
			padding: 0;
			list-style: none;
		}

		.policy-toc a {
			color: var(--color-primary);
			font-size: 0.95rem;
			font-weight: 600;
			text-underline-offset: 4px;
		}

		@media (max-width: 720px) {
			.policy-section {
				padding: 64px 0;
			}

			.policy-intro {
				padding-top: 64px;
			}

			.policy-list li,
			.policy-contact,
			.policy-callout {
				padding: 18px;
			}

			.policy-toc {
				flex-direction: column;
				gap: 12px;
			}
		}

/* privacy-policy.html */
.footer-heading {
		font-size: 0.75rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		font-weight: 700;
		color: var(--site-text);
		margin: 0 0 0.5rem;
	}

	.footer-link {
		display: inline-block;
		padding: 0.25rem 0;
		color: var(--site-muted);
		text-decoration: none;
		transition: color 0.15s ease, transform 0.15s ease;
	}

	.footer-link:hover {
		color: var(--site-primary);
		transform: translateX(4px);
	}

/* Inline style from privacy-policy.html */
.extracted-privacy-policy-html-1 { min-height:64px; }

/* Inline style from privacy-policy.html */
.extracted-privacy-policy-html-1 { text-decoration:none;color:var(--site-text); }

/* Inline style from privacy-policy.html */
.extracted-privacy-policy-html-1 { width:42px;height:42px; }

/* Inline style from privacy-policy.html */
.extracted-privacy-policy-html-1 { font-size:1.5rem; }

/* Inline style from privacy-policy.html */
.extracted-privacy-policy-html-1 { font-size:1.15rem; }

/* Inline style from privacy-policy.html */
.extracted-privacy-policy-html-1 { background:var(--site-surface); }

/* Inline style from privacy-policy.html */
.extracted-privacy-policy-html-1 { border-bottom:none; }

/* Inline style from privacy-policy.html */
.extracted-privacy-policy-html-1 { font-size:1.15rem; }

/* Inline style from privacy-policy.html */
.extracted-privacy-policy-html-1 { border-top:1px solid var(--site-border);background-image:linear-gradient(160deg, color-mix(in oklch, var(--site-primary) 12%, var(--site-bg)), var(--site-bg) 55%, color-mix(in oklch, var(--site-accent) 14%, var(--site-bg))); }

/* Inline style from privacy-policy.html */
.extracted-privacy-policy-html-1 { font-size:1.5rem; }

/* Inline style from privacy-policy.html */
.extracted-privacy-policy-html-1 { max-width:40rem; }

/* Inline style from privacy-policy.html */
.extracted-privacy-policy-html-1 { font-size:1.35rem; }

/* Inline style from privacy-policy.html */
.extracted-privacy-policy-html-1 { font-size:1.35rem; }

/* Inline style from privacy-policy.html */
.extracted-privacy-policy-html-1 { font-size:1.35rem; }

/* Inline style from privacy-policy.html */
.extracted-privacy-policy-html-1 { width:40px;height:40px; }

/* Inline style from privacy-policy.html */
.extracted-privacy-policy-html-1 { font-size:1.25rem; }

/* Inline style from privacy-policy.html */
.extracted-privacy-policy-html-1 { width:40px;height:40px; }

/* Inline style from privacy-policy.html */
.extracted-privacy-policy-html-1 { font-size:1.25rem; }

/* Inline style from privacy-policy.html */
.extracted-privacy-policy-html-1 { width:40px;height:40px; }

/* Inline style from privacy-policy.html */
.extracted-privacy-policy-html-1 { font-size:1.25rem; }

/* Inline style from privacy-policy.html */
.extracted-privacy-policy-html-1 { color:var(--site-text); }

/* server-hosting.html */
:root {
	--site-bg: #EDFFF9;
	--site-surface: #D3FAED;
	--site-text: #0F1211;
	--site-muted: #353C3A;
	--site-border: #C8E6DC;
	--site-primary: #229379;
	--site-on-primary: #000000;
	--site-secondary: #629091;
	--site-on-secondary: #000000;
	--site-accent: #C28698;
	--site-on-accent: #000000;
	--site-success: #22C55E;
	--site-warning: #F59E0B;
	--site-error: #EF4444;
	--site-info: #3B82F6;

	--color-bg: var(--site-bg);
	--color-surface: var(--site-surface);
	--color-text: var(--site-text);
	--color-muted: var(--site-muted);
	--color-border: var(--site-border);
	--color-primary: var(--site-primary);
	--color-on-primary: var(--site-on-primary);
	--color-secondary: var(--site-secondary);
	--color-on-secondary: var(--site-on-secondary);
	--color-accent: var(--site-accent);
	--color-on-accent: var(--site-on-accent);
	--color-success: var(--site-success);
	--color-warning: var(--site-warning);
	--color-error: var(--site-error);
	--color-info: var(--site-info);

	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--site-bg: #02110C;
		--site-surface: #081E18;
		--site-text: #DBE8E3;
		--site-muted: #A3B6AF;
		--site-border: #1B332C;
		--site-primary: #62E3C0;
		--site-on-primary: #000000;
		--site-secondary: #9BCBCC;
		--site-on-secondary: #000000;
		--site-accent: #DFB6C1;
		--site-on-accent: #000000;
	}
}

/* ==========================================================================
     BASE + SHARED SHELL
     ========================================================================== */
* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 300;
	background: var(--site-bg);
	color: var(--site-text);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; margin: 0; }

.col {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 32px;
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	border-bottom: 1px solid var(--site-border);
	background-image: linear-gradient(115deg, color-mix(in oklch, var(--site-primary) 14%, var(--site-bg)), var(--site-bg) 48%, color-mix(in oklch, var(--site-accent) 16%, var(--site-bg)));
	backdrop-filter: blur(12px);
}

/* ==========================================================================
     GRADIENT COMPONENTS
     ========================================================================== */
.btn-gradient {
	background-image: linear-gradient(115deg, var(--site-primary), var(--site-accent));
	color: var(--site-on-primary);
	border: none;
	text-decoration: none;
	box-shadow: 0 6px 18px color-mix(in oklch, var(--site-primary) 32%, transparent);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-gradient:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px color-mix(in oklch, var(--site-accent) 38%, transparent);
}

.gradient-text {
	background-image: linear-gradient(100deg, var(--site-primary), var(--site-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: color-mix(in oklch, var(--site-accent) 16%, transparent);
	color: var(--site-primary);
	flex-shrink: 0;
}

.nav-link {
	color: var(--site-text);
	text-decoration: none;
	padding: 0.35rem 0;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-link:hover {
	color: var(--site-primary);
	border-bottom-color: var(--site-primary);
}

.mobile-link {
	display: block;
	color: var(--site-text);
	text-decoration: none;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--site-border);
}

.mobile-link:hover { color: var(--site-primary); }

@media (max-width: 720px) {
	.col { padding: 0 20px; }
}

/* server-hosting.html */
@theme {
  --color-primary: var(--site-primary);
  --color-on-primary: var(--site-on-primary);
  --color-secondary: var(--site-secondary);
  --color-on-secondary: var(--site-on-secondary);
  --color-accent: var(--site-accent);
  --color-on-accent: var(--site-on-accent);
  --color-bg: var(--site-bg);
  --color-surface: var(--site-surface);
  --color-text: var(--site-text);
  --color-muted: var(--site-muted);
  --color-border: var(--site-border);
  --color-success: var(--site-success);
  --color-warning: var(--site-warning);
  --color-error: var(--site-error);
  --color-info: var(--site-info);
}

/* server-hosting.html */
.hosting-page {
      color: var(--color-text);
      font-family: var(--font-body);
    }

    .hosting-page > section {
      width: 100%;
      height: auto;
      padding: 96px 0;
      border-bottom: 1px solid var(--color-border);
    }

    .hosting-page h1,
    .hosting-page h2,
    .hosting-page h3 {
      margin: 0;
      font-weight: 700;
      letter-spacing: -0.035em;
      line-height: 1.12;
    }

    .hosting-page p {
      color: var(--color-muted);
      font-weight: 300;
      line-height: 1.75;
    }

    .hosting-hero {
      display: flex;
      min-height: 420px;
      flex-direction: column;
      align-items: flex-start;
      gap: 24px;
      padding-top: 112px !important;
    }

    .eyebrow {
      margin: 0;
      color: var(--color-primary);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .hosting-hero h1 {
      max-width: 850px;
      font-family: var(--font-display);
      font-size: clamp(2.65rem, 7vw, 5.2rem);
    }

    .gradient-ink {
      background-image: linear-gradient(100deg, var(--color-primary), var(--color-accent));
      background-clip: text;
      color: transparent;
      -webkit-background-clip: text;
    }

    .hero-copy {
      max-width: 660px;
      margin: 0;
      font-size: 1.1rem;
    }

    .hosting-cta {
      display: inline-flex;
      min-height: 52px;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0.85rem 1.45rem;
      border: 0;
      border-radius: 999px;
      background: linear-gradient(115deg, var(--color-primary), var(--color-accent));
      box-shadow: 0 6px 18px color-mix(in oklch, var(--color-primary) 30%, transparent);
      color: var(--color-on-primary);
      font-weight: 700;
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .hosting-cta:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 28px color-mix(in oklch, var(--color-accent) 38%, transparent);
    }

    .hosting-hero > img,
    .hosting-row > img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: cover;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .hosting-hero > img {
      aspect-ratio: 16 / 9;
      margin-top: 12px;
    }

    .section-heading {
      max-width: 760px;
      margin-bottom: 28px;
    }

    .section-heading h2 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3.2rem);
    }

    .section-heading p {
      max-width: 680px;
      margin: 16px 0 0;
    }

    .hosting-row {
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      align-items: center;
      gap: 36px;
      padding: 30px 0;
      border-top: 1px solid var(--color-border);
    }

    .hosting-row:nth-of-type(even) {
      grid-template-columns: minmax(0, 1fr) 280px;
    }

    .hosting-row:nth-of-type(even) > img {
      order: 2;
    }

    .hosting-row > img {
      aspect-ratio: 4 / 3;
    }

    .hosting-row-copy {
      max-width: 650px;
    }

    .hosting-row h3 {
      font-size: 1.55rem;
    }

    .hosting-row p {
      margin: 12px 0 0;
    }

    .config-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      color: var(--color-primary);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .network-section {
      background: linear-gradient(135deg, color-mix(in oklch, var(--color-surface) 72%, var(--color-bg)), var(--color-bg) 72%);
      color: var(--color-text);
    }

    .network-section > p {
      max-width: 720px;
      margin: 18px 0 30px;
    }

    .region-list {
      max-width: 820px;
      border-top: 1px solid var(--color-border);
    }

    .region-line {
      display: grid;
      grid-template-columns: 64px 170px minmax(0, 1fr);
      align-items: center;
      gap: 18px;
      padding: 18px 0;
      border-bottom: 1px solid var(--color-border);
    }

    .icon-tile-local {
      display: inline-flex;
      width: 48px;
      height: 48px;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: color-mix(in oklch, var(--color-accent) 16%, transparent);
      color: var(--color-primary);
    }

    .region-line strong {
      font-size: 0.98rem;
    }

    .region-line span:last-child {
      color: var(--color-muted);
      line-height: 1.6;
    }

    .status-note {
      display: flex;
      max-width: 820px;
      align-items: flex-start;
      gap: 12px;
      margin-top: 24px;
      padding: 18px 20px;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      background: var(--color-surface);
      color: var(--color-text);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .status-note p {
      margin: 0;
    }

    .migration-intro {
      max-width: 700px;
      margin: 16px 0 30px;
    }

    .migration-steps {
      max-width: 800px;
      margin: 0;
      padding: 0;
      list-style: none;
      counter-reset: migration;
    }

    .migration-steps li {
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr);
      gap: 18px;
      padding: 18px 0;
      border-top: 1px solid var(--color-border);
      counter-increment: migration;
    }

    .step-number::before {
      content: counter(migration, decimal-leading-zero);
      font-size: 0.78rem;
      font-weight: 700;
    }

    .migration-steps h3 {
      margin: 2px 0 7px;
      font-size: 1.15rem;
    }

    .migration-steps p {
      margin: 0;
    }

    .migration-email {
      color: var(--color-primary);
      font-weight: 600;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }

    .faq-section {
      background: linear-gradient(115deg, color-mix(in oklch, var(--color-accent) 10%, var(--color-bg)), var(--color-bg) 62%);
      color: var(--color-text);
    }

    .faq-list {
      max-width: 820px;
      margin-top: 30px;
      border-top: 1px solid var(--color-border);
    }

    .faq-list details {
      padding: 20px 0;
      border-bottom: 1px solid var(--color-border);
    }

    .faq-list summary {
      display: flex;
      min-height: 36px;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      cursor: pointer;
      font-size: 1.08rem;
      font-weight: 700;
      list-style: none;
    }

    .faq-list summary::-webkit-details-marker {
      display: none;
    }

    .faq-list summary::after {
      color: var(--color-primary);
      content: "+";
      font-size: 1.5rem;
      line-height: 1;
    }

    .faq-list details[open] summary::after {
      content: "−";
    }

    .faq-list details p {
      max-width: 720px;
      margin: 12px 0 0;
    }

    .contact-section {
      padding-bottom: 112px !important;
      border-bottom: 0 !important;
    }

    .contact-panel {
      padding: clamp(26px, 6vw, 56px);
      border: 1px solid color-mix(in oklch, var(--color-primary) 28%, var(--color-border));
      border-radius: 16px;
      background: linear-gradient(120deg, var(--color-surface), color-mix(in oklch, var(--color-accent) 20%, var(--color-bg)));
      color: var(--color-text);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .contact-panel h2 {
      max-width: 700px;
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3.1rem);
    }

    .contact-panel p {
      max-width: 650px;
      margin: 14px 0 24px;
    }

    .contact-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px;
    }

    .contact-secondary {
      display: inline-flex;
      min-height: 48px;
      align-items: center;
      gap: 8px;
      padding: 0.7rem 1rem;
      border: 1px solid var(--color-border);
      border-radius: 999px;
      color: var(--color-text);
      font-weight: 600;
      text-decoration: none;
      transition: transform 0.2s ease;
    }

    .contact-secondary:hover {
      transform: translateY(-4px);
    }

    @media (max-width: 720px) {
      .hosting-page > section {
        padding: 64px 0;
      }

      .hosting-hero {
        min-height: 0;
        padding-top: 72px !important;
      }

      .hosting-hero .hosting-cta {
        width: 100%;
      }

      .hosting-row,
      .hosting-row:nth-of-type(even) {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .hosting-row:nth-of-type(even) > img {
        order: 0;
      }

      .hosting-row > img {
        aspect-ratio: 16 / 10;
      }

      .region-line {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 12px;
      }

      .region-line .icon-tile-local {
        grid-row: span 2;
      }

      .region-line span:last-child {
        grid-column: 2;
      }

      .migration-steps li {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 12px;
      }

      .contact-section {
        padding-bottom: 72px !important;
      }

      .contact-actions {
        align-items: stretch;
        flex-direction: column;
      }

      .contact-actions .hosting-cta,
      .contact-secondary {
        width: 100%;
      }

      .contact-secondary {
        justify-content: center;
      }
    }

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

/* server-hosting.html */
.footer-heading {
		font-size: 0.75rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		font-weight: 700;
		color: var(--site-text);
		margin: 0 0 0.5rem;
	}

	.footer-link {
		display: inline-block;
		padding: 0.25rem 0;
		color: var(--site-muted);
		text-decoration: none;
		transition: color 0.15s ease, transform 0.15s ease;
	}

	.footer-link:hover {
		color: var(--site-primary);
		transform: translateX(4px);
	}

/* Inline style from server-hosting.html */
.extracted-server-hosting-html-1 { min-height:64px; }

/* Inline style from server-hosting.html */
.extracted-server-hosting-html-1 { text-decoration:none;color:var(--site-text); }

/* Inline style from server-hosting.html */
.extracted-server-hosting-html-1 { width:42px;height:42px; }

/* Inline style from server-hosting.html */
.extracted-server-hosting-html-1 { font-size:1.5rem; }

/* Inline style from server-hosting.html */
.extracted-server-hosting-html-1 { font-size:1.15rem; }

/* Inline style from server-hosting.html */
.extracted-server-hosting-html-1 { background:var(--site-surface); }

/* Inline style from server-hosting.html */
.extracted-server-hosting-html-1 { border-bottom:none; }

/* Inline style from server-hosting.html */
.extracted-server-hosting-html-1 { font-size:1.15rem; }

/* Inline style from server-hosting.html */
.extracted-server-hosting-html-1 { border-top:1px solid var(--site-border);background-image:linear-gradient(160deg, color-mix(in oklch, var(--site-primary) 12%, var(--site-bg)), var(--site-bg) 55%, color-mix(in oklch, var(--site-accent) 14%, var(--site-bg))); }

/* Inline style from server-hosting.html */
.extracted-server-hosting-html-1 { font-size:1.5rem; }

/* Inline style from server-hosting.html */
.extracted-server-hosting-html-1 { max-width:40rem; }

/* Inline style from server-hosting.html */
.extracted-server-hosting-html-1 { font-size:1.35rem; }

/* Inline style from server-hosting.html */
.extracted-server-hosting-html-1 { font-size:1.35rem; }

/* Inline style from server-hosting.html */
.extracted-server-hosting-html-1 { font-size:1.35rem; }

/* Inline style from server-hosting.html */
.extracted-server-hosting-html-1 { width:40px;height:40px; }

/* Inline style from server-hosting.html */
.extracted-server-hosting-html-1 { font-size:1.25rem; }

/* Inline style from server-hosting.html */
.extracted-server-hosting-html-1 { width:40px;height:40px; }

/* Inline style from server-hosting.html */
.extracted-server-hosting-html-1 { font-size:1.25rem; }

/* Inline style from server-hosting.html */
.extracted-server-hosting-html-1 { width:40px;height:40px; }

/* Inline style from server-hosting.html */
.extracted-server-hosting-html-1 { font-size:1.25rem; }

/* Inline style from server-hosting.html */
.extracted-server-hosting-html-1 { color:var(--site-text); }

/* terms-and-conditions.html */
:root {
	--site-bg: #EDFFF9;
	--site-surface: #D3FAED;
	--site-text: #0F1211;
	--site-muted: #353C3A;
	--site-border: #C8E6DC;
	--site-primary: #229379;
	--site-on-primary: #000000;
	--site-secondary: #629091;
	--site-on-secondary: #000000;
	--site-accent: #C28698;
	--site-on-accent: #000000;
	--site-success: #22C55E;
	--site-warning: #F59E0B;
	--site-error: #EF4444;
	--site-info: #3B82F6;

	--color-bg: var(--site-bg);
	--color-surface: var(--site-surface);
	--color-text: var(--site-text);
	--color-muted: var(--site-muted);
	--color-border: var(--site-border);
	--color-primary: var(--site-primary);
	--color-on-primary: var(--site-on-primary);
	--color-secondary: var(--site-secondary);
	--color-on-secondary: var(--site-on-secondary);
	--color-accent: var(--site-accent);
	--color-on-accent: var(--site-on-accent);
	--color-success: var(--site-success);
	--color-warning: var(--site-warning);
	--color-error: var(--site-error);
	--color-info: var(--site-info);

	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--site-bg: #02110C;
		--site-surface: #081E18;
		--site-text: #DBE8E3;
		--site-muted: #A3B6AF;
		--site-border: #1B332C;
		--site-primary: #62E3C0;
		--site-on-primary: #000000;
		--site-secondary: #9BCBCC;
		--site-on-secondary: #000000;
		--site-accent: #DFB6C1;
		--site-on-accent: #000000;
	}
}

/* ==========================================================================
     BASE + SHARED SHELL
     ========================================================================== */
* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 300;
	background: var(--site-bg);
	color: var(--site-text);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; margin: 0; }

.col {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 32px;
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	border-bottom: 1px solid var(--site-border);
	background-image: linear-gradient(115deg, color-mix(in oklch, var(--site-primary) 14%, var(--site-bg)), var(--site-bg) 48%, color-mix(in oklch, var(--site-accent) 16%, var(--site-bg)));
	backdrop-filter: blur(12px);
}

/* ==========================================================================
     GRADIENT COMPONENTS
     ========================================================================== */
.btn-gradient {
	background-image: linear-gradient(115deg, var(--site-primary), var(--site-accent));
	color: var(--site-on-primary);
	border: none;
	text-decoration: none;
	box-shadow: 0 6px 18px color-mix(in oklch, var(--site-primary) 32%, transparent);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-gradient:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px color-mix(in oklch, var(--site-accent) 38%, transparent);
}

.gradient-text {
	background-image: linear-gradient(100deg, var(--site-primary), var(--site-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: color-mix(in oklch, var(--site-accent) 16%, transparent);
	color: var(--site-primary);
	flex-shrink: 0;
}

.nav-link {
	color: var(--site-text);
	text-decoration: none;
	padding: 0.35rem 0;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-link:hover {
	color: var(--site-primary);
	border-bottom-color: var(--site-primary);
}

.mobile-link {
	display: block;
	color: var(--site-text);
	text-decoration: none;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--site-border);
}

.mobile-link:hover { color: var(--site-primary); }

@media (max-width: 720px) {
	.col { padding: 0 20px; }
}

/* terms-and-conditions.html */
@theme {
  --color-primary: var(--site-primary);
  --color-on-primary: var(--site-on-primary);
  --color-secondary: var(--site-secondary);
  --color-on-secondary: var(--site-on-secondary);
  --color-accent: var(--site-accent);
  --color-on-accent: var(--site-on-accent);
  --color-bg: var(--site-bg);
  --color-surface: var(--site-surface);
  --color-text: var(--site-text);
  --color-muted: var(--site-muted);
  --color-border: var(--site-border);
  --color-success: var(--site-success);
  --color-warning: var(--site-warning);
  --color-error: var(--site-error);
  --color-info: var(--site-info);
}

/* terms-and-conditions.html */
.terms-page {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 32px;
      color: var(--color-text);
      font-family: var(--font-body);
    }

    .terms-page *,
    .terms-page *::before,
    .terms-page *::after {
      box-sizing: border-box;
    }

    .terms-page section {
      width: 100%;
      height: auto;
      padding: 96px 0;
      border-bottom: 1px solid var(--color-border);
    }

    .terms-hero {
      min-height: 420px;
      padding-top: 112px;
      background: linear-gradient(125deg, color-mix(in oklch, var(--color-primary) 11%, var(--color-bg)), var(--color-bg) 58%, color-mix(in oklch, var(--color-accent) 13%, var(--color-bg)));
      color: var(--color-text);
    }

    .terms-copy {
      max-width: 760px;
    }

    .terms-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 18px;
      color: var(--color-primary);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .terms-icon {
      display: inline-flex;
      width: 44px;
      height: 44px;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: color-mix(in oklch, var(--color-accent) 16%, transparent);
      color: var(--color-primary);
    }

    .terms-page h1,
    .terms-page h2,
    .terms-page h3 {
      margin: 0;
      color: var(--color-text);
      font-weight: 700;
      letter-spacing: -0.035em;
      line-height: 1.15;
    }

    .terms-page h1 {
      max-width: 760px;
      font-family: var(--font-display);
      font-size: clamp(2.6rem, 7vw, 4.6rem);
    }

    .terms-page h2 {
      margin-bottom: 22px;
      font-size: clamp(1.8rem, 4vw, 2.55rem);
    }

    .terms-page h3 {
      margin: 30px 0 10px;
      font-size: 1.16rem;
      letter-spacing: -0.02em;
    }

    .terms-page p {
      margin: 0 0 18px;
      color: var(--color-muted);
      font-size: 1.02rem;
      font-weight: 300;
      line-height: 1.85;
    }

    .terms-page .terms-lead {
      max-width: 700px;
      margin: 22px 0 26px;
      color: var(--color-text);
      font-size: clamp(1.08rem, 2vw, 1.25rem);
      line-height: 1.7;
    }

    .terms-page .terms-short {
      margin-top: 24px;
      color: var(--color-primary);
      font-weight: 600;
    }

    .terms-jump {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 48px;
      padding: 12px 20px;
      border-radius: 999px;
      background: linear-gradient(110deg, var(--color-primary), var(--color-accent));
      box-shadow: 0 6px 18px color-mix(in oklch, var(--color-primary) 28%, transparent);
      color: var(--color-on-primary);
      font-size: 0.94rem;
      font-weight: 700;
      text-decoration: none;
      transition: transform 180ms ease, box-shadow 180ms ease;
    }

    .terms-jump:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 26px color-mix(in oklch, var(--color-accent) 34%, transparent);
    }

    .terms-photo {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      margin-top: 44px;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      object-fit: cover;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .terms-index {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 22px;
      margin: 30px 0 0;
      padding: 0;
      list-style: none;
    }

    .terms-index a {
      color: var(--color-primary);
      font-size: 0.94rem;
      font-weight: 600;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
    }

    .terms-panel {
      max-width: 820px;
      padding: 30px;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      background: var(--color-surface);
      color: var(--color-text);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .terms-panel p:last-child {
      margin-bottom: 0;
    }

    .terms-rule {
      max-width: 760px;
      padding-left: 20px;
      border-left: 3px solid transparent;
      border-image: linear-gradient(var(--color-primary), var(--color-accent)) 1;
    }

    .terms-page ul {
      display: grid;
      gap: 12px;
      margin: 16px 0 24px;
      padding-left: 22px;
      color: var(--color-muted);
      font-weight: 300;
      line-height: 1.75;
    }

    .terms-contact {
      max-width: 820px;
      padding: 34px;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      background: linear-gradient(120deg, color-mix(in oklch, var(--color-primary) 12%, var(--color-surface)), color-mix(in oklch, var(--color-accent) 12%, var(--color-surface)));
      color: var(--color-text);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .terms-email {
      color: var(--color-primary);
      font-weight: 700;
      text-underline-offset: 4px;
      overflow-wrap: anywhere;
    }

    @media (max-width: 720px) {
      .terms-page {
        padding: 0 20px;
      }

      .terms-page section {
        padding: 64px 0;
      }

      .terms-hero {
        min-height: 0;
        padding-top: 76px;
      }

      .terms-photo {
        margin-top: 32px;
      }

      .terms-panel,
      .terms-contact {
        padding: 24px;
      }

      .terms-index {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }
    }

/* terms-and-conditions.html */
.footer-heading {
		font-size: 0.75rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		font-weight: 700;
		color: var(--site-text);
		margin: 0 0 0.5rem;
	}

	.footer-link {
		display: inline-block;
		padding: 0.25rem 0;
		color: var(--site-muted);
		text-decoration: none;
		transition: color 0.15s ease, transform 0.15s ease;
	}

	.footer-link:hover {
		color: var(--site-primary);
		transform: translateX(4px);
	}

/* Inline style from terms-and-conditions.html */
.extracted-terms-and-conditions-html-1 { min-height:64px; }

/* Inline style from terms-and-conditions.html */
.extracted-terms-and-conditions-html-1 { text-decoration:none;color:var(--site-text); }

/* Inline style from terms-and-conditions.html */
.extracted-terms-and-conditions-html-1 { width:42px;height:42px; }

/* Inline style from terms-and-conditions.html */
.extracted-terms-and-conditions-html-1 { font-size:1.5rem; }

/* Inline style from terms-and-conditions.html */
.extracted-terms-and-conditions-html-1 { font-size:1.15rem; }

/* Inline style from terms-and-conditions.html */
.extracted-terms-and-conditions-html-1 { background:var(--site-surface); }

/* Inline style from terms-and-conditions.html */
.extracted-terms-and-conditions-html-1 { border-bottom:none; }

/* Inline style from terms-and-conditions.html */
.extracted-terms-and-conditions-html-1 { font-size:1.15rem; }

/* Inline style from terms-and-conditions.html */
.extracted-terms-and-conditions-html-1 { border-top:1px solid var(--site-border);background-image:linear-gradient(160deg, color-mix(in oklch, var(--site-primary) 12%, var(--site-bg)), var(--site-bg) 55%, color-mix(in oklch, var(--site-accent) 14%, var(--site-bg))); }

/* Inline style from terms-and-conditions.html */
.extracted-terms-and-conditions-html-1 { font-size:1.5rem; }

/* Inline style from terms-and-conditions.html */
.extracted-terms-and-conditions-html-1 { max-width:40rem; }

/* Inline style from terms-and-conditions.html */
.extracted-terms-and-conditions-html-1 { font-size:1.35rem; }

/* Inline style from terms-and-conditions.html */
.extracted-terms-and-conditions-html-1 { font-size:1.35rem; }

/* Inline style from terms-and-conditions.html */
.extracted-terms-and-conditions-html-1 { font-size:1.35rem; }

/* Inline style from terms-and-conditions.html */
.extracted-terms-and-conditions-html-1 { width:40px;height:40px; }

/* Inline style from terms-and-conditions.html */
.extracted-terms-and-conditions-html-1 { font-size:1.25rem; }

/* Inline style from terms-and-conditions.html */
.extracted-terms-and-conditions-html-1 { width:40px;height:40px; }

/* Inline style from terms-and-conditions.html */
.extracted-terms-and-conditions-html-1 { font-size:1.25rem; }

/* Inline style from terms-and-conditions.html */
.extracted-terms-and-conditions-html-1 { width:40px;height:40px; }

/* Inline style from terms-and-conditions.html */
.extracted-terms-and-conditions-html-1 { font-size:1.25rem; }

/* Inline style from terms-and-conditions.html */
.extracted-terms-and-conditions-html-1 { color:var(--site-text); }