/* AGNTIX PRESTIGE v5.1 */

/* Global Typography & Reveal */
h1,h2,h3,h4,h5,h6,.tp-section-title-dirtyline,.tp_text_invert_2,.tp-hero-title{font-family:'Outfit',sans-serif!important;letter-spacing:-0.03em!important}
.reveal-line{overflow:hidden;display:block;margin-bottom:2px}
.block-reveal{display:block;opacity:1}

/* Official Brand Logo Gradient (Blue, Pink, Orange) */
.gradient-text-anim {
    background: linear-gradient(135deg, #0091ff 0%, #e93b6e 40%, #f99d4e 70%, #0091ff 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    display: inline-block !important;
    animation: shine 6s linear infinite !important;
    font-weight: 900;
}

/* About Page Matching Color Scheme (INSPIRING Style) */
@keyframes textGradientMove {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

.inspiring-text-anim {
    background: linear-gradient(90deg, #e93b6e 0%, #f99d4e 50%, #e93b6e 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: inline-block !important;
    animation: textGradientMove 4s linear infinite !important;
}

.about-pink-text {
    background-image: linear-gradient(90deg, #e93b6e 0%, #f99d4e 50%, #e93b6e 100%) !important;
    background-size: 200% auto !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block !important;
    animation: textGradientMove 4s linear infinite !important;
    -webkit-animation: textGradientMove 4s linear infinite !important;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

/* Horizontal Kinetic Services Showcase */
.services-horizontal-area {
    width: 100%;
    background: #fff;
}

.horizontal-scroll-container {
    display: flex;
    flex-wrap: nowrap;
    width: 500%; /* Adjust based on total slides (Header + 4 services) */
    height: 100vh;
    will-change: transform;
}

.h-slide {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

.h-slides-wrapper {
    display: flex;
}

.h-slide-item {
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 100px;
    background: #fff;
}

.h-slide-inner {
    display: flex;
    align-items: center;
    gap: 100px;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

.h-slide-visual {
    width: 50%;
    height: 60vh;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0,0,0,0.1);
    transform: scale(0.9);
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.h-slide-item.active .h-slide-visual {
    transform: scale(1);
}

.h-slide-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h-slide-info {
    width: 40%;
}

.h-num {
    font-size: 18px;
    font-weight: 800;
    color: #ff4d94;
    display: block;
    margin-bottom: 20px;
    font-family: 'Outfit', sans-serif;
}

.h-title {
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 900;
    color: #111;
    line-height: 1;
    margin-bottom: 30px;
    letter-spacing: -3px;
}

.h-desc {
    font-size: 20px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 450px;
}

.h-link {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    border-bottom: 2px solid #111;
    padding-bottom: 5px;
    transition: all 0.3s ease;
}

.h-link:hover {
    color: #ff4d94;
    border-color: #ff4d94;
}

@media (max-width: 991px) {
    .h-slide-inner {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }
    .h-slide-visual, .h-slide-info {
        width: 100%;
    }
    .h-slide-visual {
        height: 40vh;
    }
    .h-desc {
        margin: 0 auto 30px;
    }
}


.typewriter-cursor{color:#e93b6e;animation:blink .8s infinite;font-weight:400;margin-left:2px;-webkit-text-fill-color:#e93b6e}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* Hero Buttons */
.modern-cta-btn{transition:all .4s ease!important}
.modern-cta-btn:hover{transform:scale(1.05) translateY(-3px)!important;box-shadow:0 20px 40px rgba(255,77,148,.4)!important;filter:brightness(1.1)}
.hero-video-btn:hover{color:#ff4d94!important}
.hero-video-btn:hover .play-icon-wrap{background:#ff4d94!important;color:#fff!important;transform:scale(1.1)}

/* Hero background video — the brand loop clip, washed dark so it reads as
   ambient texture behind the copy rather than competing with it. */
.hero-bg-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.4}
/* Same flattening layer as .hero-dark in supreme_branding.css, and for the
   same reason: this overlay sits ON TOP of .hero-dark (a normal-flow child
   paints over its parent's own background), carrying an unflattened copy of
   the same radial gradient — so even after .hero-dark itself was fixed, this
   overlay alone was still enough to reproduce the seam against the section
   below at nearly full strength. Solid (not the radial's own .95 alpha) so
   the match is exact regardless of what's further behind. */
.hero-bg-video-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;background:linear-gradient(180deg,transparent 0,transparent calc(100% - 180px),#070a12 calc(100% - 60px)),radial-gradient(120% 100% at 78% 38%,rgba(22,32,58,.75) 0%,rgba(12,17,32,.88) 45%,rgba(7,10,18,.95) 100%)}

/* Hero Ambient */
.modern-lining-bg{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.6;pointer-events:none;z-index:0}
.gsap-line{position:absolute;width:1px;height:150%;background:linear-gradient(to bottom,transparent,rgba(255,77,148,.1),transparent)}
.modern-spotlight-cursor{position:fixed;top:0;left:0;width:30px;height:30px;border:2px solid #ff4d94;border-radius:50%;pointer-events:none;z-index:9999;opacity:0;transition:width .3s,height .3s,background .3s,border .3s;box-shadow:0 0 20px rgba(255,77,148,.4)}
.gsap-tech-icon{position:absolute;cursor:pointer;pointer-events:auto;z-index:3;transition:box-shadow .3s ease,transform .3s ease;display:flex;align-items:center;justify-content:center}
.gsap-tech-icon:hover{box-shadow:0 20px 40px rgba(0,0,0,0.12)!important;z-index:100!important;transform:scale(1.1)}

.hero-floating-graphic{position:relative;width:100%;height:560px;display:flex;justify-content:center;align-items:center;z-index:5;overflow:visible}

.gsap-main-float{position:relative;z-index:2;transition:transform 0.1s ease-out}
.hero-parallax-content{transition:transform 0.1s ease-out}

/* Marquee */
.tech-marquee-area{padding:60px 0;background:#fff;border-top:1px solid rgba(0,0,0,.05);border-bottom:1px solid rgba(0,0,0,.05);overflow:hidden;position:relative;z-index:10}
.marquee-track{display:flex;width:max-content;animation:marquee-scroll 40s linear infinite}
@keyframes marquee-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.tech-item{padding:0 50px;font-size:18px;font-weight:700;color:#111;display:flex;align-items:center;gap:15px;white-space:nowrap;text-transform:uppercase;letter-spacing:1px}
.tech-item i{color:#ff4d94;font-size:22px}

/* Innovation Frontier */
.innovation-frontier-area{padding:160px 0;background:#fff;position:relative;overflow-x:clip;perspective:2000px}
.circuit-bg{position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle,rgba(0,0,0,.03) 1px,transparent 1px);background-size:30px 30px;pointer-events:none;z-index:0}
.frontier-atmosphere{position:absolute;top:-10%;left:-10%;width:120%;height:120%;background:radial-gradient(circle at 20% 30%,rgba(255,77,148,.08) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(77,148,255,.06) 0%,transparent 50%);pointer-events:none;z-index:0;filter:blur(80px)}

.stat-chip{display:inline-flex!important;align-items:center;gap:10px;padding:8px 20px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:50px;font-size:12px;font-weight:800;color:#111;text-transform:uppercase;letter-spacing:1px;box-shadow:0 10px 30px rgba(0,0,0,.03);width:fit-content!important;align-self:flex-start!important}
.stat-chip i{color:#ff4d94}

.modern-glass-panel{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:24px;padding:40px;box-shadow:0 20px 60px rgba(0,0,0,.04);position:relative;overflow:hidden}
.modern-glass-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#ff4d94,#4d94ff,#20c997)}
.metric-badge{padding:6px 14px;background:#f8f9fa;border-radius:50px;font-size:11px;font-weight:800;color:#111;display:inline-flex;align-items:center;gap:8px}
.metric-badge i{color:#ff4d94}

.modern-btn-dark{display:inline-flex;align-items:center;padding:14px 30px;background:#111;color:#fff;border-radius:50px;font-size:13px;font-weight:800;text-decoration:none;text-transform:uppercase;letter-spacing:1px;transition:all .3s ease;box-shadow:0 10px 30px rgba(0,0,0,.1)}
.modern-btn-dark:hover{background:#ff4d94;color:#fff;transform:translateY(-3px);box-shadow:0 15px 40px rgba(255,77,148,.3)}
.modern-btn-dark i{margin-left:10px;transition:transform .3s ease}
.modern-btn-dark:hover i{transform:translateX(5px)}

/* Innovation Card - Extra Compact Premium */
.innovation-card{background:#fff!important;border:1px solid rgba(0,0,0,0.05)!important;border-radius:16px!important;padding:22px!important;transition:all .4s ease!important;position:relative!important;transform-style:preserve-3d;display:flex!important;flex-direction:column!important;height:100%!important;box-shadow:0 8px 25px rgba(0,0,0,0.02)!important;opacity:1!important;visibility:visible!important}
.innovation-card:hover{border-color:#ff4d94!important;box-shadow:0 20px 50px rgba(0,0,0,0.05)!important;transform:translateY(-5px)}
.innovation-card .card-icon{width:40px!important;height:40px!important;font-size:16px!important;border-radius:10px!important;margin-bottom:15px!important}
.innovation-card .card-title{font-size:16px!important;margin-bottom:10px!important;line-height:1.2!important;font-weight:800!important}
.innovation-card p{font-size:12px!important;line-height:1.4!important;margin-bottom:15px!important;color:#777!important}

.card-metrics-row{display:grid;grid-template-columns:1fr;gap:10px}
.metric-item{position:relative}
.metric-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#999;display:block;margin-bottom:3px}
.metric-value{font-size:14px;font-weight:900;color:#111;float:right;margin-top:-18px}
.metric-bar{width:100%;height:4px;background:#f0f0f0;border-radius:2px;margin-top:6px;overflow:hidden}
.bar-fill{height:100%;background:#ff4d94;border-radius:2px;transition:width 1.5s cubic-bezier(.16,1,.3,1)}
.card-footer-wrap{margin-top:auto;padding-top:15px;border-top:1px solid rgba(0,0,0,.05)}
.card-footer-wrap .service-points-list div{font-size:12px!important}
.card-footer-wrap a{font-size:11px!important}

/* Impact Section - Original Premium */
.impact-area{background:#fff;padding:160px 0;position:relative}
.impact-intro-text{font-size:clamp(28px,3.5vw,48px);font-weight:900;line-height:1.2;color:#111;margin-bottom:0;letter-spacing:-1.5px;max-width:1000px}
.impact-label{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:2px;color:#999;margin-bottom:25px;display:block}
.impact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:80px}
.impact-card{background:#fff!important;border:2px solid #f2f2f2!important;padding:60px 40px;border-radius:30px;position:relative;transition:all .5s ease;box-shadow:0 10px 40px rgba(0,0,0,0.03);min-height:320px;display:flex;flex-direction:column;justify-content:center;opacity:1!important;visibility:visible!important;margin-top:0!important}
.impact-card:hover{transform:translateY(-15px);border-color:#ff4d94!important;box-shadow:0 40px 100px rgba(255,77,148,0.12)}
.impact-number{font-size:85px;font-weight:900;line-height:1;color:#111;letter-spacing:-4px}
.impact-suffix{font-size:40px;font-weight:800;color:#ff4d94}
.impact-trend{font-size:12px;font-weight:800;color:#20c997;margin-bottom:20px}
.impact-desc{font-size:14px;color:#888;line-height:1.6;margin-top:15px}
.impact-pulse{width:12px;height:12px;background:#ff4d94;border-radius:50%;position:absolute;top:40px;left:40px;box-shadow:0 0 15px rgba(255,77,148,.5);animation:impact-dot-pulse 2s infinite}
@keyframes impact-dot-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.4}}

/* Blueprint Path - Compact */
/* ---------------------------------------------------------------------------
   Roadmap — alternating zigzag timeline, 7 stages kept tight enough to read
   as one slide. js/roadmap-timeline.js draws .roadmap-line__fill down as
   the section scrolls into view and fades each .roadmap-node in from its
   side; the CSS alone (no JS) already lays every node out correctly.
   --------------------------------------------------------------------------- */

.roadmap-area{background:#fdfdfd;padding:120px 0 130px;position:relative;overflow:hidden}

.roadmap-timeline{position:relative;padding:10px 0}

.roadmap-line{position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);background:rgba(0,0,0,.07);border-radius:3px;overflow:hidden}
.roadmap-line__fill{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:3px;background:linear-gradient(180deg,#ff4d94,#f99d4e,#4d94ff,#0091ff,#7d5cf0,#20c997,#e93b6e)}

.roadmap-node{position:relative;width:50%;box-sizing:border-box;padding:24px 56px}
/* The card's own POSITION (which half of the timeline it sits in) still
   depends on this text-align, but paragraph text right-aligning along with
   it read poorly — reset to left inside .roadmap-node__card below. */
.roadmap-node.is-left{margin-right:50%;text-align:right}
.roadmap-node.is-right{margin-left:50%;text-align:left}

.roadmap-node__dot{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:var(--roadmap-accent,#ff4d94);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;box-shadow:0 8px 22px rgba(0,0,0,.18);z-index:2}
.roadmap-node.is-left .roadmap-node__dot{right:-26px}
.roadmap-node.is-right .roadmap-node__dot{left:-26px}

.roadmap-node__card{display:inline-block;max-width:480px;width:100%;text-align:left;background:#fff;border:1.5px solid color-mix(in srgb,var(--roadmap-accent,#ff4d94) 35%,#fff);border-radius:22px;padding:40px 44px;box-shadow:0 16px 40px rgba(0,0,0,.05);transition:transform .35s ease,box-shadow .35s ease}
.roadmap-node:hover .roadmap-node__card{transform:translateY(-4px);box-shadow:0 20px 46px rgba(0,0,0,.08)}

.roadmap-node__num{display:block;font-family:'Outfit',sans-serif;font-size:13px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--roadmap-accent,#ff4d94);margin-bottom:12px}
.roadmap-node__title{font-family:'Outfit',sans-serif;font-size:32px;font-weight:800;letter-spacing:-.6px;color:#111;margin:0 0 16px}
.roadmap-node__desc{font-size:17px;line-height:1.7;color:#666;margin:0}

.roadmap-node__chips{display:flex;gap:12px;margin-top:24px;justify-content:flex-start}
.roadmap-node__chip{width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--roadmap-accent,#ff4d94) 10%,#f8f9fa);border:1px solid color-mix(in srgb,var(--roadmap-accent,#ff4d94) 16%,#fff);display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--roadmap-accent,#ff4d94)}

/* Stage counter — hidden in the plain list layout */
.roadmap-progress{display:none}

/* ---------------------------------------------------------------------------
   Pinned stage mode (desktop). js/roadmap-timeline.js adds .roadmap--stage and
   pins the section for the length of the walk-through. The section is exactly
   one screen tall — nothing below peeks in while it is pinned — and shows ONE
   stage at a time, alternating sides at the same height: stage 1 left, stage
   2 right, stage 3 left… The stage counter sits in whichever half is empty.
   --------------------------------------------------------------------------- */
.roadmap--stage{height:100vh;min-height:0;box-sizing:border-box;padding:104px 0 36px;display:flex;flex-direction:column}
.roadmap--stage>.container{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;width:100%}
.roadmap--stage>.container>.row{flex:0 0 auto}
.roadmap--stage .roadmap-timeline{flex:1 1 auto;min-height:0;height:auto;padding:0;margin-top:10px}

/* Each node fills its half top-to-bottom and centres its card, so the card
   sits at the same height on both sides and the dot lands on the line level
   with the card's middle. */
.roadmap--stage .roadmap-node{position:absolute;top:0;bottom:0;width:50%;margin:0;padding:0 64px;display:flex;align-items:center}
.roadmap--stage .roadmap-node.is-left{left:0;justify-content:flex-end}
.roadmap--stage .roadmap-node.is-right{right:0;justify-content:flex-start}
.roadmap--stage .roadmap-node__card{max-width:560px;padding:48px 52px;border-radius:26px;box-shadow:0 24px 60px rgba(0,0,0,.07)}
.roadmap--stage .roadmap-node__num{font-size:14px;margin-bottom:14px}
.roadmap--stage .roadmap-node__title{font-size:38px;margin-bottom:18px}
.roadmap--stage .roadmap-node__desc{font-size:18.5px}
.roadmap--stage .roadmap-node__chips{margin-top:28px}
.roadmap--stage .roadmap-node__chip{width:50px;height:50px;font-size:19px;border-radius:14px}
.roadmap--stage .roadmap-node__dot{width:58px;height:58px;font-size:21px}
.roadmap--stage .roadmap-node.is-left .roadmap-node__dot{right:-29px}
.roadmap--stage .roadmap-node.is-right .roadmap-node__dot{left:-29px}

/* Counter: big current stage, the total, and one bar per stage in its own
   colour — centred in the half the card is NOT in. */
.roadmap--stage .roadmap-progress{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;position:absolute;top:0;bottom:0;width:50%;z-index:1;pointer-events:none;transition:opacity .25s ease}
.roadmap--stage[data-roadmap-side="left"] .roadmap-progress{left:50%}
.roadmap--stage[data-roadmap-side="right"] .roadmap-progress{left:0}
.roadmap-progress--in{animation:roadmapCounterIn .4s ease both}
@keyframes roadmapCounterIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.roadmap-progress--in{animation:none}}
.roadmap-progress__count{display:flex;align-items:baseline;gap:8px;font-family:'Outfit',sans-serif;line-height:1}
.roadmap-progress__now{font-size:96px;font-weight:800;letter-spacing:-3px;color:var(--roadmap-now,#ff4d94);transition:color .4s ease}
.roadmap-progress__of{font-size:22px;font-weight:700;color:#b5b8c2;letter-spacing:.5px}
.roadmap-progress__pips{display:flex;gap:8px}
.roadmap-progress__pips i{width:24px;height:5px;border-radius:5px;background:rgba(0,0,0,.08);transition:background .35s ease,width .35s ease}
.roadmap-progress__pips i.is-done{background:color-mix(in srgb,var(--roadmap-accent) 45%,#fff)}
.roadmap-progress__pips i.is-now{background:var(--roadmap-accent);width:40px}

/* shorter desktop screens: keep the card inside the screen */
@media (max-height:820px){
    .roadmap--stage{padding-top:92px}
    .roadmap--stage .roadmap-node__card{padding:36px 42px}
    .roadmap--stage .roadmap-node__title{font-size:32px;margin-bottom:12px}
    .roadmap--stage .roadmap-node__desc{font-size:17px}
    .roadmap--stage .roadmap-node__chips{margin-top:20px}
    .roadmap-progress__now{font-size:76px}
}

/* Responsive */
@media(max-width:1200px){.impact-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:991px){
    .innovation-frontier-area{padding:80px 0}
    .impact-area{padding:80px 0}
    .roadmap-line{left:26px;transform:none}
    .roadmap-node,.roadmap-node.is-left,.roadmap-node.is-right{width:100%;margin:0;padding:16px 0 16px 74px;text-align:left}
    .roadmap-node.is-left .roadmap-node__dot,.roadmap-node.is-right .roadmap-node__dot{left:4px;right:auto}
    .roadmap-node__card{max-width:none;padding:28px 30px}
    .roadmap-node__title{font-size:24px}
    .roadmap-node__desc{font-size:15.5px}
}
@media(max-width:768px){.impact-grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------------
   Pinned stage mode on phones and tablets: the same walk-through, one card
   in the middle of the screen at a time, sliding in from alternate sides,
   with the stage counter across the top instead of in the empty half.
   --------------------------------------------------------------------------- */
@media (max-width:991px){
    .roadmap--stage{height:100vh;height:100svh;padding:96px 0 18px}
    .roadmap--stage>.container>.row{margin-bottom:6px!important}
    .roadmap--stage .roadmap-line{display:none}
    .roadmap--stage .roadmap-timeline{margin-top:0}
    .roadmap--stage .roadmap-progress,
    .roadmap--stage[data-roadmap-side="left"] .roadmap-progress,
    .roadmap--stage[data-roadmap-side="right"] .roadmap-progress{left:0;right:0;top:0;bottom:auto;width:100%;height:auto;flex-direction:row;gap:18px}
    .roadmap--stage .roadmap-progress__now{font-size:46px;letter-spacing:-1.5px}
    .roadmap--stage .roadmap-progress__of{font-size:15px}
    .roadmap--stage .roadmap-progress__pips{gap:5px}
    .roadmap--stage .roadmap-progress__pips i{width:14px;height:4px}
    .roadmap--stage .roadmap-progress__pips i.is-now{width:26px}
    .roadmap--stage .roadmap-node,
    .roadmap--stage .roadmap-node.is-left,
    .roadmap--stage .roadmap-node.is-right{left:0;right:0;top:66px;bottom:0;width:100%;padding:0 2px;justify-content:center;align-items:center;text-align:left}
    .roadmap--stage .roadmap-node .roadmap-node__dot,
    .roadmap--stage .roadmap-node.is-left .roadmap-node__dot,
    .roadmap--stage .roadmap-node.is-right .roadmap-node__dot{position:absolute;left:50%;right:auto;top:50%;width:46px;height:46px;font-size:17px;margin:0;transform:translate(-50%,-50%);opacity:0;pointer-events:none}
    .roadmap--stage .roadmap-node__card{max-width:560px;padding:30px 26px;border-radius:24px}
    .roadmap--stage .roadmap-node__num{font-size:12.5px;margin-bottom:10px}
    .roadmap--stage .roadmap-node__title{font-size:27px;margin-bottom:10px}
    .roadmap--stage .roadmap-node__desc{font-size:16px;line-height:1.6}
    .roadmap--stage .roadmap-node__chips{margin-top:18px}
    .roadmap--stage .roadmap-node__chip{width:42px;height:42px;font-size:16px;border-radius:12px}
}
@media (max-width:991px) and (max-height:640px){
    .roadmap--stage{padding-top:84px}
    .roadmap--stage .roadmap-node__card{padding:22px 22px}
    .roadmap--stage .roadmap-node__title{font-size:23px}
    .roadmap--stage .roadmap-node__desc{font-size:15px}
    .roadmap--stage .roadmap-node__chips{display:none}
}