:root{
  --bg:#0A0A0A;
  --bg-2:#101010;
  --panel:#EDEDED;
  --panel-ink:#0A0A0A;
  --ink:#101012;
  --fg:#FFFFFF;
  --fg-dim:rgba(255,255,255,0.55);
  --line:rgba(255,255,255,0.16);
  --line-dark:rgba(10,10,10,0.16);

  --wine:#5C0000;        /* corporate red — fills */
  --wine-deep:#3F0000;   /* darker — hover/active on light */
  --wine-lt:#D40000;     /* legible red for text on the dark theme */

  --holo-a:rgba(212,0,0,0.85);   /* corporate-red ghost */
  --holo-b:rgba(72,178,255,0.85);  /* cyan ghost */

  --container:1600px;
  --pad:clamp(20px,4vw,72px);
  --ease:cubic-bezier(0.22,1,0.36,1);

  --sans:'Helvetica Neue',Helvetica,Arial,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono','Roboto Mono',Menlo,Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.3;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
::selection{background:var(--wine);color:#fff;}
:focus-visible{outline:2px solid var(--wine-lt);outline-offset:3px;}

.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad);}

.slash{font-family:var(--mono);color:var(--wine-lt);letter-spacing:-0.05em;font-weight:700;}

/* ============ HOLOGRAM TEXT ============ */
.holo .ch{
  display:inline-block;
  opacity:0;
  will-change:opacity,filter,transform;
}
.holo .word{display:inline-block;white-space:nowrap;}
.holo .ch{transform-origin:left center;backface-visibility:hidden;}
/* default (scroll-triggered) — hologram UNFOLD, crisp, fast, left→right */
.holo.go .ch{
  animation:holoUnfold 0.55s var(--ease) both;
  animation-delay:calc(var(--i) * 0.022s);
}
@keyframes holoUnfold{
  0%{
    opacity:0;
    transform:perspective(520px) translateX(-0.42em) rotateY(-82deg) scaleX(0.35);
    text-shadow:0.16em 0 0 var(--holo-a),-0.16em 0 0 var(--holo-b);
  }
  45%{
    opacity:1;
    text-shadow:0.07em 0 0 var(--holo-a),-0.07em 0 0 var(--holo-b);
  }
  70%{
    transform:perspective(520px) translateX(0) rotateY(0) scaleX(1.04);
    text-shadow:0.03em 0 0 var(--holo-a),-0.03em 0 0 var(--holo-b);
  }
  85%{transform:perspective(520px) scaleX(0.99);}
  100%{opacity:1;transform:none;text-shadow:0 0 0 transparent;}
}
/* hero keeps the blur-bloom variant */
.holo[data-holo-now].go .ch{
  animation:holoChar 0.95s var(--ease) both;
  animation-delay:calc(var(--i) * 0.026s);
}
@keyframes holoChar{
  0%{
    opacity:0;
    filter:blur(18px);
    transform:translateY(0.22em) scale(1.14);
    text-shadow:0.11em 0 0 var(--holo-a),-0.11em 0 0 var(--holo-b);
  }
  35%{opacity:0.55;filter:blur(6px);text-shadow:0.07em 0 0 var(--holo-a),-0.07em 0 0 var(--holo-b);}
  50%{opacity:0.9;filter:blur(1.5px);transform:translateY(0) scale(1);}
  58%{opacity:0.35;}
  68%{opacity:1;filter:blur(0);text-shadow:0.02em 0 0 var(--holo-a),-0.02em 0 0 var(--holo-b);}
  80%{opacity:0.7;}
  100%{opacity:1;filter:blur(0);transform:none;text-shadow:0 0 0 transparent;}
}

/* generic reveal for non-heading blocks */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.rv.in{opacity:1;transform:none;}
.rv[data-anim="left"]{transform:translateX(-46px);}
.rv[data-anim="left"].in{transform:none;}
.rv[data-anim="right"]{transform:translateX(46px);}
.rv[data-anim="right"].in{transform:none;}

