@font-face {
    font-family: "Manrope";
    src: url("../assets/fonts/manrope-300.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../assets/fonts/manrope-400.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../assets/fonts/manrope-500.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("../assets/fonts/manrope-600.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Denistina";
    src: url("../assets/fonts/ofont.ru_Denistina.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
:root{
    --blue:#1f4fd1;
    --blue-dark:#1840ad;
    --blue-deep:#16307e;
    --ink:#16203a;
    --muted:#6b7585;
    --line:#e6ebf2;
    --bg:#ffffff;
    --bg-alt:#f5f8fc;
    --radius:16px;
    --shadow:0 18px 50px -24px rgba(22,48,126,.35);
    --container:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;font-family:"Manrope","Helvetica Neue",Arial,sans-serif;
    color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.icon{width:22px;height:22px;flex:none}

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    padding:13px 24px;border-radius:12px;font-weight:700;font-size:15px;cursor:pointer;
    border:1.5px solid transparent;transition:.18s ease;white-space:nowrap;
}
.btn .icon{width:18px;height:18px}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 24px -10px rgba(31,79,209,.7)}
.btn-primary:hover{background:var(--blue-dark);transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(31,79,209,.8)}
.btn-primary:active{transform:translateY(0)}
.btn-outline{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-outline:hover{border-color:var(--blue);color:var(--blue)}
.btn-light{background:#fff;color:var(--blue)}
.btn-light:hover{background:#eef3ff}
.btn-lg{padding:16px 30px;font-size:16px}
.btn-block{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:baseline;gap:7px;line-height:1;white-space:nowrap}
.logo-main{font-family:"Manrope","Helvetica Neue",Arial,sans-serif;font-weight:300;font-size:30px;letter-spacing:0}
.logo-script{font-family:"Denistina","Brush Script MT","Segoe Script",cursive;font-weight:400;font-size:33px;color:var(--blue);letter-spacing:0}
.logo-sub{font-family:"Denistina","Brush Script MT","Segoe Script",cursive;font-size:22px;color:var(--blue);margin-top:-2px;margin-left:4px}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:24px;height:74px}
.nav{display:flex;gap:26px;margin-left:auto;font-weight:600;font-size:15px}
.nav a{color:#2b3650;transition:.15s}
.nav a:hover{color:var(--blue)}
.header-cta{margin-left:8px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;margin-left:auto;padding:6px}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px}

/* ---------- Hero ---------- */
.hero{
    padding-top:0;
    background:
        linear-gradient(90deg,#fff 0%,rgba(255,255,255,.98) 25%,rgba(255,255,255,.9) 39%,rgba(255,255,255,.42) 57%,rgba(255,255,255,.1) 100%),
        url("../images/hero-court.webp") center right/cover no-repeat;
}
.hero-grid{display:grid;grid-template-columns:minmax(320px,.62fr) 1fr;gap:50px;align-items:center;min-height:560px}
.hero-text{max-width:470px;animation:heroIn .8s cubic-bezier(.2,.7,.2,1) both}
.hero-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue);margin-bottom:18px}
.hero-eyebrow::before{content:"";width:28px;height:2px;background:var(--blue);border-radius:2px}
.hero-text h1{font-size:clamp(44px,5.2vw,70px);line-height:1.02;margin:0 0 22px;font-weight:300;letter-spacing:-1.5px}
.hero-text h1 b{font-weight:600}
.hero-script{font-family:"Denistina","Brush Script MT","Segoe Script",cursive;font-size:46px;color:var(--blue);margin-bottom:18px;line-height:1}
.hero-lead{font-size:18px;color:var(--muted);max-width:440px;margin:0 0 30px;line-height:1.6}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.hero-loc{display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:600}
.hero-loc .icon{color:var(--blue)}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- Features ---------- */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:0;padding-top:34px;padding-bottom:42px;border-top:1px solid rgba(22,32,58,.12);background:rgba(255,255,255,.82);backdrop-filter:blur(8px)}
.feature{display:flex;gap:14px;align-items:flex-start}
.feature-icon{width:46px;height:46px;border-radius:12px;background:#eef3ff;color:var(--blue);display:grid;place-items:center;flex:none}
.feature-title{font-weight:700;margin-bottom:3px}
.feature-text{font-size:14px;color:var(--muted)}

/* ---------- Blue banner ---------- */
.banner{background:linear-gradient(110deg,var(--blue-deep),var(--blue));color:#fff}
.banner-inner{display:flex;align-items:center;gap:36px;padding:42px 24px}
.banner-racket{width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;flex:none}
.banner-racket .icon{width:48px;height:48px}
.banner-body h2{font-size:32px;margin:0 0 6px;font-weight:800}
.banner-body p{margin:0 0 18px;opacity:.9}

/* ---------- Sections ---------- */
.section{padding:74px 0}
.section-tight{padding:30px 0 74px}
.section-title{text-align:center;font-size:38px;font-weight:800;margin:0 0 42px;letter-spacing:-.5px}
.script-accent{font-family:"Denistina","Brush Script MT","Segoe Script",cursive;color:var(--blue);font-weight:400;font-size:.8em}
.script-accent.light{color:#fff}
.mob-br{display:none}

/* ---------- Why ---------- */
.why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.why-card{border:1px solid var(--line);border-radius:var(--radius);padding:26px 20px;background:#fff;transition:.2s}
.why-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:transparent}
.why-icon{width:52px;height:52px;border-radius:13px;background:#eef3ff;color:var(--blue);display:grid;place-items:center;margin-bottom:16px}
.why-title{font-weight:700;margin-bottom:8px}
.why-text{font-size:14px;color:var(--muted)}

/* ---------- Gallery (портретная сетка) ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.gallery-item{
    position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden;
    background:linear-gradient(135deg,#dbe6fb,#9db8ee);background-size:cover;background-position:center;
    transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease;
}
.gallery-item::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to top,rgba(15,24,48,.4),transparent 52%);
    opacity:0;transition:opacity .4s ease;
}
.gallery-item:hover{transform:translateY(-5px) scale(1.015);box-shadow:var(--shadow);z-index:2}
.gallery-item:hover::after{opacity:1}

/* ---------- Pricing ---------- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:980px;margin:0 auto}
.price-card{position:relative;border:1px solid var(--line);border-radius:var(--radius);padding:34px 28px;background:#fff;text-align:left;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.price-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.price-card.is-popular{border-color:var(--blue);box-shadow:var(--shadow)}
.price-card.is-popular:hover{transform:translateY(-4px)}
.price-badge{position:absolute;top:-12px;left:28px;background:var(--blue);color:#fff;font-size:11px;font-weight:800;letter-spacing:.5px;padding:5px 12px;border-radius:20px}
.price-icon{width:52px;height:52px;border-radius:13px;background:#eef3ff;color:var(--blue);display:grid;place-items:center;margin-bottom:18px}
.price-title{font-weight:800;font-size:19px;margin-bottom:6px}
.price-desc{font-size:14px;color:var(--muted);margin-bottom:18px;min-height:40px}
.price-value{font-size:15px;color:var(--muted);margin-bottom:18px}
.price-value b{font-size:24px;color:var(--ink)}

/* ---------- CTA ---------- */
.cta{background:linear-gradient(110deg,var(--blue),var(--blue-deep));color:#fff}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:46px 24px;flex-wrap:wrap}
.cta h2{font-size:30px;margin:0;font-weight:800}

/* ---------- Footer ---------- */
.site-footer{background:#0f1830;color:#cfd6e6;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:26px;padding:48px 24px}
.footer-brand .logo-main{color:#fff}
.footer-brand .logo-script{color:#7aa2ff}
.footer-item{display:flex;gap:12px;align-items:flex-start}
.footer-icon{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.07);color:#7aa2ff;display:grid;place-items:center;flex:none}
.footer-title{display:block;color:#fff;font-weight:700;font-size:14px}
.footer-text{font-size:13px;color:#8b93a7;margin-top:2px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08)}
.footer-bottom-inner{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;font-size:13px;color:#8b93a7}
.socials{display:flex;gap:12px}
.socials a{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.07);display:grid;place-items:center;color:#cfd6e6;transition:.15s}
.socials a:hover{background:var(--blue);color:#fff}

/* ---------- Booking ---------- */
.booking-page{background:var(--bg-alt);min-height:70vh}
.booking-head{text-align:center;margin-bottom:30px}
.booking-head .section-title{margin-bottom:8px}
.booking-sub{color:var(--muted);margin:0}
.booking-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:start}
.booking-main,.booking-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.days-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:10px;margin-bottom:18px}
.day-pill{flex:none;width:66px;padding:10px 0;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;transition:.15s}
.day-pill:hover{border-color:var(--blue)}
.day-pill.is-active{background:var(--blue);border-color:var(--blue);color:#fff}
.day-wd{font-size:12px;text-transform:uppercase;opacity:.7}
.day-num{font-size:20px;font-weight:800}
.day-mo{font-size:12px;opacity:.7}
.slots-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px}
.slot{padding:12px 8px;border-radius:11px;border:1.5px solid var(--line);background:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:700;transition:.13s}
.slot small{font-weight:500;font-size:11px;color:var(--muted)}
.slot.is-free:hover{border-color:var(--blue);color:var(--blue)}
.slot.is-busy{background:#f3f5f9;color:#aab2c0;cursor:not-allowed}
.slot.is-busy small{color:#aab2c0}
.slot.is-selected{background:var(--blue);border-color:var(--blue);color:#fff}
.slot.is-selected small{color:#fff;opacity:.85}
.slots-empty{padding:30px;text-align:center;color:var(--muted)}
.slots-legend{display:flex;gap:18px;margin-top:16px;font-size:13px;color:var(--muted)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}
.dot.free{background:var(--blue)}.dot.busy{background:#cfd6e2}
.booking-card{position:sticky;top:90px}
.bk-summary{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:16px}
.bk-row{display:flex;justify-content:space-between;padding:5px 0;font-size:14px;color:var(--muted)}
.bk-row b{color:var(--ink)}
.bk-row.total{border-top:1px dashed var(--line);margin-top:6px;padding-top:11px;font-size:15px}
.field{display:block;margin-bottom:14px}
.field span{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.field em{color:var(--muted);font-weight:400;font-style:normal}
.field input,.field select,.field textarea{width:100%;padding:12px 13px;border:1.5px solid var(--line);border-radius:11px;font:inherit;font-size:15px;background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue)}
.form-error{color:#d23b3b;font-size:14px;margin:0 0 10px;font-weight:600}
.form-note{font-size:12px;color:var(--muted);margin:10px 0 0;text-align:center}

/* ---------- Success ---------- */
.success-page{background:var(--bg-alt);min-height:70vh;display:flex;align-items:center}
.success-card{max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:48px 36px;text-align:center;box-shadow:var(--shadow)}
.success-icon{width:72px;height:72px;border-radius:50%;background:#e8f6ee;color:#16a34a;display:grid;place-items:center;margin:0 auto 22px}
.success-icon .icon{width:38px;height:38px;stroke-width:2.2}
.success-card h1{font-size:28px;margin:0 0 12px}
.success-card p{color:var(--muted);margin:0 0 26px}
.success-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- Responsive ---------- */
@media(max-width:960px){
    .nav{display:none;position:absolute;top:74px;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:14px 24px;gap:14px}
    .nav.is-open{display:flex}
    .burger{display:flex}
    .header-cta{display:none}
    .hero{
        background:
            linear-gradient(180deg,#fff 0%,rgba(255,255,255,.96) 46%,rgba(255,255,255,.52) 72%,rgba(255,255,255,.18) 100%),
            url("../images/hero-court-first-screen.png") 58% bottom/cover no-repeat;
    }
    .hero-grid{grid-template-columns:1fr;gap:30px;min-height:620px;align-items:start;padding-top:48px}
    .hero-text h1{font-size:46px}
    .hero-script{font-size:38px}
    .features{grid-template-columns:repeat(2,1fr);gap:22px}
    .banner-inner{flex-direction:column;text-align:center;gap:18px}
    .why-grid{grid-template-columns:repeat(2,1fr)}
    .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
    .pricing{grid-template-columns:1fr;max-width:440px}
    .booking-layout{grid-template-columns:1fr}
    .booking-card{position:static}
    .footer-grid{grid-template-columns:1fr 1fr}
    .cta-inner{flex-direction:column;text-align:center}
    .section-title{font-size:30px}
    .mob-br{display:block}
}
@media(max-width:560px){
    .hero-grid{min-height:610px;padding-top:36px}
    .hero-text h1{font-size:42px}
    .hero-lead{font-size:16px;max-width:330px}
    .hero-actions .btn{width:100%}
    .features{grid-template-columns:1fr}
    .why-grid{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr}
}