/* =========================================================
   MAGICREVIEW FRONTEND
   Google-inspired, not a Google-branded clone.
========================================================= */

:root {
    --blue:#4285f4;
    --blue-dark:#1a73e8;
    --blue-soft:#e8f0fe;
    --green:#34a853;
    --green-soft:#e6f4ea;
    --yellow:#fbbc04;
    --yellow-soft:#fef7e0;
    --red:#ea4335;
    --red-soft:#fce8e6;
    --ink:#202124;
    --muted:#5f6368;
    --line:#dadce0;
    --soft:#f8fafd;
    --white:#fff;
    --shadow:0 14px 45px rgba(60,64,67,.10);
    --shadow-xl:0 30px 90px rgba(60,64,67,.16);
    --radius:24px;
    --shell:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    color:var(--ink);
    background:#fff;
    font-family:Inter,Arial,sans-serif;
    overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.shell{width:min(var(--shell),calc(100% - 40px));margin:auto}
.section{padding:110px 0}
.kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 13px;
    border-radius:999px;
    color:var(--blue-dark);
    background:var(--blue-soft);
    font-size:12px;
    font-weight:800;
    letter-spacing:.2px;
}
.kicker:before{
    content:"";
    width:7px;height:7px;border-radius:50%;background:var(--blue)
}
.section-title{
    margin:18px 0 0;
    max-width:800px;
    font-family:"Google Sans",Inter,sans-serif;
    font-size:clamp(38px,5vw,62px);
    line-height:1.04;
    letter-spacing:-2.8px;
}
.section-title .blue{color:var(--blue)}
.section-title .green{color:var(--green)}
.section-copy{
    max-width:680px;
    margin:20px 0 0;
    color:var(--muted);
    font-size:17px;
    line-height:1.75;
}

