:root{--purple:#6530ef;--purple-dark:#100322;--line:#e5e2ef;--soft:#faf8ff}
body{background:#eef0f4}
.canvas{height:auto;min-height:1844px;padding-bottom:126px;overflow:visible}
.hero{background:radial-gradient(circle at 80% 36%,#2c0862 0,#130326 51%,#080114 100%)}
.hero.compact{height:400px;padding-top:28px}
.hero.compact .hero-copy{width:62%}
.hero.compact h1{margin-top:27px;font-size:40px}
.hero.compact p{font-size:16px;line-height:1.55}
.hero.compact .hero-art{right:0;bottom:0;width:410px;height:330px;object-fit:contain}
.hero-pills b{display:inline-flex;align-items:center;gap:7px}
.hero-pills svg{width:18px;height:18px}
.quick-nav{height:96px;margin:-46px 0 24px}
.quick-nav a{gap:9px;font-size:12px}
.quick-nav svg{width:30px;height:30px;stroke:var(--purple);stroke-width:1.8}
.quick-nav a.active{background:#f5f0ff;color:var(--purple)}
.quick-nav i{display:none}
.section-title{margin-top:0}
.faq{padding-bottom:22px}
.faq-grid{grid-template-columns:1fr 1fr}
.faq details{background:#fbfbfd}
.bottom-nav{height:88px}

/* Home */
body[data-page="home"] .hero.hero-home{height:465px}
body[data-page="home"] .hero-copy{width:52%}
body[data-page="home"] .hero.hero-home .hero-art{right:0;top:0;bottom:auto;width:422px;height:460px;object-fit:cover}
body[data-page="home"] .hero.hero-home h1{font-size:46px}
body[data-page="home"] .badge{display:inline-flex;align-items:center;gap:8px}
body[data-page="home"] .badge svg{width:18px;height:18px}
body[data-page="home"] .home-rating-row{display:flex;gap:14px;align-items:stretch;margin:18px 0}
body[data-page="home"] .home-rating-row .rating{box-sizing:border-box;margin:0;width:195px;height:66px;display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr 1fr;align-items:center;padding:10px 12px}
body[data-page="home"] .rating span{color:var(--gold);font-size:20px;letter-spacing:1px}
body[data-page="home"] .rating b{font-size:16px}
body[data-page="home"] .rating small{grid-column:1/3;margin:0;color:#ddd;font-size:11px}
body[data-page="home"] .verified-card{box-sizing:border-box;width:125px;border:1px solid #503076;border-radius:9px;display:flex;align-items:center;gap:10px;padding:10px 12px}
body[data-page="home"] .verified-card svg{width:30px;height:30px;color:#a77aff;stroke-width:1.8}
body[data-page="home"] .verified-card b{font-size:13px;line-height:1.35}
body[data-page="home"] .hero-pills b{display:inline-flex;align-items:center;gap:5px}
body[data-page="home"] .hero-pills svg{width:15px;height:15px}
body[data-page="home"] .quick-nav{margin-top:-45px}
body[data-page="home"] .welcome{height:170px}
body[data-page="home"] .welcome img{width:250px;height:170px}
body[data-page="home"] .summary-card{min-height:270px}
body[data-page="home"] .tri-grid article{min-height:205px}
body[data-page="home"] .explore a{height:215px}

/* Reviews */
body[data-page="reviews"] .hero{height:400px}
body[data-page="reviews"] .hero .hero-art{display:none}
body[data-page="reviews"] .hero::after{
  content:"";
  position:absolute;
  z-index:1;
  top:0;
  right:0;
  width:350px;
  height:330px;
  background:url("public/assets/source-300ui/reviews-board.png") right 0 top -81px/853px 1846px no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 72px,#000 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 72px,#000 100%);
}
body[data-page="reviews"] .hero-copy{width:500px}
body[data-page="reviews"] .hero.compact h1{margin-top:27px;font-size:40px;white-space:nowrap}
body[data-page="reviews"] .hero.compact p{width:490px}
body[data-page="reviews"] .hero-pills{gap:22px}
body[data-page="reviews"] .hero-pills b{padding:0;background:transparent}
body[data-page="reviews"] .hero .primary{margin-right:8px}
body[data-page="reviews"] .responsible-note{display:block;margin-top:18px;font-size:12px;color:#d7d0e3}
body[data-page="reviews"] .review-layout{grid-template-columns:168px 1fr;gap:22px}
body[data-page="reviews"] .review-side{display:flex;flex-direction:column;gap:20px}
body[data-page="reviews"] .review-layout aside{padding:0;overflow:hidden;background:#fff}
body[data-page="reviews"] .review-layout aside>b{display:block;padding:15px 15px 10px;font-size:16px}
body[data-page="reviews"] .review-layout aside a{padding:9px 15px;font-size:12px}
body[data-page="reviews"] .review-layout aside a.active{border-left:3px solid var(--purple);background:#f4efff;color:var(--purple);font-weight:800}
body[data-page="reviews"] .rate-box{padding:18px;border:1px solid var(--line);border-radius:10px;text-align:center}
body[data-page="reviews"] .rate-box h3{margin:0 0 15px;font-size:15px}
body[data-page="reviews"] .rate-stars{font-size:26px;color:#c6b6ff;letter-spacing:2px}
body[data-page="reviews"] .rate-box p{font-size:11px;line-height:1.45}
body[data-page="reviews"] .rate-box button{width:100%;height:39px;border:0;border-radius:5px;background:var(--purple);color:#fff;font-weight:800}
body[data-page="reviews"] .summary-card.single{position:relative;padding:25px 22px 0}
body[data-page="reviews"] .summary-card.single h2{margin:0 0 10px;font-size:20px}
body[data-page="reviews"] .summary-card.single>p{width:70%;font-size:13px}
body[data-page="reviews"] .review-badge{position:absolute;right:25px;top:20px;width:120px;height:122px;object-fit:contain}
body[data-page="reviews"] .summary-card.single .score-table{margin:26px 0 0;grid-template-columns:1fr 1fr}
body[data-page="reviews"] .summary-meta{margin:0 -22px;display:grid;grid-template-columns:repeat(4,1fr);padding:16px 22px;border-top:1px solid var(--line);background:#faf9ff}
body[data-page="reviews"] .summary-meta span{font-size:11px}
body[data-page="reviews"] .summary-meta svg{width:16px;height:16px;vertical-align:middle;margin-right:5px;color:#55506d}
body[data-page="reviews"] .pros-cons{grid-template-columns:1fr 1fr;gap:14px}
body[data-page="reviews"] .pros-cons article{min-height:225px}
body[data-page="reviews"] .pros-cons p{font-size:12px}
body[data-page="reviews"] .detail-wrap{display:grid;grid-template-columns:1fr 235px;gap:20px;width:765px;margin:38px 0 0 -190px}
body[data-page="reviews"] .detail-list{margin:0}
body[data-page="reviews"] .detail-list h2{font-size:22px}
body[data-page="reviews"] .detail-list article{min-height:118px;margin-bottom:10px;grid-template-columns:58px 1fr 68px}
body[data-page="reviews"] .detail-list article>div p{font-size:12px;line-height:1.4}
body[data-page="reviews"] .detail-list svg{width:42px;height:42px;padding:9px;border-radius:8px;background:#f1ebff;color:var(--purple)}
body[data-page="reviews"] .quick-card{align-self:start;border:1px solid var(--line);border-radius:10px;overflow:hidden}
body[data-page="reviews"] .quick-card img{width:100%;height:122px;object-fit:cover}
body[data-page="reviews"] .quick-card h3{margin:12px 15px 8px}
body[data-page="reviews"] .quick-card p{margin:7px 15px;display:flex;justify-content:space-between;font-size:10px}
body[data-page="reviews"] .quick-card a{margin:12px 15px 15px;display:grid;height:40px;place-items:center;border-radius:6px;background:var(--purple);color:#fff;text-decoration:none;font-weight:800}
body[data-page="reviews"] .claim-strip{height:94px;grid-template-columns:1fr 1.3fr 185px;background:#13042c;color:#fff}

/* Bonus */
body[data-page="bonus"] .hero{height:342px}
body[data-page="bonus"] .hero-copy{width:390px}
body[data-page="bonus"] .hero.compact h1{margin-top:20px;font-size:38px;white-space:nowrap}
body[data-page="bonus"] .hero.compact p{width:360px}
body[data-page="bonus"] .hero .hero-art{display:none}
body[data-page="bonus"] .hero.bonus-hero::after{
  content:"";
  position:absolute;
  z-index:1;
  top:0;
  right:0;
  width:430px;
  height:342px;
  background-image:url("public/assets/source-300ui/bonus-board.png");
  background-repeat:no-repeat;
  background-size:853px 1846px;
  background-position:right 0 top -81px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 72px,#000 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 72px,#000 100%);
}
body[data-page="bonus"] .hero-pills{width:390px;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
body[data-page="bonus"] .hero-pills b{padding:0;background:transparent}
body[data-page="bonus"] .quick-nav{margin-top:-45px}
body[data-page="bonus"] .offers article{min-height:115px;grid-template-columns:95px 1fr 120px 130px}
body[data-page="bonus"] .offer-rank{display:grid;width:30px;height:32px;place-items:center;border-radius:5px;background:#f4f2f7;font-weight:800}
body[data-page="bonus"] .offers article img{width:92px;height:82px;border-radius:8px;object-fit:cover}
body[data-page="bonus"] .offers article h3{font-size:18px}
body[data-page="bonus"] .offers article strong{font-size:17px}
body[data-page="bonus"] .trust-title{text-align:center;margin:26px 0 12px}
body[data-page="bonus"] .trust-row{margin-top:0;background:#faf7ff}
body[data-page="bonus"] .trust-row svg{width:36px;height:36px;color:var(--purple)}
body[data-page="bonus"] .trust-row i{display:none}
body[data-page="bonus"] .guides img{height:108px}

/* App */
body[data-page="app"] .hero.app-hero{height:585px}
body[data-page="app"] .hero-copy{width:425px}
body[data-page="app"] .hero.app-hero .hero-art{display:none}
body[data-page="app"] .hero.app-hero::after{
  content:"";
  position:absolute;
  z-index:1;
  top:0;
  right:0;
  width:430px;
  height:540px;
  background:url("public/assets/source-300ui/app-board.png") right 0 top -81px/853px 1846px no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 72px,#000 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 72px,#000 100%);
}
body[data-page="app"] .hero.app-hero h1{font-size:42px}
body[data-page="app"] .hero.app-hero p{width:360px}
body[data-page="app"] .hero-pills{display:grid;grid-template-columns:repeat(4,82px);gap:18px;margin:20px 0}
body[data-page="app"] .hero-pills b{padding:0;background:transparent;display:grid;grid-template-rows:42px auto auto;justify-items:start;align-items:start;line-height:1.2}
body[data-page="app"] .hero-pills b>svg{width:38px;height:38px;padding:8px;border-radius:50%;background:#35105f}
body[data-page="app"] .hero-pills b>small{display:block;margin-top:5px;color:#ddd;font-size:10px;font-weight:400;line-height:1.3}
body[data-page="app"] .download-buttons{gap:14px;margin-top:16px}
body[data-page="app"] .download-buttons a{box-sizing:border-box;height:84px!important;min-width:180px;padding:12px 14px!important;display:flex!important;grid-template:none!important;justify-content:flex-start;gap:12px;background:linear-gradient(135deg,#7040fa,#4012c0)!important;color:#fff!important;border:1px solid #784eff;font-size:12px}
body[data-page="app"] .download-buttons a:nth-child(2){background:#130426!important}
body[data-page="app"] .download-buttons svg{width:38px;height:38px}
body[data-page="app"] .download-buttons span,body[data-page="app"] .download-buttons small{display:block}
body[data-page="app"] .download-buttons b{font-size:17px}
body[data-page="app"] .quick-nav{margin-top:-47px}
body[data-page="app"] .feature-grid h2,body[data-page="app"] .app-preview h2,body[data-page="app"] .install h2{text-align:center}
body[data-page="app"] .feature-grid article{height:145px;padding:16px 12px}
body[data-page="app"] .feature-grid svg{width:40px;height:40px;color:var(--purple)}
body[data-page="app"] .feature-grid i{display:none}
body[data-page="app"] .app-preview img{width:128px;height:313px;object-fit:contain}
body[data-page="app"] .install article{height:132px}
body[data-page="app"] .install article{position:relative;padding:22px 18px 18px 58px}
body[data-page="app"] .install article i{position:absolute;left:18px;top:22px}
body[data-page="app"] .install article>.step-icon{display:block;height:28px;margin-bottom:4px}
body[data-page="app"] .install article>.step-icon i{position:static;float:none;width:26px;height:26px;margin:0;padding:3px;border-radius:5px;background:#f1ebff;color:var(--purple)}
body[data-page="app"] .safe-strip{height:72px;grid-template-columns:180px 1fr;background:#faf7ff}

/* More */
body[data-page="more"] .hero.more-hero{height:320px}
body[data-page="more"] .hero-copy{width:55%}
body[data-page="more"] .hero.more-hero h1{font-size:42px}
body[data-page="more"] .hero.more-hero .hero-art{display:none}
body[data-page="more"] .hero.more-hero::after{
  content:"";
  position:absolute;
  z-index:1;
  top:0;
  right:0;
  width:390px;
  height:212px;
  background:url("public/assets/source-300ui/more-board.png") right 0 top -81px/853px 1846px no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 72px,#000 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 72px,#000 100%);
}
body[data-page="more"] .quick-nav{margin-top:-105px;background:rgba(15,3,35,.75);border-color:#4f356d;box-shadow:none}
body[data-page="more"] .quick-nav a{color:#fff}
body[data-page="more"] .quick-nav svg{stroke:#fff}
body[data-page="more"] .quick-nav a.active{background:#2b0c61;color:#fff}
body[data-page="more"] .about-more{margin-top:10px}
body[data-page="more"] .about-more article{position:relative;height:235px;padding:26px 180px 54px 24px;background:#fff;overflow:hidden}
body[data-page="more"] .about-more article img{position:absolute;right:8px;bottom:5px;width:165px;height:190px;object-fit:contain}
body[data-page="more"] .about-more h2{font-size:21px}
body[data-page="more"] .about-more p{width:165px;font-size:12px;line-height:1.4}
body[data-page="more"] .about-more article>a{position:absolute;left:24px;bottom:20px;white-space:nowrap;font-size:14px}
body[data-page="more"] .stats{border:0;gap:14px}
body[data-page="more"] .stats article{min-height:90px;display:grid;grid-template-columns:44px 1fr;grid-template-rows:1fr 1fr;text-align:left;border:1px solid var(--line);border-radius:10px}
body[data-page="more"] .stats svg{grid-row:1/3;width:38px;height:38px;padding:8px;background:#f0eaff;color:var(--purple);border-radius:8px}
body[data-page="more"] .stats b{font-size:20px}
body[data-page="more"] .more-guides article{min-height:255px}
body[data-page="more"] .more-guides img{height:125px;object-fit:none}
body[data-page="more"] .more-guides article:nth-child(1) img{object-position:left -41px top -815px}
body[data-page="more"] .more-guides article:nth-child(2) img{object-position:left -236px top -815px}
body[data-page="more"] .more-guides article:nth-child(3) img{object-position:left -433px top -815px}
body[data-page="more"] .more-guides article:nth-child(4) img{object-position:left -629px top -815px}
body[data-page="more"] .more-guides .guide-copy{margin:4px 10px;font-size:10px;line-height:1.35;color:var(--muted)}
body[data-page="more"] .responsible-title{margin:28px 0 10px;font-size:21px}
body[data-page="more"] .responsible{height:105px;margin-top:0;grid-template-columns:70px 150px 1fr 150px}
body[data-page="more"] .responsible>svg{width:54px;height:54px;color:var(--purple)}
body[data-page="more"] .newsletter{height:95px;padding:18px 8px;border:0;grid-template-columns:1fr 360px}
body[data-page="more"] .newsletter>div{display:flex;flex-direction:column;gap:10px}
body[data-page="more"] .newsletter>div>b{font-size:20px}
body[data-page="more"] .newsletter>div>span{font-size:12px}
body[data-page="more"] .site-footer{height:265px;padding:25px 44px 18px;background:linear-gradient(115deg,#090019,#160735 58%,#090019)}
body[data-page="more"] .site-footer .footer-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr .9fr;gap:34px}
body[data-page="more"] .site-footer .footer-grid>section{display:flex;flex-direction:column;gap:9px}
body[data-page="more"] .site-footer .footer-grid b{font-size:13px}
body[data-page="more"] .site-footer .footer-grid a{font-size:11px}
body[data-page="more"] .site-footer .footer-brand strong{font-size:25px}
body[data-page="more"] .site-footer .footer-brand>small{font-size:9px;margin-top:-7px}
body[data-page="more"] .site-footer .footer-social{display:flex;gap:12px;margin-top:14px}
body[data-page="more"] .site-footer .footer-social a{width:36px;height:36px;border:1px solid #463568;border-radius:50%;display:grid;place-items:center;font-size:15px}
body[data-page="more"] .site-footer .footer-legal{margin-top:18px;padding-top:13px;border-top:1px solid #392952;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10px}

/* Frozen interaction layer: behavior only, no base-layout redesign. */
.ui-layer{position:relative;z-index:100}
.ui-backdrop{position:fixed;inset:0;background:rgba(7,1,20,.58);opacity:0;pointer-events:none;transition:opacity .18s ease}
.ui-drawer,.ui-search-panel,.ui-register-panel{position:fixed;z-index:101;background:#fff;border:1px solid #ddd5f7;box-shadow:0 18px 50px rgba(16,4,45,.25);opacity:0;pointer-events:none;transition:transform .2s ease,opacity .2s ease}
.ui-drawer{left:0;top:0;width:285px;height:100vh;padding:80px 28px 28px;transform:translateX(-100%);display:flex;flex-direction:column;gap:8px}
.ui-drawer>b{font-size:22px;margin-bottom:14px}
.ui-drawer>a{padding:13px;border-radius:8px;color:#171029;text-decoration:none;font-weight:700}
.ui-drawer>a:hover,.ui-drawer>a:focus-visible{background:#f3edff;color:#6930e9}
.ui-search-panel,.ui-register-panel{left:50%;top:110px;width:500px;padding:28px;border-radius:14px;transform:translate(-50%,-15px)}
.ui-search-panel>label,.ui-register-panel>b{display:block;margin-bottom:16px;font-size:20px;font-weight:800}
.ui-search-panel>div{display:flex}
.ui-search-panel input,.ui-register-panel input{height:44px;border:1px solid #d9d3e7;padding:0 12px;font:inherit}
.ui-search-panel input{flex:1}
.ui-search-panel div button,.ui-register-submit{height:44px;padding:0 22px;border:0;background:#6d35ee;color:#fff;font-weight:800}
.ui-register-panel label{display:flex;flex-direction:column;gap:8px;margin-bottom:15px}
.ui-register-panel input{width:100%}
.ui-close{position:absolute;right:15px;top:12px;border:0;background:none;font-size:28px}
.menu-open .ui-backdrop,.search-open .ui-backdrop,.register-open .ui-backdrop{opacity:1;pointer-events:auto}
.menu-open .ui-drawer{opacity:1;pointer-events:auto;transform:translateX(0)}
.search-open .ui-search-panel,.register-open .ui-register-panel{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.ui-toast{position:fixed;z-index:110;left:50%;bottom:110px;transform:translate(-50%,20px);padding:12px 18px;border-radius:999px;background:#160735;color:#fff;opacity:0;pointer-events:none;transition:.18s ease;font-weight:700}
.ui-toast.show{opacity:1;transform:translate(-50%,0)}
.offers article button.selected{background:#18854d}
.submitted button{background:#18854d}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #a98bff;outline-offset:2px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

body[data-page="reviews"] .hero .hero-art,
body[data-page="bonus"] .hero .hero-art,
body[data-page="app"] .hero .hero-art,
body[data-page="more"] .hero .hero-art{
  -webkit-mask-image:radial-gradient(ellipse 76% 82% at 58% 54%,#000 64%,rgba(0,0,0,.92) 75%,transparent 100%);
  mask-image:radial-gradient(ellipse 76% 82% at 58% 54%,#000 64%,rgba(0,0,0,.92) 75%,transparent 100%);
}

/* Manual-review shared fixes: readable header actions and floating navigation. */
.canvas{padding-bottom:132px}
.site-header{padding-right:36px}
.site-header .register{box-shadow:0 7px 18px rgba(101,48,239,.3)}
.bottom-nav{
  left:17px;
  right:17px;
  bottom:14px;
  width:auto;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 10px 28px rgba(17,8,50,.16);
}
.bottom-nav svg{width:38px;height:38px}