/* ============ HEADER ============ */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:200;
  background:transparent;
  transition:background .3s ease,border-color .3s ease;
  border-bottom:1px solid transparent;
}
.hdr.solid{background:rgba(10,10,10,0.82);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line);}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:88px;}
.logo{font-size:1.5rem;display:inline-flex;color:var(--fg);flex:none;}
.brand{display:inline-flex;align-items:center;color:currentColor;}
.brand-img{height:2.2em;width:auto;max-width:none;display:block;}
.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);}
.nav a{font-size:1.0625rem;font-weight:500;position:relative;padding:6px 0;white-space:nowrap;}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--wine-lt);transition:width .25s var(--ease);}
.nav a:hover::after{width:100%;}
.hdr-cta{display:flex;align-items:center;gap:18px;}
.icn{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,border-color .2s;}
.icn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg);}

.burger{display:none;width:46px;height:46px;flex-direction:column;align-items:center;justify-content:center;gap:6px;}
.burger span{width:26px;height:2px;background:var(--fg);transition:transform .25s var(--ease),opacity .25s;}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

.mobile{position:fixed;inset:0;z-index:199;background:var(--bg);display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 var(--pad);transform:translateY(-100%);transition:transform .45s var(--ease);}
.mobile.open{transform:none;}
.mobile a{font-size:clamp(2rem,9vw,3.5rem);font-weight:800;letter-spacing:-0.02em;padding:10px 0;}

/* ============ HERO ============ */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:120px;padding-bottom:clamp(28px,4vw,56px);position:relative;}
.hero-h,.hero-foot{position:relative;z-index:2;pointer-events:none;}
.hero-foot{pointer-events:auto;}
.hero-h{pointer-events:none;}

/* ---- cursor badge trail ---- */
.badge-layer{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;}
.fly-badge{
  position:absolute;top:0;left:0;
  width:180px;
  font-family:var(--mono);
  color:#fff;
  border-radius:4px;
  padding:11px 13px 13px;
  box-shadow:0 18px 40px rgba(0,0,0,0.45);
  transform-origin:center;
  will-change:transform,opacity;
  animation:badgePop 1.5s var(--ease) forwards;
  overflow:hidden;
}
.fly-badge::before{
  content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:34px;height:5px;border-radius:3px;background:rgba(255,255,255,0.55);
}
.fly-badge .fb-tag{display:flex;justify-content:space-between;align-items:center;font-size:8.5px;letter-spacing:0.14em;opacity:0.85;margin-top:10px;}
.fly-badge .fb-role{font-family:var(--sans);font-weight:800;font-size:22px;letter-spacing:-0.02em;line-height:1;margin:8px 0 9px;text-transform:uppercase;}
.fly-badge .fb-bar{height:14px;background-image:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px,#fff 4px 5px,transparent 5px 9px);opacity:0.9;border-radius:1px;}
.fly-badge .fb-id{font-size:8.5px;letter-spacing:0.1em;opacity:0.8;margin-top:8px;}
@keyframes badgePop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0.4) rotate(var(--rot));}
  16%{opacity:1;transform:translate(-50%,-50%) scale(1.04) rotate(var(--rot));}
  28%{transform:translate(-50%,-50%) scale(1) rotate(var(--rot));}
  100%{opacity:0;transform:translate(-50%,calc(-50% + 70px)) scale(0.92) rotate(var(--rot));}
}
.hero-h{
  font-weight:800;
  letter-spacing:-0.025em;
  line-height:0.9;
  font-size:clamp(3rem,11.5vw,10.5rem);
  text-transform:none;
  margin-bottom:auto;
  text-wrap:balance;
}
.hero-h .accent-word .ch{color:var(--wine);}
.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-top:clamp(40px,7vw,90px);}
.hero-cap{display:flex;gap:14px;max-width:46ch;font-size:clamp(1.0625rem,1.5vw,1.375rem);font-weight:500;line-height:1.35;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}

