/*    index design  */
/*=============================================================
    CSS INDEX
    =============================
    01. GENERAL STYLE (body, link color, SECTION TITLE, PRELOADER, BTN, SECTION PADDING etc)
 
  =============================================================*/
/*
* ----------------------------------------------------------------------------------------
* 01.GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/

:root {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #eef0f6;
  --text: #222222;
  /* */
  --muted: #696b76;
  /* red */
  --thm-red: #fb5c72;
  --border: #dedfe6;
  --accent: #0060df;
  --accent-2: #7c3aed;
  --shadow: 0 14px 40px rgba(25, 28, 45, .08);
  --radius: 20px;
}


* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 80% 5%, rgba(124,58,237,.09), transparent 28rem),
    var(--bg);
  line-height: 1.6;
  min-height: 100vh;
}


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

button, input {
    font: inherit; 
}

/* =========================
   HEADER
========================= */
 
 .site-header {
 position: sticky;
 top: 0;
 z-index; 1000;
 background: rgba(255, 255, 255, 0.94);
 backdrop-filter: blue(12px);
 border-bottom: 1px solid #e5e7eb;
 }
 
 .header-container {
     width: min(1200px, 94%);
     min-height: 72px;
     margin: auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
 
 .logo {
     font-size: 1.35rem;
     font-weight: 800;
     letter-spacing: -0.04em;
 }
 
 logo span {
     color: #666;
 }
 
 nav {
     display: flex;
     gap: 28px;
 }

nav a {
    color: #555;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.2s ease;
}
 
 nav a:hover {
     color: #000;
 }
 
 
 /* =========================
   PAGE 
========================= */


body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f5f6f8;
    color: #18181b;
    line-height: 1.6;
}


/* =========================
   HEADER
========================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #e5e7eb;
}


.header-container {
    width: min(1200px, 94%);
    min-height: 72px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.logo {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}


.logo span {
    color: #666;
}


nav {
    display: flex;
    gap: 28px;
}


nav a {
    color: #555;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.2s ease;
}


nav a:hover {
    color: #000;
}


/* =========================
   PAGE
========================= */

.page-container {
    width: min(1100px, 92%);
    margin: auto;
}


.intro {
    padding: 90px 0 60px;
}


.eyebrow {
    display: inline-block;

    margin-bottom: 15px;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;

    color: #777;
}


.intro h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1;
    letter-spacing: -0.06em;

    margin-bottom: 25px;
}


.intro p {
    max-width: 650px;

    color: #666;
    font-size: 1.08rem;
}


/* =========================
   LESSON CARD
========================= */

.lesson-card {
    background: #fff;

    border: 1px solid #e4e4e7;
    border-radius: 22px;

    padding: 40px;

    margin-bottom: 30px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.04);
}


.section-heading {
    display: flex;
    gap: 20px;

    margin-bottom: 35px;
}


.section-number {
    flex-shrink: 0;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: #18181b;
    color: #fff;

    font-size: 0.75rem;
    font-weight: 800;
}


.section-heading h2 {
    font-size: 1.8rem;
    margin-bottom: 6px;
}


.section-heading p {
    color: #707070;
    max-width: 700px;
}


/* =========================
   EXAMPLE BOX
========================= */

.example-box {
    border: 1px solid #e4e4e7;
    border-radius: 16px;
    overflow: hidden;
}


.example-header {
    padding: 22px 25px;

    background: #fafafa;

    border-bottom: 1px solid #e4e4e7;
}


.example-label,
.small-label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #888;
}


.example-header h3,
.control-card h3,
.checkbox-card h3 {
    font-size: 1.15rem;
}


/* =========================
   FORM
========================= */

.contact-form {
    padding: 28px;
}


.form-group {
    margin-bottom: 22px;
}


.form-group label,
.control-card > label {
    display: block;

    margin-bottom: 8px;

    font-size: 0.88rem;
    font-weight: 700;
}


.label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


#characterCount {
    color: #999;
    font-size: 0.75rem;
}


input[type="email"],
input[type="tel"],
textarea,
select {
    width: 100%;

    border: 1px solid #d4d4d8;
    border-radius: 10px;

    background: #fff;

    padding: 13px 14px;

    font: inherit;
    color: #18181b;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    border-color: #18181b;

    box-shadow:
        0 0 0 3px rgba(0, 0, 0, 0.08);
}