/* Header */
.site-header{
    position:fixed;z-index:1000;top:0;left:0;right:0;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(218,220,224,.7);
}
.nav-shell{height:74px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.brand{
    display:inline-flex;align-items:center;gap:10px;
    font-family:"Google Sans",Inter,sans-serif;
    font-weight:700;font-size:22px;letter-spacing:-.8px;
    white-space:nowrap
}
.brand-mark{
    position:relative;width:36px;height:36px;border-radius:11px;
    display:grid;place-items:center;background:#fff;
    box-shadow:0 6px 20px rgba(66,133,244,.18);overflow:hidden
}
.brand-mark:before{
    content:"";position:absolute;width:31px;height:31px;border:5px solid var(--blue);
    border-top-color:var(--red);border-right-color:var(--yellow);border-bottom-color:var(--green);
    border-radius:50%
}
.brand-mark i{position:relative;width:10px;height:10px;background:#fff;border-radius:50%;z-index:2}
.desktop-nav{display:flex;gap:28px;align-items:center;margin-left:auto}
.desktop-nav a{font-size:13px;font-weight:700;color:#3c4043;transition:.2s}
.desktop-nav a:hover{color:var(--blue-dark)}
.nav-actions{display:flex;gap:10px;align-items:center}
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:48px;padding:0 21px;border-radius:999px;border:1px solid transparent;
    font-size:13px;font-weight:800;cursor:pointer;transition:.2s ease
}
.btn:hover{transform:translateY(-2px)}
.btn-small{min-height:42px;padding:0 17px}
.btn-blue{color:#fff;background:var(--blue);box-shadow:0 8px 22px rgba(66,133,244,.24)}
.btn-blue:hover{background:var(--blue-dark);box-shadow:0 12px 30px rgba(66,133,244,.3)}
.btn-ghost{background:#fff;border-color:var(--line);color:#3c4043}
.btn-ghost:hover{box-shadow:var(--shadow)}
.mobile-toggle{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:#fff;padding:10px;cursor:pointer}
.mobile-toggle span{display:block;height:2px;background:#3c4043;margin:4px 0;border-radius:4px}
.mobile-nav{display:none}

/* Hero */
.hero{
    padding:160px 0 100px;
    background:
      radial-gradient(circle at 8% 18%,rgba(66,133,244,.11),transparent 26%),
      radial-gradient(circle at 92% 12%,rgba(52,168,83,.08),transparent 24%),
      radial-gradient(circle at 70% 80%,rgba(251,188,4,.07),transparent 25%);
}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:65px;align-items:center}
.hero h1{
    margin:22px 0 0;
    max-width:740px;
    font-family:"Google Sans",Inter,sans-serif;
    font-size:clamp(50px,6vw,78px);
    line-height:.97;letter-spacing:-4.5px
}
.hero h1 .blue{color:var(--blue)}
.hero-copy{max-width:650px;color:var(--muted);font-size:18px;line-height:1.75;margin:26px 0 0}
.hero-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:32px}
.hero-trust{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:22px;color:var(--muted);font-size:12px}
.trust-item{display:flex;align-items:center;gap:8px}
.check{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:var(--green-soft);color:var(--green);font-weight:900}
.google-dots{display:flex;gap:4px}
.google-dots i{width:7px;height:7px;border-radius:50%}
.google-dots i:nth-child(1){background:var(--blue)}
.google-dots i:nth-child(2){background:var(--red)}
.google-dots i:nth-child(3){background:var(--yellow)}
.google-dots i:nth-child(4){background:var(--green)}

/* Hero product visual */
.hero-stage{position:relative;min-height:575px;display:grid;place-items:center}
.hero-stage:before{
    content:"";position:absolute;width:480px;height:480px;border-radius:50%;
    background:radial-gradient(circle,rgba(66,133,244,.16),rgba(66,133,244,.02) 55%,transparent 70%)
}
.phone{
    position:relative;z-index:3;width:300px;height:550px;padding:10px;border-radius:40px;
    background:linear-gradient(145deg,#202124,#4a4d50);box-shadow:var(--shadow-xl);
    transform:rotate(3deg)
}
.phone-screen{height:100%;border-radius:31px;overflow:hidden;background:#fff}
.phone-notch{height:27px;display:flex;justify-content:center}
.phone-notch i{width:86px;height:19px;background:#202124;border-radius:0 0 15px 15px}
.review-ui{padding:18px 20px}
.review-logo{
    width:46px;height:46px;border-radius:14px;background:var(--blue-soft);color:var(--blue);
    display:grid;place-items:center;margin:12px auto 17px;font-weight:900;font-size:21px
}
.review-ui h3{font-family:"Google Sans";text-align:center;font-size:22px;margin:0}
.review-ui p{text-align:center;color:var(--muted);font-size:11px;line-height:1.6;margin:7px 0 20px}
.rating-row{display:flex;justify-content:center;gap:7px}
.rating-star{
    width:39px;height:39px;border-radius:11px;border:1px solid #e7e9ed;background:#fafbfc;
    display:grid;place-items:center;color:#fbbc04;cursor:pointer;transition:.2s
}
.rating-star.active,.rating-star:hover{background:var(--yellow-soft);border-color:var(--yellow);transform:translateY(-3px)}
.suggestion{
    padding:11px 12px;margin-top:9px;border:1px solid #e8eaed;border-radius:12px;
    color:#3c4043;font-size:10px;line-height:1.5;cursor:pointer
}
.suggestion.active,.suggestion:hover{border-color:var(--blue);background:var(--blue-soft)}
.phone-cta{
    width:100%;margin-top:10px;padding:12px;border:0;border-radius:999px;
    background:var(--blue);color:#fff;font-weight:800;font-size:11px
}
.float-card{
    position:absolute;z-index:6;background:rgba(255,255,255,.95);backdrop-filter:blur(15px);
    border:1px solid rgba(218,220,224,.8);box-shadow:var(--shadow);border-radius:18px;padding:16px
}
.float-rating{left:0;top:78px;width:168px;animation:floatA 5s ease-in-out infinite}
.float-qr{right:0;bottom:80px;width:188px;animation:floatB 5.5s ease-in-out infinite}
.float-label{font-size:10px;color:var(--muted)}
.float-rating strong{display:block;font:700 34px "Google Sans";margin-top:3px}
.stars{color:#fbbc04;letter-spacing:2px}
.qr-box{display:flex;align-items:center;gap:11px}
.qr-code{width:50px;height:50px;border:5px solid #202124;border-radius:8px;background:repeating-linear-gradient(45deg,#fff 0 4px,#202124 4px 8px)}
.qr-box strong{display:block;font-size:12px}.qr-box small{display:block;color:var(--green);font-size:10px;margin-top:4px}
@keyframes floatA{50%{transform:translateY(-13px)}}
@keyframes floatB{50%{transform:translateY(12px)}}

/* Logo strip */
.logo-strip{padding:28px 0;border-top:1px solid #f1f3f4;border-bottom:1px solid #f1f3f4}
.logo-strip-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.logo-strip-label{font-size:11px;font-weight:800;color:#80868b;text-transform:uppercase;letter-spacing:1px}
.fake-logo{font:700 16px "Google Sans";color:#80868b}

/* Flow */
.soft-section{background:var(--soft)}
.flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:55px}
.flow-card,.feature-card,.testimonial,.price-card{
    border:1px solid #e8eaed;background:#fff;border-radius:var(--radius)
}
.flow-card{padding:28px;transition:.25s}
.flow-card:hover,.feature-card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:#c7d9f7}
.step{
    width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
    font-size:11px;font-weight:900;margin-bottom:25px
}
.flow-card:nth-child(1) .step{background:var(--blue-soft);color:var(--blue)}
.flow-card:nth-child(2) .step{background:var(--yellow-soft);color:#a05b00}
.flow-card:nth-child(3) .step{background:var(--green-soft);color:var(--green)}
.flow-card:nth-child(4) .step{background:var(--red-soft);color:var(--red)}
.flow-icon{font-size:30px;margin-bottom:15px}
.flow-card h3,.feature-card h3{font:600 21px "Google Sans";margin:0 0 9px}
.flow-card p,.feature-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}

/* Features */
.features-head{display:flex;justify-content:space-between;align-items:end;gap:40px}
.features-head .section-copy{margin:0}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px}
.feature-card{padding:29px;min-height:245px;transition:.25s}
.feature-icon{width:51px;height:51px;border-radius:15px;display:grid;place-items:center;font-size:23px;margin-bottom:27px}
.feature-card:nth-child(1) .feature-icon{background:var(--blue-soft)}
.feature-card:nth-child(2) .feature-icon{background:var(--green-soft)}
.feature-card:nth-child(3) .feature-icon{background:var(--yellow-soft)}
.feature-card:nth-child(4) .feature-icon{background:var(--red-soft)}
.feature-card:nth-child(5) .feature-icon{background:#f3e8fd}
.feature-card:nth-child(6) .feature-icon{background:#e8f0fe}

/* Analytics preview */
.analytics-section{background:linear-gradient(#fff,#f8fafd)}
.dashboard-frame{margin-top:50px;padding:9px;border-radius:28px;background:linear-gradient(135deg,#dce9ff,#e9f6ec,#fff2cf);box-shadow:var(--shadow-xl)}
.dashboard{border:1px solid #e8eaed;border-radius:21px;overflow:hidden;background:#fff}
.dashboard-top{height:60px;border-bottom:1px solid #e8eaed;display:flex;align-items:center;justify-content:space-between;padding:0 20px}
.window-dots{display:flex;gap:6px}.window-dots i{width:9px;height:9px;border-radius:50%}.window-dots i:nth-child(1){background:var(--red)}.window-dots i:nth-child(2){background:var(--yellow)}.window-dots i:nth-child(3){background:var(--green)}
.dashboard-body{display:grid;grid-template-columns:205px 1fr}
.sidebar{padding:22px;border-right:1px solid #e8eaed;background:#fafbfc}
.sidebar-title{font:700 17px "Google Sans";margin-bottom:32px}
.side-link{padding:10px 11px;border-radius:9px;color:var(--muted);font-size:11px;margin-bottom:6px}
.side-link.active{background:var(--blue-soft);color:var(--blue-dark);font-weight:800}
.dashboard-content{padding:28px}
.dash-head{display:flex;justify-content:space-between;align-items:center}
.dash-head h3{font:600 25px "Google Sans";margin:0}.dash-head small{display:block;color:var(--muted);font-size:10px;margin-top:4px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:22px}
.stat{border:1px solid #e8eaed;border-radius:14px;padding:16px}
.stat label{display:block;font-size:9px;color:var(--muted);font-weight:700}.stat strong{display:block;font:700 27px "Google Sans";margin-top:5px}.up{font-size:9px;color:var(--green);font-weight:800}
.chart-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:12px;margin-top:12px}
.chart-card{border:1px solid #e8eaed;border-radius:14px;padding:18px}.chart-card h4{font:600 14px "Google Sans";margin:0 0 18px}
.bars{height:150px;display:flex;align-items:end;gap:11px}.bar{flex:1;background:linear-gradient(#8ab4f8,#4285f4);border-radius:6px 6px 2px 2px;animation:barIn .9s ease both}.bar:nth-child(1){height:40%}.bar:nth-child(2){height:52%}.bar:nth-child(3){height:45%}.bar:nth-child(4){height:67%}.bar:nth-child(5){height:62%}.bar:nth-child(6){height:82%}.bar:nth-child(7){height:95%}
@keyframes barIn{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1)}}
.mini-review{border:1px solid #e8eaed;border-radius:10px;padding:10px;margin-bottom:8px}.mini-review-top{display:flex;justify-content:space-between;font-size:9px}.mini-review .stars{font-size:10px}.mini-review p{font-size:9px;color:var(--muted);line-height:1.5;margin:6px 0 0}

/* Benefits */
.benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.benefit-list{display:grid;gap:12px;margin-top:30px}.benefit-item{display:flex;gap:13px;padding:14px;border-radius:15px}.benefit-item:hover{background:var(--soft)}
.benefit-item .check{flex:0 0 29px;width:29px;height:29px}
.benefit-item strong{display:block;font-size:14px;margin-bottom:4px}.benefit-item p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.score-stage{position:relative;min-height:440px;display:grid;place-items:center}
.score-card{width:min(390px,88%);padding:35px;border:1px solid #e8eaed;border-radius:28px;background:#fff;box-shadow:var(--shadow-xl);text-align:center}
.score-card small{color:var(--muted);font-size:12px}.score{font:700 82px "Google Sans";line-height:1;margin-top:12px}.score-stars{font-size:22px;color:var(--yellow);letter-spacing:4px;margin:10px 0 25px}.progress{height:8px;background:#edf0f3;border-radius:99px;overflow:hidden}.progress i{display:block;width:92%;height:100%;background:var(--green);border-radius:inherit}.score-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin-top:8px}
.metric-float{position:absolute;background:#fff;border:1px solid #e8eaed;border-radius:14px;padding:13px 16px;box-shadow:var(--shadow);font-size:10px}.metric-float strong{display:block;font:700 19px "Google Sans";margin-bottom:3px}.metric-a{right:0;top:35px}.metric-a strong{color:var(--blue)}.metric-b{left:0;bottom:45px}.metric-b strong{color:var(--green)}

/* Testimonials */
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px}.testimonial{padding:28px}.quote{font:700 34px Georgia;color:var(--blue)}.testimonial p{font-size:13px;line-height:1.8;color:#3c4043;margin:7px 0 0}.author{display:flex;align-items:center;gap:10px;margin-top:24px}.avatar{width:38px;height:38px;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-size:11px;font-weight:900}.author strong{font-size:11px}.author small{display:block;color:var(--muted);font-size:9px;margin-top:2px}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px;align-items:stretch}.price-card{padding:31px}.price-card.featured{border:2px solid var(--blue);box-shadow:0 22px 55px rgba(66,133,244,.15);transform:translateY(-8px)}.popular{display:inline-flex;padding:6px 9px;border-radius:999px;background:var(--blue-soft);color:var(--blue-dark);font-size:9px;font-weight:900}.price-name{font:600 21px "Google Sans";margin-top:15px}.price-desc{min-height:40px;margin-top:8px;color:var(--muted);font-size:11px;line-height:1.55}.price{font:700 47px "Google Sans";letter-spacing:-2px;margin-top:24px}.price small{font:400 11px Inter;color:var(--muted);letter-spacing:0}.price-card .btn{width:100%;margin-top:21px}.price-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:11px}.price-list li{font-size:11px;color:var(--muted)}.price-list li:before{content:"✓";color:var(--green);font-weight:900;margin-right:8px}

/* FAQ */
.faq{max-width:850px;margin:50px auto 0}.faq-item{border-bottom:1px solid #e8eaed}.faq-button{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;background:none;border:0;padding:22px 0;color:var(--ink);font-size:14px;font-weight:800;cursor:pointer}.faq-plus{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--blue);transition:.2s}.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s}.faq-answer p{padding:0 45px 20px 0;margin:0;color:var(--muted);font-size:12px;line-height:1.8}.faq-item.open .faq-plus{transform:rotate(45deg)}

/* CTA */
.final-cta{padding:110px 0;background:linear-gradient(135deg,#1a73e8,#4285f4);color:#fff;text-align:center;position:relative;overflow:hidden}.final-cta:before{content:"";position:absolute;width:500px;height:500px;border-radius:50%;background:rgba(255,255,255,.08);top:-300px;left:-150px}.final-cta-inner{position:relative;z-index:2}.final-cta .kicker{background:rgba(255,255,255,.14);color:#fff}.final-cta .kicker:before{background:#fff}.final-cta h2{max-width:820px;margin:20px auto 0;font:600 clamp(40px,5vw,65px) "Google Sans";line-height:1.03;letter-spacing:-3px}.final-cta p{max-width:600px;margin:18px auto 0;color:rgba(255,255,255,.83);font-size:15px;line-height:1.7}.cta-actions{display:flex;justify-content:center;gap:11px;flex-wrap:wrap;margin-top:29px}.btn-white{background:#fff;color:var(--blue-dark)}.btn-clear{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);color:#fff}

/* Footer */
.site-footer{padding:55px 0 28px;border-top:1px solid #e8eaed;background:#fff}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px}.footer-brand p{max-width:290px;color:var(--muted);font-size:11px;line-height:1.7;margin:13px 0}.footer-col h4{font-size:11px;margin:0 0 16px}.footer-col a{display:block;color:var(--muted);font-size:11px;margin-bottom:11px}.footer-col a:hover{color:var(--blue)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:42px;padding-top:20px;border-top:1px solid #e8eaed;color:#80868b;font-size:10px}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}

/* Responsive */
@media(max-width:1050px){
    .desktop-nav{display:none}.nav-actions{display:none}.mobile-toggle{display:block}
    .hero-grid{grid-template-columns:1fr;text-align:center}.hero-copy{margin-left:auto;margin-right:auto}.hero-actions,.hero-trust{justify-content:center}
    .flow-grid{grid-template-columns:repeat(2,1fr)}.feature-grid{grid-template-columns:repeat(2,1fr)}
    .benefit-grid{grid-template-columns:1fr}.score-stage{min-height:410px}
    .dashboard-body{grid-template-columns:1fr}.sidebar{display:none}
    .mobile-nav{padding:18px 20px;border-top:1px solid #e8eaed;background:#fff}.mobile-nav a{display:block;padding:12px 0;font-size:13px;font-weight:700}.mobile-nav-actions{display:flex;gap:9px;padding-top:10px}.mobile-nav.open{display:block}
}
@media(max-width:720px){
    .shell{width:calc(100% - 28px)}.section{padding:75px 0}.hero{padding:130px 0 70px}.hero h1{letter-spacing:-3px}.hero-copy{font-size:15px}
    .hero-stage{min-height:500px}.phone{width:255px;height:470px}.float-rating{left:-5px;top:45px;width:145px}.float-qr{right:-5px;bottom:55px;width:155px}
    .logo-strip-inner{justify-content:center}.logo-strip-label{width:100%;text-align:center}.fake-logo{font-size:13px}
    .flow-grid,.feature-grid,.testimonial-grid,.pricing-grid{grid-template-columns:1fr}.features-head{display:block}.features-head .section-copy{margin-top:18px}
    .price-card.featured{transform:none}.dashboard-frame{overflow:hidden}.dashboard-content{min-width:620px}.dashboard-body{overflow:auto}.stat-grid{grid-template-columns:repeat(2,1fr)}.chart-grid{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr 1fr}.footer-bottom{flex-direction:column}
}
@media(max-width:430px){
    .footer-grid{grid-template-columns:1fr}.hero-actions .btn,.cta-actions .btn{width:100%}.hero-stage{transform:scale(.94)}.section-title{letter-spacing:-2px}
}