:root{
  --bg: #07080d;
  --bg2:#0b0d16;
  --text:#eaf0ff;
  --muted: rgba(234,240,255,.72);
  --card: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.12);

  /* Feniks vibe: phoenix orange + deep tech */
  --accent:#ff6a00;
  --accent2:#ff2d55;

  --cta:#8b5cf6;
  --cta2:#a855f7;

  --radius: 18px;
  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --max: 1160px;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background: radial-gradient(1200px 700px at 70% 35%, rgba(139,92,246,.14), transparent 55%),
              radial-gradient(900px 550px at 15% 25%, rgba(255,106,0,.12), transparent 50%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}

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

.container{ width:min(var(--max), calc(100% - 40px)); margin:0 auto; }

/* ---------- HEADER + NAV ---------- */


.site-header{
  position:relative;
  min-height: 92vh;
  overflow:hidden;
  isolation:isolate;
}

/* starry / speckle overlay */
.site-header::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(2px 2px at 20% 25%, rgba(255,255,255,.16) 50%, transparent 52%),
    radial-gradient(1px 1px at 70% 45%, rgba(255,255,255,.14) 50%, transparent 52%),
    radial-gradient(1px 1px at 40% 65%, rgba(255,255,255,.12) 50%, transparent 52%),
    radial-gradient(2px 2px at 85% 70%, rgba(255,255,255,.10) 50%, transparent 52%),
    radial-gradient(1px 1px at 15% 80%, rgba(255,255,255,.12) 50%, transparent 52%);
  opacity:.55;
  z-index:-2;
  pointer-events:none;
}

.nav-wrap{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
  padding: 18px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand__logo{
  height:44px;
  width:auto;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.35));
}

/* Desktop nav */
.nav{
  display:flex;
  align-items:center;
  gap: 18px;
}
.nav a{
  font-weight: 700;
  letter-spacing:.02em;
  font-size: 13px;
  opacity:.9;
  padding: 10px 10px;
  border-radius: 999px;
  transition: .2s ease;
}
.nav a:hover{ background: rgba(255,255,255,.06); opacity:1; }

.nav__cta{
  border:1px solid rgba(255,106,0,.55);
  padding: 10px 14px !important;
  box-shadow: 0 10px 30px rgba(255,106,0,.10);
}

/* Mobile toggle */
.nav-toggle{
  display:none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width: 22px;
  height: 2px;
  background: rgba(255,255,255,.9);
  margin: 6px auto;
  border-radius:2px;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  width:min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  padding: 56px 0 46px;
  min-height: calc(92vh - 86px);
  display:grid;
  align-items:center;
}

.hero__accent{
  position:absolute;
  inset: -10% auto -10% -20%;
  width: 58vw;
  max-width: 820px;
  min-width: 420px;
  z-index:-1;

  background:
    linear-gradient(135deg, rgba(255,45,85,.90), rgba(255,106,0,.86)),
    radial-gradient(700px 700px at 30% 30%, rgba(255,255,255,.22), transparent 55%);
  clip-path: polygon(0% 0%, 76% 0%, 100% 42%, 82% 100%, 0% 100%, 10% 55%);
  filter: saturate(1.1) contrast(1.05);
  opacity: .95;
}

.hero__content{
  margin-left: auto;
  width: min(550px, 100%);
  padding: 20px 0;


}

.hero__kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  font-size: 13px;
  color: var(--muted);
}
.dot{
  width:10px; height:10px; border-radius:50%;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  box-shadow: 0 0 0 6px rgba(255,106,0,.12);
}

