/* ═══════════════════════════════════════════════════════════════
   DOBROZUB — Shared UI Components & Elements (components.css)
   ═══════════════════════════════════════════════════════════════ */

/* ── Global Page Chrome ── */
#prog{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--gold-light),var(--gold));z-index:200;will-change:transform;box-shadow:0 0 12px rgba(209,180,99,.6)}
#skip-link{position:fixed;top:-60px;left:12px;z-index:500;background:#fff;color:#111;padding:12px 20px;border-radius:8px;font-size:14px;font-weight:600;transition:top .2s}
#skip-link:focus{top:12px}

/* ── Ambient Background ── */
#ambientBg .amb-blob{position:absolute;filter:blur(34px);border-radius:46% 54% 60% 40%/48% 42% 58% 52%;transform:translateZ(0)}
#ambientBg .amb-lines .rf-a{position:absolute;inset:0;background:repeating-conic-gradient(from 0deg,rgba(180,140,60,.15) 0deg .12deg,transparent .12deg 9deg)}
#ambientBg .amb-lines .rf-b{position:absolute;inset:0;background:conic-gradient(from 120deg,transparent 0deg,rgba(220,185,110,.2) 10deg,transparent 32deg);filter:blur(2px)}
@media(max-width:820px),(hover:none) and (pointer:coarse){
  .aurora{animation:none!important}
  #grain{display:none!important}
  #ambientBg .amb-lines{display:none!important}
  #ambientBg .amb-blob{filter:blur(34px)!important}
  #cursorGlow,#heroGlow{display:none!important}
}

