:root{
    --aegean:#1f5e75;
    --midnight:#0d2b3a;
    --ink:#0a232e;
    --foam:#cfe8e6;
    --foam-40: rgba(207,232,230,.4);
    --sand:#efe9df;
    --sand-2:#e6dfd3;
    --terracotta:#c46b56;
    --shell:#f8f7f5;
    --white:#ffffff;
    --text:#22343c;
    --muted:#51656f;
    --shadow:0 8px 30px rgba(13,43,58,.15);
    --radius:14px;
    --radius-sm:10px;
    --transition: all .45s ease;
  }

  /* Base */
  *{ box-sizing:border-box; }
  html, body{ height:100%; }
  body{
    margin:0;
    font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    line-height:1.6;
    color:var(--text);
    background:
      radial-gradient(1200px 600px at 85% -10%, rgba(31,94,117,.10), transparent 60%),
      linear-gradient(180deg, var(--shell) 0%, #fbfbfb 30%, var(--sand) 100%);
  }
  img{ max-width:100%; height:auto; display:block; }
  a{ color:var(--aegean); text-decoration:none; }
  a:hover{ color:var(--midnight); }
  .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

  /* Focus styles for accessibility */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--foam);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--foam-40);
    border-radius: 6px;
  }

  /* Header & Nav */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(255,255,255,.75);
    backdrop-filter: blur(8px);
    border-bottom:1px solid rgba(13,43,58,.06);
  }
  header .wrap{
    max-width:1200px; margin:0 auto; padding:14px 20px;
    display:flex; align-items:center; justify-content:space-between; gap:18px;
  }
  .brand{
    display:flex; align-items:baseline; gap:.5rem;
  }
  .brand .logo{
    width:36px; height:36px; border-radius:50%;
    background: radial-gradient(65% 65% at 40% 40%, #3c91ac 0%, #1f5e75 60%, #0f3a4b 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 6px 16px rgba(13,43,58,.2);
  }
  .brand h1{
    margin:0; font-family: Georgia, "Times New Roman", Times, serif; font-weight:500;
    font-size:1.05rem; letter-spacing:.08em; color:var(--ink);
    text-transform:uppercase;
  }
  nav ul{
    list-style:none; margin:0; padding:0;
    display:flex; align-items:center; gap:14px;
  }
  nav ul li a{
    padding:8px 10px; border-radius:8px; color:var(--midnight);
    transition: var(--transition);
  }
  nav ul li a:hover{ background:rgba(31,94,117,.06); }
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:.5rem; padding:10px 16px; border:1px solid rgba(31,94,117,.6);
    border-radius:999px; color:var(--white); background:linear-gradient(180deg, #2c7e99, var(--aegean));
    text-transform:uppercase; font-size:.82rem; letter-spacing:.08em;
    box-shadow: 0 4px 16px rgba(31,94,117,.25), inset 0 0 0 1px rgba(255,255,255,.2);
    transition: var(--transition);
  }
  .btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(31,94,117,.33), 0 0 0 6px rgba(31,94,117,.12);
  }
  .btn.secondary{
    background:transparent; color:var(--aegean);
    border-color: var(--aegean);
    box-shadow: inset 0 0 0 1px rgba(31,94,117,.15);
  }
  .btn.secondary:hover{
    background:rgba(31,94,117,.08);
  }

  /* HERO */
  .hero{
    position:relative; isolation:isolate;
  }
  .hero .slider{
    position:relative; width:100%;
    height:clamp(280px, 55vh, 600px);
    overflow:hidden; border-radius: 0 0 var(--radius) var(--radius);
  }
  .hero .slider figure{
    position:absolute; inset:0; margin:0;
    opacity:0; animation: fade 18s infinite;
  }
  .hero .slider figure:nth-child(1){ animation-delay:0s; }
  .hero .slider figure:nth-child(2){ animation-delay:6s; }
  .hero .slider figure:nth-child(3){ animation-delay:12s; }
  @keyframes fade{
    0%{ opacity:0; }
    6%{ opacity:1; }
    33%{ opacity:1; }
    39%{ opacity:0; }
    100%{ opacity:0; }
  }
  .hero .slider img{
    width:100%; height:100%; object-fit:cover; filter:saturate(.95) contrast(1.05);
    transform: scale(1.04);
  }
  .hero .overlay{
    position:absolute; inset:0; z-index:2; pointer-events:none;
    background: linear-gradient(180deg, rgba(3,15,20,.35) 0%, rgba(3,15,20,.15) 30%, transparent 55%, rgba(255,255,255,0) 100%);
  }
  .hero .hero-inner{
    position:absolute; inset:0; z-index:3;
    display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
    gap:12px; padding:24px 20px 24px;
    color:var(--white);
  }
  .hero .kicker{
    display:inline-flex; align-items:center; gap:.5rem;
    font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
    background:rgba(255,255,255,.12); padding:6px 10px; border-radius:999px;
    border:1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(4px);
  }
  .hero h1{
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight:400; margin:0; font-size: clamp(1.6rem, 3.8vw, 3rem);
    text-shadow: 0 2px 18px rgba(0,0,0,.25);
  }
  .hero p{ margin:0 0 8px; max-width:680px; color:#f3fbfc; text-shadow: 0 1px 12px rgba(0,0,0,.25); }

  /* Main wrapper */
  main{ max-width:1200px; margin: 30px auto 0; padding: 0 20px; }

  /* Sections (cards) */
  .section{ margin: 38px 0 22px; }
  .section header{
    position:relative; background:none; border:none; padding:0; margin-bottom:16px;
  }
  .section h2{
    margin:0; font-family: Georgia, "Times New Roman", Times, serif;
    font-size: clamp(1.3rem, 2.3vw, 2rem); color:var(--ink);
  }
  .section p.sub{ margin:6px 0 0; color:var(--muted); }
  .grid{
    display:grid; gap:16px;
    grid-template-columns: 1fr;
  }
  @media (min-width:768px){
    .grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width:1200px){
    .grid{ grid-template-columns: repeat(3, 1fr); }
  }
  .card{
    background:var(--white); border:1px solid rgba(13,43,58,.08); border-radius: var(--radius);
    overflow:hidden; display:flex; flex-direction:column; transition: var(--transition);
    box-shadow: 0 2px 8px rgba(13,43,58,.06);
  }
  .card:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow);
  }
  .card .media{
    position:relative; aspect-ratio: 16 / 10; overflow:hidden;
  }
  .card .media img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
  .card:hover .media img{ transform: scale(1.06); }
  .card .badge{
    position:absolute; left:10px; top:10px;
    background:rgba(255,255,255,.85); border:1px solid rgba(31,94,117,.25);
    color:var(--aegean); padding:6px 10px; border-radius:999px;
    font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
    backdrop-filter: blur(4px);
  }
  .card .content{ padding:16px; display:flex; flex-direction:column; gap:8px; }
  .card h3{ margin:0; font-size:1.05rem; color:var(--ink); }
  .card p{ margin:0; color:var(--muted); }
  .card .more{
    margin-top:auto; display:inline-flex; align-items:center; gap:8px; padding-top:12px;
    color:var(--aegean); font-weight:600;
  }
  .card .more span{ transition: transform .35s ease; }
  .card:hover .more span{ transform: translateX(4px); }

  /* Section variations */
  /* Section #1 — sun-washed sand tone */
  .section-1{
    background: linear-gradient(180deg, rgba(239,233,223,.55), rgba(239,233,223,.0));
    padding: 18px 12px 10px; border-radius: var(--radius);
    border:1px solid rgba(13,43,58,.06);
  }
  .section-1 .badge{ background: #ffffff; border-color: #e2ddd3; color:#7e5c3e; }
  .section-1 .card{ background: #fffefc; }

  /* Section #2 — crisp white with terracotta accents */
  .section-2{
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(250,248,246,1) 100%);
    padding: 18px 12px 10px; border-radius: var(--radius);
    border:1px solid rgba(13,43,58,.05);
  }
  .section-2 .card{ border-color: rgba(196,107,86,.25); }
  .section-2 .badge{ background: #fff7f4; color: var(--terracotta); border-color: rgba(196,107,86,.35); }
  .section-2 .card:hover{ box-shadow: 0 10px 24px rgba(196,107,86,.16); }

  /* Section #3 — midnight with seafoam cards */
  .section-3{
    background: linear-gradient(180deg, #0d2b3a 0%, #114357 100%);
    padding: 22px 12px 16px; border-radius: var(--radius);
    border:1px solid rgba(255,255,255,.06);
    color:#e6f6f8;
  }
  .section-3 h2{ color:#e7fbff; }
  .section-3 p.sub{ color:#b7d1d6; }
  .section-3 .card{
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    color:#eaf6f7;
  }
  .section-3 .card h3{ color:#ffffff; }
  .section-3 .card p{ color:#d2e8ec; }
  .section-3 .badge{
    background: rgba(255,255,255,.18); color:#d8ffff; border-color: rgba(255,255,255,.35);
  }
  .section-3 .more{ color:#e6fbff; }
  .section-3 .card:hover{
    box-shadow: 0 14px 30px rgba(0,0,0,.35);
    transform: translateY(-3px);
  }

  /* Blog list */
  .blog-list{ max-width:1000px; margin:38px auto; padding: 0 10px; }
  .blog-list h2{
    font-family: Georgia, "Times New Roman", Times, serif; color: var(--ink);
    margin:0 0 10px;
  }
  .list-cards{
    list-style:none; margin:0; padding:0;
    display:grid; gap:10px;
  }
  .list-cards li a{
    display:grid; grid-template-columns: 120px 1fr; gap:14px; align-items:center;
    background:#ffffff; border:1px solid rgba(13,43,58,.08); border-radius: var(--radius-sm);
    padding:10px; transition: var(--transition);
  }
  .list-cards li a:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
  .list-cards img{ width:120px; height:80px; object-fit:cover; border-radius: 10px; }
  .list-cards h3{ margin:.2rem 0; font-size:1rem; color:var(--ink); }
  .list-cards p{ margin:0; color:var(--muted); font-size:.92rem; }

  /* Content center block */
  .content-center{
    max-width:860px; margin:44px auto; padding: 0 16px;
    display:flex; flex-direction:column; align-items:center;
  }
  .center-image{
    width:100%; border-radius: var(--radius); overflow:hidden;
    box-shadow: var(--shadow); border:1px solid rgba(13,43,58,.08);
  }
  .rating{
    margin:14px 0 12px; padding:8px 12px; border-radius:999px;
    background: #f0fbfb; color:#0a3c4f; border:1px solid rgba(31,94,117,.28);
    font-weight:600;
  }
  .divider{
    width:min(200px, 40%); height:2px; border:0; margin: 18px auto 26px;
    background: linear-gradient(90deg, rgba(31,94,117,0) 0%, rgba(31,94,117,.45) 50%, rgba(31,94,117,0) 100%);
  }
  .article-body h1{
    font-family: Georgia, "Times New Roman", Times, serif; color: var(--ink);
    font-size: clamp(1.4rem, 2.8vw, 2.1rem); margin:0 0 6px;
  }
  .meta{
    display:flex; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:.92rem; margin-bottom:12px;
  }
  .article-body [itemprop="articleBody"] p{ margin:0 0 14px; color:#2a3e46; }
  .article-body blockquote{
    margin:14px 0; padding:14px 16px; border-left:4px solid var(--aegean);
    background: #f3fbfb; color:#0d3747; border-radius: 0 10px 10px 0;
  }
  .prevnext{
    width:100%; display:flex; justify-content:space-between; gap:12px; margin:26px 0 34px;
  }
  .prevnext a{
    padding:10px 14px; border:1px solid rgba(31,94,117,.5); border-radius:10px;
    background:white; transition: var(--transition);
  }
  .prevnext a:hover{ box-shadow: 0 6px 18px rgba(31,94,117,.18); transform: translateY(-2px); }

  /* Comments */
  .comments{
    width:100%; margin: 10px 0 34px; background: #ffffff; border:1px solid rgba(13,43,58,.08);
    border-radius: var(--radius); padding:16px;
  }
  .comments h2{ margin:0 0 10px; font-size:1.2rem; }
  .comments-list{ min-height:44px; border:1px dashed rgba(13,43,58,.2); border-radius:8px; padding:10px; color:var(--muted); }
  .comment-form{
    margin-top:12px; display:grid; gap:10px;
  }
  .comment-form label{ font-weight:600; color: var(--midnight); font-size:.92rem; }
  .comment-form input, .comment-form textarea{
    appearance:none; width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(13,43,58,.2);
    background:#fbfbfb; transition: var(--transition); font-size:1rem; color:var(--text);
  }
  .comment-form input:focus, .comment-form textarea:focus{
    background:#ffffff; border-color: var(--aegean); box-shadow: 0 8px 22px rgba(31,94,117,.12);
  }
  .comment-form button{ justify-self:start; }

  /* Related */
  .related{
    width:100%; margin: 12px 0 44px;
  }
  .related h3{
    font-family: Georgia, "Times New Roman", Times, serif; margin:0 0 12px;
  }
  .related .rel-grid{
    display:grid; gap:12px; grid-template-columns:1fr;
  }
  .rel-card{
    display:flex; gap:12px; align-items:center; background:#ffffff;
    border:1px solid rgba(13,43,58,.08); padding:10px; border-radius: var(--radius-sm);
    transition: var(--transition);
  }
  .rel-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
  .rel-card img{ width:96px; height:72px; object-fit:cover; border-radius: 10px; }

  @media (min-width:768px){
    .related .rel-grid{ grid-template-columns: repeat(3, 1fr); }
  }

  /* Contacts */
  .contacts{
    max-width:1100px; margin: 30px auto 40px; padding: 0 16px;
    display:grid; gap:18px; grid-template-columns: 1fr;
  }
  .contact-card{
    background:#ffffff; border:1px solid rgba(13,43,58,.08); border-radius: var(--radius);
    padding:16px; box-shadow: 0 2px 8px rgba(13,43,58,.04);
  }
  .contact-card h3{ margin:0 0 8px; font-family: Georgia, "Times New Roman", Times, serif; }
  .form-grid{ display:grid; gap:10px; grid-template-columns: 1fr; }
  .form-grid input, .form-grid textarea, .form-grid select{
    width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(13,43,58,.2); background:#fbfbfb; transition: var(--transition);
  }
  .form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus{
    background:#fff; border-color: var(--aegean);
  }
  .map{
    width:100%; aspect-ratio: 16/9; border-radius: var(--radius); overflow:hidden; border:1px solid rgba(13,43,58,.1);
  }

  @media (min-width:768px){
    .contacts{ grid-template-columns: 1.2fr .8fr; }
    .contacts .span-2{ grid-column: span 2; }
  }

  /* Aside promo & Modal */
  aside{
    max-width:1200px; margin: 0 auto 40px; padding: 0 20px;
    display:grid; grid-template-columns:1fr; gap:16px;
  }
  .promo{
    background: linear-gradient(180deg, rgba(31,94,117,.08), rgba(31,94,117,.02));
    border:1px solid rgba(31,94,117,.16); border-radius: var(--radius); padding:14px;
  }
  .promo ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
  .promo a{
    display:flex; justify-content:space-between; align-items:center;
    background:#ffffff; border:1px solid rgba(31,94,117,.22); border-radius:10px; padding:10px 12px;
    color:var(--midnight); font-weight:600; transition: var(--transition);
  }
  .promo a:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }

  /* Modal (pure CSS, anchor target method) */
  .modal{
    position:fixed; inset:0; z-index:70; display:grid; place-items:center;
    background: rgba(13,43,58,.35);
    opacity:0; visibility:hidden; transition: var(--transition);
  }
  .modal:target{ opacity:1; visibility:visible; }
  .modal-box{
    width:min(92vw, 520px); background:#ffffff; border-radius:16px; border:1px solid rgba(13,43,58,.12);
    box-shadow: 0 40px 70px rgba(13,43,58,.35);
    padding:18px;
  }
  .modal-box h3{ margin:4px 0 12px; font-family: Georgia, "Times New Roman", Times, serif; }
  .modal-close{
    position:absolute; top:18px; right:20px; width:34px; height:34px; display:grid; place-items:center;
    border-radius:50%; background:#f4f7f8; color:#0d2b3a; border:1px solid rgba(13,43,58,.2);
    transition: var(--transition);
  }
  .modal-close:hover{ background:#eaf1f3; transform: rotate(8deg); }

  /* Footer */
  footer{
    background: linear-gradient(180deg, #0d2b3a 0%, #0a232e 100%);
    color:#d7eff3; margin-top:20px; padding:26px 20px;
  }
  footer .wrap{
    max-width:1200px; margin:0 auto; display:grid; gap:16px;
    grid-template-columns: 1fr;
  }
  footer h4{ margin:0; font-family: Georgia, "Times New Roman", Times, serif; color:#ffffff; }
  footer p{ margin:0; color:#cbe3e9; }
  footer .social{ display:flex; gap:12px; margin:6px 0 0; }
  footer .social a{
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:8px 12px; border:1px solid rgba(255,255,255,.25); border-radius:999px; color:#e7fbff;
    transition: var(--transition);
  }
  footer .social a:hover{ background:rgba(255,255,255,.08); box-shadow: 0 6px 18px rgba(255,255,255,.12); }
  footer small{ display:block; margin-top:10px; color:#a6c8d0; }

  @media (min-width:768px){
    footer .wrap{ grid-template-columns: 1.2fr .8fr; align-items:start; }
  }