/* =========================================================
   CONTACT — Premium Visual Theme (From scratch)
   Scoped to contact page only
   ========================================================= */


/* =========================
   CONTACT HERO — COMPACT RESPONSIVE
   ========================= */

:root{
  --hp-bg: #f7faff;
  --hp-surface: rgba(255,255,255,.80);
  --hp-surface-2: rgba(255,255,255,.92);
  --hp-stroke: rgba(37,99,235,.10);
  --hp-stroke-strong: rgba(37,99,235,.16);
  --hp-ink: #081225;
  --hp-muted: rgba(8,18,37,.68);
  --hp-blue: #2563eb;
  --hp-blue-2: #60a5fa;
  --hp-shadow: 0 22px 60px rgba(8,18,37,.08);
  --hp-shadow-soft: 0 12px 28px rgba(8,18,37,.05);
  --hp-radius: 28px;
}

/* =========================
   HERO PRIME
   ========================= */
:root{
  --ph-bg:#f8fbff;
  --ph-bg-2:#eef5ff;
  --ph-bg-3:#fdfcff;
  --ph-ink:#0b1220;
  --ph-muted:#5f6f8a;
  --ph-line:rgba(17, 92, 255, .10);
  --ph-blue:#1463ff;
  --ph-blue-2:#4d8dff;
  --ph-cyan:#8fd3ff;
  --ph-violet:#c9b7ff;
  --ph-shadow:0 24px 70px rgba(20,99,255,.10);
  --ph-shadow-soft:0 14px 34px rgba(20,99,255,.06);
}

/* =========================
   HERO
   ========================= */
.proHero{
  position: relative;
  overflow: hidden;
  min-height: clamp(500px, 74vh, 760px);
  display: flex;
  align-items: center;
  padding: 42px 0;
  background:
    linear-gradient(180deg, var(--ph-bg) 0%, #ffffff 100%);
  isolation: isolate;
  --mx: 50%;
  --my: 40%;
}

.proHero__bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* ===== Blobs / Orbs ===== */
.proHero__orb{
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: .95;
  will-change: transform;
}

.proHero__orb--1{
  width: 460px;
  height: 460px;
  top: -130px;
  right: -70px;
  background:
    radial-gradient(circle, rgba(77,141,255,.22) 0%, rgba(77,141,255,0) 68%);
  animation: proFloatA 12s ease-in-out infinite;
}

.proHero__orb--2{
  width: 400px;
  height: 400px;
  left: -90px;
  bottom: -110px;
  background:
    radial-gradient(circle, rgba(143,211,255,.22) 0%, rgba(143,211,255,0) 68%);
  animation: proFloatB 14s ease-in-out infinite;
}

.proHero__orb--3{
  width: 360px;
  height: 360px;
  top: 28%;
  left: 48%;
  transform: translateX(-50%);
  background:
    radial-gradient(circle, rgba(201,183,255,.12) 0%, rgba(201,183,255,0) 70%);
  animation: proFloatC 16s ease-in-out infinite;
}

/* ===== Waves ===== */
.proHero__waves{
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .75;
}

.proHero__waves svg{
  width: 100%;
  height: 100%;
}

.proWave{
  transform-origin: center;
  will-change: transform;
}

.proWave--1{
  fill: rgba(77,141,255,.08);
  animation: proWaveDrift1 15s ease-in-out infinite;
}

.proWave--2{
  fill: rgba(143,211,255,.10);
  animation: proWaveDrift2 18s ease-in-out infinite;
}

/* ===== Irregular Shapes ===== */
.proHero__shapes{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.proShape{
  position: absolute;
  background: rgba(255,255,255,.24);
  border: 1px solid rgba(20,99,255,.09);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  will-change: transform;
}

.proShape--1{
  width: 150px;
  height: 150px;
  top: 16%;
  right: 12%;
  clip-path: polygon(18% 0%, 100% 20%, 84% 100%, 0% 82%);
  border-radius: 28px;
  animation: proShapeFloat1 13s ease-in-out infinite;
}

.proShape--2{
  width: 110px;
  height: 110px;
  bottom: 18%;
  left: 9%;
  clip-path: polygon(14% 22%, 74% 0%, 100% 68%, 34% 100%, 0% 58%);
  border-radius: 24px;
  animation: proShapeFloat2 15s ease-in-out infinite;
}

.proShape--3{
  width: 72px;
  height: 72px;
  top: 22%;
  left: 18%;
  border-radius: 24px;
  transform: rotate(18deg);
  animation: proShapeFloat3 11s ease-in-out infinite;
}

/* ===== Grid / Noise / Glow ===== */
.proHero__grid{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(20,99,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20,99,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 45%, rgba(0,0,0,.9), transparent 78%);
  opacity: .55;
}

.proHero__noise{
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(rgba(0,0,0,.08) 1px, transparent 1px);
  background-size: 7px 7px;
  opacity: .03;
}

.proHero__glow{
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(420px 220px at var(--mx) var(--my), rgba(255,255,255,.22), transparent 70%);
  opacity: .75;
  transition: background-position .2s ease;
}

/* ===== Content ===== */
.proHero__inner{
  position: relative;
  z-index: 3;
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.proHero__content{
  width: 100%;
  max-width: 980px;
  text-align: center;
}

.proHero__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(20,99,255,.10);
  background: rgba(255,255,255,.78);
  box-shadow: var(--ph-shadow-soft);
  color: #586885;
  font-size: .80rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.proHero__dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ph-blue);
  box-shadow: 0 0 0 6px rgba(20,99,255,.12);
  animation: proPulse 2.2s ease-in-out infinite;
}

.proHero__title{
  margin: 0 auto;
  max-width: none;
  text-align: center;
  font-size: clamp(2.55rem, 5.8vw, 5.9rem);
  line-height: 1.20;
  letter-spacing: -.06em;
  font-weight: 800;
  color: var(--ph-ink);
  text-wrap: balance;
  text-shadow:
    0 1px 0 rgba(255,255,255,.65),
    0 18px 40px rgba(11,18,32,.05);
}

.proHero__title span{
  position: relative;
  display: inline-block;
  padding-inline: .04em;
  background: linear-gradient(
    90deg,
    #0f5cff 0%,
    #3379f9 38%,
    #306bda 80%,
    #0c5ae1 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.proHero__title span::after{
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: .08em;
  height: .16em;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(15,92,255,.14),
    rgba(63,130,255,.24),
    rgba(121,169,255,.14)
  );
  z-index: -1;
  filter: blur(2px);
}

.proHero__lead{
  margin: 18px auto 0;
  max-width: 58ch;
  color: var(--ph-muted);
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.95;
}

.proHero__actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}

