@font-face {
 font-family: "Boutros Heading";
 src: url("../fonts/BOUTROSNEWSH1-BOLD.TTF") format("truetype");
 font-style: normal;
 font-weight: 700;
 font-display: swap;
}

@font-face {
 font-family: "Boutros Heading";
 src: url("../fonts/BOUTROSNEWSH1-BOLD.TTF") format("truetype");
 font-style: normal;
 font-weight: 800;
 font-display: swap;
}

@font-face {
 font-family: "Dubai Regular";
 src: url("../fonts/DUBAI-REGULAR.woff2") format("woff2");
 font-style: normal;
 font-weight: 400;
 font-display: swap;
}

@font-face {
 font-family: "Arabic UI Display Heavy";
 src: url("../fonts/ARBFONTS-ARABICUIDISPLAYHEAVY.otf") format("opentype");
 font-style: normal;
 font-weight: 800;
 font-display: swap;
}

:root {
 --body-font: "Dubai Regular", "Segoe UI", Tahoma, sans-serif;
 --display-heading-font: "Boutros Heading", "Segoe UI", Tahoma, sans-serif;
 --heading-font: "Arabic UI Display Heavy", "Segoe UI", Tahoma, sans-serif;
 --bg: #f6f2eb;
 --surface: rgba(255, 255, 255, 0.72);
 --surface-strong: rgba(255, 250, 244, 0.94);
 --text: #18211f;
 --muted: #5d6c68;
 --accent: #0f766e;
 --accent-soft: rgba(15, 118, 110, 0.1);
 --accent-2: #b7791f;
 --border: rgba(24, 33, 31, 0.12);
 --shadow: 0 20px 50px rgba(24, 33, 31, 0.08);
 --shadow-strong: 0 24px 56px rgba(15, 118, 110, 0.22);
}

* {
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
 max-width: 100%;
 overflow-x: clip;
}

body {
 margin: 0;
 font-family: var(--body-font);
 color: var(--text);
 max-width: 100%;
 overflow-x: clip;
 background:
  radial-gradient(circle at top right, rgba(15, 118, 110, 0.12), transparent 28%),
  radial-gradient(circle at top left, rgba(183, 121, 31, 0.12), transparent 26%),
  linear-gradient(180deg, #fcfaf6 0%, #f3eee6 48%, #f7f3ec 100%);
}

h1,
h2 {
 font-family: var(--display-heading-font);
}

h3,
h4,
h5,
h6,
.brand-copy strong,
.highlight strong,
.stat strong,
.testimonial-person strong,
.region-link-copy strong {
 font-family: var(--heading-font);
}

body::before {
 content: "";
 position: fixed;
 inset: 0;
 background-image:
  linear-gradient(rgba(255, 255, 255, 0.42) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255, 255, 255, 0.32) 1px, transparent 1px);
 background-size: 32px 32px;
 opacity: 0.35;
 pointer-events: none;
 mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65), transparent 80%);
}

a {
 color: inherit;
 text-decoration: none;
 touch-action: manipulation;
}

img {
 display: block;
 max-width: 100%;
}

.item-heading {
 display: inline-flex;
 align-items: center;
 gap: 14px;
 max-width: 100%;
 text-align: right;
 direction: rtl;
}

.item-media-card {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex: 0 0 58px;
 width: 58px;
 height: 58px;
 padding: 0;
 border-radius: 50%;
 overflow: hidden;
}

.item-media-image {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 object-fit: contain;
 object-position: center;
}

.item-title {
 display: block;
 min-width: 0;
 max-width: 100%;
}

.item-title-text {
 display: block;
}

button,
input,
textarea,
select,
label {
 touch-action: manipulation;
}

.wrapper {
 position: relative;
 z-index: 1;
 width: min(1120px, calc(100% - 32px));
 margin: 0 auto;
}

@keyframes fade-up {
 from {
  opacity: 0;
  transform: translateY(18px);
 }

 to {
  opacity: 1;
  transform: translateY(0);
 }
}

.site-header {
 padding: 28px 0 18px;
}

.topbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 padding: 14px 18px;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 24px;
 backdrop-filter: blur(16px);
 box-shadow: var(--shadow);
 animation: fade-up 0.7s ease both;
}

.brand {
 display: flex;
 align-items: center;
 gap: 12px;
}

