/* ==========================================================================
   DAYANA — About page layout
   Story timeline, process strip, mission/vision pair, values, why tabs,
   market presence, proof band and roadmap. Shared parts: components.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Our story — sticky image + timeline
   -------------------------------------------------------------------------- */
.story { overflow: hidden; }
.story__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.story__media { position: relative; }
.story__frame { aspect-ratio: 16 / 10; border: 1px solid var(--c-border); }
.story__accent { position: absolute; inset-inline-start: -0.75rem; inset-block-end: -0.75rem; z-index: -1; inline-size: 55%; block-size: 55%; border: 2px solid var(--c-accent); }
.timeline { position: relative; display: grid; gap: 2rem; margin: 0; padding: 0 0 0 2.25rem; list-style: none; }
.timeline::before { content: ""; position: absolute; inset-block: 0.5rem; inset-inline-start: 0.5rem; inline-size: 2px; background: var(--c-border); }
.timeline__node { position: relative; }
.timeline__node::before { content: ""; position: absolute; inset-inline-start: -2.25rem; inset-block-start: 0.35rem; inline-size: 18px; block-size: 18px; background: var(--c-card); border: 3px solid var(--c-accent); border-radius: 50%; }
.timeline__year { display: block; margin-block-end: 0.5rem; font-size: 1.75rem; line-height: 1; color: var(--c-primary); }
.timeline__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-start: 1rem; }
.timeline__chips .filter-chip { min-block-size: 34px; font-size: 0.8125rem; }
[dir="rtl"] .timeline { padding: 0 2.25rem 0 0; }
[dir="rtl"] .timeline__node::before { inset-inline-start: auto; inset-inline-end: -2.25rem; }
@media (max-width: 1023.98px) { .story__content .section-head { text-align: center; } }
@media (min-width: 1024px) {
  .story__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .story__media { position: sticky; inset-block-start: 110px; }
  .story__frame { aspect-ratio: 4 / 5; }
}

/* --------------------------------------------------------------------------
   What we do today — connected strip
   -------------------------------------------------------------------------- */
