:root{
  --pri:#FF6A2C; --pri-2:#E0431B; --pri-soft:#FFF1E8; --pri-deep:#B82E0E;
  --ink:#0E0E12; --ink-soft:#5C5C66;
  --grad: linear-gradient(135deg,#FF8A4C 0%,#FF6A2C 50%,#E0431B 100%);
  --grad-warm: linear-gradient(135deg,#FFB37A 0%,#FF6A2C 45%,#B82E0E 100%);
  --grad-soft: radial-gradient(1200px 600px at 80% -10%, #FFE0CC 0%, transparent 60%), radial-gradient(900px 500px at 0% 100%, #FFE9DA 0%, transparent 55%), #FFFFFF;
  --shadow: 0 30px 80px -30px rgba(255,106,44,.28);
  --shadow-soft: 0 12px 30px -16px rgba(14,14,18,.12);
  --r: 22px; --line:#F1E7DE;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter','DM Sans',system-ui,sans-serif; color:var(--ink); background:#fff; margin:0; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans','Inter',sans-serif; font-weight:800; letter-spacing:-.025em; color:var(--ink)}
h1{font-size:clamp(2.4rem,5.2vw,4.2rem); line-height:1.04}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem); line-height:1.1}
.lead{color:var(--ink-soft); font-size:1.08rem; line-height:1.65}
.text-grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
a{color:var(--pri); text-decoration:none}
.container{max-width:1200px; margin:0 auto; padding:0 24px}
@media(max-width:640px){.container{padding:0 32px}}
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.5rem; border-radius:999px; font-weight:600; border:0; cursor:pointer; transition:all .25s ease; font-size:.95rem; white-space:nowrap}
.btn-primary{background:var(--grad); color:#fff; box-shadow:0 14px 30px -12px rgba(255,106,44,.55)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 20px 40px -14px rgba(255,106,44,.7); filter:brightness(1.05)}
.btn-ghost{background:#fff; color:var(--ink); border:1px solid var(--line)}
.btn-ghost:hover{background:#FFF7F1; border-color:#F0DFD0}
.btn-light{background:rgba(255,255,255,.18); color:#fff; backdrop-filter:blur(8px)}
.btn-light:hover{background:rgba(255,255,255,.3)}

/* Nav — pill */
.nav{position:sticky; top:20px; z-index:50; padding:0 16px 0; background:transparent}


.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:8px 8px 8px 22px; background:rgba(255,255,255,.85); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow-soft); max-width:1200px; margin:0 auto}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.1rem; color:var(--ink)}
.brand img{height:30px; width:auto}
.nav-links{display:flex; gap:2px; align-items:center; list-style:none; margin:0; padding:0}
.nav-links > li{position:relative}
.nav-links a{display:block; color:var(--ink); padding:8px 14px; border-radius:999px; font-weight:500; font-size:.92rem; transition:all .2s; text-decoration:none}
.nav-links a:hover{color:var(--pri)}
.nav-links a.active{color:var(--pri); font-weight:600}
.nav-links .caret{font-size:.7rem; margin-left:4px; opacity:.6}
.nav-links .submenu{position:absolute; top:calc(100% + 8px); left:0; min-width:230px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 60px -20px rgba(14,14,18,.18); padding:8px; opacity:0; visibility:hidden; transform:translateY(8px); transition:all .2s; list-style:none; margin:0; z-index:60}
.nav-links li:hover > .submenu, .nav-links li:focus-within > .submenu{opacity:1; visibility:visible; transform:translateY(0)}
.nav-links .submenu a{padding:10px 14px; font-size:.88rem; border-radius:12px; white-space:nowrap}
.nav-links .submenu a:hover{background:var(--pri-soft)}
.nav-cta{display:flex; gap:8px; align-items:center}
.menu-btn{display:none; background:none; border:0; font-size:1.5rem; color:var(--ink)}
@media(max-width:900px){
  .nav-links{display:none; position:absolute; top:64px; left:0; right:0; background:#fff; flex-direction:column; padding:14px; border-bottom:1px solid var(--line); gap:0}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px}
  .nav-links .submenu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding-left:14px}
  .menu-btn{display:block}
  .nav-cta .btn-ghost{display:none}
}

/* Hero */
.hero{position:relative; padding:0 0 90px; margin-top:-72px; overflow:hidden; background:radial-gradient(110% 80% at 50% 0%, #FFE0CC 0%, #FFEEDD 40%, #FFF7EE 70%, #FFFFFF 100%)}
.hero::before{content:""; position:absolute; top:-200px; right:-160px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(255,138,76,.38), transparent 65%); filter:blur(50px); animation:float 14s ease-in-out infinite; pointer-events:none}
.hero::after{content:""; position:absolute; top:-180px; left:-160px; width:480px; height:480px; border-radius:50%; background:radial-gradient(circle, rgba(255,179,122,.32), transparent 65%); filter:blur(50px); animation:float 18s ease-in-out infinite reverse; pointer-events:none}

@keyframes float{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,30px)} }
.hero-inner{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:stretch; position:relative; z-index:1; padding:140px 0 0}
.hero-inner > .reveal{display:flex; flex-direction:column; justify-content:center}
.hero-inner > .reveal.stage{justify-content:stretch}
@media(max-width:900px){ .hero-inner{grid-template-columns:1fr} .hero{padding:0 0 40px; margin-top:-68px} .hero-inner{padding:110px 0 0} .feat-fader{display:none} }
@media(max-width:1024px) and (min-width:641px){ .hero{margin-top:-76px} }
@media(max-width:640px){ .hero{margin-top:-80px} }
@media(max-width:600px){ .feat-fader{display:none !important} }
@media(max-width:640px){
  h1{font-size:clamp(1.75rem,7.2vw,2.15rem)!important; line-height:1.18; letter-spacing:-.02em; word-wrap:break-word; overflow-wrap:break-word; hyphens:auto}
  h2{font-size:clamp(1.5rem,5.6vw,1.9rem)!important; line-height:1.2; letter-spacing:-.015em}
  .lead{font-size:.98rem; line-height:1.6}
  .hero h1{margin:14px 0 12px}
  .eyebrow{font-size:.78rem; padding:6px 14px; margin-bottom:10px}
}
.eyebrow{display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--pri); font-weight:600; font-size:.82rem; box-shadow:var(--shadow-soft)}
.hero h1{margin:18px 0 14px}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:24px}
.hero-trust{display:flex; gap:18px; align-items:center; margin-top:30px; color:var(--ink-soft); font-size:.9rem; flex-wrap:wrap}
.hero-trust .star{color:#ffb020}

/* Speed Stage — high-energy conversion visual */
.stage{position:relative;isolation:isolate}
.stage::before{content:"";position:absolute;inset:-12% -10%;z-index:-1;background:
  radial-gradient(closest-side at 30% 35%,rgba(255,138,76,.32),transparent 70%),
  radial-gradient(closest-side at 78% 65%,rgba(255,179,122,.26),transparent 72%);
  filter:blur(38px);pointer-events:none}

.stage{display:flex;align-items:center;justify-content:center}
.speed-stage{position:relative;display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:center;gap:8px;padding:40px 6px;width:100%;min-height:100%;flex:1}

.speed-badge{position:absolute;top:10px;right:0;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:linear-gradient(135deg,#FF8A4C,#E0431B);color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:.8rem;letter-spacing:.06em;box-shadow:0 12px 24px -10px rgba(224,67,27,.55);z-index:5;animation:badgePulse 2.4s ease-in-out infinite}
.speed-badge i{filter:drop-shadow(0 0 6px #FFD700)}
@keyframes badgePulse{50%{transform:scale(1.06)}}

/* Source: PPTX file with stack effect */
.ss-source,.ss-target{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px}
.ss-source-img,.ss-target-img{width:120px;height:120px;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 14px 26px rgba(255,106,44,.25))}
.ss-source-img{animation:srcShake 4s ease-in-out infinite}
@keyframes srcShake{0%,100%{transform:translateX(0)}45%{transform:translateX(-3px)}55%{transform:translateX(3px)}}
.ss-stack{position:absolute;top:0;left:50%;width:100px;height:120px;background:#fff;border:1px solid #F1E0D2;border-radius:14px;box-shadow:0 10px 22px -16px rgba(0,0,0,.2);transform:translateX(-50%) rotate(-6deg) translateY(6px);z-index:0}
.ss-stack-2{transform:translateX(-50%) rotate(6deg) translateY(10px);background:#FFF6EE}
.ss-tag{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:.7rem;letter-spacing:.18em;color:var(--ink-soft);background:#fff;padding:5px 10px;border-radius:999px;border:1px solid var(--line);margin-top:10px}
.ss-tag-ok{color:#0EA371;border-color:color-mix(in oklab,#0EA371 30%,var(--line))}

/* Tunnel: speed lines + flying particles + engine */
.ss-tunnel{position:relative;height:170px;display:grid;place-items:center;overflow:hidden;border-radius:18px}
.ss-line{position:absolute;left:-30%;width:60%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(255,106,44,.55),transparent);animation:slineRun 1.2s linear infinite}
.ss-line:nth-child(1){top:18%;animation-delay:-.1s;width:50%}
.ss-line:nth-child(2){top:34%;animation-delay:-.4s;height:1px;opacity:.6}
.ss-line:nth-child(3){top:52%;animation-delay:-.2s;width:70%}
.ss-line:nth-child(4){top:66%;animation-delay:-.6s;height:1px;opacity:.5}
.ss-line:nth-child(5){top:80%;animation-delay:-.3s;width:55%}
.ss-line:nth-child(6){top:90%;animation-delay:-.8s;opacity:.4}
@keyframes slineRun{from{transform:translateX(0)}to{transform:translateX(380%)}}

.ss-particle{position:absolute;width:30px;height:30px;border-radius:8px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--pri-2);font-size:.85rem;box-shadow:0 8px 16px -8px rgba(0,0,0,.18);left:-15%;top:50%;transform:translateY(-50%);animation:particleFly 1.6s linear infinite;z-index:2}
.ss-p1{top:25%;animation-delay:0s;color:#E0431B}
.ss-p2{top:50%;animation-delay:.4s;color:#7B3FF2}
.ss-p3{top:72%;animation-delay:.8s;color:#1A73E8}
.ss-p4{top:38%;animation-delay:1.2s;color:#0EA371}
@keyframes particleFly{0%{left:-12%;opacity:0}10%{opacity:1}45%{transform:translateY(-50%) scale(.9) rotate(8deg)}50%{opacity:0;left:48%}51%{left:52%;opacity:0}55%{opacity:1}100%{left:115%;opacity:0}}

.ss-engine{position:relative;width:78px;height:78px;border-radius:50%;background:linear-gradient(135deg,#FF8A4C,#E0431B);display:grid;place-items:center;color:#fff;font-size:1.7rem;box-shadow:0 0 0 4px rgba(255,255,255,.85),0 18px 40px -14px rgba(224,67,27,.6);z-index:3;animation:engineSpin 3s linear infinite}
.ss-engine i{filter:drop-shadow(0 0 10px #FFE9C7);animation:enginePulse 1s ease-in-out infinite}
@keyframes engineSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes enginePulse{50%{transform:scale(1.12)}}
.ss-ring{position:absolute;inset:-10px;border-radius:50%;border:2px solid color-mix(in oklab,var(--pri) 60%,transparent);animation:ringWave 1.8s ease-out infinite;pointer-events:none}
.ss-ring-2{animation-delay:-.9s}
@keyframes ringWave{from{transform:scale(.6);opacity:.9}to{transform:scale(1.6);opacity:0}}

/* Target: HTML5 with success check */
.ss-target-img{animation:targetGlow 3s ease-in-out infinite}
@keyframes targetGlow{50%{filter:drop-shadow(0 14px 30px rgba(14,163,113,.4))}}
.ss-check{position:absolute;top:-2px;right:18%;width:30px;height:30px;border-radius:50%;background:#0EA371;color:#fff;display:grid;place-items:center;font-size:.85rem;box-shadow:0 8px 18px -8px rgba(14,163,113,.6);z-index:3;animation:checkPop 2.4s ease-in-out infinite}
@keyframes checkPop{0%,40%{transform:scale(0);opacity:0}50%,100%{transform:scale(1);opacity:1}}

@media(max-width:600px){
  .speed-stage{grid-template-columns:1fr;gap:24px;padding:24px 6px}
  .ss-tunnel{height:120px;width:100%;transform:rotate(90deg);max-height:120px}
  .speed-badge{display:none}
  .ss-tag,.ss-tag-ok{display:none}
  .feat-fader{display:none}
  .ss-check{right:34%}
}

/* Sections */
section{padding:80px 0}
.section-tight{padding:32px 0}
.section-head{text-align:center; max-width:720px; margin:0 auto 50px}
.section-head .eyebrow{margin-bottom:14px}
@media(max-width:640px){
  section{padding:52px 0}
  .section-head{margin-bottom:34px}
  section .row.g-4 > .col-12 h2,
  section .row.g-4 > .col-12 .lead{padding:0 2px}
  .card{padding:26px 16px; border-radius:18px}
  .card .ic{width:54px; height:54px; margin-bottom:16px; font-size:1.2rem}
  .card h3{font-size:1rem}
  .card p{font-size:.88rem}
}

/* Cards / features — layout handled by Bootstrap row/col utilities */

.card{background:#fff; border:1px solid var(--line); border-radius:24px; padding:40px 28px; transition:all .3s ease; position:relative; overflow:hidden; text-align:center}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--pri)}
.card .ic{width:64px; height:64px; border-radius:50%; background:#fff; color:var(--ink-soft); display:grid; place-items:center; font-size:1.5rem; margin:0 auto 22px; transition:all .3s; border:1px solid var(--line)}
.card:hover .ic{background:var(--pri); color:#fff; border-color:var(--pri); transform:scale(1.05)}
.card.featured{border-color:var(--pri)}
.card.featured .ic{background:var(--pri); color:#fff; border-color:var(--pri)}
.card h3{font-size:1.2rem; margin:0 0 10px}
.card p{color:var(--ink-soft); margin:0; font-size:.96rem; line-height:1.6}

/* Stats */
.stats{background:var(--grad-warm); color:#fff; border-radius:32px; padding:54px 32px; text-align:center; box-shadow:0 30px 80px -30px rgba(184,46,14,.5)}
.stats .grid{gap:30px}
.stats h3{color:#fff; font-size:2.6rem; margin:0; word-break:break-word; overflow-wrap:break-word}
.stats p{color:rgba(255,255,255,.85); margin:6px 0 0; font-size:.95rem}
@media(max-width:640px){.stats{padding:36px 18px;border-radius:24px}.stats h3{font-size:1.7rem;letter-spacing:-.02em}.stats p{font-size:.82rem}.stats .row.g-4{row-gap:22px!important}}

/* Steps */
.step{position:relative; padding-left:70px}
.step .num{position:absolute; left:0; top:0; width:50px; height:50px; border-radius:14px; background:var(--grad); color:#fff; display:grid; place-items:center; font-weight:800; font-size:1.2rem; box-shadow:0 10px 24px -10px rgba(255,106,44,.45)}
.step h3{margin:0 0 8px}
.step p{color:var(--ink-soft); margin:0}

/* Pricing */
.price{background:#fff; border:1px solid var(--line); border-radius:24px; padding:34px 28px; transition:all .3s; position:relative}
.price:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.price.featured{background:var(--grad); color:#fff; border:0; transform:scale(1.04)}
.price.featured h3, .price.featured .price-num{color:#fff}
.price.featured ul li{color:rgba(255,255,255,.92)}
.price.featured ul li i{color:#fff}
.price h3{font-size:1.3rem; margin:0 0 6px}
.price .desc{color:var(--ink-soft); font-size:.92rem; min-height:42px}
.price .price-num{font-size:2.6rem; font-weight:800; margin:14px 0 4px}
.price .price-num small{font-size:1rem; font-weight:600; color:var(--ink-soft)}
.price.featured .price-num small{color:rgba(255,255,255,.8)}
.price ul{list-style:none; padding:0; margin:18px 0; display:grid; gap:10px}
.price ul li{display:flex; gap:10px; align-items:flex-start; font-size:.94rem}
.price ul li i{color:var(--pri); margin-top:3px}
.price .featured-tag{position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--pri); color:#fff; padding:5px 14px; border-radius:999px; font-size:.78rem; font-weight:700}

/* FAQ */
.faq-item{background:#fff; border:1px solid var(--line); border-radius:18px; margin-bottom:12px; overflow:hidden; transition:all .25s}
.faq-item:hover{border-color:#F0DFD0}
.faq-q{display:flex; justify-content:space-between; align-items:center; padding:18px 22px; cursor:pointer; font-weight:700; user-select:none; gap:14px}
.faq-topic-icon{flex:0 0 auto;width:36px;height:36px;border-radius:10px;background:linear-gradient(160deg,#FFF1E3,#FFE0CC);color:var(--pri-2);display:grid;place-items:center;font-size:.95rem;box-shadow:inset 0 -2px 6px rgba(184,46,14,.08),0 6px 14px -10px rgba(255,106,44,.35);margin-right:4px}
.faq-q i{width:28px; height:28px; border-radius:50%; background:var(--pri-soft); color:var(--pri); display:grid; place-items:center; font-size:.7rem; transition:transform .3s ease, background .3s, color .3s; flex-shrink:0}
.faq-item.open .faq-q i{background:var(--pri); color:#fff; transform:rotate(180deg)}
.faq-a{max-height:0; overflow:hidden; padding:0 22px; color:var(--ink-soft); transition:max-height .3s ease, padding .3s}
.faq-item.open .faq-a{max-height:300px; padding:0 22px 18px}

/* CTA banner */
.cta-band{background:radial-gradient(120% 140% at 50% 120%, #FF6A2C 0%, #FFB37A 35%, #FFE0CC 70%, #FFF1E4 100%); border-radius:32px; padding:64px 56px; color:#0B0B10; text-align:center; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.6); box-shadow:0 30px 80px -30px rgba(255,106,44,.45)}
.cta-band::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 15% 10%, rgba(255,255,255,.55), transparent 45%); pointer-events:none}
.cta-band > *{position:relative}
.cta-band h2{color:#0B0B10; margin:0 0 12px; font-weight:800; letter-spacing:-.01em}
.cta-band p{color:rgba(11,11,16,.72); max-width:560px; margin:0 auto 26px; font-size:1.02rem}
.cta-band .btn-light{background:#fff; color:#0B0B10; border:0; border-radius:999px; padding:12px 24px; font-weight:700; box-shadow:0 8px 24px -8px rgba(0,0,0,.18)}
.cta-band .btn-light:hover{background:#fff; transform:translateY(-1px)}
.cta-band .btn-primary{background:#FF6A2C; color:#fff; border:0; border-radius:999px; padding:12px 24px; font-weight:700; box-shadow:0 8px 24px -8px rgba(184,46,14,.55)}
.cta-band .btn-primary:hover{background:#E0431B}

/* Footer */
footer{background:linear-gradient(180deg,#FFFFFF 0%,#FFF6EC 55%,#FFE7D2 100%); color:var(--ink); padding:80px 0 28px; margin-top:60px; border-top:1px solid #F2E3D2}
footer h4{color:var(--ink); font-size:1rem; margin:0 0 18px; font-weight:800; letter-spacing:.01em}
footer .row{margin-bottom:48px; align-items:flex-start}
footer ul{list-style:none; padding:0; margin:0; display:grid; gap:12px}
footer a{color:#3a3a3a; font-size:.95rem; transition:color .2s}
footer a:hover{color:var(--pri)}
footer .brand{margin-bottom:18px; display:inline-block}
footer .foot-tag{font-weight:800; font-family:'Plus Jakarta Sans',sans-serif; color:var(--ink); margin:0 0 10px; font-size:1.05rem}
footer .foot-desc{margin:0 0 22px; max-width:300px; font-size:.92rem; line-height:1.65; color:#5d5247}
footer .copy{border-top:1px solid #F2D9BE; padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:.9rem; color:#6b5b4d}
footer .copy a{color:#6b5b4d}
footer .copy a:hover{color:var(--pri)}
.socials{display:flex; gap:12px; margin-top:6px}
.socials a{width:38px; height:38px; border-radius:50%; background:var(--pri); display:grid; place-items:center; color:#fff; font-weight:700; font-size:.9rem; transition:transform .2s, background .2s}
.socials a:nth-child(n+2){background:#fff; color:#2a2a2a; border:1px solid #E8DCCB}
.socials a:hover{transform:translateY(-2px); background:var(--pri); color:#fff; border-color:var(--pri)}

/* Reveal */
.reveal{opacity:0; transform:translateY(20px); transition:all .7s ease}
.reveal.in{opacity:1; transform:translateY(0)}

/* Page header (inner pages) */
.page-head{position:relative; padding:0 0 80px; margin-top:-72px; overflow:hidden; background:radial-gradient(110% 80% at 50% 0%, #FFE0CC 0%, #FFEEDD 40%, #FFF7EE 70%, #FFFFFF 100%)}
.page-head::before{content:""; position:absolute; top:-200px; right:-160px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(255,138,76,.38), transparent 65%); filter:blur(50px); animation:float 14s ease-in-out infinite; pointer-events:none}
.page-head::after{content:""; position:absolute; top:-180px; left:-160px; width:480px; height:480px; border-radius:50%; background:radial-gradient(circle, rgba(255,179,122,.32), transparent 65%); filter:blur(50px); animation:float 18s ease-in-out infinite reverse; pointer-events:none}
.page-head .container{position:relative; z-index:1; text-align:center; padding-top:140px}
.page-head h1{font-size:clamp(2rem, 4vw, 3rem); line-height:1.15; margin:18px 0 14px}
.page-head p{max-width:640px; margin:14px auto 0}
@media(max-width:900px){ .page-head{padding:0 0 40px; margin-top:-68px} .page-head .container{padding-top:110px} }
@media(max-width:640px){
  .page-head{margin-top:-80px; padding:0 0 36px}
  .page-head .container{padding-top:100px}
  .page-head h1{font-size:clamp(1.75rem,7.2vw,2.15rem)!important; line-height:1.18; letter-spacing:-.02em; word-wrap:break-word; overflow-wrap:break-word; hyphens:auto}
  .page-head p{padding:0 4px}
}
.breadcrumbs{font-size:.9rem; color:var(--ink-soft); margin-bottom:18px}
.breadcrumbs a{color:var(--pri)}

/* Legal pages */
.legal-page h2{font-size:clamp(1.2rem,2.4vw,1.55rem); line-height:1.25; margin:28px 0 10px}
.legal-page p, .legal-page ul{font-size:.96rem; line-height:1.65}
.legal-page ul{padding-left:22px}
@media(max-width:640px){.legal-page h2{font-size:1.15rem!important}}

/* Forms */
.form{display:grid; gap:14px; max-width:520px; margin:0 auto}
.form input, .form textarea, .form select{padding:14px 16px; border-radius:14px; border:1px solid var(--line); background:#fff; font:inherit; color:var(--ink); transition:border .2s, box-shadow .2s}
.form input:focus, .form textarea:focus, .form select:focus{outline:0; border-color:var(--pri); box-shadow:0 0 0 4px rgba(255,106,44,.15)}
.form label{font-weight:600; font-size:.9rem; color:var(--ink); margin-bottom:-6px}

/* Sample tiles */
.sample{border-radius:20px; overflow:hidden; background:#fff; border:1px solid var(--line); transition:all .3s}
.sample:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.sample .thumb{aspect-ratio:16/10; background:var(--grad); position:relative; overflow:hidden}
.sample .thumb svg{width:100%; height:100%}
.sample .meta{padding:18px 20px}
.sample .meta h4{margin:0 0 4px; font-size:1.05rem}
.sample .meta p{margin:0; color:var(--ink-soft); font-size:.88rem}

/* Logo strip */
.logo-strip{display:flex;flex-wrap:wrap;gap:14px 18px;justify-content:center;align-items:center}
.logo-strip .logo-pill{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:#fff;border:1px solid var(--line);font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;letter-spacing:.06em;font-size:.95rem;color:var(--lc,var(--ink));box-shadow:var(--shadow-soft);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.logo-strip .logo-pill:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--lc) 45%,var(--line));box-shadow:0 14px 28px -16px color-mix(in oklab,var(--lc) 55%,transparent)}
.logo-strip .logo-pill{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;height:52px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.logo-strip .logo-pill img{height:24px;width:auto;display:block}

/* ============= UX KIT ============= */
/* Buttons — sizes & states */
.btn{position:relative; user-select:none}
.btn:focus-visible{outline:0; box-shadow:0 0 0 4px rgba(255,106,44,.25)}
.btn[disabled],.btn.is-disabled{opacity:.55; cursor:not-allowed; pointer-events:none}
.btn-sm{padding:.55rem 1rem; font-size:.85rem}
.btn-lg{padding:1.05rem 1.8rem; font-size:1.05rem}
.btn-block{display:flex; width:100%; justify-content:center}
.btn-icon{width:42px; height:42px; padding:0; justify-content:center; border-radius:999px}
.btn.is-loading{color:transparent !important; pointer-events:none}
.btn.is-loading::after{content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px; border-radius:50%; border:2.5px solid currentColor; border-right-color:transparent; color:#fff; animation:spin .7s linear infinite}
.btn-ghost.is-loading::after{color:var(--ink)}
@keyframes spin{ to{transform:rotate(360deg)} }

/* Inputs / Form fields */
.field{display:grid; gap:6px}
.field-label{font-weight:600; font-size:.88rem; color:var(--ink)}
.field-hint{font-size:.8rem; color:var(--ink-soft)}
.field-error{font-size:.8rem; color:#D1331A; display:flex; gap:6px; align-items:center}
.input,.textarea,.select{width:100%; padding:13px 16px; border-radius:14px; border:1px solid var(--line); background:#fff; font:inherit; color:var(--ink); transition:border .2s, box-shadow .2s, background .2s}
.input::placeholder,.textarea::placeholder{color:#A89E94}
.input:hover,.textarea:hover,.select:hover{border-color:#E6D6C8}
.input:focus,.textarea:focus,.select:focus{outline:0; border-color:var(--pri); box-shadow:0 0 0 4px rgba(255,106,44,.15); background:#FFFEFD}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:#E0431B; box-shadow:0 0 0 4px rgba(224,67,27,.12)}
.input[disabled]{background:#FAF6F2; color:#A89E94; cursor:not-allowed}
.textarea{min-height:120px; resize:vertical}
.input-group{position:relative}
.input-group .input{padding-left:44px}
.input-group > .ic{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#A89E94; pointer-events:none}
.checkbox,.radio{display:inline-flex; gap:8px; align-items:center; font-size:.92rem; cursor:pointer; user-select:none}
.checkbox input,.radio input{accent-color:var(--pri); width:16px; height:16px}

/* Badges / Chips */
.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:.75rem; font-weight:600; background:var(--pri-soft); color:var(--pri-deep)}
.badge.success{background:#E6F7EE; color:#0F7B3F}
.badge.warn{background:#FFF4DB; color:#8A5A00}
.badge.danger{background:#FDE7E2; color:#A82A0E}
.badge.neutral{background:#F2EDE7; color:#5C5C66}

/* Alerts */
.alert{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:14px; border:1px solid; font-size:.92rem}
.alert .ic{flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:.75rem}
.alert.info{background:#EEF6FF; border-color:#D6E7FF; color:#0B3A78} .alert.info .ic{background:#2563EB}
.alert.success{background:#E6F7EE; border-color:#BFE7CF; color:#0F7B3F} .alert.success .ic{background:#16A34A}
.alert.warn{background:#FFF4DB; border-color:#F5E0AC; color:#7A4F00} .alert.warn .ic{background:#D08700}
.alert.danger{background:#FDE7E2; border-color:#F6C7BC; color:#7C1F0A} .alert.danger .ic{background:#E0431B}

/* Modal */
.modal-overlay{position:fixed; inset:0; background:rgba(14,14,18,.55); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; z-index:200; padding:20px; animation:fadeIn .2s ease}
.modal-overlay.open{display:flex}
.modal-overlay > .modal{position:relative; top:auto; left:auto; display:block; height:auto; outline:0; background:#fff; border-radius:24px; max-width:480px; width:100%; padding:30px; max-height:92vh; overflow-y:auto; box-shadow:0 40px 100px -30px rgba(0,0,0,.45); border:1px solid var(--line); animation:popIn .25s cubic-bezier(.2,.9,.3,1.2)}
#demoModal > .modal{max-width:1200px; width:96vw; padding:20px}
@media(max-width:640px){#demoModal > .modal{padding:14px; border-radius:18px}}
.h5p-demo-frame{position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:#0b0f1a; box-shadow:0 30px 80px -30px rgba(0,0,0,.55); border:1px solid var(--line); margin-top:14px}
.h5p-demo-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
.h5p-demo-frame .h5p-demo-open{position:absolute; top:12px; right:12px; background:rgba(11,15,26,.7); color:#fff; padding:8px 12px; border-radius:999px; font-size:.8rem; text-decoration:none; backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.15); z-index:2}
.h5p-demo-frame .h5p-demo-open:hover{background:rgba(11,15,26,.9)}
.modal-overlay .modal-head{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:14px}
.modal-overlay .modal h3{margin:0; font-size:1.3rem}
.modal-overlay .modal-close{background:none; border:0; font-size:1.4rem; line-height:1; cursor:pointer; color:var(--ink-soft); padding:4px 8px; border-radius:10px}
.modal-overlay .modal-close:hover{background:var(--pri-soft); color:var(--pri)}
.modal-overlay .modal-body{color:var(--ink-soft); font-size:.95rem; line-height:1.6}
.modal-overlay .modal-foot{display:flex; gap:10px; justify-content:flex-end; margin-top:22px; flex-wrap:wrap}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes popIn{ from{opacity:0; transform:translateY(12px) scale(.96)} to{opacity:1; transform:translateY(0) scale(1)} }

/* Toast */
.toast-stack{position:fixed; top:24px; right:24px; display:flex; flex-direction:column; gap:10px; z-index:300; pointer-events:none}
.toast{display:flex; gap:12px; align-items:flex-start; min-width:280px; max-width:380px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:0 18px 40px -16px rgba(14,14,18,.25); pointer-events:auto; animation:toastIn .25s cubic-bezier(.2,.9,.3,1.2); border-left:4px solid var(--pri)}
.toast.success{border-left-color:#16A34A} .toast.danger{border-left-color:#E0431B} .toast.warn{border-left-color:#D08700} .toast.info{border-left-color:#2563EB}
.toast .ic{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; color:#fff; flex:0 0 auto; font-size:.8rem; background:var(--pri)}
.toast.success .ic{background:#16A34A} .toast.danger .ic{background:#E0431B} .toast.warn .ic{background:#D08700} .toast.info .ic{background:#2563EB}
.toast .body{flex:1; font-size:.92rem; color:var(--ink)}
.toast .body small{display:block; color:var(--ink-soft); font-size:.82rem; margin-top:2px}
.toast .x{background:none; border:0; cursor:pointer; color:var(--ink-soft); font-size:1.1rem; line-height:1}
.toast.out{animation:toastOut .25s ease forwards}
@keyframes toastIn{ from{opacity:0; transform:translateX(20px)} to{opacity:1; transform:translateX(0)} }
@keyframes toastOut{ to{opacity:0; transform:translateX(20px)} }
@media(max-width:600px){ .toast-stack{left:16px; right:16px; top:16px} .toast{max-width:none; min-width:0} }

/* Online converter block — cream card with dashed dropzone */
.online-converter{position:relative; width:100%; background:linear-gradient(180deg,#FFF1E3 0%,#FFE4CD 100%); border:1px solid #F7D7B8; border-radius:20px; padding:22px 24px; color:var(--ink); text-align:left; box-shadow:0 10px 30px -18px rgba(255,106,44,.35)}
.oc-title{margin:0 0 14px; color:var(--ink); font-size:1.2rem; font-weight:700; letter-spacing:-.01em}
.oc-card{position:relative}
.oc-form{display:flex; gap:14px; align-items:stretch; flex-wrap:nowrap}
.oc-drop{flex:1 1 auto; display:flex; align-items:center; gap:14px; background:#fff; border:2px dashed #FF8A4C; border-radius:14px; padding:14px 16px; cursor:pointer; min-width:0; position:relative; transition:border-color .2s ease, background .2s ease}
.oc-drop:hover{border-color:#FF6A2C; background:#FFFAF5}
.oc-drop-icon{flex:0 0 auto; width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,#FF8A4C,#FF6A2C); color:#fff; box-shadow:0 8px 18px -8px rgba(255,106,44,.55)}
.oc-drop-text{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; line-height:1.25}
.oc-drop-text strong{color:var(--ink); font-size:1rem; font-weight:700}
.oc-drop-text small{color:var(--ink-soft); font-size:.82rem; margin-top:2px}
.oc-drop-text .oc-file-name{color:#FF6A2C; font-style:normal; font-size:.82rem; font-weight:600; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.oc-drop-text .oc-file-name:empty{display:none}
.oc-file-btn{flex:0 0 auto; display:inline-flex; align-items:center; padding:0 18px; height:42px; align-self:center; background:#1F1F1F; color:#fff; font-weight:600; font-size:.85rem; border-radius:10px}
.oc-drop input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%}
.btn.btn-convert{flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; justify-content:center; padding:0 26px; background:linear-gradient(135deg,#FF8A4C,#FF6A2C); color:#fff; border:0; border-radius:14px; font-weight:800; font-size:.95rem; letter-spacing:.04em; cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, filter .2s ease; box-shadow:0 12px 24px -10px rgba(255,106,44,.55)}
.btn.btn-convert:hover{color:#fff; transform:translateY(-1px); filter:brightness(1.04); box-shadow:0 16px 28px -10px rgba(255,106,44,.65)}
.btn.btn-convert:disabled{opacity:.6; cursor:not-allowed; transform:none}
.oc-trust{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:22px; color:var(--ink); font-size:.88rem; font-weight:500}
.oc-trust li{display:inline-flex; align-items:center; gap:6px}
.oc-sample{display:inline-block; margin-top:14px; padding:8px 16px; background:#fff; border:1px solid #F7D7B8; border-radius:999px; color:var(--ink-soft); font-size:.85rem; text-decoration:none; transition:border-color .2s ease}
.oc-sample:hover{border-color:#FF8A4C}
.oc-sample strong{color:#FF6A2C; font-weight:700}
@media(max-width:820px){
  .online-converter{padding:18px}
  .oc-form{flex-wrap:wrap}
  .oc-drop{width:100%}
  .oc-file-btn{display:none}
  .btn.btn-convert{width:100%; height:48px}
  .oc-trust{gap:12px 18px; font-size:.82rem}
}

/* Conversion status UI */
.oc-status{margin-top:18px;padding:16px 18px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.oc-status-row{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:.9rem;color:var(--ink);margin-bottom:10px}
.oc-status-pct{color:var(--pri);font-variant-numeric:tabular-nums}
.oc-progress{height:8px;border-radius:999px;background:#F1E7DB;overflow:hidden}
.oc-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#FF8A4C,#FF6A2C);border-radius:999px;transition:width .35s ease}
.oc-status-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.oc-status-error{margin:12px 0 0;color:#b3261e;font-size:.9rem;font-weight:600}

/* Pricing — focused single-plan layout */
.pp-toggle{display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0 28px;font-weight:700;color:var(--ink-soft)}
.pp-toggle-label{cursor:pointer;font-size:1rem;transition:color .2s ease}
.pp-toggle-label.active{color:var(--ink)}
.pp-switch{position:relative;width:54px;height:28px;border-radius:999px;background:#E5E7EB;border:0;cursor:pointer;padding:0;transition:background .2s ease}
.pp-switch.on{background:linear-gradient(135deg,#FF8A4C,#FF6A2C)}
.pp-switch-thumb{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .2s ease}
.pp-switch.on .pp-switch-thumb{transform:translateX(26px)}

.pp-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:stretch;max-width:1080px;margin:0 auto}
.pp-info,.pp-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:36px 40px;box-shadow:0 12px 32px -22px rgba(14,14,18,.18)}
.pp-info{display:flex;flex-direction:column;justify-content:center}
.pp-info h2{text-align:center;margin:0 0 10px;font-size:1.6rem}
.pp-info-sub{text-align:center;color:var(--ink-soft);margin:0 0 22px}
.pp-checks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px;max-width:380px;margin-left:auto;margin-right:auto;width:100%}
.pp-checks li{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:1rem;font-weight:500}
.pp-checks li i{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#FFE4CD;color:#FF6A2C;font-style:normal;font-size:.78rem;font-weight:800}

.pp-card{position:relative;border:2px solid #FF6A2C;box-shadow:0 0 0 6px rgba(255,106,44,.08),0 24px 48px -24px rgba(255,106,44,.4);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pp-recommend{position:absolute;top:-16px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#FF8A4C,#E0431B);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.12em;padding:8px 18px;border-radius:999px;box-shadow:0 8px 18px -6px rgba(224,67,27,.5)}
.pp-plan-pill{display:inline-block;padding:8px 20px;border-radius:999px;background:#FFE4CD;color:#FF6A2C;font-weight:700;font-size:.95rem;margin-bottom:18px}
.pp-price{display:flex;align-items:baseline;justify-content:center;gap:4px;margin:6px 0 4px}
.pp-amount{font-family:'Plus Jakarta Sans',sans-serif;font-size:4.2rem;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1}
.pp-period{font-size:1.1rem;color:var(--ink-soft);font-weight:600}
.pp-billed{margin:8px 0 6px;color:var(--ink-soft);font-size:.95rem}
.pp-original{margin:0 0 22px;color:#9CA3AF;font-size:.9rem}
.pp-buy{background:linear-gradient(135deg,#FF8A4C,#FF6A2C);color:#fff;border:0;padding:16px 28px;font-size:1.05rem;font-weight:700;border-radius:14px;box-shadow:0 14px 28px -12px rgba(255,106,44,.6);transition:transform .15s ease, filter .2s ease;width:100%;max-width:320px}
.pp-buy:hover{transform:translateY(-1px);filter:brightness(1.05);color:#fff}
.pp-secure{margin:14px 0 0;color:var(--ink-soft);font-size:.85rem}

@media(max-width:820px){
  .pp-grid{grid-template-columns:1fr;gap:20px}
  .pp-info,.pp-card{padding:26px 22px}
  .pp-amount{font-size:3.4rem}
}

/* Full-width converter band */
.oc-section{background:linear-gradient(180deg,#FFF1E3 0%,#FFE4CD 100%);padding:40px 0}
.oc-section-inner{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.oc-section .online-converter{background:transparent;border:0;box-shadow:none;border-radius:0;padding:0}
@media(max-width:820px){ .oc-section{padding:28px 0} .oc-section-inner{padding:0 16px} }

/* How-it-works section — fresh card flow */
.how-section{position:relative;padding:90px 0 100px;background:
  radial-gradient(900px 460px at 90% -10%,#FFE4D2 0%,transparent 60%),
  radial-gradient(700px 400px at -10% 110%,#FFEEDD 0%,transparent 55%),
  #FFFDFB;
  overflow:hidden}
.how-section .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--pri-2);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;box-shadow:var(--shadow-soft)}
.how-section .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px color-mix(in oklab,var(--pri) 20%,transparent);animation:pulseDot 2s ease-in-out infinite}
@keyframes pulseDot{50%{box-shadow:0 0 0 8px color-mix(in oklab,var(--pri) 8%,transparent)}}
.how-section h2{font-size:clamp(1.7rem,2.8vw,2.6rem);line-height:1.2;margin:18px 0 12px}
.text-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.how-grid{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.how-rail{position:absolute;left:6%;right:6%;top:64px;height:2px;background:repeating-linear-gradient(90deg,color-mix(in oklab,var(--pri) 55%,transparent) 0 8px,transparent 8px 18px);border-radius:2px;z-index:0;opacity:.55}

.how-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px 24px 28px;box-shadow:var(--shadow-soft);transition:transform .35s cubic-bezier(.2,.9,.3,1.2),box-shadow .35s,border-color .35s;opacity:0;transform:translateY(24px);z-index:1}
.reveal.in .how-card{opacity:1;transform:translateY(0);transition:opacity .6s ease var(--d,0ms),transform .6s cubic-bezier(.2,.9,.3,1.2) var(--d,0ms),box-shadow .35s,border-color .35s}
.how-card:hover{transform:translateY(-8px);box-shadow:0 28px 60px -28px rgba(255,106,44,.35);border-color:color-mix(in oklab,var(--pri) 35%,var(--line))}

.how-num{position:absolute;top:18px;right:22px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:2.4rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.2;letter-spacing:-.03em;transition:opacity .3s}
.how-card:hover .how-num{opacity:.4}

.how-icon{position:relative;width:68px;height:68px;border-radius:20px;display:grid;place-items:center;color:var(--pri-2);background:linear-gradient(160deg,#FFF1E3,#FFE0CC);box-shadow:inset 0 -3px 8px rgba(184,46,14,.08),0 10px 24px -14px rgba(255,106,44,.45);margin-bottom:22px;transition:transform .4s}
.how-icon svg,.how-icon > i{width:32px;height:32px;font-size:30px;display:grid;place-items:center}
.how-card:hover .how-icon{transform:rotate(-6deg) scale(1.06)}

.how-card h3{font-size:1.15rem;margin:0 0 8px;letter-spacing:-.015em}
.how-card p{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.55}

.how-card.is-final{background:linear-gradient(160deg,#FF6A2C 0%,#E0431B 100%);border-color:transparent;color:#fff}
.how-card.is-final h3{color:#fff}
.how-card.is-final p{color:rgba(255,255,255,.88)}
.how-card.is-final .how-num{background:none;-webkit-background-clip:initial;background-clip:initial;color:rgba(255,255,255,.4);-webkit-text-fill-color:rgba(255,255,255,.4);opacity:1}
.how-card.is-final .how-icon{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.how-card.is-final:hover{box-shadow:0 30px 70px -25px rgba(184,46,14,.55)}

.how-orbit{position:absolute;width:26px;height:26px;background:#fff;color:var(--pri-2);border-radius:8px;display:grid;place-items:center;box-shadow:0 8px 18px -8px rgba(0,0,0,.3)}
.how-orbit svg,.how-orbit i{width:16px;height:16px;font-size:14px;display:grid;place-items:center}
.how-orbit-a{top:-10px;right:-10px;animation:floatY 3.6s ease-in-out infinite}
.how-orbit-b{bottom:-10px;left:-12px;width:32px;height:24px;animation:floatY 3.6s ease-in-out -1.8s infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

@media(max-width:980px){
  .how-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .how-rail{display:none}
}
@media(max-width:520px){
  .how-grid{grid-template-columns:1fr}
  .how-section{padding:70px 0 80px}
}

/* Key Features section */
.key-features-section{padding:90px 0;background:#fff}
.kf-head{margin:0 0 50px}
.kf-title{font-size:clamp(2rem,3.4vw,3rem);font-weight:400;letter-spacing:-.02em;margin:0;color:var(--ink)}
.kf-title strong{font-weight:800;color:var(--ink)}
.kf-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 64px}
.kf-item{display:flex;gap:20px;align-items:flex-start;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in .kf-item{opacity:1;transform:translateY(0)}
.kf-item:hover .kf-dot{transform:scale(1.08);background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 10px 22px -10px color-mix(in oklab,var(--pri) 60%,transparent)}
.kf-dot{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--pri);border:1.5px solid color-mix(in oklab,var(--pri) 55%,transparent);display:grid;place-items:center;font-size:1.05rem;margin-top:4px;transition:transform .3s,background .3s,color .3s,border-color .3s,box-shadow .3s}
.kf-item h3{margin:0 0 6px;font-size:1.3rem;color:var(--ink);font-weight:700;letter-spacing:-.01em}
.kf-item p{margin:0;color:var(--ink-soft);font-size:1rem;line-height:1.6;max-width:42ch}
@media(max-width:820px){
  .key-features-section{padding:60px 0}
  .kf-grid{grid-template-columns:1fr;gap:28px}
  .kf-head{margin-bottom:30px}
}

/* Clients strip */
.clients-section{padding:70px 0 60px;background:#fff}
.clients-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:32px;justify-items:center;align-items:center;padding:24px 0}
.clients-strip img{height:42px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(.15);opacity:.92;transition:transform .3s ease,opacity .3s ease,filter .3s ease}
.clients-strip img:hover{transform:translateY(-3px) scale(1.05);opacity:1;filter:none}
@media(max-width:1024px){ .clients-strip{grid-template-columns:repeat(4,1fr);gap:28px 24px} }
@media(max-width:640px){ .clients-strip{grid-template-columns:repeat(3,1fr);gap:24px 16px} .clients-strip img{height:32px} }
@media(max-width:380px){ .clients-strip{grid-template-columns:repeat(2,1fr)} }

/* Awards & Testimonials */
.awards-testimonials{padding:90px 0;background:linear-gradient(180deg,#FFFDFB 0%,#FFF6EC 100%)}
.at-grid{display:grid;grid-template-columns:280px 1fr;gap:56px;align-items:start}
.at-h{font-family:'Plus Jakarta Sans',sans-serif;font-weight:400;font-size:1.9rem;letter-spacing:-.02em;margin:0 0 26px;color:var(--ink)}
.at-h strong{font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.awards-col{display:flex;flex-direction:column;gap:18px}
.award-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-soft);transition:transform .25s,box-shadow .25s}
.award-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(0,0,0,.18)}
.award-badge{position:relative;height:120px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(160deg,color-mix(in oklab,var(--ac) 18%,#fff),color-mix(in oklab,var(--ac) 6%,#fff));border:1px solid color-mix(in oklab,var(--ac) 30%,var(--line));color:var(--ac)}
.award-badge i{font-size:3rem;filter:drop-shadow(0 6px 12px color-mix(in oklab,var(--ac) 50%,transparent))}
.award-year{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:var(--ac);color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:.7rem;letter-spacing:.15em;padding:3px 10px;border-radius:999px}
.award-link{color:var(--pri-2);font-weight:600;font-size:.95rem;text-decoration:none;line-height:1.4;transition:color .2s}
.award-link:hover{color:var(--pri)}

.t-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px;gap:20px;flex-wrap:wrap}
.t-viewall{color:var(--pri);font-weight:700;font-size:.95rem;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:gap .2s}
.t-viewall:hover{gap:10px}
.t-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.t-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 26px 24px;box-shadow:var(--shadow-soft);transition:transform .3s,box-shadow .3s}
.t-card:hover{transform:translateY(-5px);box-shadow:0 24px 50px -25px rgba(255,106,44,.28)}
.t-quote{font-size:1.6rem;color:color-mix(in oklab,var(--pri) 70%,transparent);margin-bottom:10px}
.t-body{margin:0 0 22px;color:var(--ink);font-style:italic;font-family:'Plus Jakarta Sans','Inter',sans-serif;font-size:1.02rem;line-height:1.6}
.t-foot{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--line)}
.t-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:color-mix(in oklab,var(--ac) 15%,#fff);color:var(--ac);font-size:1.1rem;flex-shrink:0}
.t-foot strong{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:1rem;color:var(--ink);font-weight:800}
.t-foot small{display:block;color:var(--ink-soft);font-size:.85rem;margin-top:2px}

@media(max-width:980px){
  .at-grid{grid-template-columns:1fr;gap:40px}
  .t-grid{grid-template-columns:1fr}
  .awards-col{flex-direction:row;flex-wrap:wrap}
  .award-card{flex:1 1 200px}
}

/* === Mobile, A11y & Performance Optimizations === */
img,svg,video{max-width:100%;height:auto}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden;max-width:100%}
body{overflow-x:hidden;max-width:100%;position:relative}
body.nav-open{overflow:hidden;touch-action:none}
:focus-visible{outline:2px solid var(--pri);outline-offset:3px;border-radius:6px}
.btn,input:not([type="checkbox"]):not([type="radio"]),select,textarea{min-height:44px}
.nav-links a{min-height:44px;display:flex;align-items:center}
.pp-switch,.pp-switch *,.faq-q i,.toast .x,.menu-btn{min-height:0}
.pp-switch{height:28px !important}
input,select,textarea{font-size:16px} /* prevents iOS zoom */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .hero::before,.hero::after{animation:none}
}

@media (min-width:641px) and (max-width:1024px){
  .container{padding:0 24px}
  .nav{top:16px;padding:0 20px}
  .nav-inner{padding:6px 6px 6px 16px;max-width:100%;gap:8px}
  .brand img{height:26px !important;width:auto !important;object-fit:contain}
  .nav-links{gap:0}
  .nav-links a{padding:8px 9px;font-size:.84rem}
  .nav-links .caret{margin-left:2px}
  .nav-cta{gap:6px;flex-shrink:0}
  .nav-cta .btn{padding:.55rem .9rem;font-size:.82rem;white-space:nowrap;min-height:38px}
}


@media (max-width: 640px){
  .container{padding:0 24px}
  h1{font-size:clamp(2rem,8vw,2.6rem)}
  h2{font-size:clamp(1.55rem,6vw,2rem)}
  .lead{font-size:1rem}
  .nav{top:12px;padding:0 16px}
  .nav::before{display:none}
  .nav-inner{padding:8px 8px 8px 18px;max-width:100%}
  .brand img{height:24px !important;width:auto !important;object-fit:contain}
  .nav-cta .btn{padding:.6rem .9rem;font-size:.82rem}
  .hero{margin-top:-70px; padding-top:100px !important}
  .hero::before{top:-180px; right:-160px; width:380px; height:380px}
  .hero::after{top:-160px; left:-160px; width:340px; height:340px}

  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{justify-content:center;width:100%}
  .speed-stage{grid-template-columns:1fr;gap:18px;min-height:auto;padding:18px 0}
  .ss-tunnel{height:120px;width:100%}
  section{padding:50px 0}

}
@media (max-width: 420px){
  .nav-cta .btn-ghost{display:none}
}

/* Print */
@media print{
  .nav,.menu-btn,.hero::before,.hero::after,footer,.btn{display:none !important}
  body{background:#fff;color:#000}
}

/* Hero headline fade-in animation */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.fade-in-up { animation: fadeInUp .9s ease-out both; }

/* SDK bulk conversion stage */
.sdk-bulk-stage{grid-template-columns:1fr 1.2fr 1fr;min-height:340px;gap:6px;padding:56px 10px 40px}
.sdk-bulk-stage .bulk-badge-top{position:absolute;top:10px;left:50%;right:auto;transform:translateX(-50%);font-size:.7rem;padding:6px 14px;animation:badgeNudge 2.4s ease-in-out infinite}
@keyframes badgeNudge{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.05)}}
.feat-stack{position:absolute;top:50%;transform:translateY(-50%);width:110px;height:28px;z-index:4;pointer-events:none}
.feat-left{left:6%}
.feat-right{right:6%}
.feat-chip{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.78rem;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 10px;box-shadow:0 6px 14px -10px rgba(0,0,0,.18);opacity:0;animation:featCycle 3.6s ease-in-out infinite;white-space:nowrap}
.feat-left .feat-chip{border-left:3px solid #FF7A3D}
.feat-right .feat-chip{border-left:3px solid #0EA371}
.feat-chip.fc-1{animation-delay:0s}
.feat-chip.fc-2{animation-delay:1.2s}
.feat-chip.fc-3{animation-delay:2.4s}
@keyframes featCycle{0%{opacity:0;transform:translateY(8px)}8%,28%{opacity:1;transform:translateY(0)}36%,100%{opacity:0;transform:translateY(-8px)}}
.sdk-bulk-stage .ss-tunnel{height:260px;position:relative}
.sdk-bulk-stage .ss-engine.sdk-engine{width:104px;height:104px;font-size:2.4rem;box-shadow:0 0 0 5px rgba(255,255,255,.95),0 22px 48px -16px rgba(224,67,27,.7);animation:engineZoom 1.8s ease-in-out infinite}
.sdk-bulk-stage .ss-engine.sdk-engine i{animation:none}
@keyframes engineZoom{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.sdk-bulk-stage .sdk-ring-3{animation:ringWave 1.8s ease-out infinite;animation-delay:-1.4s;inset:-18px}
.sdk-bulk-stage .ss-particle{animation-duration:2.6s;width:28px;height:28px;font-size:.8rem}
.sdk-bulk-stage .ss-particle i{color:#D24726}
.sdk-bulk-stage .ss-p2{animation-delay:-.7s}
.sdk-bulk-stage .ss-p3{animation-delay:-1.3s}
.sdk-bulk-stage .ss-p4{animation-delay:-1.9s}
.engine-gear{position:absolute;color:#fff;opacity:.85;font-size:.85rem;animation:gearSpin 4s linear infinite}
.engine-gear-1{top:18%;left:18%;font-size:.95rem}
.engine-gear-2{bottom:20%;right:18%;animation:gearSpin 3s linear infinite reverse;font-size:.75rem}
@keyframes gearSpin{to{transform:rotate(360deg)}}
.bulk-engine-label{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:.72rem;letter-spacing:.22em;color:var(--ink);white-space:nowrap;text-transform:uppercase;background:#fff;padding:5px 12px;border-radius:999px;border:1px solid var(--line);box-shadow:0 6px 14px -10px rgba(0,0,0,.18);z-index:4}
.bulk-col{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 4px}
.bulk-file{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 14px -10px rgba(0,0,0,.15);font-family:'DM Sans',sans-serif;font-weight:600;font-size:.74rem;color:var(--ink);width:185px;max-width:100%;animation:bulkFloat 2.6s ease-in-out infinite;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bulk-file span{overflow:hidden;text-overflow:ellipsis}
.bulk-file i{font-size:1.05rem;flex-shrink:0}
.bulk-pptx i{color:#D24726}
.bulk-pptx{border-left:3px solid #D24726}
.bulk-html i{color:#E34F26}
.bulk-html{border-left:3px solid #E34F26;animation:bulkFloatOut 2.6s ease-in-out infinite}
.bulk-col-out .bulk-file{box-shadow:0 6px 16px -10px rgba(14,163,113,.4)}
.bulk-file.bf-2{animation-delay:-.3s}
.bulk-file.bf-3{animation-delay:-.6s}
.bulk-file.bf-4{animation-delay:-.9s}
.bulk-file.bf-5{animation-delay:-1.2s}
.bulk-col .ss-tag{margin-top:6px}
@keyframes bulkFloat{0%,100%{transform:translateX(0);opacity:1}50%{transform:translateX(6px);opacity:.85}}
@keyframes bulkFloatOut{0%,100%{transform:translateX(0);opacity:.85}50%{transform:translateX(-6px);opacity:1}}
@media (max-width:780px){
  .sdk-bulk-stage{grid-template-columns:1fr;gap:18px;padding-top:56px}
  .sdk-bulk-stage .feat-runner,
  .sdk-bulk-stage .bulk-engine-label{display:none}
  .sdk-bulk-stage .ss-tunnel{transform:none;height:160px;width:100%}
  .sdk-bulk-stage .ss-engine.sdk-engine{width:72px;height:72px;font-size:1.8rem}
  .bulk-file{width:90%}
}

/* Home animation: feature labels fade in/out below the engine */
.feat-fader{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);pointer-events:none;z-index:4;display:grid;place-items:center;min-height:22px;width:140px;text-align:center}
.ff-text{grid-area:1/1;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--pri-2);opacity:0;animation:ffCycle 12s ease-in-out infinite;white-space:nowrap}
.ff-text.ff-1{animation-delay:0s}
.ff-text.ff-2{animation-delay:2s}
.ff-text.ff-3{animation-delay:4s}
.ff-text.ff-4{animation-delay:6s}
.ff-text.ff-5{animation-delay:8s}
.ff-text.ff-6{animation-delay:10s}
@keyframes ffCycle{
  0%{opacity:0;transform:translateY(4px)}
  4%{opacity:1;transform:translateY(0)}
  13%{opacity:1;transform:translateY(0)}
  17%{opacity:0;transform:translateY(-4px)}
  100%{opacity:0;transform:translateY(-4px)}
}

/* Global gap helper — make Bootstrap row gaps consistent and visible */
.row.g-4{--bs-gutter-x:2rem;--bs-gutter-y:2rem}

/* Samples thumb default — light neutral instead of orange gradient */
.sample .thumb{background:#F5F1EC}

/* Improved mobile nav dropdown */
@media(max-width:900px){
  .nav-links{
    display:none;position:absolute;top:calc(100% + 10px);left:8px;right:8px;
    background:#ffffff;
    flex-direction:column;padding:14px;border:1px solid var(--line);
    border-radius:20px;box-shadow:0 24px 60px -20px rgba(14,14,18,.25);gap:2px;z-index:60;
    max-height:calc(100vh - 100px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain
  }
  .nav-links.open{display:flex}
  .nav-links > li{width:100%}
  .nav-links > li > a{padding:13px 16px;border-radius:12px;font-weight:600;font-size:.95rem;display:flex;align-items:center;justify-content:space-between}
  .nav-links > li > a:hover,.nav-links > li > a.active{background:var(--pri-soft);color:var(--pri)}
  .nav-links .caret{margin-left:auto;font-size:.75rem;opacity:.7}
  .nav-links .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:2px solid color-mix(in oklab,var(--pri) 35%,transparent);padding:4px 0 4px 14px;margin:2px 0 8px 18px;border-radius:0;background:transparent;min-width:0}
  .nav-links .submenu a{font-size:.86rem;color:var(--ink-soft);padding:9px 12px;font-weight:500}
  .nav-links .submenu a:hover{background:var(--pri-soft);color:var(--pri)}
}

/* CSS device mockup — iPad + iPhone */
.device-mock{position:relative;width:100%;max-width:480px;aspect-ratio:5/4;display:flex;align-items:center;justify-content:center}
.dm-tablet{position:relative;width:74%;aspect-ratio:4/3;background:#1a1a1f;border-radius:22px;padding:14px;box-shadow:0 30px 60px -25px rgba(14,14,18,.4)}
.dm-tablet .dm-screen{width:100%;height:100%;background:linear-gradient(135deg,#FFE0CC,#FFF6EE);border-radius:10px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:14px}
.dm-tablet .dm-screen::before{content:"";height:10px;width:38%;background:var(--grad);border-radius:6px}
.dm-tablet .dm-screen::after{content:"";flex:1;background:repeating-linear-gradient(180deg,rgba(255,106,44,.12) 0 8px,transparent 8px 18px);border-radius:8px}
.dm-phone{position:absolute;right:0;bottom:6%;width:30%;aspect-ratio:9/19;background:#1a1a1f;border-radius:22px;padding:8px;box-shadow:0 20px 40px -18px rgba(14,14,18,.5)}
.dm-phone .dm-screen{width:100%;height:100%;background:linear-gradient(160deg,#FFF1E3,#FFD9BD);border-radius:14px;display:flex;flex-direction:column;gap:5px;padding:8px;overflow:hidden}
.dm-phone .dm-screen::before{content:"";height:6px;width:60%;background:var(--grad);border-radius:4px;margin:6px auto 4px}
.dm-phone .dm-screen::after{content:"";flex:1;background:repeating-linear-gradient(180deg,rgba(255,106,44,.18) 0 5px,transparent 5px 12px);border-radius:6px}
@media(max-width:600px){.dm-phone{width:36%}}

/* CSS browser mockup */
.browser-mock{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;padding:32px 26px;background:linear-gradient(135deg,#FFEFE2,#FFD4B5);border-radius:22px;border:1px solid var(--line);max-width:420px;margin:0 auto;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.browser-mock .bm-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#fff;border:1px solid rgba(255,255,255,.9);border-radius:18px;padding:20px 12px;min-height:108px;box-shadow:0 8px 22px -10px rgba(204,110,60,.25);transition:transform .25s ease,box-shadow .25s ease;grid-column:span 2}
.browser-mock .bm-icon:hover{transform:translateY(-4px);box-shadow:0 16px 30px -12px rgba(255,106,44,.4)}
.browser-mock .bm-icon i{font-size:2.4rem;line-height:1}
.browser-mock .bm-icon span{font-size:.85rem;font-weight:700;color:#1a1a1a;letter-spacing:-.01em}
.browser-mock .bm-edge{grid-column:2 / span 2}
.browser-mock .bm-opera{grid-column:4 / span 2}
.bm-chrome i{color:#4285F4}.bm-firefox i{color:#FF7139}.bm-safari i{color:#1B6CFF}.bm-edge i{color:#0F88E4}.bm-opera i{color:#FF1B2D}
@media(max-width:480px){.browser-mock{padding:24px 18px;gap:12px}.browser-mock .bm-icon{padding:16px 10px;min-height:96px}.browser-mock .bm-icon i{font-size:2rem}}

/* Features page top cards */
.feat-top-card{text-align:center;padding:28px 20px;display:flex;flex-direction:column;align-items:center}
.feat-top-card .ic{margin-bottom:14px}
.feat-top-card h3{font-size:1.05rem;margin:0 0 8px;letter-spacing:-.01em;font-weight:700}
.feat-top-card p{font-size:.92rem;color:var(--ink-soft);margin:0;line-height:1.5}
@media(max-width:640px){
  .feat-top .col-6{padding-left:8px;padding-right:8px}
  .feat-top-card{padding:20px 14px}
  .feat-top-card .ic{width:48px;height:48px;font-size:1.1rem;margin-bottom:10px}
  .feat-top-card h3{font-size:.98rem;margin-bottom:6px}
  .feat-top-card p{font-size:.85rem;line-height:1.45}
}

/* System Requirements grid (matches home key-features) */
.sysreq-grid{margin-top:8px}
@media(max-width:900px){.sysreq-grid{grid-template-columns:1fr;gap:28px}}


/* Animation/transitions mockup */
.anim-mock{position:relative;width:100%;max-width:460px;aspect-ratio:16/10;background:linear-gradient(160deg,#FFF6EE,#FFE0CC);border-radius:18px;border:1px solid var(--line);padding:24px;display:flex;align-items:center;justify-content:space-between;gap:14px;box-shadow:var(--shadow-soft);overflow:hidden}
.anim-mock .am-slide{position:relative;width:38%;aspect-ratio:4/3;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px;box-shadow:0 12px 24px -14px rgba(14,14,18,.18)}
.anim-mock .am-slide::before{content:"";height:6px;width:50%;background:var(--grad);border-radius:4px}
.anim-mock .am-slide::after{content:"";flex:1;background:repeating-linear-gradient(180deg,rgba(255,106,44,.15) 0 4px,transparent 4px 9px);border-radius:6px}
.anim-mock .am-slide.am-2{transform:rotate(2deg)}
.anim-mock .am-arrow{flex:0 0 auto;width:54px;height:54px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:1.4rem;box-shadow:0 14px 28px -10px rgba(255,106,44,.55);animation:arrowPulse 2s ease-in-out infinite}
@keyframes arrowPulse{50%{transform:scale(1.08)}}
.anim-mock .am-spark{position:absolute;color:var(--pri);font-size:.9rem;opacity:.6}
.anim-mock .am-spark.s1{top:14%;left:30%;animation:sparkFloat 3s ease-in-out infinite}
.anim-mock .am-spark.s2{bottom:18%;right:34%;animation:sparkFloat 3s ease-in-out -1.5s infinite}
@keyframes sparkFloat{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(-6px);opacity:1}}

/* Modern download mockup */
.download-mock{position:relative;width:100%;max-width:420px;aspect-ratio:1/1;background:radial-gradient(circle at 50% 35%,#FFF1E3 0%,#FFE0CC 60%,#FFD2B5 100%);border-radius:24px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;box-shadow:0 30px 60px -25px rgba(255,106,44,.35);overflow:hidden}
.download-mock::before{content:"";position:absolute;inset:18% 18%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.6),transparent 70%)}
.download-mock .dm-cloud{position:relative;width:64%;aspect-ratio:1/1;background:linear-gradient(160deg,#fff,#FFF1E3);border-radius:50%;display:grid;place-items:center;color:var(--pri-2);font-size:5rem;box-shadow:0 24px 48px -16px rgba(224,67,27,.4),inset 0 -8px 16px rgba(255,106,44,.12);animation:dlBob 3.4s ease-in-out infinite}
@keyframes dlBob{50%{transform:translateY(-8px)}}
.download-mock .dm-pulse{position:absolute;inset:8%;border-radius:50%;border:2px solid color-mix(in oklab,var(--pri) 50%,transparent);animation:ringWave 2.4s ease-out infinite;pointer-events:none}
.download-mock .dm-pulse.dm-pulse-2{animation-delay:-1.2s}

/* === Refinements: gaps + page-head CTA centering === */

/* Center CTA buttons under page-head (How it Works, Contact, etc.) */
.page-head .hero-cta{justify-content:center}

/* Key Features: more breathing room around grid */
.key-features-section .kf-head{margin:0 0 60px}
.kf-grid{gap:48px 64px}
@media(max-width:900px){ .kf-grid{gap:32px} }

/* System Requirements: restore vertical spacing & equal-height cards */
section .section-head{margin-bottom:36px}
.row.g-4 > [class*="col-"] > .card.h-100{height:100%;display:flex;flex-direction:column;padding:28px}
.row.g-4 > [class*="col-"] > .card.h-100 h3{margin-top:0;margin-bottom:14px}
.row.g-4 > [class*="col-"] > .card.h-100 p{margin:0 0 10px}

/* Contact / Product Support: consistent spacing between info cards */
.contact-info-stack > .card{margin:0 0 18px}
.form .field{margin-bottom:18px}
.form .btn-primary{margin-top:8px}

/* Product Support form grid */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:980px}
@media(max-width:640px){
  .form-grid{grid-template-columns:1fr}
  .section-form .lead{line-height:1.65}
  section .lead{line-height:1.6}
}

/* === Developer SDK mockup (replaces dev-platform image) === */
.dev-mock{position:relative;width:100%;max-width:520px;display:grid;gap:18px;font-family:'Plus Jakarta Sans',sans-serif}
.dv-ide{background:#0F1224;border-radius:16px;padding:0;box-shadow:0 30px 60px -25px rgba(15,18,36,.55);overflow:hidden;border:1px solid #1c2040}
.dv-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#161a32;border-bottom:1px solid #1f2447}
.dv-dot{width:10px;height:10px;border-radius:50%}
.dv-dot.d1{background:#FF5F57}.dv-dot.d2{background:#FEBC2E}.dv-dot.d3{background:#28C840}
.dv-tab{margin-left:10px;font-size:.72rem;color:#9aa0d4;display:inline-flex;align-items:center;gap:6px;background:#0F1224;padding:5px 10px;border-radius:8px}
.dv-tab i{color:#FF8A4C}
.dv-code{margin:0;padding:16px 18px;font-family:'JetBrains Mono','Fira Code',ui-monospace,monospace;font-size:.78rem;line-height:1.7;color:#d6d8f5;white-space:pre;overflow:auto}
.dv-code .ln{display:inline-block;width:22px;color:#4a4f7c;user-select:none}
.dv-code .kw{color:#FF8A4C;font-weight:700}
.dv-code .cls{color:#7BD9FF;font-weight:700}
.dv-code .fn{color:#FFD27A}
.dv-code .str{color:#9CE6A0}
.dv-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:0 18px 40px -22px rgba(14,14,18,.18)}
.dv-panel-head{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink)}
.dv-panel-head i{width:30px;height:30px;border-radius:9px;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:.85rem}
.dv-panel-head .dv-pill{margin-left:auto;font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pri-2);background:var(--pri-soft);border-radius:999px;padding:4px 10px}
.dv-meter{height:6px;border-radius:999px;background:var(--pri-soft);margin:14px 0;overflow:hidden}
.dv-bar-fill{display:block;height:100%;width:78%;background:var(--grad);border-radius:999px;animation:dvFill 2.4s ease-in-out infinite}
@keyframes dvFill{0%,100%{width:62%}50%{width:92%}}
.dv-rows{display:grid;gap:8px}
.dv-row{display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--ink-soft);padding:8px 10px;border-radius:10px;background:#FAF6F1;border:1px solid var(--line)}
.dv-row i{color:var(--pri-2);width:18px;text-align:center}
.dv-row strong{margin-left:auto;color:var(--ink);font-weight:700;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase}

/* Key Features section gap polish (home + sdk) */
.key-features-section .kf-head{margin-bottom:64px}
.kf-grid{gap:56px 72px}
.kf-dot{flex:0 0 auto}
@media(max-width:900px){ .kf-grid{gap:36px} .key-features-section .kf-head{margin-bottom:40px} }

/* SDK Key Features (card grid using .row.g-4) — equal-height cards & comfortable padding */
.row.g-4 > [class*="col-"] > .card.reveal{height:100%;padding:28px 26px;display:flex;flex-direction:column}
.row.g-4 > [class*="col-"] > .card.reveal h3{margin:14px 0 8px;font-size:1.1rem}
.row.g-4 > [class*="col-"] > .card.reveal p{margin:0;color:var(--ink-soft)}

/* === SDK-only: restore flying text animation (does not affect home .feat-fader) === */
.sdk-bulk-stage .feat-runner{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;will-change:transform}
.sdk-bulk-stage .run-chip{
  position:absolute;left:-25%;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.66rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-2,#4a5072);background:transparent;border:0;
  white-space:nowrap;opacity:0
}
.sdk-bulk-stage .run-chip.rc-1{top:14%;font-size:.62rem;color:#E0431B;animation:runChipFly 7.2s linear infinite;animation-delay:0s}
.sdk-bulk-stage .run-chip.rc-2{top:30%;color:#7B3FF2;animation:runChipFly 9.8s linear infinite;animation-delay:1.4s}
.sdk-bulk-stage .run-chip.rc-3{top:46%;font-size:.64rem;color:#1A73E8;animation:runChipFly 6.4s linear infinite;animation-delay:2.8s}
.sdk-bulk-stage .run-chip.rc-4{top:60%;font-size:.7rem;color:#0EA371;animation:runChipFly 8.6s linear infinite;animation-delay:.8s}
.sdk-bulk-stage .run-chip.rc-5{top:74%;font-size:.62rem;color:#D946A0;animation:runChipFly 10.4s linear infinite;animation-delay:3.6s}
.sdk-bulk-stage .run-chip.rc-6{top:88%;font-size:.68rem;color:#F59E0B;animation:runChipFly 7.8s linear infinite;animation-delay:2.2s}
@keyframes runChipFly{
  0%{left:-20%;opacity:0;transform:scale(.88)}
  12%{opacity:.85;transform:scale(.96)}
  88%{opacity:.85;transform:scale(.96)}
  100%{left:120%;opacity:0;transform:scale(.88)}
}

/* === Home hero: position 12s avg badge over HTML5 target (matches design ref) === */
.ss-target{position:relative}
.ss-target .speed-badge{position:absolute;top:-54px;right:0px;left:auto}
@media(max-width:600px){
  .ss-target .speed-badge{position:static;align-self:center;margin-bottom:6px}
}

/* === Universal card-on-col gap fix ===
   When .card or .sample is applied directly to a Bootstrap col,
   the card background fills the gutter and visually removes the gap.
   Lift the visible card to a pseudo-element inside the content box so the
   col gutter remains as breathing room between cards. === */
.row.g-4 > .card[class*="col-"],
.row.g-4 > .sample[class*="col-"]{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 calc(var(--bs-gutter-x,2rem)/2) !important;
  position:relative;
  overflow:visible;
}
.row.g-4 > .card[class*="col-"]::before,
.row.g-4 > .sample[class*="col-"]::before{
  content:"";
  position:absolute;
  inset:0 calc(var(--bs-gutter-x,2rem)/2) 0 calc(var(--bs-gutter-x,2rem)/2);
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow-soft);
  z-index:0;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  pointer-events:none;
}
.row.g-4 > .card[class*="col-"]:hover::before,
.row.g-4 > .sample[class*="col-"]:hover::before{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -22px rgba(255,106,44,.28);
  border-color:color-mix(in oklab,var(--pri) 35%,var(--line));
}
/* keep card content above the pseudo, restore inner padding the card class normally provides */
.row.g-4 > .card[class*="col-"]{
  padding:36px 28px !important;
  text-align:center;
  height:auto;
}
.row.g-4 > .card[class*="col-"] > *{position:relative;z-index:1}
.row.g-4 > .sample[class*="col-"]{padding:0 calc(var(--bs-gutter-x,2rem)/2) !important;overflow:visible}
.row.g-4 > .sample[class*="col-"] > *{position:relative;z-index:1}
.row.g-4 > .sample[class*="col-"] .thumb,
.row.g-4 > .sample[class*="col-"] .thumb img{border-top-left-radius:22px;border-top-right-radius:22px}
.row.g-4 > .sample[class*="col-"] .meta{padding:18px 22px}

/* Equal-height for col-cards in flex rows */
.row.g-4{align-items:stretch}
.row.g-4 > .card[class*="col-"]{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.row.g-4 > .card[class*="col-"] .ic{margin:0 auto 18px}

/* Contact / Product Support: stretch right column cards to match left form height */
.contact-info-stack{display:flex;flex-direction:column;gap:18px;height:100%}
.contact-info-stack > .card{position:relative;margin:0;flex:1 1 0;display:flex;flex-direction:row;align-items:center;gap:20px;padding:24px 26px 24px 30px;text-align:left;overflow:hidden;border-radius:18px;background:#fff;border:1px solid var(--line);transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease}
.contact-info-stack > .card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--grad);border-radius:18px 0 0 18px}
.contact-info-stack > .card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px color-mix(in oklab,var(--pri) 45%,transparent);border-color:color-mix(in oklab,var(--pri) 30%,var(--line))}
.contact-info-stack > .card .ic{flex:0 0 auto;width:64px;height:64px;border-radius:18px;background:var(--grad);color:#fff;border:none;display:grid;place-items:center;font-size:1.5rem;box-shadow:0 10px 24px -10px color-mix(in oklab,var(--pri) 55%,transparent);transition:transform .35s ease}
.contact-info-stack > .card:hover .ic{transform:rotate(-6deg) scale(1.06)}
.contact-info-stack > .card .card-body{flex:1 1 auto;min-width:0}
.contact-info-stack > .card .card-body h3{margin:0 0 6px;font-size:1.1rem;font-weight:700;letter-spacing:-.01em}
.contact-info-stack > .card .card-body p{margin:0;color:var(--ink-soft);font-size:.93rem;line-height:1.6}
.btn-send{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-align:center}

/* === Preview Output (How it Works step 4): ensure icons render & spacing breathes === */
.row.g-4 > .card[class*="col-"] .ic{
  width:64px;height:64px;border-radius:50%;
  background:#FFF6EE;color:var(--pri);
  border:1px solid color-mix(in oklab,var(--pri) 25%,var(--line));
  display:grid;place-items:center;font-size:1.4rem;
}
.row.g-4 > .card[class*="col-"]:hover .ic{
  background:var(--grad);color:#fff;border-color:transparent;transform:scale(1.05)
}

/* Contact page: form column auto-height; right column matches via stretch */
.contact-info-stack{min-height:100%}
@media(max-width:640px){
  .contact-info-stack{gap:14px}
  .contact-info-stack > .card{flex:0 0 auto;align-items:flex-start;gap:14px;padding:18px 18px 18px 22px;overflow:visible}
  .contact-info-stack > .card .ic{width:48px;height:48px;border-radius:14px;font-size:1.15rem}
  .contact-info-stack > .card .card-body h3{font-size:1rem;margin-bottom:4px}
  .contact-info-stack > .card .card-body p{font-size:.88rem;line-height:1.5;word-break:break-word}
}

/* Footer powered-by */
.powered-by{display:inline-flex;align-items:center;gap:8px;margin-top:10px;text-decoration:none;color:var(--muted);font-size:12px;opacity:.85;transition:opacity .2s}
.powered-by:hover{opacity:1}
.powered-by span{letter-spacing:.02em}
.powered-by img{display:block;filter:brightness(0) invert(1);opacity:.85}


/* System Requirements */
.sysreq-section{padding:72px 0}
.sysreq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.sysreq-grid{grid-template-columns:1fr}}
.sysreq-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px 28px;box-shadow:0 12px 36px -22px rgba(14,14,18,.18);transition:transform .25s,box-shadow .25s,border-color .25s;position:relative;overflow:hidden}
.sysreq-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px -22px rgba(255,106,44,.22);border-color:rgba(255,106,44,.35)}
.sysreq-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad);opacity:.9}
.sysreq-ic{width:56px;height:56px;border-radius:14px;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:1.5rem;margin-bottom:18px;box-shadow:0 10px 24px -10px rgba(255,106,44,.55)}
.sysreq-card h3{margin:0 0 16px;font-size:1.2rem;font-weight:800;color:var(--ink)}
.sysreq-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sysreq-list li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:#FBF7F2;border-radius:10px;border:1px solid var(--line)}
.sysreq-list li span{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.sysreq-list li strong{font-size:.92rem;color:var(--ink);font-weight:600}

/* Testimonial videos */
.t-video-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 12px 30px -18px rgba(14,14,18,.18);transition:transform .25s,box-shadow .25s}
.t-video-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(255,106,44,.25)}
.t-video-wrap{position:relative;width:100%;padding-top:56.25%;background:#0c0c0e}
.t-video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.t-video-meta{padding:16px 18px;display:flex;flex-direction:column;gap:2px}
.t-video-meta strong{font-weight:800;color:var(--ink)}
.t-video-meta small{color:var(--ink-soft);font-size:.85rem}

/* Download page tabs + form */
.dl-tabs{display:inline-flex;gap:6px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:22px;box-shadow:0 8px 24px -16px rgba(0,0,0,.12);flex-wrap:wrap}
.dl-tab{appearance:none;border:0;background:transparent;color:var(--ink-soft);font:inherit;font-weight:600;padding:10px 18px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .2s ease}
.dl-tab:hover{color:var(--ink);background:#FAFAFB}
.dl-tab.is-active{background:var(--grad);color:#fff;box-shadow:0 8px 20px -10px rgba(255,106,44,.55)}
.dl-form-card{padding:48px;display:flex;flex-direction:column;text-align:left}
.dl-form-card h2{font-size:clamp(1.4rem,2.5vw,1.9rem);padding-bottom:10px}
.dl-form{display:flex;flex-direction:column;gap:14px;margin-top:16px;width:100%}
.dl-field{display:flex;flex-direction:column;gap:6px;font-weight:600;color:var(--ink);width:100%;text-align:left}
.dl-field > span{font-size:.92rem}
.dl-field input{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid #E6E8EF;border-radius:10px;font:inherit;background:#fff;transition:border-color .15s,box-shadow .15s}
.dl-field input:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px color-mix(in oklab,var(--pri) 18%,transparent)}
.dl-check{display:flex;align-items:center;gap:10px;color:var(--ink-soft);font-size:.95rem;font-weight:500;text-align:left}
.dl-check input{width:16px;height:16px;accent-color:var(--pri)}
.dl-note{margin:0;color:var(--ink-soft);font-size:.85rem;line-height:1.55}
.dl-submit{margin-top:6px;width:100%;text-align:center;justify-content:center;display:inline-flex;align-items:center;gap:8px}
.dl-help{margin:6px 0 0;color:var(--ink-soft);font-size:.9rem;text-align:center}
.dl-help a{color:var(--pri);font-weight:600;text-decoration:none}
.dl-help a:hover{text-decoration:underline}
.dl-visual{display:flex;align-items:center;justify-content:center;padding:24px}
@media (max-width:640px){.dl-tabs{width:100%}.dl-tab{flex:1 1 auto;justify-content:center;padding:10px 12px;font-size:.9rem}.dl-form-card{padding:32px}}

/* HTML5 sample presentation in demo modal */
.h5p-demo{margin-top:14px;border-radius:14px;overflow:hidden;background:#0a0a14;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.h5p-stage{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden}
.h5p-slide{position:absolute;inset:0;opacity:0;transform:translateX(40px) scale(.98);transition:opacity .6s ease,transform .6s ease;display:flex;align-items:center;padding:6% 7%;color:#fff;overflow:hidden}
.h5p-slide.is-active{opacity:1;transform:translateX(0) scale(1);z-index:2}
.h5p-slide.is-prev{opacity:0;transform:translateX(-40px) scale(.98)}
.h5p-bg-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none}
.h5p-orb-a{width:300px;height:300px;background:#ff5b9e;top:-80px;right:-80px;animation:h5pFloat 6s ease-in-out infinite}
.h5p-orb-b{width:260px;height:260px;background:#5b6cff;bottom:-90px;left:-60px;animation:h5pFloat 7s ease-in-out infinite reverse}
@keyframes h5pFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-25px)}}
.h5p-content{position:relative;z-index:1;width:100%;max-width:80%}
.h5p-center{text-align:center;margin:0 auto}
.h5p-eyebrow{display:inline-block;font-size:.7rem;letter-spacing:.25em;font-weight:700;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);margin-bottom:14px;opacity:0;transform:translateY(10px);animation:h5pIn .6s .15s forwards}
.h5p-title{font-size:clamp(1.4rem,3.4vw,2.4rem);line-height:1.15;font-weight:800;margin:0 0 12px;letter-spacing:-.02em;opacity:0;transform:translateY(14px);animation:h5pIn .7s .3s forwards;color:#fff}
.h5p-title em{font-style:italic;background:linear-gradient(90deg,#ffd66e,#ff9eb5);-webkit-background-clip:text;background-clip:text;color:transparent}
.h5p-sub{font-size:clamp(.85rem,1.5vw,1.05rem);color:rgba(255,255,255,.78);margin:0;opacity:0;transform:translateY(14px);animation:h5pIn .7s .5s forwards}
.h5p-slide:not(.is-active) .h5p-eyebrow,.h5p-slide:not(.is-active) .h5p-title,.h5p-slide:not(.is-active) .h5p-sub,.h5p-slide:not(.is-active) .h5p-bullets li,.h5p-slide:not(.is-active) .h5p-stat,.h5p-slide:not(.is-active) .h5p-dev{animation:none;opacity:0;transform:translateY(14px)}
@keyframes h5pIn{to{opacity:1;transform:translateY(0)}}
.h5p-stats{display:flex;gap:24px;margin-top:8px;flex-wrap:wrap}
.h5p-stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:14px 20px;min-width:110px;opacity:0;transform:translateY(14px);animation:h5pIn .6s forwards}
.h5p-slide.is-active .h5p-stat:nth-child(1){animation-delay:.45s}
.h5p-slide.is-active .h5p-stat:nth-child(2){animation-delay:.6s}
.h5p-slide.is-active .h5p-stat:nth-child(3){animation-delay:.75s}
.h5p-stat strong{display:block;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;line-height:1;color:#fff}
.h5p-stat span{font-size:.78rem;color:rgba(255,255,255,.7);letter-spacing:.05em}
.h5p-bullets{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:10px}
.h5p-bullets li{display:flex;align-items:center;gap:10px;font-size:clamp(.9rem,1.5vw,1.05rem);color:rgba(255,255,255,.92);opacity:0;transform:translateX(-14px);animation:h5pBullet .5s forwards}
.h5p-slide.is-active .h5p-bullets li:nth-child(1){animation-delay:.45s}
.h5p-slide.is-active .h5p-bullets li:nth-child(2){animation-delay:.6s}
.h5p-slide.is-active .h5p-bullets li:nth-child(3){animation-delay:.75s}
.h5p-slide.is-active .h5p-bullets li:nth-child(4){animation-delay:.9s}
@keyframes h5pBullet{to{opacity:1;transform:translateX(0)}}
.h5p-bullets i{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.18);display:inline-grid;place-items:center;font-size:.7rem;color:#fff;flex-shrink:0}
.h5p-devices{display:flex;align-items:flex-end;justify-content:center;gap:18px;margin:18px 0}
.h5p-dev{position:relative;opacity:0;transform:translateY(20px);animation:h5pIn .6s forwards}
.h5p-slide.is-active .h5p-dev:nth-child(1){animation-delay:.4s}
.h5p-slide.is-active .h5p-dev:nth-child(2){animation-delay:.55s}
.h5p-slide.is-active .h5p-dev:nth-child(3){animation-delay:.7s}
.h5p-dev-laptop{width:160px;height:100px;border:3px solid rgba(255,255,255,.85);border-radius:8px 8px 4px 4px;position:relative}
.h5p-dev-laptop:after{content:"";position:absolute;left:-18px;right:-18px;bottom:-6px;height:6px;background:rgba(255,255,255,.85);border-radius:0 0 8px 8px}
.h5p-dev-tablet{width:78px;height:104px;border:3px solid rgba(255,255,255,.85);border-radius:8px}
.h5p-dev-phone{width:46px;height:84px;border:3px solid rgba(255,255,255,.85);border-radius:8px}
.h5p-screen{position:absolute;inset:4px;background:linear-gradient(135deg,#5b6cff,#ff5b9e);border-radius:3px;animation:h5pShimmer 2s ease-in-out infinite}
@keyframes h5pShimmer{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3)}}
.h5p-controls{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px;background:#0f0f1e;border-top:1px solid rgba(255,255,255,.06)}
.h5p-btn{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;display:inline-grid;place-items:center;cursor:pointer;transition:all .2s}
.h5p-btn:hover{background:rgba(255,255,255,.16);transform:scale(1.08)}
.h5p-dots{display:flex;gap:8px}
.h5p-dot{width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.25);padding:0;cursor:pointer;transition:all .25s}
.h5p-dot.is-active{background:#fff;width:24px;border-radius:4px}
@media(max-width:640px){.h5p-stats{gap:10px}.h5p-stat{padding:10px 12px;min-width:0;flex:1}.h5p-devices{gap:10px}.h5p-dev-laptop{width:110px;height:70px}.h5p-dev-tablet{width:56px;height:76px}.h5p-dev-phone{width:34px;height:62px}}

/* Demo modal */
.demo-modal{position:fixed;inset:0;background:rgba(10,10,20,.78);backdrop-filter:blur(6px);z-index:9999;display:none;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .25s}
.demo-modal.is-open{display:flex;opacity:1}
.demo-modal-wrap{position:relative;width:min(1100px,100%);aspect-ratio:16/9;transform:scale(.96);transition:transform .25s}
.demo-modal.is-open .demo-modal-wrap{transform:scale(1)}
.demo-modal-inner{background:#000;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6);width:100%;height:100%}
.demo-modal iframe{width:100%;height:100%;border:0;display:block}
.demo-modal-close{position:absolute;top:-14px;right:-14px;width:42px;height:42px;border-radius:50%;border:0;background:var(--grad,#FF6A2C);color:#fff;font-size:20px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:2}
.demo-modal-close:hover{transform:rotate(90deg);transition:transform .3s}
.demo-modal-title{position:absolute;top:-40px;left:0;color:#fff;font-weight:600;font-size:15px}
body.demo-open{overflow:hidden}
@media(max-width:640px){.demo-modal{padding:14px}.demo-modal-close{top:-10px;right:-10px;width:36px;height:36px}}

/* Home page demo samples */
.home-demos{padding:80px 0}
.home-demos .sec-head{text-align:center;margin-bottom:40px}
.home-demos .sec-head h2{font-size:clamp(1.8rem,3.5vw,2.6rem);margin:0 0 12px}
.home-demos .sec-head p{color:var(--muted);max-width:620px;margin:0 auto}
.home-demos .demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.home-demos .demo-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.home-demos .demo-grid{grid-template-columns:1fr}}
.demo-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 8px 30px rgba(20,20,40,.08);transition:transform .3s,box-shadow .3s;cursor:pointer;border:1px solid rgba(0,0,0,.04)}
.demo-card:hover{transform:translateY(-6px);box-shadow:0 18px 48px rgba(255,106,44,.18)}
.demo-card .thumb-wrap{position:relative;overflow:hidden;aspect-ratio:16/10;background:#f4f4f8}
.demo-card .thumb-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.demo-card:hover .thumb-wrap img{transform:scale(1.06)}
.demo-card .play-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);opacity:0;transition:opacity .25s}
.demo-card:hover .play-badge{opacity:1}
.demo-card .play-badge span{width:64px;height:64px;border-radius:50%;background:var(--grad,#FF6A2C);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;padding-left:4px;box-shadow:0 8px 24px rgba(255,106,44,.5)}
.demo-card .demo-meta{padding:18px 20px}
.demo-card .demo-meta h4{margin:0 0 4px;font-size:1.05rem}
.demo-card .demo-meta p{margin:0;color:var(--muted);font-size:.9rem}