/*==================================================
  LANGLEAR v2
  STYLE.CSS (Refactor v1)

  Safe refactor applied:
  - Journey card width refined
  - Journey padding refined
  - Paragraph measure improved
  - Typography spacing adjusted

  Further architectural refactoring is recommended
  after the site is feature-complete.
==================================================*/

/*==================================================
  RESET
==================================================*/

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

html{
    scroll-behavior:smooth;
    scroll-padding-top:90px;
}

body{

    font-family:"Plus Jakarta Sans",sans-serif;

    background:#fff;

    color:var(--text);

    line-height:1.7;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

img,
picture{

    display:block;

    max-width:100%;

}

svg{

    display:block;

    width:100%;

    height:auto;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

button,
input,
textarea{

    font:inherit;

}

button{

    border:none;

    background:none;

    cursor:pointer;

}

section{

    position:relative;

    padding:120px 0;

}

/*==================================================
  ROOT VARIABLES
==================================================*/

:root{

    /* Brand */

    --navy:#0B2D5B;
    --navy-light:#123D71;

    --red:#C62828;
    --red-light:#E53935;

    --white:#FFFFFF;

    /* Surfaces */

    --surface:#F8FAFC;
    --surface-2:#FFFFFF;
    --surface-3:#F3F6FB;

    /* Text */

    --text:#12263F;
    --muted:#6B7280;

    /* Borders */

    --border:#E5E7EB;

    /* Hero */

    --hero-bg:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fbff 55%,
        #eef5fb 100%
    );

    --glass:
    rgba(255,255,255,.76);

    --glass-border:
    rgba(255,255,255,.55);

    /* Radius */

    --radius-xs:12px;
    --radius-sm:18px;
    --radius:24px;
    --radius-lg:34px;

    /* Shadows */

    --shadow-xs:
    0 4px 12px rgba(15,23,42,.05);

    --shadow-sm:
    0 10px 24px rgba(15,23,42,.06);

    --shadow:
    0 18px 45px rgba(15,23,42,.09);

    --shadow-lg:
    0 40px 80px rgba(15,23,42,.12);

    /* Layout */

    --container:1280px;

    --header-height:88px;

    /* Animation */

    --transition:
    .35s cubic-bezier(.22,.61,.36,1);

}

/*==================================================
  TYPOGRAPHY
==================================================*/

h1,
h2,
h3,
h4{

    color:var(--navy);

    font-weight:700;

    line-height:1.1;

}

h1{

    font-size:clamp(3.4rem,6vw,5.4rem);

    letter-spacing:-2px;

}

h2{

    font-size:clamp(2.4rem,4vw,3.5rem);

    letter-spacing:-1px;

}

h3{

    font-size:1.4rem;

}

h4{

    font-size:1.1rem;

}

p{

    color:var(--muted);

    font-size:1.05rem;

}

/*==================================================
  LAYOUT
==================================================*/

.container{

    width:min(92%,var(--container));

    margin-inline:auto;

}

.grid{

    display:grid;

}

.flex{

    display:flex;

}

.section-heading{

    max-width:760px;

    margin-inline:auto;

    margin-bottom:72px;

    text-align:center;

}

.section-heading h2{

    margin:18px 0;

}

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(198,40,40,.08);

    color:var(--red);

    font-size:.9rem;

    font-weight:700;

    letter-spacing:.3px;

}

.section-tag::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--red);

}

/*==================================================
  UTILITIES
==================================================*/

.text-center{

    text-align:center;

}

.mt-1{

    margin-top:1rem;

}

.mt-2{

    margin-top:2rem;

}

.mt-3{

    margin-top:3rem;

}

.mb-1{

    margin-bottom:1rem;

}

.mb-2{

    margin-bottom:2rem;

}

.mb-3{

    margin-bottom:3rem;

}

/*==================================================
  COMPONENTS
==================================================*/

.card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow-xs);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.glass-card{

    background:var(--glass);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    border:1px solid var(--glass-border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 16px;

    border-radius:999px;

    background:rgba(11,45,91,.08);

    color:var(--navy);

    font-weight:600;

    font-size:.85rem;

}

/*==================================================
  BUTTONS
==================================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 28px;

    border-radius:999px;

    font-weight:700;

    transition:var(--transition);

}

.btn-primary{

    background:var(--navy);

    color:#fff;

    box-shadow:var(--shadow-sm);

    transition:
        transform .35s cubic-bezier(.22,.61,.36,1),
        background .35s cubic-bezier(.22,.61,.36,1),
        box-shadow .35s cubic-bezier(.22,.61,.36,1);

}

.btn-primary:hover{

    transform:translateY(-5px) scale(1.02);

    background:var(--navy-light);

    box-shadow:0 18px 40px rgba(11,45,91,.22);

}

.btn-secondary{

    background:#fff;

    border:1px solid var(--border);

    color:var(--navy);

}

.btn-secondary:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-sm);

}

/*==================================================
  PROGRESS BAR
==================================================*/

.progress-bar{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    z-index:9999;

    background:
    linear-gradient(
        90deg,
        var(--red),
        var(--navy)
    );

}

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

.header{

    position:fixed;

    inset:0 0 auto 0;

    height:var(--header-height);

    display:flex;

    align-items:center;

    z-index:1000;

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border-bottom:1px solid rgba(229,231,235,.7);

    transition:var(--transition);

}

.header.scrolled{

    box-shadow:var(--shadow-sm);

}

.navbar{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    position:relative;

}

/*==================================================
  LOGO
==================================================*/

.logo{

    display:flex;

    align-items:center;

    gap:14px;

    flex-shrink:0;

}

.logo img {
    width: 130px;
}

.logo-mark{

    width:52px;

    aspect-ratio:1;

    display:grid;

    place-items:center;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        var(--navy),
        var(--red)
    );

    color:#fff;

    font-size:1.4rem;

    font-weight:800;

    box-shadow:var(--shadow-sm);

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-text strong{

    font-size:1.05rem;

    color:var(--navy);

}

.logo-text span{

    font-size:.82rem;

    color:var(--muted);

}

/*==================================================
  NAVIGATION
==================================================*/

.nav-links{

    display:flex;

    align-items:center;

    gap:40px;

}

.nav-links > li:not(.mobile-cta) > a{

    position:relative;

    font-weight:600;

    color:var(--text);

    transition:var(--transition);

}

.nav-links > li:not(.mobile-cta) > a:hover{

    color:var(--red);

}

.nav-links > li:not(.mobile-cta) > a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    border-radius:999px;

    background:var(--red);

    transition:var(--transition);

}