.do { position: relative; overflow: hidden; }
.do__stripes { position: absolute; inset-inline-end: 0; inset-block: 0; inline-size: 42%; pointer-events: none; background: repeating-linear-gradient(-32deg, transparent 0 22px, rgba(43, 58, 152, 0.07) 22px 23px); mask-image: linear-gradient(to right, transparent, rgba(0,0,0,1) 70%); }
.do .container { position: relative; }
.do__grid { position: relative; display: grid; gap: 1rem; }
.do-card { display: flex; flex-direction: column; gap: 0.9rem; inline-size: 100%; padding: 1.5rem; text-align: center; align-items: center; background: var(--c-card); border: 1px solid var(--c-border); border-radius: 2px; transition: border-color 0.3s ease; }
.do-card:hover { border-color: var(--c-accent); }
.do-card:hover .icon-tile { background: var(--c-accent); color: #fff; }
.do-card__title { font-size: 1.0625rem; }
.do-card p { font-size: 0.9rem; line-height: 1.55; }
.do__grid.slick-slider { display: block; }
.do__grid.slick-slider .slick-list { margin-inline: -0.5rem; }
.do__grid.slick-slider .slick-slide { padding-inline: 0.5rem; }
@media (min-width: 1024px) {
  .do__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
  .do__grid::before { content: ""; position: absolute; inset-inline: 12%; inset-block-start: 52px; block-size: 2px; background: var(--c-border); }
  .do-card { position: relative; text-align: start; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   Mission & vision — asymmetric pair
   -------------------------------------------------------------------------- */
.mv__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.mv__card { display: grid; gap: 1rem; padding: clamp(1.75rem, 4vw, 2.75rem); border-radius: 2px; text-align: center; justify-items: center; }
.mv__card--mission { background: var(--c-card); border: 1px solid var(--c-border); border-block-start: 4px solid var(--c-accent); }
.mv__card--vision { background: var(--c-primary); color: var(--c-on-dark-muted); }
.mv__card--vision h2 { color: #fff; }
.mv__card--vision .icon-tile { background: rgba(255, 255, 255, 0.12); color: #fff; }
@media (min-width: 1024px) {
  .mv__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.5rem; align-items: stretch; }
  .mv__card { text-align: start; justify-items: start; }
  .mv__card--vision { margin-block-start: 2.5rem; }
}

/* --------------------------------------------------------------------------
   Our values — staggered cards
   -------------------------------------------------------------------------- */
.values__grid { display: grid; gap: 1rem; }
.value-card { display: flex; flex-direction: column; gap: 0.9rem; inline-size: 100%; padding: 1.5rem; text-align: center; align-items: center; background: var(--c-card); border: 1px solid var(--c-border); border-block-end: 3px solid var(--c-primary); border-radius: 2px; transition: border-color 0.3s ease; }
.value-card:hover { border-block-end-color: var(--c-accent); }
.value-card:hover .icon-tile { background: var(--c-accent); color: #fff; }
.value-card__title { font-size: 1.0625rem; }
.value-card p { font-size: 0.9rem; line-height: 1.55; }
.values__grid.slick-slider { display: block; }
.values__grid.slick-slider .slick-list { margin-inline: -0.5rem; }
.values__grid.slick-slider .slick-slide { padding-inline: 0.5rem; }
@media (min-width: 1200px) {
  .values__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
  .value-card:nth-child(even) { margin-block-start: 2rem; }
}

/* --------------------------------------------------------------------------
   Why DAYANA — split tabs
   -------------------------------------------------------------------------- */
.why-panel { display: grid; gap: 1rem; padding-block: 0.5rem 1.5rem; }
.why-panel__mark { display: inline-flex; align-items: center; justify-content: center; inline-size: 72px; block-size: 72px; color: var(--c-accent); background: var(--c-bg-tint); border-radius: 2px; }
.why-panel__mark svg { inline-size: 36px; block-size: 36px; }
@media (max-width: 1023.98px) {
  .why-about .section-head { text-align: center; }
  .why-panel { justify-items: center; text-align: center; }
}
@media (min-width: 1024px) {
  .why-panel { padding: 2rem; background: var(--c-bg-alt); border-inline-start: 4px solid var(--c-accent); border-radius: 2px; }
  .why-panel__mark { background: var(--c-card); }
}

/* --------------------------------------------------------------------------
   Market presence — dark band, three markets on a line
   -------------------------------------------------------------------------- */
.market { position: relative; isolation: isolate; overflow: hidden; background: var(--c-bg-deep); color: var(--c-on-dark-muted); }
.market h2 { color: #fff; }
.market__bg { position: absolute; inset: 0; z-index: -1; }
.market__stripes { position: absolute; inset-inline-start: -10%; inset-block: 0; inline-size: 50%; background: repeating-linear-gradient(-32deg, transparent 0 22px, var(--stripe-color) 22px 23px); mask-image: linear-gradient(to left, transparent, rgba(0,0,0,1) 60%); }
.market__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.market__content { text-align: center; }
.market__content .lead { margin-block-start: 1rem; }
.market__map { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.market__line { position: absolute; inset-inline: 16%; inset-block-start: 28px; block-size: 2px; background: var(--c-border-dark); }
.market__pin { position: relative; display: grid; justify-items: center; gap: 0.35rem; padding: 0.75rem 0.5rem 1rem; text-align: center; background: var(--c-card-dark); border: 1px solid var(--c-border-dark); border-radius: 2px; }
.market__pin svg { inline-size: 28px; block-size: 28px; color: var(--c-on-dark-muted); background: var(--c-bg-deep); padding: 2px; }
.market__pin.is-focus svg { color: var(--c-accent); }
.market__pin.is-focus { border-color: var(--c-accent); background: rgba(11, 142, 215, 0.14); }
.market__name { font-family: "Barlow Condensed", "Barlow", sans-serif; font-weight: 600; font-size: 1.375rem; letter-spacing: 0.04em; color: #fff; }
.market__status { font-size: 0.8125rem; line-height: 1.4; }
@media (min-width: 1024px) {
  .market__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(3rem, 6vw, 6rem); align-items: center; }
  .market__content { text-align: start; }
  .market__pin { padding: 1.25rem 1rem 1.5rem; }
  .market__pin.is-focus { transform: translateY(-1rem); }
  .market__status { font-size: 0.9375rem; }
}

/* --------------------------------------------------------------------------
   Proof — full-bleed parallax band
   -------------------------------------------------------------------------- */
.proof { position: relative; isolation: isolate; padding-block: clamp(4rem, 10vw, 8rem); }
.proof__frame { position: absolute; inset: 0; z-index: -1; background: var(--c-primary); }
.proof__frame .media-frame__move { position: absolute; inset: -12% 0; block-size: auto; }
.proof__frame img { block-size: 100%; }
.proof__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 27, 82, 0.92) 0%, rgba(20, 27, 82, 0.55) 60%, rgba(20, 27, 82, 0.25) 100%); }
.proof__frame:hover img { transform: none; }
.proof__panel { position: relative; max-inline-size: 640px; margin-inline: auto; padding: clamp(1.75rem, 4vw, 2.75rem); text-align: center; background: var(--c-card); border-block-start: 4px solid var(--c-accent); border-radius: 2px; }
.proof__panel .lead { margin-block: 1rem 1.75rem; }
@media (min-width: 768px) { .proof__panel { margin-inline: 0; text-align: start; } }

/* --------------------------------------------------------------------------
   Roadmap
   -------------------------------------------------------------------------- */
.roadmap { position: relative; overflow: hidden; }
.roadmap__stripes { position: absolute; inset-inline-end: 0; inset-block: 0; inline-size: 42%; pointer-events: none; background: repeating-linear-gradient(-32deg, transparent 0 22px, rgba(43, 58, 152, 0.07) 22px 23px); mask-image: linear-gradient(to right, transparent, rgba(0,0,0,1) 70%); }
.roadmap .container { position: relative; }
.roadmap__head { max-inline-size: 820px; margin-block-end: clamp(2rem, 4vw, 3rem); text-align: center; margin-inline: auto; }
.roadmap__head .lead { margin-block-start: 1rem; }
.roadmap__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.roadmap__stage { padding: 1.5rem; background: var(--c-card); border: 1px solid var(--c-border); border-radius: 2px; }
.roadmap__stage--later { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.roadmap__label { display: block; margin-block-end: 1rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); }
.roadmap__stage--later .roadmap__label { color: var(--c-on-dark-muted); }
.roadmap__list { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.roadmap__item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; font-weight: 500; color: var(--c-heading); background: var(--c-bg-alt); border-inline-start: 3px solid var(--c-accent); }
.roadmap__item .icon-tile { inline-size: 40px; block-size: 40px; flex: none; }
.roadmap__item .icon-tile svg { inline-size: 20px; block-size: 20px; }
.roadmap__steps { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.roadmap__step { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.75rem 0.5rem; text-align: center; font-size: 0.875rem; font-weight: 500; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--c-border-dark); border-radius: 2px; }
.roadmap__step .icon-tile { inline-size: 40px; block-size: 40px; background: rgba(255, 255, 255, 0.1); color: #fff; }
.roadmap__step .icon-tile svg { inline-size: 20px; block-size: 20px; }
.roadmap__step:last-child { border-color: var(--c-accent); background: rgba(11, 142, 215, 0.18); }
.roadmap__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-block-start: clamp(2rem, 4vw, 3rem); }
@media (min-width: 640px) { .roadmap__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .roadmap__head { text-align: start; margin-inline: 0; }
  .roadmap__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1.5rem; }
  .roadmap__stage { padding: 2rem; }
  .roadmap__actions { justify-content: flex-start; }
}