.hero h1{
  margin: 18px 0 12px;
  font-size: clamp(40px, 4.6vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.grad{
  background: linear-gradient(135deg, rgba(255,106,0,1), rgba(139,92,246,1));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero__sub{
  margin: 0 0 22px;
  max-width: 52ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.hero__actions{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-bottom: 22px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 800;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  transition: .2s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn--primary{
  border: 1px solid rgba(139,92,246,.55);
  background: linear-gradient(135deg, var(--cta), var(--cta2));
  box-shadow: 0 20px 45px rgba(139,92,246,.18);
}
.btn--ghost{
  background: rgba(255,255,255,.04);
}
.btn--full{ width:100%; }

.hero__stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.stat{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px 12px;
}
.stat__num{
  font-weight: 800;
  letter-spacing: .01em;
}
.stat__label{
  margin-top: 4px;
  color: var(--muted);
  font-size: 12.5px;
  line-height:1.35;
}

.scroll-hint{
  position:absolute;
  left:50%;
  bottom: 10px;
  transform: translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(234,240,255,.7);
  font-weight: 700;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
}
.scroll-hint i{
  animation: bob 1.2s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(3px); }
}

/* ---------- SECTIONS ---------- */
.section{
  padding: 76px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}

.grid-2{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items:start;
}

.section h2{
  font-size: clamp(28px, 3vw, 40px);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.lead{
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 18px;
}

.tick-list{
  list-style:none;
  padding:0;
  margin: 0 0 18px;
  display:grid;
  gap: 10px;
}
.tick-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color: rgba(234,240,255,.85);
}
.tick-list i{
  margin-top: 3px;
  color: rgba(255,106,0,.95);
}

.pill-row{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.pill{
  font-size: 12px;
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.82);
}

.card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow);
  padding: 20px;
}
.card--glass{
  background: radial-gradient(700px 300px at 30% 0%, rgba(255,106,0,.12), transparent 50%),
              rgba(255,255,255,.05);
}

.mini-cards{
  display:grid;
  gap: 12px;
  margin: 14px 0 16px;
}
.mini{
  display:flex;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.15);
}
.mini i{
  margin-top: 2px;
  color: rgba(139,92,246,.95);
}
.mini__title{ font-weight: 900; }
.mini__text{ color: var(--muted); font-size: 13px; line-height:1.55; margin-top: 2px; }

/* Services cards */
.section-head{
  margin-bottom: 18px;
}
.section-head p{
  color: var(--muted);
  margin: 6px 0 0;
  line-height:1.7;
}

.cards{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.svc{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 18px;
  transition: .18s ease;
}
.svc:hover{
  transform: translateY(-2px);
  border-color: rgba(255,106,0,.25);
}
.svc__icon{
  width: 44px; height: 44px;
  display:grid; place-items:center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(26px 26px at 30% 30%, rgba(255,106,0,.25), transparent 60%),
              rgba(0,0,0,.15);
  margin-bottom: 12px;
}
.svc h3{ margin: 0 0 8px; }
.svc p{ margin: 0 0 10px; color: var(--muted); line-height:1.65; font-size: 14px; }
.svc ul{
  margin:0;
  padding-left: 16px;
  color: rgba(234,240,255,.85);
  font-size: 13px;
  line-height:1.7;
}

/* Cases + contact */
.case-list{ display:grid; gap: 12px; margin-top: 14px; }
.case{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  padding: 16px;
}
.case__badge{
  display:inline-block;
  font-weight: 900;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(234,240,255,.86);
  margin-bottom: 10px;
}
.case h3{ margin: 0 0 6px; }
.case p{ margin: 0; color: var(--muted); line-height:1.65; }

.contact-card p{ color: var(--muted); line-height:1.7; margin-top: 6px; }
.contact-form{
  margin-top: 14px;
  display:grid;
  gap: 12px;
}
label span{
  display:block;
  font-size: 12px;
  font-weight: 900;
  color: rgba(234,240,255,.85);
  margin-bottom: 6px;
}
input, textarea{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  color: var(--text);
  padding: 12px 12px;
  outline:none;
}
input:focus, textarea:focus{
  border-color: rgba(139,92,246,.55);
  box-shadow: 0 0 0 5px rgba(139,92,246,.12);
}
.form-note{
  margin: 0;
  min-height: 18px;
  font-size: 13px;
  color: rgba(234,240,255,.78);
}
.contact-meta{
  margin-top: 14px;
  display:grid;
  gap: 8px;
  color: rgba(234,240,255,.78);
  font-size: 13px;
}
.contact-meta i{ color: rgba(255,106,0,.95); margin-right: 8px; }

/* Footer */
.footer{
  margin-top: 44px;
  padding: 18px 0 6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  color: rgba(234,240,255,.65);
  font-size: 13px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-links{ display:flex; gap: 12px; }
.footer-links a{ opacity:.85; }
.footer-links a:hover{ opacity:1; }


/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px){
  .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-2{ grid-template-columns: 1fr; }
  .hero__content{ margin-left: 0; }
  .hero__stats{ grid-template-columns: 1fr; }
  .hero__accent{
    width: 92vw;
    left: -38%;
    opacity: .92;
  }
}

@media (max-width: 760px){
  .nav-toggle{ display:block; }
  .nav{
    position:absolute;
    top: 70px;
    right: 20px;
    left: 20px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap: 8px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(10px);
  }
  .nav.open{ display:flex; }
  .nav a{ padding: 12px 12px; }

  .hero{ padding-top: 28px; }
  .scroll-hint{ display:none; }
  .footer{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  .scroll-hint i{ animation:none; }
}

/* =========================
   ABOUT / EXPERTISE SECTION
   ========================= */
.about-expertise{
  position: relative;
  overflow: hidden;
}

/* Green aurora-style wash similar to screenshot */
.about-expertise::before{
  content:"";
  position:absolute;
  inset:-10% -10% -10% -10%;
  background:
    radial-gradient(700px 320px at 20% 30%, rgba(34,197,94,.28), transparent 60%),
    radial-gradient(650px 320px at 80% 40%, rgba(16,185,129,.18), transparent 62%),
    radial-gradient(800px 380px at 55% 15%, rgba(34,197,94,.10), transparent 60%);
  filter: blur(2px);
  opacity: .9;
  pointer-events:none;
  z-index:0;
}

.about-expertise .container{
  position: relative;
  z-index: 1;
}

.about-expertise__head{
  text-align:center;
  margin-bottom: 26px;
}

.about-expertise__mark{
  width: 34px;
  height: 18px;
  margin: 0 auto 14px;
  position: relative;
  opacity: .95;
}
.about-expertise__mark::before,
.about-expertise__mark::after{
  content:"";
  position:absolute;
  inset:0;
  border: 3px solid rgba(255,106,0,.95);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  clip-path: polygon(0 100%, 35% 100%, 50% 40%, 65% 100%, 100% 100%, 100% 0, 0 0);
}
.about-expertise__mark::after{
  transform: translateX(10px);
  opacity:.65;
  border-color: rgba(139,92,246,.85);
}

.about-expertise__title{
  margin: 0 0 8px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: clamp(22px, 2.6vw, 34px);
}

.about-expertise__subtitle{
  margin: 0;
  color: rgba(234,240,255,.80);
  font-size: 16px;
  line-height: 1.6;
}

.about-expertise__grid{
  margin-top: 34px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}

.pillar{
  text-align:center;
  padding: 10px 10px 0;
}

.pillar__icon{
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  color: rgba(234,240,255,.92);
  opacity: .95;
  display:grid;
  place-items:center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
}
.pillar__icon svg{
  width: 40px;
  height: 40px;
}

.pillar__title{
  margin: 0 0 8px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 14px;
}

.pillar__text{
  margin: 0 auto;
  max-width: 28ch;
  color: rgba(234,240,255,.70);
  font-size: 13px;
  line-height: 1.6;
}

.about-expertise__copy{
  margin: 34px auto 0;
  text-align:center;
  max-width: 86ch;
  color: rgba(234,240,255,.78);
  line-height: 1.8;
}

.about-expertise__cta{
  margin-top: 18px;
}

/* Responsive */
@media (max-width: 980px){
  .about-expertise__grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 22px;
  }
}

@media (max-width: 560px){
  .about-expertise__grid{
    grid-template-columns: 1fr;
  }
  .pillar__text{ max-width: 40ch; }
}

/* =========================
   SERVICES (POLYGON TILES)
   ========================= */
.feniks-services{
  position: relative;
  overflow: hidden;
}

/* subtle diagonal texture like the screenshot */
.feniks-services::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.035) 0px,
      rgba(255,255,255,.035) 2px,
      transparent 2px,
      transparent 8px
    );
  opacity:.35;
  pointer-events:none;
  z-index:0;
}

