/* DIP Computer contact page */
.ct2{display:grid;grid-template-columns:5fr 6fr;gap:0;border-radius:30px;overflow:hidden;box-shadow:0 30px 70px rgba(15,35,95,.16);border:1px solid var(--line);background:#fff}

/* ---- left: info panel ---- */
.ct-info{position:relative;overflow:hidden;color:#d0e3f1;padding:46px 40px;background:linear-gradient(160deg,#08324f 0%,#0a68a8 70%,#f07020 130%);animation:ctL .9s var(--ease) both}
.ct-info>*{position:relative;z-index:1}
.ct-info h2{color:#fff;font-size:2rem;margin-bottom:10px}.ct-lead{color:#bcd7ea;font-size:.94rem;line-height:1.65;margin-bottom:30px}
.ct-info ul{list-style:none;display:grid;gap:12px;padding:0;margin:0}
.ct-info li a{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);transition:.35s var(--ease);opacity:0;animation:ctUp .7s var(--ease) forwards}
.ct-info li:nth-child(1) a{animation-delay:.3s}.ct-info li:nth-child(2) a{animation-delay:.42s}.ct-info li:nth-child(3) a{animation-delay:.54s}.ct-info li:nth-child(4) a{animation-delay:.66s}
.ct-info li a:hover{background:rgba(255,255,255,.16);transform:translateX(8px)}
.ct-info li small{display:block;color:#9fb6ee;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.ct-info li b{color:#fff;font-size:.92rem;line-height:1.4;overflow-wrap:anywhere}
.ci2{position:relative;flex:none;width:50px;height:50px;border-radius:16px;background:rgba(255,255,255,.16);display:grid;place-items:center;animation:ctFloat 3.4s ease-in-out infinite}
.ci2:before{content:"";position:absolute;inset:0;border-radius:16px;border:2px solid rgba(255,255,255,.55);animation:ctRing 2.6s ease-out infinite}
.ct-info li:nth-child(2) .ci2,.ct-info li:nth-child(2) .ci2:before{animation-delay:.5s}.ct-info li:nth-child(3) .ci2,.ct-info li:nth-child(3) .ci2:before{animation-delay:1s}.ct-info li:nth-child(4) .ci2,.ct-info li:nth-child(4) .ci2:before{animation-delay:1.5s}
.ct-info li a:hover .ci2 .ic{animation:ctWiggle .6s}
.ct-hrs{display:flex;align-items:center;gap:10px;margin-top:26px;font-size:.84rem;font-weight:600;color:#bcd7ea}
.blob{position:absolute;border-radius:50%;filter:blur(2px);z-index:0;pointer-events:none}
.blob.b1{width:260px;height:260px;right:-90px;top:-80px;background:radial-gradient(circle at 30% 30%,rgba(240,112,32,.55),transparent 70%);animation:ctDrift 9s ease-in-out infinite alternate}
.blob.b2{width:220px;height:220px;left:-70px;bottom:-70px;background:radial-gradient(circle at 60% 40%,rgba(255,255,255,.22),transparent 70%);animation:ctDrift 11s ease-in-out infinite alternate-reverse}

/* ---- right: form ---- */
.ct-form{padding:46px 42px;animation:ctR .9s var(--ease) both}
.ct-form h2{font-size:1.8rem;margin-bottom:6px}.ct-sub{color:var(--mute);font-size:.92rem;margin-bottom:24px}
.ct-f{display:grid;gap:16px}
.ct-fi{position:relative;display:block;opacity:0;animation:ctUp .6s var(--ease) forwards}
.ct-f>.ct-fi:nth-of-type(1){animation-delay:.25s}.ct-f>.ct-fi:nth-of-type(2){animation-delay:.33s}.ct-f>.ct-fi:nth-of-type(3){animation-delay:.41s}.ct-f>.ct-fi:nth-of-type(4){animation-delay:.49s}.ct-f>.ct-fi:nth-of-type(5){animation-delay:.57s}
.ct-fi input,.ct-fi select,.ct-fi textarea{width:100%;box-sizing:border-box;padding:22px 46px 8px 16px;border:1.5px solid #c7dbea;border-radius:16px;font:500 .94rem Lato,sans-serif;color:var(--ink);background:#fff;transition:.25s}
.ct-fi.ta textarea{min-height:130px;resize:vertical;padding-right:16px}
.ct-fi select{appearance:none;-webkit-appearance:none;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%231d4ed8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center}
.ct-fi span{position:absolute;left:17px;top:17px;font-size:.92rem;font-weight:500;color:#7b88a8;pointer-events:none;transition:.22s var(--ease);transform-origin:left top}
.ct-fi input:focus+span,.ct-fi input:not(:placeholder-shown)+span,.ct-fi textarea:focus+span,.ct-fi textarea:not(:placeholder-shown)+span,.ct-fi.sel span{top:7px;font-size:.68rem;font-weight:700;color:var(--blue)}
.ct-fi input:focus,.ct-fi select:focus,.ct-fi textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(10,104,168,.12)}
.ct-fi .ic{position:absolute;right:16px;top:17px;pointer-events:none;transition:.25s}.ct-fi input:focus~.ic{transform:scale(1.2)}
.ct-btn{justify-content:center;padding:16px;font-size:1rem;opacity:0;animation:ctUp .6s var(--ease) .68s forwards;position:relative;overflow:hidden}
.ct-btn .ic{transition:transform .3s var(--ease)}.ct-btn:hover .ic{transform:translateX(6px)}
.ct-btn:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:ctShine 3.4s ease-in-out 1.5s infinite}
.ct-ok{display:flex;gap:14px;align-items:center;background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;border-radius:18px;padding:14px 18px;margin-bottom:18px;animation:ctPop .6s var(--ease)}
.ct-ok svg circle{stroke-dasharray:152;stroke-dashoffset:152;animation:ctDraw .8s ease forwards}.ct-ok svg path{stroke-dasharray:40;stroke-dashoffset:40;animation:ctDraw .5s ease .6s forwards}
.ct-ok b{display:block}.ct-ok span{font-size:.86rem}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}

.ct-map{margin-top:34px;border-radius:26px;overflow:hidden;border:1px solid var(--line);height:340px;box-shadow:0 18px 40px rgba(15,35,95,.1)}.ct-map iframe{width:100%;height:100%;border:0;display:block}

@keyframes ctL{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes ctR{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes ctUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ctFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes ctRing{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(1.5);opacity:0}}
@keyframes ctWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
@keyframes ctDrift{to{transform:translate(30px,24px) scale(1.15)}}
@keyframes ctShine{0%,60%{left:-60%}100%{left:140%}}
@keyframes ctPop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes ctDraw{to{stroke-dashoffset:0}}

@media(max-width:900px){.ct2{grid-template-columns:1fr;border-radius:24px}.ct-info,.ct-form{padding:32px 22px}.ct-info h2{font-size:1.6rem}.ct-map{height:280px}}
@media(prefers-reduced-motion:reduce){.ct-info li a,.ct-fi,.ct-btn{opacity:1}}

/* ---------- Let's talk: side panel in white shade (was blue) ---------- */
.ct-info{color:var(--mute);background:linear-gradient(160deg,#ffffff 0%,#f3f8fd 100%);border-right:1px solid var(--line)}
.ct-info h2{color:var(--ink)}.ct-lead{color:var(--mute)}
.ct-info li a{background:#fff;border:1px solid var(--line);box-shadow:0 6px 16px rgba(7,25,43,.06)}
.ct-info li a:hover{background:#eef6fc;border-color:var(--blue)}
.ct-info li small{color:var(--mute)}
.ct-info li b{color:var(--ink)}
.ci2{background:var(--blue)}
.ci2:before{border-color:rgba(10,104,168,.4)}
.blob.b1{background:radial-gradient(circle at 30% 30%,rgba(10,104,168,.12),transparent 70%)}
.blob.b2{background:radial-gradient(circle at 60% 40%,rgba(240,112,32,.12),transparent 70%)}
@media(max-width:900px){.ct-info{border-right:0;border-bottom:1px solid var(--line)}}