/* ===== Fonts: Google Sans for Latin, IBM Plex Sans Arabic for Arabic ===== */
@font-face {
  font-family: "Google Sans";
  src: url("./assets/fonts/GoogleSans-Variable.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2010-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2605;
}
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("./assets/fonts/IBMPlexSansArabic-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("./assets/fonts/IBMPlexSansArabic-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("./assets/fonts/IBMPlexSansArabic-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("./assets/fonts/IBMPlexSansArabic-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("./assets/fonts/IBMPlexSansArabic-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

/* ===== Tokens (Bainkom brand) ===== */
:root {
  --navy: #0e1d24;
  --navy-2: #172a33;
  --gold: #c48e53;
  --gold-soft: #f3e6d6;
  --sand: #f3f0e9;
  --paper: #faf8f4;
  --white: #fff;
  --ink: #0e1d24;
  --muted: #5d6a70;
  --line: rgba(14, 29, 36, .09);
  --radius-lg: 28px;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(14, 29, 36, .04), 0 12px 32px -12px rgba(14, 29, 36, .14);
  --font: "Google Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, .8, .22, 1);
  --pattern-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='%23c48e53'%3E%3Cg transform='translate%28-12 -4%29'%3E%3Cpath d='M35.18 16.94c.78 0 1.54.2 2.25.6l12.77 7.23c2.05 1.16 2.27 3.08 2.27 3.86s-.22 2.69-2.27 3.85l-12.77 7.23c-.71.4-1.47.6-2.25.6-2.18 0-4.54-1.7-4.54-4.46V21.4c0-2.76 2.36-4.46 4.54-4.46zm0-3.63c-4.3 0-8.25 3.37-8.25 8.09v14.45c0 4.71 3.95 8.09 8.25 8.09 1.37 0 2.78-.35 4.1-1.1l12.77-7.23c2.75-1.55 4.12-4.27 4.12-6.99s-1.37-5.44-4.12-6.99L39.28 14.4c-1.32-.75-2.73-1.1-4.1-1.1z'/%3E%3Cpath d='M35.2 32.63c.78 0 1.54.2 2.26.6l12.8 7.25c2.05 1.16 2.27 3.09 2.27 3.86s-.22 2.7-2.27 3.87l-12.8 7.24c-.72.4-1.47.6-2.26.6-2.2 0-4.56-1.71-4.56-4.48V37.1c0-2.77 2.37-4.48 4.56-4.48m0-3.6c-4.31 0-8.27 3.37-8.27 8.1v14.48c0 4.72 3.95 8.1 8.27 8.1 1.37 0 2.78-.35 4.1-1.1l12.8-7.23c2.75-1.56 4.13-4.28 4.13-7.01s-1.38-5.45-4.13-7l-12.8-7.25c-1.33-.75-2.74-1.1-4.1-1.1z'/%3E%3C/g%3E%3Cg transform='translate%2848 56%29 rotate%28180 41 36%29'%3E%3Cpath d='M35.18 16.94c.78 0 1.54.2 2.25.6l12.77 7.23c2.05 1.16 2.27 3.08 2.27 3.86s-.22 2.69-2.27 3.85l-12.77 7.23c-.71.4-1.47.6-2.25.6-2.18 0-4.54-1.7-4.54-4.46V21.4c0-2.76 2.36-4.46 4.54-4.46zm0-3.63c-4.3 0-8.25 3.37-8.25 8.09v14.45c0 4.71 3.95 8.09 8.25 8.09 1.37 0 2.78-.35 4.1-1.1l12.77-7.23c2.75-1.55 4.12-4.27 4.12-6.99s-1.37-5.44-4.12-6.99L39.28 14.4c-1.32-.75-2.73-1.1-4.1-1.1z'/%3E%3Cpath d='M35.2 32.63c.78 0 1.54.2 2.26.6l12.8 7.25c2.05 1.16 2.27 3.09 2.27 3.86s-.22 2.7-2.27 3.87l-12.8 7.24c-.72.4-1.47.6-2.26.6-2.2 0-4.56-1.71-4.56-4.48V37.1c0-2.77 2.37-4.48 4.56-4.48m0-3.6c-4.31 0-8.27 3.37-8.27 8.1v14.48c0 4.72 3.95 8.1 8.27 8.1 1.37 0 2.78-.35 4.1-1.1l12.8-7.23c2.75-1.56 4.13-4.28 4.13-7.01s-1.38-5.45-4.13-7l-12.8-7.25c-1.33-.75-2.74-1.1-4.1-1.1z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --pattern-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='%23ffffff'%3E%3Cg transform='translate%28-12 -4%29'%3E%3Cpath d='M35.18 16.94c.78 0 1.54.2 2.25.6l12.77 7.23c2.05 1.16 2.27 3.08 2.27 3.86s-.22 2.69-2.27 3.85l-12.77 7.23c-.71.4-1.47.6-2.25.6-2.18 0-4.54-1.7-4.54-4.46V21.4c0-2.76 2.36-4.46 4.54-4.46zm0-3.63c-4.3 0-8.25 3.37-8.25 8.09v14.45c0 4.71 3.95 8.09 8.25 8.09 1.37 0 2.78-.35 4.1-1.1l12.77-7.23c2.75-1.55 4.12-4.27 4.12-6.99s-1.37-5.44-4.12-6.99L39.28 14.4c-1.32-.75-2.73-1.1-4.1-1.1z'/%3E%3Cpath d='M35.2 32.63c.78 0 1.54.2 2.26.6l12.8 7.25c2.05 1.16 2.27 3.09 2.27 3.86s-.22 2.7-2.27 3.87l-12.8 7.24c-.72.4-1.47.6-2.26.6-2.2 0-4.56-1.71-4.56-4.48V37.1c0-2.77 2.37-4.48 4.56-4.48m0-3.6c-4.31 0-8.27 3.37-8.27 8.1v14.48c0 4.72 3.95 8.1 8.27 8.1 1.37 0 2.78-.35 4.1-1.1l12.8-7.23c2.75-1.56 4.13-4.28 4.13-7.01s-1.38-5.45-4.13-7l-12.8-7.25c-1.33-.75-2.74-1.1-4.1-1.1z'/%3E%3C/g%3E%3Cg transform='translate%2848 56%29 rotate%28180 41 36%29'%3E%3Cpath d='M35.18 16.94c.78 0 1.54.2 2.25.6l12.77 7.23c2.05 1.16 2.27 3.08 2.27 3.86s-.22 2.69-2.27 3.85l-12.77 7.23c-.71.4-1.47.6-2.25.6-2.18 0-4.54-1.7-4.54-4.46V21.4c0-2.76 2.36-4.46 4.54-4.46zm0-3.63c-4.3 0-8.25 3.37-8.25 8.09v14.45c0 4.71 3.95 8.09 8.25 8.09 1.37 0 2.78-.35 4.1-1.1l12.77-7.23c2.75-1.55 4.12-4.27 4.12-6.99s-1.37-5.44-4.12-6.99L39.28 14.4c-1.32-.75-2.73-1.1-4.1-1.1z'/%3E%3Cpath d='M35.2 32.63c.78 0 1.54.2 2.26.6l12.8 7.25c2.05 1.16 2.27 3.09 2.27 3.86s-.22 2.7-2.27 3.87l-12.8 7.24c-.72.4-1.47.6-2.26.6-2.2 0-4.56-1.71-4.56-4.48V37.1c0-2.77 2.37-4.48 4.56-4.48m0-3.6c-4.31 0-8.27 3.37-8.27 8.1v14.48c0 4.72 3.95 8.1 8.27 8.1 1.37 0 2.78-.35 4.1-1.1l12.8-7.23c2.75-1.56 4.13-4.28 4.13-7.01s-1.38-5.45-4.13-7l-12.8-7.25c-1.33-.75-2.74-1.1-4.1-1.1z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body { font-family: var(--font); color: var(--ink); background: var(--paper); line-height: 1.7; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.container { width: min(1240px, 100% - 48px); margin-inline: auto; }
.text-gold { color: var(--gold); }
.skip-link { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip-link:focus { top: 16px; }

/* ===== Buttons ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 15px; line-height: 1; white-space: nowrap; cursor: pointer; transition: transform .25s var(--ease), background-color .25s, color .25s, border-color .25s, box-shadow .25s; }
.btn svg { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-1px); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.btn--lg { min-height: 54px; padding: 0 28px; font-size: 16px; }
.btn--gold { background: var(--gold); color: var(--navy); box-shadow: 0 8px 24px -10px rgba(196, 142, 83, .8); }
.btn--gold:hover { background: #cf9a60; }
.btn--dark { background: var(--navy); color: #fff; }
.btn--dark:hover { background: var(--navy-2); }
.btn--outline { border-color: rgba(14, 29, 36, .18); background: #fff; color: var(--ink); }
.btn--outline:hover { border-color: var(--gold); background: var(--gold-soft); }
.btn--block { width: 100%; }
.btn--glass { background: rgba(255, 255, 255, .6); border-color: rgba(14, 29, 36, .12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn--glass:hover { background: #fff; }

/* AI style-quiz button: gold glow, rotating light border, shimmer sweep */
@property --ai-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.btn--ai { position: relative; isolation: isolate; gap: 10px; padding-inline: 32px 28px; color: #fff; background: radial-gradient(120% 140% at 50% 120%, #3a2a1a 0%, var(--navy) 60%); border: 0; overflow: hidden; animation: ai-glow 2.8s ease-in-out infinite; }
.btn--ai::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--ai-angle), rgba(196, 142, 83, .15), #f7d3a4, #c48e53, rgba(196, 142, 83, .15) 40%, #fff3e2 60%, rgba(196, 142, 83, .15)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ai-spin 3.2s linear infinite; }
.btn--ai::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 226, 186, .35) 48%, transparent 66%); transform: translateX(120%); animation: ai-shimmer 3.2s var(--ease) infinite; }
.btn--ai__icon { width: 20px; height: 20px; color: #f2c58f; filter: drop-shadow(0 0 6px rgba(242, 197, 143, .9)); animation: ai-twinkle 2.4s ease-in-out infinite; }
.btn--ai:hover { transform: translateY(-2px); animation-duration: 1.4s; }
@keyframes ai-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(196, 142, 83, .55), 0 10px 30px -6px rgba(196, 142, 83, .9), 0 0 46px 2px rgba(226, 160, 84, .55); }
  50% { box-shadow: 0 0 0 1px rgba(232, 190, 136, .9), 0 14px 40px -4px rgba(196, 142, 83, 1), 0 0 80px 10px rgba(226, 160, 84, .75); }
}
@keyframes ai-spin { to { --ai-angle: 360deg; } }
@keyframes ai-shimmer { 0%, 30% { transform: translateX(120%); } 70%, 100% { transform: translateX(-120%); } }
@keyframes ai-twinkle { 50% { transform: scale(.82) rotate(-12deg); opacity: .75; } }

/* ===== Eyebrow / section heads ===== */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 16px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--muted); }
.eyebrow strong { color: var(--ink); font-weight: 600; }
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(196, 142, 83, .18); }
.eyebrow--glass { background: rgba(255, 255, 255, .62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.eyebrow--dark { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .72); }

.section { padding: clamp(80px, 10vw, 136px) 0; }
.section--tinted { background: var(--sand); }
.section--flush { padding-block: 0; }
.section--flush + .section, .section + .section--flush { padding-top: clamp(80px, 10vw, 136px); }
.section-head { display: grid; justify-items: center; gap: 18px; text-align: center; margin-bottom: clamp(40px, 6vw, 64px); }
.section-head--split { display: flex; align-items: end; justify-content: space-between; gap: 24px; text-align: start; }
.section-head--split > div { display: grid; justify-items: start; gap: 18px; }
.section-head--split .section-lead { max-width: 420px; }
.section-title { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.25; font-weight: 700; letter-spacing: -.01em; max-width: 24ch; text-wrap: balance; }
.section-lead { font-size: clamp(16px, 1.4vw, 18px); color: var(--muted); max-width: 56ch; }

/* ===== Header ===== */
.site-header { position: fixed; z-index: 50; inset: 16px 0 auto; pointer-events: none; }
.site-header__bar { pointer-events: auto; width: min(1240px, 100% - 32px); margin-inline: auto; display: flex; align-items: center; gap: 24px; padding: 10px 12px 10px 20px; border-radius: 999px; background: rgba(255, 255, 255, 0); border: 1px solid rgba(255, 255, 255, 0); backdrop-filter: blur(0) saturate(1); -webkit-backdrop-filter: blur(0) saturate(1); transition: background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease), -webkit-backdrop-filter .4s var(--ease); }
/* over the hero the bar has no background; once you scroll it turns into the frosted glass pill */
.site-header.is-scrolled .site-header__bar, .site-header.is-open .site-header__bar { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .7); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 10px 30px -18px rgba(14, 29, 36, .35); }
.site-header__logo img { height: 34px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 4px; margin-inline-start: 12px; }
.site-nav > a { padding: 8px 14px; border-radius: 999px; font-size: 15px; font-weight: 500; transition: background-color .2s; }
.site-nav > a:hover { background: rgba(14, 29, 36, .06); }
.site-nav__mobile-actions { display: none; }
.site-header__actions { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.site-header__lang, .site-header__login { padding: 8px 12px; border-radius: 999px; font-size: 14px; font-weight: 500; }
.site-header__lang:hover, .site-header__login:hover { background: rgba(14, 29, 36, .06); }
.site-header__menu { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--navy); cursor: pointer; place-content: center; gap: 5px; }
.site-header__menu span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; transition: transform .3s var(--ease); }
.site-header.is-open .site-header__menu span:first-child { transform: translateY(3.5px) rotate(45deg); }
.site-header.is-open .site-header__menu span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ===== Hero overlay + content (on top of the interactive reveal) ===== */
.architectural-hero { isolation: isolate; }
.hero-overlay {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to top, var(--sand) 0%, rgba(243, 240, 233, .94) 16%, rgba(243, 240, 233, .55) 34%, rgba(243, 240, 233, 0) 56%),
    linear-gradient(to left, rgba(243, 240, 233, .7) 0%, rgba(243, 240, 233, 0) 46%),
    linear-gradient(to bottom, rgba(243, 240, 233, .55) 0%, rgba(243, 240, 233, 0) 18%);
}
.hero-content { position: absolute; inset: auto 0 0; z-index: 4; padding-bottom: clamp(72px, 16vh, 170px); pointer-events: none; }
.hero-content .container { display: grid; justify-items: start; gap: 14px; }
.hero-content a { pointer-events: auto; }
.hero-title { font-size: clamp(36px, 5.2vw, 72px); line-height: 1.12; font-weight: 700; letter-spacing: -.015em; max-width: 14ch; text-wrap: balance; }
.hero-lead { font-size: clamp(15px, 1.3vw, 18px); color: #3c4a50; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* ===== Numbers strip ===== */
.stats-strip { background: var(--paper); padding: clamp(32px, 4vw, 48px) 0 0; }
#services { padding-top: clamp(56px, 6vw, 88px); }
.stats-strip__list { display: grid; grid-template-columns: repeat(3, 1fr); }
.stats-strip__list > div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 12px; text-align: center; }
.stats-strip__list > div + div { border-inline-start: 1px solid rgba(14, 29, 36, .12); }
.stats-strip dd { font-size: clamp(40px, 5.4vw, 72px); font-weight: 700; line-height: 1; letter-spacing: -.02em; direction: ltr; font-variant-numeric: tabular-nums; }
.stats-strip dt { font-size: clamp(14px, 1.2vw, 16px); color: var(--muted); font-weight: 500; }