.feniks-services .container{
  position: relative;
  z-index:1;
}

.feniks-services__head{
  text-align:center;
  margin-bottom: 30px;
}

.feniks-services__mark{
  width: 34px;
  height: 18px;
  margin: 0 auto 14px;
  position: relative;
  opacity: .95;
}
.feniks-services__mark::before,
.feniks-services__mark::after{
  content:"";
  position:absolute;
  inset:0;
  border: 3px solid rgba(255,106,0,.95);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  clip-path: polygon(0 100%, 35% 100%, 50% 40%, 65% 100%, 100% 100%, 100% 0, 0 0);
}
.feniks-services__mark::after{
  transform: translateX(10px);
  opacity:.65;
  border-color: rgba(139,92,246,.85);
}

.feniks-services__title{
  margin: 0;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: clamp(22px, 2.6vw, 34px);
}

.feniks-services__grid{
  margin-top: 40px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 36px;
  align-items: start;
}

/* card wrapper */
.svc-poly{
  position: relative;
  border-radius: 22px;
  padding: 0;
}

.svc-poly__link{
  display:block;
  text-decoration:none;
  color: inherit;
  outline: none;
}

.svc-poly__shape{
  position: relative;
  width: 100%;
  aspect-ratio: 1.12 / 1;   /* keeps the chunky “gem” proportion */
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  transform: translateZ(0);
}