.nav-links > li:not(.mobile-cta) > a:hover::after{

    width:100%;

}

.nav-actions{

    display:flex;

    align-items:center;

    gap:14px;

}

/*==================================================
  MOBILE TOGGLE
==================================================*/

.mobile-toggle{

    display:none;

    width:48px;

    height:48px;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:6px;

}

.mobile-toggle span{

    width:24px;

    height:2px;

    border-radius:10px;

    background:var(--navy);

    transition:var(--transition);

}

.mobile-toggle.open span:nth-child(1){

    transform:
        translateY(8px)
        rotate(45deg);

}

.mobile-toggle.open span:nth-child(2){

    opacity:0;

}

.mobile-toggle.open span:nth-child(3){

    transform:
        translateY(-8px)
        rotate(-45deg);

}

.mobile-cta{

    display:none;

}

/*==================================================
  MOBILE MENU OVERLAY
==================================================*/

.menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(11,45,91,.18);

    backdrop-filter:blur(5px);

    -webkit-backdrop-filter:blur(5px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .3s ease,
        visibility .3s ease;

    z-index:999;

}

.menu-overlay.open{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}

/*==================================================
  HERO
==================================================*/

.hero{

    position:relative;

    overflow:hidden;

    background:var(--hero-bg);

    padding-top:170px;

    padding-bottom:50px;

}

.hero-grid{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:60px;

    align-items:center;

    position:relative;

    z-index:2;

}

/*==================================================
  HERO BACKGROUND
==================================================*/

.hero-bg{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.hero-grid-bg{

    position:absolute;

    inset:0;

    opacity:.05;

    background-image:

        linear-gradient(
            rgba(11,45,91,.12) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(11,45,91,.12) 1px,
            transparent 1px
        );

    background-size:60px 60px;

}

.hero-grid-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='260' viewBox='0 0 420 260'%3E%3Cg fill='none' stroke='%230b2d5b' stroke-width='1.4'%3E%3Cpath opacity='.24' d='M42 60h58a14 14 0 0 1 14 14v25a14 14 0 0 1-14 14H72l-18 15 4-15H42a14 14 0 0 1-14-14V74a14 14 0 0 1 14-14z'/%3E%3Cpath opacity='.18' d='M278 164h32a8 8 0 0 1 8 8v24a8 8 0 0 0-8-8h-32zM362 164h-28a8 8 0 0 0-8 8v24a8 8 0 0 1 8-8h28z'/%3E%3Cpath opacity='.12' d='M114 87c60-48 130-48 190 0' stroke-dasharray='5 9'/%3E%3Ccircle opacity='.3' cx='304' cy='87' r='4'/%3E%3Ccircle opacity='.2' cx='114' cy='87' r='3'/%3E%3C/g%3E%3C/svg%3E");
    background-size:420px 260px;
    opacity:.7;
}

.hero-blob{

    position:absolute;

    border-radius:50%;

    filter:blur(110px);

}

.blob-1{

    width:430px;

    height:430px;

    background:rgba(11,45,91,.12);

    top:-120px;

    right:-120px;

}

.blob-2{

    width:360px;

    height:360px;

    background:rgba(198,40,40,.10);

    left:-140px;

    bottom:-120px;

}

/*==================================================
  HERO CONTENT
==================================================*/

.hero-content{

    max-width:650px;

}

.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(198,40,40,.08);

    color:var(--red);

    font-weight:700;

    margin-bottom:24px;

}

.hero-tag::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--red);

}

.hero h1{

    margin-bottom:26px;

}

.hero h1 span{

    color:var(--red);

}

.hero p{

    max-width:580px;

    margin-bottom:42px;

    font-size:1.1rem;

}

.hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:60px;

}

.hero-metrics{

    display:flex;

    gap:48px;

}

.metric h3{

    font-size:2rem;

    margin-bottom:6px;

}

.metric span{

    color:var(--muted);

    font-weight:500;

}

/*==================================================
  HERO SHOWCASE
==================================================*/

.hero-showcase{

    position:relative;

    display:grid;

    place-items:center;

    min-height:560px;

    isolation:isolate;

    perspective:1600px;

    transform-style:preserve-3d;

    transform-origin:center center;

    will-change:transform;

    backface-visibility:hidden;

}

/*==================================================
  HERO CENTRE
==================================================*/

.world-map{

    position:relative;

    width:min(100%,680px);

    aspect-ratio:1.35;

    display:grid;

    place-items:center;

    z-index:2;

    transform:translateZ(10px);

}

.world-map svg{

    width:100%;

    height:auto;

}

/*==================================================
  DECORATIVE RINGS
==================================================*/

.hero-showcase::before{

    content:"";

    position:absolute;

    width:560px;

    aspect-ratio:1;

    border-radius:50%;

    border:1px dashed rgba(11,45,91,.08);

    z-index:0;

}

.hero-showcase::after{

    content:"";

    position:absolute;

    width:430px;

    aspect-ratio:1;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(11,45,91,.06),

            transparent 72%

        );

    z-index:0;

}

/*==================================================
  SVG STYLING
==================================================*/

.map-lines path{

    fill:none;

    stroke:rgba(11,45,91,.18);

    stroke-width:2.5;

    stroke-linecap:round;

    stroke-dasharray:10 10;

}

.map-nodes circle{

    fill:var(--red);

    stroke:#fff;

    stroke-width:4;

    filter:

        drop-shadow(

            0 0 14px rgba(198,40,40,.35)

        );

}

/*==================================================
  GLASS CARDS
==================================================*/

.glass-card{

    position:absolute;

    width:280px;

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:24px;

    z-index:10;

    transform:translateZ(35px);

}

.card-icon{

    flex-shrink:0;

    width:56px;

    height:56px;

    display:grid;

    place-items:center;

    border-radius:18px;

    background:

        linear-gradient(

            135deg,

            var(--navy),

            var(--red)

        );

    color:#fff;

    box-shadow:var(--shadow-sm);

}

.card-icon svg{

    width:28px;

    height:28px;

    stroke:#fff;

    stroke-width:2;

    stroke-linecap:round;

    stroke-linejoin:round;

}

.glass-card h4{

    margin-bottom:8px;

}

.glass-card p{

    font-size:.95rem;

    line-height:1.55;

}

/*==================================================
  CARD LAYOUT
==================================================*/

/*
Instead of random positioning,
each card is anchored relative
to the centre illustration.
*/

.tutor-card{

    top:6%;

    left:2%;

}

.lesson-card{

    top:34%;

    right:0;

}

.success-card{

    bottom:8%;

    left:10%;

}

