/* ------------------------------
       Design System
    --------------------------------*/
    :root {
       --bg: #f4f7fb;
       --surface: #ffffff;
       --text: #0f172a;
       /* slate-900 */
       --muted: #5b677c;
       /* slate-500 */
       --line: #e6ebf3;
       /* subtle borders */
       --primary: #2f6bff;
       /* brand blue */
       --primary-600: #2a5be8;
       --primary-700: #2248bf;
       --accent: #00c2a8;
       --star: #ffb400;
       --chip: #f1f5ff;
       --chip-text: #2947a9;
       --shadow: 0 8px 30px rgba(15, 23, 42, .06);
       --radius: 14px;
       --radius-lg: 18px;
       --container: 1180px;
    }

    /* Reset-ish */
    *,
    *::before,
    *::after {
       box-sizing: border-box
    }

    html,
    body {
       height: 100%
    }

    body {
       margin: 0;
       font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
       color: var(--text);
       background: var(--bg);
       -webkit-font-smoothing: antialiased;
       text-rendering: optimizeLegibility;
    }

    img {
       max-width: 100%;
       display: block
    }

    a {
       color: inherit;
       text-decoration: none
    }

    .container {
       max-width: var(--container);
       margin: 0 auto;
       padding-inline: 20px
    }

    .btn {
       display: inline-flex;
       align-items: center;
       gap: .5rem;
       border-radius: 12px;
       padding: .8rem 1rem;
       font-weight: 600;
       border: 1px solid transparent;
       cursor: pointer;
       transition: .2s ease;
       white-space: nowrap
    }

    .btn-primary {
       background: var(--primary);
       color: #fff
    }

    .btn-primary:hover {
       background: var(--primary-600)
    }

    .btn-outline {
       background: #fff;
       border-color: #dbe2ef;
       color: var(--text)
    }

    .btn-outline:hover {
       border-color: #c9d3ea;
       background: #f8fbff
    }

    .chips {
       display: flex;
       flex-wrap: wrap;
       gap: .5rem;
       margin-top: .6rem
    }

    .chip {
       background: var(--chip);
       color: var(--chip-text);
       border: 1px solid #dbe7ff;
       padding: .25rem .5rem;
       border-radius: 999px;
       font-size: .72rem;
       font-weight: 600
    }

    .stars {
       display: inline-flex;
       gap: 2px;
       vertical-align: middle
    }

    .star {
       width: 16px;
       height: 16px;
       color: var(--star)
    }

    .muted {
       color: var(--muted)
    }

    .card {
       background: var(--surface);
       border: 1px solid var(--line);
       border-radius: var(--radius);
       box-shadow: var(--shadow)
    }

    .section {
       padding: 72px 0
    }

    h1,
    h2,
    h3 {
       line-height: 1.2;
       margin: 0 0 .6rem
    }

    h1 {
       font-size: clamp(2rem, 4vw + .5rem, 3rem);
       font-weight: 800
    }

    h2 {
       font-size: clamp(1.6rem, 1.3vw + 1rem, 2rem);
       font-weight: 800
    }

    h3 {
       font-size: 1.1rem;
       font-weight: 800
    }

    /* ------------------------------
       Header
    --------------------------------*/
    header {
       position: sticky;
       top: 0;
       z-index: 50;
       background: #fff;
       border-bottom: 1px solid var(--line);
    }

    .nav {
       display: flex;
       align-items: center;
       justify-content: space-between;
       height: 70px;
       gap: 18px
    }

    .brand {
       display: flex;
       align-items: center;
       gap: .6rem;
       font-weight: 900
    }

    .brand-mark {
       width: 26px;
       height: 26px;
       border-radius: 8px;
       background: linear-gradient(135deg, var(--primary), #79a0ff)
    }

    nav ul {
       display: flex;
       gap: 22px;
       list-style: none;
       margin: 0;
       padding: 0;
       color: #3a4a66
    }

    nav a {
       font-weight: 600;
       opacity: .9
    }

    nav a:hover {
       opacity: 1
    }

    .search {
       flex: 1;
       display: flex;
       justify-content: center
    }

    .search input {
       width: min(440px, 100%);
       height: 42px;
       border: 1px solid var(--line);
       border-radius: 12px;
       padding: 0 14px 0 40px;
       background: #f8fbff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%2364809d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>') no-repeat 12px center;
       outline: none
    }

    .auth {
       display: flex;
       align-items: center;
       gap: 10px
    }

    .btn-login {
       padding: .6rem .9rem
    }

    .btn-sign {
       padding: .6rem .9rem;
       background: #ecf2ff;
       border-color: #cfe0ff;
       color: #2747a8
    }

    .btn-sign:hover {
       background: #e3ecff
    }

    /* ------------------------------
       Hero
    --------------------------------*/
    .hero {
       display: grid;
       grid-template-columns: 1.08fr .92fr;
       align-items: center;
       gap: 40px;
       padding: 64px 0
    }

    .lead {
       font-size: 1.05rem;
       color: #425572;
       max-width: 48ch;
       margin: 10px 0 20px
    }

    .cta {
       display: flex;
       gap: 12px;
       flex-wrap: wrap
    }

    .illus {
       aspect-ratio: 4 / 3;
       background: linear-gradient(180deg, #fff, #f2f6ff);
       border: 1px solid var(--line);
       border-radius: var(--radius-lg);
       padding: 16px;
       box-shadow: var(--shadow);
       position: relative
    }

    /* simple decorative illustration */
    .illus svg {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%
    }

    /* ------------------------------
       Tutors
    --------------------------------*/
    .tutors-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 22px;
       margin-top: 28px
    }

    .tutor {
       padding: 18px
    }

    .avatar {
       width: 84px;
       height: 84px;
       border-radius: 999px;
       background: linear-gradient(180deg, #eaf1ff, #d5e2ff);
       margin: 10px auto 6px;
       position: relative
    }

    .status {
       position: absolute;
       right: 8px;
       bottom: 8px;
       width: 16px;
       height: 16px;
       background: #2ad38b;
       border: 2px solid #fff;
       border-radius: 999px
    }

    .tutor h4 {
       margin: 6px 0 2px;
       font-size: 1rem;
       text-align: center
    }

    .subject {
       font-size: .78rem;
       color: #6b7a93;
       text-align: center;
       margin-bottom: 8px
    }

    .rating {
       display: flex;
       align-items: center;
       gap: 6px;
       justify-content: center;
       font-size: .78rem;
       margin: 6px 0
    }

    .tutor .chips {
       justify-content: center
    }

    .tutor .btn {
       margin-top: 10px;
       justify-content: center;
       width: 100%;
       padding: .55rem .8rem;
       font-size: .9rem
    }

    /* ------------------------------
       Features
    --------------------------------*/
    .features-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 22px;
       margin-top: 24px
    }

    .feature {
       padding: 20px
    }

    .icon {
       width: 40px;
       height: 40px;
       border-radius: 12px;
       display: grid;
       place-items: center;
       background: #eef3ff;
       color: #2747a8;
       margin-bottom: 10px
    }

    /* ------------------------------
       Testimonials
    --------------------------------*/
    .testimonials-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 22px;
       margin-top: 26px
    }

    .testimonial {
       padding: 18px
    }

    .person {
       display: flex;
       align-items: center;
       gap: 12px
    }

    .avatar-sm {
       width: 42px;
       height: 42px;
       border-radius: 999px;
       background: linear-gradient(180deg, #eaf1ff, #d5e2ff)
    }

    .quote {
       margin-top: 10px;
       font-size: .95rem;
       color: #3b4a66;
       letter-spacing: .01em
    }

    /* ------------------------------
       CTA Banner
    --------------------------------*/
    .cta-band {
       background: var(--primary);
       color: #fff;
       border-radius: 20px;
       padding: 42px 24px;
       position: relative;
       overflow: hidden
    }

    .cta-band .strip {
       position: absolute;
       inset: auto -40px -60px auto;
       width: 380px;
       height: 220px;
       background: radial-gradient(120px 120px at 30% 40%, rgba(255, 255, 255, .2), transparent), radial-gradient(150px 120px at 70% 10%, rgba(255, 255, 255, .18), transparent);
       transform: rotate(-8deg);
       opacity: .7
    }

    .cta-band h2 {
       font-size: clamp(1.6rem, 2.4vw + .6rem, 2.1rem)
    }

    .cta-actions {
       display: flex;
       align-items: center;
       gap: 8px;
       margin-top: 16px
    }

    .cta-actions input {
       height: 46px;
       border: none;
       border-radius: 12px;
       padding: 0 14px;
       min-width: 280px;
       max-width: 100%
    }

    .cta-actions .btn {
       height: 46px
    }

    .cta-small {
       font-size: .8rem;
       opacity: .9;
       margin-top: 12px
    }

    /* ------------------------------
       Footer
    --------------------------------*/
    footer {
       background: #f9fafb;
       padding: 3rem 1rem;
       margin-top: 2rem;
    }

    .footer-container {
       max-width: 1200px;
       margin: auto;
       display: grid;
       grid-template-columns: repeat(5, 1fr);
       gap: 2rem;
    }

    .footer-container h4 {
       margin-bottom: 1rem;
       font-weight: 600;
    }

    .footer-container a {
       display: block;
       margin-bottom: 0.5rem;
       text-decoration: none;
       color: #555;
    }

    .footer-bottom {
       text-align: center;
       font-size: 0.9rem;
       color: #777;
       margin-top: 2rem;
    }

    /* ------------------------------
       Responsive
    --------------------------------*/
    @media (max-width: 1080px) {
       .hero {
          grid-template-columns: 1fr;
          gap: 24px
       }

       .search {
          display: none
       }

       .tutors-grid {
          grid-template-columns: repeat(2, 1fr)
       }

       .features-grid {
          grid-template-columns: repeat(2, 1fr)
       }

       .footer-top {
          grid-template-columns: 1fr
       }

       .footer-container {
          grid-template-columns: repeat(2, 1fr);
       }

    }

    @media (max-width: 720px) {
       .testimonials-grid {
          grid-template-columns: 1fr
       }

       .cols {
          grid-template-columns: 1fr 1fr
       }

       nav ul {
          display: none
       }

       .cta-actions {
          flex-direction: column;
          align-items: flex-start
       }

       .cta-actions input {
          width: 100%
       }

       .footer-container {
          grid-template-columns: 1fr;
       }
    }