/* faux “wireframe” overlay */
.svc-poly__shape::before{
  content:"";
  position:absolute;
  inset: -6%;
  background:
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: .16;
  transform: rotate(-10deg);
}

/* subtle polygon facets overlay */
.svc-poly__shape::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(500px 260px at 30% 22%, rgba(255,255,255,.28), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(225deg, rgba(0,0,0,.25), transparent 60%);
  mix-blend-mode: screen;
  opacity: .9;
}

/* the faceted “gem” silhouette */
.svc-poly__shape{
  clip-path: polygon(
    12% 12%, 75% 8%, 92% 30%, 88% 84%,
    58% 92%, 20% 82%, 10% 52%
  );
}

/* label */
.svc-poly__label{
  position:absolute;
  inset: 0;
  display:grid;
  place-items:center;
  text-align:center;
  padding: 0 18px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
  font-size: clamp(14px, 1.4vw, 18px);
  z-index:2;
}

/* description under the gem */
.svc-poly__desc{
  margin: 14px 6px 0;
  color: rgba(234,240,255,.72);
  line-height: 1.65;
  font-size: 14px;
  text-align:center;
}

/* Color themes */
.svc-poly--orange .svc-poly__shape{
  background:
    linear-gradient(135deg, rgba(255,106,0,1), rgba(255,45,85,.92)),
    radial-gradient(520px 260px at 30% 30%, rgba(255,255,255,.25), transparent 55%);
}
.svc-poly--pink .svc-poly__shape{
  background:
    linear-gradient(135deg, rgba(255,45,85,1), rgba(139,92,246,.96)),
    radial-gradient(520px 260px at 30% 30%, rgba(255,255,255,.25), transparent 55%);
}
.svc-poly--blue .svc-poly__shape{
  background:
    linear-gradient(135deg, rgba(59,130,246,1), rgba(20,184,166,.90)),
    radial-gradient(520px 260px at 30% 30%, rgba(255,255,255,.25), transparent 55%);
}

/* Hover interactions */
.svc-poly__shape{
  transition: transform .22s ease, filter .22s ease;
}
.svc-poly:hover .svc-poly__shape{
  transform: translateY(-6px) scale(1.01);
  filter: saturate(1.1) contrast(1.05);
}
.svc-poly:hover .svc-poly__desc{
  color: rgba(234,240,255,.86);
}

/* Optional: faint “frame” behind gem like screenshot */
.svc-poly::before{
  content:"";
  position:absolute;
  inset: -18px -18px auto -18px;
  height: calc(100% - 12px);
  border: 2px solid rgba(255,255,255,.10);
  border-radius: 26px;
  opacity: .28;
  transform: rotate(-2deg);
  pointer-events:none;
}

/* Responsive */
@media (max-width: 980px){
  .feniks-services__grid{
    grid-template-columns: 1fr;
    gap: 26px;
    max-width: 520px;
    margin-left:auto;
    margin-right:auto;
  }
  .svc-poly::before{
    inset: -14px -14px auto -14px;
  }
}

/* =========================
   FOOTER (MATCHES SCREENSHOT)
   ========================= */
.feniks-footer{
  position: relative;
  padding: 54px 0 46px;
  border-top: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  background: rgba(0,0,0,.35);
}

/* thin accent line at very top (like the screenshot) */
.feniks-footer::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 4px;
  background: linear-gradient(90deg, rgba(255,106,0,.85), rgba(139,92,246,.85), rgba(255,45,85,.85));
  opacity: .75;
}

/* subtle diagonal texture */
.feniks-footer::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.045) 0px,
      rgba(255,255,255,.045) 2px,
      transparent 2px,
      transparent 9px
    );
  opacity: .25;
  pointer-events:none;
}

.feniks-footer__inner{
  width: min(980px, calc(100% - 40px));
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.feniks-footer__brand{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  margin-bottom: 18px;
}

.feniks-footer__brand img{
  height: 52px;
  width: auto;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.55));
  opacity: .95;
}

.feniks-footer__social{
  display:flex;
  justify-content:center;
  gap: 18px;
  margin: 12px 0 18px;
}

.social-btn{
  width: 44px;
  height: 44px;
  display:grid;
  place-items:center;
  border-radius: 0; /* square buttons like screenshot */
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.85);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.social-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  background: #ffffff;
}

.social-btn i{
  font-size: 18px;
}

.feniks-footer__meta{
  margin-top: 6px;
  color: rgba(234,240,255,.78);
  font-size: 14px;
  line-height: 1.6;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap: wrap;
  gap: 10px;
}

.feniks-footer__meta .sep{
  opacity: .55;
}