/*==================================================
  GREETING BUBBLES
==================================================*/

.greeting{

    position:absolute;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 18px;

    border-radius:999px;

    background:rgba(255,255,255,.94);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.65);

    box-shadow:var(--shadow-sm);

    color:var(--navy);

    font-weight:700;

    z-index:8;

    white-space:nowrap;

    transform:translateZ(20px);

}

.greeting-1{

    top:12%;

    right:18%;

}

.greeting-2{

    top:18%;

    left:18%;

}

.greeting-3{

    bottom:16%;

    right:10%;

}

.greeting-4{

    bottom:8%;

    left:22%;

}

/*==================================================
  INTERACTION
==================================================*/

.glass-card{

    transition:

        transform .35s cubic-bezier(.22,.61,.36,1),

        box-shadow .35s cubic-bezier(.22,.61,.36,1);

}

.glass-card:hover{

    transform:

        translateY(-10px)

        rotateX(2deg);

}

.greeting{

    transition:

        transform .3s ease,

        box-shadow .3s ease;

}

.greeting:hover{

    transform:translateY(-4px);

}

/*==================================================
  SHOWCASE TRANSITIONS
==================================================*/

.hero-showcase *{

    will-change:transform;

}

/*==================================================
  WHY LANGLEAR
==================================================*/

.why{

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #fbfcfe 100%
    );

}

.why .section-heading{

    max-width:760px;

    margin:0 auto 90px;

}

.why-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:36px;

}

.feature-card{

    position:relative;

    height:100%;

    padding:42px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    overflow:hidden;

    border-radius:28px;

    background:#fff;

    border:1px solid rgba(229,231,235,.85);

    box-shadow:
        0 12px 24px rgba(15,23,42,.04),
        0 30px 60px rgba(15,23,42,.06);

    transition:
        transform .35s cubic-bezier(.22,.61,.36,1),
        box-shadow .35s ease,
        border-color .35s ease;

}

.feature-card::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    border-radius:inherit;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.30),
            rgba(255,255,255,0) 45%
        );

}

.feature-card:hover{

    transform:translateY(-8px);

    border-color:rgba(198,40,40,.18);

    box-shadow:
        0 18px 36px rgba(15,23,42,.05),
        0 45px 90px rgba(15,23,42,.08);

}

.feature-icon{

    position:relative;

    width:72px;

    height:72px;

    display:grid;

    place-items:center;

    margin-bottom:30px;

    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            var(--navy) 0%,
            #173b72 55%,
            var(--red) 100%
        );

    color:#fff;

    box-shadow:
        0 12px 24px rgba(15,23,42,.08),
        0 24px 48px rgba(15,23,42,.06);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.feature-icon::before{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:inherit;

    background:rgba(198,40,40,.08);

    filter:blur(18px);

    opacity:0;

    z-index:-1;

    transition:opacity .35s ease;

}

.feature-card:hover .feature-icon{

    transform:
        scale(1.08)
        rotate(-3deg);

}

.feature-card:hover .feature-icon::before{

    opacity:1;

}

.feature-icon svg{

    width:30px;

    height:30px;

    stroke:#fff;

    stroke-width:2;

    stroke-linecap:round;

    stroke-linejoin:round;

}

.feature-label{

    display:block;

    margin-bottom:14px;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--red);

}

.feature-card h3{

    margin-bottom:18px;

    line-height:1.3;

    transition:color .35s ease;

}

.feature-card:hover h3{

    color:var(--red);

}

.feature-card p{

    flex:1;

    line-height:1.8;

}

.feature-card>*{

    position:relative;

    z-index:2;

}

/*==================================================
  LANGUAGES
==================================================*/

.languages{

    background:#f8fafc;

}

.languages .section-heading{

    max-width:760px;

    margin:0 auto 90px;

}

/*----------------------------------------------
  GRID
----------------------------------------------*/

.language-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:36px;

}

/*----------------------------------------------
  CARD
----------------------------------------------*/

.language-card{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:38px 32px;

    background:#fff;

    border:1px solid rgba(229,231,235,.9);

    border-radius:28px;

    overflow:hidden;

    box-shadow:
        0 12px 24px rgba(15,23,42,.04),
        0 30px 60px rgba(15,23,42,.06);

    transition:
        transform .4s cubic-bezier(.22,.61,.36,1),
        box-shadow .4s ease,
        border-color .4s ease;

}

.language-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--navy),
        var(--red)
    );

    transform:scaleX(1);

    transform-origin:left;

    transition:transform .4s ease;

}

.language-card:hover{

    transform:translateY(-8px);

    border-color:rgba(198,40,40,.18);

    box-shadow:
        0 20px 40px rgba(15,23,42,.06),
        0 45px 90px rgba(15,23,42,.08);

}


/*----------------------------------------------
  LANGUAGE BADGE
----------------------------------------------*/

.language-badge{

    width:96px;

    height:96px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:6px;

    margin-bottom:24px;

    border-radius:22px;

    background:linear-gradient(
        145deg,
        #123c75,
        #0B2D5B 55%,
        #9b1f32
    );

    box-shadow:
        0 12px 24px rgba(15,23,42,.08),
        0 24px 48px rgba(15,23,42,.05);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.language-code{

    color:#fff;

    font-size:2rem;

    font-weight:800;

    letter-spacing:1px;

    line-height:1;

}

.language-line{

    width:20px;

    height:3px;

    border-radius:999px;

    background:#fff;

    transition:width .35s ease;

}

.language-card:hover .language-badge{

    transform:
        translateY(-4px)
        scale(1.08);

    box-shadow:
        0 18px 36px rgba(15,23,42,.10),
        0 30px 60px rgba(15,23,42,.08);

}

.language-card:hover .language-line{

    width:32px;

}

/*----------------------------------------------
  TEXT
----------------------------------------------*/

.language-card h3{

    margin-bottom:14px;

    transition:color .35s ease;

}

.language-card:hover h3{

    color:var(--red);

}

.language-card p{

    flex:1;

    margin:0;

    line-height:1.7;

}

/*----------------------------------------------
  MORE LANGUAGES CARD
----------------------------------------------*/

.language-card-more{

    border:1px solid rgba(198,40,40,.18);

    background:#fff;

}

.language-card-more:hover{

    border-color:var(--red);

}

.language-card-more .language-badge{

    background:var(--navy);

}

.language-card-more .language-badge img{

    width:42px;

    height:auto;

    object-fit:contain;

    transform: translateY(2px);

}

/*----------------------------------------------
  Z-INDEX FIX
----------------------------------------------*/

.language-card > *{

    position:relative;

    z-index:2;

}


/*==================================================
  JOURNEY
==================================================*/

.journey{

    position:relative;

    overflow:hidden;

    padding:140px 0;

    isolation:isolate;

    background:
        radial-gradient(circle at 15% 15%,
            rgba(11,45,91,.025),
            transparent 30%),

        radial-gradient(circle at 85% 75%,
            rgba(198,40,40,.025),
            transparent 28%),

        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcfe 100%
        );

}


