/* ━━━ RESET & TOKENS ━━━ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif !important;background:#fff;color:hsl(220,25%,14%);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6,p,span,li,a,button,input,select,textarea,div{font-family:'Plus Jakarta Sans',system-ui,sans-serif !important}
a{color:inherit;text-decoration:none}


/* ━━━ UTILITIES ━━━ */
.container{max-width:1400px;margin:0 auto;padding:0 2rem}
.text-gradient{background:linear-gradient(90deg,#37D7FA 0%,#4B72FE 50%,#FF8DF2 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.bg-new-grad{background:linear-gradient(90deg,#37D7FA 0%,#4B72FE 50%,#FF8DF2 100%)}
.shadow-card{box-shadow:0 4px 24px hsl(220 25% 14%/0.06)}
.shadow-button{box-shadow:0 4px 14px hsl(191 90% 50%/0.35)}

/* ━━━ BUTTONS ━━━ */
.btn{display:inline-flex;align-items:center;gap:0.5rem;font-weight:600;font-size:16px;padding:12px 32px;border-radius:0.75rem;border:none;cursor:pointer;transition:opacity .2s}
.btn-primary{background:linear-gradient(90deg, #00D3F3 0%, #2B7FFF 50%, #9810FA 100%) !important;color:#fff;box-shadow:0 4px 14px hsl(191 90% 50%/0.35);position:relative;overflow:hidden}
.btn-primary::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(120deg,transparent 0%,hsla(0,0%,100%,0) 30%,hsla(0,0%,100%,0.35) 50%,hsla(0,0%,100%,0) 70%,transparent 100%);animation:shimmer 3s ease-in-out infinite}
@keyframes shimmer{0%{left:-100%}50%{left:120%}100%{left:120%}}
.btn-outline{background:transparent;border:1px solid hsl(210,20%,91%);color:hsl(220,25%,14%)}
.btn-outline:hover{background:hsl(210,20%,96%)}
.btn-primary:hover{opacity:.9}
.btn-white{background:#fff;color:hsl(220,25%,14%);border:none}
.btn-white:hover{opacity:.9}
.btn-ghost-white{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}
.btn-ghost-white:hover{background:rgba(255,255,255,.1)}


/* ━━━ HERO BUTTONS ━━━ */
.hero-buttons .btn{gap:12px;padding:0 40px !important;height:56px !important;border-radius:9999px !important}

/* ━━━ HERO ━━━ */
.hero{padding:17rem 0 11rem !important;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:900px;height:500px;border-radius:50%;background:hsl(191 90% 50%/0.05);filter:blur(60px);pointer-events:none}
.hero-eyebrow{font-size:17px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;margin-bottom:25px;}
.hero h1{font-size:clamp(40px,5vw,64px);font-weight:800;line-height:1.08;max-width:900px;margin:0 auto 25px}
.hero p{font-size:18px;color:hsl(220,10%,50%);max-width:640px;margin:0 auto 2.5rem;line-height:1.7}
.hero-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;margin-bottom:2.5rem}
.hero-badge{display:flex;align-items:center;gap:.5rem;font-size:14px;font-weight:600}
.hero-badge svg{width:16px;height:16px;color:hsl(191,90%,50%)}
.hero-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}

/* ━━━ STATS ━━━ */
.stats{padding:8rem 0;border-top:1px solid hsl(210,20%,91%);border-bottom:1px solid hsl(210,20%,91%);background:aliceblue}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.stat{text-align:center}
.stat-value{font-size:clamp(28px,3vw,60px);font-weight:800;margin-bottom:.25rem}
.stat-label{font-size:14px;color:hsl(220,10%,50%);font-weight:500}
@media(max-width:767px){.stats-grid{grid-template-columns:repeat(2,1fr)}}

/* ━━━ SECTION COMMON ━━━ */
.section{padding:6rem 0}
.section-alt{background:hsl(210 20% 96%/0.5)}
.section-header{text-align:center;margin-bottom:3.5rem}
.section-header h2{font-size:clamp(28px,3vw,36px);font-weight:800;margin-bottom:1rem}
.section-header p{font-size:18px;color:hsl(220,10%,50%);max-width:640px;margin:0 auto;line-height:1.7}

/* ━━━ HOW IT WORKS ━━━ */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.step-card{position:relative;border-radius:1rem;border:1px solid hsl(210,20%,91%);background:#fff;padding:24px;box-shadow:0 4px 24px hsl(220 25% 14%/0.06)}
.step-num{position:absolute;top: -14.6px;left:22px;font-size:48px;font-weight:800;color:hsl(191 90% 50%/0.2);user-select:none}
.step-card .step-icon{display:none}
.step-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:.5rem;background:hsl(191 90% 50%/0.1);margin-bottom:1rem}
.step-icon svg{width:20px;height:20px;color:hsl(191,90%,50%)}
.step-card h3{font-size:16px;font-weight:700;margin-bottom:.375rem;margin-top:3rem}
.step-card p{font-size:14px;color:hsl(220,10%,50%);line-height:1.6}
@media(max-width:767px){.steps-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.steps-grid{grid-template-columns:1fr}}

/* ━━━ FEATURES ━━━ */
.feature-row{display:flex;align-items:center;gap:3rem;margin-bottom:5rem}
.feature-row:last-child{margin-bottom:0}
.feature-row.reversed{flex-direction:row-reverse}
.feature-row img{flex:1;width:100%;border-radius:1rem;display:block}
.feature-img-wrap{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:1rem}
.feature-img-wrap img{width:100%;height:auto;object-fit:cover;border-radius:1rem;display:block}
.feature-content{flex:1}
.feature-content .step-icon{width:48px;height:48px;border-radius:.75rem;margin-bottom:1.25rem}
.feature-content .step-icon svg{width:24px;height:24px}
.feature-content h3{font-size:24px;font-weight:700;margin-bottom:.75rem}
.feature-content>p{font-size:16px;color:hsl(220,10%,50%);margin-bottom:1.25rem;line-height:1.7}
.feature-bullets{list-style:none;display:flex;flex-direction:column;gap:.625rem}
.feature-bullets li{display:flex;align-items:flex-start;gap:.625rem;font-size:14px;color:hsl(220,10%,50%)}
.feature-bullets li svg{width:16px;height:16px;color:hsl(191,90%,50%);margin-top:3px;flex-shrink:0}
@media(max-width:1023px){.feature-row,.feature-row.reversed{flex-direction:column}}

/* ━━━ CARD GRID ━━━ */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.card{border-radius:1rem;border:1px solid hsl(210,20%,91%);background:#fff;padding:1.5rem;box-shadow:0 4px 24px hsl(220 25% 14%/0.06);transition:box-shadow .2s}
.card:hover{box-shadow:0 8px 32px hsl(191 90% 50%/0.12)}
.card .step-icon{margin-bottom:1rem}
.card h3{font-size:16px;font-weight:700;margin-bottom:.375rem}
.card p{font-size:14px;color:hsl(220,10%,50%);line-height:1.6}
@media(max-width:767px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.card-grid{grid-template-columns:1fr}}

/* ━━━ RESERVE SECTION ━━━ */
.reserve{border-radius:1.5rem;border:1px solid hsl(210,20%,91%);background:#fff;box-shadow:0 4px 24px hsl(220 25% 14%/0.06);overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.reserve-visual{padding:0;display:flex;align-items:center;justify-content:center;min-height:320px;overflow:hidden;background:none}
.reserve-visual::before{display:none}
.reserve-visual img{width:100%;height:auto;object-fit:contain;border-radius:0;display:block}
.reserve-visual .tag{display:none}
.device-stack{display:flex;gap:.75rem;position:relative}
.device-mock{width:56px;height:96px;border-radius:.75rem;border:2px solid hsl(191 90% 50%/0.2);background:hsl(191 90% 50%/0.05)}
.device-mock:nth-child(2){border-color:hsl(191 90% 50%/0.3);background:hsl(191 90% 50%/0.1);margin-top:-.5rem}
.reserve-content{padding:40px 48px;display:flex;flex-direction:column;justify-content:center}
.reserve-content h2{font-size:clamp(28px,3vw,36px);font-weight:800;margin-bottom:.75rem}
.reserve-content>p{font-size:16px;color:hsl(220,10%,50%);line-height:1.7;margin-bottom:1.5rem}
.reserve-content .btn-reserve{background:transparent !important;color:hsl(220,25%,14%);border:1px solid  #767778;text-transform:uppercase;letter-spacing:.05em;gap:12px;padding:0 40px !important;height:56px !important;border-radius:9999px !important;box-shadow:none}
@media(max-width:1023px){.reserve{grid-template-columns:1fr}.reserve-visual{min-height:200px}}

/* ━━━ PLATFORMS ━━━ */
.platform-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.platform-card{position:relative;border-radius:.75rem;border:1px solid hsl(210,20%,91%);background:#fff;padding:36px 20px 20px;text-align:center;box-shadow:0 4px 24px hsl(220 25% 14%/0.06);margin-top:20px}
.platform-card .icon{position:absolute;top:-16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:none;box-shadow:none}
.platform-card .icon img,.platform-card .icon svg{width:37px;height:37px}
.platform-card .name{font-size:18px;font-weight:700;margin-bottom:.25rem}
.platform-card .ver{font-size:12px;color:hsl(220,10%,50%)}
@media(max-width:767px){.platform-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.platform-grid{grid-template-columns:repeat(2,1fr)}}


/* ━━━ FAQ ━━━ */
.faq-list{max-width:768px;margin:0 auto;display:flex;flex-direction:column;gap:1rem}
.faq-item{border-radius:1rem;border:1px solid hsl(210,20%,91%);background:#fff;box-shadow:0 4px 24px hsl(220 25% 14%/0.06);overflow:hidden}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:1.25rem 1.5rem;font-weight:600;font-size:15px;list-style:none;user-select:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary svg{width:16px;height:16px;color:hsl(220,10%,50%);flex-shrink:0;margin-left:1rem;transition:transform .2s}
.faq-item[open] summary svg{transform:rotate(180deg)}
.faq-item .answer{padding:0 1.5rem 1.25rem;font-size:14px;color:hsl(220,10%,50%);line-height:1.7;margin-top:-.25rem}


/* ━━━ ANIMATION ━━━ */
.fade-up{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}
.trusted-section {
    padding: 17px 0!important;
    text-align: center;
    /* border: 1px solid #e7e4e4; */
}