*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#0F172A; --bg-2:#0a1122; --panel:#111c33; --panel-2:#15233f;
  --text:#E5ECFA; --muted:#94A3B8; --line:rgba(255,255,255,.08);
  --green:#22C55E; --purple:#A855F7; --cyan:#06B6D4; --pink:#EC4899; --yellow:#FACC15;
  --radius:14px;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
body{background-image:
  radial-gradient(1200px 600px at 80% -10%,rgba(168,85,247,.18),transparent 60%),
  radial-gradient(900px 500px at -10% 20%,rgba(6,182,212,.15),transparent 60%),
  linear-gradient(180deg,#0b1226,#0F172A);
  background-attachment:fixed}
img{max-width:100%;display:block}
a{color:#7dd3fc;text-decoration:none} a:hover{color:#bae6fd}
h1,h2,h3,h4{font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-.02em;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700}
h3{font-size:1.25rem;font-weight:700}
p{margin:0 0 1em}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.accent{background:linear-gradient(90deg,var(--green),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.grid-bg{background-image:linear-gradient(rgba(168,85,247,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(6,182,212,.06) 1px,transparent 1px);background-size:32px 32px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(15,23,42,.7);border-bottom:1px solid var(--line)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.1rem;color:#fff}
.brand-mark{width:26px;height:26px;border-radius:6px;background:conic-gradient(from 45deg,var(--green),var(--cyan),var(--purple),var(--green));box-shadow:0 0 18px rgba(34,197,94,.55)}
.nav-main{display:flex;gap:.4rem;align-items:center}
.nav-link{padding:.5rem .9rem;border-radius:8px;color:var(--muted);font-weight:500;font-size:.95rem}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav-link.active{color:#fff;background:linear-gradient(135deg,rgba(34,197,94,.18),rgba(168,85,247,.18));box-shadow:inset 0 0 0 1px rgba(34,197,94,.35)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:#fff;border-radius:8px;padding:.4rem .7rem;font-size:1.2rem;cursor:pointer}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.4rem;border-radius:10px;font-weight:600;border:none;cursor:pointer;font-size:.95rem;transition:transform .15s,box-shadow .2s,filter .2s;font-family:inherit}
.btn-primary{background:linear-gradient(135deg,var(--green),var(--cyan));color:#0b1226;box-shadow:0 0 24px rgba(34,197,94,.35)}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.1);box-shadow:0 0 32px rgba(34,197,94,.55)}
.btn-outline{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.btn-outline:hover{box-shadow:inset 0 0 0 1px var(--cyan);color:var(--cyan)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{color:#fff}

/* Sections */
section{padding:80px 0}
.section-head{text-align:center;max-width:760px;margin:0 auto 50px}
.eyebrow{display:inline-block;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);padding:.35rem .8rem;border-radius:99px;background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.3);margin-bottom:1rem}

/* Hero */
.hero{position:relative;padding:90px 0 70px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.hero h1 span.line{background:linear-gradient(90deg,#fff,var(--cyan) 60%,var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lead{font-size:1.15rem;color:var(--muted);max-width:540px;margin-bottom:1.6rem}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.6rem}
.rating-badge{display:inline-flex;align-items:center;gap:.7rem;padding:.6rem .9rem;border-radius:12px;background:rgba(250,204,21,.08);border:1px solid rgba(250,204,21,.3);font-weight:600}
.stars{color:var(--yellow);letter-spacing:2px}
.hero-meta{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:1.4rem;color:var(--muted);font-size:.9rem}
.hero-meta span strong{color:#fff;display:block;font-size:1.3rem;font-family:'Space Grotesk',sans-serif}

/* Phone mockup */
.phone-mock{position:relative;justify-self:center;width:300px;height:600px;border-radius:42px;background:linear-gradient(160deg,#1c2a4a,#0b1226);box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 0 8px #0b1226,0 0 0 9px rgba(168,85,247,.5),0 0 60px rgba(168,85,247,.4);padding:14px;overflow:hidden}
.phone-screen{width:100%;height:100%;border-radius:30px;background:linear-gradient(180deg,#0a0f24,#141a35);position:relative;overflow:hidden;padding:20px;display:grid;grid-template-rows:auto 1fr auto;gap:14px}
.ps-top{display:flex;justify-content:space-between;color:#fff;font-weight:700;font-size:.85rem}
.ps-top .score{color:var(--green);text-shadow:0 0 10px rgba(34,197,94,.7)}
.ps-board{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;align-content:center}
.ps-board i{aspect-ratio:1;border-radius:4px;background:rgba(255,255,255,.04);display:block}
.ps-board i.g{background:linear-gradient(135deg,#22C55E,#16a34a);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 8px rgba(34,197,94,.5)}
.ps-board i.p{background:linear-gradient(135deg,#A855F7,#7e22ce);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 8px rgba(168,85,247,.5)}
.ps-board i.c{background:linear-gradient(135deg,#06B6D4,#0891b2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 8px rgba(6,182,212,.5)}
.ps-board i.y{background:linear-gradient(135deg,#FACC15,#eab308);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 8px rgba(250,204,21,.5)}
.ps-board i.pk{background:linear-gradient(135deg,#EC4899,#db2777);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 8px rgba(236,72,153,.5)}
.ps-tray{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ps-tray div{height:54px;border-radius:8px;background:rgba(255,255,255,.04);display:grid;place-items:center}
.ps-tray div::before{content:"";width:34px;height:34px;border-radius:6px;background:linear-gradient(135deg,var(--cyan),var(--purple));box-shadow:0 0 12px rgba(6,182,212,.6)}

/* Cards */
.card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:var(--radius);padding:24px;backdrop-filter:blur(10px);transition:transform .2s,border-color .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);border-color:rgba(168,85,247,.35);box-shadow:0 14px 30px rgba(0,0,0,.3),0 0 30px rgba(168,85,247,.12)}
.card .icon{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;font-size:1.4rem;margin-bottom:14px;background:linear-gradient(135deg,rgba(34,197,94,.18),rgba(6,182,212,.18));box-shadow:inset 0 0 0 1px rgba(34,197,94,.3)}
.card.purple .icon{background:linear-gradient(135deg,rgba(168,85,247,.22),rgba(236,72,153,.18));box-shadow:inset 0 0 0 1px rgba(168,85,247,.35)}
.card.cyan .icon{background:linear-gradient(135deg,rgba(6,182,212,.22),rgba(34,197,94,.18));box-shadow:inset 0 0 0 1px rgba(6,182,212,.35)}
.card.yellow .icon{background:linear-gradient(135deg,rgba(250,204,21,.22),rgba(236,72,153,.18));box-shadow:inset 0 0 0 1px rgba(250,204,21,.35)}

.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;gap:14px}
.gallery a{position:relative;display:block;overflow:hidden;border-radius:14px;border:1px solid var(--line);background:#0b1226}
.gallery a:nth-child(1){grid-column:span 2;grid-row:span 2}
.gallery a:nth-child(6){grid-column:span 2}
.gallery a:nth-child(9){grid-row:span 2}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gallery a:hover img{transform:scale(1.06)}
.gallery a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.45));pointer-events:none}

/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:24px}
.blog-card{display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .2s,border-color .2s;color:inherit}
.blog-card:hover{transform:translateY(-3px);border-color:rgba(34,197,94,.35);box-shadow:0 0 30px rgba(34,197,94,.1)}
.blog-card .thumb{aspect-ratio:16/10;background:#0b1226;position:relative;overflow:hidden}
.blog-card .thumb img{width:100%;height:100%;object-fit:cover}
.blog-card .body{padding:20px;display:flex;flex-direction:column;gap:.6rem;flex:1}
.blog-card .tag{align-self:flex-start;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--green);padding:.25rem .6rem;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);border-radius:99px}
.blog-card h3{margin:0;color:#fff}
.blog-card p{color:var(--muted);font-size:.93rem;margin:0;flex:1}
.blog-card .read-more{margin-top:auto;color:var(--cyan);font-weight:600;font-size:.9rem}

/* Editorial Quote */
.editorial{background:linear-gradient(135deg,rgba(168,85,247,.10),rgba(6,182,212,.08));border:1px solid rgba(168,85,247,.3);border-radius:18px;padding:40px;text-align:center;max-width:900px;margin:0 auto;position:relative}
.editorial::before{content:'"';position:absolute;top:-20px;left:30px;font-size:6rem;color:var(--purple);opacity:.3;font-family:Georgia,serif;line-height:1}
.editorial p{font-size:1.25rem;font-style:italic;color:#fff;margin-bottom:1rem}

/* Pros & Cons */
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pros,.cons{padding:24px;border-radius:14px;border:1px solid var(--line)}
.pros{background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.3)}
.cons{background:rgba(236,72,153,.06);border-color:rgba(236,72,153,.3)}
.pros h3,.cons h3{margin-top:0}
.pros ul,.cons ul{list-style:none;padding:0;margin:0}
.pros li,.cons li{padding:.6rem 0;padding-left:1.8rem;position:relative;border-bottom:1px solid rgba(255,255,255,.06)}
.pros li::before{content:"✓";position:absolute;left:0;top:.6rem;color:var(--green);font-weight:700;font-size:1.1rem}
.cons li::before{content:"−";position:absolute;left:0;top:.6rem;color:var(--pink);font-weight:700;font-size:1.2rem}

/* Score meters */
.scores{display:grid;gap:18px}
.score-row{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:18px}
.score-row .lbl{display:flex;justify-content:space-between;margin-bottom:.6rem;font-weight:600}
.score-row .lbl .val{font-family:'Space Grotesk',sans-serif;color:var(--green);font-size:1.2rem}
.meter{height:10px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden}
.meter span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--green),var(--cyan));box-shadow:0 0 14px rgba(34,197,94,.5);width:0;transition:width 1.2s ease-out}

/* FAQ */
.faq-list{max-width:860px;margin:0 auto;display:grid;gap:12px}
.faq-item{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.faq-q{width:100%;background:none;border:none;color:#fff;font-weight:600;font-size:1.02rem;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;text-align:left;font-family:inherit}
.faq-q::after{content:"+";font-size:1.5rem;color:var(--cyan);transition:transform .2s}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;padding:0 22px;color:var(--muted);transition:max-height .25s,padding .2s}
.faq-item.open .faq-a{max-height:600px;padding:0 22px 18px}

/* Article */
.article-hero{padding:60px 0 30px}
.article-hero .tag{display:inline-block;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--cyan);padding:.3rem .7rem;background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.3);border-radius:99px;margin-bottom:1rem}
.article-hero h1{max-width:900px}
.article-meta{color:var(--muted);font-size:.9rem;margin-top:1rem;display:flex;gap:1.5rem;flex-wrap:wrap}
.article-cover{aspect-ratio:21/9;border-radius:18px;overflow:hidden;border:1px solid var(--line);margin:30px 0}
.article-cover img{width:100%;height:100%;object-fit:cover}
.article-body{max-width:780px;margin:0 auto;font-size:1.05rem}
.article-body h2{margin-top:2.2rem;color:#fff}
.article-body h3{margin-top:1.6rem;color:#fff}
.article-body p,.article-body li{color:#cbd5e1}
.article-body blockquote{border-left:3px solid var(--purple);background:rgba(168,85,247,.07);padding:14px 22px;border-radius:0 12px 12px 0;font-style:italic;color:#fff;margin:1.4rem 0}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:30px}
.form-card{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;padding:30px}
.field{margin-bottom:18px}
.field label{display:block;margin-bottom:.45rem;font-weight:600;font-size:.9rem;color:#cbd5e1}
.field input,.field textarea{width:100%;padding:.85rem 1rem;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:10px;color:#fff;font-family:inherit;font-size:.95rem;transition:border-color .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(6,182,212,.18)}
.field textarea{min-height:130px;resize:vertical}
.field .err{color:#fda4af;font-size:.82rem;margin-top:.3rem;display:none}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid textarea{border-color:#fda4af}
.form-success{display:none;padding:14px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.4);border-radius:10px;color:#bbf7d0;margin-bottom:1rem}
.form-success.show{display:block}
.info-card{background:linear-gradient(160deg,rgba(168,85,247,.12),rgba(6,182,212,.08));border:1px solid rgba(168,85,247,.3);border-radius:16px;padding:30px}
.info-card h3{margin-top:0}
.info-card dl{display:grid;grid-template-columns:auto 1fr;gap:.6rem 1rem;margin:0}
.info-card dt{color:var(--muted);font-size:.85rem}
.info-card dd{margin:0;font-weight:500}

/* Legal pages */
.legal{max-width:860px;margin:0 auto}
.legal h2{margin-top:2rem}
.legal p,.legal li{color:#cbd5e1}

/* Footer */
.site-footer{border-top:1px solid var(--line);background:#080d1c;padding:60px 0 24px;margin-top:60px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:36px;margin-bottom:34px}
.footer-grid h4{color:#fff;margin-bottom:1rem;font-size:1rem}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:.45rem}
.footer-links a{color:var(--muted);font-size:.92rem}
.footer-links a:hover{color:var(--cyan)}
.footer-bottom{border-top:1px solid var(--line);padding-top:20px;color:var(--muted);font-size:.85rem;text-align:center}

/* Cookie banner */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:100;background:rgba(11,18,38,.95);backdrop-filter:blur(20px);border:1px solid rgba(168,85,247,.4);border-radius:16px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(168,85,247,.2)}
.cookie-wrap{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.cookie-text strong{color:#fff;display:block;margin-bottom:.3rem}
.cookie-text p{color:var(--muted);font-size:.9rem;margin:0}
.cookie-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.cookie-actions .btn{padding:.55rem 1rem;font-size:.88rem}

/* Responsive */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-cta,.hero-meta{justify-content:center}
  .phone-mock{margin:0 auto}
  .footer-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .proscons{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px}
  .gallery a:nth-child(1),.gallery a:nth-child(6),.gallery a:nth-child(9){grid-column:span 1;grid-row:span 1}
  .cookie-wrap{grid-template-columns:1fr}
}
@media (max-width:720px){
  .nav-main{display:none;position:absolute;top:68px;left:0;right:0;background:#0b1226;flex-direction:column;padding:14px;border-bottom:1px solid var(--line)}
  .nav-main.open{display:flex}
  .nav-toggle{display:block}
  .footer-grid{grid-template-columns:1fr}
  section{padding:60px 0}
}