/* =========================================================
   PROFENAA TECHNOLOGY — Core Design System
   ========================================================= */


:root{
  /* --- Color tokens (drawn from the logo mark) --- */
  --ink-900:#161b3d;      /* deep navy - primary text / dark surfaces */
  --ink-700:#242c5c;      /* logo navy */
  --blue-600:#2e5adb;     /* logo mid-blue */
  --blue-500:#3f7ee8;
  --sky-400:#5bc3e8;      /* logo light triangle */
  --amber-500:#2563eb;    /* accent — now blue, was amber */
  --amber-600:#1d4ed8;    /* accent hover — now deep blue, was amber */
  --paper-0:#ffffff;
  --paper-50:#f5f7fc;
  --paper-100:#eef1fa;
  --line-200:#dde2f0;
  --slate-500:#5b6584;
  --slate-700:#3a4262;

  /* --- Type --- */
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  /* --- Scale --- */
  --radius-sm:6px;
  --radius-md:14px;
  --radius-lg:26px;
  --shadow-soft:0 20px 45px -25px rgba(22,27,61,0.35);
  --shadow-tight:0 8px 20px -12px rgba(22,27,61,0.28);
  --maxw:1180px;
}
.social-sidebar{
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}

.social-sidebar a{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    font-size: 22px;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    transition: all .3s ease;
}

.social-sidebar a:hover{
    transform: translateX(-8px) scale(1.12);
}

/* Colors */

.whatsapp{
    background:#25D366;
}

.facebook{
    background:#1877F2;
}

.instagram{
    background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4);
}

.linkedin{
    background:#0077B5;
}

.youtube{
    background:#FF0000;
}

/* Mobile */

@media (max-width:768px){

.social-sidebar{
    right:10px;
}

.social-sidebar a{
    width:45px;
    height:45px;
    font-size:20px;
}

}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--paper-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink-900);
  margin:0 0 .5em;
  line-height:1.15;
  letter-spacing:-0.01em;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue-600);
  display:inline-flex;
  align-items:center;
  gap:.5em;
  margin-bottom:1em;
}
.eyebrow::before{
  content:'';
  width:18px; height:2px;
  background:var(--amber-500);
  display:inline-block;
}

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 clamp(20px,4vw,48px);
}

.section{ padding:clamp(56px,8vw,110px) 0; }
.section-tight{ padding:clamp(40px,5vw,64px) 0; }
.bg-paper{ background:var(--paper-50); }
.bg-ink{ background:var(--ink-900); color:var(--paper-0); }
.bg-ink h1,.bg-ink h2,.bg-ink h3{ color:var(--paper-0); }

.section-head{
  max-width:640px;
  margin-bottom:clamp(32px,5vw,52px);
}
.section-head p{ color:var(--slate-500); font-size:1.02rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* --- Buttons --- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.85em 1.7em;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  border:1.5px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--amber-500);
  color:var(--ink-900);
  box-shadow:var(--shadow-tight);
}
.btn-primary:hover{ background:var(--amber-600); transform:translateY(-2px); }
.btn-ghost{
  background:transparent;
  border-color:rgba(255,255,255,.4);
  color:inherit;
}
.btn-ghost:hover{ background:rgba(255,255,255,.12); }
.btn-outline-ink{
  border-color:var(--ink-900);
  color:var(--ink-900);
  background:transparent;
}
.btn-outline-ink:hover{ background:var(--ink-900); color:#fff; }
.btn-block{ width:100%; justify-content:center; }

/* --- Triangle signature motif (from logo) --- */
.tri{
  clip-path:polygon(0 0, 100% 50%, 0 100%);
  display:inline-block;
}

/* --- Cards --- */
.card{
  background:var(--paper-0);
  border:1px solid var(--line-200);
  border-radius:var(--radius-md);
  padding:clamp(22px,3vw,32px);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-soft);
  border-color:transparent;
}

/* --- Stat block --- */
.stat b{
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,2.8rem);
  color:var(--ink-900);
  display:block;
}
.stat span{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--slate-500);
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* --- Focus visibility --- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2.5px solid var(--blue-600);
  outline-offset:3px;
}

