/* ============================================================
   WEBSITES v2 — real-screenshot portfolio rebuild (20260702)
   Reuses hero2/kinetic/marquee/browser from style.css and
   fb-atmo/manifest/reveal from fbads.css
   ============================================================ */

/* ---------- hero browser stack (real scrolling site) ---------- */
.web-hero-stage{
  position:absolute;z-index:2;right:clamp(-80px,5vw,140px);top:50%;
  transform:translateY(-50%);width:430px;pointer-events:none;display:none;
}
@media(min-width:1080px){
  .web-hero-stage{display:block;}
  /* keep headline text clear of the browser stage */
  .hero2 .hero2-inner{padding-right:clamp(440px,44vw,500px);}
  /* narrower column: scale type so the headline stays at 3 lines */
  .hero2 h1{font-size:clamp(2.9rem,4.7vw,3.75rem);}
}
.web-hero-stage .browser{margin:0;box-shadow:0 30px 80px rgba(0,0,0,.55);}
.web-hero-stage .b-back{
  position:absolute;inset:0;transform:rotate(5deg) translate(26px,-30px) scale(.96);
  border-radius:14px;border:1px solid rgba(127,166,204,.18);
  background:rgba(15,31,54,.6);z-index:-1;
}
.web-hero-stage .b-back.b2{transform:rotate(-4deg) translate(-20px,24px) scale(.93);}
.web-float{animation:webFloat 7s ease-in-out infinite;}
@keyframes webFloat{
  0%,100%{transform:translateY(0) rotate(-.5deg);}
  50%{transform:translateY(-14px) rotate(.5deg);}
}
/* real screenshot slowly scrolling inside the hero browser */
.browser-screen{
  height:340px;overflow:hidden;position:relative;
  background:#0a1626;
}
.browser-screen img{
  display:block;width:100%;height:auto;
  animation:heroScroll 22s ease-in-out infinite;
}
/* img is 180.6% of its own width tall; window is 340px of a 430px frame.
   Scroll the full overflow and come back. */
@keyframes heroScroll{
  0%,8%{transform:translateY(0);}
  46%,58%{transform:translateY(calc(-100% + 340px));}
  92%,100%{transform:translateY(0);}
}
.browser-screen::after{ /* soft glass glare */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 55%,rgba(127,193,255,.06) 70%,transparent 85%);
}