/* ── Custom Cursor ── */
#cursorGlow{position:fixed;top:0;left:0;width:460px;height:460px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(209,180,99,.12) 0%,rgba(209,180,99,.04) 40%,transparent 70%);pointer-events:none;z-index:90;filter:blur(20px);will-change:transform;transition:opacity .4s ease}
#cur-dot{position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;background:var(--gold);pointer-events:none;z-index:1000;transform:translate(-50%,-50%);will-change:transform}
#cur-ring{position:fixed;top:0;left:0;width:34px;height:34px;border-radius:50%;border:1px solid rgba(209,180,99,.45);pointer-events:none;z-index:999;transform:translate(-50%,-50%);transition:width .3s,height .3s,border-color .3s,background .3s;will-change:transform}
#cur-ring.big{width:64px;height:64px;background:rgba(209,180,99,.1);border-color:rgba(209,180,99,.8)}
@media(max-width:900px),(hover:none){#cursorGlow,#cur-dot,#cur-ring{display:none}}

/* ── Header Responsive Controls ── */
.m-tog{display:none;flex-direction:column;gap:5px;padding:8px;cursor:pointer;background:none;border:none;margin-left:12px}
.m-tog span{display:block;width:22px;height:1.5px;background:#fff}
.m-tog span:last-child{width:14px}
@media(max-width:1050px){
  header nav,.d-nav{display:none!important}
  header .magnetic,.hdr-magnetic,.hdr-cta{display:none!important}
  .m-tog{display:flex!important}
}
@media(max-width:900px){
  header{padding:0 22px!important}
  section{padding-left:22px!important;padding-right:22px!important}
}

/* ── Card Components ── */
.trustcard[data-rv]{transition:opacity .8s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.22,1.6,.36,1)!important}
.trustcard{position:relative;isolation:isolate;transition:transform .5s cubic-bezier(.22,1.6,.36,1),box-shadow .5s!important;filter:blur(0) grayscale(0);opacity:1}
.trustcard:hover{transform:translateY(-12px) scale(1.035)!important;box-shadow:0 34px 64px -24px rgba(26,23,20,.32)!important}
.trustcard .fic{transition:transform .6s cubic-bezier(.34,1.56,.64,1),background .4s,border-color .4s}
.trustcard:hover .fic{transform:rotate(360deg) scale(1.18);background:var(--ink);border-color:var(--ink)}
.trustcard:hover .fic svg{stroke:var(--gold)}
.trustcard p{transition:transform .45s cubic-bezier(.22,1.6,.36,1)}
.trustcard:hover p:first-of-type{transform:translateX(5px)}
.trustcard:hover p:last-of-type{transform:translateX(3px)}
.trustcard:not(:hover)::before{animation-play-state:paused}

.fcard{background:#fff;border:1px solid rgba(26,23,20,.07);border-radius:20px;transition:all .4s}
.fcard:hover{transform:translateY(-8px);box-shadow:0 24px 50px -22px rgba(26,23,20,.18)}
.fcard:hover .fic{background:var(--ink);border-color:var(--ink)}
.fcard:hover .fic svg{stroke:var(--gold)}

.acard{position:relative;border-radius:20px;overflow:hidden;display:block;background:var(--card,#262523);transition:transform .4s}
.acard:hover{transform:translateY(-8px)}
.acard .a-img{transition:transform 1.1s cubic-bezier(.19,1,.22,1)}
.acard:hover .a-img{transform:scale(1.07)}

.doc{position:relative;border-radius:22px;overflow:hidden;cursor:pointer;background:#fff}
.doc .a-img{transition:transform 1.1s cubic-bezier(.19,1,.22,1)}
.doc:hover .a-img{transform:scale(1.05)}
.doc-q-text{max-height:0;overflow:hidden;opacity:0;transition:max-height .6s cubic-bezier(.19,1,.22,1),opacity .5s}
.doc:hover .doc-q-text{max-height:240px;opacity:1;margin-top:14px}
.doc-quote{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,15,11,.1) 0%,rgba(18,15,11,.92) 78%);display:flex;flex-direction:column;justify-content:flex-end;padding:30px;opacity:1;transition:background .4s,opacity .5s}
@media(hover:none){.doc-q-text{max-height:240px!important;opacity:1!important}.doc-hint{display:none!important}}

.revcard{background:#fff;border:1px solid rgba(26,23,20,.08);border-radius:18px}

.whocheck[data-rv]{transition:opacity .8s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.22,1.6,.36,1)!important}
.whocheck .fic{transition:all .4s cubic-bezier(.34,1.56,.64,1)}
.whocheck.in .fic{animation:whoPop .55s cubic-bezier(.34,1.56,.64,1) .55s backwards}
.whocheck:hover{border-color:rgba(209,180,99,.5)}
.whocheck:hover .fic{background:transparent!important;border-color:rgba(209,180,99,.6)!important}
.whocheck:hover .fic svg{stroke:var(--ink)!important}

.hmark{display:inline-flex;align-items:center;gap:9px;padding:9px 18px 9px 9px;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-pill);background:rgba(255,255,255,.045);backdrop-filter:blur(6px);font-size:13px;color:rgba(244,242,236,.78);transition:background .35s,border-color .35s,transform .35s;animation:markerPop .7s cubic-bezier(.19,1,.22,1) backwards}
.hmark:hover{background:rgba(255,255,255,.09);border-color:rgba(209,180,99,.4);transform:translateY(-3px)}
.hmark-ic{width:26px;height:26px;border-radius:50%;background:rgba(209,180,99,.14);display:flex;align-items:center;justify-content:center;flex-shrink:0}

.stepz-item:hover .stepz-n,.stepz-item.on .stepz-n{background:var(--gold);color:var(--ink)}
.stepz-item:last-child{padding-bottom:0!important}

/* ── Placeholders ── */
.ph{background:#cfc9bf;background-image:repeating-linear-gradient(135deg,rgba(26,23,20,.05) 0,rgba(26,23,20,.05) 1px,transparent 1px,transparent 8px);position:relative;overflow:hidden}
.ph-d{background:#26211a;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0,rgba(255,255,255,.035) 1px,transparent 1px,transparent 9px)}
.ph-lbl{position:absolute;bottom:14px;left:14px;font-family:'Montserrat',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(26,23,20,.45);background:rgba(245,243,239,.8);padding:3px 8px;border-radius:4px}
.ph-lbl.d{color:var(--muted);background:rgba(20,17,13,.6)}

/* ── Timeline ── */
.tl-num{font-family:var(--font-heading);font-size:48px;font-weight:700;line-height:1;color:rgba(26,23,20,.2);transition:all .4s}
.tl-row.on .tl-num{color:var(--ink);transform:translateX(4px)}
.tl-node{position:absolute;left:50%;width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid rgba(26,23,20,.2);transform:translate(-50%,-50%);transition:all .4s}
.tl-row.on .tl-node{background:var(--gold);border-color:var(--gold);box-shadow:0 0 16px rgba(209,180,99,.7)}
.tl-img{transition:transform 1.1s cubic-bezier(.19,1,.22,1)}
@media(max-width:900px){.tl-wrap{grid-template-columns:1fr!important}.tl-line,.tl-node{display:none!important}}

/* ── Logo Assembly Animation ── */
.dz-logo{filter:drop-shadow(0 0 10px rgba(209,180,99,.35))}
.dz-logo polygon{transform-box:view-box;transform-origin:540px 843.81px;will-change:transform,opacity}
.dz-logo g polygon:nth-child(1){animation-delay:0s}
.dz-logo g polygon:nth-child(2){animation-delay:.05s}
.dz-logo g polygon:nth-child(3){animation-delay:.1s}
.dz-logo g polygon:nth-child(4){animation-delay:.15s}
.dz-logo g polygon:nth-child(5){animation-delay:.2s}
.dz-logo g polygon:nth-child(6){animation-delay:.25s}
.dz-logo g polygon:nth-child(7){animation-delay:.3s}
.dz-logo g polygon:nth-child(8){animation-delay:.35s}
.dz-logo g polygon:nth-child(9){animation-delay:.4s}
.dz-logo g polygon:nth-child(10){animation-delay:.45s}

/* ── Layout Utilities ── */
.word{display:inline-block;overflow:hidden;vertical-align:top}
@media(max-width:900px){
  .grid2,.grid3,.grid4,.grid5,.pgrid,.monitor-grid{grid-template-columns:1fr!important}
  .mgrid{grid-template-columns:1fr 1fr!important}
  .dcard-r{border-left:none!important;padding-left:0!important;border-top:1px solid rgba(255,255,255,.09);padding-top:28px;margin-top:6px}
  .vid-scroll{overflow-x:auto!important}
}