.btn{display:inline-flex;align-items:center;gap:12px;font-size:1.0625rem;font-weight:600;padding:18px 34px;border-radius:0;transition:background .2s,color .2s,transform .2s,box-shadow .2s,border-color .2s;}
.btn .ar{transition:transform .25s var(--ease);}
.btn:hover .ar{transform:translateX(5px);}
.btn-fill{background:var(--wine);color:#fff;}
.btn-fill:hover{background:#fff;color:var(--bg);}
.btn-out{border:1px solid var(--fg);color:var(--fg);}
.btn-out:hover{background:var(--fg);color:var(--bg);}
.btn-dark{background:var(--bg);color:#fff;}
.btn-dark:hover{background:var(--wine);}

/* scroll marks */
.scrollmark{font-family:var(--mono);font-size:1.4rem;color:var(--fg-dim);letter-spacing:-0.1em;}

/* ============ MARQUEE BAND (diagonal) ============ */
.band{
  background:var(--wine);
  color:#fff;
  padding:clamp(26px,3.4vw,46px) 0;
  margin-top:-2px;
  clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 3.5vw));
  position:relative;
}
.marquee{display:flex;overflow:hidden;gap:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.marquee-track{display:flex;flex-shrink:0;gap:48px;padding-right:48px;animation:scrollx 26s linear infinite;}
.marquee-track span{font-size:clamp(1.5rem,3.4vw,2.75rem);font-weight:800;letter-spacing:-0.01em;white-space:nowrap;display:flex;align-items:center;gap:48px;}
.marquee-track span::after{content:"✦";color:rgba(255,255,255,0.6);font-size:0.7em;}
@keyframes scrollx{to{transform:translateX(-50%);}}
.marquee:hover .marquee-track{animation-play-state:paused;}

/* ============ SECTION SHELL ============ */
.sec{padding-block:clamp(80px,11vw,180px);position:relative;}
.sec--panel{background:var(--panel);color:var(--panel-ink);}
.sec--panel .slash{color:var(--wine);}
.eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:0.9375rem;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:clamp(28px,4vw,52px);color:inherit;}
.eyebrow .slash{font-size:1.15em;}
.big-h{font-weight:800;letter-spacing:-0.025em;line-height:0.92;font-size:clamp(2.75rem,9vw,8rem);}

/* About */
.about-grid{display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,72px);align-items:end;}
.about-lead{font-size:clamp(1.375rem,2.6vw,2.25rem);font-weight:500;line-height:1.28;letter-spacing:-0.01em;max-width:24ch;}
.about-body{font-size:clamp(1.0625rem,1.4vw,1.3125rem);line-height:1.55;color:rgba(10,10,10,0.66);max-width:46ch;}

/* ============ SERVICE ROWS (hover invert) ============ */
.rows{border-top:1px solid var(--line);}
.row{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(20px,4vw,64px);
  padding:clamp(26px,4vw,52px) clamp(20px,3vw,44px);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  transition:padding-left .35s var(--ease);
}
.row .row-bg{position:absolute;inset:0;background:var(--wine);transform:scaleY(0);transform-origin:bottom;transition:transform .4s var(--ease);z-index:0;}
.row>*{position:relative;z-index:1;}
.row:hover{padding-left:clamp(34px,4.5vw,72px);}
.row:hover .row-bg{transform:scaleY(1);}
.row-num{font-family:var(--mono);font-size:1.0625rem;color:var(--fg-dim);transition:color .3s;}
.row:hover .row-num{color:rgba(255,255,255,0.7);}
.row-main{min-width:0;}
.row-title{font-size:clamp(1.875rem,5.6vw,4.75rem);font-weight:800;letter-spacing:-0.025em;line-height:0.98;}
.row-desc{font-size:clamp(1rem,1.3vw,1.1875rem);color:var(--fg-dim);max-width:62ch;margin-top:14px;line-height:1.5;opacity:0;max-height:0;overflow:hidden;transition:opacity .35s var(--ease),max-height .45s var(--ease),margin-top .35s;}
.row:hover .row-desc{opacity:1;max-height:140px;margin-top:18px;color:rgba(255,255,255,0.82);}
.row-ar{width:clamp(48px,5vw,76px);height:clamp(48px,5vw,76px);border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .3s,border-color .3s,transform .3s var(--ease);}
.row:hover .row-ar{background:#fff;border-color:#fff;color:var(--wine);transform:rotate(-45deg) scale(1.05);}
.row-ar svg{width:42%;height:42%;}

/* ============ WHY / STAT ============ */
.why-grid{display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,64px);align-items:center;}
.stat{line-height:0.82;}
.stat .num{font-weight:800;letter-spacing:-0.03em;font-size:clamp(7rem,26vw,22rem);color:var(--wine);display:block;}
.stat .num sup{font-size:0.34em;vertical-align:top;}
.stat .lbl{font-size:clamp(1.125rem,1.6vw,1.5rem);font-weight:600;margin-top:8px;}
.adv-list{display:flex;flex-direction:column;}
.adv{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--line);align-items:start;}
.adv:first-child{border-top:1px solid var(--line);}
.adv .an{font-family:var(--mono);font-size:1.0625rem;color:var(--wine);padding-top:4px;}
.adv p{font-size:clamp(1.0625rem,1.5vw,1.375rem);font-weight:500;line-height:1.35;letter-spacing:-0.01em;}

