/* ===================== RESET & BASE ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #000000;
  --bg-2: #111116;
  --card: #222222;
  --card-2: #1b1b22;
  --text: #f4f4f6;
  --muted: #7B7B7B;
  --muted-2: #8b8b97;
  --orange: #FD780EF2;
  --orange-2: #913924;
  --purple: #482380;
  --purple-2: #5b2be0;
  --line: #3E3E3E;
  --radius: 16px;
  --container: 1440px;
}

html { scroll-behavior: smooth; }
/* ===================== THEMED SCROLLBAR ===================== */ 
@supports (-moz-appearance: none) {
  html { scrollbar-width: thin; scrollbar-color: var(--orange) #101016; }
}
/* Chrome / Edge — custom thin bar.
   Do NOT add scrollbar-width/scrollbar-color, or Chrome ignores all of this. */
::-webkit-scrollbar { width: 2px; height: 2px; }
::-webkit-scrollbar-track { background: #0c0c11; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--orange-2), var(--purple));
  border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--orange), var(--purple-2)); }
body {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 80px; }

.section-title {
  font-weight: 700;  font-size: clamp(1.75rem, 2.9vw, 2.125rem);   /* 28 → 34px */
  line-height: 1;  letter-spacing: 0;
  color: #F5831F;  margin-bottom: 28px;
}

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex; align-items: center; gap: 20px;
  font-size: .9rem;padding: 12px 22px; border-radius: 999px;
  cursor: pointer; border: 1px solid transparent;
  transition: 0.3s ease-in-out all, transform .2s ease, box-shadow .25s ease, background .25s ease, opacity .2s ease;
  white-space: nowrap;
}
.btn__arrow { transition: transform .2s ease; }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--gradient {
  position: relative;
  background: linear-gradient(90deg, var(--orange-2), var(--purple)) border-box;
  color: #fff;
  overflow: hidden;               /* clip the layer to the pill radius */
  z-index: 0;                     /* keep text above the layer */
}

/* the hover gradient, sitting on top, hidden until hover */
.btn--gradient::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--purple), var(--orange-2));
  opacity: 0;
  transition: opacity .35s ease;
  z-index: -1;                    /* behind the label + arrow */
}
.btn--gradient:hover::before { opacity: 1; }

.btn--gradient:hover {
  transform: translateY(-2px);    /* keep the lift, drop the background swap */
}  

.btn--ghost { 
  border-color: var(--line);
  color: var(--text); 
}
.btn--ghost:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.07); }
.btn--ghost .btn__arrow {
  background: linear-gradient(90deg, var(--orange-2), var(--purple));
  border-radius: 999px; width: 22px; height: 22px; display: inline-grid; place-items: center; color: #fff;
}

/* ===================== NAV ===================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: #000;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 20px; }
.brand {
  font-weight: 800; font-size: 1.35rem; letter-spacing: .5px;
  background: linear-gradient(90deg, #ff9d3d, #ff5a2e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand img {
  width: 120px;                                   /* set this to your logo's normal width */
  height: auto;
  transition: width .35s cubic-bezier(.22, 1, .36, 1);
}
.nav__links { display: flex; gap: 30px; }
.nav__links a { color: var(--muted); font-size: 1.1rem; font-weight: 500; transition: color .2s;cursor: pointer; }
.nav__links a:hover { color: var(--text); }
.nav__cta { padding: 10px 14px;border: 0; }

.nav__toggle { display: none; flex-direction: column; gap: 6px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav__toggle span { transition: transform .3s ease, opacity .25s ease; background: var(--text);height: 2px;width: 25px;border-radius: 10px;}
.nav.open .nav__toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav.open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ===================== HERO ===================== */
.hero {
  position: relative; 
  height: calc(100dvh - 70px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: radial-gradient(1200px 500px at 60% 10%, #241016 0%, #0a0a0d 55%);
    border-bottom-left-radius: 33px;
    border-bottom-right-radius: 33px;
}
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; opacity: .9;
}
/* Animated bokeh — shows through / behind video, and is the fallback if no video */
.hero__bokeh { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__bokeh::before, .hero__bokeh::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55;
  animation: float 12s ease-in-out infinite;
}
.hero__bokeh::before {
  width: 380px; height: 380px; left: 42%; top: 8%;
  background: radial-gradient(circle, rgba(255,70,60,.85), transparent 65%);
}
.hero__bokeh::after {
  width: 320px; height: 320px; left: 14%; top: 30%;
  background: radial-gradient(circle, rgba(90,60,180,.7), transparent 65%);
  animation-delay: -4s;
}
.hero__overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(10,10,13,.35) 0%, rgba(10,10,13,.15) 40%, rgba(10,10,13,.9) 100%);
}
.hero__inner {
  position: relative; z-index: 3;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 30px;
  padding-bottom: 50px; padding-top: 120px; width: 100%; max-width: var(--container);
}
.hero__text { max-width:650px; }
.hero__title {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 400;line-height: 1;letter-spacing: 0.3;
  color: #F5831FF2; margin-bottom: 10px;
}
.hero__sub {
font-weight: 200  ;font-size: clamp(1rem, 1.4vw, 1.1rem);
line-height: 1.3;letter-spacing: 0; color: #fff;
}
.hero__cta { align-self: flex-end; }

