/* Fiqfold by Sentrifiq — palette 7: Warm Ivory, Deep Teal, Coral.
   Ivory is the page, teal carries the weight, coral marks the moment a plan becomes a room.
   Dark mode is a deep teal night, so the palette still reads. */

:root {
  --ivory: #f3eee8;
  --paper: #fbf8f4;
  --teal: #17645f;
  --teal-deep: #0f4a46;
  --teal-tint: #dde9e5;
  --coral: #ff6845;
  --coral-text: #b83a1f;
  --ink: #1b2321;
  --ink-soft: #4f5754;
  --rule: rgba(23, 100, 95, 0.18);
  --on-teal: #f3eee8;
  --plan-grid: rgba(23, 100, 95, 0.07);
  --display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --page: 1160px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ivory: #0f2624;
    --paper: #153330;
    --teal: #5cc0b4;
    --teal-deep: #0a1c1a;
    --teal-tint: #1c3f3b;
    --coral: #ff7a5c;
    --coral-text: #ff9a80;
    --ink: #f3eee8;
    --ink-soft: #b9c7c3;
    --rule: rgba(243, 238, 232, 0.14);
    --on-teal: #0b1d1b;
    --plan-grid: rgba(243, 238, 232, 0.05);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 400 18px/1.6 var(--text); -webkit-font-smoothing: antialiased; }
img, svg { display: block; }
a { color: var(--teal); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 4px; }
.page { max-width: var(--page); margin: 0 auto; padding: 0 28px; }

h1, h2, h3 { font-family: var(--display); color: var(--ink); margin: 0; }
h1 { font-size: clamp(42px, 6.4vw, 78px); line-height: 1.02; font-weight: 700; letter-spacing: -0.025em; max-width: 13ch; }
h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: 20px; line-height: 1.3; font-weight: 650; }
p { margin: 0; }

/* Top bar: plain, not floating. */
.top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 700 22px/1 var(--display); letter-spacing: -0.02em; }
.logo img { width: 34px; height: 34px; }
.logo small { font: 400 14px/1 var(--text); color: var(--ink-soft); letter-spacing: 0; margin-left: 2px; }
.top nav { display: flex; align-items: center; gap: 26px; font-size: 16px; }
.top nav a { color: var(--ink-soft); text-decoration: none; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); }

.button { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 14px; font: 600 16px/1 var(--text); text-decoration: none; border: 2px solid var(--teal); }
.button.solid { background: var(--teal); color: var(--on-teal); }
.button.solid:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: #f3eee8; }
.button.line { color: var(--teal); }
.button.line:hover { background: var(--teal-tint); }
.top .button { padding: 10px 18px; }
@media (prefers-color-scheme: dark) { .button.solid:hover { background: #7dd3c7; border-color: #7dd3c7; color: var(--on-teal); } }

/* Hero */
.hero { padding-block: 56px 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 40px; align-items: end; }
.hero .lede { font-size: 21px; line-height: 1.5; color: var(--ink-soft); max-width: 30em; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* The signature: the same flat, flat and raised. */
.fold { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) 90px minmax(0, 1.1fr); align-items: center; margin: 36px 0 24px; padding: 36px; border-radius: 28px; background: var(--paper); border: 1px solid var(--rule); overflow: hidden; }
.fold::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--plan-grid) 1px, transparent 1px), linear-gradient(90deg, var(--plan-grid) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; }
.fold figure { position: relative; margin: 0; }
.fold figcaption { margin-top: 14px; font-size: 15px; color: var(--ink-soft); text-align: center; }
.crease { position: relative; height: 100%; display: grid; place-items: center; }
.crease svg { width: 90px; height: 60px; }
.crease path { fill: none; stroke: var(--coral); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 4 6; }
.crease .head { stroke-dasharray: none; }

/* Glass, used once: the slab the model stands on. */
.slab { position: relative; padding: 18px 10px 6px; border-radius: 24px; }
.slab::before { content: ""; position: absolute; inset: 14% 6% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 104, 69, 0.45), rgba(23, 100, 95, 0.25) 60%, transparent); filter: blur(24px); }
.slab::after { content: ""; position: absolute; inset: auto 0 0; height: 46%; border-radius: 24px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12)); border: 1px solid rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 24px 50px rgba(15, 74, 70, 0.14); }
.slab svg { position: relative; z-index: 1; }
@media (prefers-color-scheme: dark) { .slab::after { background: linear-gradient(160deg, rgba(243, 238, 232, 0.12), rgba(243, 238, 232, 0.03)); border-color: rgba(243, 238, 232, 0.16); box-shadow: inset 0 1px 0 rgba(243, 238, 232, 0.12), 0 24px 50px rgba(0, 0, 0, 0.35); } }