.proHero__btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 156px;
  min-height: 54px;
  padding: 0 20px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  font-size: .96rem;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}

.proHero__btn:hover{
  transform: translateY(-2px);
}

.proHero__btn--primary{
  color: #fff;
  background: linear-gradient(90deg, var(--ph-blue) 0%, #2e7aff 50%, #5ea2ff 100%);
  box-shadow: 0 16px 36px rgba(20,99,255,.20);
  overflow: hidden;
}

.proHero__btn--primary::before{
  content: "";
  position: absolute;
  inset: -120% auto -120% -35%;
  width: 36%;
  transform: rotate(22deg);
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.52), rgba(255,255,255,0));
  animation: proSweep 3.4s ease-in-out infinite;
}

.proHero__btn--ghost{
  color: var(--ph-blue);
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(20,99,255,.10);
  backdrop-filter: blur(10px);
}

.proHero__chips{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

.proHero__chips span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(20,99,255,.10);
  background: rgba(255,255,255,.74);
  color: #31425e;
  font-size: .90rem;
  font-weight: 800;
  backdrop-filter: blur(10px);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.proHero__chips span:hover{
  transform: translateY(-2px);
  border-color: rgba(20,99,255,.18);
  box-shadow: var(--ph-shadow-soft);
}

/* ===== Reveal ===== */
.reveal-up{
  opacity: 0;
  transform: translateY(20px);
  animation: revealUp .8s ease forwards;
}

.delay-1{ animation-delay: .08s; }
.delay-2{ animation-delay: .16s; }
.delay-3{ animation-delay: .24s; }
.delay-4{ animation-delay: .32s; }

/* ===== Animations ===== */
@keyframes revealUp{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes proFloatA{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(24px,20px,0) scale(1.06); }
}

@keyframes proFloatB{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(-18px,16px,0) scale(1.05); }
}