textarea {
    min-height: 140px;
    resize: vertical;
}


.submit-button {
    border: none;
    border-radius: 10px;

    padding: 13px 20px;

    background: #18181b;
    color: white;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


.submit-button:hover {
    transform: translateY(-2px);
    opacity: 0.88;
}


.form-message {
    margin-top: 15px;

    font-size: 0.9rem;
    font-weight: 600;
}


.form-message.success {
    color: #18794e;
}


.form-message.error {
    color: #b42318;
}


/* =========================
   CONTROLS
========================= */

.controls-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 22px;
}


.control-card,
.checkbox-card {
    padding: 25px;

    border: 1px solid #e4e4e7;
    border-radius: 16px;

    background: #fafafa;
}


.control-card h3,
.checkbox-card h3 {
    margin-bottom: 22px;
}


select {
    cursor: pointer;
}


/* =========================
   COLOR PREVIEW
========================= */

.color-preview {
    margin-top: 15px;

    min-height: 55px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #eee;

    font-size: 0.85rem;
    font-weight: 700;
}


/* =========================
   FIELDSET
========================= */

fieldset {
    border: none;
}


legend {
    margin-bottom: 12px;

    font-size: 0.85rem;
    color: #666;
}


.choice {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 10px;

    cursor: pointer;

    font-size: 0.9rem;
}


.choice input {
    width: 17px;
    height: 17px;

    accent-color: #18181b;
}


.selection-result {
    margin-top: 18px;

    padding: 10px 12px;

    border-radius: 8px;

    background: #f0f0f1;

    font-size: 0.8rem;
    color: #666;
}


/* =========================
   CHECKBOX
========================= */

.checkbox-card {
    margin-top: 22px;
}


.checkbox-grid {
    display: flex;
    flex-wrap: wrap;

    gap: 20px;
}


/* =========================
   TABLE
========================= */

.table-wrapper {
    width: 100%;

    overflow-x: auto;

    border: 1px solid #e4e4e7;
    border-radius: 14px;
}


table {
    width: 100%;

    border-collapse: collapse;

    min-width: 650px;
}


caption {
    text-align: left;

    padding: 20px;

    font-size: 1rem;
    font-weight: 800;

    background: #fafafa;

    border-bottom: 1px solid #e4e4e7;
}


th,
td {
    padding: 17px 20px;

    text-align: left;

    border-bottom: 1px solid #ededed;
}


th {
    background: #f7f7f7;

    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;

    color: #666;
}


td {
    font-size: 0.9rem;
}


tbody tr:hover {
    background: #fafafa;
}


tfoot td {
    border-bottom: none;

    background: #18181b;
    color: white;

    font-weight: 800;
}


/* =========================
   INFO NOTE
========================= */

.info-note {
    display: flex;
    gap: 16px;

    margin-top: 28px;
    padding: 20px;

    border-radius: 14px;

    background: #f5f5f5;
}


.info-icon {
    width: 30px;
    height: 30px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #18181b;
    color: white;

    font-weight: 800;
}


.info-note h3 {
    margin-bottom: 5px;

    font-size: 0.95rem;
}


.info-note p {
    color: #666;
    font-size: 0.88rem;
}


/* =========================
   FOOTER
========================= */

.site-footer {
    padding: 40px 20px;

    text-align: center;

    color: #888;

    font-size: 0.8rem;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 750px) {

    nav {
        gap: 15px;
    }


    .intro {
        padding: 60px 0 40px;
    }


    .lesson-card {
        padding: 25px;
        border-radius: 16px;
    }


    .controls-grid {
        grid-template-columns: 1fr;
    }


    .section-heading {
        gap: 14px;
    }


    .section-heading h2 {
        font-size: 1.45rem;
    }

}


@media (max-width: 500px) {

    .header-container {
        min-height: 62px;
    }


    nav {
        display: none;
    }


    .lesson-card {
        padding: 20px;
    }


    .contact-form {
        padding: 20px;
    }


    .intro h1 {
        font-size: 2.7rem;
    }

}