/*==================================================
  SECTION HEADING
==================================================*/

.journey .section-heading{

    max-width:760px;

    margin:0 auto 110px;

    text-align:center;

}

.journey .section-heading p{

    max-width:620px;

    margin:24px auto 0;

}


/*==================================================
  TRACK
==================================================*/

.journey-track{

    position:relative;

    width:min(100%,760px);

    margin:0 auto;

}


/*==================================================
  TIMELINE
==================================================*/

.journey-line{

    position:absolute;

    z-index: 1;

    top:0;

    bottom:0;

    left:50%;

    transform:translateX(-50%);

    width:8px;

    border-radius:999px;

    background:#E7EBEF;

}

.journey-progress{

    position:absolute;

    z-index:2;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:8px;

    height:0;

    border-radius:999px;

    background:linear-gradient(
        180deg,
        var(--red),
        var(--navy)
    );

    z-index:2;

}


/*==================================================
  STEP
==================================================*/

.journey-step{

    position:relative;

    z-index:5;

    display:flex;

    flex-direction:column;

    align-items:center;

    margin-bottom:140px;

}

.journey-step:last-child{

    margin-bottom:0;

}


/*==================================================
  MARKER
==================================================*/

.journey-marker{

    position:relative;

    z-index:20;

    margin-bottom:-22px;

}

.journey-marker span{

    width:76px;

    height:76px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#ffffff;

    border:4px solid var(--navy);

    color:var(--navy);

    font-size:1.2rem;

    font-weight:700;

    box-shadow:

        0 12px 24px rgba(15,23,42,.05),

        0 30px 60px rgba(15,23,42,.08);

    transition:var(--transition);

}

/*==================================================
  JOURNEY CARD
==================================================*/

.journey-card{

    position:relative;

    z-index:10;

    width:100%;

    max-width:560px;

    padding:60px 42px 42px;

    overflow:hidden;

    text-align:center;

    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.98) 0%,
            rgba(249,250,251,.96) 100%
        );

    border:1px solid rgba(229,231,235,.85);

    box-shadow:
        0 12px 24px rgba(15,23,42,.04),
        0 32px 70px rgba(15,23,42,.06),
        0 90px 150px rgba(15,23,42,.03);

    transition:
        transform .35s cubic-bezier(.22,.61,.36,1),
        box-shadow .35s ease,
        border-color .35s ease;

}


/*==================================================
  GLASS HIGHLIGHT
==================================================*/

.journey-card::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    border-radius:inherit;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.30),
            rgba(255,255,255,0) 45%
        );

}


/*==================================================
  TIMELINE CONNECTOR
==================================================*/

.journey-card::before{

    content:"";

    position:absolute;

    top:-22px;

    left:50%;

    transform:translateX(-50%);

    width:8px;

    height:22px;

    background:#E7EBEF;

    border-radius:999px;

    transition:background-color .35s ease;

}


/*==================================================
  TYPOGRAPHY
==================================================*/

.journey-subtitle{

    display:inline-flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    margin-bottom:20px;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--red);

}

.journey-subtitle::before{

    content:"";

    width:38px;

    height:2px;

    border-radius:999px;

    background:var(--red);

    transition:width .35s ease;

}

.journey-card h3{

    margin-bottom:14px;

    font-size:1.65rem;

    line-height:1.2;

    color:var(--navy);

    transition:color .35s ease;

}

.journey-card p{

    max-width:48ch;

    margin:0 auto;

    line-height:1.8;

}


/*==================================================
  HOVER
==================================================*/

.journey-card:hover{

    transform:
        translateY(-4px)
        scale(1.01);

    border-color:rgba(198,40,40,.18);

    box-shadow:
        0 18px 36px rgba(15,23,42,.05),
        0 45px 90px rgba(15,23,42,.10),
        0 120px 180px rgba(15,23,42,.05);

}

.journey-card:hover h3{

    color:var(--red);

}

.journey-card:hover .journey-subtitle::before{

    width:56px;

}


/*==================================================
  JOURNEY END SPACING
==================================================*/

.journey-step:last-child{

    margin-bottom:20px;

}

/*==================================================
  JOURNEY ANIMATIONS
==================================================*/

.journey-step{

    opacity:0;

    transform:translateY(40px) scale(.97);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,.61,.36,1);


}

.journey-step.is-visible{

    opacity:1;

    transform:translateY(0) scale(1);

}

.journey-step.is-current .journey-marker span{

    border-color:var(--red);

    color:var(--red);

    outline:8px solid rgba(198,40,40,.08);

}

.journey-step.is-complete .journey-marker span{

    background:var(--navy);

    border-color:var(--navy);

    color:#fff;

}

.journey-step.is-current .journey-card::before{

    background:var(--red);

}

.journey-step.is-complete .journey-card::before{

    background:var(--navy);

}

.journey-step.is-current h3{

    color:var(--red);

}

/*==================================================
  TESTIMONIALS
==================================================*/

.testimonials{

    position:relative;

    padding:110px 0;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8fafc
        );

}

.testimonials::before{

    content:"";

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:700px;

    height:700px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(11,45,91,.04),
            transparent 70%
        );

    pointer-events:none;

}

.testimonials .section-heading{

    max-width:760px;

    margin:0 auto 80px;

}

.testimonial{

    position:relative;

    max-width:660px;

    margin:0 auto;

}

.testimonial blockquote{

    position:relative;

    margin:0;

    padding:0;

}

.testimonial blockquote::before{

    content:"“";

    position:absolute;

    top:-70px;

    left:-35px;

    font-family:Georgia, serif;

    font-size:12rem;

    line-height:1;

    color:rgba(11,45,91,.05);

}

.testimonial blockquote::after{

    content:"”";

    position:absolute;

    right:-15px;

    bottom:-120px;

    font-family:Georgia, serif;

    font-size:12rem;

    line-height:1;

    color:rgba(11,45,91,.05);

}

.testimonial p{

    font-size:clamp(1.25rem,1.8vw,1.5rem);

    line-height:1.8;

    font-weight:500;

    color:var(--navy);

    text-align:center;

}