/* ============ PROCESS ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);}
.step{background:var(--panel);padding:clamp(28px,3vw,44px);min-height:clamp(240px,24vw,340px);display:flex;flex-direction:column;}
.step .sn{font-weight:800;font-size:clamp(3rem,5vw,5rem);letter-spacing:-0.03em;line-height:1;color:var(--wine);}
.step h3{font-size:clamp(1.25rem,1.8vw,1.625rem);font-weight:700;margin-top:auto;letter-spacing:-0.01em;color:var(--ink);}
.step p{font-size:1.0625rem;color:rgba(10,10,10,0.6);margin-top:12px;line-height:1.5;}

/* ============ CONTACT ============ */
.contact{background:var(--bg);}
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(44px,6vw,80px);}
.contact-info .lead{font-size:clamp(1.25rem,2vw,1.75rem);font-weight:500;line-height:1.35;max-width:24ch;margin:clamp(28px,4vw,44px) 0;letter-spacing:-0.01em;}
.contacts{display:flex;flex-direction:column;}
.contacts a{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;border-top:1px solid var(--line);font-size:clamp(1.25rem,2.4vw,2rem);font-weight:700;letter-spacing:-0.01em;transition:color .2s,padding-left .3s var(--ease);}
.contacts a:last-child{border-bottom:1px solid var(--line);}
.contacts a .ck{font-family:var(--mono);font-size:0.9375rem;font-weight:500;color:var(--fg-dim);letter-spacing:0.04em;text-transform:uppercase;}
.contacts a:hover{color:var(--wine-lt);padding-left:14px;}

form{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line);}
.field{position:relative;border-bottom:1px solid var(--line);}
.field input,.field textarea{width:100%;background:transparent;border:none;color:#fff;font-family:inherit;font-size:1.25rem;font-weight:500;padding:26px 0 14px;}
.field textarea{resize:vertical;min-height:90px;}
.field label{position:absolute;left:0;top:26px;font-size:1.25rem;color:var(--fg-dim);pointer-events:none;transition:transform .25s var(--ease),font-size .25s var(--ease),color .25s;}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{transform:translateY(-22px);font-size:0.8125rem;color:var(--wine);font-family:var(--mono);letter-spacing:0.04em;text-transform:uppercase;}
.field input:focus,.field textarea:focus{outline:none;}
.field::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--wine);transition:width .35s var(--ease);}
.field:focus-within::after{width:100%;}
.form-foot{display:flex;flex-direction:column;gap:18px;margin-top:28px;}
.form-note{font-size:0.875rem;color:var(--fg-dim);line-height:1.5;}
.form-ok{display:none;align-items:center;gap:10px;color:var(--wine);font-weight:600;}
.form-ok.show{display:flex;}

