/* ===== CONTACT FORM (animated) ===== */
@keyframes cfFloat { 0%,100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(-18px) rotate(6deg) } }
@keyframes cfGrad { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } }
@keyframes cfRise { from { opacity: 0; transform: translateY(26px) } to { opacity: 1; transform: none } }
@keyframes cfPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.5) } 100% { box-shadow: 0 0 0 16px rgba(255,255,255,0) } }
@keyframes cfSpin { to { transform: rotate(360deg) } }
@keyframes cfDraw { to { stroke-dashoffset: 0 } }
@keyframes cfPop { 0% { transform: scale(.4); opacity: 0 } 70% { transform: scale(1.12) } 100% { transform: scale(1); opacity: 1 } }
@keyframes cfShake { 0%,100% { transform: translateX(0) } 20%,60% { transform: translateX(-6px) } 40%,80% { transform: translateX(6px) } }
@keyframes cfShine { to { transform: translateX(260%) } }

.cf-sec { padding: 1rem 0 4rem; position: relative }
.cf-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 0; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -40px rgba(37,39,201,.45), 0 0 0 1px rgba(37,39,201,.08) }

/* info panel */
.cf-info { position: relative; overflow: hidden; padding: 3rem 2.4rem; color: #fff; background: linear-gradient(135deg, #140e37, #2527c9, #7a44dc, #140e37); background-size: 300% 300%; animation: cfGrad 14s ease infinite }
.cf-info h3 { color: #fff; font: 700 1.7rem/1.2 Manrope, sans-serif; margin-bottom: .8rem; position: relative; z-index: 1 }
.cf-info > p { color: #d6d2f6; font-size: .98rem; line-height: 1.6; position: relative; z-index: 1 }
.cf-info .bub { position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); animation: cfFloat 9s ease-in-out infinite }
.cf-info .b1 { width: 180px; height: 180px; right: -60px; bottom: -50px }
.cf-info .b2 { width: 90px; height: 90px; right: 40px; top: 40px; animation-delay: -3s; animation-duration: 11s }
.cf-info .b3 { width: 56px; height: 56px; left: 30px; bottom: 90px; animation-delay: -6s }
.cf-list { list-style: none; padding: 0; margin: 2rem 0 0; position: relative; z-index: 1 }
.cf-list li { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.2rem; opacity: 0; animation: cfRise .7s var(--ease) forwards; animation-delay: calc(.3s + var(--i) * .15s) }
.cf-list .ic { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); animation: cfPulse 2.6s infinite; animation-delay: calc(var(--i) * .5s) }
.cf-list .ic svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.cf-list small { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #b9b3ee }
.cf-list span { font-weight: 600; overflow-wrap: anywhere }

/* form */
.cf-form-wrap { padding: 3rem 2.6rem; position: relative }
.cf-form-wrap h3 { font: 700 1.7rem/1.2 Manrope, sans-serif; color: var(--ink); margin-bottom: .4rem }
.cf-form-wrap .sub { color: var(--grey); margin-bottom: 1.8rem; font-size: .98rem }
.cf-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem 1.2rem }
.cf-f { position: relative; opacity: 0; animation: cfRise .7s var(--ease) forwards; animation-delay: calc(.2s + var(--i) * .08s) }
.cf-f.full { grid-column: 1 / -1 }
.cf-f input, .cf-f select, .cf-f textarea { width: 100%; padding: 1.35rem 1rem .6rem; font: 500 .98rem Inter, sans-serif; color: var(--ink); background: #f5f6ff; border: 1.5px solid transparent; border-radius: 14px; outline: none; transition: border-color .3s, background .3s, box-shadow .3s; -webkit-appearance: none; appearance: none }
.cf-f textarea { resize: vertical; min-height: 130px }
.cf-f select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%232527c9' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem }
.cf-f label { position: absolute; left: 1rem; top: 1.05rem; color: var(--grey); font-size: .95rem; pointer-events: none; transition: all .25s var(--ease); transform-origin: left top }
.cf-f input:focus + label, .cf-f input:not(:placeholder-shown) + label,
.cf-f textarea:focus + label, .cf-f textarea:not(:placeholder-shown) + label,
.cf-f select:focus + label, .cf-f select.has + label { top: .4rem; font-size: .7rem; font-weight: 600; letter-spacing: .04em; color: var(--indigo) }
.cf-f input:focus, .cf-f select:focus, .cf-f textarea:focus { background: #fff; border-color: var(--indigo); box-shadow: 0 8px 24px -10px rgba(37,39,201,.45) }
.cf-f .cf-bar { position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: linear-gradient(90deg, #2527c9, #7a44dc); transform: scaleX(0); transition: transform .4s var(--ease); border-radius: 2px }
.cf-f input:focus ~ .cf-bar, .cf-f textarea:focus ~ .cf-bar, .cf-f select:focus ~ .cf-bar { transform: scaleX(1) }
.cf-f.err input, .cf-f.err select, .cf-f.err textarea { border-color: #d93b4f; background: #fff5f6; animation: cfShake .4s }
.cf-f .em { display: block; max-height: 0; overflow: hidden; color: #d93b4f; font-size: .76rem; padding-left: .3rem; transition: max-height .3s, margin .3s }
.cf-f.err .em { max-height: 24px; margin-top: .3rem }
.cf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0 }

.cf-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .7rem; padding: 1rem 2.2rem; border: 0; border-radius: 999px; font: 700 1rem Manrope, sans-serif; color: #fff; background: linear-gradient(135deg, #2527c9, #7a44dc); background-size: 200% 200%; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s; box-shadow: 0 14px 30px -12px rgba(37,39,201,.7) }
.cf-btn::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-20deg) translateX(-100%) }
.cf-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -12px rgba(37,39,201,.8); animation: cfGrad 3s ease infinite }
.cf-btn:hover::after { animation: cfShine 1s }
.cf-btn:hover .arr { transform: translateX(5px) }
.cf-btn .arr { transition: transform .3s; display: inline-block }
.cf-btn .spin { display: none; width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: cfSpin .7s linear infinite }
.cf-btn.load { pointer-events: none; opacity: .85 }
.cf-btn.load .spin { display: inline-block }
.cf-btn.load .arr { display: none }
.cf-status { grid-column: 1 / -1; font-size: .9rem; min-height: 1.2em; color: #d93b4f }

/* success */
.cf-ok { display: none; text-align: center; padding: 2rem 0 }
.cf-form-wrap.done .cf-form, .cf-form-wrap.done .cf-head { display: none }
.cf-form-wrap.done .cf-ok { display: block; animation: cfRise .6s var(--ease) }
.cf-ok svg { width: 110px; height: 110px; animation: cfPop .6s var(--ease) }
.cf-ok circle { fill: #e5e7ff; stroke: #2527c9; stroke-width: 3 }
.cf-ok path { fill: none; stroke: #2527c9; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: cfDraw .6s .4s ease forwards }
.cf-ok h3 { margin-top: 1rem }
.cf-ok p { color: var(--grey); max-width: 380px; margin: .5rem auto 1.4rem }

/* ===== responsive (desktop -> 300px) ===== */
@media (max-width: 991px) {
  .cf-grid { grid-template-columns: 1fr; border-radius: 22px }
  .cf-info { padding: 2.2rem 1.8rem }
  .cf-form-wrap { padding: 2.2rem 1.8rem }
  .cf-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 1rem }
}
@media (max-width: 575px) {
  .cf-form { grid-template-columns: 1fr }
  .cf-info, .cf-form-wrap { padding: 1.8rem 1.2rem }
  .cf-info h3, .cf-form-wrap h3 { font-size: 1.4rem }
  .cf-btn { width: 100% }
  .cf-list .ic { width: 40px; height: 40px }
}
@media (max-width: 360px) {
  .cf-info, .cf-form-wrap { padding: 1.4rem .9rem }
  .cf-grid { border-radius: 16px }
  .cf-f input, .cf-f select, .cf-f textarea { padding-left: .8rem; font-size: .92rem }
  .cf-f label { left: .8rem; font-size: .88rem }
}
@media (prefers-reduced-motion: reduce) { .cf-info, .cf-info .bub, .cf-list .ic { animation: none } .cf-list li, .cf-f { opacity: 1; animation: none } }
.cf-act { grid-column: 1 / -1; opacity: 0; animation: cfRise .7s var(--ease) forwards; animation-delay: calc(.2s + var(--i) * .08s) }
@media (prefers-reduced-motion: reduce) { .cf-act { opacity: 1; animation: none } }

/* =====================================================================
   CONTACT – refined design (calm left panel + animated, responsive banner)
   ===================================================================== */
@keyframes cxRise { from { opacity: 0; transform: translateY(26px) } to { opacity: 1; transform: none } }
@keyframes cxDraw { from { stroke-dashoffset: 70 } to { stroke-dashoffset: 0 } }
@keyframes cxBar  { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes cxDrift1 { 0%,100% { transform: translate3d(0,0,0) scale(1) } 50% { transform: translate3d(60px,30px,0) scale(1.12) } }
@keyframes cxDrift2 { 0%,100% { transform: translate3d(0,0,0) scale(1) } 50% { transform: translate3d(-70px,-24px,0) scale(1.1) } }

/* links inherit the surrounding colour */
.cf-list a, .cx a { color: inherit; text-decoration: none }
.cf-list a:hover { text-decoration: underline; text-underline-offset: 3px }

/* ---------- left panel: calm, static background ---------- */
.cf-info {
  padding: 3rem 2.4rem;
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(86, 90, 240, .55) 0%, rgba(86, 90, 240, 0) 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(122, 68, 220, .45) 0%, rgba(122, 68, 220, 0) 62%),
    #17114d;
  background-size: auto;
  animation: none;
}
.cf-info::before {            /* faint dot texture, does not move */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 55%);
  mask-image: linear-gradient(160deg, #000 0%, transparent 55%);
}
.cf-info .bub { display: none }
.cf-info h3 {
  font: 800 clamp(1.7rem, 2.6vw, 2.15rem)/1.15 Manrope, sans-serif;
  letter-spacing: -.02em; margin-bottom: 1rem;
}
.cf-info h3::after {
  content: ""; display: block; width: 44px; height: 3px; margin-top: .9rem; border-radius: 3px;
  background: linear-gradient(90deg, #fff, rgba(255,255,255,.2));
  transform-origin: left; animation: cxBar .9s var(--ease) .2s both;
}
.cf-info > p { color: rgba(255,255,255,.78); font: 400 1rem/1.7 Inter, sans-serif; max-width: 34ch }

.cf-list { display: grid; gap: .8rem; margin: 2rem 0 0 }
.cf-list li {
  margin: 0; align-items: flex-start; gap: .95rem;
  padding: .95rem 1.05rem; border-radius: 16px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13);
  transition: transform .35s var(--ease), background .35s, border-color .35s;
}
.cf-list li:hover { transform: translateY(-2px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3) }
.cf-list .ic {
  flex: none; width: 42px; height: 42px; border-radius: 12px; animation: none;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18);
}
.cf-list .ic svg { width: 19px; height: 19px; stroke-dasharray: 70; animation: cxDraw 1.1s var(--ease) both; animation-delay: calc(.5s + var(--i) * .12s) }
.cf-list li > div { min-width: 0 }
.cf-list small {
  display: block; margin-bottom: .3rem;
  font: 500 .68rem/1 'IBM Plex Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: #b4b9ff;
}
.cf-list li > div span { display: block; font: 500 .98rem/1.55 Inter, sans-serif; color: #fff; overflow-wrap: anywhere }
.cf-call li > div span, .cf-mail > div span { font-weight: 600; font-size: 1.05rem }
.cf-office > div span { color: rgba(255,255,255,.9) }
.cf-time { background: transparent; border-style: dashed }

/* ---------- bottom banner ---------- */
.cta-section .cx-orb { position: absolute; z-index: 0; border-radius: 50%; filter: blur(70px); pointer-events: none; opacity: .55 }
.cta-section .cx-orb.o1 { width: 340px; height: 340px; left: -80px; top: -60px; background: #8e91ff; animation: cxDrift1 16s ease-in-out infinite }
.cta-section .cx-orb.o2 { width: 300px; height: 300px; right: -70px; bottom: -40px; background: #c6a6ff; animation: cxDrift2 19s ease-in-out infinite }

.cx { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.1rem; max-width: 1060px; margin: 2.6rem auto 0; text-align: left }
.cx-mail, .cx-phone { grid-column: span 3 }
.cx-office { grid-column: span 2 }

.cx-card {
  position: relative; display: flex; flex-direction: column; gap: .9rem; overflow: hidden; color: #11172b;
  padding: 1.5rem 1.6rem; border-radius: 22px;
  background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(37,39,201,.14); box-shadow: 0 22px 44px -28px rgba(37,39,201,.55);
  opacity: 0; transform: translateY(26px);
  transition: transform .45s var(--ease), box-shadow .45s, border-color .45s, background .45s;
}
.cta-inner.in .cx-card { animation: cxRise .85s var(--ease) forwards; animation-delay: calc(.15s + var(--i) * .12s) }
.cx-card::before {           /* gradient top edge, draws on hover */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #2527c9, #7a44dc, #2527c9); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.cx-card::after {            /* soft shine sweep */
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.cx-card:hover { transform: translateY(-6px); background: #fff; border-color: rgba(37,39,201,.4); box-shadow: 0 30px 56px -26px rgba(37,39,201,.65) }
.cx-card:hover::before { transform: scaleX(1) }
.cx-card:hover::after { opacity: 1; left: 130%; transition: left 1s var(--ease), opacity .2s }

.cx-top { display: flex; align-items: center; gap: .8rem }
.cx-ic {
  flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, #2527c9, #7a44dc); box-shadow: 0 12px 22px -12px rgba(37,39,201,.8);
  transition: transform .5s var(--ease);
}
.cx-card:hover .cx-ic { transform: rotate(-8deg) scale(1.08) }
.cx-ic svg { width: 21px; height: 21px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 70; stroke-dashoffset: 70 }
.cta-inner.in .cx-ic svg { animation: cxDraw 1.2s var(--ease) forwards; animation-delay: calc(.45s + var(--i) * .12s) }
.cx-top small, .cx-top h4 { margin: 0 }
.cx-top small { font: 500 .72rem/1 'IBM Plex Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--grey, #5d6577) }
.cx-top h4 { font: 800 1.2rem/1.2 Manrope, sans-serif; color: #11172b; letter-spacing: -.01em }
.cx-val { font: 700 clamp(1.05rem, 1.7vw, 1.4rem)/1.5 Manrope, sans-serif; color: #11172b; overflow-wrap: anywhere; letter-spacing: -.01em }
.cx-val a:hover { color: var(--indigo, #2527c9) }
.cx-addr { font: 400 .98rem/1.65 Inter, sans-serif; color: #3d465a }
.cx-go { margin-top: auto; font: 600 .86rem/1 Inter, sans-serif; color: var(--indigo, #2527c9) }
.cx-go i { display: inline-block; font-style: normal; transition: transform .3s var(--ease) }
.cx-card:hover .cx-go i, a.cx-go:hover i { transform: translateX(6px) }

.cta-section .cta-close { position: relative; margin-top: 2.2rem }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .cx { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 680px }
  .cx-mail, .cx-phone, .cx-office { grid-column: auto }
  .cx-office:last-of-type { grid-column: 1 / -1 }
  .cf-info { padding: 2.4rem 1.8rem }
  .cf-info > p { max-width: none }
}
@media (max-width: 575px) {
  .cta-section { padding: 3.6rem 0 4rem }
  .cx { grid-template-columns: 1fr; gap: .9rem; margin-top: 2rem }
  .cx-office:last-of-type { grid-column: auto }
  .cx-card { padding: 1.2rem 1.15rem; border-radius: 18px }
  .cx-card:hover { transform: none }
  .cf-info { padding: 2rem 1.3rem }
  .cf-list li { padding: .85rem .9rem }
  .cta-section .cx-orb { width: 220px; height: 220px }
}
@media (prefers-reduced-motion: reduce) {
  .cx-card { opacity: 1; transform: none; animation: none !important }
  .cx-ic svg, .cf-list .ic svg { animation: none !important; stroke-dashoffset: 0 }
  .cta-section .cx-orb, .cf-info h3::after { animation: none }
}
.cx a.cx-go, .cx a.cx-mail .cx-go { color: var(--indigo, #2527c9) }