/* Contact footer, Figma Home-Page node 810:639. Desktop card 1276px wide with
   994px content; mobile card is centered. The moving gradient is CSS-only
   (transform animation, paused offscreen) like the case covers. */
/* The section is a full-bleed stage (100lvh tall). contact.js reveals its
   gradient field through a squircle clip that grows from the .v3-cases width to
   the whole screen while scrolling, with the corner radius going to 0. */
.v3-contact { --v3-contact-radius:72px;position:relative;isolation:isolate;display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:100%;min-height:100vh;min-height:100svh;color:#fff; }
.v3-contact[hidden] { display:none; }
.v3-page.v3-page--contact-last { padding-bottom:0; }
/* Same width as the two case columns above (.v3-cases). */
.v3-contact__card { position:relative;top:120px;transform-origin:50% 50%;/* top = the 120px the field runs past the stage, so content is centred in what stays visible */box-sizing:border-box;width:min(1200px,calc(100% - 96px));padding:128px 141px 74px;display:flex;flex-direction:column;align-items:flex-start;flex:none; }
/* iOS 26 Safari shows page content under its bars: the field runs 200px above and
   120px below the stage (and body is a containing block) so no canvas band shows there. */
body { position:relative; }
.v3-contact__field { position:absolute;inset:0 0 -120px;z-index:-1;overflow:hidden;pointer-events:none;
 background:linear-gradient(160deg,#8f84f6 0%,#7a70f0 45%,#6f66e2 100%); }
.v3-contact__blob { position:absolute;display:block;border-radius:50%;pointer-events:none;animation:var(--v3-contact-anim) var(--v3-contact-dur) ease-in-out infinite;animation-play-state:paused; }
.v3-contact[data-active] .v3-contact__blob { animation-play-state:running; }
.v3-contact__blob--violet { --v3-contact-anim:v3-contact-a;--v3-contact-dur:19s;left:12%;top:-48%;width:66%;height:110%;background:radial-gradient(closest-side,#5f5bd2 0%,#6a63dacc 42%,#6a63da00 100%); }
.v3-contact__blob--lilac { --v3-contact-anim:v3-contact-b;--v3-contact-dur:23s;left:-14%;top:-30%;width:52%;height:92%;background:radial-gradient(closest-side,#c08cf8 0%,#b788f499 44%,#b788f400 100%); }
.v3-contact__blob--pink { --v3-contact-anim:v3-contact-c;--v3-contact-dur:21s;left:-12%;bottom:-46%;width:60%;height:100%;background:radial-gradient(closest-side,#6fa0ff 0%,#5b8dffaa 42%,#5b8dff00 100%); }
.v3-contact__blob--magenta { --v3-contact-anim:v3-contact-d;--v3-contact-dur:26s;left:30%;bottom:-62%;width:84%;height:96%;background:radial-gradient(closest-side,#2f6bff 0%,#2f6bffcc 46%,#2f6bff00 100%); }
.v3-contact__blob--cream { --v3-contact-anim:v3-contact-b;--v3-contact-dur:29s;right:-10%;top:-34%;width:26%;height:48%;background:radial-gradient(closest-side,#ffe99e 0%,#ffe99e66 48%,#ffe99e00 100%); }
@keyframes v3-contact-a { 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(10%,8%) scale(1.07)} 70%{transform:translate(-8%,4%) scale(.95)} }
@keyframes v3-contact-b { 0%,100%{transform:translate(0,0) scale(1)} 35%{transform:translate(12%,10%) scale(1.06)} 70%{transform:translate(4%,-6%) scale(.94)} }
@keyframes v3-contact-c { 0%,100%{transform:translate(0,0) scale(1)} 45%{transform:translate(14%,-8%) scale(1.08)} 75%{transform:translate(4%,6%) scale(.95)} }
@keyframes v3-contact-d { 0%,100%{transform:translate(0,0) scale(1)} 38%{transform:translate(-10%,-6%) scale(1.05)} 72%{transform:translate(8%,3%) scale(.96)} }
.v3-contact__intro { display:flex;flex-direction:column;gap:42px;width:100%;max-width:994px; }
.v3-contact__title { margin:0;font-size:74px;line-height:96px;font-weight:400;letter-spacing:-.04em;word-spacing:2px; }
.v3-contact__lead { margin:0;font-size:42px;line-height:50px;font-weight:400;letter-spacing:-.01em;word-spacing:2px; }
.v3-contact__actions { display:flex;align-items:center;gap:36px;padding:97px 0 67px; }
.v3-contact__resume { box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:12px;height:64px;padding:0 32px;border-radius:100px;background:linear-gradient(135deg,#ffffff0e,#ffffff02 54%,#ffffff06),rgb(3 3 5 / .92);box-shadow:0 3px 16px #00000018,inset 0 1px 0 #ffffff73,inset 0 -1px 0 #00000040,inset 1px 0 0 #ffffff2b,inset -1px 0 0 #ffffff24;-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);color:#fff;text-decoration:none;font-size:22px;line-height:1.35;font-weight:500;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent; }
.v3-contact__resume svg { flex:none;width:24px;height:24px; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
 .v3-contact__resume-arrow { transition:transform 300ms ease-in-out; }
 .v3-contact__resume:hover .v3-contact__resume-arrow { transform:translateY(2px); }
}
/* The coloured contact field keeps its light-theme button palette in either OS theme. */
.v3-contact .v3-brief {
 --v3-brief-color:#232522;
 --v3-brief-background:var(--v3-light-glass-surface);
 --v3-glass-sheen:var(--v3-light-glass-sheen);
 --v3-glass-highlight:var(--v3-light-glass-highlight);
 --v3-glass-edge:var(--v3-light-glass-edge);
 --v3-glass-solid:#ffffffd9;
 --v3-monochrome-filter:none;
}
.v3-contact .v3-brief__manual { margin-top:12px;color:#fff; }
.v3-contact__links { min-height:65px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px;width:100%;max-width:994px; }
.v3-contact__link { display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:34px;line-height:1.35;font-weight:400;white-space:nowrap;transition:opacity 160ms ease; }
.v3-contact__link svg { flex:none;width:28px;height:28px; }
.v3-contact__link:hover { opacity:.82; }
.v3-contact__link:focus-visible,.v3-contact__resume:focus-visible { outline:2px solid #fff;outline-offset:5px;border-radius:12px; }
/* Desktop columns end with parallax offsets (+286px on the left); clear them
   so the footer never overlaps the last case: 286 - 100 (section padding) + 80. */
@media (min-width:801px) { .v3-contact { margin-top:311px; } }  /* visual gap was 90px (80 + 10px copy lift), now 135px */
@media (max-width:1280px) {
 .v3-contact__card { padding:96px 56px 56px; }
 .v3-contact__title { font-size:60px;line-height:76px; }
 .v3-contact__lead { font-size:34px;line-height:44px; }
 .v3-contact__link { font-size:28px; }
 .v3-contact__link svg { width:24px;height:24px; }
}
@media (max-width:1100px) {
 .v3-contact__card { width:calc(100% - 80px); }
}
@media (max-width:800px) {
 .v3-contact { margin-top:30px; }  /* visual gap was 60px (40 + 20px copy lift), now 90px */
 .v3-contact { --v3-contact-radius:48px; }
 .v3-contact__card { min-height:min(812px,100svh);padding:clamp(32px,7.6svh,64px) 24px;align-items:center;justify-content:space-between;text-align:center; }
 .v3-contact__intro { gap:28px;align-items:center; }
 .v3-contact__title { font-size:52px;line-height:64px; }
 .v3-contact__lead { font-size:28px;line-height:1.3; }
 /* Compact, centered pills: one shared width instead of edge-to-edge buttons. */
 .v3-contact__actions { display:grid;justify-items:stretch;gap:32px;width:max-content;box-sizing:border-box;padding:clamp(12px,4.7svh,40px) 0; }
 .v3-contact__resume { height:60px;padding:0 20px;font-size:18px; }
 .v3-contact__resume svg { width:20px;height:20px; }
 .v3-contact__links { flex-direction:column;justify-content:flex-start;align-items:center;gap:20px;max-width:none;min-height:0; }
 .v3-contact__link { font-size:28px;gap:8px;padding:7px 0;white-space:nowrap; }
 .v3-contact__link svg { width:20px;height:20px; }
 .v3-contact__link--telegram { order:1; }
 .v3-contact__link--linkedin { order:2; }
}
/* Centred phone content has 12px side insets, including the email and its icon.
   The clip starts at the narrower .v3-cases width (12px further in per side), so
   the lead keeps its own stable measure 24px inside that start: it never touches
   the initial edge and does not reflow while the field widens. */
@media (max-width:480px) {
 .v3-contact__card { width:calc(100% - 24px);padding-inline:0; }
 .v3-contact__lead { max-width:calc(100% - 72px);text-wrap:balance; }
}
@media (max-width:359px) {
 .v3-contact__lead,.v3-contact__link { font-size:24px; }
 .v3-contact__resume { height:56px;font-size:17px; }
}
/* Move the iOS content up independently of the full-bleed gradient field. */
@supports (-webkit-touch-callout:none) {
 @media (hover:none) and (pointer:coarse) {
  .v3-contact__card { top:72px; }
 }
}
@media (max-width:389px) {
 .v3-contact__title { font-size:44px;line-height:56px; }
}
@media (prefers-reduced-motion:reduce) { .v3-contact__blob { animation:none; } .v3-contact__link { transition:none; } }