/* ---------- portfolio grid: real screenshot cards ---------- */
.folio-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:2.6rem;
}
.folio-card{
  border:1px solid rgba(127,166,204,.18);border-radius:18px;overflow:hidden;
  background:rgba(21,39,65,.45);position:relative;display:block;text-decoration:none;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.folio-card:hover{
  transform:translateY(-6px);border-color:rgba(27,141,246,.55);
  box-shadow:0 24px 60px rgba(0,0,0,.4);
}
/* browser chrome bar with the real URL */
.folio-chrome{
  display:flex;align-items:center;gap:.45rem;
  padding:.6rem .9rem;background:rgba(10,19,34,.92);
  border-bottom:1px solid rgba(127,166,204,.14);
}
.folio-chrome .fc-dot{
  width:9px;height:9px;border-radius:50%;background:#1d3055;flex:0 0 auto;
}
.folio-chrome .fc-url{
  margin-left:.5rem;flex:1;min-width:0;
  font-family:ui-monospace,Menlo,monospace;font-size:.72rem;color:#7fa6cc;
  background:rgba(127,166,204,.08);border-radius:7px;padding:.28rem .7rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.folio-badge{
  flex:0 0 auto;font-size:.58rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:.26rem .55rem;border-radius:999px;
  background:rgba(27,141,246,.15);color:#7fc1ff;border:1px solid rgba(27,141,246,.35);
}
.folio-badge::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#35d07f;margin-right:.35rem;vertical-align:1px;
  animation:livePulse 2.4s ease-in-out infinite;
}
@keyframes livePulse{0%,100%{opacity:1;}50%{opacity:.35;}}
/* screenshot window: hover (or in-view on touch) scrolls the page */
.folio-screen{
  position:relative;overflow:hidden;aspect-ratio:4/3;background:#0a1626;
}
.folio-screen img{
  display:block;width:100%;height:auto;
  transform:translateY(0);
  transition:transform 7s cubic-bezier(.33,.1,.35,1);
}
/* img height = 180.6% of card width, window = 75% of card width:
   overflow = 105.6% of width = 58.5% of img height */
.folio-card:hover .folio-screen img,
.folio-card.peek .folio-screen img{transform:translateY(-58.4%);}
.folio-card:not(:hover):not(.peek) .folio-screen img{transition-duration:1.2s;}
.folio-screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 -26px 30px -22px rgba(0,0,0,.55);
}
.folio-body{
  text-decoration:none;color:inherit;cursor:pointer;
  padding:1.05rem 1.3rem 1.2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.folio-body h3{margin:0;font-size:1.05rem;color:#eef4fb;}
.folio-body .f-url{font-size:.78rem;color:#7fa6cc;font-weight:600;display:block;margin-top:.2rem;}
.folio-body .f-go{
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(27,141,246,.4);color:#1b8df6;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  transition:background .3s ease,color .3s ease,transform .3s ease;
}
.folio-card:hover .f-go,.folio-body:hover .f-go{background:#1b8df6;color:#fff;transform:rotate(45deg);}
.folio-body:hover h3{color:#7fc1ff;}
/* the +30 more card */
.folio-card.more-card{
  display:flex;align-items:center;justify-content:center;min-height:280px;
  background:
    repeating-linear-gradient(45deg, rgba(27,141,246,.04) 0 12px, transparent 12px 24px),
    rgba(21,39,65,.3);
  border-style:dashed;border-color:rgba(127,166,204,.3);
}
.more-inner{text-align:center;padding:2rem;}
.more-inner .plus{
  font-size:clamp(3rem,6vw,4.2rem);font-weight:900;line-height:1;
  background:linear-gradient(92deg,#1b8df6,#6fc1ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.more-inner p{margin:.6rem 0 0;font-size:.95rem;color:#9db8d6;}

/* footer-credit strip */
.credit-strip{
  margin-top:2.6rem;border:1px solid rgba(127,166,204,.18);border-radius:16px;
  background:#0a1322;padding:1.4rem 1.8rem;display:flex;align-items:center;gap:1.4rem;
  justify-content:center;flex-wrap:wrap;
}
.credit-strip .cs-label{font-size:.95rem;color:#9db8d6;}
.credit-strip .cs-sig{
  font-family:ui-monospace,Menlo,monospace;font-size:.92rem;color:#7fc1ff;
  padding:.55rem 1rem;border-radius:10px;background:rgba(27,141,246,.08);
  border:1px solid rgba(27,141,246,.25);
  position:relative;overflow:hidden;
}
.credit-strip .cs-sig::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(127,193,255,.18) 50%,transparent 70%);
  transform:translateX(-100%);animation:sigShine 4s ease-in-out infinite;
}
@keyframes sigShine{40%,100%{transform:translateX(100%);}}

/* ---------- speed bar ---------- */
.speed-demo{max-width:640px;margin:2.5rem auto 0;}
.speed-row{display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem;}
.speed-row .s-label{flex:0 0 150px;font-size:.85rem;font-weight:700;color:#9db8d6;text-align:right;}
.speed-row .s-track{flex:1;height:12px;border-radius:999px;background:rgba(127,166,204,.14);overflow:hidden;}
.speed-row .s-fill{
  height:100%;border-radius:999px;width:0;
  transition:width 1.4s cubic-bezier(.22,1,.36,1);
}
.speed-demo.in .s-fill.fast{width:18%;background:linear-gradient(90deg,#1b8df6,#6fc1ff);}
.speed-demo.in .s-fill.slow{width:92%;background:rgba(127,166,204,.4);}
.speed-row .s-time{flex:0 0 60px;font-size:.85rem;font-weight:800;color:#7fc1ff;}
.speed-row.theirs .s-time{color:#7fa6cc;}
.speed-note{text-align:center;font-size:.8rem;color:#7fa6cc;margin-top:1rem;}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .folio-grid{grid-template-columns:1fr;}
  .speed-row .s-label{flex-basis:104px;font-size:.74rem;}
}
@media(prefers-reduced-motion:reduce){
  .web-float{animation:none;}
  .browser-screen img{animation:none;}
  .folio-screen img{transition:none;}
  .folio-card:hover .folio-screen img,
  .folio-card.peek .folio-screen img{transform:none;}
  .folio-badge::before{animation:none;}
  .credit-strip .cs-sig::after{animation:none;}
  .speed-row .s-fill{transition:none;}
}

/* ---------- price plaque: no hidden pricing (20260702) ---------- */
.price-zone .price-plaque{
  max-width:680px;margin:0 auto;text-align:center;position:relative;
  border:1px solid rgba(27,141,246,.3);border-radius:24px;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(27,141,246,.12), transparent 60%),
    linear-gradient(180deg, rgba(15,31,54,.7), rgba(11,20,36,.9));
  padding:3rem 2.2rem 2.6rem;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  overflow:hidden;
}
.price-plaque::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 40%,rgba(127,193,255,.07) 50%,transparent 60%);
  transform:translateX(-100%);animation:ppShine 5s ease-in-out infinite;
}
@keyframes ppShine{50%,100%{transform:translateX(100%);}}
.price-plaque .pp-eyebrow{
  display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#7fc1ff;margin-bottom:1rem;
}
.price-plaque .pp-num{
  font-size:clamp(3.4rem,9vw,5.5rem);font-weight:900;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(92deg,#eef4fb 20%,#6fc1ff 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.price-plaque .pp-num .pp-plus{font-size:.5em;vertical-align:.5em;color:#1b8df6;-webkit-text-fill-color:#1b8df6;}
.price-plaque .pp-cap{font-size:.85rem;color:#7fa6cc;font-weight:700;margin-top:.4rem;letter-spacing:.04em;}
.price-plaque .pp-line{
  max-width:44ch;margin:1.2rem auto 1.6rem;color:#9db8d6;font-size:1rem;line-height:1.65;
}
@media(prefers-reduced-motion:reduce){.price-plaque::before{animation:none;}}