.brand-logo {
 display: block;
 width: auto;
 height: 76px;
 max-width: 100%;
}

.brand-mark {
 display: grid;
 place-items: center;
 width: 46px;
 height: 46px;
 border-radius: 14px;
 background: linear-gradient(135deg, var(--accent), #10b981);
 color: #fff;
 font-size: 1.2rem;
 font-weight: 700;
 box-shadow: 0 12px 24px rgba(15, 118, 110, 0.28);
}

.brand-copy strong {
 display: block;
 font-size: calc(1.55rem);
 font-family: var(--heading-font);
 font-weight: 800;
 color: #0f766e;
}

.brand-copy span {
 color: var(--muted);
 font-size: 0.92rem;
}

.nav {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
}

.nav a {
 padding: 10px 14px;
 border: 1px solid rgba(24, 33, 31, 0.08);
 border-radius: 999px;
 background: rgba(255, 255, 255, 0.78);
 color: var(--muted);
 transition: transform 0.2s ease, color 0.2s ease;
}

.nav-icon-link {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 44px;
 padding: 10px;
 line-height: 1;
}

.nav-icon-link svg {
 width: 18px;
 height: 18px;
 fill: currentColor;
}

.nav a:hover,
.nav a:focus-visible,
.button:hover,
.button:focus-visible,
.link:hover,
.link:focus-visible,
.region-list a:hover,
.region-list a:focus-visible,
.cta-links a:hover,
.cta-links a:focus-visible {
 transform: translateY(-2px);
}

.nav a:hover,
.nav a:focus-visible {
 color: var(--text);
}

.hero {
 padding: 28px 0 36px;
}

.hero-shell {
 display: grid;
 grid-template-columns: 1fr;
 gap: 24px;
 align-items: start;
}

.hero-copy,
.hero-media,
.stat,
.highlight,
.card,
.timeline-entry,
.step-card,
.spotlight-card,
.testimonial-card,
.faq-item,
.panel,
.region-panel,
.featured-company-shell,
.cta-shell {
 animation: fade-up 0.75s ease both;
}

.hero-media {
 align-self: start;
 height: fit-content;
 animation-delay: 0.08s;
}

.hero-copy,
.hero-media {
 display: flex;
 flex-direction: column;
 gap: 18px;
 padding: 32px;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 32px;
 backdrop-filter: blur(16px);
 box-shadow: var(--shadow);
}

.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 width: fit-content;
 padding: 10px 14px;
 border-radius: 999px;
 background: var(--accent-soft);
 color: var(--accent);
 font-weight: 600;
}

.eyebrow::before {
 content: "";
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: currentColor;
 box-shadow: 0 0 0 8px rgba(15, 118, 110, 0.12);
}

.ornament-section {
 position: relative;
 padding: 30px 0 50px;
 isolation: isolate;
}

.ornament-section::before,
.ornament-section::after {
 content: "";
 position: absolute;
 width: 260px;
 height: 260px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 18%, rgba(249, 241, 225, 0.5) 18% 38%, transparent 72%);
 filter: blur(6px);
 opacity: 0.74;
 pointer-events: none;
 z-index: 0;
}

.ornament-section::before {
 inset-block-start: 8px;
 inset-inline-start: -98px;
}

.ornament-section::after {
 inset-block-end: 18px;
 inset-inline-end: -92px;
}

.ornament-head,
.ornament-card {
 position: relative;
 overflow: hidden;
 isolation: isolate;
}

.ornament-head {
 padding: 34px 36px;
 background:
  radial-gradient(circle at top right, rgba(255, 255, 255, 0.98) 0 16%, rgba(252, 247, 238, 0.78) 16% 34%, transparent 54%),
  radial-gradient(circle at bottom left, rgba(244, 249, 248, 0.74) 0 14%, transparent 34%),
  linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(250, 243, 231, 0.96) 52%, rgba(238, 247, 245, 0.95));
 border: 1px solid rgba(183, 121, 31, 0.16);
 border-radius: 36px;
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), 0 24px 56px rgba(96, 72, 24, 0.08);
}

.ornament-head::before,
.ornament-head::after {
 content: "";
 position: absolute;
 width: 188px;
 height: 188px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(255, 255, 255, 0.82) 0 20%, rgba(244, 233, 209, 0.34) 20% 44%, transparent 72%);
 opacity: 0.78;
 pointer-events: none;
 filter: blur(2px);
}