.rating-stars { display: flex; gap: 3px; }
.rating-stars--sm svg { width: 22px; height: 22px; fill: #f5b301; filter: drop-shadow(0 1px 2px rgba(245, 179, 1, .4)); }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2bb673; box-shadow: 0 0 0 0 rgba(43, 182, 115, .6); animation: live 1.8s infinite; vertical-align: middle; }
@keyframes live { 70% { box-shadow: 0 0 0 7px rgba(43, 182, 115, 0); } 100% { box-shadow: 0 0 0 0 rgba(43, 182, 115, 0); } }

/* hero entrance */
.hero-content .container > * { opacity: 0; transform: translateY(18px); animation: hero-in .9s var(--ease) forwards; }
.hero-content .container > :nth-child(2) { animation-delay: .08s; }
.hero-content .container > :nth-child(3) { animation-delay: .16s; }
@keyframes hero-in { to { opacity: 1; transform: none; } }

/* ===== Logo pattern ===== */
.has-pattern, .service-card { position: relative; isolation: isolate; }
.has-pattern::before, .service-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--pattern-gold) 0 0 / 92px 92px; opacity: .07; -webkit-mask-image: radial-gradient(120% 90% at 0% 100%, #000 10%, transparent 70%); mask-image: radial-gradient(120% 90% at 0% 100%, #000 10%, transparent 70%); transition: opacity .5s var(--ease), background-position 6s linear; }

/* ===== Services (bento) ===== */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 16px; }
.service-card { display: flex; flex-direction: column; gap: 10px; padding: 28px 28px 24px; border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; z-index: 1; }
.service-card:hover, .service-card:focus-within { z-index: 2; transform: scale(1.04); box-shadow: 0 30px 60px -24px rgba(14, 29, 36, .35); border-color: rgba(196, 142, 83, .45); }
.service-card:hover::before, .service-card:focus-within::before { opacity: .14; background-position: 46px 46px; }
.service-card h3 { font-size: 21px; font-weight: 700; }
.service-card p { color: var(--muted); font-size: 15px; }
.service-card__launch { position: absolute; top: 20px; inset-inline-end: 20px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gold-soft); color: #9a6a2f; opacity: 0; transform: translate(10px, 10px) scale(.6); transition: opacity .3s var(--ease), transform .5s cubic-bezier(.3, 1.5, .5, 1); pointer-events: none; }
.service-card__launch svg { width: 20px; height: 20px; }
.service-card:hover .service-card__launch, .service-card:focus-within .service-card__launch { opacity: 1; transform: none; }
.service-card--feature .service-card__launch { background: var(--gold); color: var(--navy); }
.service-card__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--sand); margin-bottom: 6px; transition: background-color .4s, transform .5s var(--ease), box-shadow .5s var(--ease); }
.service-card__icon img { width: 34px; height: 34px; object-fit: contain; transition: filter .4s; }
.service-card:hover .service-card__icon { background: var(--gold-soft); transform: rotate(-8deg) scale(1.08); box-shadow: 0 0 0 6px rgba(196, 142, 83, .12), 0 10px 30px -6px rgba(196, 142, 83, .6); }
/* the footer slot has a fixed height: the note and the CTA swap inside it so the card never grows */
.service-card__foot { position: relative; height: 44px; margin-top: auto; padding-top: 4px; }
.service-card__note, .service-card__cta { position: absolute; inset: 4px 0 0; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; transition: opacity .35s var(--ease), transform .45s var(--ease); }
.service-card__note { color: var(--gold); }
.service-card__note svg, .service-card__cta svg { width: 18px; height: 18px; }
.service-card__cta { justify-content: center; padding: 0 18px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 14px; white-space: nowrap; opacity: 0; transform: translateY(10px); pointer-events: none; }
[data-card-link] { cursor: pointer; }
.service-card__cta:hover, .service-card:hover .service-card__cta { background: var(--gold); color: var(--navy); }
.service-card:hover .service-card__note, .service-card:focus-within .service-card__note { opacity: 0; transform: translateY(-10px); }
.service-card:hover .service-card__cta, .service-card:focus-within .service-card__cta { opacity: 1; transform: none; pointer-events: auto; }
.service-card--feature { grid-column: 1; grid-row: 1; background: radial-gradient(120% 90% at 100% 0%, rgba(196, 142, 83, .3), transparent 60%), var(--navy); color: #fff; border-color: transparent; }
.service-card--feature::before { background-image: var(--pattern-white); opacity: .06; }
.service-card--feature:hover::before { opacity: .12; }
.service-card--under-feature { grid-column: 1; grid-row: 2; }
.service-card--feature p { color: rgba(255, 255, 255, .72); }
.service-card--feature .service-card__cta { background: var(--gold); color: var(--navy); }
.service-card--feature .service-card__cta:hover, .service-card--feature:hover .service-card__cta { background: #fff; color: var(--navy); }
/* consultation icon glows to draw the eye */
.service-card--feature .service-card__icon { position: relative; background: rgba(196, 142, 83, .22); box-shadow: 0 0 0 1px rgba(242, 197, 143, .5), 0 0 28px rgba(232, 178, 112, .55); animation: icon-glow 2.6s ease-in-out infinite; }
.service-card--feature .service-card__icon::after { content: ""; position: absolute; inset: -6px; border-radius: 22px; border: 1.5px solid rgba(242, 197, 143, .7); animation: icon-ring 2.6s ease-out infinite; }
.service-card--feature .service-card__icon img { filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(255, 220, 170, .9)); }
.service-card--feature:hover .service-card__icon { background: var(--gold); transform: rotate(-8deg) scale(1.08); box-shadow: 0 0 0 6px rgba(196, 142, 83, .25), 0 0 48px rgba(232, 178, 112, .9); }
.service-card--feature:hover .service-card__icon img { filter: brightness(0) drop-shadow(0 0 0 transparent); }
@keyframes icon-glow { 50% { box-shadow: 0 0 0 1px rgba(242, 197, 143, .9), 0 0 44px rgba(232, 178, 112, .85); } }
@keyframes icon-ring { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
@media (hover: none) {
  .service-card__note { opacity: 0; }
  .service-card__cta { opacity: 1; transform: none; pointer-events: auto; }
}

/* ===== Packages ===== */
.packages-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.package-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.package-card:hover { box-shadow: var(--shadow); }
.package-card__media { position: relative; aspect-ratio: 5 / 4; overflow: hidden; margin: 8px 8px 0; border-radius: calc(var(--radius-lg) - 8px); }
.package-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.package-card:hover .package-card__media img { transform: scale(1.06); }
.package-card__eta { position: absolute; bottom: 10px; inset-inline-start: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 12px; font-weight: 600; }
.package-card__eta svg { width: 14px; height: 14px; color: var(--gold); }
.package-card__body { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px 22px; flex: 1; }
.package-card h3 { font-size: 19px; font-weight: 700; }
.price { display: grid; gap: 0; }
.price__from { font-size: 12px; color: var(--muted); font-weight: 500; }
.price__value { display: flex; align-items: flex-start; gap: 2px; direction: ltr; justify-content: flex-end; font-size: 32px; line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.price__value small { font-size: 18px; margin-top: 4px; color: var(--gold); }
.feature-list { display: grid; gap: 10px; font-size: 14px; color: var(--muted); }
.feature-list li { display: flex; align-items: center; gap: 10px; }
.feature-list svg { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--gold-soft); color: #a8743d; }
.package-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--line); }
.package-card__foot .btn { min-height: 44px; padding-inline: 16px; font-size: 14px; }
.package-card:hover .btn--outline { border-color: var(--gold); background: var(--gold-soft); transform: translateY(-1px); }
.package-card:hover .btn--gold { background: #cf9a60; transform: translateY(-1px); }
.package-card--featured .package-card__foot { border-color: rgba(255, 255, 255, .16); }
.package-card--featured { background: radial-gradient(120% 70% at 50% 0%, rgba(196, 142, 83, .35), transparent 60%), var(--navy); color: #fff; border-color: transparent; box-shadow: 0 0 0 1.5px rgba(232, 190, 136, .8), 0 30px 60px -24px rgba(196, 142, 83, .75); }
.package-card--featured::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: var(--pattern-white) 0 0 / 92px 92px; opacity: .05; -webkit-mask-image: linear-gradient(to top, #000, transparent 60%); mask-image: linear-gradient(to top, #000, transparent 60%); }
.package-card--featured > * { position: relative; z-index: 1; }
.package-card--featured:hover { box-shadow: 0 0 0 1.5px rgba(232, 190, 136, 1), 0 30px 60px -20px rgba(196, 142, 83, .9); }
.package-card--featured .price__from, .package-card--featured .feature-list { color: rgba(255, 255, 255, .72); }
.package-card--featured .feature-list svg { background: rgba(196, 142, 83, .25); color: #f2c58f; }
.package-card__badge { position: absolute; top: 12px; inset-inline-end: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 12px; border-radius: 999px; background: linear-gradient(135deg, #f2c58f, var(--gold)); color: var(--navy); font-size: 13px; font-weight: 700; box-shadow: 0 8px 24px -6px rgba(196, 142, 83, .9); animation: badge-bob 2.6s ease-in-out infinite; }
.package-card__badge svg { width: 15px; height: 15px; }
@keyframes badge-bob { 50% { transform: translateY(-3px); } }
.packages-note { margin-top: 28px; text-align: center; font-size: 14px; color: var(--muted); }

/* ===== Steps ===== */
.steps { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.steps__list { display: grid; gap: 12px; }
.step { position: relative; display: flex; gap: 20px; width: 100%; padding: 24px 26px; text-align: start; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); cursor: pointer; overflow: hidden; transition: background-color .3s, border-color .3s, box-shadow .3s; }
.step__num { flex: none; font-size: 15px; font-weight: 700; color: var(--muted); padding-top: 2px; transition: color .3s; }
.step__text { display: grid; gap: 6px; }
.step__text strong { font-size: 19px; font-weight: 700; }
.step__text span { color: var(--muted); font-size: 15px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--ease), opacity .4s; }
.step.is-active { border-color: transparent; box-shadow: var(--shadow); }
.step.is-active .step__num { color: var(--gold); }
.step.is-active .step__text span { max-height: 180px; opacity: 1; }
.steps__media { position: relative; aspect-ratio: 1125 / 909; border-radius: var(--radius-lg); background: var(--sand); overflow: hidden; }
/* ===== Step cards (interactive mockups instead of screenshots) ===== */
.steps__media { isolation: isolate; }
.steps__media::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pattern-gold) 0 0 / 92px 92px; opacity: .08; }
.step-panel { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(18px, 3vw, 36px); opacity: 0; visibility: hidden; transform: translateY(16px) scale(.98); transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s .5s; }
.step-panel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s; }
.step-panel [style*="--d"] { opacity: 0; transform: translateY(10px); }
.step-panel.is-active [style*="--d"] { animation: sp-in .55s var(--ease) var(--d) both; }
@keyframes sp-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.sp-card { position: relative; width: min(420px, 100%); display: grid; gap: 14px; padding: 18px; border-radius: 24px; background: #fff; box-shadow: 0 30px 60px -28px rgba(14, 29, 36, .4), 0 0 0 1px var(--line); }
.sp-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sp-head b { display: block; font-size: 16px; }
.sp-head small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.sp-head--plain { justify-content: space-between; }
.sp-bot { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #2f4a57; box-shadow: 0 0 0 2px rgba(242, 197, 143, .7); }
.sp-bot svg { width: 36px; height: 36px; }
.sp-bot .spark { transform-box: fill-box; transform-origin: center; animation: ai-twinkle 1.8s ease-in-out infinite; }
.sp-online { position: absolute; bottom: 0; inset-inline-start: 0; width: 11px; height: 11px; border-radius: 50%; background: #2bb673; border: 2px solid #fff; }
.sp-chat { display: grid; gap: 8px; }
.sp-bubble { width: fit-content; max-width: 88%; padding: 9px 14px; border-radius: 16px 16px 16px 4px; background: var(--sand); font-size: 14px; line-height: 1.6; }
.sp-bubble--me { justify-self: end; border-radius: 16px 16px 4px 16px; background: var(--navy); color: #fff; }
.sp-options { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-option { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color .25s, border-color .25s, transform .25s var(--ease); }
.sp-option:hover { border-color: var(--gold); transform: translateY(-1px); }
.sp-option.is-picked { background: var(--navy); border-color: var(--navy); color: #fff; }
.sp-typing { display: inline-flex; gap: 4px; width: fit-content; padding: 12px 14px; border-radius: 16px; background: var(--sand); }
.sp-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: typing 1s infinite; }
.sp-typing i:nth-child(2) { animation-delay: .15s; }
.sp-typing i:nth-child(3) { animation-delay: .3s; }
.sp-float { position: absolute; padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: var(--shadow); font-size: 13px; white-space: nowrap; }
.step-panel.is-active .sp-float { animation: sp-in .55s var(--ease) var(--d) both, float 5s ease-in-out calc(var(--d) + .6s) infinite; }
.sp-float--a { top: 12%; inset-inline-end: 4%; }
.sp-float--b { bottom: 12%; inset-inline-start: 4%; }
.sp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: #e4f5ec; color: #1d8a57; font-size: 12px; font-weight: 600; white-space: nowrap; }
.sp-pill--blue { background: #e6eff6; color: #2f5b78; }
.sp-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* step 2 — offers */
.sp-offers { display: grid; gap: 8px; }
.sp-offer { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px; border-radius: 18px; border: 1px solid var(--line); background: #fff; cursor: pointer; transition: border-color .3s, box-shadow .3s, background-color .3s, transform .3s var(--ease); }
.sp-offer:hover { border-color: rgba(196, 142, 83, .55); transform: translateY(-1px); }
.sp-offer.is-picked { border-color: var(--gold); background: #fffaf3; box-shadow: 0 0 0 3px rgba(196, 142, 83, .16), 0 12px 24px -16px rgba(196, 142, 83, .8); }
.sp-offer__work { position: relative; width: 64px; height: 64px; }
.sp-offer__work > img:first-child { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; }
.sp-offer__avatar { position: absolute; bottom: -6px; inset-inline-start: -6px; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.sp-offer__info { display: grid; gap: 1px; min-width: 0; }
.sp-offer__info b { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.sp-offer__info b .flag { width: 15px; height: 10px; }
.sp-offer__info small { font-size: 11.5px; color: var(--muted); }
.sp-offer__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3px; font-size: 11px; color: var(--muted); }
.sp-offer__meta > span { display: inline-flex; align-items: center; gap: 3px; }
.sp-offer__meta svg { width: 12px; height: 12px; }
.sp-rate { color: #9a6a2f; font-weight: 600; }
.sp-rate svg { color: #f5b301; }
.sp-offer__price { display: grid; text-align: end; }
.sp-offer__price small { font-size: 10.5px; color: var(--muted); }
.sp-offer__price strong { font-size: 20px; line-height: 1.1; }
.sp-offer__check { position: absolute; top: -8px; inset-inline-end: -8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--navy); box-shadow: 0 0 0 3px #fff; transform: scale(0); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.sp-offer__check svg { width: 14px; height: 14px; }
.sp-offer.is-picked .sp-offer__check { transform: scale(1); }
.sp-cta { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; border: 0; border-radius: 999px; background: var(--navy); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .25s; }
.sp-cta:hover { background: var(--gold); color: var(--navy); }

/* step 3 — project */
.sp-card--project { padding: 0; overflow: hidden; gap: 0; }
.sp-cover { position: relative; height: 100px; }
.sp-cover img { width: 100%; height: 100%; object-fit: cover; }
.sp-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 29, 36, .82), rgba(14, 29, 36, .05) 70%); }
.sp-cover__title { position: absolute; z-index: 1; bottom: 12px; inset-inline-start: 16px; color: #fff; }
.sp-cover__title b { display: block; font-size: 17px; }
.sp-cover__title small { font-size: 11px; opacity: .75; }
.sp-pill--glass { position: absolute; z-index: 1; top: 12px; inset-inline-end: 12px; background: rgba(255, 255, 255, .85); color: #2f5b78; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sp-designer { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sp-designer > img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.sp-designer b { display: block; font-size: 13.5px; }
.sp-designer small { font-size: 11px; color: #1d8a57; }
.sp-progress { display: grid; gap: 4px; margin-inline-start: auto; width: 92px; font-size: 11px; font-weight: 700; text-align: end; }
.sp-progress i { display: block; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--gold) var(--p), var(--sand) var(--p)); }
.sp-tabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: 12px 16px 0; padding: 4px; border-radius: 999px; background: var(--sand); }
.sp-tabs__thumb { position: absolute; top: 4px; bottom: 4px; inset-inline-start: 4px; width: calc((100% - 8px) / 3); border-radius: 999px; background: #fff; box-shadow: 0 4px 12px -4px rgba(14, 29, 36, .25); transition: transform .45s var(--ease); }
.sp-tabs[data-active="1"] .sp-tabs__thumb { transform: translateX(-100%); }
.sp-tabs[data-active="2"] .sp-tabs__thumb { transform: translateX(-200%); }
.sp-tabs button { position: relative; z-index: 1; padding: 8px 4px; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; transition: color .3s; }
.sp-tabs button.is-active { color: var(--ink); }
.sp-tabs::after { content: ""; position: absolute; inset-inline: 14px; bottom: -7px; height: 2px; border-radius: 99px; background: var(--gold); transform-origin: right; transform: scaleX(0); }
.sp-tabs.is-auto::after { animation: tab-timer var(--tab-time, 3.6s) linear infinite; }
@keyframes tab-timer { to { transform: scaleX(1); } }
.sp-badge { position: absolute; top: 2px; inset-inline-end: 8px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #e5484d; color: #fff; font-size: 9.5px; font-style: normal; }
.sp-tabpanes { position: relative; height: 218px; margin: 14px 16px 16px; }
.sp-pane { position: absolute; inset: 0; display: grid; align-content: start; gap: 8px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .4s var(--ease), transform .45s var(--ease); }
.sp-pane.is-active { opacity: 1; transform: none; pointer-events: auto; }
.sp-msg { display: flex; align-items: flex-start; gap: 8px; }
.sp-msg > img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }
.sp-msg > div { display: grid; gap: 6px; }
.sp-photo { width: 168px; border-radius: 14px; overflow: hidden; background: var(--sand); box-shadow: 0 8px 18px -10px rgba(14, 29, 36, .4); }
.sp-photo img { width: 100%; height: 80px; object-fit: cover; }
.sp-photo figcaption { padding: 5px 9px; font-size: 11px; color: var(--muted); }
.sp-paid { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 14px; background: var(--navy); color: #fff; }
.sp-paid small { font-size: 11px; opacity: .7; }
.sp-paid b { display: block; font-size: 18px; }
.sp-paid b span { font-size: 12px; opacity: .6; font-weight: 500; }
.sp-ring { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: conic-gradient(var(--gold) calc(var(--p) * 1%), rgba(255, 255, 255, .15) 0); font-size: 11px; font-weight: 700; }
.sp-ring span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); }
.sp-payments { display: grid; gap: 5px; }
.sp-payments li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; background: var(--paper); font-size: 12px; }
.sp-payments em { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 99px; }
.sp-payments .is-paid em { background: #e4f5ec; color: #1d8a57; }
.sp-payments .is-due em { background: var(--gold); color: var(--navy); }
.sp-files { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sp-files figure { border-radius: 12px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); }
.sp-files img { width: 100%; height: 96px; object-fit: cover; transition: transform .6s var(--ease); }
.sp-files figure:hover img { transform: scale(1.06); }
.sp-files figcaption { padding: 6px 8px; font-size: 11px; color: var(--muted); }

.steps-scroll { position: relative; height: 210svh; }
.steps-scroll__sticky { position: sticky; top: 0; display: flex; align-items: center; height: 100svh; padding-top: 64px; overflow: hidden; }
#packages { padding-bottom: clamp(24px, 3vw, 40px); }
.steps-scroll .section-head { margin-bottom: clamp(20px, 3vh, 40px); }
.steps-scroll .steps__media { aspect-ratio: auto; height: min(58svh, 540px); }
.steps-scroll__hint { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; color: var(--muted); }
.steps-scroll__hint svg { width: 18px; height: 18px; color: var(--gold); animation: hint-bob 1.6s ease-in-out infinite; }
@keyframes hint-bob { 50% { transform: translateY(4px); } }

/* ===== Quiz CTA ===== */
.quiz-section { padding-top: clamp(64px, 7vw, 88px); }
.quiz-section + .section { padding-top: clamp(100px, 10vw, 140px); }
.quiz-card { display: grid; grid-template-columns: 1fr minmax(0, 400px); gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(28px, 3.5vw, 48px) clamp(32px, 5vw, 64px); padding-inline-end: clamp(24px, 3vw, 40px); border-radius: 36px; background: radial-gradient(80% 120% at 0% 100%, rgba(196, 142, 83, .35), transparent 60%), var(--navy); color: #fff; overflow: visible; }
.quiz-card.has-pattern::before { background-image: var(--pattern-white); opacity: .05; border-radius: inherit; }
.quiz-card__text { display: grid; justify-items: start; gap: 16px; }
.quiz-card h2 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.25; font-weight: 700; white-space: nowrap; }
.quiz-card p { color: rgba(255, 255, 255, .72); font-size: 17px; max-width: 46ch; }
.quiz-card .btn--ai { margin-top: 6px; }
.btn--ai__arrow { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.btn--ai:hover .btn--ai__arrow { transform: translateX(-4px); }
.quiz-demo { position: relative; z-index: 1; display: grid; gap: 12px; align-self: center; margin-block: calc(-1 * clamp(56px, 6vw, 80px)); margin-inline-end: clamp(16px, 3vw, 44px); padding: 18px; border-radius: 30px; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 40px 80px -30px rgba(14, 29, 36, .45); }
.quiz-demo__top { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.quiz-demo__top b { color: var(--ink); }
.quiz-demo__bar { flex: 1; height: 6px; border-radius: 99px; background: var(--sand); overflow: hidden; }
.quiz-demo__bar i { display: block; height: 100%; width: 37.5%; border-radius: inherit; background: linear-gradient(90deg, #f2c58f, var(--gold)); margin-inline-start: 0; }
.quiz-demo__q { font-size: 16px !important; font-weight: 600; color: var(--ink) !important; }
.quiz-demo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quiz-tile { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .4s, transform .4s var(--ease); }
.quiz-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .4s; filter: saturate(.8) brightness(.95); }
.quiz-tile span { position: absolute; inset: auto 8px 8px; padding: 3px 10px; border-radius: 99px; color: #fff; background: rgba(14, 29, 36, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 12px; width: fit-content; }
.quiz-tile i { position: absolute; top: 8px; inset-inline-end: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--navy); transform: scale(0); transition: transform .4s var(--ease); }
.quiz-tile i svg { width: 16px; height: 16px; }
.quiz-tile.is-picked { outline-color: var(--gold); transform: scale(1.02); }
.quiz-tile.is-picked img { filter: none; transform: scale(1.06); }
.quiz-tile.is-picked i { transform: scale(1); }
.quiz-demo__chat { display: grid; gap: 8px; }
.bubble { width: fit-content; max-width: 88%; padding: 10px 14px; border-radius: 18px; font-size: 14px !important; line-height: 1.6; }
.bubble--me { justify-self: end; background: var(--navy); color: #fff !important; border-end-end-radius: 6px; }
.bubble--ai { display: flex; align-items: center; gap: 8px; background: var(--gold-soft); color: var(--ink) !important; border: 1px solid rgba(196, 142, 83, .35); border-end-start-radius: 6px; }
.bubble--ai b { color: #a8743d; }
.bubble__ai-icon .btn--ai__icon { color: var(--gold); }
.bubble__ai-icon .btn--ai__icon { width: 16px; height: 16px; }
.match { padding: 2px 8px; border-radius: 99px; background: var(--gold); color: var(--navy); font-weight: 700; font-size: 12px; }

/* ===== Avatars ===== */
.avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--sand); box-shadow: 0 0 0 2px #fff; }
.avatar--lg { width: 64px; height: 64px; box-shadow: 0 0 0 4px #fff, 0 8px 20px -8px rgba(14, 29, 36, .4); }
.avatar--client { display: grid; place-items: end center; overflow: hidden; background: linear-gradient(160deg, #f6ead9, #e4cba9); color: #9a6b3c; }
.avatar--client svg { width: 100%; height: 100%; }
.avatar--initial { display: grid; place-items: center; background: linear-gradient(135deg, #e7c9a4, var(--gold)); color: var(--navy); font-weight: 700; font-size: 17px; }
.flag { width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); flex: none; }
.chip-glass { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(14, 29, 36, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 12px; font-weight: 600; line-height: 1; }
.chip-glass svg:not(.flag) { width: 14px; height: 14px; }

/* ===== Designers ===== */
.designers-track .designer-card { flex: 0 0 min(296px, 78vw); scroll-snap-align: start; }
.designer-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line); }
.designer-card__media { position: relative; aspect-ratio: 4 / 3; margin: 8px 8px 0; border-radius: calc(var(--radius-lg) - 8px); overflow: hidden; background: var(--sand); }
.designer-card__slides { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.designer-card__slides::-webkit-scrollbar { display: none; }
.designer-card__slides img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; }
.designer-card__meta { position: absolute; top: 10px; inset-inline: 10px; display: flex; justify-content: space-between; gap: 6px; pointer-events: none; }
.designer-card__count { position: absolute; bottom: 10px; inset-inline-end: 10px; pointer-events: none; }
.gallery-btn { position: absolute; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -17px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 6px 16px -6px rgba(14, 29, 36, .45); cursor: pointer; opacity: 0; transition: opacity .3s, transform .3s var(--ease), background-color .2s; }
.gallery-btn svg { width: 16px; height: 16px; }
.gallery-btn--prev { inset-inline-start: 10px; transform: translateX(6px); }
.gallery-btn--next { inset-inline-end: 10px; transform: translateX(-6px); }
.designer-card__media:hover .gallery-btn, .designer-card__media:focus-within .gallery-btn { opacity: 1; transform: none; }
.gallery-btn:hover { background: #fff; }
.gallery-btn:disabled { opacity: 0 !important; pointer-events: none; }
.gallery-dots { position: absolute; bottom: 12px; inset-inline: 0; display: flex; justify-content: center; gap: 5px; }
.gallery-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .55); cursor: pointer; transition: width .35s var(--ease), background-color .3s; }
.gallery-dots button[aria-current="true"] { width: 20px; background: #fff; }
.designer-card__id { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 10px; padding-inline: 18px; }
.designer-card__id .designer-card__avatar { margin-top: -32px; }
.designer-card__id .badges { margin: 8px 0 0; gap: 4px; flex-wrap: nowrap; }
.designer-card__id .badge { font-size: 10.5px; padding: 4px 7px; white-space: nowrap; }
.designer-card__id .avatar--lg { width: 56px; height: 56px; }
.designer-card__id .designer-card__avatar { margin-top: -28px; }
.designer-card__consult { color: #2f5b78; font-weight: 600; }
.designers-track { align-items: flex-start; }
.designer-card__body { display: grid; gap: 4px; padding: 10px 20px 18px; align-content: start; }
.designer-card h3 { font-size: 18px; font-weight: 700; }
.designer-card p { font-size: 14px; color: var(--muted); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1; }
.badge svg { width: 13px; height: 13px; flex: none; }
.badge--top { background: #fdf1d8; color: #9a6a2f; }
.badge--fast { background: #e4f5ec; color: #1d8a57; }
.badge--consult { background: #e6eff6; color: #2f5b78; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tags li { padding: 3px 10px; border-radius: 999px; background: var(--sand); font-size: 12px; color: var(--muted); }
.designer-card__cta { margin-top: 18px; }
@media (hover: none) { .gallery-btn { display: none; } }

/* ===== Reviews (carousel with before / after) ===== */
.carousel-nav, .section-head--split > .carousel-nav { display: flex; gap: 8px; }
.carousel-nav__btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(14, 29, 36, .16); background: #fff; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, opacity .2s; }
.carousel-nav__btn svg { width: 20px; height: 20px; }
.carousel-nav__btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.carousel-nav__btn:disabled { opacity: .35; pointer-events: none; }
.carousel-track { align-items: stretch; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(24px, (100% - 1240px) / 2); padding: 28px max(32px, (100% - 1240px) / 2) 96px; margin-top: -24px; scrollbar-width: none; overscroll-behavior-x: contain; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-nav .btn { margin-inline-end: 6px; }
.review-card { position: relative; flex: 0 0 min(420px, 84vw); scroll-snap-align: start; display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line); cursor: pointer; }
.review-card__media { position: relative; aspect-ratio: 4 / 3; margin: 8px 8px 0; border-radius: calc(var(--radius-lg) - 8px); overflow: hidden; background: var(--sand); }
.review-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s var(--ease), transform 1s var(--ease); }
.review-card__media .is-before { opacity: 0; transform: scale(1.03); }
.review-card[data-state="before"] .is-before { opacity: 1; transform: none; }
.review-card[data-state="before"] .is-after { opacity: 0; transform: scale(1.03); }
.compare-toggle { position: absolute; top: 12px; inset-inline-start: 12px; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 18px -8px rgba(14, 29, 36, .4); }
.compare-toggle button { position: relative; z-index: 1; min-width: 56px; padding: 6px 14px; border: 0; background: none; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; transition: color .3s; }
.compare-toggle button[aria-pressed="true"] { color: #fff; }
.compare-toggle__thumb { position: absolute; top: 4px; bottom: 4px; inset-inline-start: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--navy); transition: transform .4s var(--ease); }
.review-card[data-state="before"] .compare-toggle__thumb { transform: translateX(-100%); }
.review-card__body { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 22px; flex: 1; }
.review-card blockquote { font-size: 16px; line-height: 1.8; min-height: calc(1.8em * 4); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.review-card__people { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.avatar-pair { display: flex; flex: none; }
.avatar-pair .avatar { width: 44px; height: 44px; }
.avatar-pair .avatar + .avatar { margin-inline-start: -14px; }
.review-card__names { display: grid; line-height: 1.5; font-size: 14px; }
.review-card__names strong { font-size: 15px; }
.review-card__names small { font-weight: 500; color: var(--muted); font-size: 13px; }
.review-card__names span { color: var(--muted); }
.review-card__names b { color: var(--ink); font-weight: 600; }
/* hover drawer: the card grows downward over the reserved space under the row */
.designer-card, .review-card { z-index: 1; transition: border-radius .3s var(--ease), filter .4s var(--ease); }
.card-drawer { position: absolute; top: 100%; inset-inline: -1px; padding: 4px 20px 20px; background: #fff; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); opacity: 0; transform: translateY(-12px); pointer-events: none; transition: opacity .3s var(--ease), transform .4s var(--ease); }
.card-drawer .btn svg { width: 18px; height: 18px; }
.designer-card:hover, .designer-card:focus-within, .review-card:hover, .review-card.is-active, .review-card:focus-within { z-index: 3; border-end-start-radius: 0; border-end-end-radius: 0; filter: drop-shadow(0 22px 30px rgba(14, 29, 36, .16)); }
.designer-card:hover .card-drawer, .designer-card:focus-within .card-drawer, .review-card:hover .card-drawer, .review-card.is-active .card-drawer, .review-card:focus-within .card-drawer { opacity: 1; transform: none; pointer-events: auto; }
@media (hover: none) {
  .designer-card, .review-card { border-end-start-radius: 0; border-end-end-radius: 0; }
  .card-drawer { opacity: 1; transform: none; pointer-events: auto; }
}

/* ===== Blog ===== */
.blog-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.post-card { display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.post-card:hover { box-shadow: var(--shadow); }
.post-card img { transition: transform .8s var(--ease); }
.post-card:hover img { transform: scale(1.04); }
.post-card { isolation: isolate; }
.post-card img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
.post-card__body { display: grid; gap: 6px; padding: 20px 22px 24px; }
.post-card h3 { font-size: 17px; font-weight: 700; line-height: 1.5; }
.post-card p { font-size: 14px; color: var(--muted); }
.post-card--large { grid-row: span 2; position: relative; }
.post-card--large img { aspect-ratio: auto; height: 100%; position: absolute; inset: 0; }
.post-card--large .post-card__body { position: relative; margin-top: auto; padding: 120px 28px 28px; color: #fff; background: linear-gradient(to top, rgba(14, 29, 36, .88), transparent); min-height: 420px; align-content: end; }
.post-card--large h3 { font-size: 26px; }
.post-card--large p { color: rgba(255, 255, 255, .75); font-size: 15px; }
.blog-grid > :nth-child(4) { grid-column: 2 / 4; flex-direction: row; }
.blog-grid > :nth-child(4) img { width: 46%; aspect-ratio: auto; }
.blog-grid > :nth-child(4) .post-card__body { align-content: center; }

/* ===== Join ===== */
.join-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.join-card { display: grid; justify-items: start; align-content: start; gap: 16px; padding: clamp(32px, 4vw, 56px); border-radius: 36px; background: var(--white); border: 1px solid var(--line); }
.join-card h3 { font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1.3; }
.join-card p { color: var(--muted); font-size: 16px; max-width: 52ch; }
.join-card .btn { margin-top: 8px; }
.join-card--dark { background: radial-gradient(90% 120% at 100% 0%, rgba(196, 142, 83, .3), transparent 60%), var(--navy); color: #fff; border-color: transparent; }
.join-card--dark p { color: rgba(255, 255, 255, .72); }

/* ===== Find a designer ===== */
.find { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.find__text { display: grid; justify-items: start; gap: 22px; }
.chip-group { display: grid; gap: 10px; }
.chip-group h3 { font-size: 13px; font-weight: 600; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-block; padding: 9px 16px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 14px; font-weight: 500; transition: background-color .2s, color .2s, border-color .2s; }
.chip-more { direction: ltr; unicode-bidi: isolate; padding: 9px 16px; border-radius: 999px; border: 1px dashed rgba(196, 142, 83, .7); background: var(--gold-soft); color: #9a6a2f; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.chip-more:hover { background: var(--gold); color: var(--navy); border-style: solid; }
.chips a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.find__media { position: relative; order: -1; }
.find .section-title { white-space: nowrap; max-width: none; }
@media (max-width: 600px) { .find .section-title { white-space: normal; } }
.match-ui { display: grid; gap: 14px; padding: clamp(20px, 3vw, 32px); padding-bottom: clamp(36px, 4vw, 48px); border-radius: 36px; background: var(--sand); }
.match-ui.has-pattern::before { opacity: .09; border-radius: inherit; -webkit-mask-image: none; mask-image: none; }
.match-ui__search { margin-inline-end: 70px; display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 999px; background: #fff; box-shadow: var(--shadow); font-size: 15px; font-weight: 500; }
.match-ui__search svg { width: 20px; height: 20px; color: var(--gold); flex: none; }
.match-ui__typing { overflow: hidden; white-space: nowrap; border-inline-start: 2px solid var(--gold); padding-inline-start: 4px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { border-color: transparent; } }
.match-ui__filters { display: flex; flex-wrap: wrap; gap: 6px; }
.match-ui__filters span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13px; font-weight: 500; }
.match-ui__filters .is-gold { background: var(--navy); color: #fff; border-color: transparent; }
.match-ui__list { display: grid; gap: 10px; }
.match-ui__list li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: #fff; border: 1px solid var(--line); opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.find__media.is-in .match-ui__list li { opacity: 1; transform: none; }
.find__media.is-in .match-ui__list li:nth-child(2) { transition-delay: .15s; }
.find__media.is-in .match-ui__list li:nth-child(3) { transition-delay: .3s; }
.match-ui__list li:first-child { box-shadow: 0 0 0 1.5px var(--gold), var(--shadow); }
.match-ui__list .avatar { width: 46px; height: 46px; }
.match-ui__list span { display: grid; flex: 1; line-height: 1.5; }
.match-ui__list b { font-size: 15px; }
.match-ui__list small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.match-ui__list em { font-style: normal; font-weight: 700; font-size: 14px; color: #1d8a57; background: #e5f6ed; padding: 4px 10px; border-radius: 99px; }
.match-ui__float { position: absolute; z-index: 2; box-shadow: var(--shadow); animation: float 6s ease-in-out infinite; }
.match-ui__float--a { top: -26px; inset-inline-end: -18px; width: 110px; aspect-ratio: 1; border-radius: 24px; overflow: hidden; border: 4px solid #fff; transform: rotate(-6deg); }
.match-ui__float--a img { width: 100%; height: 100%; object-fit: cover; }
.match-ui__float--b { bottom: -18px; inset-inline-start: 28px; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 13px; animation-delay: -3s; }
@keyframes float { 50% { translate: 0 -8px; } }

/* ===== Footer ===== */
.site-footer { background: var(--navy); color: rgba(255, 255, 255, .72); padding: 8px 0 32px; margin-top: clamp(64px, 8vw, 104px); }
.cta-band { padding-top: 0; padding-bottom: 0; }
.join-section { padding-top: 0 !important; }
#designers, #reviews { padding-bottom: clamp(24px, 3vw, 40px); }
#find { padding-bottom: clamp(48px, 6vw, 80px); }
.site-footer.has-pattern::before { background-image: var(--pattern-white); background-size: 120px 120px; opacity: .035; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%); mask-image: linear-gradient(to bottom, transparent, #000 40%); }
.cta-card { color: #fff; }
.site-footer__cta { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; gap: 18px; text-align: center; padding: clamp(56px, 8vw, 104px) clamp(24px, 5vw, 64px); border-radius: 40px; background: radial-gradient(60% 90% at 50% 0%, rgba(196, 142, 83, .38), transparent 70%), linear-gradient(180deg, #152a34, #0a161c); border: 1px solid rgba(232, 190, 136, .22); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06); }
.site-footer__cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pattern-white) 0 0 / 110px 110px; opacity: .06; -webkit-mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 85%); mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 85%); animation: pattern-drift 40s linear infinite; }
.site-footer__cta::after { content: ""; position: absolute; top: 0; inset-inline: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(242, 197, 143, .9), transparent); }
@keyframes pattern-drift { to { background-position: 110px 110px; } }
.site-footer__mark { position: absolute; z-index: -1; inset-inline-end: -40px; bottom: -90px; width: clamp(200px, 26vw, 340px); color: var(--gold); opacity: .14; transform: rotate(-14deg); }
.site-footer__mark svg { width: 100%; height: auto; fill: currentColor; }
.site-footer__cta h2 { color: #fff; font-size: clamp(34px, 5vw, 64px); font-weight: 700; line-height: 1.15; }
.site-footer__cta-lead { font-size: 18px; max-width: 44ch; color: rgba(255, 255, 255, .72); }
.site-footer__cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.btn--ghost-light { color: #fff; border-color: rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .04); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: 56px 0; }
.site-footer__grid h3 { color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.site-footer__grid nav, .site-footer__grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 15px; }
.site-footer__grid a:hover { color: var(--gold); }
.site-footer__brand img { height: 52px; width: auto; }
.site-footer__brand p { font-size: 13px; margin-top: 12px; }
.site-footer__brand .site-footer__mimar { height: 32px; filter: brightness(0) invert(1); opacity: .85; }
.site-footer__phone { color: #fff; font-size: 18px; font-weight: 600; }
.socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.socials a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); color: #fff; transition: background-color .2s, border-color .2s, color .2s, transform .3s var(--ease); }
.socials a svg { width: 18px; height: 18px; }
.socials a:hover { transform: translateY(-2px); }
.socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; }
.site-footer__badges { display: flex; align-items: center; gap: 10px; }
.site-footer__badges img { height: 30px; width: auto; }

/* ===== Scroll reveal ===== */
[data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease), transform .9s var(--ease), clip-path 1.1s var(--ease); transition-delay: var(--reveal-delay, 0s); }
[data-reveal].is-in { opacity: 1; transform: none; }
.section-head[data-reveal] .section-title { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease) .1s; }
.section-head[data-reveal].is-in .section-title { clip-path: inset(0 0 -10% 0); }
.quiz-card[data-reveal], .find__media[data-reveal] { transform: translateY(40px) scale(.97); }
.quiz-card[data-reveal].is-in, .find__media[data-reveal].is-in { transform: none; }
@keyframes ken { from { transform: scale(1.08); } to { transform: scale(1); } }

/* ===== Floating AI assistant ===== */
.ai-chat { position: fixed; z-index: 60; bottom: 24px; inset-inline-end: 24px; display: grid; justify-items: end; gap: 12px; }
.ai-chat__fab { position: relative; width: 68px; height: 68px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; animation: ai-bounce 3.2s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.ai-chat__orb { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(70% 70% at 30% 25%, #6c8b9a 0%, #2f4a57 45%, var(--navy) 100%); box-shadow: 0 0 0 2px rgba(242, 197, 143, .9), 0 12px 30px -6px rgba(196, 142, 83, .9), 0 0 40px rgba(226, 160, 84, .6); transition: transform .4s var(--ease); }
.ai-chat__orb svg { width: 52px; height: 52px; }
.ai-chat__orb .spark { transform-box: fill-box; transform-origin: center; animation: ai-twinkle 1.8s ease-in-out infinite; }
.ai-chat__orb .spark--2 { animation-delay: .4s; }
.ai-chat__orb .spark--3 { animation-delay: .8s; }
.ai-chat__fab:hover .ai-chat__orb { transform: scale(1.08) rotate(-6deg); }
.ai-chat__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(232, 178, 112, .8); animation: ai-ring 2.4s ease-out infinite; }
.ai-chat__ring--2 { animation-delay: 1.2s; }
@keyframes ai-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
@keyframes ai-bounce { 0%, 60%, 100% { transform: translateY(0); } 70% { transform: translateY(-14px) rotate(-6deg); } 80% { transform: translateY(0) scale(1.05, .95); } 88% { transform: translateY(-5px); } }
.ai-chat.is-open .ai-chat__fab { animation: none; }
.ai-chat.is-open .ai-chat__ring { display: none; }
.ai-chat__hint { position: relative; padding: 10px 16px; border-radius: 18px 18px 6px 18px; background: #fff; box-shadow: var(--shadow); font-size: 14px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translateY(8px) scale(.9); transform-origin: bottom right; transition: opacity .4s, transform .4s var(--ease); pointer-events: none; }
[dir="rtl"] .ai-chat__hint { border-radius: 18px 18px 18px 6px; transform-origin: bottom left; }
.ai-chat__hint.is-shown { opacity: 1; transform: none; }
.ai-chat.is-open .ai-chat__hint { display: none; }
.ai-chat__panel { display: flex; flex-direction: column; width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100svh - 140px)); border-radius: 28px; background: #fff; box-shadow: 0 30px 80px -20px rgba(14, 29, 36, .45), 0 0 0 1px var(--line); overflow: hidden; transform-origin: bottom left; animation: ai-pop .45s var(--ease); }
@keyframes ai-pop { from { opacity: 0; transform: translateY(16px) scale(.94); } }
.ai-chat__panel[hidden] { display: none; }
.ai-chat__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: radial-gradient(120% 140% at 100% 0%, rgba(196, 142, 83, .35), transparent 60%), var(--navy); color: #fff; }
.ai-chat__avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #2f4a57; box-shadow: 0 0 0 2px rgba(242, 197, 143, .7); }
.ai-chat__avatar svg { width: 36px; height: 36px; }
.ai-chat__head h2 { font-size: 16px; font-weight: 700; }
.ai-chat__head p { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255, 255, 255, .7); }
.ai-chat__close { margin-inline-start: auto; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
.ai-chat__close svg { width: 18px; height: 18px; }
.ai-chat__log { display: flex; flex-direction: column; gap: 10px; padding: 18px; overflow-y: auto; flex: 1; background: var(--paper); }
.ai-chat__log .bubble--ai { display: block; background: #fff; color: var(--ink) !important; border-color: var(--line); }
.ai-chat__log .bubble--me { background: var(--navy); color: #fff !important; }
.ai-chat__log .bubble a { color: var(--gold); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ai-typing { display: inline-flex; gap: 4px; padding: 14px 16px !important; }
.ai-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: typing 1s infinite; }
.ai-typing i:nth-child(2) { animation-delay: .15s; }
.ai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 50% { transform: translateY(-4px); opacity: .5; } }
.ai-chat__chips { display: flex; gap: 6px; padding: 10px 14px 0; overflow-x: auto; scrollbar-width: none; }
.ai-chat__chips button { flex: none; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13px; cursor: pointer; transition: background-color .2s, border-color .2s; }
.ai-chat__chips button:hover { border-color: var(--gold); background: var(--gold-soft); }
.ai-chat__form { display: flex; gap: 8px; padding: 12px 14px 14px; }
.ai-chat__form input { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font: inherit; font-size: 14px; }
.ai-chat__form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(196, 142, 83, .15); }
.ai-chat__form button { display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--gold); color: var(--navy); cursor: pointer; }
.ai-chat__form button svg { width: 18px; height: 18px; transform: scaleX(-1); }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .site-nav > a { padding: 8px 10px; font-size: 14px; }
  .site-header__lang { display: none; }
  .packages-grid { grid-template-columns: repeat(2, 1fr); }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .site-nav { display: none; }
  .site-header__login { display: none; }
  .site-header__menu { display: grid; }
  .site-header.is-open .site-nav { display: flex; position: absolute; inset: calc(100% + 8px) 16px auto; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 12px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); pointer-events: auto; }
  .site-header.is-open .site-nav > a { padding: 14px 16px; font-size: 16px; }
  .site-header.is-open .site-nav__mobile-actions { display: grid; gap: 8px; padding: 12px 4px 4px; margin-top: 6px; border-top: 1px solid var(--line); }
  .site-nav__mobile-actions > a:not(.btn) { padding: 10px 12px; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .service-card--feature { grid-column: 1 / -1; grid-row: auto; min-height: 280px; }
  .service-card--under-feature { grid-column: auto; grid-row: auto; }
  .steps, .quiz-card, .find, .join-grid { grid-template-columns: 1fr; }
  .quiz-card { padding-inline-end: clamp(24px, 5vw, 48px); }
  .quiz-card { grid-template-columns: 1fr; }
  .quiz-demo { margin-block: 8px -48px; max-width: 440px; width: 100%; justify-self: center; }
  .quiz-section + .section { padding-top: 120px; }
  .steps-scroll .steps { gap: 16px; }
  .steps-scroll .steps__media { height: 30svh; }
  .steps-scroll .section-lead { display: none; }
  .step { padding: 16px 18px; }
  .steps__media { order: -1; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .post-card--large { grid-column: 1 / -1; grid-row: auto; }
  .blog-grid > :nth-child(4) { grid-column: auto; flex-direction: column; }
  .blog-grid > :nth-child(4) img { width: 100%; aspect-ratio: 16 / 10; }
  .section-head--split { flex-direction: column; align-items: start; }
  }
@media (max-width: 600px) {
  .container { width: calc(100% - 32px); }
  .site-header { inset-block-start: 10px; }
  .site-header__bar { padding: 8px 8px 8px 16px; gap: 12px; }
  .site-header__logo img { height: 28px; }
  .site-header__actions .btn { display: none; }
  .hero-overlay { background: linear-gradient(to top, var(--sand) 0%, rgba(243, 240, 233, .96) 30%, rgba(243, 240, 233, .5) 52%, rgba(243, 240, 233, 0) 70%), linear-gradient(to bottom, rgba(243, 240, 233, .6), rgba(243, 240, 233, 0) 20%); }
  .hero-content { padding-bottom: 32px; }
  .hero-content .container { gap: 14px; }
  .stats-strip dd { font-size: 34px; }
  .stats-strip dt { font-size: 13px; }
  .site-footer__cta { border-radius: 28px; }
  .site-footer__cta-actions .btn { flex: 1 1 100%; }
  .steps-scroll__sticky { padding-top: 64px; }
  .steps-scroll .steps__media { height: 32svh; }
  .step-panel { padding: 8px; }
  .sp-card { position: absolute; top: 50%; left: 50%; width: 420px; transform: translate(-50%, -50%) scale(.6); }
  .sp-card--project { transform: translate(-50%, -50%) scale(.5); }
  .sp-float { display: none; }
  .step__text strong { font-size: 16px; }
  .step__text span { font-size: 14px; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 100%; }
  .ai-chat { bottom: 16px; inset-inline-end: 16px; }
  .ai-chat__hint { display: none; }
  .ai-chat__fab { width: 60px; height: 60px; }
  .match-ui__float--a { width: 72px; top: -18px; inset-inline-end: -4px; }
  .match-ui__search { margin-inline-end: 50px; font-size: 13px; }
  .services-grid, .packages-grid, .blog-grid { grid-template-columns: 1fr; }
  .service-card:hover, .service-card:focus-within { transform: none; }
  .service-card { padding: 26px; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .site-footer__badges { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], .hero-content .container > * { opacity: 1; transform: none; animation: none; transition: none; }
  .service-card--feature .service-card__icon, .service-card--feature .service-card__icon::after, .site-footer__cta::before { animation: none; }
  .btn--ai, .btn--ai::before, .btn--ai::after, .btn--ai__icon, .ai-chat__fab, .ai-chat__ring, .ai-chat__orb .spark, .package-card__badge, .match-ui__float, .live-dot { animation: none; }
  .section-head[data-reveal] .section-title, .match-ui__list li { clip-path: none; opacity: 1; transform: none; }
  .btn--ai { box-shadow: 0 0 0 1px rgba(196, 142, 83, .6), 0 12px 36px -6px rgba(196, 142, 83, .95), 0 0 60px 4px rgba(226, 160, 84, .6); }
  .step.is-active }

/* ===== Phone layout (app-like) ===== */
.mobile-tabbar { display: none; }
@media (max-width: 600px) {
  /* header: logo + language + login + start, no hamburger */
  .site-header__menu, .site-nav { display: none !important; }
  .site-header__bar { gap: 6px; padding: 6px 6px 6px 12px; }
  .site-header__logo img { height: 26px; }
  .site-header__actions { gap: 2px; }
  .site-header__actions .site-header__lang, .site-header__actions .site-header__login { display: inline-flex; padding: 6px 8px; font-size: 12.5px; }
  .site-header__actions .btn { display: inline-flex; min-height: 34px; padding: 0 12px; font-size: 12.5px; }

  /* bottom tab bar, AI assistant in the middle */
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .mobile-tabbar { position: fixed; z-index: 70; inset: auto 10px calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; padding: 6px 6px 8px; border-radius: 26px; background: rgba(255, 255, 255, .86); border: 1px solid rgba(255, 255, 255, .9); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 16px 40px -16px rgba(14, 29, 36, .45); }
  .mobile-tabbar a { display: grid; justify-items: center; gap: 3px; padding: 6px 2px 0; font-size: 10.5px; font-weight: 600; color: var(--muted); }
  .mobile-tabbar a svg { width: 22px; height: 22px; }
  .mobile-tabbar a:active { color: var(--gold); }
  .mobile-tabbar__ai { position: relative; justify-self: center; width: 60px; height: 60px; margin-top: -26px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; animation: ai-bounce 3.2s cubic-bezier(.3, 1.6, .5, 1) infinite; }
  .mobile-tabbar__ai .ai-chat__orb { width: 100%; height: 100%; box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(242, 197, 143, .9), 0 10px 26px -6px rgba(196, 142, 83, .9); }
  .mobile-tabbar__ai .ai-chat__orb svg { width: 44px; height: 44px; }
  .ai-chat__fab, .ai-chat__hint { display: none !important; }
  .ai-chat { inset-inline: 10px; bottom: calc(92px + env(safe-area-inset-bottom)); justify-items: stretch; }
  .ai-chat__panel { width: 100%; max-height: calc(100svh - 190px); }

  /* hero: shorter, more of the villa visible, mask wanders on its own */
  .architectural-hero, .architectural-reveal { min-height: 0; }
  .architectural-reveal { height: 86svh; }
  .architectural-hero { min-height: 86svh; }
  .hero-overlay { background: linear-gradient(to top, var(--sand) 0%, rgba(243, 240, 233, .95) 24%, rgba(243, 240, 233, .45) 42%, rgba(243, 240, 233, 0) 60%), linear-gradient(to bottom, rgba(243, 240, 233, .55), rgba(243, 240, 233, 0) 16%); }
  .hero-title { font-size: 32px; }
  .hero-lead { font-size: 14px; }
  .hero-content { padding-bottom: 20px; }
  .hero-actions { gap: 8px; }
  .hero-actions .btn { min-height: 46px; }

  /* services: 3 × 2 app tiles, no descriptions */
  #services .section-lead { display: none; }
  .services-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 10px; }
  .service-card, .service-card--feature, .service-card--under-feature { grid-column: auto; grid-row: auto; display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 0; padding: 16px 8px 14px; text-align: center; border-radius: 22px; }
  .service-card p, .service-card__foot, .service-card__launch { display: none; }
  .service-card h3 { font-size: 13px; line-height: 1.35; }
  .service-card__icon { width: 52px; height: 52px; margin: 0; border-radius: 16px; }
  .service-card__icon img { width: 28px; height: 28px; }
  .service-card--feature .service-card__icon::after { inset: -4px; border-radius: 19px; }
  .service-card:active { transform: scale(.96); }

  /* packages: horizontal row, 1.5 cards on screen */
  .packages-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 4px 16px 20px; scrollbar-width: none; }
  .packages-grid::-webkit-scrollbar { display: none; }
  .packages-grid .package-card { flex: 0 0 66vw; scroll-snap-align: start; }
  .package-card__body { padding: 16px; gap: 12px; }
  .price__value { font-size: 26px; }
  .packages-note { display: none; }

  /* style quiz is dropped on phones */
  .quiz-section { display: none; }

  /* blog: horizontal, every post looks like the big overlay card */
  .blog-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 4px 16px 20px; scrollbar-width: none; }
  .blog-grid::-webkit-scrollbar { display: none; }
  .blog-grid .post-card, .blog-grid > :nth-child(4) { position: relative; flex: 0 0 66vw; flex-direction: column; min-height: 300px; scroll-snap-align: start; grid-column: auto; }
  .blog-grid .post-card img, .blog-grid > :nth-child(4) img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .blog-grid .post-card .post-card__body { position: relative; margin-top: auto; min-height: 0; padding: 90px 18px 18px; color: #fff; background: linear-gradient(to top, rgba(14, 29, 36, .9), transparent); align-content: end; }
  .blog-grid .post-card h3 { font-size: 16px; }
  .blog-grid .post-card p { color: rgba(255, 255, 255, .75); font-size: 13px; }

  /* no footer on phones */
  .site-footer { display: none; }
  .cta-band { padding-bottom: 24px; }
}