:root{
    --rose-50:#fff5f7;
    --rose-100:#ffeef2;
    --rose-200:#ffd9e1;
    --rose-300:#ffb7c7;
    --rose-500:#e07b95;
    --berry-700:#6b2c34;
    --mint-50:#effbf6;
    --mint-100:#d9f5ea;
    --mint-300:#aee7d2;
    --mint-500:#60c7a2;
    --cream:#fffdf8;
    --ink:#1f2a37;
    --ink-60:rgba(31,42,55,0.6);
    --shadow:0 8px 22px rgba(31,42,55,0.08);
    --shadow-strong:0 20px 40px rgba(31,42,55,0.15);
    --radius-1:10px;
    --radius-2:16px;
    --radius-3:24px;
    --transition:all .35s ease;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family: "Segoe UI", "Nunito", "Helvetica Neue", Arial, sans-serif;
    color:var(--ink);
    background: linear-gradient(180deg, var(--cream), var(--rose-50) 70%, #fff 100%);
    line-height:1.55;
  }

  img{max-width:100%; display:block; height:auto}
  a{color:var(--berry-700); text-decoration:none}
  a:hover{color:var(--rose-500)}
  :focus-visible{outline:3px solid var(--mint-500); outline-offset:2px; border-radius:8px}

  .container{width:100%; max-width:1200px; margin-inline:auto; padding: 0 20px}

  /* Header */
  header{
    position:sticky; top:0; z-index:1000;
    background: rgba(255, 253, 248, 0.85);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom:1px solid rgba(224,123,149,0.15);
  }
  .header-inner{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    min-height:68px;
  }
  .brand{display:flex; align-items:center; gap:12px}
  .logo{
    width:36px; height:36px; border-radius:50%;
    background: radial-gradient(circle at 40% 40%, var(--rose-300), var(--rose-500) 70%);
    box-shadow: inset 0 0 0 2px #fff8, var(--shadow);
    position:relative;
  }
  .logo::after{
    content:"";
    position:absolute; inset:8px 9px 10px 8px; border-radius:50% 50% 46% 46%;
    background: linear-gradient(180deg, #fff, #ffe6ed);
    box-shadow: inset 0 -3px 6px #0000000f;
    /* a soft gum silhouette */
  }
  .brand .title{
    display:flex; flex-direction:column; line-height:1.1
  }
  .brand .title strong{font-size:1.05rem; letter-spacing:.2px}
  .brand .title span{font-size:.8rem; color:var(--ink-60)}

  nav ul{display:flex; gap:16px; list-style:none; margin:0; padding:0; align-items:center}
  nav a{
    display:inline-flex; align-items:center; padding:8px 10px; border-radius:999px; font-size:.95rem;
    transition:var(--transition)
  }
  nav a[aria-current="page"]{color:#fff; background:var(--berry-700)}
  .btn{
    --bg: #fff; --bd: rgba(224,123,149,0.45); --txt: var(--berry-700);
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:10px 14px; border:1px solid var(--bd); color:var(--txt);
    background:var(--bg);
    border-radius:999px; box-shadow: var(--shadow);
    transition: var(--transition);
    font-weight:600;
  }
  .btn:hover{box-shadow:0 0 0 4px rgba(224,123,149,0.12), var(--shadow-strong)}
  .btn-cta{
    --bg: linear-gradient(180deg, var(--rose-300), var(--rose-500));
    --bd: transparent; --txt:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,.08)
  }
  .btn-ghost{
    --bg:#ffffff; --bd: rgba(96,199,162,0.45); --txt: var(--ink);
  }

  /* HERO */
  .hero{
    position:relative; overflow:hidden;
    padding: clamp(24px, 4vw, 40px) 0 10px;
    background:
      radial-gradient(800px 300px at 80% -10%, rgba(96,199,162,0.12), transparent 60%),
      radial-gradient(600px 220px at 20% 10%, rgba(224,123,149,0.10), transparent 60%);
  }
  .hero-inner{
    display:grid; gap:24px; align-items:center;
  }
  .hero h1{
    font-size: clamp(1.8rem, 2.2rem + 1vw, 3rem);
    margin:0 0 8px; letter-spacing:.2px;
  }
  .hero p{margin:0 0 18px; color:var(--ink-60)}
  .hero .actions{display:flex; gap:12px; flex-wrap:wrap}

  /* Slider */
  .slider{
    position:relative;
    height: clamp(340px, 60vh, 600px);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-strong);
    overflow:hidden;
  }
  .slides{display:flex; width:300%; height:100%; transition: transform .6s ease}
  .slides figure{
    width:100%; height:100%; margin:0; position:relative;
  }
  .slides img{width:100%; height:100%; object-fit:cover}
  .slides figcaption{
    position:absolute; left:16px; bottom:16px;
    background: rgba(255,255,255,0.78);
    color:var(--ink); padding:10px 12px; border-radius:10px; font-size:.95rem;
    box-shadow:var(--shadow);
  }
  .slider input{position:absolute; left:-9999px}
  .nav-dots{
    position:absolute; display:flex; gap:8px; bottom:12px; right:12px; z-index:2;
    background: rgba(31,42,55,0.18); padding:8px 10px; border-radius:999px; backdrop-filter:blur(4px)
  }
  .nav-dots label{
    width:10px; height:10px; background:#fff; border-radius:50%;
    cursor:pointer; box-shadow:inset 0 0 0 2px rgba(0,0,0,.08);
    transition:transform .3s ease, background .3s ease;
  }
  #s1:checked ~ .slides{transform:translateX(0)}
  #s2:checked ~ .slides{transform:translateX(-100%)}
  #s3:checked ~ .slides{transform:translateX(-200%)}
  #s1:checked ~ .nav-dots label[for="s1"],
  #s2:checked ~ .nav-dots label[for="s2"],
  #s3:checked ~ .nav-dots label[for="s3"]{transform:scale(1.2); background:var(--rose-300)}

  /* Sections */
  main{display:block}
  section{padding: 40px 0}
  section header h2{margin:0 0 6px}
  section header p{margin:0; color:var(--ink-60)}
  .grid{
    margin-top:18px;
    display:grid; gap:16px;
    grid-template-columns:1fr;
  }
  @media (min-width:768px){
    .hero-inner{grid-template-columns: 1.1fr 1fr}
    .grid{grid-template-columns: repeat(2, 1fr)}
  }
  @media (min-width:1200px){
    .grid{grid-template-columns: repeat(3, 1fr)}
  }
  .card{
    background:#fff; border:1px solid rgba(31,42,55,0.06); border-radius:16px; overflow:hidden;
    box-shadow: var(--shadow);
    display:flex; flex-direction:column; transition: var(--transition);
    min-height:100%;
  }
  .card:hover{transform: translateY(-4px); box-shadow: var(--shadow-strong)}
  .card .media{aspect-ratio: 16/10; background:var(--rose-100)}
  .card .body{padding:14px 14px 16px}
  .card .eyebrow{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--berry-700)}
  .card h3{margin:6px 0 8px; font-size:1.05rem}
  .card p{margin:0 0 10px; color:var(--ink-60)}
  .meta{display:flex; gap:10px; align-items:center; font-size:.85rem; color:var(--ink-60)}
  .meta .dot{width:6px; height:6px; border-radius:50%; background:var(--mint-300)}
  .card .cta{margin-top:auto; padding:0 14px 16px}
  .card .cta a{font-weight:600}

  /* Section palettes */
  .sec-soft{background:linear-gradient(180deg, var(--rose-50), #fff)}
  .sec-soft .card:hover{box-shadow:0 8px 26px rgba(224,123,149,0.18)}
  .sec-mint{background:linear-gradient(180deg, var(--mint-50), #fff)}
  .sec-mint .card .eyebrow{color:var(--mint-500)}
  .sec-mint .card:hover{box-shadow:0 8px 26px rgba(96,199,162,0.22)}
  .sec-ink{background:linear-gradient(180deg, #f7fafc, #fff)}
  .sec-ink .card{border-color:rgba(31,42,55,0.08)}
  .sec-ink .card .eyebrow{color:#445}
  .sec-ink .card:hover{box-shadow:0 8px 26px rgba(31,42,55,0.2)}

  /* Blog list */
  .blog-list{padding:36px 0; background:linear-gradient(180deg, #fff, var(--rose-50))}
  .post-list{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:12px}
  @media (min-width:768px){.post-list{grid-template-columns:repeat(2,1fr)}}
  @media (min-width:1200px){.post-list{grid-template-columns:repeat(3,1fr)}}
  .post-list li a{
    display:grid; grid-template-columns: 120px 1fr; gap:12px; align-items:center;
    background:#fff; border:1px solid rgba(31,42,55,0.06); border-radius:14px; padding:10px;
    transition:var(--transition); box-shadow:var(--shadow);
  }
  .post-list li a:hover{transform: translateY(-3px); box-shadow:var(--shadow-strong)}
  .post-list img{width:120px; height:80px; object-fit:cover; border-radius:10px}

  /* Content article */
  .content-wrap{padding:44px 0}
  .prose{
    width:min(760px, 100%);
    margin-inline:auto;
    background:#fff; border:1px solid rgba(31,42,55,0.06); border-radius:20px;
    box-shadow:var(--shadow); padding: clamp(16px, 2.5vw, 28px)
  }
  .prose .center-img{display:flex; justify-content:center; margin: 8px 0 10px}
  .rating{
    margin:6px auto 12px; width:max-content;
    padding:8px 12px; border-radius:999px;
    border:1px solid rgba(96,199,162,0.5); background:linear-gradient(180deg, #fff, var(--mint-100));
    box-shadow: var(--shadow); font-weight:600; color:#114c3f
  }
  .divider{border:0; height:1px; background:linear-gradient(90deg, transparent, rgba(31,42,55,0.12), transparent); margin:14px 0}

  .prev-next{display:flex; justify-content:space-between; gap:10px; margin:18px 0}
  .prev-next a{padding:10px 12px; border:1px solid rgba(31,42,55,0.12); border-radius:12px; background:#fff; box-shadow:var(--shadow)}
  .comments{margin-top:18px; border-top:1px dashed rgba(31,42,55,0.18); padding-top:16px}
  .comments h3{margin:0 0 10px}
  .comments .empty{color:var(--ink-60); font-style:italic; margin-bottom:12px}
  .comments form{
    display:grid; gap:10px; background:var(--rose-50); border:1px solid rgba(224,123,149,0.2);
    border-radius:12px; padding:12px
  }
  .comments input, .comments textarea{
    width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(31,42,55,0.15)
  }

  /* Related */
  .related{padding: 24px 0 6px}
  .related .row{
    display:grid; gap:12px; grid-template-columns:1fr;
  }
  @media (min-width:768px){.related .row{grid-template-columns:repeat(3,1fr)}}
  .related .card-mini{
    background:#fff; border:1px solid rgba(31,42,55,0.06); border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
  }
  .related .card-mini img{height:140px; width:100%; object-fit:cover}
  .related .card-mini .txt{padding:10px}

  /* Contacts */
  .contacts{
    background:linear-gradient(180deg, var(--mint-50), #fff);
    padding: 36px 0 44px;
  }
  .contacts .grid2{
    display:grid; gap:18px; grid-template-columns: 1fr;
  }
  @media (min-width:768px){.contacts .grid2{grid-template-columns: 1.2fr .8fr}}
  .contacts form{
    display:grid; gap:10px; background:#fff; border:1px solid rgba(31,42,55,0.06); border-radius:16px; padding:14px; box-shadow:var(--shadow);
  }
  .contacts input, .contacts textarea, .contacts select{
    padding:10px 12px; border-radius:10px; border:1px solid rgba(31,42,55,0.15)
  }
  .contacts .info{
    display:grid; gap:12px;
  }
  .contacts .map{
    overflow:hidden; border-radius:16px; box-shadow:var(--shadow)
  }

  /* Aside / Promo + Modal */
  aside{padding: 30px 0 16px}
  .promos{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
  }
  @media (min-width:768px){.promos{grid-template-columns: repeat(4, 1fr)}}
  .promo{
    padding:12px; border-radius:14px; background:#fff; border:1px solid rgba(31,42,55,0.06);
    text-align:center; box-shadow:var(--shadow);
    transition:var(--transition)
  }
  .promo:hover{transform:translateY(-3px); box-shadow:var(--shadow-strong)}
  .promo small{display:block; color:var(--ink-60)}

  /* Modal (CSS only with :target) */
  .modal{
    position:fixed; inset:0; display:none; place-items:center; padding:20px; z-index:1200;
    background: rgba(31,42,55,0.35);
  }
  .modal:target{display:grid}
  .modal .dialog{
    width:min(560px, 96vw); background:#fff; border-radius:18px; box-shadow: var(--shadow-strong);
    padding:16px; border:1px solid rgba(31,42,55,0.12)
  }
  .modal .dialog header{
    position:relative; background:transparent; border:0; padding:0 0 8px; margin:0 0 8px;
  }
  .modal .dialog h3{margin:0}
  .modal .close{
    position:absolute; right:0; top:0; display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:999px; border:1px solid rgba(31,42,55,0.12); background:#fff;
    transition:var(--transition)
  }
  .modal .close:hover{box-shadow:var(--shadow)}
  .modal form{display:grid; gap:10px}
  .modal input, .modal textarea, .modal select{padding:10px 12px; border:1px solid rgba(31,42,55,0.15); border-radius:10px}

  /* Footer */
  footer{
    background: linear-gradient(180deg, #fff, var(--rose-100));
    border-top:1px solid rgba(224,123,149,0.25);
    margin-top:6px;
  }
  .footer-inner{
    display:grid; gap:16px; padding:18px 0;
  }
  @media (min-width:768px){
    .footer-inner{grid-template-columns:1.2fr .8fr}
  }
  .slogan{
    font-weight:800; font-size:1.2rem; color:var(--berry-700); margin:0 0 6px
  }
  .about{color:var(--ink-60)}
  .social{
    display:flex; gap:12px; align-items:center; margin: 10px 0
  }
  .social a{
    display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
    border-radius:50%; border:1px solid rgba(31,42,55,0.12); background:#fff; box-shadow:var(--shadow)
  }
  .copy{font-size:.9rem; color:var(--ink-60)}