@property --dial { syntax:'<number>'; inherits:false; initial-value:0; }

  :root{
    --ink:#221B3A; --ink-soft:#6B6489; --violet:#6D4AE6; --violet-deep:#5533C9;
    --violet-100:#EFEAFD; --violet-50:#F7F4FE; --mist:#FBFAFF; --surface:#FFFFFF;
    --border:#ECE6FA; --amber:#F5A524; --ok:#12A150;
    --shadow-sm:0 1px 2px rgba(52,33,110,.06), 0 1px 3px rgba(52,33,110,.05);
    --shadow-md:0 8px 24px -8px rgba(72,45,150,.18), 0 2px 6px rgba(72,45,150,.06);
    --shadow-lg:0 24px 60px -20px rgba(72,45,150,.28), 0 6px 16px rgba(72,45,150,.08);
    --radius:18px; --maxw:1160px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:
      radial-gradient(1200px 520px at 82% -8%, #F1EBFE 0%, rgba(241,235,254,0) 60%),
      radial-gradient(900px 500px at 5% 0%, #F5F1FF 0%, rgba(245,241,255,0) 55%),
      var(--mist);
    color:var(--ink); font-family:Inter,system-ui,sans-serif; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{font-family:Fraunces,Georgia,serif; font-weight:500; line-height:1.08; letter-spacing:-.015em; margin:0}
  p{margin:0}
  a{color:inherit; text-decoration:none}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
  .eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase; color:var(--violet-deep);
    background:var(--violet-100); padding:6px 12px; border-radius:999px}
  .btn{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:15px;
    padding:12px 20px; border-radius:12px; cursor:pointer; border:1px solid transparent;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
  .btn-primary{background:var(--violet); color:#fff; box-shadow:var(--shadow-md)}
  .btn-primary:hover{background:var(--violet-deep); transform:translateY(-2px); box-shadow:var(--shadow-lg)}
  .btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--border); box-shadow:var(--shadow-sm)}
  .btn-ghost:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
  :focus-visible{outline:3px solid var(--violet); outline-offset:2px; border-radius:8px}

  /* header */
  header{position:sticky; top:0; z-index:40; backdrop-filter:blur(12px);
    background:rgba(251,250,255,.78); border-bottom:1px solid var(--border)}
  .nav{display:flex; align-items:center; gap:28px; height:66px}
  .brand{display:flex; align-items:center; gap:10px; font-family:Fraunces; font-weight:600; font-size:20px; letter-spacing:-.02em}
  .brand .mark{width:30px; height:30px; border-radius:9px; background:linear-gradient(150deg,var(--violet),#9C7BFF);
    display:grid; place-items:center; box-shadow:var(--shadow-md)}
  .nav .links{display:flex; gap:24px; margin-left:14px}
  .nav .links a{font-size:14.5px; font-weight:500; color:var(--ink-soft)}
  .nav .links a:hover{color:var(--ink)}
  .nav .spacer{flex:1}

  /* hero */
  .hero{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; padding:74px 0 40px}
  .hero h1{font-size:clamp(38px,5.2vw,60px)}
  .hero h1 em{font-style:italic; color:var(--violet-deep)}
  .lede{margin-top:20px; font-size:18.5px; color:var(--ink-soft); max-width:34ch}
  .cta-row{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap}
  .trust{margin-top:30px; display:flex; align-items:center; gap:12px; color:var(--ink-soft); font-size:14px}
  .avatars{display:flex}
  .avatars span{width:30px; height:30px; border-radius:50%; border:2px solid var(--mist); margin-left:-8px;
    background:linear-gradient(135deg,#C9B6FF,#8B6BF0)}
  .avatars span:first-child{margin-left:0}

  /* verdict card (signature) */
  .verdict{position:relative; background:var(--surface); border:1px solid var(--border);
    border-radius:calc(var(--radius) + 6px); padding:26px; box-shadow:var(--shadow-lg)}
  .ribbon{position:absolute; top:18px; right:18px; font-size:11.5px; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; color:#fff; background:linear-gradient(135deg,var(--violet),#9A78FF);
    padding:6px 11px; border-radius:999px; box-shadow:var(--shadow-md)}
  .verdict .top{display:flex; align-items:center; gap:18px}
  .dial{--dial:0; width:96px; height:96px; border-radius:50%; flex:none; display:grid; place-items:center;
    background:conic-gradient(var(--violet) calc(var(--dial)*1%), var(--violet-100) 0)}
  .dial::before{content:""; position:absolute; inset:0; margin:auto; width:74px; height:74px; border-radius:50%; background:var(--surface); box-shadow:inset 0 1px 3px rgba(72,45,150,.08)}
  .dial b{position:relative; font-family:Fraunces; font-weight:600; font-size:26px; font-variant-numeric:tabular-nums}
  .dial{position:relative}
  .v-name{font-family:Fraunces; font-size:22px; font-weight:600}
  .v-cat{font-size:13px; color:var(--ink-soft); font-weight:500}
  .stars{color:var(--amber); letter-spacing:2px; font-size:15px}
  .verdict p.why{margin-top:16px; color:var(--ink-soft); font-size:15px}
  .verdict .foot{margin-top:20px; display:flex; align-items:center; justify-content:space-between; gap:12px}
  .pill{font-size:12.5px; color:var(--violet-deep); background:var(--violet-50); border:1px solid var(--border);
    padding:6px 11px; border-radius:999px; font-weight:600}

  /* logos strip */
  .strip{padding:22px 0 8px}
  .strip .row{display:flex; align-items:center; gap:34px; flex-wrap:wrap; justify-content:center;
    color:#9990B4; font-weight:600; font-size:15px; opacity:.9}
  .strip .row .lbl{width:100%; text-align:center; font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px}

  section.band{padding:64px 0}
  .head{max-width:56ch; margin-bottom:34px}
  .head .eyebrow{margin-bottom:14px}
  .head h2{font-size:clamp(28px,3.6vw,40px)}
  .head p{margin-top:12px; color:var(--ink-soft); font-size:17px}

  /* comparison table */
  .table{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    overflow:hidden; box-shadow:var(--shadow-md)}
  .trow{display:grid; grid-template-columns:2.2fr 1.4fr .8fr auto; gap:16px; align-items:center;
    padding:18px 22px; border-top:1px solid var(--border)}
  .trow.hd{border-top:0; background:var(--violet-50); font-size:12.5px; letter-spacing:.06em;
    text-transform:uppercase; color:var(--ink-soft); font-weight:600}
  .trow.pick{background:linear-gradient(90deg,var(--violet-50),#fff 70%)}
  .tool{display:flex; align-items:center; gap:13px}
  .logo{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-family:Fraunces;
    font-weight:600; color:#fff; font-size:17px; flex:none; box-shadow:var(--shadow-sm)}
  .tool .n{font-weight:600; font-size:15.5px}
  .tool .m{font-size:12.5px; color:var(--ink-soft)}
  .tag-pick{font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--violet-deep);
    background:var(--violet-100); padding:3px 8px; border-radius:6px; margin-left:8px; vertical-align:middle}
  .best{font-size:14px; color:var(--ink-soft)}
  .score{font-family:Fraunces; font-weight:600; font-size:20px; font-variant-numeric:tabular-nums}
  .mini{font-size:13.5px; font-weight:600; color:var(--violet-deep); display:inline-flex; align-items:center; gap:6px}
  .mini svg{transition:transform .18s ease}
  .mini:hover svg{transform:translateX(3px)}

  /* review cards */
  .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
  .card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px;
    box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease}
  .card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
  .card .ch{display:flex; align-items:center; gap:14px; margin-bottom:6px}
  .dial.sm{width:62px; height:62px}
  .dial.sm::before{width:47px; height:47px}
  .dial.sm b{font-size:17px}
  .card h3{font-size:19px; margin-top:14px}
  .card .cat{font-size:12.5px; color:var(--ink-soft); font-weight:600}
  .proscons{margin-top:14px; display:grid; gap:7px; font-size:14px}
  .proscons div{display:flex; gap:9px; align-items:flex-start; color:var(--ink-soft)}
  .proscons .i{flex:none; margin-top:2px}

  /* method */
  .method{background:linear-gradient(180deg,#fff, #FBFAFF); border:1px solid var(--border);
    border-radius:calc(var(--radius) + 4px); padding:38px; box-shadow:var(--shadow-md)}
  .crit{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:8px}
  .crit .c .w{font-family:Fraunces; font-size:34px; font-weight:600; color:var(--violet-deep)}
  .crit .c h3{font-size:16px; margin:8px 0 4px}
  .crit .c p{font-size:13.5px; color:var(--ink-soft)}

  /* blog */
  .post{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
    box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease; display:flex; flex-direction:column}
  .post:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
  .post .cover{height:120px; background:linear-gradient(135deg,var(--violet-100),#DCD0FB)}
  .post .cover.b{background:linear-gradient(135deg,#E7DEFB,#CDBEFA)}
  .post .cover.c{background:linear-gradient(135deg,#EDE7FD,#D7C9F8)}
  .post .pb{padding:20px; display:flex; flex-direction:column; gap:9px; flex:1}
  .post .k{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--violet-deep)}
  .post h3{font-size:18px}
  .post .meta{margin-top:auto; font-size:13px; color:var(--ink-soft)}

  /* team / E-E-A-T */
  .team{display:grid; grid-template-columns:repeat(5,1fr); gap:18px}
  .member{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px 16px; text-align:center; box-shadow:var(--shadow-sm)}
  .member img{width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid var(--violet-50); box-shadow:0 0 0 1px var(--border)}
  .member .mname{font-family:Fraunces; font-weight:600; font-size:17px; margin-top:12px}
  .member .mrole{font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--violet-deep); margin-top:3px}
  .member p{font-size:13px; color:var(--ink-soft); margin-top:10px}
  .byline{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft); margin-top:12px}
  .byline img{width:22px; height:22px; border-radius:50%; object-fit:cover; border:1.5px solid var(--border)}
  .byline b{color:var(--ink); font-weight:600}

  /* cta */
  .cta{background:linear-gradient(135deg,var(--violet-deep),#7A54F0 55%,#9A7BFF); border-radius:calc(var(--radius) + 8px);
    padding:52px; color:#fff; text-align:center; box-shadow:var(--shadow-lg); position:relative; overflow:hidden}
  .cta::after{content:""; position:absolute; inset:0; background:radial-gradient(600px 240px at 50% -30%, rgba(255,255,255,.28), transparent 70%)}
  .cta h2{font-size:clamp(26px,3.4vw,38px); position:relative}
  .cta p{margin:14px auto 0; max-width:52ch; color:#EDE7FF; position:relative}
  .cta .btn{margin-top:26px; position:relative}
  .cta .btn-primary{background:#fff; color:var(--violet-deep)}
  .cta .btn-primary:hover{background:#F3EEFF}

  footer{border-top:1px solid var(--border); margin-top:24px; padding:44px 0 30px}
  .fcols{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:24px}
  .fcols h4{font-size:12.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 12px; font-family:Inter; font-weight:700}
  .fcols a{display:block; font-size:14px; color:var(--ink-soft); padding:4px 0}
  .fcols a:hover{color:var(--violet-deep)}
  .disc{margin-top:30px; padding-top:20px; border-top:1px solid var(--border); font-size:13px; color:var(--ink-soft);
    display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

  html.js .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
  html.js .reveal.in{opacity:1; transform:none}

  @media (max-width:900px){
    .hero{grid-template-columns:1fr; gap:34px; padding:48px 0 20px}
    .grid3{grid-template-columns:1fr}
    .crit{grid-template-columns:repeat(2,1fr)}
    .team{grid-template-columns:repeat(3,1fr)}
    .fcols{grid-template-columns:1fr 1fr}
    .nav .links{display:none}
    .trow{grid-template-columns:1.6fr .7fr auto; }
    .trow .best{display:none}
  }
  @media (max-width:560px){ .fcols{grid-template-columns:1fr} .team{grid-template-columns:repeat(2,1fr)} .cta{padding:36px 22px} .method{padding:24px} }
  @media (prefers-reduced-motion:reduce){ *{transition:none !important; scroll-behavior:auto} html.js .reveal{opacity:1; transform:none} }

  /* --- interior pages --- */
  .crumb{font-size:13px;color:var(--ink-soft);padding:24px 0 0}
  .crumb a{color:var(--violet-deep)}
  .page-hero{padding:22px 0 6px}
  .page-hero .eyebrow{margin-bottom:14px}
  .page-hero h1{font-size:clamp(30px,4.4vw,46px)}
  .page-hero p.sub{margin-top:14px;color:var(--ink-soft);font-size:18px;max-width:60ch}
  .prose{max-width:70ch;padding:14px 0 10px}
  .prose h2{font-size:23px;margin:32px 0 10px}
  .prose h3{font-size:17px;margin:22px 0 6px}
  .prose p{margin:0 0 14px;color:#3b3452}
  .prose ul{margin:0 0 16px;padding-left:20px;color:#3b3452}
  .prose li{margin:6px 0}
  .prose a{color:var(--violet-deep);text-decoration:underline;text-underline-offset:2px}
  .prose .upd{font-size:13.5px;color:var(--ink-soft);margin:0 0 20px}
  .callout{background:var(--violet-50);border:1px solid var(--border);border-left:3px solid var(--violet);
    border-radius:12px;padding:15px 18px;margin:18px 0;color:#3b3452;font-size:15px}
  .author-hero{display:flex;gap:22px;align-items:center;padding:20px 0 6px}
  .author-hero img{width:112px;height:112px;border-radius:50%;object-fit:cover;border:4px solid var(--violet-50);box-shadow:0 0 0 1px var(--border)}
  .author-hero .mrole{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--violet-deep)}
  .contact-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-md);max-width:54ch}
  .contact-card a.mail{font-family:Fraunces;font-size:22px;color:var(--violet-deep);text-decoration:none}
  .cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:760px;margin:0 auto;
    background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);
    padding:15px 18px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .cookie p{font-size:13.5px;color:var(--ink-soft);margin:0;flex:1;min-width:230px}
  .cookie a{color:var(--violet-deep)}
  .cookie-actions{display:flex;gap:10px}
  .cookie .btn{padding:9px 15px;font-size:14px}