/* ============ EVENT-BADGE CONTACT FORM ============ */
.badge-stage{perspective:1600px;display:flex;flex-direction:column;align-items:center;padding-top:30px;position:relative;}
/* branded ribbon draping straight down along the right side of the pass */
.lan-ribbon{
  position:absolute;top:64px;right:calc(50% - min(258px,54%));z-index:0;
  width:52px;height:clamp(280px,34vw,400px);
  transform-origin:top center;
  transform:rotate(7deg);
  background:linear-gradient(90deg,var(--wine-deep),var(--wine) 28%,var(--wine) 72%,var(--wine-deep));
  box-shadow:0 16px 32px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.10);
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 16px),0 100%);
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:26px;overflow:hidden;pointer-events:none;
}
.lan-ribbon span{
  writing-mode:vertical-rl;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.92);white-space:nowrap;
}
.lanyard{position:relative;display:flex;justify-content:center;align-items:flex-start;height:42px;z-index:3;width:100%;}
.lan-strap{position:absolute;top:-6px;width:30px;height:64px;background:linear-gradient(var(--wine),var(--wine-deep));transform-origin:top center;border-radius:2px;box-shadow:0 2px 8px rgba(0,0,0,.4);}
.lan-l{transform:rotate(22deg);left:calc(50% - 30px);}
.lan-r{transform:rotate(-22deg);left:50%;}
.lan-clip{position:relative;width:26px;height:16px;margin-top:34px;border-radius:4px;background:linear-gradient(#eef0f3,#b9bdc6);box-shadow:0 2px 6px rgba(0,0,0,.45),inset 0 0 0 2px rgba(255,255,255,.5);}
.pass-sway{width:min(440px,100%);margin-top:-4px;perspective:1400px;position:relative;z-index:2;}
.pass-flip{position:relative;width:100%;transform-style:preserve-3d;transform-origin:top center;}
.pass-card{
  position:relative;width:100%;
  background:linear-gradient(168deg,#ffffff,#eef0f3);color:var(--ink);
  border-radius:18px;padding:clamp(24px,3vw,36px) clamp(22px,3vw,32px) clamp(22px,3vw,30px);
  box-shadow:0 44px 90px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.05);
  transform:rotateY(180deg) translateZ(1px);backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
/* ---- front face: dark logo side, REGISTRATION in wine ---- */
.pass-front{
  position:absolute;inset:0;z-index:2;border-radius:18px;overflow:hidden;
  background:linear-gradient(165deg,#1b1b1f,#0a0a0c);color:#fff;
  box-shadow:0 44px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.10);
  transform:rotateY(0) translateZ(1px);backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(12px,2vw,18px);padding:clamp(28px,4vw,40px) clamp(22px,3vw,32px);
}
.pass-front::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--wine);}
.pass-front .pass-hole{background:#000;box-shadow:inset 0 1px 2px rgba(0,0,0,.9),0 0 0 2px rgba(255,255,255,.12);}
.pf-logo{width:min(62%,220px);height:auto;display:block;}
.pf-sub{font-family:var(--mono);font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.85);}
.pass-front .pass-barcode{width:100%;margin:6px 0 0;opacity:.95;
  background-image:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 3px,#fff 3px 5px,transparent 5px 8px,#fff 8px 9px,transparent 9px 12px);}
.pf-id{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;color:rgba(255,255,255,.55);}
.pass-hole{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:58px;height:11px;border-radius:7px;background:#0a0a0a;box-shadow:inset 0 1px 2px rgba(0,0,0,.85);}
.pass-head{margin:16px 0 18px;padding-bottom:16px;border-bottom:1px dashed rgba(10,10,10,.2);}
.pass-brand{display:block;font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--wine);}
.pass-type{display:block;margin-top:5px;font-weight:800;font-size:clamp(1.5rem,3.4vw,2rem);letter-spacing:-.02em;line-height:1;}
.pass-card .field{position:relative;border-bottom:1px solid rgba(10,10,10,.16);}
.pass-card .field input,.pass-card .field textarea{width:100%;background:transparent;border:none;color:var(--ink);font-family:inherit;font-size:1.0625rem;font-weight:600;padding:22px 0 11px;}
.pass-card .field textarea{resize:vertical;min-height:60px;}
.pass-card .field label{position:absolute;left:0;top:22px;font-size:1.0625rem;color:rgba(10,10,10,.5);pointer-events:none;transition:transform .25s var(--ease),font-size .25s var(--ease),color .25s;}
.pass-card .field input:focus+label,.pass-card .field input:not(:placeholder-shown)+label,
.pass-card .field textarea:focus+label,.pass-card .field textarea:not(:placeholder-shown)+label{transform:translateY(-18px);font-size:.6875rem;color:var(--wine);font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;}
.pass-card .field input:focus,.pass-card .field textarea:focus{outline:none;}
.pass-card .field::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--wine);transition:width .35s var(--ease);}
.pass-card .field:focus-within::after{width:100%;}
.pass-card .field.invalid{border-bottom-color:var(--wine-lt);}
.pass-card .field.invalid label{color:var(--wine-lt);}
.field-err{display:block;color:var(--wine-lt);font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;margin-top:6px;min-height:1em;}
.pass-barcode{height:44px;margin:18px 0 4px;background-image:repeating-linear-gradient(90deg,#0a0a0a 0 2px,transparent 2px 3px,#0a0a0a 3px 5px,transparent 5px 8px,#0a0a0a 8px 9px,transparent 9px 12px);}
.pass-card .form-foot{margin-top:16px;gap:14px;}
.pass-card .form-note{color:rgba(10,10,10,.5);}
.pass-card .form-ok{color:var(--wine);}
.pass-card .btn-fill{background:var(--wine);color:#fff;}
.pass-card .btn-fill:hover{background:var(--wine-deep);color:#fff;}
/* sequence (driven by the .rv observer toggling .in on .badge-stage, then JS
   adds .flipped ~1.5s later): fly in logo-face-first → hold → flip 180° to the form */
.badge-stage .pass-flip{
  opacity:0;transform:translateY(-34px) rotateX(-86deg) rotateY(0deg);
  transition:transform .95s cubic-bezier(.34,1.3,.45,1),opacity .5s var(--ease);
}
.badge-stage.in .pass-flip{opacity:1;transform:translateY(0) rotateX(0) rotateY(0deg);}
.badge-stage.in .pass-flip.flipped{
  transform:translateY(0) rotateX(0) rotateY(180deg);
  transition:transform .9s cubic-bezier(.5,.08,.24,1.06),opacity .5s var(--ease);
}
.badge-stage.in .pass-sway{animation:passSway 6s ease-in-out 3.4s infinite;}
.badge-stage .lanyard{opacity:0;transition:opacity .45s var(--ease) .1s;}
.badge-stage.in .lanyard{opacity:1;}
@keyframes passSway{0%,100%{transform:rotate(0);}28%{transform:rotate(1.2deg);}72%{transform:rotate(-1.2deg);}}

/* ============ PLATFORM / CAPABILITIES ============ */
.plat-h{font-weight:800;letter-spacing:-0.02em;line-height:1.06;font-size:clamp(1.9rem,4.2vw,3.3rem);max-width:24ch;}
.plat-sub{max-width:62ch;margin-top:clamp(18px,2vw,26px);font-size:clamp(1.0625rem,1.5vw,1.3125rem);line-height:1.5;color:var(--fg-dim);}
.plat-grid{display:grid;grid-template-columns:1fr;gap:clamp(14px,1.6vw,20px);margin-top:clamp(32px,4vw,52px);}
.pcard{position:relative;border:1px solid var(--line);border-radius:12px;background:#0e0e10;padding:clamp(24px,2.4vw,32px);transition:transform .35s var(--ease),border-color .35s var(--ease);}
.pcard:hover{transform:translateY(-4px);border-color:var(--wine);}
.pcard-n{font-family:var(--mono);font-size:.9rem;font-weight:700;letter-spacing:.12em;color:var(--wine-lt);}
.pcard-t{font-size:clamp(1.2rem,1.7vw,1.5rem);font-weight:700;letter-spacing:-.01em;margin:14px 0 10px;color:#fff;}
.pcard-d{font-size:1rem;line-height:1.55;color:var(--fg-dim);}
.plat-shots{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.2vw,26px);margin-top:clamp(34px,4vw,56px);}
.pshot{margin:0;}
.pshot .ex{aspect-ratio:16/10;}
.pshot-cap{margin-top:14px;font-size:1.0625rem;line-height:1.5;color:var(--fg-dim);}
.plat-foot{margin-top:clamp(30px,3.6vw,48px);max-width:66ch;border-left:3px solid var(--wine);padding-left:18px;font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.5;color:#fff;font-weight:500;}
@media(min-width:640px){.plat-grid{grid-template-columns:repeat(2,1fr);} .plat-shots{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.plat-grid{grid-template-columns:repeat(3,1fr);}}

/* ============ EXAMPLES / GALLERY ============ */
.ex-lead{max-width:54ch;color:var(--fg-dim);font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.55;margin-bottom:clamp(28px,4vw,48px);}
/* ---- gallery as Instagram-style swipe carousel ---- */
.ex-carousel{position:relative;}
.ex-track-wrap{position:relative;}
.ex-grid{display:flex;gap:clamp(14px,1.6vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none;}
.ex-grid::-webkit-scrollbar{display:none;}
.ex-grid>.ex{flex:0 0 clamp(270px,82%,440px);scroll-snap-align:center;}
.ex-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:clamp(44px,4vw,54px);height:clamp(44px,4vw,54px);border-radius:50%;background:rgba(16,16,18,.82);border:1px solid var(--line);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(8px);transition:background .2s,border-color .2s,opacity .2s;}
.ex-nav svg{width:40%;height:40%;}
.ex-nav:hover{background:var(--wine);border-color:var(--wine);}
.ex-prev{left:6px;} .ex-next{right:6px;}
.ex-nav:disabled{opacity:0;pointer-events:none;}
.ex-dots{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:22px;}
.ex-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);border:none;padding:0;cursor:pointer;transition:background .25s,width .25s;}
.ex-dot.active{background:var(--wine-lt);width:24px;border-radius:4px;}
.ex{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--line);background:#0e0e10;aspect-ratio:4/3;}
.ex-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;z-index:2;transition:transform .55s var(--ease);}
.ex.has-img:hover .ex-img{transform:scale(1.045);}
.ex-ph{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:18px;text-align:center;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,0.035) 0 9px,transparent 9px 18px),radial-gradient(circle at 50% 38%,#171719,#0b0b0d);}
.ex-ph svg{width:34px;height:34px;color:var(--fg-dim);opacity:.6;}
.ex-ph-tag{font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--wine-lt);}
.ex-ph-cap{font-size:1.0625rem;font-weight:600;color:#fff;letter-spacing:-.01em;}
.ex-ph-hint{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--fg-dim);}
.ex-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;margin:0;padding:16px;font-family:var(--mono);font-size:.82rem;letter-spacing:.04em;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.78));opacity:0;transform:translateY(10px);transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none;}
.ex.has-img:hover .ex-cap{opacity:1;transform:none;}
.ex.has-img:hover{border-color:var(--wine);}
@media(min-width:640px){.ex-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.ex-grid{grid-template-columns:repeat(3,1fr);}}