.feniks-footer__link{
  color: rgba(139,92,246,.95);
  text-decoration: none;
  font-weight: 700;
}

.feniks-footer__link:hover{
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 520px){
  .feniks-footer{ padding: 42px 0 38px; }
  .feniks-footer__brand img{ height: 46px; }
  .social-btn{ width: 42px; height: 42px; }
}

/* ===========================================
   FENIKS PALETTE OVERRIDE (Paste at END)
   Palette: #bee9e8 #62b6cb #1b4965 #cae9ff #5fa8d3
   =========================================== */

:root{
  /* Brand Palette */
  --p-ice:   #bee9e8;
  --p-sky:   #62b6cb;
  --p-navy:  #1b4965;
  --p-mist:  #cae9ff;
  --p-blue:  #5fa8d3;

  /* Map palette to site tokens (overrides previous) */
  --bg:   #081a24;                 /* deep navy-tinted background */
  --bg2:  #06131b;
  --text: #eaf7ff;                 /* very light blue-white */
  --muted: rgba(202,233,255,.78);  /* mist */
  --card: rgba(27,73,101,.30);     /* translucent navy */
  --stroke: rgba(190,233,232,.20); /* ice */

  --accent:  var(--p-blue);
  --accent2: var(--p-sky);

  /* CTAs */
  --cta:  var(--p-blue);
  --cta2: var(--p-sky);

  /* Rounding / Shadow (more elegant) */
  --radius: 18px;
  --shadow: 0 24px 70px rgba(0,0,0,.55);

  /* Better scroll feel */
  scroll-behavior: smooth;
}

/* Background upgrade: elegant gradient + soft bloom */
body{
  background:
    radial-gradient(900px 520px at 70% 25%, rgba(95,168,211,.18), transparent 60%),
    radial-gradient(900px 520px at 20% 30%, rgba(98,182,203,.16), transparent 62%),
    radial-gradient(800px 520px at 50% 85%, rgba(190,233,232,.10), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
}

/* Links */
a{
  color: var(--p-mist);
}
a:hover{
  color: var(--p-ice);
}

/* NAV CTA button border + hover */
.nav__cta{
  border: 1px solid rgba(98,182,203,.55) !important;
  box-shadow: 0 12px 35px rgba(95,168,211,.16) !important;
}
.nav__cta:hover{
  background: rgba(202,233,255,.08);
}

/* Buttons: make all CTAs match palette */
.btn{
  border: 1px solid rgba(190,233,232,.18) !important;
  background: rgba(202,233,255,.06) !important;
  color: var(--text) !important;
}

.btn--primary{
  background: linear-gradient(135deg, var(--p-blue), var(--p-sky)) !important;
  border: 1px solid rgba(202,233,255,.22) !important;
  box-shadow: 0 20px 55px rgba(95,168,211,.22) !important;
}

.btn--ghost{
  background: rgba(202,233,255,.06) !important;
}
.btn:hover{
  transform: translateY(-1px);
}

/* Cards / panels */
.card, .svc, .case, .stat, .mini{
  background: rgba(27,73,101,.24) !important;
  border: 1px solid rgba(190,233,232,.16) !important;
}
.card--glass{
  background:
    radial-gradient(700px 340px at 30% 0%, rgba(98,182,203,.18), transparent 55%),
    rgba(27,73,101,.22) !important;
}

/* Inputs */
input, textarea{
  border: 1px solid rgba(190,233,232,.18) !important;
  background: rgba(6,19,27,.55) !important;
  color: var(--text) !important;
}
input:focus, textarea:focus{
  border-color: rgba(95,168,211,.70) !important;
  box-shadow: 0 0 0 5px rgba(95,168,211,.18) !important;
}

/* Hero accent: shift away from pink/orange into your blues */
.hero__accent{
  background:
    linear-gradient(135deg, rgba(98,182,203,.92), rgba(95,168,211,.88)),
    radial-gradient(700px 700px at 30% 30%, rgba(202,233,255,.18), transparent 55%) !important;
}

/* Kicker dot */
.dot{
  background: linear-gradient(135deg, var(--p-sky), var(--p-blue)) !important;
  box-shadow: 0 0 0 6px rgba(190,233,232,.12) !important;
}

/* Section divider line (subtle) */
.section{
  border-top: 1px solid rgba(190,233,232,.10) !important;
}

/* About/Expertise green aurora -> brand aurora */
.about-expertise::before{
  background:
    radial-gradient(700px 320px at 20% 30%, rgba(98,182,203,.22), transparent 60%),
    radial-gradient(650px 320px at 80% 40%, rgba(95,168,211,.18), transparent 62%),
    radial-gradient(800px 380px at 55% 15%, rgba(190,233,232,.12), transparent 60%) !important;
}

/* Services polygons: remap to palette */
.svc-poly--orange .svc-poly__shape,
.svc-poly--pink .svc-poly__shape,
.svc-poly--blue .svc-poly__shape{
  background:
    linear-gradient(135deg, rgba(27,73,101,1), rgba(95,168,211,.95)),
    radial-gradient(520px 260px at 30% 30%, rgba(202,233,255,.22), transparent 55%) !important;
}

/* Footer: match palette */
.feniks-footer::before{
  background: linear-gradient(90deg, var(--p-sky), var(--p-blue), var(--p-ice)) !important;
  opacity: .65 !important;
}
.social-btn{
  background: rgba(202,233,255,.92) !important;
  border: 1px solid rgba(27,73,101,.18) !important;
}
.feniks-footer__link{
  color: rgba(202,233,255,.95) !important;
}
.feniks-footer__link:hover{
  color: rgba(190,233,232,.95) !important;
}

.brand__logo, .feniks-footer__brand img{
  opacity: .98;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.55));
}