@keyframes proFloatC{
  0%,100%{ transform: translate3d(-50%,0,0) scale(1); }
  50%{ transform: translate3d(-46%,14px,0) scale(1.04); }
}

@keyframes proWaveDrift1{
  0%,100%{ transform: translateX(0) translateY(0); }
  50%{ transform: translateX(-20px) translateY(10px); }
}

@keyframes proWaveDrift2{
  0%,100%{ transform: translateX(0) translateY(0); }
  50%{ transform: translateX(18px) translateY(-8px); }
}

@keyframes proShapeFloat1{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-14px) rotate(6deg); }
}

@keyframes proShapeFloat2{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(12px) rotate(-8deg); }
}

@keyframes proShapeFloat3{
  0%,100%{ transform: rotate(18deg) translateY(0); }
  50%{ transform: rotate(26deg) translateY(-10px); }
}

@keyframes proPulse{
  0%,100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.12); opacity: .8; }
}

@keyframes proSweep{
  0%,100%{ transform: translateX(-80%) rotate(22deg); opacity: 0; }
  35%{ transform: translateX(280%) rotate(22deg); opacity: .48; }
  60%,100%{ opacity: 0; }
}

/* ===== Responsive ===== */
@media (max-width: 768px){
  .proHero{
    min-height: auto;
    padding: 26px 0 40px;
  }

  .proHero__title{
    white-space: normal;
    font-size: clamp(2.15rem, 10vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: -.05em;
  }

  .proHero__title span::after{
    bottom: .05em;
    height: .14em;
  }

  .proHero__lead{
    max-width: 100%;
    line-height: 1.86;
  }

  .proHero__actions{
    flex-direction: column;
    align-items: stretch;
  }

  .proHero__btn{
    width: 100%;
  }

  .proHero__eyebrow{
    font-size: .72rem;
    letter-spacing: .08em;
  }

  .proHero__chips{
    gap: 8px;
  }

  .proHero__chips span{
    font-size: .84rem;
    min-height: 38px;
    padding: 0 12px;
  }

  .proShape--1,
  .proShape--2{
    opacity: .6;
  }
}

@media (prefers-reduced-motion: reduce){
  .proHero__orb,
  .proWave,
  .proShape,
  .proHero__dot,
  .proHero__btn--primary::before,
  .reveal-up{
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* =========================
   Contact Connect Section
   ========================= */

.cConnect{
  --cc-bg:#f4f8ff;
  --cc-bg-soft:#eef5ff;
  --cc-surface:rgba(255,255,255,.76);
  --cc-surface-2:rgba(255,255,255,.92);
  --cc-border:rgba(43,111,243,.12);
  --cc-text:#10233f;
  --cc-text-2:#325277;
  --cc-text-3:#5f7da3;
  --cc-blue:#1654c7;
  --cc-blue-2:#2b6ff3;

  position:relative;
  overflow:hidden;
  padding:110px 0;
  background:linear-gradient(180deg, #f8fbff 0%, var(--cc-bg) 100%);
  isolation:isolate;
}

.cConnect::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image: radial-gradient(rgba(16,35,63,.06) .7px, transparent .7px);
  background-size:14px 14px;
  opacity:.16;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.45), transparent 88%);
}

.cConnect__bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.cConnect__orb{
  position:absolute;
  border-radius:50%;
  filter:blur(40px);
  opacity:.55;
}

.cConnect__orb--1{
  width:300px;
  height:300px;
  top:40px;
  right:10%;
  background:rgba(79,140,255,.18);
}

.cConnect__orb--2{
  width:260px;
  height:260px;
  left:10%;
  bottom:70px;
  background:rgba(79,215,255,.12);
}

.cConnect__orb--3{
  width:250px;
  height:250px;
  left:45%;
  top:18%;
  background:rgba(139,92,246,.10);
}

.cConnect__wrap{
  position:relative;
  z-index:2;
}

.cConnect__head{
  max-width:860px;
  margin:0 auto 40px;
  text-align:center;
}

.cConnect__eyebrow{
  margin:0 0 12px;
  color:var(--cc-text-3);
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.cConnect__title{
  margin:0 0 19px;
  color:var(--cc-text);
  font-size:clamp(2rem, 4vw, 4rem);
  line-height:1.30;
  font-weight:900;
}

.cConnect__desc{
  margin:0 auto;
  max-width:720px;
  color:var(--cc-text-2);
  font-size:1.05rem;
  line-height:1.9;
}

.cConnect__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  perspective:1400px;
}

.cConnectCard{
  --brand:#2b6ff3;
  --brand-soft:rgba(43,111,243,.12);
  --brand-glow:rgba(43,111,243,.16);
  --rx:0deg;
  --ry:0deg;
  --mx:50%;
  --my:50%;

  position:relative;
  min-height:150px;
  overflow:hidden;
  border-radius:28px;
  text-decoration:none;
  color:inherit;
  transform-style:preserve-3d;
  transform:perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:
    transform .18s linear,
    box-shadow .32s ease,
    border-color .32s ease;
  background:linear-gradient(135deg, rgba(255,255,255,.90), rgba(247,251,255,.74));
  border:1px solid var(--cc-border);
  box-shadow:
    0 18px 44px rgba(16,35,63,.08),
    inset 0 0 0 1px rgba(255,255,255,.28);
  backdrop-filter:blur(14px);
  isolation:isolate;
}

.cConnectCard::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(220px 220px at var(--mx) var(--my), var(--brand-glow), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.16), transparent 38%, transparent 72%, rgba(255,255,255,.08));
  opacity:.95;
}