.testimonial-rating{

    margin-top:35px;

    text-align:center;

    color:var(--red);

    font-size:1.1rem;

    letter-spacing:6px;

}

.testimonial-author{

    margin-top:16px;

    text-align:center;

}

.testimonial-author h3{

    margin-bottom:6px;

    font-weight:600;

}

.testimonial-author span{

    color:var(--grey);

}

/*==================================================
  SHARED HOVER EFFECTS
==================================================*/

.feature-card,
.language-card,
.timeline-card,
.testimonial-card{

    transition:

        transform .35s cubic-bezier(.22,.61,.36,1),

        box-shadow .35s cubic-bezier(.22,.61,.36,1),

        border-color .35s ease;

}

.feature-card:hover,
.language-card:hover,
.timeline-card:hover,
.testimonial-card:hover{

    transform:translateY(-10px);

    border-color:rgba(198,40,40,.18);

    box-shadow:var(--shadow);

}

/*==================================================
  SECTION SPACING HELPERS
==================================================*/

.section-heading p{

    max-width:680px;

    margin:0 auto;

}

/*==================================================
  LEARNING PLANS
==================================================*/

.plans{

    background:var(--surface);

}

.plans .section-heading{

    max-width:760px;

    margin:0 auto 80px;

}

/*==========================================
  GRID
==========================================*/

.plans-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:32px;

    align-items:stretch;

}

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

.plan-card{

    position:relative;

    display:flex;

    flex-direction:column;

    padding:48px;

    background:#fff;

    border:1px solid rgba(226,232,240,.9);

    border-radius:28px;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    box-shadow:
        0 16px 40px rgba(15,23,42,.05);

}

.plan-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--navy),
        var(--red)
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .35s ease;

}

.plan-card:hover{

    transform:translateY(-4px);

    border-color:rgba(198,40,40,.18);

    box-shadow:
        0 24px 56px rgba(15,23,42,.08);

}

.plan-card:hover::before{

    transform:scaleX(1);

}

/*==========================================
  FEATURED CARD
==========================================*/

.featured-plan{

    border:2px solid rgba(11,45,91,.12);

    box-shadow:
        0 24px 60px rgba(15,23,42,.08);

}

/*==========================================
  ICON
==========================================*/

.plan-icon{

    width:74px;

    height:74px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            var(--navy),
            var(--red)
        );

    box-shadow:
        0 16px 34px rgba(11,45,91,.16);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.plan-card:hover .plan-icon{

    transform:translateY(-2px);

    box-shadow:
        0 20px 42px rgba(11,45,91,.22);

}

.plan-icon svg{

    width:34px;

    height:34px;

    stroke:#fff;

    stroke-width:1.8;

    stroke-linecap:round;

    stroke-linejoin:round;

    fill:none;

}

/*==========================================
  TITLE
==========================================*/

.plan-card h3{

    margin-bottom:18px;

    font-size:1.45rem;

    line-height:1.3;

    color:var(--navy);

}

/*==========================================
  DESCRIPTION
==========================================*/

.plan-card p{

    color:var(--grey);

    line-height:1.8;

    margin-bottom:34px;

}

/*==========================================
  PLAN NOTE
==========================================*/

.plan-note{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:34px;

    color:var(--grey);

    font-size:.92rem;

    font-weight:500;

}

.plan-note::before{

    content:"✓";

    color:var(--red);

    font-weight:700;

}

/*==========================================
  FEATURES
==========================================*/

.plan-features{

    margin-top:auto;

    border-top:1px solid rgba(226,232,240,.9);

    padding-top:28px;

}

/*==========================================
  FEATURE ROW
==========================================*/

.plan-feature{

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px 0;

    transition:transform .25s ease;

}

.plan-feature:not(:last-child){

    border-bottom:1px solid rgba(226,232,240,.8);

}

.plan-card:hover .plan-feature{

    transform:translateX(2px);

}

/*==========================================
  CHECK ICON
==========================================*/

.plan-feature svg{

    flex-shrink:0;

    width:18px;

    height:18px;

    stroke:var(--red);

    stroke-width:2.4;

    stroke-linecap:round;

    stroke-linejoin:round;

    fill:none;

}

/*==========================================
  FEATURE TEXT
==========================================*/

.plan-feature span{

    color:var(--navy);

    font-size:.96rem;

    font-weight:500;

    line-height:1.5;

}

/*==========================================
  CTA BUTTON
==========================================*/

.featured-plan .btn{

    width:100%;

    margin-top:36px;

}

.featured-plan .btn:hover{

    filter:brightness(1.05);

}

/*==========================================
  CTA
==========================================*/

.plans-cta{

    display:flex;

    justify-content:center;

    margin-top:40px;

}

.plans-cta .btn{

    width:100%;

    max-width:340px;

}

/*==========================================
  FEATURED CARD
==========================================*/

.featured-plan{

    border:2px solid rgba(11,45,91,.12);

    box-shadow:
        0 24px 60px rgba(15,23,42,.08);

}

.featured-plan:hover{

    transform:translateY(-4px);

}

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

.plans-footer{

    max-width:760px;

    margin:70px auto 0;

    text-align:center;

    color:var(--grey);

    line-height:1.8;

    font-size:1.05rem;

}

.plans-footer strong{

    display:block;

    margin-bottom:10px;

    color:var(--navy);

    font-size:1.15rem;

}

/*==========================================
  ACCESSIBILITY
==========================================*/

.plan-card:focus-within{

    border-color:var(--red);

    box-shadow:
        0 24px 56px rgba(15,23,42,.10);

}

/*==========================================
  REDUCED MOTION
==========================================*/

@media (prefers-reduced-motion:reduce){

    .plan-card,
    .plan-card::before,
    .plan-icon,
    .plan-feature,
    .featured-plan{

        transition:none;

    }

}

/*==================================================
  FAQ
==================================================*/

.faq{

    background:#fff;

}

.faq .section-heading{

    max-width:720px;

    margin:0 auto 70px;

}

/*==========================================
  FAQ LIST
==========================================*/

.faq-list{

    max-width:900px;

    margin:0 auto;

}

/*==========================================
  FAQ ITEM
==========================================*/

.faq-item{

    border-bottom:1px solid rgba(226,232,240,.9);

    transition:
        border-color .3s ease,
        background-color .3s ease;

}

.faq-item:hover{

    background:rgba(11,45,91,.015);

}

.faq-item:first-child{

    border-top:1px solid rgba(226,232,240,.9);

}

.faq-item.active{

    border-color:rgba(198,40,40,.18);

}

/*==========================================
  QUESTION
==========================================*/