/* ============ FOOTER ============ */
.ftr{background:var(--bg);border-top:1px solid var(--line);padding-block:clamp(56px,7vw,96px) 36px;}
.ftr-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-bottom:56px;}
.ftr .logo{font-size:2rem;margin-bottom:18px;}
.ftr h4{font-family:var(--mono);font-size:0.875rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--fg-dim);margin-bottom:20px;}
.ftr ul{list-style:none;display:flex;flex-direction:column;gap:13px;}
.ftr ul a{color:rgba(255,255,255,0.78);font-size:1.0625rem;transition:color .2s;}
.ftr ul a:hover{color:#fff;}
.ftr-desc{color:var(--fg-dim);font-size:1.0625rem;line-height:1.55;max-width:34ch;}
.ftr-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:30px;border-top:1px solid var(--line);font-family:var(--mono);font-size:0.8125rem;color:var(--fg-dim);}
.made-by a{color:var(--fg);text-decoration:none;transition:color .2s;}
.made-by a:hover{color:var(--wine-lt);}

/* ============ MAGNETIC WORDMARK ============ */
.mag-wrap{padding-block:clamp(36px,6vw,80px) clamp(48px,6vw,90px);border-bottom:1px solid var(--line);overflow:hidden;}
.mag-word{
  display:flex;flex-direction:column;align-items:center;
  font-family:'Big Shoulders Display','Arial Narrow',var(--sans);
  font-weight:700;text-transform:uppercase;line-height:0.82;
  color:var(--fg-dim);
  cursor:default;user-select:none;
}
/* condensed to match the logo's ultra-narrow letterforms */
.mag-line{display:flex;flex-wrap:nowrap;justify-content:center;transform:scaleX(.8);transform-origin:center;}
.mag-l1{font-size:clamp(2.9rem,12.2vw,11.6rem);letter-spacing:0.04em;}
.mag-l2{font-size:clamp(2.9rem,12.2vw,11.6rem);letter-spacing:0.012em;margin-top:clamp(6px,1vw,16px);}
.mag-word .ch{display:inline-block;transition:transform .35s var(--ease),color .35s var(--ease);will-change:transform;}

