/*
 ResellBot.uk scroll-led editorial motion system — 2026-08-13
 Original implementation inspired by the pacing and scroll-led editorial feel of premium landing pages.
 This file intentionally unifies all public pages under one visual language.
*/
:root{
  --rb-bg:#061820;
  --rb-bg-deep:#031218;
  --rb-bg-mid:#082029;
  --rb-panel:rgba(7,28,36,.64);
  --rb-panel-strong:rgba(5,23,31,.86);
  --rb-cream:#f5f0e5;
  --rb-copy:#becbc7;
  --rb-muted:#879b99;
  --rb-gold:#efbd5b;
  --rb-teal:#56e2cc;
  --rb-line:rgba(239,189,91,.20);
  --rb-line-soft:rgba(245,240,229,.10);
  --rb-ease:cubic-bezier(.16,1,.3,1);
  --rb-serif:Georgia,"Times New Roman",Times,serif;
}
html{background:var(--rb-bg-deep);scroll-behavior:smooth;scroll-padding-top:88px}
body.cinematic-home,body.cinematic-page{
  position:relative;
  min-height:100%;
  background:var(--rb-bg)!important;
  color:var(--rb-cream);
  isolation:isolate;
}
body.cinematic-home:before,body.cinematic-page:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-8;
  background:
    radial-gradient(circle at 74% 6%,rgba(48,96,100,.20),transparent 34%),
    radial-gradient(circle at 8% 42%,rgba(239,189,91,.035),transparent 28%),
    linear-gradient(180deg,#031218 0%,#061820 35%,#071b22 72%,#04151b 100%);
}
body.cinematic-home:after,body.cinematic-page:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-7;
  opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.10'/%3E%3C/svg%3E");
}

/* One navigation treatment everywhere */
.site-header{
  min-height:88px!important;
  padding-inline:max(32px,calc((100vw - 1220px)/2))!important;
  background:linear-gradient(180deg,rgba(2,14,19,.92),rgba(2,14,19,.32) 70%,transparent)!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  transition:min-height .45s var(--rb-ease),background .45s ease,backdrop-filter .45s ease,box-shadow .45s ease!important;
}
.site-header.scrolled{
  min-height:70px!important;
  background:rgba(3,18,24,.88)!important;
  backdrop-filter:blur(20px) saturate(125%)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.065)!important;
}
.brand strong{font-family:var(--rb-serif);font-size:17px!important;letter-spacing:-.01em!important;text-transform:none!important}
.brand small{color:#849896!important}
.nav{gap:2px!important}
.nav a{font-size:12px!important;letter-spacing:.055em!important;text-transform:uppercase;color:rgba(245,240,229,.74)!important}
.nav a:not(.nav-buy):after{background:var(--rb-gold)!important}
.nav a:hover,.nav a.active{color:#fff!important}
.nav .nav-support{color:var(--rb-teal)!important}
.nav .nav-buy{border-color:rgba(239,189,91,.48)!important;color:var(--rb-gold)!important}

/* Progress line shared by every page */
.cin-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:1600;background:rgba(255,255,255,.035);pointer-events:none}
.cin-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--rb-gold),var(--rb-teal));box-shadow:0 0 18px rgba(86,226,204,.35);transition:width .08s linear}