/* --- Scroll reveal --- */
[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease;
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
[data-reveal="1"]{ transition-delay:.05s; }
[data-reveal="2"]{ transition-delay:.15s; }
[data-reveal="3"]{ transition-delay:.25s; }
[data-reveal="4"]{ transition-delay:.35s; }

/* --- Form fields (shared: contact, enroll, login) --- */
.field{ margin-bottom:18px; }
.field label{
  display:block;
  font-size:.85rem;
  font-weight:600;
  margin-bottom:6px;
  color:var(--slate-700);
}
.field input,
.field textarea,
.field select{
  width:100%;
  padding:.85em 1em;
  border:1.5px solid var(--line-200);
  border-radius:var(--radius-sm);
  font-size:.94rem;
  color:var(--ink-900);
  background:var(--paper-0);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus,
.field textarea:focus,
.field select:focus{
  border-color:var(--blue-600);
  box-shadow:0 0 0 3px rgba(46,90,219,.14);
  outline:none;
}
.field textarea{ resize:vertical; min-height:110px; }
.field__error{
  display:block;
  font-size:.78rem;
  color:#d64545;
  margin-top:5px;
  min-height:1em;
}
.field.has-error input,
.field.has-error textarea,
.field.has-error select{ border-color:#d64545; }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }

.form-note{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.88rem;
  padding:.9em 1em;
  border-radius:var(--radius-sm);
  margin-bottom:18px;
}
.form-note.success{ background:#e8f6ec; color:#217a3b; }
.form-note.hidden{ display:none; }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

.scroll-content i {
    font-size: 20px;
}

/* Icon Colors */
.fa-cogs {
    color: #FFD700; /* Gold */
}

.fa-building {
    color: #00E5FF; /* Cyan */
}

.fa-microchip {
    color: #00FF7F; /* Green */
}

.fa-laptop-code {
    color: #FFFFFF; /* White */
}

.fa-chart-line {
    color: #FFEB3B; /* Yellow */
}

.fa-photo-film {
    color: #FF69B4; /* Pink */
}


/* =========================================================
   PROFENAA TECHNOLOGIES
   NEW HERO STRUCTURE
   ========================================================= */

.hero {

    position: relative;

    min-height: 780px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 85% 45%,
            rgba(63,126,232,.22),
            transparent 30%
        ),

        radial-gradient(
            circle at 10% 90%,
            rgba(91,195,232,.10),
            transparent 25%
        ),

        var(--ink-900);

    color: #fff;
}


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

.hero-bg {

    position: absolute;

    inset: 0;

    pointer-events: none;

    background-image:

        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    mask-image:
        linear-gradient(
            to right,
            black,
            transparent
        );

}


/* =========================================================
   DECORATIVE ORBITS
   ========================================================= */

.hero-orbit {

    position: absolute;

    border: 1px solid
        rgba(91,195,232,.12);

    border-radius: 50%;

    pointer-events: none;
}

.hero-orbit-one {

    width: 600px;
    height: 600px;

    right: -230px;
    top: 50%;

    transform:
        translateY(-50%);

}

.hero-orbit-two {

    width: 420px;
    height: 420px;

    right: -140px;
    top: 50%;

    transform:
        translateY(-50%);

    border-color:
        rgba(63,126,232,.18);
}


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

.hero .container {

    position: relative;

    z-index: 5;

    width: 100%;
}

.hero-grid {

    display: grid;

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

    align-items: center;

    gap: 70px;

    min-height: 780px;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.hero-content {

    max-width: 680px;

    padding:
        70px 0;
}


/* =========================================================
   BADGE
   ========================================================= */

.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 9px 15px;

    border: 1px solid
        rgba(91,195,232,.28);

    border-radius: 50px;

    background:
        rgba(91,195,232,.07);

    color: var(--sky-400);

    font-family:
        var(--font-mono);

    font-size: .7rem;

    letter-spacing: .08em;

    margin-bottom: 28px;
}

.badge-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--sky-400);

    box-shadow:
        0 0 12px
        var(--sky-400);

}


/* =========================================================
   MAIN HEADING
   ========================================================= */

.hero h1 {

    margin: 0 0 25px;

    color: #fff;

    font-family:
        var(--font-display);

    font-size:
        clamp(3.2rem, 6vw, 5.5rem);

    font-weight: 700;

    line-height: .98;

    letter-spacing:
        -.055em;
}

.hero h1 span {

    display: block;

    margin-top: 10px;

    background:
        linear-gradient(
            90deg,
            var(--sky-400),
            var(--blue-500)
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color:
        transparent;
}


/* =========================================================
   SUBTITLE
   ========================================================= */

.hero-subtitle {

    max-width: 650px;

    margin: 0 0 15px;

    color: #e2e7ff;

    font-size:
        clamp(1.15rem, 2vw, 1.4rem);

    line-height: 1.55;

    font-weight: 500;
}


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

.hero-description {

    max-width: 650px;

    margin: 0 0 32px;

    color: #aeb8d8;

    font-size: .96rem;

    line-height: 1.8;
}


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

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 40px;
}

.hero .btn-primary {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding:
        15px 23px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            var(--blue-500),
            var(--blue-600)
        );

    color: #fff;

    font-size: .9rem;

    font-weight: 700;

    box-shadow:
        0 15px 35px
        rgba(46,90,219,.3);

    transition:
        .3s ease;
}

