/* ==========================================================================
   CRED — Cards  ·  self-hosted replica
   Values ported 1:1 from the production styled-components output.
   Breakpoints: mobile ≤767 · tablet 768–1024 · desktop ≥1025
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face{font-family:gilroy-regular;src:url(../assets/fonts/Gilroy-Regular.woff2) format("woff2"),url(../assets/fonts/Gilroy-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:gilroy-medium;src:url(../assets/fonts/Gilroy-Medium.woff2) format("woff2"),url(../assets/fonts/Gilroy-Medium.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:gilroy-semibold;src:url(../assets/fonts/Gilroy-SemiBold.woff2) format("woff2"),url(../assets/fonts/Gilroy-SemiBold.woff) format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:gilroy-bold;src:url(../assets/fonts/Gilroy-Bold.woff2) format("woff2"),url(../assets/fonts/Gilroy-Bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:gilroy-extrabold;src:url(../assets/fonts/Gilroy-ExtraBold.woff2) format("woff2"),url(../assets/fonts/Gilroy-ExtraBold.woff) format("woff");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:gilroy;src:url(../assets/fonts/Gilroy-Regular.woff2) format("woff2"),url(../assets/fonts/Gilroy-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:gilroy;src:url(../assets/fonts/Gilroy-Medium.woff2) format("woff2"),url(../assets/fonts/Gilroy-Medium.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:gilroy;src:url(../assets/fonts/Gilroy-SemiBold.woff2) format("woff2"),url(../assets/fonts/Gilroy-SemiBold.woff) format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:gilroy;src:url(../assets/fonts/Gilroy-Bold.woff2) format("woff2"),url(../assets/fonts/Gilroy-Bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:gilroy;src:url(../assets/fonts/Gilroy-ExtraBold.woff2) format("woff2"),url(../assets/fonts/Gilroy-ExtraBold.woff) format("woff");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:denton;src:url(../assets/fonts/Denton-ExtraBold.woff2) format("woff2"),url(../assets/fonts/Denton-ExtraBold.woff) format("woff");font-weight:800;font-style:normal;font-display:swap}

/* ---------- reset / globals ---------- */
*{box-sizing:border-box}
h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{font-family:gilroy-regular;font-variant-ligatures:none;min-height:var(--100vh,100vh);max-height:-webkit-fill-available;color:#000;margin:0;padding:0;padding-top:env(safe-area-inset-top);overflow-x:hidden;background-color:#fff;position:relative;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:100vw;text-size-adjust:none;-webkit-text-size-adjust:none}
@media screen and (max-device-width:480px){body{text-size-adjust:100%;-webkit-text-size-adjust:100%}}
ul,ol{list-style:none}
a{text-decoration:none;outline:0}
a:active,a:focus{outline:none 0}
a,button,input,select,textarea{-webkit-tap-highlight-color:transparent}
input{appearance:none;-webkit-appearance:none;border:0;outline:0;background:transparent;color:inherit}
::placeholder{color:inherit;opacity:.4}
:root{--theme-color:#000;--theme-color-light:rgba(0,0,0,.04);--text-color:#000;-webkit-tap-highlight-color:transparent}
.h-screen-dynamic{max-height:100vh;max-height:100dvh;height:100vh;height:100dvh}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes flip{0%{transform:rotateX(0deg);opacity:1}50%{transform:rotateX(180deg);opacity:0}to{transform:rotateX(0deg);opacity:1}}
.flip-text:hover>span{transform-origin:center;display:inline-block;animation:flip .7s alternate}
@keyframes jitter{0%{transform:translate(0)}25%{transform:translate(-2px,-2px)}50%{transform:translate(2px,2px)}75%{transform:translate(-2px,-2px)}to{transform:translate(0)}}
.jitter:hover svg{animation:jitter 1s linear}
body.is-locked{overflow:hidden}

/* device visibility helpers */
.only-desktop{}
@media (max-width:1024px){.only-desktop{display:none!important}}
.only-touch{}
@media (min-width:1025px){.only-touch{display:none!important}}

/* spacers (Spacer n → n*5px) */
.sp-10{margin-bottom:10px}.sp-15{margin-bottom:15px}.sp-20{margin-bottom:20px}.sp-40{margin-bottom:40px}

/* ---------- shared typography ---------- */
.section{display:flex;padding:125px}
@media (max-width:1280px){.section{padding:125px 100px}}
@media (max-width:1040px){.section{padding:125px 50px}}
@media (max-width:890px){.section{padding:75px 40px}}
.container{}
@media (max-width:1280px){.container{width:100%}}

.h1{font-family:denton;font-size:88px;font-weight:800;letter-spacing:-.6px;line-height:87px}
@media screen and (max-width:767px){.h1{font-size:46px;font-weight:800;letter-spacing:-.3px;line-height:46px}}
@media screen and (min-width:768px) and (max-width:1024px){.h1{font-size:64px;letter-spacing:-.6px;line-height:62px}}
.h1b{font-family:denton;font-size:67px;font-weight:800;letter-spacing:-.3px;line-height:65px;text-align:left}
@media screen and (max-width:767px){.h1b{font-size:40px;line-height:39px}}
@media screen and (min-width:768px) and (max-width:1024px){.h1b{font-size:56px;letter-spacing:-.2px;line-height:54px}}
.h1-gradient{background:linear-gradient(170deg,#000,#555);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.para{font-family:gilroy;font-size:20px;font-weight:initial;letter-spacing:.6px;line-height:36px;opacity:.6;white-space:pre-line}
@media screen and (max-width:767px){.para{font-size:14px;letter-spacing:.1px;line-height:26px}}
@media screen and (min-width:768px) and (max-width:1024px){.para{font-size:16px;letter-spacing:.3px;line-height:32px}}
.pretitle{font-family:gilroy-medium;font-weight:initial;font-size:17px;letter-spacing:4px;line-height:32px;text-transform:uppercase;color:#6C6C6C;white-space:pre-wrap}
@media screen and (max-width:767px){.pretitle{font-size:12px;letter-spacing:3px;line-height:16px}}
@media screen and (min-width:768px) and (max-width:1024px){.pretitle{font-size:16px;letter-spacing:4.5px;line-height:25px}}
.caption-title{font-family:gilroy-bold;font-size:15px;font-weight:initial;letter-spacing:2.15px;line-height:28px}
@media screen and (max-width:1024px){.caption-title{font-size:15px;letter-spacing:1.58px;line-height:27px}}
.caption-body{font-family:gilroy;font-size:15px;font-weight:initial;letter-spacing:.5px;line-height:28px;opacity:.6}
@media screen and (max-width:1024px){.caption-body{font-size:15px;letter-spacing:.37px;line-height:27px}}

/* ---------- media (video / poster / fallback) ---------- */
.media-img,.media-video{display:block;height:100%;object-fit:cover;pointer-events:none;width:100%}
.media-video{left:0;top:0}
.media-video.is-hidden{position:absolute;visibility:hidden}
.media-fallback{left:0;top:0}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar-wrapper{display:flex;position:absolute;top:0;padding:70px 130px;align-items:center;background-color:transparent;z-index:11;justify-content:space-between;width:100%;transition:top .5s}
.navbar-wrapper>:last-child{margin-left:20px}
@media (max-width:890px){.navbar-wrapper{padding:64px 40px 0}}
.nav-pill{display:flex;justify-content:flex-start;width:fit-content;align-items:center;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:10px}
.nav-pill>div{display:flex;align-items:center}
/* ==========================================================================
   HERO
   ========================================================================== */
.hero-wrap{overflow-x:hidden;width:100vw}
.hero{align-content:flex-start;background-color:#000;flex-wrap:wrap;justify-content:center;min-height:100vh;position:relative;z-index:2}
@media (max-width:890px){.hero{padding-left:20px;padding-right:20px}}
.hero-media{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:0}

/* ==========================================================================
   INTRO COPY
   ========================================================================== */
.intro{background-color:#fff;overflow-x:hidden;width:100vw;height:100vh;justify-content:center}
@media (max-width:890px){.intro{padding:100px 20px}}
.intro-inner{align-items:center;justify-content:center;display:flex;flex-direction:column;text-align:center}
.intro-h1{padding:4px 0;white-space:pre-wrap}
.intro-para{white-space:pre-wrap}
@media screen and (max-width:767px){.intro-para{max-width:85%}}

/* ==========================================================================
   PINNED VIDEO SECTIONS (multi-card / single-card / cta)
   ========================================================================== */
.video-section{position:relative;height:100vh}

/* ==========================================================================
   IMAGE SEQUENCES
   ========================================================================== */
.seq-outer{position:relative}
.seq-marker{background-color:#000;z-index:0;position:absolute;top:-100vh}
.seq-marker.far{top:-200vh}
.seq{position:relative;max-width:100vw}
.seq-sticky{height:100vh;position:sticky;top:0;left:0}
.seq-scroller{z-index:9}
.seq-canvas-wrap{width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none;position:absolute;top:0;right:0;overflow:hidden}
.seq-canvas{display:block}
@media screen and (max-width:767px){.seq-canvas{width:100%;height:100%}}
.seq-fallback{position:relative;width:100vw;display:flex;flex-flow:column nowrap}
.seq-fallback>img{max-width:100vw;width:100%;height:auto}
@media screen and (min-width:1025px) and (max-height:800px){.seq-fallback>img{width:100%;height:auto}}

/* ==========================================================================
   INTERACTIONS ("every touch is pure power.")
   ========================================================================== */
.interactions{position:relative;width:100vw;min-height:100vh;background-color:#fff;padding:125px;align-items:baseline;justify-content:center;display:flex;flex-direction:column;text-align:center}
@media screen and (min-width:797px) and (max-width:1024px){.interactions{padding:125px 40px}}
@media (max-width:797px){.interactions{padding:100px 0}}
.interactions-marker{background-color:red;z-index:2;position:absolute;top:-70vh;height:3px}
@media (max-width:890px){.interactions-h1{padding:0 30px}}
.interactions-row{display:flex;width:100%}
@media screen and (max-width:1024px){.interactions-row{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.interactions-row::-webkit-scrollbar{display:none}}
@media (max-width:890px){.interactions-row{padding:0 30px}}
.interactions-row>div{flex-shrink:0;margin-right:20px;width:32%}
.interactions-row>div:last-child{margin-right:0}
@media screen and (max-width:1024px){.interactions-row>div{width:323px}.interactions-row>div:last-child{margin-right:14px}}
.interactions-video{-webkit-user-select:none;user-select:none;width:100%;object-fit:cover}
@media screen and (max-width:1024px){.interactions-video{width:323px;max-height:466px}}
.interactions-img{width:32%;flex-shrink:0;object-fit:cover}
@media screen and (max-width:1024px){.interactions-img{width:323px;max-height:466px}}
.caption{display:flex;align-items:flex-start}
.caption img{width:32px;height:32px}
.caption-text{margin-left:10px;text-align:left}

/* ==========================================================================
   SECURITY
   ========================================================================== */
.security{position:relative;background-color:#fff;overflow-x:hidden;width:100vw}
@media (max-width:890px){.security{padding:50px 30px}}
.security-hr{position:absolute;width:85%;background:#CFCFCF;height:2px}
.security-inner{margin-top:50px;align-items:center;justify-content:space-between;display:flex;text-align:center}
@media screen and (max-width:767px){.security-inner{flex-direction:column;justify-content:center}}
.security-h1{font-size:76px;letter-spacing:-.4px;line-height:70px;max-width:70%}
@media screen and (max-width:767px){.security-h1{font-size:40px;letter-spacing:-.3px;line-height:39px}}
@media screen and (min-width:768px) and (max-width:1024px){.security-h1{font-size:56px;letter-spacing:-.2px;line-height:54px}}
.security-lock{width:70px;height:70px}
@media screen and (max-width:1024px){.security-lock{width:55px;height:55px}}
.security-left{width:60%;text-align:left}
.security-right{width:40%;text-align:left}
@media screen and (max-width:767px){.security-left{width:100%}.security-right{width:100%;margin-top:20px}}

/* ==========================================================================
   CTA  (video + QR / download button)
   ========================================================================== */
.cta{position:relative;height:100vh}
.cta-overlay{position:absolute;height:100%;width:100%;z-index:1;opacity:0;transition:opacity .3s ease-out;pointer-events:none;top:0;left:0}
.cta-overlay.is-shown{opacity:1;pointer-events:auto}
.cta-center{display:flex;justify-content:center;position:relative;top:26%}
@media screen and (min-width:768px) and (max-width:1024px){.cta-center{top:70%}}
@media screen and (max-width:767px){.cta-center{top:55%}}
.qr-desktop{}
@media (max-width:1024px){.qr-desktop{display:none}}
.qr-touch{}
@media (min-width:1025px){.qr-touch{display:none}}
@media screen and (max-width:767px){.qr-touch-pad{padding-bottom:50px}}
.qr-card{max-width:fit-content;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.3);backdrop-filter:blur(6.97px);-webkit-backdrop-filter:blur(6.97px);padding:20px 25px;display:flex;justify-content:space-between;align-items:center;background-color:#fff;border-width:1px;border-color:rgba(0,0,0,.2);padding:20px 25px 20px 20px}
.qr-card img{width:80px}
.qr-card-text{width:100%;font-family:gilroy;font-size:23px;font-weight:500;line-height:28px;letter-spacing:-.382px;text-align:center;color:#fff;opacity:.9;margin-left:20px;color:#000}
.btn{position:relative;display:flex;align-items:center;justify-content:center;margin-top:42px;text-align:center;color:#0d0d0d;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.3);padding:26px 32px;width:fit-content;text-decoration:none;outline:none;cursor:pointer;background-color:#000;color:#fff}
@media screen and (max-width:900px){.btn{padding:15px 30px;float:none;margin-top:53px;padding:20px;height:42px;box-sizing:border-box}}
@media only screen and (min-width:901px) and (max-width:1279px){.btn{height:47px;width:auto;padding:12px 15px}}
.btn-text{text-align:center;color:#fff;font-family:gilroy-medium;font-size:15px;font-style:normal;font-weight:600;line-height:normal;letter-spacing:3px;text-transform:uppercase}
@media screen and (max-width:900px){.btn-text{font-size:13px;line-height:16px}}
@media screen and (max-width:380px){.btn-text{font-size:10px;line-height:14px}}
@media only screen and (min-width:901px) and (max-width:1279px){.btn-text{font-size:16px;line-height:24px}}
.btn-arrow{margin-left:14px}
@media screen and (max-width:1279px){.btn-arrow{width:20px;height:8px;margin-left:10px}}

/* wrapper used by app.js around poster + video */
.pinned-video{position:relative}
.hero-media .pinned-video{height:100%;width:100%}