/* Hero entrance — staggered, soft rise-in */
.hero__title, .hero__sub, .hero__cta {
  opacity: 0; transform: translateY(26px);
  animation: rise 1.15s cubic-bezier(.16, 1, .3, 1) both;
}
.hero__title { animation-delay: .20s; }
.hero__sub   { animation-delay: .40s; }
.hero__cta   { animation-delay: .60s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===================== SCROLL REVEAL ===================== */
/* Soft, slow ease-out (easeOutExpo-style) for a smooth glide-in. */
.reveal {
  opacity: 0; transform: translateY(38px);
  transition:
    opacity 1.1s cubic-bezier(.16, 1, .3, 1),
    transform 1.1s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* ===================== WHO WE ARE ===================== */
.about { padding: 90px 0; }
.about__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.about__text .section-title { margin-bottom: 6px; }
.about__art { display: flex; justify-content: center;position: relative; }
.about__text p {  margin-top: 24px; max-width: 440px; }
.anim--about { width: min(460px, 100%); aspect-ratio: 5 / 4; } 
.about__art::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(560px, 95%);
  aspect-ratio: 1;
  background:radial-gradient(circle at 50% 45%, rgb(253 120 14 / 46%) 0%, rgb(72 35 128 / 18%) 48%, transparent 72%);
  filter: blur(12px);
  z-index: -1;
    right: 17px;
  pointer-events: none;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;   /* organic start shape */
  animation: blobMorph 14s ease-in-out infinite;
}
@keyframes blobMorph {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: translate(0, 0) rotate(0deg) scale(1); }
  33%      { border-radius: 66% 34% 41% 59% / 57% 63% 37% 43%; transform: translate(12px, -14px) rotate(60deg) scale(1.05); }
  66%      { border-radius: 39% 61% 52% 48% / 62% 39% 61% 38%; transform: translate(-10px, 10px) rotate(-45deg) scale(.98); }
}
@media (prefers-reduced-motion: reduce) { .about__art::before { animation: none; } }
/* ===================== SERVICES ===================== */
.services {
  padding: 70px 0 110px;
  /* background:
    radial-gradient(700px 380px at 50% 60%, rgba(123,75,255,.14), transparent 70%),
    radial-gradient(600px 360px at 30% 40%, rgba(240,144,47,.12), transparent 70%),var(--bg); */
    transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
     position: relative; border-radius: 16px;
   transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1);
}
.services::before{
    content: '';background-image: url(./assets/images/bg-grapic.svg);
    position: absolute;width: 100%;
    height: 100vh;background-size: 100% 100%;top: 11%;
    background-position: bottom;right: 0px;zoom: 159%;
}
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; row-gap: 50px;}
.service { text-align: center; padding: 12px; }
.anim--service { transition: transform .45s cubic-bezier(.16,1,.3,1);
  width: 100%;height:210px;
    margin: 0px auto 18px;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1);transform: scale(1.35);}
.service h3 {
  font-weight:500;  font-size: clamp(1.25rem, 1.9vw, 1.4rem); 
  line-height: 1;  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, .95);  margin-bottom: 12px;
   transition: color .5s ease, transform .8s cubic-bezier(.16,1,.3,1), text-shadow .4s ease;
}
.service p {   transition: color .3s ease .05s, transform .4s cubic-bezier(.16,1,.3,1) .05s;
  font-size: .97rem; max-width: 320px; margin: 0 auto; }
/* Service hover effect  */
/* service card — base */
.services {
  position: relative; border-radius: 16px;
  transition:opacity 1.1s cubic-bezier(.16,1,.3,1),
    transform .4s cubic-bezier(.16,1,.3,1);
}

/* centered underline that grows on hover */
.service::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #23074D, #f4821f);
  box-shadow: 0 0 12px rgb(79 216 255 / 18%);
  transition: width .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}
