:root {
    --black: #0f0f0f;
    --dark: #181818;
    --gray: #6f6f6f;
    --soft: #f5f5f5;
    --line: #e5e5e5;
    --accent: #2f80ed;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--black);
    background: #fff;
}

.navbar {
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .2s ease, background .2s ease;
}
.navbar.scrolled { box-shadow: 0 14px 40px rgba(0,0,0,.08); }
.navbar-brand img { height: 40px; width: auto; }
.brand-text { font-weight: 800; letter-spacing: 1px; color: #111; }
.nav-link { color: #222; font-weight: 600; }
.nav-link:hover { color: var(--accent); }
.nav-cta {
    border: 1px solid #111;
    border-radius: 999px;
    padding-left: 18px !important;
    padding-right: 18px !important;
}
.nav-cta:hover { background:#111; color:#fff; }

.hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 75% 20%, rgba(47,128,237,.14), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #f3f3f3 45%, #e9e9e9 100%);
}
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .16;
    filter: grayscale(1) contrast(1.1);
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, black, transparent 90%);
}
.hero-content { position: relative; z-index: 2; }
.hero-logo { max-width: 174px; margin-bottom: 28px; }
.eyebrow {
    display:inline-flex;
    border:1px solid #cfcfcf;
    border-radius:999px;
    padding:8px 14px;
    margin-bottom:20px;
    color:#333;
    font-size:13px;
    font-weight:700;
    background:rgba(255,255,255,.7);
}
.hero h1 {
    font-size: clamp(42px, 7vw, 86px);
    font-weight: 800;
    letter-spacing: -3px;
    line-height: .95;
}
.hero p { color: #4d4d4d; font-size: 20px; max-width: 700px; margin-top: 24px; }
.btn-main { background: var(--black); color: #fff; border-radius: 999px; padding: 14px 28px; font-weight: 700; }
.btn-main:hover { background: var(--accent); color: #fff; }
.btn-outline-main { border: 1px solid var(--black); color: var(--black); border-radius: 999px; padding: 14px 28px; font-weight: 700; }
.btn-outline-main:hover { background: var(--black); color: #fff; }

section { padding: 96px 0; }
.section-title { font-size: clamp(32px, 4vw, 54px); font-weight: 800; letter-spacing: -2px; margin-bottom: 18px; }
.section-subtitle { color: var(--gray); max-width: 760px; font-size: 18px; }

.card-tech {
    height: 100%;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 34px;
    background: #fff;
    transition: .25s ease;
}
.card-tech:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,0,.08); border-color: #d0d0d0; }
.card-tech h4 { font-weight: 800; }
.card-tech p { color: #666; margin-bottom: 0; }
.icon-box { width: 54px; height: 54px; border-radius: 16px; background: #111; color: #fff; display: grid; place-items: center; font-size: 24px; margin-bottom: 24px; }

.dark-section { background: #111; color: #fff; }
.dark-section .section-subtitle, .dark-section p { color: #cfcfcf; }
.project-box { border: 1px solid rgba(255,255,255,.14); border-radius: 24px; padding: 30px; height: 100%; background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); }
.project-box h4 { font-weight: 800; }

.badge-soft { background: #f1f1f1; color: #222; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700; }
.trust-box { border: 1px solid var(--line); background: #fafafa; border-radius: 26px; padding: 36px; }
.class-box { border:1px solid var(--line); border-radius:24px; padding:28px; height:100%; background:#fff; }
.class-box h2 { font-weight: 900; }
.class-box p { color:#666; margin-bottom:0; }
.contact-box { border-radius: 30px; background: #111; color: #fff; padding: 56px; }
.contact-box p { color:#d5d5d5; }
footer { border-top: 1px solid var(--line); padding: 34px 0; color: #666; }

@media(max-width: 768px) {
    .hero { min-height: auto; padding: 130px 0 80px; }
    .hero-logo { max-width: 140px; }
    .contact-box { padding: 34px; }
    .brand-text { display:none; }
}

.contact-form .form-control {
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    color: #fff;
    border-radius: 14px;
    padding: 14px 16px;
}

.contact-form .form-control::placeholder {
    color: rgba(255,255,255,.62);
}

.contact-form .form-control:focus {
    background: rgba(255,255,255,.12);
    color: #fff;
    border-color: rgba(255,255,255,.45);
    box-shadow: none;
}


.brand-section {
    background: #fff;
}

.certificate-box {
    background: #f7f7f7;
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: 22px;
    text-align: center;
}

.certificate-box img {
    width: 100%;
    max-height: 760px;
    object-fit: contain;
    border-radius: 14px;
    pointer-events: none;
    user-select: none;
}

.class-box-large {
    text-align: left;
    height: 100%;
    padding: 28px;
}

.class-box-large h2 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 6px;
}

.class-box-large h5 {
    font-weight: 800;
    margin-bottom: 14px;
}

.class-box-large p {
    color: #5f6875;
    line-height: 1.65;
    margin-bottom: 0;
}

.brand-note {
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 22px 26px;
    background: #fafafa;
    color: #444;
    line-height: 1.8;
}