.cConnectCard::after{
  content:"";
  position:absolute;
  inset:auto auto -48% -8%;
  width:170px;
  height:170px;
  border-radius:50%;
  background:radial-gradient(circle, var(--brand-soft) 0%, rgba(255,255,255,0) 70%);
  z-index:0;
  pointer-events:none;
}

.cConnectCard:hover{
  border-color:rgba(43,111,243,.22);
  box-shadow:
    0 28px 70px rgba(16,35,63,.14),
    0 0 34px rgba(43,111,243,.08);
}

.cConnectCard__inner{
  position:relative;
  z-index:2;
  min-height:inherit;
  padding:24px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.cConnectCard__text{
  display:flex;
  flex-direction:column;
  gap:7px;
  text-align:right;
}

.cConnectCard__text small{
  color:var(--cc-text-3);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.cConnectCard__text strong{
  color:var(--cc-text);
  font-size:1.08rem;
  font-weight:900;
  line-height:1.2;
}

.cConnectCard__text span{
  color:var(--cc-text-2);
  font-size:.98rem;
  line-height:1.7;
}

.cConnectCard__iconWrap{
  position:relative;
  width:84px;
  height:84px;
  flex:0 0 auto;
  transform-style:preserve-3d;
  transition:transform .35s ease;
}

.cConnectCard:hover .cConnectCard__iconWrap{
  transform:translateY(-4px) rotateZ(-4deg);
}

.cConnectCard__iconShadow,
.cConnectCard__iconFace{
  position:absolute;
  inset:0;
  border-radius:24px;
}

.cConnectCard__iconShadow{
  transform:translate3d(-8px, 10px, -22px);
  background:linear-gradient(135deg, rgba(43,111,243,.18), rgba(79,140,255,.10));
  border:1px solid rgba(43,111,243,.10);
  box-shadow:0 20px 30px rgba(16,35,63,.08);
}

.cConnectCard__iconFace{
  display:grid;
  place-items:center;
  transform:translateZ(26px);
  background:linear-gradient(135deg, rgba(234,242,255,.96), rgba(191,213,255,.72));
  border:1px solid rgba(43,111,243,.10);
  box-shadow:
    0 18px 28px rgba(16,35,63,.10),
    inset 0 1px 0 rgba(255,255,255,.72);
  color:var(--brand);
}

.cConnectCard__iconFace i{
  font-size:2rem;
  transition:transform .35s ease, filter .35s ease;
}

.cConnectCard:hover .cConnectCard__iconFace i{
  transform:scale(1.08) translateY(-2px);
  filter:drop-shadow(0 6px 14px rgba(43,111,243,.25));
}

.is-linkedin{
  --brand:#0a66c2;
  --brand-soft:rgba(10,102,194,.14);
  --brand-glow:rgba(10,102,194,.18);
}

.is-whatsapp{
  --brand:#25d366;
  --brand-soft:rgba(37,211,102,.14);
  --brand-glow:rgba(37,211,102,.18);
}

.is-facebook{
  --brand:#1877f2;
  --brand-soft:rgba(24,119,242,.14);
  --brand-glow:rgba(24,119,242,.18);
}

.is-instagram{
  --brand:#c13584;
  --brand-soft:rgba(193,53,132,.12);
  --brand-glow:rgba(193,53,132,.16);
}

.is-tiktok{
  --brand:#111111;
  --brand-soft:rgba(17,17,17,.10);
  --brand-glow:rgba(0,242,234,.12);
}

.is-youtube{
  --brand:#ff0000;
  --brand-soft:rgba(255,0,0,.12);
  --brand-glow:rgba(255,0,0,.14);
}

/* Reveal */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .75s ease, transform .75s ease;
}

[data-reveal].is-in{
  opacity:1;
  transform:translateY(0);
}

/* Responsive */
@media (max-width: 991px){
  .cConnect{
    padding:90px 0;
  }

  .cConnect__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .cConnect{
    padding:72px 0;
  }

  .cConnect__title{
    font-size:clamp(1.8rem, 8vw, 2.8rem);
  }

  .cConnect__desc{
    font-size:1rem;
    line-height:1.8;
  }

  .cConnect__grid{
    grid-template-columns:1fr;
  }

  .cConnectCard{
    min-height:132px;
    border-radius:24px;
  }

  .cConnectCard__inner{
    padding:20px 18px;
  }

  .cConnectCard__iconWrap{
    width:76px;
    height:76px;
  }

  .cConnectCard__iconFace i{
    font-size:1.8rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .cConnect *,
  [data-reveal]{
    animation:none !important;
    transition:none !important;
  }

  [data-reveal]{
    opacity:1 !important;
    transform:none !important;
  }
}

/* Reveal */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .75s ease,
    transform .75s ease;
}

[data-reveal].is-in{
  opacity:1;
  transform:translateY(0);
}

/* Responsive */
@media (max-width: 1200px){
  .ctQuickRail{
    display:none;
  }
}

@media (max-width: 991px){
  .ctSocial{
    padding:90px 0;
  }

  .ctSocial__grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 640px){
  .ctSocial{
    padding:72px 0;
  }

  .ctSocial__title{
    font-size:clamp(1.8rem, 8vw, 2.8rem);
  }

  .ctSocial__desc{
    font-size:1rem;
    line-height:1.8;
  }

  .ctSocial__grid{
    grid-template-columns:1fr;
  }

  .ctSocialCard{
    min-height:132px;
    border-radius:24px;
  }

  .ctSocialCard__content{
    padding:20px 18px;
  }

  .ctSocialCard__iconWrap{
    width:76px;
    height:76px;
  }

  .ctSocialCard__iconFace i{
    font-size:1.8rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .ctSocial *,
  [data-reveal]{
    animation:none !important;
    transition:none !important;
  }

  [data-reveal]{
    opacity:1 !important;
    transform:none !important;
  }
}



/* =========================
   QUICK CARDS (separate section)
   ========================= */
.cQuickSection{
  padding: 6px 0 46px;
  position: relative;
  z-index: 1;
}

.cQuickGrid{
  max-width: 72rem;
  margin-inline: auto;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.cQuick{
  position: relative;
  border-radius: var(--r);
  padding: 16px;
  text-decoration:none;
  color: inherit;

  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.68)) padding-box,
    linear-gradient(135deg, rgba(59,130,246,.35), rgba(168,85,247,.26), rgba(34,211,238,.18)) border-box;

  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  isolation: isolate;

  transition: transform 220ms ease, box-shadow 220ms ease;
  transform: translateZ(0);
}

.cQuick::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 20% 20%, rgba(59,130,246,.16), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(168,85,247,.12), transparent 60%);
  opacity:.75;
  filter: blur(22px);
  transform: scale(.98);
  transition: transform 280ms ease, opacity 280ms ease;
  z-index: 0;
  pointer-events:none;
}

