:root{
    --ink:#0a1f2e;
    --deep:#0e3a59;
    --current:#1e9fb3;
    --spray:#8de5e9;
    --foam:#f1f7fa;
    --sand:#f5f7f9;
    --ring:#9be3ef;
    --accent:#19b6c6;
    --text:#0c2536;
    --muted:#4a667a;
    --card:#ffffff;
    --warn:#ff7a59;
    --shadow: 0 10px 30px rgba(10,31,46,.15);
    --radius: 14px;
    --radius-sm: 10px;
    --speed: .4s;
  }

  /* Reset + base */
  *,*::before,*::after{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color:var(--text);
    background:
      radial-gradient(1200px 500px at 120% -10%, rgba(30,159,179,.18), transparent 60%),
      radial-gradient(900px 400px at -10% -20%, rgba(13,62,89,.15), transparent 55%),
      linear-gradient(180deg, #f7fbfd 0%, #eef6f9 100%);
    line-height:1.55;
    min-height:100vh;
  }
  img{max-width:100%; display:block}
  a{color:var(--deep); text-decoration:none}
  a:hover{color:var(--current)}
  :focus-visible{outline:3px solid var(--ring); outline-offset:2px; border-radius:8px}

  /* Layout helpers */
  .wrap{width:min(1160px, 92%); margin-inline:auto}
  .grid{display:grid; gap:1rem}
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:.65rem 1rem; border-radius:999px; border:1px solid color-mix(in srgb, var(--current), #000 10%);
    color:var(--deep); background:rgba(255,255,255,.7); backdrop-filter: blur(6px);
    transition:transform var(--speed), box-shadow var(--speed), background var(--speed), border-color var(--speed);
    box-shadow: 0 8px 20px rgba(14,58,89,.08);
    font-weight:600; letter-spacing:.2px
  }
  .btn:hover{transform: translateY(-2px); box-shadow:0 14px 32px rgba(30,159,179,.22); border-color:var(--accent)}
  .btn.ghost{background:transparent}
  .btn.outline{background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.6))}
  .badge{
    display:inline-block; padding:.25rem .55rem; font-size:.74rem; border:1px solid rgba(30,159,179,.35);
    color:var(--deep); background:linear-gradient(180deg, #fff, #f6feff); border-radius:999px
  }

  /* Header */
  header{position:sticky; top:0; z-index:20}
  .topnav{
    display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    padding:.6rem .9rem; border-bottom:1px solid rgba(14,58,89,.08);
    background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.7));
    backdrop-filter: blur(10px);
  }
  .topnav .logo{
    font-weight:800; letter-spacing:.3px; color:var(--ink);
    display:flex; align-items:center; gap:.5rem
  }
  .topnav .logo::before{
    content:""; width:18px; height:18px; border-radius:50%;
    background: radial-gradient(circle at 40% 35%, var(--spray), var(--current) 60%, var(--deep) 100%);
    box-shadow: 0 0 0 4px rgba(30,159,179,.12), 0 8px 20px rgba(14,58,89,.25);
  }
  nav ul{display:none; list-style:none; gap:1rem; padding:0; margin:0}
  nav ul li a{padding:.45rem .6rem; border-radius:10px; transition:background var(--speed), color var(--speed)}
  nav ul li a:hover{background:rgba(30,159,179,.08); color:var(--ink)}
  .actions{display:flex; gap:.5rem}

  @media (min-width:768px){
    nav ul{display:flex}
  }

  /* HERO */
  .hero{
    position:relative; isolation:isolate;
    padding: clamp(1.5rem, 2vw, 2rem) 0 0;
    overflow:hidden;
  }
  .hero .wrap{
    display:grid; gap:1.2rem;
  }
  .hero-content{
    display:grid; gap:.75rem;
    padding: .8rem 0 0;
  }
  .hero h1{
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    line-height:1.15; margin:0; color:var(--ink);
    letter-spacing:.2px
  }
  .hero p{max-width:55ch; color:var(--muted); margin:.15rem 0 .75rem}
  .hero-cta{display:flex; gap:.6rem; flex-wrap:wrap}

  /* Current lines deco */
  .currents{
    position:absolute; inset:auto 0 0 0; height:180px; pointer-events:none; opacity:.65;
    background:
      repeating-linear-gradient( -6deg,
        rgba(25,182,198,.12) 0 2px,
        rgba(25,182,198,0) 2px 16px),
      radial-gradient(1200px 200px at 0% 100%, rgba(157,236,245,.25), transparent 60%);
    mask-image: linear-gradient(0deg, transparent 0%, #000 40%, #000 100%);
  }

  /* Slider */
  .slider{
    position:relative; width:100%;
    height:min(60vh, 600px); max-height:600px; border-radius: var(--radius);
    overflow:hidden; box-shadow: var(--shadow); background:#000;
  }
  .slides{display:flex; width:400%; height:100%; animation: slide 28s infinite cubic-bezier(.6,.04,.2,1)}
  .slides figure{position:relative; flex:1 0 100%; margin:0}
  .slides img{width:100%; height:100%; object-fit:cover; filter: contrast(1.05) saturate(1.05)}
  .slides figcaption{
    position:absolute; left:1rem; bottom:1rem; padding:.4rem .6rem; border-radius:10px;
    background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.6));
    color:var(--deep); font-size:.85rem; border:1px solid rgba(30,159,179,.25)
  }
  @keyframes slide{
    0%{transform:translateX(0)}
    20%{transform:translateX(0)}
    25%{transform:translateX(-100%)}
    45%{transform:translateX(-100%)}
    50%{transform:translateX(-200%)}
    70%{transform:translateX(-200%)}
    75%{transform:translateX(-300%)}
    95%{transform:translateX(-300%)}
    100%{transform:translateX(0)}
  }

  /* Sections */
  main{padding: 1.4rem 0 2.2rem}
  section{padding: 2rem 0}
  section header{margin-bottom:1rem}
  section h2{
    margin:0 0 .35rem; font-size: clamp(1.2rem, 2.3vw, 1.8rem); color:var(--ink)
  }
  section p.lead{margin:0; color:var(--muted)}
  .card-grid{display:grid; gap:1rem; grid-template-columns: 1fr}
  @media (min-width:768px){ .card-grid{grid-template-columns: repeat(2, 1fr)} }
  @media (min-width:1200px){ .card-grid{grid-template-columns: repeat(3, 1fr)} }

  .card{
    background:var(--card); border:1px solid rgba(14,58,89,.08); border-radius: var(--radius);
    overflow:hidden; display:flex; flex-direction:column; transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed), background var(--speed);
  }
  .card:hover{transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(25,182,198,.35)}
  .card .media{aspect-ratio: 16/9; overflow:hidden}
  .card .media img{width:100%; height:100%; object-fit:cover; transition: transform .6s ease}
  .card:hover .media img{transform:scale(1.04)}
  .card-body{padding: .9rem}
  .meta{display:flex; gap:.8rem; align-items:center; color:var(--muted); font-size:.85rem}

  /* Section differences */
  .one{background:linear-gradient(180deg, #ffffff 0%, #f7fcfe 100%)}
  .one .card .badge{background:linear-gradient(180deg, #ffffff, #f5fdff)}
  .two{background:linear-gradient(180deg, #eefbff 0%, #e6f6fb 100%); border-top:1px solid rgba(30,159,179,.12); border-bottom:1px solid rgba(30,159,179,.12)}
  .two .card{background:linear-gradient(180deg, #ffffff, #f9feff); border-color: rgba(30,159,179,.18)}
  .two .card:hover{background:#ffffff}
  .two .card .badge{border-color: rgba(14,58,89,.25)}
  .three{background:var(--sand)}
  .three .card{border-style:dashed; border-color: rgba(14,58,89,.15)}
  .three .card:hover{border-style:solid}

  /* Blog list */
  #blog{padding: 1.5rem 0 2rem}
  .blog-list{
    list-style:none; padding:0; margin:0; display:grid; gap:.9rem; grid-template-columns: 1fr;
  }
  @media (min-width:768px){ .blog-list{grid-template-columns: repeat(3, 1fr)} }
  .blog-list li{
    background:#fff; border:1px solid rgba(14,58,89,.1); border-radius: var(--radius-sm); overflow:hidden; transition: box-shadow var(--speed), transform var(--speed);
  }
  .blog-list li:hover{box-shadow: var(--shadow); transform: translateY(-3px)}
  .blog-list a{display:grid; grid-template-rows: 150px auto; color:inherit}
  .blog-list img{width:100%; height:100%; object-fit:cover}
  .blog-list .txt{padding:.75rem}
  .blog-list h4{margin:.1rem 0 .25rem; font-size:1rem}
  .blog-list .small{color:var(--muted); font-size:.86rem}

  /* Centered content article */
  .content-center{padding: 2rem 0}
  .content-center .centered-media{
    width: min(900px, 96%); margin: 0 auto 0; text-align:center;
  }
  .content-center .centered-media img{
    border-radius: var(--radius); box-shadow: var(--shadow)
  }
  .rating{margin:.65rem auto 1rem; width:min(900px, 96%); padding:.6rem .8rem; border-radius:999px; text-align:center;
    background:linear-gradient(180deg, #ffffff, #f6feff); border:1px solid rgba(25,182,198,.35); color:var(--deep); font-weight:600
  }
  .divider{width:min(900px, 96%); margin: 1rem auto 1.2rem; height:1px; background:linear-gradient(90deg, rgba(30,159,179,0), rgba(30,159,179,.35), rgba(30,159,179,0))}
  article.schema{width:min(900px, 96%); margin:0 auto; background:#fff; border:1px solid rgba(14,58,89,.08); border-radius: var(--radius); padding:1rem 1rem; box-shadow: 0 8px 24px rgba(14,58,89,.06)}
  article.schema h1{margin:.2rem 0 .5rem; font-size: clamp(1.4rem, 3vw, 2rem)}
  article.schema .byline{color:var(--muted); font-size:.9rem; margin:.1rem 0 .9rem}
  article.schema .body{display:grid; gap:1rem; color:#143246}
  article.schema img{border-radius:12px}

  /* Prev/Next */
  .pager{width:min(900px, 96%); margin:1rem auto 2rem; display:flex; justify-content:space-between; gap:.5rem}
  .pager a{padding:.55rem .9rem; border-radius:999px; border:1px solid rgba(14,58,89,.15); background:#fff}
  .pager a:hover{border-color:var(--accent); box-shadow:0 8px 20px rgba(25,182,198,.18)}

  /* Comments */
  .comments{width:min(900px, 96%); margin:0 auto 2rem}
  .comments h3{margin:0 0 .6rem}
  .comment-form{
    display:grid; gap:.6rem; background:#fff; padding:1rem; border:1px solid rgba(14,58,89,.1); border-radius: var(--radius-sm)
  }
  .comment-form input,.comment-form textarea{
    width:100%; padding:.65rem .7rem; border-radius:10px; border:1px solid rgba(14,58,89,.18); background:#fff; color:var(--text);
    transition: border-color var(--speed), box-shadow var(--speed)
  }
  .comment-form input:focus,.comment-form textarea:focus{border-color:var(--accent); box-shadow:0 0 0 4px rgba(25,182,198,.15)}
  .comment-form button{justify-self:start}

  /* Related */
  .related{width:min(1100px, 92%); margin:0 auto 2rem}
  .related .grid{grid-template-columns: 1fr; gap:.9rem}
  @media (min-width:768px){ .related .grid{grid-template-columns: repeat(3, 1fr)} }
  .related .item{
    background:#fff; border:1px solid rgba(14,58,89,.1); border-radius: var(--radius-sm); overflow:hidden
  }
  .related .item img{height:160px; object-fit:cover}
  .related .item .txt{padding:.75rem}
  .related .item h4{margin:.1rem 0 .25rem}

  /* Contacts */
  #contacts{padding:2rem 0; background: linear-gradient(180deg, #f6fcff, #eef7fa)}
  #contacts .wrap{display:grid; gap:1rem}
  .contact-grid{display:grid; gap:1rem; grid-template-columns: 1fr}
  @media (min-width:768px){ .contact-grid{grid-template-columns: 1.2fr 1fr} }
  .contact-form{
    background:#fff; border:1px solid rgba(14,58,89,.1); border-radius: var(--radius); padding:1rem; display:grid; gap:.6rem
  }
  .contact-form input,.contact-form textarea, .contact-form select{
    width:100%; padding:.6rem .7rem; border-radius:10px; border:1px solid rgba(14,58,89,.18)
  }
  .contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:var(--accent); box-shadow:0 0 0 4px rgba(25,182,198,.15)}
  .map{
    background:#fff; border:1px solid rgba(14,58,89,.1); border-radius: var(--radius); overflow:hidden
  }
  .contact-aside{
    display:grid; gap:.7rem; background:#fff; border:1px solid rgba(14,58,89,.1); border-radius: var(--radius); padding:1rem
  }

  /* Aside promos + modal */
  aside{padding:1.2rem 0}
  .promo{display:grid; gap:.6rem; grid-template-columns: 1fr; width:min(1160px, 92%); margin:0 auto}
  @media (min-width:768px){ .promo{grid-template-columns: repeat(4, 1fr)} }
  .promo a{
    background:linear-gradient(180deg, #fff, #f8feff); border:1px solid rgba(14,58,89,.12); padding:1rem; border-radius:14px; text-align:center; font-weight:600;
    box-shadow: 0 8px 24px rgba(14,58,89,.05); transition:transform var(--speed), box-shadow var(--speed), border-color var(--speed)
  }
  .promo a:hover{transform:translateY(-4px); box-shadow: var(--shadow); border-color:rgba(25,182,198,.35)}
  .modal{
    position:fixed; inset:0; display:none; place-items:center; padding:1rem; background: rgba(10,31,46,.45);
    backdrop-filter: blur(6px); z-index:50
  }
  .modal:target{display:grid}
  .modal .dialog{
    width:min(560px, 92%); background:#fff; border:1px solid rgba(14,58,89,.15); border-radius:16px; box-shadow:0 20px 60px rgba(10,31,46,.35);
    padding:1rem; display:grid; gap:.7rem
  }
  .modal .dialog h3{margin:.2rem 0 .1rem}
  .modal .dialog .close{
    position:absolute; inset: 12px 16px auto auto; background:#fff; border:1px solid rgba(14,58,89,.15); border-radius:50%; width:36px; height:36px; display:grid; place-items:center
  }
  .modal form{display:grid; gap:.6rem}
  .modal input,.modal textarea, .modal select{
    width:100%; padding:.6rem .7rem; border-radius:10px; border:1px solid rgba(14,58,89,.18)
  }

  /* Footer */
  footer{
    padding:2rem 0 2.5rem; background:linear-gradient(180deg, #0b2130, #071821); color:#e7f6fb
  }
  footer .wrap{display:grid; gap:1rem}
  .foot-grid{display:grid; gap:1rem; grid-template-columns: 1fr}
  @media (min-width:768px){ .foot-grid{grid-template-columns: 1.2fr .9fr .9fr} }
  footer h4{margin:.2rem 0 .4rem}
  .social{display:flex; gap:.9rem; align-items:center}
  .social a{color:#c7f3fa; border:1px solid rgba(141,229,233,.35); padding:.4rem .6rem; border-radius:999px; transition: all var(--speed)}
  .social a:hover{background:#143c52; border-color:#8de5e9}
  .copy{opacity:.8; font-size:.9rem}

  /* Utilities */
  .muted{color:var(--muted)}
  .sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0}