.service:hover::after {
  width: 60px;
  box-shadow: 0 0 18px rgba(244,130,31,.5);
  opacity: 0.3;
}

/* card lift */
.service:hover { transform: translateY(-6px); }

/* icon pop — with a gentle continuous float while hovered */
 .service:hover .anim--service {
  transform: translateY(-8px) scale(1.3); 
} 
.service:hover h3 {
  color: var(--orange);
  transform: translateY(-3px);
  text-shadow: 0 0 .6px currentColor, 0 0 .6px currentColor;  /* fakes a heavier weight, animatable */
}
 .service:hover p {
  color: var(--text);
  transform: translateY(-3px);
}
/* .storytelling-artical .anim.anim--service {
    width: 76%;
    margin-top: -26px;
    height: 235px;
} */
/* ===================== ANIM WRAPPER + FALLBACK ===================== */
.anim { position: relative; }
.anim__player, .anim__fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.anim__player { opacity: 0; transition: opacity .4s ease; }
.anim.is-loaded .anim__player { opacity: 1; }
.anim.is-loaded .anim__fallback { opacity: 0; visibility: hidden; }
.anim__fallback { display: grid; place-items: center; transition: opacity .4s ease; }
.anim__fallback svg { width: 100%; height: 100%; }

/* fallback micro-animations */
.fl { animation: float 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.pulse { animation: pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.glow { animation: glow 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.clap { animation: clap 3s ease-in-out infinite; transform-box: fill-box; transform-origin: left center; }

/* ===================== CONTACT ===================== */
.contact { padding: 20px 0 100px; }
.contact__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; align-items: stretch; }
 .contact .btn {border-radius: 16px;border: 1px solid #333333;padding: 16px 15px;}
 .contact .floating-cta__label {font-size: 1rem;}
.card--office { display: flex; flex-direction: column; }
.icon-badge {
  width: 65px; height: 65px; border-radius: 100px;
  display: grid; place-items: center; margin-bottom: 18px;
}
.icon-badge--purple { background: linear-gradient(135deg, #482380, #482380); }
.icon-badge--orange { background: linear-gradient(135deg, #913924, #913924); }
.card--office h3 { font-size: 1.5rem; margin-bottom: 12px; }
.contact p {  font-size: 1rem; line-height: 26px; margin-bottom: 10px; word-break: break-word;}
.card__rule { border: none; border-top: 1px solid var(--line); margin: 22px 0; }
.card__btn { align-self: flex-start; }
.pin { color: var(--orange); }

.contact__right { display: flex; flex-direction: column; gap: 16px; }
.mini-cards { display: grid; grid-template-columns: 1fr 1fr; gap:16px; }
.card--mini { display: flex; gap: 31px; align-items: flex-start; transition: border-color .2s, transform .2s; }
.card--mini:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.2);transition: 0.3s ease-in-out all; }
.card--mini:hover .link {gap: 23px;}
.card--mini h4 { font-size: 1.2rem; margin-bottom: 4px; } 
.link { font-weight: 500; font-size: 1rem; display: inline-flex; align-items: center; gap: 18px;transition: 0.3s ease-in-out all; }
.link--orange { color: var(--orange); }
.link--purple { color: #8259CFF2; }

.map {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); min-height: 230px; display: block; flex: 1;
}
.map iframe { width: 100%; height: 100%; min-height: 230px; border: 0; filter: saturate(.95); }
.map__btn {
  position: absolute; right: 16px; bottom: 16px;
  background: #222222; color: #fff; font-size: .9rem;
  padding: 9px 14px; border-radius: 10px; display: inline-flex; gap: 8px; align-items: center;
  border: 1px solid #333333;border-radius: 8px;
}

/* ===================== FLOATING CTA (fixed, sci-fi) ===================== */
.floating-cta {
  position: fixed; right: 26px; bottom: 26px; z-index: 60;
  display: inline-flex; align-items: center; gap: 20px;
  padding: 11px 14px 11px ; border-radius: 999px; font-size: .9rem; letter-spacing: .3px; color: #fff;
  border: 1.5px solid transparent;
  overflow: hidden;
  /* glassy fill + flowing gradient border (orange → purple → cyan) */
  background:
    linear-gradient(180deg, #222222, #222222) padding-box,
    linear-gradient(120deg, var(--orange-2), var(--purple), #4fd8ff, var(--purple), var(--orange-2)) border-box;
  background-size: 100% 100%, 300% 100%;
  backdrop-filter: blur(10px); 
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.96);
  transition:  0.3s ease-in-out all, opacity .4s  , transform .4s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
  animation: ctaBorder 6s linear infinite;
}
.float-btn-ico {display: flex;gap: 17px;}
 
.btn:hover,.floating-cta:hover { gap: 25px;transition: 0.3s ease-in-out all;}
 .btn:hover,.floating-cta:hover {gap: 25px;transition: 0.3s ease-in-out all;}
 .floating-cta img {width: 21px;}
.floating-cta.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.floating-cta:hover { transform: translateY(-3px) scale(1.03);  }
.floating-cta.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

/* must come AFTER .show so it wins */
.floating-cta.hide {
  opacity: 0; visibility: hidden;
  transform: translateY(16px) scale(.96);
  pointer-events: none;
}
/* keep content above the shimmer sweep */
 .floating-cta__label, .floating-cta__arrow { position: relative; z-index: 2; }
/* pulsing "live" status dot */ 
.floating-cta__arrow {
  width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; flex-shrink: 0;
  color: #fff; background: linear-gradient(135deg, var(--orange-2), var(--purple));
  box-shadow: 0 0 12px rgba(255,106,61,.5);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.floating-cta:hover .floating-cta__arrow { transform: translateX(3px) rotate(-2deg); }
/* shimmer sweep */ 
@keyframes ctaBorder { to { background-position: 0% 0%, 300% 0%; } }
 
@keyframes ctaDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.65); } }
 
@media (max-width: 560px) {
  .floating-cta { right: 16px; bottom: 16px; padding: 9px 10px 9px 18px; font-size: .88rem; }
  .floating-cta__arrow { width: 26px; height: 26px; }
} 

/* ===================== FOOTER ===================== */
.footer {background: #482380;text-align: center; padding: 12px; color: #e9e3ff; font-size: .7rem;}
.footer p {font-size: 0.9rem;}
/* ===================== KEYFRAMES ===================== */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes glow { 0%,100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes clap { 0%,100% { transform: rotate(0deg); } 15% { transform: rotate(-16deg); } 30% { transform: rotate(0deg); } }

@media (prefers-reduced-motion: reduce) {
  .fl, .pulse, .glow, .clap, .hero__bokeh::before, .hero__bokeh::after { animation: none; }
  .hero__title, .hero__sub, .hero__cta { animation: none; opacity: 1; transform: none; }
  .reveal { transition: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}
/* smooth transitions for all the bits that shrink */
.nav__inner { transition: height .5s  ease-in-out all; }
.nav, .brand img, .nav__links a, .nav__cta { transition:   .5s ease-in-out all; }

/* HEADER — compact on scroll (everything scales down proportionally) */
.nav.scrolled .nav__inner  { height: 58px; }              /* was 70px — not too tight */
.nav.scrolled .nav__links a { font-size: 1rem; }          /* links a touch smaller */
.nav.scrolled .nav__cta    { padding: 7px 12px; font-size: .82rem; }  /* button smaller */
.nav.scrolled              { box-shadow: 0 6px 20px rgba(0,0,0,.4); }
/* JS adds this to the section you navigate to — nothing else uses it */
.nav-target {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.nav.scrolled .brand img { width: 100px; } 
html { scroll-behavior: smooth; scroll-padding-top: 70px; }
/* GET IN TOUCH — smaller on scroll */
.floating-cta.shrink { padding: 8px 12px 8px; font-size: .8rem; gap: 12px; }
.floating-cta.shrink img { width: 18px; }
/* ===================== RESPONSIVE ===================== */
/* small desktops / large laptops */
@media (max-width: 1200px) {
  .container { padding-inline: 48px; }
  .hero__inner { padding-top: 90px; padding-bottom: 40px; }
}
/* tablets (landscape) */
@media (max-width: 1024px) {
  .container { padding-inline: 40px; } 
  .contact__grid  { grid-template-columns: 1fr 1.35fr; }
  .icon-badge { width: 56px; height: 56px; }
 
  .services__grid { grid-template-columns: 1fr; gap: 20px; }

  .service {
    background: rgba(255, 255, 255, 0.06);      /* light translucent panel */
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 30px 22px 34px;
    backdrop-filter: blur(4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  }

  .service p { max-width: 100%; }              /* let text fill the card */

  /* keep the icon from overflowing the card */
  .anim--service { transform: scale(1.1); }
  .service:hover .anim--service { transform: translateY(-6px) scale(1.12); }
}

/* tablets (portrait) — nav collapses */
@media (max-width: 900px) {
  .nav__cta { display: none; }
  .nav__toggle { display: flex; }
.anim--service { width: 80%;}
.about { overflow: hidden;}
  /* mobile menu panel — animated open/close (opacity/visibility, not display) */
  .nav__links {
    display: flex; flex-direction: column; gap: 2px;
    position: absolute; top: 100%; left: 0; right: 0;   /* below the nav, works when shrunk too */
    background: #0b0b0f; border-bottom: 1px solid var(--line);
    padding: 10px 28px 18px;
    opacity: 0; visibility: hidden; transform: translateY(-14px);
    transition: opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1), visibility .3s;
    pointer-events: none;
  }
  .nav.open .nav__links {
    opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
  }

  /* links — dividers, bigger tap target, staggered entrance */
  .nav__links a {
    font-size: 1.15rem; padding: 14px 4px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    opacity: 0; transform: translateX(-12px);
    transition: opacity .3s ease, transform .3s ease, color .2s;
  }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__links a:hover { color: var(--orange); }
  .nav.open .nav__links a { opacity: 1; transform: translateX(0); }
  .nav.open .nav__links a:nth-child(1) { transition-delay: .06s; }
  .nav.open .nav__links a:nth-child(2) { transition-delay: .12s; }
  .nav.open .nav__links a:nth-child(3) { transition-delay: .18s; }
  .nav.open .nav__links a:nth-child(4) { transition-delay: .24s; }

  /* layout */
  .about__inner {display: flex;flex-direction: column-reverse; }
  .about__art { order: -1; }
  .about__text p { max-width: none; }

  .service p { max-width: 460px; }

  .contact__grid { grid-template-columns: 1fr; }
  .contact__right { gap: 20px; }

  .hero__inner { flex-direction: column; align-items: flex-start; gap: 20px; }
}
/* large phones */
@media (max-width: 680px) {
  .container { padding-inline: 22px; }
  .mini-cards { grid-template-columns: 1fr; }
  .about { padding: 64px 0; }
  .services { padding: 56px 0 80px; }
  .contact { padding: 16px 0 72px; }
  .card { padding: 22px; }
  .icon-badge { width: 52px; height: 52px; }
  .card--office h3 { font-size: 1.3rem; }
  .section-title { margin-bottom: 20px; }
  .hero {
    border-radius: 0 0 22px 22px; }
  .services::before { display: none; }   /* the big graphic overflows on small screens */
}
/* small phones */
@media (max-width: 400px) {
  .container { padding-inline: 16px; }
  .floating-cta { padding: 10px 12px; gap: 8px; }
  .floating-cta__label { font-size: .82rem; }
  .map__btn { font-size: .8rem; padding: 8px 10px; }
  .btn { gap: 12px; }
} 
/* ============================================================
   SCI-FI THEME LAYER  (appended — easy to tweak / remove)
   ============================================================ */
:root { --cyan: #4fd8ff; }

/* faint tech grid + glow behind content */
/* body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(79,216,255,.045) 1px, transparent 1px) 0 0 / 46px 46px,
    linear-gradient(90deg, rgba(79,216,255,.045) 1px, transparent 1px) 0 0 / 46px 46px,
    radial-gradient(900px 520px at 75% -8%, rgba(123,75,255,.14), transparent 70%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 20%, #000 55%, transparent 100%);
          mask-image: radial-gradient(120% 80% at 50% 20%, #000 55%, transparent 100%);
} */
p {
  font-weight: 200;  font-size: clamp(1rem, 1.4vw, 1.1rem);   
     line-height: 1.3;letter-spacing: 0;color: #FFFFFF; line-height: 1.5
}
/* glowing gradient divider under the nav */
.nav { position: sticky;border: 0; }
/* .nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange-2), var(--purple), var(--cyan), transparent);
  opacity: .75;
}   */

/* glass cards with gradient border + neon hover */
.card { 
  backdrop-filter: blur(6px);
  transition: box-shadow .3s ease, transform .3s ease;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
} 
 

/* service cards: subtle glass panel + neon glow on hover (no transform, keeps reveal smooth) */
.service {
  border-radius: 16px;
  transition:
    opacity 1.1s cubic-bezier(.16,1,.3,1),
    transform 1.1s cubic-bezier(.16,1,.3,1),
    box-shadow .35s ease, background .35s ease;
}
 

/* map + its button */
.map { box-shadow: inset 0 0 0 1px rgba(79,216,255,.12); }
.map__btn { border-color: rgba(79,216,255,.3); box-shadow: 0 0 14px rgba(79,216,255,.25); }
 
/* footer top glow line */
.footer { position: relative; }
.footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--orange-2), transparent);
  opacity: .6;
}

@media (prefers-reduced-motion: reduce) {
  .card, .service { transition: none; }
}