/* Shared public-site theme. Page-specific layouts and Bootstrap behaviour stay intact. */
:root {
    --dp-ink:#153b49;
    --dp-muted:#526f79;
    --dp-primary:#087e83;
    --dp-blue:#286b9b;
    --dp-line:#dce9e9;
    --dp-surface:#fff;
    --dp-radius:22px}

body {
    background:#f8fbfa;
    color:var(--dp-ink);
    font-size:16px;
    line-height:1.85}

h1,h2,h3,h4,h5 {
    letter-spacing:-.025em}
a {
    text-underline-offset:5px}
button,input,select,textarea {
    font:inherit}
img {
    max-width:100%}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
    outline:3px solid #247aa3;
    outline-offset:4px}

.skip-link {
    position:fixed;
    top:8px;
    right:16px;
    transform:translateY(-180%);
    z-index:1100;
    background:var(--dp-ink);
    color:white;
    padding:10px 20px;
    border-radius:10px}
.skip-link:focus {
    transform:none;
    color:white}

.main-header {
    background:rgba(255,255,255,.97);
    border-bottom:1px solid var(--dp-line);
    box-shadow:none;
    backdrop-filter:none}
.navbar {
    min-height:88px;
    padding:12px 0}
.navbar-brand {
    gap:10px;
    font-size:1.3rem;
    color:var(--dp-ink)!important;
    margin-inline-end:38px}
.navbar-brand img {
    border-radius:12px;
    object-fit:contain}
.navbar-brand span {
    line-height:1.4}
.navbar-brand small {
    display:block;
    font-size:.66rem;
    font-weight:500;
    color:var(--dp-muted);
    margin-top:5px;
    letter-spacing:0}

.navbar-nav {
    gap:5px}
.navbar-nav .nav-link {
    font-size:.9rem;
    padding:10px 13px!important;
    color:var(--dp-muted)!important;
    overflow:visible}
.navbar-nav .nav-link::before,.navbar-nav .nav-link::after {
    display:none}
.navbar-nav .nav-link i,.navbar-nav .nav-link svg {
    display:none}
