/* ==========================================================================
   Design by Maryam — Home Page Styles (Sleek + Animated)
   Notes:
   - Primary accent (orange) is #ffa500
   - Includes fixes:
     1) Header hamburger reliably clickable on mobile
     2) Comfortable spacing between CTA and footer
   ========================================================================== */

/* ==========================================================================
   0) THEME TOKENS
   ========================================================================== */
:root{
  /* Brand */
  --accent:#ffa500;
  --accent-2:#ffb84d;        /* lighter orange for gradients */
  --accent-3:#ff8c00;        /* deeper orange for contrast */
  --accent-ink:#0f172a;

  /* Greys / Text / Backgrounds */
  --ink:#0f172a;
  --ink-2:#1f2937;
  --ink-3:#334155;
  --muted:#64748b;
  --muted-2:#94a3b8;
  --muted-3:#cbd5e1;
  --bg:#ffffff;
  --bg-2:#f9fafb;
  --bg-3:#0d0f15;

  /* Header */
  --header-h:74px;
  --hd-bg:#000000;
  --hd-border:rgba(255,255,255,.10);
  --link:#d1d5db;
  --link-hover:#ffffff;

  /* Shadows */
  --shadow-1:0 10px 26px rgba(16,24,40,.10);
  --shadow-2:0 12px 28px rgba(16,24,40,.12);
  --shadow-3:0 18px 44px rgba(16,24,40,.18);
  --shadow-accent:0 14px 34px rgba(255,165,0,.35);

  /* Radii */
  --r-8:8px;
  --r-10:10px;
  --r-12:12px;
  --r-14:14px;
  --r-16:16px;
  --r-18:18px;
  --r-20:20px;
  --r-22:22px;
  --r-24:24px;
  --r-pill:999px;

  /* Transitions */
  --t-fast:.18s ease;
  --t-normal:.25s ease;
  --t-slow:.35s ease;

  /* Progress bar color */
  --progress-grad:linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* ==========================================================================
   1) BASE RESET + TYPOGRAPHY
   ========================================================================== */
*,
*::before,
*::after{ box-sizing:border-box }

html, body{ margin:0; padding:0 }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:400;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
}

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

a{ color:inherit; text-decoration:none }

/* Visually hidden (accessible) */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* Container */
.container{ width:min(100% - 48px, 1180px); margin-inline:auto }

/* Headings base rhythm */
h1,h2,h3,h4{ line-height:1.15; margin:0 0 8px; font-weight:900 }
p{ margin:0 0 14px }

/* Focus styles */
:where(a, button, [tabindex]):focus-visible{
  outline:3px solid rgba(255,165,0,.25);
  outline-offset:2px;
  transition:outline var(--t-fast);
}

