/* Trusted Taps — shared concept base (J–M) */
:root{--navy:#17253F;--star:#FFC531;--gold:#E8A400;--paper:#fff;--fog:#F4F6F9;--slate:#5C6B7A;
      --ink:#0F172A;--line:rgba(23,37,63,.12);--green:#1B9647;--red:#C7341F}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:400 16.5px/1.6 Sora,system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:800;line-height:1.02;letter-spacing:-.035em}
img{display:block;max-width:100%}a{color:inherit}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.wrap{max-width:1260px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--gold)}

/* tap mark */
.tap{position:relative;display:inline-block;width:1em;height:1em;vertical-align:-.08em}
.tap i{position:absolute;border:.11em solid currentColor;border-radius:50%;border-color:transparent currentColor transparent transparent;left:0;top:0;width:100%;height:100%}
.tap i:nth-child(2){transform:scale(.68)}.tap i:nth-child(3){transform:scale(.36)}
.tap b{position:absolute;left:44%;top:44%;width:.14em;height:.14em;border-radius:50%;background:currentColor}

/* nav */
nav{position:fixed;inset:0 0 auto;z-index:100;display:flex;align-items:center;gap:20px;padding:15px 24px;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.3s}
nav.solid{border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:.3em;font-weight:800;font-size:19px;letter-spacing:-.025em;text-decoration:none;flex:none}
.brand .tap{color:var(--star)}
.nl{display:flex;gap:24px;margin-left:auto;font-size:14.5px;font-weight:500}
.nl a{text-decoration:none;color:var(--slate)}.nl a:hover{color:var(--navy)}
.btn{display:inline-block;padding:13px 24px;border-radius:10px;font-weight:600;font-size:15px;text-decoration:none;transition:.25s;white-space:nowrap}
.btn-p{background:var(--navy);color:#fff}.btn-p:hover{transform:translateY(-2px)}
.btn-s{border:1.5px solid var(--line);color:var(--navy)}.btn-s:hover{border-color:var(--navy)}
@media(max-width:1060px){.nl{display:none}}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}

section{padding:clamp(62px,7.5vw,104px) 0}
.head{max-width:740px;margin-bottom:42px}
.head h2{font-size:clamp(29px,4.4vw,54px);margin-top:14px}
.head p{color:var(--slate);margin-top:16px;font-size:17.5px;font-weight:300}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,36px);align-items:center}
@media(max-width:900px){.g2{grid-template-columns:1fr}}

/* video slots — for the clips you'll shoot */
.vslot{border:2px dashed var(--line);border-radius:18px;background:var(--fog);display:grid;place-items:center;text-align:center;padding:30px;position:relative;overflow:hidden}
.vslot.wide{aspect-ratio:16/9}
.vslot.tall{aspect-ratio:9/16}
.vslot .play{width:62px;height:62px;border-radius:50%;background:var(--navy);display:grid;place-items:center;margin:0 auto 14px;position:relative}
.vslot .play::after{content:'';border-left:15px solid var(--star);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.vslot .play::before{content:'';position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--star);opacity:0;animation:vr 2.6s ease-out infinite}
@keyframes vr{0%{transform:scale(.8);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.vslot h4{font-size:17px}
.vslot p{font-size:13.5px;color:var(--slate);font-weight:300;margin-top:6px;max-width:34ch}
.vslot .tag{position:absolute;top:12px;left:12px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:var(--navy);color:var(--star);padding:4px 10px;border-radius:999px;font-weight:700}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:880px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--line);border-radius:16px;padding:28px 24px;transition:.3s}
.step:hover{border-color:var(--navy);transform:translateY(-5px)}
.step .n{font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--gold);margin-bottom:11px}
.step h3{font-size:20px}.step p{color:var(--slate);font-size:14.5px;font-weight:300;margin-top:9px}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:940px){.tiers{grid-template-columns:1fr}}
.tier{border:1.5px solid var(--line);border-radius:16px;padding:30px 26px;display:flex;flex-direction:column;transition:.3s}
.tier:hover{border-color:var(--navy);transform:translateY(-5px)}
.tier.feat{border-color:var(--star);border-width:2px;background:#FFFBF0}
.tier h3{font-size:19px}
.tier .price{font-size:clamp(26px,3.2vw,38px);font-weight:800;letter-spacing:-.04em;margin:12px 0 4px}
.tier .price small{font-size:12.5px;font-weight:400;color:var(--slate)}
.tier p{color:var(--slate);font-size:14.5px;font-weight:300;margin-top:9px}
.tier ul{list-style:none;margin:18px 0 24px;display:grid;gap:8px;flex:1}
.tier li{display:flex;gap:9px;font-size:14px;color:var(--slate)}
.tier li::before{content:'·';color:var(--star);font-weight:800}

/* rules */
.rules{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.rules{grid-template-columns:1fr}}
.rule{border-radius:16px;padding:26px 24px;border:1px solid var(--line)}
.rule.dont{background:var(--fog)}
.rule h3{font-size:18px}.rule ul{list-style:none;margin-top:14px;display:grid;gap:9px}
.rule li{font-size:14.5px;color:var(--slate);display:flex;gap:10px;font-weight:300}
.rule.do li::before{content:'✓';color:var(--green);font-weight:700;flex:none}
.rule.dont li::before{content:'✕';color:var(--red);font-weight:700;flex:none}

.areas{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.area{border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:14px;font-weight:500}

.cta{background:var(--navy);color:#fff;border-radius:20px;padding:clamp(34px,5vw,66px);text-align:center}
.cta h2{font-size:clamp(27px,4vw,50px)}
.cta p{color:rgba(255,255,255,.72);margin:15px auto 0;max-width:520px;font-weight:300}
.cta .acts{display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.cta .btn-w{background:var(--star);color:var(--navy)}
.cta .btn-g{border:1.5px solid rgba(255,255,255,.3);color:#fff}

footer{border-top:1px solid var(--line);padding:50px 0 30px;margin-top:clamp(44px,5vw,76px)}
.fg{display:grid;grid-template-columns:2fr 1fr 1fr;gap:36px}
@media(max-width:740px){.fg{grid-template-columns:1fr}}
footer h4{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin-bottom:12px;font-weight:600}
footer a{display:block;text-decoration:none;color:var(--slate);padding:5px 0;font-size:14px}
footer a:hover{color:var(--navy)}
.fb{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--slate)}

.concept{position:fixed;left:14px;bottom:14px;z-index:200;background:var(--navy);color:var(--star);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:9px 15px;border-radius:999px}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .vslot .play::before{animation:none}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}