.navbar-nav .nav-link.active,.navbar-nav .nav-link:hover {
    background:#eaf5f3;
    color:#07676d!important}
.btn-login,.btn-login:hover {
    background:#08777d;
    box-shadow:none;
    border-radius:12px;
    padding:12px 20px;
    font-size:.88rem}
.btn-login:hover {
    background:#065e65;
    transform:none}
.btn-login::before {
    display:none}
.btn-cart {
    min-height:44px;
    font-size:.86rem;
    border-radius:12px}
.cart-badge {
    animation:none}
.navbar-toggler {
    min-width:44px;
    min-height:44px;
    border-radius:12px}
.main-content {
    min-height:55vh}

.landing-page {
    --lp-text:var(--dp-ink);
    --lp-muted:var(--dp-muted)}
.landing-hero {
    padding:72px 0 42px;
    background:radial-gradient(ellipse at 18% 24%,#e2f1ef 0,transparent 48%);
    overflow:hidden}
.landing-badge {
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:.84rem;
    font-weight:600;
    color:#14736f;
    background:#e7f4ee;
    border:1px solid #cce6dc;
    border-radius:30px;
    padding:6px 14px;
    margin-bottom:22px}
.landing-badge svg {
    width:16px;
    height:16px}
.landing-title {
    font-size:clamp(2.2rem,4vw,3.65rem);
    line-height:1.5;
    font-weight:800;
    color:var(--dp-ink);
    max-width:550px;
    margin-bottom:20px}
.landing-title span {
    color:#087e83}
.landing-lead {
    font-size:1.05rem;
    line-height:2.1;
    color:var(--dp-muted);
    max-width:490px;
    margin-bottom:24px}
.hero-course-link {
    display:inline-flex;
    align-items:center;
    gap:14px;
    color:#087177;
    font-weight:700;
    text-decoration:none;
    border-bottom:1px solid #bddad7;
    padding-bottom:8px}
.hero-course-link:hover {
    color:#064c52}
.hero-course-link svg {
    width:19px}

.landing-visual {
    display:flex;
    justify-content:center;
    padding:12px 24px 26px}
.learning-visual {
    width:100%;
    max-width:430px;
    background:#fff;
    border:1px solid #dae7e5;
    border-radius:28px;
    box-shadow:0 24px 60px -26px #275b5b55;
    transform:rotate(-2deg);
    padding:22px;
    position:relative}
.visual-topline {
    display:flex;
    align-items:center;
    gap:7px;
    font-size:.72rem;
    color:var(--dp-muted)}
.visual-topline>span:last-child {
    margin-inline-start:auto;
    font-size:.59rem;
    letter-spacing:1px;
    color:#839b9f}
.visual-dot {
    width:7px;
    height:7px;
    background:#388d73;
    border-radius:50%}
.visual-center {
    margin:22px 0 18px;
    padding:26px 12px;
    background:radial-gradient(ellipse at top,#d8ede7,#eef7f4 70%);
    border-radius:19px;
    text-align:center;
    position:relative}
.visual-center img {
    width:72px;
    height:72px;
    object-fit:contain;
    margin-bottom:12px;
    mix-blend-mode:multiply}
.visual-center strong {
    display:block;
    font-size:2rem;
    line-height:1.65;
    color:#185e60;
    font-weight:800}
.visual-center>span {
    display:block;
    font-size:.77rem;
    color:#527773;
    margin-top:10px}
.visual-topics {
    display:flex;
    justify-content:space-between;
    gap:6px;
    padding:0 0 20px}
.visual-topics span {
    font-size:.65rem;
    color:#49686d;
    text-align:center}
.visual-topics svg {
    display:block;
    margin:0 auto 7px;
    width:20px;
    height:20px;
    color:#138183}
.visual-caption {
    border-top:1px solid #e5eeec;
    padding-top:16px;
    display:flex;
    align-items:center;
    gap:12px;
    font-size:.8rem;
    color:var(--dp-ink)}
.visual-caption>svg {
    width:22px;
    color:#087e83}
.visual-caption>svg:last-child {
    margin-inline-start:auto}
.visual-caption small {
    display:block;
    font-size:.67rem;
    color:var(--dp-muted);
    margin-top:2px}

.landing-deck {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
    margin-top:42px}
.landing-card {
    background:white;
    border:1px solid var(--dp-line);
    border-radius:var(--dp-radius);
    padding:28px;
    display:grid;
    grid-template-columns:52px 1fr;
    gap:0 18px;
    align-items:start;
    transition:border-color .2s}
.landing-card:hover {
    border-color:#92beb5}
.landing-card-icon {
    grid-row:1/3;
    width:52px;
    height:52px;
    background:#e8f5ef;
    color:#177b64;
    border-radius:16px;
    display:grid;
    place-items:center}
.landing-card-icon--web {
    background:#eaf2fa;
    color:#286b9b}
.landing-card-icon svg {
    width:24px;
    height:24px}
.landing-card h2 {
    font-size:1.23rem;
    font-weight:800;
    margin:2px 0 8px;
    color:var(--dp-ink)}
.landing-card p {
    font-size:.92rem;
    line-height:1.9;
    color:var(--dp-muted);
    margin:0 0 22px}
.landing-cta {
    grid-column:1/-1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:52px;
    border-radius:12px;
    font-size:.94rem;
    font-weight:700;
    text-decoration:none;
    transition:background .2s}
.landing-cta svg {
    width:21px;
    height:21px}
.landing-cta--android {
    background:#08777d;
    color:white}
.landing-cta--android:hover {
    background:#065e65;
    color:white}
.landing-cta--web {
    background:#eff5f9;
    border:1px solid #d4e4f0;
    color:#25638c}
.landing-cta--web:hover {
    background:#e0edf5;
    color:#1c5074}

.landing-features {
    padding:36px 0 64px}
.section-eyebrow {
    text-align:center;
    color:#08777d;
    font-size:.8rem;
    font-weight:700;
    margin-bottom:10px}
.landing-features h2 {
    text-align:center;
    font-size:1.9rem;
    font-weight:800;
    color:var(--dp-ink);
    margin-bottom:30px}
.landing-feature-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px}
.landing-feature {
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:25px 20px;
    background:#fff;
    border:1px solid var(--dp-line);
    border-radius:18px}
.landing-feature>svg {
    width:23px;
    height:23px;
    flex-shrink:0;
    color:#087e83;
    margin-top:3px}
.landing-feature strong {
    display:block;
    font-size:.96rem;
    margin-bottom:7px;
    color:var(--dp-ink)}
.landing-feature span {
    font-size:.84rem;
    color:var(--dp-muted);
    line-height:1.9}

.main-footer {
    background:#143e49;
    color:#e3eeed;
    border-top:none;
    padding:56px 0 24px;
    margin-top:32px}
.footer-title {
    font-size:1.02rem;
    margin-bottom:22px}
.footer-about-text,.footer-links a {
    color:#c6dadc;
    font-size:.9rem}
.footer-links a:hover {
    color:white;
    padding-right:0;
    text-decoration:underline}
.footer-links li {
    font-size:.88rem;
    line-height:1.9}
.footer-bottom {
    color:#b4cbce;
    border-color:#ffffff20;
    margin-top:30px;
    padding-top:24px;
    font-size:.82rem}
.social-links {
    gap:9px}
.social-links a {
    width:38px;
    height:38px;
    border-radius:12px;
    background:#ffffff0e;
    border:1px solid #ffffff20}
.social-links svg {
    width:18px;
    height:18px}

/* Consistent surfaces across the existing inner pages. */
.page-wrap,.courses-page,.auth-page {
    color:var(--dp-ink)}
.page-hero,.contact-hero,.privacy-hero {
    border:1px solid var(--dp-line);
    box-shadow:none!important;
    background:#eef6f4!important;
    border-radius:24px!important}
.about-card,.contact-card,.quick-card,.faq-card,.map-card,.auth-card,.courses-toolbar {
    border:1px solid var(--dp-line)!important;
    box-shadow:0 6px 24px -16px #244e5930!important;
    background:#fff;
    border-radius:20px}
.form-control,.form-select {
    min-height:48px;
    border-radius:12px;
    border-color:#ccdddf;
    color:var(--dp-ink)}
.form-control:focus,.form-select:focus {
    border-color:#087e83;
    box-shadow:0 0 0 3px #087e8318}
input[type=tel],input[autocomplete=one-time-code] {
    direction:ltr;
    text-align:right}
.auth-sidebar {
    background:#164e59!important;
    color:white}
.btn-login-submit {
    background:#08777d!important;
    box-shadow:none!important;
    min-height:50px}
.btn-primary {
    --bs-btn-bg:#08777d;
    --bs-btn-border-color:#08777d;
    --bs-btn-hover-bg:#065e65;
    --bs-btn-hover-border-color:#065e65;
    min-height:44px}
.courses-heading {
    margin-bottom:30px}
.courses-heading .section-eyebrow {
    text-align:right}
.courses-heading h1 {
    font-size:clamp(1.8rem,4vw,2.4rem);
    font-weight:800;
    color:var(--dp-ink)}
.courses-heading p {
    color:var(--dp-muted);
    font-size:1rem}
.courses-toolbar {
    grid-template-columns:auto 1fr;
    gap:20px;
    padding:16px;
    margin-bottom:28px}
.courses-toolbar form {
    justify-content:flex-end}
.courses-tab.is-active {
    background:#08777d;
    box-shadow:none}
.courses-tab {
    min-height:44px}
.courses-search:focus-within {
    outline:3px solid #247aa3;
    outline-offset:2px}
.courses-grid {
    gap:24px}
.course-card {
    height:100%;
    border:1px solid var(--dp-line);
    background:white;
    box-shadow:none;
    border-radius:20px}
.course-card:hover {
    box-shadow:0 12px 30px -16px #245f6555;
    transform:translateY(-3px)}
.course-card-cover {
    min-height:170px;
    background:linear-gradient(135deg,#cce8e2,#dcebf4)}
.course-content {
    padding:20px;
    display:flex;
    flex-direction:column;
    flex:1}
.course-card-title {
    font-size:1.08rem;
    line-height:1.8;
    font-weight:800;
    color:var(--dp-ink);
    margin-bottom:10px}
.course-subtitle {
    color:var(--dp-muted);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden}
.course-price {
    margin-top:auto;
    padding-top:16px}
.course-price-current {
    color:#08777d}

@media(min-width:1200px) {
    .landing-hero .container,.landing-features .container {
    max-width:1160px}
}

@media(max-width:991px) {
    .navbar {
    min-height:76px}
.navbar-brand {
    margin-inline-end:0}
.navbar-collapse {
    padding:18px 0 8px}
.navbar-nav .nav-link {
    font-size:.95rem}
.navbar-collapse>.d-flex {
    width:100%}
.navbar-collapse .dropdown {
    flex:1}
.btn-login,.btn-cart {
    margin-top:8px}
.landing-hero {
    padding-top:40px}
.landing-title {
    max-width:640px}
.landing-lead {
    max-width:600px}
.landing-visual {
    padding-top:4px}
.learning-visual {
    transform:none;
    max-width:470px}
.landing-feature-grid {
    gap:12px}
.landing-feature {
    padding:20px 14px}
.courses-toolbar {
    grid-template-columns:1fr}
.courses-toolbar form {
    justify-content:flex-start}
.main-footer .row {
    row-gap:28px}
}

@media(max-width:575px) {
    .container {
    padding-inline:20px}
.navbar-brand {
    font-size:1.13rem}
.navbar-brand small {
    font-size:.61rem}
.navbar-brand img {
    width:35px;
    height:35px}
.landing-hero {
    padding:32px 0 20px}
.landing-title {
    font-size:2.25rem;
    line-height:1.55}
.landing-lead {
    font-size:.98rem}
.landing-visual {
    padding:0 0 4px}
.learning-visual {
    padding:18px;
    border-radius:22px}
.visual-center {
    padding:20px 8px;
    margin-top:18px}
.visual-center strong {
    font-size:1.8rem}
.landing-deck {
    grid-template-columns:1fr;
    gap:16px;
    margin-top:28px}
.landing-card {
    padding:22px;
    gap:0 14px}
.landing-card p {
    font-size:.88rem}
.landing-feature-grid {
    grid-template-columns:1fr}
.landing-feature {
    padding:22px}
.landing-features {
    padding:26px 0 32px}
.landing-features h2 {
    font-size:1.6rem;
    margin-bottom:22px}
.main-footer {
    padding-top:38px}
.main-footer .row {
    row-gap:8px}
.courses-toolbar form {
    width:100%}
.courses-select {
    width:100%;
    min-width:0}
.courses-search {
    min-width:0!important;
    flex-basis:100%}
.courses-tabs {
    width:100%;
    justify-content:center}
.courses-tab {
    flex:1;
    text-align:center;
    padding-inline:10px}
.courses-toolbar .btn {
    width:100%}
.courses-grid {
    gap:18px}
.auth-card {
    margin-inline:0}
.course-card-cover {
    min-height:190px}
}

@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important}
}


.course-cover-placeholder {
    position:relative;
    z-index:2;
    display:grid;
    place-items:center;
    gap:12px;
    margin:auto;
    color:#24666b;
    font-size:.8rem}
.course-cover-placeholder svg {
    width:44px;
    height:44px;
    stroke-width:1.3}