.hero .btn-primary span {

    font-size: 1.2rem;

    transition:
        transform .3s ease;
}

.hero .btn-primary:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 20px 45px
        rgba(46,90,219,.45);
}

.hero .btn-primary:hover span {

    transform:
        translateX(5px);
}


.btn-hero-outline {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        14px 22px;

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

    border-radius: 9px;

    color: #fff;

    font-size: .9rem;

    font-weight: 600;

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

    transition:
        .3s ease;
}

.btn-hero-outline:hover {

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

    border-color:
        rgba(91,195,232,.5);

    transform:
        translateY(-3px);
}


/* =========================================================
   TRUST ITEMS
   ========================================================= */

.hero-trust {

    display: flex;

    align-items: center;

    gap: 22px;
}

.trust-item {

    display: flex;

    flex-direction: column;

    gap: 2px;
}

.trust-item strong {

    color: #fff;

    font-family:
        var(--font-display);

    font-size: .95rem;
}

.trust-item span {

    color: #8994b9;

    font-size: .68rem;

    text-transform:
        uppercase;

    letter-spacing: .04em;
}

.trust-line {

    width: 1px;

    height: 35px;

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


/* =========================================================
   RIGHT VISUAL
   ========================================================= */

.hero-visual {

    position: relative;

    min-height: 560px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.visual-glow {

    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(63,126,232,.25),
            transparent 68%
        );

    filter: blur(10px);
}


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

.visual-card {

    position: relative;

    width: min(100%, 480px);

    min-height: 500px;

    padding: 20px;

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

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.035)
        );

    backdrop-filter:
        blur(25px);

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

    box-shadow:
        0 35px 80px
        rgba(0,0,0,.3);

    transform:
        rotateY(-4deg)
        rotateX(2deg);
}


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

.visual-card-top {

    display: flex;

    align-items: center;

    gap: 9px;

    padding-bottom: 18px;

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

    color: #8f9abd;

    font-family:
        var(--font-mono);

    font-size: .65rem;

    letter-spacing: .08em;
}

.status-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #42e695;

    box-shadow:
        0 0 10px
        rgba(66,230,149,.7);
}

.visual-menu {

    margin-left: auto;

    letter-spacing: 3px;
}


/* =========================================================
   CODE WINDOW
   ========================================================= */

.visual-main {

    position: relative;

    min-height: 340px;

    padding-top: 35px;
}

.code-window {

    width: 88%;

    margin: auto;

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

    border-radius: 12px;

    overflow: hidden;

    background:
        rgba(5,10,30,.72);

    box-shadow:
        0 20px 40px
        rgba(0,0,0,.25);
}

.code-header {

    display: flex;

    gap: 6px;

    padding: 11px 14px;

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

.code-header span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.3);
}

.code-content {

    padding:
        24px 20px;

    font-family:
        var(--font-mono);

    font-size: .75rem;

    line-height: 2;

    color: #bbc6e9;
}

.code-content p {
    margin: 0;
}

.code-indent {
    padding-left: 20px;
}

.code-indent-two {
    padding-left: 40px;
}

.code-purple {
    color: #c792ea;
}

.code-blue {
    color: #82aaff;
}

.code-green {
    color: #c3e88d;
}

.code-yellow {
    color: #ffcb6b;
}


/* =========================================================
   FLOATING COURSE CARDS
   ========================================================= */

.floating-course {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        10px 13px;

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

    border-radius: 10px;

    background:
        rgba(22,27,61,.88);

    backdrop-filter:
        blur(15px);

    box-shadow:
        0 15px 30px
        rgba(0,0,0,.25);

    animation:
        floatCard 5s ease-in-out infinite;
}