.faq-question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:24px;

    padding:36px 0;

    border:none;

    background:none;

    cursor:pointer;

    text-align:left;

    font:inherit;

    color:inherit;

}

.faq-question span:first-child{

    font-size:1.18rem;

    font-weight:600;

    color:var(--navy);

    transition:color .3s ease;

}

.faq-question:focus-visible{

    outline:2px solid var(--red);

    outline-offset:8px;

    border-radius:8px;

}

/* .faq-item:hover .faq-question span:first-child{

    color:var(--navy);

} */

/*==========================================
  ICON
==========================================*/

.faq-icon{

    position:relative;

    width:34px;

    height:34px;

    flex-shrink:0;

    border-radius:50%;

    border:1px solid rgba(226,232,240,.9);

    transition:
        border-color .3s ease,
        background-color .3s ease;

}

.horizontal,
.vertical{

    position:absolute;

    top:50%;

    left:50%;

    background:var(--navy);

    border-radius:999px;

    transition:all .3s ease;

}

/* Horizontal bar */

.horizontal{

    width:14px;

    height:2px;

    transform:
        translate(-50%,-50%);

}

/* Vertical bar */

.vertical{

    width:2px;

    height:14px;

    transform:
        translate(-50%,-50%);

}

.faq-item.active{

    cursor:pointer;

}

.faq-item.active:hover{

    background:rgba(11,45,91,.02);

}

.faq-answer p::before{

    transform:scaleY(0);

    transform-origin:top;

    transition:transform .35s ease;

}

.faq-item.active .faq-answer p::before{

    transform:scaleY(1);

}

.faq-item.active .vertical{

    opacity:0;

    transform:
        translate(-50%,-50%)
        scaleY(.2);

}

.faq-item.active .horizontal{

    background:var(--red);

}

.faq-item.active .faq-icon{

    border-color:var(--red);

}

.faq-item:hover .faq-icon{

    border-color:var(--red);

}

.faq-item:hover .horizontal,
.faq-item:hover .vertical{

    background:var(--red);

}

.faq-item.active .faq-question span:first-child{

    font-weight:700;

}

/*==========================================
  ANSWER
==========================================*/

.faq-answer{

    display:grid;

    grid-template-rows:0fr;

    transition:grid-template-rows .35s ease;

}

.faq-answer > div{

    overflow:hidden;

}

.faq-answer p{

    position:relative;

    margin:0 0 30px;

    padding-left:24px;

    color:var(--grey);

    line-height:1.9;

    font-size:1rem;

}

.faq-answer p::before{

    content:"";

    position:absolute;

    left:0;

    top:6px;

    width:3px;

    height:calc(100% - 12px);

    border-radius:999px;

    background:var(--red);

}

/*==========================================
  OPEN STATE
==========================================*/

.faq-item.active .faq-answer{

    grid-template-rows:1fr;

}

/*==================================================
  CTA
==================================================*/

.cta{

    background:#fff;

}

.cta-card{

    text-align:center;

    padding:90px 70px;

    border-radius:36px;

    background:

        linear-gradient(
            135deg,
            var(--navy),
            var(--navy-light)
        );

    color:#fff;

    overflow:hidden;

    position:relative;

}

.cta-card::before{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    border-radius:50%;

    background:rgba(255,255,255,.04);

    top:-90px;

    right:-90px;

}

.cta-card::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='220' viewBox='0 0 360 220'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.2'%3E%3Ccircle opacity='.12' cx='45' cy='48' r='4'/%3E%3Ccircle opacity='.1' cx='176' cy='112' r='3'/%3E%3Ccircle opacity='.13' cx='324' cy='52' r='4'/%3E%3Cpath opacity='.11' d='M45 48c54 48 77 16 131 64s94-12 148-60' stroke-dasharray='5 10'/%3E%3Cpath opacity='.09' d='M118 166h24a7 7 0 0 1 7 7v18a7 7 0 0 0-7-7h-24zM189 166h-25a7 7 0 0 0-7 7v18a7 7 0 0 1 7-7h25z'/%3E%3C/g%3E%3C/svg%3E");
    background-size:360px 220px;
    opacity:.72;
}

.cta-card>*{
    position:relative;
    z-index:1;
}

.cta-card .section-tag{

    background:rgba(255,255,255,.12);

    color:#fff;

}

.cta-card .section-tag::before{

    background:#fff;

}

.cta-card h2{

    color:#fff;

    margin:24px 0;

}

.cta-card p{

    color:rgba(255,255,255,.82);

    max-width:640px;

    margin:0 auto 48px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

}

.cta-card .btn-primary{

    background:#fff;

    color:var(--navy);

}

.cta-card .btn-primary:hover{

    background:#f4f4f4;

}

.cta-card .btn-secondary{

    background:transparent;

    color:#fff;

    border:1px solid rgba(255,255,255,.25);

}

.cta-card .btn-secondary:hover{

    background:rgba(255,255,255,.08);

}

/*==================================================
  CONTACT
==================================================*/

.contact{

    background:
    linear-gradient(
        180deg,
        #ffffff,
        #f8fafc
    );

}

.contact-wrapper{

    display:grid;

    grid-template-columns:360px 1fr;

    gap:60px;

    align-items:start;

    margin-top:70px;

}

.contact-info{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.contact-card{

    display:flex;

    align-items:center;

    gap:22px;

    padding:34px 28px;

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(229,231,235,.8);

    border-radius:24px;

    box-shadow:var(--shadow-xs);

    transition:var(--transition);

}

.contact-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

    border-color:rgba(220,38,38,.15);

}

.contact-icon{

    width:68px;

    height:68px;

    flex-shrink:0;

    display:grid;

    place-items:center;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        var(--navy),
        var(--red)
    );

    color:#fff;

    font-size:1.45rem;

}

.contact-card h3{

    margin-bottom:6px;

    color:var(--navy);

    font-size:1.05rem;

}

.contact-card p{

    margin:0;

    color:var(--muted);

}

.contact-form{

    padding:42px;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(229,231,235,.8);

    border-radius:30px;

    box-shadow:var(--shadow);

}

.form-grid{

    display:grid;

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

    gap:24px;

    margin-bottom:24px;

}

.form-group{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.form-group label{

    font-weight:700;

    color:var(--navy);

}

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    padding:16px 18px;

    font:inherit;

    color:var(--text);

    background:#fff;

    border:1px solid #d1d5db;

    border-radius:16px;

    transition:var(--transition);

    resize:none;

}

.form-group textarea{

    min-height:180px;

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    outline:none;

    border-color:var(--red);

    box-shadow:
        0 0 0 4px rgba(220,38,38,.10);

}