.cQuick:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 34px 110px rgba(11,18,32,.14);
}
.cQuick:hover::after{
  transform: scale(1.06);
  opacity:.95;
}

.cQuick__k{ display:block; font-weight: 950; opacity:.9; position: relative; z-index: 1; }
.cQuick__v{ display:block; margin-top: 8px; font-weight: 900; position: relative; z-index: 1; }
.cQuick__hint{ display:block; margin-top: 10px; opacity:.72; font-size:.92rem; position: relative; z-index: 1; }

.cQuick--static{ cursor: default; }
.cQuick--static:hover{ transform:none; box-shadow: var(--shadow); }

/* =========================
   FORM + SIDE GRID
   ========================= */
.cSection{ padding: 64px 0; position: relative; z-index: 1; }

.cGrid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
  align-items: start;
}

.cCard, .cSide__card{
  border-radius: 26px;
  padding: 18px;
  border: 1px solid transparent;

  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72)) padding-box,
    linear-gradient(135deg, rgba(59,130,246,.30), rgba(168,85,247,.22), rgba(34,211,238,.16)) border-box;

  box-shadow: 0 28px 90px rgba(11,18,32,.10);
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
}

.cCard::before, .cSide__card::before{
  content:"";
  position:absolute;
  inset:-50%;
  background:
    radial-gradient(circle at 18% 22%, rgba(59,130,246,.12), transparent 55%),
    radial-gradient(circle at 85% 78%, rgba(168,85,247,.10), transparent 60%);
  filter: blur(28px);
  opacity: .85;
  pointer-events:none;
}