.ornament-head::before {
 inset-block-start: -72px;
 inset-inline-start: -70px;
}

.ornament-head::after {
 inset-block-end: -74px;
 inset-inline-end: -42px;
}

.ornament-copy {
 display: grid;
 gap: 12px;
}

.ornament-copy h2 {
 position: relative;
 width: fit-content;
 margin: 0;
 padding-bottom: 16px;
 color: #7c5917;
}

.ornament-copy h2::after {
 content: "";
 position: absolute;
 inset-block-end: 0;
 inset-inline-start: 0;
 width: 176px;
 height: 2px;
 border-radius: 999px;
 background: linear-gradient(90deg, rgba(183, 121, 31, 0.72), rgba(214, 181, 92, 0.28), rgba(15, 118, 110, 0.18), transparent);
}

.ornament-head p {
 max-width: 42rem;
 color: #5b564c;
 line-height: 1.95;
}

.ornament-eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 width: fit-content;
 padding: 9px 15px;
 border: 1px solid rgba(183, 121, 31, 0.14);
 border-radius: 999px;
 background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 240, 225, 0.88));
 color: #8a6117;
 box-shadow: 0 10px 22px rgba(183, 121, 31, 0.07);
 font-weight: 700;
}

.ornament-eyebrow::before {
 content: "";
 width: 9px;
 height: 9px;
 border-radius: 50%;
 background: currentColor;
 box-shadow: 0 0 0 8px rgba(15, 118, 110, 0.08);
}

.ornament-grid {
 gap: 22px;
 align-items: stretch;
 margin-top: 22px;
}

.ornament-card {
 min-height: 100%;
 padding: 28px 28px 26px;
 background:
  radial-gradient(circle at top right, rgba(255, 255, 255, 0.96) 0 14%, rgba(252, 247, 238, 0.72) 14% 30%, transparent 46%),
  radial-gradient(circle at bottom left, rgba(239, 247, 245, 0.62) 0 12%, transparent 32%),
  linear-gradient(160deg, rgba(255, 255, 255, 0.99), rgba(249, 244, 234, 0.95) 58%, rgba(238, 247, 244, 0.93));
 border: 1px solid rgba(183, 121, 31, 0.14);
 border-radius: 32px;
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), 0 22px 48px rgba(96, 72, 24, 0.08);
 transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.ornament-card:hover,
.ornament-card:focus-within {
 transform: translateY(-4px);
 border-color: rgba(15, 118, 110, 0.18);
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), 0 28px 56px rgba(15, 118, 110, 0.1);
}

.ornament-card::before,
.ornament-card::after {
 content: "";
 position: absolute;
 border-radius: 50%;
 pointer-events: none;
}

.ornament-card::before {
 inset-block-start: -52px;
 inset-inline-end: -46px;
 width: 150px;
 height: 150px;
 background: radial-gradient(circle, rgba(255, 255, 255, 0.62) 0 20%, rgba(244, 233, 209, 0.2) 20% 42%, transparent 72%);
 opacity: 0.74;
}

.ornament-card::after {
 inset-block-end: -38px;
 inset-inline-start: -28px;
 width: 126px;
 height: 126px;
 background: radial-gradient(circle, rgba(236, 246, 243, 0.56) 0 18%, rgba(236, 246, 243, 0.14) 18% 38%, transparent 70%);
 opacity: 0.66;
}

.ornament-head > *,
.ornament-card > * {
 position: relative;
 z-index: 1;
}

.ornament-card .card-top {
 position: relative;
 padding-bottom: 18px;
}

.ornament-card .card-top::after {
 content: "";
 position: absolute;
 inset-block-end: 0;
 inset-inline-start: 0;
 width: 136px;
 height: 1px;
 background: linear-gradient(90deg, rgba(183, 121, 31, 0.46), rgba(15, 118, 110, 0.14), transparent);
}

.ornament-card h3 {
 color: #533e17;
}

.ornament-card p {
 color: #5b564c;
}

.ornament-card .item-media-card {
 background: rgba(255, 255, 255, 0.96);
 box-shadow: 0 0 0 6px rgba(183, 121, 31, 0.08);
}

.ornament-card .badge-row {
 gap: 10px;
}

.ornament-card .badge {
 background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 241, 228, 0.88));
 border-color: rgba(183, 121, 31, 0.14);
 color: #8a6117;
}