.contact-note{

    margin-top:18px;

    margin-bottom:20px;

    font-size:.92rem;

    line-height:1.7;

    color:var(--muted);

}

.contact-submit{

    margin-top:18px;

    min-width:220px;

}

.form-status{

    margin-top:22px;

    font-weight:600;

    min-height:26px;

}

.form-status.success{

    color:#15803d;

}

.form-status.error{

    color:#dc2626;

}

.honeypot{

    position:absolute;

    left:-9999px;

    width:1px;

    height:1px;

    overflow:hidden;

}

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

.footer{

    position:relative;

    background:
        radial-gradient(circle at 12% 0%,rgba(255,255,255,.075),transparent 32%),
        linear-gradient(145deg,#071f43 0%,var(--navy) 62%,#123d71 100%);

    color:rgba(255,255,255,.82);

    padding:90px 0 35px;

}

.footer::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='180' viewBox='0 0 260 180'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath opacity='.16' d='M22 42c28-22 59-22 87 0s59 22 87 0 50-22 64-10'/%3E%3Cpath opacity='.1' d='M-15 132c27-25 56-25 83 0s56 25 83 0 56-25 83 0 38 19 52 10'/%3E%3Ccircle opacity='.18' cx='22' cy='42' r='3'/%3E%3Ccircle opacity='.13' cx='109' cy='42' r='2.5'/%3E%3Ccircle opacity='.16' cx='196' cy='42' r='3'/%3E%3Cpath opacity='.11' d='M76 86h18a8 8 0 0 1 8 8v18a8 8 0 0 0-8-8H76zM128 86h-10a8 8 0 0 0-8 8v18a8 8 0 0 1 8-8h10z'/%3E%3C/g%3E%3C/svg%3E");
    background-size:260px 180px;
    background-position:center top;
    opacity:.7;
    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),rgba(0,0,0,.35));
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),rgba(0,0,0,.35));
}

.footer>.container{
    position:relative;
    z-index:1;
}

.footer-grid{

    display:grid;

    grid-template-columns:1.55fr .8fr 1.15fr 1fr;

    gap:54px;

    align-items:start;

}

/*==========================================
  BRAND
==========================================*/

.footer-brand{

    max-width:420px;

}

.footer-logo{

    display:inline-flex;

    margin-bottom:26px;

}

.footer-logo img{

    width:145px;

    height:auto;

    transition:transform .35s ease;

}

.footer-logo:hover img{

    transform:scale(1.04);

}

.footer-wordmark{
    display:inline-block;
    position:relative;
    margin-bottom:26px;
    padding-bottom:8px;
    color:#fff;
    font-size:2rem;
    font-weight:850;
    line-height:1;
    letter-spacing:-.045em;
    text-decoration:none;
}

.footer-wordmark::after{
    content:"";
    position:absolute;
    left:1px;
    bottom:0;
    width:34px;
    height:3px;
    border-radius:999px;
    background:var(--red);
}

.footer-wordmark:hover{color:#fff;transform:translateY(-1px)}

.footer-description{

    margin:0 0 26px;

    line-height:1.9;

    color:rgba(255,255,255,.72);

}

.footer-tagline{

    margin:0;

    font-size:1.08rem;

    font-weight:600;

    line-height:1.8;

    color:#fff;

}

.footer-trust{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:24px;
}

.footer-trust span{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 10px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;
    background:rgba(255,255,255,.06);
    color:rgba(255,255,255,.82);
    font-size:.77rem;
    font-weight:700;
}

.footer-trust svg,.footer-column h3 svg,.footer-link-icon svg,.back-to-top svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex:none;
}

/*==========================================
  COLUMNS
==========================================*/

.footer-column h3{

    margin:0 0 28px;

    font-size:1.05rem;

    font-weight:700;

    color:#fff;

    display:flex;

    align-items:center;

    gap:9px;

}