/* =========================
   TYPOGRAPHY POLISH
   ========================= */
:root{
  --tracking-tight: -0.03em;
  --tracking-wide:  0.04em;
}

/* Headings: tighter + elegant tracking */
h1, h2, h3{
  letter-spacing: var(--tracking-tight);
}

h2, .feniks-services__title, .about-expertise__title{
  letter-spacing: var(--tracking-wide); /* subtle agency-style spacing */
}

/* Improve reading rhythm */
p, li{
  line-height: 1.75;
}

/* Slightly reduce heavy uppercase harshness */
.feniks-services__title,
.about-expertise__title{
  opacity: .96;
}

/* =========================
   ELEGANT SPACING + SOFTER SHADOWS
   ========================= */
:root{
  --shadow-soft: 0 18px 55px rgba(0,0,0,.40);
  --shadow-soft2: 0 10px 35px rgba(0,0,0,.30);
}

/* Global section breathing room */
.section{
  padding: 92px 0 !important;
}

/* Hero spacing refinement */
.hero{
  padding: 64px 0 56px !important;
}
.hero__sub{
  margin-bottom: 26px !important;
}

/* Cards and panels: softer, less “heavy” */
.card, .svc, .case, .stat, .mini, .svc-poly__shape{
  box-shadow: var(--shadow-soft) !important;
}

/* Reduce “hard” borders slightly */
.card, .svc, .case, .stat, .mini{
  border-color: rgba(190,233,232,.14) !important;
}

/* Increase spacing between grids */
.cards{
  gap: 18px !important;
}
.grid-2{
  gap: 34px !important;
}
.feniks-services__grid{
  gap: 44px !important;
}

/* Buttons: slightly more padding for premium feel */
.btn{
  padding: 13px 18px !important;
  border-radius: 16px !important;
}

/* Responsive whitespace */
@media (max-width: 980px){
  .section{ padding: 72px 0 !important; }
  .hero{ padding: 46px 0 40px !important; }
}

.hero__accent{
  animation: accentShimmer 18s ease-in-out infinite alternate;
}

@keyframes accentShimmer{
  0%{ filter: saturate(1.00) contrast(1.00); }
  100%{ filter: saturate(1.08) contrast(1.04); }
}

@media (prefers-reduced-motion: reduce){
  .hero__accent{ animation: none !important; }
}



/* ===========================================
   FENIKS PALETTE OVERRIDE (Paste at END)
   Palette: #8ecae6 #219ebc #023047 #ffb703 #fb8500
   =========================================== */
:root{
  /* Brand Palette */
  --p-sky:   #8ecae6; /* light blue */
  --p-blue:  #219ebc; /* primary blue */
  --p-navy:  #023047; /* deep navy */
  --p-gold:  #ffb703; /* gold */
  --p-amber: #fb8500; /* orange */

  /* Map to site tokens */
  --bg:   #041822;                 /* very deep navy */
  --bg2:  #03131b;
  --text: #eaf6ff;                 /* cool white */
  --muted: rgba(142,202,230,.78);  /* sky muted */
  --card: rgba(2,48,71,.42);       /* navy glass */
  --stroke: rgba(142,202,230,.18); /* subtle border */

  /* Accent + CTA */
  --accent:  var(--p-gold);
  --accent2: var(--p-amber);
  --cta:     var(--p-blue);
  --cta2:    var(--p-sky);

  /* Softer elegant shadow */
  --shadow: 0 18px 55px rgba(0,0,0,.42);
}

