/* ==========================================================================
   BADBAN — DESIGN LAYER v4
   Loaded after style.css on every page. Pure enhancement: it only adds
   backgrounds, depth, hover states and finishing touches, so removing the
   <link> restores the previous look exactly.
   ========================================================================== */
:root {
  --ink-deep: #021a1f;
  --sea-1: #04262d;
  --sea-2: #03333d;
  --sea-3: #0a5262;
  --gold-soft: #f6d98a;
  --paper-warm: #f6f2e8;
  --mist: #e4eff0;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --dots-dark: radial-gradient(rgba(129, 179, 178, 0.22) 1px, transparent 1.4px);
  --dots-light: radial-gradient(rgba(2, 110, 129, 0.16) 1px, transparent 1.4px);
}

/* ---------- global finish ---------- */
::selection { background: var(--color-accent); color: var(--sea-1); }
html { scrollbar-color: var(--color-primary) var(--sea-1); scrollbar-width: thin; }
body { background-color: var(--paper-warm); }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }

/* every light section gets a quiet paper grain so flat colour never feels cheap */
.section:not(.section--dark):not(.clients--stage):not(.approach),
.about-band { position: relative; isolation: isolate; }
.section:not(.section--dark):not(.clients--stage):not(.approach)::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); background-size: 160px; opacity: 0.05; mix-blend-mode: multiply;
}

/* ---------- eyebrows + section headings ---------- */
.eyebrow { letter-spacing: 0.2em; }
.section-head { border-bottom: 1px solid rgba(2, 110, 129, 0.22); }
.section-head__title { letter-spacing: -0.005em; }