.plan, .model { width: 100%; height: auto; overflow: visible; }
.pl-room { stroke: none; }
.pl-liv { fill: rgba(255, 104, 69, 0.10); }
.pl-bed { fill: rgba(23, 100, 95, 0.10); }
.pl-kit { fill: rgba(23, 100, 95, 0.05); }
.pl-wall { fill: var(--teal); }
.pl-window { fill: var(--paper); stroke: var(--teal); stroke-width: 1.2; }
.pl-door { fill: none; stroke: var(--coral); stroke-width: 1.6; }
.pl-dim { fill: none; stroke: var(--teal); stroke-width: 1; opacity: 0.6; }
.pl-name { font: 600 13px var(--display); fill: var(--ink); }
.pl-area { font: 400 12px var(--text); fill: var(--ink-soft); font-variant-numeric: tabular-nums; }
.md-floor { stroke: var(--teal); stroke-width: 0.6; }
.md-liv { fill: #f7c9b8; }
.md-bed { fill: #bcd8d1; }
.md-kit { fill: #e5ddd1; }
.md-top { fill: #17645f; stroke: #0f4a46; stroke-width: 0.6; }
.md-front { fill: #fbf8f4; stroke: #c9d6d2; stroke-width: 0.6; }
.md-side { fill: #e7e0d6; stroke: #c9d6d2; stroke-width: 0.6; }
.md-name { font: 600 12px var(--display); fill: #1b2321; }
@media (prefers-color-scheme: dark) {
  .md-liv { fill: #6b3a2e; } .md-bed { fill: #24524c; } .md-kit { fill: #3a3a33; }
  .md-top { fill: #5cc0b4; stroke: #2f8a80; }
  .md-front { fill: #e7e0d6; stroke: #a9b6b2; } .md-side { fill: #c9c1b6; stroke: #a9b6b2; }
  .md-name { fill: #f3eee8; }
}

/* Steps: a real sequence on one coral line. */
.steps { padding-block: 72px 80px; }
.steps h2 { max-width: 16ch; }
.steps ol { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; counter-reset: step; position: relative; }
.steps ol::before { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 2px; background: linear-gradient(90deg, var(--coral), var(--teal)); opacity: 0.6; }
.steps li { counter-increment: step; position: relative; }
.steps li::before { content: counter(step); position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ivory); border: 2px solid var(--coral); color: var(--coral-text); font: 700 17px/1 var(--display); margin-bottom: 22px; }
.steps li p { margin-top: 8px; color: var(--ink-soft); max-width: 30ch; }

/* Teal band: Falaknuma */
.band { background: var(--teal); color: #f3eee8; padding: 88px 0; overflow: hidden; }
@media (prefers-color-scheme: dark) { .band { background: #0a1c1a; } }
.band .page { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.band h2 { color: #f3eee8; }
.band p { margin-top: 18px; color: rgba(243, 238, 232, 0.82); max-width: 32em; }
.band .note { margin-top: 26px; font-size: 15px; color: rgba(243, 238, 232, 0.6); }
.band .iso { width: 100%; height: auto; overflow: visible; }
.band .iso line, .band .iso path { vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.band .iso-plan { fill: rgba(243, 238, 232, 0.05); stroke: rgba(243, 238, 232, 0.55); stroke-width: 1; stroke-dasharray: 3 3; }
.band .iso-tick, .band .iso-dim { stroke: rgba(243, 238, 232, 0.5); stroke-width: 1; }
.band .iso-top { fill: rgba(255, 104, 69, 0.22); stroke: #f3eee8; stroke-width: 1.1; }
.band .iso-south { fill: rgba(243, 238, 232, 0.10); stroke: #f3eee8; stroke-width: 1.1; }
.band .iso-west { fill: rgba(243, 238, 232, 0.20); stroke: #f3eee8; stroke-width: 1.1; }
.band .iso-win { stroke: rgba(243, 238, 232, 0.7); stroke-width: 1.2; }
.band .iso-parapet { stroke: rgba(243, 238, 232, 0.5); stroke-width: 0.8; }
.band .iso-glow { fill: rgba(255, 104, 69, 0.45); filter: blur(1.5px); r: 2.4px; }
.band .iso-dot { fill: #ff6845; r: 1.1px; }

/* Facts */
.facts { padding-block: 88px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; }
.facts .intro p { margin-top: 16px; color: var(--ink-soft); max-width: 28em; }
.facts .intro .button { margin-top: 28px; }
.facts dl { margin: 0; display: grid; gap: 0; border-top: 2px solid var(--teal); }
.facts dl div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font: 650 17px/1.4 var(--display); }
.facts dd { margin: 0; color: var(--ink-soft); }

.soon { padding-block: 0 96px; }
.soon .card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 36px 40px; border-radius: 28px; background: var(--paper); border: 1px solid var(--rule); }
.soon p { color: var(--ink-soft); margin-top: 8px; }
.soon .actions { display: flex; flex-wrap: wrap; gap: 12px; }

footer { border-top: 1px solid var(--rule); padding: 30px 0 48px; font-size: 15px; color: var(--ink-soft); }
footer .page { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
footer a { color: var(--ink-soft); }

/* Documents: privacy and support */
.doc { max-width: 776px; padding-block: 48px 80px; }
.doc .back { font-size: 16px; }
.doc h1 { font-size: clamp(38px, 5vw, 58px); max-width: none; margin-top: 18px; }
.doc .updated { margin-top: 12px; color: var(--ink-soft); font-size: 16px; }
.short { margin: 36px 0 12px; padding: 30px 32px; border-radius: 24px; background: var(--teal); color: #f3eee8; }
@media (prefers-color-scheme: dark) { .short { background: #0a1c1a; border: 1px solid var(--rule); } }
.short h2 { color: #f3eee8; font-size: 24px; }
.short ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.short li { padding-left: 26px; position: relative; color: rgba(243, 238, 232, 0.9); }
.short li::before { content: ""; position: absolute; left: 4px; top: 0.6em; width: 10px; height: 10px; border-radius: 50%; background: #ff6845; }
.contents { margin: 34px 0 8px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.contents a { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--rule); font-size: 15px; text-decoration: none; color: var(--ink-soft); background: var(--paper); }
.contents a:hover { color: var(--teal); border-color: var(--teal); }
.doc section { padding-top: 34px; scroll-margin-top: 20px; }
.doc section h2 { font-size: 25px; }
.doc section p, .doc section li { color: var(--ink-soft); }
.doc section p { margin-top: 10px; }
.doc section strong { color: var(--ink); }
.doc section ul { padding-left: 1.2em; margin: 10px 0 0; }
.doc section li { margin: 6px 0; }
.mail { display: block; margin: 36px 0 8px; padding: 30px 32px; border-radius: 24px; background: var(--teal); color: #f3eee8; text-decoration: none; }
@media (prefers-color-scheme: dark) { .mail { background: #0a1c1a; border: 1px solid var(--rule); } }
.mail span { display: block; font-size: 16px; color: rgba(243, 238, 232, 0.75); }
.mail strong { display: block; margin-top: 6px; font: 700 clamp(24px, 3.4vw, 34px)/1.2 var(--display); color: #f3eee8; }
.mail:hover strong { text-decoration: underline; text-decoration-color: #ff6845; text-underline-offset: 6px; }
.doc .tip { margin-top: 14px; color: var(--ink-soft); }
.faq { margin-top: 20px; border-top: 2px solid var(--teal); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; padding: 20px 36px 20px 0; position: relative; font: 650 18px/1.4 var(--display); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--coral); border-bottom: 2px solid var(--coral); transform: translateY(-70%) rotate(45deg); transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details p { padding: 0 0 22px; color: var(--ink-soft); margin: 0; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* Small screens */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-block-start: 28px; gap: 18px; }
  .fold { grid-template-columns: 1fr; padding: 24px; gap: 8px; }
  .crease svg { transform: rotate(90deg); width: 60px; }
  .steps ol { grid-template-columns: 1fr; gap: 28px; }
  .steps ol::before { left: 19px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--coral), var(--teal)); }
  .steps li { padding-left: 62px; }
  .steps li::before { position: absolute; left: 0; top: -6px; margin: 0; }
  .band .page, .facts { grid-template-columns: 1fr; gap: 36px; }
  .facts dl div { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 600px) {
  .page { padding: 0 18px; }
  .top nav a:not(.button) { display: none; }
  .logo small { display: none; }
  .soon .card, .short, .mail { padding: 24px; }
}

/* Skeleton loading: on arrival, key blocks show as shimmering placeholders, then the real
   content comes through in reading order. The placeholder is invisible unless its animation is
   running, so content can never stay hidden. CSS only; skipped with Reduce Motion. */
:root { --sk-base: #e6e0d7; --sk-shine: #f6f2ec; }
@media (prefers-color-scheme: dark) { :root { --sk-base: #183a37; --sk-shine: #22504b; } }
.sk { position: relative; }
.sk::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 5;
  border-radius: 14px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(100deg, var(--sk-base) 30%, var(--sk-shine) 50%, var(--sk-base) 70%);
  background-size: 220% 100%;
  animation: sk-shimmer 1s linear 2, sk-life var(--sk-time, 1.1s) ease-out 1;
}
.fold .sk::after, .short.sk::after, .mail.sk::after { border-radius: 22px; }
@keyframes sk-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes sk-life { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }
.sk-1 { --sk-time: 0.9s; } .sk-2 { --sk-time: 1.1s; } .sk-3 { --sk-time: 1.3s; }
.sk-4 { --sk-time: 1.5s; } .sk-5 { --sk-time: 1.75s; }
@media (prefers-reduced-motion: reduce) { .sk::after { display: none; } }