/* Body background: elegant navy + blue bloom */
body{
  background:
    radial-gradient(900px 520px at 70% 25%, rgba(33,158,188,.20), transparent 60%),
    radial-gradient(900px 520px at 20% 30%, rgba(142,202,230,.14), transparent 62%),
    radial-gradient(700px 480px at 50% 85%, rgba(255,183,3,.09), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2)) !important;
  color: var(--text) !important;
}

/* Links */
a{ color: rgba(142,202,230,.92); }
a:hover{ color: rgba(255,183,3,.95); }

/* Header nav CTA */
.nav__cta{
  border: 1px solid rgba(255,183,3,.55) !important;
  box-shadow: 0 12px 35px rgba(255,183,3,.10) !important;
}
.nav__cta:hover{
  background: rgba(255,183,3,.08) !important;
}

/* Buttons */
.btn{
  border: 1px solid rgba(142,202,230,.18) !important;
  background: rgba(142,202,230,.06) !important;
  color: var(--text) !important;
}
.btn--primary{
  background: linear-gradient(135deg, var(--p-blue), var(--p-sky)) !important;
  border: 1px solid rgba(142,202,230,.22) !important;
  box-shadow: 0 20px 55px rgba(33,158,188,.22) !important;
}
.btn--ghost{
  background: rgba(2,48,71,.25) !important;
}
.btn:hover{ transform: translateY(-1px); }

/* Cards / panels */
.card, .svc, .case, .stat, .mini{
  background: rgba(2,48,71,.30) !important;
  border: 1px solid rgba(142,202,230,.16) !important;
  box-shadow: var(--shadow) !important;
}

/* Inputs */
input, textarea{
  border: 1px solid rgba(142,202,230,.18) !important;
  background: rgba(3,19,27,.55) !important;
  color: var(--text) !important;
}
input:focus, textarea:focus{
  border-color: rgba(33,158,188,.70) !important;
  box-shadow: 0 0 0 5px rgba(33,158,188,.18) !important;
}

/* Hero accent polygon */
.hero__accent{
  background:
    linear-gradient(135deg, rgba(255,183,3,.92), rgba(251,133,0,.86)),
    radial-gradient(700px 700px at 30% 30%, rgba(142,202,230,.14), transparent 55%) !important;
}

/* Kicker dot */
.dot{
  background: linear-gradient(135deg, var(--p-gold), var(--p-amber)) !important;
  box-shadow: 0 0 0 6px rgba(255,183,3,.12) !important;
}

/* Section borders */
.section{
  border-top: 1px solid rgba(142,202,230,.10) !important;
}

/* About “aurora” wash */
.about-expertise::before{
  background:
    radial-gradient(700px 320px at 20% 30%, rgba(33,158,188,.20), transparent 60%),
    radial-gradient(650px 320px at 80% 40%, rgba(142,202,230,.14), transparent 62%),
    radial-gradient(800px 380px at 55% 15%, rgba(255,183,3,.10), transparent 60%) !important;
}

/* Services “gems” remap */
.svc-poly--orange .svc-poly__shape,
.svc-poly--pink .svc-poly__shape,
.svc-poly--blue .svc-poly__shape{
  background:
    linear-gradient(135deg, rgba(2,48,71,1), rgba(33,158,188,.95)),
    radial-gradient(520px 260px at 30% 30%, rgba(142,202,230,.20), transparent 55%) !important;
}

/* Service label pop */
.svc-poly__label{
  color: rgba(234,246,255,.94) !important;
}
.svc-poly:hover .svc-poly__shape{
  filter: saturate(1.08) contrast(1.04) !important;
}

/* Footer accent line + link */
.feniks-footer::before{
  background: linear-gradient(90deg, var(--p-blue), var(--p-gold), var(--p-amber)) !important;
  opacity: .70 !important;
}
.feniks-footer__link{
  color: rgba(255,183,3,.95) !important;
}
.feniks-footer__link:hover{
  color: rgba(251,133,0,.95) !important;
}

/* Social buttons match palette */
.social-btn{
  background: rgba(142,202,230,.92) !important;
  border: 1px solid rgba(2,48,71,.25) !important;
  color: rgba(2,48,71,.92) !important;
}
.social-btn:hover{
  box-shadow: 0 18px 40px rgba(0,0,0,.35) !important;
}

.about-expertise__mark::before,
.feniks-services__mark::before{
  border-color: rgba(255,183,3,.95) !important;
}
.about-expertise__mark::after,
.feniks-services__mark::after{
  border-color: rgba(251,133,0,.85) !important;
}


/* =========================
   HEADER LOGO SIZE UPGRADE
   ========================= */

