:root{
    --bg:#ffffff; --bg-2:#f4f6fb; --surface:#ffffff;
    --ink:#0a0a0a; --ink-2:#3f3f46; --ink-3:#71717a; --line:#e4e4e7;
    --accent:#1957e6; --accent-ink:#ffffff; --accent-deep:#1245c2; --accent-soft:#eaf0ff;
    --blue:#1957e6; --blue-deep:#1245c2; --blue-soft:#eaf0ff; --gray-soft:#f4f4f5;
    --green:#1957e6; --radius:18px; --radius-s:12px;
    --shadow:0 10px 30px rgba(10,20,60,.08), 0 1px 2px rgba(10,20,60,.06);
    --max:1140px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
  body{margin:0; font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--ink); background:var(--bg); line-height:1.6; font-size:16px}
  a{color:inherit}
  img,svg{display:block}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 20px}
  h1,h2,h3{line-height:1.15; margin:0; letter-spacing:-.015em; font-weight:800}
  h1{font-size:clamp(2.1rem,5vw,3.6rem)}
  h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
  h3{font-size:1.15rem; font-weight:700}
  p{margin:0}
  .lead{font-size:1.1rem; color:var(--ink-2); max-width:56ch}
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.3rem; border-radius:999px; font-weight:700; text-decoration:none; border:2px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; cursor:pointer; font-size:1rem; line-height:1.2; white-space:nowrap}
  .btn:hover{transform:translateY(-1px)}
  .btn-primary{background:var(--blue); color:#fff; box-shadow:0 6px 18px rgba(25,87,230,.28)}
  .btn-primary:hover{background:var(--blue-deep)}
  .btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
  .btn-ghost:hover{background:var(--surface)}
  .btn-dark{background:var(--ink); color:#fff}
  .btn-dark:hover{background:#27272a}
  .btn svg{width:18px; height:18px}

  /* header */
  header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)}
  .nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; height:68px}
  .logo{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--ink)}
  .logo .logomark{width:26px; height:26px; flex:none}
  .logo .wordmark{font-weight:700; letter-spacing:-.02em; font-size:1.08rem; line-height:1; white-space:nowrap}
  .logo .wordmark .tld{color:var(--ink-3); font-weight:500}
  .nav-links{display:flex; gap:1.25rem; align-items:center; font-weight:600; font-size:.93rem; white-space:nowrap}
  .nav-links a{text-decoration:none; color:var(--ink-2)}
  .nav-links a:hover{color:var(--ink)}
  .nav-cta{display:flex; gap:.6rem; align-items:center}
  .nav-cta .login{text-decoration:none; font-weight:600; color:var(--ink-2); font-size:.93rem; white-space:nowrap}
  .burger{display:none; background:none; border:1px solid var(--line); border-radius:10px; width:42px; height:42px; place-items:center; cursor:pointer}
  .burger svg{width:22px;height:22px}
  .nav-cta .btn .long{display:inline}
  .nav-cta .btn .short{display:none}
  @media (max-width:1080px){
    .nav-links,.nav-cta .login{display:none}
    .nav-cta .btn .long{display:none}
    .nav-cta .btn .short{display:inline}
    .nav-cta .btn{padding:.7rem 1rem}
    .logo .wordmark{font-size:1rem}
    .burger{display:grid}
    .nav.open .nav-links{display:flex; position:absolute; left:0; right:0; top:68px; background:var(--bg); flex-direction:column; align-items:flex-start; padding:1rem 20px 1.2rem; border-bottom:1px solid var(--line); gap:1rem}
  }

  /* hero */
  .hero{padding:64px 0 36px; position:relative; overflow:hidden}
  .hero::before{content:""; position:absolute; inset:auto -10% -40% auto; width:620px; height:620px; border-radius:50%; background:radial-gradient(closest-side, rgba(25,87,230,.13), transparent 70%); pointer-events:none}
  .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center}
  .hero h1 .hl{color:var(--blue)}
  .hero .actions{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.6rem}
  .hero-stack{display:flex; flex-direction:column; gap:1.2rem}
  @media (max-width:900px){ .hero-grid{grid-template-columns:1fr} .hero{padding-top:40px} }

  /* address visual */
  .visual{position:relative; min-height:450px}
  .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
  .label{position:absolute; left:0; right:14%; top:0; padding:1.4rem 1.5rem; transform:rotate(-2deg)}
  .label .tag{display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); background:var(--accent-soft); padding:.3rem .6rem; border-radius:999px}
  .label .addr{margin-top:.9rem; font-size:1.05rem; line-height:1.5}
  .label .addr b{display:block; font-size:1.2rem}
  .label .addr span{color:var(--ink-2)}
  .inbox{position:absolute; left:10%; right:0; top:200px; padding:1.1rem 1.2rem; transform:rotate(1.5deg)}
  .inbox .row{display:flex; align-items:center; gap:.9rem; padding:.6rem 0; border-top:1px solid var(--line)}
  .inbox .row:first-of-type{border-top:0}
  .inbox .ico{width:38px; height:38px; border-radius:10px; background:var(--accent-soft); display:grid; place-items:center; flex:none}
  .inbox .ico svg{width:20px; height:20px}
  .inbox .t{font-weight:700; font-size:.95rem}
  .inbox .s{font-size:.82rem; color:var(--ink-3)}
  .inbox .pill{margin-left:auto; font-size:.72rem; font-weight:700; padding:.25rem .55rem; border-radius:999px; background:var(--blue-soft); color:var(--blue-deep)}
  .inbox .pill.alt{background:var(--gray-soft); color:var(--ink-2)}
  .inbox .head{font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.4rem}
  .private{position:absolute; left:0; bottom:0; padding:.8rem 1rem; font-size:.85rem; display:flex; gap:.6rem; align-items:center; transform:rotate(-1deg); background:var(--ink); color:#fff; border-radius:12px}
  .private svg{width:18px;height:18px}
  @media (max-width:900px){ .visual{min-height:470px; max-width:520px; margin:0 auto; width:100%} }
  @media (max-width:420px){ .visual{min-height:500px} }

  /* facts strip */
  .facts{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:3.2rem}
  .fact{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-s); padding:1rem 1.1rem; display:flex; gap:.8rem; align-items:flex-start}
  .fact .i{width:36px; height:36px; flex:none; border-radius:10px; background:var(--accent-soft); display:grid; place-items:center}
  .fact .i svg{width:18px;height:18px}
  .fact b{display:block; font-size:.98rem}
  .fact span{font-size:.85rem; color:var(--ink-3)}
  @media (max-width:900px){ .facts{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:520px){ .facts{grid-template-columns:1fr} }

  section{padding:72px 0}
  .section-head{max-width:66ch; margin-bottom:2.2rem}
  .section-head h2{margin:0 0 .8rem}
  .section-head p{color:var(--ink-2); font-size:1.05rem}

  /* audience */
  .aud{display:grid; grid-template-columns:repeat(5,1fr); gap:1rem}
  .aud .card{padding:1.3rem 1.2rem}
  .aud .i{width:42px; height:42px; border-radius:12px; background:var(--accent-soft); display:grid; place-items:center; margin-bottom:.9rem}
  .aud .i svg{width:22px;height:22px}
  .aud h3{font-size:1.02rem; margin-bottom:.35rem}
  .aud p{font-size:.9rem; color:var(--ink-2)}
  .aud a{color:var(--accent-deep); font-weight:600}
  @media (max-width:1000px){ .aud{grid-template-columns:repeat(3,1fr)} }
  @media (max-width:640px){ .aud{grid-template-columns:1fr 1fr} }
  @media (max-width:440px){ .aud{grid-template-columns:1fr} }

  /* steps */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; counter-reset:step}
  .step{padding:1.6rem 1.5rem; position:relative}
  .step .n{width:40px; height:40px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-weight:800; margin-bottom:1rem}
  .step h3{margin-bottom:.4rem}
  .step p{color:var(--ink-2); font-size:.95rem}
  @media (max-width:800px){ .steps{grid-template-columns:1fr} }

  /* pricing */
  .pricing{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .toggle{display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:4px; gap:4px; margin-bottom:2rem}
  .toggle button{border:0; background:transparent; padding:.55rem 1.1rem; border-radius:999px; font-weight:700; cursor:pointer; font-size:.95rem; color:var(--ink-2); font-family:inherit}
  .toggle button[aria-pressed="true"]{background:var(--ink); color:#fff}
  .toggle .save{font-size:.72rem; color:var(--green); margin-left:.3rem; font-weight:700}
  .plans{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; align-items:stretch}
  .plan{padding:1.8rem 1.6rem; display:flex; flex-direction:column; gap:1rem; position:relative}
  .plan.featured{border-color:var(--blue); box-shadow:0 18px 40px rgba(25,87,230,.16)}
  .plan .badge{position:absolute; top:-13px; left:1.6rem; background:var(--accent); color:var(--accent-ink); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.3rem .7rem; border-radius:999px}
  .plan .for{font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
  .plan h3{font-size:1.5rem}
  .plan .price{display:flex; align-items:baseline; gap:.4rem}
  .plan .price .amt{font-size:2.3rem; font-weight:800; letter-spacing:-.03em}
  .plan .price .per{color:var(--ink-3); font-size:.95rem}
  .plan .sub{font-size:.85rem; color:var(--ink-3); min-height:1.3em}
  .plan ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem; font-size:.95rem; flex:1}
  .plan li{display:flex; gap:.6rem; align-items:flex-start}
  .plan li svg{width:18px; height:18px; flex:none; margin-top:3px}
  .plan li.no{color:var(--ink-3)}
  .plan .note{font-size:.8rem; color:var(--ink-3)}
  .plan .btn{width:100%}
  @media (max-width:900px){ .plans{grid-template-columns:1fr; max-width:520px; margin:0 auto} }

  /* two addresses */
  .two{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
  .two .card{padding:1.6rem}
  .two .k{font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.8rem; display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .65rem; border-radius:999px}
  .two .pub .k{background:var(--accent-soft); color:var(--accent-deep)}
  .two .priv .k{background:var(--gray-soft); color:var(--ink-2)}
  .two .addr{font-size:1.05rem; line-height:1.5; margin:.6rem 0 1rem}
  .two .addr b{display:block; font-size:1.15rem}
  .two p{color:var(--ink-2); font-size:.95rem}
  .two .priv .addr{filter:blur(4px); user-select:none; color:var(--ink-3)}
  @media (max-width:760px){ .two{grid-template-columns:1fr} }

  .band{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

  /* location */
  .lieu{display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center}
  .lieu figure{margin:0}
  .lieu img{width:100%; height:auto; display:block; border-radius:var(--radius); box-shadow:var(--shadow); aspect-ratio:3/2; object-fit:cover}
  .lieu figcaption{font-size:.82rem; color:var(--ink-3); margin-top:.7rem}
  .lieu h2{margin-bottom:.9rem}
  .lieu p{color:var(--ink-2); font-size:1.02rem}
  .lieu-facts{list-style:none; margin:1.4rem 0 1.6rem; padding:0; display:grid; gap:.6rem; font-size:.95rem}
  .lieu-facts li{display:flex; gap:.7rem; align-items:flex-start}
  .lieu-facts li::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--blue); flex:none; margin-top:.55rem}
  @media (max-width:860px){ .lieu{grid-template-columns:1fr; gap:1.8rem} }

  /* legal */
  .legal{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .legal-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem}
  .legal .item{border:1px solid var(--line); border-radius:var(--radius-s); padding:1.3rem 1.3rem; background:var(--bg)}
  .legal .item h3{font-size:1rem; margin-bottom:.4rem}
  .legal .item p{font-size:.92rem; color:var(--ink-2)}
  .legal .item a{color:var(--accent-deep); font-weight:600; text-decoration:none}
  .legal .item a:hover{text-decoration:underline}
  .disclaimer{margin-top:1.4rem; font-size:.85rem; color:var(--ink-3); max-width:80ch}
  @media (max-width:760px){ .legal-grid{grid-template-columns:1fr} }

  /* faq */
  .faq{max-width:820px}
  details{border:1px solid var(--line); border-radius:var(--radius-s); background:var(--surface); margin-bottom:.7rem; overflow:hidden}
  summary{cursor:pointer; padding:1rem 1.2rem; font-weight:700; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+"; font-size:1.4rem; color:var(--accent-deep); font-weight:400; line-height:1}
  details[open] summary::after{content:"–"}
  details .a{padding:0 1.2rem 1.1rem; color:var(--ink-2); font-size:.95rem}

  /* cta */
  .cta-band{background:var(--ink); color:#fff; border-radius:24px; padding:3rem 2.5rem; display:grid; grid-template-columns:1.3fr .7fr; gap:2rem; align-items:center}
  .cta-band h2{color:#fff}
  .cta-band p{color:#a1a1aa; margin-top:.6rem}
  .cta-band .actions{display:flex; gap:.8rem; flex-wrap:wrap; justify-content:flex-end}
  .cta-band .btn-ghost{color:#fff; border-color:#3f3f46}
  .cta-band .btn-ghost:hover{background:#18181b}
  @media (max-width:800px){ .cta-band{grid-template-columns:1fr; padding:2.2rem 1.5rem} .cta-band .actions{justify-content:flex-start} }

  /* footer */
  footer{padding:48px 0 32px; color:var(--ink-2); font-size:.9rem}
  .foot{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem}
  .foot h4{margin:0 0 .7rem; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
  .foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.45rem}
  .foot a{text-decoration:none; color:var(--ink-2)}
  .foot a:hover{color:var(--blue-deep); text-decoration:underline}
  .foot .about p{margin-top:.8rem; max-width:40ch}
  .copy{margin-top:2.2rem; padding-top:1.2rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:var(--ink-3)}
  @media (max-width:800px){ .foot{grid-template-columns:1fr 1fr} }
  @media (max-width:480px){ .foot{grid-template-columns:1fr} }

  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .btn{transition:none} }

/* ---- shared page styles ---- */
.page-head{padding:56px 0 28px}
.page-head h1{font-size:clamp(2rem,4.4vw,3rem); max-width:22ch}
.page-head .lead{margin-top:1rem}
.crumbs{font-size:.82rem; color:var(--ink-3); display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1.2rem}
.crumbs a{color:var(--ink-3); text-decoration:none}
.crumbs a:hover{color:var(--blue-deep); text-decoration:underline}
.crumbs span.sep{color:var(--line)}
.prose{max-width:760px}
.prose h2{font-size:1.55rem; margin:2.4rem 0 .8rem}
.prose h3{font-size:1.15rem; margin:1.8rem 0 .5rem}
.prose p{margin:0 0 1rem; color:var(--ink-2); font-size:1.02rem}
.prose ul,.prose ol{margin:0 0 1.2rem; padding-left:1.3rem; color:var(--ink-2)}
.prose li{margin:.35rem 0}
.prose a{color:var(--blue-deep); font-weight:600; text-decoration:none}
.prose a:hover{text-decoration:underline}
.prose strong{color:var(--ink)}
.prose blockquote{margin:1.4rem 0; padding:1rem 1.2rem; border-left:4px solid var(--blue); background:var(--blue-soft); border-radius:0 12px 12px 0; color:var(--ink-2)}
.prose table{width:100%; border-collapse:collapse; font-size:.95rem; margin:1rem 0 1.6rem}
.prose th,.prose td{text-align:left; padding:.7rem .8rem; border-bottom:1px solid var(--line); vertical-align:top}
.prose th{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.prose .callout{border:1px solid var(--line); border-radius:var(--radius-s); padding:1.1rem 1.3rem; background:var(--bg-2); margin:1.4rem 0}
.prose .callout b{display:block; margin-bottom:.3rem}
.prose figure{margin:1.6rem 0}
.prose img{width:100%; height:auto; border-radius:var(--radius); display:block}
.prose figcaption{font-size:.82rem; color:var(--ink-3); margin-top:.6rem}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
@media (max-width:860px){ .grid-2,.grid-3{grid-template-columns:1fr} }
.tile{padding:1.4rem 1.4rem}
.tile h3{margin-bottom:.4rem; font-size:1.05rem}
.tile p{color:var(--ink-2); font-size:.95rem}
.cta-inline{margin:2.4rem 0; padding:1.6rem; border-radius:var(--radius); background:var(--ink); color:#fff; display:flex; justify-content:space-between; align-items:center; gap:1.2rem; flex-wrap:wrap}
.cta-inline p{margin:0; color:#d4d4d8}
.cta-inline b{color:#fff; display:block; font-size:1.1rem; margin-bottom:.2rem}
.meta{font-size:.85rem; color:var(--ink-3); display:flex; gap:.6rem; flex-wrap:wrap; align-items:center}
.meta .tag{background:var(--blue-soft); color:var(--blue-deep); font-weight:700; padding:.2rem .6rem; border-radius:999px; font-size:.75rem}
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
@media (max-width:960px){ .post-grid{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .post-grid{grid-template-columns:1fr} }
.post-card{padding:1.4rem; display:flex; flex-direction:column; gap:.6rem; text-decoration:none; color:inherit; transition:transform .15s ease, box-shadow .15s ease}
.post-card:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(10,20,60,.12)}
.post-card h3{font-size:1.08rem; line-height:1.3}
.post-card p{color:var(--ink-2); font-size:.92rem; flex:1}
.post-card .more{color:var(--blue-deep); font-weight:700; font-size:.9rem}
.article{max-width:760px}
.article .page-head h1{max-width:none}
.related{margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line)}
.related h2{font-size:1.3rem; margin-bottom:1rem}
.toc{border:1px solid var(--line); border-radius:var(--radius-s); padding:1rem 1.2rem; margin:1.2rem 0 1.8rem; background:var(--bg-2); font-size:.92rem}
.toc b{display:block; margin-bottom:.4rem; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.toc ol{margin:0; padding-left:1.2rem}
.toc a{color:var(--ink-2); text-decoration:none}
.toc a:hover{color:var(--blue-deep)}
.faq-list details{margin-bottom:.7rem}
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:start}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr} }
.kv{display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.2rem; font-size:.98rem}
.kv dt{color:var(--ink-3); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; padding-top:.2rem}
.kv dd{margin:0}