/* Secure Funnels — shared upgrades (brand, proof, reviews, lightbox, mobile CTA, form) */

/* Brand lockup in nav and footer */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:44px;width:auto;display:block}
.brand-name{font-weight:800;font-size:18px;letter-spacing:-0.3px;color:var(--dark,#0D1526);line-height:1}
.brand-name b{color:var(--blue,#1A6BF0);font-weight:800}
footer .brand-name{color:#fff}
footer .brand img{height:40px;background:#fff;border-radius:10px;padding:4px}

/* Photos — keep faces framed well on every screen */
.photo-container img,.about-img img{object-position:center 18%}

/* Proof cards (tracking sheets) */
.proof-card-img{height:240px!important;object-fit:cover;object-position:left top!important;cursor:zoom-in;background:#fff}
.proof-zoom-hint{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#93C5FD;margin-top:12px}

/* Reviews wall (masonry) */
.reviews-wall{max-width:1200px;margin:56px auto 0;column-count:3;column-gap:22px}
.reviews-wall>*{break-inside:avoid;margin-bottom:22px;display:block}
.rv{background:#fff;border:1.5px solid var(--gray-200,#D1DCF0);border-radius:var(--radius-lg,22px);padding:28px;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.rv:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--blue,#1A6BF0)}
.rv.featured{background:linear-gradient(135deg,var(--blue-light,#EBF3FF),#fff);border-color:var(--blue,#1A6BF0)}
.rv-badge{display:inline-flex;align-items:center;gap:6px;background:var(--blue,#1A6BF0);color:#fff;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;margin-bottom:14px}
.rv-badge.green{background:#10B981}
.rv .stars{color:#FBBF24;font-size:16px;letter-spacing:2px;margin-bottom:14px}
.rv-quote{font-size:14.5px;color:var(--gray-600,#4A5878);line-height:1.8;font-style:italic;margin-bottom:20px}
.rv-author{display:flex;align-items:center;gap:12px}
.rv-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--blue,#1A6BF0),var(--blue-mid,#3B82F6));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px;flex-shrink:0}
.rv-name{font-weight:800;font-size:14px;color:var(--dark,#0D1526)}
.rv-role{font-size:12px;color:var(--gray-400,#8FA3C8);margin-top:2px}
.rv-shot{background:#fff;border:1.5px solid var(--gray-200,#D1DCF0);border-radius:var(--radius-lg,22px);overflow:hidden;transition:transform .25s,box-shadow .25s}
.rv-shot:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.rv-shot img{width:100%;height:auto;display:block;cursor:zoom-in}
.rv-shot figcaption{padding:12px 16px;font-size:12px;font-weight:600;color:var(--gray-600,#4A5878);display:flex;align-items:center;gap:8px;border-top:1px solid var(--gray-100,#EEF2F8)}
.rv-shot figcaption .dot{width:8px;height:8px;border-radius:50%;background:#10B981;flex-shrink:0}
.dark .rv{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.dark .rv.featured{background:linear-gradient(135deg,rgba(26,107,240,.22),rgba(59,130,246,.08));border-color:rgba(26,107,240,.45)}
.dark .rv-quote{color:#CBD5E1}.dark .rv-name{color:#fff}
.dark .rv-shot{border-color:rgba(255,255,255,.1)}
@media(max-width:1024px){.reviews-wall{column-count:2}}
@media(max-width:640px){.reviews-wall{column-count:1}}

/* Lightbox for screenshots */
.lb{position:fixed;inset:0;background:rgba(8,13,26,.92);z-index:10000;display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.lb.open{display:flex}
.lb img{max-width:min(1400px,100%);max-height:90vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5);background:#fff}
.lb-close{position:absolute;top:16px;right:20px;color:#fff;font-size:32px;line-height:1;background:none;border:none;cursor:pointer}

/* Sticky mobile CTA (hidden on contact page) */
.m-sticky{display:none}
@media(max-width:768px){
  .m-sticky{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:998;gap:10px;transform:translateY(120%);transition:transform .3s ease}
  .m-sticky.show{transform:translateY(0)}
  .m-sticky a{flex:1;text-align:center;padding:14px;border-radius:12px;font-weight:800;font-size:15px;background:var(--blue,#1A6BF0);color:#fff;box-shadow:0 10px 30px rgba(26,107,240,.45)}
  body.has-sticky footer{padding-bottom:96px}
}

/* Contact form states */
.form-status{display:none;margin-top:14px;padding:14px 16px;border-radius:10px;font-size:14px;line-height:1.6}
.form-status.err{display:block;background:#FEF2F2;border:1.5px solid #FCA5A5;color:#991B1B}
.submit-btn[disabled]{opacity:.7;cursor:wait;transform:none!important}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.trust-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.trust-row span{font-size:12px;color:var(--gray-400,#8FA3C8);font-weight:600;display:inline-flex;align-items:center;gap:6px}

/* Small polish */
a.mail{color:inherit;text-decoration:none}
a.mail:hover{color:var(--blue,#1A6BF0)}

/* Fix: on phones the old animation rule kept headings pushed down 20px */
body.show-all .s-reveal,body.show-all .s-reveal-left,body.show-all .s-reveal-right,body.show-all .s-reveal-scale,
body .s-reveal.in,body .s-reveal-left.in,body .s-reveal-right.in{opacity:1!important;transform:none!important}

/* ── Reel showcase (Video Editing) ── */
.reel-box{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.reel-phone{position:relative;width:240px;aspect-ratio:9/16;max-width:100%;border-radius:30px;padding:8px;background:#0D1526;box-shadow:0 24px 60px rgba(234,88,12,.25),0 0 0 1px rgba(0,0,0,.06);animation:reelFloat 6s ease-in-out infinite}
.reel-phone video{width:100%;height:100%;object-fit:cover;border-radius:23px;display:block;background:#0D1526}
.reel-phone::before{content:'';position:absolute;top:14px;left:50%;transform:translateX(-50%);width:64px;height:6px;border-radius:6px;background:rgba(255,255,255,.18);z-index:2}
.reel-sound{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);background:rgba(13,21,38,.82);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:8px 14px;font:700 12px/1 'Plus Jakarta Sans',system-ui,sans-serif;cursor:pointer;white-space:nowrap;backdrop-filter:blur(6px);transition:opacity .3s,transform .2s}
.reel-sound:hover{transform:translateX(-50%) scale(1.05)}
.reel-sound.hide{opacity:0;pointer-events:none}
.reel-side{min-width:0}
.reel-tag{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#9A3412;background:#fff;border:1.5px solid #FED7AA;border-radius:999px;padding:5px 12px;margin-bottom:12px}
.reel-title{font-size:20px;font-weight:800;color:var(--dark,#0D1526);margin-bottom:12px}
.reel-points{list-style:none;display:grid;gap:8px;margin-bottom:18px}
.reel-points li{display:flex;gap:10px;font-size:14px;color:var(--gray-600,#4A5878)}
.reel-points li::before{content:'✓';color:#EA580C;font-weight:800}
.reel-times{background:#fff;border:1.5px solid #FED7AA;border-radius:12px;padding:6px 16px}
@keyframes reelFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(max-width:640px){.reel-box{grid-template-columns:1fr;justify-items:center}.reel-phone{width:min(260px,100%)}.reel-side{width:100%}}

/* ── Motion upgrades ── */
/* Smooth page-to-page transition in modern browsers; the logo stays put */
@view-transition{navigation:auto}
::view-transition-old(root){animation:sfOut .22s ease both}
::view-transition-new(root){animation:sfIn .32s ease both}
@keyframes sfOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes sfIn{from{opacity:0;transform:translateY(10px)}}
#nav{view-transition-name:sf-nav}

/* Cards and reviews rise in as you scroll (only when JS is running) */
.fx-ready .fx{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.fx-ready .fx.fx-in{opacity:1;transform:none}

/* Light sweep across the main buttons */
.btn-blue,.submit-btn,.nav-cta,.m-sticky a{position:relative;overflow:hidden}
.btn-blue::after,.submit-btn::after,.nav-cta::after,.m-sticky a::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);pointer-events:none}
.btn-blue:hover::after,.submit-btn:hover::after,.nav-cta:hover::after{animation:sweep .7s ease}
.m-sticky.show a::after{animation:sweep 1.2s ease 1.2s 2}
@keyframes sweep{to{left:130%}}

/* Gentle zoom on proof screenshots */
.proof-card{overflow:hidden}
.proof-card-img{transition:transform .5s ease}
.proof-card:hover .proof-card-img{transform:scale(1.03)}

/* Hero word "Protecting" shimmers once on load */
.hero h1 .hl{background:linear-gradient(90deg,#1A6BF0 0%,#1A6BF0 40%,#7DB3FF 50%,#1A6BF0 60%,#1A6BF0 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 2.4s ease .9s 1 both}
@keyframes shine{from{background-position:100% 0}to{background-position:0 0}}

@media (prefers-reduced-motion: reduce){
  .fx-ready .fx{opacity:1!important;transform:none!important}
  .reel-phone{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
.reel-box{gap:24px}
.reel-phone{width:220px}
.reel-tag{white-space:nowrap}
.reel-times .stat-row{gap:10px;padding:10px 0}
.reel-times .stat-label{flex:1;font-size:12.5px;line-height:1.4}
.reel-times .stat-row span:last-child{white-space:nowrap;font-size:13.5px}