.footer-column h3 svg{color:#ff5a60}

.footer-column ul{

    list-style:none;

    margin:0;

    padding:0;

}

.footer-column li{

    margin-bottom:18px;

}

.footer-column a{

    display:inline-block;

    color:rgba(255,255,255,.72);

    text-decoration:none;

    transition:

        color .3s ease,

        transform .3s ease;

}

.footer-link-icon{
    display:inline-flex;
    vertical-align:-3px;
    margin-right:8px;
    color:rgba(255,255,255,.9);
}

.footer-column a:hover{

    color:#fff;

    transform:translateX(4px);

}

.footer-column li{

    color:rgba(255,255,255,.72);

    line-height:1.8;

}

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

.footer-bottom{

    margin-top:80px;

    padding-top:30px;

    border-top:1px solid rgba(255,255,255,.08);

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:24px;

}

.footer-bottom p{

    margin:0;

    color:rgba(255,255,255,.55);

    font-size:.95rem;

}

.footer-legal{display:grid;gap:5px;max-width:680px}
.footer-legal p{margin:0}
.footer-legal .footer-entity{color:rgba(255,255,255,.68);font-size:.78rem;line-height:1.5}

.footer-bottom-links{

    display:flex;
    align-items:center;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:22px;
}

.footer-bottom-links>a{
    color:rgba(255,255,255,.68);
    text-decoration:none;
    font-size:.9rem;
    font-weight:650;
}

.footer-bottom-links>a:hover{color:#fff}

/*==========================================
  BACK TO TOP
==========================================*/

.back-to-top{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:rgba(255,255,255,.72);

    text-decoration:none;

    font-weight:600;

    transition:

        color .3s ease,

        transform .3s ease;

}

.back-to-top svg{width:16px;height:16px}

.back-to-top:hover{

    color:#fff;

    transform:translateY(-2px);

}

.footer a:focus-visible{

    outline:2px solid rgba(255,255,255,.45);

    outline-offset:6px;

    border-radius:8px;

}


/*==================================================
  GLOBAL TRANSITIONS
==================================================*/

a,
button,
.btn,
.card,
.glass-card,
.feature-card,
.language-card,
.timeline-card,
.testimonial-card,
.pricing-card{

    transition:
        all .35s cubic-bezier(.22,.61,.36,1);

}

/*==================================================
  FOCUS STATES
==================================================*/

:focus-visible{

    outline:3px solid rgba(198,40,40,.35);

    outline-offset:4px;

    border-radius:8px;

}

button:focus-visible,
.btn:focus-visible{

    outline-offset:5px;

}

/*==================================================
  TEXT SELECTION
==================================================*/

::selection{
    background:#f4b8bc;
    color:#081f40;

}

::-moz-selection{
    background:#f4b8bc;
    color:#081f40;
}

::-moz-selection{

    background:rgba(198,40,40,.18);

    color:var(--navy);

}

/*==================================================
  SCROLL OFFSET
==================================================*/

[id]{

    scroll-margin-top:110px;

}

/*==================================================
  DIVIDERS
==================================================*/

.divider{

    width:100%;

    height:1px;

    background:var(--border);

    margin:80px 0;

}

/*==================================================
  DECORATIVE BACKGROUNDS
==================================================*/

.section-dots{

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.04;

    background-image:

        radial-gradient(

            var(--navy) 1px,

            transparent 1px

        );

    background-size:24px 24px;

}

.section-glow{

    position:absolute;

    width:380px;

    aspect-ratio:1;

    border-radius:50%;

    filter:blur(120px);

    background:rgba(11,45,91,.08);

    pointer-events:none;

    z-index:0;

}

section{

    scroll-margin-top: -60px !important;

}

/*==================================================
  ICON WRAPPER
==================================================*/

.icon-circle{

    width:60px;

    height:60px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:rgba(11,45,91,.08);

}

.icon-circle svg{

    width:28px;

    height:28px;

}

/*==================================================
  IMAGE HELPERS
==================================================*/

.img-cover{

    width:100%;

    height:100%;

    object-fit:cover;

}

.rounded{

    border-radius:var(--radius);

}

.shadow{

    box-shadow:var(--shadow);

}

/*==================================================
  FLEX HELPERS
==================================================*/

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

/*==================================================
  GRID HELPERS
==================================================*/

.grid-2{

    display:grid;

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

    gap:30px;

}

.grid-3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.grid-4{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

/*==================================================
  WIDTH HELPERS
==================================================*/

.w-100{

    width:100%;

}

.mx-auto{

    margin-inline:auto;

}

.max-600{

    max-width:600px;

}

.max-700{

    max-width:700px;

}

.max-800{

    max-width:800px;

}

/*==================================================
  OPACITY HELPERS
==================================================*/

.opacity-75{

    opacity:.75;

}

.opacity-50{

    opacity:.5;

}

/*==================================================
  ANIMATION READY
==================================================*/

.fade-up{

    opacity:0;

    transform:translateY(35px);

}

.fade-left{

    opacity:0;

    transform:translateX(-35px);

}

.fade-right{

    opacity:0;

    transform:translateX(35px);

}

.scale-in{

    opacity:0;

    transform:scale(.92);

}

.reveal{

    opacity:1;

    transform:none;

    transition:

        opacity .7s ease,

        transform .7s ease;

}

/*==================================================
  REDUCED MOTION
==================================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}

/*==================================================
  WHATSAPP FLOATING BUTTON
==================================================*/

.whatsapp-float{

    position:fixed;

    right:24px;

    bottom:24px;

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#25D366;

    color:#ffffff;

    text-decoration:none;

    box-shadow:
        0 14px 35px rgba(0,0,0,.20);

    z-index:9999;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

    animation:
        whatsappPulse 3s ease-in-out infinite;

}

.whatsapp-float:hover{

    transform:scale(1.08);

    box-shadow:
        0 18px 45px rgba(0,0,0,.28);

    animation:none;

}

.whatsapp-float svg{

    width:34px;

    height:34px;

}

/*==================================
  Pulse Animation
==================================*/

@keyframes whatsappPulse{

    0%{

        transform:scale(1);

        box-shadow:
            0 14px 35px rgba(0,0,0,.20);

    }

    8%{

        transform:scale(1.10);

        box-shadow:
            0 14px 35px rgba(37,211,102,.45);

    }

    16%{

        transform:scale(1);

        box-shadow:
            0 14px 35px rgba(0,0,0,.20);

    }

    100%{

        transform:scale(1);

        box-shadow:
            0 14px 35px rgba(0,0,0,.20);

    }

}

@media (max-width:768px){

    .whatsapp-float{

        width:58px;

        height:58px;

        right:18px;

        bottom:18px;

    }

    .whatsapp-float svg{

        width:30px;

        height:30px;

    }

}
/* Academic subjects are presented as a supporting Langlear service. */
.academic-support{
    padding: 36px 0 92px;
    background: #fff;
}
.academic-support-panel{
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: 52px;
    align-items: center;
    padding: 52px;
    border: 1px solid rgba(11,45,91,.12);
    border-radius: 28px;
    background: linear-gradient(135deg, #f7faff 0%, #eef4fb 100%);
    box-shadow: 0 24px 60px rgba(11,45,91,.09);
}
.academic-support-copy h2{
    margin: 18px 0 14px;
    color: var(--navy);
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    line-height: 1.08;
}
.academic-support-copy p{
    max-width: 720px;
    margin: 0 0 26px;
    color: var(--text-light);
    font-size: 1.05rem;
    line-height: 1.8;
}
.academic-subject-visual{
    position: relative;
    width: min(100%, 360px);
    aspect-ratio: 1;
    margin-inline: auto;
}
.academic-subject-visual::before,
.academic-subject-visual::after{
    content: "";
    position: absolute;
    inset: 40px;
    border: 1px dashed rgba(11,45,91,.18);
    border-radius: 50%;
}
.academic-subject-visual::after{
    inset: 100px;
    border-style: solid;
    opacity: .6;
}
.academic-icon,
.academic-visual-core{
    position: absolute;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border: 1px solid rgba(11,45,91,.12);
    border-radius: 22px;
    background: rgba(255,255,255,.94);
    color: var(--navy);
    box-shadow: 0 18px 36px rgba(11,45,91,.12);
}
.academic-icon svg,
.academic-visual-core svg{
    width: 43px;
    height: 43px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.academic-visual-core{
    top: 50%;
    left: 50%;
    width: 96px;
    height: 96px;
    color: #fff;
    background: var(--navy);
    transform: translate(-50%,-50%);
}
.academic-icon-maths{top: 2px;left: 50%;transform: translateX(-50%);color:var(--navy);}
.academic-icon-physics{top: 20%;right: 4%;color:var(--red);}
.academic-icon-chemistry{right: 4%;bottom: 20%;color:var(--navy);}
.academic-icon-computing{bottom: 2px;left: 50%;transform: translateX(-50%);color:var(--red);}
.academic-icon-biology{left: 4%;bottom: 20%;color:var(--navy);}
.academic-icon-geography{top: 20%;left: 4%;color:var(--red);}
@media (max-width: 860px){
    .academic-support-panel{
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 34px 24px;
    }
}
@media (max-width: 520px){
    .academic-subject-visual{transform:scale(.92);}
}