/* Shared inner-page hero: same background, scale and spacing on every page */
body.cinematic-page .page-hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:min(78svh,850px);
  padding:138px 0 92px!important;
  border:0!important;
  overflow:hidden;
  background:transparent!important;
  isolation:isolate;
}
body.cinematic-page .page-hero:before{
  content:"";
  position:absolute;
  inset:-10% -5% -14%;
  z-index:-4;
  background-image:
    linear-gradient(90deg,rgba(3,18,24,.96) 0%,rgba(3,18,24,.80) 42%,rgba(3,18,24,.46) 72%,rgba(3,18,24,.80) 100%),
    linear-gradient(180deg,rgba(3,18,24,.20),rgba(3,18,24,.40) 65%,var(--rb-bg) 100%),
    url('/assets/media/hero-home-data-terrain.png');
  background-size:cover;
  background-position:center 52%;
  filter:saturate(.72) contrast(.97);
  transform:translate3d(var(--hero-x,0px),var(--page-hero-y,0px),0) scale(1.075);
  will-change:transform;
}
body.cinematic-page .page-hero:after{
  content:"";
  position:absolute;
  left:max(32px,calc((100vw - 1220px)/2));
  right:max(32px,calc((100vw - 1220px)/2));
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,var(--rb-line),rgba(255,255,255,.045),transparent);
}
body.cinematic-page .page-hero .shell{width:min(1220px,calc(100% - 72px));max-width:none!important;padding-left:clamp(0px,7vw,100px)}
body.cinematic-page .page-hero h1,
body.cinematic-page .guide-hero h1,
body.cinematic-page .legal-page h1,
body.cinematic-page .tutorial-hero h1{
  font-family:var(--rb-serif)!important;
  font-size:clamp(50px,6.1vw,86px)!important;
  line-height:.99!important;
  letter-spacing:-.045em!important;
  font-weight:600!important;
  max-width:980px;
  text-wrap:balance;
}
body.cinematic-page .page-hero h1 em{font-weight:500;color:var(--rb-cream)!important}
body.cinematic-page .page-hero p{max-width:760px!important;color:#c0ceca!important;font-size:clamp(16px,1.35vw,19px)!important;line-height:1.72!important;margin-top:24px}
body.cinematic-page .breadcrumb{color:#849a98!important;margin-bottom:22px!important}
body.cinematic-page .breadcrumb a{color:#c2ceca!important}
body.cinematic-page .eyebrow,.cin-kicker,.section-kicker,.seo-badge{color:var(--rb-gold)!important}

/* Guides / legal / tutorials join the same atmospheric system */
body.cinematic-page .guide-page,body.cinematic-page .legal-page,body.cinematic-page .tutorial-wrap{width:min(1220px,calc(100% - 72px))!important}
body.cinematic-page .guide-page{padding-top:142px!important}
body.cinematic-page .legal-page{padding-top:142px!important}
body.cinematic-page .guide-hero,body.cinematic-page .legal-page>h1{position:relative;z-index:1}
body.cinematic-page .guide-hero:before,body.cinematic-page .legal-page:before,body.cinematic-page .tutorial-wrap:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:520px;
  z-index:-2;
  pointer-events:none;
  background:radial-gradient(circle at 68% 4%,rgba(41,93,95,.20),transparent 37%),linear-gradient(180deg,rgba(3,18,24,.55),transparent);
}
body.cinematic-page .tutorial-hero{background:rgba(5,26,34,.48)!important;border:1px solid var(--rb-line)!important;border-radius:3px!important;padding:38px!important}

/* Remove page-to-page background variation */
body.cinematic-page .section,
body.cinematic-page .section.alt,
body.cinematic-page .seo-discovery,
body.cinematic-page main,
body.cinematic-page .guide-page,
body.cinematic-page .legal-page{
  background:transparent!important;
}
body.cinematic-page .section{position:relative;padding:112px 0!important}
body.cinematic-page .section+.section:before,
body.cinematic-page main>.section:not(:first-child):before{
  content:"";
  position:absolute;
  top:0;
  left:max(32px,calc((100vw - 1220px)/2));
  right:max(32px,calc((100vw - 1220px)/2));
  height:1px;
  background:linear-gradient(90deg,transparent,var(--rb-line-soft),transparent);
}

/* More editorial scale; less boxed-template feel */
body.cinematic-page h2{font-family:var(--rb-serif);letter-spacing:-.035em;line-height:1.04}
body.cinematic-page .section-head h2{font-size:clamp(40px,4.7vw,66px)!important;max-width:900px}
body.cinematic-page .section-head p{max-width:730px;color:var(--rb-copy)!important;font-size:16px;line-height:1.7}
body.cinematic-page .feature-split{gap:clamp(52px,8vw,116px)!important;align-items:center}
body.cinematic-page .feature-split .copy h2{font-size:clamp(40px,4.6vw,62px)!important}
body.cinematic-page .visual,body.cinematic-page .editorial-media{position:relative;overflow:visible}
body.cinematic-page .visual:after{
  content:"";position:absolute;right:-22px;bottom:-22px;width:54%;height:54%;z-index:-1;
  border-right:1px solid var(--rb-line);border-bottom:1px solid var(--rb-line)
}
body.cinematic-page .visual img,body.cinematic-page .product-shot{border-radius:0!important;box-shadow:0 30px 85px rgba(0,0,0,.32)!important}

/* One unified card vocabulary */
body.cinematic-page :is(.info-card,.mini-feature,.faq,.proof-card,.outcome-card,.example-deal,.example-metric,.comparison-table,.conversion-callout,.serp-answer,.benefit-bar div,.seo-link-card,.seo-content-card,.tool-card,.tool-panel,.tool-result,.guide-copy section,.guide-nav,.calculator-card,.support-form,.help-card,.price-card,.purchase-step,.tutorial-section,.tutorial-nav,.step-box,.quick-check div,.sales-band,.sticky-card){
  background:linear-gradient(145deg,rgba(7,29,37,.72),rgba(5,23,31,.58))!important;
  border-color:rgba(239,189,91,.14)!important;
  border-radius:4px!important;
  box-shadow:none!important;
}
body.cinematic-page :is(.info-card,.mini-feature,.faq,.proof-card,.seo-link-card,.seo-content-card,.tool-card,.price-card,.purchase-step,.help-card){
  transition:transform .45s var(--rb-ease),border-color .35s ease,background .35s ease!important;
}
body.cinematic-page :is(.info-card,.mini-feature,.faq,.proof-card,.seo-link-card,.seo-content-card,.tool-card,.price-card,.purchase-step,.help-card):hover{
  transform:translateY(-7px)!important;
  border-color:rgba(239,189,91,.34)!important;
  background:linear-gradient(145deg,rgba(9,34,42,.84),rgba(5,24,32,.68))!important;
}
body.cinematic-page .price-card.featured{border-color:rgba(86,226,204,.55)!important}
body.cinematic-page .keyword-links a,body.cinematic-page .search-intent span{border-radius:2px!important;background:rgba(5,24,32,.55)!important;border-color:rgba(245,240,229,.12)!important}

/* Buttons now match the home page everywhere */
body.cinematic-page .button{border-radius:999px!important;min-height:49px!important}
body.cinematic-page .button.primary,body.cinematic-page .button.button-primary{background:var(--rb-gold)!important;border-color:var(--rb-gold)!important;color:#122129!important}
body.cinematic-page .button.primary:hover{background:#f5cf81!important}
body.cinematic-page .button.ghost,body.cinematic-page .button.secondary{background:rgba(4,22,29,.42)!important;border-color:rgba(245,240,229,.18)!important}

/* Scroll reveal system */
.motion-ready .hero-seq{opacity:0;transform:translate3d(0,34px,0);filter:blur(3px)}
.motion-ready.motion-loaded .hero-seq{opacity:1;transform:none;filter:none;transition:opacity .95s var(--rb-ease),transform .95s var(--rb-ease),filter .95s ease}
.motion-ready.motion-loaded .hero-seq:nth-child(1){transition-delay:.04s}.motion-ready.motion-loaded .hero-seq:nth-child(2){transition-delay:.10s}.motion-ready.motion-loaded .hero-seq:nth-child(3){transition-delay:.17s}.motion-ready.motion-loaded .hero-seq:nth-child(4){transition-delay:.25s}.motion-ready.motion-loaded .hero-seq:nth-child(5){transition-delay:.33s}.motion-ready.motion-loaded .hero-seq:nth-child(6){transition-delay:.40s}
.motion-reveal{opacity:0;transform:translate3d(0,62px,0) scale(.988);filter:blur(2px);transition:opacity 1s var(--rb-ease),transform 1.05s var(--rb-ease),filter .8s ease;will-change:transform,opacity}
.motion-reveal[data-reveal="left"]{transform:translate3d(-68px,28px,0) scale(.99)}
.motion-reveal[data-reveal="right"]{transform:translate3d(68px,28px,0) scale(.99)}
.motion-reveal.in{opacity:1;transform:translate3d(0,0,0) scale(1);filter:none}
.motion-reveal[data-delay="1"]{transition-delay:.10s}.motion-reveal[data-delay="2"]{transition-delay:.20s}
.motion-media{overflow:hidden}
.motion-media img,.motion-media video{transition:transform 1.4s var(--rb-ease);transform:scale(1.035);will-change:transform}
.motion-media.in img,.motion-media.in video{transform:scale(1)}

/* Section chapters / side rail */
.motion-chapter{position:relative}
.motion-chapter:after{
  content:attr(data-chapter);
  position:absolute;
  z-index:-1;
  left:max(18px,calc((100vw - 1420px)/2));
  top:52px;
  color:rgba(245,240,229,.035);
  font:800 clamp(92px,11vw,170px)/1 var(--cin-sans,Arial,sans-serif);
  letter-spacing:-.08em;
  pointer-events:none;
}
.page-story-nav{position:fixed;right:28px;top:50%;z-index:80;transform:translateY(-50%);display:grid;gap:10px}
.page-story-nav button{display:flex;align-items:center;justify-content:flex-end;gap:11px;border:0;background:none;color:#708886;font:700 9px/1 var(--cin-sans,Arial,sans-serif);letter-spacing:.14em;cursor:pointer;padding:3px}
.page-story-nav button i{display:block;width:24px;height:1px;background:rgba(245,240,229,.18);transition:width .35s var(--rb-ease),background .35s ease}
.page-story-nav button.active{color:var(--rb-gold)}.page-story-nav button.active i{width:46px;background:var(--rb-gold)}

/* Homepage gets stronger movement but keeps its existing SEO/content */
body.cinematic-home .cinematic-hero:before{transform:translate3d(var(--hero-x,0px),var(--hero-y,0px),0) scale(var(--hero-scale,1.07))!important;transition:filter .5s ease}
body.cinematic-home .editorial{padding:150px 0!important}
body.cinematic-home .editorial-grid{min-height:670px!important}
body.cinematic-home .editorial-media{transition:none!important}
body.cinematic-home .seo-discovery,body.cinematic-home .section,body.cinematic-home .section.alt{background:transparent!important}
body.cinematic-home .section{padding:118px 0!important}
body.cinematic-home :is(.seo-link-card,.mini-feature,.faq,.worked-metrics>div){border-radius:4px!important}

/* Footer continues the same canvas instead of switching to black */
.site-footer{margin-top:0!important;background:rgba(3,16,22,.68)!important;border-top:1px solid rgba(239,189,91,.12)!important;padding-top:60px!important}
.footer-grid a:hover{color:var(--rb-gold)!important;transform:translateX(3px)}
.sticky-buy{background:var(--rb-gold)!important;color:#122129!important}

@media(max-width:1180px){.page-story-nav,.story-nav{display:none!important}}
@media(max-width:900px){
  .site-header{padding-inline:20px!important;min-height:72px!important;background:rgba(3,18,24,.9)!important;backdrop-filter:blur(16px)!important}
  body.cinematic-page .page-hero{min-height:auto;padding:122px 0 76px!important}
  body.cinematic-page .page-hero .shell,body.cinematic-page .guide-page,body.cinematic-page .legal-page,body.cinematic-page .tutorial-wrap{width:min(100% - 40px,1220px)!important;padding-left:0}
  body.cinematic-page .page-hero h1,body.cinematic-page .guide-hero h1,body.cinematic-page .legal-page h1,body.cinematic-page .tutorial-hero h1{font-size:clamp(44px,11vw,70px)!important}
  body.cinematic-page .section{padding:82px 0!important}
  body.cinematic-home .editorial{padding:94px 0!important}
  .motion-reveal[data-reveal="left"],.motion-reveal[data-reveal="right"]{transform:translate3d(0,48px,0) scale(.99)}
}
@media(max-width:650px){
  body.cinematic-page .page-hero .shell{width:calc(100% - 32px)!important}
  body.cinematic-page .page-hero{padding-top:106px!important;padding-bottom:62px!important}
  body.cinematic-page .section{padding:66px 0!important}
  body.cinematic-page .section-head h2{font-size:clamp(36px,11vw,52px)!important}
  body.cinematic-page .tutorial-hero{padding:24px!important}
  .cin-kicker,.section-kicker,.eyebrow{letter-spacing:.17em!important}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.motion-reveal,.hero-seq,.motion-media img,.motion-media video{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}.cin-progress{display:none}
}