/* Desktop / default */
.brand__logo{
  height: 64px !important;   /* was ~44px */
  max-height: 72px;
  width: auto;
}

/* Slightly larger on wide screens */
@media (min-width: 1200px){
  .brand__logo{
    height: 72px !important;
  }
}

/* Tablet */
@media (max-width: 980px){
  .brand__logo{
    height: 56px !important;
  }
}

/* Mobile */
@media (max-width: 520px){
  .brand__logo{
    height: 48px !important;
  }
}


.nav-wrap{
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}


/* =========================
   NAV TYPOGRAPHY REBALANCE
   ========================= */

/* Desktop navigation */
.nav a{
  font-size: 12.5px !important;   /* was ~13–14px */
  letter-spacing: 0.12em;         /* refined, premium spacing */
  font-weight: 700;
  opacity: 0.85;
}

/* Nav CTA button text */
.nav__cta{
  font-size: 12px !important;
  letter-spacing: 0.14em;
  padding: 10px 14px !important;
}

/* Hover clarity */
.nav a:hover{
  opacity: 1;
}

/* Tablet */
@media (max-width: 980px){
  .nav a{
    font-size: 13px !important;  /* slightly larger for tap clarity */
    letter-spacing: 0.10em;
  }
}

/* Mobile menu */
@media (max-width: 760px){
  .nav a{
    font-size: 14px !important;  /* mobile readability */
    letter-spacing: 0.08em;
  }
}


/* =========================
   SERVICES SIZE & TEXT FIT
   ========================= */

/* Overall grid spacing */
.feniks-services__grid{
  gap: 56px !important;              /* more breathing room */
}

/* Increase overall card footprint */
.svc-poly__shape{
  aspect-ratio: 1.25 / 1 !important; /* taller card */
  min-height: 280px;                 /* ensures text never feels tight */
}

/* Improve internal padding for text */
.svc-poly__label{
  padding: 0 28px !important;
  font-size: clamp(16px, 1.6vw, 20px) !important;
  line-height: 1.25;
}

/* Description spacing & readability */
.svc-poly__desc{
  margin-top: 18px !important;
  padding: 0 18px;
  font-size: 15px !important;
  line-height: 1.75;
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
}

/* Make hover feel smoother (no jump) */
.svc-poly:hover .svc-poly__shape{
  transform: translateY(-4px) scale(1.01) !important;
}

/* Desktop refinement */
@media (min-width: 1200px){
  .svc-poly__shape{
    min-height: 320px;
  }
}

/* Tablet layout */
@media (max-width: 980px){
  .feniks-services__grid{
    gap: 44px !important;
  }
  .svc-poly__shape{
    min-height: 300px;
  }
}

/* Mobile: single column but still generous */
@media (max-width: 560px){
  .svc-poly__shape{
    min-height: 260px;
  }
  .svc-poly__label{
    font-size: 16px !important;
  }
}

/* =========================
   SCROLL TO TOP BUTTON
   ========================= */



/* =========================
   FLOATING BUTTONS: FIX POSITION + CLICK
   ========================= */

/* Wrapper stays fixed and always clickable */
.floating-actions{
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  z-index: 2147483647 !important;   /* above everything */
  pointer-events: auto !important;
}

/* Reset any earlier positioning that breaks responsiveness */
.fab,
.scroll-top{
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

/* Ensure overlays can't block clicks */
.hero__accent,
.site-header::before,
.site-header::after{
  pointer-events: none !important;
}

/* Scroll-to-top visibility (keep your .show toggle working) */
.scroll-top{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;

  background: rgba(255,255,255,.92);
  color: #023047;
  font-size: 20px;
  font-weight: 900;

  border: 1px solid rgba(142,202,230,.28);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);

  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  transform: translateY(10px);
}

.scroll-top.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Chat bubble sizing */
.fab{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(142,202,230,.18);
  background: rgba(0,0,0,.35);
  color: #eaf6ff;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  cursor: pointer;
}

/* Mobile tuning */
@media (max-width: 520px){
  .floating-actions{
    right: 12px !important;
    bottom: 12px !important;
    gap: 10px !important;
  }
  .scroll-top{ width: 44px; height: 44px; font-size: 18px; }
  .fab{ width: 48px; height: 48px; }
}


/* Let's Talk Section - v1 */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-note{ margin-top:10px; min-height:18px; font-size:13px; }
.form-note[data-type="success"]{ color:#8ecae6; }
.form-note[data-type="error"]{ color:#fb8500; }
.form-note[data-type="info"]{ color:rgba(142,202,230,.85); }


/* Let's Talk Section - v2 */