.cCard__head{ position: relative; z-index: 1; margin-bottom: 12px; }

.cForm{ display:grid; gap: 12px; position: relative; z-index: 1; }
.cRow{ display:grid; gap: 8px; }
.cRow--2{ grid-template-columns: 1fr 1fr; gap: 12px; }

.cLabel{ font-weight: 950; opacity:.9; }

.cInput{
  width:100%;
  border-radius: 16px;
  padding: 12px 12px;
  border: 1px solid rgba(11,18,32,.14);
  background: rgba(255,255,255,.90);
  outline: none;

  transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.cInput:focus{
  border-color: rgba(59,130,246,.40);
  box-shadow: 0 0 0 5px rgba(59,130,246,.16);
  transform: translateY(-1px);
}

.cTextarea{ resize: vertical; min-height: 150px; }
.cActions{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 6px; }

.cNote{ margin: 10px 0 0; opacity:.72; font-size:.92rem; }

.cErr{ color:#b42318; min-height: 1.1em; display:block; font-size:.92rem; opacity:.98; }
.cMeta{ display:flex; justify-content: space-between; align-items:center; gap:10px; }
.cCount{ opacity: .72; font-size:.92rem; }

/* invalid highlight (JS adds .is-touched) */
.cForm.is-touched .cInput.is-invalid{
  border-color: rgba(180,35,24,.45);
  box-shadow: 0 0 0 5px rgba(180,35,24,.12);
}

/* Side info */
.cSide{ display:grid; gap: 12px; }

.cInfo{ display:grid; gap: 10px; margin-top: 10px; position: relative; z-index: 1; }
.cInfo__item{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(11,18,32,.04);
  border: 1px solid rgba(11,18,32,.06);
}
.cInfo__k{ font-weight: 950; opacity:.85; }
.cInfo__v{ font-weight: 900; opacity:.92; }

.cSide__cta{ display:grid; gap: 10px; margin-top: 12px; position: relative; z-index: 1; }

.cMapBox{
  height: 220px;
  border-radius: 18px;
  background:
    radial-gradient(620px 380px at 22% 22%, rgba(59,130,246,.16), transparent 62%),
    radial-gradient(620px 380px at 82% 78%, rgba(168,85,247,.12), transparent 64%),
    rgba(11,18,32,.03);
  border: 1px solid rgba(11,18,32,.06);
  position: relative;
  z-index: 1;
}

/* =========================
   FAQ — smoother + nicer
   ========================= */
.cFAQ{
  display:grid;
  gap: 10px;
  max-width: 880px;
  margin-inline: auto;
}

.cFAQ__q{
  width:100%;
  text-align: right;
  cursor:pointer;

  padding: 14px 14px;
  border-radius: 18px;

  background: rgba(255,255,255,.82);
  border: 1px solid rgba(11,18,32,.08);
  box-shadow: 0 18px 60px rgba(11,18,32,.07);

  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;

  font: inherit;
  font-weight: 950;

  transition: transform 180ms ease, box-shadow 180ms ease;
}
.cFAQ__q:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 80px rgba(11,18,32,.10);
}

.cFAQ__chev{ opacity:.7; transition: transform 180ms ease; }

.cFAQ__a{
  overflow: hidden;
  max-height: 0;                /* JS animates */
  opacity: .0;
  transition: max-height 260ms ease, opacity 220ms ease;
  padding-inline: 14px;
}

.cFAQ__aInner{
  padding: 12px 0 16px;
  border-radius: 18px;
  background: rgba(11,18,32,.03);
  border: 1px solid rgba(11,18,32,.06);
  line-height: 1.8;
  opacity: .92;
}

/* when open (JS adds class) */
.cFAQ__q.is-open .cFAQ__chev{ transform: rotate(180deg); }
.cFAQ__a.is-open{ opacity: 1; }

/* =========================
   CTA
   ========================= */
.cCTA{ padding: 72px 0 92px; position: relative; z-index: 1; }
.cCTA__box{
  border-radius: 28px;
  padding: clamp(18px, 3vw, 28px);
  text-align:center;

  border: 1px solid transparent;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.76)) padding-box,
    linear-gradient(135deg, rgba(59,130,246,.40), rgba(168,85,247,.28), rgba(34,211,238,.18)) border-box;

  box-shadow: 0 34px 120px rgba(11,18,32,.12);
}
.cCTA__actions{ display:flex; justify-content:center; gap: 12px; flex-wrap:wrap; margin-top: 12px; }