.ornament-card .link-row {
 padding-top: 10px;
}

.ornament-card .link {
 background: linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(247, 241, 230, 0.92));
 border-color: rgba(183, 121, 31, 0.14);
 color: #5c4517;
}

.ornament-card .link.primary {
 background: linear-gradient(135deg, #0f766e, #149b8f);
 border-color: transparent;
 color: #fff;
}

.hero h1 {
 margin: 0;
 font-family: var(--display-heading-font);
 font-size: clamp(2.5rem, 5vw, 4.6rem);
 line-height: 1.33;
 letter-spacing: -0.02em;
}

.hero p,
.section-head p,
.highlight p,
.card p,
.panel p,
.cta-shell p,
.stat p {
 margin: 0;
 color: var(--muted);
 line-height: 1.9;
}

.highlight p + p,
.card p + p,
.panel p + p,
.stat p + p {
 margin-top: 12px;
}

.hero p {
 font-size: 1.08rem;
}

.hero-copy {
 background: linear-gradient(135deg, rgba(15, 118, 110, 0.96), rgba(17, 24, 39, 0.96));
 border-color: transparent;
 box-shadow: var(--shadow-strong);
 color: #f9fbfb;
}

.hero-copy h1 {
 color: #f9fbfb;
}

.hero-copy p {
 color: rgba(249, 251, 251, 0.8);
}

.hero-copy .eyebrow {
 background: rgba(255, 255, 255, 0.12);
 color: #f9fbfb;
}

.hero-copy .eyebrow::before {
 box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.12);
}

.hero-copy .chip {
 background: rgba(255, 255, 255, 0.08);
 border-color: rgba(255, 255, 255, 0.14);
 color: #f9fbfb;
}

.hero-actions,
.hero-note,
.badge-row,
.link-row,
.cta-links {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
}

.button,
.link,
.cta-links a,
.region-list a {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 14px 18px;
 border-radius: 18px;
 font-weight: 600;
 transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.button.primary {
 background: var(--text);
 color: #fff;
 box-shadow: none;
}

.button.secondary,
.link {
 background: rgba(255, 255, 255, 0.92);
 border: 1px solid var(--border);
 color: var(--text);
}

.chip,
.badge {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 10px 12px;
 border-radius: 999px;
 background: #fff;
 border: 1px solid rgba(24, 33, 31, 0.08);
 font-size: 0.92rem;
}

.badge {
 background: var(--accent-soft);
 border-color: transparent;
 color: var(--accent);
 font-weight: 600;
}

.hero-media {
 padding: 18px;
}

.hero-media img {
 width: 100%;
 height: auto;
 aspect-ratio: 16 / 9;
 min-height: 0;
 object-fit: contain;
 background: rgba(24, 33, 31, 0.05);
 border: 1px solid rgba(24, 33, 31, 0.08);
 border-radius: 24px;
}

.media-caption {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 color: var(--muted);
 font-size: 0.95rem;
}

.stats,
.grid,
.quality,
.region-list,
.timeline-track,
.steps-grid,
.spotlight-grid {
 display: grid;
 gap: 18px;
}

.faq-list {
 position: relative;
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 align-items: start;
 gap: 18px;
 padding: 8px 0;
 overflow-x: clip;
 isolation: isolate;
}

.faq-list::before,
.faq-list::after {
 content: "";
 position: absolute;
 z-index: -1;
 width: 220px;
 height: 220px;
 border-radius: 50%;
 filter: blur(18px);
 pointer-events: none;
 opacity: 0.45;
}

.faq-list::before {
 top: -24px;
 right: -28px;
 background: radial-gradient(circle, rgba(15, 118, 110, 0.18), transparent 68%);
}

.faq-list::after {
 bottom: -36px;
 left: -20px;
 background: radial-gradient(circle, rgba(183, 121, 31, 0.16), transparent 70%);
}

.stats {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 padding-top: 18px;
 padding-bottom: 32px;
}

.timeline-track {
 position: relative;
 gap: 20px;
}

.timeline-entry {
 position: relative;
 display: grid;
 grid-template-columns: 76px 1fr;
 gap: 18px;
 align-items: start;
}

.timeline-entry::before {
 content: "";
 position: absolute;
 inset-inline-start: 37px;
 top: 72px;
 bottom: -20px;
 width: 2px;
 background: linear-gradient(180deg, rgba(15, 118, 110, 0.22), rgba(24, 33, 31, 0.06));
}

.timeline-entry:last-child::before {
 display: none;
}

.timeline-marker {
 display: grid;
 place-items: center;
 width: 76px;
 min-height: 76px;
 border-radius: 24px;
 background: linear-gradient(135deg, var(--accent), #0b5f59);
 color: #fff;
 font-weight: 800;
 letter-spacing: 0.08em;
 box-shadow: 0 18px 36px rgba(15, 118, 110, 0.2);
}

.timeline-content,
.step-card,
.spotlight-card {
 padding: 24px;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 28px;
 box-shadow: var(--shadow);
}

.timeline-content strong,
.step-card strong,
.spotlight-title {
 display: block;
 margin-bottom: 10px;
 font-family: var(--heading-font);
 font-size: 1.15rem;
}

.timeline-content p,
.step-card p,
.spotlight-card p {
 margin: 0;
 color: var(--muted);
 line-height: 1.9;
}

.timeline-content p + p,
.step-card p + p,
.spotlight-card p + p {
 margin-top: 12px;
}

.steps-grid {
 grid-template-columns: repeat(3, minmax(0, 1fr));
}

.step-card {
 display: flex;
 flex-direction: column;
 gap: 14px;
 background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 252, 251, 0.9));
}

