[hidden]{display:none !important}
:root{
  --violet:#6d28d9;
  --indigo:#4f46e5;
  --bright:#8b5cf6;
  --lav:#f7f5ff;
  --navy:#111827;
  --ink:#10163d;
  --slate:#64748b;
  --line:#e9e7f1;
  --green:#10b981;
  --amber:#f59e0b;
  --red:#ef4444;
  --shadow:0 20px 60px rgba(22,20,60,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  line-height:1.55;
}
body.modal-open{overflow:hidden}
button,a{font:inherit}
img{max-width:100%}
.shell{width:min(1240px,calc(100% - 48px));margin:0 auto}
.site-header{
  position:sticky;top:0;z-index:100;
  height:76px;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid #efedf5;
  backdrop-filter:blur(18px);
}
.nav-shell{height:100%;display:flex;align-items:center;gap:32px}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  color:#10163d;text-decoration:none;
  font-family:"Manrope","Segoe UI",sans-serif;
  font-size:27px;font-weight:800;letter-spacing:-.7px;
  white-space:nowrap;
}
.brand img{width:40px;height:40px;display:block}
.main-nav{margin-left:auto;display:flex;align-items:center;gap:30px}
.main-nav a{
  position:relative;
  color:#252a47;text-decoration:none;
  font-size:13px;font-weight:700;
  transition:.18s ease;
}
.main-nav a:hover,.main-nav a.active{color:var(--violet)}
.main-nav a.active:after{
  content:"";position:absolute;left:0;right:0;bottom:-18px;
  height:2px;border-radius:999px;
  background:linear-gradient(90deg,var(--violet),var(--indigo));
}
.nav-actions{display:flex;align-items:center;gap:15px}
.text-button{
  border:0;background:transparent;color:#252a47;font-weight:700;
  cursor:pointer;padding:8px 0;
}
.text-button:hover{color:var(--violet)}
.button{
  border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:10px;text-decoration:none;cursor:pointer;
  font-weight:800;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.button:hover{transform:translateY(-1px)}
.button-primary{
  color:#fff;
  background:linear-gradient(135deg,#7934eb,#4f46e5);
  box-shadow:0 12px 24px rgba(96,55,219,.20);
}
.button-secondary{color:#5b2bd8;background:#fff;border-color:#d9d3ef}
.button-dark{color:#fff;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.24)}
.button-small{padding:11px 16px;font-size:12px}
.button-large{padding:13px 18px;font-size:13px}
.button-mini{padding:9px 12px;font-size:11px}
.full{width:100%}
.section-anchor{scroll-margin-top:76px}
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#111535 0%,#151443 54%,#10182a 100%);
  color:#fff;padding:74px 0 64px;
}
.hero-glow{position:absolute;border-radius:50%;pointer-events:none}
.hero-glow-a{
  width:520px;height:520px;right:-120px;top:-190px;
  background:radial-gradient(circle,rgba(109,40,217,.56),rgba(109,40,217,0) 68%);
}
.hero-glow-b{
  width:410px;height:410px;left:-170px;bottom:-220px;
  background:radial-gradient(circle,rgba(79,70,229,.40),rgba(79,70,229,0) 70%);
}
.hero-grid{
  position:relative;display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:60px;align-items:center;
}
.eyebrow{
  color:var(--violet);
  font-size:11px;font-weight:900;letter-spacing:1.1px;
  text-transform:uppercase;
}
.eyebrow-light{color:#ddd5ff}
.eyebrow-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#b698ff;margin-right:8px;
}
.hero h1,.section h2,.preview-head h2,.price-card .price strong{
  font-family:"Manrope","Segoe UI",sans-serif;
}
.hero h1{
  margin:22px 0 18px;
  font-size:60px;line-height:1.02;letter-spacing:-3.2px;font-weight:800;
}
.hero h1 span{
  display:block;
  background:linear-gradient(90deg,#b47cff,#8176ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-copy>p{margin:0;max-width:640px;color:#c9cbdb;font-size:17px}
.hero-actions{display:flex;gap:12px;margin-top:27px}
.hero-math{display:flex;align-items:center;gap:16px;margin-top:30px}
.hero-math>div{display:flex;align-items:baseline;gap:7px}
.hero-math strong{font-size:25px;font-family:"Manrope","Segoe UI",sans-serif}
.hero-math span{font-size:11px;color:#c7c9d9;text-transform:uppercase;letter-spacing:.45px}
.hero-math>b{color:#898da7}
.product-window{
  overflow:hidden;border-radius:18px;background:#fff;color:var(--ink);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 90px rgba(3,5,20,.34);
}
.window-bar{
  height:46px;display:flex;align-items:center;gap:13px;
  padding:0 14px;background:#f8f8fb;border-bottom:1px solid #ebeaf1;
}
.window-bar>strong{font-size:11px;color:#565d76}
.window-dots{display:flex;gap:5px}
.window-dots i{width:7px;height:7px;border-radius:50%;background:#c9cad4}
.status{
  display:inline-flex;align-items:center;
  border-radius:999px;padding:5px 8px;
  font-size:9px;font-weight:800;white-space:nowrap;
}
.window-bar .status{margin-left:auto}
.status-success{background:#eaf9f2;color:#087d58}
.status-warning{background:#fff5df;color:#a66200}
.status-danger{background:#fff0f0;color:#c43636}
.window-layout{display:grid;grid-template-columns:130px 1fr;min-height:435px}
.preview-sidebar{
  background:#fbfafe;border-right:1px solid #eeeaf5;
  padding:18px 12px;
}
.preview-sidebar>small{display:block;font-size:8px;font-weight:900;color:#969aae;letter-spacing:1px;margin-bottom:9px}
.preview-step{
  width:100%;border:0;background:transparent;display:grid;grid-template-columns:22px 1fr;
  gap:8px;align-items:center;text-align:left;
  padding:8px;border-radius:9px;font-size:9px;color:#70748a;
}
.preview-step b{display:grid;place-items:center;width:21px;height:21px;border-radius:6px;background:#eeeef4}
.preview-step.done{color:#376a57}
.preview-step.done b{background:#e9faf2;color:#087d58}
.preview-step.current{background:#efeaff;color:#5d33d2;font-weight:800}
.preview-step.current b{background:#6d28d9;color:#fff}
.preview-package{
  margin-top:20px;padding:12px;border:1px solid #ece8f3;border-radius:10px;background:#fff;
}
.preview-package small{display:block;color:#969aae;font-size:8px}
.preview-package strong{display:block;font-size:14px;margin:4px 0}
.preview-package span{display:block;color:#969aae;font-size:8px}
.preview-main{padding:18px}
.preview-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.preview-head small{font-size:8px;font-weight:900;letter-spacing:.9px;color:#7f8397}
.preview-head h2{font-size:18px;margin:5px 0 0}
.approved-count{text-align:right}
.approved-count strong{display:block;color:var(--violet);font-size:25px;line-height:1}
.approved-count span{color:#9396a8;font-size:8px}
.status-row{display:flex;gap:8px;margin:13px 0}
.campaign-artwork{
  height:238px;overflow:hidden;border-radius:12px;
  border:1px solid #ece7f4;background:#fff;
  box-shadow:0 8px 24px rgba(18,24,60,.07);
}
.campaign-artwork img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center;
}
.preview-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:13px}
.proof-strip{background:#fff;border-bottom:1px solid #efedf4}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.proof-item{
  display:flex;align-items:center;gap:12px;padding:19px 20px;
  border-right:1px solid #efedf4;
}
.proof-item:last-child{border-right:0}
.proof-item>span{
  width:36px;height:36px;border-radius:11px;background:var(--lav);
  display:grid;place-items:center;color:var(--violet);font-size:10px;font-weight:900;
}
.proof-item div{display:flex;flex-direction:column}
.proof-item strong{font-size:11px}
.proof-item small{font-size:9px;color:#85899c}
.section{padding:82px 0}
.section-soft{background:linear-gradient(180deg,#fbfaff,#f7f6fc)}
.section-head{max-width:800px;margin:0 auto 38px}
.section-head.center{text-align:center}
.section h2{
  margin:10px 0 10px;
  font-size:40px;line-height:1.12;letter-spacing:-1.65px;
}
.section-head p,.example-copy>p,.pilot-copy>p{color:var(--slate);font-size:14px}
.workflow{
  display:grid;grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr;
  max-width:1080px;margin:0 auto;align-items:center;
}
.workflow article{
  min-height:164px;border:1px solid #e7e4ef;border-radius:15px;background:#fff;padding:18px;
  box-shadow:0 12px 30px rgba(32,25,67,.04);
}
.workflow article>span{
  width:33px;height:33px;border-radius:10px;background:var(--lav);
  display:grid;place-items:center;color:var(--violet);font-weight:900;font-size:12px;
}
.workflow h3{font-size:14px;margin:15px 0 6px}
.workflow p{margin:0;color:var(--slate);font-size:10px}
.workflow>i{font-style:normal;text-align:center;color:#a7a7b7}
.example-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:68px;align-items:center}
.example-copy ul{
  list-style:none;padding:0;margin:22px 0;
}
.example-copy li{
  position:relative;padding:7px 0 7px 27px;color:#3f435d;font-size:13px;
}
.example-copy li:before{
  content:"✓";position:absolute;left:0;color:var(--green);font-weight:900;
}
.example-visual{
  margin:0;padding:18px;border:1px solid #e8e5f6;border-radius:22px;background:#fff;
  box-shadow:var(--shadow);
}
.example-visual img{display:block;width:100%;height:auto;border-radius:14px}
.example-visual figcaption{
  display:flex;justify-content:space-between;gap:18px;align-items:center;margin-top:13px;flex-wrap:wrap;
}
.example-visual figcaption span{
  color:var(--violet);font-size:11px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;
}
.example-visual figcaption strong{font-size:14px}
.pilot-grid{display:grid;grid-template-columns:1fr 430px;gap:75px;align-items:center}
.pilot-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:26px 0}
.pilot-stats>div{padding:16px;border:1px solid #e8e4f1;border-radius:13px;background:#fbfaff}
.pilot-stats strong{display:block;color:var(--violet);font:800 25px/1 "Manrope","Segoe UI",sans-serif}
.pilot-stats span{display:block;margin-top:7px;color:#7d8297;font-size:9px;text-transform:uppercase}
.pilot-note{
  display:flex;gap:12px;align-items:center;padding:14px;border:1px solid #ddd6f2;border-radius:12px;background:#f8f5ff;
}
.pilot-note>span{width:30px;height:30px;border-radius:9px;background:#fff;display:grid;place-items:center;color:var(--violet);font-weight:900}
.pilot-note strong{font-size:11px}
.pilot-note p{margin:2px 0 0;color:#72778a;font-size:10px}
.price-card{
  border:1px solid #ddd8ed;border-radius:18px;background:#fff;padding:24px;
  box-shadow:var(--shadow);
}
.price-head{display:flex;justify-content:space-between;gap:15px;padding-bottom:16px;border-bottom:1px solid #eceaf2}
.price-head>span{color:var(--violet);font-size:10px;font-weight:900;letter-spacing:.8px}
.price-head>strong{font-size:10px;color:#087d58;background:#eaf9f2;padding:5px 8px;border-radius:999px}
.price{display:flex;align-items:baseline;margin:20px 0 5px}
.price small{font-weight:900;font-size:16px}
.price strong{font-size:52px;line-height:1;margin-left:3px}
.price span{margin-left:9px;color:#73778c;font-size:12px}
.price-card>p{margin:0 0 15px;color:#676c80;font-size:12px}
.price-card ul{list-style:none;padding:0;margin:0 0 18px}
.price-card li{
  position:relative;padding:10px 0 10px 23px;border-bottom:1px solid #efedf4;font-size:12px;
}
.price-card li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900}
.price-foot{display:block;text-align:center;margin-top:9px;color:#8a8da0}
.faq-section{padding-top:58px}
.faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:75px}
.faq-grid>div:first-child h2{font-size:31px}
.faq-list details{border-top:1px solid #e8e5ef;padding:17px 0}
.faq-list details:last-child{border-bottom:1px solid #e8e5ef}
.faq-list summary{cursor:pointer;font-weight:800;font-size:13px;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:"+";float:right;color:var(--violet)}
.faq-list details[open] summary:after{content:"−"}
.faq-list p{color:var(--slate);font-size:12px;margin:10px 0 0;max-width:760px}
.footer{background:#10152e;color:#fff;padding:46px 0 24px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,.6fr);gap:50px}
.footer-brand{color:#fff}
.footer-grid p{color:#aeb3cb;font-size:12px;max-width:260px}
.footer-grid>div:not(:first-child){display:flex;flex-direction:column;gap:9px}
.footer-grid strong{font-size:12px;margin-bottom:5px}
.footer-grid a,.footer-grid button{
  color:#aeb3cb;text-decoration:none;background:none;border:0;padding:0;text-align:left;font-size:11px;cursor:pointer;
}
.footer-grid a:hover,.footer-grid button:hover{color:#fff}
.footer-bottom{
  display:flex;justify-content:space-between;gap:20px;
  border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:18px;
  color:#858ba7;font-size:10px;
}
.modal-backdrop{
  position:fixed;inset:0;z-index:200;background:rgba(8,11,28,.56);backdrop-filter:blur(5px);
  display:grid;place-items:center;padding:20px;
}
.modal{
  position:relative;width:min(480px,100%);border-radius:18px;background:#fff;padding:28px;box-shadow:0 30px 90px rgba(0,0,0,.28)
}
.modal h2{font:800 28px/1.15 "Manrope","Segoe UI",sans-serif;margin:9px 0}
.modal p{color:var(--slate);font-size:13px;margin:0 0 20px}
.modal-close{
  position:absolute;right:15px;top:12px;border:0;background:none;color:#81869b;font-size:26px;cursor:pointer;
}

@media(max-width:1050px){
  .main-nav{display:none}
  .hero-grid,.example-grid,.pilot-grid,.faq-grid{grid-template-columns:1fr}
  .hero h1{font-size:50px}
  .product-window{max-width:760px}
  .workflow{grid-template-columns:1fr 1fr;gap:15px}
  .workflow>i{display:none}
  .pilot-grid{gap:40px}
  .price-card{max-width:520px}
}
@media(max-width:760px){
  .shell{width:min(100% - 30px,1240px)}
  .site-header{height:68px}
  .brand{font-size:22px}.brand img{width:35px;height:35px}
  .nav-actions .text-button{display:none}
  .button-small{padding:10px 12px}
  .hero{padding:52px 0 48px}
  .hero h1{font-size:43px;letter-spacing:-2.1px}
  .hero-copy>p{font-size:15px}
  .hero-actions{flex-wrap:wrap}
  .hero-math{gap:10px;flex-wrap:wrap}
  .window-layout{grid-template-columns:1fr}
  .preview-sidebar{display:none}
  .campaign-artwork{height:auto}
  .proof-grid{grid-template-columns:1fr 1fr}
  .proof-item:nth-child(2){border-right:0}
  .workflow{grid-template-columns:1fr}
  .section{padding:62px 0}
  .section h2{font-size:34px}
  .pilot-stats{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:first-child{grid-column:1/-1}
}
@media(max-width:520px){
  .nav-actions .button{font-size:11px}
  .hero h1{font-size:38px}
  .proof-grid{grid-template-columns:1fr}
  .proof-item{border-right:0;border-bottom:1px solid #efedf4}
  .footer-grid{grid-template-columns:1fr}
  .footer-grid>div:first-child{grid-column:auto}
  .footer-bottom{flex-direction:column}
}


/* R49 — visual-first social campaign showcase */
.social-showcase{overflow:hidden;border-radius:22px;background:#fff;color:var(--ink);border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 90px rgba(3,5,20,.34);padding:20px}
.showcase-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:2px 2px 17px;border-bottom:1px solid #eceaf2}
.showcase-topbar>div{display:flex;flex-direction:column;gap:4px}.showcase-kicker{font-size:9px;font-weight:900;letter-spacing:1px;color:var(--violet)}.showcase-topbar strong{font:800 17px/1.2 "Manrope","Segoe UI",sans-serif}.showcase-ready{flex:0 0 auto;padding:7px 10px;border-radius:999px;background:#eaf9f2;color:#087d58;font-size:9px;font-weight:900}
.showcase-formats{display:grid;grid-template-columns:1.06fr .94fr;gap:14px;padding-top:16px;align-items:stretch}.showcase-supporting{display:grid;grid-template-columns:1fr .72fr;gap:12px;min-width:0}
.showcase-card{border:1px solid #e8e5ef;border-radius:16px;background:#fff;padding:9px;box-shadow:0 10px 24px rgba(18,24,60,.07);min-width:0}.showcase-featured{display:flex;flex-direction:column}.showcase-image{overflow:hidden;border-radius:11px;background:#f7dfd8;position:relative}.showcase-image img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:auto}.portrait-image{height:330px}.square-image{aspect-ratio:1/1}.vertical-image{height:330px}
.showcase-meta{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:9px 3px 1px}.showcase-meta>div:first-child{display:flex;align-items:baseline;gap:7px;min-width:0}.showcase-meta strong{font:900 18px/1 "Manrope","Segoe UI",sans-serif}.showcase-meta span{font-size:9px;color:#777d90}.compact-meta{align-items:flex-start}.compact-meta>div:first-child{display:block}.compact-meta strong{display:block;font-size:15px}.compact-meta>div:first-child span{display:block;margin-top:3px;line-height:1.2}
.platforms{display:flex!important;align-items:center!important;gap:5px!important}.platform-icon{width:20px;height:20px;border-radius:7px;display:grid!important;place-items:center;font-size:11px!important;font-weight:900!important;color:#fff!important;background:#6d28d9}.platform-icon.facebook{background:#1877f2;font-family:Arial,sans-serif}.platform-icon.tiktok{background:#111827}.platform-icon.reels{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}.platform-icon.instagram{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}
.showcase-total{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:14px;padding:12px 14px;border-radius:13px;background:#171739;color:#fff}.showcase-total>div{display:flex;align-items:baseline;gap:6px}.showcase-total strong{font:900 21px/1 "Manrope","Segoe UI",sans-serif}.showcase-total span{font-size:8px;color:#cbc8e8;text-transform:uppercase;letter-spacing:.5px}.showcase-total>b{color:#8884a7}
@media(max-width:1100px){.social-showcase{padding:15px}.showcase-formats{grid-template-columns:1fr}.showcase-supporting{grid-template-columns:1fr 1fr}.portrait-image{height:280px}.vertical-image{height:280px}.showcase-topbar strong{font-size:15px}}


/* R50 — active homepage + platform-led workflow */
.section-soft{position:relative;overflow:hidden;background:linear-gradient(135deg,#fbfaff 0%,#f7f6fc 52%,#faf8ff 100%)}.section-soft:before,.section-soft:after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.22;pointer-events:none;animation:afFloatGlow 10s ease-in-out infinite alternate}.section-soft:before{width:420px;height:420px;background:#8b5cf6;left:-160px;top:-110px}.section-soft:after{width:360px;height:360px;background:#4f46e5;right:-130px;bottom:-150px;animation-delay:-4s}.section-soft>.shell{position:relative;z-index:1}@keyframes afFloatGlow{from{transform:translate3d(0,0,0) scale(.92)}to{transform:translate3d(45px,28px,0) scale(1.08)}}.example-grid{max-width:1120px;margin:0 auto;grid-template-columns:.82fr 1.18fr}.example-copy .button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:12px;border:1px solid #6d28d9;background:linear-gradient(135deg,#6d28d9,#4f46e5);color:#fff;box-shadow:0 12px 28px rgba(109,40,217,.18);font-weight:850}.example-copy .button:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(109,40,217,.24)}.example-visual{transition:.3s ease}.example-visual:hover{transform:translateY(-5px);box-shadow:0 28px 60px rgba(79,70,229,.14)}.active-workflow{position:relative;gap:0;grid-template-columns:1fr 54px 1fr 54px 1fr 54px 1fr 54px 1fr}.active-workflow:before{content:"";position:absolute;left:5%;right:5%;top:50%;height:1px;background:linear-gradient(90deg,transparent,#d8ccff 15%,#8b5cf6 50%,#d8ccff 85%,transparent);z-index:0}.active-workflow article{position:relative;z-index:2;min-height:250px;padding:18px 17px 16px;display:flex;flex-direction:column;align-items:flex-start;transition:.25s ease;overflow:hidden}.active-workflow article:before{content:"";position:absolute;inset:auto -30% -55% -30%;height:70%;background:radial-gradient(circle at center,rgba(139,92,246,.17),transparent 68%);opacity:0;transition:.25s}.active-workflow article:hover{border-color:#bca8f4;transform:translateY(-7px);box-shadow:0 22px 42px rgba(73,56,160,.12)}.active-workflow article:hover:before{opacity:1}.active-workflow article:hover>span{background:linear-gradient(135deg,#6d28d9,#8b5cf6);color:#fff;box-shadow:0 7px 18px rgba(109,40,217,.24)}.workflow-icon{width:54px;height:54px;border-radius:50%;margin:18px auto 4px;align-self:center;display:grid;place-items:center;background:linear-gradient(145deg,#fbf9ff,#f1edff);border:1px solid #e5ddff;color:#6d28d9;font-size:22px;box-shadow:inset 0 0 0 8px rgba(255,255,255,.62)}.active-workflow h3{font-size:15px;margin:12px 0 6px}.active-workflow p{font-size:10px;line-height:1.5;min-height:48px}.active-workflow em{margin-top:auto;width:100%;padding:7px 9px;border-radius:999px;background:#f5f1ff;color:#6d28d9;text-align:center;font-style:normal;font-size:9px;font-weight:800}.active-workflow>i{position:relative;z-index:3;display:grid;place-items:center}.active-workflow>i b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #cdbdf8;color:#6d28d9;box-shadow:0 7px 18px rgba(79,70,229,.10);font-size:14px;transition:.2s}.active-workflow>i:hover b{background:#6d28d9;color:#fff;transform:translateX(3px)}.showcase-extra{margin-top:10px;display:flex;align-items:center;gap:7px;padding:9px 11px;border-radius:11px;background:#f8f6ff;border:1px solid #e8e0ff}.showcase-extra strong{font-size:9px}.showcase-extra small{font-size:8px;color:#7d8294}.platform-icon.x{background:#050505}.platform-icon.youtube{background:#ff0033}@media(max-width:1100px){.active-workflow{grid-template-columns:1fr 1fr;gap:14px}.active-workflow:before,.active-workflow>i{display:none}}@media(prefers-reduced-motion:reduce){.section-soft:before,.section-soft:after{animation:none}.active-workflow article,.example-visual{transition:none}}

/* R51 — hero showcase visual fidelity + subtle motion only */
.social-showcase-r51{
  position:relative;
  overflow:visible;
  padding:0;
  border:0;
  border-radius:26px;
  background:transparent;
  box-shadow:none;
  isolation:isolate;
  transform:translateZ(0);
}
.showcase-artwork-frame{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  background:#fff;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:
    0 32px 90px rgba(2,4,24,.42),
    0 0 0 1px rgba(132,96,255,.16),
    0 0 52px rgba(99,76,255,.18);
  animation:afShowcaseFloat 7.5s ease-in-out infinite;
  will-change:transform;
}
.showcase-artwork-r51{
  display:block;
  width:100%;
  height:auto;
  border-radius:inherit;
  transform:scale(1.002);
  image-rendering:auto;
  filter:saturate(1.025) contrast(1.015) brightness(1.015);
}
.showcase-artwork-frame:after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.30),rgba(255,255,255,0) 24%,rgba(116,82,255,.08) 66%,rgba(255,255,255,.22));
  mix-blend-mode:screen;
  opacity:.55;
}
.showcase-sheen{
  position:absolute;
  top:-35%;
  left:-42%;
  width:32%;
  height:175%;
  pointer-events:none;
  transform:rotate(12deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),rgba(255,255,255,.34),rgba(255,255,255,.04),transparent);
  filter:blur(2px);
  animation:afShowcaseSheen 8.5s ease-in-out infinite;
  opacity:.65;
}
.showcase-aura{
  position:absolute;
  z-index:-1;
  border-radius:50%;
  pointer-events:none;
  filter:blur(44px);
  opacity:.72;
  animation:afShowcaseAura 8s ease-in-out infinite alternate;
}
.showcase-aura-one{
  width:52%;height:44%;right:-8%;top:-7%;
  background:radial-gradient(circle,rgba(111,56,255,.76) 0%,rgba(75,72,229,.32) 48%,transparent 72%);
}
.showcase-aura-two{
  width:48%;height:42%;left:-9%;bottom:-8%;
  background:radial-gradient(circle,rgba(50,117,255,.50) 0%,rgba(118,68,255,.26) 48%,transparent 74%);
  animation-delay:-3s;
}
.showcase-spark{
  position:absolute;
  z-index:2;
  width:7px;height:7px;
  border-radius:50%;
  background:#b8a4ff;
  box-shadow:0 0 0 5px rgba(139,92,246,.08),0 0 18px rgba(139,92,246,.82);
  pointer-events:none;
  animation:afSpark 4.8s ease-in-out infinite;
}
.showcase-spark-one{right:3%;top:10%}
.showcase-spark-two{left:2%;bottom:15%;animation-delay:-2.2s;background:#78a7ff}
.social-showcase-r51:hover .showcase-artwork-frame{
  animation-play-state:paused;
  transform:translateY(-5px) scale(1.008);
  transition:transform .35s cubic-bezier(.2,.75,.25,1),box-shadow .35s ease;
  box-shadow:0 38px 100px rgba(2,4,24,.48),0 0 0 1px rgba(151,123,255,.22),0 0 68px rgba(103,76,255,.24);
}
@keyframes afShowcaseFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-7px,0)}
}
@keyframes afShowcaseSheen{
  0%,14%{left:-42%;opacity:0}
  27%{opacity:.62}
  50%{left:120%;opacity:.28}
  62%,100%{left:120%;opacity:0}
}
@keyframes afShowcaseAura{
  from{transform:translate3d(-8px,4px,0) scale(.94);opacity:.50}
  to{transform:translate3d(14px,-10px,0) scale(1.08);opacity:.78}
}
@keyframes afSpark{
  0%,100%{transform:translate3d(0,0,0) scale(.8);opacity:.35}
  50%{transform:translate3d(6px,-8px,0) scale(1.15);opacity:1}
}
@media(max-width:1100px){
  .showcase-artwork-frame{border-radius:20px}
  .showcase-spark{display:none}
}
@media(prefers-reduced-motion:reduce){
  .showcase-artwork-frame,.showcase-sheen,.showcase-aura,.showcase-spark{animation:none !important}
  .social-showcase-r51:hover .showcase-artwork-frame{transform:none}
}

/* R54 — balanced hero edges + restored social-media identity */
.social-showcase-r54{
  padding-inline:22px;
}
.social-showcase-r54 .showcase-artwork-frame{
  margin-inline:0;
  border-radius:24px;
}
.hero-social-badge{
  position:absolute;
  z-index:5;
  width:38px;
  height:38px;
  border-radius:13px;
  display:grid;
  place-items:center;
  color:#fff;
  pointer-events:none;
  box-shadow:0 10px 24px rgba(3,5,20,.28),0 0 0 2px rgba(255,255,255,.86);
  animation:afSocialFloat 5.8s ease-in-out infinite;
  will-change:transform;
}
.hero-social-badge svg{width:23px;height:23px;overflow:visible}
.hero-social-badge svg rect,.hero-social-badge svg circle:not(.dot){fill:none;stroke:#fff;stroke-width:1.9}
.hero-social-badge svg .dot{fill:#fff;stroke:none}
.hero-social-badge span{font:900 23px/1 Arial,Helvetica,sans-serif;transform:translateY(-1px)}
.hero-social-instagram{
  left:4px;top:12%;
  background:radial-gradient(circle at 30% 105%,#fdf497 0 5%,#fdf497 5% 9%,#fd5949 40%,#d6249f 60%,#285AEB 92%);
}
.hero-social-facebook{
  left:4px;bottom:25%;
  background:#1877f2;
  animation-delay:-1.6s;
}
.hero-social-tiktok{
  right:4px;top:13%;
  background:#090909;
  text-shadow:2px 1px 0 #25f4ee,-2px -1px 0 #fe2c55;
  animation-delay:-2.4s;
}
.hero-social-x{
  right:4px;bottom:26%;
  background:#090909;
  animation-delay:-3.7s;
}
@keyframes afSocialFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,-6px,0) scale(1.035)}
}
@media(max-width:1180px){
  .social-showcase-r54{padding-inline:16px}
  .hero-social-badge{width:32px;height:32px;border-radius:11px}
  .hero-social-badge svg{width:19px;height:19px}
  .hero-social-badge span{font-size:19px}
  .hero-social-instagram,.hero-social-facebook{left:0}
  .hero-social-tiktok,.hero-social-x{right:0}
}
@media(max-width:980px){
  .social-showcase-r54{padding-inline:12px}
  .hero-social-badge{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-social-badge{animation:none!important}
}


/* R55 — exact hero framing pass: equal left/right breathing room + safe social rails */
.social-showcase-r55{
  position:relative;
  padding-inline:42px;
  overflow:visible;
}
.social-showcase-r55 .showcase-artwork-frame{
  margin:0;
  border-radius:26px;
  background:#fff;
  overflow:hidden;
  box-shadow:
    0 32px 90px rgba(2,4,24,.42),
    0 0 0 1px rgba(132,96,255,.16),
    0 0 52px rgba(99,76,255,.18);
}
.social-showcase-r55 .showcase-artwork-r51{
  width:100%;
  display:block;
  transform:none;
  border-radius:0;
}
.social-showcase-r55 .hero-social-badge{
  width:38px;
  height:38px;
  border-radius:13px;
  box-shadow:0 10px 24px rgba(3,5,20,.34),0 0 0 2px rgba(255,255,255,.9);
}
.social-showcase-r55 .hero-social-instagram{left:2px;top:17%}
.social-showcase-r55 .hero-social-facebook{left:2px;bottom:27%}
.social-showcase-r55 .hero-social-tiktok{right:2px;top:17%}
.social-showcase-r55 .hero-social-x{right:2px;bottom:27%}
@media(max-width:1180px){
  .social-showcase-r55{padding-inline:34px}
  .social-showcase-r55 .hero-social-instagram,
  .social-showcase-r55 .hero-social-facebook{left:1px}
  .social-showcase-r55 .hero-social-tiktok,
  .social-showcase-r55 .hero-social-x{right:1px}
}
@media(max-width:980px){
  .social-showcase-r55{padding-inline:16px}
}

/* R56 — homepage vitality + meaningful real-campaign example */
.hero{isolation:isolate}
.hero:before,.hero:after{
  content:"";position:absolute;pointer-events:none;z-index:0;border-radius:50%;filter:blur(18px);mix-blend-mode:screen;opacity:.42
}
.hero:before{
  width:700px;height:700px;right:2%;top:-260px;
  background:radial-gradient(circle,rgba(126,76,255,.44) 0%,rgba(85,74,229,.20) 38%,transparent 70%);
  animation:afHeroLightDrift 12s ease-in-out infinite alternate
}
.hero:after{
  width:580px;height:580px;left:39%;bottom:-360px;
  background:radial-gradient(circle,rgba(49,108,255,.32) 0%,rgba(109,40,217,.16) 42%,transparent 72%);
  animation:afHeroLightDrift2 14s ease-in-out infinite alternate
}
.hero .hero-grid{position:relative;z-index:2}
.social-showcase-r55:before{
  content:"";position:absolute;z-index:-1;inset:7% 5%;border-radius:32px;pointer-events:none;
  background:conic-gradient(from 210deg,rgba(91,70,229,.04),rgba(135,82,255,.38),rgba(50,116,255,.20),rgba(91,70,229,.04));
  filter:blur(30px);opacity:.78;animation:afHeroPanelPulse 8s ease-in-out infinite alternate
}
@keyframes afHeroLightDrift{from{transform:translate3d(-45px,-10px,0) scale(.92)}to{transform:translate3d(45px,35px,0) scale(1.08)}}
@keyframes afHeroLightDrift2{from{transform:translate3d(30px,12px,0) scale(.94)}to{transform:translate3d(-45px,-18px,0) scale(1.08)}}
@keyframes afHeroPanelPulse{from{transform:scale(.94) rotate(-2deg);opacity:.46}to{transform:scale(1.05) rotate(2deg);opacity:.86}}

.transformation-section{position:relative;overflow:hidden;background:linear-gradient(120deg,#fbfaff 0%,#f7f7ff 46%,#fbf8ff 100%)}
.example-light{position:absolute;border-radius:50%;pointer-events:none;filter:blur(60px);opacity:.34;mix-blend-mode:multiply}
.example-light-a{width:500px;height:500px;left:-190px;top:-150px;background:rgba(139,92,246,.30);animation:afExampleLight 11s ease-in-out infinite alternate}
.example-light-b{width:440px;height:440px;right:-160px;bottom:-170px;background:rgba(79,70,229,.24);animation:afExampleLight 13s ease-in-out infinite alternate-reverse}
@keyframes afExampleLight{from{transform:translate3d(0,0,0) scale(.94)}to{transform:translate3d(44px,26px,0) scale(1.08)}}
.example-grid-r56{position:relative;z-index:2;max-width:1180px;grid-template-columns:.78fr 1.22fr;gap:62px}
.example-copy-r56 h2{max-width:480px}
.example-copy-r56>p{font-size:16px;line-height:1.7;max-width:510px}
.example-pipeline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:22px 0 6px}
.example-pipeline span{padding:8px 11px;border-radius:999px;background:#fff;border:1px solid #e5defb;box-shadow:0 6px 18px rgba(92,74,181,.07);font-size:10px;font-weight:800;color:#4338ca}
.example-pipeline b{color:#8b5cf6;font-size:15px}
.example-visual-r56{position:relative;padding:14px;border-radius:26px;background:rgba(255,255,255,.78);border:1px solid rgba(221,214,254,.82);box-shadow:0 24px 70px rgba(65,48,128,.13);backdrop-filter:blur(8px);overflow:visible}
.example-art-glow{position:absolute;z-index:-1;inset:12% 6%;border-radius:30px;background:radial-gradient(circle at 50% 50%,rgba(139,92,246,.24),rgba(79,70,229,.10) 45%,transparent 72%);filter:blur(30px);animation:afExampleArtGlow 8s ease-in-out infinite alternate}
.example-art-frame{position:relative;overflow:hidden;border-radius:18px;background:#fff;box-shadow:0 18px 44px rgba(49,46,129,.13);transform:translateZ(0);animation:afExampleFloat 7s ease-in-out infinite}
.example-art-frame img{display:block;width:100%;height:auto;border-radius:0;filter:saturate(1.04) contrast(1.02) brightness(1.01)}
.example-art-sheen{position:absolute;top:-30%;left:-36%;width:24%;height:170%;transform:rotate(12deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),rgba(255,255,255,.42),rgba(255,255,255,.08),transparent);animation:afExampleSheen 8s ease-in-out infinite;pointer-events:none}
.example-visual-r56 figcaption{padding:13px 5px 2px}
.example-visual-r56 figcaption span{color:#6d28d9;font-weight:900;letter-spacing:.8px}
.example-visual-r56 figcaption strong{font-size:13px}
.example-visual-r56:hover .example-art-frame{animation-play-state:paused;transform:translateY(-5px) scale(1.008);transition:.3s ease;box-shadow:0 25px 56px rgba(73,56,160,.18)}
@keyframes afExampleFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-6px,0)}}
@keyframes afExampleArtGlow{from{transform:scale(.92);opacity:.45}to{transform:scale(1.08);opacity:.9}}
@keyframes afExampleSheen{0%,15%{left:-36%;opacity:0}30%{opacity:.7}55%{left:122%;opacity:.25}70%,100%{left:122%;opacity:0}}
@media(max-width:1100px){.example-grid-r56{grid-template-columns:1fr;gap:34px}.example-copy-r56 h2,.example-copy-r56>p{max-width:none}}
@media(prefers-reduced-motion:reduce){.hero:before,.hero:after,.social-showcase-r55:before,.example-light,.example-art-glow,.example-art-frame,.example-art-sheen{animation:none!important}}


/* R57 — hero motion visibility + real transformation visual. Preserves the approved hero layout. */
.hero-glow-a,.hero-glow-b,.showcase-artwork-frame,.showcase-sheen,.showcase-aura,.showcase-spark,.hero-social-badge{will-change:transform,opacity,filter}

/* Strong fallback animation. JS adds a second motion layer when reduced motion is not requested. */
.social-showcase-r55 .hero-social-badge{animation:afSocialLiveR57 3.8s cubic-bezier(.45,0,.25,1) infinite}
.social-showcase-r55 .hero-social-instagram{animation-delay:-.15s}
.social-showcase-r55 .hero-social-facebook{animation-delay:-1.05s}
.social-showcase-r55 .hero-social-tiktok{animation-delay:-1.95s}
.social-showcase-r55 .hero-social-x{animation-delay:-2.85s}
@keyframes afSocialLiveR57{
  0%,100%{transform:translate3d(0,2px,0) scale(1) rotate(0deg);filter:brightness(1);box-shadow:0 10px 24px rgba(3,5,20,.34),0 0 0 2px rgba(255,255,255,.90),0 0 0 0 rgba(154,111,255,0)}
  25%{transform:translate3d(0,-7px,0) scale(1.075) rotate(-1.6deg);filter:brightness(1.08);box-shadow:0 13px 30px rgba(3,5,20,.38),0 0 0 2px rgba(255,255,255,.95),0 0 0 7px rgba(154,111,255,.09)}
  50%{transform:translate3d(0,-2px,0) scale(1.12) rotate(1.7deg);filter:brightness(1.13);box-shadow:0 16px 34px rgba(3,5,20,.42),0 0 0 2px rgba(255,255,255,1),0 0 0 12px rgba(154,111,255,.02)}
  75%{transform:translate3d(0,6px,0) scale(1.045) rotate(1deg);filter:brightness(1.04)}
}

.hero-orbit{
  position:absolute;z-index:-1;pointer-events:none;border-radius:50%;
  border:1px solid rgba(160,118,255,.26);filter:drop-shadow(0 0 12px rgba(130,77,255,.48));
  animation:afHeroOrbitR57 9s linear infinite;
}
.hero-orbit:before{content:"";position:absolute;inset:-1px;border-radius:inherit;border-top:2px solid rgba(203,181,255,.82);border-right:2px solid transparent;border-bottom:2px solid transparent;border-left:2px solid transparent}
.hero-orbit span{position:absolute;width:7px;height:7px;border-radius:50%;background:#c4a7ff;box-shadow:0 0 0 5px rgba(151,103,255,.11),0 0 20px rgba(151,103,255,.9)}
.hero-orbit-a{width:116%;height:78%;left:-8%;top:10%;transform:rotate(-10deg)}
.hero-orbit-a span{right:8%;top:12%}
.hero-orbit-b{width:108%;height:96%;left:-4%;top:1%;transform:rotate(18deg);animation-duration:12s;animation-direction:reverse;opacity:.72}
.hero-orbit-b span{left:4%;bottom:19%;background:#79a8ff;box-shadow:0 0 0 5px rgba(80,129,255,.10),0 0 20px rgba(80,129,255,.82)}
@keyframes afHeroOrbitR57{to{transform:rotate(350deg)}}

.social-showcase-r55 .showcase-artwork-frame{animation:afHeroBoardLiveR57 5.2s ease-in-out infinite}
@keyframes afHeroBoardLiveR57{
  0%,100%{transform:translate3d(0,2px,0) scale(1)}
  50%{transform:translate3d(0,-9px,0) scale(1.014)}
}
.social-showcase-r55 .showcase-sheen{animation:afHeroSheenLiveR57 4.7s ease-in-out infinite;opacity:.82}
@keyframes afHeroSheenLiveR57{
  0%,10%{left:-42%;opacity:0}
  20%{opacity:.8}
  54%{left:118%;opacity:.38}
  62%,100%{left:118%;opacity:0}
}
.social-showcase-r55 .showcase-aura{animation-duration:5.2s;opacity:.85}
.social-showcase-r55 .showcase-spark{animation:afHeroSparkLiveR57 2.9s ease-in-out infinite}
@keyframes afHeroSparkLiveR57{
  0%,100%{transform:translate3d(-3px,3px,0) scale(.72);opacity:.28}
  45%{transform:translate3d(7px,-10px,0) scale(1.35);opacity:1}
  70%{transform:translate3d(3px,-4px,0) scale(.9);opacity:.58}
}
.hero-glow-a{animation:afHeroGlowALiveR57 7.5s ease-in-out infinite alternate}
.hero-glow-b{animation:afHeroGlowBLiveR57 9s ease-in-out infinite alternate-reverse}
@keyframes afHeroGlowALiveR57{from{transform:translate3d(-38px,-25px,0) scale(.88);opacity:.56}to{transform:translate3d(48px,36px,0) scale(1.14);opacity:.94}}
@keyframes afHeroGlowBLiveR57{from{transform:translate3d(-20px,15px,0) scale(.92);opacity:.48}to{transform:translate3d(58px,-34px,0) scale(1.12);opacity:.82}}

/* Section 2: one large visual proof, deliberately unlike the hero's dashboard composition. */
.transformation-r57{padding-top:82px;padding-bottom:88px;background:linear-gradient(180deg,#fbfaff 0%,#f6f4ff 54%,#fbfaff 100%)}
.transformation-shell-r57{position:relative;z-index:2;max-width:1220px}
.transformation-head-r57{max-width:820px;margin:0 auto 34px}
.transformation-head-r57 h2{max-width:690px;margin-left:auto;margin-right:auto}
.transformation-head-r57 p{max-width:760px;margin-left:auto;margin-right:auto;font-size:15px;line-height:1.7}
.transformation-stage-r57{position:relative;margin:0 auto;max-width:1160px;padding:18px 18px 15px;border-radius:28px;background:rgba(255,255,255,.78);border:1px solid rgba(218,209,251,.95);box-shadow:0 28px 78px rgba(61,48,126,.15);backdrop-filter:blur(10px);overflow:hidden}
.transformation-stage-glow{position:absolute;inset:10% 10%;border-radius:40px;background:radial-gradient(circle at 48% 50%,rgba(126,63,242,.26),rgba(72,74,229,.10) 46%,transparent 74%);filter:blur(34px);animation:afTransformGlowR57 6.5s ease-in-out infinite alternate;pointer-events:none}
.transformation-demo-label{position:relative;z-index:3;display:inline-flex;align-items:center;gap:8px;margin:0 0 12px 4px;padding:7px 11px;border-radius:999px;background:#f5f0ff;border:1px solid #e5dcff;color:#5b2bd8;font-size:10px;font-weight:900;letter-spacing:.8px;text-transform:uppercase}
.transformation-demo-label span{width:7px;height:7px;border-radius:50%;background:#7c3aed;box-shadow:0 0 0 5px rgba(124,58,237,.10)}
.transformation-image-wrap{position:relative;z-index:2;overflow:hidden;border-radius:19px;background:#f8f6ff;border:1px solid rgba(225,218,252,.9);box-shadow:0 18px 46px rgba(68,54,148,.11)}
.transformation-image-wrap img{display:block;width:100%;height:auto;transform:scale(1.002);filter:saturate(1.03) contrast(1.015)}
.transformation-stage-sheen{position:absolute;top:-45%;left:-32%;width:19%;height:190%;transform:rotate(13deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),rgba(255,255,255,.55),rgba(255,255,255,.05),transparent);filter:blur(2px);animation:afTransformSheenR57 6.8s ease-in-out infinite;pointer-events:none}
.transformation-proof-r57{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:16px 8px 2px;color:#252a46}
.transformation-proof-r57 div{display:flex;align-items:baseline;gap:6px}
.transformation-proof-r57 strong{font:800 14px/1 "Manrope","Segoe UI",sans-serif;color:#161d3a}
.transformation-proof-r57 span{font-size:10px;color:#777d94;text-transform:uppercase;letter-spacing:.45px}
.transformation-proof-r57 i{font-style:normal;color:#8b5cf6;font-weight:900}
.transformation-proof-r57 b{margin-left:auto;padding:8px 11px;border-radius:999px;background:#201a54;color:#fff;font-size:10px;letter-spacing:.25px}
.transformation-notes-r57{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.transformation-notes-r57>span{padding:8px 11px;border-radius:999px;background:#fff;border:1px solid #e6e0f7;color:#4b5067;font-size:10px;font-weight:750;box-shadow:0 6px 18px rgba(79,70,229,.05)}
.transformation-notes-r57 .button{margin-left:6px}
@keyframes afTransformGlowR57{from{transform:translate3d(-24px,4px,0) scale(.94);opacity:.52}to{transform:translate3d(30px,-10px,0) scale(1.08);opacity:.94}}
@keyframes afTransformSheenR57{0%,18%{left:-32%;opacity:0}30%{opacity:.7}55%{left:118%;opacity:.28}68%,100%{left:118%;opacity:0}}
@media(max-width:900px){.hero-orbit{display:none}.transformation-stage-r57{padding:12px}.transformation-proof-r57 b{margin-left:0}.transformation-r57{padding-top:64px;padding-bottom:68px}}
@media(prefers-reduced-motion:reduce){
  .social-showcase-r55 .hero-social-badge,.hero-orbit,.social-showcase-r55 .showcase-artwork-frame,.social-showcase-r55 .showcase-sheen,.social-showcase-r55 .showcase-aura,.social-showcase-r55 .showcase-spark,.hero-glow-a,.hero-glow-b,.transformation-stage-glow,.transformation-stage-sheen{animation:none!important}
}


/* R58 — cinematic hero motion. Layout remains exactly the approved R57/R55 composition. */
.hero-cinematic-r58{position:relative;overflow:hidden}
.hero-fx-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.92}
.hero-cinematic-r58 .hero-grid{position:relative;z-index:3}
.hero-light-sweep{position:absolute;z-index:1;pointer-events:none;mix-blend-mode:screen;filter:blur(12px);opacity:0;will-change:transform,opacity}
.hero-light-sweep-a{width:58%;height:155%;left:-40%;top:-30%;transform:rotate(-13deg);background:linear-gradient(90deg,transparent 0%,rgba(117,71,255,.02) 18%,rgba(162,106,255,.32) 47%,rgba(94,132,255,.12) 58%,transparent 82%);animation:afHeroLightSweepA58 7.2s ease-in-out infinite}
.hero-light-sweep-b{width:42%;height:145%;right:-34%;top:-18%;transform:rotate(17deg);background:linear-gradient(90deg,transparent 0%,rgba(79,70,229,.02) 22%,rgba(103,79,255,.24) 49%,rgba(198,177,255,.18) 60%,transparent 84%);animation:afHeroLightSweepB58 9.4s ease-in-out infinite 1.7s}
@keyframes afHeroLightSweepA58{0%,12%{transform:translate3d(-12%,0,0) rotate(-13deg);opacity:0}25%{opacity:.55}58%{transform:translate3d(245%,0,0) rotate(-13deg);opacity:.34}72%,100%{transform:translate3d(245%,0,0) rotate(-13deg);opacity:0}}
@keyframes afHeroLightSweepB58{0%,20%{transform:translate3d(20%,0,0) rotate(17deg);opacity:0}35%{opacity:.42}68%{transform:translate3d(-260%,0,0) rotate(17deg);opacity:.25}82%,100%{transform:translate3d(-260%,0,0) rotate(17deg);opacity:0}}

/* R58 JS owns the main social transforms; CSS supplies visible glow/ring motion. */
.hero-cinematic-r58 .hero-social-badge{animation:none!important;will-change:transform,opacity,filter,box-shadow;transform-origin:center}
.hero-cinematic-r58 .hero-social-badge:before{content:"";position:absolute;inset:-6px;border-radius:16px;border:1px solid rgba(220,204,255,.76);opacity:0;transform:scale(.75);animation:afHeroIconRing58 3.4s ease-out infinite;pointer-events:none}
.hero-cinematic-r58 .hero-social-badge:after{content:"";position:absolute;inset:-13px;border-radius:20px;background:radial-gradient(circle,rgba(145,93,255,.38) 0%,rgba(92,115,255,.15) 42%,transparent 72%);filter:blur(8px);opacity:.48;animation:afHeroIconGlow58 3.9s ease-in-out infinite;pointer-events:none;z-index:-1}
.hero-cinematic-r58 .hero-social-facebook:before,.hero-cinematic-r58 .hero-social-facebook:after{animation-delay:-.85s}
.hero-cinematic-r58 .hero-social-tiktok:before,.hero-cinematic-r58 .hero-social-tiktok:after{animation-delay:-1.7s}
.hero-cinematic-r58 .hero-social-x:before,.hero-cinematic-r58 .hero-social-x:after{animation-delay:-2.55s}
@keyframes afHeroIconRing58{0%{opacity:0;transform:scale(.72)}18%{opacity:.72}68%{opacity:0;transform:scale(1.62)}100%{opacity:0;transform:scale(1.62)}}
@keyframes afHeroIconGlow58{0%,100%{opacity:.34;transform:scale(.88)}50%{opacity:.92;transform:scale(1.18)}}

.hero-cinematic-r58 .showcase-artwork-frame{animation:none!important;will-change:transform,filter,box-shadow}
.hero-cinematic-r58 .showcase-sheen{animation:none!important;will-change:transform,opacity}
.hero-cinematic-r58 .showcase-aura{animation:afAuraPulse58 4.8s ease-in-out infinite alternate!important}
.hero-cinematic-r58 .showcase-aura-two{animation-delay:-2.1s!important}
@keyframes afAuraPulse58{from{transform:translate3d(-12px,9px,0) scale(.87);opacity:.48}to{transform:translate3d(22px,-16px,0) scale(1.22);opacity:.98}}

/* stronger luminous rings around the existing hero artwork; no geometry changes */
.hero-cinematic-r58 .hero-orbit-a{animation-duration:7.8s;opacity:.78}
.hero-cinematic-r58 .hero-orbit-b{animation-duration:10.8s;opacity:.58}
.hero-cinematic-r58 .hero-orbit:before{filter:drop-shadow(0 0 7px rgba(181,143,255,.78))}
.hero-cinematic-r58 .showcase-spark{animation:afHeroSpark58 2.25s ease-in-out infinite!important}
.hero-cinematic-r58 .showcase-spark-two{animation-delay:-1.1s!important}
@keyframes afHeroSpark58{0%,100%{transform:translate3d(-5px,5px,0) scale(.55);opacity:.18}44%{transform:translate3d(10px,-12px,0) scale(1.55);opacity:1}68%{transform:translate3d(5px,-5px,0) scale(.9);opacity:.5}}

@media(prefers-reduced-motion:reduce){
  .hero-fx-canvas{display:none}
  .hero-light-sweep,.hero-cinematic-r58 .hero-social-badge:before,.hero-cinematic-r58 .hero-social-badge:after,.hero-cinematic-r58 .showcase-aura,.hero-cinematic-r58 .showcase-spark{animation:none!important}
}


/* R59 — AutoFlow-specific activation choreography. No hero geometry changes. */
.hero-activation-r59 .hero-fx-canvas{opacity:.54}
.hero-activation-r59 .hero-light-sweep-a{opacity:.8;animation-duration:11.5s}
.hero-activation-r59 .hero-light-sweep-b{opacity:.55;animation-duration:14s}
.hero-activation-r59 .hero-orbit{opacity:.28!important;filter:drop-shadow(0 0 7px rgba(130,77,255,.24))}
.hero-activation-r59 .hero-orbit:before{border-top-color:rgba(203,181,255,.40);filter:none}
.hero-activation-r59 .showcase-aura{opacity:.58!important;animation-duration:8s!important}
.hero-activation-r59 .showcase-spark{opacity:.62}
.hero-activation-r59:not(.is-ambient) .hero-social-badge{opacity:.62;filter:saturate(.86) brightness(.94)}
.hero-activation-r59.is-ambient .hero-social-badge{opacity:1;filter:none}
.hero-activation-r59 .hero-social-badge:before{animation:none!important;opacity:0}
.hero-activation-r59 .hero-social-badge:after{animation:none!important;opacity:.18;transform:scale(.92)}
.hero-activation-r59 .showcase-artwork-frame{overflow:hidden;transform-origin:center;isolation:isolate}
.hero-activation-r59 .showcase-artwork-r51{position:relative;z-index:1}
.hero-activation-r59 .showcase-sheen{z-index:6}
.hero-format-focus,.hero-output-focus,.hero-wide-focus{
  position:absolute;z-index:5;pointer-events:none;opacity:0;border-radius:15px;
  border:2px solid rgba(142,92,246,.0);
  box-shadow:0 0 0 1px rgba(255,255,255,0),0 0 0 rgba(139,92,246,0);
  will-change:opacity,transform,filter,box-shadow;
}
.hero-format-focus:after,.hero-output-focus:after,.hero-wide-focus:after{
  content:"";position:absolute;inset:-5px;border-radius:inherit;opacity:0;
  background:linear-gradient(110deg,transparent 16%,rgba(255,255,255,.72) 48%,transparent 78%);
  mix-blend-mode:screen;transform:translateX(-145%);pointer-events:none;
}
.hero-format-focus-square{left:3.6%;top:13.7%;width:39.2%;height:58.3%}
.hero-format-focus-portrait{left:44.0%;top:13.7%;width:29.7%;height:58.3%}
.hero-format-focus-story{left:74.8%;top:13.7%;width:21.9%;height:58.3%}
.hero-output-focus{left:3.7%;top:73.4%;width:92.0%;height:12.7%;border-radius:17px}
.hero-wide-focus{left:3.7%;top:88.0%;width:92.0%;height:9.1%;border-radius:14px}
.hero-activation-r59 .hero-math{position:relative}
.hero-activation-r59 .hero-math:after{
  content:"";position:absolute;left:-10px;right:-10px;top:-9px;bottom:-9px;border-radius:14px;
  border:1px solid rgba(160,121,255,0);box-shadow:0 0 0 rgba(136,91,255,0);pointer-events:none;opacity:0
}
.hero-activation-r59 .hero-math strong{display:inline-block;transform-origin:center}

/* Activation classes are driven by home.js; the sequence itself is AutoFlow's product story. */
.hero-activation-r59 .hero-format-focus.is-active,
.hero-activation-r59 .hero-output-focus.is-active,
.hero-activation-r59 .hero-wide-focus.is-active{
  opacity:1;border-color:rgba(139,92,246,.72);
  box-shadow:0 0 0 1px rgba(255,255,255,.76),0 0 26px rgba(127,73,255,.30),inset 0 0 20px rgba(143,94,255,.06);
  animation:afFormatFocus59 .86s cubic-bezier(.2,.75,.25,1) both;
}
.hero-activation-r59 .hero-format-focus.is-active:after,
.hero-activation-r59 .hero-output-focus.is-active:after,
.hero-activation-r59 .hero-wide-focus.is-active:after{opacity:.58;animation:afFormatScan59 .82s ease-out both}
@keyframes afFormatFocus59{
  0%{opacity:0;transform:scale(.965);filter:brightness(1)}
  34%{opacity:1;transform:scale(1.012);filter:brightness(1.08)}
  100%{opacity:.72;transform:scale(1);filter:brightness(1.02)}
}
@keyframes afFormatScan59{from{transform:translateX(-145%)}to{transform:translateX(145%)}}

.hero-activation-r59 .hero-social-badge.is-activated:before{
  opacity:1;animation:afPlatformRing59 .95s cubic-bezier(.18,.72,.28,1) both!important
}
.hero-activation-r59 .hero-social-badge.is-activated:after{
  opacity:1;animation:afPlatformGlow59 1.1s ease-out both!important
}
@keyframes afPlatformRing59{
  0%{opacity:0;transform:scale(.72)}
  30%{opacity:.82}
  100%{opacity:0;transform:scale(1.72)}
}
@keyframes afPlatformGlow59{
  0%{opacity:.15;transform:scale(.8)}
  42%{opacity:.92;transform:scale(1.28)}
  100%{opacity:.20;transform:scale(.94)}
}
.hero-activation-r59.is-output-confirmed .hero-math:after{animation:afMathConfirm59 1.4s ease-out both}
.hero-activation-r59.is-output-confirmed .hero-math>div:last-of-type strong{animation:afNumberConfirm59 1.05s cubic-bezier(.2,.8,.25,1) both}
@keyframes afMathConfirm59{0%{opacity:0;border-color:rgba(160,121,255,0);box-shadow:0 0 0 rgba(136,91,255,0)}36%{opacity:1;border-color:rgba(178,145,255,.45);box-shadow:0 0 28px rgba(136,91,255,.22)}100%{opacity:0;border-color:rgba(160,121,255,0);box-shadow:0 0 0 rgba(136,91,255,0)}}
@keyframes afNumberConfirm59{0%{transform:scale(1);text-shadow:0 0 0 rgba(163,116,255,0)}42%{transform:scale(1.16);text-shadow:0 0 18px rgba(183,142,255,.68)}100%{transform:scale(1);text-shadow:0 0 0 rgba(163,116,255,0)}}

/* calm ambient state after the activation sequence */
.hero-activation-r59.is-ambient .showcase-artwork-frame{animation:afBoardAmbient59 7.8s ease-in-out infinite!important}
.hero-activation-r59.is-ambient .hero-social-badge{animation:afIconAmbient59 6.6s ease-in-out infinite!important}
.hero-activation-r59.is-ambient .hero-social-facebook{animation-delay:-1.3s!important}
.hero-activation-r59.is-ambient .hero-social-tiktok{animation-delay:-2.6s!important}
.hero-activation-r59.is-ambient .hero-social-x{animation-delay:-3.9s!important}
@keyframes afBoardAmbient59{0%,100%{transform:translate3d(0,1px,0) scale(1)}50%{transform:translate3d(0,-5px,0) scale(1.006)}}
@keyframes afIconAmbient59{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-4px,0) scale(1.035)}}

@media(max-width:980px){
  .hero-format-focus,.hero-output-focus,.hero-wide-focus{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-format-focus,.hero-output-focus,.hero-wide-focus{display:none!important}
  .hero-activation-r59.is-ambient .showcase-artwork-frame,.hero-activation-r59.is-ambient .hero-social-badge{animation:none!important}
}
\n\n/* R60 — reliable local-review motion + stronger professional activation. */\n.hero-activation-r59.is-board-activated .social-showcase-r55{\n  filter:drop-shadow(0 0 18px rgba(120,74,255,.18));\n}\n.hero-activation-r59.is-board-activated .social-showcase-r55:before{\n  opacity:.98!important;\n  transform:scale(1.07);\n  filter:blur(34px);\n}\n.hero-activation-r59 .hero-social-badge.is-activated{\n  z-index:8;\n  box-shadow:0 15px 34px rgba(3,5,20,.42),0 0 0 2px rgba(255,255,255,.96),0 0 30px rgba(142,91,255,.48);\n}\n.hero-activation-r59 .hero-social-badge.is-activated:before{\n  border-width:2px;\n}\n.hero-activation-r59 .hero-format-focus.is-active,\n.hero-activation-r59 .hero-output-focus.is-active,\n.hero-activation-r59 .hero-wide-focus.is-active{\n  border-width:3px;\n  box-shadow:0 0 0 1px rgba(255,255,255,.88),0 0 34px rgba(127,73,255,.48),inset 0 0 28px rgba(143,94,255,.10);\n}\n\n/* During local ZIP review, intentionally override OS reduced-motion so the user can inspect the requested motion.\n   Published http/https versions still honor prefers-reduced-motion through home.js. */\n@media(prefers-reduced-motion:reduce){\n  html.af-local-motion-review .hero-fx-canvas{display:block!important}\n  html.af-local-motion-review .hero-format-focus,\n  html.af-local-motion-review .hero-output-focus,\n  html.af-local-motion-review .hero-wide-focus{display:block!important}\n  html.af-local-motion-review .hero-light-sweep-a{animation:afHeroLightSweepA58 11.5s ease-in-out infinite!important}\n  html.af-local-motion-review .hero-light-sweep-b{animation:afHeroLightSweepB58 14s ease-in-out infinite 1.7s!important}\n  html.af-local-motion-review .hero-cinematic-r58 .showcase-aura{animation:afAuraPulse58 8s ease-in-out infinite alternate!important}\n  html.af-local-motion-review .hero-cinematic-r58 .showcase-aura-two{animation-delay:-2.1s!important}\n  html.af-local-motion-review .hero-cinematic-r58 .showcase-spark{animation:afHeroSpark58 2.25s ease-in-out infinite!important}\n  html.af-local-motion-review .hero-activation-r59.is-ambient .showcase-artwork-frame{animation:afBoardAmbient59 7.8s ease-in-out infinite!important}\n  html.af-local-motion-review .hero-activation-r59.is-ambient .hero-social-badge{animation:afIconAmbient59 6.6s ease-in-out infinite!important}\n}\n
/* R61 — performance: suspend expensive hero effects while the hero is off-screen. */
.hero-activation-r59.hero-motion-paused::before,
.hero-activation-r59.hero-motion-paused::after,
.hero-activation-r59.hero-motion-paused .hero-light-sweep,
.hero-activation-r59.hero-motion-paused .hero-fx-canvas,
.hero-activation-r59.hero-motion-paused .showcase-aura,
.hero-activation-r59.hero-motion-paused .showcase-spark,
.hero-activation-r59.hero-motion-paused .hero-orbit,
.hero-activation-r59.hero-motion-paused .hero-social-badge::before,
.hero-activation-r59.hero-motion-paused .hero-social-badge::after{
  visibility:hidden!important;
  animation-play-state:paused!important;
}
.hero-activation-r59.hero-motion-paused .showcase-artwork-frame,
.hero-activation-r59.hero-motion-paused .hero-social-badge,
.hero-activation-r59.hero-motion-paused .showcase-sheen{
  animation-play-state:paused!important;
  filter:none!important;
}
.hero-activation-r59.hero-motion-paused .social-showcase-r55:before,
.hero-activation-r59.hero-motion-paused .social-showcase-r55:after{
  display:none!important;
}

/* Keep below-the-fold layout cheaper to paint during long scrolls without changing appearance. */
.proof-strip,
main > .section:not(.hero){
  contain:layout paint style;
}


/* R62 — simplify hero motion, sharpen section 2, and upgrade the transformation CTA. */
.hero-social-lite-r62 .hero-fx-canvas,
.hero-social-lite-r62 .showcase-aura,
.hero-social-lite-r62 .showcase-spark,
.hero-social-lite-r62 .hero-orbit,
.hero-social-lite-r62 .hero-output-focus,
.hero-social-lite-r62 .hero-wide-focus,
.hero-social-lite-r62 .hero-format-focus{display:none!important}
.hero-social-lite-r62.hero-motion-paused .hero-light-sweep,
.hero-social-lite-r62.hero-motion-paused .hero-social-badge::before,
.hero-social-lite-r62.hero-motion-paused .hero-social-badge::after{visibility:hidden!important}
.hero-social-lite-r62 .hero-glow-a,
.hero-social-lite-r62 .hero-glow-b{animation-duration:14s!important;opacity:.52}
.hero-social-lite-r62 .hero-light-sweep-b{display:none!important}
.hero-social-lite-r62 .hero-light-sweep-a{
  width:44%;left:-28%;top:-22%;opacity:.34;filter:blur(14px);
  animation:afHeroLightSweepA62 10.5s ease-in-out infinite!important;
}
@keyframes afHeroLightSweepA62{
  0%,18%{transform:translate3d(-8%,0,0) rotate(-13deg);opacity:0}
  28%{opacity:.34}
  62%{transform:translate3d(205%,0,0) rotate(-13deg);opacity:.18}
  74%,100%{transform:translate3d(205%,0,0) rotate(-13deg);opacity:0}
}
.hero-social-lite-r62 .social-showcase-r55:before{
  inset:9% 7%;opacity:.34!important;filter:blur(24px)!important;
  animation:afHeroPanelPulse62 10s ease-in-out infinite alternate!important;
}
@keyframes afHeroPanelPulse62{from{transform:scale(.98);opacity:.22}to{transform:scale(1.03);opacity:.42}}
.hero-social-lite-r62 .showcase-artwork-frame{animation:none!important;transform:none!important}
.hero-social-lite-r62 .showcase-sheen{opacity:.26}
.hero-social-lite-r62 .hero-social-badge{
  animation:none!important;opacity:1!important;filter:none!important;
  transition:box-shadow .28s ease, filter .28s ease, opacity .28s ease;
}
.hero-social-lite-r62 .hero-social-badge::before{animation:none!important;opacity:0;inset:-7px;border-color:rgba(230,220,255,.88)}
.hero-social-lite-r62 .hero-social-badge::after{animation:none!important;opacity:.14;inset:-12px;filter:blur(9px)}
.hero-social-lite-r62 .hero-social-badge.is-activated{
  box-shadow:0 14px 32px rgba(3,5,20,.42),0 0 0 2px rgba(255,255,255,.96),0 0 24px rgba(142,91,255,.24)!important;
}
.hero-social-lite-r62 .hero-social-badge.is-activated::before{opacity:1;animation:afPlatformRing62 .82s ease-out both!important}
.hero-social-lite-r62 .hero-social-badge.is-activated::after{opacity:1;animation:afPlatformGlow62 1.02s ease-out both!important}
@keyframes afPlatformRing62{0%{opacity:0;transform:scale(.78)}24%{opacity:.72}100%{opacity:0;transform:scale(1.42)}}
@keyframes afPlatformGlow62{0%{opacity:.18;transform:scale(.86)}46%{opacity:.72;transform:scale(1.18)}100%{opacity:.14;transform:scale(.96)}}
.hero-social-lite-r62 .hero-math:after{display:none!important}
.hero-social-lite-r62.is-output-confirmed .hero-math>div:last-of-type strong{animation:afNumberConfirm62 .84s cubic-bezier(.2,.8,.25,1) both}
@keyframes afNumberConfirm62{0%{transform:scale(1)}45%{transform:scale(1.12);text-shadow:0 0 16px rgba(183,142,255,.45)}100%{transform:scale(1)}}
.hero-social-lite-r62.is-ambient .hero-social-badge{animation:none!important}
@media(max-width:980px){
  .hero-social-lite-r62 .hero-light-sweep-a{display:none!important}
}

.transformation-stage-r57{padding:20px 20px 18px}
.transformation-stage-glow{opacity:.46;filter:blur(24px);animation:afTransformGlow62 9s ease-in-out infinite alternate}
@keyframes afTransformGlow62{from{transform:translate3d(-12px,0,0) scale(.98);opacity:.30}to{transform:translate3d(16px,-4px,0) scale(1.02);opacity:.52}}
.transformation-image-wrap{background:#fbf9ff;border-color:rgba(225,218,252,.96);box-shadow:0 20px 46px rgba(68,54,148,.10)}
.transformation-image-wrap img{transform:none!important;filter:saturate(1.02) contrast(1.06) brightness(1.01);image-rendering:auto}
.transformation-stage-sheen{opacity:.22;animation-duration:8.2s}
.transformation-proof-r57{padding-top:18px}
.transformation-notes-r62{display:flex;flex-direction:column;gap:16px;margin-top:20px}
.transformation-chip-row-r62{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.transformation-chip-row-r62>span{padding:8px 12px;border-radius:999px;background:#fff;border:1px solid #e6e0f7;color:#4b5067;font-size:10px;font-weight:750;box-shadow:0 6px 18px rgba(79,70,229,.05)}
.transformation-cta-row-r62{display:flex;justify-content:center;width:100%}
.transformation-cta-r62{
  min-height:46px;padding:0 22px;border-radius:12px;border:1px solid transparent;
  box-shadow:0 14px 30px rgba(91,62,231,.20);font-weight:800;letter-spacing:-.01em;
}
.transformation-cta-r62 span{display:inline-block;margin-left:4px;transition:transform .25s ease}
.transformation-cta-r62:hover span{transform:translateX(3px)}
@media(max-width:900px){
  .transformation-stage-r57{padding:14px}
  .transformation-notes-r62{gap:14px}
  .transformation-cta-r62{width:auto;max-width:100%}
}


/* R63 — stronger top lighting in hero, and redesigned AutoFlow AI block in section 2. */
.hero-top-light-r63{
  position:absolute; right:7%; top:-8%; width:420px; height:270px; pointer-events:none; z-index:1;
  background:radial-gradient(ellipse at top, rgba(149,108,255,.42) 0%, rgba(118,85,255,.18) 28%, rgba(61,87,255,.09) 48%, transparent 72%);
  filter:blur(22px); opacity:.9; mix-blend-mode:screen; animation:afHeroTopLight63 8.8s ease-in-out infinite alternate;
}
.hero-social-lite-r62 .hero-top-light-r63{display:block}
@keyframes afHeroTopLight63{
  from{transform:translate3d(0,-10px,0) scale(.96); opacity:.52}
  to{transform:translate3d(-14px,20px,0) scale(1.06); opacity:.95}
}
.hero-social-lite-r62 .hero-glow-a{opacity:.62}
.hero-social-lite-r62 .hero-glow-b{opacity:.56}
.hero-social-lite-r62 .hero-light-sweep-a{opacity:.44; animation-duration:9.2s!important}
@media(max-width:980px){.hero-top-light-r63{display:none}}

.transformation-stage-r63{
  position:relative; margin:0 auto; max-width:1160px; padding:18px 18px 16px;
  border-radius:28px; background:rgba(255,255,255,.80); border:1px solid rgba(218,209,251,.95);
  box-shadow:0 28px 78px rgba(61,48,126,.12); backdrop-filter:blur(10px); overflow:hidden;
}
.transformation-stage-r63:before{
  content:""; position:absolute; inset:0 0 auto 0; height:140px; pointer-events:none;
  background:linear-gradient(180deg, rgba(122,86,255,.05), rgba(255,255,255,0));
}
.transform-body-r63{position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,.68fr) minmax(0,1.12fr); gap:18px; align-items:center}
.transform-kicker-r63{display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border-radius:999px; background:#f5f0ff; border:1px solid #e5dcff; color:#5b2bd8; font-size:10px; font-weight:900; letter-spacing:.8px; text-transform:uppercase}
.transform-kicker-r63:before{content:""; width:7px; height:7px; border-radius:50%; background:#7c3aed; box-shadow:0 0 0 5px rgba(124,58,237,.10)}
.transform-input-r63,.transform-output-r63{padding:10px}
.transform-input-r63 h3,.transform-output-r63 h3{margin:12px 0 14px; font:800 26px/1.08 "Manrope","Segoe UI",sans-serif; color:#161d3a; letter-spacing:-.04em}
.transform-input-photo-r63{padding:12px; border-radius:22px; background:linear-gradient(180deg,#fff,#faf7ff); border:1px solid #ebe4ff; box-shadow:0 14px 32px rgba(72,56,160,.07)}
.transform-input-photo-r63 img{display:block; width:100%; height:auto; border-radius:16px}
.transform-input-meta-r63{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px}
.transform-input-meta-r63>div{padding:14px 14px; border-radius:16px; background:#fff; border:1px solid #eee8ff; box-shadow:0 8px 18px rgba(72,56,160,.05)}
.transform-input-meta-r63 small{display:block; margin-bottom:6px; font-size:10px; font-weight:800; letter-spacing:.6px; color:#7c3aed; text-transform:uppercase}
.transform-input-meta-r63 strong{font-size:13px; color:#20253e}

.transform-engine-r63{position:relative; min-height:430px; display:grid; place-items:center}
.engine-top-beam-r63{position:absolute; top:-18px; left:50%; transform:translateX(-50%); width:120px; height:170px; pointer-events:none;
  background:linear-gradient(180deg, rgba(191,174,255,.95) 0%, rgba(163,125,255,.40) 32%, rgba(125,85,255,.10) 60%, transparent 100%);
  filter:blur(12px); opacity:.86;
}
.engine-halo-r63{position:absolute; inset:14% 10%; border-radius:34px; pointer-events:none;
  background:radial-gradient(circle at 50% 18%, rgba(175,143,255,.20), rgba(117,83,255,.14) 32%, rgba(94,110,255,.08) 52%, transparent 76%);
  filter:blur(26px); opacity:.9;
}
.engine-card-r63{position:relative; z-index:2; width:100%; max-width:270px; padding:18px 16px 16px; border-radius:28px;
  background:linear-gradient(180deg, rgba(31,24,84,.96), rgba(42,31,110,.96)); border:1px solid rgba(188,166,255,.24);
  box-shadow:0 24px 56px rgba(34,20,95,.34), inset 0 1px 0 rgba(255,255,255,.08);
}
.transform-kicker-engine-r63{background:rgba(255,255,255,.08); border-color:rgba(198,185,255,.22); color:#f2edff}
.transform-kicker-engine-r63:before{background:#ad8cff; box-shadow:0 0 0 5px rgba(173,140,255,.16)}
.engine-steps-r63{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:12px}
.engine-steps-r63 li{display:grid; grid-template-columns:38px 1fr; gap:12px; align-items:start; padding:10px 0}
.engine-steps-r63 li+li{border-top:1px solid rgba(255,255,255,.08)}
.engine-steps-r63 span{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#7c3aed,#9d7cff); color:#fff; font:800 11px/1 "Inter",sans-serif; box-shadow:0 10px 18px rgba(124,58,237,.28)}
.engine-steps-r63 strong{display:block; font-size:14px; color:#fff}
.engine-steps-r63 small{display:block; margin-top:4px; font-size:11px; line-height:1.5; color:#d9cffc}
.engine-side-link-r63{position:absolute; top:50%; width:48px; height:48px; transform:translateY(-50%); border-radius:50%; display:grid; place-items:center; background:#fff; border:1px solid #e7defd; box-shadow:0 10px 24px rgba(73,56,160,.10); color:#7c3aed; font-size:24px; font-weight:800; z-index:3}
.engine-side-left-r63{left:-6px}
.engine-side-right-r63{right:-6px}
.engine-side-link-r63:before{content:""; position:absolute; inset:-14px; border-radius:50%; background:radial-gradient(circle, rgba(153,117,255,.18) 0%, rgba(153,117,255,.07) 45%, transparent 72%); filter:blur(6px); z-index:-1}

.transform-output-grid-r63{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; align-items:end}
.output-card-r63{margin:0; padding:10px; border-radius:18px; background:#fff; border:1px solid #ebe4ff; box-shadow:0 14px 32px rgba(72,56,160,.07)}
.output-image-r63{overflow:hidden; border-radius:14px; background:#f8f6ff}
.output-image-r63 img{display:block; width:100%; height:100%; object-fit:cover}
.output-square-r63 .output-image-r63{aspect-ratio:1/1}
.output-portrait-r63 .output-image-r63{aspect-ratio:4/5}
.output-story-r63 .output-image-r63{aspect-ratio:9/16}
.output-card-r63 figcaption{display:flex; justify-content:space-between; align-items:flex-end; gap:8px; padding-top:9px}
.output-card-r63 strong{font:900 16px/1 "Manrope","Segoe UI",sans-serif; color:#111937}
.output-card-r63 span{font-size:10px; color:#7d8296; text-transform:uppercase; letter-spacing:.45px}
.transformation-proof-r63{padding-top:18px}

@media(max-width:1100px){
  .transform-body-r63{grid-template-columns:1fr; gap:18px}
  .transform-engine-r63{min-height:unset; padding:22px 0}
  .engine-side-left-r63,.engine-side-right-r63{display:none}
}
@media(max-width:760px){
  .transform-input-meta-r63{grid-template-columns:1fr}
  .transform-output-grid-r63{grid-template-columns:1fr}
  .transform-input-r63 h3,.transform-output-r63 h3{font-size:22px}
}


/* R64 — refine section 2 scale and move connector arrows fully outside the AI panel. */
.transform-body-r63{grid-template-columns:minmax(0,.96fr) minmax(220px,.62fr) minmax(0,1.06fr);gap:32px;align-items:center}
.transform-input-r63{padding-right:4px}
.transform-input-photo-r63{
  min-height:430px;padding:16px 18px;display:grid;place-items:center;
  background:linear-gradient(180deg,#fff,#fcfbff);
}
.transform-input-photo-r63 img{
  width:auto;height:auto;max-width:76%;max-height:360px;object-fit:contain;
  margin-inline:auto;filter:contrast(1.04) saturate(1.02) sharpness(1.02);
}
.transform-input-meta-r63{margin-top:16px}
.transform-engine-r63{min-height:408px}
.engine-card-r63{max-width:254px;padding:18px 15px 16px}
.engine-side-link-r63{
  width:52px;height:52px;top:50%;background:rgba(255,255,255,.96);
  box-shadow:0 14px 28px rgba(73,56,160,.12);z-index:4;
}
.engine-side-left-r63{left:-46px}
.engine-side-right-r63{right:-46px}
.engine-side-link-r63:after{
  content:"";position:absolute;top:50%;width:34px;height:1px;background:linear-gradient(90deg,rgba(187,173,244,.0),rgba(187,173,244,.9));
}
.engine-side-left-r63:after{left:100%}
.engine-side-right-r63:after{right:100%;background:linear-gradient(90deg,rgba(187,173,244,.9),rgba(187,173,244,.0))}
.engine-halo-r63{inset:16% 12%;filter:blur(22px);opacity:.72}
.engine-top-beam-r63{width:110px;height:156px;opacity:.72;filter:blur(14px)}
.transform-output-r63{padding-left:2px}
.transform-output-grid-r63{gap:14px}
.output-card-r63{padding:9px}
.output-card-r63 figcaption{padding-top:10px}
@media(max-width:1200px){
  .transform-body-r63{gap:26px}
  .engine-side-left-r63{left:-38px}
  .engine-side-right-r63{right:-38px}
}
@media(max-width:1100px){
  .transform-input-photo-r63{min-height:unset}
  .transform-input-photo-r63 img{max-width:68%;max-height:320px}
}


/* R66 — Section 2 proportion polish only. Preserve R65 assets and structure. */
.transformation-r57{
  padding-top:68px;
  padding-bottom:78px;
}
.transformation-head-r57{
  margin-bottom:26px;
}
.transformation-stage-r63{
  max-width:1200px;
  padding:16px 16px 15px;
}
.transform-body-r63{
  grid-template-columns:minmax(0,.82fr) minmax(225px,.62fr) minmax(0,1.42fr);
  gap:24px;
  align-items:center;
}

/* Input: larger product presence, smaller empty frame. */
.transform-input-r63{
  padding:8px 0 8px 4px;
}
.transform-input-r63 h3{
  margin:11px 0 12px;
  font-size:24px;
}
.transform-input-photo-r63{
  min-height:355px;
  padding:12px 14px;
  border-radius:20px;
}
.transform-input-photo-r63 img{
  max-width:90%;
  max-height:330px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.transform-input-meta-r63{
  gap:10px;
  margin-top:12px;
}
.transform-input-meta-r63>div{
  padding:12px 13px;
  border-radius:14px;
}

/* AI remains the visual bridge, slightly narrower so output gets more proof space. */
.transform-engine-r63{
  min-height:390px;
}
.engine-card-r63{
  max-width:242px;
  padding:17px 14px 15px;
}
.engine-steps-r63{
  gap:8px;
}
.engine-steps-r63 li{
  padding:9px 0;
}
.engine-side-link-r63{
  width:48px;
  height:48px;
}
.engine-side-left-r63{left:-38px}
.engine-side-right-r63{right:-38px}

/* Output: make the actual campaign assets the strongest visual proof. */
.transform-output-r63{
  padding:8px 2px 8px 0;
  min-width:0;
}
.transform-output-r63 h3{
  margin:11px 0 14px;
  font-size:25px;
  max-width:470px;
}
.transform-output-grid-r63{
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  gap:12px;
  width:100%;
}
.output-card-r63{
  padding:9px;
  border-radius:18px;
  flex:0 0 auto;
  box-shadow:0 16px 36px rgba(72,56,160,.09);
}
.output-square-r63{width:29%}
.output-portrait-r63{width:32%}
.output-story-r63{width:29%}
.output-image-r63{
  border-radius:13px;
}
.output-card-r63 figcaption{
  padding-top:9px;
  gap:6px;
}
.output-card-r63 strong{
  font-size:17px;
}
.output-card-r63 span{
  font-size:9px;
  letter-spacing:.35px;
}
.transformation-proof-r63{
  padding-top:14px;
  gap:12px;
}

@media(max-width:1200px){
  .transform-body-r63{
    grid-template-columns:minmax(0,.84fr) minmax(215px,.60fr) minmax(0,1.34fr);
    gap:22px;
  }
  .engine-side-left-r63{left:-34px}
  .engine-side-right-r63{right:-34px}
}
@media(max-width:1100px){
  .transform-body-r63{grid-template-columns:1fr;gap:18px}
  .transform-input-photo-r63{min-height:unset}
  .transform-input-photo-r63 img{max-width:72%;max-height:330px}
  .transform-engine-r63{min-height:unset;padding:20px 0}
  .transform-output-r63{padding-top:4px}
  .transform-output-grid-r63{justify-content:center;max-width:720px;margin-inline:auto}
  .output-square-r63{width:27%}
  .output-portrait-r63{width:29%}
  .output-story-r63{width:25%}
}
@media(max-width:760px){
  .transformation-r57{padding-top:58px;padding-bottom:66px}
  .transform-output-grid-r63{display:grid;grid-template-columns:1fr;gap:14px}
  .output-square-r63,.output-portrait-r63,.output-story-r63{width:100%}
}

/* R67 — Homepage final polish. Hero intentionally untouched. */

/* Coffee transformation: tighter, more connected, same R66 asset scale. */
.transformation-r57{
  padding-top:62px;
  padding-bottom:70px;
}
.transformation-head-r57{
  margin-bottom:22px;
}
.transformation-stage-r63{
  padding:14px 15px 14px;
}
.transform-body-r63{
  grid-template-columns:minmax(0,.84fr) minmax(225px,.62fr) minmax(0,1.42fr);
  gap:18px;
  align-items:center;
}
.transform-input-r63,
.transform-output-r63{
  align-self:center;
}
.transform-engine-r63{
  min-height:374px;
  align-self:center;
}
.engine-card-r63{
  margin-block:auto;
}
.engine-side-link-r63{
  top:50%;
}
.engine-side-left-r63{left:-31px}
.engine-side-right-r63{right:-31px}
.transformation-proof-r63{
  padding-top:12px;
}
.transformation-notes-r62{
  margin-top:16px;
}

/* Founding Pilot: connect offer explanation and price card, reduce empty field. */
#pilot.section{
  padding-top:68px;
  padding-bottom:36px;
}
#pilot .pilot-grid{
  grid-template-columns:minmax(0,1fr) 410px;
  gap:48px;
  align-items:start;
  max-width:1180px;
}
#pilot .pilot-copy{
  padding-top:8px;
}
#pilot .pilot-copy h2{
  max-width:720px;
  margin-bottom:12px;
}
#pilot .pilot-copy>p{
  max-width:720px;
  line-height:1.65;
}
#pilot .pilot-stats{
  gap:12px;
  margin:22px 0 20px;
}
#pilot .pilot-stats>div{
  padding:15px 15px 14px;
}
#pilot .pilot-note{
  max-width:100%;
}
#pilot .price-card{
  padding:22px 24px 20px;
  align-self:start;
}
#pilot .price{
  margin:17px 0 5px;
}
#pilot .price-card ul{
  margin-bottom:16px;
}
#pilot .price-card li{
  padding-top:9px;
  padding-bottom:9px;
}
#pilot .price-card .button-large{
  min-height:48px;
}

/* FAQ follows the offer as the next decision step instead of a separate page-like block. */
.faq-section{
  padding-top:24px;
  padding-bottom:70px;
}
.faq-grid{
  grid-template-columns:.66fr 1.34fr;
  gap:58px;
  align-items:start;
  max-width:1180px;
}
.faq-grid>div:first-child{
  padding-top:8px;
}
.faq-grid>div:first-child h2{
  margin-top:10px;
  font-size:30px;
}
.faq-list details{
  padding:14px 0;
}
.faq-list summary{
  line-height:1.45;
}
.faq-list p{
  margin-top:8px;
  line-height:1.6;
}

@media(max-width:1100px){
  .transform-body-r63{
    grid-template-columns:1fr;
    gap:16px;
  }
  #pilot .pilot-grid,
  .faq-grid{
    grid-template-columns:1fr;
  }
  #pilot .pilot-grid{gap:34px}
  .faq-grid{gap:28px}
  #pilot .price-card{max-width:620px;width:100%}
}

@media(max-width:760px){
  .transformation-r57{padding-top:56px;padding-bottom:62px}
  #pilot.section{padding-top:58px;padding-bottom:30px}
  .faq-section{padding-top:20px;padding-bottom:58px}
  #pilot .pilot-stats{grid-template-columns:repeat(2,1fr)}
}