/* ---------- buttons & links ---------- */
.cta-btn, .btn, .nav-cta, .site-header .btn {
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), background 0.3s, color 0.3s;
}
.cta-btn:hover, .btn:hover { transform: translateY(-3px); }
.cta-btn--solid, .btn--primary {
  background: linear-gradient(135deg, #f3b72b 0%, var(--color-accent) 55%, #d4920a 100%);
  color: var(--sea-1);
  box-shadow: 0 14px 30px -12px rgba(232, 166, 19, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.cta-btn--solid:hover { box-shadow: 0 20px 38px -12px rgba(232, 166, 19, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.link-arrow { position: relative; }
.link-arrow .arr { display: inline-block; transition: transform 0.35s var(--ease-out); }
.link-arrow:hover .arr { transform: translateX(6px); }
[dir='rtl'] .link-arrow:hover .arr { transform: translateX(-6px); }

/* ---------- HERO: deeper night sea ---------- */
.hero {
  background-image:
    radial-gradient(900px 520px at 85% 8%, rgba(232, 166, 19, 0.16), transparent 62%),
    radial-gradient(1100px 640px at 8% 92%, rgba(10, 82, 98, 0.65), transparent 64%),
    linear-gradient(180deg, var(--ink-deep) 0%, var(--sea-1) 55%, var(--sea-2) 100%);
}
.hero__title { text-shadow: 0 6px 40px rgba(0, 0, 0, 0.35); }
.hero__lead { color: #bcd9d8; }

/* the golden ticker bar */
.marquee {
  background-image: linear-gradient(180deg, #f3b72b 0%, var(--color-accent) 60%, #d4920a 100%);
  box-shadow: 0 -10px 40px -10px rgba(232, 166, 19, 0.35), 0 12px 30px -14px rgba(0, 0, 0, 0.5);
}

/* ---------- 01 INTRO ---------- */
.intro {
  position: relative; overflow: clip;
  background-image:
    radial-gradient(760px 420px at 96% 4%, rgba(232, 166, 19, 0.14), transparent 62%),
    radial-gradient(900px 520px at 0% 100%, rgba(2, 110, 129, 0.12), transparent 64%),
    linear-gradient(180deg, #f8f5ec 0%, var(--paper-warm) 100%);
}
.intro::after {                       /* huge outlined watermark */
  content: 'BADBAN'; position: absolute; inset-inline-end: -2vw; inset-block-end: -4vw; z-index: -1;
  font-family: var(--font-en); font-weight: 700; font-size: clamp(8rem, 24vw, 22rem); line-height: 1; letter-spacing: 0.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(2, 110, 129, 0.12); pointer-events: none; user-select: none;
}
[lang='fa'] .intro::after { content: 'بادبان'; letter-spacing: 0; inset-inline-end: auto; inset-inline-start: -2vw; }
.intro [class*='pillar'], .intro__pillars > * { transition: transform 0.5s var(--ease-out); }
.intro [class*='pillar']:hover, .intro__pillars > *:hover { transform: translateY(-6px); }

/* ---------- 02 NUMBERS RAIL (dark) ---------- */
.section--dark:not(.approach) {
  background-image:
    radial-gradient(800px 380px at 20% 0%, rgba(2, 110, 129, 0.5), transparent 64%),
    radial-gradient(700px 360px at 100% 100%, rgba(232, 166, 19, 0.14), transparent 62%),
    var(--dots-dark),
    linear-gradient(180deg, var(--ink-deep), var(--sea-1));
  background-size: auto, auto, 26px 26px, auto;
  overflow: clip;
}
.rail__value {
  background: linear-gradient(180deg, #fff6d9 0%, var(--color-accent) 130%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 8px 24px rgba(232, 166, 19, 0.25));
}
.rail__cell { transition: transform 0.5s var(--ease-out), background 0.5s; border-radius: 6px; }
.rail__cell:hover { transform: translateY(-5px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent); }

/* ---------- 03 SERVICES LIST (tint) ---------- */
.section--tint {
  background-image:
    radial-gradient(900px 420px at 100% 0%, rgba(2, 110, 129, 0.13), transparent 62%),
    radial-gradient(800px 420px at 0% 100%, rgba(232, 166, 19, 0.12), transparent 62%),
    var(--dots-light),
    linear-gradient(180deg, var(--mist), #f0ede3);
  background-size: auto, auto, 28px 28px, auto;
}
.svc-item { position: relative; transition: background 0.45s var(--ease-out), padding 0.45s var(--ease-out), transform 0.45s var(--ease-out); border-radius: 14px; }
.svc-item::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, var(--color-accent), var(--color-primary)); transform: scaleY(0); transform-origin: center;
  transition: transform 0.45s var(--ease-out);
}
.svc-item:hover { background: rgba(255, 255, 255, 0.72); box-shadow: 0 18px 40px -24px rgba(4, 38, 45, 0.5); transform: translateX(6px); }
[dir='rtl'] .svc-item:hover { transform: translateX(-6px); }
.svc-item:hover::before { transform: scaleY(1); }
.svc-item__arrow { transition: transform 0.45s var(--ease-out), background 0.3s, color 0.3s, border-color 0.3s; }
.svc-item:hover .svc-item__arrow { background: var(--color-accent); border-color: var(--color-accent); color: var(--sea-1); transform: rotate(-45deg); }
[dir='rtl'] .svc-item:hover .svc-item__arrow { transform: rotate(45deg); }

/* ---------- 04 WORK GRID ---------- */
#work, .work-section {
  background-image:
    radial-gradient(900px 500px at 0% 0%, rgba(232, 166, 19, 0.1), transparent 62%),
    radial-gradient(900px 500px at 100% 100%, rgba(2, 110, 129, 0.1), transparent 62%),
    var(--dots-light), linear-gradient(180deg, #f8f5ec, var(--paper-warm));
  background-size: auto, auto, 30px 30px, auto;
}
.work-tile__visual { border-radius: 18px; overflow: hidden; box-shadow: 0 30px 50px -30px rgba(4, 38, 45, 0.6); }
.work-tile__img { transition: transform 1.1s var(--ease-out), filter 0.6s; }
.work-tile:hover .work-tile__img { transform: scale(1.06); filter: saturate(1.1) contrast(1.03); }
.work-tile__title, .work-tile h3 { transition: color 0.3s; }
.work-tile:hover .work-tile__title, .work-tile:hover h3 { color: var(--color-primary); }

/* ---------- 05 APPROACH (dark, glass cards) ---------- */
.approach {
  background-image:
    radial-gradient(1000px 520px at 100% 0%, rgba(2, 110, 129, 0.55), transparent 62%),
    radial-gradient(800px 460px at 0% 100%, rgba(232, 166, 19, 0.16), transparent 62%),
    var(--dots-dark), linear-gradient(180deg, var(--ink-deep), var(--sea-2));
  background-size: auto, auto, 28px 28px, auto;
  overflow: clip;
}
.approach__item {
  padding: clamp(1.2rem, 2vw, 1.8rem); border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 44px -28px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 0.5s var(--ease-out), border-color 0.4s, background 0.4s;
}
.approach__item:hover { transform: translateY(-8px); border-color: rgba(232, 166, 19, 0.6); background: linear-gradient(160deg, rgba(232, 166, 19, 0.12), rgba(255, 255, 255, 0.03)); }

/* ---------- 06 PROCESS / TREASURE MAP ---------- */
.process {
  background-image:
    radial-gradient(900px 480px at 50% 0%, rgba(2, 110, 129, 0.1), transparent 64%),
    var(--dots-light), linear-gradient(180deg, var(--paper-warm), #efeadc);
  background-size: auto, 30px 30px, auto;
}

/* ---------- SECTORS ---------- */
.sectors__list li { transition: background 0.4s var(--ease-out), padding-inline 0.4s var(--ease-out); border-radius: 12px; }
.sectors__list li:hover { background: rgba(255, 255, 255, 0.7); padding-inline: 1rem; }

/* ---------- ABOUT / PAGE HERO ---------- */
.page-hero {
  position: relative; overflow: clip; isolation: isolate;
  background-image:
    radial-gradient(900px 480px at 88% 0%, rgba(232, 166, 19, 0.17), transparent 62%),
    radial-gradient(1000px 560px at 0% 100%, rgba(10, 82, 98, 0.7), transparent 64%),
    var(--dots-dark), linear-gradient(180deg, var(--ink-deep), var(--sea-1) 60%, var(--sea-2));
  background-size: auto, auto, 28px 28px, auto;
}
.page-hero::after {                   /* gold hairline wave on the lower edge */
  content: ''; position: absolute; inset: auto 0 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.page-hero__title { text-shadow: 0 6px 40px rgba(0, 0, 0, 0.35); }
.chapter-mark { color: transparent !important; -webkit-text-stroke: 1.5px rgba(129, 179, 178, 0.28); }
.about-band {
  background-image:
    radial-gradient(900px 460px at 0% 0%, rgba(232, 166, 19, 0.14), transparent 62%),
    radial-gradient(900px 460px at 100% 100%, rgba(2, 110, 129, 0.35), transparent 62%),
    var(--dots-dark), linear-gradient(180deg, var(--sea-2), var(--ink-deep));
  background-size: auto, auto, 28px 28px, auto;
}
.about-band__num { color: transparent !important; -webkit-text-stroke: 2px rgba(232, 166, 19, 0.45); }

/* services page blocks become cards */
.svc-block {
  position: relative; padding: clamp(1.4rem, 3vw, 2.6rem); margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem); border-radius: 26px;
  background: linear-gradient(160deg, #ffffff, #f7f3e9); border: 1px solid rgba(2, 110, 129, 0.14);
  box-shadow: 0 30px 50px -34px rgba(4, 38, 45, 0.55);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.4s;
}
.svc-block:hover { transform: translateY(-6px); border-color: rgba(232, 166, 19, 0.7); box-shadow: 0 40px 64px -34px rgba(4, 38, 45, 0.6), 0 0 0 4px rgba(232, 166, 19, 0.12); }
.svc-block__index { color: transparent !important; -webkit-text-stroke: 1.5px rgba(2, 110, 129, 0.35); }

/* ---------- CONTACT FORM ---------- */
.contact-form input, .contact-form select, .contact-form textarea, form input:not([type='hidden']):not([type='checkbox']), form select, form textarea {
  border-radius: 12px; transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
form input:focus, form select:focus, form textarea:focus {
  border-color: var(--color-accent) !important; box-shadow: 0 0 0 4px rgba(232, 166, 19, 0.2); outline: none; background: #fff;
}

/* ---------- CTA ---------- */
.cta {
  background-image:
    radial-gradient(900px 460px at 90% 0%, rgba(232, 166, 19, 0.35), transparent 62%),
    radial-gradient(900px 520px at 0% 100%, rgba(4, 38, 45, 0.7), transparent 64%),
    var(--dots-dark),
    linear-gradient(135deg, #0a6d80 0%, var(--color-primary) 45%, #045565 100%);
  background-size: auto, auto, 28px 28px, auto;
}
.cta__title, .cta__link { text-shadow: 0 8px 40px rgba(0, 0, 0, 0.25); }

@media (max-width: 640px) {
  .svc-block { border-radius: 20px; }
  .approach__item { border-radius: 16px; }
  .intro::after, .site-footer::after { opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-item:hover, .approach__item:hover, .svc-block:hover, .rail__cell:hover { transform: none; }
}

/* ==========================================================================
   FOOTER v2 — one continuous harbour scene
   The footer rises out of the page on layered waves, shares one gradient from
   top to bottom, and ends on the open sea where the BADBAN boat sails.
   ========================================================================== */
.site-footer {
  position: relative; isolation: isolate; overflow: visible;
  margin-top: 0;
  padding-block: clamp(5rem, 8vw, 7.5rem) 0;
  color: #cfe3e2;
  background-color: #04262d;
  background-image:
    radial-gradient(900px 420px at 100% 38%, rgba(2, 110, 129, 0.38), transparent 62%),
    radial-gradient(760px 380px at 0% 70%, rgba(232, 166, 19, 0.10), transparent 62%),
    var(--dots-dark),
    linear-gradient(180deg, #04262d 0%, #03303a 46%, #022a33 100%);
  background-size: auto, auto, 28px 28px, auto;
}
/* waves that lift the footer out of whatever section sits above it */
.site-footer::before, .site-footer::after {
  content: ''; position: absolute; inset-inline: 0; top: 1px; z-index: 0; pointer-events: none;
  background-repeat: repeat-x; background-size: 1200px 100%;
  transform: translateY(-100%);
}
.site-footer::before {
  height: clamp(46px, 6vw, 84px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'><path d='M0,40 Q150,18 300,40 T600,40 T900,40 T1200,40 V80 H0 Z' fill='rgba(10,82,98,0.55)'/></svg>");
  animation: footWaveA 38s linear infinite;
}
.site-footer::after {
  height: clamp(32px, 4.2vw, 58px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'><path d='M0,40 Q150,22 300,40 T600,40 T900,40 T1200,40 V80 H0 Z' fill='%2304262d'/></svg>");
  animation: footWaveB 26s linear infinite reverse;
}
@keyframes footWaveA { to { background-position-x: 1200px; } }
@keyframes footWaveB { to { background-position-x: 1200px; } }

.footer__grid {
  position: relative; z-index: 1;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2.6rem, 5vw, 4rem);
}
.footer__brand .wordmark { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: 0.3em; color: var(--color-paper); }
.footer__tag { color: #a9cccb; }
.footer__cta {
  display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 1.6rem;
  padding: 0.9rem 1.5rem; border-radius: 999px;
  background: linear-gradient(135deg, #f3b72b, var(--color-accent) 55%, #d4920a);
  color: var(--sea-1); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: 0 14px 30px -12px rgba(232, 166, 19, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.footer__cta span { transition: transform 0.35s var(--ease-out); }
.footer__cta:hover { transform: translateY(-3px); box-shadow: 0 20px 38px -12px rgba(232, 166, 19, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.footer__cta:hover span { transform: translateX(5px); }
[dir='rtl'] .footer__cta:hover span { transform: translateX(-5px); }
[lang='fa'] .footer__cta { letter-spacing: 0; font-size: 0.9rem; }

.footer__title {
  display: flex; align-items: center; gap: 0.7rem;
  color: var(--color-accent); letter-spacing: 0.22em;
}
.footer__title::before { content: ''; width: 1.6rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--color-accent), transparent); }
[dir='rtl'] .footer__title::before { background: linear-gradient(270deg, var(--color-accent), transparent); }
[lang='fa'] .footer__title { letter-spacing: 0; }
.footer__col ul { list-style: none; padding: 0; margin: 0; }
.footer__col a { color: #e6efee; }
/* social links read as pills */
.footer__col:last-child ul { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.footer__col:last-child a {
  display: inline-flex; padding: 0.55rem 1.1rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.04);
  transition: border-color 0.3s, background 0.3s, color 0.3s, transform 0.35s var(--ease-out);
}
.footer__col:last-child a::after { display: none; }
.footer__col:last-child a:hover { border-color: var(--color-accent); background: rgba(232, 166, 19, 0.14); color: var(--gold-soft); transform: translateY(-3px); }

.footer__bottom {
  position: relative; z-index: 1; border-top: 0;
  padding-block: 1.4rem 1.6rem; color: #8fb4b3;
}
.footer__bottom::before {
  content: ''; position: absolute; inset: 0 var(--gutter, 0) auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 166, 19, 0.7), rgba(129, 179, 178, 0.35), transparent);
}
.to-top { border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; transition: transform 0.35s var(--ease-out), color 0.3s, border-color 0.3s; }
.to-top:hover { transform: translateY(-4px); color: var(--color-accent); border-color: var(--color-accent); }

/* the open sea at the very bottom — where the boat sails */
.footer__sea {
  position: relative; z-index: 1; height: clamp(120px, 14vw, 180px); overflow: hidden;
  background: linear-gradient(180deg, rgba(2, 110, 129, 0) 0%, rgba(2, 110, 129, 0.28) 55%, rgba(10, 82, 98, 0.55) 100%);
}
.footer__sea-glow {
  position: absolute; inset: auto 0 0; height: 70%; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 100%, rgba(232, 166, 19, 0.22), transparent 70%);
}
.footer__sea .seaband__boat {
  inset-block-end: clamp(2px, 0.6vw, 10px);
  width: clamp(120px, 13vw, 190px); height: auto; aspect-ratio: 17 / 12; z-index: 2;
  opacity: 1; filter: brightness(1.7) saturate(1.3) drop-shadow(0 0 16px rgba(232, 166, 19, 0.5));
}
.footer__wave {
  position: absolute; inset-inline: 0; bottom: 0; background-repeat: repeat-x; background-size: 1200px 100%; pointer-events: none;
}
.footer__wave--1 { height: 62%; z-index: 1; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'><path d='M0,40 Q150,20 300,40 T600,40 T900,40 T1200,40 V80 H0 Z' fill='rgba(10,82,98,0.55)'/></svg>"); animation: footWaveA 30s linear infinite; }
.footer__wave--2 { height: 44%; z-index: 3; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'><path d='M0,40 Q150,24 300,40 T600,40 T900,40 T1200,40 V80 H0 Z' fill='rgba(2,110,129,0.55)'/></svg>"); animation: footWaveB 22s linear infinite reverse; }
.footer__wave--3 { height: 26%; z-index: 4; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'><path d='M0,40 Q150,28 300,40 T600,40 T900,40 T1200,40 V80 H0 Z' fill='%23021a1f'/></svg>"); animation: footWaveA 16s linear infinite; }

@media (max-width: 940px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .site-footer::before, .site-footer::after, .footer__wave { animation: none; }
}