.step-number {
 display: inline-grid;
 place-items: center;
 width: 54px;
 height: 54px;
 border-radius: 18px;
 background: rgba(15, 118, 110, 0.1);
 color: var(--accent);
 font-weight: 800;
 letter-spacing: 0.08em;
}

.spotlight-grid {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 align-items: stretch;
}

.spotlight-card {
 display: flex;
 flex-direction: column;
 gap: 16px;
 background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 251, 244, 0.92));
}

.spotlight-card.is-featured {
 grid-column: span 2;
 background: linear-gradient(135deg, rgba(17, 24, 39, 0.98), rgba(15, 118, 110, 0.94));
 border-color: transparent;
 box-shadow: var(--shadow-strong);
 color: #f9fbfb;
}

.spotlight-card.is-featured p {
 color: rgba(249, 251, 251, 0.8);
}

.spotlight-card .badge-row {
 gap: 8px;
}

.spotlight-card.is-featured .badge {
 background: rgba(255, 255, 255, 0.12);
 border-color: rgba(255, 255, 255, 0.14);
 color: #f9fbfb;
}

.featured-company {
 padding-top: 0;
}

.featured-company-shell {
 position: relative;
 display: block;
 padding: 32px;
 overflow: hidden;
 background: linear-gradient(135deg, rgba(247, 240, 226, 0.98), rgba(232, 209, 164, 0.94));
 border: 1px solid rgba(154, 116, 42, 0.16);
 border-radius: 32px;
 box-shadow: var(--shadow-strong);
 color: #1f2937;
}

.featured-company-shell::before,
.featured-company-shell::after {
 content: "";
 position: absolute;
 border-radius: 999px;
 pointer-events: none;
}

.featured-company-shell::before {
 inset-inline-end: -48px;
 top: -56px;
 width: 220px;
 height: 220px;
 background: radial-gradient(circle, rgba(180, 132, 43, 0.26), transparent 68%);
}

.featured-company-shell::after {
 inset-inline-start: -42px;
 bottom: -84px;
 width: 180px;
 height: 180px;
 background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 70%);
}

.featured-company-copy {
 position: relative;
 z-index: 1;
}

.featured-company-copy {
 display: grid;
 gap: 14px;
 max-width: 28rem;
}

.featured-company-copy h2 {
 margin: 0;
 font-family: var(--display-heading-font);
 font-size: clamp(2rem, 4vw, 3rem);
}

.featured-company-subtitle {
 margin: 0;
 font-size: 1rem;
 color: rgba(31, 41, 55, 0.72);
}

.featured-company-link.button.primary {
 width: fit-content;
 margin-top: 6px;
 background: #12211e;
 color: #f9fbfb;
}

.stat {
 padding: 20px;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 24px;
 box-shadow: var(--shadow);
}

.stat strong {
 display: block;
 margin-bottom: 8px;
 font-size: 2rem;
}

section {
 padding: 18px 0 36px;
}

.section-head {
 display: flex;
 align-items: end;
 justify-content: space-between;
 gap: 16px;
 margin-bottom: 22px;
}

