/* ============================================================
   doobinin.ru — Patch-AI redesign · DARK design system
   New markup + layout. Text content preserved verbatim.
   Reference: thepatchsystem.com/ai
   ============================================================ */
@property --ba { syntax:'<angle>'; inherits:false; initial-value:0deg; }

:root{
  --blue:#1f00ff; --blue-t:#8a97ff;          /* brand electric + readable link tint on dark */
  --g1:#b15af8; --g2:#ff8951;                /* AI gradient */
  --ink:#f3f3f6; --ink-2:#c4c4cf; --muted:#8b8b97;
  --bg:#08080b; --bg2:#111118; --card:#15151d; --line:rgba(255,255,255,.09);
  --radius:24px; --shadow:0 34px 64px -34px rgba(0,0,0,.75);
  --grad:linear-gradient(96deg,var(--g1),var(--g2));
  --head:'Display','Manrope','Segoe UI',sans-serif;
  --body:'Montserrat','Golos Text','Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip;position:relative}

/* ---------- background: grid of tiles that randomly flip (built by patch.js) ---------- */
.bg-grid{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  display:grid;grid-auto-rows:116px;grid-template-columns:repeat(auto-fill,116px);
  perspective:1000px;
  -webkit-mask:radial-gradient(120% 80% at 50% 0%,#000 35%,transparent 78%);
          mask:radial-gradient(120% 80% at 50% 0%,#000 35%,transparent 78%)}
.bg-tile{position:relative;box-sizing:border-box;transform-style:preserve-3d;
  border-radius:9px;border:3px solid rgba(0,0,0,.22);
  transition:transform 1s cubic-bezier(.4,0,.2,1)}
/* the back face: a faint gradient sheen, only visible once the tile turns over */
.bg-tile::before{content:"";position:absolute;inset:0;backface-visibility:hidden;border-radius:9px;
  transform:rotateY(180deg) translateZ(1px);
  background:linear-gradient(135deg,rgba(177,90,248,.18),rgba(255,137,81,.09))}
/* faint letter on the back face — only shows when the tile is turned over */
/* expressive display face, used only for the background tile letters */
@font-face{font-family:'TileGlyph';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/fonts-new/unbounded-cyrillic-1.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'TileGlyph';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/fonts-new/unbounded-latin-3.woff2) format('woff2')}
.bg-letter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  backface-visibility:hidden;transform:rotateY(180deg) translateZ(2px);
  font:900 40px/1 'TileGlyph','Display',sans-serif;letter-spacing:0;
  color:rgba(255,255,255,.025);pointer-events:none;user-select:none}
/* each letter flips in like a split-flap board (re-triggered per change by patch.js) */
@keyframes bg-flap{
  0%  {transform:rotateY(180deg) translateZ(2px) rotateX(-90deg)}
  60% {transform:rotateY(180deg) translateZ(2px) rotateX(14deg)}
  100%{transform:rotateY(180deg) translateZ(2px) rotateX(0)}
}
.bg-tile.flip{transform:rotateY(180deg)}
/* restored state carried over from the previous page shows instantly (no flip animation) */
.bg-grid.restoring .bg-tile{transition:none}
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(48% 38% at 84% 6%,rgba(177,90,248,.16),transparent 62%),
    radial-gradient(42% 34% at 8% 42%,rgba(31,0,255,.14),transparent 62%),
    radial-gradient(46% 40% at 92% 78%,rgba(255,137,81,.10),transparent 60%)}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* ---- unified heading scale (used across the whole site) ---- */
h1,h2,h3,h4,h5{font-family:var(--head);font-weight:700 !important;letter-spacing:-.02em;margin:0;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(32px,4.6vw,54px);line-height:1.05}
h2{font-size:clamp(26px,3.8vw,42px);line-height:1.08}
h3{font-size:clamp(20px,2.4vw,26px);line-height:1.16}
h4{font-size:18px;line-height:1.2}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
@media(max-width:640px){.wrap{padding:0 18px}}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- animated gradient border ---------- */
.ai-border{position:relative;background:var(--card)}
.ai-border::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;z-index:0;
  background:conic-gradient(from var(--ba),var(--g1),var(--g2),var(--blue),var(--g1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:spin 6s linear infinite;pointer-events:none}
.ai-border>*{position:relative;z-index:1}
@keyframes spin{to{--ba:360deg}}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(8,8,11,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .row{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.brand{font-family:var(--head);font-weight:800;font-size:20px;letter-spacing:-.02em;white-space:nowrap;color:var(--ink)}
.brand b{color:var(--blue-t)}
.menu{display:flex;align-items:center;gap:28px;font-size:15px;font-weight:600}
.menu a{color:var(--muted);transition:color .15s;position:relative;white-space:nowrap}
.menu a:hover,.menu a[aria-current]{color:var(--ink)}
.menu a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:3px;background:var(--grad)}
.has-sub{position:relative}
.has-sub>.sub{position:absolute;top:calc(100% + 12px);right:0;left:auto;transform:translateY(6px);
  background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  padding:8px;min-width:190px;opacity:0;visibility:hidden;transition:.16s;display:grid;gap:2px}
.has-sub:hover>.sub,.has-sub:focus-within>.sub{opacity:1;visibility:visible;transform:translateY(0)}
.has-sub .sub a{padding:9px 12px;border-radius:10px;color:var(--ink-2)}
.has-sub .sub a:hover{background:var(--bg2);color:var(--ink)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
#navtoggle{display:none}
@media(max-width:860px){
  .burger{display:flex}
  .menu{position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:flex-start;gap:4px;
    background:var(--bg2);border-bottom:1px solid var(--line);padding:16px 22px 26px;
    transform:translateY(-130%);transition:transform .28s ease;box-shadow:var(--shadow)}
  #navtoggle:checked~.menu{transform:translateY(0)}
  .menu a{font-size:19px;padding:8px 0}
  .has-sub>.sub{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;
    padding:0 0 0 14px;min-width:0}
  .has-sub>.sub a{padding:6px 0}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;font-size:15px;
  padding:14px 24px;border-radius:100px;transition:transform .15s,box-shadow .15s;cursor:pointer;border:0}
.btn-p{background:var(--blue);color:#fff}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(31,0,255,.8)}
.btn-g{background:var(--grad);color:#fff}
.btn-g:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(255,137,81,.55)}
.btn-o{background:transparent;color:var(--ink);border:1.5px solid rgba(255,255,255,.25)}
.btn-o:hover{background:var(--ink);color:var(--bg)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:84px 0 48px}
.hero .glow{position:absolute;top:-180px;right:-120px;width:760px;height:760px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(177,90,248,.4),rgba(255,137,81,.18),transparent 70%);filter:blur(24px)}
.hero .row{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
@media(max-width:880px){.hero .row{grid-template-columns:1fr;gap:34px}}
.hero h1{font-size:clamp(40px,6.6vw,80px);letter-spacing:-.03em;line-height:1.0}
.hero .tagline{font-size:clamp(19px,2.2vw,24px);color:var(--ink-2);max-width:30ch;margin:26px 0 0;font-weight:500}
.portrait{position:relative;justify-self:center;width:min(400px,82vw);aspect-ratio:1;border-radius:50%;padding:9px}
.portrait::before{content:"";position:absolute;inset:0;border-radius:50%;padding:3px;
  background:conic-gradient(from var(--ba),var(--g1),var(--g2),var(--blue),var(--g1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:spin 6s linear infinite}
.portrait .frame{position:absolute;inset:9px;border-radius:50%;overflow:hidden;
  background:radial-gradient(120% 120% at 30% 15%,#1c1c24,#0b0b0f)}
.portrait .frame img{width:100%;height:100%;object-fit:cover;object-position:top center}

/* ---------- sections ---------- */
.section{padding:90px 0;position:relative}
.section.alt{background:rgba(255,255,255,.018)}
.section-head{max-width:760px}
.section .lead{color:var(--muted);font-size:19px;margin-top:16px}

/* ---------- project cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cards{grid-template-columns:1fr}}
.card{padding:26px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);
  transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(255,255,255,.16)}
.card .num{font-family:var(--head);font-weight:800;font-size:15px;letter-spacing:.04em}
.card h3{font-size:22px;margin:14px 0 0}
.card .meta{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.card ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:0}
.card li{padding:11px 0;border-top:1px solid var(--line);font-size:15.5px;color:var(--ink-2);display:flex;gap:10px;align-items:flex-start}
.card li::before{content:"";flex:none;width:7px;height:7px;margin-top:8px;border-radius:50%;
  background:linear-gradient(135deg,var(--g1),var(--g2))}
.card li a{transition:color .15s}
.card li a:hover{color:var(--blue-t)}
.card.feat{background:var(--bg2)}

/* ---------- interactive project map (diorama + markers + popovers) ---------- */
.pm-section{padding:64px 0 0;position:relative}
.projectmap{position:relative;overflow:visible;aspect-ratio:2200/1229;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.pm-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;display:block}
/* heading sits over the dark top area of the image */
.pm-overlay{position:absolute;top:0;left:0;right:0;z-index:3;pointer-events:none;
  padding-top:clamp(22px,4vw,54px)}
.pm-heading{color:#fff;margin:0;text-shadow:0 2px 30px rgba(0,0,0,.6)}

.pm-marker{position:absolute;transform:translate(-50%,-50%);z-index:3;box-sizing:border-box;
  width:44px;height:44px;border:2.5px solid #fff;border-radius:50%;cursor:pointer;padding:0;
  background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;font:400 26px/1 var(--body);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 0 rgba(177,90,248,.55),0 10px 22px -6px rgba(255,137,81,.6);
  animation:pm-pulse 1.9s cubic-bezier(.4,0,.2,1) infinite;transition:box-shadow .15s}
.pm-marker::before{content:"";position:absolute;width:12px;height:2px;background:#fff;border-radius:2px}
.pm-marker::after{content:"";position:absolute;width:2px;height:12px;background:#fff;border-radius:2px;transition:transform .25s}
.pm-marker:hover{animation-play-state:paused;box-shadow:0 0 0 10px rgba(177,90,248,.22),0 12px 26px -6px rgba(255,137,81,.8)}
.pm-marker.active{animation:none;box-shadow:0 0 0 9px rgba(177,90,248,.25),0 12px 26px -6px rgba(255,137,81,.8)}
.pm-marker.active::after{transform:rotate(90deg)}   /* + turns to × */
/* radar-ring pulse + subtle bump to grab attention */
@keyframes pm-pulse{
  0%  {transform:translate(-50%,-50%) scale(.92);
       box-shadow:0 0 0 0 rgba(177,90,248,.65),0 10px 22px -6px rgba(255,137,81,.6)}
  70% {transform:translate(-50%,-50%) scale(1.2);
       box-shadow:0 0 0 38px rgba(177,90,248,0),0 10px 22px -6px rgba(255,137,81,.6)}
  100%{transform:translate(-50%,-50%) scale(.92);
       box-shadow:0 0 0 0 rgba(177,90,248,0),0 10px 22px -6px rgba(255,137,81,.6)}
}
.pm-pop{position:absolute;width:0;height:0;z-index:4}
.pm-pop .pm-card{position:absolute;width:300px;max-width:78vw;
  background:rgba(18,18,26,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-radius:20px;padding:20px 22px;box-shadow:0 30px 60px -24px rgba(0,0,0,.7);
  opacity:0;transform:scale(.94) translateY(6px);transform-origin:var(--to,top left);
  transition:opacity .2s ease,transform .22s cubic-bezier(.2,.9,.25,1);pointer-events:none}
.pm-pop.show .pm-card{opacity:1;transform:none;pointer-events:auto}
.pm-pop .pm-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;z-index:0;
  background:conic-gradient(from var(--ba,0deg),var(--g1),var(--g2),var(--blue),var(--g1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:spin 6s linear infinite}
.pm-pop .pm-card > *{position:relative;z-index:1}
/* directional offset from the marker anchor */
.pm-pop.dr .pm-card{top:16px;left:16px;--to:top left}
.pm-pop.dl .pm-card{top:16px;right:16px;--to:top right}
.pm-pop.ur .pm-card{bottom:16px;left:16px;--to:bottom left}
.pm-pop.ul .pm-card{bottom:16px;right:16px;--to:bottom right}
.pm-card .meta{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:linear-gradient(92deg,var(--g1),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent}
.pm-card h3{font-family:var(--head);font-weight:700;color:var(--ink);font-size:20px;letter-spacing:-.01em;margin:8px 0 0}
.pm-card ul{list-style:none;margin:14px 0 0;padding:0}
.pm-card li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid rgba(255,255,255,.09);
  color:var(--ink-2);font-size:14.5px;line-height:1.35}
.pm-card li::before{content:"";flex:none;width:6px;height:6px;margin-top:7px;border-radius:50%;
  background:linear-gradient(135deg,var(--g1),var(--g2))}
.pm-card a{color:inherit;text-decoration:none;transition:color .15s}
.pm-card a:hover{color:var(--blue-t)}
/* mobile: popovers become a bottom sheet */
@media (max-width:640px){
  .pm-pop{position:fixed;inset:auto 0 0 0;width:100%;height:auto;z-index:80}
  .pm-pop .pm-card{position:static;width:auto;max-width:none;margin:0 12px 12px;
    border-radius:20px 20px 18px 18px;transform:translateY(20px)}
  .pm-pop.show .pm-card{transform:none}
  .pm-marker{width:36px;height:36px}
}

/* ---------- media blocks ---------- */
.media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);background:#000}
.media video,.media img{width:100%;display:block}

/* ---------- pixel-wave animation (built by patch.js) ---------- */
.pixelwave-sec{padding:72px 0}
.pixelwave{display:grid;grid-template-columns:repeat(var(--cols,23),1fr);gap:4px;
  width:100%;max-width:560px;margin:0 auto}
.pw-cell{aspect-ratio:1;border-radius:2px}
.pw-cell.on{
  /* one continuous vertical gradient sliced per row via % maths (no JS needed) */
  background-image:linear-gradient(180deg,var(--g1),var(--g2));
  background-repeat:no-repeat;
  background-size:100% calc(var(--rows,10) * 100%);
  background-position:0 calc(var(--r,0) / (var(--rows,10) - 1) * 100%);
  opacity:1;transform:none;transform-origin:50% 100%}
/* with JS: hidden until the wave scrolls into view, then materialise smoothly */
.js .pixelwave:not(.play) .pw-cell.on{opacity:0;transform:translateY(10px) scale(.6)}
.js .pixelwave.play .pw-cell.on{opacity:1;transform:none;
  transition:opacity .5s ease var(--d,0s),
             transform .6s cubic-bezier(.22,1,.36,1) var(--d,0s)}
@media (prefers-reduced-motion:reduce){
  .js .pixelwave .pw-cell.on{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- inner content pages (.prose) ---------- */
.page{padding:56px 0 40px;position:relative}
.prose{max-width:none}
.prose > *:first-child{margin-top:0}
/* Joomla often wraps heading text in a centered <div>; normalise to left */
.prose h1 > div,.prose h2 > div,.prose h3 > div{text-align:left !important;display:block}
.prose h1{margin:.1em 0 .55em}
.prose h2{margin:1.5em 0 .5em}
.prose h3{margin:1.4em 0 .4em}
.prose h4,.prose h5{margin:1.3em 0 .4em}
.prose p{color:var(--ink-2);margin:0 0 1.15em}
.prose strong,.prose b{color:var(--ink);font-weight:700}
.prose a{color:var(--blue-t);transition:color .15s}
.prose a:hover{color:#aeb8ff;text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{color:var(--ink-2);margin:0 0 1.2em;padding-left:1.35em}
.prose li{margin:.45em 0}
.prose li::marker{color:var(--g1)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.prose blockquote{margin:1.4em 0;padding:2px 0 2px 20px;border-left:3px solid;
  border-image:var(--grad) 1;color:var(--ink)}
.prose img{width:100%;height:auto;border-radius:18px;margin:0;display:block}
/* generated isometric work illustrations: sit on dark, no boxy border */
.prose img.work-img{border:0;border-radius:16px;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.45))}
/* profile photo (Проекты) */
.prose img.profile-photo{border:0;border-radius:18px;box-shadow:0 26px 48px -22px rgba(0,0,0,.6)}
/* content images are clickable to enlarge */
.prose img{cursor:zoom-in}

/* ---------- lightbox (click image to enlarge) ---------- */
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:4vh 4vw;background:rgba(4,4,6,.93);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .25s ease;cursor:zoom-out}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:92vh;border-radius:14px;
  box-shadow:0 40px 90px -18px rgba(0,0,0,.8);transform:scale(.95);
  transition:transform .3s cubic-bezier(.2,.9,.25,1)}
.lightbox.open img{transform:none}
.lb-close{position:fixed;top:18px;right:22px;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font:400 26px/1 var(--body);display:flex;align-items:center;justify-content:center;transition:.15s}
.lb-close:hover{background:rgba(255,255,255,.24)}
.prose picture{display:block;margin:1.6em 0;border-radius:18px;overflow:hidden}
.prose video{width:100%;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow);
  margin:1.6em 0;display:block;background:#000}
.prose .uk-text-center{text-align:center}
.prose .uk-container,.prose .uk-container-small,.prose .uk-container-xsmall{padding:0!important;max-width:none!important;margin:0!important}

/* ---- UIkit grid compat: revive the original multi-column layouts (dark) ---- */
.prose .uk-grid,.prose [uk-grid]{display:flex;flex-wrap:wrap;align-items:flex-start;margin:0 0 0 -32px;padding:0;list-style:none}
.prose .uk-grid > *,.prose [uk-grid] > *{padding-left:32px;box-sizing:border-box;min-width:0}
.prose .uk-grid-margin{margin-top:32px}
.prose .uk-child-width-1-1 > *{width:100%}
.prose .uk-width-1-1{width:100%}
/* fixed-width utilities */
.prose .uk-width-small{width:150px;max-width:100%}
.prose .uk-width-medium{width:300px;max-width:100%}
.prose .uk-width-large{width:450px;max-width:100%}
.prose .uk-width-xlarge{width:600px;max-width:100%}
@media (min-width:960px){
  .prose .uk-child-width-1-2\@m > *{width:50%}
  .prose .uk-child-width-1-3\@m > *{width:33.3333%}
  .prose .uk-child-width-1-4\@m > *{width:25%}
  .prose .uk-width-1-2\@m{width:50%}
  .prose .uk-width-1-3\@m{width:33.3333%}
  .prose .uk-width-2-3\@m{width:66.6667%}
  .prose .uk-width-1-4\@m{width:25%}
  .prose .uk-width-3-4\@m{width:75%}
  .prose .uk-width-1-5\@m{width:20%}
  .prose .uk-width-2-5\@m{width:40%}
  .prose .uk-width-3-5\@m{width:60%}
  .prose .uk-width-4-5\@m{width:80%}
  .prose .uk-width-1-6\@m{width:16.6667%}
  .prose .uk-width-5-6\@m{width:83.3333%}
  .prose .uk-width-auto\@m{width:auto}
  .prose .uk-width-expand\@m{flex:1 1 0;min-width:0}
  .prose .uk-grid-divider > :nth-child(n+2){border-left:3px solid;border-image:var(--grad) 1}
}

/* breadcrumb -> horizontal, muted */
.prose .uk-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;list-style:none;
  padding:0;margin:0 0 2.2em;font-size:14px;gap:0}
.prose .uk-breadcrumb > *{color:var(--muted)}
.prose .uk-breadcrumb > * > *{color:var(--muted)}
.prose .uk-breadcrumb a{color:var(--muted)}
.prose .uk-breadcrumb a:hover{color:var(--ink);text-decoration:none}
.prose .uk-breadcrumb > * + *::before{content:"—";margin:0 12px;color:var(--muted)}
/* images sit inside their grid column at a sensible size */
.prose .uk-grid img,.prose .uk-grid picture{margin:0}
/* top-align the first block of each grid column (photo vs text) */
.prose .uk-grid .uk-width-medium{margin-top:0 !important}
.prose .uk-grid blockquote{margin-top:0}
.prose .uk-grid .uk-margin,.prose .uk-grid .uk-margin-top{margin-top:16px}
/* the career/timeline rows read as cards */
.prose .global-h3-left{font-family:var(--head);color:var(--ink);font-size:20px;margin:0 0 .3em}

/* ---------- contacts page ---------- */
.contacts-page{padding:0;position:relative;overflow:hidden}
.contacts-grid{display:flex;align-items:center;position:relative;height:calc(100vh - 74px);min-height:600px}
.contacts-info{position:relative;z-index:2;width:100%;max-width:520px}
.contacts-info h1{margin:0}
.c-rows{display:flex;flex-direction:column;margin-top:32px;max-width:440px}
.c-row{display:flex;flex-direction:column;gap:6px;padding:20px 0;border-top:1px solid var(--line);text-decoration:none}
.c-row:last-child{border-bottom:1px solid var(--line)}
.c-label{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(92deg,var(--g1),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent}
.c-val{font-family:var(--head);font-weight:700;font-size:clamp(22px,2.8vw,32px);letter-spacing:-.01em;
  color:var(--ink);transition:color .18s}
.c-row:hover .c-val{color:var(--blue-t)}
/* big right-side illustration, bleeds toward the edge (transparent edges blend in) */
.contacts-visual{position:absolute;top:50%;right:0;transform:translateY(-50%);
  height:min(88vh,860px);z-index:1;margin:0;pointer-events:none}
.contacts-visual img{height:100%;width:auto;max-width:none;display:block;border:0}
@media(max-width:880px){
  .contacts-page{overflow:visible}
  .contacts-grid{flex-direction:column;align-items:stretch;min-height:0;padding:44px 0}
  .contacts-info{max-width:none}
  .contacts-visual{position:static;transform:none;height:auto;margin-top:22px}
  .contacts-visual img{width:100%;height:auto;max-width:680px;margin:0 auto}
}

/* ---------- rewards: white border on document scans ---------- */
.rewards-page .prose picture{position:relative;padding:7px;border-radius:16px;overflow:hidden;
  background:#fff}
.rewards-page .prose picture img{border-radius:10px !important;border:0 !important;
  display:block;width:100%;height:auto}

/* ---------- footer ---------- */
.foot{position:relative;overflow:hidden;background:#050507;color:#fff;border-radius:36px 36px 0 0;margin-top:110px;
  border-top:1px solid var(--line)}
.foot .glow{position:absolute;top:0;left:0;right:0;height:70%;pointer-events:none;
  background:radial-gradient(90% 150% at 50% -30%,rgba(177,90,248,.22),rgba(31,0,255,.12) 42%,transparent 72%)}
.foot .in{position:relative;padding:72px 0 40px;z-index:1}
.foot-contacts{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:baseline}
.foot-contacts a{position:relative;font-family:var(--head);font-weight:700;font-size:clamp(20px,2.6vw,28px);
  letter-spacing:-.01em;color:var(--ink);transition:color .18s}
.foot-contacts a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;
  background:var(--grad);transition:right .25s ease}
.foot-contacts a:hover{color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text}
.foot-contacts a:hover::after{right:0}
.foot-bottom{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;
  color:var(--muted);font-size:14px}

/* ---------- scroll-triggered reveal ---------- */
/* default (no JS): fully visible — no FOUC, content always shown */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(28px);will-change:opacity,transform;
  transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--rd,0s),
             transform .8s cubic-bezier(.2,.7,.2,1) var(--rd,0s)}
.js .reveal.in{opacity:1;transform:none}
.reveal.d1{--rd:.08s}.reveal.d2{--rd:.16s}.reveal.d3{--rd:.24s}

@media (prefers-reduced-motion:reduce){
  .ai-border::before,.portrait::before{animation:none}
  .js .reveal{transition:none;opacity:1;transform:none}
}