/* Scrollbar (modern browsers) */
:root{
  scrollbar-color: #d1d5db #f1f5f9;
  scrollbar-width: thin;
}
::-webkit-scrollbar{ height:10px; width:10px }
::-webkit-scrollbar-track{ background:#f1f5f9 }
::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:10px }
::-webkit-scrollbar-thumb:hover{ background:#cbd5e1 }

/* ==========================================================================
   2) BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 18px;
  border-radius:var(--r-12);
  font-weight:800; letter-spacing:.01em;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform var(--t-fast), filter var(--t-fast), box-shadow var(--t-fast);
  will-change:transform, filter, box-shadow;
  user-select:none;
}
.btn--primary{
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#111;
  box-shadow:var(--shadow-accent);
}
.btn--primary:hover{ transform:translateY(-2px) scale(1.02); filter:saturate(110%) }
.btn--ghost{
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.10);
  color:var(--ink);
}
.btn--ghost:hover{ transform:translateY(-2px) }
.btn--pill{ border-radius:var(--r-pill) }

/* Mini buttons used in cards */
.btn-mini{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:10px 14px;
  border-radius:var(--r-pill);
  font-weight:700; font-size:14px;
  border:1px solid transparent;
  transition:var(--t-normal);
}
.btn-mini--ghost{ background:#fff; color:var(--ink); border-color:#e5e7eb }
.btn-mini--ghost:hover{ border-color:rgba(255,165,0,.45); box-shadow:0 6px 14px rgba(255,165,0,.18) }
.btn-mini--primary{ background:linear-gradient(90deg, var(--accent), var(--accent-2)); color:#111; box-shadow:0 10px 20px rgba(255,165,0,.24) }
.btn-mini--primary:hover{ filter:saturate(112%) brightness(1.02) }

/* ==========================================================================
   3) HEADER (ANIMATED) — FIX: higher z-index + mobile tap reliability
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:2000; /* raised to stay above hero/video overlays */
  background:var(--hd-bg);
  border-bottom:1px solid var(--hd-border);
  backdrop-filter:saturate(140%) blur(8px);
  transition:transform var(--t-slow), box-shadow var(--t-normal), background var(--t-normal);
  will-change:transform;
}
.site-header[data-animated]{ animation:headerIn .5s ease both }
@keyframes headerIn{ from{ transform:translateY(-16px); opacity:0 } to{ transform:none; opacity:1 } }
.site-header.is-hidden{ transform:translateY(calc(-1 * var(--header-h))) }
.site-header.is-scrolled{ box-shadow:0 8px 24px rgba(0,0,0,.35) }

.header__bar{
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand__logo{ height:132px; width:auto; display:block }

/* Progress bar */
.scroll-progress{ position:absolute; left:0; top:0; width:100%; height:3px; overflow:hidden }
.scroll-progress span{ display:block; width:var(--p,0%); height:100%; background:var(--progress-grad); transition:width .1s linear }

/* Navigation */
.nav__links{ display:flex; align-items:center; gap:12px }
.nav__links a{
  position:relative; display:inline-flex; align-items:center;
  padding:10px 12px; border-radius:var(--r-10);
  color:var(--link); font-weight:700; transition:var(--t-normal);
}
.nav__links a:hover{ color:var(--link-hover); background:rgba(255,255,255,.06) }
.nav__links a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transform:scaleX(0); transform-origin:left; transition:transform var(--t-normal);
}
.nav__links a:hover::after{ transform:scaleX(1) }
.nav__links a.active, .nav__links a[aria-current="page"]{ color:#fff }
.nav__links a.active::after, .nav__links a[aria-current="page"]::after{ transform:scaleX(1) }

.nav__cta{
  color:#111; background:linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius:var(--r-pill); padding:10px 16px;
  box-shadow:0 10px 24px rgba(255,165,0,.28);
}

/* Hamburger */
.hamburger{
  display:none; width:44px; height:44px; border-radius:var(--r-12);
  background:rgba(255,255,255,.08); border:1px solid var(--hd-border);
  align-items:center; justify-content:center; cursor:pointer; transition:var(--t-normal);
}
.hamburger span, .hamburger::before, .hamburger::after{
  content:""; width:20px; height:2px; background:#fff; display:block; transition:.3s;
}
.hamburger::before{ transform:translateY(-6px) }
.hamburger::after{ transform:translateY(6px) }
.site-header.is-open .hamburger span{ opacity:0 }
.site-header.is-open .hamburger::before{ transform:translateY(0) rotate(45deg) }
.site-header.is-open .hamburger::after{ transform:translateY(0) rotate(-45deg) }

/* Mobile nav */
.nav__overlay{ /* default set in media query */ }
@media (max-width: 960px){
  .hamburger{
    display:flex; z-index:1002;
    /* Fix: ensure reliable taps on touch devices */
    pointer-events:auto; touch-action:manipulation;
  }
  .nav__links{
    position:fixed; inset: var(--header-h) 0 auto 0; display:none;
    flex-direction:column; gap:10px; padding:16px;
    background:rgba(0,0,0,.96); border-bottom:1px solid var(--hd-border); z-index:1001;
  }
  .site-header.is-open .nav__links{ display:flex }
  .nav__links .nav__cta{ width:100%; justify-content:center }
  .nav__overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.4);
    opacity:0; visibility:hidden; transition:opacity var(--t-normal);
    z-index:1000;
    pointer-events:none; /* don't block clicks when hidden */
  }
  .site-header.is-open .nav__overlay{
    opacity:1; visibility:visible; pointer-events:auto; /* clickable only when shown */
  }
}

/* ==========================================================================
   4) HERO (VIDEO)
   ========================================================================== */
.hero--video{ position:relative; overflow:hidden; color:#fff }
.hero__bg{ position:absolute; inset:0 }
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(105%) contrast(108%) }
.hero__video--mobile{ display:none }
@media (max-width: 768px){
  .hero__video--desktop{ display:none } .hero__video--mobile{ display:block }
}
.hero__overlay{ position:absolute; inset:0; background: linear-gradient(90deg, rgba(10,12,16,.78), rgba(10,12,16,.28)) }
.hero__glow{ position:absolute; left:-20%; top:-10%; width:60%; height:60%; background:radial-gradient(420px 260px at 30% 40%, rgba(255,165,0,.28), transparent 70%); filter:blur(20px) }

.hero__content{ position:relative; z-index:2; min-height:72vh; display:grid; align-content:center; padding:80px 0 }
.hero__title{ font-size:clamp(27px, 5vw, 71px); font-weight:600; margin:0 0 24px; letter-spacing:.01em }
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap }

/* Split text animation (chars) */
.js-split{ --stagger:18ms }
.js-split .c{ display:inline-block; opacity:0; transform:translateY(24px) scale(.96); filter:blur(6px) }
.js-split.is-in .c{ animation:splitIn .65s cubic-bezier(.2,.7,.2,1) calc(var(--i)*var(--stagger) + 60ms) forwards }
@keyframes splitIn{ to{ opacity:1; transform:none; filter:none } }

/* ==========================================================================
   5) SERVICES — PREMIUM 4 CARDS
   ========================================================================== */
.section{ padding:80px 0 }
.services-pro{ position:relative; color:#0f172a; overflow:clip; background:#ffffff }
.services-pro__bg{ position:absolute; inset:0; z-index:0; pointer-events:none }
.services-pro__bg img{ width:100%; height:100%; object-fit:cover; opacity:1 }
.services-pro__head{ position:relative; z-index:1; margin-bottom:24px; text-align:left }
.kicker{ display:inline-block; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#1f2937; font-size:14px; margin-bottom:6px }
.services-pro__title{ font-size:clamp(30px, 4.2vw, 44px); line-height:1.15; margin:0 0 8px; font-weight:900 }
.services-pro__lead{ margin:0; color:#64748b }

.services-pro__grid{
  position:relative; z-index:1;
  display:grid; gap:22px; grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 980px){ .services-pro__grid{ grid-template-columns:repeat(2, 1fr) } }
@media (max-width: 520px){ .services-pro__grid{ grid-template-columns:1fr } }

.svcX{
  position:relative; display:block; background:#fff; border-radius:var(--r-18);
  padding:18px; border:1px solid #e5e7eb;
  box-shadow:var(--shadow-1); text-decoration:none; color:inherit;
  animation:svcIn .55s ease both;
  transition:transform var(--t-normal), box-shadow var(--t-normal), border-color var(--t-normal);
}
@keyframes svcIn{ from{opacity:0; transform:translateY(18px) scale(.98)} to{opacity:1; transform:none} }
.svcX::before{
  content:""; position:absolute; left:-1px; top:12px; bottom:12px; width:0px; border-radius:var(--r-pill);
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow:0 8px 22px rgba(255,165,0,.25);
  transition: width var(--t-normal), opacity var(--t-normal);
  opacity:0;
}
.svcX:hover::before, .svcX:focus-visible::before{ width:6px; opacity:1 }
.svcX:hover, .svcX:focus-visible{
  transform: translateY(-6px);
  border-color: rgba(255,165,0,.35);
  box-shadow: var(--shadow-3), 0 0 0 1px rgba(255,165,0,.18) inset;
  outline:none;
}
.svcX img{ width:56px; height:56px; object-fit:contain; margin-bottom:10px }
.svcX__title{ margin:4px 0 6px; font-size:20px; font-weight:800 }
.svcX__tag{ margin:0; color:#475569; font-weight:600 }

/* ==========================================================================
   6) ABOUT v2
   ========================================================================== */
.about-v2{ background:#e3e2e3; color:#0f172a; padding:80px 0 }
.about-v2__grid{ display:grid; gap:28px; align-items:center; grid-template-columns: 1.05fr .95fr }
@media (max-width:900px){ .about-v2__grid{ grid-template-columns:1fr } .about-v2__content{ text-align:center } }
.about-v2__media{
  position:relative; border-radius:var(--r-18); overflow:hidden;
  border:1px solid #e5e7eb; box-shadow:0 20px 44px rgba(16,24,40,.16);
  min-height: clamp(280px, 46vw, 520px);
}
.about-v2__media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; transform:scale(1.02) }
@media (hover:hover) and (pointer:fine){ .about-v2__media:hover img{ transform:scale(1.06) } }
.about-v2 .kicker{ color:#1f2937 }
.about-v2__title{ font-size:clamp(32px, 4.6vw, 48px); margin:0 0 10px }
.about-v2__title span{
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.about-v2__bio{ margin:0 0 16px; color:#556581; max-width:720px }
.about-v2__actions{ display:flex; gap:12px; flex-wrap:wrap }
@media (max-width:900px){ .about-v2__actions{ justify-content:center } }
.btn--glow{ border-radius:var(--r-14); background:linear-gradient(90deg, var(--accent), var(--accent-2)); color:#111; box-shadow:var(--shadow-accent) }
.about-btn:hover{ animation:btnPulse .9s ease-in-out }
@keyframes btnPulse{
  0%{ transform:translateY(-1px); box-shadow:0 14px 32px rgba(255,165,0,.34) }
  50%{ transform:translateY(-3px) scale(1.02); box-shadow:0 18px 44px rgba(255,165,0,.42) }
  100%{ transform:translateY(-1px); box-shadow:var(--shadow-accent) }
}

/* About reveals */
.about-v2 [data-anim]{ opacity:0; transform: translateY(10px); transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s) }
.about-v2 [data-anim].is-in{ opacity:1; transform:none }
.about-v2 [data-anim="fade-left"]{ transform:translateX(-28px) }
.about-v2 [data-anim="fade-down"]{ transform:translateY(-18px) }
.about-v2 [data-anim="slide-right"]{ transform:translateX(28px) }
.about-v2 [data-anim="fade-up"]{ transform:translateY(18px) }

/* ==========================================================================
   7) PORTFOLIO v2 + SWIPER (fallback ready)
   ========================================================================== */
.portfolio-v2{ background:#fff; color:#0f172a; padding:80px 0 }
.portfolio-v2__head{ text-align:center; margin-bottom:20px; animation:pfadeUp .55s ease both }
.portfolio-v2__title{ font-size:clamp(28px, 4.2vw, 40px) }
.portfolio-v2__title::after{ content:""; display:block; width:140px; height:4px; margin:10px auto 0; background:linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius:var(--r-pill) }
.portfolio-v2__lead{ color:#64748b; margin:0 }
@keyframes pfadeUp{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

.portfolio-v2__slider{ position:relative; margin-top:18px; margin-bottom:8px; padding-bottom:0 }
.swiper{ overflow:visible }
#portfolioSwiper{ height:auto !important }
#portfolioSwiper .swiper-wrapper{ align-items:stretch }
#portfolioSwiper .swiper-slide{ height:auto !important }

/* Card */
.p-card{ --media-h:240px; background:#fff; border-radius:var(--r-22); border:1px solid #e5e7eb; box-shadow:var(--shadow-1); overflow:hidden; display:grid; grid-template-rows: var(--media-h) auto; animation: pfadeUp .55s ease both }
.p-card__media{ position:relative; overflow:hidden; min-height:var(--media-h); background:#f8fafc }
.p-card__media img{ width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform var(--t-normal) }
.p-card:hover .p-card__media img{ transform:scale(1.05) }
.p-card__overlay{ position:absolute; inset:0; display:grid; place-items:end; padding:16px; background: linear-gradient(0deg, rgba(255,165,0,.55) 0%, rgba(255,165,0,.35) 50%, rgba(255,165,0,0) 100%); transform:translateY(100%); opacity:0; transition: transform var(--t-normal), opacity var(--t-normal); color:#fff }
.p-card__meta{ transform: translateY(16px) scale(.96); opacity:0; transition: var(--t-normal) }
.p-card:hover .p-card__overlay{ transform:translateY(0); opacity:1 }
.p-card:hover .p-card__meta{ transform:none; opacity:1 }
.p-card__name{ margin:0; font-size:18px; font-weight:800 }
.p-card__cat{ font-size:13px; opacity:.95 }
.p-card__bottom{ display:flex; justify-content:space-between; gap:10px; padding:10px 12px; background:#fff }

/* Fallback grid if Swiper not initialized */
.portfolio-v2__slider:not(.swiper-initialized) .swiper-wrapper{ display:grid; gap:22px; grid-template-columns: repeat(3, minmax(0,1fr)) }
@media (max-width:1024px){ .portfolio-v2__slider:not(.swiper-initialized) .swiper-wrapper{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width:560px){ .portfolio-v2__slider:not(.swiper-initialized) .swiper-wrapper{ grid-template-columns: 1fr } }
.portfolio-v2__slider:not(.swiper-initialized) .swiper-button-prev,
.portfolio-v2__slider:not(.swiper-initialized) .swiper-button-next,
.portfolio-v2__slider:not(.swiper-initialized) .swiper-pagination{ display:none !important }

/* Swiper buttons */
.swiper-button-prev, .swiper-button-next{ width:44px; height:44px; border-radius:var(--r-pill); background:#fff; border:1px solid #e5e7eb; box-shadow:0 2px 10px rgba(0,0,0,.10) }
.swiper-button-prev::after, .swiper-button-next::after{ font-size:16px; color:#111 }
.swiper-button-prev:hover, .swiper-button-next:hover{ box-shadow:0 10px 24px rgba(255,165,0,.25); border-color:rgba(255,165,0,.45) }
.swiper-pagination-bullets .swiper-pagination-bullet{ background:#d1d5db; opacity:1; width:8px; height:8px }
.swiper-pagination-bullet-active{ background:linear-gradient(90deg, var(--accent), var(--accent-2)) }
#portfolioSwiper .swiper-pagination{ position:absolute; left:0; right:0; bottom:-2px; margin:0 auto }

.portfolio-v2__cta{ text-align:center; margin-top:10px }
.portfolio-cta{
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#111; box-shadow:var(--shadow-accent);
  display:inline-block; transition: transform var(--t-fast), filter var(--t-fast);
}
.portfolio-cta:hover{ transform:translateY(-2px); filter:saturate(110%) }

/* ==========================================================================
   8) WORKSPACE (FULL SCREEN)
   ========================================================================== */
.workspace-fs{ position:relative; min-height:100vh; width:100%; display:grid; place-items:center; overflow:hidden; background:#000; text-align:center }
@media (max-width:768px){ .workspace-fs{ min-height:70vh } }
.ws-bg{ position:absolute; inset:0; z-index:0; overflow:hidden }
.ws-bg img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02) }
.ws-overlay{ position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.45) 40%, rgba(0,0,0,.25) 80%) }
.ws-content{ position:relative; z-index:2; color:#fff; padding-inline:clamp(16px,4vw,40px); max-width:1100px }
.ws-kicker{ display:inline-block; margin:0 0 8px; color:#ffd7bd; font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:14px }
.ws-title{ margin:0 0 16px; font-weight:900; font-size: clamp(2rem, 4vw, 3.5rem) }
.ws-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 24px; border-radius:var(--r-14); font-weight:800; color:#111; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow:var(--shadow-accent); border:1px solid transparent; transition: transform var(--t-fast), filter var(--t-fast), box-shadow var(--t-fast) }
.ws-btn:hover{ transform: translateY(-2px) scale(1.02); filter:saturate(112%); box-shadow:0 18px 44px rgba(255,165,0,.45) }
@media (max-width:768px){ .ws-btn{ width:100%; border-radius:var(--r-pill) } }
.ws-scroll{ position:absolute; right:16px; bottom:14px; z-index:2; color:#fff; opacity:.85 }
.ws-scroll .arrow{ display:inline-block; font-size:20px; animation: wsBounce 1.4s ease-in-out infinite }
@keyframes wsBounce{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(6px) } }

/* Workspace reveals */
.workspace-fs [data-anim]{ opacity:0; transform: translateY(10px); transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s cubic-bezier(.2,.7,.2,1) }
.workspace-fs [data-anim].is-in{ opacity:1; transform:none }
.workspace-fs [data-anim="fade-down"]{ transform: translateY(-18px) }
.workspace-fs [data-anim="fade-up"]{ transform: translateY(18px) }
.workspace-fs [data-anim="rise"]{ transform: translateY(40px) }
@media (max-width:560px){ .ws-title{ font-size:clamp(1.3rem,5.5vw,1.6rem) } }

/* Words split */
.js-words{ --stagger:60ms; white-space:normal; word-break:normal }
.js-words .w{ display:inline-block; opacity:0; transform: translateY(40px); filter: blur(2px) }
.js-words.is-in .w{ animation: wsWordIn .7s cubic-bezier(.2,.7,.2,1) calc(var(--i)*var(--stagger)) forwards }
@keyframes wsWordIn{ to{ opacity:1; transform:none; filter:none } }

/* ==========================================================================
   9) CONTACT — SPLIT
   ========================================================================== */
:root{
  --cs-text:#0f172a; --cs-muted:#475569; --cs-bg:#f6f7fb; --cs-brd:#e5e7eb;
}
.contact-split{ position:relative; background:var(--cs-bg); color:var(--cs-text); padding:80px 0; overflow:hidden }
.contact-split::before{
  content:""; position:absolute; inset:-20% -10% -30% -10%;
  background:
    radial-gradient(800px 360px at 12% 10%, rgba(255,165,0,.10), transparent 70%),
    radial-gradient(600px 260px at 88% 80%, rgba(255,140,0,.08), transparent 60%);
  filter:blur(6px);
}
.contact-split .container{ position:relative; z-index:1 }
.contact-split__head{ text-align:center; margin-bottom:22px }
.contact-split__title{ margin:0 0 6px; font-weight:900; font-size:clamp(28px, 4.4vw, 40px) }
.contact-split__lead{ margin:0; color:#64748b }

.contact-split__grid{ display:grid; gap:24px; align-items:start; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr) }
@media (max-width:900px){ .contact-split__grid{ grid-template-columns:1fr } }

.c-form{ display:grid; grid-template-columns:1fr 1fr; gap:14px; background:#fff; border:1px solid var(--cs-brd); border-radius:var(--r-16); padding:16px; box-shadow:var(--shadow-1) }
.c-field{ display:flex; flex-direction:column; gap:6px }
.c-field--full{ grid-column:1/-1 }
.c-field label{ font-weight:700; color:#111; font-size:14px }
.c-input{ width:100%; border-radius:var(--r-8); border:1px solid var(--cs-brd); padding:12px 14px; background:#fff; color:#111; outline:none; transition:border-color var(--t-fast), box-shadow var(--t-fast) }
.c-input:focus{ border-color: rgba(255,165,0,.6); box-shadow:0 0 0 4px rgba(255,165,0,.18) }
.c-textarea{ min-height:140px; resize:vertical }
.c-actions{ grid-column:1/-1; display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.c-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-radius:var(--r-12); border:1px solid transparent; font-weight:800; transition:var(--t-fast) }
.c-btn--primary{ background:linear-gradient(90deg, var(--accent), var(--accent-2)); color:#111; box-shadow:var(--shadow-accent) }
.c-btn--primary:hover{ transform:translateY(-2px) }
.c-status{ font-size:14px; color:#64748b }

.c-info{ display:grid; gap:14px }
.c-card{
  display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; background:#fff;
  border:1px solid var(--cs-brd); border-radius:var(--r-16); padding:14px; box-shadow:var(--shadow-1);
  transition: transform var(--t-normal), box-shadow var(--t-normal), border-color var(--t-normal), background-color var(--t-normal);
}
.c-card:hover{ transform:translateY(-5px); border-color:rgba(255,165,0,.35); box-shadow:0 18px 44px rgba(16,24,40,.16) }
.c-card__icon{ width:56px; height:56px; border-radius:var(--r-14); display:grid; place-items:center; background:linear-gradient(90deg, rgba(255,165,0,.16), rgba(255,140,0,.16)); border:1px solid rgba(255,165,0,.3); box-shadow:0 8px 18px rgba(255,165,0,.20) }
.c-card__icon img{ width:28px; height:28px; object-fit:contain }
.c-card__body h3{ margin:0; font-size:16px; font-weight:900; color:#0f172a }
.c-card__body p{ margin:2px 0 0; color:#475569; font-weight:600 }

/* Contact reveals */
.contact-split [data-anim]{ opacity:0; transform: translateY(14px); transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s) }
.contact-split [data-anim].is-in{ opacity:1; transform:none }
.contact-split [data-anim="left"]{ transform: translateX(-24px) }
.contact-split [data-anim="right"]{ transform: translateX(24px) }
.c-info [data-anim-item]{ opacity:0; transform: translateX(24px); transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s cubic-bezier(.2,.7,.2,1) }
.c-info [data-anim-item].is-in{ opacity:1; transform:none; transition-delay: calc(var(--i,0) * 120ms) }
@media (max-width:900px){ .c-form{ grid-template-columns:1fr } .c-actions{ justify-content:center } }

/* ==========================================================================
   10) CTA (DARK) — includes Ken Burns + spacing fix above footer
   ========================================================================== */
.cta-hero{ position:relative; width:100%; min-height:60vh; display:grid; place-items:center; background:linear-gradient(180deg, #f3f4f5, #0f1117); color:#fff; text-align:center; overflow:hidden; padding-bottom: clamp(48px, 7vw, 96px) }
@media (max-width:640px){ .cta-hero{ min-height:56vh } }
.cta-hero__bg{ position:absolute; inset:0; background: radial-gradient(800px 380px at 20% 0%, rgba(255,165,0,.18), transparent 60%), radial-gradient(900px 460px at 80% 100%, rgba(255,140,0,.10), transparent 60%); filter: blur(6px) }
.cta-hero__content{ position:relative; z-index:1; padding:60px 16px }
.cta-hero__title{ margin:0 0 10px; font-weight:900; font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing:.015em }
.cta-hero__lead{ margin:0 0 16px; color:#cbd5e1; font-size: clamp(1rem, 1.6vw, 1.125rem); max-width:820px; margin-inline:auto }
.cta-hero__btn{
  display:inline-flex; align-items:center; justify-content:center; padding:14px 28px; border-radius:var(--r-16); font-weight:900; letter-spacing:.02em;
  color:#111; background:linear-gradient(90deg, var(--accent), var(--accent-2)); border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow-accent);
  transition: transform var(--t-fast), filter var(--t-fast), box-shadow var(--t-fast);
  animation: ctaPulse 2.2s ease-in-out infinite;
}
.cta-hero__btn:hover{ transform: translateY(-2px) scale(1.03); filter:saturate(112%); box-shadow:0 18px 48px rgba(255,165,0,.45) }
@keyframes ctaPulse{ 0%,100%{ box-shadow:var(--shadow-accent) } 50%{ box-shadow:0 20px 56px rgba(255,165,0,.50) } }
@media (max-width:640px){ .cta-hero__btn{ width:100%; max-width:420px; border-radius:var(--r-pill) } }
.cta-hero [data-anim="fade"]{ opacity:0; transform: translateY(12px); transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s) }
.cta-hero [data-anim="fade"].is-in{ opacity:1; transform:none }

/* Image layer + overlay + gentle Ken Burns */
.cta-hero__bg,
.cta-hero__bg picture{ position:absolute; inset:0; z-index:0 }
.cta-hero__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(105%) contrast(108%); transform:scale(1.02); animation: ctaKenBurns 22s ease-in-out infinite alternate;
}
@keyframes ctaKenBurns{ from{ transform: scale(1.02) translateY(0) } to{ transform: scale(1.08) translateY(10px) } }
.cta-hero__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(800px 380px at 20% 0%, rgba(255,165,0,.18), transparent 60%),
    radial-gradient(900px 460px at 80% 100%, rgba(255,140,0,.10), transparent 60%),
    linear-gradient(180deg, rgba(10,12,16,.45) 0%, rgba(10,12,16,.60) 60%, rgba(10,12,16,.72) 100%);
}
@media (prefers-reduced-motion: reduce){
  .cta-hero__img{ animation:none; transform:none }
}

/* ==========================================================================
   11) TESTIMONIALS — CINEMATIC CAROUSEL
   ========================================================================== */
.tst-hero{
  --text:#0f172a; --muted:#475569; --brd:#e5e7eb;
  background: linear-gradient(180deg, #f3f5f9, #ffffff);
  color: var(--text);
  padding: clamp(72px, 10vh, 100px) 0;
  position: relative; overflow: hidden;
}
.tst-hero::before, .tst-hero::after{
  content:""; position:absolute; z-index:0; pointer-events:none; filter: blur(14px);
}
.tst-hero::before{ left:-12%; top:-18%; width:520px; height:420px; background: radial-gradient(240px 220px at 40% 40%, rgba(255,165,0,.18), transparent 60%) }
.tst-hero::after{ right:-15%; bottom:-20%; width:560px; height:460px; background: radial-gradient(260px 240px at 60% 60%, rgba(2,6,23,.10), transparent 60%) }

.tst-head{ position:relative; z-index:1; text-align:center; margin-bottom:18px }
.tst-title{ margin:0 0 6px; font-weight:900; font-size: clamp(28px, 4.4vw, 40px) }
.tst-lead{ margin:0; color:#64748b }

.tst-slider{ position:relative; z-index:1; max-width: 1000px; margin: 18px auto 0; }
.tst-viewport{ position:relative; overflow:visible; }
.tst-stage{ position:relative; min-height: 320px; transition: min-height var(--t-slow); perspective: 1200px; }

.tst-card{
  position:absolute; left:50%; top:0; width:min(900px, 90vw);
  transform: translateX(-50%) translateZ(0);
  background:#fff; border:1px solid var(--brd); border-radius:var(--r-20); padding:16px;
  box-shadow:var(--shadow-2);
  display:grid; grid-template-columns: 140px 1fr; gap:16px; align-items:center;

  opacity: var(--op, 0);
  transform: translateX(calc(-50% + var(--tx, 0px))) rotateY(var(--ry, 0deg)) scale(var(--s, .9)) translateZ(0);
  transform-origin:center;
  transition: transform var(--t-slow), opacity var(--t-normal), box-shadow var(--t-normal);
}
.tst-accent{ position:absolute; left:16px; right:16px; top:0; height:4px; border-radius:var(--r-pill); background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.tst-media{ display:grid; place-items:center }
.tst-media img{ width:120px; height:120px; object-fit:cover; border-radius:var(--r-pill); display:block; box-shadow:0 10px 26px rgba(16,24,40,.18) }
.tst-name{ margin:0; font-size:18px; font-weight:900; color:#0f172a }
.tst-role{ margin:4px 0 8px; color:#1f2937; font-weight:700 }
.tst-text{ margin:0; color:#475569; font-weight:600 }

.tst-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:var(--r-pill); border:1px solid #e5e7eb;
  background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.10); cursor:pointer;
}
.tst-prev{ left:-6px }
.tst-next{ right:-6px }
.tst-nav::before{
  content:""; display:block; width:12px; height:12px; border:2px solid #111; border-top:none; border-right:none; margin:auto; transform: rotate(45deg);
}
.tst-next::before{ transform: rotate(-135deg) }
.tst-prev:hover, .tst-next:hover{ box-shadow:0 10px 24px rgba(255,165,0,.25); border-color:rgba(255,165,0,.45) }

.tst-dots{ display:flex; gap:8px; justify-content:center; align-items:center; margin-top:12px }
.tst-dots button{ width:8px; height:8px; border-radius:var(--r-pill); border:none; cursor:pointer; background:#d1d5db; transition:var(--t-fast) }
.tst-dots button.active{ background: linear-gradient(90deg, var(--accent), var(--accent-2)); width:18px }

.tst-cta{ margin-top:20px; display:flex; gap:12px; justify-content:center }

@media (max-width: 700px){
  .tst-card{ grid-template-columns: 1fr; text-align:center }
  .tst-media img{ width:110px; height:110px }
  .tst-prev{ left:2px } .tst-next{ right:2px }
}

/* ==========================================================================
   12) FOOTER
   ========================================================================== */
.site-footer{
  background: linear-gradient(180deg, #c4c4c6, #eaebec);
  color:#000000; border-top:1px solid rgba(255,255,255,.08);
  padding:44px 0 24px;
  margin-top:0; /* keep sections snug with CTA above */
}
.footer__grid{
  display:grid; gap:22px; grid-template-columns: 1.2fr .8fr .8fr .8fr;
  margin-bottom:16px;
}
.footer__brand .brand__logo{ height:56px; width:auto }
.footer__about{ color:#050505; margin:10px 0 0; max-width: 520px }

.footer__title{ margin:0 0 8px; color:#030303; font-weight:800; letter-spacing:.2px }
.footer__list{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.footer__list a{ color:#0d0e0e; transition:var(--t-normal) }
.footer__list a:hover{ color:#fff }

.footer__social{ display:flex; gap:10px; margin-top:10px }
.footer__social img{ width:22px; height:22px }

.footer__bottom{
  display:flex; gap:12px; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,.08);
  padding-top:14px; color:#9aa0a6; font-size:14px;
}
.footer__mini a{ color:#080909; }
.footer__mini .dot{ margin-inline:8px }

.footer__muted{ color:#020303 }

@media (max-width: 1060px){
  .footer__grid{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 640px){
  .footer__grid{ grid-template-columns: 1fr }
  .footer__bottom{ flex-direction:column; gap:6px; text-align:center }
}

/* ==========================================================================
   13) UTILITIES + MISC
   ========================================================================== */
/* Subtle fading gradient separators (optional utility) */
.u-sep{
  height:1px; background:linear-gradient(90deg, transparent, rgba(0,0,0,.12), transparent);
  margin:24px 0;
}

/* Section muted bg utility */
.u-muted{ background:var(--bg-2) }

/* Accent text utility */
.u-accent{
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Soft card utility */
.u-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:var(--r-16);
  box-shadow:var(--shadow-1);
}

/* ==========================================================================
   14) REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .site-header, .nav__links, .hamburger, .scroll-progress span, .nav__overlay,
  .js-split .c, .about-v2 [data-anim], .portfolio-v2__head, .p-card, .p-card__overlay, .p-card__meta,
  .workspace-fs [data-anim], .js-words .w,
  .contact-split [data-anim], .c-info [data-anim-item],
  .cta-hero [data-anim="fade"], .js-typing.typing::after,
  .tst-card, .tst-dots button,
  .svcX::before, .svcX{
    transition:none !important;
    animation:none !important;
  }
  .js-split .c,
  .about-v2 [data-anim],
  .workspace-fs [data-anim],
  .js-words .w,
  .contact-split [data-anim], .c-info [data-anim-item],
  .cta-hero [data-anim="fade"]{
    opacity:1 !important; transform:none !important;
  }
}

/* ==========================================================================
   15) RESPONSIVE TUNING
   ========================================================================== */
@media (max-width:1200px){
  .header__bar{ padding-inline:8px }
  .container{ width:min(100% - 40px, 1100px) }
}
@media (max-width:1024px){
  .container{ width:min(100% - 32px, 980px) }
}
@media (max-width:768px){
  .container{ width:min(100% - 28px, 720px) }
}
@media (max-width:480px){
  .container{ width:min(100% - 24px, 460px) }
  .btn{ width:100% }
}

/* ==========================================================================
   16) EXTRA MICRO-INTERACTIONS (ORANGE GLOW, HOVER HINTS)
   ========================================================================== */
/* Subtle orange focus ring for inputs and anchors on dark backgrounds */
:is(.site-header, .workspace-fs, .cta-hero) :where(a, button, input, textarea):focus-visible{
  outline:3px solid rgba(255,165,0,.35);
  outline-offset:2px;
}

/* Orange underline hover utility (use on inline anchors if needed) */
.u-underline{
  background-image:linear-gradient(var(--accent), var(--accent));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 2px;
  transition:background-size var(--t-normal);
}
.u-underline:hover{ background-size:100% 2px }