.floating-course strong {

    display: block;

    color: #fff;

    font-size: .75rem;
}

.floating-course small {

    display: block;

    color: #7f8bad;

    font-size: .6rem;
}

.course-icon {

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    background:
        rgba(63,126,232,.18);

    color:
        var(--sky-400);

    font-family:
        var(--font-mono);

    font-size: .7rem;

    font-weight: 700;
}

.course-python {

    left: 0;

    top: 30%;

    animation-delay:
        -.5s;
}

.course-fullstack {

    right: -15px;

    top: 48%;

    animation-delay:
        -1.5s;
}

.course-design {

    left: 8%;

    bottom: 5%;

    animation-delay:
        -2.5s;
}

@keyframes floatCard {

    0%,100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-12px);
    }
}


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

.learning-progress {

    padding-top: 20px;
}

.progress-header {

    display: flex;

    justify-content: space-between;

    margin-bottom: 9px;

    color: #8994b9;

    font-size: .68rem;
}

.progress-header strong {

    color: var(--sky-400);
}

.progress-bar {

    width: 100%;

    height: 5px;

    overflow: hidden;

    border-radius: 20px;

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

.progress-bar span {

    display: block;

    width: 85%;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--blue-600),
            var(--sky-400)
        );
}


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

.hero__strip {

    width: 100%;

    overflow: hidden;

    background:
        #111633;

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

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

    padding: 13px 0;
}

.scroll-content {

    display: flex;

    width: max-content;

    gap: 55px;

    animation:
        marquee 25s linear infinite;
}

.scroll-content span {

    color: #dce3ff;

    font-family:
        var(--font-body);

    font-size: .8rem;

    font-weight: 600;

    white-space: nowrap;

    letter-spacing: .02em;
}

@keyframes marquee {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(-50%);
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .hero-grid {

        grid-template-columns: 1fr;

        gap: 20px;

        min-height: auto;
    }

    .hero-content {

        max-width: 760px;

        padding:
            90px 0 30px;
    }

    .hero-visual {

        min-height: 560px;

        padding-bottom: 70px;
    }

    .hero h1 {

        font-size:
            clamp(3rem, 8vw, 5rem);
    }

}


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

@media (max-width: 600px) {

    .hero-grid {

        display: block;
    }

    .hero-content {

        padding:
            65px 0 25px;
    }

    .hero-badge {

        font-size: .58rem;

        padding:
            8px 11px;

        letter-spacing: .04em;
    }

    .hero h1 {

        font-size:
            clamp(2.7rem, 13vw, 4rem);

        line-height: 1;

        margin-bottom: 20px;
    }

    .hero-subtitle {

        font-size: 1rem;

        line-height: 1.55;
    }

    .hero-description {

        font-size: .86rem;

        line-height: 1.7;
    }

    .hero-buttons {

        flex-direction: column;

        align-items: stretch;

        gap: 10px;
    }

    .hero .btn-primary,
    .btn-hero-outline {

        width: 100%;

        justify-content: center;
    }

    .hero-trust {

        gap: 12px;

        justify-content:
            space-between;
    }

    .trust-line {

        height: 30px;
    }

    .trust-item strong {

        font-size: .78rem;
    }

    .trust-item span {

        font-size: .55rem;
    }

    .hero-visual {

        min-height: 470px;

        padding:
            20px 0 60px;
    }

    .visual-card {

        min-height: 430px;

        padding: 14px;

        border-radius: 17px;

        transform: none;
    }

    .code-window {

        width: 95%;
    }

    .code-content {

        font-size: .62rem;

        padding:
            18px 12px;
    }

    .code-indent {

        padding-left: 12px;
    }

    .code-indent-two {

        padding-left: 24px;
    }

    .floating-course {

        padding:
            8px 9px;
    }

    .course-python {

        left: -5px;
    }

    .course-fullstack {

        right: -5px;
    }

    .course-design {

        left: 0;
    }

    .course-icon {

        width: 29px;
        height: 29px;

        font-size: .6rem;
    }

    .floating-course strong {

        font-size: .65rem;
    }

    .floating-course small {

        font-size: .52rem;
    }

    .hero-orbit-one {

        width: 400px;
        height: 400px;

        right: -250px;
    }

    .hero-orbit-two {

        width: 300px;
        height: 300px;

        right: -190px;
    }

}


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

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

    .floating-course,
    .scroll-content {

        animation: none;
    }
}