.section-head-copy {
 display: grid;
 gap: 12px;
 width: 100%;
}

.section-description {
 display: grid;
 gap: 12px;
 max-width: 38rem;
}

.section-head h2 {
 margin: 0;
 font-family: var(--display-heading-font);
 font-size: clamp(1.6rem, 3vw, 2.35rem);
}

.section-head p {
 max-width: 38rem;
}

.highlights {
 grid-template-columns: repeat(4, minmax(0, 1fr));
}

.highlight,
.card,
.testimonial-card,
.panel {
 padding: 24px;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 28px;
 box-shadow: var(--shadow);
}

.highlight strong,
.panel h3,
.card h3 {
 display: block;
 margin-bottom: 10px;
 font-family: var(--heading-font);
 font-size: 1.15rem;
}

.catalog,
.quality {
 grid-template-columns: repeat(2, minmax(0, 1fr));
}

.testimonials {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 align-items: stretch;
}

.testimonial-card {
 position: relative;
 display: flex;
 flex-direction: column;
 gap: 22px;
 justify-content: space-between;
 min-height: 100%;
 overflow: hidden;
 transition: transform 0.2s ease, border-color 0.2s ease;
}

.testimonial-card:hover,
.testimonial-card:focus-within {
 transform: translateY(-2px);
 border-color: rgba(15, 118, 110, 0.18);
}

.testimonial-card::before {
 content: '"';
 position: absolute;
 top: 18px;
 inset-inline-start: 20px;
 font-family: var(--heading-font);
 font-size: 4.2rem;
 line-height: 1;
 color: rgba(15, 118, 110, 0.12);
 pointer-events: none;
}

.testimonial-quote {
 margin: 0;
 padding-top: 18px;
}

.testimonial-quote p {
 margin: 0;
 color: var(--text);
 font-size: 1rem;
 line-height: 2;
}

.testimonial-quote p + p {
 margin-top: 12px;
}

.testimonial-person {
 display: flex;
 flex-direction: column;
 gap: 6px;
 padding-top: 16px;
 border-top: 1px solid rgba(24, 33, 31, 0.08);
}

.testimonial-person strong {
 font-size: 1rem;
}

.testimonial-person span {
 color: var(--muted);
 font-size: 0.88rem;
}

.faq-item {
 position: relative;
 background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 250, 244, 0.8));
 border: 1px solid rgba(24, 33, 31, 0.1);
 border-radius: 32px;
 box-shadow: 0 18px 46px rgba(24, 33, 31, 0.09);
 backdrop-filter: blur(18px);
 overflow: hidden;
 transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, background-color 0.24s ease;
}

.faq-item:hover,
.faq-item:focus-within {
 transform: translateY(-2px);
 border-color: rgba(15, 118, 110, 0.22);
 box-shadow: 0 26px 58px rgba(15, 118, 110, 0.12);
}

.faq-item[open] {
 background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 252, 251, 0.88));
 border-color: rgba(15, 118, 110, 0.24);
 box-shadow: 0 28px 60px rgba(15, 118, 110, 0.16);
}

.faq-item summary {
 position: relative;
 display: grid;
 grid-template-columns: 1fr auto;
 align-items: start;
 gap: 18px;
 padding: 26px 28px 22px 32px;
 cursor: pointer;
 list-style: none;
}

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

.faq-item summary > span:first-child {
 font-size: 1.1rem;
 font-weight: 700;
 line-height: 1.8;
 letter-spacing: -0.01em;
}

.faq-item[open] summary > span:first-child {
 color: var(--accent);
}

.faq-item summary:focus-visible {
 outline: none;
}

.faq-toggle {
 display: grid;
 place-items: center;
 flex: none;
 position: relative;
 width: 48px;
 height: 48px;
 border-radius: 18px;
 background: linear-gradient(135deg, rgba(15, 118, 110, 0.14), rgba(183, 121, 31, 0.1));
 border: 1px solid rgba(15, 118, 110, 0.14);
 color: var(--accent);
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
 transition: transform 0.24s ease, background-color 0.24s ease, border-color 0.24s ease, color 0.24s ease, box-shadow 0.24s ease;
}

.faq-toggle::before,
.faq-toggle::after {
 content: "";
 position: absolute;
 width: 12px;
 height: 2px;
 border-radius: 999px;
 background: currentColor;
 transition: transform 0.24s ease, opacity 0.24s ease;
}