/* ============ ROTATING TELEGRAM BADGE ============ */
.tg-badge{
  position:fixed;right:clamp(18px,3vw,40px);bottom:clamp(18px,3vw,40px);z-index:150;
  width:clamp(108px,12vw,148px);height:clamp(108px,12vw,148px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(0.6) rotate(-30deg);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.tg-badge.show{opacity:1;transform:none;pointer-events:auto;}
.tg-badge:hover{transform:scale(1.06);}
.tg-badge .ring{position:absolute;inset:0;animation:spin 14s linear infinite;z-index:4;}
.tg-badge:hover .ring{animation-duration:6s;}
.tg-badge .ring text{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;fill:#fff;}
/* flat dark plate behind the rotating text (no sphere) */
.tg-badge .ring-band{position:absolute;inset:0;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 50% 32%,#1b1c20,#0a0a0c 80%);
  box-shadow:0 14px 34px rgba(0,0,0,0.5),inset 0 0 0 1px rgba(255,255,255,0.14);
}
.tg-badge .tg-ic{
  position:relative;z-index:2;width:50%;height:50%;border-radius:50%;
  background:var(--wine);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.4),0 0 0 4px rgba(10,10,10,0.4);
}
.tg-badge .tg-ic svg{width:54%;height:54%;color:#fff;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ============ RESPONSIVE ============ */
@media (min-width:768px){
  .about-grid{grid-template-columns:1.1fr 0.9fr;}
  .why-grid{grid-template-columns:0.9fr 1.1fr;}
  .contact-grid{grid-template-columns:0.95fr 1.05fr;}
}
@media (max-width:1023px){
  .steps{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:767px){
  .nav,.hdr-cta .btn,.hdr-cta .icn{display:none;}
  .burger{display:flex;}
  .hdr-in{height:72px;}
  .row{grid-template-columns:auto 1fr;}
  .row-ar{display:none;}
  .row-desc{opacity:1;max-height:none;margin-top:14px;color:var(--fg-dim);}
  .steps{grid-template-columns:1fr;}
  .ftr-top{grid-template-columns:1fr;gap:40px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .holo .ch{opacity:1 !important;}
  .rv{opacity:1 !important;transform:none !important;}
  .marquee-track{animation:none !important;}
  .tg-badge .ring{animation:none !important;}
  .tg-badge{opacity:1 !important;transform:none !important;pointer-events:auto !important;}
  .badge-stage .pass-flip{opacity:1 !important;transform:rotateY(180deg) !important;animation:none !important;}
  .badge-stage .pass-sway{animation:none !important;}
  .badge-stage .lanyard{opacity:1 !important;}
}