/* =========================
   Toast
   ========================= */
.cToast{
  position: fixed;
  inset-inline: 16px;
  bottom: 16px;
  z-index: 9999;
  max-width: 560px;
  margin-inline: auto;

  opacity: 0;
  transform: translateY(10px);
  transition: opacity 220ms ease, transform 220ms ease;

  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(11,18,32,.86);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
}
.cToast.is-on{ opacity: 1; transform: translateY(0); }

/* =========================
   Reveal
   ========================= */
[data-reveal]{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 520ms ease, transform 520ms ease;
}
[data-reveal].is-in{ opacity: 1; transform: translateY(0); }

/* =========================
   Responsive
   ========================= */
@media (max-width: 1100px){
  .cQuickGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px){
  .cGrid{ grid-template-columns: 1fr; }
  .cRow--2{ grid-template-columns: 1fr; }
  .cQuickGrid{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  .cHero__fx{ animation: none; }
  [data-reveal]{ transition: none; opacity: 1; transform: none; }
  .cQuick, .cChip, .cFAQ__q{ transition: none; }
}

/* Active nav highlight (same as portfolio) */
.nav__link[aria-current="page"],
.mnav__link[aria-current="page"]{
  /* لو عندك ستايل جاهز للمربع الأزرق سيبه — ده fallback */
  border: 1px solid rgba(59,130,246,.55);
  background: rgba(59,130,246,.10);
  border-radius: 12px;
  padding: 10px 12px;
}

/* لو عندك dd menu */
.dd__menu a[aria-current="page"]{
  font-weight: 900;
}

/* =========================
   3D Background Layer (Canvas)
   ========================= */
.c3d{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
  filter: saturate(1.05);
  /* يخلي التأثير “يندمج” مع الخلفية الفاتحة */
  mix-blend-mode: multiply;
}

.c3d canvas{
  width: 100%;
  height: 100%;
  display: block;
}

/* تأكد إن المحتوى فوق الخلفية */
.cPage{ position: relative; z-index: 1; }

/* موبايل: خفّفها */
@media (max-width: 560px){
  .c3d{ opacity: .35; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .c3d{ display: none; }
}