.faq-toggle::before {
 transform: translateX(-4px) rotate(45deg);
}

.faq-toggle::after {
 transform: translateX(4px) rotate(-45deg);
}

.faq-item summary:focus-visible .faq-toggle {
 box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.faq-item[open] .faq-toggle {
 background: linear-gradient(135deg, var(--accent), #0b5f59);
 border-color: transparent;
 color: #fff;
 box-shadow: 0 14px 28px rgba(15, 118, 110, 0.24);
}

.faq-item[open] .faq-toggle::before {
 transform: translateX(-4px) rotate(-45deg);
}

.faq-item[open] .faq-toggle::after {
 opacity: 1;
 transform: translateX(4px) rotate(45deg);
}

.faq-answer {
 padding: 0 28px 28px 32px;
}

.faq-answer::before {
 content: "";
 display: block;
 height: 1px;
 background: linear-gradient(90deg, rgba(15, 118, 110, 0.2), rgba(24, 33, 31, 0.05));
}

.faq-answer p {
 margin: 0;
 max-width: 46rem;
 color: var(--muted);
 line-height: 1.9;
}

.faq-answer p:first-child {
 margin-top: 18px;
}

.faq-answer p + p {
 margin-top: 12px;
}

.card {
 display: flex;
 flex-direction: column;
 gap: 16px;
}

.card .badge-row {
 gap: 8px;
}

.card .badge {
 padding: 8px 12px;
 background: rgba(15, 118, 110, 0.09);
 border: 1px solid rgba(15, 118, 110, 0.16);
 color: var(--accent);
 font-size: 0.84rem;
 font-weight: 700;
}

.card .link-row {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 gap: 10px;
 align-items: stretch;
 padding-top: 6px;
}

.card .link {
 width: 100%;
 min-height: 52px;
 border-radius: 16px;
 background: linear-gradient(135deg, #0f766e, #149b8f);
 border: 1px solid transparent;
 color: #fff;
 box-shadow: none;
}

.card-top {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 16px;
}

.card .link.primary {
 background: linear-gradient(135deg, #0f766e, #149b8f);
 border-color: transparent;
 color: #fff;
 box-shadow: none;
}

.region-panel {
 padding: 28px;
 background: linear-gradient(180deg, rgba(24, 33, 31, 0.94), rgba(24, 33, 31, 0.88));
 border-radius: 32px;
 color: #f8faf8;
 box-shadow: 0 24px 48px rgba(12, 16, 15, 0.18);
}

.region-panel h3 {
 margin-top: 0;
 margin-bottom: 12px;
 font-size: 1.4rem;
}

.region-panel p {
 margin-bottom: 18px;
 color: rgba(248, 250, 248, 0.76);
}

.region-panel .section-tags {
 margin-bottom: 18px;
}

.region-list {
 grid-template-columns: repeat(3, minmax(0, 1fr));
}

.region-list a {
 display: grid;
 gap: 8px;
 align-content: start;
 justify-content: flex-start;
 background: rgba(255, 255, 255, 0.08);
 border: 1px solid rgba(255, 255, 255, 0.1);
 color: #f8faf8;
}

.region-link-copy {
 display: grid;
 gap: 6px;
}

.region-link-copy strong {
 font-size: 1rem;
}

.region-link-copy span {
 color: rgba(248, 250, 248, 0.76);
 font-size: 0.9rem;
 line-height: 1.8;
}

.region-panel-green {
 background:
  radial-gradient(circle at top right, rgba(122, 191, 136, 0.18), transparent 38%),
  linear-gradient(180deg, #f7fcf7 0%, #eef8f0 52%, #e4f2e7 100%);
 border: 1px solid rgba(88, 141, 98, 0.18);
 color: #183424;
 box-shadow: 0 24px 48px rgba(52, 90, 62, 0.12);
}

.region-panel-green h3 {
 color: #183424;
}

.region-panel-green p {
 color: rgba(24, 52, 36, 0.72);
}

.region-panel-green .region-list a {
 background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(233, 246, 236, 0.96));
 border: 1px solid rgba(88, 141, 98, 0.16);
 color: #183424;
 box-shadow: 0 14px 28px rgba(67, 108, 76, 0.08);
}

.region-panel-green .region-list a:hover,
.region-panel-green .region-list a:focus-visible {
 background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(224, 242, 228, 0.98));
 border-color: rgba(70, 126, 82, 0.26);
}

.region-panel-green .region-link-copy span {
 color: rgba(24, 52, 36, 0.66);
}

.checklist {
 display: grid;
 gap: 12px;
}

.check {
 display: flex;
 gap: 12px;
 align-items: flex-start;
 line-height: 1.9;
 color: var(--muted);
}

.check::before {
 content: "";
 flex: none;
 width: 11px;
 height: 11px;
 margin-top: 0.6rem;
 border-radius: 50%;
 background: linear-gradient(135deg, var(--accent), #10b981);
 box-shadow: 0 0 0 8px rgba(15, 118, 110, 0.08);
}

.cta {
 padding-bottom: 56px;
}

.cta-shell {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
 padding: 32px;
 background: linear-gradient(135deg, rgba(15, 118, 110, 0.96), rgba(17, 24, 39, 0.96));
 border-radius: 36px;
 color: #f9fbfb;
 box-shadow: var(--shadow-strong);
}

.cta-shell p {
 max-width: 38rem;
 color: rgba(249, 251, 251, 0.78);
}

.cta-links a {
 background: #f9fbfb;
 color: #12211e;
 font-weight: 700;
}

.site-footer {
 padding: 0 0 32px;
 color: var(--muted);
 font-size: 0.95rem;
}

.footer-shell {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding-top: 18px;
 border-top: 1px solid rgba(24, 33, 31, 0.1);
}

.notice-panel h3 {
 margin-top: 0;
 margin-bottom: 12px;
}

.notice-panel p {
 margin: 0;
 line-height: 1.9;
 color: var(--muted);
}

@media (max-width: 980px) {
 html,
 body {
  overflow-x: hidden;
 }

 .hero-shell,
 .featured-company-shell,
 .catalog,
 .quality,
 .steps-grid,
 .spotlight-grid {
  grid-template-columns: 1fr;
 }

 .spotlight-card.is-featured {
  grid-column: span 1;
 }

 .timeline-entry {
  grid-template-columns: 64px 1fr;
 }

 .timeline-entry::before {
  inset-inline-start: 31px;
 }

 .faq-list {
  grid-template-columns: 1fr;
 }

 .stats,
 .highlights,
 .region-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }

 .testimonials {
  grid-template-columns: 1fr;
 }

 .section-head {
  flex-direction: column;
  align-items: flex-start;
 }
}

@media (max-width: 640px) {
 .wrapper {
  width: min(1120px, calc(100% - 20px));
 }

 .brand-logo {
  height: 64px;
 }

 .topbar {
  padding: 14px;
  border-radius: 20px;
 }

 .nav {
  display: none;
 }

 .hero-copy,
 .hero-media,
 .stat,
 .highlight,
 .card,
  .ornament-head,
 .timeline-content,
 .step-card,
 .spotlight-card,
 .testimonial-card,
 .panel,
 .featured-company-shell {
  padding: 22px;
  border-radius: 22px;
 }

 .timeline-entry {
  grid-template-columns: 1fr;
 }

 .timeline-entry::before {
  display: none;
 }

 .timeline-marker,
 .step-number {
  width: 48px;
  min-height: 48px;
  border-radius: 16px;
 }

 .faq-item {
  border-radius: 24px;
 }

 .faq-item summary {
  gap: 14px;
  padding: 22px 22px 18px 26px;
 }

 .faq-answer {
  padding: 0 22px 22px 26px;
 }

 .faq-toggle {
  width: 42px;
  height: 42px;
  border-radius: 14px;
 }

 .hero-actions,
 .cta-links {
  width: 100%;
 }

 .button,
 .cta-links a,
 .link,
 .region-list a {
  width: 100%;
 }

 .featured-company-link.button.primary {
  width: 100%;
 }

 .footer-shell {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
 }

 .stats,
 .highlights,
 .region-list {
  grid-template-columns: 1fr;
 }

 .cta-shell,
 .region-panel {
  padding: 24px;
  border-radius: 28px;
 }

 .ornament-head::before,
 .ornament-head::after {
  width: 126px;
  height: 126px;
 }

 .ornament-card::before {
  width: 108px;
  height: 108px;
 }

 .ornament-card::after {
  width: 92px;
  height: 92px;
 }
}