/* Shared Bankir Academy frontend styles. */

:root{
      --primary:#6757D9;
      --primary-dark:#342A78;
      --primary-light:#F1EFFF;
      --secondary:#00B7A8;
      --secondary-dark:#087E76;
      --accent:#FFC95C;
      --navy:#17143D;
      --text:#44445B;
      --muted:#737388;
      --line:#E8E7F1;
      --white:#FFFFFF;
      --page:#FAFAFF;
      --success:#208A69;
      --danger:#C04A67;
      --shadow:0 22px 60px rgba(31,27,82,.10);
      --shadow-sm:0 12px 30px rgba(31,27,82,.08);
      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
      --container:1180px;
    }

*{box-sizing:border-box}

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

body{
      margin:0;
      color:var(--text);
      background:var(--page);
      font-family:"Inter",Arial,sans-serif;
      line-height:1.7;
      overflow-x:hidden;
    }

body.menu-open{overflow:hidden}

img,svg{max-width:100%;display:block}

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

button,input,select,textarea{font:inherit}

button{cursor:pointer}

h1,h2,h3,h4,p{margin-top:0}

h1,h2,h3,h4{
      color:var(--navy);
      font-family:"Manrope",sans-serif;
      letter-spacing:-.025em;
    }

.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}

.section{padding:96px 0}

.section-soft{background:linear-gradient(180deg,#F8F7FF 0%,#FFFFFF 100%)}

.section-dark{color:#fff;background:var(--navy)}

.section-dark h2,.section-dark h3,.section-dark h4{color:#fff}

.section-head{max-width:760px;margin:0 auto 48px;text-align:center}

.section-head.left{margin-left:0;text-align:left}

.section-head h2{
      margin:14px 0 15px;
      font-size:clamp(31px,4vw,48px);
      line-height:1.14;
    }

.section-head p{color:var(--muted);font-size:16px}

.section-dark .section-head p{color:rgba(255,255,255,.68)}

.eyebrow{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:7px 12px;
      color:var(--primary-dark);
      background:#fff;
      border:1px solid rgba(103,87,217,.17);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.10em;
      text-transform:uppercase;
    }

.eyebrow::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:var(--secondary);
      box-shadow:0 0 0 5px rgba(0,183,168,.12);
    }

.section-dark .eyebrow{
      color:#fff;background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.12);
    }

.btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 21px;
      border:1px solid transparent;
      border-radius:13px;
      font-weight:750;
      transition:.22s ease;
    }

.btn:hover{transform:translateY(-2px)}

.btn-primary{
      color:#fff;background:var(--primary);
      box-shadow:0 12px 28px rgba(103,87,217,.28);
    }

.btn-primary:hover{background:#5747C8}

.btn-secondary{color:#fff;background:var(--secondary)}

.btn-light{color:var(--primary-dark);background:#fff}

.btn-outline{
      color:var(--primary-dark);
      background:rgba(255,255,255,.75);
      border-color:#DCD9F0;
    }

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.icon-arrow{font-size:18px;line-height:1}

.tag{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      color:var(--primary-dark);
      background:var(--primary-light);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
    }

/* Header */
    .site-header{
      position:fixed;top:0;left:0;right:0;z-index:100;
      background:rgba(255,255,255,.92);
      border-bottom:1px solid rgba(232,231,241,.86);
      backdrop-filter:blur(17px);
      transition:.25s ease;
    }

.site-header.scrolled{box-shadow:0 9px 28px rgba(31,27,82,.08)}

.header-inner{
      min-height:82px;
      display:flex;align-items:center;justify-content:space-between;gap:24px;
    }

.brand{display:inline-flex;align-items:center;gap:12px;min-width:max-content}

.brand-logo{width:49px;height:49px;filter:drop-shadow(0 10px 14px rgba(103,87,217,.20))}

.brand-copy strong{
      display:block;color:var(--navy);
      font:800 19px/1.1 "Manrope",sans-serif;
    }

.brand-copy small{
      display:block;margin-top:5px;color:var(--muted);
      font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    }

.desktop-nav{display:flex;align-items:center;gap:4px}

.nav-item{position:relative}

.nav-link{
      display:flex;align-items:center;gap:6px;
      padding:12px 13px;
      color:#48475F;
      border-radius:10px;
      font-size:13px;font-weight:700;
      transition:.18s ease;
    }

.nav-link:hover,.nav-link.active{color:var(--primary);background:var(--primary-light)}

.chevron{font-size:10px;transition:.18s}

.nav-item:hover .chevron{transform:rotate(180deg)}

.dropdown{
      position:absolute;top:calc(100% + 12px);left:0;
      width:300px;padding:10px;
      background:#fff;border:1px solid var(--line);
      border-radius:18px;box-shadow:var(--shadow);
      opacity:0;visibility:hidden;transform:translateY(9px);
      transition:.18s ease;
    }

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}

.dropdown.wide{width:680px;display:grid;grid-template-columns:1fr 1fr;gap:6px}

.drop-link{
      display:flex;gap:12px;padding:12px;
      border-radius:12px;transition:.18s;
    }

.drop-link:hover{background:var(--primary-light)}

.drop-icon{
      flex:0 0 auto;width:38px;height:38px;border-radius:11px;
      display:grid;place-items:center;
      color:var(--primary);background:#F3F1FF;font-size:17px;
    }

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span{display:block;margin-top:2px;color:var(--muted);font-size:11px;line-height:1.45}

.header-action{display:flex;align-items:center;gap:9px}

.menu-toggle{
      display:none;width:45px;height:45px;
      border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--navy);
    }

/* Mobile menu */
    .mobile-panel{
      display:none;
      position:fixed;inset:82px 0 0;z-index:99;
      padding:18px 20px 35px;
      background:#fff;overflow:auto;
    }

.mobile-panel.open{display:block}

.mobile-group{border-bottom:1px solid var(--line)}

.mobile-main{
      width:100%;display:flex;align-items:center;justify-content:space-between;
      padding:15px 4px;border:0;background:none;color:var(--navy);font-weight:800;text-align:left;
    }

.mobile-sub{display:none;padding:0 0 12px 12px}

.mobile-sub.open{display:grid}

.mobile-sub a{padding:9px 8px;color:var(--muted);font-size:14px}

.mobile-login{margin-top:20px;width:100%}

/* Hero */
    .hero{
      position:relative;overflow:hidden;
      padding:156px 0 82px;
      background:
        radial-gradient(circle at 14% 23%,rgba(0,183,168,.14),transparent 27%),
        radial-gradient(circle at 87% 20%,rgba(255,201,92,.20),transparent 24%),
        linear-gradient(135deg,#F4F1FF 0%,#FFFFFF 52%,#EDFBF9 100%);
    }

.hero::before{
      content:"";position:absolute;left:-110px;bottom:-145px;
      width:360px;height:360px;border:52px solid rgba(103,87,217,.055);border-radius:50%;
    }

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:62px;align-items:center}

.hero h1{
      margin:20px 0 19px;
      font-size:clamp(42px,5.4vw,69px);
      line-height:1.05;
    }

.gradient-text{
      background:linear-gradient(90deg,var(--primary),var(--secondary-dark));
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }

.hero-lead{max-width:690px;color:#626278;font-size:17px}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px}

.hero-proof{display:flex;flex-wrap:wrap;gap:16px;margin-top:31px}

.proof-item{display:flex;align-items:center;gap:9px;color:#5D5C72;font-size:12px;font-weight:700}

.proof-icon{
      width:28px;height:28px;display:grid;place-items:center;
      color:var(--secondary-dark);background:#E9FAF7;border-radius:9px;
    }

.hero-visual{position:relative;min-height:530px}

.visual-main{
      position:absolute;inset:18px 6px 18px 40px;
      padding:22px;
      background:rgba(255,255,255,.78);
      border:1px solid rgba(255,255,255,.95);
      border-radius:34px;box-shadow:var(--shadow);
      backdrop-filter:blur(15px);
    }

.dashboard{
      height:100%;padding:22px;
      background:linear-gradient(150deg,#282162,#17143D);
      border-radius:25px;overflow:hidden;
    }

.dash-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}

.dash-brand{display:flex;align-items:center;gap:9px;color:#fff;font-size:12px;font-weight:800}

.dash-dots{display:flex;gap:5px}

.dash-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}

.dash-hero{
      padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.62),rgba(0,183,168,.36));
      border:1px solid rgba(255,255,255,.12);border-radius:19px;
    }

.dash-label{color:#D9D4FF;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.dash-hero h3{margin:8px 0 7px;color:#fff;font-size:25px;line-height:1.2}

.dash-hero p{margin:0;color:rgba(255,255,255,.68);font-size:11px}

.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}

.dash-stat{padding:13px;background:rgba(255,255,255,.07);border-radius:13px}

.dash-stat strong{display:block;color:#fff;font-size:16px}

.dash-stat span{color:rgba(255,255,255,.55);font-size:9px}

.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}

.dash-card{padding:16px;background:#fff;border-radius:16px}

.dash-card h4{margin-bottom:10px;font-size:12px}

.progress{height:7px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.mini-list{display:grid;gap:8px}

.mini-row{display:flex;align-items:center;gap:8px}

.mini-row i{width:9px;height:9px;border-radius:3px;background:var(--secondary)}

.mini-row span{font-size:9px;color:var(--muted)}

.float-card{
      position:absolute;z-index:2;display:flex;align-items:center;gap:12px;
      padding:14px 17px;background:#fff;border:1px solid var(--line);
      border-radius:16px;box-shadow:var(--shadow-sm);
    }

.float-card.one{left:0;top:88px}

.float-card.two{right:-10px;bottom:75px}

.float-card.three{left:10px;bottom:15px}

.float-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--primary-light);color:var(--primary)}

.float-card strong{display:block;color:var(--navy);font-size:12px}

.float-card small{display:block;color:var(--muted);font-size:9px}

/* Trust strip */
    .trust-strip{position:relative;z-index:3;margin-top:-1px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.trust-inner{display:grid;grid-template-columns:1.15fr repeat(4,1fr);align-items:center;gap:20px;padding:25px 0}

.trust-copy strong{display:block;color:var(--navy);font-size:13px}

.trust-copy span{color:var(--muted);font-size:11px}

.trust-item{display:flex;align-items:center;justify-content:center;gap:9px;color:#69677D;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}

.trust-mark{width:32px;height:32px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:10px}

/* Solution cards */
    .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

.service-card{
      position:relative;overflow:hidden;
      min-height:310px;padding:28px;
      background:#fff;border:1px solid var(--line);
      border-radius:var(--radius-lg);box-shadow:0 12px 35px rgba(31,27,82,.055);
      transition:.25s ease;
    }

.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}

.service-card::after{
      content:"";position:absolute;right:-45px;bottom:-50px;width:145px;height:145px;
      border:27px solid rgba(103,87,217,.055);border-radius:50%;
    }

.card-icon{
      width:54px;height:54px;display:grid;place-items:center;
      color:var(--primary);background:var(--primary-light);
      border-radius:16px;font-size:24px;
    }

.service-card:nth-child(2n) .card-icon{color:var(--secondary-dark);background:#E9FAF7}

.service-card:nth-child(3n) .card-icon{color:#9A6C0F;background:#FFF6DE}

.service-card h3{margin:21px 0 11px;font-size:21px}

.service-card p{color:var(--muted);font-size:13px}

.card-list{display:grid;gap:8px;margin:18px 0 20px;padding:0;list-style:none}

.card-list li{display:flex;gap:9px;color:#55546A;font-size:12px}

.card-list li::before{content:"✓";color:var(--secondary-dark);font-weight:900}

.text-link{position:relative;z-index:2;color:var(--primary);font-size:12px;font-weight:800}

.text-link:hover{text-decoration:underline}

/* Split */
    .split{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}

.feature-visual{
      position:relative;min-height:520px;padding:33px;
      background:linear-gradient(145deg,#F0EDFF,#EAFBF8);
      border:1px solid #E2DFF7;border-radius:32px;
    }

.feature-screen{
      position:absolute;inset:48px 32px 34px 57px;padding:22px;
      background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow);
    }

.screen-nav{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}

.screen-title{font-size:11px;font-weight:800;color:var(--navy)}

.screen-pill{padding:5px 9px;color:var(--secondary-dark);background:#E8FAF7;border-radius:99px;font-size:8px;font-weight:800}

.chart-area{display:flex;align-items:flex-end;gap:10px;height:155px;padding:25px 10px 8px;border-bottom:1px solid var(--line)}

.bar{flex:1;min-width:15px;background:linear-gradient(180deg,var(--primary),#9488EC);border-radius:7px 7px 2px 2px}

.screen-bottom{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px}

.screen-box{padding:14px;background:#FAFAFF;border:1px solid var(--line);border-radius:13px}

.screen-box strong{display:block;color:var(--navy);font-size:19px}

.screen-box span{color:var(--muted);font-size:9px}

.feature-chip{
      position:absolute;display:flex;align-items:center;gap:9px;padding:12px 14px;
      background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);
    }

.feature-chip.one{top:21px;right:18px}

.feature-chip.two{left:12px;bottom:53px}

.feature-chip i{width:32px;height:32px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.feature-chip strong{display:block;color:var(--navy);font-size:10px}

.feature-chip span{display:block;color:var(--muted);font-size:8px}

.feature-copy h2{margin:14px 0 16px;font-size:clamp(31px,4vw,48px);line-height:1.14}

.feature-copy>p{color:var(--muted)}

.feature-points{display:grid;gap:16px;margin:27px 0 30px}

.feature-point{display:flex;gap:14px}

.point-icon{flex:0 0 auto;width:39px;height:39px;display:grid;place-items:center;color:var(--secondary-dark);background:#E9FAF7;border-radius:12px;font-weight:900}

.feature-point strong{display:block;color:var(--navy);font-size:13px}

.feature-point span{display:block;margin-top:2px;color:var(--muted);font-size:11px}

/* Innovation */
    .innovation-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:25px}

.innovation-main{
      min-height:480px;padding:34px;
      color:#fff;background:linear-gradient(145deg,var(--primary-dark),var(--primary));
      border-radius:29px;overflow:hidden;position:relative;
    }

.innovation-main h3{max-width:540px;margin:18px 0 14px;color:#fff;font-size:32px;line-height:1.17}

.innovation-main p{max-width:610px;color:rgba(255,255,255,.74)}

.innovation-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}

.innovation-tags span{padding:8px 11px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.13);border-radius:99px;font-size:10px;font-weight:800}

.ai-orbit{position:absolute;right:-35px;bottom:-72px;width:330px;height:330px;border:1px solid rgba(255,255,255,.15);border-radius:50%}

.ai-orbit::before,.ai-orbit::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%}

.ai-orbit::before{inset:45px}

.ai-orbit::after{inset:93px}

.ai-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:83px;height:83px;display:grid;place-items:center;color:var(--primary-dark);background:#fff;border-radius:24px;font:800 25px "Manrope"}

.orbit-dot{position:absolute;width:36px;height:36px;display:grid;place-items:center;color:#fff;background:var(--secondary);border-radius:12px;font-size:13px}

.orbit-dot.a{left:39px;top:57px}

.orbit-dot.b{right:18px;top:115px}

.orbit-dot.c{left:72px;bottom:27px}

.innovation-side{display:grid;gap:20px}

.example-card{padding:25px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.example-head{display:flex;align-items:center;justify-content:space-between;gap:15px}

.example-head h3{margin:0;font-size:18px}

.example-card p{margin:12px 0 15px;color:var(--muted);font-size:12px}

.example-meta{display:flex;flex-wrap:wrap;gap:7px}

.example-meta span{padding:6px 9px;color:#65637A;background:#F5F4FA;border-radius:8px;font-size:9px;font-weight:750}

/* Foundation */
    .foundation-card{
      position:relative;overflow:hidden;padding:33px;
      background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-sm);
    }

.foundation-card.education{background:linear-gradient(145deg,#FFFFFF,#F3F0FF)}

.foundation-card.umkm{background:linear-gradient(145deg,#FFFFFF,#EBFAF7)}

.foundation-card h3{margin:19px 0 11px;font-size:27px}

.foundation-card p{color:var(--muted);font-size:13px}

.foundation-programs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:24px 0}

.program-mini{padding:13px;background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:13px}

.program-mini strong{display:block;color:var(--navy);font-size:11px}

.program-mini span{display:block;margin-top:3px;color:var(--muted);font-size:9px}

/* Journey */
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.step{
      position:relative;padding:25px 22px;background:#fff;border:1px solid var(--line);border-radius:20px;
    }

.step-no{
      width:41px;height:41px;display:grid;place-items:center;
      color:#fff;background:var(--primary);border-radius:13px;font-weight:800;
    }

.step h3{margin:17px 0 8px;font-size:17px}

.step p{color:var(--muted);font-size:11px}

.step:not(:last-child)::after{
      content:"→";position:absolute;right:-17px;top:32px;z-index:3;color:#B3AEE2;font-size:22px;font-weight:900;
    }

/* Curriculum */
    .curriculum-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:30px}

.tab-btn{
      min-height:41px;padding:0 15px;border:1px solid var(--line);border-radius:11px;
      color:var(--muted);background:#fff;font-size:11px;font-weight:800;
    }

.tab-btn.active{color:#fff;background:var(--primary);border-color:var(--primary)}

.curriculum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.curriculum-item{padding:21px;background:#fff;border:1px solid var(--line);border-radius:17px}

.curriculum-item .num{color:var(--primary);font-size:10px;font-weight:900}

.curriculum-item h3{margin:8px 0 7px;font-size:15px;line-height:1.35}

.curriculum-item p{margin:0;color:var(--muted);font-size:10px}

/* App */
    .app-wrap{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr .92fr;gap:55px;align-items:center;
      padding:50px 55px;color:#fff;
      background:linear-gradient(135deg,#211A58,#6757D9);
      border-radius:34px;
    }

.app-wrap h2{margin:14px 0 14px;color:#fff;font-size:clamp(30px,4vw,47px);line-height:1.15}

.app-wrap p{color:rgba(255,255,255,.70)}

.store-row{display:flex;flex-wrap:wrap;gap:11px;margin-top:25px}

.store-badge{
      display:flex;align-items:center;gap:11px;min-width:175px;padding:10px 14px;
      color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
      border-radius:13px;
    }

.store-badge svg{width:28px;height:28px}

.store-badge small{display:block;color:rgba(255,255,255,.60);font-size:8px;text-transform:uppercase;letter-spacing:.08em}

.store-badge strong{display:block;font-size:12px}

.phone-scene{position:relative;min-height:420px}

.phone{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(5deg);
      width:230px;height:420px;padding:9px;background:#111026;border:2px solid rgba(255,255,255,.25);
      border-radius:35px;box-shadow:0 28px 55px rgba(0,0,0,.32);
    }

.phone-screen{height:100%;padding:19px 15px;background:linear-gradient(180deg,#F5F2FF,#fff);border-radius:27px;overflow:hidden}

.notch{width:76px;height:17px;margin:-11px auto 15px;background:#111026;border-radius:0 0 13px 13px}

.mobile-logo{display:flex;align-items:center;gap:7px;color:var(--navy);font-size:9px;font-weight:900}

.mobile-logo svg{width:25px}

.mobile-welcome{margin-top:18px;padding:16px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:17px}

.mobile-welcome strong{display:block;font-size:13px}

.mobile-welcome span{font-size:8px;opacity:.78}

.mobile-course-title{margin:16px 0 9px;color:var(--navy);font-size:10px;font-weight:900}

.mobile-course{display:flex;gap:9px;margin-bottom:8px;padding:9px;background:#fff;border:1px solid var(--line);border-radius:11px}

.mobile-thumb{width:42px;height:38px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:8px;font-size:12px}

.mobile-course strong{display:block;color:var(--navy);font-size:8px}

.mobile-course span{display:block;color:var(--muted);font-size:6px}

.app-float{position:absolute;padding:13px 16px;background:#fff;border-radius:15px;box-shadow:var(--shadow)}

.app-float.a{left:5%;top:21%}

.app-float.b{right:3%;bottom:15%}

.app-float strong{display:block;color:var(--navy);font-size:10px}

.app-float span{color:var(--muted);font-size:8px}

/* About */
    .about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:29px}

.about-stat{padding:20px;background:#fff;border:1px solid var(--line);border-radius:16px}

.about-stat strong{display:block;color:var(--primary);font:800 24px "Manrope"}

.about-stat span{color:var(--muted);font-size:10px}

.about-note{padding:20px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 14px 14px 0;font-size:12px}

/* FAQ */
    .faq-wrap{max-width:880px;margin:0 auto}

.faq-item{margin-bottom:11px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}

.faq-q{
      width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
      padding:19px 21px;border:0;background:#fff;color:var(--navy);font-weight:800;text-align:left;
    }

.faq-plus{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:9px}

.faq-a{display:none;padding:0 21px 20px;color:var(--muted);font-size:12px}

.faq-item.open .faq-a{display:block}

.faq-item.open .faq-plus{transform:rotate(45deg)}

/* CTA */
    .final-cta{padding:78px 0}

.cta-box{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center;
      padding:42px 48px;color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));
      border-radius:30px;
    }

.cta-box::after{content:"";position:absolute;right:-80px;top:-110px;width:270px;height:270px;border:45px solid rgba(255,255,255,.07);border-radius:50%}

.cta-box h2{margin-bottom:9px;color:#fff;font-size:clamp(28px,4vw,43px)}

.cta-box p{margin:0;color:rgba(255,255,255,.70)}

.cta-actions{position:relative;z-index:2;display:flex;gap:10px;flex-wrap:wrap}

/* Footer */
    .site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:68px 0 46px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:48px}

.footer-brand p{max-width:390px;margin:19px 0 22px;font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:18px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:10px}

.footer-links a{font-size:12px;transition:.18s}

.footer-links a:hover{color:#fff;transform:translateX(3px)}

.footer-contact{display:grid;gap:10px;margin-top:18px}

.contact-row{display:flex;gap:10px;font-size:11px}

.contact-row i{font-style:normal;color:#AFA6FF}

.newsletter{display:flex;max-width:395px;margin-top:17px;padding:5px;background:#fff;border-radius:12px}

.newsletter input{width:100%;min-width:0;padding:0 12px;border:0;outline:0;font-size:11px}

.newsletter button{width:43px;border:0;border-radius:9px;color:#fff;background:var(--primary)}

.footer-bottom{padding:19px 0;border-top:1px solid rgba(255,255,255,.09);font-size:10px}

.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}

.footer-legal{display:flex;flex-wrap:wrap;gap:15px}

/* Floating WA */
    .floating-help{
      position:fixed;right:22px;bottom:22px;z-index:90;
      display:flex;align-items:center;gap:10px;padding:11px 15px;
      color:#fff;background:#1FAF6D;border-radius:99px;
      box-shadow:0 15px 35px rgba(16,119,73,.28);font-size:11px;font-weight:800;
    }

.floating-help span:first-child{font-size:19px}

/* Utilities */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:1060px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:grid;place-items:center}
.hero-grid,.split,.innovation-grid,.app-wrap{grid-template-columns:1fr}
.hero-visual{max-width:650px;width:100%;margin:0 auto}
.cards-3{grid-template-columns:repeat(2,1fr)}
.curriculum-grid{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(2,1fr)}
.step:nth-child(2)::after{display:none}
.footer-grid{grid-template-columns:repeat(2,1fr)}
.trust-inner{grid-template-columns:repeat(2,1fr)}
.trust-copy{grid-column:1/-1;text-align:center}
}

@media(max-width:700px){
.container{width:min(100% - 28px,var(--container))}
.section{padding:69px 0}
.brand-copy small{display:none}
.brand-logo{width:43px;height:43px}
.header-inner{min-height:74px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.hero{padding:124px 0 60px}
.hero h1{font-size:43px}
.hero-lead{font-size:15px}
.hero-visual{min-height:460px}
.visual-main{inset:12px 0 28px 20px}
.float-card.one{left:-4px;top:52px}
.float-card.two{right:-4px}
.float-card.three{display:none}
.dash-stats{grid-template-columns:1fr}
.dash-stat:nth-child(n+2){display:none}
.cards-3,.cards-2,.foundation-programs,.curriculum-grid,.about-stats,.steps,.footer-grid{grid-template-columns:1fr}
.step::after{display:none!important}
.feature-visual{min-height:445px;padding:20px}
.feature-screen{inset:44px 15px 25px 37px}
.innovation-main{min-height:520px}
.app-wrap{padding:35px 22px}
.phone-scene{min-height:390px}
.app-float.a{left:-10px}
.app-float.b{right:-10px}
.trust-inner{grid-template-columns:1fr 1fr}
.trust-item{font-size:9px}
.cta-box{grid-template-columns:1fr;padding:34px 25px}
.cta-actions{align-items:stretch;flex-direction:column}
.footer-bottom-inner{align-items:flex-start;flex-direction:column}
.floating-help{right:14px;bottom:14px;padding:11px}
.floating-help span:last-child{display:none}
}

/* Online Classes */
    .course-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:20px;
    }

.course-card{
      overflow:hidden;
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:var(--shadow-sm);
      transition:.24s ease;
    }

.course-card:hover{
      transform:translateY(-5px);
      box-shadow:var(--shadow);
    }

.course-cover{
      position:relative;
      min-height:180px;
      padding:22px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      color:#fff;
      overflow:hidden;
    }

.course-cover::after{
      content:"";
      position:absolute;
      right:-35px;
      bottom:-45px;
      width:135px;
      height:135px;
      border:24px solid rgba(255,255,255,.10);
      border-radius:50%;
    }

.course-cover.one{background:linear-gradient(135deg,#3A2F87,#6757D9)}

.course-cover.two{background:linear-gradient(135deg,#087E76,#00B7A8)}

.course-cover.three{background:linear-gradient(135deg,#8A5F13,#E0A832)}

.course-cover.four{background:linear-gradient(135deg,#8B3E62,#C04A67)}

.course-label{
      position:relative;
      z-index:1;
      align-self:flex-start;
      padding:6px 9px;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.17);
      border-radius:999px;
      font-size:9px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

.course-cover h3{
      position:relative;
      z-index:1;
      margin:28px 0 0;
      color:#fff;
      font-size:20px;
      line-height:1.28;
    }

.course-body{padding:21px}

.course-meta{
      display:flex;
      flex-wrap:wrap;
      gap:7px;
      margin-bottom:13px;
    }

.course-meta span{
      padding:5px 8px;
      color:var(--muted);
      background:#F5F4FA;
      border-radius:8px;
      font-size:9px;
      font-weight:750;
    }

.course-body p{
      margin-bottom:17px;
      color:var(--muted);
      font-size:12px;
    }

.course-actions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

.course-status{
      color:var(--secondary-dark);
      font-size:10px;
      font-weight:800;
    }

.course-more{
      margin-top:31px;
      text-align:center;
    }

@media(max-width:1060px){
.course-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.course-grid{grid-template-columns:1fr}
}

/* Header navigation refinement — unified multipage */
    .desktop-nav{gap:10px}

.nav-link{
      position:relative;
      gap:7px;
      padding:12px 5px;
      border:0;
      border-radius:0;
      background:transparent!important;
      box-shadow:none!important;
    }

.nav-link:hover,.nav-link.active{
      color:var(--primary);
      background:transparent!important;
    }

.nav-link::after{
      content:"";
      position:absolute;
      left:5px;right:5px;bottom:4px;
      height:2px;
      background:linear-gradient(90deg,var(--primary),var(--secondary));
      border-radius:99px;
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .2s ease;
    }

.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}

.mobile-main{gap:10px}

@media(max-width:1060px){
.desktop-nav{gap:4px}
}

/* Shared utility classes used by reusable Blade components. */
.logo-symbol{position:absolute}
.brand-copy-muted{color:#aaa5cf}
.tag-spaced{margin-top:19px}
.mini-list-spaced{margin-top:13px}
.dot-accent{background:#ffc95c!important}
.dot-primary{background:#6757d9!important}
.dot-danger{background:#c04a67!important}
.progress-76 span{width:76%}
.bar-42{height:42%}
.bar-51{height:51%}
.bar-63{height:63%}
.bar-68{height:68%}
.bar-78{height:78%}
.bar-88{height:88%}
.section-head-compact-24{margin-bottom:24px}
.section-head-compact-25{margin-bottom:25px}
.section-head-compact-26{margin-bottom:26px}
.card-icon-light{color:#fff!important;background:rgba(255,255,255,.13)!important}
.theme-purple{background:linear-gradient(135deg,#342a78,#6757d9)!important}
.theme-teal{background:linear-gradient(135deg,#087e76,#00b7a8)!important}
.theme-gold{background:linear-gradient(135deg,#8a5f13,#e0a832)!important}
.theme-red{background:linear-gradient(135deg,#8b3e62,#c04a67)!important}
.theme-indigo{background:linear-gradient(135deg,#282162,#5142c1)!important}
.theme-blue{background:linear-gradient(135deg,#24527a,#3987b9)!important}
.careers-hero{background:linear-gradient(135deg,#1b2a4a 0%,#2c3e50 100%)}
.promo-card{border-radius:8px;min-height:550px}
.rounded-8{border-radius:8px}
.card-body-compact{padding:.75rem}
.promo-info{background:#efefef;border-radius:8px;position:absolute;bottom:10px;left:10px;right:10px}
.promo-title{margin-bottom:0!important;font-weight:bold}
.rounded-10{border-radius:10px!important}
.job-card-clickable{transition:all .2s ease;cursor:pointer}
.job-detail-sticky{top:100px;z-index:1}
.event-breadcrumb{background-image:url('/frontend/infixlmstheme/img/new_bread_crumb_bg.png')}
.width-61{width:61%!important}.width-66{width:66%!important}.width-68{width:68%!important}
.width-69{width:69%!important}.width-72{width:72%!important}.width-73{width:73%!important}
.width-74{width:74%!important}.width-76{width:76%!important}.width-78{width:78%!important}
.width-79{width:79%!important}.width-81{width:81%!important}.width-82{width:82%!important}
.width-84{width:84%!important}.width-88{width:88%!important}.width-92{width:92%!important}
.width-94{width:94%!important}.width-96{width:96%!important}
.height-18{height:18%!important}.height-31{height:31%!important}.height-45{height:45%!important}
.height-63{height:63%!important}.height-72{height:72%!important}.height-78{height:78%!important}
.height-92{height:92%!important}

:root{
      --primary:#6757D9;
      --primary-dark:#342A78;
      --primary-light:#F1EFFF;
      --secondary:#00B7A8;
      --secondary-dark:#087E76;
      --accent:#FFC95C;
      --navy:#17143D;
      --text:#44445B;
      --muted:#737388;
      --line:#E8E7F1;
      --white:#FFFFFF;
      --page:#FAFAFF;
      --success:#208A69;
      --danger:#C04A67;
      --shadow:0 22px 60px rgba(31,27,82,.10);
      --shadow-sm:0 12px 30px rgba(31,27,82,.08);
      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
      --container:1180px;
    }

*{box-sizing:border-box}

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

body{
      margin:0;
      color:var(--text);
      background:var(--page);
      font-family:"Inter",Arial,sans-serif;
      line-height:1.7;
      overflow-x:hidden;
    }

body.menu-open{overflow:hidden}

img,svg{max-width:100%;display:block}

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

button,input,select,textarea{font:inherit}

button{cursor:pointer}

h1,h2,h3,h4,p{margin-top:0}

h1,h2,h3,h4{
      color:var(--navy);
      font-family:"Manrope",sans-serif;
      letter-spacing:-.025em;
    }

.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}

.section{padding:96px 0}

.section-soft{background:linear-gradient(180deg,#F8F7FF 0%,#FFFFFF 100%)}

.section-dark{color:#fff;background:var(--navy)}

.section-dark h2,.section-dark h3,.section-dark h4{color:#fff}

.section-head{max-width:760px;margin:0 auto 48px;text-align:center}

.section-head.left{margin-left:0;text-align:left}

.section-head h2{
      margin:14px 0 15px;
      font-size:clamp(31px,4vw,48px);
      line-height:1.14;
    }

.section-head p{color:var(--muted);font-size:16px}

.section-dark .section-head p{color:rgba(255,255,255,.68)}

.eyebrow{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:7px 12px;
      color:var(--primary-dark);
      background:#fff;
      border:1px solid rgba(103,87,217,.17);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.10em;
      text-transform:uppercase;
    }

.eyebrow::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:var(--secondary);
      box-shadow:0 0 0 5px rgba(0,183,168,.12);
    }

.section-dark .eyebrow{
      color:#fff;background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.12);
    }

.btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 21px;
      border:1px solid transparent;
      border-radius:13px;
      font-weight:750;
      transition:.22s ease;
    }

.btn:hover{transform:translateY(-2px)}

.btn-primary{
      color:#fff;background:var(--primary);
      box-shadow:0 12px 28px rgba(103,87,217,.28);
    }

.btn-primary:hover{background:#5747C8}

.btn-secondary{color:#fff;background:var(--secondary)}

.btn-light{color:var(--primary-dark);background:#fff}

.btn-outline{
      color:var(--primary-dark);
      background:rgba(255,255,255,.75);
      border-color:#DCD9F0;
    }

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.icon-arrow{font-size:18px;line-height:1}

.tag{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      color:var(--primary-dark);
      background:var(--primary-light);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
    }

/* Header */
    .site-header{
      position:fixed;top:0;left:0;right:0;z-index:100;
      background:rgba(255,255,255,.92);
      border-bottom:1px solid rgba(232,231,241,.86);
      backdrop-filter:blur(17px);
      transition:.25s ease;
    }

.site-header.scrolled{box-shadow:0 9px 28px rgba(31,27,82,.08)}

.header-inner{
      min-height:82px;
      display:flex;align-items:center;justify-content:space-between;gap:24px;
    }

.brand{display:inline-flex;align-items:center;gap:12px;min-width:max-content}

.brand-logo{width:49px;height:49px;filter:drop-shadow(0 10px 14px rgba(103,87,217,.20))}

.brand-copy strong{
      display:block;color:var(--navy);
      font:800 19px/1.1 "Manrope",sans-serif;
    }

.brand-copy small{
      display:block;margin-top:5px;color:var(--muted);
      font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    }

.desktop-nav{display:flex;align-items:center;gap:4px}

.nav-item{position:relative}

.nav-link{
      display:flex;align-items:center;gap:6px;
      padding:12px 13px;
      color:#48475F;
      border-radius:10px;
      font-size:13px;font-weight:700;
      transition:.18s ease;
    }

.nav-link:hover,.nav-link.active{color:var(--primary);background:var(--primary-light)}

.chevron{font-size:10px;transition:.18s}

.nav-item:hover .chevron{transform:rotate(180deg)}

.dropdown{
      position:absolute;top:calc(100% + 12px);left:0;
      width:300px;padding:10px;
      background:#fff;border:1px solid var(--line);
      border-radius:18px;box-shadow:var(--shadow);
      opacity:0;visibility:hidden;transform:translateY(9px);
      transition:.18s ease;
    }

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}

.dropdown.wide{width:680px;display:grid;grid-template-columns:1fr 1fr;gap:6px}

.drop-link{
      display:flex;gap:12px;padding:12px;
      border-radius:12px;transition:.18s;
    }

.drop-link:hover{background:var(--primary-light)}

.drop-icon{
      flex:0 0 auto;width:38px;height:38px;border-radius:11px;
      display:grid;place-items:center;
      color:var(--primary);background:#F3F1FF;font-size:17px;
    }

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span{display:block;margin-top:2px;color:var(--muted);font-size:11px;line-height:1.45}

.header-action{display:flex;align-items:center;gap:9px}

.menu-toggle{
      display:none;width:45px;height:45px;
      border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--navy);
    }

/* Mobile menu */
    .mobile-panel{
      display:none;
      position:fixed;inset:82px 0 0;z-index:99;
      padding:18px 20px 35px;
      background:#fff;overflow:auto;
    }

.mobile-panel.open{display:block}

.mobile-group{border-bottom:1px solid var(--line)}

.mobile-main{
      width:100%;display:flex;align-items:center;justify-content:space-between;
      padding:15px 4px;border:0;background:none;color:var(--navy);font-weight:800;text-align:left;
    }

.mobile-sub{display:none;padding:0 0 12px 12px}

.mobile-sub.open{display:grid}

.mobile-sub a{padding:9px 8px;color:var(--muted);font-size:14px}

.mobile-login{margin-top:20px;width:100%}

/* Hero */
    .hero{
      position:relative;overflow:hidden;
      padding:156px 0 82px;
      background:
        radial-gradient(circle at 14% 23%,rgba(0,183,168,.14),transparent 27%),
        radial-gradient(circle at 87% 20%,rgba(255,201,92,.20),transparent 24%),
        linear-gradient(135deg,#F4F1FF 0%,#FFFFFF 52%,#EDFBF9 100%);
    }

.hero::before{
      content:"";position:absolute;left:-110px;bottom:-145px;
      width:360px;height:360px;border:52px solid rgba(103,87,217,.055);border-radius:50%;
    }

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:62px;align-items:center}

.hero h1{
      margin:20px 0 19px;
      font-size:clamp(42px,5.4vw,69px);
      line-height:1.05;
    }

.gradient-text{
      background:linear-gradient(90deg,var(--primary),var(--secondary-dark));
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }

.hero-lead{max-width:690px;color:#626278;font-size:17px}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px}

.hero-proof{display:flex;flex-wrap:wrap;gap:16px;margin-top:31px}

.proof-item{display:flex;align-items:center;gap:9px;color:#5D5C72;font-size:12px;font-weight:700}

.proof-icon{
      width:28px;height:28px;display:grid;place-items:center;
      color:var(--secondary-dark);background:#E9FAF7;border-radius:9px;
    }

.hero-visual{position:relative;min-height:530px}

.visual-main{
      position:absolute;inset:18px 6px 18px 40px;
      padding:22px;
      background:rgba(255,255,255,.78);
      border:1px solid rgba(255,255,255,.95);
      border-radius:34px;box-shadow:var(--shadow);
      backdrop-filter:blur(15px);
    }

.dashboard{
      height:100%;padding:22px;
      background:linear-gradient(150deg,#282162,#17143D);
      border-radius:25px;overflow:hidden;
    }

.dash-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}

.dash-brand{display:flex;align-items:center;gap:9px;color:#fff;font-size:12px;font-weight:800}

.dash-dots{display:flex;gap:5px}

.dash-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}

.dash-hero{
      padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.62),rgba(0,183,168,.36));
      border:1px solid rgba(255,255,255,.12);border-radius:19px;
    }

.dash-label{color:#D9D4FF;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.dash-hero h3{margin:8px 0 7px;color:#fff;font-size:25px;line-height:1.2}

.dash-hero p{margin:0;color:rgba(255,255,255,.68);font-size:11px}

.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}

.dash-stat{padding:13px;background:rgba(255,255,255,.07);border-radius:13px}

.dash-stat strong{display:block;color:#fff;font-size:16px}

.dash-stat span{color:rgba(255,255,255,.55);font-size:9px}

.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}

.dash-card{padding:16px;background:#fff;border-radius:16px}

.dash-card h4{margin-bottom:10px;font-size:12px}

.progress{height:7px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.mini-list{display:grid;gap:8px}

.mini-row{display:flex;align-items:center;gap:8px}

.mini-row i{width:9px;height:9px;border-radius:3px;background:var(--secondary)}

.mini-row span{font-size:9px;color:var(--muted)}

.float-card{
      position:absolute;z-index:2;display:flex;align-items:center;gap:12px;
      padding:14px 17px;background:#fff;border:1px solid var(--line);
      border-radius:16px;box-shadow:var(--shadow-sm);
    }

.float-card.one{left:0;top:88px}

.float-card.two{right:-10px;bottom:75px}

.float-card.three{left:10px;bottom:15px}

.float-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--primary-light);color:var(--primary)}

.float-card strong{display:block;color:var(--navy);font-size:12px}

.float-card small{display:block;color:var(--muted);font-size:9px}

/* Trust strip */
    .trust-strip{position:relative;z-index:3;margin-top:-1px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.trust-inner{display:grid;grid-template-columns:1.15fr repeat(4,1fr);align-items:center;gap:20px;padding:25px 0}

.trust-copy strong{display:block;color:var(--navy);font-size:13px}

.trust-copy span{color:var(--muted);font-size:11px}

.trust-item{display:flex;align-items:center;justify-content:center;gap:9px;color:#69677D;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}

.trust-mark{width:32px;height:32px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:10px}

/* Solution cards */
    .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

.service-card{
      position:relative;overflow:hidden;
      min-height:310px;padding:28px;
      background:#fff;border:1px solid var(--line);
      border-radius:var(--radius-lg);box-shadow:0 12px 35px rgba(31,27,82,.055);
      transition:.25s ease;
    }

.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}

.service-card::after{
      content:"";position:absolute;right:-45px;bottom:-50px;width:145px;height:145px;
      border:27px solid rgba(103,87,217,.055);border-radius:50%;
    }

.card-icon{
      width:54px;height:54px;display:grid;place-items:center;
      color:var(--primary);background:var(--primary-light);
      border-radius:16px;font-size:24px;
    }

.service-card:nth-child(2n) .card-icon{color:var(--secondary-dark);background:#E9FAF7}

.service-card:nth-child(3n) .card-icon{color:#9A6C0F;background:#FFF6DE}

.service-card h3{margin:21px 0 11px;font-size:21px}

.service-card p{color:var(--muted);font-size:13px}

.card-list{display:grid;gap:8px;margin:18px 0 20px;padding:0;list-style:none}

.card-list li{display:flex;gap:9px;color:#55546A;font-size:12px}

.card-list li::before{content:"✓";color:var(--secondary-dark);font-weight:900}

.text-link{position:relative;z-index:2;color:var(--primary);font-size:12px;font-weight:800}

.text-link:hover{text-decoration:underline}

/* Split */
    .split{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}

.feature-visual{
      position:relative;min-height:520px;padding:33px;
      background:linear-gradient(145deg,#F0EDFF,#EAFBF8);
      border:1px solid #E2DFF7;border-radius:32px;
    }

.feature-screen{
      position:absolute;inset:48px 32px 34px 57px;padding:22px;
      background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow);
    }

.screen-nav{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}

.screen-title{font-size:11px;font-weight:800;color:var(--navy)}

.screen-pill{padding:5px 9px;color:var(--secondary-dark);background:#E8FAF7;border-radius:99px;font-size:8px;font-weight:800}

.chart-area{display:flex;align-items:flex-end;gap:10px;height:155px;padding:25px 10px 8px;border-bottom:1px solid var(--line)}

.bar{flex:1;min-width:15px;background:linear-gradient(180deg,var(--primary),#9488EC);border-radius:7px 7px 2px 2px}

.screen-bottom{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px}

.screen-box{padding:14px;background:#FAFAFF;border:1px solid var(--line);border-radius:13px}

.screen-box strong{display:block;color:var(--navy);font-size:19px}

.screen-box span{color:var(--muted);font-size:9px}

.feature-chip{
      position:absolute;display:flex;align-items:center;gap:9px;padding:12px 14px;
      background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);
    }

.feature-chip.one{top:21px;right:18px}

.feature-chip.two{left:12px;bottom:53px}

.feature-chip i{width:32px;height:32px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.feature-chip strong{display:block;color:var(--navy);font-size:10px}

.feature-chip span{display:block;color:var(--muted);font-size:8px}

.feature-copy h2{margin:14px 0 16px;font-size:clamp(31px,4vw,48px);line-height:1.14}

.feature-copy>p{color:var(--muted)}

.feature-points{display:grid;gap:16px;margin:27px 0 30px}

.feature-point{display:flex;gap:14px}

.point-icon{flex:0 0 auto;width:39px;height:39px;display:grid;place-items:center;color:var(--secondary-dark);background:#E9FAF7;border-radius:12px;font-weight:900}

.feature-point strong{display:block;color:var(--navy);font-size:13px}

.feature-point span{display:block;margin-top:2px;color:var(--muted);font-size:11px}

/* Innovation */
    .innovation-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:25px}

.innovation-main{
      min-height:480px;padding:34px;
      color:#fff;background:linear-gradient(145deg,var(--primary-dark),var(--primary));
      border-radius:29px;overflow:hidden;position:relative;
    }

.innovation-main h3{max-width:540px;margin:18px 0 14px;color:#fff;font-size:32px;line-height:1.17}

.innovation-main p{max-width:610px;color:rgba(255,255,255,.74)}

.innovation-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}

.innovation-tags span{padding:8px 11px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.13);border-radius:99px;font-size:10px;font-weight:800}

.ai-orbit{position:absolute;right:-35px;bottom:-72px;width:330px;height:330px;border:1px solid rgba(255,255,255,.15);border-radius:50%}

.ai-orbit::before,.ai-orbit::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%}

.ai-orbit::before{inset:45px}

.ai-orbit::after{inset:93px}

.ai-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:83px;height:83px;display:grid;place-items:center;color:var(--primary-dark);background:#fff;border-radius:24px;font:800 25px "Manrope"}

.orbit-dot{position:absolute;width:36px;height:36px;display:grid;place-items:center;color:#fff;background:var(--secondary);border-radius:12px;font-size:13px}

.orbit-dot.a{left:39px;top:57px}

.orbit-dot.b{right:18px;top:115px}

.orbit-dot.c{left:72px;bottom:27px}

.innovation-side{display:grid;gap:20px}

.example-card{padding:25px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.example-head{display:flex;align-items:center;justify-content:space-between;gap:15px}

.example-head h3{margin:0;font-size:18px}

.example-card p{margin:12px 0 15px;color:var(--muted);font-size:12px}

.example-meta{display:flex;flex-wrap:wrap;gap:7px}

.example-meta span{padding:6px 9px;color:#65637A;background:#F5F4FA;border-radius:8px;font-size:9px;font-weight:750}

/* Foundation */
    .foundation-card{
      position:relative;overflow:hidden;padding:33px;
      background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-sm);
    }

.foundation-card.education{background:linear-gradient(145deg,#FFFFFF,#F3F0FF)}

.foundation-card.umkm{background:linear-gradient(145deg,#FFFFFF,#EBFAF7)}

.foundation-card h3{margin:19px 0 11px;font-size:27px}

.foundation-card p{color:var(--muted);font-size:13px}

.foundation-programs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:24px 0}

.program-mini{padding:13px;background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:13px}

.program-mini strong{display:block;color:var(--navy);font-size:11px}

.program-mini span{display:block;margin-top:3px;color:var(--muted);font-size:9px}

/* Journey */
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.step{
      position:relative;padding:25px 22px;background:#fff;border:1px solid var(--line);border-radius:20px;
    }

.step-no{
      width:41px;height:41px;display:grid;place-items:center;
      color:#fff;background:var(--primary);border-radius:13px;font-weight:800;
    }

.step h3{margin:17px 0 8px;font-size:17px}

.step p{color:var(--muted);font-size:11px}

.step:not(:last-child)::after{
      content:"→";position:absolute;right:-17px;top:32px;z-index:3;color:#B3AEE2;font-size:22px;font-weight:900;
    }

/* Curriculum */
    .curriculum-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:30px}

.tab-btn{
      min-height:41px;padding:0 15px;border:1px solid var(--line);border-radius:11px;
      color:var(--muted);background:#fff;font-size:11px;font-weight:800;
    }

.tab-btn.active{color:#fff;background:var(--primary);border-color:var(--primary)}

.curriculum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.curriculum-item{padding:21px;background:#fff;border:1px solid var(--line);border-radius:17px}

.curriculum-item .num{color:var(--primary);font-size:10px;font-weight:900}

.curriculum-item h3{margin:8px 0 7px;font-size:15px;line-height:1.35}

.curriculum-item p{margin:0;color:var(--muted);font-size:10px}

/* App */
    .app-wrap{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr .92fr;gap:55px;align-items:center;
      padding:50px 55px;color:#fff;
      background:linear-gradient(135deg,#211A58,#6757D9);
      border-radius:34px;
    }

.app-wrap h2{margin:14px 0 14px;color:#fff;font-size:clamp(30px,4vw,47px);line-height:1.15}

.app-wrap p{color:rgba(255,255,255,.70)}

.store-row{display:flex;flex-wrap:wrap;gap:11px;margin-top:25px}

.store-badge{
      display:flex;align-items:center;gap:11px;min-width:175px;padding:10px 14px;
      color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
      border-radius:13px;
    }

.store-badge svg{width:28px;height:28px}

.store-badge small{display:block;color:rgba(255,255,255,.60);font-size:8px;text-transform:uppercase;letter-spacing:.08em}

.store-badge strong{display:block;font-size:12px}

.phone-scene{position:relative;min-height:420px}

.phone{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(5deg);
      width:230px;height:420px;padding:9px;background:#111026;border:2px solid rgba(255,255,255,.25);
      border-radius:35px;box-shadow:0 28px 55px rgba(0,0,0,.32);
    }

.phone-screen{height:100%;padding:19px 15px;background:linear-gradient(180deg,#F5F2FF,#fff);border-radius:27px;overflow:hidden}

.notch{width:76px;height:17px;margin:-11px auto 15px;background:#111026;border-radius:0 0 13px 13px}

.mobile-logo{display:flex;align-items:center;gap:7px;color:var(--navy);font-size:9px;font-weight:900}

.mobile-logo svg{width:25px}

.mobile-welcome{margin-top:18px;padding:16px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:17px}

.mobile-welcome strong{display:block;font-size:13px}

.mobile-welcome span{font-size:8px;opacity:.78}

.mobile-course-title{margin:16px 0 9px;color:var(--navy);font-size:10px;font-weight:900}

.mobile-course{display:flex;gap:9px;margin-bottom:8px;padding:9px;background:#fff;border:1px solid var(--line);border-radius:11px}

.mobile-thumb{width:42px;height:38px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:8px;font-size:12px}

.mobile-course strong{display:block;color:var(--navy);font-size:8px}

.mobile-course span{display:block;color:var(--muted);font-size:6px}

.app-float{position:absolute;padding:13px 16px;background:#fff;border-radius:15px;box-shadow:var(--shadow)}

.app-float.a{left:5%;top:21%}

.app-float.b{right:3%;bottom:15%}

.app-float strong{display:block;color:var(--navy);font-size:10px}

.app-float span{color:var(--muted);font-size:8px}

/* About */
    .about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:29px}

.about-stat{padding:20px;background:#fff;border:1px solid var(--line);border-radius:16px}

.about-stat strong{display:block;color:var(--primary);font:800 24px "Manrope"}

.about-stat span{color:var(--muted);font-size:10px}

.about-note{padding:20px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 14px 14px 0;font-size:12px}

/* FAQ */
    .faq-wrap{max-width:880px;margin:0 auto}

.faq-item{margin-bottom:11px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}

.faq-q{
      width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
      padding:19px 21px;border:0;background:#fff;color:var(--navy);font-weight:800;text-align:left;
    }

.faq-plus{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:9px}

.faq-a{display:none;padding:0 21px 20px;color:var(--muted);font-size:12px}

.faq-item.open .faq-a{display:block}

.faq-item.open .faq-plus{transform:rotate(45deg)}

/* CTA */
    .final-cta{padding:78px 0}

.cta-box{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center;
      padding:42px 48px;color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));
      border-radius:30px;
    }

.cta-box::after{content:"";position:absolute;right:-80px;top:-110px;width:270px;height:270px;border:45px solid rgba(255,255,255,.07);border-radius:50%}

.cta-box h2{margin-bottom:9px;color:#fff;font-size:clamp(28px,4vw,43px)}

.cta-box p{margin:0;color:rgba(255,255,255,.70)}

.cta-actions{position:relative;z-index:2;display:flex;gap:10px;flex-wrap:wrap}

/* Footer */
    .site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:68px 0 46px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:48px}

.footer-brand p{max-width:390px;margin:19px 0 22px;font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:18px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:10px}

.footer-links a{font-size:12px;transition:.18s}

.footer-links a:hover{color:#fff;transform:translateX(3px)}

.footer-contact{display:grid;gap:10px;margin-top:18px}

.contact-row{display:flex;gap:10px;font-size:11px}

.contact-row i{font-style:normal;color:#AFA6FF}

.newsletter{display:flex;max-width:395px;margin-top:17px;padding:5px;background:#fff;border-radius:12px}

.newsletter input{width:100%;min-width:0;padding:0 12px;border:0;outline:0;font-size:11px}

.newsletter button{width:43px;border:0;border-radius:9px;color:#fff;background:var(--primary)}

.footer-bottom{padding:19px 0;border-top:1px solid rgba(255,255,255,.09);font-size:10px}

.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}

.footer-legal{display:flex;flex-wrap:wrap;gap:15px}

/* Floating WA */
    .floating-help{
      position:fixed;right:22px;bottom:22px;z-index:90;
      display:flex;align-items:center;gap:10px;padding:11px 15px;
      color:#fff;background:#1FAF6D;border-radius:99px;
      box-shadow:0 15px 35px rgba(16,119,73,.28);font-size:11px;font-weight:800;
    }

.floating-help span:first-child{font-size:19px}

/* Utilities */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:1060px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:grid;place-items:center}
.hero-grid,.split,.innovation-grid,.app-wrap{grid-template-columns:1fr}
.hero-visual{max-width:650px;width:100%;margin:0 auto}
.cards-3{grid-template-columns:repeat(2,1fr)}
.curriculum-grid{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(2,1fr)}
.step:nth-child(2)::after{display:none}
.footer-grid{grid-template-columns:repeat(2,1fr)}
.trust-inner{grid-template-columns:repeat(2,1fr)}
.trust-copy{grid-column:1/-1;text-align:center}
}

@media(max-width:700px){
.container{width:min(100% - 28px,var(--container))}
.section{padding:69px 0}
.brand-copy small{display:none}
.brand-logo{width:43px;height:43px}
.header-inner{min-height:74px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.hero{padding:124px 0 60px}
.hero h1{font-size:43px}
.hero-lead{font-size:15px}
.hero-visual{min-height:460px}
.visual-main{inset:12px 0 28px 20px}
.float-card.one{left:-4px;top:52px}
.float-card.two{right:-4px}
.float-card.three{display:none}
.dash-stats{grid-template-columns:1fr}
.dash-stat:nth-child(n+2){display:none}
.cards-3,.cards-2,.foundation-programs,.curriculum-grid,.about-stats,.steps,.footer-grid{grid-template-columns:1fr}
.step::after{display:none!important}
.feature-visual{min-height:445px;padding:20px}
.feature-screen{inset:44px 15px 25px 37px}
.innovation-main{min-height:520px}
.app-wrap{padding:35px 22px}
.phone-scene{min-height:390px}
.app-float.a{left:-10px}
.app-float.b{right:-10px}
.trust-inner{grid-template-columns:1fr 1fr}
.trust-item{font-size:9px}
.cta-box{grid-template-columns:1fr;padding:34px 25px}
.cta-actions{align-items:stretch;flex-direction:column}
.footer-bottom-inner{align-items:flex-start;flex-direction:column}
.floating-help{right:14px;bottom:14px;padding:11px}
.floating-help span:last-child{display:none}
}

/* Online Classes */
    .course-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:20px;
    }

.course-card{
      overflow:hidden;
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:var(--shadow-sm);
      transition:.24s ease;
    }

.course-card:hover{
      transform:translateY(-5px);
      box-shadow:var(--shadow);
    }

.course-cover{
      position:relative;
      min-height:180px;
      padding:22px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      color:#fff;
      overflow:hidden;
    }

.course-cover::after{
      content:"";
      position:absolute;
      right:-35px;
      bottom:-45px;
      width:135px;
      height:135px;
      border:24px solid rgba(255,255,255,.10);
      border-radius:50%;
    }

.course-cover.one{background:linear-gradient(135deg,#3A2F87,#6757D9)}

.course-cover.two{background:linear-gradient(135deg,#087E76,#00B7A8)}

.course-cover.three{background:linear-gradient(135deg,#8A5F13,#E0A832)}

.course-cover.four{background:linear-gradient(135deg,#8B3E62,#C04A67)}

.course-label{
      position:relative;
      z-index:1;
      align-self:flex-start;
      padding:6px 9px;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.17);
      border-radius:999px;
      font-size:9px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

.course-cover h3{
      position:relative;
      z-index:1;
      margin:28px 0 0;
      color:#fff;
      font-size:20px;
      line-height:1.28;
    }

.course-body{padding:21px}

.course-meta{
      display:flex;
      flex-wrap:wrap;
      gap:7px;
      margin-bottom:13px;
    }

.course-meta span{
      padding:5px 8px;
      color:var(--muted);
      background:#F5F4FA;
      border-radius:8px;
      font-size:9px;
      font-weight:750;
    }

.course-body p{
      margin-bottom:17px;
      color:var(--muted);
      font-size:12px;
    }

.course-actions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

.course-status{
      color:var(--secondary-dark);
      font-size:10px;
      font-weight:800;
    }

.course-more{
      margin-top:31px;
      text-align:center;
    }

@media(max-width:1060px){
.course-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.course-grid{grid-template-columns:1fr}
}

/* Header navigation refinement — unified multipage */
    .desktop-nav{gap:10px}

.nav-link{
      position:relative;
      gap:7px;
      padding:12px 5px;
      border:0;
      border-radius:0;
      background:transparent!important;
      box-shadow:none!important;
    }

.nav-link:hover,.nav-link.active{
      color:var(--primary);
      background:transparent!important;
    }

.nav-link::after{
      content:"";
      position:absolute;
      left:5px;right:5px;bottom:4px;
      height:2px;
      background:linear-gradient(90deg,var(--primary),var(--secondary));
      border-radius:99px;
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .2s ease;
    }

.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}

.mobile-main{gap:10px}

@media(max-width:1060px){
.desktop-nav{gap:4px}
}

/* Kelas Online Page */
    .classes-hero{padding-bottom:100px}

.classes-hero .hero-grid{grid-template-columns:1.04fr .96fr}

.class-kicker{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}

.class-kicker span{padding:7px 11px;color:var(--muted);background:rgba(255,255,255,.78);border:1px solid var(--line);border-radius:999px;font-size:10px;font-weight:800}

.catalog-board{height:100%;padding:24px;background:linear-gradient(150deg,#282162,#17143D);border-radius:25px;overflow:hidden}

.catalog-top{display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:12px;font-weight:800;margin-bottom:18px}

.catalog-status{padding:5px 9px;color:#B9FFF6;background:rgba(0,183,168,.15);border-radius:99px;font-size:8px}

.catalog-feature{padding:20px;background:linear-gradient(135deg,rgba(103,87,217,.72),rgba(0,183,168,.34));border:1px solid rgba(255,255,255,.12);border-radius:18px}

.catalog-feature small{color:#D9D4FF;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

.catalog-feature h3{margin:7px 0 7px;color:#fff;font-size:23px;line-height:1.2}

.catalog-feature p{margin:0;color:rgba(255,255,255,.68);font-size:10px}

.catalog-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}

.catalog-mini{padding:14px;background:#fff;border-radius:14px}

.catalog-mini strong{display:block;color:var(--navy);font-size:11px}

.catalog-mini span{display:block;margin-top:3px;color:var(--muted);font-size:8px}

.catalog-progress{height:6px;margin-top:10px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.catalog-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.class-summary{position:relative;z-index:4;margin-top:-34px}

.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden}

.summary-item{display:flex;align-items:center;gap:11px;padding:20px;border-right:1px solid var(--line)}

.summary-item:last-child{border-right:0}

.summary-icon{width:38px;height:38px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:11px;font-weight:900}

.summary-item strong{display:block;color:var(--navy);font-size:12px}

.summary-item span{display:block;color:var(--muted);font-size:9px}

.catalog-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;margin-bottom:24px}

.class-search{display:flex;align-items:center;gap:10px;padding:7px 8px 7px 17px;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow-sm)}

.class-search input{width:100%;min-width:0;padding:10px 0;border:0;outline:0;color:var(--text);background:transparent}

.class-search span{font-size:18px;color:var(--primary)}

.class-sort{min-height:48px;padding:0 14px;border:1px solid var(--line);border-radius:13px;color:var(--text);background:#fff;font-weight:700}

.class-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}

.class-filter{min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:10px;color:var(--muted);background:#fff;font-size:11px;font-weight:800;transition:.18s}

.class-filter:hover,.class-filter.active{color:#fff;background:var(--primary);border-color:var(--primary)}

.catalog-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.catalog-card{display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm);transition:.24s ease}

.catalog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}

.catalog-card.hidden{display:none}

.catalog-cover{position:relative;min-height:210px;padding:23px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden}

.catalog-cover::before{content:"";position:absolute;right:-38px;bottom:-50px;width:150px;height:150px;border:25px solid rgba(255,255,255,.11);border-radius:50%}

.catalog-cover::after{content:"";position:absolute;right:28px;bottom:25px;width:88px;height:88px;border:17px solid rgba(255,255,255,.08);border-radius:50%}

.cover-purple{background:linear-gradient(135deg,#3A2F87,#6757D9)}

.cover-teal{background:linear-gradient(135deg,#087E76,#00B7A8)}

.cover-gold{background:linear-gradient(135deg,#8A5F13,#E0A832)}

.cover-rose{background:linear-gradient(135deg,#8B3E62,#C04A67)}

.cover-blue{background:linear-gradient(135deg,#24527A,#3987B9)}

.cover-indigo{background:linear-gradient(135deg,#282162,#5142C1)}

.catalog-label{position:relative;z-index:1;align-self:flex-start;padding:6px 10px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:999px;font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}

.catalog-cover h3{position:relative;z-index:1;margin:26px 0 0;color:#fff;font-size:21px;line-height:1.28}

.catalog-body{display:flex;flex:1;flex-direction:column;padding:22px}

.catalog-meta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}

.catalog-meta span{padding:5px 8px;color:var(--muted);background:#F5F4FA;border-radius:8px;font-size:9px;font-weight:750}

.catalog-body p{margin-bottom:17px;color:var(--muted);font-size:12px}

.catalog-outcomes{display:grid;gap:7px;margin:0 0 20px;padding:0;list-style:none}

.catalog-outcomes li{display:flex;gap:8px;color:#57566B;font-size:10px}

.catalog-outcomes li::before{content:"✓";color:var(--secondary-dark);font-weight:900}

.catalog-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}

.catalog-status-text{color:var(--secondary-dark);font-size:10px;font-weight:800}

.catalog-link{color:var(--primary);font-size:11px;font-weight:800}

.empty-state{display:none;padding:40px;text-align:center;background:#fff;border:1px dashed #CBC6EC;border-radius:20px}

.empty-state.show{display:block}

.empty-state h3{margin-bottom:7px}

.empty-state p{margin:0;color:var(--muted)}

.pathway-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}

.pathway-card{padding:24px;background:#fff;border:1px solid var(--line);border-radius:19px;box-shadow:var(--shadow-sm)}

.pathway-no{width:42px;height:42px;display:grid;place-items:center;color:#fff;background:var(--primary);border-radius:12px;font-weight:900}

.pathway-card h3{margin:16px 0 8px;font-size:17px}

.pathway-card p{margin:0;color:var(--muted);font-size:11px}

.learning-note{margin-top:24px;padding:20px 22px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 15px 15px 0;font-size:11px}

@media(max-width:1060px){
.summary-grid{grid-template-columns:repeat(2,1fr)}
.summary-item:nth-child(2){border-right:0}
.summary-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
.catalog-cards{grid-template-columns:repeat(2,1fr)}
.pathway-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.classes-hero .hero-grid{grid-template-columns:1fr}
.class-summary{margin-top:-18px}
.summary-grid,.catalog-cards,.pathway-grid{grid-template-columns:1fr}
.summary-item{border-right:0;border-bottom:1px solid var(--line)!important}
.summary-item:last-child{border-bottom:0!important}
.catalog-tools{grid-template-columns:1fr}
.class-sort{width:100%}
.catalog-cover{min-height:190px}
}

:root{
      --primary:#6757D9;
      --primary-dark:#342A78;
      --primary-light:#F1EFFF;
      --secondary:#00B7A8;
      --secondary-dark:#087E76;
      --accent:#FFC95C;
      --navy:#17143D;
      --text:#44445B;
      --muted:#737388;
      --line:#E8E7F1;
      --white:#FFFFFF;
      --page:#FAFAFF;
      --success:#208A69;
      --danger:#C04A67;
      --shadow:0 22px 60px rgba(31,27,82,.10);
      --shadow-sm:0 12px 30px rgba(31,27,82,.08);
      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
      --container:1180px;
    }

*{box-sizing:border-box}

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

body{
      margin:0;
      color:var(--text);
      background:var(--page);
      font-family:"Inter",Arial,sans-serif;
      line-height:1.7;
      overflow-x:hidden;
    }

body.menu-open{overflow:hidden}

img,svg{max-width:100%;display:block}

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

button,input,select,textarea{font:inherit}

button{cursor:pointer}

h1,h2,h3,h4,p{margin-top:0}

h1,h2,h3,h4{
      color:var(--navy);
      font-family:"Manrope",sans-serif;
      letter-spacing:-.025em;
    }

.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}

.section{padding:96px 0}

.section-soft{background:linear-gradient(180deg,#F8F7FF 0%,#FFFFFF 100%)}

.section-dark{color:#fff;background:var(--navy)}

.section-dark h2,.section-dark h3,.section-dark h4{color:#fff}

.section-head{max-width:760px;margin:0 auto 48px;text-align:center}

.section-head.left{margin-left:0;text-align:left}

.section-head h2{
      margin:14px 0 15px;
      font-size:clamp(31px,4vw,48px);
      line-height:1.14;
    }

.section-head p{color:var(--muted);font-size:16px}

.section-dark .section-head p{color:rgba(255,255,255,.68)}

.eyebrow{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:7px 12px;
      color:var(--primary-dark);
      background:#fff;
      border:1px solid rgba(103,87,217,.17);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.10em;
      text-transform:uppercase;
    }

.eyebrow::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:var(--secondary);
      box-shadow:0 0 0 5px rgba(0,183,168,.12);
    }

.section-dark .eyebrow{
      color:#fff;background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.12);
    }

.btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 21px;
      border:1px solid transparent;
      border-radius:13px;
      font-weight:750;
      transition:.22s ease;
    }

.btn:hover{transform:translateY(-2px)}

.btn-primary{
      color:#fff;background:var(--primary);
      box-shadow:0 12px 28px rgba(103,87,217,.28);
    }

.btn-primary:hover{background:#5747C8}

.btn-secondary{color:#fff;background:var(--secondary)}

.btn-light{color:var(--primary-dark);background:#fff}

.btn-outline{
      color:var(--primary-dark);
      background:rgba(255,255,255,.75);
      border-color:#DCD9F0;
    }

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.icon-arrow{font-size:18px;line-height:1}

.tag{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      color:var(--primary-dark);
      background:var(--primary-light);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
    }

/* Header */
    .site-header{
      position:fixed;top:0;left:0;right:0;z-index:100;
      background:rgba(255,255,255,.92);
      border-bottom:1px solid rgba(232,231,241,.86);
      backdrop-filter:blur(17px);
      transition:.25s ease;
    }

.site-header.scrolled{box-shadow:0 9px 28px rgba(31,27,82,.08)}

.header-inner{
      min-height:82px;
      display:flex;align-items:center;justify-content:space-between;gap:24px;
    }

.brand{display:inline-flex;align-items:center;gap:12px;min-width:max-content}

.brand-logo{width:49px;height:49px;filter:drop-shadow(0 10px 14px rgba(103,87,217,.20))}

.brand-copy strong{
      display:block;color:var(--navy);
      font:800 19px/1.1 "Manrope",sans-serif;
    }

.brand-copy small{
      display:block;margin-top:5px;color:var(--muted);
      font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    }

.desktop-nav{display:flex;align-items:center;gap:4px}

.nav-item{position:relative}

.nav-link{
      display:flex;align-items:center;gap:6px;
      padding:12px 13px;
      color:#48475F;
      border-radius:10px;
      font-size:13px;font-weight:700;
      transition:.18s ease;
    }

.nav-link:hover,.nav-link.active{color:var(--primary);background:var(--primary-light)}

.chevron{font-size:10px;transition:.18s}

.nav-item:hover .chevron{transform:rotate(180deg)}

.dropdown{
      position:absolute;top:calc(100% + 12px);left:0;
      width:300px;padding:10px;
      background:#fff;border:1px solid var(--line);
      border-radius:18px;box-shadow:var(--shadow);
      opacity:0;visibility:hidden;transform:translateY(9px);
      transition:.18s ease;
    }

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}

.dropdown.wide{width:680px;display:grid;grid-template-columns:1fr 1fr;gap:6px}

.drop-link{
      display:flex;gap:12px;padding:12px;
      border-radius:12px;transition:.18s;
    }

.drop-link:hover{background:var(--primary-light)}

.drop-icon{
      flex:0 0 auto;width:38px;height:38px;border-radius:11px;
      display:grid;place-items:center;
      color:var(--primary);background:#F3F1FF;font-size:17px;
    }

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span{display:block;margin-top:2px;color:var(--muted);font-size:11px;line-height:1.45}

.header-action{display:flex;align-items:center;gap:9px}

.menu-toggle{
      display:none;width:45px;height:45px;
      border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--navy);
    }

/* Mobile menu */
    .mobile-panel{
      display:none;
      position:fixed;inset:82px 0 0;z-index:99;
      padding:18px 20px 35px;
      background:#fff;overflow:auto;
    }

.mobile-panel.open{display:block}

.mobile-group{border-bottom:1px solid var(--line)}

.mobile-main{
      width:100%;display:flex;align-items:center;justify-content:space-between;
      padding:15px 4px;border:0;background:none;color:var(--navy);font-weight:800;text-align:left;
    }

.mobile-sub{display:none;padding:0 0 12px 12px}

.mobile-sub.open{display:grid}

.mobile-sub a{padding:9px 8px;color:var(--muted);font-size:14px}

.mobile-login{margin-top:20px;width:100%}

/* Hero */
    .hero{
      position:relative;overflow:hidden;
      padding:156px 0 82px;
      background:
        radial-gradient(circle at 14% 23%,rgba(0,183,168,.14),transparent 27%),
        radial-gradient(circle at 87% 20%,rgba(255,201,92,.20),transparent 24%),
        linear-gradient(135deg,#F4F1FF 0%,#FFFFFF 52%,#EDFBF9 100%);
    }

.hero::before{
      content:"";position:absolute;left:-110px;bottom:-145px;
      width:360px;height:360px;border:52px solid rgba(103,87,217,.055);border-radius:50%;
    }

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:62px;align-items:center}

.hero h1{
      margin:20px 0 19px;
      font-size:clamp(42px,5.4vw,69px);
      line-height:1.05;
    }

.gradient-text{
      background:linear-gradient(90deg,var(--primary),var(--secondary-dark));
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }

.hero-lead{max-width:690px;color:#626278;font-size:17px}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px}

.hero-proof{display:flex;flex-wrap:wrap;gap:16px;margin-top:31px}

.proof-item{display:flex;align-items:center;gap:9px;color:#5D5C72;font-size:12px;font-weight:700}

.proof-icon{
      width:28px;height:28px;display:grid;place-items:center;
      color:var(--secondary-dark);background:#E9FAF7;border-radius:9px;
    }

.hero-visual{position:relative;min-height:530px}

.visual-main{
      position:absolute;inset:18px 6px 18px 40px;
      padding:22px;
      background:rgba(255,255,255,.78);
      border:1px solid rgba(255,255,255,.95);
      border-radius:34px;box-shadow:var(--shadow);
      backdrop-filter:blur(15px);
    }

.dashboard{
      height:100%;padding:22px;
      background:linear-gradient(150deg,#282162,#17143D);
      border-radius:25px;overflow:hidden;
    }

.dash-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}

.dash-brand{display:flex;align-items:center;gap:9px;color:#fff;font-size:12px;font-weight:800}

.dash-dots{display:flex;gap:5px}

.dash-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}

.dash-hero{
      padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.62),rgba(0,183,168,.36));
      border:1px solid rgba(255,255,255,.12);border-radius:19px;
    }

.dash-label{color:#D9D4FF;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.dash-hero h3{margin:8px 0 7px;color:#fff;font-size:25px;line-height:1.2}

.dash-hero p{margin:0;color:rgba(255,255,255,.68);font-size:11px}

.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}

.dash-stat{padding:13px;background:rgba(255,255,255,.07);border-radius:13px}

.dash-stat strong{display:block;color:#fff;font-size:16px}

.dash-stat span{color:rgba(255,255,255,.55);font-size:9px}

.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}

.dash-card{padding:16px;background:#fff;border-radius:16px}

.dash-card h4{margin-bottom:10px;font-size:12px}

.progress{height:7px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.mini-list{display:grid;gap:8px}

.mini-row{display:flex;align-items:center;gap:8px}

.mini-row i{width:9px;height:9px;border-radius:3px;background:var(--secondary)}

.mini-row span{font-size:9px;color:var(--muted)}

.float-card{
      position:absolute;z-index:2;display:flex;align-items:center;gap:12px;
      padding:14px 17px;background:#fff;border:1px solid var(--line);
      border-radius:16px;box-shadow:var(--shadow-sm);
    }

.float-card.one{left:0;top:88px}

.float-card.two{right:-10px;bottom:75px}

.float-card.three{left:10px;bottom:15px}

.float-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--primary-light);color:var(--primary)}

.float-card strong{display:block;color:var(--navy);font-size:12px}

.float-card small{display:block;color:var(--muted);font-size:9px}

/* Trust strip */
    .trust-strip{position:relative;z-index:3;margin-top:-1px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.trust-inner{display:grid;grid-template-columns:1.15fr repeat(4,1fr);align-items:center;gap:20px;padding:25px 0}

.trust-copy strong{display:block;color:var(--navy);font-size:13px}

.trust-copy span{color:var(--muted);font-size:11px}

.trust-item{display:flex;align-items:center;justify-content:center;gap:9px;color:#69677D;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}

.trust-mark{width:32px;height:32px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:10px}

/* Solution cards */
    .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

.service-card{
      position:relative;overflow:hidden;
      min-height:310px;padding:28px;
      background:#fff;border:1px solid var(--line);
      border-radius:var(--radius-lg);box-shadow:0 12px 35px rgba(31,27,82,.055);
      transition:.25s ease;
    }

.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}

.service-card::after{
      content:"";position:absolute;right:-45px;bottom:-50px;width:145px;height:145px;
      border:27px solid rgba(103,87,217,.055);border-radius:50%;
    }

.card-icon{
      width:54px;height:54px;display:grid;place-items:center;
      color:var(--primary);background:var(--primary-light);
      border-radius:16px;font-size:24px;
    }

.service-card:nth-child(2n) .card-icon{color:var(--secondary-dark);background:#E9FAF7}

.service-card:nth-child(3n) .card-icon{color:#9A6C0F;background:#FFF6DE}

.service-card h3{margin:21px 0 11px;font-size:21px}

.service-card p{color:var(--muted);font-size:13px}

.card-list{display:grid;gap:8px;margin:18px 0 20px;padding:0;list-style:none}

.card-list li{display:flex;gap:9px;color:#55546A;font-size:12px}

.card-list li::before{content:"✓";color:var(--secondary-dark);font-weight:900}

.text-link{position:relative;z-index:2;color:var(--primary);font-size:12px;font-weight:800}

.text-link:hover{text-decoration:underline}

/* Split */
    .split{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}

.feature-visual{
      position:relative;min-height:520px;padding:33px;
      background:linear-gradient(145deg,#F0EDFF,#EAFBF8);
      border:1px solid #E2DFF7;border-radius:32px;
    }

.feature-screen{
      position:absolute;inset:48px 32px 34px 57px;padding:22px;
      background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow);
    }

.screen-nav{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}

.screen-title{font-size:11px;font-weight:800;color:var(--navy)}

.screen-pill{padding:5px 9px;color:var(--secondary-dark);background:#E8FAF7;border-radius:99px;font-size:8px;font-weight:800}

.chart-area{display:flex;align-items:flex-end;gap:10px;height:155px;padding:25px 10px 8px;border-bottom:1px solid var(--line)}

.bar{flex:1;min-width:15px;background:linear-gradient(180deg,var(--primary),#9488EC);border-radius:7px 7px 2px 2px}

.screen-bottom{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px}

.screen-box{padding:14px;background:#FAFAFF;border:1px solid var(--line);border-radius:13px}

.screen-box strong{display:block;color:var(--navy);font-size:19px}

.screen-box span{color:var(--muted);font-size:9px}

.feature-chip{
      position:absolute;display:flex;align-items:center;gap:9px;padding:12px 14px;
      background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);
    }

.feature-chip.one{top:21px;right:18px}

.feature-chip.two{left:12px;bottom:53px}

.feature-chip i{width:32px;height:32px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.feature-chip strong{display:block;color:var(--navy);font-size:10px}

.feature-chip span{display:block;color:var(--muted);font-size:8px}

.feature-copy h2{margin:14px 0 16px;font-size:clamp(31px,4vw,48px);line-height:1.14}

.feature-copy>p{color:var(--muted)}

.feature-points{display:grid;gap:16px;margin:27px 0 30px}

.feature-point{display:flex;gap:14px}

.point-icon{flex:0 0 auto;width:39px;height:39px;display:grid;place-items:center;color:var(--secondary-dark);background:#E9FAF7;border-radius:12px;font-weight:900}

.feature-point strong{display:block;color:var(--navy);font-size:13px}

.feature-point span{display:block;margin-top:2px;color:var(--muted);font-size:11px}

/* Innovation */
    .innovation-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:25px}

.innovation-main{
      min-height:480px;padding:34px;
      color:#fff;background:linear-gradient(145deg,var(--primary-dark),var(--primary));
      border-radius:29px;overflow:hidden;position:relative;
    }

.innovation-main h3{max-width:540px;margin:18px 0 14px;color:#fff;font-size:32px;line-height:1.17}

.innovation-main p{max-width:610px;color:rgba(255,255,255,.74)}

.innovation-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}

.innovation-tags span{padding:8px 11px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.13);border-radius:99px;font-size:10px;font-weight:800}

.ai-orbit{position:absolute;right:-35px;bottom:-72px;width:330px;height:330px;border:1px solid rgba(255,255,255,.15);border-radius:50%}

.ai-orbit::before,.ai-orbit::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%}

.ai-orbit::before{inset:45px}

.ai-orbit::after{inset:93px}

.ai-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:83px;height:83px;display:grid;place-items:center;color:var(--primary-dark);background:#fff;border-radius:24px;font:800 25px "Manrope"}

.orbit-dot{position:absolute;width:36px;height:36px;display:grid;place-items:center;color:#fff;background:var(--secondary);border-radius:12px;font-size:13px}

.orbit-dot.a{left:39px;top:57px}

.orbit-dot.b{right:18px;top:115px}

.orbit-dot.c{left:72px;bottom:27px}

.innovation-side{display:grid;gap:20px}

.example-card{padding:25px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.example-head{display:flex;align-items:center;justify-content:space-between;gap:15px}

.example-head h3{margin:0;font-size:18px}

.example-card p{margin:12px 0 15px;color:var(--muted);font-size:12px}

.example-meta{display:flex;flex-wrap:wrap;gap:7px}

.example-meta span{padding:6px 9px;color:#65637A;background:#F5F4FA;border-radius:8px;font-size:9px;font-weight:750}

/* Foundation */
    .foundation-card{
      position:relative;overflow:hidden;padding:33px;
      background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-sm);
    }

.foundation-card.education{background:linear-gradient(145deg,#FFFFFF,#F3F0FF)}

.foundation-card.umkm{background:linear-gradient(145deg,#FFFFFF,#EBFAF7)}

.foundation-card h3{margin:19px 0 11px;font-size:27px}

.foundation-card p{color:var(--muted);font-size:13px}

.foundation-programs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:24px 0}

.program-mini{padding:13px;background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:13px}

.program-mini strong{display:block;color:var(--navy);font-size:11px}

.program-mini span{display:block;margin-top:3px;color:var(--muted);font-size:9px}

/* Journey */
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.step{
      position:relative;padding:25px 22px;background:#fff;border:1px solid var(--line);border-radius:20px;
    }

.step-no{
      width:41px;height:41px;display:grid;place-items:center;
      color:#fff;background:var(--primary);border-radius:13px;font-weight:800;
    }

.step h3{margin:17px 0 8px;font-size:17px}

.step p{color:var(--muted);font-size:11px}

.step:not(:last-child)::after{
      content:"→";position:absolute;right:-17px;top:32px;z-index:3;color:#B3AEE2;font-size:22px;font-weight:900;
    }

/* Curriculum */
    .curriculum-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:30px}

.tab-btn{
      min-height:41px;padding:0 15px;border:1px solid var(--line);border-radius:11px;
      color:var(--muted);background:#fff;font-size:11px;font-weight:800;
    }

.tab-btn.active{color:#fff;background:var(--primary);border-color:var(--primary)}

.curriculum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.curriculum-item{padding:21px;background:#fff;border:1px solid var(--line);border-radius:17px}

.curriculum-item .num{color:var(--primary);font-size:10px;font-weight:900}

.curriculum-item h3{margin:8px 0 7px;font-size:15px;line-height:1.35}

.curriculum-item p{margin:0;color:var(--muted);font-size:10px}

/* App */
    .app-wrap{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr .92fr;gap:55px;align-items:center;
      padding:50px 55px;color:#fff;
      background:linear-gradient(135deg,#211A58,#6757D9);
      border-radius:34px;
    }

.app-wrap h2{margin:14px 0 14px;color:#fff;font-size:clamp(30px,4vw,47px);line-height:1.15}

.app-wrap p{color:rgba(255,255,255,.70)}

.store-row{display:flex;flex-wrap:wrap;gap:11px;margin-top:25px}

.store-badge{
      display:flex;align-items:center;gap:11px;min-width:175px;padding:10px 14px;
      color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
      border-radius:13px;
    }

.store-badge svg{width:28px;height:28px}

.store-badge small{display:block;color:rgba(255,255,255,.60);font-size:8px;text-transform:uppercase;letter-spacing:.08em}

.store-badge strong{display:block;font-size:12px}

.phone-scene{position:relative;min-height:420px}

.phone{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(5deg);
      width:230px;height:420px;padding:9px;background:#111026;border:2px solid rgba(255,255,255,.25);
      border-radius:35px;box-shadow:0 28px 55px rgba(0,0,0,.32);
    }

.phone-screen{height:100%;padding:19px 15px;background:linear-gradient(180deg,#F5F2FF,#fff);border-radius:27px;overflow:hidden}

.notch{width:76px;height:17px;margin:-11px auto 15px;background:#111026;border-radius:0 0 13px 13px}

.mobile-logo{display:flex;align-items:center;gap:7px;color:var(--navy);font-size:9px;font-weight:900}

.mobile-logo svg{width:25px}

.mobile-welcome{margin-top:18px;padding:16px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:17px}

.mobile-welcome strong{display:block;font-size:13px}

.mobile-welcome span{font-size:8px;opacity:.78}

.mobile-course-title{margin:16px 0 9px;color:var(--navy);font-size:10px;font-weight:900}

.mobile-course{display:flex;gap:9px;margin-bottom:8px;padding:9px;background:#fff;border:1px solid var(--line);border-radius:11px}

.mobile-thumb{width:42px;height:38px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:8px;font-size:12px}

.mobile-course strong{display:block;color:var(--navy);font-size:8px}

.mobile-course span{display:block;color:var(--muted);font-size:6px}

.app-float{position:absolute;padding:13px 16px;background:#fff;border-radius:15px;box-shadow:var(--shadow)}

.app-float.a{left:5%;top:21%}

.app-float.b{right:3%;bottom:15%}

.app-float strong{display:block;color:var(--navy);font-size:10px}

.app-float span{color:var(--muted);font-size:8px}

/* About */
    .about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:29px}

.about-stat{padding:20px;background:#fff;border:1px solid var(--line);border-radius:16px}

.about-stat strong{display:block;color:var(--primary);font:800 24px "Manrope"}

.about-stat span{color:var(--muted);font-size:10px}

.about-note{padding:20px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 14px 14px 0;font-size:12px}

/* FAQ */
    .faq-wrap{max-width:880px;margin:0 auto}

.faq-item{margin-bottom:11px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}

.faq-q{
      width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
      padding:19px 21px;border:0;background:#fff;color:var(--navy);font-weight:800;text-align:left;
    }

.faq-plus{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:9px}

.faq-a{display:none;padding:0 21px 20px;color:var(--muted);font-size:12px}

.faq-item.open .faq-a{display:block}

.faq-item.open .faq-plus{transform:rotate(45deg)}

/* CTA */
    .final-cta{padding:78px 0}

.cta-box{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center;
      padding:42px 48px;color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));
      border-radius:30px;
    }

.cta-box::after{content:"";position:absolute;right:-80px;top:-110px;width:270px;height:270px;border:45px solid rgba(255,255,255,.07);border-radius:50%}

.cta-box h2{margin-bottom:9px;color:#fff;font-size:clamp(28px,4vw,43px)}

.cta-box p{margin:0;color:rgba(255,255,255,.70)}

.cta-actions{position:relative;z-index:2;display:flex;gap:10px;flex-wrap:wrap}

/* Footer */
    .site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:68px 0 46px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:48px}

.footer-brand p{max-width:390px;margin:19px 0 22px;font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:18px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:10px}

.footer-links a{font-size:12px;transition:.18s}

.footer-links a:hover{color:#fff;transform:translateX(3px)}

.footer-contact{display:grid;gap:10px;margin-top:18px}

.contact-row{display:flex;gap:10px;font-size:11px}

.contact-row i{font-style:normal;color:#AFA6FF}

.newsletter{display:flex;max-width:395px;margin-top:17px;padding:5px;background:#fff;border-radius:12px}

.newsletter input{width:100%;min-width:0;padding:0 12px;border:0;outline:0;font-size:11px}

.newsletter button{width:43px;border:0;border-radius:9px;color:#fff;background:var(--primary)}

.footer-bottom{padding:19px 0;border-top:1px solid rgba(255,255,255,.09);font-size:10px}

.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}

.footer-legal{display:flex;flex-wrap:wrap;gap:15px}

/* Floating WA */
    .floating-help{
      position:fixed;right:22px;bottom:22px;z-index:90;
      display:flex;align-items:center;gap:10px;padding:11px 15px;
      color:#fff;background:#1FAF6D;border-radius:99px;
      box-shadow:0 15px 35px rgba(16,119,73,.28);font-size:11px;font-weight:800;
    }

.floating-help span:first-child{font-size:19px}

/* Utilities */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:1060px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:grid;place-items:center}
.hero-grid,.split,.innovation-grid,.app-wrap{grid-template-columns:1fr}
.hero-visual{max-width:650px;width:100%;margin:0 auto}
.cards-3{grid-template-columns:repeat(2,1fr)}
.curriculum-grid{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(2,1fr)}
.step:nth-child(2)::after{display:none}
.footer-grid{grid-template-columns:repeat(2,1fr)}
.trust-inner{grid-template-columns:repeat(2,1fr)}
.trust-copy{grid-column:1/-1;text-align:center}
}

@media(max-width:700px){
.container{width:min(100% - 28px,var(--container))}
.section{padding:69px 0}
.brand-copy small{display:none}
.brand-logo{width:43px;height:43px}
.header-inner{min-height:74px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.hero{padding:124px 0 60px}
.hero h1{font-size:43px}
.hero-lead{font-size:15px}
.hero-visual{min-height:460px}
.visual-main{inset:12px 0 28px 20px}
.float-card.one{left:-4px;top:52px}
.float-card.two{right:-4px}
.float-card.three{display:none}
.dash-stats{grid-template-columns:1fr}
.dash-stat:nth-child(n+2){display:none}
.cards-3,.cards-2,.foundation-programs,.curriculum-grid,.about-stats,.steps,.footer-grid{grid-template-columns:1fr}
.step::after{display:none!important}
.feature-visual{min-height:445px;padding:20px}
.feature-screen{inset:44px 15px 25px 37px}
.innovation-main{min-height:520px}
.app-wrap{padding:35px 22px}
.phone-scene{min-height:390px}
.app-float.a{left:-10px}
.app-float.b{right:-10px}
.trust-inner{grid-template-columns:1fr 1fr}
.trust-item{font-size:9px}
.cta-box{grid-template-columns:1fr;padding:34px 25px}
.cta-actions{align-items:stretch;flex-direction:column}
.footer-bottom-inner{align-items:flex-start;flex-direction:column}
.floating-help{right:14px;bottom:14px;padding:11px}
.floating-help span:last-child{display:none}
}

/* Online Classes */
    .course-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:20px;
    }

.course-card{
      overflow:hidden;
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:var(--shadow-sm);
      transition:.24s ease;
    }

.course-card:hover{
      transform:translateY(-5px);
      box-shadow:var(--shadow);
    }

.course-cover{
      position:relative;
      min-height:180px;
      padding:22px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      color:#fff;
      overflow:hidden;
    }

.course-cover::after{
      content:"";
      position:absolute;
      right:-35px;
      bottom:-45px;
      width:135px;
      height:135px;
      border:24px solid rgba(255,255,255,.10);
      border-radius:50%;
    }

.course-cover.one{background:linear-gradient(135deg,#3A2F87,#6757D9)}

.course-cover.two{background:linear-gradient(135deg,#087E76,#00B7A8)}

.course-cover.three{background:linear-gradient(135deg,#8A5F13,#E0A832)}

.course-cover.four{background:linear-gradient(135deg,#8B3E62,#C04A67)}

.course-label{
      position:relative;
      z-index:1;
      align-self:flex-start;
      padding:6px 9px;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.17);
      border-radius:999px;
      font-size:9px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

.course-cover h3{
      position:relative;
      z-index:1;
      margin:28px 0 0;
      color:#fff;
      font-size:20px;
      line-height:1.28;
    }

.course-body{padding:21px}

.course-meta{
      display:flex;
      flex-wrap:wrap;
      gap:7px;
      margin-bottom:13px;
    }

.course-meta span{
      padding:5px 8px;
      color:var(--muted);
      background:#F5F4FA;
      border-radius:8px;
      font-size:9px;
      font-weight:750;
    }

.course-body p{
      margin-bottom:17px;
      color:var(--muted);
      font-size:12px;
    }

.course-actions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

.course-status{
      color:var(--secondary-dark);
      font-size:10px;
      font-weight:800;
    }

.course-more{
      margin-top:31px;
      text-align:center;
    }

@media(max-width:1060px){
.course-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.course-grid{grid-template-columns:1fr}
}

/* Banking Solution page */
    .solution-hero{padding-bottom:92px}

.solution-hero .hero-grid{grid-template-columns:1fr .96fr}

.solution-kicker{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}

.solution-kicker span{padding:7px 10px;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px;font-weight:800}

.solution-board{height:100%;padding:25px;background:linear-gradient(150deg,#282162,#17143D);border-radius:25px;overflow:hidden}

.board-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:#fff;font-size:12px;font-weight:800}

.board-status{padding:5px 8px;color:#B9FFF6;background:rgba(0,183,168,.15);border-radius:99px;font-size:8px}

.board-focus{padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.72),rgba(0,183,168,.35));border:1px solid rgba(255,255,255,.12);border-radius:18px}

.board-focus small{color:#D9D4FF;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

.board-focus h3{margin:7px 0 8px;color:#fff;font-size:23px}

.board-focus p{margin:0;color:rgba(255,255,255,.67);font-size:10px}

.board-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:13px}

.board-card{padding:15px;background:#fff;border-radius:14px}

.board-card strong{display:block;color:var(--navy);font-size:11px}

.board-card span{display:block;margin-top:3px;color:var(--muted);font-size:8px}

.board-meter{height:6px;margin-top:11px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.board-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.quick-nav{position:relative;z-index:4;margin-top:-31px}

.quick-nav-inner{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden}

.quick-nav a{display:flex;align-items:center;gap:11px;padding:19px;border-right:1px solid var(--line);transition:.18s}

.quick-nav a:last-child{border-right:0}

.quick-nav a:hover{background:var(--primary-light)}

.quick-nav i{width:34px;height:34px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.quick-nav strong{display:block;color:var(--navy);font-size:11px}

.quick-nav span span{display:block;color:var(--muted);font-size:8px}

.challenge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.challenge-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:19px}

.challenge-no{color:var(--primary);font-size:10px;font-weight:900}

.challenge-card h3{margin:9px 0 8px;font-size:16px}

.challenge-card p{margin:0;color:var(--muted);font-size:11px}

.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.solution-card{position:relative;overflow:hidden;padding:27px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm);transition:.22s}

.solution-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}

.solution-card .card-icon{width:50px;height:50px;font-size:20px}

.solution-card h3{margin:18px 0 9px;font-size:19px}

.solution-card p{color:var(--muted);font-size:12px}

.solution-card ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}

.solution-card li{display:flex;gap:8px;color:#57566B;font-size:10px}

.solution-card li:before{content:'✓';color:var(--secondary-dark);font-weight:900}

.method-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}

.method-panel{padding:30px;background:linear-gradient(145deg,#241D60,#6757D9);border-radius:28px;color:#fff}

.method-panel h3{color:#fff;font-size:27px}

.method-panel p{color:rgba(255,255,255,.68);font-size:12px}

.method-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}

.method-stat{padding:15px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.11);border-radius:14px}

.method-stat strong{display:block;color:#fff;font-size:13px}

.method-stat span{font-size:8px;color:rgba(255,255,255,.58)}

.process-list{display:grid;gap:13px}

.process-item{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:17px;background:#fff;border:1px solid var(--line);border-radius:17px}

.process-number{width:42px;height:42px;display:grid;place-items:center;color:#fff;background:var(--primary);border-radius:12px;font-weight:900}

.process-item h3{margin:0 0 4px;font-size:15px}

.process-item p{margin:0;color:var(--muted);font-size:10px}

.deliverable-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}

.deliverable{padding:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.11);border-radius:18px}

.deliverable i{display:grid;place-items:center;width:39px;height:39px;font-style:normal;background:rgba(255,255,255,.1);border-radius:11px}

.deliverable h3{margin:15px 0 7px;font-size:16px}

.deliverable p{margin:0;color:rgba(255,255,255,.63);font-size:10px}

.principle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.principle{padding:21px;background:#fff;border:1px solid var(--line);border-radius:18px}

.principle strong{display:block;color:var(--navy);font-size:13px}

.principle p{margin:7px 0 0;color:var(--muted);font-size:10px}

.notice-box{margin-top:24px;padding:20px 22px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 15px 15px 0;font-size:11px}

@media(max-width:1060px){
.quick-nav-inner,.challenge-grid,.principle-grid{grid-template-columns:repeat(2,1fr)}
.solution-grid,.deliverable-grid{grid-template-columns:repeat(2,1fr)}
.method-wrap{grid-template-columns:1fr}
}

@media(max-width:700px){
.quick-nav{margin-top:-18px}
.quick-nav-inner,.challenge-grid,.solution-grid,.deliverable-grid,.principle-grid{grid-template-columns:1fr}
.quick-nav a{border-right:0;border-bottom:1px solid var(--line)}
.quick-nav a:last-child{border-bottom:0}
.solution-hero .hero-grid{grid-template-columns:1fr}
}

/* =========================================================
       Bakti Pendidikan — refined lower-page design system
       ========================================================= */
    #program .section-head,
    #model-kolaborasi .method-copy,
    #tahapan .section-head,
    #pengukuran .section-head,
    #model-program .section-head,
    #output .section-head,
    #ketentuan .section-head,
    #faq .section-head{max-width:790px}

#program .section-head p,
    #tahapan .section-head p,
    #model-program .section-head p,
    #output .section-head p,
    #ketentuan .section-head p,
    #faq .section-head p{
      max-width:720px;
      margin-inline:auto;
      font-size:15px;
      line-height:1.75;
    }

/* Program scope cards */
    .service-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:22px;
      align-items:stretch;
    }

.service-grid .solution-card{
      min-height:100%;
      display:flex;
      flex-direction:column;
      padding:28px;
      border-radius:24px;
      background:linear-gradient(160deg,#FFFFFF 0%,#FCFBFF 100%);
      border:1px solid var(--line);
      box-shadow:0 14px 38px rgba(31,27,82,.065);
    }

.service-grid .solution-card::after{
      content:"";
      position:absolute;
      right:-54px;
      bottom:-59px;
      width:154px;
      height:154px;
      border:28px solid rgba(103,87,217,.045);
      border-radius:50%;
      pointer-events:none;
    }

.solution-icon{
      position:relative;
      z-index:1;
      width:56px;
      height:56px;
      display:grid;
      place-items:center;
      border-radius:17px;
      color:var(--primary);
      background:var(--primary-light);
      font-size:23px;
      font-weight:800;
      box-shadow:inset 0 0 0 1px rgba(103,87,217,.07);
    }

.service-grid .solution-card:nth-child(2) .solution-icon,
    .service-grid .solution-card:nth-child(5) .solution-icon{
      color:var(--secondary-dark);
      background:#E9FAF7;
    }

.service-grid .solution-card:nth-child(3) .solution-icon,
    .service-grid .solution-card:nth-child(6) .solution-icon{
      color:#94670E;
      background:#FFF5DB;
    }

.service-grid .solution-card h3{
      margin:21px 0 10px;
      font-size:20px;
      line-height:1.3;
    }

.service-grid .solution-card>p{
      min-height:84px;
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.72;
    }

.service-grid .solution-card ul{
      position:relative;
      z-index:1;
      margin-top:auto;
      padding-top:19px;
      gap:10px;
    }

.service-grid .solution-card li{
      align-items:flex-start;
      color:#55546A;
      font-size:12px;
      line-height:1.55;
    }

.service-grid .solution-card li::before{
      flex:0 0 auto;
      width:19px;
      height:19px;
      display:grid;
      place-items:center;
      margin-top:1px;
      color:var(--secondary-dark);
      background:#E9FAF7;
      border-radius:6px;
      font-size:10px;
    }

/* Collaboration section */
    .method-copy h2{
      margin:15px 0 16px;
      font-size:clamp(31px,4vw,47px);
      line-height:1.16;
    }

.method-copy>p{
      margin-bottom:27px;
      color:var(--muted);
      font-size:15px;
      line-height:1.78;
    }

#model-kolaborasi .feature-points{gap:13px;margin:0}

#model-kolaborasi .feature-point{
      padding:16px 17px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:17px;
      box-shadow:0 8px 24px rgba(31,27,82,.045);
    }

#model-kolaborasi .feature-point strong{font-size:14px}

#model-kolaborasi .feature-point span span{font-size:11px;line-height:1.6}

.method-panel{
      padding:32px;
      border-radius:29px;
      background:
        radial-gradient(circle at 90% 10%,rgba(0,183,168,.24),transparent 31%),
        linear-gradient(145deg,#241D60,#6757D9);
      box-shadow:var(--shadow);
    }

.method-title{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:16px;
      padding-bottom:20px;
      border-bottom:1px solid rgba(255,255,255,.13);
    }

.method-title span{
      color:#D9D4FF;
      font-size:10px;
      font-weight:800;
      letter-spacing:.1em;
      text-transform:uppercase;
    }

.method-title strong{color:#fff;font:800 20px/1.2 "Manrope",sans-serif}

.method-flow{display:grid;gap:11px;margin-top:20px}

.method-step{
      display:grid;
      grid-template-columns:45px 1fr;
      align-items:center;
      gap:13px;
      padding:14px;
      background:rgba(255,255,255,.085);
      border:1px solid rgba(255,255,255,.12);
      border-radius:15px;
    }

.method-step b{
      width:40px;height:40px;display:grid;place-items:center;
      color:#fff;background:rgba(255,255,255,.12);border-radius:11px;font-size:11px;
    }

.method-step strong{display:block;color:#fff;font-size:13px}

.method-step small{display:block;margin-top:2px;color:rgba(255,255,255,.62);font-size:9px}

.method-note{
      margin-top:18px;
      padding:15px 16px;
      color:rgba(255,255,255,.73);
      background:rgba(0,0,0,.12);
      border-left:3px solid var(--accent);
      border-radius:0 12px 12px 0;
      font-size:10px;
      line-height:1.65;
    }

/* Process cards */
    .process-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:19px;
    }

.process-card{
      position:relative;
      overflow:hidden;
      min-height:235px;
      padding:26px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:0 12px 32px rgba(31,27,82,.055);
      transition:.23s ease;
    }

.process-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}

.process-card>span{
      width:43px;height:43px;display:grid;place-items:center;
      color:#fff;background:var(--primary);border-radius:13px;
      font-size:11px;font-weight:900;
    }

.process-card:nth-child(2n)>span{background:var(--secondary-dark)}

.process-card:nth-child(3n)>span{background:#B37A15}

.process-card h3{margin:19px 0 9px;font-size:18px;line-height:1.35}

.process-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.7}

/* Impact cards */
    .impact-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:17px;
    }

.impact-card{
      display:grid;
      grid-template-columns:42px 1fr;
      gap:14px;
      min-height:150px;
      padding:22px;
      background:rgba(255,255,255,.075);
      border:1px solid rgba(255,255,255,.11);
      border-radius:19px;
      transition:.2s ease;
    }

.impact-card:hover{background:rgba(255,255,255,.105);transform:translateY(-3px)}

.impact-card>span{
      width:39px;height:39px;display:grid;place-items:center;
      color:#fff;background:rgba(255,255,255,.11);border-radius:11px;font-size:10px;font-weight:900;
    }

.impact-card strong{display:block;color:#fff;font:800 16px/1.35 "Manrope",sans-serif}

.impact-card p{margin:7px 0 0;color:rgba(255,255,255,.65);font-size:11px;line-height:1.65}

/* Standardize format program cards */
    #model-program .service-card{min-height:350px;display:flex;flex-direction:column}

#model-program .service-card p{min-height:68px;font-size:12px;line-height:1.7}

#model-program .card-list{margin-top:auto}

/* Output and principles */
    #output .principle-grid,
    #ketentuan .principle-grid{
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:18px;
    }

#output .principle,
    #ketentuan .principle{
      position:relative;
      overflow:hidden;
      display:grid;
      grid-template-columns:42px 1fr;
      gap:14px;
      min-height:186px;
      padding:24px;
      border-radius:21px;
      box-shadow:0 11px 30px rgba(31,27,82,.05);
      transition:.22s ease;
    }

#output .principle:hover,
    #ketentuan .principle:hover{transform:translateY(-4px);box-shadow:var(--shadow)}

#output .principle>span,
    #ketentuan .principle>span{
      width:39px;height:39px;display:grid;place-items:center;
      color:var(--primary);background:var(--primary-light);border-radius:11px;
      font-size:10px;font-weight:900;
    }

#ketentuan .principle>span{color:var(--secondary-dark);background:#E9FAF7;font-size:13px}

#output .principle strong,
    #ketentuan .principle strong{font-size:14px;line-height:1.45}

#output .principle p,
    #ketentuan .principle p{font-size:11px;line-height:1.67}

/* FAQ readability */
    #faq .faq-item{border-radius:18px;box-shadow:0 7px 22px rgba(31,27,82,.035)}

#faq .faq-q{padding:20px 22px;font-size:14px;line-height:1.5}

#faq .faq-a{padding:0 22px 21px;font-size:12px;line-height:1.72}

@media(max-width:1060px){
.service-grid,.process-grid,.impact-grid,
      #output .principle-grid,#ketentuan .principle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.service-grid .solution-card>p{min-height:auto}
}

@media(max-width:700px){
#program .section-head p,#tahapan .section-head p,#model-program .section-head p,
      #output .section-head p,#ketentuan .section-head p,#faq .section-head p{font-size:14px}
.service-grid,.process-grid,.impact-grid,
      #output .principle-grid,#ketentuan .principle-grid{grid-template-columns:1fr}
.service-grid .solution-card,.process-card{padding:23px}
.method-panel{padding:24px}
.method-title{align-items:flex-start;flex-direction:column}
#output .principle,#ketentuan .principle{min-height:auto;padding:21px}
#model-program .service-card{min-height:auto}
}

/* Header navigation refinement — unified multipage */
    .desktop-nav{gap:10px}

.nav-link{
      position:relative;
      gap:7px;
      padding:12px 5px;
      border:0;
      border-radius:0;
      background:transparent!important;
      box-shadow:none!important;
    }

.nav-link:hover,.nav-link.active{
      color:var(--primary);
      background:transparent!important;
    }

.nav-link::after{
      content:"";
      position:absolute;
      left:5px;right:5px;bottom:4px;
      height:2px;
      background:linear-gradient(90deg,var(--primary),var(--secondary));
      border-radius:99px;
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .2s ease;
    }

.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}

.mobile-main{gap:10px}

@media(max-width:1060px){
.desktop-nav{gap:4px}
}

:root{
      --primary:#6757D9;
      --primary-dark:#342A78;
      --primary-light:#F1EFFF;
      --secondary:#00B7A8;
      --secondary-dark:#087E76;
      --accent:#FFC95C;
      --navy:#17143D;
      --text:#44445B;
      --muted:#737388;
      --line:#E8E7F1;
      --white:#FFFFFF;
      --page:#FAFAFF;
      --success:#208A69;
      --danger:#C04A67;
      --shadow:0 22px 60px rgba(31,27,82,.10);
      --shadow-sm:0 12px 30px rgba(31,27,82,.08);
      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
      --container:1180px;
    }

*{box-sizing:border-box}

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

body{
      margin:0;
      color:var(--text);
      background:var(--page);
      font-family:"Inter",Arial,sans-serif;
      line-height:1.7;
      overflow-x:hidden;
    }

body.menu-open{overflow:hidden}

img,svg{max-width:100%;display:block}

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

button,input,select,textarea{font:inherit}

button{cursor:pointer}

h1,h2,h3,h4,p{margin-top:0}

h1,h2,h3,h4{
      color:var(--navy);
      font-family:"Manrope",sans-serif;
      letter-spacing:-.025em;
    }

.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}

.section{padding:96px 0}

.section-soft{background:linear-gradient(180deg,#F8F7FF 0%,#FFFFFF 100%)}

.section-dark{color:#fff;background:var(--navy)}

.section-dark h2,.section-dark h3,.section-dark h4{color:#fff}

.section-head{max-width:760px;margin:0 auto 48px;text-align:center}

.section-head.left{margin-left:0;text-align:left}

.section-head h2{
      margin:14px 0 15px;
      font-size:clamp(31px,4vw,48px);
      line-height:1.14;
    }

.section-head p{color:var(--muted);font-size:16px}

.section-dark .section-head p{color:rgba(255,255,255,.68)}

.eyebrow{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:7px 12px;
      color:var(--primary-dark);
      background:#fff;
      border:1px solid rgba(103,87,217,.17);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.10em;
      text-transform:uppercase;
    }

.eyebrow::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:var(--secondary);
      box-shadow:0 0 0 5px rgba(0,183,168,.12);
    }

.section-dark .eyebrow{
      color:#fff;background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.12);
    }

.btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 21px;
      border:1px solid transparent;
      border-radius:13px;
      font-weight:750;
      transition:.22s ease;
    }

.btn:hover{transform:translateY(-2px)}

.btn-primary{
      color:#fff;background:var(--primary);
      box-shadow:0 12px 28px rgba(103,87,217,.28);
    }

.btn-primary:hover{background:#5747C8}

.btn-secondary{color:#fff;background:var(--secondary)}

.btn-light{color:var(--primary-dark);background:#fff}

.btn-outline{
      color:var(--primary-dark);
      background:rgba(255,255,255,.75);
      border-color:#DCD9F0;
    }

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.icon-arrow{font-size:18px;line-height:1}

.tag{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      color:var(--primary-dark);
      background:var(--primary-light);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
    }

/* Header */
    .site-header{
      position:fixed;top:0;left:0;right:0;z-index:100;
      background:rgba(255,255,255,.92);
      border-bottom:1px solid rgba(232,231,241,.86);
      backdrop-filter:blur(17px);
      transition:.25s ease;
    }

.site-header.scrolled{box-shadow:0 9px 28px rgba(31,27,82,.08)}

.header-inner{
      min-height:82px;
      display:flex;align-items:center;justify-content:space-between;gap:24px;
    }

.brand{display:inline-flex;align-items:center;gap:12px;min-width:max-content}

.brand-logo{width:49px;height:49px;filter:drop-shadow(0 10px 14px rgba(103,87,217,.20))}

.brand-copy strong{
      display:block;color:var(--navy);
      font:800 19px/1.1 "Manrope",sans-serif;
    }

.brand-copy small{
      display:block;margin-top:5px;color:var(--muted);
      font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    }

.desktop-nav{display:flex;align-items:center;gap:4px}

.nav-item{position:relative}

.nav-link{
      display:flex;align-items:center;gap:6px;
      padding:12px 13px;
      color:#48475F;
      border-radius:10px;
      font-size:13px;font-weight:700;
      transition:.18s ease;
    }

.nav-link:hover,.nav-link.active{color:var(--primary);background:var(--primary-light)}

.chevron{font-size:10px;transition:.18s}

.nav-item:hover .chevron{transform:rotate(180deg)}

.dropdown{
      position:absolute;top:calc(100% + 12px);left:0;
      width:300px;padding:10px;
      background:#fff;border:1px solid var(--line);
      border-radius:18px;box-shadow:var(--shadow);
      opacity:0;visibility:hidden;transform:translateY(9px);
      transition:.18s ease;
    }

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}

.dropdown.wide{width:680px;display:grid;grid-template-columns:1fr 1fr;gap:6px}

.drop-link{
      display:flex;gap:12px;padding:12px;
      border-radius:12px;transition:.18s;
    }

.drop-link:hover{background:var(--primary-light)}

.drop-icon{
      flex:0 0 auto;width:38px;height:38px;border-radius:11px;
      display:grid;place-items:center;
      color:var(--primary);background:#F3F1FF;font-size:17px;
    }

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span{display:block;margin-top:2px;color:var(--muted);font-size:11px;line-height:1.45}

.header-action{display:flex;align-items:center;gap:9px}

.menu-toggle{
      display:none;width:45px;height:45px;
      border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--navy);
    }

/* Mobile menu */
    .mobile-panel{
      display:none;
      position:fixed;inset:82px 0 0;z-index:99;
      padding:18px 20px 35px;
      background:#fff;overflow:auto;
    }

.mobile-panel.open{display:block}

.mobile-group{border-bottom:1px solid var(--line)}

.mobile-main{
      width:100%;display:flex;align-items:center;justify-content:space-between;
      padding:15px 4px;border:0;background:none;color:var(--navy);font-weight:800;text-align:left;
    }

.mobile-sub{display:none;padding:0 0 12px 12px}

.mobile-sub.open{display:grid}

.mobile-sub a{padding:9px 8px;color:var(--muted);font-size:14px}

.mobile-login{margin-top:20px;width:100%}

/* Hero */
    .hero{
      position:relative;overflow:hidden;
      padding:156px 0 82px;
      background:
        radial-gradient(circle at 14% 23%,rgba(0,183,168,.14),transparent 27%),
        radial-gradient(circle at 87% 20%,rgba(255,201,92,.20),transparent 24%),
        linear-gradient(135deg,#F4F1FF 0%,#FFFFFF 52%,#EDFBF9 100%);
    }

.hero::before{
      content:"";position:absolute;left:-110px;bottom:-145px;
      width:360px;height:360px;border:52px solid rgba(103,87,217,.055);border-radius:50%;
    }

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:62px;align-items:center}

.hero h1{
      margin:20px 0 19px;
      font-size:clamp(42px,5.4vw,69px);
      line-height:1.05;
    }

.gradient-text{
      background:linear-gradient(90deg,var(--primary),var(--secondary-dark));
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }

.hero-lead{max-width:690px;color:#626278;font-size:17px}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px}

.hero-proof{display:flex;flex-wrap:wrap;gap:16px;margin-top:31px}

.proof-item{display:flex;align-items:center;gap:9px;color:#5D5C72;font-size:12px;font-weight:700}

.proof-icon{
      width:28px;height:28px;display:grid;place-items:center;
      color:var(--secondary-dark);background:#E9FAF7;border-radius:9px;
    }

.hero-visual{position:relative;min-height:530px}

.visual-main{
      position:absolute;inset:18px 6px 18px 40px;
      padding:22px;
      background:rgba(255,255,255,.78);
      border:1px solid rgba(255,255,255,.95);
      border-radius:34px;box-shadow:var(--shadow);
      backdrop-filter:blur(15px);
    }

.dashboard{
      height:100%;padding:22px;
      background:linear-gradient(150deg,#282162,#17143D);
      border-radius:25px;overflow:hidden;
    }

.dash-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}

.dash-brand{display:flex;align-items:center;gap:9px;color:#fff;font-size:12px;font-weight:800}

.dash-dots{display:flex;gap:5px}

.dash-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}

.dash-hero{
      padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.62),rgba(0,183,168,.36));
      border:1px solid rgba(255,255,255,.12);border-radius:19px;
    }

.dash-label{color:#D9D4FF;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.dash-hero h3{margin:8px 0 7px;color:#fff;font-size:25px;line-height:1.2}

.dash-hero p{margin:0;color:rgba(255,255,255,.68);font-size:11px}

.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}

.dash-stat{padding:13px;background:rgba(255,255,255,.07);border-radius:13px}

.dash-stat strong{display:block;color:#fff;font-size:16px}

.dash-stat span{color:rgba(255,255,255,.55);font-size:9px}

.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}

.dash-card{padding:16px;background:#fff;border-radius:16px}

.dash-card h4{margin-bottom:10px;font-size:12px}

.progress{height:7px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.mini-list{display:grid;gap:8px}

.mini-row{display:flex;align-items:center;gap:8px}

.mini-row i{width:9px;height:9px;border-radius:3px;background:var(--secondary)}

.mini-row span{font-size:9px;color:var(--muted)}

.float-card{
      position:absolute;z-index:2;display:flex;align-items:center;gap:12px;
      padding:14px 17px;background:#fff;border:1px solid var(--line);
      border-radius:16px;box-shadow:var(--shadow-sm);
    }

.float-card.one{left:0;top:88px}

.float-card.two{right:-10px;bottom:75px}

.float-card.three{left:10px;bottom:15px}

.float-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--primary-light);color:var(--primary)}

.float-card strong{display:block;color:var(--navy);font-size:12px}

.float-card small{display:block;color:var(--muted);font-size:9px}

/* Trust strip */
    .trust-strip{position:relative;z-index:3;margin-top:-1px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.trust-inner{display:grid;grid-template-columns:1.15fr repeat(4,1fr);align-items:center;gap:20px;padding:25px 0}

.trust-copy strong{display:block;color:var(--navy);font-size:13px}

.trust-copy span{color:var(--muted);font-size:11px}

.trust-item{display:flex;align-items:center;justify-content:center;gap:9px;color:#69677D;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}

.trust-mark{width:32px;height:32px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:10px}

/* Solution cards */
    .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

.service-card{
      position:relative;overflow:hidden;
      min-height:310px;padding:28px;
      background:#fff;border:1px solid var(--line);
      border-radius:var(--radius-lg);box-shadow:0 12px 35px rgba(31,27,82,.055);
      transition:.25s ease;
    }

.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}

.service-card::after{
      content:"";position:absolute;right:-45px;bottom:-50px;width:145px;height:145px;
      border:27px solid rgba(103,87,217,.055);border-radius:50%;
    }

.card-icon{
      width:54px;height:54px;display:grid;place-items:center;
      color:var(--primary);background:var(--primary-light);
      border-radius:16px;font-size:24px;
    }

.service-card:nth-child(2n) .card-icon{color:var(--secondary-dark);background:#E9FAF7}

.service-card:nth-child(3n) .card-icon{color:#9A6C0F;background:#FFF6DE}

.service-card h3{margin:21px 0 11px;font-size:21px}

.service-card p{color:var(--muted);font-size:13px}

.card-list{display:grid;gap:8px;margin:18px 0 20px;padding:0;list-style:none}

.card-list li{display:flex;gap:9px;color:#55546A;font-size:12px}

.card-list li::before{content:"✓";color:var(--secondary-dark);font-weight:900}

.text-link{position:relative;z-index:2;color:var(--primary);font-size:12px;font-weight:800}

.text-link:hover{text-decoration:underline}

/* Split */
    .split{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}

.feature-visual{
      position:relative;min-height:520px;padding:33px;
      background:linear-gradient(145deg,#F0EDFF,#EAFBF8);
      border:1px solid #E2DFF7;border-radius:32px;
    }

.feature-screen{
      position:absolute;inset:48px 32px 34px 57px;padding:22px;
      background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow);
    }

.screen-nav{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}

.screen-title{font-size:11px;font-weight:800;color:var(--navy)}

.screen-pill{padding:5px 9px;color:var(--secondary-dark);background:#E8FAF7;border-radius:99px;font-size:8px;font-weight:800}

.chart-area{display:flex;align-items:flex-end;gap:10px;height:155px;padding:25px 10px 8px;border-bottom:1px solid var(--line)}

.bar{flex:1;min-width:15px;background:linear-gradient(180deg,var(--primary),#9488EC);border-radius:7px 7px 2px 2px}

.screen-bottom{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px}

.screen-box{padding:14px;background:#FAFAFF;border:1px solid var(--line);border-radius:13px}

.screen-box strong{display:block;color:var(--navy);font-size:19px}

.screen-box span{color:var(--muted);font-size:9px}

.feature-chip{
      position:absolute;display:flex;align-items:center;gap:9px;padding:12px 14px;
      background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);
    }

.feature-chip.one{top:21px;right:18px}

.feature-chip.two{left:12px;bottom:53px}

.feature-chip i{width:32px;height:32px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.feature-chip strong{display:block;color:var(--navy);font-size:10px}

.feature-chip span{display:block;color:var(--muted);font-size:8px}

.feature-copy h2{margin:14px 0 16px;font-size:clamp(31px,4vw,48px);line-height:1.14}

.feature-copy>p{color:var(--muted)}

.feature-points{display:grid;gap:16px;margin:27px 0 30px}

.feature-point{display:flex;gap:14px}

.point-icon{flex:0 0 auto;width:39px;height:39px;display:grid;place-items:center;color:var(--secondary-dark);background:#E9FAF7;border-radius:12px;font-weight:900}

.feature-point strong{display:block;color:var(--navy);font-size:13px}

.feature-point span{display:block;margin-top:2px;color:var(--muted);font-size:11px}

/* Innovation */
    .innovation-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:25px}

.innovation-main{
      min-height:480px;padding:34px;
      color:#fff;background:linear-gradient(145deg,var(--primary-dark),var(--primary));
      border-radius:29px;overflow:hidden;position:relative;
    }

.innovation-main h3{max-width:540px;margin:18px 0 14px;color:#fff;font-size:32px;line-height:1.17}

.innovation-main p{max-width:610px;color:rgba(255,255,255,.74)}

.innovation-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}

.innovation-tags span{padding:8px 11px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.13);border-radius:99px;font-size:10px;font-weight:800}

.ai-orbit{position:absolute;right:-35px;bottom:-72px;width:330px;height:330px;border:1px solid rgba(255,255,255,.15);border-radius:50%}

.ai-orbit::before,.ai-orbit::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%}

.ai-orbit::before{inset:45px}

.ai-orbit::after{inset:93px}

.ai-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:83px;height:83px;display:grid;place-items:center;color:var(--primary-dark);background:#fff;border-radius:24px;font:800 25px "Manrope"}

.orbit-dot{position:absolute;width:36px;height:36px;display:grid;place-items:center;color:#fff;background:var(--secondary);border-radius:12px;font-size:13px}

.orbit-dot.a{left:39px;top:57px}

.orbit-dot.b{right:18px;top:115px}

.orbit-dot.c{left:72px;bottom:27px}

.innovation-side{display:grid;gap:20px}

.example-card{padding:25px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.example-head{display:flex;align-items:center;justify-content:space-between;gap:15px}

.example-head h3{margin:0;font-size:18px}

.example-card p{margin:12px 0 15px;color:var(--muted);font-size:12px}

.example-meta{display:flex;flex-wrap:wrap;gap:7px}

.example-meta span{padding:6px 9px;color:#65637A;background:#F5F4FA;border-radius:8px;font-size:9px;font-weight:750}

/* Foundation */
    .foundation-card{
      position:relative;overflow:hidden;padding:33px;
      background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-sm);
    }

.foundation-card.education{background:linear-gradient(145deg,#FFFFFF,#F3F0FF)}

.foundation-card.umkm{background:linear-gradient(145deg,#FFFFFF,#EBFAF7)}

.foundation-card h3{margin:19px 0 11px;font-size:27px}

.foundation-card p{color:var(--muted);font-size:13px}

.foundation-programs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:24px 0}

.program-mini{padding:13px;background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:13px}

.program-mini strong{display:block;color:var(--navy);font-size:11px}

.program-mini span{display:block;margin-top:3px;color:var(--muted);font-size:9px}

/* Journey */
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.step{
      position:relative;padding:25px 22px;background:#fff;border:1px solid var(--line);border-radius:20px;
    }

.step-no{
      width:41px;height:41px;display:grid;place-items:center;
      color:#fff;background:var(--primary);border-radius:13px;font-weight:800;
    }

.step h3{margin:17px 0 8px;font-size:17px}

.step p{color:var(--muted);font-size:11px}

.step:not(:last-child)::after{
      content:"→";position:absolute;right:-17px;top:32px;z-index:3;color:#B3AEE2;font-size:22px;font-weight:900;
    }

/* Curriculum */
    .curriculum-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:30px}

.tab-btn{
      min-height:41px;padding:0 15px;border:1px solid var(--line);border-radius:11px;
      color:var(--muted);background:#fff;font-size:11px;font-weight:800;
    }

.tab-btn.active{color:#fff;background:var(--primary);border-color:var(--primary)}

.curriculum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.curriculum-item{padding:21px;background:#fff;border:1px solid var(--line);border-radius:17px}

.curriculum-item .num{color:var(--primary);font-size:10px;font-weight:900}

.curriculum-item h3{margin:8px 0 7px;font-size:15px;line-height:1.35}

.curriculum-item p{margin:0;color:var(--muted);font-size:10px}

/* App */
    .app-wrap{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr .92fr;gap:55px;align-items:center;
      padding:50px 55px;color:#fff;
      background:linear-gradient(135deg,#211A58,#6757D9);
      border-radius:34px;
    }

.app-wrap h2{margin:14px 0 14px;color:#fff;font-size:clamp(30px,4vw,47px);line-height:1.15}

.app-wrap p{color:rgba(255,255,255,.70)}

.store-row{display:flex;flex-wrap:wrap;gap:11px;margin-top:25px}

.store-badge{
      display:flex;align-items:center;gap:11px;min-width:175px;padding:10px 14px;
      color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
      border-radius:13px;
    }

.store-badge svg{width:28px;height:28px}

.store-badge small{display:block;color:rgba(255,255,255,.60);font-size:8px;text-transform:uppercase;letter-spacing:.08em}

.store-badge strong{display:block;font-size:12px}

.phone-scene{position:relative;min-height:420px}

.phone{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(5deg);
      width:230px;height:420px;padding:9px;background:#111026;border:2px solid rgba(255,255,255,.25);
      border-radius:35px;box-shadow:0 28px 55px rgba(0,0,0,.32);
    }

.phone-screen{height:100%;padding:19px 15px;background:linear-gradient(180deg,#F5F2FF,#fff);border-radius:27px;overflow:hidden}

.notch{width:76px;height:17px;margin:-11px auto 15px;background:#111026;border-radius:0 0 13px 13px}

.mobile-logo{display:flex;align-items:center;gap:7px;color:var(--navy);font-size:9px;font-weight:900}

.mobile-logo svg{width:25px}

.mobile-welcome{margin-top:18px;padding:16px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:17px}

.mobile-welcome strong{display:block;font-size:13px}

.mobile-welcome span{font-size:8px;opacity:.78}

.mobile-course-title{margin:16px 0 9px;color:var(--navy);font-size:10px;font-weight:900}

.mobile-course{display:flex;gap:9px;margin-bottom:8px;padding:9px;background:#fff;border:1px solid var(--line);border-radius:11px}

.mobile-thumb{width:42px;height:38px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:8px;font-size:12px}

.mobile-course strong{display:block;color:var(--navy);font-size:8px}

.mobile-course span{display:block;color:var(--muted);font-size:6px}

.app-float{position:absolute;padding:13px 16px;background:#fff;border-radius:15px;box-shadow:var(--shadow)}

.app-float.a{left:5%;top:21%}

.app-float.b{right:3%;bottom:15%}

.app-float strong{display:block;color:var(--navy);font-size:10px}

.app-float span{color:var(--muted);font-size:8px}

/* About */
    .about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:29px}

.about-stat{padding:20px;background:#fff;border:1px solid var(--line);border-radius:16px}

.about-stat strong{display:block;color:var(--primary);font:800 24px "Manrope"}

.about-stat span{color:var(--muted);font-size:10px}

.about-note{padding:20px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 14px 14px 0;font-size:12px}

/* FAQ */
    .faq-wrap{max-width:880px;margin:0 auto}

.faq-item{margin-bottom:11px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}

.faq-q{
      width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
      padding:19px 21px;border:0;background:#fff;color:var(--navy);font-weight:800;text-align:left;
    }

.faq-plus{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:9px}

.faq-a{display:none;padding:0 21px 20px;color:var(--muted);font-size:12px}

.faq-item.open .faq-a{display:block}

.faq-item.open .faq-plus{transform:rotate(45deg)}

/* CTA */
    .final-cta{padding:78px 0}

.cta-box{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center;
      padding:42px 48px;color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));
      border-radius:30px;
    }

.cta-box::after{content:"";position:absolute;right:-80px;top:-110px;width:270px;height:270px;border:45px solid rgba(255,255,255,.07);border-radius:50%}

.cta-box h2{margin-bottom:9px;color:#fff;font-size:clamp(28px,4vw,43px)}

.cta-box p{margin:0;color:rgba(255,255,255,.70)}

.cta-actions{position:relative;z-index:2;display:flex;gap:10px;flex-wrap:wrap}

/* Footer */
    .site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:68px 0 46px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:48px}

.footer-brand p{max-width:390px;margin:19px 0 22px;font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:18px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:10px}

.footer-links a{font-size:12px;transition:.18s}

.footer-links a:hover{color:#fff;transform:translateX(3px)}

.footer-contact{display:grid;gap:10px;margin-top:18px}

.contact-row{display:flex;gap:10px;font-size:11px}

.contact-row i{font-style:normal;color:#AFA6FF}

.newsletter{display:flex;max-width:395px;margin-top:17px;padding:5px;background:#fff;border-radius:12px}

.newsletter input{width:100%;min-width:0;padding:0 12px;border:0;outline:0;font-size:11px}

.newsletter button{width:43px;border:0;border-radius:9px;color:#fff;background:var(--primary)}

.footer-bottom{padding:19px 0;border-top:1px solid rgba(255,255,255,.09);font-size:10px}

.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}

.footer-legal{display:flex;flex-wrap:wrap;gap:15px}

/* Floating WA */
    .floating-help{
      position:fixed;right:22px;bottom:22px;z-index:90;
      display:flex;align-items:center;gap:10px;padding:11px 15px;
      color:#fff;background:#1FAF6D;border-radius:99px;
      box-shadow:0 15px 35px rgba(16,119,73,.28);font-size:11px;font-weight:800;
    }

.floating-help span:first-child{font-size:19px}

/* Utilities */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:1060px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:grid;place-items:center}
.hero-grid,.split,.innovation-grid,.app-wrap{grid-template-columns:1fr}
.hero-visual{max-width:650px;width:100%;margin:0 auto}
.cards-3{grid-template-columns:repeat(2,1fr)}
.curriculum-grid{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(2,1fr)}
.step:nth-child(2)::after{display:none}
.footer-grid{grid-template-columns:repeat(2,1fr)}
.trust-inner{grid-template-columns:repeat(2,1fr)}
.trust-copy{grid-column:1/-1;text-align:center}
}

@media(max-width:700px){
.container{width:min(100% - 28px,var(--container))}
.section{padding:69px 0}
.brand-copy small{display:none}
.brand-logo{width:43px;height:43px}
.header-inner{min-height:74px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.hero{padding:124px 0 60px}
.hero h1{font-size:43px}
.hero-lead{font-size:15px}
.hero-visual{min-height:460px}
.visual-main{inset:12px 0 28px 20px}
.float-card.one{left:-4px;top:52px}
.float-card.two{right:-4px}
.float-card.three{display:none}
.dash-stats{grid-template-columns:1fr}
.dash-stat:nth-child(n+2){display:none}
.cards-3,.cards-2,.foundation-programs,.curriculum-grid,.about-stats,.steps,.footer-grid{grid-template-columns:1fr}
.step::after{display:none!important}
.feature-visual{min-height:445px;padding:20px}
.feature-screen{inset:44px 15px 25px 37px}
.innovation-main{min-height:520px}
.app-wrap{padding:35px 22px}
.phone-scene{min-height:390px}
.app-float.a{left:-10px}
.app-float.b{right:-10px}
.trust-inner{grid-template-columns:1fr 1fr}
.trust-item{font-size:9px}
.cta-box{grid-template-columns:1fr;padding:34px 25px}
.cta-actions{align-items:stretch;flex-direction:column}
.footer-bottom-inner{align-items:flex-start;flex-direction:column}
.floating-help{right:14px;bottom:14px;padding:11px}
.floating-help span:last-child{display:none}
}

/* Online Classes */
    .course-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:20px;
    }

.course-card{
      overflow:hidden;
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:var(--shadow-sm);
      transition:.24s ease;
    }

.course-card:hover{
      transform:translateY(-5px);
      box-shadow:var(--shadow);
    }

.course-cover{
      position:relative;
      min-height:180px;
      padding:22px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      color:#fff;
      overflow:hidden;
    }

.course-cover::after{
      content:"";
      position:absolute;
      right:-35px;
      bottom:-45px;
      width:135px;
      height:135px;
      border:24px solid rgba(255,255,255,.10);
      border-radius:50%;
    }

.course-cover.one{background:linear-gradient(135deg,#3A2F87,#6757D9)}

.course-cover.two{background:linear-gradient(135deg,#087E76,#00B7A8)}

.course-cover.three{background:linear-gradient(135deg,#8A5F13,#E0A832)}

.course-cover.four{background:linear-gradient(135deg,#8B3E62,#C04A67)}

.course-label{
      position:relative;
      z-index:1;
      align-self:flex-start;
      padding:6px 9px;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.17);
      border-radius:999px;
      font-size:9px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

.course-cover h3{
      position:relative;
      z-index:1;
      margin:28px 0 0;
      color:#fff;
      font-size:20px;
      line-height:1.28;
    }

.course-body{padding:21px}

.course-meta{
      display:flex;
      flex-wrap:wrap;
      gap:7px;
      margin-bottom:13px;
    }

.course-meta span{
      padding:5px 8px;
      color:var(--muted);
      background:#F5F4FA;
      border-radius:8px;
      font-size:9px;
      font-weight:750;
    }

.course-body p{
      margin-bottom:17px;
      color:var(--muted);
      font-size:12px;
    }

.course-actions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

.course-status{
      color:var(--secondary-dark);
      font-size:10px;
      font-weight:800;
    }

.course-more{
      margin-top:31px;
      text-align:center;
    }

@media(max-width:1060px){
.course-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.course-grid{grid-template-columns:1fr}
}

/* Banking Solution page */
    .solution-hero{padding-bottom:92px}

.solution-hero .hero-grid{grid-template-columns:1fr .96fr}

.solution-kicker{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}

.solution-kicker span{padding:7px 10px;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px;font-weight:800}

.solution-board{height:100%;padding:25px;background:linear-gradient(150deg,#282162,#17143D);border-radius:25px;overflow:hidden}

.board-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:#fff;font-size:12px;font-weight:800}

.board-status{padding:5px 8px;color:#B9FFF6;background:rgba(0,183,168,.15);border-radius:99px;font-size:8px}

.board-focus{padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.72),rgba(0,183,168,.35));border:1px solid rgba(255,255,255,.12);border-radius:18px}

.board-focus small{color:#D9D4FF;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

.board-focus h3{margin:7px 0 8px;color:#fff;font-size:23px}

.board-focus p{margin:0;color:rgba(255,255,255,.67);font-size:10px}

.board-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:13px}

.board-card{padding:15px;background:#fff;border-radius:14px}

.board-card strong{display:block;color:var(--navy);font-size:11px}

.board-card span{display:block;margin-top:3px;color:var(--muted);font-size:8px}

.board-meter{height:6px;margin-top:11px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.board-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.quick-nav{position:relative;z-index:4;margin-top:-31px}

.quick-nav-inner{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden}

.quick-nav a{display:flex;align-items:center;gap:11px;padding:19px;border-right:1px solid var(--line);transition:.18s}

.quick-nav a:last-child{border-right:0}

.quick-nav a:hover{background:var(--primary-light)}

.quick-nav i{width:34px;height:34px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.quick-nav strong{display:block;color:var(--navy);font-size:11px}

.quick-nav span span{display:block;color:var(--muted);font-size:8px}

.challenge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.challenge-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:19px}

.challenge-no{color:var(--primary);font-size:10px;font-weight:900}

.challenge-card h3{margin:9px 0 8px;font-size:16px}

.challenge-card p{margin:0;color:var(--muted);font-size:11px}

.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.solution-card{position:relative;overflow:hidden;padding:27px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm);transition:.22s}

.solution-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}

.solution-card .card-icon{width:50px;height:50px;font-size:20px}

.solution-card h3{margin:18px 0 9px;font-size:19px}

.solution-card p{color:var(--muted);font-size:12px}

.solution-card ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}

.solution-card li{display:flex;gap:8px;color:#57566B;font-size:10px}

.solution-card li:before{content:'✓';color:var(--secondary-dark);font-weight:900}

.method-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}

.method-panel{padding:30px;background:linear-gradient(145deg,#241D60,#6757D9);border-radius:28px;color:#fff}

.method-panel h3{color:#fff;font-size:27px}

.method-panel p{color:rgba(255,255,255,.68);font-size:12px}

.method-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}

.method-stat{padding:15px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.11);border-radius:14px}

.method-stat strong{display:block;color:#fff;font-size:13px}

.method-stat span{font-size:8px;color:rgba(255,255,255,.58)}

.process-list{display:grid;gap:13px}

.process-item{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:17px;background:#fff;border:1px solid var(--line);border-radius:17px}

.process-number{width:42px;height:42px;display:grid;place-items:center;color:#fff;background:var(--primary);border-radius:12px;font-weight:900}

.process-item h3{margin:0 0 4px;font-size:15px}

.process-item p{margin:0;color:var(--muted);font-size:10px}

.deliverable-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}

.deliverable{padding:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.11);border-radius:18px}

.deliverable i{display:grid;place-items:center;width:39px;height:39px;font-style:normal;background:rgba(255,255,255,.1);border-radius:11px}

.deliverable h3{margin:15px 0 7px;font-size:16px}

.deliverable p{margin:0;color:rgba(255,255,255,.63);font-size:10px}

.principle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.principle{padding:21px;background:#fff;border:1px solid var(--line);border-radius:18px}

.principle strong{display:block;color:var(--navy);font-size:13px}

.principle p{margin:7px 0 0;color:var(--muted);font-size:10px}

.notice-box{margin-top:24px;padding:20px 22px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 15px 15px 0;font-size:11px}

@media(max-width:1060px){
.quick-nav-inner,.challenge-grid,.principle-grid{grid-template-columns:repeat(2,1fr)}
.solution-grid,.deliverable-grid{grid-template-columns:repeat(2,1fr)}
.method-wrap{grid-template-columns:1fr}
}

@media(max-width:700px){
.quick-nav{margin-top:-18px}
.quick-nav-inner,.challenge-grid,.solution-grid,.deliverable-grid,.principle-grid{grid-template-columns:1fr}
.quick-nav a{border-right:0;border-bottom:1px solid var(--line)}
.quick-nav a:last-child{border-bottom:0}
.solution-hero .hero-grid{grid-template-columns:1fr}
}

/* =========================================================
       Bakti UMKM — refined lower-page design system
       ========================================================= */
    #program .section-head,
    #model-kolaborasi .method-copy,
    #tahapan .section-head,
    #pengukuran .section-head,
    #model-program .section-head,
    #output .section-head,
    #ketentuan .section-head,
    #faq .section-head{max-width:790px}

#program .section-head p,
    #tahapan .section-head p,
    #model-program .section-head p,
    #output .section-head p,
    #ketentuan .section-head p,
    #faq .section-head p{
      max-width:720px;
      margin-inline:auto;
      font-size:15px;
      line-height:1.75;
    }

/* Program scope cards */
    .service-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:22px;
      align-items:stretch;
    }

.service-grid .solution-card{
      min-height:100%;
      display:flex;
      flex-direction:column;
      padding:28px;
      border-radius:24px;
      background:linear-gradient(160deg,#FFFFFF 0%,#FCFBFF 100%);
      border:1px solid var(--line);
      box-shadow:0 14px 38px rgba(31,27,82,.065);
    }

.service-grid .solution-card::after{
      content:"";
      position:absolute;
      right:-54px;
      bottom:-59px;
      width:154px;
      height:154px;
      border:28px solid rgba(103,87,217,.045);
      border-radius:50%;
      pointer-events:none;
    }

.solution-icon{
      position:relative;
      z-index:1;
      width:56px;
      height:56px;
      display:grid;
      place-items:center;
      border-radius:17px;
      color:var(--primary);
      background:var(--primary-light);
      font-size:23px;
      font-weight:800;
      box-shadow:inset 0 0 0 1px rgba(103,87,217,.07);
    }

.service-grid .solution-card:nth-child(2) .solution-icon,
    .service-grid .solution-card:nth-child(5) .solution-icon{
      color:var(--secondary-dark);
      background:#E9FAF7;
    }

.service-grid .solution-card:nth-child(3) .solution-icon,
    .service-grid .solution-card:nth-child(6) .solution-icon{
      color:#94670E;
      background:#FFF5DB;
    }

.service-grid .solution-card h3{
      margin:21px 0 10px;
      font-size:20px;
      line-height:1.3;
    }

.service-grid .solution-card>p{
      min-height:84px;
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.72;
    }

.service-grid .solution-card ul{
      position:relative;
      z-index:1;
      margin-top:auto;
      padding-top:19px;
      gap:10px;
    }

.service-grid .solution-card li{
      align-items:flex-start;
      color:#55546A;
      font-size:12px;
      line-height:1.55;
    }

.service-grid .solution-card li::before{
      flex:0 0 auto;
      width:19px;
      height:19px;
      display:grid;
      place-items:center;
      margin-top:1px;
      color:var(--secondary-dark);
      background:#E9FAF7;
      border-radius:6px;
      font-size:10px;
    }

/* Collaboration section */
    .method-copy h2{
      margin:15px 0 16px;
      font-size:clamp(31px,4vw,47px);
      line-height:1.16;
    }

.method-copy>p{
      margin-bottom:27px;
      color:var(--muted);
      font-size:15px;
      line-height:1.78;
    }

#model-kolaborasi .feature-points{gap:13px;margin:0}

#model-kolaborasi .feature-point{
      padding:16px 17px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:17px;
      box-shadow:0 8px 24px rgba(31,27,82,.045);
    }

#model-kolaborasi .feature-point strong{font-size:14px}

#model-kolaborasi .feature-point span span{font-size:11px;line-height:1.6}

.method-panel{
      padding:32px;
      border-radius:29px;
      background:
        radial-gradient(circle at 90% 10%,rgba(0,183,168,.24),transparent 31%),
        linear-gradient(145deg,#241D60,#6757D9);
      box-shadow:var(--shadow);
    }

.method-title{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:16px;
      padding-bottom:20px;
      border-bottom:1px solid rgba(255,255,255,.13);
    }

.method-title span{
      color:#D9D4FF;
      font-size:10px;
      font-weight:800;
      letter-spacing:.1em;
      text-transform:uppercase;
    }

.method-title strong{color:#fff;font:800 20px/1.2 "Manrope",sans-serif}

.method-flow{display:grid;gap:11px;margin-top:20px}

.method-step{
      display:grid;
      grid-template-columns:45px 1fr;
      align-items:center;
      gap:13px;
      padding:14px;
      background:rgba(255,255,255,.085);
      border:1px solid rgba(255,255,255,.12);
      border-radius:15px;
    }

.method-step b{
      width:40px;height:40px;display:grid;place-items:center;
      color:#fff;background:rgba(255,255,255,.12);border-radius:11px;font-size:11px;
    }

.method-step strong{display:block;color:#fff;font-size:13px}

.method-step small{display:block;margin-top:2px;color:rgba(255,255,255,.62);font-size:9px}

.method-note{
      margin-top:18px;
      padding:15px 16px;
      color:rgba(255,255,255,.73);
      background:rgba(0,0,0,.12);
      border-left:3px solid var(--accent);
      border-radius:0 12px 12px 0;
      font-size:10px;
      line-height:1.65;
    }

/* Process cards */
    .process-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:19px;
    }

.process-card{
      position:relative;
      overflow:hidden;
      min-height:235px;
      padding:26px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:0 12px 32px rgba(31,27,82,.055);
      transition:.23s ease;
    }

.process-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}

.process-card>span{
      width:43px;height:43px;display:grid;place-items:center;
      color:#fff;background:var(--primary);border-radius:13px;
      font-size:11px;font-weight:900;
    }

.process-card:nth-child(2n)>span{background:var(--secondary-dark)}

.process-card:nth-child(3n)>span{background:#B37A15}

.process-card h3{margin:19px 0 9px;font-size:18px;line-height:1.35}

.process-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.7}

/* Impact cards */
    .impact-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:17px;
    }

.impact-card{
      display:grid;
      grid-template-columns:42px 1fr;
      gap:14px;
      min-height:150px;
      padding:22px;
      background:rgba(255,255,255,.075);
      border:1px solid rgba(255,255,255,.11);
      border-radius:19px;
      transition:.2s ease;
    }

.impact-card:hover{background:rgba(255,255,255,.105);transform:translateY(-3px)}

.impact-card>span{
      width:39px;height:39px;display:grid;place-items:center;
      color:#fff;background:rgba(255,255,255,.11);border-radius:11px;font-size:10px;font-weight:900;
    }

.impact-card strong{display:block;color:#fff;font:800 16px/1.35 "Manrope",sans-serif}

.impact-card p{margin:7px 0 0;color:rgba(255,255,255,.65);font-size:11px;line-height:1.65}

/* Standardize format program cards */
    #model-program .service-card{min-height:350px;display:flex;flex-direction:column}

#model-program .service-card p{min-height:68px;font-size:12px;line-height:1.7}

#model-program .card-list{margin-top:auto}

/* Output and principles */
    #output .principle-grid,
    #ketentuan .principle-grid{
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:18px;
    }

#output .principle,
    #ketentuan .principle{
      position:relative;
      overflow:hidden;
      display:grid;
      grid-template-columns:42px 1fr;
      gap:14px;
      min-height:186px;
      padding:24px;
      border-radius:21px;
      box-shadow:0 11px 30px rgba(31,27,82,.05);
      transition:.22s ease;
    }

#output .principle:hover,
    #ketentuan .principle:hover{transform:translateY(-4px);box-shadow:var(--shadow)}

#output .principle>span,
    #ketentuan .principle>span{
      width:39px;height:39px;display:grid;place-items:center;
      color:var(--primary);background:var(--primary-light);border-radius:11px;
      font-size:10px;font-weight:900;
    }

#ketentuan .principle>span{color:var(--secondary-dark);background:#E9FAF7;font-size:13px}

#output .principle strong,
    #ketentuan .principle strong{font-size:14px;line-height:1.45}

#output .principle p,
    #ketentuan .principle p{font-size:11px;line-height:1.67}

/* FAQ readability */
    #faq .faq-item{border-radius:18px;box-shadow:0 7px 22px rgba(31,27,82,.035)}

#faq .faq-q{padding:20px 22px;font-size:14px;line-height:1.5}

#faq .faq-a{padding:0 22px 21px;font-size:12px;line-height:1.72}

@media(max-width:1060px){
.service-grid,.process-grid,.impact-grid,
      #output .principle-grid,#ketentuan .principle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.service-grid .solution-card>p{min-height:auto}
}

@media(max-width:700px){
#program .section-head p,#tahapan .section-head p,#model-program .section-head p,
      #output .section-head p,#ketentuan .section-head p,#faq .section-head p{font-size:14px}
.service-grid,.process-grid,.impact-grid,
      #output .principle-grid,#ketentuan .principle-grid{grid-template-columns:1fr}
.service-grid .solution-card,.process-card{padding:23px}
.method-panel{padding:24px}
.method-title{align-items:flex-start;flex-direction:column}
#output .principle,#ketentuan .principle{min-height:auto;padding:21px}
#model-program .service-card{min-height:auto}
}

/* Header navigation refinement — unified multipage */
    .desktop-nav{gap:10px}

.nav-link{
      position:relative;
      gap:7px;
      padding:12px 5px;
      border:0;
      border-radius:0;
      background:transparent!important;
      box-shadow:none!important;
    }

.nav-link:hover,.nav-link.active{
      color:var(--primary);
      background:transparent!important;
    }

.nav-link::after{
      content:"";
      position:absolute;
      left:5px;right:5px;bottom:4px;
      height:2px;
      background:linear-gradient(90deg,var(--primary),var(--secondary));
      border-radius:99px;
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .2s ease;
    }

.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}

.mobile-main{gap:10px}

@media(max-width:1060px){
.desktop-nav{gap:4px}
}

:root{
            --primary: #6757D9;
            --primary-dark: #342A78;
            --primary-light: #F1EFFF;
            --secondary: #00B7A8;
            --secondary-dark: #087E76;
            --accent: #FFC95C;
            --navy: #17143D;
            --text: #44445B;
            --muted: #737388;
            --line: #E8E7F1;
            --white: #fff;
            --page: #FAFAFF;
            --shadow: 0 22px 60px rgba(31, 27, 82, .10);
            --shadow-sm: 0 12px 30px rgba(31, 27, 82, .08);
            --container: 1180px
        }

*{
            box-sizing: border-box
        }

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

body{
            margin: 0;
            color: var(--text);
            background: var(--page);
            font-family: "Inter", Arial, sans-serif;
            line-height: 1.7
        }

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

button{
            font: inherit;
            cursor: pointer
        }

h1,
        h2,
        h3,
        h4,
        p{
            margin-top: 0
        }

h1,
        h2,
        h3,
        h4{
            color: var(--navy);
            font-family: "Manrope", sans-serif;
            letter-spacing: -.025em
        }

.container{
            width: min(var(--container), calc(100% - 40px));
            margin: auto
        }

.section{
            padding: 92px 0
        }

.section-soft{
            background: linear-gradient(180deg, #F8F7FF, #fff)
        }

.section-head{
            max-width: 760px;
            margin: 0 auto 45px;
            text-align: center
        }

.section-head h2{
            margin: 13px 0 14px;
            font-size: clamp(31px, 4vw, 47px);
            line-height: 1.14
        }

.section-head p{
            color: var(--muted)
        }

.eyebrow{
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 7px 12px;
            color: var(--primary-dark);
            background: #fff;
            border: 1px solid rgba(103, 87, 217, .17);
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .1em;
            text-transform: uppercase
        }

.eyebrow:before{
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--secondary);
            box-shadow: 0 0 0 5px rgba(0, 183, 168, .12)
        }

.btn{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 48px;
            padding: 0 21px;
            border: 1px solid transparent;
            border-radius: 13px;
            font-weight: 800;
            transition: .2s
        }

.btn:hover{
            transform: translateY(-2px)
        }

.btn-primary{
            color: #fff;
            background: var(--primary);
            box-shadow: 0 12px 28px rgba(103, 87, 217, .27)
        }

.btn-outline{
            color: var(--primary-dark);
            background: #fff;
            border-color: #DCD9F0
        }

.btn-secondary{
            color: #fff;
            background: var(--secondary)
        }

.btn-sm{
            min-height: 42px;
            padding: 0 17px;
            font-size: 13px
        }

.site-header{
            position: fixed;
            inset: 0 0 auto;
            z-index: 100;
            background: rgba(255, 255, 255, .94);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(17px)
        }

.header-inner{
            min-height: 82px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px
        }

.brand{
            display: flex;
            align-items: center;
            gap: 12px
        }

.brand-logo{
            width: 49px;
            height: 49px
        }

.brand-copy strong{
            display: block;
            color: var(--navy);
            font: 800 19px/1.1 "Manrope"
        }

.brand-copy small{
            display: block;
            margin-top: 5px;
            color: var(--muted);
            font-size: 9px;
            font-weight: 800;
            letter-spacing: .1em;
            text-transform: uppercase
        }

.desktop-nav{
            display: flex;
            align-items: center;
            gap: 10px
        }

.nav-item{
            position: relative
        }

.nav-link{
            position: relative;
            padding: 12px 5px;
            color: #48475F;
            font-size: 13px;
            font-weight: 700
        }

.nav-link:after{
            content: "";
            position: absolute;
            left: 5px;
            right: 5px;
            bottom: 3px;
            height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            transform: scaleX(0);
            transition: .2s
        }

.nav-link:hover,
        .nav-link.active{
            color: var(--primary)
        }

.nav-link:hover:after,
        .nav-link.active:after{
            transform: scaleX(1)
        }

.chevron{
            font-size: 10px
        }

.dropdown{
            position: absolute;
            top: calc(100% + 12px);
            left: 0;
            width: 300px;
            padding: 10px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 18px;
            box-shadow: var(--shadow);
            opacity: 0;
            visibility: hidden;
            transform: translateY(8px);
            transition: .18s
        }

.nav-item:hover .dropdown{
            opacity: 1;
            visibility: visible;
            transform: none
        }

.dropdown.wide{
            width: 620px;
            display: grid;
            grid-template-columns: 1fr 1fr
        }

.drop-link{
            display: flex;
            gap: 11px;
            padding: 12px;
            border-radius: 12px
        }

.drop-link:hover{
            background: var(--primary-light)
        }

.drop-icon{
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            color: var(--primary);
            background: var(--primary-light);
            border-radius: 11px
        }

.drop-link strong{
            display: block;
            color: var(--navy);
            font-size: 13px
        }

.drop-link span span{
            display: block;
            color: var(--muted);
            font-size: 10px
        }

.header-action{
            display: flex;
            gap: 9px
        }

.menu-toggle{
            display: none;
            width: 45px;
            height: 45px;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: #fff
        }

.mobile-panel{
            display: none;
            position: fixed;
            inset: 82px 0 0;
            z-index: 99;
            padding: 20px;
            background: #fff
        }

.mobile-panel.open{
            display: grid;
            align-content: start
        }

.mobile-main{
            padding: 14px 4px;
            border-bottom: 1px solid var(--line);
            font-weight: 800
        }

.mobile-login{
            margin-top: 20px
        }

.detail-hero{
            position: relative;
            overflow: hidden;
            padding: 138px 0 76px;
            background: radial-gradient(circle at 12% 20%, rgba(0, 183, 168, .13), transparent 26%), radial-gradient(circle at 88% 20%, rgba(255, 201, 92, .18), transparent 24%), linear-gradient(135deg, #F5F2FF, #fff 52%, #EDFBF9)
        }

.detail-grid{
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 58px;
            align-items: center
        }

.breadcrumb{
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin-bottom: 18px;
            color: var(--muted);
            font-size: 11px
        }

.breadcrumb a{
            color: var(--primary);
            font-weight: 800
        }

.detail-hero h1{
            margin: 18px 0;
            font-size: clamp(40px, 5vw, 64px);
            line-height: 1.05
        }

.hero-copy{
            font-size: 17px;
            color: #626278
        }

.hero-meta{
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 23px
        }

.hero-meta span{
            padding: 8px 11px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 10px;
            font-size: 10px;
            font-weight: 800
        }

.hero-actions{
            display: flex;
            flex-wrap: wrap;
            gap: 11px;
            margin-top: 27px
        }

.preview-card{
            padding: 20px;
            background: rgba(255, 255, 255, .8);
            border: 1px solid #fff;
            border-radius: 32px;
            box-shadow: var(--shadow)
        }

.preview-cover{
            position: relative;
            min-height: 410px;
            padding: 28px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            color: #fff;
            border-radius: 24px;
            overflow: hidden
        }

.preview-cover:after{
            content: "";
            position: absolute;
            right: -60px;
            bottom: -70px;
            width: 260px;
            height: 260px;
            border: 42px solid rgba(255, 255, 255, .1);
            border-radius: 50%
        }

.preview-label{
            position: relative;
            z-index: 1;
            align-self: flex-start;
            padding: 7px 11px;
            background: rgba(255, 255, 255, .14);
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 999px;
            font-size: 10px;
            font-weight: 800
        }

.preview-cover h2{
            position: relative;
            z-index: 1;
            margin: 0;
            color: #fff;
            font-size: 31px;
            line-height: 1.2
        }

.preview-bottom{
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px
        }

.preview-stat{
            padding: 13px;
            background: rgba(255, 255, 255, .12);
            border: 1px solid rgba(255, 255, 255, .14);
            border-radius: 13px
        }

.preview-stat strong{
            display: block;
            font-size: 12px
        }

.preview-stat span{
            font-size: 9px;
            opacity: .72
        }

.sticky-nav{
            position: sticky;
            top: 82px;
            z-index: 40;
            background: #fff;
            border-bottom: 1px solid var(--line);
            box-shadow: 0 8px 22px rgba(31, 27, 82, .04)
        }

.sticky-links{
            display: flex;
            gap: 25px;
            overflow: auto
        }

.sticky-links a{
            padding: 17px 0;
            color: var(--muted);
            font-size: 12px;
            font-weight: 800;
            white-space: nowrap
        }

.sticky-links a:hover{
            color: var(--primary)
        }

.overview-grid{
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 38px
        }

.content-card{
            padding: 30px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 22px;
            box-shadow: var(--shadow-sm)
        }

.content-card h2{
            font-size: 29px
        }

.content-card p{
            color: var(--muted)
        }

.outcome-grid{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 13px;
            margin-top: 24px
        }

.outcome-card{
            padding: 18px;
            background: #F9F8FF;
            border: 1px solid var(--line);
            border-radius: 15px
        }

.outcome-card i{
            width: 35px;
            height: 35px;
            display: grid;
            place-items: center;
            font-style: normal;
            color: var(--secondary-dark);
            background: #E9FAF7;
            border-radius: 10px
        }

.outcome-card strong{
            display: block;
            margin-top: 11px;
            color: var(--navy);
            font-size: 12px
        }

.side-info{
            display: grid;
            gap: 13px
        }

.info-row{
            display: flex;
            gap: 13px;
            padding: 16px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 15px
        }

.info-row i{
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            font-style: normal;
            color: var(--primary);
            background: var(--primary-light);
            border-radius: 11px
        }

.info-row strong{
            display: block;
            color: var(--navy);
            font-size: 12px
        }

.info-row span{
            font-size: 10px;
            color: var(--muted)
        }

.module-list{
            display: grid;
            gap: 13px;
            max-width: 950px;
            margin: auto
        }

.module{
            display: grid;
            grid-template-columns: 55px 1fr auto;
            gap: 16px;
            align-items: center;
            padding: 19px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 17px;
            box-shadow: var(--shadow-sm)
        }

.module-no{
            width: 47px;
            height: 47px;
            display: grid;
            place-items: center;
            color: #fff;
            background: var(--primary);
            border-radius: 13px;
            font-weight: 900
        }

.module h3{
            margin: 0 0 4px;
            font-size: 16px
        }

.module p{
            margin: 0;
            color: var(--muted);
            font-size: 11px
        }

.module-time{
            padding: 6px 9px;
            color: var(--primary-dark);
            background: var(--primary-light);
            border-radius: 8px;
            font-size: 9px;
            font-weight: 800
        }

.learning-grid{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 17px
        }

.learning-card{
            padding: 23px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 18px;
            box-shadow: var(--shadow-sm)
        }

.learning-card i{
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            font-style: normal;
            color: var(--primary);
            background: var(--primary-light);
            border-radius: 12px
        }

.learning-card h3{
            margin: 15px 0 7px;
            font-size: 16px
        }

.learning-card p{
            margin: 0;
            color: var(--muted);
            font-size: 10px
        }

.enroll-wrap{
            display: grid;
            grid-template-columns: 1fr .8fr;
            gap: 24px
        }

.enroll-card{
            padding: 31px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 23px;
            box-shadow: var(--shadow-sm)
        }

.enroll-card.featured{
            color: #fff;
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
            border: 0
        }

.enroll-card.featured h2,
        .enroll-card.featured h3{
            color: #fff
        }

.enroll-card.featured p{
            color: rgba(255, 255, 255, .7)
        }

.check-list{
            display: grid;
            gap: 9px;
            margin: 20px 0;
            padding: 0;
            list-style: none
        }

.check-list li{
            display: flex;
            gap: 9px;
            font-size: 12px
        }

.check-list li:before{
            content: "✓";
            color: var(--secondary);
            font-weight: 900
        }

.faq-wrap{
            max-width: 880px;
            margin: auto
        }

.faq-item{
            margin-bottom: 10px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 16px;
            overflow: hidden
        }

.faq-q{
            width: 100%;
            display: flex;
            justify-content: space-between;
            gap: 18px;
            padding: 19px 21px;
            border: 0;
            background: #fff;
            color: var(--navy);
            font-weight: 800;
            text-align: left
        }

.faq-a{
            display: none;
            padding: 0 21px 20px;
            color: var(--muted);
            font-size: 12px
        }

.faq-item.open .faq-a{
            display: block
        }

.faq-item.open .faq-plus{
            transform: rotate(45deg)
        }

.related-grid{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px
        }

.related{
            overflow: hidden;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 19px;
            box-shadow: var(--shadow-sm)
        }

.related-cover{
            min-height: 135px;
            padding: 18px;
            display: flex;
            align-items: end
        }

.related-cover h3{
            margin: 0;
            color: #fff;
            font-size: 17px
        }

.related-body{
            padding: 18px
        }

.related-body p{
            color: var(--muted);
            font-size: 10px
        }

.related-body a{
            color: var(--primary);
            font-size: 11px;
            font-weight: 800
        }

.site-footer{
            color: rgba(255, 255, 255, .72);
            background: #141132
        }

.footer-main{
            padding: 65px 0 44px
        }

.footer-grid{
            display: grid;
            grid-template-columns: 1.45fr repeat(3, 1fr);
            gap: 44px
        }

.footer-brand p{
            font-size: 12px
        }

.footer-brand .brand-copy strong,
        .footer-title{
            color: #fff
        }

.footer-title{
            margin-bottom: 17px;
            font: 800 14px "Manrope"
        }

.footer-links{
            display: grid;
            gap: 9px
        }

.footer-links a{
            font-size: 12px
        }

.footer-contact{
            display: grid;
            gap: 7px;
            font-size: 11px
        }

.footer-bottom{
            padding: 18px 0;
            border-top: 1px solid rgba(255, 255, 255, .1);
            font-size: 10px
        }

@media(max-width:1000px){
.desktop-nav,
            .header-action .btn-outline{
                display: none
            }
.menu-toggle{
                display: block
            }
.detail-grid,
            .overview-grid,
            .enroll-wrap{
                grid-template-columns: 1fr
            }
.preview-card{
                max-width: 650px
            }
.learning-grid{
                grid-template-columns: repeat(2, 1fr)
            }
.footer-grid{
                grid-template-columns: repeat(2, 1fr)
            }
}

@media(max-width:700px){
.container{
                width: min(100% - 28px, var(--container))
            }
.section{
                padding: 66px 0
            }
.brand-copy small{
                display: none
            }
.header-inner{
                min-height: 74px
            }
.brand-logo{
                width: 43px
            }
.mobile-panel{
                inset: 74px 0 0
            }
.header-action .btn-primary{
                display: none
            }
.detail-hero{
                padding: 116px 0 58px
            }
.detail-hero h1{
                font-size: 41px
            }
.preview-cover{
                min-height: 340px
            }
.sticky-nav{
                top: 74px
            }
.outcome-grid,
            .learning-grid,
            .related-grid,
            .footer-grid{
                grid-template-columns: 1fr
            }
.module{
                grid-template-columns: 47px 1fr
            }
.module-time{
                display: none
            }
.footer-grid{
                gap: 30px
            }
}

:root{--primary:#6757D9;--primary-dark:#342A78;--primary-light:#F1EFFF;--secondary:#00B7A8;--secondary-dark:#087E76;--accent:#FFC95C;--navy:#17143D;--text:#44445B;--muted:#737388;--line:#E8E7F1;--white:#fff;--page:#FAFAFF;--shadow:0 22px 60px rgba(31,27,82,.10);--shadow-sm:0 12px 30px rgba(31,27,82,.08);--container:1180px}

*{box-sizing:border-box}

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

body{margin:0;color:var(--text);background:var(--page);font-family:"Inter",Arial,sans-serif;line-height:1.7}

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

button{font:inherit;cursor:pointer}

h1,h2,h3,h4,p{margin-top:0}

h1,h2,h3,h4{color:var(--navy);font-family:"Manrope",sans-serif;letter-spacing:-.025em}

.container{width:min(var(--container),calc(100% - 40px));margin:auto}

.section{padding:92px 0}

.section-soft{background:linear-gradient(180deg,#F8F7FF,#fff)}

.section-head{max-width:760px;margin:0 auto 45px;text-align:center}

.section-head h2{margin:13px 0 14px;font-size:clamp(31px,4vw,47px);line-height:1.14}

.section-head p{color:var(--muted)}

.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;color:var(--primary-dark);background:#fff;border:1px solid rgba(103,87,217,.17);border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--secondary);box-shadow:0 0 0 5px rgba(0,183,168,.12)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 21px;border:1px solid transparent;border-radius:13px;font-weight:800;transition:.2s}

.btn:hover{transform:translateY(-2px)}

.btn-primary{color:#fff;background:var(--primary);box-shadow:0 12px 28px rgba(103,87,217,.27)}

.btn-outline{color:var(--primary-dark);background:#fff;border-color:#DCD9F0}

.btn-secondary{color:#fff;background:var(--secondary)}

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.site-header{position:fixed;inset:0 0 auto;z-index:100;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(17px)}

.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}

.brand{display:flex;align-items:center;gap:12px}

.brand-logo{width:49px;height:49px}

.brand-copy strong{display:block;color:var(--navy);font:800 19px/1.1 "Manrope"}

.brand-copy small{display:block;margin-top:5px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.desktop-nav{display:flex;align-items:center;gap:10px}

.nav-item{position:relative}

.nav-link{position:relative;padding:12px 5px;color:#48475F;font-size:13px;font-weight:700}

.nav-link:after{content:"";position:absolute;left:5px;right:5px;bottom:3px;height:2px;background:linear-gradient(90deg,var(--primary),var(--secondary));transform:scaleX(0);transition:.2s}

.nav-link:hover,.nav-link.active{color:var(--primary)}

.nav-link:hover:after,.nav-link.active:after{transform:scaleX(1)}

.chevron{font-size:10px}

.dropdown{position:absolute;top:calc(100% + 12px);left:0;width:300px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s}

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:none}

.dropdown.wide{width:620px;display:grid;grid-template-columns:1fr 1fr}

.drop-link{display:flex;gap:11px;padding:12px;border-radius:12px}

.drop-link:hover{background:var(--primary-light)}

.drop-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;color:var(--primary);background:var(--primary-light);border-radius:11px}

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span span{display:block;color:var(--muted);font-size:10px}

.header-action{display:flex;gap:9px}

.menu-toggle{display:none;width:45px;height:45px;border:1px solid var(--line);border-radius:12px;background:#fff}

.mobile-panel{display:none;position:fixed;inset:82px 0 0;z-index:99;padding:20px;background:#fff}

.mobile-panel.open{display:grid;align-content:start}

.mobile-main{padding:14px 4px;border-bottom:1px solid var(--line);font-weight:800}

.mobile-login{margin-top:20px}

.detail-hero{position:relative;overflow:hidden;padding:138px 0 76px;background:radial-gradient(circle at 12% 20%,rgba(0,183,168,.13),transparent 26%),radial-gradient(circle at 88% 20%,rgba(255,201,92,.18),transparent 24%),linear-gradient(135deg,#F5F2FF,#fff 52%,#EDFBF9)}

.detail-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:58px;align-items:center}

.breadcrumb{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px;color:var(--muted);font-size:11px}

.breadcrumb a{color:var(--primary);font-weight:800}

.detail-hero h1{margin:18px 0;font-size:clamp(40px,5vw,64px);line-height:1.05}

.hero-copy{font-size:17px;color:#626278}

.hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}

.hero-meta span{padding:8px 11px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:10px;font-weight:800}

.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:27px}

.preview-card{padding:20px;background:rgba(255,255,255,.8);border:1px solid #fff;border-radius:32px;box-shadow:var(--shadow)}

.preview-cover{position:relative;min-height:410px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;border-radius:24px;overflow:hidden}

.preview-cover:after{content:"";position:absolute;right:-60px;bottom:-70px;width:260px;height:260px;border:42px solid rgba(255,255,255,.1);border-radius:50%}

.preview-label{position:relative;z-index:1;align-self:flex-start;padding:7px 11px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:999px;font-size:10px;font-weight:800}

.preview-cover h2{position:relative;z-index:1;margin:0;color:#fff;font-size:31px;line-height:1.2}

.preview-bottom{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px}

.preview-stat{padding:13px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);border-radius:13px}

.preview-stat strong{display:block;font-size:12px}

.preview-stat span{font-size:9px;opacity:.72}

.sticky-nav{position:sticky;top:82px;z-index:40;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 8px 22px rgba(31,27,82,.04)}

.sticky-links{display:flex;gap:25px;overflow:auto}

.sticky-links a{padding:17px 0;color:var(--muted);font-size:12px;font-weight:800;white-space:nowrap}

.sticky-links a:hover{color:var(--primary)}

.overview-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:38px}

.content-card{padding:30px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.content-card h2{font-size:29px}

.content-card p{color:var(--muted)}

.outcome-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:24px}

.outcome-card{padding:18px;background:#F9F8FF;border:1px solid var(--line);border-radius:15px}

.outcome-card i{width:35px;height:35px;display:grid;place-items:center;font-style:normal;color:var(--secondary-dark);background:#E9FAF7;border-radius:10px}

.outcome-card strong{display:block;margin-top:11px;color:var(--navy);font-size:12px}

.side-info{display:grid;gap:13px}

.info-row{display:flex;gap:13px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:15px}

.info-row i{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:11px}

.info-row strong{display:block;color:var(--navy);font-size:12px}

.info-row span{font-size:10px;color:var(--muted)}

.module-list{display:grid;gap:13px;max-width:950px;margin:auto}

.module{display:grid;grid-template-columns:55px 1fr auto;gap:16px;align-items:center;padding:19px;background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow-sm)}

.module-no{width:47px;height:47px;display:grid;place-items:center;color:#fff;background:var(--primary);border-radius:13px;font-weight:900}

.module h3{margin:0 0 4px;font-size:16px}

.module p{margin:0;color:var(--muted);font-size:11px}

.module-time{padding:6px 9px;color:var(--primary-dark);background:var(--primary-light);border-radius:8px;font-size:9px;font-weight:800}

.learning-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}

.learning-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm)}

.learning-card i{width:42px;height:42px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:12px}

.learning-card h3{margin:15px 0 7px;font-size:16px}

.learning-card p{margin:0;color:var(--muted);font-size:10px}

.enroll-wrap{display:grid;grid-template-columns:1fr .8fr;gap:24px}

.enroll-card{padding:31px;background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow-sm)}

.enroll-card.featured{color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));border:0}

.enroll-card.featured h2,.enroll-card.featured h3{color:#fff}

.enroll-card.featured p{color:rgba(255,255,255,.7)}

.check-list{display:grid;gap:9px;margin:20px 0;padding:0;list-style:none}

.check-list li{display:flex;gap:9px;font-size:12px}

.check-list li:before{content:"✓";color:var(--secondary);font-weight:900}

.faq-wrap{max-width:880px;margin:auto}

.faq-item{margin-bottom:10px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}

.faq-q{width:100%;display:flex;justify-content:space-between;gap:18px;padding:19px 21px;border:0;background:#fff;color:var(--navy);font-weight:800;text-align:left}

.faq-a{display:none;padding:0 21px 20px;color:var(--muted);font-size:12px}

.faq-item.open .faq-a{display:block}

.faq-item.open .faq-plus{transform:rotate(45deg)}

.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.related{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:19px;box-shadow:var(--shadow-sm)}

.related-cover{min-height:135px;padding:18px;display:flex;align-items:end}

.related-cover h3{margin:0;color:#fff;font-size:17px}

.related-body{padding:18px}

.related-body p{color:var(--muted);font-size:10px}

.related-body a{color:var(--primary);font-size:11px;font-weight:800}

.site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:65px 0 44px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:44px}

.footer-brand p{font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:17px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:9px}

.footer-links a{font-size:12px}

.footer-contact{display:grid;gap:7px;font-size:11px}

.footer-bottom{padding:18px 0;border-top:1px solid rgba(255,255,255,.1);font-size:10px}

@media(max-width:1000px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:block}
.detail-grid,.overview-grid,.enroll-wrap{grid-template-columns:1fr}
.preview-card{max-width:650px}
.learning-grid{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.container{width:min(100% - 28px,var(--container))}
.section{padding:66px 0}
.brand-copy small{display:none}
.header-inner{min-height:74px}
.brand-logo{width:43px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.detail-hero{padding:116px 0 58px}
.detail-hero h1{font-size:41px}
.preview-cover{min-height:340px}
.sticky-nav{top:74px}
.outcome-grid,.learning-grid,.related-grid,.footer-grid{grid-template-columns:1fr}
.module{grid-template-columns:47px 1fr}
.module-time{display:none}
.footer-grid{gap:30px}
}

:root{
            --primary: #6757D9;
            --primary-dark: #342A78;
            --primary-light: #F1EFFF;
            --secondary: #00B7A8;
            --secondary-dark: #087E76;
            --accent: #FFC95C;
            --navy: #17143D;
            --text: #44445B;
            --muted: #737388;
            --line: #E8E7F1;
            --white: #fff;
            --page: #FAFAFF;
            --shadow: 0 22px 60px rgba(31, 27, 82, .10);
            --shadow-sm: 0 12px 30px rgba(31, 27, 82, .08);
            --container: 1180px
        }

*{
            box-sizing: border-box
        }

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

body{
            margin: 0;
            color: var(--text);
            background: var(--page);
            font-family: "Inter", Arial, sans-serif;
            line-height: 1.7
        }

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

button{
            font: inherit;
            cursor: pointer
        }

h1,
        h2,
        h3,
        h4,
        p{
            margin-top: 0
        }

h1,
        h2,
        h3,
        h4{
            color: var(--navy);
            font-family: "Manrope", sans-serif;
            letter-spacing: -.025em
        }

.container{
            width: min(var(--container), calc(100% - 40px));
            margin: auto
        }

.section{
            padding: 92px 0
        }

.section-soft{
            background: linear-gradient(180deg, #F8F7FF, #fff)
        }

.section-head{
            max-width: 760px;
            margin: 0 auto 45px;
            text-align: center
        }

.section-head h2{
            margin: 13px 0 14px;
            font-size: clamp(31px, 4vw, 47px);
            line-height: 1.14
        }

.section-head p{
            color: var(--muted)
        }

.eyebrow{
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 7px 12px;
            color: var(--primary-dark);
            background: #fff;
            border: 1px solid rgba(103, 87, 217, .17);
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .1em;
            text-transform: uppercase
        }

.eyebrow:before{
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--secondary);
            box-shadow: 0 0 0 5px rgba(0, 183, 168, .12)
        }

.btn{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 48px;
            padding: 0 21px;
            border: 1px solid transparent;
            border-radius: 13px;
            font-weight: 800;
            transition: .2s
        }

.btn:hover{
            transform: translateY(-2px)
        }

.btn-primary{
            color: #fff;
            background: var(--primary);
            box-shadow: 0 12px 28px rgba(103, 87, 217, .27)
        }

.btn-outline{
            color: var(--primary-dark);
            background: #fff;
            border-color: #DCD9F0
        }

.btn-secondary{
            color: #fff;
            background: var(--secondary)
        }

.btn-sm{
            min-height: 42px;
            padding: 0 17px;
            font-size: 13px
        }

.site-header{
            position: fixed;
            inset: 0 0 auto;
            z-index: 100;
            background: rgba(255, 255, 255, .94);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(17px)
        }

.header-inner{
            min-height: 82px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px
        }

.brand{
            display: flex;
            align-items: center;
            gap: 12px
        }

.brand-logo{
            width: 49px;
            height: 49px
        }

.brand-copy strong{
            display: block;
            color: var(--navy);
            font: 800 19px/1.1 "Manrope"
        }

.brand-copy small{
            display: block;
            margin-top: 5px;
            color: var(--muted);
            font-size: 9px;
            font-weight: 800;
            letter-spacing: .1em;
            text-transform: uppercase
        }

.desktop-nav{
            display: flex;
            align-items: center;
            gap: 10px
        }

.nav-item{
            position: relative
        }

.nav-link{
            position: relative;
            padding: 12px 5px;
            color: #48475F;
            font-size: 13px;
            font-weight: 700
        }

.nav-link:after{
            content: "";
            position: absolute;
            left: 5px;
            right: 5px;
            bottom: 3px;
            height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            transform: scaleX(0);
            transition: .2s
        }

.nav-link:hover,
        .nav-link.active{
            color: var(--primary)
        }

.nav-link:hover:after,
        .nav-link.active:after{
            transform: scaleX(1)
        }

.chevron{
            font-size: 10px
        }

.dropdown{
            position: absolute;
            top: calc(100% + 12px);
            left: 0;
            width: 300px;
            padding: 10px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 18px;
            box-shadow: var(--shadow);
            opacity: 0;
            visibility: hidden;
            transform: translateY(8px);
            transition: .18s
        }

.nav-item:hover .dropdown{
            opacity: 1;
            visibility: visible;
            transform: none
        }

.dropdown.wide{
            width: 620px;
            display: grid;
            grid-template-columns: 1fr 1fr
        }

.drop-link{
            display: flex;
            gap: 11px;
            padding: 12px;
            border-radius: 12px
        }

.drop-link:hover{
            background: var(--primary-light)
        }

.drop-icon{
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            color: var(--primary);
            background: var(--primary-light);
            border-radius: 11px
        }

.drop-link strong{
            display: block;
            color: var(--navy);
            font-size: 13px
        }

.drop-link span span{
            display: block;
            color: var(--muted);
            font-size: 10px
        }

.header-action{
            display: flex;
            gap: 9px
        }

.menu-toggle{
            display: none;
            width: 45px;
            height: 45px;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: #fff
        }

.mobile-panel{
            display: none;
            position: fixed;
            inset: 82px 0 0;
            z-index: 99;
            padding: 20px;
            background: #fff
        }

.mobile-panel.open{
            display: grid;
            align-content: start
        }

.mobile-main{
            padding: 14px 4px;
            border-bottom: 1px solid var(--line);
            font-weight: 800
        }

.mobile-login{
            margin-top: 20px
        }

.detail-hero{
            position: relative;
            overflow: hidden;
            padding: 138px 0 76px;
            background: radial-gradient(circle at 12% 20%, rgba(0, 183, 168, .13), transparent 26%), radial-gradient(circle at 88% 20%, rgba(255, 201, 92, .18), transparent 24%), linear-gradient(135deg, #F5F2FF, #fff 52%, #EDFBF9)
        }

.detail-grid{
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 58px;
            align-items: center
        }

.breadcrumb{
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin-bottom: 18px;
            color: var(--muted);
            font-size: 11px
        }

.breadcrumb a{
            color: var(--primary);
            font-weight: 800
        }

.detail-hero h1{
            margin: 18px 0;
            font-size: clamp(40px, 5vw, 64px);
            line-height: 1.05
        }

.hero-copy{
            font-size: 17px;
            color: #626278
        }

.hero-meta{
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 23px
        }

.hero-meta span{
            padding: 8px 11px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 10px;
            font-size: 10px;
            font-weight: 800
        }

.hero-actions{
            display: flex;
            flex-wrap: wrap;
            gap: 11px;
            margin-top: 27px
        }

.preview-card{
            padding: 20px;
            background: rgba(255, 255, 255, .8);
            border: 1px solid #fff;
            border-radius: 32px;
            box-shadow: var(--shadow)
        }

.preview-cover{
            position: relative;
            min-height: 410px;
            padding: 28px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            color: #fff;
            border-radius: 24px;
            overflow: hidden
        }

.preview-cover:after{
            content: "";
            position: absolute;
            right: -60px;
            bottom: -70px;
            width: 260px;
            height: 260px;
            border: 42px solid rgba(255, 255, 255, .1);
            border-radius: 50%
        }

.preview-label{
            position: relative;
            z-index: 1;
            align-self: flex-start;
            padding: 7px 11px;
            background: rgba(255, 255, 255, .14);
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 999px;
            font-size: 10px;
            font-weight: 800
        }

.preview-cover h2{
            position: relative;
            z-index: 1;
            margin: 0;
            color: #fff;
            font-size: 31px;
            line-height: 1.2
        }

.preview-bottom{
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px
        }

.preview-stat{
            padding: 13px;
            background: rgba(255, 255, 255, .12);
            border: 1px solid rgba(255, 255, 255, .14);
            border-radius: 13px
        }

.preview-stat strong{
            display: block;
            font-size: 12px
        }

.preview-stat span{
            font-size: 9px;
            opacity: .72
        }

.sticky-nav{
            position: sticky;
            top: 82px;
            z-index: 40;
            background: #fff;
            border-bottom: 1px solid var(--line);
            box-shadow: 0 8px 22px rgba(31, 27, 82, .04)
        }

.sticky-links{
            display: flex;
            gap: 25px;
            overflow: auto
        }

.sticky-links a{
            padding: 17px 0;
            color: var(--muted);
            font-size: 12px;
            font-weight: 800;
            white-space: nowrap
        }

.sticky-links a:hover{
            color: var(--primary)
        }

.overview-grid{
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 38px
        }

.content-card{
            padding: 30px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 22px;
            box-shadow: var(--shadow-sm)
        }

.content-card h2{
            font-size: 29px
        }

.content-card p{
            color: var(--muted)
        }

.outcome-grid{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 13px;
            margin-top: 24px
        }

.outcome-card{
            padding: 18px;
            background: #F9F8FF;
            border: 1px solid var(--line);
            border-radius: 15px
        }

.outcome-card i{
            width: 35px;
            height: 35px;
            display: grid;
            place-items: center;
            font-style: normal;
            color: var(--secondary-dark);
            background: #E9FAF7;
            border-radius: 10px
        }

.outcome-card strong{
            display: block;
            margin-top: 11px;
            color: var(--navy);
            font-size: 12px
        }

.side-info{
            display: grid;
            gap: 13px
        }

.info-row{
            display: flex;
            gap: 13px;
            padding: 16px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 15px
        }

.info-row i{
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            font-style: normal;
            color: var(--primary);
            background: var(--primary-light);
            border-radius: 11px
        }

.info-row strong{
            display: block;
            color: var(--navy);
            font-size: 12px
        }

.info-row span{
            font-size: 10px;
            color: var(--muted)
        }

.module-list{
            display: grid;
            gap: 13px;
            max-width: 950px;
            margin: auto
        }

.module{
            display: grid;
            grid-template-columns: 55px 1fr auto;
            gap: 16px;
            align-items: center;
            padding: 19px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 17px;
            box-shadow: var(--shadow-sm)
        }

.module-no{
            width: 47px;
            height: 47px;
            display: grid;
            place-items: center;
            color: #fff;
            background: var(--primary);
            border-radius: 13px;
            font-weight: 900
        }

.module h3{
            margin: 0 0 4px;
            font-size: 16px
        }

.module p{
            margin: 0;
            color: var(--muted);
            font-size: 11px
        }

.module-time{
            padding: 6px 9px;
            color: var(--primary-dark);
            background: var(--primary-light);
            border-radius: 8px;
            font-size: 9px;
            font-weight: 800
        }

.learning-grid{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 17px
        }

.learning-card{
            padding: 23px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 18px;
            box-shadow: var(--shadow-sm)
        }

.learning-card i{
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            font-style: normal;
            color: var(--primary);
            background: var(--primary-light);
            border-radius: 12px
        }

.learning-card h3{
            margin: 15px 0 7px;
            font-size: 16px
        }

.learning-card p{
            margin: 0;
            color: var(--muted);
            font-size: 10px
        }

.enroll-wrap{
            display: grid;
            grid-template-columns: 1fr .8fr;
            gap: 24px
        }

.enroll-card{
            padding: 31px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 23px;
            box-shadow: var(--shadow-sm)
        }

.enroll-card.featured{
            color: #fff;
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
            border: 0
        }

.enroll-card.featured h2,
        .enroll-card.featured h3{
            color: #fff
        }

.enroll-card.featured p{
            color: rgba(255, 255, 255, .7)
        }

.check-list{
            display: grid;
            gap: 9px;
            margin: 20px 0;
            padding: 0;
            list-style: none
        }

.check-list li{
            display: flex;
            gap: 9px;
            font-size: 12px
        }

.check-list li:before{
            content: "✓";
            color: var(--secondary);
            font-weight: 900
        }

.faq-wrap{
            max-width: 880px;
            margin: auto
        }

.faq-item{
            margin-bottom: 10px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 16px;
            overflow: hidden
        }

.faq-q{
            width: 100%;
            display: flex;
            justify-content: space-between;
            gap: 18px;
            padding: 19px 21px;
            border: 0;
            background: #fff;
            color: var(--navy);
            font-weight: 800;
            text-align: left
        }

.faq-a{
            display: none;
            padding: 0 21px 20px;
            color: var(--muted);
            font-size: 12px
        }

.faq-item.open .faq-a{
            display: block
        }

.faq-item.open .faq-plus{
            transform: rotate(45deg)
        }

.related-grid{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px
        }

.related{
            overflow: hidden;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 19px;
            box-shadow: var(--shadow-sm)
        }

.related-cover{
            min-height: 135px;
            padding: 18px;
            display: flex;
            align-items: end
        }

.related-cover h3{
            margin: 0;
            color: #fff;
            font-size: 17px
        }

.related-body{
            padding: 18px
        }

.related-body p{
            color: var(--muted);
            font-size: 10px
        }

.related-body a{
            color: var(--primary);
            font-size: 11px;
            font-weight: 800
        }

.site-footer{
            color: rgba(255, 255, 255, .72);
            background: #141132
        }

.footer-main{
            padding: 65px 0 44px
        }

.footer-grid{
            display: grid;
            grid-template-columns: 1.45fr repeat(3, 1fr);
            gap: 44px
        }

.footer-brand p{
            font-size: 12px
        }

.footer-brand .brand-copy strong,
        .footer-title{
            color: #fff
        }

.footer-title{
            margin-bottom: 17px;
            font: 800 14px "Manrope"
        }

.footer-links{
            display: grid;
            gap: 9px
        }

.footer-links a{
            font-size: 12px
        }

.footer-contact{
            display: grid;
            gap: 7px;
            font-size: 11px
        }

.footer-bottom{
            padding: 18px 0;
            border-top: 1px solid rgba(255, 255, 255, .1);
            font-size: 10px
        }

@media(max-width:1000px){
.desktop-nav,
            .header-action .btn-outline{
                display: none
            }
.menu-toggle{
                display: block
            }
.detail-grid,
            .overview-grid,
            .enroll-wrap{
                grid-template-columns: 1fr
            }
.preview-card{
                max-width: 650px
            }
.learning-grid{
                grid-template-columns: repeat(2, 1fr)
            }
.footer-grid{
                grid-template-columns: repeat(2, 1fr)
            }
}

@media(max-width:700px){
.container{
                width: min(100% - 28px, var(--container))
            }
.section{
                padding: 66px 0
            }
.brand-copy small{
                display: none
            }
.header-inner{
                min-height: 74px
            }
.brand-logo{
                width: 43px
            }
.mobile-panel{
                inset: 74px 0 0
            }
.header-action .btn-primary{
                display: none
            }
.detail-hero{
                padding: 116px 0 58px
            }
.detail-hero h1{
                font-size: 41px
            }
.preview-cover{
                min-height: 340px
            }
.sticky-nav{
                top: 74px
            }
.outcome-grid,
            .learning-grid,
            .related-grid,
            .footer-grid{
                grid-template-columns: 1fr
            }
.module{
                grid-template-columns: 47px 1fr
            }
.module-time{
                display: none
            }
.footer-grid{
                gap: 30px
            }
}

:root{
            --primary: #6757D9;
            --primary-dark: #342A78;
            --primary-light: #F1EFFF;
            --secondary: #00B7A8;
            --secondary-dark: #087E76;
            --accent: #FFC95C;
            --navy: #17143D;
            --text: #44445B;
            --muted: #737388;
            --line: #E8E7F1;
            --white: #fff;
            --page: #FAFAFF;
            --shadow: 0 22px 60px rgba(31, 27, 82, .10);
            --shadow-sm: 0 12px 30px rgba(31, 27, 82, .08);
            --container: 1180px
        }

*{
            box-sizing: border-box
        }

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

body{
            margin: 0;
            color: var(--text);
            background: var(--page);
            font-family: "Inter", Arial, sans-serif;
            line-height: 1.7
        }

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

button{
            font: inherit;
            cursor: pointer
        }

h1,
        h2,
        h3,
        h4,
        p{
            margin-top: 0
        }

h1,
        h2,
        h3,
        h4{
            color: var(--navy);
            font-family: "Manrope", sans-serif;
            letter-spacing: -.025em
        }

.container{
            width: min(var(--container), calc(100% - 40px));
            margin: auto
        }

.section{
            padding: 92px 0
        }

.section-soft{
            background: linear-gradient(180deg, #F8F7FF, #fff)
        }

.section-head{
            max-width: 760px;
            margin: 0 auto 45px;
            text-align: center
        }

.section-head h2{
            margin: 13px 0 14px;
            font-size: clamp(31px, 4vw, 47px);
            line-height: 1.14
        }

.section-head p{
            color: var(--muted)
        }

.eyebrow{
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 7px 12px;
            color: var(--primary-dark);
            background: #fff;
            border: 1px solid rgba(103, 87, 217, .17);
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .1em;
            text-transform: uppercase
        }

.eyebrow:before{
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--secondary);
            box-shadow: 0 0 0 5px rgba(0, 183, 168, .12)
        }

.btn{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 48px;
            padding: 0 21px;
            border: 1px solid transparent;
            border-radius: 13px;
            font-weight: 800;
            transition: .2s
        }

.btn:hover{
            transform: translateY(-2px)
        }

.btn-primary{
            color: #fff;
            background: var(--primary);
            box-shadow: 0 12px 28px rgba(103, 87, 217, .27)
        }

.btn-outline{
            color: var(--primary-dark);
            background: #fff;
            border-color: #DCD9F0
        }

.btn-secondary{
            color: #fff;
            background: var(--secondary)
        }

.btn-sm{
            min-height: 42px;
            padding: 0 17px;
            font-size: 13px
        }

.site-header{
            position: fixed;
            inset: 0 0 auto;
            z-index: 100;
            background: rgba(255, 255, 255, .94);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(17px)
        }

.header-inner{
            min-height: 82px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px
        }

.brand{
            display: flex;
            align-items: center;
            gap: 12px
        }

.brand-logo{
            width: 49px;
            height: 49px
        }

.brand-copy strong{
            display: block;
            color: var(--navy);
            font: 800 19px/1.1 "Manrope"
        }

.brand-copy small{
            display: block;
            margin-top: 5px;
            color: var(--muted);
            font-size: 9px;
            font-weight: 800;
            letter-spacing: .1em;
            text-transform: uppercase
        }

.desktop-nav{
            display: flex;
            align-items: center;
            gap: 10px
        }

.nav-item{
            position: relative
        }

.nav-link{
            position: relative;
            padding: 12px 5px;
            color: #48475F;
            font-size: 13px;
            font-weight: 700
        }

.nav-link:after{
            content: "";
            position: absolute;
            left: 5px;
            right: 5px;
            bottom: 3px;
            height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            transform: scaleX(0);
            transition: .2s
        }

.nav-link:hover,
        .nav-link.active{
            color: var(--primary)
        }

.nav-link:hover:after,
        .nav-link.active:after{
            transform: scaleX(1)
        }

.chevron{
            font-size: 10px
        }

.dropdown{
            position: absolute;
            top: calc(100% + 12px);
            left: 0;
            width: 300px;
            padding: 10px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 18px;
            box-shadow: var(--shadow);
            opacity: 0;
            visibility: hidden;
            transform: translateY(8px);
            transition: .18s
        }

.nav-item:hover .dropdown{
            opacity: 1;
            visibility: visible;
            transform: none
        }

.dropdown.wide{
            width: 620px;
            display: grid;
            grid-template-columns: 1fr 1fr
        }

.drop-link{
            display: flex;
            gap: 11px;
            padding: 12px;
            border-radius: 12px
        }

.drop-link:hover{
            background: var(--primary-light)
        }

.drop-icon{
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            color: var(--primary);
            background: var(--primary-light);
            border-radius: 11px
        }

.drop-link strong{
            display: block;
            color: var(--navy);
            font-size: 13px
        }

.drop-link span span{
            display: block;
            color: var(--muted);
            font-size: 10px
        }

.header-action{
            display: flex;
            gap: 9px
        }

.menu-toggle{
            display: none;
            width: 45px;
            height: 45px;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: #fff
        }

.mobile-panel{
            display: none;
            position: fixed;
            inset: 82px 0 0;
            z-index: 99;
            padding: 20px;
            background: #fff
        }

.mobile-panel.open{
            display: grid;
            align-content: start
        }

.mobile-main{
            padding: 14px 4px;
            border-bottom: 1px solid var(--line);
            font-weight: 800
        }

.mobile-login{
            margin-top: 20px
        }

.detail-hero{
            position: relative;
            overflow: hidden;
            padding: 138px 0 76px;
            background: radial-gradient(circle at 12% 20%, rgba(0, 183, 168, .13), transparent 26%), radial-gradient(circle at 88% 20%, rgba(255, 201, 92, .18), transparent 24%), linear-gradient(135deg, #F5F2FF, #fff 52%, #EDFBF9)
        }

.detail-grid{
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 58px;
            align-items: center
        }

.breadcrumb{
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin-bottom: 18px;
            color: var(--muted);
            font-size: 11px
        }

.breadcrumb a{
            color: var(--primary);
            font-weight: 800
        }

.detail-hero h1{
            margin: 18px 0;
            font-size: clamp(40px, 5vw, 64px);
            line-height: 1.05
        }

.hero-copy{
            font-size: 17px;
            color: #626278
        }

.hero-meta{
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 23px
        }

.hero-meta span{
            padding: 8px 11px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 10px;
            font-size: 10px;
            font-weight: 800
        }

.hero-actions{
            display: flex;
            flex-wrap: wrap;
            gap: 11px;
            margin-top: 27px
        }

.preview-card{
            padding: 20px;
            background: rgba(255, 255, 255, .8);
            border: 1px solid #fff;
            border-radius: 32px;
            box-shadow: var(--shadow)
        }

.preview-cover{
            position: relative;
            min-height: 410px;
            padding: 28px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            color: #fff;
            border-radius: 24px;
            overflow: hidden
        }

.preview-cover:after{
            content: "";
            position: absolute;
            right: -60px;
            bottom: -70px;
            width: 260px;
            height: 260px;
            border: 42px solid rgba(255, 255, 255, .1);
            border-radius: 50%
        }

.preview-label{
            position: relative;
            z-index: 1;
            align-self: flex-start;
            padding: 7px 11px;
            background: rgba(255, 255, 255, .14);
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 999px;
            font-size: 10px;
            font-weight: 800
        }

.preview-cover h2{
            position: relative;
            z-index: 1;
            margin: 0;
            color: #fff;
            font-size: 31px;
            line-height: 1.2
        }

.preview-bottom{
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px
        }

.preview-stat{
            padding: 13px;
            background: rgba(255, 255, 255, .12);
            border: 1px solid rgba(255, 255, 255, .14);
            border-radius: 13px
        }

.preview-stat strong{
            display: block;
            font-size: 12px
        }

.preview-stat span{
            font-size: 9px;
            opacity: .72
        }

.sticky-nav{
            position: sticky;
            top: 82px;
            z-index: 40;
            background: #fff;
            border-bottom: 1px solid var(--line);
            box-shadow: 0 8px 22px rgba(31, 27, 82, .04)
        }

.sticky-links{
            display: flex;
            gap: 25px;
            overflow: auto
        }

.sticky-links a{
            padding: 17px 0;
            color: var(--muted);
            font-size: 12px;
            font-weight: 800;
            white-space: nowrap
        }

.sticky-links a:hover{
            color: var(--primary)
        }

.overview-grid{
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 38px
        }

.content-card{
            padding: 30px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 22px;
            box-shadow: var(--shadow-sm)
        }

.content-card h2{
            font-size: 29px
        }

.content-card p{
            color: var(--muted)
        }

.outcome-grid{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 13px;
            margin-top: 24px
        }

.outcome-card{
            padding: 18px;
            background: #F9F8FF;
            border: 1px solid var(--line);
            border-radius: 15px
        }

.outcome-card i{
            width: 35px;
            height: 35px;
            display: grid;
            place-items: center;
            font-style: normal;
            color: var(--secondary-dark);
            background: #E9FAF7;
            border-radius: 10px
        }

.outcome-card strong{
            display: block;
            margin-top: 11px;
            color: var(--navy);
            font-size: 12px
        }

.side-info{
            display: grid;
            gap: 13px
        }

.info-row{
            display: flex;
            gap: 13px;
            padding: 16px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 15px
        }

.info-row i{
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            font-style: normal;
            color: var(--primary);
            background: var(--primary-light);
            border-radius: 11px
        }

.info-row strong{
            display: block;
            color: var(--navy);
            font-size: 12px
        }

.info-row span{
            font-size: 10px;
            color: var(--muted)
        }

.module-list{
            display: grid;
            gap: 13px;
            max-width: 950px;
            margin: auto
        }

.module{
            display: grid;
            grid-template-columns: 55px 1fr auto;
            gap: 16px;
            align-items: center;
            padding: 19px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 17px;
            box-shadow: var(--shadow-sm)
        }

.module-no{
            width: 47px;
            height: 47px;
            display: grid;
            place-items: center;
            color: #fff;
            background: var(--primary);
            border-radius: 13px;
            font-weight: 900
        }

.module h3{
            margin: 0 0 4px;
            font-size: 16px
        }

.module p{
            margin: 0;
            color: var(--muted);
            font-size: 11px
        }

.module-time{
            padding: 6px 9px;
            color: var(--primary-dark);
            background: var(--primary-light);
            border-radius: 8px;
            font-size: 9px;
            font-weight: 800
        }

.learning-grid{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 17px
        }

.learning-card{
            padding: 23px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 18px;
            box-shadow: var(--shadow-sm)
        }

.learning-card i{
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            font-style: normal;
            color: var(--primary);
            background: var(--primary-light);
            border-radius: 12px
        }

.learning-card h3{
            margin: 15px 0 7px;
            font-size: 16px
        }

.learning-card p{
            margin: 0;
            color: var(--muted);
            font-size: 10px
        }

.enroll-wrap{
            display: grid;
            grid-template-columns: 1fr .8fr;
            gap: 24px
        }

.enroll-card{
            padding: 31px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 23px;
            box-shadow: var(--shadow-sm)
        }

.enroll-card.featured{
            color: #fff;
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
            border: 0
        }

.enroll-card.featured h2,
        .enroll-card.featured h3{
            color: #fff
        }

.enroll-card.featured p{
            color: rgba(255, 255, 255, .7)
        }

.check-list{
            display: grid;
            gap: 9px;
            margin: 20px 0;
            padding: 0;
            list-style: none
        }

.check-list li{
            display: flex;
            gap: 9px;
            font-size: 12px
        }

.check-list li:before{
            content: "✓";
            color: var(--secondary);
            font-weight: 900
        }

.faq-wrap{
            max-width: 880px;
            margin: auto
        }

.faq-item{
            margin-bottom: 10px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 16px;
            overflow: hidden
        }

.faq-q{
            width: 100%;
            display: flex;
            justify-content: space-between;
            gap: 18px;
            padding: 19px 21px;
            border: 0;
            background: #fff;
            color: var(--navy);
            font-weight: 800;
            text-align: left
        }

.faq-a{
            display: none;
            padding: 0 21px 20px;
            color: var(--muted);
            font-size: 12px
        }

.faq-item.open .faq-a{
            display: block
        }

.faq-item.open .faq-plus{
            transform: rotate(45deg)
        }

.related-grid{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px
        }

.related{
            overflow: hidden;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 19px;
            box-shadow: var(--shadow-sm)
        }

.related-cover{
            min-height: 135px;
            padding: 18px;
            display: flex;
            align-items: end
        }

.related-cover h3{
            margin: 0;
            color: #fff;
            font-size: 17px
        }

.related-body{
            padding: 18px
        }

.related-body p{
            color: var(--muted);
            font-size: 10px
        }

.related-body a{
            color: var(--primary);
            font-size: 11px;
            font-weight: 800
        }

.site-footer{
            color: rgba(255, 255, 255, .72);
            background: #141132
        }

.footer-main{
            padding: 65px 0 44px
        }

.footer-grid{
            display: grid;
            grid-template-columns: 1.45fr repeat(3, 1fr);
            gap: 44px
        }

.footer-brand p{
            font-size: 12px
        }

.footer-brand .brand-copy strong,
        .footer-title{
            color: #fff
        }

.footer-title{
            margin-bottom: 17px;
            font: 800 14px "Manrope"
        }

.footer-links{
            display: grid;
            gap: 9px
        }

.footer-links a{
            font-size: 12px
        }

.footer-contact{
            display: grid;
            gap: 7px;
            font-size: 11px
        }

.footer-bottom{
            padding: 18px 0;
            border-top: 1px solid rgba(255, 255, 255, .1);
            font-size: 10px
        }

@media(max-width:1000px){
.desktop-nav,
            .header-action .btn-outline{
                display: none
            }
.menu-toggle{
                display: block
            }
.detail-grid,
            .overview-grid,
            .enroll-wrap{
                grid-template-columns: 1fr
            }
.preview-card{
                max-width: 650px
            }
.learning-grid{
                grid-template-columns: repeat(2, 1fr)
            }
.footer-grid{
                grid-template-columns: repeat(2, 1fr)
            }
}

@media(max-width:700px){
.container{
                width: min(100% - 28px, var(--container))
            }
.section{
                padding: 66px 0
            }
.brand-copy small{
                display: none
            }
.header-inner{
                min-height: 74px
            }
.brand-logo{
                width: 43px
            }
.mobile-panel{
                inset: 74px 0 0
            }
.header-action .btn-primary{
                display: none
            }
.detail-hero{
                padding: 116px 0 58px
            }
.detail-hero h1{
                font-size: 41px
            }
.preview-cover{
                min-height: 340px
            }
.sticky-nav{
                top: 74px
            }
.outcome-grid,
            .learning-grid,
            .related-grid,
            .footer-grid{
                grid-template-columns: 1fr
            }
.module{
                grid-template-columns: 47px 1fr
            }
.module-time{
                display: none
            }
.footer-grid{
                gap: 30px
            }
}

:root{
            --primary: #6757D9;
            --primary-dark: #342A78;
            --primary-light: #F1EFFF;
            --secondary: #00B7A8;
            --secondary-dark: #087E76;
            --accent: #FFC95C;
            --navy: #17143D;
            --text: #44445B;
            --muted: #737388;
            --line: #E8E7F1;
            --white: #fff;
            --page: #FAFAFF;
            --shadow: 0 22px 60px rgba(31, 27, 82, .10);
            --shadow-sm: 0 12px 30px rgba(31, 27, 82, .08);
            --container: 1180px
        }

*{
            box-sizing: border-box
        }

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

body{
            margin: 0;
            color: var(--text);
            background: var(--page);
            font-family: "Inter", Arial, sans-serif;
            line-height: 1.7
        }

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

button{
            font: inherit;
            cursor: pointer
        }

h1,
        h2,
        h3,
        h4,
        p{
            margin-top: 0
        }

h1,
        h2,
        h3,
        h4{
            color: var(--navy);
            font-family: "Manrope", sans-serif;
            letter-spacing: -.025em
        }

.container{
            width: min(var(--container), calc(100% - 40px));
            margin: auto
        }

.section{
            padding: 92px 0
        }

.section-soft{
            background: linear-gradient(180deg, #F8F7FF, #fff)
        }

.section-head{
            max-width: 760px;
            margin: 0 auto 45px;
            text-align: center
        }

.section-head h2{
            margin: 13px 0 14px;
            font-size: clamp(31px, 4vw, 47px);
            line-height: 1.14
        }

.section-head p{
            color: var(--muted)
        }

.eyebrow{
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 7px 12px;
            color: var(--primary-dark);
            background: #fff;
            border: 1px solid rgba(103, 87, 217, .17);
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .1em;
            text-transform: uppercase
        }

.eyebrow:before{
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--secondary);
            box-shadow: 0 0 0 5px rgba(0, 183, 168, .12)
        }

.btn{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 48px;
            padding: 0 21px;
            border: 1px solid transparent;
            border-radius: 13px;
            font-weight: 800;
            transition: .2s
        }

.btn:hover{
            transform: translateY(-2px)
        }

.btn-primary{
            color: #fff;
            background: var(--primary);
            box-shadow: 0 12px 28px rgba(103, 87, 217, .27)
        }

.btn-outline{
            color: var(--primary-dark);
            background: #fff;
            border-color: #DCD9F0
        }

.btn-secondary{
            color: #fff;
            background: var(--secondary)
        }

.btn-sm{
            min-height: 42px;
            padding: 0 17px;
            font-size: 13px
        }

.site-header{
            position: fixed;
            inset: 0 0 auto;
            z-index: 100;
            background: rgba(255, 255, 255, .94);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(17px)
        }

.header-inner{
            min-height: 82px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px
        }

.brand{
            display: flex;
            align-items: center;
            gap: 12px
        }

.brand-logo{
            width: 49px;
            height: 49px
        }

.brand-copy strong{
            display: block;
            color: var(--navy);
            font: 800 19px/1.1 "Manrope"
        }

.brand-copy small{
            display: block;
            margin-top: 5px;
            color: var(--muted);
            font-size: 9px;
            font-weight: 800;
            letter-spacing: .1em;
            text-transform: uppercase
        }

.desktop-nav{
            display: flex;
            align-items: center;
            gap: 10px
        }

.nav-item{
            position: relative
        }

.nav-link{
            position: relative;
            padding: 12px 5px;
            color: #48475F;
            font-size: 13px;
            font-weight: 700
        }

.nav-link:after{
            content: "";
            position: absolute;
            left: 5px;
            right: 5px;
            bottom: 3px;
            height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            transform: scaleX(0);
            transition: .2s
        }

.nav-link:hover,
        .nav-link.active{
            color: var(--primary)
        }

.nav-link:hover:after,
        .nav-link.active:after{
            transform: scaleX(1)
        }

.chevron{
            font-size: 10px
        }

.dropdown{
            position: absolute;
            top: calc(100% + 12px);
            left: 0;
            width: 300px;
            padding: 10px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 18px;
            box-shadow: var(--shadow);
            opacity: 0;
            visibility: hidden;
            transform: translateY(8px);
            transition: .18s
        }

.nav-item:hover .dropdown{
            opacity: 1;
            visibility: visible;
            transform: none
        }

.dropdown.wide{
            width: 620px;
            display: grid;
            grid-template-columns: 1fr 1fr
        }

.drop-link{
            display: flex;
            gap: 11px;
            padding: 12px;
            border-radius: 12px
        }

.drop-link:hover{
            background: var(--primary-light)
        }

.drop-icon{
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            color: var(--primary);
            background: var(--primary-light);
            border-radius: 11px
        }

.drop-link strong{
            display: block;
            color: var(--navy);
            font-size: 13px
        }

.drop-link span span{
            display: block;
            color: var(--muted);
            font-size: 10px
        }

.header-action{
            display: flex;
            gap: 9px
        }

.menu-toggle{
            display: none;
            width: 45px;
            height: 45px;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: #fff
        }

.mobile-panel{
            display: none;
            position: fixed;
            inset: 82px 0 0;
            z-index: 99;
            padding: 20px;
            background: #fff
        }

.mobile-panel.open{
            display: grid;
            align-content: start
        }

.mobile-main{
            padding: 14px 4px;
            border-bottom: 1px solid var(--line);
            font-weight: 800
        }

.mobile-login{
            margin-top: 20px
        }

.detail-hero{
            position: relative;
            overflow: hidden;
            padding: 138px 0 76px;
            background: radial-gradient(circle at 12% 20%, rgba(0, 183, 168, .13), transparent 26%), radial-gradient(circle at 88% 20%, rgba(255, 201, 92, .18), transparent 24%), linear-gradient(135deg, #F5F2FF, #fff 52%, #EDFBF9)
        }

.detail-grid{
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 58px;
            align-items: center
        }

.breadcrumb{
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin-bottom: 18px;
            color: var(--muted);
            font-size: 11px
        }

.breadcrumb a{
            color: var(--primary);
            font-weight: 800
        }

.detail-hero h1{
            margin: 18px 0;
            font-size: clamp(40px, 5vw, 64px);
            line-height: 1.05
        }

.hero-copy{
            font-size: 17px;
            color: #626278
        }

.hero-meta{
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 23px
        }

.hero-meta span{
            padding: 8px 11px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 10px;
            font-size: 10px;
            font-weight: 800
        }

.hero-actions{
            display: flex;
            flex-wrap: wrap;
            gap: 11px;
            margin-top: 27px
        }

.preview-card{
            padding: 20px;
            background: rgba(255, 255, 255, .8);
            border: 1px solid #fff;
            border-radius: 32px;
            box-shadow: var(--shadow)
        }

.preview-cover{
            position: relative;
            min-height: 410px;
            padding: 28px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            color: #fff;
            border-radius: 24px;
            overflow: hidden
        }

.preview-cover:after{
            content: "";
            position: absolute;
            right: -60px;
            bottom: -70px;
            width: 260px;
            height: 260px;
            border: 42px solid rgba(255, 255, 255, .1);
            border-radius: 50%
        }

.preview-label{
            position: relative;
            z-index: 1;
            align-self: flex-start;
            padding: 7px 11px;
            background: rgba(255, 255, 255, .14);
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 999px;
            font-size: 10px;
            font-weight: 800
        }

.preview-cover h2{
            position: relative;
            z-index: 1;
            margin: 0;
            color: #fff;
            font-size: 31px;
            line-height: 1.2
        }

.preview-bottom{
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px
        }

.preview-stat{
            padding: 13px;
            background: rgba(255, 255, 255, .12);
            border: 1px solid rgba(255, 255, 255, .14);
            border-radius: 13px
        }

.preview-stat strong{
            display: block;
            font-size: 12px
        }

.preview-stat span{
            font-size: 9px;
            opacity: .72
        }

.sticky-nav{
            position: sticky;
            top: 82px;
            z-index: 40;
            background: #fff;
            border-bottom: 1px solid var(--line);
            box-shadow: 0 8px 22px rgba(31, 27, 82, .04)
        }

.sticky-links{
            display: flex;
            gap: 25px;
            overflow: auto
        }

.sticky-links a{
            padding: 17px 0;
            color: var(--muted);
            font-size: 12px;
            font-weight: 800;
            white-space: nowrap
        }

.sticky-links a:hover{
            color: var(--primary)
        }

.overview-grid{
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 38px
        }

.content-card{
            padding: 30px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 22px;
            box-shadow: var(--shadow-sm)
        }

.content-card h2{
            font-size: 29px
        }

.content-card p{
            color: var(--muted)
        }

.outcome-grid{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 13px;
            margin-top: 24px
        }

.outcome-card{
            padding: 18px;
            background: #F9F8FF;
            border: 1px solid var(--line);
            border-radius: 15px
        }

.outcome-card i{
            width: 35px;
            height: 35px;
            display: grid;
            place-items: center;
            font-style: normal;
            color: var(--secondary-dark);
            background: #E9FAF7;
            border-radius: 10px
        }

.outcome-card strong{
            display: block;
            margin-top: 11px;
            color: var(--navy);
            font-size: 12px
        }

.side-info{
            display: grid;
            gap: 13px
        }

.info-row{
            display: flex;
            gap: 13px;
            padding: 16px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 15px
        }

.info-row i{
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            font-style: normal;
            color: var(--primary);
            background: var(--primary-light);
            border-radius: 11px
        }

.info-row strong{
            display: block;
            color: var(--navy);
            font-size: 12px
        }

.info-row span{
            font-size: 10px;
            color: var(--muted)
        }

.module-list{
            display: grid;
            gap: 13px;
            max-width: 950px;
            margin: auto
        }

.module{
            display: grid;
            grid-template-columns: 55px 1fr auto;
            gap: 16px;
            align-items: center;
            padding: 19px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 17px;
            box-shadow: var(--shadow-sm)
        }

.module-no{
            width: 47px;
            height: 47px;
            display: grid;
            place-items: center;
            color: #fff;
            background: var(--primary);
            border-radius: 13px;
            font-weight: 900
        }

.module h3{
            margin: 0 0 4px;
            font-size: 16px
        }

.module p{
            margin: 0;
            color: var(--muted);
            font-size: 11px
        }

.module-time{
            padding: 6px 9px;
            color: var(--primary-dark);
            background: var(--primary-light);
            border-radius: 8px;
            font-size: 9px;
            font-weight: 800
        }

.learning-grid{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 17px
        }

.learning-card{
            padding: 23px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 18px;
            box-shadow: var(--shadow-sm)
        }

.learning-card i{
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            font-style: normal;
            color: var(--primary);
            background: var(--primary-light);
            border-radius: 12px
        }

.learning-card h3{
            margin: 15px 0 7px;
            font-size: 16px
        }

.learning-card p{
            margin: 0;
            color: var(--muted);
            font-size: 10px
        }

.enroll-wrap{
            display: grid;
            grid-template-columns: 1fr .8fr;
            gap: 24px
        }

.enroll-card{
            padding: 31px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 23px;
            box-shadow: var(--shadow-sm)
        }

.enroll-card.featured{
            color: #fff;
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
            border: 0
        }

.enroll-card.featured h2,
        .enroll-card.featured h3{
            color: #fff
        }

.enroll-card.featured p{
            color: rgba(255, 255, 255, .7)
        }

.check-list{
            display: grid;
            gap: 9px;
            margin: 20px 0;
            padding: 0;
            list-style: none
        }

.check-list li{
            display: flex;
            gap: 9px;
            font-size: 12px
        }

.check-list li:before{
            content: "✓";
            color: var(--secondary);
            font-weight: 900
        }

.faq-wrap{
            max-width: 880px;
            margin: auto
        }

.faq-item{
            margin-bottom: 10px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 16px;
            overflow: hidden
        }

.faq-q{
            width: 100%;
            display: flex;
            justify-content: space-between;
            gap: 18px;
            padding: 19px 21px;
            border: 0;
            background: #fff;
            color: var(--navy);
            font-weight: 800;
            text-align: left
        }

.faq-a{
            display: none;
            padding: 0 21px 20px;
            color: var(--muted);
            font-size: 12px
        }

.faq-item.open .faq-a{
            display: block
        }

.faq-item.open .faq-plus{
            transform: rotate(45deg)
        }

.related-grid{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px
        }

.related{
            overflow: hidden;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 19px;
            box-shadow: var(--shadow-sm)
        }

.related-cover{
            min-height: 135px;
            padding: 18px;
            display: flex;
            align-items: end
        }

.related-cover h3{
            margin: 0;
            color: #fff;
            font-size: 17px
        }

.related-body{
            padding: 18px
        }

.related-body p{
            color: var(--muted);
            font-size: 10px
        }

.related-body a{
            color: var(--primary);
            font-size: 11px;
            font-weight: 800
        }

.site-footer{
            color: rgba(255, 255, 255, .72);
            background: #141132
        }

.footer-main{
            padding: 65px 0 44px
        }

.footer-grid{
            display: grid;
            grid-template-columns: 1.45fr repeat(3, 1fr);
            gap: 44px
        }

.footer-brand p{
            font-size: 12px
        }

.footer-brand .brand-copy strong,
        .footer-title{
            color: #fff
        }

.footer-title{
            margin-bottom: 17px;
            font: 800 14px "Manrope"
        }

.footer-links{
            display: grid;
            gap: 9px
        }

.footer-links a{
            font-size: 12px
        }

.footer-contact{
            display: grid;
            gap: 7px;
            font-size: 11px
        }

.footer-bottom{
            padding: 18px 0;
            border-top: 1px solid rgba(255, 255, 255, .1);
            font-size: 10px
        }

@media(max-width:1000px){
.desktop-nav,
            .header-action .btn-outline{
                display: none
            }
.menu-toggle{
                display: block
            }
.detail-grid,
            .overview-grid,
            .enroll-wrap{
                grid-template-columns: 1fr
            }
.preview-card{
                max-width: 650px
            }
.learning-grid{
                grid-template-columns: repeat(2, 1fr)
            }
.footer-grid{
                grid-template-columns: repeat(2, 1fr)
            }
}

@media(max-width:700px){
.container{
                width: min(100% - 28px, var(--container))
            }
.section{
                padding: 66px 0
            }
.brand-copy small{
                display: none
            }
.header-inner{
                min-height: 74px
            }
.brand-logo{
                width: 43px
            }
.mobile-panel{
                inset: 74px 0 0
            }
.header-action .btn-primary{
                display: none
            }
.detail-hero{
                padding: 116px 0 58px
            }
.detail-hero h1{
                font-size: 41px
            }
.preview-cover{
                min-height: 340px
            }
.sticky-nav{
                top: 74px
            }
.outcome-grid,
            .learning-grid,
            .related-grid,
            .footer-grid{
                grid-template-columns: 1fr
            }
.module{
                grid-template-columns: 47px 1fr
            }
.module-time{
                display: none
            }
.footer-grid{
                gap: 30px
            }
}

:root{--primary:#6757D9;--primary-dark:#342A78;--primary-light:#F1EFFF;--secondary:#00B7A8;--secondary-dark:#087E76;--accent:#FFC95C;--navy:#17143D;--text:#44445B;--muted:#737388;--line:#E8E7F1;--white:#fff;--page:#FAFAFF;--shadow:0 22px 60px rgba(31,27,82,.10);--shadow-sm:0 12px 30px rgba(31,27,82,.08);--container:1180px}

*{box-sizing:border-box}

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

body{margin:0;color:var(--text);background:var(--page);font-family:"Inter",Arial,sans-serif;line-height:1.7}

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

button{font:inherit;cursor:pointer}

h1,h2,h3,h4,p{margin-top:0}

h1,h2,h3,h4{color:var(--navy);font-family:"Manrope",sans-serif;letter-spacing:-.025em}

.container{width:min(var(--container),calc(100% - 40px));margin:auto}

.section{padding:92px 0}

.section-soft{background:linear-gradient(180deg,#F8F7FF,#fff)}

.section-head{max-width:760px;margin:0 auto 45px;text-align:center}

.section-head h2{margin:13px 0 14px;font-size:clamp(31px,4vw,47px);line-height:1.14}

.section-head p{color:var(--muted)}

.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;color:var(--primary-dark);background:#fff;border:1px solid rgba(103,87,217,.17);border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--secondary);box-shadow:0 0 0 5px rgba(0,183,168,.12)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 21px;border:1px solid transparent;border-radius:13px;font-weight:800;transition:.2s}

.btn:hover{transform:translateY(-2px)}

.btn-primary{color:#fff;background:var(--primary);box-shadow:0 12px 28px rgba(103,87,217,.27)}

.btn-outline{color:var(--primary-dark);background:#fff;border-color:#DCD9F0}

.btn-secondary{color:#fff;background:var(--secondary)}

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.site-header{position:fixed;inset:0 0 auto;z-index:100;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(17px)}

.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}

.brand{display:flex;align-items:center;gap:12px}

.brand-logo{width:49px;height:49px}

.brand-copy strong{display:block;color:var(--navy);font:800 19px/1.1 "Manrope"}

.brand-copy small{display:block;margin-top:5px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.desktop-nav{display:flex;align-items:center;gap:10px}

.nav-item{position:relative}

.nav-link{position:relative;padding:12px 5px;color:#48475F;font-size:13px;font-weight:700}

.nav-link:after{content:"";position:absolute;left:5px;right:5px;bottom:3px;height:2px;background:linear-gradient(90deg,var(--primary),var(--secondary));transform:scaleX(0);transition:.2s}

.nav-link:hover,.nav-link.active{color:var(--primary)}

.nav-link:hover:after,.nav-link.active:after{transform:scaleX(1)}

.chevron{font-size:10px}

.dropdown{position:absolute;top:calc(100% + 12px);left:0;width:300px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s}

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:none}

.dropdown.wide{width:620px;display:grid;grid-template-columns:1fr 1fr}

.drop-link{display:flex;gap:11px;padding:12px;border-radius:12px}

.drop-link:hover{background:var(--primary-light)}

.drop-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;color:var(--primary);background:var(--primary-light);border-radius:11px}

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span span{display:block;color:var(--muted);font-size:10px}

.header-action{display:flex;gap:9px}

.menu-toggle{display:none;width:45px;height:45px;border:1px solid var(--line);border-radius:12px;background:#fff}

.mobile-panel{display:none;position:fixed;inset:82px 0 0;z-index:99;padding:20px;background:#fff}

.mobile-panel.open{display:grid;align-content:start}

.mobile-main{padding:14px 4px;border-bottom:1px solid var(--line);font-weight:800}

.mobile-login{margin-top:20px}

.detail-hero{position:relative;overflow:hidden;padding:138px 0 76px;background:radial-gradient(circle at 12% 20%,rgba(0,183,168,.13),transparent 26%),radial-gradient(circle at 88% 20%,rgba(255,201,92,.18),transparent 24%),linear-gradient(135deg,#F5F2FF,#fff 52%,#EDFBF9)}

.detail-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:58px;align-items:center}

.breadcrumb{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px;color:var(--muted);font-size:11px}

.breadcrumb a{color:var(--primary);font-weight:800}

.detail-hero h1{margin:18px 0;font-size:clamp(40px,5vw,64px);line-height:1.05}

.hero-copy{font-size:17px;color:#626278}

.hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}

.hero-meta span{padding:8px 11px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:10px;font-weight:800}

.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:27px}

.preview-card{padding:20px;background:rgba(255,255,255,.8);border:1px solid #fff;border-radius:32px;box-shadow:var(--shadow)}

.preview-cover{position:relative;min-height:410px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;border-radius:24px;overflow:hidden}

.preview-cover:after{content:"";position:absolute;right:-60px;bottom:-70px;width:260px;height:260px;border:42px solid rgba(255,255,255,.1);border-radius:50%}

.preview-label{position:relative;z-index:1;align-self:flex-start;padding:7px 11px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:999px;font-size:10px;font-weight:800}

.preview-cover h2{position:relative;z-index:1;margin:0;color:#fff;font-size:31px;line-height:1.2}

.preview-bottom{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px}

.preview-stat{padding:13px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);border-radius:13px}

.preview-stat strong{display:block;font-size:12px}

.preview-stat span{font-size:9px;opacity:.72}

.sticky-nav{position:sticky;top:82px;z-index:40;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 8px 22px rgba(31,27,82,.04)}

.sticky-links{display:flex;gap:25px;overflow:auto}

.sticky-links a{padding:17px 0;color:var(--muted);font-size:12px;font-weight:800;white-space:nowrap}

.sticky-links a:hover{color:var(--primary)}

.overview-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:38px}

.content-card{padding:30px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.content-card h2{font-size:29px}

.content-card p{color:var(--muted)}

.outcome-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:24px}

.outcome-card{padding:18px;background:#F9F8FF;border:1px solid var(--line);border-radius:15px}

.outcome-card i{width:35px;height:35px;display:grid;place-items:center;font-style:normal;color:var(--secondary-dark);background:#E9FAF7;border-radius:10px}

.outcome-card strong{display:block;margin-top:11px;color:var(--navy);font-size:12px}

.side-info{display:grid;gap:13px}

.info-row{display:flex;gap:13px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:15px}

.info-row i{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:11px}

.info-row strong{display:block;color:var(--navy);font-size:12px}

.info-row span{font-size:10px;color:var(--muted)}

.module-list{display:grid;gap:13px;max-width:950px;margin:auto}

.module{display:grid;grid-template-columns:55px 1fr auto;gap:16px;align-items:center;padding:19px;background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow-sm)}

.module-no{width:47px;height:47px;display:grid;place-items:center;color:#fff;background:var(--primary);border-radius:13px;font-weight:900}

.module h3{margin:0 0 4px;font-size:16px}

.module p{margin:0;color:var(--muted);font-size:11px}

.module-time{padding:6px 9px;color:var(--primary-dark);background:var(--primary-light);border-radius:8px;font-size:9px;font-weight:800}

.learning-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}

.learning-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm)}

.learning-card i{width:42px;height:42px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:12px}

.learning-card h3{margin:15px 0 7px;font-size:16px}

.learning-card p{margin:0;color:var(--muted);font-size:10px}

.enroll-wrap{display:grid;grid-template-columns:1fr .8fr;gap:24px}

.enroll-card{padding:31px;background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow-sm)}

.enroll-card.featured{color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));border:0}

.enroll-card.featured h2,.enroll-card.featured h3{color:#fff}

.enroll-card.featured p{color:rgba(255,255,255,.7)}

.check-list{display:grid;gap:9px;margin:20px 0;padding:0;list-style:none}

.check-list li{display:flex;gap:9px;font-size:12px}

.check-list li:before{content:"✓";color:var(--secondary);font-weight:900}

.faq-wrap{max-width:880px;margin:auto}

.faq-item{margin-bottom:10px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}

.faq-q{width:100%;display:flex;justify-content:space-between;gap:18px;padding:19px 21px;border:0;background:#fff;color:var(--navy);font-weight:800;text-align:left}

.faq-a{display:none;padding:0 21px 20px;color:var(--muted);font-size:12px}

.faq-item.open .faq-a{display:block}

.faq-item.open .faq-plus{transform:rotate(45deg)}

.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.related{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:19px;box-shadow:var(--shadow-sm)}

.related-cover{min-height:135px;padding:18px;display:flex;align-items:end}

.related-cover h3{margin:0;color:#fff;font-size:17px}

.related-body{padding:18px}

.related-body p{color:var(--muted);font-size:10px}

.related-body a{color:var(--primary);font-size:11px;font-weight:800}

.site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:65px 0 44px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:44px}

.footer-brand p{font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:17px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:9px}

.footer-links a{font-size:12px}

.footer-contact{display:grid;gap:7px;font-size:11px}

.footer-bottom{padding:18px 0;border-top:1px solid rgba(255,255,255,.1);font-size:10px}

@media(max-width:1000px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:block}
.detail-grid,.overview-grid,.enroll-wrap{grid-template-columns:1fr}
.preview-card{max-width:650px}
.learning-grid{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.container{width:min(100% - 28px,var(--container))}
.section{padding:66px 0}
.brand-copy small{display:none}
.header-inner{min-height:74px}
.brand-logo{width:43px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.detail-hero{padding:116px 0 58px}
.detail-hero h1{font-size:41px}
.preview-cover{min-height:340px}
.sticky-nav{top:74px}
.outcome-grid,.learning-grid,.related-grid,.footer-grid{grid-template-columns:1fr}
.module{grid-template-columns:47px 1fr}
.module-time{display:none}
.footer-grid{gap:30px}
}

:root{--primary:#6757D9;--primary-dark:#342A78;--primary-light:#F1EFFF;--secondary:#00B7A8;--secondary-dark:#087E76;--accent:#FFC95C;--navy:#17143D;--text:#44445B;--muted:#737388;--line:#E8E7F1;--white:#fff;--page:#FAFAFF;--shadow:0 22px 60px rgba(31,27,82,.10);--shadow-sm:0 12px 30px rgba(31,27,82,.08);--container:1180px}

*{box-sizing:border-box}

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

body{margin:0;color:var(--text);background:var(--page);font-family:"Inter",Arial,sans-serif;line-height:1.7}

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

button{font:inherit;cursor:pointer}

h1,h2,h3,h4,p{margin-top:0}

h1,h2,h3,h4{color:var(--navy);font-family:"Manrope",sans-serif;letter-spacing:-.025em}

.container{width:min(var(--container),calc(100% - 40px));margin:auto}

.section{padding:92px 0}

.section-soft{background:linear-gradient(180deg,#F8F7FF,#fff)}

.section-head{max-width:760px;margin:0 auto 45px;text-align:center}

.section-head h2{margin:13px 0 14px;font-size:clamp(31px,4vw,47px);line-height:1.14}

.section-head p{color:var(--muted)}

.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;color:var(--primary-dark);background:#fff;border:1px solid rgba(103,87,217,.17);border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--secondary);box-shadow:0 0 0 5px rgba(0,183,168,.12)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 21px;border:1px solid transparent;border-radius:13px;font-weight:800;transition:.2s}

.btn:hover{transform:translateY(-2px)}

.btn-primary{color:#fff;background:var(--primary);box-shadow:0 12px 28px rgba(103,87,217,.27)}

.btn-outline{color:var(--primary-dark);background:#fff;border-color:#DCD9F0}

.btn-secondary{color:#fff;background:var(--secondary)}

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.site-header{position:fixed;inset:0 0 auto;z-index:100;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(17px)}

.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}

.brand{display:flex;align-items:center;gap:12px}

.brand-logo{width:49px;height:49px}

.brand-copy strong{display:block;color:var(--navy);font:800 19px/1.1 "Manrope"}

.brand-copy small{display:block;margin-top:5px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.desktop-nav{display:flex;align-items:center;gap:10px}

.nav-item{position:relative}

.nav-link{position:relative;padding:12px 5px;color:#48475F;font-size:13px;font-weight:700}

.nav-link:after{content:"";position:absolute;left:5px;right:5px;bottom:3px;height:2px;background:linear-gradient(90deg,var(--primary),var(--secondary));transform:scaleX(0);transition:.2s}

.nav-link:hover,.nav-link.active{color:var(--primary)}

.nav-link:hover:after,.nav-link.active:after{transform:scaleX(1)}

.chevron{font-size:10px}

.dropdown{position:absolute;top:calc(100% + 12px);left:0;width:300px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s}

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:none}

.dropdown.wide{width:620px;display:grid;grid-template-columns:1fr 1fr}

.drop-link{display:flex;gap:11px;padding:12px;border-radius:12px}

.drop-link:hover{background:var(--primary-light)}

.drop-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;color:var(--primary);background:var(--primary-light);border-radius:11px}

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span span{display:block;color:var(--muted);font-size:10px}

.header-action{display:flex;gap:9px}

.menu-toggle{display:none;width:45px;height:45px;border:1px solid var(--line);border-radius:12px;background:#fff}

.mobile-panel{display:none;position:fixed;inset:82px 0 0;z-index:99;padding:20px;background:#fff}

.mobile-panel.open{display:grid;align-content:start}

.mobile-main{padding:14px 4px;border-bottom:1px solid var(--line);font-weight:800}

.mobile-login{margin-top:20px}

.detail-hero{position:relative;overflow:hidden;padding:138px 0 76px;background:radial-gradient(circle at 12% 20%,rgba(0,183,168,.13),transparent 26%),radial-gradient(circle at 88% 20%,rgba(255,201,92,.18),transparent 24%),linear-gradient(135deg,#F5F2FF,#fff 52%,#EDFBF9)}

.detail-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:58px;align-items:center}

.breadcrumb{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px;color:var(--muted);font-size:11px}

.breadcrumb a{color:var(--primary);font-weight:800}

.detail-hero h1{margin:18px 0;font-size:clamp(40px,5vw,64px);line-height:1.05}

.hero-copy{font-size:17px;color:#626278}

.hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}

.hero-meta span{padding:8px 11px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:10px;font-weight:800}

.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:27px}

.preview-card{padding:20px;background:rgba(255,255,255,.8);border:1px solid #fff;border-radius:32px;box-shadow:var(--shadow)}

.preview-cover{position:relative;min-height:410px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;border-radius:24px;overflow:hidden}

.preview-cover:after{content:"";position:absolute;right:-60px;bottom:-70px;width:260px;height:260px;border:42px solid rgba(255,255,255,.1);border-radius:50%}

.preview-label{position:relative;z-index:1;align-self:flex-start;padding:7px 11px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:999px;font-size:10px;font-weight:800}

.preview-cover h2{position:relative;z-index:1;margin:0;color:#fff;font-size:31px;line-height:1.2}

.preview-bottom{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px}

.preview-stat{padding:13px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);border-radius:13px}

.preview-stat strong{display:block;font-size:12px}

.preview-stat span{font-size:9px;opacity:.72}

.sticky-nav{position:sticky;top:82px;z-index:40;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 8px 22px rgba(31,27,82,.04)}

.sticky-links{display:flex;gap:25px;overflow:auto}

.sticky-links a{padding:17px 0;color:var(--muted);font-size:12px;font-weight:800;white-space:nowrap}

.sticky-links a:hover{color:var(--primary)}

.overview-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:38px}

.content-card{padding:30px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.content-card h2{font-size:29px}

.content-card p{color:var(--muted)}

.outcome-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:24px}

.outcome-card{padding:18px;background:#F9F8FF;border:1px solid var(--line);border-radius:15px}

.outcome-card i{width:35px;height:35px;display:grid;place-items:center;font-style:normal;color:var(--secondary-dark);background:#E9FAF7;border-radius:10px}

.outcome-card strong{display:block;margin-top:11px;color:var(--navy);font-size:12px}

.side-info{display:grid;gap:13px}

.info-row{display:flex;gap:13px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:15px}

.info-row i{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:11px}

.info-row strong{display:block;color:var(--navy);font-size:12px}

.info-row span{font-size:10px;color:var(--muted)}

.module-list{display:grid;gap:13px;max-width:950px;margin:auto}

.module{display:grid;grid-template-columns:55px 1fr auto;gap:16px;align-items:center;padding:19px;background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow-sm)}

.module-no{width:47px;height:47px;display:grid;place-items:center;color:#fff;background:var(--primary);border-radius:13px;font-weight:900}

.module h3{margin:0 0 4px;font-size:16px}

.module p{margin:0;color:var(--muted);font-size:11px}

.module-time{padding:6px 9px;color:var(--primary-dark);background:var(--primary-light);border-radius:8px;font-size:9px;font-weight:800}

.learning-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}

.learning-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm)}

.learning-card i{width:42px;height:42px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:12px}

.learning-card h3{margin:15px 0 7px;font-size:16px}

.learning-card p{margin:0;color:var(--muted);font-size:10px}

.enroll-wrap{display:grid;grid-template-columns:1fr .8fr;gap:24px}

.enroll-card{padding:31px;background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow-sm)}

.enroll-card.featured{color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));border:0}

.enroll-card.featured h2,.enroll-card.featured h3{color:#fff}

.enroll-card.featured p{color:rgba(255,255,255,.7)}

.check-list{display:grid;gap:9px;margin:20px 0;padding:0;list-style:none}

.check-list li{display:flex;gap:9px;font-size:12px}

.check-list li:before{content:"✓";color:var(--secondary);font-weight:900}

.faq-wrap{max-width:880px;margin:auto}

.faq-item{margin-bottom:10px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}

.faq-q{width:100%;display:flex;justify-content:space-between;gap:18px;padding:19px 21px;border:0;background:#fff;color:var(--navy);font-weight:800;text-align:left}

.faq-a{display:none;padding:0 21px 20px;color:var(--muted);font-size:12px}

.faq-item.open .faq-a{display:block}

.faq-item.open .faq-plus{transform:rotate(45deg)}

.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.related{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:19px;box-shadow:var(--shadow-sm)}

.related-cover{min-height:135px;padding:18px;display:flex;align-items:end}

.related-cover h3{margin:0;color:#fff;font-size:17px}

.related-body{padding:18px}

.related-body p{color:var(--muted);font-size:10px}

.related-body a{color:var(--primary);font-size:11px;font-weight:800}

.site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:65px 0 44px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:44px}

.footer-brand p{font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:17px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:9px}

.footer-links a{font-size:12px}

.footer-contact{display:grid;gap:7px;font-size:11px}

.footer-bottom{padding:18px 0;border-top:1px solid rgba(255,255,255,.1);font-size:10px}

@media(max-width:1000px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:block}
.detail-grid,.overview-grid,.enroll-wrap{grid-template-columns:1fr}
.preview-card{max-width:650px}
.learning-grid{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.container{width:min(100% - 28px,var(--container))}
.section{padding:66px 0}
.brand-copy small{display:none}
.header-inner{min-height:74px}
.brand-logo{width:43px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.detail-hero{padding:116px 0 58px}
.detail-hero h1{font-size:41px}
.preview-cover{min-height:340px}
.sticky-nav{top:74px}
.outcome-grid,.learning-grid,.related-grid,.footer-grid{grid-template-columns:1fr}
.module{grid-template-columns:47px 1fr}
.module-time{display:none}
.footer-grid{gap:30px}
}

:root{--primary:#6757D9;--primary-dark:#342A78;--primary-light:#F1EFFF;--secondary:#00B7A8;--secondary-dark:#087E76;--accent:#FFC95C;--navy:#17143D;--text:#44445B;--muted:#737388;--line:#E8E7F1;--white:#fff;--page:#FAFAFF;--shadow:0 22px 60px rgba(31,27,82,.10);--shadow-sm:0 12px 30px rgba(31,27,82,.08);--container:1180px}

*{box-sizing:border-box}

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

body{margin:0;color:var(--text);background:var(--page);font-family:"Inter",Arial,sans-serif;line-height:1.7}

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

button{font:inherit;cursor:pointer}

h1,h2,h3,h4,p{margin-top:0}

h1,h2,h3,h4{color:var(--navy);font-family:"Manrope",sans-serif;letter-spacing:-.025em}

.container{width:min(var(--container),calc(100% - 40px));margin:auto}

.section{padding:92px 0}

.section-soft{background:linear-gradient(180deg,#F8F7FF,#fff)}

.section-head{max-width:760px;margin:0 auto 45px;text-align:center}

.section-head h2{margin:13px 0 14px;font-size:clamp(31px,4vw,47px);line-height:1.14}

.section-head p{color:var(--muted)}

.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;color:var(--primary-dark);background:#fff;border:1px solid rgba(103,87,217,.17);border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--secondary);box-shadow:0 0 0 5px rgba(0,183,168,.12)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 21px;border:1px solid transparent;border-radius:13px;font-weight:800;transition:.2s}

.btn:hover{transform:translateY(-2px)}

.btn-primary{color:#fff;background:var(--primary);box-shadow:0 12px 28px rgba(103,87,217,.27)}

.btn-outline{color:var(--primary-dark);background:#fff;border-color:#DCD9F0}

.btn-secondary{color:#fff;background:var(--secondary)}

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.site-header{position:fixed;inset:0 0 auto;z-index:100;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(17px)}

.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}

.brand{display:flex;align-items:center;gap:12px}

.brand-logo{width:49px;height:49px}

.brand-copy strong{display:block;color:var(--navy);font:800 19px/1.1 "Manrope"}

.brand-copy small{display:block;margin-top:5px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.desktop-nav{display:flex;align-items:center;gap:10px}

.nav-item{position:relative}

.nav-link{position:relative;padding:12px 5px;color:#48475F;font-size:13px;font-weight:700}

.nav-link:after{content:"";position:absolute;left:5px;right:5px;bottom:3px;height:2px;background:linear-gradient(90deg,var(--primary),var(--secondary));transform:scaleX(0);transition:.2s}

.nav-link:hover,.nav-link.active{color:var(--primary)}

.nav-link:hover:after,.nav-link.active:after{transform:scaleX(1)}

.chevron{font-size:10px}

.dropdown{position:absolute;top:calc(100% + 12px);left:0;width:300px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s}

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:none}

.dropdown.wide{width:620px;display:grid;grid-template-columns:1fr 1fr}

.drop-link{display:flex;gap:11px;padding:12px;border-radius:12px}

.drop-link:hover{background:var(--primary-light)}

.drop-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;color:var(--primary);background:var(--primary-light);border-radius:11px}

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span span{display:block;color:var(--muted);font-size:10px}

.header-action{display:flex;gap:9px}

.menu-toggle{display:none;width:45px;height:45px;border:1px solid var(--line);border-radius:12px;background:#fff}

.mobile-panel{display:none;position:fixed;inset:82px 0 0;z-index:99;padding:20px;background:#fff}

.mobile-panel.open{display:grid;align-content:start}

.mobile-main{padding:14px 4px;border-bottom:1px solid var(--line);font-weight:800}

.mobile-login{margin-top:20px}

.detail-hero{position:relative;overflow:hidden;padding:138px 0 76px;background:radial-gradient(circle at 12% 20%,rgba(0,183,168,.13),transparent 26%),radial-gradient(circle at 88% 20%,rgba(255,201,92,.18),transparent 24%),linear-gradient(135deg,#F5F2FF,#fff 52%,#EDFBF9)}

.detail-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:58px;align-items:center}

.breadcrumb{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px;color:var(--muted);font-size:11px}

.breadcrumb a{color:var(--primary);font-weight:800}

.detail-hero h1{margin:18px 0;font-size:clamp(40px,5vw,64px);line-height:1.05}

.hero-copy{font-size:17px;color:#626278}

.hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}

.hero-meta span{padding:8px 11px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:10px;font-weight:800}

.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:27px}

.preview-card{padding:20px;background:rgba(255,255,255,.8);border:1px solid #fff;border-radius:32px;box-shadow:var(--shadow)}

.preview-cover{position:relative;min-height:410px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;border-radius:24px;overflow:hidden}

.preview-cover:after{content:"";position:absolute;right:-60px;bottom:-70px;width:260px;height:260px;border:42px solid rgba(255,255,255,.1);border-radius:50%}

.preview-label{position:relative;z-index:1;align-self:flex-start;padding:7px 11px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:999px;font-size:10px;font-weight:800}

.preview-cover h2{position:relative;z-index:1;margin:0;color:#fff;font-size:31px;line-height:1.2}

.preview-bottom{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px}

.preview-stat{padding:13px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);border-radius:13px}

.preview-stat strong{display:block;font-size:12px}

.preview-stat span{font-size:9px;opacity:.72}

.sticky-nav{position:sticky;top:82px;z-index:40;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 8px 22px rgba(31,27,82,.04)}

.sticky-links{display:flex;gap:25px;overflow:auto}

.sticky-links a{padding:17px 0;color:var(--muted);font-size:12px;font-weight:800;white-space:nowrap}

.sticky-links a:hover{color:var(--primary)}

.overview-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:38px}

.content-card{padding:30px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.content-card h2{font-size:29px}

.content-card p{color:var(--muted)}

.outcome-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:24px}

.outcome-card{padding:18px;background:#F9F8FF;border:1px solid var(--line);border-radius:15px}

.outcome-card i{width:35px;height:35px;display:grid;place-items:center;font-style:normal;color:var(--secondary-dark);background:#E9FAF7;border-radius:10px}

.outcome-card strong{display:block;margin-top:11px;color:var(--navy);font-size:12px}

.side-info{display:grid;gap:13px}

.info-row{display:flex;gap:13px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:15px}

.info-row i{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:11px}

.info-row strong{display:block;color:var(--navy);font-size:12px}

.info-row span{font-size:10px;color:var(--muted)}

.module-list{display:grid;gap:13px;max-width:950px;margin:auto}

.module{display:grid;grid-template-columns:55px 1fr auto;gap:16px;align-items:center;padding:19px;background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow-sm)}

.module-no{width:47px;height:47px;display:grid;place-items:center;color:#fff;background:var(--primary);border-radius:13px;font-weight:900}

.module h3{margin:0 0 4px;font-size:16px}

.module p{margin:0;color:var(--muted);font-size:11px}

.module-time{padding:6px 9px;color:var(--primary-dark);background:var(--primary-light);border-radius:8px;font-size:9px;font-weight:800}

.learning-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}

.learning-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm)}

.learning-card i{width:42px;height:42px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:12px}

.learning-card h3{margin:15px 0 7px;font-size:16px}

.learning-card p{margin:0;color:var(--muted);font-size:10px}

.enroll-wrap{display:grid;grid-template-columns:1fr .8fr;gap:24px}

.enroll-card{padding:31px;background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow-sm)}

.enroll-card.featured{color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));border:0}

.enroll-card.featured h2,.enroll-card.featured h3{color:#fff}

.enroll-card.featured p{color:rgba(255,255,255,.7)}

.check-list{display:grid;gap:9px;margin:20px 0;padding:0;list-style:none}

.check-list li{display:flex;gap:9px;font-size:12px}

.check-list li:before{content:"✓";color:var(--secondary);font-weight:900}

.faq-wrap{max-width:880px;margin:auto}

.faq-item{margin-bottom:10px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}

.faq-q{width:100%;display:flex;justify-content:space-between;gap:18px;padding:19px 21px;border:0;background:#fff;color:var(--navy);font-weight:800;text-align:left}

.faq-a{display:none;padding:0 21px 20px;color:var(--muted);font-size:12px}

.faq-item.open .faq-a{display:block}

.faq-item.open .faq-plus{transform:rotate(45deg)}

.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.related{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:19px;box-shadow:var(--shadow-sm)}

.related-cover{min-height:135px;padding:18px;display:flex;align-items:end}

.related-cover h3{margin:0;color:#fff;font-size:17px}

.related-body{padding:18px}

.related-body p{color:var(--muted);font-size:10px}

.related-body a{color:var(--primary);font-size:11px;font-weight:800}

.site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:65px 0 44px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:44px}

.footer-brand p{font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:17px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:9px}

.footer-links a{font-size:12px}

.footer-contact{display:grid;gap:7px;font-size:11px}

.footer-bottom{padding:18px 0;border-top:1px solid rgba(255,255,255,.1);font-size:10px}

@media(max-width:1000px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:block}
.detail-grid,.overview-grid,.enroll-wrap{grid-template-columns:1fr}
.preview-card{max-width:650px}
.learning-grid{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.container{width:min(100% - 28px,var(--container))}
.section{padding:66px 0}
.brand-copy small{display:none}
.header-inner{min-height:74px}
.brand-logo{width:43px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.detail-hero{padding:116px 0 58px}
.detail-hero h1{font-size:41px}
.preview-cover{min-height:340px}
.sticky-nav{top:74px}
.outcome-grid,.learning-grid,.related-grid,.footer-grid{grid-template-columns:1fr}
.module{grid-template-columns:47px 1fr}
.module-time{display:none}
.footer-grid{gap:30px}
}

:root{--primary:#6757D9;--primary-dark:#342A78;--primary-light:#F1EFFF;--secondary:#00B7A8;--secondary-dark:#087E76;--accent:#FFC95C;--navy:#17143D;--text:#44445B;--muted:#737388;--line:#E8E7F1;--white:#fff;--page:#FAFAFF;--shadow:0 22px 60px rgba(31,27,82,.10);--shadow-sm:0 12px 30px rgba(31,27,82,.08);--container:1180px}

*{box-sizing:border-box}

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

body{margin:0;color:var(--text);background:var(--page);font-family:"Inter",Arial,sans-serif;line-height:1.7}

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

button{font:inherit;cursor:pointer}

h1,h2,h3,h4,p{margin-top:0}

h1,h2,h3,h4{color:var(--navy);font-family:"Manrope",sans-serif;letter-spacing:-.025em}

.container{width:min(var(--container),calc(100% - 40px));margin:auto}

.section{padding:92px 0}

.section-soft{background:linear-gradient(180deg,#F8F7FF,#fff)}

.section-head{max-width:760px;margin:0 auto 45px;text-align:center}

.section-head h2{margin:13px 0 14px;font-size:clamp(31px,4vw,47px);line-height:1.14}

.section-head p{color:var(--muted)}

.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;color:var(--primary-dark);background:#fff;border:1px solid rgba(103,87,217,.17);border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--secondary);box-shadow:0 0 0 5px rgba(0,183,168,.12)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 21px;border:1px solid transparent;border-radius:13px;font-weight:800;transition:.2s}

.btn:hover{transform:translateY(-2px)}

.btn-primary{color:#fff;background:var(--primary);box-shadow:0 12px 28px rgba(103,87,217,.27)}

.btn-outline{color:var(--primary-dark);background:#fff;border-color:#DCD9F0}

.btn-secondary{color:#fff;background:var(--secondary)}

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.site-header{position:fixed;inset:0 0 auto;z-index:100;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(17px)}

.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}

.brand{display:flex;align-items:center;gap:12px}

.brand-logo{width:49px;height:49px}

.brand-copy strong{display:block;color:var(--navy);font:800 19px/1.1 "Manrope"}

.brand-copy small{display:block;margin-top:5px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.desktop-nav{display:flex;align-items:center;gap:10px}

.nav-item{position:relative}

.nav-link{position:relative;padding:12px 5px;color:#48475F;font-size:13px;font-weight:700}

.nav-link:after{content:"";position:absolute;left:5px;right:5px;bottom:3px;height:2px;background:linear-gradient(90deg,var(--primary),var(--secondary));transform:scaleX(0);transition:.2s}

.nav-link:hover,.nav-link.active{color:var(--primary)}

.nav-link:hover:after,.nav-link.active:after{transform:scaleX(1)}

.chevron{font-size:10px}

.dropdown{position:absolute;top:calc(100% + 12px);left:0;width:300px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s}

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:none}

.dropdown.wide{width:620px;display:grid;grid-template-columns:1fr 1fr}

.drop-link{display:flex;gap:11px;padding:12px;border-radius:12px}

.drop-link:hover{background:var(--primary-light)}

.drop-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;color:var(--primary);background:var(--primary-light);border-radius:11px}

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span span{display:block;color:var(--muted);font-size:10px}

.header-action{display:flex;gap:9px}

.menu-toggle{display:none;width:45px;height:45px;border:1px solid var(--line);border-radius:12px;background:#fff}

.mobile-panel{display:none;position:fixed;inset:82px 0 0;z-index:99;padding:20px;background:#fff}

.mobile-panel.open{display:grid;align-content:start}

.mobile-main{padding:14px 4px;border-bottom:1px solid var(--line);font-weight:800}

.mobile-login{margin-top:20px}

.detail-hero{position:relative;overflow:hidden;padding:138px 0 76px;background:radial-gradient(circle at 12% 20%,rgba(0,183,168,.13),transparent 26%),radial-gradient(circle at 88% 20%,rgba(255,201,92,.18),transparent 24%),linear-gradient(135deg,#F5F2FF,#fff 52%,#EDFBF9)}

.detail-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:58px;align-items:center}

.breadcrumb{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px;color:var(--muted);font-size:11px}

.breadcrumb a{color:var(--primary);font-weight:800}

.detail-hero h1{margin:18px 0;font-size:clamp(40px,5vw,64px);line-height:1.05}

.hero-copy{font-size:17px;color:#626278}

.hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}

.hero-meta span{padding:8px 11px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:10px;font-weight:800}

.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:27px}

.preview-card{padding:20px;background:rgba(255,255,255,.8);border:1px solid #fff;border-radius:32px;box-shadow:var(--shadow)}

.preview-cover{position:relative;min-height:410px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;border-radius:24px;overflow:hidden}

.preview-cover:after{content:"";position:absolute;right:-60px;bottom:-70px;width:260px;height:260px;border:42px solid rgba(255,255,255,.1);border-radius:50%}

.preview-label{position:relative;z-index:1;align-self:flex-start;padding:7px 11px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:999px;font-size:10px;font-weight:800}

.preview-cover h2{position:relative;z-index:1;margin:0;color:#fff;font-size:31px;line-height:1.2}

.preview-bottom{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px}

.preview-stat{padding:13px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);border-radius:13px}

.preview-stat strong{display:block;font-size:12px}

.preview-stat span{font-size:9px;opacity:.72}

.sticky-nav{position:sticky;top:82px;z-index:40;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 8px 22px rgba(31,27,82,.04)}

.sticky-links{display:flex;gap:25px;overflow:auto}

.sticky-links a{padding:17px 0;color:var(--muted);font-size:12px;font-weight:800;white-space:nowrap}

.sticky-links a:hover{color:var(--primary)}

.overview-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:38px}

.content-card{padding:30px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.content-card h2{font-size:29px}

.content-card p{color:var(--muted)}

.outcome-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:24px}

.outcome-card{padding:18px;background:#F9F8FF;border:1px solid var(--line);border-radius:15px}

.outcome-card i{width:35px;height:35px;display:grid;place-items:center;font-style:normal;color:var(--secondary-dark);background:#E9FAF7;border-radius:10px}

.outcome-card strong{display:block;margin-top:11px;color:var(--navy);font-size:12px}

.side-info{display:grid;gap:13px}

.info-row{display:flex;gap:13px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:15px}

.info-row i{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:11px}

.info-row strong{display:block;color:var(--navy);font-size:12px}

.info-row span{font-size:10px;color:var(--muted)}

.module-list{display:grid;gap:13px;max-width:950px;margin:auto}

.module{display:grid;grid-template-columns:55px 1fr auto;gap:16px;align-items:center;padding:19px;background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow-sm)}

.module-no{width:47px;height:47px;display:grid;place-items:center;color:#fff;background:var(--primary);border-radius:13px;font-weight:900}

.module h3{margin:0 0 4px;font-size:16px}

.module p{margin:0;color:var(--muted);font-size:11px}

.module-time{padding:6px 9px;color:var(--primary-dark);background:var(--primary-light);border-radius:8px;font-size:9px;font-weight:800}

.learning-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}

.learning-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm)}

.learning-card i{width:42px;height:42px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:12px}

.learning-card h3{margin:15px 0 7px;font-size:16px}

.learning-card p{margin:0;color:var(--muted);font-size:10px}

.enroll-wrap{display:grid;grid-template-columns:1fr .8fr;gap:24px}

.enroll-card{padding:31px;background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow-sm)}

.enroll-card.featured{color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));border:0}

.enroll-card.featured h2,.enroll-card.featured h3{color:#fff}

.enroll-card.featured p{color:rgba(255,255,255,.7)}

.check-list{display:grid;gap:9px;margin:20px 0;padding:0;list-style:none}

.check-list li{display:flex;gap:9px;font-size:12px}

.check-list li:before{content:"✓";color:var(--secondary);font-weight:900}

.faq-wrap{max-width:880px;margin:auto}

.faq-item{margin-bottom:10px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}

.faq-q{width:100%;display:flex;justify-content:space-between;gap:18px;padding:19px 21px;border:0;background:#fff;color:var(--navy);font-weight:800;text-align:left}

.faq-a{display:none;padding:0 21px 20px;color:var(--muted);font-size:12px}

.faq-item.open .faq-a{display:block}

.faq-item.open .faq-plus{transform:rotate(45deg)}

.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.related{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:19px;box-shadow:var(--shadow-sm)}

.related-cover{min-height:135px;padding:18px;display:flex;align-items:end}

.related-cover h3{margin:0;color:#fff;font-size:17px}

.related-body{padding:18px}

.related-body p{color:var(--muted);font-size:10px}

.related-body a{color:var(--primary);font-size:11px;font-weight:800}

.site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:65px 0 44px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:44px}

.footer-brand p{font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:17px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:9px}

.footer-links a{font-size:12px}

.footer-contact{display:grid;gap:7px;font-size:11px}

.footer-bottom{padding:18px 0;border-top:1px solid rgba(255,255,255,.1);font-size:10px}

@media(max-width:1000px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:block}
.detail-grid,.overview-grid,.enroll-wrap{grid-template-columns:1fr}
.preview-card{max-width:650px}
.learning-grid{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.container{width:min(100% - 28px,var(--container))}
.section{padding:66px 0}
.brand-copy small{display:none}
.header-inner{min-height:74px}
.brand-logo{width:43px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.detail-hero{padding:116px 0 58px}
.detail-hero h1{font-size:41px}
.preview-cover{min-height:340px}
.sticky-nav{top:74px}
.outcome-grid,.learning-grid,.related-grid,.footer-grid{grid-template-columns:1fr}
.module{grid-template-columns:47px 1fr}
.module-time{display:none}
.footer-grid{gap:30px}
}

:root{--primary:#6757D9;--primary-dark:#342A78;--primary-light:#F1EFFF;--secondary:#00B7A8;--secondary-dark:#087E76;--accent:#FFC95C;--navy:#17143D;--text:#44445B;--muted:#737388;--line:#E8E7F1;--white:#fff;--page:#FAFAFF;--shadow:0 22px 60px rgba(31,27,82,.10);--shadow-sm:0 12px 30px rgba(31,27,82,.08);--container:1180px}

*{box-sizing:border-box}

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

body{margin:0;color:var(--text);background:var(--page);font-family:"Inter",Arial,sans-serif;line-height:1.7}

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

button{font:inherit;cursor:pointer}

h1,h2,h3,h4,p{margin-top:0}

h1,h2,h3,h4{color:var(--navy);font-family:"Manrope",sans-serif;letter-spacing:-.025em}

.container{width:min(var(--container),calc(100% - 40px));margin:auto}

.section{padding:92px 0}

.section-soft{background:linear-gradient(180deg,#F8F7FF,#fff)}

.section-head{max-width:760px;margin:0 auto 45px;text-align:center}

.section-head h2{margin:13px 0 14px;font-size:clamp(31px,4vw,47px);line-height:1.14}

.section-head p{color:var(--muted)}

.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;color:var(--primary-dark);background:#fff;border:1px solid rgba(103,87,217,.17);border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--secondary);box-shadow:0 0 0 5px rgba(0,183,168,.12)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 21px;border:1px solid transparent;border-radius:13px;font-weight:800;transition:.2s}

.btn:hover{transform:translateY(-2px)}

.btn-primary{color:#fff;background:var(--primary);box-shadow:0 12px 28px rgba(103,87,217,.27)}

.btn-outline{color:var(--primary-dark);background:#fff;border-color:#DCD9F0}

.btn-secondary{color:#fff;background:var(--secondary)}

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.site-header{position:fixed;inset:0 0 auto;z-index:100;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(17px)}

.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}

.brand{display:flex;align-items:center;gap:12px}

.brand-logo{width:49px;height:49px}

.brand-copy strong{display:block;color:var(--navy);font:800 19px/1.1 "Manrope"}

.brand-copy small{display:block;margin-top:5px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.desktop-nav{display:flex;align-items:center;gap:10px}

.nav-item{position:relative}

.nav-link{position:relative;padding:12px 5px;color:#48475F;font-size:13px;font-weight:700}

.nav-link:after{content:"";position:absolute;left:5px;right:5px;bottom:3px;height:2px;background:linear-gradient(90deg,var(--primary),var(--secondary));transform:scaleX(0);transition:.2s}

.nav-link:hover,.nav-link.active{color:var(--primary)}

.nav-link:hover:after,.nav-link.active:after{transform:scaleX(1)}

.chevron{font-size:10px}

.dropdown{position:absolute;top:calc(100% + 12px);left:0;width:300px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s}

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:none}

.dropdown.wide{width:620px;display:grid;grid-template-columns:1fr 1fr}

.drop-link{display:flex;gap:11px;padding:12px;border-radius:12px}

.drop-link:hover{background:var(--primary-light)}

.drop-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;color:var(--primary);background:var(--primary-light);border-radius:11px}

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span span{display:block;color:var(--muted);font-size:10px}

.header-action{display:flex;gap:9px}

.menu-toggle{display:none;width:45px;height:45px;border:1px solid var(--line);border-radius:12px;background:#fff}

.mobile-panel{display:none;position:fixed;inset:82px 0 0;z-index:99;padding:20px;background:#fff}

.mobile-panel.open{display:grid;align-content:start}

.mobile-main{padding:14px 4px;border-bottom:1px solid var(--line);font-weight:800}

.mobile-login{margin-top:20px}

.detail-hero{position:relative;overflow:hidden;padding:138px 0 76px;background:radial-gradient(circle at 12% 20%,rgba(0,183,168,.13),transparent 26%),radial-gradient(circle at 88% 20%,rgba(255,201,92,.18),transparent 24%),linear-gradient(135deg,#F5F2FF,#fff 52%,#EDFBF9)}

.detail-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:58px;align-items:center}

.breadcrumb{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px;color:var(--muted);font-size:11px}

.breadcrumb a{color:var(--primary);font-weight:800}

.detail-hero h1{margin:18px 0;font-size:clamp(40px,5vw,64px);line-height:1.05}

.hero-copy{font-size:17px;color:#626278}

.hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}

.hero-meta span{padding:8px 11px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:10px;font-weight:800}

.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:27px}

.preview-card{padding:20px;background:rgba(255,255,255,.8);border:1px solid #fff;border-radius:32px;box-shadow:var(--shadow)}

.preview-cover{position:relative;min-height:410px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;border-radius:24px;overflow:hidden}

.preview-cover:after{content:"";position:absolute;right:-60px;bottom:-70px;width:260px;height:260px;border:42px solid rgba(255,255,255,.1);border-radius:50%}

.preview-label{position:relative;z-index:1;align-self:flex-start;padding:7px 11px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:999px;font-size:10px;font-weight:800}

.preview-cover h2{position:relative;z-index:1;margin:0;color:#fff;font-size:31px;line-height:1.2}

.preview-bottom{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px}

.preview-stat{padding:13px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);border-radius:13px}

.preview-stat strong{display:block;font-size:12px}

.preview-stat span{font-size:9px;opacity:.72}

.sticky-nav{position:sticky;top:82px;z-index:40;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 8px 22px rgba(31,27,82,.04)}

.sticky-links{display:flex;gap:25px;overflow:auto}

.sticky-links a{padding:17px 0;color:var(--muted);font-size:12px;font-weight:800;white-space:nowrap}

.sticky-links a:hover{color:var(--primary)}

.overview-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:38px}

.content-card{padding:30px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.content-card h2{font-size:29px}

.content-card p{color:var(--muted)}

.outcome-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:24px}

.outcome-card{padding:18px;background:#F9F8FF;border:1px solid var(--line);border-radius:15px}

.outcome-card i{width:35px;height:35px;display:grid;place-items:center;font-style:normal;color:var(--secondary-dark);background:#E9FAF7;border-radius:10px}

.outcome-card strong{display:block;margin-top:11px;color:var(--navy);font-size:12px}

.side-info{display:grid;gap:13px}

.info-row{display:flex;gap:13px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:15px}

.info-row i{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:11px}

.info-row strong{display:block;color:var(--navy);font-size:12px}

.info-row span{font-size:10px;color:var(--muted)}

.module-list{display:grid;gap:13px;max-width:950px;margin:auto}

.module{display:grid;grid-template-columns:55px 1fr auto;gap:16px;align-items:center;padding:19px;background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow-sm)}

.module-no{width:47px;height:47px;display:grid;place-items:center;color:#fff;background:var(--primary);border-radius:13px;font-weight:900}

.module h3{margin:0 0 4px;font-size:16px}

.module p{margin:0;color:var(--muted);font-size:11px}

.module-time{padding:6px 9px;color:var(--primary-dark);background:var(--primary-light);border-radius:8px;font-size:9px;font-weight:800}

.learning-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}

.learning-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm)}

.learning-card i{width:42px;height:42px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:12px}

.learning-card h3{margin:15px 0 7px;font-size:16px}

.learning-card p{margin:0;color:var(--muted);font-size:10px}

.enroll-wrap{display:grid;grid-template-columns:1fr .8fr;gap:24px}

.enroll-card{padding:31px;background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow-sm)}

.enroll-card.featured{color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));border:0}

.enroll-card.featured h2,.enroll-card.featured h3{color:#fff}

.enroll-card.featured p{color:rgba(255,255,255,.7)}

.check-list{display:grid;gap:9px;margin:20px 0;padding:0;list-style:none}

.check-list li{display:flex;gap:9px;font-size:12px}

.check-list li:before{content:"✓";color:var(--secondary);font-weight:900}

.faq-wrap{max-width:880px;margin:auto}

.faq-item{margin-bottom:10px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}

.faq-q{width:100%;display:flex;justify-content:space-between;gap:18px;padding:19px 21px;border:0;background:#fff;color:var(--navy);font-weight:800;text-align:left}

.faq-a{display:none;padding:0 21px 20px;color:var(--muted);font-size:12px}

.faq-item.open .faq-a{display:block}

.faq-item.open .faq-plus{transform:rotate(45deg)}

.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.related{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:19px;box-shadow:var(--shadow-sm)}

.related-cover{min-height:135px;padding:18px;display:flex;align-items:end}

.related-cover h3{margin:0;color:#fff;font-size:17px}

.related-body{padding:18px}

.related-body p{color:var(--muted);font-size:10px}

.related-body a{color:var(--primary);font-size:11px;font-weight:800}

.site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:65px 0 44px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:44px}

.footer-brand p{font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:17px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:9px}

.footer-links a{font-size:12px}

.footer-contact{display:grid;gap:7px;font-size:11px}

.footer-bottom{padding:18px 0;border-top:1px solid rgba(255,255,255,.1);font-size:10px}

@media(max-width:1000px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:block}
.detail-grid,.overview-grid,.enroll-wrap{grid-template-columns:1fr}
.preview-card{max-width:650px}
.learning-grid{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.container{width:min(100% - 28px,var(--container))}
.section{padding:66px 0}
.brand-copy small{display:none}
.header-inner{min-height:74px}
.brand-logo{width:43px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.detail-hero{padding:116px 0 58px}
.detail-hero h1{font-size:41px}
.preview-cover{min-height:340px}
.sticky-nav{top:74px}
.outcome-grid,.learning-grid,.related-grid,.footer-grid{grid-template-columns:1fr}
.module{grid-template-columns:47px 1fr}
.module-time{display:none}
.footer-grid{gap:30px}
}

:root{--primary:#6757D9;--primary-dark:#342A78;--primary-light:#F1EFFF;--secondary:#00B7A8;--secondary-dark:#087E76;--accent:#FFC95C;--navy:#17143D;--text:#44445B;--muted:#737388;--line:#E8E7F1;--white:#fff;--page:#FAFAFF;--shadow:0 22px 60px rgba(31,27,82,.10);--shadow-sm:0 12px 30px rgba(31,27,82,.08);--container:1180px}

*{box-sizing:border-box}

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

body{margin:0;color:var(--text);background:var(--page);font-family:"Inter",Arial,sans-serif;line-height:1.7}

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

button{font:inherit;cursor:pointer}

h1,h2,h3,h4,p{margin-top:0}

h1,h2,h3,h4{color:var(--navy);font-family:"Manrope",sans-serif;letter-spacing:-.025em}

.container{width:min(var(--container),calc(100% - 40px));margin:auto}

.section{padding:92px 0}

.section-soft{background:linear-gradient(180deg,#F8F7FF,#fff)}

.section-head{max-width:760px;margin:0 auto 45px;text-align:center}

.section-head h2{margin:13px 0 14px;font-size:clamp(31px,4vw,47px);line-height:1.14}

.section-head p{color:var(--muted)}

.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;color:var(--primary-dark);background:#fff;border:1px solid rgba(103,87,217,.17);border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--secondary);box-shadow:0 0 0 5px rgba(0,183,168,.12)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 21px;border:1px solid transparent;border-radius:13px;font-weight:800;transition:.2s}

.btn:hover{transform:translateY(-2px)}

.btn-primary{color:#fff;background:var(--primary);box-shadow:0 12px 28px rgba(103,87,217,.27)}

.btn-outline{color:var(--primary-dark);background:#fff;border-color:#DCD9F0}

.btn-secondary{color:#fff;background:var(--secondary)}

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.site-header{position:fixed;inset:0 0 auto;z-index:100;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(17px)}

.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}

.brand{display:flex;align-items:center;gap:12px}

.brand-logo{width:49px;height:49px}

.brand-copy strong{display:block;color:var(--navy);font:800 19px/1.1 "Manrope"}

.brand-copy small{display:block;margin-top:5px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.desktop-nav{display:flex;align-items:center;gap:10px}

.nav-item{position:relative}

.nav-link{position:relative;padding:12px 5px;color:#48475F;font-size:13px;font-weight:700}

.nav-link:after{content:"";position:absolute;left:5px;right:5px;bottom:3px;height:2px;background:linear-gradient(90deg,var(--primary),var(--secondary));transform:scaleX(0);transition:.2s}

.nav-link:hover,.nav-link.active{color:var(--primary)}

.nav-link:hover:after,.nav-link.active:after{transform:scaleX(1)}

.chevron{font-size:10px}

.dropdown{position:absolute;top:calc(100% + 12px);left:0;width:300px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s}

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:none}

.dropdown.wide{width:620px;display:grid;grid-template-columns:1fr 1fr}

.drop-link{display:flex;gap:11px;padding:12px;border-radius:12px}

.drop-link:hover{background:var(--primary-light)}

.drop-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;color:var(--primary);background:var(--primary-light);border-radius:11px}

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span span{display:block;color:var(--muted);font-size:10px}

.header-action{display:flex;gap:9px}

.menu-toggle{display:none;width:45px;height:45px;border:1px solid var(--line);border-radius:12px;background:#fff}

.mobile-panel{display:none;position:fixed;inset:82px 0 0;z-index:99;padding:20px;background:#fff}

.mobile-panel.open{display:grid;align-content:start}

.mobile-main{padding:14px 4px;border-bottom:1px solid var(--line);font-weight:800}

.mobile-login{margin-top:20px}

.detail-hero{position:relative;overflow:hidden;padding:138px 0 76px;background:radial-gradient(circle at 12% 20%,rgba(0,183,168,.13),transparent 26%),radial-gradient(circle at 88% 20%,rgba(255,201,92,.18),transparent 24%),linear-gradient(135deg,#F5F2FF,#fff 52%,#EDFBF9)}

.detail-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:58px;align-items:center}

.breadcrumb{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px;color:var(--muted);font-size:11px}

.breadcrumb a{color:var(--primary);font-weight:800}

.detail-hero h1{margin:18px 0;font-size:clamp(40px,5vw,64px);line-height:1.05}

.hero-copy{font-size:17px;color:#626278}

.hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}

.hero-meta span{padding:8px 11px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:10px;font-weight:800}

.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:27px}

.preview-card{padding:20px;background:rgba(255,255,255,.8);border:1px solid #fff;border-radius:32px;box-shadow:var(--shadow)}

.preview-cover{position:relative;min-height:410px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;border-radius:24px;overflow:hidden}

.preview-cover:after{content:"";position:absolute;right:-60px;bottom:-70px;width:260px;height:260px;border:42px solid rgba(255,255,255,.1);border-radius:50%}

.preview-label{position:relative;z-index:1;align-self:flex-start;padding:7px 11px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:999px;font-size:10px;font-weight:800}

.preview-cover h2{position:relative;z-index:1;margin:0;color:#fff;font-size:31px;line-height:1.2}

.preview-bottom{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px}

.preview-stat{padding:13px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);border-radius:13px}

.preview-stat strong{display:block;font-size:12px}

.preview-stat span{font-size:9px;opacity:.72}

.sticky-nav{position:sticky;top:82px;z-index:40;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 8px 22px rgba(31,27,82,.04)}

.sticky-links{display:flex;gap:25px;overflow:auto}

.sticky-links a{padding:17px 0;color:var(--muted);font-size:12px;font-weight:800;white-space:nowrap}

.sticky-links a:hover{color:var(--primary)}

.overview-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:38px}

.content-card{padding:30px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.content-card h2{font-size:29px}

.content-card p{color:var(--muted)}

.outcome-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:24px}

.outcome-card{padding:18px;background:#F9F8FF;border:1px solid var(--line);border-radius:15px}

.outcome-card i{width:35px;height:35px;display:grid;place-items:center;font-style:normal;color:var(--secondary-dark);background:#E9FAF7;border-radius:10px}

.outcome-card strong{display:block;margin-top:11px;color:var(--navy);font-size:12px}

.side-info{display:grid;gap:13px}

.info-row{display:flex;gap:13px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:15px}

.info-row i{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:11px}

.info-row strong{display:block;color:var(--navy);font-size:12px}

.info-row span{font-size:10px;color:var(--muted)}

.module-list{display:grid;gap:13px;max-width:950px;margin:auto}

.module{display:grid;grid-template-columns:55px 1fr auto;gap:16px;align-items:center;padding:19px;background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow-sm)}

.module-no{width:47px;height:47px;display:grid;place-items:center;color:#fff;background:var(--primary);border-radius:13px;font-weight:900}

.module h3{margin:0 0 4px;font-size:16px}

.module p{margin:0;color:var(--muted);font-size:11px}

.module-time{padding:6px 9px;color:var(--primary-dark);background:var(--primary-light);border-radius:8px;font-size:9px;font-weight:800}

.learning-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}

.learning-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm)}

.learning-card i{width:42px;height:42px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:12px}

.learning-card h3{margin:15px 0 7px;font-size:16px}

.learning-card p{margin:0;color:var(--muted);font-size:10px}

.enroll-wrap{display:grid;grid-template-columns:1fr .8fr;gap:24px}

.enroll-card{padding:31px;background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow-sm)}

.enroll-card.featured{color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));border:0}

.enroll-card.featured h2,.enroll-card.featured h3{color:#fff}

.enroll-card.featured p{color:rgba(255,255,255,.7)}

.check-list{display:grid;gap:9px;margin:20px 0;padding:0;list-style:none}

.check-list li{display:flex;gap:9px;font-size:12px}

.check-list li:before{content:"✓";color:var(--secondary);font-weight:900}

.faq-wrap{max-width:880px;margin:auto}

.faq-item{margin-bottom:10px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}

.faq-q{width:100%;display:flex;justify-content:space-between;gap:18px;padding:19px 21px;border:0;background:#fff;color:var(--navy);font-weight:800;text-align:left}

.faq-a{display:none;padding:0 21px 20px;color:var(--muted);font-size:12px}

.faq-item.open .faq-a{display:block}

.faq-item.open .faq-plus{transform:rotate(45deg)}

.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.related{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:19px;box-shadow:var(--shadow-sm)}

.related-cover{min-height:135px;padding:18px;display:flex;align-items:end}

.related-cover h3{margin:0;color:#fff;font-size:17px}

.related-body{padding:18px}

.related-body p{color:var(--muted);font-size:10px}

.related-body a{color:var(--primary);font-size:11px;font-weight:800}

.site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:65px 0 44px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:44px}

.footer-brand p{font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:17px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:9px}

.footer-links a{font-size:12px}

.footer-contact{display:grid;gap:7px;font-size:11px}

.footer-bottom{padding:18px 0;border-top:1px solid rgba(255,255,255,.1);font-size:10px}

@media(max-width:1000px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:block}
.detail-grid,.overview-grid,.enroll-wrap{grid-template-columns:1fr}
.preview-card{max-width:650px}
.learning-grid{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.container{width:min(100% - 28px,var(--container))}
.section{padding:66px 0}
.brand-copy small{display:none}
.header-inner{min-height:74px}
.brand-logo{width:43px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.detail-hero{padding:116px 0 58px}
.detail-hero h1{font-size:41px}
.preview-cover{min-height:340px}
.sticky-nav{top:74px}
.outcome-grid,.learning-grid,.related-grid,.footer-grid{grid-template-columns:1fr}
.module{grid-template-columns:47px 1fr}
.module-time{display:none}
.footer-grid{gap:30px}
}

:root{--primary:#6757D9;--primary-dark:#342A78;--primary-light:#F1EFFF;--secondary:#00B7A8;--secondary-dark:#087E76;--accent:#FFC95C;--navy:#17143D;--text:#44445B;--muted:#737388;--line:#E8E7F1;--white:#fff;--page:#FAFAFF;--shadow:0 22px 60px rgba(31,27,82,.10);--shadow-sm:0 12px 30px rgba(31,27,82,.08);--container:1180px}

*{box-sizing:border-box}

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

body{margin:0;color:var(--text);background:var(--page);font-family:"Inter",Arial,sans-serif;line-height:1.7}

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

button{font:inherit;cursor:pointer}

h1,h2,h3,h4,p{margin-top:0}

h1,h2,h3,h4{color:var(--navy);font-family:"Manrope",sans-serif;letter-spacing:-.025em}

.container{width:min(var(--container),calc(100% - 40px));margin:auto}

.section{padding:92px 0}

.section-soft{background:linear-gradient(180deg,#F8F7FF,#fff)}

.section-head{max-width:760px;margin:0 auto 45px;text-align:center}

.section-head h2{margin:13px 0 14px;font-size:clamp(31px,4vw,47px);line-height:1.14}

.section-head p{color:var(--muted)}

.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;color:var(--primary-dark);background:#fff;border:1px solid rgba(103,87,217,.17);border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--secondary);box-shadow:0 0 0 5px rgba(0,183,168,.12)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 21px;border:1px solid transparent;border-radius:13px;font-weight:800;transition:.2s}

.btn:hover{transform:translateY(-2px)}

.btn-primary{color:#fff;background:var(--primary);box-shadow:0 12px 28px rgba(103,87,217,.27)}

.btn-outline{color:var(--primary-dark);background:#fff;border-color:#DCD9F0}

.btn-secondary{color:#fff;background:var(--secondary)}

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.site-header{position:fixed;inset:0 0 auto;z-index:100;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(17px)}

.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}

.brand{display:flex;align-items:center;gap:12px}

.brand-logo{width:49px;height:49px}

.brand-copy strong{display:block;color:var(--navy);font:800 19px/1.1 "Manrope"}

.brand-copy small{display:block;margin-top:5px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.desktop-nav{display:flex;align-items:center;gap:10px}

.nav-item{position:relative}

.nav-link{position:relative;padding:12px 5px;color:#48475F;font-size:13px;font-weight:700}

.nav-link:after{content:"";position:absolute;left:5px;right:5px;bottom:3px;height:2px;background:linear-gradient(90deg,var(--primary),var(--secondary));transform:scaleX(0);transition:.2s}

.nav-link:hover,.nav-link.active{color:var(--primary)}

.nav-link:hover:after,.nav-link.active:after{transform:scaleX(1)}

.chevron{font-size:10px}

.dropdown{position:absolute;top:calc(100% + 12px);left:0;width:300px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s}

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:none}

.dropdown.wide{width:620px;display:grid;grid-template-columns:1fr 1fr}

.drop-link{display:flex;gap:11px;padding:12px;border-radius:12px}

.drop-link:hover{background:var(--primary-light)}

.drop-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;color:var(--primary);background:var(--primary-light);border-radius:11px}

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span span{display:block;color:var(--muted);font-size:10px}

.header-action{display:flex;gap:9px}

.menu-toggle{display:none;width:45px;height:45px;border:1px solid var(--line);border-radius:12px;background:#fff}

.mobile-panel{display:none;position:fixed;inset:82px 0 0;z-index:99;padding:20px;background:#fff}

.mobile-panel.open{display:grid;align-content:start}

.mobile-main{padding:14px 4px;border-bottom:1px solid var(--line);font-weight:800}

.mobile-login{margin-top:20px}

.detail-hero{position:relative;overflow:hidden;padding:138px 0 76px;background:radial-gradient(circle at 12% 20%,rgba(0,183,168,.13),transparent 26%),radial-gradient(circle at 88% 20%,rgba(255,201,92,.18),transparent 24%),linear-gradient(135deg,#F5F2FF,#fff 52%,#EDFBF9)}

.detail-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:58px;align-items:center}

.breadcrumb{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px;color:var(--muted);font-size:11px}

.breadcrumb a{color:var(--primary);font-weight:800}

.detail-hero h1{margin:18px 0;font-size:clamp(40px,5vw,64px);line-height:1.05}

.hero-copy{font-size:17px;color:#626278}

.hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}

.hero-meta span{padding:8px 11px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:10px;font-weight:800}

.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:27px}

.preview-card{padding:20px;background:rgba(255,255,255,.8);border:1px solid #fff;border-radius:32px;box-shadow:var(--shadow)}

.preview-cover{position:relative;min-height:410px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;border-radius:24px;overflow:hidden}

.preview-cover:after{content:"";position:absolute;right:-60px;bottom:-70px;width:260px;height:260px;border:42px solid rgba(255,255,255,.1);border-radius:50%}

.preview-label{position:relative;z-index:1;align-self:flex-start;padding:7px 11px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:999px;font-size:10px;font-weight:800}

.preview-cover h2{position:relative;z-index:1;margin:0;color:#fff;font-size:31px;line-height:1.2}

.preview-bottom{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px}

.preview-stat{padding:13px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);border-radius:13px}

.preview-stat strong{display:block;font-size:12px}

.preview-stat span{font-size:9px;opacity:.72}

.sticky-nav{position:sticky;top:82px;z-index:40;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 8px 22px rgba(31,27,82,.04)}

.sticky-links{display:flex;gap:25px;overflow:auto}

.sticky-links a{padding:17px 0;color:var(--muted);font-size:12px;font-weight:800;white-space:nowrap}

.sticky-links a:hover{color:var(--primary)}

.overview-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:38px}

.content-card{padding:30px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.content-card h2{font-size:29px}

.content-card p{color:var(--muted)}

.outcome-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:24px}

.outcome-card{padding:18px;background:#F9F8FF;border:1px solid var(--line);border-radius:15px}

.outcome-card i{width:35px;height:35px;display:grid;place-items:center;font-style:normal;color:var(--secondary-dark);background:#E9FAF7;border-radius:10px}

.outcome-card strong{display:block;margin-top:11px;color:var(--navy);font-size:12px}

.side-info{display:grid;gap:13px}

.info-row{display:flex;gap:13px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:15px}

.info-row i{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:11px}

.info-row strong{display:block;color:var(--navy);font-size:12px}

.info-row span{font-size:10px;color:var(--muted)}

.module-list{display:grid;gap:13px;max-width:950px;margin:auto}

.module{display:grid;grid-template-columns:55px 1fr auto;gap:16px;align-items:center;padding:19px;background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow-sm)}

.module-no{width:47px;height:47px;display:grid;place-items:center;color:#fff;background:var(--primary);border-radius:13px;font-weight:900}

.module h3{margin:0 0 4px;font-size:16px}

.module p{margin:0;color:var(--muted);font-size:11px}

.module-time{padding:6px 9px;color:var(--primary-dark);background:var(--primary-light);border-radius:8px;font-size:9px;font-weight:800}

.learning-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}

.learning-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm)}

.learning-card i{width:42px;height:42px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:12px}

.learning-card h3{margin:15px 0 7px;font-size:16px}

.learning-card p{margin:0;color:var(--muted);font-size:10px}

.enroll-wrap{display:grid;grid-template-columns:1fr .8fr;gap:24px}

.enroll-card{padding:31px;background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow-sm)}

.enroll-card.featured{color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));border:0}

.enroll-card.featured h2,.enroll-card.featured h3{color:#fff}

.enroll-card.featured p{color:rgba(255,255,255,.7)}

.check-list{display:grid;gap:9px;margin:20px 0;padding:0;list-style:none}

.check-list li{display:flex;gap:9px;font-size:12px}

.check-list li:before{content:"✓";color:var(--secondary);font-weight:900}

.faq-wrap{max-width:880px;margin:auto}

.faq-item{margin-bottom:10px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}

.faq-q{width:100%;display:flex;justify-content:space-between;gap:18px;padding:19px 21px;border:0;background:#fff;color:var(--navy);font-weight:800;text-align:left}

.faq-a{display:none;padding:0 21px 20px;color:var(--muted);font-size:12px}

.faq-item.open .faq-a{display:block}

.faq-item.open .faq-plus{transform:rotate(45deg)}

.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.related{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:19px;box-shadow:var(--shadow-sm)}

.related-cover{min-height:135px;padding:18px;display:flex;align-items:end}

.related-cover h3{margin:0;color:#fff;font-size:17px}

.related-body{padding:18px}

.related-body p{color:var(--muted);font-size:10px}

.related-body a{color:var(--primary);font-size:11px;font-weight:800}

.site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:65px 0 44px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:44px}

.footer-brand p{font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:17px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:9px}

.footer-links a{font-size:12px}

.footer-contact{display:grid;gap:7px;font-size:11px}

.footer-bottom{padding:18px 0;border-top:1px solid rgba(255,255,255,.1);font-size:10px}

@media(max-width:1000px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:block}
.detail-grid,.overview-grid,.enroll-wrap{grid-template-columns:1fr}
.preview-card{max-width:650px}
.learning-grid{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.container{width:min(100% - 28px,var(--container))}
.section{padding:66px 0}
.brand-copy small{display:none}
.header-inner{min-height:74px}
.brand-logo{width:43px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.detail-hero{padding:116px 0 58px}
.detail-hero h1{font-size:41px}
.preview-cover{min-height:340px}
.sticky-nav{top:74px}
.outcome-grid,.learning-grid,.related-grid,.footer-grid{grid-template-columns:1fr}
.module{grid-template-columns:47px 1fr}
.module-time{display:none}
.footer-grid{gap:30px}
}

:root{
      --primary:#6757D9;
      --primary-dark:#342A78;
      --primary-light:#F1EFFF;
      --secondary:#00B7A8;
      --secondary-dark:#087E76;
      --accent:#FFC95C;
      --navy:#17143D;
      --text:#44445B;
      --muted:#737388;
      --line:#E8E7F1;
      --white:#FFFFFF;
      --page:#FAFAFF;
      --success:#208A69;
      --danger:#C04A67;
      --shadow:0 22px 60px rgba(31,27,82,.10);
      --shadow-sm:0 12px 30px rgba(31,27,82,.08);
      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
      --container:1180px;
    }

*{box-sizing:border-box}

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

body{
      margin:0;
      color:var(--text);
      background:var(--page);
      font-family:"Inter",Arial,sans-serif;
      line-height:1.7;
      overflow-x:hidden;
    }

body.menu-open{overflow:hidden}

img,svg{max-width:100%;display:block}

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

button,input,select,textarea{font:inherit}

button{cursor:pointer}

h1,h2,h3,h4,p{margin-top:0}

h1,h2,h3,h4{
      color:var(--navy);
      font-family:"Manrope",sans-serif;
      letter-spacing:-.025em;
    }

.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}

.section{padding:96px 0}

.section-soft{background:linear-gradient(180deg,#F8F7FF 0%,#FFFFFF 100%)}

.section-dark{color:#fff;background:var(--navy)}

.section-dark h2,.section-dark h3,.section-dark h4{color:#fff}

.section-head{max-width:760px;margin:0 auto 48px;text-align:center}

.section-head.left{margin-left:0;text-align:left}

.section-head h2{
      margin:14px 0 15px;
      font-size:clamp(31px,4vw,48px);
      line-height:1.14;
    }

.section-head p{color:var(--muted);font-size:16px}

.section-dark .section-head p{color:rgba(255,255,255,.68)}

.eyebrow{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:7px 12px;
      color:var(--primary-dark);
      background:#fff;
      border:1px solid rgba(103,87,217,.17);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.10em;
      text-transform:uppercase;
    }

.eyebrow::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:var(--secondary);
      box-shadow:0 0 0 5px rgba(0,183,168,.12);
    }

.section-dark .eyebrow{
      color:#fff;background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.12);
    }

.btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 21px;
      border:1px solid transparent;
      border-radius:13px;
      font-weight:750;
      transition:.22s ease;
    }

.btn:hover{transform:translateY(-2px)}

.btn-primary{
      color:#fff;background:var(--primary);
      box-shadow:0 12px 28px rgba(103,87,217,.28);
    }

.btn-primary:hover{background:#5747C8}

.btn-secondary{color:#fff;background:var(--secondary)}

.btn-light{color:var(--primary-dark);background:#fff}

.btn-outline{
      color:var(--primary-dark);
      background:rgba(255,255,255,.75);
      border-color:#DCD9F0;
    }

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.icon-arrow{font-size:18px;line-height:1}

.tag{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      color:var(--primary-dark);
      background:var(--primary-light);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
    }

/* Header */
    .site-header{
      position:fixed;top:0;left:0;right:0;z-index:100;
      background:rgba(255,255,255,.92);
      border-bottom:1px solid rgba(232,231,241,.86);
      backdrop-filter:blur(17px);
      transition:.25s ease;
    }

.site-header.scrolled{box-shadow:0 9px 28px rgba(31,27,82,.08)}

.header-inner{
      min-height:82px;
      display:flex;align-items:center;justify-content:space-between;gap:24px;
    }

.brand{display:inline-flex;align-items:center;gap:12px;min-width:max-content}

.brand-logo{width:49px;height:49px;filter:drop-shadow(0 10px 14px rgba(103,87,217,.20))}

.brand-copy strong{
      display:block;color:var(--navy);
      font:800 19px/1.1 "Manrope",sans-serif;
    }

.brand-copy small{
      display:block;margin-top:5px;color:var(--muted);
      font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    }

.desktop-nav{display:flex;align-items:center;gap:4px}

.nav-item{position:relative}

.nav-link{
      display:flex;align-items:center;gap:6px;
      padding:12px 13px;
      color:#48475F;
      border-radius:10px;
      font-size:13px;font-weight:700;
      transition:.18s ease;
    }

.nav-link:hover,.nav-link.active{color:var(--primary);background:var(--primary-light)}

.chevron{font-size:10px;transition:.18s}

.nav-item:hover .chevron{transform:rotate(180deg)}

.dropdown{
      position:absolute;top:calc(100% + 12px);left:0;
      width:300px;padding:10px;
      background:#fff;border:1px solid var(--line);
      border-radius:18px;box-shadow:var(--shadow);
      opacity:0;visibility:hidden;transform:translateY(9px);
      transition:.18s ease;
    }

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}

.dropdown.wide{width:680px;display:grid;grid-template-columns:1fr 1fr;gap:6px}

.drop-link{
      display:flex;gap:12px;padding:12px;
      border-radius:12px;transition:.18s;
    }

.drop-link:hover{background:var(--primary-light)}

.drop-icon{
      flex:0 0 auto;width:38px;height:38px;border-radius:11px;
      display:grid;place-items:center;
      color:var(--primary);background:#F3F1FF;font-size:17px;
    }

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span{display:block;margin-top:2px;color:var(--muted);font-size:11px;line-height:1.45}

.header-action{display:flex;align-items:center;gap:9px}

.menu-toggle{
      display:none;width:45px;height:45px;
      border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--navy);
    }

/* Mobile menu */
    .mobile-panel{
      display:none;
      position:fixed;inset:82px 0 0;z-index:99;
      padding:18px 20px 35px;
      background:#fff;overflow:auto;
    }

.mobile-panel.open{display:block}

.mobile-group{border-bottom:1px solid var(--line)}

.mobile-main{
      width:100%;display:flex;align-items:center;justify-content:space-between;
      padding:15px 4px;border:0;background:none;color:var(--navy);font-weight:800;text-align:left;
    }

.mobile-sub{display:none;padding:0 0 12px 12px}

.mobile-sub.open{display:grid}

.mobile-sub a{padding:9px 8px;color:var(--muted);font-size:14px}

.mobile-login{margin-top:20px;width:100%}

/* Hero */
    .hero{
      position:relative;overflow:hidden;
      padding:156px 0 82px;
      background:
        radial-gradient(circle at 14% 23%,rgba(0,183,168,.14),transparent 27%),
        radial-gradient(circle at 87% 20%,rgba(255,201,92,.20),transparent 24%),
        linear-gradient(135deg,#F4F1FF 0%,#FFFFFF 52%,#EDFBF9 100%);
    }

.hero::before{
      content:"";position:absolute;left:-110px;bottom:-145px;
      width:360px;height:360px;border:52px solid rgba(103,87,217,.055);border-radius:50%;
    }

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:62px;align-items:center}

.hero h1{
      margin:20px 0 19px;
      font-size:clamp(42px,5.4vw,69px);
      line-height:1.05;
    }

.gradient-text{
      background:linear-gradient(90deg,var(--primary),var(--secondary-dark));
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }

.hero-lead{max-width:690px;color:#626278;font-size:17px}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px}

.hero-proof{display:flex;flex-wrap:wrap;gap:16px;margin-top:31px}

.proof-item{display:flex;align-items:center;gap:9px;color:#5D5C72;font-size:12px;font-weight:700}

.proof-icon{
      width:28px;height:28px;display:grid;place-items:center;
      color:var(--secondary-dark);background:#E9FAF7;border-radius:9px;
    }

.hero-visual{position:relative;min-height:530px}

.visual-main{
      position:absolute;inset:18px 6px 18px 40px;
      padding:22px;
      background:rgba(255,255,255,.78);
      border:1px solid rgba(255,255,255,.95);
      border-radius:34px;box-shadow:var(--shadow);
      backdrop-filter:blur(15px);
    }

.dashboard{
      height:100%;padding:22px;
      background:linear-gradient(150deg,#282162,#17143D);
      border-radius:25px;overflow:hidden;
    }

.dash-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}

.dash-brand{display:flex;align-items:center;gap:9px;color:#fff;font-size:12px;font-weight:800}

.dash-dots{display:flex;gap:5px}

.dash-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}

.dash-hero{
      padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.62),rgba(0,183,168,.36));
      border:1px solid rgba(255,255,255,.12);border-radius:19px;
    }

.dash-label{color:#D9D4FF;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.dash-hero h3{margin:8px 0 7px;color:#fff;font-size:25px;line-height:1.2}

.dash-hero p{margin:0;color:rgba(255,255,255,.68);font-size:11px}

.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}

.dash-stat{padding:13px;background:rgba(255,255,255,.07);border-radius:13px}

.dash-stat strong{display:block;color:#fff;font-size:16px}

.dash-stat span{color:rgba(255,255,255,.55);font-size:9px}

.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}

.dash-card{padding:16px;background:#fff;border-radius:16px}

.dash-card h4{margin-bottom:10px;font-size:12px}

.progress{height:7px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.mini-list{display:grid;gap:8px}

.mini-row{display:flex;align-items:center;gap:8px}

.mini-row i{width:9px;height:9px;border-radius:3px;background:var(--secondary)}

.mini-row span{font-size:9px;color:var(--muted)}

.float-card{
      position:absolute;z-index:2;display:flex;align-items:center;gap:12px;
      padding:14px 17px;background:#fff;border:1px solid var(--line);
      border-radius:16px;box-shadow:var(--shadow-sm);
    }

.float-card.one{left:0;top:88px}

.float-card.two{right:-10px;bottom:75px}

.float-card.three{left:10px;bottom:15px}

.float-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--primary-light);color:var(--primary)}

.float-card strong{display:block;color:var(--navy);font-size:12px}

.float-card small{display:block;color:var(--muted);font-size:9px}

/* Trust strip */
    .trust-strip{position:relative;z-index:3;margin-top:-1px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.trust-inner{display:grid;grid-template-columns:1.15fr repeat(4,1fr);align-items:center;gap:20px;padding:25px 0}

.trust-copy strong{display:block;color:var(--navy);font-size:13px}

.trust-copy span{color:var(--muted);font-size:11px}

.trust-item{display:flex;align-items:center;justify-content:center;gap:9px;color:#69677D;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}

.trust-mark{width:32px;height:32px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:10px}

/* Solution cards */
    .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

.service-card{
      position:relative;overflow:hidden;
      min-height:310px;padding:28px;
      background:#fff;border:1px solid var(--line);
      border-radius:var(--radius-lg);box-shadow:0 12px 35px rgba(31,27,82,.055);
      transition:.25s ease;
    }

.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}

.service-card::after{
      content:"";position:absolute;right:-45px;bottom:-50px;width:145px;height:145px;
      border:27px solid rgba(103,87,217,.055);border-radius:50%;
    }

.card-icon{
      width:54px;height:54px;display:grid;place-items:center;
      color:var(--primary);background:var(--primary-light);
      border-radius:16px;font-size:24px;
    }

.service-card:nth-child(2n) .card-icon{color:var(--secondary-dark);background:#E9FAF7}

.service-card:nth-child(3n) .card-icon{color:#9A6C0F;background:#FFF6DE}

.service-card h3{margin:21px 0 11px;font-size:21px}

.service-card p{color:var(--muted);font-size:13px}

.card-list{display:grid;gap:8px;margin:18px 0 20px;padding:0;list-style:none}

.card-list li{display:flex;gap:9px;color:#55546A;font-size:12px}

.card-list li::before{content:"✓";color:var(--secondary-dark);font-weight:900}

.text-link{position:relative;z-index:2;color:var(--primary);font-size:12px;font-weight:800}

.text-link:hover{text-decoration:underline}

/* Split */
    .split{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}

.feature-visual{
      position:relative;min-height:520px;padding:33px;
      background:linear-gradient(145deg,#F0EDFF,#EAFBF8);
      border:1px solid #E2DFF7;border-radius:32px;
    }

.feature-screen{
      position:absolute;inset:48px 32px 34px 57px;padding:22px;
      background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow);
    }

.screen-nav{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}

.screen-title{font-size:11px;font-weight:800;color:var(--navy)}

.screen-pill{padding:5px 9px;color:var(--secondary-dark);background:#E8FAF7;border-radius:99px;font-size:8px;font-weight:800}

.chart-area{display:flex;align-items:flex-end;gap:10px;height:155px;padding:25px 10px 8px;border-bottom:1px solid var(--line)}

.bar{flex:1;min-width:15px;background:linear-gradient(180deg,var(--primary),#9488EC);border-radius:7px 7px 2px 2px}

.screen-bottom{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px}

.screen-box{padding:14px;background:#FAFAFF;border:1px solid var(--line);border-radius:13px}

.screen-box strong{display:block;color:var(--navy);font-size:19px}

.screen-box span{color:var(--muted);font-size:9px}

.feature-chip{
      position:absolute;display:flex;align-items:center;gap:9px;padding:12px 14px;
      background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);
    }

.feature-chip.one{top:21px;right:18px}

.feature-chip.two{left:12px;bottom:53px}

.feature-chip i{width:32px;height:32px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.feature-chip strong{display:block;color:var(--navy);font-size:10px}

.feature-chip span{display:block;color:var(--muted);font-size:8px}

.feature-copy h2{margin:14px 0 16px;font-size:clamp(31px,4vw,48px);line-height:1.14}

.feature-copy>p{color:var(--muted)}

.feature-points{display:grid;gap:16px;margin:27px 0 30px}

.feature-point{display:flex;gap:14px}

.point-icon{flex:0 0 auto;width:39px;height:39px;display:grid;place-items:center;color:var(--secondary-dark);background:#E9FAF7;border-radius:12px;font-weight:900}

.feature-point strong{display:block;color:var(--navy);font-size:13px}

.feature-point span{display:block;margin-top:2px;color:var(--muted);font-size:11px}

/* Innovation */
    .innovation-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:25px}

.innovation-main{
      min-height:480px;padding:34px;
      color:#fff;background:linear-gradient(145deg,var(--primary-dark),var(--primary));
      border-radius:29px;overflow:hidden;position:relative;
    }

.innovation-main h3{max-width:540px;margin:18px 0 14px;color:#fff;font-size:32px;line-height:1.17}

.innovation-main p{max-width:610px;color:rgba(255,255,255,.74)}

.innovation-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}

.innovation-tags span{padding:8px 11px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.13);border-radius:99px;font-size:10px;font-weight:800}

.ai-orbit{position:absolute;right:-35px;bottom:-72px;width:330px;height:330px;border:1px solid rgba(255,255,255,.15);border-radius:50%}

.ai-orbit::before,.ai-orbit::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%}

.ai-orbit::before{inset:45px}

.ai-orbit::after{inset:93px}

.ai-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:83px;height:83px;display:grid;place-items:center;color:var(--primary-dark);background:#fff;border-radius:24px;font:800 25px "Manrope"}

.orbit-dot{position:absolute;width:36px;height:36px;display:grid;place-items:center;color:#fff;background:var(--secondary);border-radius:12px;font-size:13px}

.orbit-dot.a{left:39px;top:57px}

.orbit-dot.b{right:18px;top:115px}

.orbit-dot.c{left:72px;bottom:27px}

.innovation-side{display:grid;gap:20px}

.example-card{padding:25px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.example-head{display:flex;align-items:center;justify-content:space-between;gap:15px}

.example-head h3{margin:0;font-size:18px}

.example-card p{margin:12px 0 15px;color:var(--muted);font-size:12px}

.example-meta{display:flex;flex-wrap:wrap;gap:7px}

.example-meta span{padding:6px 9px;color:#65637A;background:#F5F4FA;border-radius:8px;font-size:9px;font-weight:750}

/* Foundation */
    .foundation-card{
      position:relative;overflow:hidden;padding:33px;
      background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-sm);
    }

.foundation-card.education{background:linear-gradient(145deg,#FFFFFF,#F3F0FF)}

.foundation-card.umkm{background:linear-gradient(145deg,#FFFFFF,#EBFAF7)}

.foundation-card h3{margin:19px 0 11px;font-size:27px}

.foundation-card p{color:var(--muted);font-size:13px}

.foundation-programs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:24px 0}

.program-mini{padding:13px;background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:13px}

.program-mini strong{display:block;color:var(--navy);font-size:11px}

.program-mini span{display:block;margin-top:3px;color:var(--muted);font-size:9px}

/* Journey */
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.step{
      position:relative;padding:25px 22px;background:#fff;border:1px solid var(--line);border-radius:20px;
    }

.step-no{
      width:41px;height:41px;display:grid;place-items:center;
      color:#fff;background:var(--primary);border-radius:13px;font-weight:800;
    }

.step h3{margin:17px 0 8px;font-size:17px}

.step p{color:var(--muted);font-size:11px}

.step:not(:last-child)::after{
      content:"→";position:absolute;right:-17px;top:32px;z-index:3;color:#B3AEE2;font-size:22px;font-weight:900;
    }

/* Curriculum */
    .curriculum-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:30px}

.tab-btn{
      min-height:41px;padding:0 15px;border:1px solid var(--line);border-radius:11px;
      color:var(--muted);background:#fff;font-size:11px;font-weight:800;
    }

.tab-btn.active{color:#fff;background:var(--primary);border-color:var(--primary)}

.curriculum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.curriculum-item{padding:21px;background:#fff;border:1px solid var(--line);border-radius:17px}

.curriculum-item .num{color:var(--primary);font-size:10px;font-weight:900}

.curriculum-item h3{margin:8px 0 7px;font-size:15px;line-height:1.35}

.curriculum-item p{margin:0;color:var(--muted);font-size:10px}

/* App */
    .app-wrap{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr .92fr;gap:55px;align-items:center;
      padding:50px 55px;color:#fff;
      background:linear-gradient(135deg,#211A58,#6757D9);
      border-radius:34px;
    }

.app-wrap h2{margin:14px 0 14px;color:#fff;font-size:clamp(30px,4vw,47px);line-height:1.15}

.app-wrap p{color:rgba(255,255,255,.70)}

.store-row{display:flex;flex-wrap:wrap;gap:11px;margin-top:25px}

.store-badge{
      display:flex;align-items:center;gap:11px;min-width:175px;padding:10px 14px;
      color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
      border-radius:13px;
    }

.store-badge svg{width:28px;height:28px}

.store-badge small{display:block;color:rgba(255,255,255,.60);font-size:8px;text-transform:uppercase;letter-spacing:.08em}

.store-badge strong{display:block;font-size:12px}

.phone-scene{position:relative;min-height:420px}

.phone{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(5deg);
      width:230px;height:420px;padding:9px;background:#111026;border:2px solid rgba(255,255,255,.25);
      border-radius:35px;box-shadow:0 28px 55px rgba(0,0,0,.32);
    }

.phone-screen{height:100%;padding:19px 15px;background:linear-gradient(180deg,#F5F2FF,#fff);border-radius:27px;overflow:hidden}

.notch{width:76px;height:17px;margin:-11px auto 15px;background:#111026;border-radius:0 0 13px 13px}

.mobile-logo{display:flex;align-items:center;gap:7px;color:var(--navy);font-size:9px;font-weight:900}

.mobile-logo svg{width:25px}

.mobile-welcome{margin-top:18px;padding:16px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:17px}

.mobile-welcome strong{display:block;font-size:13px}

.mobile-welcome span{font-size:8px;opacity:.78}

.mobile-course-title{margin:16px 0 9px;color:var(--navy);font-size:10px;font-weight:900}

.mobile-course{display:flex;gap:9px;margin-bottom:8px;padding:9px;background:#fff;border:1px solid var(--line);border-radius:11px}

.mobile-thumb{width:42px;height:38px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:8px;font-size:12px}

.mobile-course strong{display:block;color:var(--navy);font-size:8px}

.mobile-course span{display:block;color:var(--muted);font-size:6px}

.app-float{position:absolute;padding:13px 16px;background:#fff;border-radius:15px;box-shadow:var(--shadow)}

.app-float.a{left:5%;top:21%}

.app-float.b{right:3%;bottom:15%}

.app-float strong{display:block;color:var(--navy);font-size:10px}

.app-float span{color:var(--muted);font-size:8px}

/* About */
    .about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:29px}

.about-stat{padding:20px;background:#fff;border:1px solid var(--line);border-radius:16px}

.about-stat strong{display:block;color:var(--primary);font:800 24px "Manrope"}

.about-stat span{color:var(--muted);font-size:10px}

.about-note{padding:20px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 14px 14px 0;font-size:12px}

/* FAQ */
    .faq-wrap{max-width:880px;margin:0 auto}

.faq-item{margin-bottom:11px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}

.faq-q{
      width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
      padding:19px 21px;border:0;background:#fff;color:var(--navy);font-weight:800;text-align:left;
    }

.faq-plus{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:9px}

.faq-a{display:none;padding:0 21px 20px;color:var(--muted);font-size:12px}

.faq-item.open .faq-a{display:block}

.faq-item.open .faq-plus{transform:rotate(45deg)}

/* CTA */
    .final-cta{padding:78px 0}

.cta-box{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center;
      padding:42px 48px;color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));
      border-radius:30px;
    }

.cta-box::after{content:"";position:absolute;right:-80px;top:-110px;width:270px;height:270px;border:45px solid rgba(255,255,255,.07);border-radius:50%}

.cta-box h2{margin-bottom:9px;color:#fff;font-size:clamp(28px,4vw,43px)}

.cta-box p{margin:0;color:rgba(255,255,255,.70)}

.cta-actions{position:relative;z-index:2;display:flex;gap:10px;flex-wrap:wrap}

/* Footer */
    .site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:68px 0 46px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:48px}

.footer-brand p{max-width:390px;margin:19px 0 22px;font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:18px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:10px}

.footer-links a{font-size:12px;transition:.18s}

.footer-links a:hover{color:#fff;transform:translateX(3px)}

.footer-contact{display:grid;gap:10px;margin-top:18px}

.contact-row{display:flex;gap:10px;font-size:11px}

.contact-row i{font-style:normal;color:#AFA6FF}

.newsletter{display:flex;max-width:395px;margin-top:17px;padding:5px;background:#fff;border-radius:12px}

.newsletter input{width:100%;min-width:0;padding:0 12px;border:0;outline:0;font-size:11px}

.newsletter button{width:43px;border:0;border-radius:9px;color:#fff;background:var(--primary)}

.footer-bottom{padding:19px 0;border-top:1px solid rgba(255,255,255,.09);font-size:10px}

.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}

.footer-legal{display:flex;flex-wrap:wrap;gap:15px}

/* Floating WA */
    .floating-help{
      position:fixed;right:22px;bottom:22px;z-index:90;
      display:flex;align-items:center;gap:10px;padding:11px 15px;
      color:#fff;background:#1FAF6D;border-radius:99px;
      box-shadow:0 15px 35px rgba(16,119,73,.28);font-size:11px;font-weight:800;
    }

.floating-help span:first-child{font-size:19px}

/* Utilities */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:1060px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:grid;place-items:center}
.hero-grid,.split,.innovation-grid,.app-wrap{grid-template-columns:1fr}
.hero-visual{max-width:650px;width:100%;margin:0 auto}
.cards-3{grid-template-columns:repeat(2,1fr)}
.curriculum-grid{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(2,1fr)}
.step:nth-child(2)::after{display:none}
.footer-grid{grid-template-columns:repeat(2,1fr)}
.trust-inner{grid-template-columns:repeat(2,1fr)}
.trust-copy{grid-column:1/-1;text-align:center}
}

@media(max-width:700px){
.container{width:min(100% - 28px,var(--container))}
.section{padding:69px 0}
.brand-copy small{display:none}
.brand-logo{width:43px;height:43px}
.header-inner{min-height:74px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.hero{padding:124px 0 60px}
.hero h1{font-size:43px}
.hero-lead{font-size:15px}
.hero-visual{min-height:460px}
.visual-main{inset:12px 0 28px 20px}
.float-card.one{left:-4px;top:52px}
.float-card.two{right:-4px}
.float-card.three{display:none}
.dash-stats{grid-template-columns:1fr}
.dash-stat:nth-child(n+2){display:none}
.cards-3,.cards-2,.foundation-programs,.curriculum-grid,.about-stats,.steps,.footer-grid{grid-template-columns:1fr}
.step::after{display:none!important}
.feature-visual{min-height:445px;padding:20px}
.feature-screen{inset:44px 15px 25px 37px}
.innovation-main{min-height:520px}
.app-wrap{padding:35px 22px}
.phone-scene{min-height:390px}
.app-float.a{left:-10px}
.app-float.b{right:-10px}
.trust-inner{grid-template-columns:1fr 1fr}
.trust-item{font-size:9px}
.cta-box{grid-template-columns:1fr;padding:34px 25px}
.cta-actions{align-items:stretch;flex-direction:column}
.footer-bottom-inner{align-items:flex-start;flex-direction:column}
.floating-help{right:14px;bottom:14px;padding:11px}
.floating-help span:last-child{display:none}
}

/* Online Classes */
    .course-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:20px;
    }

.course-card{
      overflow:hidden;
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:var(--shadow-sm);
      transition:.24s ease;
    }

.course-card:hover{
      transform:translateY(-5px);
      box-shadow:var(--shadow);
    }

.course-cover{
      position:relative;
      min-height:180px;
      padding:22px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      color:#fff;
      overflow:hidden;
    }

.course-cover::after{
      content:"";
      position:absolute;
      right:-35px;
      bottom:-45px;
      width:135px;
      height:135px;
      border:24px solid rgba(255,255,255,.10);
      border-radius:50%;
    }

.course-cover.one{background:linear-gradient(135deg,#3A2F87,#6757D9)}

.course-cover.two{background:linear-gradient(135deg,#087E76,#00B7A8)}

.course-cover.three{background:linear-gradient(135deg,#8A5F13,#E0A832)}

.course-cover.four{background:linear-gradient(135deg,#8B3E62,#C04A67)}

.course-label{
      position:relative;
      z-index:1;
      align-self:flex-start;
      padding:6px 9px;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.17);
      border-radius:999px;
      font-size:9px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

.course-cover h3{
      position:relative;
      z-index:1;
      margin:28px 0 0;
      color:#fff;
      font-size:20px;
      line-height:1.28;
    }

.course-body{padding:21px}

.course-meta{
      display:flex;
      flex-wrap:wrap;
      gap:7px;
      margin-bottom:13px;
    }

.course-meta span{
      padding:5px 8px;
      color:var(--muted);
      background:#F5F4FA;
      border-radius:8px;
      font-size:9px;
      font-weight:750;
    }

.course-body p{
      margin-bottom:17px;
      color:var(--muted);
      font-size:12px;
    }

.course-actions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

.course-status{
      color:var(--secondary-dark);
      font-size:10px;
      font-weight:800;
    }

.course-more{
      margin-top:31px;
      text-align:center;
    }

@media(max-width:1060px){
.course-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.course-grid{grid-template-columns:1fr}
}

/* Banking Solution page */
    .solution-hero{padding-bottom:92px}

.solution-hero .hero-grid{grid-template-columns:1fr .96fr}

.solution-kicker{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}

.solution-kicker span{padding:7px 10px;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px;font-weight:800}

.solution-board{height:100%;padding:25px;background:linear-gradient(150deg,#282162,#17143D);border-radius:25px;overflow:hidden}

.board-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:#fff;font-size:12px;font-weight:800}

.board-status{padding:5px 8px;color:#B9FFF6;background:rgba(0,183,168,.15);border-radius:99px;font-size:8px}

.board-focus{padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.72),rgba(0,183,168,.35));border:1px solid rgba(255,255,255,.12);border-radius:18px}

.board-focus small{color:#D9D4FF;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

.board-focus h3{margin:7px 0 8px;color:#fff;font-size:23px}

.board-focus p{margin:0;color:rgba(255,255,255,.67);font-size:10px}

.board-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:13px}

.board-card{padding:15px;background:#fff;border-radius:14px}

.board-card strong{display:block;color:var(--navy);font-size:11px}

.board-card span{display:block;margin-top:3px;color:var(--muted);font-size:8px}

.board-meter{height:6px;margin-top:11px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.board-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.quick-nav{position:relative;z-index:4;margin-top:-31px}

.quick-nav-inner{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden}

.quick-nav a{display:flex;align-items:center;gap:11px;padding:19px;border-right:1px solid var(--line);transition:.18s}

.quick-nav a:last-child{border-right:0}

.quick-nav a:hover{background:var(--primary-light)}

.quick-nav i{width:34px;height:34px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.quick-nav strong{display:block;color:var(--navy);font-size:11px}

.quick-nav span span{display:block;color:var(--muted);font-size:8px}

.challenge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.challenge-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:19px}

.challenge-no{color:var(--primary);font-size:10px;font-weight:900}

.challenge-card h3{margin:9px 0 8px;font-size:16px}

.challenge-card p{margin:0;color:var(--muted);font-size:11px}

.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.solution-card{position:relative;overflow:hidden;padding:27px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm);transition:.22s}

.solution-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}

.solution-card .card-icon{width:50px;height:50px;font-size:20px}

.solution-card h3{margin:18px 0 9px;font-size:19px}

.solution-card p{color:var(--muted);font-size:12px}

.solution-card ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}

.solution-card li{display:flex;gap:8px;color:#57566B;font-size:10px}

.solution-card li:before{content:'✓';color:var(--secondary-dark);font-weight:900}

.method-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}

.method-panel{padding:30px;background:linear-gradient(145deg,#241D60,#6757D9);border-radius:28px;color:#fff}

.method-panel h3{color:#fff;font-size:27px}

.method-panel p{color:rgba(255,255,255,.68);font-size:12px}

.method-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}

.method-stat{padding:15px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.11);border-radius:14px}

.method-stat strong{display:block;color:#fff;font-size:13px}

.method-stat span{font-size:8px;color:rgba(255,255,255,.58)}

.process-list{display:grid;gap:13px}

.process-item{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:17px;background:#fff;border:1px solid var(--line);border-radius:17px}

.process-number{width:42px;height:42px;display:grid;place-items:center;color:#fff;background:var(--primary);border-radius:12px;font-weight:900}

.process-item h3{margin:0 0 4px;font-size:15px}

.process-item p{margin:0;color:var(--muted);font-size:10px}

.deliverable-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}

.deliverable{padding:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.11);border-radius:18px}

.deliverable i{display:grid;place-items:center;width:39px;height:39px;font-style:normal;background:rgba(255,255,255,.1);border-radius:11px}

.deliverable h3{margin:15px 0 7px;font-size:16px}

.deliverable p{margin:0;color:rgba(255,255,255,.63);font-size:10px}

.principle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.principle{padding:21px;background:#fff;border:1px solid var(--line);border-radius:18px}

.principle strong{display:block;color:var(--navy);font-size:13px}

.principle p{margin:7px 0 0;color:var(--muted);font-size:10px}

.notice-box{margin-top:24px;padding:20px 22px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 15px 15px 0;font-size:11px}

@media(max-width:1060px){
.quick-nav-inner,.challenge-grid,.principle-grid{grid-template-columns:repeat(2,1fr)}
.solution-grid,.deliverable-grid{grid-template-columns:repeat(2,1fr)}
.method-wrap{grid-template-columns:1fr}
}

@media(max-width:700px){
.quick-nav{margin-top:-18px}
.quick-nav-inner,.challenge-grid,.solution-grid,.deliverable-grid,.principle-grid{grid-template-columns:1fr}
.quick-nav a{border-right:0;border-bottom:1px solid var(--line)}
.quick-nav a:last-child{border-bottom:0}
.solution-hero .hero-grid{grid-template-columns:1fr}
}

/* =========================================================
       Bakti Pendidikan — refined lower-page design system
       ========================================================= */
    #program .section-head,
    #model-kolaborasi .method-copy,
    #tahapan .section-head,
    #pengukuran .section-head,
    #model-program .section-head,
    #output .section-head,
    #ketentuan .section-head,
    #faq .section-head{max-width:790px}

#program .section-head p,
    #tahapan .section-head p,
    #model-program .section-head p,
    #output .section-head p,
    #ketentuan .section-head p,
    #faq .section-head p{
      max-width:720px;
      margin-inline:auto;
      font-size:15px;
      line-height:1.75;
    }

/* Program scope cards */
    .service-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:22px;
      align-items:stretch;
    }

.service-grid .solution-card{
      min-height:100%;
      display:flex;
      flex-direction:column;
      padding:28px;
      border-radius:24px;
      background:linear-gradient(160deg,#FFFFFF 0%,#FCFBFF 100%);
      border:1px solid var(--line);
      box-shadow:0 14px 38px rgba(31,27,82,.065);
    }

.service-grid .solution-card::after{
      content:"";
      position:absolute;
      right:-54px;
      bottom:-59px;
      width:154px;
      height:154px;
      border:28px solid rgba(103,87,217,.045);
      border-radius:50%;
      pointer-events:none;
    }

.solution-icon{
      position:relative;
      z-index:1;
      width:56px;
      height:56px;
      display:grid;
      place-items:center;
      border-radius:17px;
      color:var(--primary);
      background:var(--primary-light);
      font-size:23px;
      font-weight:800;
      box-shadow:inset 0 0 0 1px rgba(103,87,217,.07);
    }

.service-grid .solution-card:nth-child(2) .solution-icon,
    .service-grid .solution-card:nth-child(5) .solution-icon{
      color:var(--secondary-dark);
      background:#E9FAF7;
    }

.service-grid .solution-card:nth-child(3) .solution-icon,
    .service-grid .solution-card:nth-child(6) .solution-icon{
      color:#94670E;
      background:#FFF5DB;
    }

.service-grid .solution-card h3{
      margin:21px 0 10px;
      font-size:20px;
      line-height:1.3;
    }

.service-grid .solution-card>p{
      min-height:84px;
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.72;
    }

.service-grid .solution-card ul{
      position:relative;
      z-index:1;
      margin-top:auto;
      padding-top:19px;
      gap:10px;
    }

.service-grid .solution-card li{
      align-items:flex-start;
      color:#55546A;
      font-size:12px;
      line-height:1.55;
    }

.service-grid .solution-card li::before{
      flex:0 0 auto;
      width:19px;
      height:19px;
      display:grid;
      place-items:center;
      margin-top:1px;
      color:var(--secondary-dark);
      background:#E9FAF7;
      border-radius:6px;
      font-size:10px;
    }

/* Collaboration section */
    .method-copy h2{
      margin:15px 0 16px;
      font-size:clamp(31px,4vw,47px);
      line-height:1.16;
    }

.method-copy>p{
      margin-bottom:27px;
      color:var(--muted);
      font-size:15px;
      line-height:1.78;
    }

#model-kolaborasi .feature-points{gap:13px;margin:0}

#model-kolaborasi .feature-point{
      padding:16px 17px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:17px;
      box-shadow:0 8px 24px rgba(31,27,82,.045);
    }

#model-kolaborasi .feature-point strong{font-size:14px}

#model-kolaborasi .feature-point span span{font-size:11px;line-height:1.6}

.method-panel{
      padding:32px;
      border-radius:29px;
      background:
        radial-gradient(circle at 90% 10%,rgba(0,183,168,.24),transparent 31%),
        linear-gradient(145deg,#241D60,#6757D9);
      box-shadow:var(--shadow);
    }

.method-title{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:16px;
      padding-bottom:20px;
      border-bottom:1px solid rgba(255,255,255,.13);
    }

.method-title span{
      color:#D9D4FF;
      font-size:10px;
      font-weight:800;
      letter-spacing:.1em;
      text-transform:uppercase;
    }

.method-title strong{color:#fff;font:800 20px/1.2 "Manrope",sans-serif}

.method-flow{display:grid;gap:11px;margin-top:20px}

.method-step{
      display:grid;
      grid-template-columns:45px 1fr;
      align-items:center;
      gap:13px;
      padding:14px;
      background:rgba(255,255,255,.085);
      border:1px solid rgba(255,255,255,.12);
      border-radius:15px;
    }

.method-step b{
      width:40px;height:40px;display:grid;place-items:center;
      color:#fff;background:rgba(255,255,255,.12);border-radius:11px;font-size:11px;
    }

.method-step strong{display:block;color:#fff;font-size:13px}

.method-step small{display:block;margin-top:2px;color:rgba(255,255,255,.62);font-size:9px}

.method-note{
      margin-top:18px;
      padding:15px 16px;
      color:rgba(255,255,255,.73);
      background:rgba(0,0,0,.12);
      border-left:3px solid var(--accent);
      border-radius:0 12px 12px 0;
      font-size:10px;
      line-height:1.65;
    }

/* Process cards */
    .process-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:19px;
    }

.process-card{
      position:relative;
      overflow:hidden;
      min-height:235px;
      padding:26px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:0 12px 32px rgba(31,27,82,.055);
      transition:.23s ease;
    }

.process-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}

.process-card>span{
      width:43px;height:43px;display:grid;place-items:center;
      color:#fff;background:var(--primary);border-radius:13px;
      font-size:11px;font-weight:900;
    }

.process-card:nth-child(2n)>span{background:var(--secondary-dark)}

.process-card:nth-child(3n)>span{background:#B37A15}

.process-card h3{margin:19px 0 9px;font-size:18px;line-height:1.35}

.process-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.7}

/* Impact cards */
    .impact-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:17px;
    }

.impact-card{
      display:grid;
      grid-template-columns:42px 1fr;
      gap:14px;
      min-height:150px;
      padding:22px;
      background:rgba(255,255,255,.075);
      border:1px solid rgba(255,255,255,.11);
      border-radius:19px;
      transition:.2s ease;
    }

.impact-card:hover{background:rgba(255,255,255,.105);transform:translateY(-3px)}

.impact-card>span{
      width:39px;height:39px;display:grid;place-items:center;
      color:#fff;background:rgba(255,255,255,.11);border-radius:11px;font-size:10px;font-weight:900;
    }

.impact-card strong{display:block;color:#fff;font:800 16px/1.35 "Manrope",sans-serif}

.impact-card p{margin:7px 0 0;color:rgba(255,255,255,.65);font-size:11px;line-height:1.65}

/* Standardize format program cards */
    #model-program .service-card{min-height:350px;display:flex;flex-direction:column}

#model-program .service-card p{min-height:68px;font-size:12px;line-height:1.7}

#model-program .card-list{margin-top:auto}

/* Output and principles */
    #output .principle-grid,
    #ketentuan .principle-grid{
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:18px;
    }

#output .principle,
    #ketentuan .principle{
      position:relative;
      overflow:hidden;
      display:grid;
      grid-template-columns:42px 1fr;
      gap:14px;
      min-height:186px;
      padding:24px;
      border-radius:21px;
      box-shadow:0 11px 30px rgba(31,27,82,.05);
      transition:.22s ease;
    }

#output .principle:hover,
    #ketentuan .principle:hover{transform:translateY(-4px);box-shadow:var(--shadow)}

#output .principle>span,
    #ketentuan .principle>span{
      width:39px;height:39px;display:grid;place-items:center;
      color:var(--primary);background:var(--primary-light);border-radius:11px;
      font-size:10px;font-weight:900;
    }

#ketentuan .principle>span{color:var(--secondary-dark);background:#E9FAF7;font-size:13px}

#output .principle strong,
    #ketentuan .principle strong{font-size:14px;line-height:1.45}

#output .principle p,
    #ketentuan .principle p{font-size:11px;line-height:1.67}

/* FAQ readability */
    #faq .faq-item{border-radius:18px;box-shadow:0 7px 22px rgba(31,27,82,.035)}

#faq .faq-q{padding:20px 22px;font-size:14px;line-height:1.5}

#faq .faq-a{padding:0 22px 21px;font-size:12px;line-height:1.72}

@media(max-width:1060px){
.service-grid,.process-grid,.impact-grid,
      #output .principle-grid,#ketentuan .principle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.service-grid .solution-card>p{min-height:auto}
}

@media(max-width:700px){
#program .section-head p,#tahapan .section-head p,#model-program .section-head p,
      #output .section-head p,#ketentuan .section-head p,#faq .section-head p{font-size:14px}
.service-grid,.process-grid,.impact-grid,
      #output .principle-grid,#ketentuan .principle-grid{grid-template-columns:1fr}
.service-grid .solution-card,.process-card{padding:23px}
.method-panel{padding:24px}
.method-title{align-items:flex-start;flex-direction:column}
#output .principle,#ketentuan .principle{min-height:auto;padding:21px}
#model-program .service-card{min-height:auto}
}

/* Curriculum Hub Page */
    .curriculum-hero{padding-bottom:102px}

.curriculum-hero .hero-grid{grid-template-columns:1.04fr .96fr}

.curriculum-board{height:100%;padding:24px;background:linear-gradient(150deg,#282162,#17143D);border-radius:25px;overflow:hidden}

.curriculum-board-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;color:#fff;font-size:12px;font-weight:800}

.curriculum-board-head span:last-child{padding:5px 9px;color:#B9FFF6;background:rgba(0,183,168,.14);border-radius:999px;font-size:8px}

.curriculum-focus{padding:22px;background:linear-gradient(135deg,rgba(103,87,217,.74),rgba(0,183,168,.37));border:1px solid rgba(255,255,255,.12);border-radius:19px}

.curriculum-focus small{color:#DCD7FF;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.curriculum-focus h3{margin:8px 0 7px;color:#fff;font-size:25px;line-height:1.2}

.curriculum-focus p{margin:0;color:rgba(255,255,255,.7);font-size:10px}

.level-row{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px}

.level-mini{padding:12px 10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.09);border-radius:13px}

.level-mini strong{display:block;color:#fff;font-size:11px}

.level-mini span{display:block;margin-top:2px;color:rgba(255,255,255,.55);font-size:7px}

.curriculum-board-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:13px}

.curriculum-board-card{padding:15px;background:#fff;border-radius:14px}

.curriculum-board-card strong{display:block;color:var(--navy);font-size:11px}

.curriculum-board-card span{display:block;margin-top:3px;color:var(--muted);font-size:8px}

.curriculum-meter{height:6px;margin-top:10px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.curriculum-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.quick-nav{position:relative;z-index:5;margin-top:-32px}

.quick-nav-inner{display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border:1px solid var(--line);border-radius:21px;box-shadow:var(--shadow-sm);overflow:hidden}

.quick-nav a{display:flex;align-items:center;gap:10px;padding:18px;border-right:1px solid var(--line);transition:.18s}

.quick-nav i{flex:0 0 auto;width:35px;height:35px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.level-card{position:relative;overflow:hidden;min-height:310px;padding:27px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm);transition:.22s}

.level-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}

.level-card::after{content:'';position:absolute;right:-42px;bottom:-50px;width:135px;height:135px;border:24px solid rgba(103,87,217,.05);border-radius:50%}

.level-badge{width:52px;height:52px;display:grid;place-items:center;color:#fff;background:var(--primary);border-radius:16px;font:800 17px 'Manrope'}

.level-card:nth-child(2) .level-badge{background:var(--secondary-dark)}

.level-card:nth-child(3) .level-badge{background:#B8861B}

.level-card:nth-child(4) .level-badge{background:var(--primary-dark)}

.level-card h3{margin:19px 0 9px;font-size:20px}

.level-card p{color:var(--muted);font-size:12px}

.clean-list{display:grid;gap:8px;margin:16px 0 0;padding:0;list-style:none}

.clean-list li{display:flex;gap:8px;color:#57566B;font-size:10px}

.clean-list li::before{content:'✓';color:var(--secondary-dark);font-weight:900}

.domain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.domain-card{display:flex;flex-direction:column;min-height:365px;padding:27px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm);transition:.22s}

.domain-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}

.domain-icon{width:51px;height:51px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:15px;font-size:20px}

.domain-card:nth-child(2n) .domain-icon{color:var(--secondary-dark);background:#E9FAF7}

.domain-card:nth-child(3n) .domain-icon{color:#94690E;background:#FFF5D9}

.domain-card h3{margin:18px 0 9px;font-size:19px}

.domain-card>p{color:var(--muted);font-size:12px}

.domain-topics{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:16px}

.domain-topics span{padding:6px 8px;color:#646278;background:#F5F4FA;border-radius:8px;font-size:8px;font-weight:750}

.path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.path-card{padding:25px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm)}

.path-head{display:flex;align-items:center;gap:13px}

.path-no{width:42px;height:42px;display:grid;place-items:center;color:#fff;background:var(--primary);border-radius:13px;font-weight:900}

.path-card:nth-child(2n) .path-no{background:var(--secondary-dark)}

.path-head h3{margin:0;font-size:17px}

.path-card p{margin:13px 0 0;color:var(--muted);font-size:11px}

.architecture-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center}

.architecture-panel{padding:32px;color:#fff;background:linear-gradient(145deg,#241D60,#6757D9);border-radius:29px;box-shadow:var(--shadow)}

.architecture-panel h3{margin:16px 0 12px;color:#fff;font-size:28px}

.architecture-panel p{color:rgba(255,255,255,.7);font-size:12px}

.architecture-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:21px}

.architecture-stat{padding:15px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.11);border-radius:14px}

.architecture-stat strong{display:block;color:#fff;font-size:13px}

.architecture-stat span{display:block;margin-top:3px;color:rgba(255,255,255,.57);font-size:8px}

.journey-list{display:grid;gap:13px}

.journey-item{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:17px}

.journey-no{width:42px;height:42px;display:grid;place-items:center;color:#fff;background:var(--primary);border-radius:12px;font-weight:900}

.journey-item h3{margin:0 0 4px;font-size:15px}

.journey-item p{margin:0;color:var(--muted);font-size:10px}

.format-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}

.format-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:19px}

.format-card i{width:43px;height:43px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:13px}

.format-card h3{margin:15px 0 7px;font-size:16px}

.format-card p{margin:0;color:var(--muted);font-size:10px}

.assessment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.assessment-card{padding:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.11);border-radius:18px}

.assessment-card i{width:40px;height:40px;display:grid;place-items:center;font-style:normal;background:rgba(255,255,255,.1);border-radius:11px}

.assessment-card h3{margin:15px 0 7px;font-size:16px}

.assessment-card p{margin:0;color:rgba(255,255,255,.64);font-size:10px}

.ecosystem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.ecosystem-card{position:relative;overflow:hidden;padding:25px;background:#fff;border:1px solid var(--line);border-radius:21px;box-shadow:var(--shadow-sm)}

.ecosystem-card h3{margin:16px 0 8px;font-size:18px}

.ecosystem-card p{color:var(--muted);font-size:11px}

.ecosystem-card a{margin-top:auto;color:var(--primary);font-size:10px;font-weight:800}

.principle-card{padding:22px;background:#fff;border:1px solid var(--line);border-radius:18px}

.principle-card strong{display:block;color:var(--navy);font-size:13px}

.principle-card p{margin:7px 0 0;color:var(--muted);font-size:10px}

@media(max-width:1060px){
.quick-nav-inner{grid-template-columns:repeat(2,1fr)}
.quick-nav a:nth-child(2n){border-right:0}
.level-grid,.format-grid,.assessment-grid,.principle-grid{grid-template-columns:repeat(2,1fr)}
.domain-grid,.path-grid,.ecosystem-grid{grid-template-columns:repeat(2,1fr)}
.architecture-wrap{grid-template-columns:1fr}
.level-row{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.curriculum-hero .hero-grid{grid-template-columns:1fr}
.quick-nav{margin-top:-18px}
.quick-nav-inner,.level-grid,.domain-grid,.path-grid,.format-grid,.assessment-grid,.ecosystem-grid,.principle-grid{grid-template-columns:1fr}
.quick-nav a{border-right:0;border-bottom:1px solid var(--line)}
.quick-nav a:last-child{border-bottom:0}
.curriculum-board-grid,.architecture-stats{grid-template-columns:1fr}
.level-row{grid-template-columns:1fr 1fr}
.domain-card{min-height:0}
}

/* Header navigation refinement — unified multipage */
    .desktop-nav{gap:10px}

.nav-link{
      position:relative;
      gap:7px;
      padding:12px 5px;
      border:0;
      border-radius:0;
      background:transparent!important;
      box-shadow:none!important;
    }

.nav-link:hover,.nav-link.active{
      color:var(--primary);
      background:transparent!important;
    }

.nav-link::after{
      content:"";
      position:absolute;
      left:5px;right:5px;bottom:4px;
      height:2px;
      background:linear-gradient(90deg,var(--primary),var(--secondary));
      border-radius:99px;
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .2s ease;
    }

.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}

.mobile-main{gap:10px}

@media(max-width:1060px){
.desktop-nav{gap:4px}
}

:root{
      --primary:#6757D9;
      --primary-dark:#342A78;
      --primary-light:#F1EFFF;
      --secondary:#00B7A8;
      --secondary-dark:#087E76;
      --accent:#FFC95C;
      --navy:#17143D;
      --text:#44445B;
      --muted:#737388;
      --line:#E8E7F1;
      --white:#FFFFFF;
      --page:#FAFAFF;
      --success:#208A69;
      --danger:#C04A67;
      --shadow:0 22px 60px rgba(31,27,82,.10);
      --shadow-sm:0 12px 30px rgba(31,27,82,.08);
      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
      --container:1180px;
    }

*{box-sizing:border-box}

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

body{
      margin:0;
      color:var(--text);
      background:var(--page);
      font-family:"Inter",Arial,sans-serif;
      line-height:1.7;
      overflow-x:hidden;
    }

body.menu-open{overflow:hidden}

img,svg{max-width:100%;display:block}

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

button,input,select,textarea{font:inherit}

button{cursor:pointer}

h1,h2,h3,h4,p{margin-top:0}

h1,h2,h3,h4{
      color:var(--navy);
      font-family:"Manrope",sans-serif;
      letter-spacing:-.025em;
    }

.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}

.section{padding:96px 0}

.section-soft{background:linear-gradient(180deg,#F8F7FF 0%,#FFFFFF 100%)}

.section-dark{color:#fff;background:var(--navy)}

.section-dark h2,.section-dark h3,.section-dark h4{color:#fff}

.section-head{max-width:760px;margin:0 auto 48px;text-align:center}

.section-head.left{margin-left:0;text-align:left}

.section-head h2{
      margin:14px 0 15px;
      font-size:clamp(31px,4vw,48px);
      line-height:1.14;
    }

.section-head p{color:var(--muted);font-size:16px}

.section-dark .section-head p{color:rgba(255,255,255,.68)}

.eyebrow{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:7px 12px;
      color:var(--primary-dark);
      background:#fff;
      border:1px solid rgba(103,87,217,.17);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.10em;
      text-transform:uppercase;
    }

.eyebrow::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:var(--secondary);
      box-shadow:0 0 0 5px rgba(0,183,168,.12);
    }

.section-dark .eyebrow{
      color:#fff;background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.12);
    }

.btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 21px;
      border:1px solid transparent;
      border-radius:13px;
      font-weight:750;
      transition:.22s ease;
    }

.btn:hover{transform:translateY(-2px)}

.btn-primary{
      color:#fff;background:var(--primary);
      box-shadow:0 12px 28px rgba(103,87,217,.28);
    }

.btn-primary:hover{background:#5747C8}

.btn-secondary{color:#fff;background:var(--secondary)}

.btn-light{color:var(--primary-dark);background:#fff}

.btn-outline{
      color:var(--primary-dark);
      background:rgba(255,255,255,.75);
      border-color:#DCD9F0;
    }

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.icon-arrow{font-size:18px;line-height:1}

.tag{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      color:var(--primary-dark);
      background:var(--primary-light);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
    }

/* Header */
    .site-header{
      position:fixed;top:0;left:0;right:0;z-index:100;
      background:rgba(255,255,255,.92);
      border-bottom:1px solid rgba(232,231,241,.86);
      backdrop-filter:blur(17px);
      transition:.25s ease;
    }

.site-header.scrolled{box-shadow:0 9px 28px rgba(31,27,82,.08)}

.header-inner{
      min-height:82px;
      display:flex;align-items:center;justify-content:space-between;gap:24px;
    }

.brand{display:inline-flex;align-items:center;gap:12px;min-width:max-content}

.brand-logo{width:49px;height:49px;filter:drop-shadow(0 10px 14px rgba(103,87,217,.20))}

.brand-copy strong{
      display:block;color:var(--navy);
      font:800 19px/1.1 "Manrope",sans-serif;
    }

.brand-copy small{
      display:block;margin-top:5px;color:var(--muted);
      font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    }

.desktop-nav{display:flex;align-items:center;gap:4px}

.nav-item{position:relative}

.nav-link{
      display:flex;align-items:center;gap:6px;
      padding:12px 13px;
      color:#48475F;
      border-radius:10px;
      font-size:13px;font-weight:700;
      transition:.18s ease;
    }

.nav-link:hover,.nav-link.active{color:var(--primary);background:var(--primary-light)}

.chevron{font-size:10px;transition:.18s}

.nav-item:hover .chevron{transform:rotate(180deg)}

.dropdown{
      position:absolute;top:calc(100% + 12px);left:0;
      width:300px;padding:10px;
      background:#fff;border:1px solid var(--line);
      border-radius:18px;box-shadow:var(--shadow);
      opacity:0;visibility:hidden;transform:translateY(9px);
      transition:.18s ease;
    }

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}

.dropdown.wide{width:680px;display:grid;grid-template-columns:1fr 1fr;gap:6px}

.drop-link{
      display:flex;gap:12px;padding:12px;
      border-radius:12px;transition:.18s;
    }

.drop-link:hover{background:var(--primary-light)}

.drop-icon{
      flex:0 0 auto;width:38px;height:38px;border-radius:11px;
      display:grid;place-items:center;
      color:var(--primary);background:#F3F1FF;font-size:17px;
    }

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span{display:block;margin-top:2px;color:var(--muted);font-size:11px;line-height:1.45}

.header-action{display:flex;align-items:center;gap:9px}

.menu-toggle{
      display:none;width:45px;height:45px;
      border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--navy);
    }

/* Mobile menu */
    .mobile-panel{
      display:none;
      position:fixed;inset:82px 0 0;z-index:99;
      padding:18px 20px 35px;
      background:#fff;overflow:auto;
    }

.mobile-panel.open{display:block}

.mobile-group{border-bottom:1px solid var(--line)}

.mobile-main{
      width:100%;display:flex;align-items:center;justify-content:space-between;
      padding:15px 4px;border:0;background:none;color:var(--navy);font-weight:800;text-align:left;
    }

.mobile-sub{display:none;padding:0 0 12px 12px}

.mobile-sub.open{display:grid}

.mobile-sub a{padding:9px 8px;color:var(--muted);font-size:14px}

.mobile-login{margin-top:20px;width:100%}

/* Hero */
    .hero{
      position:relative;overflow:hidden;
      padding:156px 0 82px;
      background:
        radial-gradient(circle at 14% 23%,rgba(0,183,168,.14),transparent 27%),
        radial-gradient(circle at 87% 20%,rgba(255,201,92,.20),transparent 24%),
        linear-gradient(135deg,#F4F1FF 0%,#FFFFFF 52%,#EDFBF9 100%);
    }

.hero::before{
      content:"";position:absolute;left:-110px;bottom:-145px;
      width:360px;height:360px;border:52px solid rgba(103,87,217,.055);border-radius:50%;
    }

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:62px;align-items:center}

.hero h1{
      margin:20px 0 19px;
      font-size:clamp(42px,5.4vw,69px);
      line-height:1.05;
    }

.gradient-text{
      background:linear-gradient(90deg,var(--primary),var(--secondary-dark));
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }

.hero-lead{max-width:690px;color:#626278;font-size:17px}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px}

.hero-proof{display:flex;flex-wrap:wrap;gap:16px;margin-top:31px}

.proof-item{display:flex;align-items:center;gap:9px;color:#5D5C72;font-size:12px;font-weight:700}

.proof-icon{
      width:28px;height:28px;display:grid;place-items:center;
      color:var(--secondary-dark);background:#E9FAF7;border-radius:9px;
    }

.hero-visual{position:relative;min-height:530px}

.visual-main{
      position:absolute;inset:18px 6px 18px 40px;
      padding:22px;
      background:rgba(255,255,255,.78);
      border:1px solid rgba(255,255,255,.95);
      border-radius:34px;box-shadow:var(--shadow);
      backdrop-filter:blur(15px);
    }

.dashboard{
      height:100%;padding:22px;
      background:linear-gradient(150deg,#282162,#17143D);
      border-radius:25px;overflow:hidden;
    }

.dash-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}

.dash-brand{display:flex;align-items:center;gap:9px;color:#fff;font-size:12px;font-weight:800}

.dash-dots{display:flex;gap:5px}

.dash-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}

.dash-hero{
      padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.62),rgba(0,183,168,.36));
      border:1px solid rgba(255,255,255,.12);border-radius:19px;
    }

.dash-label{color:#D9D4FF;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.dash-hero h3{margin:8px 0 7px;color:#fff;font-size:25px;line-height:1.2}

.dash-hero p{margin:0;color:rgba(255,255,255,.68);font-size:11px}

.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}

.dash-stat{padding:13px;background:rgba(255,255,255,.07);border-radius:13px}

.dash-stat strong{display:block;color:#fff;font-size:16px}

.dash-stat span{color:rgba(255,255,255,.55);font-size:9px}

.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}

.dash-card{padding:16px;background:#fff;border-radius:16px}

.dash-card h4{margin-bottom:10px;font-size:12px}

.progress{height:7px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.mini-list{display:grid;gap:8px}

.mini-row{display:flex;align-items:center;gap:8px}

.mini-row i{width:9px;height:9px;border-radius:3px;background:var(--secondary)}

.mini-row span{font-size:9px;color:var(--muted)}

.float-card{
      position:absolute;z-index:2;display:flex;align-items:center;gap:12px;
      padding:14px 17px;background:#fff;border:1px solid var(--line);
      border-radius:16px;box-shadow:var(--shadow-sm);
    }

.float-card.one{left:0;top:88px}

.float-card.two{right:-10px;bottom:75px}

.float-card.three{left:10px;bottom:15px}

.float-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--primary-light);color:var(--primary)}

.float-card strong{display:block;color:var(--navy);font-size:12px}

.float-card small{display:block;color:var(--muted);font-size:9px}

/* Trust strip */
    .trust-strip{position:relative;z-index:3;margin-top:-1px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.trust-inner{display:grid;grid-template-columns:1.15fr repeat(4,1fr);align-items:center;gap:20px;padding:25px 0}

.trust-copy strong{display:block;color:var(--navy);font-size:13px}

.trust-copy span{color:var(--muted);font-size:11px}

.trust-item{display:flex;align-items:center;justify-content:center;gap:9px;color:#69677D;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}

.trust-mark{width:32px;height:32px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:10px}

/* Solution cards */
    .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

.service-card{
      position:relative;overflow:hidden;
      min-height:310px;padding:28px;
      background:#fff;border:1px solid var(--line);
      border-radius:var(--radius-lg);box-shadow:0 12px 35px rgba(31,27,82,.055);
      transition:.25s ease;
    }

.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}

.service-card::after{
      content:"";position:absolute;right:-45px;bottom:-50px;width:145px;height:145px;
      border:27px solid rgba(103,87,217,.055);border-radius:50%;
    }

.card-icon{
      width:54px;height:54px;display:grid;place-items:center;
      color:var(--primary);background:var(--primary-light);
      border-radius:16px;font-size:24px;
    }

.service-card:nth-child(2n) .card-icon{color:var(--secondary-dark);background:#E9FAF7}

.service-card:nth-child(3n) .card-icon{color:#9A6C0F;background:#FFF6DE}

.service-card h3{margin:21px 0 11px;font-size:21px}

.service-card p{color:var(--muted);font-size:13px}

.card-list{display:grid;gap:8px;margin:18px 0 20px;padding:0;list-style:none}

.card-list li{display:flex;gap:9px;color:#55546A;font-size:12px}

.card-list li::before{content:"✓";color:var(--secondary-dark);font-weight:900}

.text-link{position:relative;z-index:2;color:var(--primary);font-size:12px;font-weight:800}

.text-link:hover{text-decoration:underline}

/* Split */
    .split{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}

.feature-visual{
      position:relative;min-height:520px;padding:33px;
      background:linear-gradient(145deg,#F0EDFF,#EAFBF8);
      border:1px solid #E2DFF7;border-radius:32px;
    }

.feature-screen{
      position:absolute;inset:48px 32px 34px 57px;padding:22px;
      background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow);
    }

.screen-nav{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}

.screen-title{font-size:11px;font-weight:800;color:var(--navy)}

.screen-pill{padding:5px 9px;color:var(--secondary-dark);background:#E8FAF7;border-radius:99px;font-size:8px;font-weight:800}

.chart-area{display:flex;align-items:flex-end;gap:10px;height:155px;padding:25px 10px 8px;border-bottom:1px solid var(--line)}

.bar{flex:1;min-width:15px;background:linear-gradient(180deg,var(--primary),#9488EC);border-radius:7px 7px 2px 2px}

.screen-bottom{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px}

.screen-box{padding:14px;background:#FAFAFF;border:1px solid var(--line);border-radius:13px}

.screen-box strong{display:block;color:var(--navy);font-size:19px}

.screen-box span{color:var(--muted);font-size:9px}

.feature-chip{
      position:absolute;display:flex;align-items:center;gap:9px;padding:12px 14px;
      background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);
    }

.feature-chip.one{top:21px;right:18px}

.feature-chip.two{left:12px;bottom:53px}

.feature-chip i{width:32px;height:32px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.feature-chip strong{display:block;color:var(--navy);font-size:10px}

.feature-chip span{display:block;color:var(--muted);font-size:8px}

.feature-copy h2{margin:14px 0 16px;font-size:clamp(31px,4vw,48px);line-height:1.14}

.feature-copy>p{color:var(--muted)}

.feature-points{display:grid;gap:16px;margin:27px 0 30px}

.feature-point{display:flex;gap:14px}

.point-icon{flex:0 0 auto;width:39px;height:39px;display:grid;place-items:center;color:var(--secondary-dark);background:#E9FAF7;border-radius:12px;font-weight:900}

.feature-point strong{display:block;color:var(--navy);font-size:13px}

.feature-point span{display:block;margin-top:2px;color:var(--muted);font-size:11px}

/* Innovation */
    .innovation-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:25px}

.innovation-main{
      min-height:480px;padding:34px;
      color:#fff;background:linear-gradient(145deg,var(--primary-dark),var(--primary));
      border-radius:29px;overflow:hidden;position:relative;
    }

.innovation-main h3{max-width:540px;margin:18px 0 14px;color:#fff;font-size:32px;line-height:1.17}

.innovation-main p{max-width:610px;color:rgba(255,255,255,.74)}

.innovation-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}

.innovation-tags span{padding:8px 11px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.13);border-radius:99px;font-size:10px;font-weight:800}

.ai-orbit{position:absolute;right:-35px;bottom:-72px;width:330px;height:330px;border:1px solid rgba(255,255,255,.15);border-radius:50%}

.ai-orbit::before,.ai-orbit::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%}

.ai-orbit::before{inset:45px}

.ai-orbit::after{inset:93px}

.ai-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:83px;height:83px;display:grid;place-items:center;color:var(--primary-dark);background:#fff;border-radius:24px;font:800 25px "Manrope"}

.orbit-dot{position:absolute;width:36px;height:36px;display:grid;place-items:center;color:#fff;background:var(--secondary);border-radius:12px;font-size:13px}

.orbit-dot.a{left:39px;top:57px}

.orbit-dot.b{right:18px;top:115px}

.orbit-dot.c{left:72px;bottom:27px}

.innovation-side{display:grid;gap:20px}

.example-card{padding:25px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.example-head{display:flex;align-items:center;justify-content:space-between;gap:15px}

.example-head h3{margin:0;font-size:18px}

.example-card p{margin:12px 0 15px;color:var(--muted);font-size:12px}

.example-meta{display:flex;flex-wrap:wrap;gap:7px}

.example-meta span{padding:6px 9px;color:#65637A;background:#F5F4FA;border-radius:8px;font-size:9px;font-weight:750}

/* Foundation */
    .foundation-card{
      position:relative;overflow:hidden;padding:33px;
      background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-sm);
    }

.foundation-card.education{background:linear-gradient(145deg,#FFFFFF,#F3F0FF)}

.foundation-card.umkm{background:linear-gradient(145deg,#FFFFFF,#EBFAF7)}

.foundation-card h3{margin:19px 0 11px;font-size:27px}

.foundation-card p{color:var(--muted);font-size:13px}

.foundation-programs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:24px 0}

.program-mini{padding:13px;background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:13px}

.program-mini strong{display:block;color:var(--navy);font-size:11px}

.program-mini span{display:block;margin-top:3px;color:var(--muted);font-size:9px}

/* Journey */
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.step{
      position:relative;padding:25px 22px;background:#fff;border:1px solid var(--line);border-radius:20px;
    }

.step-no{
      width:41px;height:41px;display:grid;place-items:center;
      color:#fff;background:var(--primary);border-radius:13px;font-weight:800;
    }

.step h3{margin:17px 0 8px;font-size:17px}

.step p{color:var(--muted);font-size:11px}

.step:not(:last-child)::after{
      content:"→";position:absolute;right:-17px;top:32px;z-index:3;color:#B3AEE2;font-size:22px;font-weight:900;
    }

/* Curriculum */
    .curriculum-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:30px}

.tab-btn{
      min-height:41px;padding:0 15px;border:1px solid var(--line);border-radius:11px;
      color:var(--muted);background:#fff;font-size:11px;font-weight:800;
    }

.tab-btn.active{color:#fff;background:var(--primary);border-color:var(--primary)}

.curriculum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.curriculum-item{padding:21px;background:#fff;border:1px solid var(--line);border-radius:17px}

.curriculum-item .num{color:var(--primary);font-size:10px;font-weight:900}

.curriculum-item h3{margin:8px 0 7px;font-size:15px;line-height:1.35}

.curriculum-item p{margin:0;color:var(--muted);font-size:10px}

/* App */
    .app-wrap{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr .92fr;gap:55px;align-items:center;
      padding:50px 55px;color:#fff;
      background:linear-gradient(135deg,#211A58,#6757D9);
      border-radius:34px;
    }

.app-wrap h2{margin:14px 0 14px;color:#fff;font-size:clamp(30px,4vw,47px);line-height:1.15}

.app-wrap p{color:rgba(255,255,255,.70)}

.store-row{display:flex;flex-wrap:wrap;gap:11px;margin-top:25px}

.store-badge{
      display:flex;align-items:center;gap:11px;min-width:175px;padding:10px 14px;
      color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
      border-radius:13px;
    }

.store-badge svg{width:28px;height:28px}

.store-badge small{display:block;color:rgba(255,255,255,.60);font-size:8px;text-transform:uppercase;letter-spacing:.08em}

.store-badge strong{display:block;font-size:12px}

.phone-scene{position:relative;min-height:420px}

.phone{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(5deg);
      width:230px;height:420px;padding:9px;background:#111026;border:2px solid rgba(255,255,255,.25);
      border-radius:35px;box-shadow:0 28px 55px rgba(0,0,0,.32);
    }

.phone-screen{height:100%;padding:19px 15px;background:linear-gradient(180deg,#F5F2FF,#fff);border-radius:27px;overflow:hidden}

.notch{width:76px;height:17px;margin:-11px auto 15px;background:#111026;border-radius:0 0 13px 13px}

.mobile-logo{display:flex;align-items:center;gap:7px;color:var(--navy);font-size:9px;font-weight:900}

.mobile-logo svg{width:25px}

.mobile-welcome{margin-top:18px;padding:16px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:17px}

.mobile-welcome strong{display:block;font-size:13px}

.mobile-welcome span{font-size:8px;opacity:.78}

.mobile-course-title{margin:16px 0 9px;color:var(--navy);font-size:10px;font-weight:900}

.mobile-course{display:flex;gap:9px;margin-bottom:8px;padding:9px;background:#fff;border:1px solid var(--line);border-radius:11px}

.mobile-thumb{width:42px;height:38px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:8px;font-size:12px}

.mobile-course strong{display:block;color:var(--navy);font-size:8px}

.mobile-course span{display:block;color:var(--muted);font-size:6px}

.app-float{position:absolute;padding:13px 16px;background:#fff;border-radius:15px;box-shadow:var(--shadow)}

.app-float.a{left:5%;top:21%}

.app-float.b{right:3%;bottom:15%}

.app-float strong{display:block;color:var(--navy);font-size:10px}

.app-float span{color:var(--muted);font-size:8px}

/* About */
    .about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:29px}

.about-stat{padding:20px;background:#fff;border:1px solid var(--line);border-radius:16px}

.about-stat strong{display:block;color:var(--primary);font:800 24px "Manrope"}

.about-stat span{color:var(--muted);font-size:10px}

.about-note{padding:20px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 14px 14px 0;font-size:12px}

/* FAQ */
    .faq-wrap{max-width:880px;margin:0 auto}

.faq-item{margin-bottom:11px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}

.faq-q{
      width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
      padding:19px 21px;border:0;background:#fff;color:var(--navy);font-weight:800;text-align:left;
    }

.faq-plus{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:9px}

.faq-a{display:none;padding:0 21px 20px;color:var(--muted);font-size:12px}

.faq-item.open .faq-a{display:block}

.faq-item.open .faq-plus{transform:rotate(45deg)}

/* CTA */
    .final-cta{padding:78px 0}

.cta-box{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center;
      padding:42px 48px;color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));
      border-radius:30px;
    }

.cta-box::after{content:"";position:absolute;right:-80px;top:-110px;width:270px;height:270px;border:45px solid rgba(255,255,255,.07);border-radius:50%}

.cta-box h2{margin-bottom:9px;color:#fff;font-size:clamp(28px,4vw,43px)}

.cta-box p{margin:0;color:rgba(255,255,255,.70)}

.cta-actions{position:relative;z-index:2;display:flex;gap:10px;flex-wrap:wrap}

/* Footer */
    .site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:68px 0 46px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:48px}

.footer-brand p{max-width:390px;margin:19px 0 22px;font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:18px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:10px}

.footer-links a{font-size:12px;transition:.18s}

.footer-links a:hover{color:#fff;transform:translateX(3px)}

.footer-contact{display:grid;gap:10px;margin-top:18px}

.contact-row{display:flex;gap:10px;font-size:11px}

.contact-row i{font-style:normal;color:#AFA6FF}

.newsletter{display:flex;max-width:395px;margin-top:17px;padding:5px;background:#fff;border-radius:12px}

.newsletter input{width:100%;min-width:0;padding:0 12px;border:0;outline:0;font-size:11px}

.newsletter button{width:43px;border:0;border-radius:9px;color:#fff;background:var(--primary)}

.footer-bottom{padding:19px 0;border-top:1px solid rgba(255,255,255,.09);font-size:10px}

.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}

.footer-legal{display:flex;flex-wrap:wrap;gap:15px}

/* Floating WA */
    .floating-help{
      position:fixed;right:22px;bottom:22px;z-index:90;
      display:flex;align-items:center;gap:10px;padding:11px 15px;
      color:#fff;background:#1FAF6D;border-radius:99px;
      box-shadow:0 15px 35px rgba(16,119,73,.28);font-size:11px;font-weight:800;
    }

.floating-help span:first-child{font-size:19px}

/* Utilities */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:1060px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:grid;place-items:center}
.hero-grid,.split,.innovation-grid,.app-wrap{grid-template-columns:1fr}
.hero-visual{max-width:650px;width:100%;margin:0 auto}
.cards-3{grid-template-columns:repeat(2,1fr)}
.curriculum-grid{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(2,1fr)}
.step:nth-child(2)::after{display:none}
.footer-grid{grid-template-columns:repeat(2,1fr)}
.trust-inner{grid-template-columns:repeat(2,1fr)}
.trust-copy{grid-column:1/-1;text-align:center}
}

@media(max-width:700px){
.container{width:min(100% - 28px,var(--container))}
.section{padding:69px 0}
.brand-copy small{display:none}
.brand-logo{width:43px;height:43px}
.header-inner{min-height:74px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.hero{padding:124px 0 60px}
.hero h1{font-size:43px}
.hero-lead{font-size:15px}
.hero-visual{min-height:460px}
.visual-main{inset:12px 0 28px 20px}
.float-card.one{left:-4px;top:52px}
.float-card.two{right:-4px}
.float-card.three{display:none}
.dash-stats{grid-template-columns:1fr}
.dash-stat:nth-child(n+2){display:none}
.cards-3,.cards-2,.foundation-programs,.curriculum-grid,.about-stats,.steps,.footer-grid{grid-template-columns:1fr}
.step::after{display:none!important}
.feature-visual{min-height:445px;padding:20px}
.feature-screen{inset:44px 15px 25px 37px}
.innovation-main{min-height:520px}
.app-wrap{padding:35px 22px}
.phone-scene{min-height:390px}
.app-float.a{left:-10px}
.app-float.b{right:-10px}
.trust-inner{grid-template-columns:1fr 1fr}
.trust-item{font-size:9px}
.cta-box{grid-template-columns:1fr;padding:34px 25px}
.cta-actions{align-items:stretch;flex-direction:column}
.footer-bottom-inner{align-items:flex-start;flex-direction:column}
.floating-help{right:14px;bottom:14px;padding:11px}
.floating-help span:last-child{display:none}
}

/* Online Classes */
    .course-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:20px;
    }

.course-card{
      overflow:hidden;
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:var(--shadow-sm);
      transition:.24s ease;
    }

.course-card:hover{
      transform:translateY(-5px);
      box-shadow:var(--shadow);
    }

.course-cover{
      position:relative;
      min-height:180px;
      padding:22px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      color:#fff;
      overflow:hidden;
    }

.course-cover::after{
      content:"";
      position:absolute;
      right:-35px;
      bottom:-45px;
      width:135px;
      height:135px;
      border:24px solid rgba(255,255,255,.10);
      border-radius:50%;
    }

.course-cover.one{background:linear-gradient(135deg,#3A2F87,#6757D9)}

.course-cover.two{background:linear-gradient(135deg,#087E76,#00B7A8)}

.course-cover.three{background:linear-gradient(135deg,#8A5F13,#E0A832)}

.course-cover.four{background:linear-gradient(135deg,#8B3E62,#C04A67)}

.course-label{
      position:relative;
      z-index:1;
      align-self:flex-start;
      padding:6px 9px;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.17);
      border-radius:999px;
      font-size:9px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

.course-cover h3{
      position:relative;
      z-index:1;
      margin:28px 0 0;
      color:#fff;
      font-size:20px;
      line-height:1.28;
    }

.course-body{padding:21px}

.course-meta{
      display:flex;
      flex-wrap:wrap;
      gap:7px;
      margin-bottom:13px;
    }

.course-meta span{
      padding:5px 8px;
      color:var(--muted);
      background:#F5F4FA;
      border-radius:8px;
      font-size:9px;
      font-weight:750;
    }

.course-body p{
      margin-bottom:17px;
      color:var(--muted);
      font-size:12px;
    }

.course-actions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

.course-status{
      color:var(--secondary-dark);
      font-size:10px;
      font-weight:800;
    }

.course-more{
      margin-top:31px;
      text-align:center;
    }

@media(max-width:1060px){
.course-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.course-grid{grid-template-columns:1fr}
}

/* Banking Solution page */
    .solution-hero{padding-bottom:92px}

.solution-hero .hero-grid{grid-template-columns:1fr .96fr}

.solution-kicker{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}

.solution-kicker span{padding:7px 10px;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px;font-weight:800}

.solution-board{height:100%;padding:25px;background:linear-gradient(150deg,#282162,#17143D);border-radius:25px;overflow:hidden}

.board-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:#fff;font-size:12px;font-weight:800}

.board-status{padding:5px 8px;color:#B9FFF6;background:rgba(0,183,168,.15);border-radius:99px;font-size:8px}

.board-focus{padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.72),rgba(0,183,168,.35));border:1px solid rgba(255,255,255,.12);border-radius:18px}

.board-focus small{color:#D9D4FF;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

.board-focus h3{margin:7px 0 8px;color:#fff;font-size:23px}

.board-focus p{margin:0;color:rgba(255,255,255,.67);font-size:10px}

.board-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:13px}

.board-card{padding:15px;background:#fff;border-radius:14px}

.board-card strong{display:block;color:var(--navy);font-size:11px}

.board-card span{display:block;margin-top:3px;color:var(--muted);font-size:8px}

.board-meter{height:6px;margin-top:11px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.board-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.quick-nav{position:relative;z-index:4;margin-top:-31px}

.quick-nav-inner{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden}

.quick-nav a{display:flex;align-items:center;gap:11px;padding:19px;border-right:1px solid var(--line);transition:.18s}

.quick-nav a:last-child{border-right:0}

.quick-nav a:hover{background:var(--primary-light)}

.quick-nav i{width:34px;height:34px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.quick-nav strong{display:block;color:var(--navy);font-size:11px}

.quick-nav span span{display:block;color:var(--muted);font-size:8px}

.challenge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.challenge-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:19px}

.challenge-no{color:var(--primary);font-size:10px;font-weight:900}

.challenge-card h3{margin:9px 0 8px;font-size:16px}

.challenge-card p{margin:0;color:var(--muted);font-size:11px}

.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.solution-card{position:relative;overflow:hidden;padding:27px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm);transition:.22s}

.solution-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}

.solution-card .card-icon{width:50px;height:50px;font-size:20px}

.solution-card h3{margin:18px 0 9px;font-size:19px}

.solution-card p{color:var(--muted);font-size:12px}

.solution-card ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}

.solution-card li{display:flex;gap:8px;color:#57566B;font-size:10px}

.solution-card li:before{content:'✓';color:var(--secondary-dark);font-weight:900}

.method-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}

.method-panel{padding:30px;background:linear-gradient(145deg,#241D60,#6757D9);border-radius:28px;color:#fff}

.method-panel h3{color:#fff;font-size:27px}

.method-panel p{color:rgba(255,255,255,.68);font-size:12px}

.method-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}

.method-stat{padding:15px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.11);border-radius:14px}

.method-stat strong{display:block;color:#fff;font-size:13px}

.method-stat span{font-size:8px;color:rgba(255,255,255,.58)}

.process-list{display:grid;gap:13px}

.process-item{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:17px;background:#fff;border:1px solid var(--line);border-radius:17px}

.process-number{width:42px;height:42px;display:grid;place-items:center;color:#fff;background:var(--primary);border-radius:12px;font-weight:900}

.process-item h3{margin:0 0 4px;font-size:15px}

.process-item p{margin:0;color:var(--muted);font-size:10px}

.deliverable-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}

.deliverable{padding:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.11);border-radius:18px}

.deliverable i{display:grid;place-items:center;width:39px;height:39px;font-style:normal;background:rgba(255,255,255,.1);border-radius:11px}

.deliverable h3{margin:15px 0 7px;font-size:16px}

.deliverable p{margin:0;color:rgba(255,255,255,.63);font-size:10px}

.principle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.principle{padding:21px;background:#fff;border:1px solid var(--line);border-radius:18px}

.principle strong{display:block;color:var(--navy);font-size:13px}

.principle p{margin:7px 0 0;color:var(--muted);font-size:10px}

.notice-box{margin-top:24px;padding:20px 22px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 15px 15px 0;font-size:11px}

@media(max-width:1060px){
.quick-nav-inner,.challenge-grid,.principle-grid{grid-template-columns:repeat(2,1fr)}
.solution-grid,.deliverable-grid{grid-template-columns:repeat(2,1fr)}
.method-wrap{grid-template-columns:1fr}
}

@media(max-width:700px){
.quick-nav{margin-top:-18px}
.quick-nav-inner,.challenge-grid,.solution-grid,.deliverable-grid,.principle-grid{grid-template-columns:1fr}
.quick-nav a{border-right:0;border-bottom:1px solid var(--line)}
.quick-nav a:last-child{border-bottom:0}
.solution-hero .hero-grid{grid-template-columns:1fr}
}

/* Header navigation refinement — unified multipage */
    .desktop-nav{gap:10px}

.nav-link{
      position:relative;
      gap:7px;
      padding:12px 5px;
      border:0;
      border-radius:0;
      background:transparent!important;
      box-shadow:none!important;
    }

.nav-link:hover,.nav-link.active{
      color:var(--primary);
      background:transparent!important;
    }

.nav-link::after{
      content:"";
      position:absolute;
      left:5px;right:5px;bottom:4px;
      height:2px;
      background:linear-gradient(90deg,var(--primary),var(--secondary));
      border-radius:99px;
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .2s ease;
    }

.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}

.mobile-main{gap:10px}

@media(max-width:1060px){
.desktop-nav{gap:4px}
}

:root{
      --primary:#6757D9;
      --primary-dark:#342A78;
      --primary-light:#F1EFFF;
      --secondary:#00B7A8;
      --secondary-dark:#087E76;
      --accent:#FFC95C;
      --navy:#17143D;
      --text:#44445B;
      --muted:#737388;
      --line:#E8E7F1;
      --white:#FFFFFF;
      --page:#FAFAFF;
      --success:#208A69;
      --danger:#C04A67;
      --shadow:0 22px 60px rgba(31,27,82,.10);
      --shadow-sm:0 12px 30px rgba(31,27,82,.08);
      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
      --container:1180px;
    }

*{box-sizing:border-box}

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

body{
      margin:0;
      color:var(--text);
      background:var(--page);
      font-family:"Inter",Arial,sans-serif;
      line-height:1.7;
      overflow-x:hidden;
    }

body.menu-open{overflow:hidden}

img,svg{max-width:100%;display:block}

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

button,input,select,textarea{font:inherit}

button{cursor:pointer}

h1,h2,h3,h4,p{margin-top:0}

h1,h2,h3,h4{
      color:var(--navy);
      font-family:"Manrope",sans-serif;
      letter-spacing:-.025em;
    }

.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}

.section{padding:96px 0}

.section-soft{background:linear-gradient(180deg,#F8F7FF 0%,#FFFFFF 100%)}

.section-dark{color:#fff;background:var(--navy)}

.section-dark h2,.section-dark h3,.section-dark h4{color:#fff}

.section-head{max-width:760px;margin:0 auto 48px;text-align:center}

.section-head.left{margin-left:0;text-align:left}

.section-head h2{
      margin:14px 0 15px;
      font-size:clamp(31px,4vw,48px);
      line-height:1.14;
    }

.section-head p{color:var(--muted);font-size:16px}

.section-dark .section-head p{color:rgba(255,255,255,.68)}

.eyebrow{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:7px 12px;
      color:var(--primary-dark);
      background:#fff;
      border:1px solid rgba(103,87,217,.17);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.10em;
      text-transform:uppercase;
    }

.eyebrow::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:var(--secondary);
      box-shadow:0 0 0 5px rgba(0,183,168,.12);
    }

.section-dark .eyebrow{
      color:#fff;background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.12);
    }

.btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 21px;
      border:1px solid transparent;
      border-radius:13px;
      font-weight:750;
      transition:.22s ease;
    }

.btn:hover{transform:translateY(-2px)}

.btn-primary{
      color:#fff;background:var(--primary);
      box-shadow:0 12px 28px rgba(103,87,217,.28);
    }

.btn-primary:hover{background:#5747C8}

.btn-secondary{color:#fff;background:var(--secondary)}

.btn-light{color:var(--primary-dark);background:#fff}

.btn-outline{
      color:var(--primary-dark);
      background:rgba(255,255,255,.75);
      border-color:#DCD9F0;
    }

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.icon-arrow{font-size:18px;line-height:1}

.tag{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      color:var(--primary-dark);
      background:var(--primary-light);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
    }

/* Header */
    .site-header{
      position:fixed;top:0;left:0;right:0;z-index:100;
      background:rgba(255,255,255,.92);
      border-bottom:1px solid rgba(232,231,241,.86);
      backdrop-filter:blur(17px);
      transition:.25s ease;
    }

.site-header.scrolled{box-shadow:0 9px 28px rgba(31,27,82,.08)}

.header-inner{
      min-height:82px;
      display:flex;align-items:center;justify-content:space-between;gap:24px;
    }

.brand{display:inline-flex;align-items:center;gap:12px;min-width:max-content}

.brand-logo{width:49px;height:49px;filter:drop-shadow(0 10px 14px rgba(103,87,217,.20))}

.brand-copy strong{
      display:block;color:var(--navy);
      font:800 19px/1.1 "Manrope",sans-serif;
    }

.brand-copy small{
      display:block;margin-top:5px;color:var(--muted);
      font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    }

.desktop-nav{display:flex;align-items:center;gap:4px}

.nav-item{position:relative}

.nav-link{
      display:flex;align-items:center;gap:6px;
      padding:12px 13px;
      color:#48475F;
      border-radius:10px;
      font-size:13px;font-weight:700;
      transition:.18s ease;
    }

.nav-link:hover,.nav-link.active{color:var(--primary);background:var(--primary-light)}

.chevron{font-size:10px;transition:.18s}

.nav-item:hover .chevron{transform:rotate(180deg)}

.dropdown{
      position:absolute;top:calc(100% + 12px);left:0;
      width:300px;padding:10px;
      background:#fff;border:1px solid var(--line);
      border-radius:18px;box-shadow:var(--shadow);
      opacity:0;visibility:hidden;transform:translateY(9px);
      transition:.18s ease;
    }

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}

.dropdown.wide{width:680px;display:grid;grid-template-columns:1fr 1fr;gap:6px}

.drop-link{
      display:flex;gap:12px;padding:12px;
      border-radius:12px;transition:.18s;
    }

.drop-link:hover{background:var(--primary-light)}

.drop-icon{
      flex:0 0 auto;width:38px;height:38px;border-radius:11px;
      display:grid;place-items:center;
      color:var(--primary);background:#F3F1FF;font-size:17px;
    }

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span{display:block;margin-top:2px;color:var(--muted);font-size:11px;line-height:1.45}

.header-action{display:flex;align-items:center;gap:9px}

.menu-toggle{
      display:none;width:45px;height:45px;
      border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--navy);
    }

/* Mobile menu */
    .mobile-panel{
      display:none;
      position:fixed;inset:82px 0 0;z-index:99;
      padding:18px 20px 35px;
      background:#fff;overflow:auto;
    }

.mobile-panel.open{display:block}

.mobile-group{border-bottom:1px solid var(--line)}

.mobile-main{
      width:100%;display:flex;align-items:center;justify-content:space-between;
      padding:15px 4px;border:0;background:none;color:var(--navy);font-weight:800;text-align:left;
    }

.mobile-sub{display:none;padding:0 0 12px 12px}

.mobile-sub.open{display:grid}

.mobile-sub a{padding:9px 8px;color:var(--muted);font-size:14px}

.mobile-login{margin-top:20px;width:100%}

/* Hero */
    .hero{
      position:relative;overflow:hidden;
      padding:156px 0 82px;
      background:
        radial-gradient(circle at 14% 23%,rgba(0,183,168,.14),transparent 27%),
        radial-gradient(circle at 87% 20%,rgba(255,201,92,.20),transparent 24%),
        linear-gradient(135deg,#F4F1FF 0%,#FFFFFF 52%,#EDFBF9 100%);
    }

.hero::before{
      content:"";position:absolute;left:-110px;bottom:-145px;
      width:360px;height:360px;border:52px solid rgba(103,87,217,.055);border-radius:50%;
    }

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:62px;align-items:center}

.hero h1{
      margin:20px 0 19px;
      font-size:clamp(42px,5.4vw,69px);
      line-height:1.05;
    }

.gradient-text{
      background:linear-gradient(90deg,var(--primary),var(--secondary-dark));
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }

.hero-lead{max-width:690px;color:#626278;font-size:17px}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px}

.hero-proof{display:flex;flex-wrap:wrap;gap:16px;margin-top:31px}

.proof-item{display:flex;align-items:center;gap:9px;color:#5D5C72;font-size:12px;font-weight:700}

.proof-icon{
      width:28px;height:28px;display:grid;place-items:center;
      color:var(--secondary-dark);background:#E9FAF7;border-radius:9px;
    }

.hero-visual{position:relative;min-height:530px}

.visual-main{
      position:absolute;inset:18px 6px 18px 40px;
      padding:22px;
      background:rgba(255,255,255,.78);
      border:1px solid rgba(255,255,255,.95);
      border-radius:34px;box-shadow:var(--shadow);
      backdrop-filter:blur(15px);
    }

.dashboard{
      height:100%;padding:22px;
      background:linear-gradient(150deg,#282162,#17143D);
      border-radius:25px;overflow:hidden;
    }

.dash-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}

.dash-brand{display:flex;align-items:center;gap:9px;color:#fff;font-size:12px;font-weight:800}

.dash-dots{display:flex;gap:5px}

.dash-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}

.dash-hero{
      padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.62),rgba(0,183,168,.36));
      border:1px solid rgba(255,255,255,.12);border-radius:19px;
    }

.dash-label{color:#D9D4FF;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.dash-hero h3{margin:8px 0 7px;color:#fff;font-size:25px;line-height:1.2}

.dash-hero p{margin:0;color:rgba(255,255,255,.68);font-size:11px}

.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}

.dash-stat{padding:13px;background:rgba(255,255,255,.07);border-radius:13px}

.dash-stat strong{display:block;color:#fff;font-size:16px}

.dash-stat span{color:rgba(255,255,255,.55);font-size:9px}

.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}

.dash-card{padding:16px;background:#fff;border-radius:16px}

.dash-card h4{margin-bottom:10px;font-size:12px}

.progress{height:7px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.mini-list{display:grid;gap:8px}

.mini-row{display:flex;align-items:center;gap:8px}

.mini-row i{width:9px;height:9px;border-radius:3px;background:var(--secondary)}

.mini-row span{font-size:9px;color:var(--muted)}

.float-card{
      position:absolute;z-index:2;display:flex;align-items:center;gap:12px;
      padding:14px 17px;background:#fff;border:1px solid var(--line);
      border-radius:16px;box-shadow:var(--shadow-sm);
    }

.float-card.one{left:0;top:88px}

.float-card.two{right:-10px;bottom:75px}

.float-card.three{left:10px;bottom:15px}

.float-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--primary-light);color:var(--primary)}

.float-card strong{display:block;color:var(--navy);font-size:12px}

.float-card small{display:block;color:var(--muted);font-size:9px}

/* Trust strip */
    .trust-strip{position:relative;z-index:3;margin-top:-1px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.trust-inner{display:grid;grid-template-columns:1.15fr repeat(4,1fr);align-items:center;gap:20px;padding:25px 0}

.trust-copy strong{display:block;color:var(--navy);font-size:13px}

.trust-copy span{color:var(--muted);font-size:11px}

.trust-item{display:flex;align-items:center;justify-content:center;gap:9px;color:#69677D;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}

.trust-mark{width:32px;height:32px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:10px}

/* Solution cards */
    .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

.service-card{
      position:relative;overflow:hidden;
      min-height:310px;padding:28px;
      background:#fff;border:1px solid var(--line);
      border-radius:var(--radius-lg);box-shadow:0 12px 35px rgba(31,27,82,.055);
      transition:.25s ease;
    }

.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}

.service-card::after{
      content:"";position:absolute;right:-45px;bottom:-50px;width:145px;height:145px;
      border:27px solid rgba(103,87,217,.055);border-radius:50%;
    }

.card-icon{
      width:54px;height:54px;display:grid;place-items:center;
      color:var(--primary);background:var(--primary-light);
      border-radius:16px;font-size:24px;
    }

.service-card:nth-child(2n) .card-icon{color:var(--secondary-dark);background:#E9FAF7}

.service-card:nth-child(3n) .card-icon{color:#9A6C0F;background:#FFF6DE}

.service-card h3{margin:21px 0 11px;font-size:21px}

.service-card p{color:var(--muted);font-size:13px}

.card-list{display:grid;gap:8px;margin:18px 0 20px;padding:0;list-style:none}

.card-list li{display:flex;gap:9px;color:#55546A;font-size:12px}

.card-list li::before{content:"✓";color:var(--secondary-dark);font-weight:900}

.text-link{position:relative;z-index:2;color:var(--primary);font-size:12px;font-weight:800}

.text-link:hover{text-decoration:underline}

/* Split */
    .split{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}

.feature-visual{
      position:relative;min-height:520px;padding:33px;
      background:linear-gradient(145deg,#F0EDFF,#EAFBF8);
      border:1px solid #E2DFF7;border-radius:32px;
    }

.feature-screen{
      position:absolute;inset:48px 32px 34px 57px;padding:22px;
      background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow);
    }

.screen-nav{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}

.screen-title{font-size:11px;font-weight:800;color:var(--navy)}

.screen-pill{padding:5px 9px;color:var(--secondary-dark);background:#E8FAF7;border-radius:99px;font-size:8px;font-weight:800}

.chart-area{display:flex;align-items:flex-end;gap:10px;height:155px;padding:25px 10px 8px;border-bottom:1px solid var(--line)}

.bar{flex:1;min-width:15px;background:linear-gradient(180deg,var(--primary),#9488EC);border-radius:7px 7px 2px 2px}

.screen-bottom{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px}

.screen-box{padding:14px;background:#FAFAFF;border:1px solid var(--line);border-radius:13px}

.screen-box strong{display:block;color:var(--navy);font-size:19px}

.screen-box span{color:var(--muted);font-size:9px}

.feature-chip{
      position:absolute;display:flex;align-items:center;gap:9px;padding:12px 14px;
      background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);
    }

.feature-chip.one{top:21px;right:18px}

.feature-chip.two{left:12px;bottom:53px}

.feature-chip i{width:32px;height:32px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.feature-chip strong{display:block;color:var(--navy);font-size:10px}

.feature-chip span{display:block;color:var(--muted);font-size:8px}

.feature-copy h2{margin:14px 0 16px;font-size:clamp(31px,4vw,48px);line-height:1.14}

.feature-copy>p{color:var(--muted)}

.feature-points{display:grid;gap:16px;margin:27px 0 30px}

.feature-point{display:flex;gap:14px}

.point-icon{flex:0 0 auto;width:39px;height:39px;display:grid;place-items:center;color:var(--secondary-dark);background:#E9FAF7;border-radius:12px;font-weight:900}

.feature-point strong{display:block;color:var(--navy);font-size:13px}

.feature-point span{display:block;margin-top:2px;color:var(--muted);font-size:11px}

/* Innovation */
    .innovation-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:25px}

.innovation-main{
      min-height:480px;padding:34px;
      color:#fff;background:linear-gradient(145deg,var(--primary-dark),var(--primary));
      border-radius:29px;overflow:hidden;position:relative;
    }

.innovation-main h3{max-width:540px;margin:18px 0 14px;color:#fff;font-size:32px;line-height:1.17}

.innovation-main p{max-width:610px;color:rgba(255,255,255,.74)}

.innovation-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}

.innovation-tags span{padding:8px 11px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.13);border-radius:99px;font-size:10px;font-weight:800}

.ai-orbit{position:absolute;right:-35px;bottom:-72px;width:330px;height:330px;border:1px solid rgba(255,255,255,.15);border-radius:50%}

.ai-orbit::before,.ai-orbit::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%}

.ai-orbit::before{inset:45px}

.ai-orbit::after{inset:93px}

.ai-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:83px;height:83px;display:grid;place-items:center;color:var(--primary-dark);background:#fff;border-radius:24px;font:800 25px "Manrope"}

.orbit-dot{position:absolute;width:36px;height:36px;display:grid;place-items:center;color:#fff;background:var(--secondary);border-radius:12px;font-size:13px}

.orbit-dot.a{left:39px;top:57px}

.orbit-dot.b{right:18px;top:115px}

.orbit-dot.c{left:72px;bottom:27px}

.innovation-side{display:grid;gap:20px}

.example-card{padding:25px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.example-head{display:flex;align-items:center;justify-content:space-between;gap:15px}

.example-head h3{margin:0;font-size:18px}

.example-card p{margin:12px 0 15px;color:var(--muted);font-size:12px}

.example-meta{display:flex;flex-wrap:wrap;gap:7px}

.example-meta span{padding:6px 9px;color:#65637A;background:#F5F4FA;border-radius:8px;font-size:9px;font-weight:750}

/* Foundation */
    .foundation-card{
      position:relative;overflow:hidden;padding:33px;
      background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-sm);
    }

.foundation-card.education{background:linear-gradient(145deg,#FFFFFF,#F3F0FF)}

.foundation-card.umkm{background:linear-gradient(145deg,#FFFFFF,#EBFAF7)}

.foundation-card h3{margin:19px 0 11px;font-size:27px}

.foundation-card p{color:var(--muted);font-size:13px}

.foundation-programs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:24px 0}

.program-mini{padding:13px;background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:13px}

.program-mini strong{display:block;color:var(--navy);font-size:11px}

.program-mini span{display:block;margin-top:3px;color:var(--muted);font-size:9px}

/* Journey */
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.step{
      position:relative;padding:25px 22px;background:#fff;border:1px solid var(--line);border-radius:20px;
    }

.step-no{
      width:41px;height:41px;display:grid;place-items:center;
      color:#fff;background:var(--primary);border-radius:13px;font-weight:800;
    }

.step h3{margin:17px 0 8px;font-size:17px}

.step p{color:var(--muted);font-size:11px}

.step:not(:last-child)::after{
      content:"→";position:absolute;right:-17px;top:32px;z-index:3;color:#B3AEE2;font-size:22px;font-weight:900;
    }

/* Curriculum */
    .curriculum-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:30px}

.tab-btn{
      min-height:41px;padding:0 15px;border:1px solid var(--line);border-radius:11px;
      color:var(--muted);background:#fff;font-size:11px;font-weight:800;
    }

.tab-btn.active{color:#fff;background:var(--primary);border-color:var(--primary)}

.curriculum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.curriculum-item{padding:21px;background:#fff;border:1px solid var(--line);border-radius:17px}

.curriculum-item .num{color:var(--primary);font-size:10px;font-weight:900}

.curriculum-item h3{margin:8px 0 7px;font-size:15px;line-height:1.35}

.curriculum-item p{margin:0;color:var(--muted);font-size:10px}

/* App */
    .app-wrap{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr .92fr;gap:55px;align-items:center;
      padding:50px 55px;color:#fff;
      background:linear-gradient(135deg,#211A58,#6757D9);
      border-radius:34px;
    }

.app-wrap h2{margin:14px 0 14px;color:#fff;font-size:clamp(30px,4vw,47px);line-height:1.15}

.app-wrap p{color:rgba(255,255,255,.70)}

.store-row{display:flex;flex-wrap:wrap;gap:11px;margin-top:25px}

.store-badge{
      display:flex;align-items:center;gap:11px;min-width:175px;padding:10px 14px;
      color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
      border-radius:13px;
    }

.store-badge svg{width:28px;height:28px}

.store-badge small{display:block;color:rgba(255,255,255,.60);font-size:8px;text-transform:uppercase;letter-spacing:.08em}

.store-badge strong{display:block;font-size:12px}

.phone-scene{position:relative;min-height:420px}

.phone{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(5deg);
      width:230px;height:420px;padding:9px;background:#111026;border:2px solid rgba(255,255,255,.25);
      border-radius:35px;box-shadow:0 28px 55px rgba(0,0,0,.32);
    }

.phone-screen{height:100%;padding:19px 15px;background:linear-gradient(180deg,#F5F2FF,#fff);border-radius:27px;overflow:hidden}

.notch{width:76px;height:17px;margin:-11px auto 15px;background:#111026;border-radius:0 0 13px 13px}

.mobile-logo{display:flex;align-items:center;gap:7px;color:var(--navy);font-size:9px;font-weight:900}

.mobile-logo svg{width:25px}

.mobile-welcome{margin-top:18px;padding:16px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:17px}

.mobile-welcome strong{display:block;font-size:13px}

.mobile-welcome span{font-size:8px;opacity:.78}

.mobile-course-title{margin:16px 0 9px;color:var(--navy);font-size:10px;font-weight:900}

.mobile-course{display:flex;gap:9px;margin-bottom:8px;padding:9px;background:#fff;border:1px solid var(--line);border-radius:11px}

.mobile-thumb{width:42px;height:38px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:8px;font-size:12px}

.mobile-course strong{display:block;color:var(--navy);font-size:8px}

.mobile-course span{display:block;color:var(--muted);font-size:6px}

.app-float{position:absolute;padding:13px 16px;background:#fff;border-radius:15px;box-shadow:var(--shadow)}

.app-float.a{left:5%;top:21%}

.app-float.b{right:3%;bottom:15%}

.app-float strong{display:block;color:var(--navy);font-size:10px}

.app-float span{color:var(--muted);font-size:8px}

/* About */
    .about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:29px}

.about-stat{padding:20px;background:#fff;border:1px solid var(--line);border-radius:16px}

.about-stat strong{display:block;color:var(--primary);font:800 24px "Manrope"}

.about-stat span{color:var(--muted);font-size:10px}

.about-note{padding:20px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 14px 14px 0;font-size:12px}

/* FAQ */
    .faq-wrap{max-width:880px;margin:0 auto}

.faq-item{margin-bottom:11px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}

.faq-q{
      width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
      padding:19px 21px;border:0;background:#fff;color:var(--navy);font-weight:800;text-align:left;
    }

.faq-plus{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:9px}

.faq-a{display:none;padding:0 21px 20px;color:var(--muted);font-size:12px}

.faq-item.open .faq-a{display:block}

.faq-item.open .faq-plus{transform:rotate(45deg)}

/* CTA */
    .final-cta{padding:78px 0}

.cta-box{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center;
      padding:42px 48px;color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));
      border-radius:30px;
    }

.cta-box::after{content:"";position:absolute;right:-80px;top:-110px;width:270px;height:270px;border:45px solid rgba(255,255,255,.07);border-radius:50%}

.cta-box h2{margin-bottom:9px;color:#fff;font-size:clamp(28px,4vw,43px)}

.cta-box p{margin:0;color:rgba(255,255,255,.70)}

.cta-actions{position:relative;z-index:2;display:flex;gap:10px;flex-wrap:wrap}

/* Footer */
    .site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:68px 0 46px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:48px}

.footer-brand p{max-width:390px;margin:19px 0 22px;font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:18px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:10px}

.footer-links a{font-size:12px;transition:.18s}

.footer-links a:hover{color:#fff;transform:translateX(3px)}

.footer-contact{display:grid;gap:10px;margin-top:18px}

.contact-row{display:flex;gap:10px;font-size:11px}

.contact-row i{font-style:normal;color:#AFA6FF}

.newsletter{display:flex;max-width:395px;margin-top:17px;padding:5px;background:#fff;border-radius:12px}

.newsletter input{width:100%;min-width:0;padding:0 12px;border:0;outline:0;font-size:11px}

.newsletter button{width:43px;border:0;border-radius:9px;color:#fff;background:var(--primary)}

.footer-bottom{padding:19px 0;border-top:1px solid rgba(255,255,255,.09);font-size:10px}

.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}

.footer-legal{display:flex;flex-wrap:wrap;gap:15px}

/* Floating WA */
    .floating-help{
      position:fixed;right:22px;bottom:22px;z-index:90;
      display:flex;align-items:center;gap:10px;padding:11px 15px;
      color:#fff;background:#1FAF6D;border-radius:99px;
      box-shadow:0 15px 35px rgba(16,119,73,.28);font-size:11px;font-weight:800;
    }

.floating-help span:first-child{font-size:19px}

/* Utilities */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:1060px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:grid;place-items:center}
.hero-grid,.split,.innovation-grid,.app-wrap{grid-template-columns:1fr}
.hero-visual{max-width:650px;width:100%;margin:0 auto}
.cards-3{grid-template-columns:repeat(2,1fr)}
.curriculum-grid{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(2,1fr)}
.step:nth-child(2)::after{display:none}
.footer-grid{grid-template-columns:repeat(2,1fr)}
.trust-inner{grid-template-columns:repeat(2,1fr)}
.trust-copy{grid-column:1/-1;text-align:center}
}

@media(max-width:700px){
.container{width:min(100% - 28px,var(--container))}
.section{padding:69px 0}
.brand-copy small{display:none}
.brand-logo{width:43px;height:43px}
.header-inner{min-height:74px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.hero{padding:124px 0 60px}
.hero h1{font-size:43px}
.hero-lead{font-size:15px}
.hero-visual{min-height:460px}
.visual-main{inset:12px 0 28px 20px}
.float-card.one{left:-4px;top:52px}
.float-card.two{right:-4px}
.float-card.three{display:none}
.dash-stats{grid-template-columns:1fr}
.dash-stat:nth-child(n+2){display:none}
.cards-3,.cards-2,.foundation-programs,.curriculum-grid,.about-stats,.steps,.footer-grid{grid-template-columns:1fr}
.step::after{display:none!important}
.feature-visual{min-height:445px;padding:20px}
.feature-screen{inset:44px 15px 25px 37px}
.innovation-main{min-height:520px}
.app-wrap{padding:35px 22px}
.phone-scene{min-height:390px}
.app-float.a{left:-10px}
.app-float.b{right:-10px}
.trust-inner{grid-template-columns:1fr 1fr}
.trust-item{font-size:9px}
.cta-box{grid-template-columns:1fr;padding:34px 25px}
.cta-actions{align-items:stretch;flex-direction:column}
.footer-bottom-inner{align-items:flex-start;flex-direction:column}
.floating-help{right:14px;bottom:14px;padding:11px}
.floating-help span:last-child{display:none}
}

/* Online Classes */
    .course-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:20px;
    }

.course-card{
      overflow:hidden;
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:var(--shadow-sm);
      transition:.24s ease;
    }

.course-card:hover{
      transform:translateY(-5px);
      box-shadow:var(--shadow);
    }

.course-cover{
      position:relative;
      min-height:180px;
      padding:22px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      color:#fff;
      overflow:hidden;
    }

.course-cover::after{
      content:"";
      position:absolute;
      right:-35px;
      bottom:-45px;
      width:135px;
      height:135px;
      border:24px solid rgba(255,255,255,.10);
      border-radius:50%;
    }

.course-cover.one{background:linear-gradient(135deg,#3A2F87,#6757D9)}

.course-cover.two{background:linear-gradient(135deg,#087E76,#00B7A8)}

.course-cover.three{background:linear-gradient(135deg,#8A5F13,#E0A832)}

.course-cover.four{background:linear-gradient(135deg,#8B3E62,#C04A67)}

.course-label{
      position:relative;
      z-index:1;
      align-self:flex-start;
      padding:6px 9px;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.17);
      border-radius:999px;
      font-size:9px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

.course-cover h3{
      position:relative;
      z-index:1;
      margin:28px 0 0;
      color:#fff;
      font-size:20px;
      line-height:1.28;
    }

.course-body{padding:21px}

.course-meta{
      display:flex;
      flex-wrap:wrap;
      gap:7px;
      margin-bottom:13px;
    }

.course-meta span{
      padding:5px 8px;
      color:var(--muted);
      background:#F5F4FA;
      border-radius:8px;
      font-size:9px;
      font-weight:750;
    }

.course-body p{
      margin-bottom:17px;
      color:var(--muted);
      font-size:12px;
    }

.course-actions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

.course-status{
      color:var(--secondary-dark);
      font-size:10px;
      font-weight:800;
    }

.course-more{
      margin-top:31px;
      text-align:center;
    }

@media(max-width:1060px){
.course-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.course-grid{grid-template-columns:1fr}
}

/* Banking Solution page */
    .solution-hero{padding-bottom:92px}

.solution-hero .hero-grid{grid-template-columns:1fr .96fr}

.solution-kicker{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}

.solution-kicker span{padding:7px 10px;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px;font-weight:800}

.solution-board{height:100%;padding:25px;background:linear-gradient(150deg,#282162,#17143D);border-radius:25px;overflow:hidden}

.board-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:#fff;font-size:12px;font-weight:800}

.board-status{padding:5px 8px;color:#B9FFF6;background:rgba(0,183,168,.15);border-radius:99px;font-size:8px}

.board-focus{padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.72),rgba(0,183,168,.35));border:1px solid rgba(255,255,255,.12);border-radius:18px}

.board-focus small{color:#D9D4FF;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

.board-focus h3{margin:7px 0 8px;color:#fff;font-size:23px}

.board-focus p{margin:0;color:rgba(255,255,255,.67);font-size:10px}

.board-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:13px}

.board-card{padding:15px;background:#fff;border-radius:14px}

.board-card strong{display:block;color:var(--navy);font-size:11px}

.board-card span{display:block;margin-top:3px;color:var(--muted);font-size:8px}

.board-meter{height:6px;margin-top:11px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.board-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.quick-nav{position:relative;z-index:4;margin-top:-31px}

.quick-nav-inner{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden}

.quick-nav a{display:flex;align-items:center;gap:11px;padding:19px;border-right:1px solid var(--line);transition:.18s}

.quick-nav a:last-child{border-right:0}

.quick-nav a:hover{background:var(--primary-light)}

.quick-nav i{width:34px;height:34px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.quick-nav strong{display:block;color:var(--navy);font-size:11px}

.quick-nav span span{display:block;color:var(--muted);font-size:8px}

.challenge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.challenge-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:19px}

.challenge-no{color:var(--primary);font-size:10px;font-weight:900}

.challenge-card h3{margin:9px 0 8px;font-size:16px}

.challenge-card p{margin:0;color:var(--muted);font-size:11px}

.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.solution-card{position:relative;overflow:hidden;padding:27px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm);transition:.22s}

.solution-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}

.solution-card .card-icon{width:50px;height:50px;font-size:20px}

.solution-card h3{margin:18px 0 9px;font-size:19px}

.solution-card p{color:var(--muted);font-size:12px}

.solution-card ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}

.solution-card li{display:flex;gap:8px;color:#57566B;font-size:10px}

.solution-card li:before{content:'✓';color:var(--secondary-dark);font-weight:900}

.method-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}

.method-panel{padding:30px;background:linear-gradient(145deg,#241D60,#6757D9);border-radius:28px;color:#fff}

.method-panel h3{color:#fff;font-size:27px}

.method-panel p{color:rgba(255,255,255,.68);font-size:12px}

.method-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}

.method-stat{padding:15px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.11);border-radius:14px}

.method-stat strong{display:block;color:#fff;font-size:13px}

.method-stat span{font-size:8px;color:rgba(255,255,255,.58)}

.process-list{display:grid;gap:13px}

.process-item{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:17px;background:#fff;border:1px solid var(--line);border-radius:17px}

.process-number{width:42px;height:42px;display:grid;place-items:center;color:#fff;background:var(--primary);border-radius:12px;font-weight:900}

.process-item h3{margin:0 0 4px;font-size:15px}

.process-item p{margin:0;color:var(--muted);font-size:10px}

.deliverable-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}

.deliverable{padding:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.11);border-radius:18px}

.deliverable i{display:grid;place-items:center;width:39px;height:39px;font-style:normal;background:rgba(255,255,255,.1);border-radius:11px}

.deliverable h3{margin:15px 0 7px;font-size:16px}

.deliverable p{margin:0;color:rgba(255,255,255,.63);font-size:10px}

.principle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.principle{padding:21px;background:#fff;border:1px solid var(--line);border-radius:18px}

.principle strong{display:block;color:var(--navy);font-size:13px}

.principle p{margin:7px 0 0;color:var(--muted);font-size:10px}

.notice-box{margin-top:24px;padding:20px 22px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 15px 15px 0;font-size:11px}

@media(max-width:1060px){
.quick-nav-inner,.challenge-grid,.principle-grid{grid-template-columns:repeat(2,1fr)}
.solution-grid,.deliverable-grid{grid-template-columns:repeat(2,1fr)}
.method-wrap{grid-template-columns:1fr}
}

@media(max-width:700px){
.quick-nav{margin-top:-18px}
.quick-nav-inner,.challenge-grid,.solution-grid,.deliverable-grid,.principle-grid{grid-template-columns:1fr}
.quick-nav a{border-right:0;border-bottom:1px solid var(--line)}
.quick-nav a:last-child{border-bottom:0}
.solution-hero .hero-grid{grid-template-columns:1fr}
}

/* Banking Talent Solution page */
    .talent-hero .hero-grid{grid-template-columns:1.02fr .98fr}

.talent-board{height:100%;padding:24px;background:linear-gradient(150deg,#282162,#17143D);border-radius:25px;overflow:hidden}

.talent-board-head{display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:12px;font-weight:800;margin-bottom:17px}

.talent-board-head span{padding:5px 8px;color:#C9FFF8;background:rgba(0,183,168,.16);border-radius:999px;font-size:8px}

.talent-profile{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center;padding:17px;background:linear-gradient(135deg,rgba(103,87,217,.7),rgba(0,183,168,.32));border:1px solid rgba(255,255,255,.12);border-radius:18px}

.talent-avatar{width:54px;height:54px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.15);border-radius:17px;font-size:23px}

.talent-profile h3{margin:0;color:#fff;font-size:17px}

.talent-profile p{margin:3px 0 0;color:rgba(255,255,255,.65);font-size:9px}

.competency-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}

.competency-card{padding:14px;background:#fff;border-radius:14px}

.competency-card strong{display:flex;justify-content:space-between;color:var(--navy);font-size:10px}

.competency-card strong em{font-style:normal;color:var(--primary)}

.competency-card small{display:block;margin-top:3px;color:var(--muted);font-size:8px}

.talent-path{display:flex;align-items:center;gap:7px;margin-top:12px;padding:13px;background:rgba(255,255,255,.08);border-radius:14px}

.talent-path i{width:29px;height:29px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.11);border-radius:9px;font-style:normal}

.talent-path span{color:rgba(255,255,255,.67);font-size:8px}

.talent-path strong{display:block;color:#fff;font-size:10px}

.audience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.audience-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:19px}

.audience-card i{width:40px;height:40px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:12px}

.audience-card h3{margin:15px 0 7px;font-size:16px}

.audience-card p{margin:0;color:var(--muted);font-size:10px}

.framework-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}

.framework-item{position:relative;padding:21px 17px;background:#fff;border:1px solid var(--line);border-radius:18px}

.framework-item:not(:last-child):after{content:'→';position:absolute;right:-12px;top:26px;z-index:3;color:#B5AFE5;font-weight:900}

.framework-item b{display:grid;place-items:center;width:36px;height:36px;color:#fff;background:var(--primary);border-radius:11px}

.framework-item h3{margin:14px 0 6px;font-size:14px}

.framework-item p{margin:0;color:var(--muted);font-size:9px}

.matrix-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:45px;align-items:center}

.matrix-card{padding:27px;background:linear-gradient(145deg,#231C5E,#6757D9);border-radius:27px;color:#fff}

.matrix-card h3{color:#fff;font-size:26px}

.matrix-card p{color:rgba(255,255,255,.67);font-size:11px}

.matrix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:19px}

.matrix-cell{min-height:76px;padding:11px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.11);border-radius:12px}

.matrix-cell strong{display:block;color:#fff;font-size:9px}

.matrix-cell span{display:block;margin-top:4px;color:rgba(255,255,255,.55);font-size:7px}

.matrix-cell.highlight{background:rgba(0,183,168,.27);border-color:rgba(163,255,242,.25)}

.benefit-list{display:grid;gap:14px}

.benefit-item{display:flex;gap:14px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:17px}

.benefit-item i{flex:0 0 auto;width:39px;height:39px;display:grid;place-items:center;font-style:normal;color:var(--secondary-dark);background:#E9FAF7;border-radius:11px}

.benefit-item h3{margin:0 0 4px;font-size:14px}

.benefit-item p{margin:0;color:var(--muted);font-size:10px}

.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.package-card{padding:27px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.package-card.featured{color:#fff;background:linear-gradient(145deg,var(--primary-dark),var(--primary));border:0}

.package-card.featured h3,.package-card.featured strong{color:#fff}

.package-card h3{margin:18px 0 8px;font-size:20px}

.package-card p{color:var(--muted);font-size:11px}

.package-card.featured p,.package-card.featured li{color:rgba(255,255,255,.7)}

.package-card ul{display:grid;gap:8px;padding:0;margin:18px 0 0;list-style:none}

.package-card li{display:flex;gap:8px;color:#55546A;font-size:10px}

.package-card li:before{content:'✓';color:var(--secondary);font-weight:900}

@media(max-width:1060px){
.audience-grid{grid-template-columns:repeat(2,1fr)}
.framework-grid{grid-template-columns:repeat(3,1fr)}
.framework-item:after{display:none}
.matrix-wrap{grid-template-columns:1fr}
.package-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.talent-hero .hero-grid{grid-template-columns:1fr}
.audience-grid,.framework-grid,.package-grid{grid-template-columns:1fr}
.competency-grid{grid-template-columns:1fr}
}

/* Header navigation refinement — unified multipage */
    .desktop-nav{gap:10px}

.nav-link{
      position:relative;
      gap:7px;
      padding:12px 5px;
      border:0;
      border-radius:0;
      background:transparent!important;
      box-shadow:none!important;
    }

.nav-link:hover,.nav-link.active{
      color:var(--primary);
      background:transparent!important;
    }

.nav-link::after{
      content:"";
      position:absolute;
      left:5px;right:5px;bottom:4px;
      height:2px;
      background:linear-gradient(90deg,var(--primary),var(--secondary));
      border-radius:99px;
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .2s ease;
    }

.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}

.mobile-main{gap:10px}

@media(max-width:1060px){
.desktop-nav{gap:4px}
}

:root{
      --primary:#6757D9;
      --primary-dark:#342A78;
      --primary-light:#F1EFFF;
      --secondary:#00B7A8;
      --secondary-dark:#087E76;
      --accent:#FFC95C;
      --navy:#17143D;
      --text:#44445B;
      --muted:#737388;
      --line:#E8E7F1;
      --white:#FFFFFF;
      --page:#FAFAFF;
      --success:#208A69;
      --danger:#C04A67;
      --shadow:0 22px 60px rgba(31,27,82,.10);
      --shadow-sm:0 12px 30px rgba(31,27,82,.08);
      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
      --container:1180px;
    }

*{box-sizing:border-box}

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

body{
      margin:0;
      color:var(--text);
      background:var(--page);
      font-family:"Inter",Arial,sans-serif;
      line-height:1.7;
      overflow-x:hidden;
    }

body.menu-open{overflow:hidden}

img,svg{max-width:100%;display:block}

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

button,input,select,textarea{font:inherit}

button{cursor:pointer}

h1,h2,h3,h4,p{margin-top:0}

h1,h2,h3,h4{
      color:var(--navy);
      font-family:"Manrope",sans-serif;
      letter-spacing:-.025em;
    }

.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}

.section{padding:96px 0}

.section-soft{background:linear-gradient(180deg,#F8F7FF 0%,#FFFFFF 100%)}

.section-dark{color:#fff;background:var(--navy)}

.section-dark h2,.section-dark h3,.section-dark h4{color:#fff}

.section-head{max-width:760px;margin:0 auto 48px;text-align:center}

.section-head.left{margin-left:0;text-align:left}

.section-head h2{
      margin:14px 0 15px;
      font-size:clamp(31px,4vw,48px);
      line-height:1.14;
    }

.section-head p{color:var(--muted);font-size:16px}

.section-dark .section-head p{color:rgba(255,255,255,.68)}

.eyebrow{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:7px 12px;
      color:var(--primary-dark);
      background:#fff;
      border:1px solid rgba(103,87,217,.17);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.10em;
      text-transform:uppercase;
    }

.eyebrow::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:var(--secondary);
      box-shadow:0 0 0 5px rgba(0,183,168,.12);
    }

.section-dark .eyebrow{
      color:#fff;background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.12);
    }

.btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 21px;
      border:1px solid transparent;
      border-radius:13px;
      font-weight:750;
      transition:.22s ease;
    }

.btn:hover{transform:translateY(-2px)}

.btn-primary{
      color:#fff;background:var(--primary);
      box-shadow:0 12px 28px rgba(103,87,217,.28);
    }

.btn-primary:hover{background:#5747C8}

.btn-secondary{color:#fff;background:var(--secondary)}

.btn-light{color:var(--primary-dark);background:#fff}

.btn-outline{
      color:var(--primary-dark);
      background:rgba(255,255,255,.75);
      border-color:#DCD9F0;
    }

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.icon-arrow{font-size:18px;line-height:1}

.tag{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      color:var(--primary-dark);
      background:var(--primary-light);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
    }

/* Header */
    .site-header{
      position:fixed;top:0;left:0;right:0;z-index:100;
      background:rgba(255,255,255,.92);
      border-bottom:1px solid rgba(232,231,241,.86);
      backdrop-filter:blur(17px);
      transition:.25s ease;
    }

.site-header.scrolled{box-shadow:0 9px 28px rgba(31,27,82,.08)}

.header-inner{
      min-height:82px;
      display:flex;align-items:center;justify-content:space-between;gap:24px;
    }

.brand{display:inline-flex;align-items:center;gap:12px;min-width:max-content}

.brand-logo{width:49px;height:49px;filter:drop-shadow(0 10px 14px rgba(103,87,217,.20))}

.brand-copy strong{
      display:block;color:var(--navy);
      font:800 19px/1.1 "Manrope",sans-serif;
    }

.brand-copy small{
      display:block;margin-top:5px;color:var(--muted);
      font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    }

.desktop-nav{display:flex;align-items:center;gap:4px}

.nav-item{position:relative}

.nav-link{
      display:flex;align-items:center;gap:6px;
      padding:12px 13px;
      color:#48475F;
      border-radius:10px;
      font-size:13px;font-weight:700;
      transition:.18s ease;
    }

.nav-link:hover,.nav-link.active{color:var(--primary);background:var(--primary-light)}

.chevron{font-size:10px;transition:.18s}

.nav-item:hover .chevron{transform:rotate(180deg)}

.dropdown{
      position:absolute;top:calc(100% + 12px);left:0;
      width:300px;padding:10px;
      background:#fff;border:1px solid var(--line);
      border-radius:18px;box-shadow:var(--shadow);
      opacity:0;visibility:hidden;transform:translateY(9px);
      transition:.18s ease;
    }

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}

.dropdown.wide{width:680px;display:grid;grid-template-columns:1fr 1fr;gap:6px}

.drop-link{
      display:flex;gap:12px;padding:12px;
      border-radius:12px;transition:.18s;
    }

.drop-link:hover{background:var(--primary-light)}

.drop-icon{
      flex:0 0 auto;width:38px;height:38px;border-radius:11px;
      display:grid;place-items:center;
      color:var(--primary);background:#F3F1FF;font-size:17px;
    }

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span{display:block;margin-top:2px;color:var(--muted);font-size:11px;line-height:1.45}

.header-action{display:flex;align-items:center;gap:9px}

.menu-toggle{
      display:none;width:45px;height:45px;
      border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--navy);
    }

/* Mobile menu */
    .mobile-panel{
      display:none;
      position:fixed;inset:82px 0 0;z-index:99;
      padding:18px 20px 35px;
      background:#fff;overflow:auto;
    }

.mobile-panel.open{display:block}

.mobile-group{border-bottom:1px solid var(--line)}

.mobile-main{
      width:100%;display:flex;align-items:center;justify-content:space-between;
      padding:15px 4px;border:0;background:none;color:var(--navy);font-weight:800;text-align:left;
    }

.mobile-sub{display:none;padding:0 0 12px 12px}

.mobile-sub.open{display:grid}

.mobile-sub a{padding:9px 8px;color:var(--muted);font-size:14px}

.mobile-login{margin-top:20px;width:100%}

/* Hero */
    .hero{
      position:relative;overflow:hidden;
      padding:156px 0 82px;
      background:
        radial-gradient(circle at 14% 23%,rgba(0,183,168,.14),transparent 27%),
        radial-gradient(circle at 87% 20%,rgba(255,201,92,.20),transparent 24%),
        linear-gradient(135deg,#F4F1FF 0%,#FFFFFF 52%,#EDFBF9 100%);
    }

.hero::before{
      content:"";position:absolute;left:-110px;bottom:-145px;
      width:360px;height:360px;border:52px solid rgba(103,87,217,.055);border-radius:50%;
    }

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:62px;align-items:center}

.hero h1{
      margin:20px 0 19px;
      font-size:clamp(42px,5.4vw,69px);
      line-height:1.05;
    }

.gradient-text{
      background:linear-gradient(90deg,var(--primary),var(--secondary-dark));
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }

.hero-lead{max-width:690px;color:#626278;font-size:17px}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px}

.hero-proof{display:flex;flex-wrap:wrap;gap:16px;margin-top:31px}

.proof-item{display:flex;align-items:center;gap:9px;color:#5D5C72;font-size:12px;font-weight:700}

.proof-icon{
      width:28px;height:28px;display:grid;place-items:center;
      color:var(--secondary-dark);background:#E9FAF7;border-radius:9px;
    }

.hero-visual{position:relative;min-height:530px}

.visual-main{
      position:absolute;inset:18px 6px 18px 40px;
      padding:22px;
      background:rgba(255,255,255,.78);
      border:1px solid rgba(255,255,255,.95);
      border-radius:34px;box-shadow:var(--shadow);
      backdrop-filter:blur(15px);
    }

.dashboard{
      height:100%;padding:22px;
      background:linear-gradient(150deg,#282162,#17143D);
      border-radius:25px;overflow:hidden;
    }

.dash-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}

.dash-brand{display:flex;align-items:center;gap:9px;color:#fff;font-size:12px;font-weight:800}

.dash-dots{display:flex;gap:5px}

.dash-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}

.dash-hero{
      padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.62),rgba(0,183,168,.36));
      border:1px solid rgba(255,255,255,.12);border-radius:19px;
    }

.dash-label{color:#D9D4FF;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.dash-hero h3{margin:8px 0 7px;color:#fff;font-size:25px;line-height:1.2}

.dash-hero p{margin:0;color:rgba(255,255,255,.68);font-size:11px}

.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}

.dash-stat{padding:13px;background:rgba(255,255,255,.07);border-radius:13px}

.dash-stat strong{display:block;color:#fff;font-size:16px}

.dash-stat span{color:rgba(255,255,255,.55);font-size:9px}

.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}

.dash-card{padding:16px;background:#fff;border-radius:16px}

.dash-card h4{margin-bottom:10px;font-size:12px}

.progress{height:7px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.mini-list{display:grid;gap:8px}

.mini-row{display:flex;align-items:center;gap:8px}

.mini-row i{width:9px;height:9px;border-radius:3px;background:var(--secondary)}

.mini-row span{font-size:9px;color:var(--muted)}

.float-card{
      position:absolute;z-index:2;display:flex;align-items:center;gap:12px;
      padding:14px 17px;background:#fff;border:1px solid var(--line);
      border-radius:16px;box-shadow:var(--shadow-sm);
    }

.float-card.one{left:0;top:88px}

.float-card.two{right:-10px;bottom:75px}

.float-card.three{left:10px;bottom:15px}

.float-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--primary-light);color:var(--primary)}

.float-card strong{display:block;color:var(--navy);font-size:12px}

.float-card small{display:block;color:var(--muted);font-size:9px}

/* Trust strip */
    .trust-strip{position:relative;z-index:3;margin-top:-1px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.trust-inner{display:grid;grid-template-columns:1.15fr repeat(4,1fr);align-items:center;gap:20px;padding:25px 0}

.trust-copy strong{display:block;color:var(--navy);font-size:13px}

.trust-copy span{color:var(--muted);font-size:11px}

.trust-item{display:flex;align-items:center;justify-content:center;gap:9px;color:#69677D;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}

.trust-mark{width:32px;height:32px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:10px}

/* Solution cards */
    .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

.service-card{
      position:relative;overflow:hidden;
      min-height:310px;padding:28px;
      background:#fff;border:1px solid var(--line);
      border-radius:var(--radius-lg);box-shadow:0 12px 35px rgba(31,27,82,.055);
      transition:.25s ease;
    }

.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}

.service-card::after{
      content:"";position:absolute;right:-45px;bottom:-50px;width:145px;height:145px;
      border:27px solid rgba(103,87,217,.055);border-radius:50%;
    }

.card-icon{
      width:54px;height:54px;display:grid;place-items:center;
      color:var(--primary);background:var(--primary-light);
      border-radius:16px;font-size:24px;
    }

.service-card:nth-child(2n) .card-icon{color:var(--secondary-dark);background:#E9FAF7}

.service-card:nth-child(3n) .card-icon{color:#9A6C0F;background:#FFF6DE}

.service-card h3{margin:21px 0 11px;font-size:21px}

.service-card p{color:var(--muted);font-size:13px}

.card-list{display:grid;gap:8px;margin:18px 0 20px;padding:0;list-style:none}

.card-list li{display:flex;gap:9px;color:#55546A;font-size:12px}

.card-list li::before{content:"✓";color:var(--secondary-dark);font-weight:900}

.text-link{position:relative;z-index:2;color:var(--primary);font-size:12px;font-weight:800}

.text-link:hover{text-decoration:underline}

/* Split */
    .split{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}

.feature-visual{
      position:relative;min-height:520px;padding:33px;
      background:linear-gradient(145deg,#F0EDFF,#EAFBF8);
      border:1px solid #E2DFF7;border-radius:32px;
    }

.feature-screen{
      position:absolute;inset:48px 32px 34px 57px;padding:22px;
      background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow);
    }

.screen-nav{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}

.screen-title{font-size:11px;font-weight:800;color:var(--navy)}

.screen-pill{padding:5px 9px;color:var(--secondary-dark);background:#E8FAF7;border-radius:99px;font-size:8px;font-weight:800}

.chart-area{display:flex;align-items:flex-end;gap:10px;height:155px;padding:25px 10px 8px;border-bottom:1px solid var(--line)}

.bar{flex:1;min-width:15px;background:linear-gradient(180deg,var(--primary),#9488EC);border-radius:7px 7px 2px 2px}

.screen-bottom{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px}

.screen-box{padding:14px;background:#FAFAFF;border:1px solid var(--line);border-radius:13px}

.screen-box strong{display:block;color:var(--navy);font-size:19px}

.screen-box span{color:var(--muted);font-size:9px}

.feature-chip{
      position:absolute;display:flex;align-items:center;gap:9px;padding:12px 14px;
      background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);
    }

.feature-chip.one{top:21px;right:18px}

.feature-chip.two{left:12px;bottom:53px}

.feature-chip i{width:32px;height:32px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.feature-chip strong{display:block;color:var(--navy);font-size:10px}

.feature-chip span{display:block;color:var(--muted);font-size:8px}

.feature-copy h2{margin:14px 0 16px;font-size:clamp(31px,4vw,48px);line-height:1.14}

.feature-copy>p{color:var(--muted)}

.feature-points{display:grid;gap:16px;margin:27px 0 30px}

.feature-point{display:flex;gap:14px}

.point-icon{flex:0 0 auto;width:39px;height:39px;display:grid;place-items:center;color:var(--secondary-dark);background:#E9FAF7;border-radius:12px;font-weight:900}

.feature-point strong{display:block;color:var(--navy);font-size:13px}

.feature-point span{display:block;margin-top:2px;color:var(--muted);font-size:11px}

/* Innovation */
    .innovation-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:25px}

.innovation-main{
      min-height:480px;padding:34px;
      color:#fff;background:linear-gradient(145deg,var(--primary-dark),var(--primary));
      border-radius:29px;overflow:hidden;position:relative;
    }

.innovation-main h3{max-width:540px;margin:18px 0 14px;color:#fff;font-size:32px;line-height:1.17}

.innovation-main p{max-width:610px;color:rgba(255,255,255,.74)}

.innovation-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}

.innovation-tags span{padding:8px 11px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.13);border-radius:99px;font-size:10px;font-weight:800}

.ai-orbit{position:absolute;right:-35px;bottom:-72px;width:330px;height:330px;border:1px solid rgba(255,255,255,.15);border-radius:50%}

.ai-orbit::before,.ai-orbit::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%}

.ai-orbit::before{inset:45px}

.ai-orbit::after{inset:93px}

.ai-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:83px;height:83px;display:grid;place-items:center;color:var(--primary-dark);background:#fff;border-radius:24px;font:800 25px "Manrope"}

.orbit-dot{position:absolute;width:36px;height:36px;display:grid;place-items:center;color:#fff;background:var(--secondary);border-radius:12px;font-size:13px}

.orbit-dot.a{left:39px;top:57px}

.orbit-dot.b{right:18px;top:115px}

.orbit-dot.c{left:72px;bottom:27px}

.innovation-side{display:grid;gap:20px}

.example-card{padding:25px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.example-head{display:flex;align-items:center;justify-content:space-between;gap:15px}

.example-head h3{margin:0;font-size:18px}

.example-card p{margin:12px 0 15px;color:var(--muted);font-size:12px}

.example-meta{display:flex;flex-wrap:wrap;gap:7px}

.example-meta span{padding:6px 9px;color:#65637A;background:#F5F4FA;border-radius:8px;font-size:9px;font-weight:750}

/* Foundation */
    .foundation-card{
      position:relative;overflow:hidden;padding:33px;
      background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-sm);
    }

.foundation-card.education{background:linear-gradient(145deg,#FFFFFF,#F3F0FF)}

.foundation-card.umkm{background:linear-gradient(145deg,#FFFFFF,#EBFAF7)}

.foundation-card h3{margin:19px 0 11px;font-size:27px}

.foundation-card p{color:var(--muted);font-size:13px}

.foundation-programs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:24px 0}

.program-mini{padding:13px;background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:13px}

.program-mini strong{display:block;color:var(--navy);font-size:11px}

.program-mini span{display:block;margin-top:3px;color:var(--muted);font-size:9px}

/* Journey */
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.step{
      position:relative;padding:25px 22px;background:#fff;border:1px solid var(--line);border-radius:20px;
    }

.step-no{
      width:41px;height:41px;display:grid;place-items:center;
      color:#fff;background:var(--primary);border-radius:13px;font-weight:800;
    }

.step h3{margin:17px 0 8px;font-size:17px}

.step p{color:var(--muted);font-size:11px}

.step:not(:last-child)::after{
      content:"→";position:absolute;right:-17px;top:32px;z-index:3;color:#B3AEE2;font-size:22px;font-weight:900;
    }

/* Curriculum */
    .curriculum-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:30px}

.tab-btn{
      min-height:41px;padding:0 15px;border:1px solid var(--line);border-radius:11px;
      color:var(--muted);background:#fff;font-size:11px;font-weight:800;
    }

.tab-btn.active{color:#fff;background:var(--primary);border-color:var(--primary)}

.curriculum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.curriculum-item{padding:21px;background:#fff;border:1px solid var(--line);border-radius:17px}

.curriculum-item .num{color:var(--primary);font-size:10px;font-weight:900}

.curriculum-item h3{margin:8px 0 7px;font-size:15px;line-height:1.35}

.curriculum-item p{margin:0;color:var(--muted);font-size:10px}

/* App */
    .app-wrap{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr .92fr;gap:55px;align-items:center;
      padding:50px 55px;color:#fff;
      background:linear-gradient(135deg,#211A58,#6757D9);
      border-radius:34px;
    }

.app-wrap h2{margin:14px 0 14px;color:#fff;font-size:clamp(30px,4vw,47px);line-height:1.15}

.app-wrap p{color:rgba(255,255,255,.70)}

.store-row{display:flex;flex-wrap:wrap;gap:11px;margin-top:25px}

.store-badge{
      display:flex;align-items:center;gap:11px;min-width:175px;padding:10px 14px;
      color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
      border-radius:13px;
    }

.store-badge svg{width:28px;height:28px}

.store-badge small{display:block;color:rgba(255,255,255,.60);font-size:8px;text-transform:uppercase;letter-spacing:.08em}

.store-badge strong{display:block;font-size:12px}

.phone-scene{position:relative;min-height:420px}

.phone{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(5deg);
      width:230px;height:420px;padding:9px;background:#111026;border:2px solid rgba(255,255,255,.25);
      border-radius:35px;box-shadow:0 28px 55px rgba(0,0,0,.32);
    }

.phone-screen{height:100%;padding:19px 15px;background:linear-gradient(180deg,#F5F2FF,#fff);border-radius:27px;overflow:hidden}

.notch{width:76px;height:17px;margin:-11px auto 15px;background:#111026;border-radius:0 0 13px 13px}

.mobile-logo{display:flex;align-items:center;gap:7px;color:var(--navy);font-size:9px;font-weight:900}

.mobile-logo svg{width:25px}

.mobile-welcome{margin-top:18px;padding:16px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:17px}

.mobile-welcome strong{display:block;font-size:13px}

.mobile-welcome span{font-size:8px;opacity:.78}

.mobile-course-title{margin:16px 0 9px;color:var(--navy);font-size:10px;font-weight:900}

.mobile-course{display:flex;gap:9px;margin-bottom:8px;padding:9px;background:#fff;border:1px solid var(--line);border-radius:11px}

.mobile-thumb{width:42px;height:38px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:8px;font-size:12px}

.mobile-course strong{display:block;color:var(--navy);font-size:8px}

.mobile-course span{display:block;color:var(--muted);font-size:6px}

.app-float{position:absolute;padding:13px 16px;background:#fff;border-radius:15px;box-shadow:var(--shadow)}

.app-float.a{left:5%;top:21%}

.app-float.b{right:3%;bottom:15%}

.app-float strong{display:block;color:var(--navy);font-size:10px}

.app-float span{color:var(--muted);font-size:8px}

/* About */
    .about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:29px}

.about-stat{padding:20px;background:#fff;border:1px solid var(--line);border-radius:16px}

.about-stat strong{display:block;color:var(--primary);font:800 24px "Manrope"}

.about-stat span{color:var(--muted);font-size:10px}

.about-note{padding:20px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 14px 14px 0;font-size:12px}

/* FAQ */
    .faq-wrap{max-width:880px;margin:0 auto}

.faq-item{margin-bottom:11px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}

.faq-q{
      width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
      padding:19px 21px;border:0;background:#fff;color:var(--navy);font-weight:800;text-align:left;
    }

.faq-plus{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:9px}

.faq-a{display:none;padding:0 21px 20px;color:var(--muted);font-size:12px}

.faq-item.open .faq-a{display:block}

.faq-item.open .faq-plus{transform:rotate(45deg)}

/* CTA */
    .final-cta{padding:78px 0}

.cta-box{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center;
      padding:42px 48px;color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));
      border-radius:30px;
    }

.cta-box::after{content:"";position:absolute;right:-80px;top:-110px;width:270px;height:270px;border:45px solid rgba(255,255,255,.07);border-radius:50%}

.cta-box h2{margin-bottom:9px;color:#fff;font-size:clamp(28px,4vw,43px)}

.cta-box p{margin:0;color:rgba(255,255,255,.70)}

.cta-actions{position:relative;z-index:2;display:flex;gap:10px;flex-wrap:wrap}

/* Footer */
    .site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:68px 0 46px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:48px}

.footer-brand p{max-width:390px;margin:19px 0 22px;font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:18px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:10px}

.footer-links a{font-size:12px;transition:.18s}

.footer-links a:hover{color:#fff;transform:translateX(3px)}

.footer-contact{display:grid;gap:10px;margin-top:18px}

.contact-row{display:flex;gap:10px;font-size:11px}

.contact-row i{font-style:normal;color:#AFA6FF}

.newsletter{display:flex;max-width:395px;margin-top:17px;padding:5px;background:#fff;border-radius:12px}

.newsletter input{width:100%;min-width:0;padding:0 12px;border:0;outline:0;font-size:11px}

.newsletter button{width:43px;border:0;border-radius:9px;color:#fff;background:var(--primary)}

.footer-bottom{padding:19px 0;border-top:1px solid rgba(255,255,255,.09);font-size:10px}

.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}

.footer-legal{display:flex;flex-wrap:wrap;gap:15px}

/* Floating WA */
    .floating-help{
      position:fixed;right:22px;bottom:22px;z-index:90;
      display:flex;align-items:center;gap:10px;padding:11px 15px;
      color:#fff;background:#1FAF6D;border-radius:99px;
      box-shadow:0 15px 35px rgba(16,119,73,.28);font-size:11px;font-weight:800;
    }

.floating-help span:first-child{font-size:19px}

/* Utilities */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:1060px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:grid;place-items:center}
.hero-grid,.split,.innovation-grid,.app-wrap{grid-template-columns:1fr}
.hero-visual{max-width:650px;width:100%;margin:0 auto}
.cards-3{grid-template-columns:repeat(2,1fr)}
.curriculum-grid{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(2,1fr)}
.step:nth-child(2)::after{display:none}
.footer-grid{grid-template-columns:repeat(2,1fr)}
.trust-inner{grid-template-columns:repeat(2,1fr)}
.trust-copy{grid-column:1/-1;text-align:center}
}

@media(max-width:700px){
.container{width:min(100% - 28px,var(--container))}
.section{padding:69px 0}
.brand-copy small{display:none}
.brand-logo{width:43px;height:43px}
.header-inner{min-height:74px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.hero{padding:124px 0 60px}
.hero h1{font-size:43px}
.hero-lead{font-size:15px}
.hero-visual{min-height:460px}
.visual-main{inset:12px 0 28px 20px}
.float-card.one{left:-4px;top:52px}
.float-card.two{right:-4px}
.float-card.three{display:none}
.dash-stats{grid-template-columns:1fr}
.dash-stat:nth-child(n+2){display:none}
.cards-3,.cards-2,.foundation-programs,.curriculum-grid,.about-stats,.steps,.footer-grid{grid-template-columns:1fr}
.step::after{display:none!important}
.feature-visual{min-height:445px;padding:20px}
.feature-screen{inset:44px 15px 25px 37px}
.innovation-main{min-height:520px}
.app-wrap{padding:35px 22px}
.phone-scene{min-height:390px}
.app-float.a{left:-10px}
.app-float.b{right:-10px}
.trust-inner{grid-template-columns:1fr 1fr}
.trust-item{font-size:9px}
.cta-box{grid-template-columns:1fr;padding:34px 25px}
.cta-actions{align-items:stretch;flex-direction:column}
.footer-bottom-inner{align-items:flex-start;flex-direction:column}
.floating-help{right:14px;bottom:14px;padding:11px}
.floating-help span:last-child{display:none}
}

/* Online Classes */
    .course-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:20px;
    }

.course-card{
      overflow:hidden;
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:var(--shadow-sm);
      transition:.24s ease;
    }

.course-card:hover{
      transform:translateY(-5px);
      box-shadow:var(--shadow);
    }

.course-cover{
      position:relative;
      min-height:180px;
      padding:22px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      color:#fff;
      overflow:hidden;
    }

.course-cover::after{
      content:"";
      position:absolute;
      right:-35px;
      bottom:-45px;
      width:135px;
      height:135px;
      border:24px solid rgba(255,255,255,.10);
      border-radius:50%;
    }

.course-cover.one{background:linear-gradient(135deg,#3A2F87,#6757D9)}

.course-cover.two{background:linear-gradient(135deg,#087E76,#00B7A8)}

.course-cover.three{background:linear-gradient(135deg,#8A5F13,#E0A832)}

.course-cover.four{background:linear-gradient(135deg,#8B3E62,#C04A67)}

.course-label{
      position:relative;
      z-index:1;
      align-self:flex-start;
      padding:6px 9px;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.17);
      border-radius:999px;
      font-size:9px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

.course-cover h3{
      position:relative;
      z-index:1;
      margin:28px 0 0;
      color:#fff;
      font-size:20px;
      line-height:1.28;
    }

.course-body{padding:21px}

.course-meta{
      display:flex;
      flex-wrap:wrap;
      gap:7px;
      margin-bottom:13px;
    }

.course-meta span{
      padding:5px 8px;
      color:var(--muted);
      background:#F5F4FA;
      border-radius:8px;
      font-size:9px;
      font-weight:750;
    }

.course-body p{
      margin-bottom:17px;
      color:var(--muted);
      font-size:12px;
    }

.course-actions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

.course-status{
      color:var(--secondary-dark);
      font-size:10px;
      font-weight:800;
    }

.course-more{
      margin-top:31px;
      text-align:center;
    }

@media(max-width:1060px){
.course-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.course-grid{grid-template-columns:1fr}
}

/* Banking Solution page */
    .solution-hero{padding-bottom:92px}

.solution-hero .hero-grid{grid-template-columns:1fr .96fr}

.solution-kicker{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}

.solution-kicker span{padding:7px 10px;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px;font-weight:800}

.solution-board{height:100%;padding:25px;background:linear-gradient(150deg,#282162,#17143D);border-radius:25px;overflow:hidden}

.board-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:#fff;font-size:12px;font-weight:800}

.board-status{padding:5px 8px;color:#B9FFF6;background:rgba(0,183,168,.15);border-radius:99px;font-size:8px}

.board-focus{padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.72),rgba(0,183,168,.35));border:1px solid rgba(255,255,255,.12);border-radius:18px}

.board-focus small{color:#D9D4FF;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

.board-focus h3{margin:7px 0 8px;color:#fff;font-size:23px}

.board-focus p{margin:0;color:rgba(255,255,255,.67);font-size:10px}

.board-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:13px}

.board-card{padding:15px;background:#fff;border-radius:14px}

.board-card strong{display:block;color:var(--navy);font-size:11px}

.board-card span{display:block;margin-top:3px;color:var(--muted);font-size:8px}

.board-meter{height:6px;margin-top:11px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.board-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.quick-nav{position:relative;z-index:4;margin-top:-31px}

.quick-nav-inner{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden}

.quick-nav a{display:flex;align-items:center;gap:11px;padding:19px;border-right:1px solid var(--line);transition:.18s}

.quick-nav a:last-child{border-right:0}

.quick-nav a:hover{background:var(--primary-light)}

.quick-nav i{width:34px;height:34px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.quick-nav strong{display:block;color:var(--navy);font-size:11px}

.quick-nav span span{display:block;color:var(--muted);font-size:8px}

.challenge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.challenge-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:19px}

.challenge-no{color:var(--primary);font-size:10px;font-weight:900}

.challenge-card h3{margin:9px 0 8px;font-size:16px}

.challenge-card p{margin:0;color:var(--muted);font-size:11px}

.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.solution-card{position:relative;overflow:hidden;padding:27px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm);transition:.22s}

.solution-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}

.solution-card .card-icon{width:50px;height:50px;font-size:20px}

.solution-card h3{margin:18px 0 9px;font-size:19px}

.solution-card p{color:var(--muted);font-size:12px}

.solution-card ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}

.solution-card li{display:flex;gap:8px;color:#57566B;font-size:10px}

.solution-card li:before{content:'✓';color:var(--secondary-dark);font-weight:900}

.method-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}

.method-panel{padding:30px;background:linear-gradient(145deg,#241D60,#6757D9);border-radius:28px;color:#fff}

.method-panel h3{color:#fff;font-size:27px}

.method-panel p{color:rgba(255,255,255,.68);font-size:12px}

.method-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}

.method-stat{padding:15px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.11);border-radius:14px}

.method-stat strong{display:block;color:#fff;font-size:13px}

.method-stat span{font-size:8px;color:rgba(255,255,255,.58)}

.process-list{display:grid;gap:13px}

.process-item{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:17px;background:#fff;border:1px solid var(--line);border-radius:17px}

.process-number{width:42px;height:42px;display:grid;place-items:center;color:#fff;background:var(--primary);border-radius:12px;font-weight:900}

.process-item h3{margin:0 0 4px;font-size:15px}

.process-item p{margin:0;color:var(--muted);font-size:10px}

.deliverable-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}

.deliverable{padding:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.11);border-radius:18px}

.deliverable i{display:grid;place-items:center;width:39px;height:39px;font-style:normal;background:rgba(255,255,255,.1);border-radius:11px}

.deliverable h3{margin:15px 0 7px;font-size:16px}

.deliverable p{margin:0;color:rgba(255,255,255,.63);font-size:10px}

.principle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.principle{padding:21px;background:#fff;border:1px solid var(--line);border-radius:18px}

.principle strong{display:block;color:var(--navy);font-size:13px}

.principle p{margin:7px 0 0;color:var(--muted);font-size:10px}

.notice-box{margin-top:24px;padding:20px 22px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 15px 15px 0;font-size:11px}

@media(max-width:1060px){
.quick-nav-inner,.challenge-grid,.principle-grid{grid-template-columns:repeat(2,1fr)}
.solution-grid,.deliverable-grid{grid-template-columns:repeat(2,1fr)}
.method-wrap{grid-template-columns:1fr}
}

@media(max-width:700px){
.quick-nav{margin-top:-18px}
.quick-nav-inner,.challenge-grid,.solution-grid,.deliverable-grid,.principle-grid{grid-template-columns:1fr}
.quick-nav a{border-right:0;border-bottom:1px solid var(--line)}
.quick-nav a:last-child{border-bottom:0}
.solution-hero .hero-grid{grid-template-columns:1fr}
}

/* Header navigation refinement — unified multipage */
    .desktop-nav{gap:10px}

.nav-link{
      position:relative;
      gap:7px;
      padding:12px 5px;
      border:0;
      border-radius:0;
      background:transparent!important;
      box-shadow:none!important;
    }

.nav-link:hover,.nav-link.active{
      color:var(--primary);
      background:transparent!important;
    }

.nav-link::after{
      content:"";
      position:absolute;
      left:5px;right:5px;bottom:4px;
      height:2px;
      background:linear-gradient(90deg,var(--primary),var(--secondary));
      border-radius:99px;
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .2s ease;
    }

.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}

.mobile-main{gap:10px}

@media(max-width:1060px){
.desktop-nav{gap:4px}
}

:root{
      --primary:#6757D9;
      --primary-dark:#342A78;
      --primary-light:#F1EFFF;
      --secondary:#00B7A8;
      --secondary-dark:#087E76;
      --accent:#FFC95C;
      --navy:#17143D;
      --text:#44445B;
      --muted:#737388;
      --line:#E8E7F1;
      --white:#FFFFFF;
      --page:#FAFAFF;
      --success:#208A69;
      --danger:#C04A67;
      --shadow:0 22px 60px rgba(31,27,82,.10);
      --shadow-sm:0 12px 30px rgba(31,27,82,.08);
      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
      --container:1180px;
    }

*{box-sizing:border-box}

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

body{
      margin:0;
      color:var(--text);
      background:var(--page);
      font-family:"Inter",Arial,sans-serif;
      line-height:1.7;
      overflow-x:hidden;
    }

body.menu-open{overflow:hidden}

img,svg{max-width:100%;display:block}

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

button,input,select,textarea{font:inherit}

button{cursor:pointer}

h1,h2,h3,h4,p{margin-top:0}

h1,h2,h3,h4{
      color:var(--navy);
      font-family:"Manrope",sans-serif;
      letter-spacing:-.025em;
    }

.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}

.section{padding:96px 0}

.section-soft{background:linear-gradient(180deg,#F8F7FF 0%,#FFFFFF 100%)}

.section-dark{color:#fff;background:var(--navy)}

.section-dark h2,.section-dark h3,.section-dark h4{color:#fff}

.section-head{max-width:760px;margin:0 auto 48px;text-align:center}

.section-head.left{margin-left:0;text-align:left}

.section-head h2{
      margin:14px 0 15px;
      font-size:clamp(31px,4vw,48px);
      line-height:1.14;
    }

.section-head p{color:var(--muted);font-size:16px}

.section-dark .section-head p{color:rgba(255,255,255,.68)}

.eyebrow{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:7px 12px;
      color:var(--primary-dark);
      background:#fff;
      border:1px solid rgba(103,87,217,.17);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.10em;
      text-transform:uppercase;
    }

.eyebrow::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:var(--secondary);
      box-shadow:0 0 0 5px rgba(0,183,168,.12);
    }

.section-dark .eyebrow{
      color:#fff;background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.12);
    }

.btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 21px;
      border:1px solid transparent;
      border-radius:13px;
      font-weight:750;
      transition:.22s ease;
    }

.btn:hover{transform:translateY(-2px)}

.btn-primary{
      color:#fff;background:var(--primary);
      box-shadow:0 12px 28px rgba(103,87,217,.28);
    }

.btn-primary:hover{background:#5747C8}

.btn-secondary{color:#fff;background:var(--secondary)}

.btn-light{color:var(--primary-dark);background:#fff}

.btn-outline{
      color:var(--primary-dark);
      background:rgba(255,255,255,.75);
      border-color:#DCD9F0;
    }

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.icon-arrow{font-size:18px;line-height:1}

.tag{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      color:var(--primary-dark);
      background:var(--primary-light);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
    }

/* Header */
    .site-header{
      position:fixed;top:0;left:0;right:0;z-index:100;
      background:rgba(255,255,255,.92);
      border-bottom:1px solid rgba(232,231,241,.86);
      backdrop-filter:blur(17px);
      transition:.25s ease;
    }

.site-header.scrolled{box-shadow:0 9px 28px rgba(31,27,82,.08)}

.header-inner{
      min-height:82px;
      display:flex;align-items:center;justify-content:space-between;gap:24px;
    }

.brand{display:inline-flex;align-items:center;gap:12px;min-width:max-content}

.brand-logo{width:49px;height:49px;filter:drop-shadow(0 10px 14px rgba(103,87,217,.20))}

.brand-copy strong{
      display:block;color:var(--navy);
      font:800 19px/1.1 "Manrope",sans-serif;
    }

.brand-copy small{
      display:block;margin-top:5px;color:var(--muted);
      font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    }

.desktop-nav{display:flex;align-items:center;gap:4px}

.nav-item{position:relative}

.nav-link{
      display:flex;align-items:center;gap:6px;
      padding:12px 13px;
      color:#48475F;
      border-radius:10px;
      font-size:13px;font-weight:700;
      transition:.18s ease;
    }

.nav-link:hover,.nav-link.active{color:var(--primary);background:var(--primary-light)}

.chevron{font-size:10px;transition:.18s}

.nav-item:hover .chevron{transform:rotate(180deg)}

.dropdown{
      position:absolute;top:calc(100% + 12px);left:0;
      width:300px;padding:10px;
      background:#fff;border:1px solid var(--line);
      border-radius:18px;box-shadow:var(--shadow);
      opacity:0;visibility:hidden;transform:translateY(9px);
      transition:.18s ease;
    }

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}

.dropdown.wide{width:680px;display:grid;grid-template-columns:1fr 1fr;gap:6px}

.drop-link{
      display:flex;gap:12px;padding:12px;
      border-radius:12px;transition:.18s;
    }

.drop-link:hover{background:var(--primary-light)}

.drop-icon{
      flex:0 0 auto;width:38px;height:38px;border-radius:11px;
      display:grid;place-items:center;
      color:var(--primary);background:#F3F1FF;font-size:17px;
    }

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span{display:block;margin-top:2px;color:var(--muted);font-size:11px;line-height:1.45}

.header-action{display:flex;align-items:center;gap:9px}

.menu-toggle{
      display:none;width:45px;height:45px;
      border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--navy);
    }

/* Mobile menu */
    .mobile-panel{
      display:none;
      position:fixed;inset:82px 0 0;z-index:99;
      padding:18px 20px 35px;
      background:#fff;overflow:auto;
    }

.mobile-panel.open{display:block}

.mobile-group{border-bottom:1px solid var(--line)}

.mobile-main{
      width:100%;display:flex;align-items:center;justify-content:space-between;
      padding:15px 4px;border:0;background:none;color:var(--navy);font-weight:800;text-align:left;
    }

.mobile-sub{display:none;padding:0 0 12px 12px}

.mobile-sub.open{display:grid}

.mobile-sub a{padding:9px 8px;color:var(--muted);font-size:14px}

.mobile-login{margin-top:20px;width:100%}

/* Hero */
    .hero{
      position:relative;overflow:hidden;
      padding:156px 0 82px;
      background:
        radial-gradient(circle at 14% 23%,rgba(0,183,168,.14),transparent 27%),
        radial-gradient(circle at 87% 20%,rgba(255,201,92,.20),transparent 24%),
        linear-gradient(135deg,#F4F1FF 0%,#FFFFFF 52%,#EDFBF9 100%);
    }

.hero::before{
      content:"";position:absolute;left:-110px;bottom:-145px;
      width:360px;height:360px;border:52px solid rgba(103,87,217,.055);border-radius:50%;
    }

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:62px;align-items:center}

.hero h1{
      margin:20px 0 19px;
      font-size:clamp(42px,5.4vw,69px);
      line-height:1.05;
    }

.gradient-text{
      background:linear-gradient(90deg,var(--primary),var(--secondary-dark));
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }

.hero-lead{max-width:690px;color:#626278;font-size:17px}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px}

.hero-proof{display:flex;flex-wrap:wrap;gap:16px;margin-top:31px}

.proof-item{display:flex;align-items:center;gap:9px;color:#5D5C72;font-size:12px;font-weight:700}

.proof-icon{
      width:28px;height:28px;display:grid;place-items:center;
      color:var(--secondary-dark);background:#E9FAF7;border-radius:9px;
    }

.hero-visual{position:relative;min-height:530px}

.visual-main{
      position:absolute;inset:18px 6px 18px 40px;
      padding:22px;
      background:rgba(255,255,255,.78);
      border:1px solid rgba(255,255,255,.95);
      border-radius:34px;box-shadow:var(--shadow);
      backdrop-filter:blur(15px);
    }

.dashboard{
      height:100%;padding:22px;
      background:linear-gradient(150deg,#282162,#17143D);
      border-radius:25px;overflow:hidden;
    }

.dash-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}

.dash-brand{display:flex;align-items:center;gap:9px;color:#fff;font-size:12px;font-weight:800}

.dash-dots{display:flex;gap:5px}

.dash-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}

.dash-hero{
      padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.62),rgba(0,183,168,.36));
      border:1px solid rgba(255,255,255,.12);border-radius:19px;
    }

.dash-label{color:#D9D4FF;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.dash-hero h3{margin:8px 0 7px;color:#fff;font-size:25px;line-height:1.2}

.dash-hero p{margin:0;color:rgba(255,255,255,.68);font-size:11px}

.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}

.dash-stat{padding:13px;background:rgba(255,255,255,.07);border-radius:13px}

.dash-stat strong{display:block;color:#fff;font-size:16px}

.dash-stat span{color:rgba(255,255,255,.55);font-size:9px}

.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}

.dash-card{padding:16px;background:#fff;border-radius:16px}

.dash-card h4{margin-bottom:10px;font-size:12px}

.progress{height:7px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.mini-list{display:grid;gap:8px}

.mini-row{display:flex;align-items:center;gap:8px}

.mini-row i{width:9px;height:9px;border-radius:3px;background:var(--secondary)}

.mini-row span{font-size:9px;color:var(--muted)}

.float-card{
      position:absolute;z-index:2;display:flex;align-items:center;gap:12px;
      padding:14px 17px;background:#fff;border:1px solid var(--line);
      border-radius:16px;box-shadow:var(--shadow-sm);
    }

.float-card.one{left:0;top:88px}

.float-card.two{right:-10px;bottom:75px}

.float-card.three{left:10px;bottom:15px}

.float-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--primary-light);color:var(--primary)}

.float-card strong{display:block;color:var(--navy);font-size:12px}

.float-card small{display:block;color:var(--muted);font-size:9px}

/* Trust strip */
    .trust-strip{position:relative;z-index:3;margin-top:-1px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.trust-inner{display:grid;grid-template-columns:1.15fr repeat(4,1fr);align-items:center;gap:20px;padding:25px 0}

.trust-copy strong{display:block;color:var(--navy);font-size:13px}

.trust-copy span{color:var(--muted);font-size:11px}

.trust-item{display:flex;align-items:center;justify-content:center;gap:9px;color:#69677D;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}

.trust-mark{width:32px;height:32px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:10px}

/* Solution cards */
    .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

.service-card{
      position:relative;overflow:hidden;
      min-height:310px;padding:28px;
      background:#fff;border:1px solid var(--line);
      border-radius:var(--radius-lg);box-shadow:0 12px 35px rgba(31,27,82,.055);
      transition:.25s ease;
    }

.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}

.service-card::after{
      content:"";position:absolute;right:-45px;bottom:-50px;width:145px;height:145px;
      border:27px solid rgba(103,87,217,.055);border-radius:50%;
    }

.card-icon{
      width:54px;height:54px;display:grid;place-items:center;
      color:var(--primary);background:var(--primary-light);
      border-radius:16px;font-size:24px;
    }

.service-card:nth-child(2n) .card-icon{color:var(--secondary-dark);background:#E9FAF7}

.service-card:nth-child(3n) .card-icon{color:#9A6C0F;background:#FFF6DE}

.service-card h3{margin:21px 0 11px;font-size:21px}

.service-card p{color:var(--muted);font-size:13px}

.card-list{display:grid;gap:8px;margin:18px 0 20px;padding:0;list-style:none}

.card-list li{display:flex;gap:9px;color:#55546A;font-size:12px}

.card-list li::before{content:"✓";color:var(--secondary-dark);font-weight:900}

.text-link{position:relative;z-index:2;color:var(--primary);font-size:12px;font-weight:800}

.text-link:hover{text-decoration:underline}

/* Split */
    .split{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}

.feature-visual{
      position:relative;min-height:520px;padding:33px;
      background:linear-gradient(145deg,#F0EDFF,#EAFBF8);
      border:1px solid #E2DFF7;border-radius:32px;
    }

.feature-screen{
      position:absolute;inset:48px 32px 34px 57px;padding:22px;
      background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow);
    }

.screen-nav{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}

.screen-title{font-size:11px;font-weight:800;color:var(--navy)}

.screen-pill{padding:5px 9px;color:var(--secondary-dark);background:#E8FAF7;border-radius:99px;font-size:8px;font-weight:800}

.chart-area{display:flex;align-items:flex-end;gap:10px;height:155px;padding:25px 10px 8px;border-bottom:1px solid var(--line)}

.bar{flex:1;min-width:15px;background:linear-gradient(180deg,var(--primary),#9488EC);border-radius:7px 7px 2px 2px}

.screen-bottom{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px}

.screen-box{padding:14px;background:#FAFAFF;border:1px solid var(--line);border-radius:13px}

.screen-box strong{display:block;color:var(--navy);font-size:19px}

.screen-box span{color:var(--muted);font-size:9px}

.feature-chip{
      position:absolute;display:flex;align-items:center;gap:9px;padding:12px 14px;
      background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);
    }

.feature-chip.one{top:21px;right:18px}

.feature-chip.two{left:12px;bottom:53px}

.feature-chip i{width:32px;height:32px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.feature-chip strong{display:block;color:var(--navy);font-size:10px}

.feature-chip span{display:block;color:var(--muted);font-size:8px}

.feature-copy h2{margin:14px 0 16px;font-size:clamp(31px,4vw,48px);line-height:1.14}

.feature-copy>p{color:var(--muted)}

.feature-points{display:grid;gap:16px;margin:27px 0 30px}

.feature-point{display:flex;gap:14px}

.point-icon{flex:0 0 auto;width:39px;height:39px;display:grid;place-items:center;color:var(--secondary-dark);background:#E9FAF7;border-radius:12px;font-weight:900}

.feature-point strong{display:block;color:var(--navy);font-size:13px}

.feature-point span{display:block;margin-top:2px;color:var(--muted);font-size:11px}

/* Innovation */
    .innovation-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:25px}

.innovation-main{
      min-height:480px;padding:34px;
      color:#fff;background:linear-gradient(145deg,var(--primary-dark),var(--primary));
      border-radius:29px;overflow:hidden;position:relative;
    }

.innovation-main h3{max-width:540px;margin:18px 0 14px;color:#fff;font-size:32px;line-height:1.17}

.innovation-main p{max-width:610px;color:rgba(255,255,255,.74)}

.innovation-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}

.innovation-tags span{padding:8px 11px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.13);border-radius:99px;font-size:10px;font-weight:800}

.ai-orbit{position:absolute;right:-35px;bottom:-72px;width:330px;height:330px;border:1px solid rgba(255,255,255,.15);border-radius:50%}

.ai-orbit::before,.ai-orbit::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%}

.ai-orbit::before{inset:45px}

.ai-orbit::after{inset:93px}

.ai-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:83px;height:83px;display:grid;place-items:center;color:var(--primary-dark);background:#fff;border-radius:24px;font:800 25px "Manrope"}

.orbit-dot{position:absolute;width:36px;height:36px;display:grid;place-items:center;color:#fff;background:var(--secondary);border-radius:12px;font-size:13px}

.orbit-dot.a{left:39px;top:57px}

.orbit-dot.b{right:18px;top:115px}

.orbit-dot.c{left:72px;bottom:27px}

.innovation-side{display:grid;gap:20px}

.example-card{padding:25px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.example-head{display:flex;align-items:center;justify-content:space-between;gap:15px}

.example-head h3{margin:0;font-size:18px}

.example-card p{margin:12px 0 15px;color:var(--muted);font-size:12px}

.example-meta{display:flex;flex-wrap:wrap;gap:7px}

.example-meta span{padding:6px 9px;color:#65637A;background:#F5F4FA;border-radius:8px;font-size:9px;font-weight:750}

/* Foundation */
    .foundation-card{
      position:relative;overflow:hidden;padding:33px;
      background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-sm);
    }

.foundation-card.education{background:linear-gradient(145deg,#FFFFFF,#F3F0FF)}

.foundation-card.umkm{background:linear-gradient(145deg,#FFFFFF,#EBFAF7)}

.foundation-card h3{margin:19px 0 11px;font-size:27px}

.foundation-card p{color:var(--muted);font-size:13px}

.foundation-programs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:24px 0}

.program-mini{padding:13px;background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:13px}

.program-mini strong{display:block;color:var(--navy);font-size:11px}

.program-mini span{display:block;margin-top:3px;color:var(--muted);font-size:9px}

/* Journey */
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.step{
      position:relative;padding:25px 22px;background:#fff;border:1px solid var(--line);border-radius:20px;
    }

.step-no{
      width:41px;height:41px;display:grid;place-items:center;
      color:#fff;background:var(--primary);border-radius:13px;font-weight:800;
    }

.step h3{margin:17px 0 8px;font-size:17px}

.step p{color:var(--muted);font-size:11px}

.step:not(:last-child)::after{
      content:"→";position:absolute;right:-17px;top:32px;z-index:3;color:#B3AEE2;font-size:22px;font-weight:900;
    }

/* Curriculum */
    .curriculum-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:30px}

.tab-btn{
      min-height:41px;padding:0 15px;border:1px solid var(--line);border-radius:11px;
      color:var(--muted);background:#fff;font-size:11px;font-weight:800;
    }

.tab-btn.active{color:#fff;background:var(--primary);border-color:var(--primary)}

.curriculum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.curriculum-item{padding:21px;background:#fff;border:1px solid var(--line);border-radius:17px}

.curriculum-item .num{color:var(--primary);font-size:10px;font-weight:900}

.curriculum-item h3{margin:8px 0 7px;font-size:15px;line-height:1.35}

.curriculum-item p{margin:0;color:var(--muted);font-size:10px}

/* App */
    .app-wrap{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr .92fr;gap:55px;align-items:center;
      padding:50px 55px;color:#fff;
      background:linear-gradient(135deg,#211A58,#6757D9);
      border-radius:34px;
    }

.app-wrap h2{margin:14px 0 14px;color:#fff;font-size:clamp(30px,4vw,47px);line-height:1.15}

.app-wrap p{color:rgba(255,255,255,.70)}

.store-row{display:flex;flex-wrap:wrap;gap:11px;margin-top:25px}

.store-badge{
      display:flex;align-items:center;gap:11px;min-width:175px;padding:10px 14px;
      color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
      border-radius:13px;
    }

.store-badge svg{width:28px;height:28px}

.store-badge small{display:block;color:rgba(255,255,255,.60);font-size:8px;text-transform:uppercase;letter-spacing:.08em}

.store-badge strong{display:block;font-size:12px}

.phone-scene{position:relative;min-height:420px}

.phone{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(5deg);
      width:230px;height:420px;padding:9px;background:#111026;border:2px solid rgba(255,255,255,.25);
      border-radius:35px;box-shadow:0 28px 55px rgba(0,0,0,.32);
    }

.phone-screen{height:100%;padding:19px 15px;background:linear-gradient(180deg,#F5F2FF,#fff);border-radius:27px;overflow:hidden}

.notch{width:76px;height:17px;margin:-11px auto 15px;background:#111026;border-radius:0 0 13px 13px}

.mobile-logo{display:flex;align-items:center;gap:7px;color:var(--navy);font-size:9px;font-weight:900}

.mobile-logo svg{width:25px}

.mobile-welcome{margin-top:18px;padding:16px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:17px}

.mobile-welcome strong{display:block;font-size:13px}

.mobile-welcome span{font-size:8px;opacity:.78}

.mobile-course-title{margin:16px 0 9px;color:var(--navy);font-size:10px;font-weight:900}

.mobile-course{display:flex;gap:9px;margin-bottom:8px;padding:9px;background:#fff;border:1px solid var(--line);border-radius:11px}

.mobile-thumb{width:42px;height:38px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:8px;font-size:12px}

.mobile-course strong{display:block;color:var(--navy);font-size:8px}

.mobile-course span{display:block;color:var(--muted);font-size:6px}

.app-float{position:absolute;padding:13px 16px;background:#fff;border-radius:15px;box-shadow:var(--shadow)}

.app-float.a{left:5%;top:21%}

.app-float.b{right:3%;bottom:15%}

.app-float strong{display:block;color:var(--navy);font-size:10px}

.app-float span{color:var(--muted);font-size:8px}

/* About */
    .about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:29px}

.about-stat{padding:20px;background:#fff;border:1px solid var(--line);border-radius:16px}

.about-stat strong{display:block;color:var(--primary);font:800 24px "Manrope"}

.about-stat span{color:var(--muted);font-size:10px}

.about-note{padding:20px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 14px 14px 0;font-size:12px}

/* FAQ */
    .faq-wrap{max-width:880px;margin:0 auto}

.faq-item{margin-bottom:11px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}

.faq-q{
      width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
      padding:19px 21px;border:0;background:#fff;color:var(--navy);font-weight:800;text-align:left;
    }

.faq-plus{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:9px}

.faq-a{display:none;padding:0 21px 20px;color:var(--muted);font-size:12px}

.faq-item.open .faq-a{display:block}

.faq-item.open .faq-plus{transform:rotate(45deg)}

/* CTA */
    .final-cta{padding:78px 0}

.cta-box{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center;
      padding:42px 48px;color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));
      border-radius:30px;
    }

.cta-box::after{content:"";position:absolute;right:-80px;top:-110px;width:270px;height:270px;border:45px solid rgba(255,255,255,.07);border-radius:50%}

.cta-box h2{margin-bottom:9px;color:#fff;font-size:clamp(28px,4vw,43px)}

.cta-box p{margin:0;color:rgba(255,255,255,.70)}

.cta-actions{position:relative;z-index:2;display:flex;gap:10px;flex-wrap:wrap}

/* Footer */
    .site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:68px 0 46px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:48px}

.footer-brand p{max-width:390px;margin:19px 0 22px;font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:18px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:10px}

.footer-links a{font-size:12px;transition:.18s}

.footer-links a:hover{color:#fff;transform:translateX(3px)}

.footer-contact{display:grid;gap:10px;margin-top:18px}

.contact-row{display:flex;gap:10px;font-size:11px}

.contact-row i{font-style:normal;color:#AFA6FF}

.newsletter{display:flex;max-width:395px;margin-top:17px;padding:5px;background:#fff;border-radius:12px}

.newsletter input{width:100%;min-width:0;padding:0 12px;border:0;outline:0;font-size:11px}

.newsletter button{width:43px;border:0;border-radius:9px;color:#fff;background:var(--primary)}

.footer-bottom{padding:19px 0;border-top:1px solid rgba(255,255,255,.09);font-size:10px}

.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}

.footer-legal{display:flex;flex-wrap:wrap;gap:15px}

/* Floating WA */
    .floating-help{
      position:fixed;right:22px;bottom:22px;z-index:90;
      display:flex;align-items:center;gap:10px;padding:11px 15px;
      color:#fff;background:#1FAF6D;border-radius:99px;
      box-shadow:0 15px 35px rgba(16,119,73,.28);font-size:11px;font-weight:800;
    }

.floating-help span:first-child{font-size:19px}

/* Utilities */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:1060px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:grid;place-items:center}
.hero-grid,.split,.innovation-grid,.app-wrap{grid-template-columns:1fr}
.hero-visual{max-width:650px;width:100%;margin:0 auto}
.cards-3{grid-template-columns:repeat(2,1fr)}
.curriculum-grid{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(2,1fr)}
.step:nth-child(2)::after{display:none}
.footer-grid{grid-template-columns:repeat(2,1fr)}
.trust-inner{grid-template-columns:repeat(2,1fr)}
.trust-copy{grid-column:1/-1;text-align:center}
}

@media(max-width:700px){
.container{width:min(100% - 28px,var(--container))}
.section{padding:69px 0}
.brand-copy small{display:none}
.brand-logo{width:43px;height:43px}
.header-inner{min-height:74px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.hero{padding:124px 0 60px}
.hero h1{font-size:43px}
.hero-lead{font-size:15px}
.hero-visual{min-height:460px}
.visual-main{inset:12px 0 28px 20px}
.float-card.one{left:-4px;top:52px}
.float-card.two{right:-4px}
.float-card.three{display:none}
.dash-stats{grid-template-columns:1fr}
.dash-stat:nth-child(n+2){display:none}
.cards-3,.cards-2,.foundation-programs,.curriculum-grid,.about-stats,.steps,.footer-grid{grid-template-columns:1fr}
.step::after{display:none!important}
.feature-visual{min-height:445px;padding:20px}
.feature-screen{inset:44px 15px 25px 37px}
.innovation-main{min-height:520px}
.app-wrap{padding:35px 22px}
.phone-scene{min-height:390px}
.app-float.a{left:-10px}
.app-float.b{right:-10px}
.trust-inner{grid-template-columns:1fr 1fr}
.trust-item{font-size:9px}
.cta-box{grid-template-columns:1fr;padding:34px 25px}
.cta-actions{align-items:stretch;flex-direction:column}
.footer-bottom-inner{align-items:flex-start;flex-direction:column}
.floating-help{right:14px;bottom:14px;padding:11px}
.floating-help span:last-child{display:none}
}

/* Online Classes */
    .course-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:20px;
    }

.course-card{
      overflow:hidden;
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:var(--shadow-sm);
      transition:.24s ease;
    }

.course-card:hover{
      transform:translateY(-5px);
      box-shadow:var(--shadow);
    }

.course-cover{
      position:relative;
      min-height:180px;
      padding:22px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      color:#fff;
      overflow:hidden;
    }

.course-cover::after{
      content:"";
      position:absolute;
      right:-35px;
      bottom:-45px;
      width:135px;
      height:135px;
      border:24px solid rgba(255,255,255,.10);
      border-radius:50%;
    }

.course-cover.one{background:linear-gradient(135deg,#3A2F87,#6757D9)}

.course-cover.two{background:linear-gradient(135deg,#087E76,#00B7A8)}

.course-cover.three{background:linear-gradient(135deg,#8A5F13,#E0A832)}

.course-cover.four{background:linear-gradient(135deg,#8B3E62,#C04A67)}

.course-label{
      position:relative;
      z-index:1;
      align-self:flex-start;
      padding:6px 9px;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.17);
      border-radius:999px;
      font-size:9px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

.course-cover h3{
      position:relative;
      z-index:1;
      margin:28px 0 0;
      color:#fff;
      font-size:20px;
      line-height:1.28;
    }

.course-body{padding:21px}

.course-meta{
      display:flex;
      flex-wrap:wrap;
      gap:7px;
      margin-bottom:13px;
    }

.course-meta span{
      padding:5px 8px;
      color:var(--muted);
      background:#F5F4FA;
      border-radius:8px;
      font-size:9px;
      font-weight:750;
    }

.course-body p{
      margin-bottom:17px;
      color:var(--muted);
      font-size:12px;
    }

.course-actions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

.course-status{
      color:var(--secondary-dark);
      font-size:10px;
      font-weight:800;
    }

.course-more{
      margin-top:31px;
      text-align:center;
    }

@media(max-width:1060px){
.course-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.course-grid{grid-template-columns:1fr}
}

/* Banking Solution page */
    .solution-hero{padding-bottom:92px}

.solution-hero .hero-grid{grid-template-columns:1fr .96fr}

.solution-kicker{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}

.solution-kicker span{padding:7px 10px;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px;font-weight:800}

.solution-board{height:100%;padding:25px;background:linear-gradient(150deg,#282162,#17143D);border-radius:25px;overflow:hidden}

.board-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:#fff;font-size:12px;font-weight:800}

.board-status{padding:5px 8px;color:#B9FFF6;background:rgba(0,183,168,.15);border-radius:99px;font-size:8px}

.board-focus{padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.72),rgba(0,183,168,.35));border:1px solid rgba(255,255,255,.12);border-radius:18px}

.board-focus small{color:#D9D4FF;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

.board-focus h3{margin:7px 0 8px;color:#fff;font-size:23px}

.board-focus p{margin:0;color:rgba(255,255,255,.67);font-size:10px}

.board-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:13px}

.board-card{padding:15px;background:#fff;border-radius:14px}

.board-card strong{display:block;color:var(--navy);font-size:11px}

.board-card span{display:block;margin-top:3px;color:var(--muted);font-size:8px}

.board-meter{height:6px;margin-top:11px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.board-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.quick-nav{position:relative;z-index:4;margin-top:-31px}

.quick-nav-inner{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden}

.quick-nav a{display:flex;align-items:center;gap:11px;padding:19px;border-right:1px solid var(--line);transition:.18s}

.quick-nav a:last-child{border-right:0}

.quick-nav a:hover{background:var(--primary-light)}

.quick-nav i{width:34px;height:34px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.quick-nav strong{display:block;color:var(--navy);font-size:11px}

.quick-nav span span{display:block;color:var(--muted);font-size:8px}

.challenge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.challenge-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:19px}

.challenge-no{color:var(--primary);font-size:10px;font-weight:900}

.challenge-card h3{margin:9px 0 8px;font-size:16px}

.challenge-card p{margin:0;color:var(--muted);font-size:11px}

.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.solution-card{position:relative;overflow:hidden;padding:27px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm);transition:.22s}

.solution-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}

.solution-card .card-icon{width:50px;height:50px;font-size:20px}

.solution-card h3{margin:18px 0 9px;font-size:19px}

.solution-card p{color:var(--muted);font-size:12px}

.solution-card ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}

.solution-card li{display:flex;gap:8px;color:#57566B;font-size:10px}

.solution-card li:before{content:'✓';color:var(--secondary-dark);font-weight:900}

.method-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}

.method-panel{padding:30px;background:linear-gradient(145deg,#241D60,#6757D9);border-radius:28px;color:#fff}

.method-panel h3{color:#fff;font-size:27px}

.method-panel p{color:rgba(255,255,255,.68);font-size:12px}

.method-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}

.method-stat{padding:15px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.11);border-radius:14px}

.method-stat strong{display:block;color:#fff;font-size:13px}

.method-stat span{font-size:8px;color:rgba(255,255,255,.58)}

.process-list{display:grid;gap:13px}

.process-item{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:17px;background:#fff;border:1px solid var(--line);border-radius:17px}

.process-number{width:42px;height:42px;display:grid;place-items:center;color:#fff;background:var(--primary);border-radius:12px;font-weight:900}

.process-item h3{margin:0 0 4px;font-size:15px}

.process-item p{margin:0;color:var(--muted);font-size:10px}

.deliverable-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}

.deliverable{padding:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.11);border-radius:18px}

.deliverable i{display:grid;place-items:center;width:39px;height:39px;font-style:normal;background:rgba(255,255,255,.1);border-radius:11px}

.deliverable h3{margin:15px 0 7px;font-size:16px}

.deliverable p{margin:0;color:rgba(255,255,255,.63);font-size:10px}

.principle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.principle{padding:21px;background:#fff;border:1px solid var(--line);border-radius:18px}

.principle strong{display:block;color:var(--navy);font-size:13px}

.principle p{margin:7px 0 0;color:var(--muted);font-size:10px}

.notice-box{margin-top:24px;padding:20px 22px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 15px 15px 0;font-size:11px}

@media(max-width:1060px){
.quick-nav-inner,.challenge-grid,.principle-grid{grid-template-columns:repeat(2,1fr)}
.solution-grid,.deliverable-grid{grid-template-columns:repeat(2,1fr)}
.method-wrap{grid-template-columns:1fr}
}

@media(max-width:700px){
.quick-nav{margin-top:-18px}
.quick-nav-inner,.challenge-grid,.solution-grid,.deliverable-grid,.principle-grid{grid-template-columns:1fr}
.quick-nav a{border-right:0;border-bottom:1px solid var(--line)}
.quick-nav a:last-child{border-bottom:0}
.solution-hero .hero-grid{grid-template-columns:1fr}
}

/* Header navigation refinement — unified multipage */
    .desktop-nav{gap:10px}

.nav-link{
      position:relative;
      gap:7px;
      padding:12px 5px;
      border:0;
      border-radius:0;
      background:transparent!important;
      box-shadow:none!important;
    }

.nav-link:hover,.nav-link.active{
      color:var(--primary);
      background:transparent!important;
    }

.nav-link::after{
      content:"";
      position:absolute;
      left:5px;right:5px;bottom:4px;
      height:2px;
      background:linear-gradient(90deg,var(--primary),var(--secondary));
      border-radius:99px;
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .2s ease;
    }

.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}

.mobile-main{gap:10px}

@media(max-width:1060px){
.desktop-nav{gap:4px}
}

:root{
      --primary:#6757D9;
      --primary-dark:#342A78;
      --primary-light:#F1EFFF;
      --secondary:#00B7A8;
      --secondary-dark:#087E76;
      --accent:#FFC95C;
      --navy:#17143D;
      --text:#44445B;
      --muted:#737388;
      --line:#E8E7F1;
      --white:#FFFFFF;
      --page:#FAFAFF;
      --success:#208A69;
      --danger:#C04A67;
      --shadow:0 22px 60px rgba(31,27,82,.10);
      --shadow-sm:0 12px 30px rgba(31,27,82,.08);
      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
      --container:1180px;
    }

*{box-sizing:border-box}

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

body{
      margin:0;
      color:var(--text);
      background:var(--page);
      font-family:"Inter",Arial,sans-serif;
      line-height:1.7;
      overflow-x:hidden;
    }

body.menu-open{overflow:hidden}

img,svg{max-width:100%;display:block}

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

button,input,select,textarea{font:inherit}

button{cursor:pointer}

h1,h2,h3,h4,p{margin-top:0}

h1,h2,h3,h4{
      color:var(--navy);
      font-family:"Manrope",sans-serif;
      letter-spacing:-.025em;
    }

.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}

.section{padding:96px 0}

.section-soft{background:linear-gradient(180deg,#F8F7FF 0%,#FFFFFF 100%)}

.section-dark{color:#fff;background:var(--navy)}

.section-dark h2,.section-dark h3,.section-dark h4{color:#fff}

.section-head{max-width:760px;margin:0 auto 48px;text-align:center}

.section-head.left{margin-left:0;text-align:left}

.section-head h2{
      margin:14px 0 15px;
      font-size:clamp(31px,4vw,48px);
      line-height:1.14;
    }

.section-head p{color:var(--muted);font-size:16px}

.section-dark .section-head p{color:rgba(255,255,255,.68)}

.eyebrow{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:7px 12px;
      color:var(--primary-dark);
      background:#fff;
      border:1px solid rgba(103,87,217,.17);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.10em;
      text-transform:uppercase;
    }

.eyebrow::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:var(--secondary);
      box-shadow:0 0 0 5px rgba(0,183,168,.12);
    }

.section-dark .eyebrow{
      color:#fff;background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.12);
    }

.btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 21px;
      border:1px solid transparent;
      border-radius:13px;
      font-weight:750;
      transition:.22s ease;
    }

.btn:hover{transform:translateY(-2px)}

.btn-primary{
      color:#fff;background:var(--primary);
      box-shadow:0 12px 28px rgba(103,87,217,.28);
    }

.btn-primary:hover{background:#5747C8}

.btn-secondary{color:#fff;background:var(--secondary)}

.btn-light{color:var(--primary-dark);background:#fff}

.btn-outline{
      color:var(--primary-dark);
      background:rgba(255,255,255,.75);
      border-color:#DCD9F0;
    }

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.icon-arrow{font-size:18px;line-height:1}

.tag{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      color:var(--primary-dark);
      background:var(--primary-light);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
    }

/* Header */
    .site-header{
      position:fixed;top:0;left:0;right:0;z-index:100;
      background:rgba(255,255,255,.92);
      border-bottom:1px solid rgba(232,231,241,.86);
      backdrop-filter:blur(17px);
      transition:.25s ease;
    }

.site-header.scrolled{box-shadow:0 9px 28px rgba(31,27,82,.08)}

.header-inner{
      min-height:82px;
      display:flex;align-items:center;justify-content:space-between;gap:24px;
    }

.brand{display:inline-flex;align-items:center;gap:12px;min-width:max-content}

.brand-logo{width:49px;height:49px;filter:drop-shadow(0 10px 14px rgba(103,87,217,.20))}

.brand-copy strong{
      display:block;color:var(--navy);
      font:800 19px/1.1 "Manrope",sans-serif;
    }

.brand-copy small{
      display:block;margin-top:5px;color:var(--muted);
      font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    }

.desktop-nav{display:flex;align-items:center;gap:4px}

.nav-item{position:relative}

.nav-link{
      display:flex;align-items:center;gap:6px;
      padding:12px 13px;
      color:#48475F;
      border-radius:10px;
      font-size:13px;font-weight:700;
      transition:.18s ease;
    }

.nav-link:hover,.nav-link.active{color:var(--primary);background:var(--primary-light)}

.chevron{font-size:10px;transition:.18s}

.nav-item:hover .chevron{transform:rotate(180deg)}

.dropdown{
      position:absolute;top:calc(100% + 12px);left:0;
      width:300px;padding:10px;
      background:#fff;border:1px solid var(--line);
      border-radius:18px;box-shadow:var(--shadow);
      opacity:0;visibility:hidden;transform:translateY(9px);
      transition:.18s ease;
    }

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}

.dropdown.wide{width:680px;display:grid;grid-template-columns:1fr 1fr;gap:6px}

.drop-link{
      display:flex;gap:12px;padding:12px;
      border-radius:12px;transition:.18s;
    }

.drop-link:hover{background:var(--primary-light)}

.drop-icon{
      flex:0 0 auto;width:38px;height:38px;border-radius:11px;
      display:grid;place-items:center;
      color:var(--primary);background:#F3F1FF;font-size:17px;
    }

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span{display:block;margin-top:2px;color:var(--muted);font-size:11px;line-height:1.45}

.header-action{display:flex;align-items:center;gap:9px}

.menu-toggle{
      display:none;width:45px;height:45px;
      border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--navy);
    }

/* Mobile menu */
    .mobile-panel{
      display:none;
      position:fixed;inset:82px 0 0;z-index:99;
      padding:18px 20px 35px;
      background:#fff;overflow:auto;
    }

.mobile-panel.open{display:block}

.mobile-group{border-bottom:1px solid var(--line)}

.mobile-main{
      width:100%;display:flex;align-items:center;justify-content:space-between;
      padding:15px 4px;border:0;background:none;color:var(--navy);font-weight:800;text-align:left;
    }

.mobile-sub{display:none;padding:0 0 12px 12px}

.mobile-sub.open{display:grid}

.mobile-sub a{padding:9px 8px;color:var(--muted);font-size:14px}

.mobile-login{margin-top:20px;width:100%}

/* Hero */
    .hero{
      position:relative;overflow:hidden;
      padding:156px 0 82px;
      background:
        radial-gradient(circle at 14% 23%,rgba(0,183,168,.14),transparent 27%),
        radial-gradient(circle at 87% 20%,rgba(255,201,92,.20),transparent 24%),
        linear-gradient(135deg,#F4F1FF 0%,#FFFFFF 52%,#EDFBF9 100%);
    }

.hero::before{
      content:"";position:absolute;left:-110px;bottom:-145px;
      width:360px;height:360px;border:52px solid rgba(103,87,217,.055);border-radius:50%;
    }

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:62px;align-items:center}

.hero h1{
      margin:20px 0 19px;
      font-size:clamp(42px,5.4vw,69px);
      line-height:1.05;
    }

.gradient-text{
      background:linear-gradient(90deg,var(--primary),var(--secondary-dark));
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }

.hero-lead{max-width:690px;color:#626278;font-size:17px}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px}

.hero-proof{display:flex;flex-wrap:wrap;gap:16px;margin-top:31px}

.proof-item{display:flex;align-items:center;gap:9px;color:#5D5C72;font-size:12px;font-weight:700}

.proof-icon{
      width:28px;height:28px;display:grid;place-items:center;
      color:var(--secondary-dark);background:#E9FAF7;border-radius:9px;
    }

.hero-visual{position:relative;min-height:530px}

.visual-main{
      position:absolute;inset:18px 6px 18px 40px;
      padding:22px;
      background:rgba(255,255,255,.78);
      border:1px solid rgba(255,255,255,.95);
      border-radius:34px;box-shadow:var(--shadow);
      backdrop-filter:blur(15px);
    }

.dashboard{
      height:100%;padding:22px;
      background:linear-gradient(150deg,#282162,#17143D);
      border-radius:25px;overflow:hidden;
    }

.dash-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}

.dash-brand{display:flex;align-items:center;gap:9px;color:#fff;font-size:12px;font-weight:800}

.dash-dots{display:flex;gap:5px}

.dash-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}

.dash-hero{
      padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.62),rgba(0,183,168,.36));
      border:1px solid rgba(255,255,255,.12);border-radius:19px;
    }

.dash-label{color:#D9D4FF;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.dash-hero h3{margin:8px 0 7px;color:#fff;font-size:25px;line-height:1.2}

.dash-hero p{margin:0;color:rgba(255,255,255,.68);font-size:11px}

.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}

.dash-stat{padding:13px;background:rgba(255,255,255,.07);border-radius:13px}

.dash-stat strong{display:block;color:#fff;font-size:16px}

.dash-stat span{color:rgba(255,255,255,.55);font-size:9px}

.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}

.dash-card{padding:16px;background:#fff;border-radius:16px}

.dash-card h4{margin-bottom:10px;font-size:12px}

.progress{height:7px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.mini-list{display:grid;gap:8px}

.mini-row{display:flex;align-items:center;gap:8px}

.mini-row i{width:9px;height:9px;border-radius:3px;background:var(--secondary)}

.mini-row span{font-size:9px;color:var(--muted)}

.float-card{
      position:absolute;z-index:2;display:flex;align-items:center;gap:12px;
      padding:14px 17px;background:#fff;border:1px solid var(--line);
      border-radius:16px;box-shadow:var(--shadow-sm);
    }

.float-card.one{left:0;top:88px}

.float-card.two{right:-10px;bottom:75px}

.float-card.three{left:10px;bottom:15px}

.float-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--primary-light);color:var(--primary)}

.float-card strong{display:block;color:var(--navy);font-size:12px}

.float-card small{display:block;color:var(--muted);font-size:9px}

/* Trust strip */
    .trust-strip{position:relative;z-index:3;margin-top:-1px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.trust-inner{display:grid;grid-template-columns:1.15fr repeat(4,1fr);align-items:center;gap:20px;padding:25px 0}

.trust-copy strong{display:block;color:var(--navy);font-size:13px}

.trust-copy span{color:var(--muted);font-size:11px}

.trust-item{display:flex;align-items:center;justify-content:center;gap:9px;color:#69677D;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}

.trust-mark{width:32px;height:32px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:10px}

/* Solution cards */
    .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

.service-card{
      position:relative;overflow:hidden;
      min-height:310px;padding:28px;
      background:#fff;border:1px solid var(--line);
      border-radius:var(--radius-lg);box-shadow:0 12px 35px rgba(31,27,82,.055);
      transition:.25s ease;
    }

.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}

.service-card::after{
      content:"";position:absolute;right:-45px;bottom:-50px;width:145px;height:145px;
      border:27px solid rgba(103,87,217,.055);border-radius:50%;
    }

.card-icon{
      width:54px;height:54px;display:grid;place-items:center;
      color:var(--primary);background:var(--primary-light);
      border-radius:16px;font-size:24px;
    }

.service-card:nth-child(2n) .card-icon{color:var(--secondary-dark);background:#E9FAF7}

.service-card:nth-child(3n) .card-icon{color:#9A6C0F;background:#FFF6DE}

.service-card h3{margin:21px 0 11px;font-size:21px}

.service-card p{color:var(--muted);font-size:13px}

.card-list{display:grid;gap:8px;margin:18px 0 20px;padding:0;list-style:none}

.card-list li{display:flex;gap:9px;color:#55546A;font-size:12px}

.card-list li::before{content:"✓";color:var(--secondary-dark);font-weight:900}

.text-link{position:relative;z-index:2;color:var(--primary);font-size:12px;font-weight:800}

.text-link:hover{text-decoration:underline}

/* Split */
    .split{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}

.feature-visual{
      position:relative;min-height:520px;padding:33px;
      background:linear-gradient(145deg,#F0EDFF,#EAFBF8);
      border:1px solid #E2DFF7;border-radius:32px;
    }

.feature-screen{
      position:absolute;inset:48px 32px 34px 57px;padding:22px;
      background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow);
    }

.screen-nav{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}

.screen-title{font-size:11px;font-weight:800;color:var(--navy)}

.screen-pill{padding:5px 9px;color:var(--secondary-dark);background:#E8FAF7;border-radius:99px;font-size:8px;font-weight:800}

.chart-area{display:flex;align-items:flex-end;gap:10px;height:155px;padding:25px 10px 8px;border-bottom:1px solid var(--line)}

.bar{flex:1;min-width:15px;background:linear-gradient(180deg,var(--primary),#9488EC);border-radius:7px 7px 2px 2px}

.screen-bottom{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px}

.screen-box{padding:14px;background:#FAFAFF;border:1px solid var(--line);border-radius:13px}

.screen-box strong{display:block;color:var(--navy);font-size:19px}

.screen-box span{color:var(--muted);font-size:9px}

.feature-chip{
      position:absolute;display:flex;align-items:center;gap:9px;padding:12px 14px;
      background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);
    }

.feature-chip.one{top:21px;right:18px}

.feature-chip.two{left:12px;bottom:53px}

.feature-chip i{width:32px;height:32px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.feature-chip strong{display:block;color:var(--navy);font-size:10px}

.feature-chip span{display:block;color:var(--muted);font-size:8px}

.feature-copy h2{margin:14px 0 16px;font-size:clamp(31px,4vw,48px);line-height:1.14}

.feature-copy>p{color:var(--muted)}

.feature-points{display:grid;gap:16px;margin:27px 0 30px}

.feature-point{display:flex;gap:14px}

.point-icon{flex:0 0 auto;width:39px;height:39px;display:grid;place-items:center;color:var(--secondary-dark);background:#E9FAF7;border-radius:12px;font-weight:900}

.feature-point strong{display:block;color:var(--navy);font-size:13px}

.feature-point span{display:block;margin-top:2px;color:var(--muted);font-size:11px}

/* Innovation */
    .innovation-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:25px}

.innovation-main{
      min-height:480px;padding:34px;
      color:#fff;background:linear-gradient(145deg,var(--primary-dark),var(--primary));
      border-radius:29px;overflow:hidden;position:relative;
    }

.innovation-main h3{max-width:540px;margin:18px 0 14px;color:#fff;font-size:32px;line-height:1.17}

.innovation-main p{max-width:610px;color:rgba(255,255,255,.74)}

.innovation-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}

.innovation-tags span{padding:8px 11px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.13);border-radius:99px;font-size:10px;font-weight:800}

.ai-orbit{position:absolute;right:-35px;bottom:-72px;width:330px;height:330px;border:1px solid rgba(255,255,255,.15);border-radius:50%}

.ai-orbit::before,.ai-orbit::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%}

.ai-orbit::before{inset:45px}

.ai-orbit::after{inset:93px}

.ai-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:83px;height:83px;display:grid;place-items:center;color:var(--primary-dark);background:#fff;border-radius:24px;font:800 25px "Manrope"}

.orbit-dot{position:absolute;width:36px;height:36px;display:grid;place-items:center;color:#fff;background:var(--secondary);border-radius:12px;font-size:13px}

.orbit-dot.a{left:39px;top:57px}

.orbit-dot.b{right:18px;top:115px}

.orbit-dot.c{left:72px;bottom:27px}

.innovation-side{display:grid;gap:20px}

.example-card{padding:25px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.example-head{display:flex;align-items:center;justify-content:space-between;gap:15px}

.example-head h3{margin:0;font-size:18px}

.example-card p{margin:12px 0 15px;color:var(--muted);font-size:12px}

.example-meta{display:flex;flex-wrap:wrap;gap:7px}

.example-meta span{padding:6px 9px;color:#65637A;background:#F5F4FA;border-radius:8px;font-size:9px;font-weight:750}

/* Foundation */
    .foundation-card{
      position:relative;overflow:hidden;padding:33px;
      background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-sm);
    }

.foundation-card.education{background:linear-gradient(145deg,#FFFFFF,#F3F0FF)}

.foundation-card.umkm{background:linear-gradient(145deg,#FFFFFF,#EBFAF7)}

.foundation-card h3{margin:19px 0 11px;font-size:27px}

.foundation-card p{color:var(--muted);font-size:13px}

.foundation-programs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:24px 0}

.program-mini{padding:13px;background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:13px}

.program-mini strong{display:block;color:var(--navy);font-size:11px}

.program-mini span{display:block;margin-top:3px;color:var(--muted);font-size:9px}

/* Journey */
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.step{
      position:relative;padding:25px 22px;background:#fff;border:1px solid var(--line);border-radius:20px;
    }

.step-no{
      width:41px;height:41px;display:grid;place-items:center;
      color:#fff;background:var(--primary);border-radius:13px;font-weight:800;
    }

.step h3{margin:17px 0 8px;font-size:17px}

.step p{color:var(--muted);font-size:11px}

.step:not(:last-child)::after{
      content:"→";position:absolute;right:-17px;top:32px;z-index:3;color:#B3AEE2;font-size:22px;font-weight:900;
    }

/* Curriculum */
    .curriculum-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:30px}

.tab-btn{
      min-height:41px;padding:0 15px;border:1px solid var(--line);border-radius:11px;
      color:var(--muted);background:#fff;font-size:11px;font-weight:800;
    }

.tab-btn.active{color:#fff;background:var(--primary);border-color:var(--primary)}

.curriculum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.curriculum-item{padding:21px;background:#fff;border:1px solid var(--line);border-radius:17px}

.curriculum-item .num{color:var(--primary);font-size:10px;font-weight:900}

.curriculum-item h3{margin:8px 0 7px;font-size:15px;line-height:1.35}

.curriculum-item p{margin:0;color:var(--muted);font-size:10px}

/* App */
    .app-wrap{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr .92fr;gap:55px;align-items:center;
      padding:50px 55px;color:#fff;
      background:linear-gradient(135deg,#211A58,#6757D9);
      border-radius:34px;
    }

.app-wrap h2{margin:14px 0 14px;color:#fff;font-size:clamp(30px,4vw,47px);line-height:1.15}

.app-wrap p{color:rgba(255,255,255,.70)}

.store-row{display:flex;flex-wrap:wrap;gap:11px;margin-top:25px}

.store-badge{
      display:flex;align-items:center;gap:11px;min-width:175px;padding:10px 14px;
      color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
      border-radius:13px;
    }

.store-badge svg{width:28px;height:28px}

.store-badge small{display:block;color:rgba(255,255,255,.60);font-size:8px;text-transform:uppercase;letter-spacing:.08em}

.store-badge strong{display:block;font-size:12px}

.phone-scene{position:relative;min-height:420px}

.phone{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(5deg);
      width:230px;height:420px;padding:9px;background:#111026;border:2px solid rgba(255,255,255,.25);
      border-radius:35px;box-shadow:0 28px 55px rgba(0,0,0,.32);
    }

.phone-screen{height:100%;padding:19px 15px;background:linear-gradient(180deg,#F5F2FF,#fff);border-radius:27px;overflow:hidden}

.notch{width:76px;height:17px;margin:-11px auto 15px;background:#111026;border-radius:0 0 13px 13px}

.mobile-logo{display:flex;align-items:center;gap:7px;color:var(--navy);font-size:9px;font-weight:900}

.mobile-logo svg{width:25px}

.mobile-welcome{margin-top:18px;padding:16px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:17px}

.mobile-welcome strong{display:block;font-size:13px}

.mobile-welcome span{font-size:8px;opacity:.78}

.mobile-course-title{margin:16px 0 9px;color:var(--navy);font-size:10px;font-weight:900}

.mobile-course{display:flex;gap:9px;margin-bottom:8px;padding:9px;background:#fff;border:1px solid var(--line);border-radius:11px}

.mobile-thumb{width:42px;height:38px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:8px;font-size:12px}

.mobile-course strong{display:block;color:var(--navy);font-size:8px}

.mobile-course span{display:block;color:var(--muted);font-size:6px}

.app-float{position:absolute;padding:13px 16px;background:#fff;border-radius:15px;box-shadow:var(--shadow)}

.app-float.a{left:5%;top:21%}

.app-float.b{right:3%;bottom:15%}

.app-float strong{display:block;color:var(--navy);font-size:10px}

.app-float span{color:var(--muted);font-size:8px}

/* About */
    .about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:29px}

.about-stat{padding:20px;background:#fff;border:1px solid var(--line);border-radius:16px}

.about-stat strong{display:block;color:var(--primary);font:800 24px "Manrope"}

.about-stat span{color:var(--muted);font-size:10px}

.about-note{padding:20px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 14px 14px 0;font-size:12px}

/* FAQ */
    .faq-wrap{max-width:880px;margin:0 auto}

.faq-item{margin-bottom:11px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}

.faq-q{
      width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
      padding:19px 21px;border:0;background:#fff;color:var(--navy);font-weight:800;text-align:left;
    }

.faq-plus{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:9px}

.faq-a{display:none;padding:0 21px 20px;color:var(--muted);font-size:12px}

.faq-item.open .faq-a{display:block}

.faq-item.open .faq-plus{transform:rotate(45deg)}

/* CTA */
    .final-cta{padding:78px 0}

.cta-box{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center;
      padding:42px 48px;color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));
      border-radius:30px;
    }

.cta-box::after{content:"";position:absolute;right:-80px;top:-110px;width:270px;height:270px;border:45px solid rgba(255,255,255,.07);border-radius:50%}

.cta-box h2{margin-bottom:9px;color:#fff;font-size:clamp(28px,4vw,43px)}

.cta-box p{margin:0;color:rgba(255,255,255,.70)}

.cta-actions{position:relative;z-index:2;display:flex;gap:10px;flex-wrap:wrap}

/* Footer */
    .site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:68px 0 46px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:48px}

.footer-brand p{max-width:390px;margin:19px 0 22px;font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:18px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:10px}

.footer-links a{font-size:12px;transition:.18s}

.footer-links a:hover{color:#fff;transform:translateX(3px)}

.footer-contact{display:grid;gap:10px;margin-top:18px}

.contact-row{display:flex;gap:10px;font-size:11px}

.contact-row i{font-style:normal;color:#AFA6FF}

.newsletter{display:flex;max-width:395px;margin-top:17px;padding:5px;background:#fff;border-radius:12px}

.newsletter input{width:100%;min-width:0;padding:0 12px;border:0;outline:0;font-size:11px}

.newsletter button{width:43px;border:0;border-radius:9px;color:#fff;background:var(--primary)}

.footer-bottom{padding:19px 0;border-top:1px solid rgba(255,255,255,.09);font-size:10px}

.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}

.footer-legal{display:flex;flex-wrap:wrap;gap:15px}

/* Floating WA */
    .floating-help{
      position:fixed;right:22px;bottom:22px;z-index:90;
      display:flex;align-items:center;gap:10px;padding:11px 15px;
      color:#fff;background:#1FAF6D;border-radius:99px;
      box-shadow:0 15px 35px rgba(16,119,73,.28);font-size:11px;font-weight:800;
    }

.floating-help span:first-child{font-size:19px}

/* Utilities */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:1060px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:grid;place-items:center}
.hero-grid,.split,.innovation-grid,.app-wrap{grid-template-columns:1fr}
.hero-visual{max-width:650px;width:100%;margin:0 auto}
.cards-3{grid-template-columns:repeat(2,1fr)}
.curriculum-grid{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(2,1fr)}
.step:nth-child(2)::after{display:none}
.footer-grid{grid-template-columns:repeat(2,1fr)}
.trust-inner{grid-template-columns:repeat(2,1fr)}
.trust-copy{grid-column:1/-1;text-align:center}
}

@media(max-width:700px){
.container{width:min(100% - 28px,var(--container))}
.section{padding:69px 0}
.brand-copy small{display:none}
.brand-logo{width:43px;height:43px}
.header-inner{min-height:74px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.hero{padding:124px 0 60px}
.hero h1{font-size:43px}
.hero-lead{font-size:15px}
.hero-visual{min-height:460px}
.visual-main{inset:12px 0 28px 20px}
.float-card.one{left:-4px;top:52px}
.float-card.two{right:-4px}
.float-card.three{display:none}
.dash-stats{grid-template-columns:1fr}
.dash-stat:nth-child(n+2){display:none}
.cards-3,.cards-2,.foundation-programs,.curriculum-grid,.about-stats,.steps,.footer-grid{grid-template-columns:1fr}
.step::after{display:none!important}
.feature-visual{min-height:445px;padding:20px}
.feature-screen{inset:44px 15px 25px 37px}
.innovation-main{min-height:520px}
.app-wrap{padding:35px 22px}
.phone-scene{min-height:390px}
.app-float.a{left:-10px}
.app-float.b{right:-10px}
.trust-inner{grid-template-columns:1fr 1fr}
.trust-item{font-size:9px}
.cta-box{grid-template-columns:1fr;padding:34px 25px}
.cta-actions{align-items:stretch;flex-direction:column}
.footer-bottom-inner{align-items:flex-start;flex-direction:column}
.floating-help{right:14px;bottom:14px;padding:11px}
.floating-help span:last-child{display:none}
}

/* Online Classes */
    .course-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:20px;
    }

.course-card{
      overflow:hidden;
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:var(--shadow-sm);
      transition:.24s ease;
    }

.course-card:hover{
      transform:translateY(-5px);
      box-shadow:var(--shadow);
    }

.course-cover{
      position:relative;
      min-height:180px;
      padding:22px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      color:#fff;
      overflow:hidden;
    }

.course-cover::after{
      content:"";
      position:absolute;
      right:-35px;
      bottom:-45px;
      width:135px;
      height:135px;
      border:24px solid rgba(255,255,255,.10);
      border-radius:50%;
    }

.course-cover.one{background:linear-gradient(135deg,#3A2F87,#6757D9)}

.course-cover.two{background:linear-gradient(135deg,#087E76,#00B7A8)}

.course-cover.three{background:linear-gradient(135deg,#8A5F13,#E0A832)}

.course-cover.four{background:linear-gradient(135deg,#8B3E62,#C04A67)}

.course-label{
      position:relative;
      z-index:1;
      align-self:flex-start;
      padding:6px 9px;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.17);
      border-radius:999px;
      font-size:9px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

.course-cover h3{
      position:relative;
      z-index:1;
      margin:28px 0 0;
      color:#fff;
      font-size:20px;
      line-height:1.28;
    }

.course-body{padding:21px}

.course-meta{
      display:flex;
      flex-wrap:wrap;
      gap:7px;
      margin-bottom:13px;
    }

.course-meta span{
      padding:5px 8px;
      color:var(--muted);
      background:#F5F4FA;
      border-radius:8px;
      font-size:9px;
      font-weight:750;
    }

.course-body p{
      margin-bottom:17px;
      color:var(--muted);
      font-size:12px;
    }

.course-actions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

.course-status{
      color:var(--secondary-dark);
      font-size:10px;
      font-weight:800;
    }

.course-more{
      margin-top:31px;
      text-align:center;
    }

@media(max-width:1060px){
.course-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.course-grid{grid-template-columns:1fr}
}

/* Banking Solution page */
    .solution-hero{padding-bottom:92px}

.solution-hero .hero-grid{grid-template-columns:1fr .96fr}

.solution-kicker{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}

.solution-kicker span{padding:7px 10px;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px;font-weight:800}

.solution-board{height:100%;padding:25px;background:linear-gradient(150deg,#282162,#17143D);border-radius:25px;overflow:hidden}

.board-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:#fff;font-size:12px;font-weight:800}

.board-status{padding:5px 8px;color:#B9FFF6;background:rgba(0,183,168,.15);border-radius:99px;font-size:8px}

.board-focus{padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.72),rgba(0,183,168,.35));border:1px solid rgba(255,255,255,.12);border-radius:18px}

.board-focus small{color:#D9D4FF;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

.board-focus h3{margin:7px 0 8px;color:#fff;font-size:23px}

.board-focus p{margin:0;color:rgba(255,255,255,.67);font-size:10px}

.board-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:13px}

.board-card{padding:15px;background:#fff;border-radius:14px}

.board-card strong{display:block;color:var(--navy);font-size:11px}

.board-card span{display:block;margin-top:3px;color:var(--muted);font-size:8px}

.board-meter{height:6px;margin-top:11px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.board-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.quick-nav{position:relative;z-index:4;margin-top:-31px}

.quick-nav-inner{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden}

.quick-nav a{display:flex;align-items:center;gap:11px;padding:19px;border-right:1px solid var(--line);transition:.18s}

.quick-nav a:last-child{border-right:0}

.quick-nav a:hover{background:var(--primary-light)}

.quick-nav i{width:34px;height:34px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.quick-nav strong{display:block;color:var(--navy);font-size:11px}

.quick-nav span span{display:block;color:var(--muted);font-size:8px}

.challenge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.challenge-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:19px}

.challenge-no{color:var(--primary);font-size:10px;font-weight:900}

.challenge-card h3{margin:9px 0 8px;font-size:16px}

.challenge-card p{margin:0;color:var(--muted);font-size:11px}

.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.solution-card{position:relative;overflow:hidden;padding:27px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm);transition:.22s}

.solution-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}

.solution-card .card-icon{width:50px;height:50px;font-size:20px}

.solution-card h3{margin:18px 0 9px;font-size:19px}

.solution-card p{color:var(--muted);font-size:12px}

.solution-card ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}

.solution-card li{display:flex;gap:8px;color:#57566B;font-size:10px}

.solution-card li:before{content:'✓';color:var(--secondary-dark);font-weight:900}

.method-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}

.method-panel{padding:30px;background:linear-gradient(145deg,#241D60,#6757D9);border-radius:28px;color:#fff}

.method-panel h3{color:#fff;font-size:27px}

.method-panel p{color:rgba(255,255,255,.68);font-size:12px}

.method-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}

.method-stat{padding:15px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.11);border-radius:14px}

.method-stat strong{display:block;color:#fff;font-size:13px}

.method-stat span{font-size:8px;color:rgba(255,255,255,.58)}

.process-list{display:grid;gap:13px}

.process-item{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:17px;background:#fff;border:1px solid var(--line);border-radius:17px}

.process-number{width:42px;height:42px;display:grid;place-items:center;color:#fff;background:var(--primary);border-radius:12px;font-weight:900}

.process-item h3{margin:0 0 4px;font-size:15px}

.process-item p{margin:0;color:var(--muted);font-size:10px}

.deliverable-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}

.deliverable{padding:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.11);border-radius:18px}

.deliverable i{display:grid;place-items:center;width:39px;height:39px;font-style:normal;background:rgba(255,255,255,.1);border-radius:11px}

.deliverable h3{margin:15px 0 7px;font-size:16px}

.deliverable p{margin:0;color:rgba(255,255,255,.63);font-size:10px}

.principle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.principle{padding:21px;background:#fff;border:1px solid var(--line);border-radius:18px}

.principle strong{display:block;color:var(--navy);font-size:13px}

.principle p{margin:7px 0 0;color:var(--muted);font-size:10px}

.notice-box{margin-top:24px;padding:20px 22px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 15px 15px 0;font-size:11px}

@media(max-width:1060px){
.quick-nav-inner,.challenge-grid,.principle-grid{grid-template-columns:repeat(2,1fr)}
.solution-grid,.deliverable-grid{grid-template-columns:repeat(2,1fr)}
.method-wrap{grid-template-columns:1fr}
}

@media(max-width:700px){
.quick-nav{margin-top:-18px}
.quick-nav-inner,.challenge-grid,.solution-grid,.deliverable-grid,.principle-grid{grid-template-columns:1fr}
.quick-nav a{border-right:0;border-bottom:1px solid var(--line)}
.quick-nav a:last-child{border-bottom:0}
.solution-hero .hero-grid{grid-template-columns:1fr}
}

/* Banking Talent Solution page */
    .talent-hero .hero-grid{grid-template-columns:1.02fr .98fr}

.talent-board{height:100%;padding:24px;background:linear-gradient(150deg,#282162,#17143D);border-radius:25px;overflow:hidden}

.talent-board-head{display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:12px;font-weight:800;margin-bottom:17px}

.talent-board-head span{padding:5px 8px;color:#C9FFF8;background:rgba(0,183,168,.16);border-radius:999px;font-size:8px}

.talent-profile{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center;padding:17px;background:linear-gradient(135deg,rgba(103,87,217,.7),rgba(0,183,168,.32));border:1px solid rgba(255,255,255,.12);border-radius:18px}

.talent-avatar{width:54px;height:54px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.15);border-radius:17px;font-size:23px}

.talent-profile h3{margin:0;color:#fff;font-size:17px}

.talent-profile p{margin:3px 0 0;color:rgba(255,255,255,.65);font-size:9px}

.competency-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}

.competency-card{padding:14px;background:#fff;border-radius:14px}

.competency-card strong{display:flex;justify-content:space-between;color:var(--navy);font-size:10px}

.competency-card strong em{font-style:normal;color:var(--primary)}

.competency-card small{display:block;margin-top:3px;color:var(--muted);font-size:8px}

.talent-path{display:flex;align-items:center;gap:7px;margin-top:12px;padding:13px;background:rgba(255,255,255,.08);border-radius:14px}

.talent-path i{width:29px;height:29px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.11);border-radius:9px;font-style:normal}

.talent-path span{color:rgba(255,255,255,.67);font-size:8px}

.talent-path strong{display:block;color:#fff;font-size:10px}

.audience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.audience-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:19px}

.audience-card i{width:40px;height:40px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:12px}

.audience-card h3{margin:15px 0 7px;font-size:16px}

.audience-card p{margin:0;color:var(--muted);font-size:10px}

.framework-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}

.framework-item{position:relative;padding:21px 17px;background:#fff;border:1px solid var(--line);border-radius:18px}

.framework-item:not(:last-child):after{content:'→';position:absolute;right:-12px;top:26px;z-index:3;color:#B5AFE5;font-weight:900}

.framework-item b{display:grid;place-items:center;width:36px;height:36px;color:#fff;background:var(--primary);border-radius:11px}

.framework-item h3{margin:14px 0 6px;font-size:14px}

.framework-item p{margin:0;color:var(--muted);font-size:9px}

.matrix-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:45px;align-items:center}

.matrix-card{padding:27px;background:linear-gradient(145deg,#231C5E,#6757D9);border-radius:27px;color:#fff}

.matrix-card h3{color:#fff;font-size:26px}

.matrix-card p{color:rgba(255,255,255,.67);font-size:11px}

.matrix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:19px}

.matrix-cell{min-height:76px;padding:11px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.11);border-radius:12px}

.matrix-cell strong{display:block;color:#fff;font-size:9px}

.matrix-cell span{display:block;margin-top:4px;color:rgba(255,255,255,.55);font-size:7px}

.matrix-cell.highlight{background:rgba(0,183,168,.27);border-color:rgba(163,255,242,.25)}

.benefit-list{display:grid;gap:14px}

.benefit-item{display:flex;gap:14px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:17px}

.benefit-item i{flex:0 0 auto;width:39px;height:39px;display:grid;place-items:center;font-style:normal;color:var(--secondary-dark);background:#E9FAF7;border-radius:11px}

.benefit-item h3{margin:0 0 4px;font-size:14px}

.benefit-item p{margin:0;color:var(--muted);font-size:10px}

.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.package-card{padding:27px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.package-card.featured{color:#fff;background:linear-gradient(145deg,var(--primary-dark),var(--primary));border:0}

.package-card.featured h3,.package-card.featured strong{color:#fff}

.package-card h3{margin:18px 0 8px;font-size:20px}

.package-card p{color:var(--muted);font-size:11px}

.package-card.featured p,.package-card.featured li{color:rgba(255,255,255,.7)}

.package-card ul{display:grid;gap:8px;padding:0;margin:18px 0 0;list-style:none}

.package-card li{display:flex;gap:8px;color:#55546A;font-size:10px}

.package-card li:before{content:'✓';color:var(--secondary);font-weight:900}

@media(max-width:1060px){
.audience-grid{grid-template-columns:repeat(2,1fr)}
.framework-grid{grid-template-columns:repeat(3,1fr)}
.framework-item:after{display:none}
.matrix-wrap{grid-template-columns:1fr}
.package-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.talent-hero .hero-grid{grid-template-columns:1fr}
.audience-grid,.framework-grid,.package-grid{grid-template-columns:1fr}
.competency-grid{grid-template-columns:1fr}
}

/* Inovasi Program page */
    .innovation-hero .hero-grid{grid-template-columns:1.02fr .98fr}

.innovation-console{height:100%;padding:25px;background:linear-gradient(150deg,#221B5E,#17143D);border-radius:25px;overflow:hidden}

.console-top{display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:11px;font-weight:800}

.console-state{padding:5px 9px;color:#BFFFF7;background:rgba(0,183,168,.15);border-radius:99px;font-size:8px}

.console-focus{margin-top:18px;padding:22px;background:linear-gradient(135deg,rgba(103,87,217,.78),rgba(0,183,168,.36));border:1px solid rgba(255,255,255,.12);border-radius:18px}

.console-focus small{color:#DCD7FF;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

.console-focus h3{margin:7px 0 7px;color:#fff;font-size:23px}

.console-focus p{margin:0;color:rgba(255,255,255,.68);font-size:10px}

.console-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:14px}

.console-node{padding:10px 7px;text-align:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);border-radius:11px}

.console-node i{display:grid;place-items:center;width:28px;height:28px;margin:0 auto 6px;color:#fff;background:rgba(255,255,255,.11);border-radius:9px;font-style:normal}

.console-node span{color:rgba(255,255,255,.63);font-size:7px;font-weight:800}

.console-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}

.console-card{padding:14px;background:#fff;border-radius:14px}

.console-card strong{display:block;color:var(--navy);font-size:10px}

.console-card span{display:block;margin-top:3px;color:var(--muted);font-size:8px}

.console-meter{height:6px;margin-top:10px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.console-meter b{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.focus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.focus-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:19px}

.focus-card i{width:40px;height:40px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:12px}

.focus-card h3{margin:15px 0 7px;font-size:16px}

.focus-card p{margin:0;color:var(--muted);font-size:10px}

.stage-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}

.stage-card{position:relative;padding:20px 15px;background:#fff;border:1px solid var(--line);border-radius:17px}

.stage-card:not(:last-child):after{content:'→';position:absolute;right:-11px;top:25px;color:#B4AFE3;font-weight:900}

.stage-card b{display:grid;place-items:center;width:34px;height:34px;color:#fff;background:var(--primary);border-radius:10px}

.stage-card h3{margin:13px 0 5px;font-size:13px}

.stage-card p{margin:0;color:var(--muted);font-size:8px}

.governance-wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:45px;align-items:center}

.governance-panel{padding:30px;color:#fff;background:linear-gradient(145deg,#231C5F,#6757D9);border-radius:28px}

.governance-panel h3{color:#fff;font-size:27px}

.governance-panel p{color:rgba(255,255,255,.68);font-size:11px}

.governance-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}

.governance-tags span{padding:8px 10px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.11);border-radius:99px;font-size:8px;font-weight:800}

.usecase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.usecase-card{padding:26px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.usecase-card h3{margin:17px 0 8px;font-size:18px}

.usecase-card p{color:var(--muted);font-size:11px}

.usecase-card ul{display:grid;gap:7px;margin:15px 0 0;padding:0;list-style:none}

.usecase-card li{display:flex;gap:8px;color:#55546A;font-size:9px}

.usecase-card li:before{content:'✓';color:var(--secondary-dark);font-weight:900}

@media(max-width:1060px){
.focus-grid{grid-template-columns:repeat(2,1fr)}
.stage-grid{grid-template-columns:repeat(3,1fr)}
.stage-card:after{display:none}
.governance-wrap{grid-template-columns:1fr}
.usecase-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.innovation-hero .hero-grid{grid-template-columns:1fr}
.focus-grid,.stage-grid,.usecase-grid{grid-template-columns:1fr}
.console-flow{grid-template-columns:repeat(3,1fr)}
}

/* Header navigation refinement — unified multipage */
    .desktop-nav{gap:10px}

.nav-link{
      position:relative;
      gap:7px;
      padding:12px 5px;
      border:0;
      border-radius:0;
      background:transparent!important;
      box-shadow:none!important;
    }

.nav-link:hover,.nav-link.active{
      color:var(--primary);
      background:transparent!important;
    }

.nav-link::after{
      content:"";
      position:absolute;
      left:5px;right:5px;bottom:4px;
      height:2px;
      background:linear-gradient(90deg,var(--primary),var(--secondary));
      border-radius:99px;
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .2s ease;
    }

.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}

.mobile-main{gap:10px}

@media(max-width:1060px){
.desktop-nav{gap:4px}
}

:root{
      --primary:#6757D9;
      --primary-dark:#342A78;
      --primary-light:#F1EFFF;
      --secondary:#00B7A8;
      --secondary-dark:#087E76;
      --accent:#FFC95C;
      --navy:#17143D;
      --text:#44445B;
      --muted:#737388;
      --line:#E8E7F1;
      --white:#FFFFFF;
      --page:#FAFAFF;
      --success:#208A69;
      --danger:#C04A67;
      --shadow:0 22px 60px rgba(31,27,82,.10);
      --shadow-sm:0 12px 30px rgba(31,27,82,.08);
      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
      --container:1180px;
    }

*{box-sizing:border-box}

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

body{
      margin:0;
      color:var(--text);
      background:var(--page);
      font-family:"Inter",Arial,sans-serif;
      line-height:1.7;
      overflow-x:hidden;
    }

body.menu-open{overflow:hidden}

img,svg{max-width:100%;display:block}

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

button,input,select,textarea{font:inherit}

button{cursor:pointer}

h1,h2,h3,h4,p{margin-top:0}

h1,h2,h3,h4{
      color:var(--navy);
      font-family:"Manrope",sans-serif;
      letter-spacing:-.025em;
    }

.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}

.section{padding:96px 0}

.section-soft{background:linear-gradient(180deg,#F8F7FF 0%,#FFFFFF 100%)}

.section-dark{color:#fff;background:var(--navy)}

.section-dark h2,.section-dark h3,.section-dark h4{color:#fff}

.section-head{max-width:760px;margin:0 auto 48px;text-align:center}

.section-head.left{margin-left:0;text-align:left}

.section-head h2{
      margin:14px 0 15px;
      font-size:clamp(31px,4vw,48px);
      line-height:1.14;
    }

.section-head p{color:var(--muted);font-size:16px}

.section-dark .section-head p{color:rgba(255,255,255,.68)}

.eyebrow{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:7px 12px;
      color:var(--primary-dark);
      background:#fff;
      border:1px solid rgba(103,87,217,.17);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.10em;
      text-transform:uppercase;
    }

.eyebrow::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:var(--secondary);
      box-shadow:0 0 0 5px rgba(0,183,168,.12);
    }

.section-dark .eyebrow{
      color:#fff;background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.12);
    }

.btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 21px;
      border:1px solid transparent;
      border-radius:13px;
      font-weight:750;
      transition:.22s ease;
    }

.btn:hover{transform:translateY(-2px)}

.btn-primary{
      color:#fff;background:var(--primary);
      box-shadow:0 12px 28px rgba(103,87,217,.28);
    }

.btn-primary:hover{background:#5747C8}

.btn-secondary{color:#fff;background:var(--secondary)}

.btn-light{color:var(--primary-dark);background:#fff}

.btn-outline{
      color:var(--primary-dark);
      background:rgba(255,255,255,.75);
      border-color:#DCD9F0;
    }

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.icon-arrow{font-size:18px;line-height:1}

.tag{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      color:var(--primary-dark);
      background:var(--primary-light);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
    }

/* Header */
    .site-header{
      position:fixed;top:0;left:0;right:0;z-index:100;
      background:rgba(255,255,255,.92);
      border-bottom:1px solid rgba(232,231,241,.86);
      backdrop-filter:blur(17px);
      transition:.25s ease;
    }

.site-header.scrolled{box-shadow:0 9px 28px rgba(31,27,82,.08)}

.header-inner{
      min-height:82px;
      display:flex;align-items:center;justify-content:space-between;gap:24px;
    }

.brand{display:inline-flex;align-items:center;gap:12px;min-width:max-content}

.brand-logo{width:49px;height:49px;filter:drop-shadow(0 10px 14px rgba(103,87,217,.20))}

.brand-copy strong{
      display:block;color:var(--navy);
      font:800 19px/1.1 "Manrope",sans-serif;
    }

.brand-copy small{
      display:block;margin-top:5px;color:var(--muted);
      font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    }

.desktop-nav{display:flex;align-items:center;gap:4px}

.nav-item{position:relative}

.nav-link{
      display:flex;align-items:center;gap:6px;
      padding:12px 13px;
      color:#48475F;
      border-radius:10px;
      font-size:13px;font-weight:700;
      transition:.18s ease;
    }

.nav-link:hover,.nav-link.active{color:var(--primary);background:var(--primary-light)}

.chevron{font-size:10px;transition:.18s}

.nav-item:hover .chevron{transform:rotate(180deg)}

.dropdown{
      position:absolute;top:calc(100% + 12px);left:0;
      width:300px;padding:10px;
      background:#fff;border:1px solid var(--line);
      border-radius:18px;box-shadow:var(--shadow);
      opacity:0;visibility:hidden;transform:translateY(9px);
      transition:.18s ease;
    }

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}

.dropdown.wide{width:680px;display:grid;grid-template-columns:1fr 1fr;gap:6px}

.drop-link{
      display:flex;gap:12px;padding:12px;
      border-radius:12px;transition:.18s;
    }

.drop-link:hover{background:var(--primary-light)}

.drop-icon{
      flex:0 0 auto;width:38px;height:38px;border-radius:11px;
      display:grid;place-items:center;
      color:var(--primary);background:#F3F1FF;font-size:17px;
    }

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span{display:block;margin-top:2px;color:var(--muted);font-size:11px;line-height:1.45}

.header-action{display:flex;align-items:center;gap:9px}

.menu-toggle{
      display:none;width:45px;height:45px;
      border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--navy);
    }

/* Mobile menu */
    .mobile-panel{
      display:none;
      position:fixed;inset:82px 0 0;z-index:99;
      padding:18px 20px 35px;
      background:#fff;overflow:auto;
    }

.mobile-panel.open{display:block}

.mobile-group{border-bottom:1px solid var(--line)}

.mobile-main{
      width:100%;display:flex;align-items:center;justify-content:space-between;
      padding:15px 4px;border:0;background:none;color:var(--navy);font-weight:800;text-align:left;
    }

.mobile-sub{display:none;padding:0 0 12px 12px}

.mobile-sub.open{display:grid}

.mobile-sub a{padding:9px 8px;color:var(--muted);font-size:14px}

.mobile-login{margin-top:20px;width:100%}

/* Hero */
    .hero{
      position:relative;overflow:hidden;
      padding:156px 0 82px;
      background:
        radial-gradient(circle at 14% 23%,rgba(0,183,168,.14),transparent 27%),
        radial-gradient(circle at 87% 20%,rgba(255,201,92,.20),transparent 24%),
        linear-gradient(135deg,#F4F1FF 0%,#FFFFFF 52%,#EDFBF9 100%);
    }

.hero::before{
      content:"";position:absolute;left:-110px;bottom:-145px;
      width:360px;height:360px;border:52px solid rgba(103,87,217,.055);border-radius:50%;
    }

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:62px;align-items:center}

.hero h1{
      margin:20px 0 19px;
      font-size:clamp(42px,5.4vw,69px);
      line-height:1.05;
    }

.gradient-text{
      background:linear-gradient(90deg,var(--primary),var(--secondary-dark));
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }

.hero-lead{max-width:690px;color:#626278;font-size:17px}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px}

.hero-proof{display:flex;flex-wrap:wrap;gap:16px;margin-top:31px}

.proof-item{display:flex;align-items:center;gap:9px;color:#5D5C72;font-size:12px;font-weight:700}

.proof-icon{
      width:28px;height:28px;display:grid;place-items:center;
      color:var(--secondary-dark);background:#E9FAF7;border-radius:9px;
    }

.hero-visual{position:relative;min-height:530px}

.visual-main{
      position:absolute;inset:18px 6px 18px 40px;
      padding:22px;
      background:rgba(255,255,255,.78);
      border:1px solid rgba(255,255,255,.95);
      border-radius:34px;box-shadow:var(--shadow);
      backdrop-filter:blur(15px);
    }

.dashboard{
      height:100%;padding:22px;
      background:linear-gradient(150deg,#282162,#17143D);
      border-radius:25px;overflow:hidden;
    }

.dash-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}

.dash-brand{display:flex;align-items:center;gap:9px;color:#fff;font-size:12px;font-weight:800}

.dash-dots{display:flex;gap:5px}

.dash-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}

.dash-hero{
      padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.62),rgba(0,183,168,.36));
      border:1px solid rgba(255,255,255,.12);border-radius:19px;
    }

.dash-label{color:#D9D4FF;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.dash-hero h3{margin:8px 0 7px;color:#fff;font-size:25px;line-height:1.2}

.dash-hero p{margin:0;color:rgba(255,255,255,.68);font-size:11px}

.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}

.dash-stat{padding:13px;background:rgba(255,255,255,.07);border-radius:13px}

.dash-stat strong{display:block;color:#fff;font-size:16px}

.dash-stat span{color:rgba(255,255,255,.55);font-size:9px}

.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}

.dash-card{padding:16px;background:#fff;border-radius:16px}

.dash-card h4{margin-bottom:10px;font-size:12px}

.progress{height:7px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.mini-list{display:grid;gap:8px}

.mini-row{display:flex;align-items:center;gap:8px}

.mini-row i{width:9px;height:9px;border-radius:3px;background:var(--secondary)}

.mini-row span{font-size:9px;color:var(--muted)}

.float-card{
      position:absolute;z-index:2;display:flex;align-items:center;gap:12px;
      padding:14px 17px;background:#fff;border:1px solid var(--line);
      border-radius:16px;box-shadow:var(--shadow-sm);
    }

.float-card.one{left:0;top:88px}

.float-card.two{right:-10px;bottom:75px}

.float-card.three{left:10px;bottom:15px}

.float-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--primary-light);color:var(--primary)}

.float-card strong{display:block;color:var(--navy);font-size:12px}

.float-card small{display:block;color:var(--muted);font-size:9px}

/* Trust strip */
    .trust-strip{position:relative;z-index:3;margin-top:-1px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.trust-inner{display:grid;grid-template-columns:1.15fr repeat(4,1fr);align-items:center;gap:20px;padding:25px 0}

.trust-copy strong{display:block;color:var(--navy);font-size:13px}

.trust-copy span{color:var(--muted);font-size:11px}

.trust-item{display:flex;align-items:center;justify-content:center;gap:9px;color:#69677D;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}

.trust-mark{width:32px;height:32px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:10px}

/* Solution cards */
    .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

.service-card{
      position:relative;overflow:hidden;
      min-height:310px;padding:28px;
      background:#fff;border:1px solid var(--line);
      border-radius:var(--radius-lg);box-shadow:0 12px 35px rgba(31,27,82,.055);
      transition:.25s ease;
    }

.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}

.service-card::after{
      content:"";position:absolute;right:-45px;bottom:-50px;width:145px;height:145px;
      border:27px solid rgba(103,87,217,.055);border-radius:50%;
    }

.card-icon{
      width:54px;height:54px;display:grid;place-items:center;
      color:var(--primary);background:var(--primary-light);
      border-radius:16px;font-size:24px;
    }

.service-card:nth-child(2n) .card-icon{color:var(--secondary-dark);background:#E9FAF7}

.service-card:nth-child(3n) .card-icon{color:#9A6C0F;background:#FFF6DE}

.service-card h3{margin:21px 0 11px;font-size:21px}

.service-card p{color:var(--muted);font-size:13px}

.card-list{display:grid;gap:8px;margin:18px 0 20px;padding:0;list-style:none}

.card-list li{display:flex;gap:9px;color:#55546A;font-size:12px}

.card-list li::before{content:"✓";color:var(--secondary-dark);font-weight:900}

.text-link{position:relative;z-index:2;color:var(--primary);font-size:12px;font-weight:800}

.text-link:hover{text-decoration:underline}

/* Split */
    .split{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}

.feature-visual{
      position:relative;min-height:520px;padding:33px;
      background:linear-gradient(145deg,#F0EDFF,#EAFBF8);
      border:1px solid #E2DFF7;border-radius:32px;
    }

.feature-screen{
      position:absolute;inset:48px 32px 34px 57px;padding:22px;
      background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow);
    }

.screen-nav{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}

.screen-title{font-size:11px;font-weight:800;color:var(--navy)}

.screen-pill{padding:5px 9px;color:var(--secondary-dark);background:#E8FAF7;border-radius:99px;font-size:8px;font-weight:800}

.chart-area{display:flex;align-items:flex-end;gap:10px;height:155px;padding:25px 10px 8px;border-bottom:1px solid var(--line)}

.bar{flex:1;min-width:15px;background:linear-gradient(180deg,var(--primary),#9488EC);border-radius:7px 7px 2px 2px}

.screen-bottom{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px}

.screen-box{padding:14px;background:#FAFAFF;border:1px solid var(--line);border-radius:13px}

.screen-box strong{display:block;color:var(--navy);font-size:19px}

.screen-box span{color:var(--muted);font-size:9px}

.feature-chip{
      position:absolute;display:flex;align-items:center;gap:9px;padding:12px 14px;
      background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);
    }

.feature-chip.one{top:21px;right:18px}

.feature-chip.two{left:12px;bottom:53px}

.feature-chip i{width:32px;height:32px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.feature-chip strong{display:block;color:var(--navy);font-size:10px}

.feature-chip span{display:block;color:var(--muted);font-size:8px}

.feature-copy h2{margin:14px 0 16px;font-size:clamp(31px,4vw,48px);line-height:1.14}

.feature-copy>p{color:var(--muted)}

.feature-points{display:grid;gap:16px;margin:27px 0 30px}

.feature-point{display:flex;gap:14px}

.point-icon{flex:0 0 auto;width:39px;height:39px;display:grid;place-items:center;color:var(--secondary-dark);background:#E9FAF7;border-radius:12px;font-weight:900}

.feature-point strong{display:block;color:var(--navy);font-size:13px}

.feature-point span{display:block;margin-top:2px;color:var(--muted);font-size:11px}

/* Innovation */
    .innovation-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:25px}

.innovation-main{
      min-height:480px;padding:34px;
      color:#fff;background:linear-gradient(145deg,var(--primary-dark),var(--primary));
      border-radius:29px;overflow:hidden;position:relative;
    }

.innovation-main h3{max-width:540px;margin:18px 0 14px;color:#fff;font-size:32px;line-height:1.17}

.innovation-main p{max-width:610px;color:rgba(255,255,255,.74)}

.innovation-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}

.innovation-tags span{padding:8px 11px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.13);border-radius:99px;font-size:10px;font-weight:800}

.ai-orbit{position:absolute;right:-35px;bottom:-72px;width:330px;height:330px;border:1px solid rgba(255,255,255,.15);border-radius:50%}

.ai-orbit::before,.ai-orbit::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%}

.ai-orbit::before{inset:45px}

.ai-orbit::after{inset:93px}

.ai-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:83px;height:83px;display:grid;place-items:center;color:var(--primary-dark);background:#fff;border-radius:24px;font:800 25px "Manrope"}

.orbit-dot{position:absolute;width:36px;height:36px;display:grid;place-items:center;color:#fff;background:var(--secondary);border-radius:12px;font-size:13px}

.orbit-dot.a{left:39px;top:57px}

.orbit-dot.b{right:18px;top:115px}

.orbit-dot.c{left:72px;bottom:27px}

.innovation-side{display:grid;gap:20px}

.example-card{padding:25px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.example-head{display:flex;align-items:center;justify-content:space-between;gap:15px}

.example-head h3{margin:0;font-size:18px}

.example-card p{margin:12px 0 15px;color:var(--muted);font-size:12px}

.example-meta{display:flex;flex-wrap:wrap;gap:7px}

.example-meta span{padding:6px 9px;color:#65637A;background:#F5F4FA;border-radius:8px;font-size:9px;font-weight:750}

/* Foundation */
    .foundation-card{
      position:relative;overflow:hidden;padding:33px;
      background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-sm);
    }

.foundation-card.education{background:linear-gradient(145deg,#FFFFFF,#F3F0FF)}

.foundation-card.umkm{background:linear-gradient(145deg,#FFFFFF,#EBFAF7)}

.foundation-card h3{margin:19px 0 11px;font-size:27px}

.foundation-card p{color:var(--muted);font-size:13px}

.foundation-programs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:24px 0}

.program-mini{padding:13px;background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:13px}

.program-mini strong{display:block;color:var(--navy);font-size:11px}

.program-mini span{display:block;margin-top:3px;color:var(--muted);font-size:9px}

/* Journey */
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.step{
      position:relative;padding:25px 22px;background:#fff;border:1px solid var(--line);border-radius:20px;
    }

.step-no{
      width:41px;height:41px;display:grid;place-items:center;
      color:#fff;background:var(--primary);border-radius:13px;font-weight:800;
    }

.step h3{margin:17px 0 8px;font-size:17px}

.step p{color:var(--muted);font-size:11px}

.step:not(:last-child)::after{
      content:"→";position:absolute;right:-17px;top:32px;z-index:3;color:#B3AEE2;font-size:22px;font-weight:900;
    }

/* Curriculum */
    .curriculum-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:30px}

.tab-btn{
      min-height:41px;padding:0 15px;border:1px solid var(--line);border-radius:11px;
      color:var(--muted);background:#fff;font-size:11px;font-weight:800;
    }

.tab-btn.active{color:#fff;background:var(--primary);border-color:var(--primary)}

.curriculum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.curriculum-item{padding:21px;background:#fff;border:1px solid var(--line);border-radius:17px}

.curriculum-item .num{color:var(--primary);font-size:10px;font-weight:900}

.curriculum-item h3{margin:8px 0 7px;font-size:15px;line-height:1.35}

.curriculum-item p{margin:0;color:var(--muted);font-size:10px}

/* App */
    .app-wrap{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr .92fr;gap:55px;align-items:center;
      padding:50px 55px;color:#fff;
      background:linear-gradient(135deg,#211A58,#6757D9);
      border-radius:34px;
    }

.app-wrap h2{margin:14px 0 14px;color:#fff;font-size:clamp(30px,4vw,47px);line-height:1.15}

.app-wrap p{color:rgba(255,255,255,.70)}

.store-row{display:flex;flex-wrap:wrap;gap:11px;margin-top:25px}

.store-badge{
      display:flex;align-items:center;gap:11px;min-width:175px;padding:10px 14px;
      color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
      border-radius:13px;
    }

.store-badge svg{width:28px;height:28px}

.store-badge small{display:block;color:rgba(255,255,255,.60);font-size:8px;text-transform:uppercase;letter-spacing:.08em}

.store-badge strong{display:block;font-size:12px}

.phone-scene{position:relative;min-height:420px}

.phone{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(5deg);
      width:230px;height:420px;padding:9px;background:#111026;border:2px solid rgba(255,255,255,.25);
      border-radius:35px;box-shadow:0 28px 55px rgba(0,0,0,.32);
    }

.phone-screen{height:100%;padding:19px 15px;background:linear-gradient(180deg,#F5F2FF,#fff);border-radius:27px;overflow:hidden}

.notch{width:76px;height:17px;margin:-11px auto 15px;background:#111026;border-radius:0 0 13px 13px}

.mobile-logo{display:flex;align-items:center;gap:7px;color:var(--navy);font-size:9px;font-weight:900}

.mobile-logo svg{width:25px}

.mobile-welcome{margin-top:18px;padding:16px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:17px}

.mobile-welcome strong{display:block;font-size:13px}

.mobile-welcome span{font-size:8px;opacity:.78}

.mobile-course-title{margin:16px 0 9px;color:var(--navy);font-size:10px;font-weight:900}

.mobile-course{display:flex;gap:9px;margin-bottom:8px;padding:9px;background:#fff;border:1px solid var(--line);border-radius:11px}

.mobile-thumb{width:42px;height:38px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:8px;font-size:12px}

.mobile-course strong{display:block;color:var(--navy);font-size:8px}

.mobile-course span{display:block;color:var(--muted);font-size:6px}

.app-float{position:absolute;padding:13px 16px;background:#fff;border-radius:15px;box-shadow:var(--shadow)}

.app-float.a{left:5%;top:21%}

.app-float.b{right:3%;bottom:15%}

.app-float strong{display:block;color:var(--navy);font-size:10px}

.app-float span{color:var(--muted);font-size:8px}

/* About */
    .about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:29px}

.about-stat{padding:20px;background:#fff;border:1px solid var(--line);border-radius:16px}

.about-stat strong{display:block;color:var(--primary);font:800 24px "Manrope"}

.about-stat span{color:var(--muted);font-size:10px}

.about-note{padding:20px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 14px 14px 0;font-size:12px}

/* FAQ */
    .faq-wrap{max-width:880px;margin:0 auto}

.faq-item{margin-bottom:11px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}

.faq-q{
      width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
      padding:19px 21px;border:0;background:#fff;color:var(--navy);font-weight:800;text-align:left;
    }

.faq-plus{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:9px}

.faq-a{display:none;padding:0 21px 20px;color:var(--muted);font-size:12px}

.faq-item.open .faq-a{display:block}

.faq-item.open .faq-plus{transform:rotate(45deg)}

/* CTA */
    .final-cta{padding:78px 0}

.cta-box{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center;
      padding:42px 48px;color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));
      border-radius:30px;
    }

.cta-box::after{content:"";position:absolute;right:-80px;top:-110px;width:270px;height:270px;border:45px solid rgba(255,255,255,.07);border-radius:50%}

.cta-box h2{margin-bottom:9px;color:#fff;font-size:clamp(28px,4vw,43px)}

.cta-box p{margin:0;color:rgba(255,255,255,.70)}

.cta-actions{position:relative;z-index:2;display:flex;gap:10px;flex-wrap:wrap}

/* Footer */
    .site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:68px 0 46px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:48px}

.footer-brand p{max-width:390px;margin:19px 0 22px;font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:18px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:10px}

.footer-links a{font-size:12px;transition:.18s}

.footer-links a:hover{color:#fff;transform:translateX(3px)}

.footer-contact{display:grid;gap:10px;margin-top:18px}

.contact-row{display:flex;gap:10px;font-size:11px}

.contact-row i{font-style:normal;color:#AFA6FF}

.newsletter{display:flex;max-width:395px;margin-top:17px;padding:5px;background:#fff;border-radius:12px}

.newsletter input{width:100%;min-width:0;padding:0 12px;border:0;outline:0;font-size:11px}

.newsletter button{width:43px;border:0;border-radius:9px;color:#fff;background:var(--primary)}

.footer-bottom{padding:19px 0;border-top:1px solid rgba(255,255,255,.09);font-size:10px}

.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}

.footer-legal{display:flex;flex-wrap:wrap;gap:15px}

/* Floating WA */
    .floating-help{
      position:fixed;right:22px;bottom:22px;z-index:90;
      display:flex;align-items:center;gap:10px;padding:11px 15px;
      color:#fff;background:#1FAF6D;border-radius:99px;
      box-shadow:0 15px 35px rgba(16,119,73,.28);font-size:11px;font-weight:800;
    }

.floating-help span:first-child{font-size:19px}

/* Utilities */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:1060px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:grid;place-items:center}
.hero-grid,.split,.innovation-grid,.app-wrap{grid-template-columns:1fr}
.hero-visual{max-width:650px;width:100%;margin:0 auto}
.cards-3{grid-template-columns:repeat(2,1fr)}
.curriculum-grid{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(2,1fr)}
.step:nth-child(2)::after{display:none}
.footer-grid{grid-template-columns:repeat(2,1fr)}
.trust-inner{grid-template-columns:repeat(2,1fr)}
.trust-copy{grid-column:1/-1;text-align:center}
}

@media(max-width:700px){
.container{width:min(100% - 28px,var(--container))}
.section{padding:69px 0}
.brand-copy small{display:none}
.brand-logo{width:43px;height:43px}
.header-inner{min-height:74px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.hero{padding:124px 0 60px}
.hero h1{font-size:43px}
.hero-lead{font-size:15px}
.hero-visual{min-height:460px}
.visual-main{inset:12px 0 28px 20px}
.float-card.one{left:-4px;top:52px}
.float-card.two{right:-4px}
.float-card.three{display:none}
.dash-stats{grid-template-columns:1fr}
.dash-stat:nth-child(n+2){display:none}
.cards-3,.cards-2,.foundation-programs,.curriculum-grid,.about-stats,.steps,.footer-grid{grid-template-columns:1fr}
.step::after{display:none!important}
.feature-visual{min-height:445px;padding:20px}
.feature-screen{inset:44px 15px 25px 37px}
.innovation-main{min-height:520px}
.app-wrap{padding:35px 22px}
.phone-scene{min-height:390px}
.app-float.a{left:-10px}
.app-float.b{right:-10px}
.trust-inner{grid-template-columns:1fr 1fr}
.trust-item{font-size:9px}
.cta-box{grid-template-columns:1fr;padding:34px 25px}
.cta-actions{align-items:stretch;flex-direction:column}
.footer-bottom-inner{align-items:flex-start;flex-direction:column}
.floating-help{right:14px;bottom:14px;padding:11px}
.floating-help span:last-child{display:none}
}

/* Online Classes */
    .course-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:20px;
    }

.course-card{
      overflow:hidden;
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:var(--shadow-sm);
      transition:.24s ease;
    }

.course-card:hover{
      transform:translateY(-5px);
      box-shadow:var(--shadow);
    }

.course-cover{
      position:relative;
      min-height:180px;
      padding:22px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      color:#fff;
      overflow:hidden;
    }

.course-cover::after{
      content:"";
      position:absolute;
      right:-35px;
      bottom:-45px;
      width:135px;
      height:135px;
      border:24px solid rgba(255,255,255,.10);
      border-radius:50%;
    }

.course-cover.one{background:linear-gradient(135deg,#3A2F87,#6757D9)}

.course-cover.two{background:linear-gradient(135deg,#087E76,#00B7A8)}

.course-cover.three{background:linear-gradient(135deg,#8A5F13,#E0A832)}

.course-cover.four{background:linear-gradient(135deg,#8B3E62,#C04A67)}

.course-label{
      position:relative;
      z-index:1;
      align-self:flex-start;
      padding:6px 9px;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.17);
      border-radius:999px;
      font-size:9px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

.course-cover h3{
      position:relative;
      z-index:1;
      margin:28px 0 0;
      color:#fff;
      font-size:20px;
      line-height:1.28;
    }

.course-body{padding:21px}

.course-meta{
      display:flex;
      flex-wrap:wrap;
      gap:7px;
      margin-bottom:13px;
    }

.course-meta span{
      padding:5px 8px;
      color:var(--muted);
      background:#F5F4FA;
      border-radius:8px;
      font-size:9px;
      font-weight:750;
    }

.course-body p{
      margin-bottom:17px;
      color:var(--muted);
      font-size:12px;
    }

.course-actions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

.course-status{
      color:var(--secondary-dark);
      font-size:10px;
      font-weight:800;
    }

.course-more{
      margin-top:31px;
      text-align:center;
    }

@media(max-width:1060px){
.course-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.course-grid{grid-template-columns:1fr}
}

/* Banking Solution page */
    .solution-hero{padding-bottom:92px}

.solution-hero .hero-grid{grid-template-columns:1fr .96fr}

.solution-kicker{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}

.solution-kicker span{padding:7px 10px;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px;font-weight:800}

.solution-board{height:100%;padding:25px;background:linear-gradient(150deg,#282162,#17143D);border-radius:25px;overflow:hidden}

.board-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:#fff;font-size:12px;font-weight:800}

.board-status{padding:5px 8px;color:#B9FFF6;background:rgba(0,183,168,.15);border-radius:99px;font-size:8px}

.board-focus{padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.72),rgba(0,183,168,.35));border:1px solid rgba(255,255,255,.12);border-radius:18px}

.board-focus small{color:#D9D4FF;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

.board-focus h3{margin:7px 0 8px;color:#fff;font-size:23px}

.board-focus p{margin:0;color:rgba(255,255,255,.67);font-size:10px}

.board-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:13px}

.board-card{padding:15px;background:#fff;border-radius:14px}

.board-card strong{display:block;color:var(--navy);font-size:11px}

.board-card span{display:block;margin-top:3px;color:var(--muted);font-size:8px}

.board-meter{height:6px;margin-top:11px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.board-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.quick-nav{position:relative;z-index:4;margin-top:-31px}

.quick-nav-inner{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden}

.quick-nav a{display:flex;align-items:center;gap:11px;padding:19px;border-right:1px solid var(--line);transition:.18s}

.quick-nav a:last-child{border-right:0}

.quick-nav a:hover{background:var(--primary-light)}

.quick-nav i{width:34px;height:34px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.quick-nav strong{display:block;color:var(--navy);font-size:11px}

.quick-nav span span{display:block;color:var(--muted);font-size:8px}

.challenge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.challenge-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:19px}

.challenge-no{color:var(--primary);font-size:10px;font-weight:900}

.challenge-card h3{margin:9px 0 8px;font-size:16px}

.challenge-card p{margin:0;color:var(--muted);font-size:11px}

.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.solution-card{position:relative;overflow:hidden;padding:27px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm);transition:.22s}

.solution-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}

.solution-card .card-icon{width:50px;height:50px;font-size:20px}

.solution-card h3{margin:18px 0 9px;font-size:19px}

.solution-card p{color:var(--muted);font-size:12px}

.solution-card ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}

.solution-card li{display:flex;gap:8px;color:#57566B;font-size:10px}

.solution-card li:before{content:'✓';color:var(--secondary-dark);font-weight:900}

.method-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}

.method-panel{padding:30px;background:linear-gradient(145deg,#241D60,#6757D9);border-radius:28px;color:#fff}

.method-panel h3{color:#fff;font-size:27px}

.method-panel p{color:rgba(255,255,255,.68);font-size:12px}

.method-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}

.method-stat{padding:15px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.11);border-radius:14px}

.method-stat strong{display:block;color:#fff;font-size:13px}

.method-stat span{font-size:8px;color:rgba(255,255,255,.58)}

.process-list{display:grid;gap:13px}

.process-item{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:17px;background:#fff;border:1px solid var(--line);border-radius:17px}

.process-number{width:42px;height:42px;display:grid;place-items:center;color:#fff;background:var(--primary);border-radius:12px;font-weight:900}

.process-item h3{margin:0 0 4px;font-size:15px}

.process-item p{margin:0;color:var(--muted);font-size:10px}

.deliverable-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}

.deliverable{padding:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.11);border-radius:18px}

.deliverable i{display:grid;place-items:center;width:39px;height:39px;font-style:normal;background:rgba(255,255,255,.1);border-radius:11px}

.deliverable h3{margin:15px 0 7px;font-size:16px}

.deliverable p{margin:0;color:rgba(255,255,255,.63);font-size:10px}

.principle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.principle{padding:21px;background:#fff;border:1px solid var(--line);border-radius:18px}

.principle strong{display:block;color:var(--navy);font-size:13px}

.principle p{margin:7px 0 0;color:var(--muted);font-size:10px}

.notice-box{margin-top:24px;padding:20px 22px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 15px 15px 0;font-size:11px}

@media(max-width:1060px){
.quick-nav-inner,.challenge-grid,.principle-grid{grid-template-columns:repeat(2,1fr)}
.solution-grid,.deliverable-grid{grid-template-columns:repeat(2,1fr)}
.method-wrap{grid-template-columns:1fr}
}

@media(max-width:700px){
.quick-nav{margin-top:-18px}
.quick-nav-inner,.challenge-grid,.solution-grid,.deliverable-grid,.principle-grid{grid-template-columns:1fr}
.quick-nav a{border-right:0;border-bottom:1px solid var(--line)}
.quick-nav a:last-child{border-bottom:0}
.solution-hero .hero-grid{grid-template-columns:1fr}
}

/* Header navigation refinement — unified multipage */
    .desktop-nav{gap:10px}

.nav-link{
      position:relative;
      gap:7px;
      padding:12px 5px;
      border:0;
      border-radius:0;
      background:transparent!important;
      box-shadow:none!important;
    }

.nav-link:hover,.nav-link.active{
      color:var(--primary);
      background:transparent!important;
    }

.nav-link::after{
      content:"";
      position:absolute;
      left:5px;right:5px;bottom:4px;
      height:2px;
      background:linear-gradient(90deg,var(--primary),var(--secondary));
      border-radius:99px;
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .2s ease;
    }

.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}

.mobile-main{gap:10px}

@media(max-width:1060px){
.desktop-nav{gap:4px}
}

:root{
      --primary: #6255d9;
      --primary-dark: #30276f;
      --primary-soft: #f1efff;
      --secondary: #00b7a8;
      --accent: #ffcc5c;
      --navy: #15123b;
      --text: #41415a;
      --muted: #74748a;
      --line: #e8e7f1;
      --surface: #ffffff;
      --page: #fafaff;
      --success: #188b65;
      --shadow: 0 20px 55px rgba(33, 28, 88, .10);
      --radius-lg: 26px;
      --radius-md: 18px;
      --container: 1180px;
    }

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
      margin: 0;
      color: var(--text);
      background: var(--page);
      font-family: "Inter", Arial, sans-serif;
      line-height: 1.75;
    }

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

img{ max-width: 100%; display: block; }

button, input{ font: inherit; }

.container{ width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }

/* HEADER — meniru gaya halaman utama */
    .site-header{
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,.96);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(232,231,241,.9);
    }

.header-inner{
      min-height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

.brand{
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: max-content;
    }

.brand-mark{
      width: 46px;
      height: 46px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      color: #fff;
      background: linear-gradient(135deg, var(--primary), #8b7ff0);
      box-shadow: 0 10px 25px rgba(98,85,217,.28);
      font: 800 18px/1 "Manrope", sans-serif;
    }

.brand-name{
      color: var(--navy);
      font: 800 19px/1.15 "Manrope", sans-serif;
    }

.brand-name small{
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font: 600 10px/1.2 "Inter", sans-serif;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

.nav-menu{
      display: flex;
      align-items: center;
      gap: 27px;
      font-size: 14px;
      font-weight: 600;
    }

.nav-menu a:hover, .nav-menu a.active{ color: var(--primary); }

.header-actions{ display: flex; gap: 10px; }

.btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 0 20px;
      border: 0;
      border-radius: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: .2s ease;
    }

.btn-primary{
      color: #fff;
      background: var(--primary);
      box-shadow: 0 10px 22px rgba(98,85,217,.24);
    }

.btn-primary:hover{ transform: translateY(-2px); background: #5145c6; }

.menu-toggle{
      display: none;
      width: 44px;
      height: 44px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      color: var(--navy);
    }

/* HERO */
    .legal-hero{
      position: relative;
      overflow: hidden;
      padding: 78px 0 70px;
      background:
        radial-gradient(circle at 15% 25%, rgba(0,183,168,.16), transparent 27%),
        radial-gradient(circle at 84% 28%, rgba(255,204,92,.20), transparent 25%),
        linear-gradient(135deg, #f5f2ff 0%, #fff 52%, #edfafa 100%);
    }

.legal-hero::after{
      content: "";
      position: absolute;
      inset: auto -80px -140px auto;
      width: 360px;
      height: 360px;
      border: 54px solid rgba(98,85,217,.06);
      border-radius: 50%;
    }

.hero-grid{
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.12fr .88fr;
      align-items: center;
      gap: 55px;
    }

.eyebrow{
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 8px 13px;
      color: var(--primary-dark);
      background: rgba(255,255,255,.9);
      border: 1px solid rgba(98,85,217,.16);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

.eyebrow::before{
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--secondary);
    }

h1, h2, h3{ margin-top: 0; color: var(--navy); font-family: "Manrope", sans-serif; }

h1{
      max-width: 730px;
      margin: 21px 0 18px;
      font-size: clamp(38px, 5vw, 64px);
      line-height: 1.08;
      letter-spacing: -.035em;
    }

.hero-copy{
      max-width: 690px;
      margin: 0 0 26px;
      color: #626279;
      font-size: 17px;
    }

.meta-row{
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

.meta-pill{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      color: var(--primary-dark);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      font-size: 13px;
      font-weight: 700;
      box-shadow: 0 8px 18px rgba(33,28,88,.05);
    }

.illustration-card{
      position: relative;
      padding: 24px;
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(255,255,255,.9);
      border-radius: 32px;
      box-shadow: var(--shadow);
    }

.illustration-card svg{ width: 100%; height: auto; }

/* CONTENT */
    .legal-section{ padding: 76px 0 100px; }

.legal-layout{
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr);
      align-items: start;
      gap: 35px;
    }

.legal-sidebar{
      position: sticky;
      top: 108px;
      padding: 24px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      box-shadow: 0 15px 38px rgba(33,28,88,.07);
    }

.legal-sidebar h2{ margin-bottom: 14px; font-size: 18px; }

.toc{
      display: grid;
      gap: 3px;
      max-height: calc(100vh - 210px);
      overflow: auto;
      padding-right: 5px;
    }

.toc a{
      padding: 8px 10px;
      color: var(--muted);
      border-radius: 9px;
      font-size: 13px;
      line-height: 1.4;
    }

.toc a:hover{ color: var(--primary); background: var(--primary-soft); }

.legal-content{
      padding: clamp(26px, 4vw, 54px);
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
    }

.notice{
      margin-bottom: 34px;
      padding: 20px 22px;
      color: #4e4675;
      background: linear-gradient(135deg, #f2efff, #f7ffff);
      border: 1px solid #ddd8ff;
      border-left: 5px solid var(--primary);
      border-radius: 14px;
    }

.legal-article{
      scroll-margin-top: 115px;
      padding: 31px 0;
      border-top: 1px solid var(--line);
    }

.legal-article:first-of-type{ border-top: 0; padding-top: 0; }

.legal-article h2{
      display: flex;
      align-items: flex-start;
      gap: 13px;
      margin-bottom: 14px;
      font-size: clamp(21px, 2.6vw, 27px);
      line-height: 1.35;
    }

.article-no{
      flex: 0 0 auto;
      display: inline-grid;
      place-items: center;
      width: 37px;
      height: 37px;
      color: #fff;
      background: var(--primary);
      border-radius: 11px;
      font: 800 13px/1 "Inter", sans-serif;
    }

.legal-article p{ margin: 10px 0; }

.legal-article ol, .legal-article ul{ margin: 12px 0 0; padding-left: 22px; }

.legal-article li{ margin: 8px 0; padding-left: 3px; }

.legal-article strong{ color: var(--navy); }

.highlight-box{
      margin-top: 18px;
      padding: 18px 20px;
      background: #fbfbff;
      border: 1px dashed #cfcbee;
      border-radius: 14px;
    }

/* CTA */
    .help-card{
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 25px;
      margin-top: 34px;
      padding: 28px;
      color: #fff;
      background: linear-gradient(135deg, var(--primary-dark), var(--primary));
      border-radius: 20px;
    }

.help-card h2{ margin-bottom: 8px; color: #fff; font-size: 24px; }

.help-card p{ margin: 0; color: rgba(255,255,255,.78); }

.help-card .btn{ color: var(--primary-dark); background: #fff; }

/* FOOTER — struktur mengikuti homepage */
    .site-footer{
      color: rgba(255,255,255,.77);
      background: #141132;
    }

.footer-main{ padding: 65px 0 45px; }

.footer-grid{
      display: grid;
      grid-template-columns: 1.4fr repeat(3, 1fr);
      gap: 46px;
    }

.footer-brand .brand-name, .footer-title{ color: #fff; }

.footer-brand p{ max-width: 420px; margin: 19px 0 22px; }

.footer-title{
      margin-bottom: 17px;
      font: 800 15px/1.2 "Manrope", sans-serif;
    }

.footer-links{ display: grid; gap: 10px; font-size: 14px; }

.footer-links a:hover, .footer-links a.active{ color: #fff; }

.newsletter{
      display: flex;
      max-width: 390px;
      padding: 5px;
      background: #fff;
      border-radius: 12px;
    }

.newsletter input{
      width: 100%;
      min-width: 0;
      padding: 0 13px;
      border: 0;
      outline: none;
    }

.newsletter button{
      min-width: 45px;
      border: 0;
      border-radius: 9px;
      color: #fff;
      background: var(--primary);
      cursor: pointer;
    }

.footer-bottom{
      padding: 19px 0;
      border-top: 1px solid rgba(255,255,255,.10);
      font-size: 13px;
    }

.footer-bottom-inner{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

@media (max-width: 1000px){
.nav-menu, .header-actions{ display: none; }
.menu-toggle{ display: inline-grid; place-items: center; }
.nav-menu.open{
        position: absolute;
        top: 82px;
        left: 20px;
        right: 20px;
        display: grid;
        gap: 0;
        padding: 15px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 16px;
        box-shadow: var(--shadow);
      }
.nav-menu.open a{ padding: 12px; }
.hero-grid{ grid-template-columns: 1fr; }
.illustration-card{ max-width: 590px; }
.legal-layout{ grid-template-columns: 1fr; }
.legal-sidebar{ position: static; }
.toc{ grid-template-columns: repeat(2, minmax(0,1fr)); max-height: none; }
.footer-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px){
.container{ width: min(100% - 28px, var(--container)); }
.legal-hero{ padding: 56px 0; }
h1{ font-size: 39px; }
.legal-section{ padding: 45px 0 70px; }
.toc{ grid-template-columns: 1fr; }
.legal-content{ padding: 24px 20px; }
.legal-article h2{ font-size: 21px; }
.help-card{ grid-template-columns: 1fr; }
.footer-grid{ grid-template-columns: 1fr; gap: 34px; }
.footer-bottom-inner{ align-items: flex-start; flex-direction: column; }
}

/* Header & Footer alignment with homepage */
    html{scroll-padding-top:100px}

body.menu-open{overflow:hidden}

.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.92);border-bottom:1px solid rgba(232,231,241,.86);backdrop-filter:blur(17px);transition:.25s ease}

.site-header.scrolled{box-shadow:0 9px 28px rgba(31,27,82,.08)}

.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}

.brand{display:inline-flex;align-items:center;gap:12px;min-width:max-content}

.brand-logo{width:49px;height:49px;filter:drop-shadow(0 10px 14px rgba(103,87,217,.20))}

.brand-copy strong{display:block;color:var(--navy);font:800 19px/1.1 "Manrope",sans-serif}

.brand-copy small{display:block;margin-top:5px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}

.desktop-nav{display:flex;align-items:center;gap:4px}

.nav-item{position:relative}

.nav-link{display:flex;align-items:center;gap:6px;padding:12px 13px;color:#48475F;border-radius:10px;font-size:13px;font-weight:700;transition:.18s ease}

.nav-link:hover,.nav-link.active{color:var(--primary);background:var(--primary-soft)}

.chevron{font-size:10px;transition:.18s}

.nav-item:hover .chevron{transform:rotate(180deg)}

.dropdown{position:absolute;top:calc(100% + 12px);left:0;width:300px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(9px);transition:.18s ease}

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}

.dropdown.wide{width:680px;display:grid;grid-template-columns:1fr 1fr;gap:6px}

.drop-link{display:flex;gap:12px;padding:12px;border-radius:12px;transition:.18s}

.drop-link:hover{background:var(--primary-soft)}

.drop-icon{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--primary);background:#F3F1FF;font-size:17px}

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span{display:block;margin-top:2px;color:var(--muted);font-size:11px;line-height:1.45}

.header-action{display:flex;align-items:center;gap:9px}

.btn-outline{color:var(--primary-dark);background:rgba(255,255,255,.75);border:1px solid #DCD9F0}

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.menu-toggle{display:none;width:45px;height:45px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--navy)}

.mobile-panel{display:none;position:fixed;inset:82px 0 0;z-index:99;padding:18px 20px 35px;background:#fff;overflow:auto}

.mobile-panel.open{display:block}

.mobile-group{border-bottom:1px solid var(--line)}

.mobile-main{width:100%;display:flex;align-items:center;justify-content:space-between;padding:15px 4px;border:0;background:none;color:var(--navy);font-weight:800;text-align:left}

.mobile-sub{display:none;padding:0 0 12px 12px}

.mobile-sub.open{display:grid}

.mobile-sub a{padding:9px 8px;color:var(--muted);font-size:14px}

.mobile-login{margin-top:20px;width:100%}

.legal-hero{padding-top:160px}

.site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:68px 0 46px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:48px}

.footer-brand p{max-width:390px;margin:19px 0 22px;font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:18px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:10px}

.footer-links a{font-size:12px;transition:.18s}

.footer-links a:hover,.footer-links a.active{color:#fff;transform:translateX(3px)}

.footer-contact{display:grid;gap:10px;margin-top:18px}

.contact-row{display:flex;gap:10px;font-size:11px}

.contact-row i{font-style:normal;color:#AFA6FF}

.newsletter{display:flex;max-width:395px;margin-top:17px;padding:5px;background:#fff;border-radius:12px}

.newsletter input{width:100%;min-width:0;padding:0 12px;border:0;outline:0;font-size:11px}

.newsletter button{width:43px;border:0;border-radius:9px;color:#fff;background:var(--primary)}

.footer-bottom{padding:19px 0;border-top:1px solid rgba(255,255,255,.09);font-size:10px}

.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}

.footer-legal{display:flex;flex-wrap:wrap;gap:15px}

@media(max-width:1060px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:grid;place-items:center}
.footer-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.brand-copy small{display:none}
.brand-logo{width:43px;height:43px}
.header-inner{min-height:74px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.legal-hero{padding-top:128px}
.footer-grid{grid-template-columns:1fr}
.footer-bottom-inner{align-items:flex-start;flex-direction:column}
}

/* CONTACT PAGE */
    .contact-hero{padding:156px 0 86px;background:radial-gradient(circle at 14% 23%,rgba(0,183,168,.14),transparent 27%),radial-gradient(circle at 87% 20%,rgba(255,201,92,.20),transparent 24%),linear-gradient(135deg,#F4F1FF 0%,#FFFFFF 52%,#EDFBF9 100%)}

.contact-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:58px;align-items:center}

.contact-hero h1{margin:20px 0 18px;font-size:clamp(42px,5.2vw,67px);line-height:1.06}

.gradient-text{background:linear-gradient(90deg,var(--primary),var(--secondary-dark));-webkit-background-clip:text;background-clip:text;color:transparent}

.contact-lead{max-width:680px;color:#626278;font-size:17px}

.contact-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.contact-proof{display:flex;flex-wrap:wrap;gap:15px;margin-top:28px}

.contact-proof span{display:flex;align-items:center;gap:8px;color:#5d5c72;font-size:12px;font-weight:700}

.contact-proof i{width:28px;height:28px;display:grid;place-items:center;font-style:normal;color:var(--secondary-dark);background:#e9faf7;border-radius:9px}

.contact-visual{position:relative;min-height:500px;padding:24px;background:rgba(255,255,255,.80);border:1px solid rgba(255,255,255,.95);border-radius:34px;box-shadow:var(--shadow)}

.contact-dashboard{height:100%;padding:25px;color:#fff;background:linear-gradient(150deg,#282162,#17143D);border-radius:25px;overflow:hidden}

.contact-dashboard-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;font-size:12px;font-weight:800}

.contact-dashboard-top span:last-child{padding:6px 9px;color:#b9fff6;background:rgba(0,183,168,.14);border-radius:999px;font-size:8px}

.contact-dashboard-main{padding:22px;background:linear-gradient(135deg,rgba(103,87,217,.67),rgba(0,183,168,.36));border:1px solid rgba(255,255,255,.12);border-radius:19px}

.contact-dashboard-main small{color:#d9d4ff;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

.contact-dashboard-main h3{margin:8px 0;color:#fff;font-size:25px}

.contact-dashboard-main p{margin:0;color:rgba(255,255,255,.68);font-size:11px}

.contact-mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}

.contact-mini-card{padding:16px;background:#fff;border-radius:15px}

.contact-mini-card strong{display:block;color:var(--navy);font-size:12px}

.contact-mini-card span{display:block;margin-top:4px;color:var(--muted);font-size:9px}

.contact-float{position:absolute;display:flex;align-items:center;gap:11px;padding:13px 15px;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow-sm)}

.contact-float.one{left:-15px;top:74px}

.contact-float.two{right:-12px;bottom:68px}

.contact-float i{width:38px;height:38px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-soft);border-radius:11px}

.contact-float strong{display:block;color:var(--navy);font-size:11px}

.contact-float span{display:block;color:var(--muted);font-size:8px}

.contact-strip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.contact-strip-grid{display:grid;grid-template-columns:1.25fr repeat(3,1fr);gap:20px;align-items:center;padding:24px 0}

.contact-strip-copy strong{display:block;color:var(--navy);font-size:13px}

.contact-strip-copy span{color:var(--muted);font-size:11px}

.strip-item{display:flex;align-items:center;justify-content:center;gap:9px;color:#69677d;font-size:11px;font-weight:800}

.strip-item i{width:34px;height:34px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-soft);border-radius:10px}

.contact-section{padding:96px 0}

.section-soft{background:linear-gradient(180deg,#f8f7ff,#fff)}

.section-head{max-width:760px;margin:0 auto 46px;text-align:center}

.section-head h2{margin:14px 0 15px;font-size:clamp(31px,4vw,48px);line-height:1.14}

.section-head p{color:var(--muted);font-size:16px}

.contact-channel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.channel-card{position:relative;overflow:hidden;min-height:245px;padding:25px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm);transition:.22s}

.channel-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}

.channel-card i{width:50px;height:50px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-soft);border-radius:15px;font-size:20px}

.channel-card:nth-child(2n) i{color:var(--secondary-dark);background:#e9faf7}

.channel-card h3{margin:18px 0 8px;font-size:18px}

.channel-card p{color:var(--muted);font-size:12px}

.channel-card a{color:var(--primary);font-size:11px;font-weight:800}

.contact-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:26px;align-items:start}

.contact-form-card,.contact-info-card{background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-sm)}

.contact-form-card{padding:34px}

.contact-form-card h2,.contact-info-card h2{margin-bottom:9px;font-size:28px}

.contact-form-card>p,.contact-info-card>p{color:var(--muted);font-size:13px}

.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:17px;margin-top:25px}

.form-group{display:grid;gap:7px}

.form-group.full{grid-column:1/-1}

.form-group label{color:var(--navy);font-size:11px;font-weight:800}

.form-group input,.form-group select,.form-group textarea{width:100%;padding:13px 14px;color:var(--text);background:#fbfbff;border:1px solid var(--line);border-radius:12px;outline:none;transition:.18s}

.form-group textarea{min-height:145px;resize:vertical}

.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:rgba(103,87,217,.6);box-shadow:0 0 0 4px rgba(103,87,217,.09);background:#fff}

.form-help{margin-top:8px;color:var(--muted);font-size:9px}

.form-consent{display:flex;align-items:flex-start;gap:9px;margin:17px 0;color:var(--muted);font-size:10px}

.form-consent input{margin-top:4px}

.form-submit{width:100%}

.contact-info-card{padding:30px}

.info-list{display:grid;gap:13px;margin-top:23px}

.info-row{display:grid;grid-template-columns:43px 1fr;gap:12px;padding:15px;background:#fafaff;border:1px solid var(--line);border-radius:15px}

.info-row i{width:39px;height:39px;display:grid;place-items:center;font-style:normal;color:var(--secondary-dark);background:#e9faf7;border-radius:11px}

.info-row strong{display:block;color:var(--navy);font-size:12px}

.info-row span,.info-row a{display:block;margin-top:3px;color:var(--muted);font-size:10px}

.response-box{margin-top:20px;padding:21px;color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));border-radius:18px}

.response-box h3{color:#fff;font-size:18px}

.response-box p{margin:0;color:rgba(255,255,255,.72);font-size:11px}

.response-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}

.response-step{padding:11px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.1);border-radius:11px}

.response-step strong{display:block;color:#fff;font-size:10px}

.response-step span{font-size:8px;color:rgba(255,255,255,.6)}

.needs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.need-card{padding:24px;background:#fff;border:1px solid var(--line);border-radius:20px}

.need-card i{display:grid;place-items:center;width:42px;height:42px;font-style:normal;color:var(--primary);background:var(--primary-soft);border-radius:12px}

.need-card h3{margin:16px 0 7px;font-size:17px}

.need-card p{margin:0;color:var(--muted);font-size:11px}

.map-panel{display:grid;grid-template-columns:.95fr 1.05fr;gap:25px;padding:35px;background:linear-gradient(145deg,#f0edff,#eafbF8);border:1px solid #e2dff7;border-radius:30px}

.map-copy h2{font-size:34px}

.map-copy p{color:var(--muted)}

.map-card{min-height:320px;padding:25px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.map-grid{height:100%;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(5,1fr);gap:8px}

.map-block{background:#f1efff;border-radius:8px}

.map-block:nth-child(3n){background:#e9faf7}

.map-pin{grid-column:3/5;grid-row:2/4;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:50%;font-size:28px;box-shadow:0 15px 30px rgba(103,87,217,.25)}

.faq-wrap{max-width:880px;margin:0 auto}

.faq-item{margin-bottom:11px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}

.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 21px;border:0;background:#fff;color:var(--navy);font-weight:800;text-align:left}

.faq-plus{width:28px;height:28px;display:grid;place-items:center;color:var(--primary);background:var(--primary-soft);border-radius:9px}

.faq-a{display:none;padding:0 21px 20px;color:var(--muted);font-size:12px}

.faq-item.open .faq-a{display:block}

.faq-item.open .faq-plus{transform:rotate(45deg)}

.contact-cta{padding:76px 0}

.contact-cta-box{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding:42px 48px;color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));border-radius:30px}

.contact-cta-box h2{margin-bottom:8px;color:#fff;font-size:clamp(28px,4vw,42px)}

.contact-cta-box p{margin:0;color:rgba(255,255,255,.72)}

.contact-cta-actions{display:flex;gap:10px;flex-wrap:wrap}

@media(max-width:1060px){
.contact-hero-grid,.contact-layout,.map-panel{grid-template-columns:1fr}
.contact-channel-grid{grid-template-columns:repeat(2,1fr)}
.needs-grid{grid-template-columns:repeat(2,1fr)}
.contact-strip-grid{grid-template-columns:repeat(2,1fr)}
.contact-strip-copy{grid-column:1/-1;text-align:center}
}

@media(max-width:700px){
.contact-hero{padding:124px 0 62px}
.contact-hero h1{font-size:42px}
.contact-visual{min-height:440px}
.contact-float.one{left:-5px}
.contact-float.two{right:-4px}
.contact-channel-grid,.needs-grid,.form-grid,.contact-strip-grid,.response-steps{grid-template-columns:1fr}
.form-group.full{grid-column:auto}
.contact-section{padding:69px 0}
.contact-form-card,.contact-info-card{padding:24px}
.contact-cta-box{grid-template-columns:1fr;padding:34px 25px}
.contact-cta-actions{flex-direction:column}
.map-panel{padding:23px}
.map-card{min-height:260px}
}

/* Header navigation refinement — unified multipage */
    .desktop-nav{gap:10px}

.nav-link{
      position:relative;
      gap:7px;
      padding:12px 5px;
      border:0;
      border-radius:0;
      background:transparent!important;
      box-shadow:none!important;
    }

.nav-link:hover,.nav-link.active{
      color:var(--primary);
      background:transparent!important;
    }

.nav-link::after{
      content:"";
      position:absolute;
      left:5px;right:5px;bottom:4px;
      height:2px;
      background:linear-gradient(90deg,var(--primary),var(--secondary));
      border-radius:99px;
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .2s ease;
    }

.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}

.mobile-main{gap:10px}

@media(max-width:1060px){
.desktop-nav{gap:4px}
}

:root{
            --primary: #6757D9;
            --primary-dark: #342A78;
            --primary-light: #F1EFFF;
            --secondary: #00B7A8;
            --secondary-dark: #087E76;
            --accent: #FFC95C;
            --navy: #17143D;
            --text: #44445B;
            --muted: #737388;
            --line: #E8E7F1;
            --white: #FFFFFF;
            --page: #FAFAFF;
            --shadow: 0 22px 60px rgba(31, 27, 82, .10);
            --shadow-sm: 0 12px 30px rgba(31, 27, 82, .08);
            --container: 1180px;
        }

*{
            box-sizing: border-box
        }

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

body{
            margin: 0;
            color: var(--text);
            background: var(--page);
            font-family: "Inter", Arial, sans-serif;
            line-height: 1.7;
            overflow-x: hidden
        }

body.menu-open{
            overflow: hidden
        }

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

button,
        input{
            font: inherit
        }

button{
            cursor: pointer
        }

h1,
        h2,
        h3,
        h4,
        p{
            margin-top: 0
        }

h1,
        h2,
        h3,
        h4{
            color: var(--navy);
            font-family: "Manrope", sans-serif;
            letter-spacing: -.025em
        }

.container{
            width: min(var(--container), calc(100% - 40px));
            margin-inline: auto
        }

.section{
            padding: 92px 0
        }

.section-soft{
            background: linear-gradient(180deg, #F8F7FF 0%, #FFFFFF 100%)
        }

.section-head{
            max-width: 780px;
            margin: 0 auto 46px;
            text-align: center
        }

.section-head h2{
            margin: 14px 0 15px;
            font-size: clamp(31px, 4vw, 48px);
            line-height: 1.14
        }

.section-head p{
            color: var(--muted);
            font-size: 16px
        }

.eyebrow{
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 7px 12px;
            color: var(--primary-dark);
            background: #fff;
            border: 1px solid rgba(103, 87, 217, .17);
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .10em;
            text-transform: uppercase
        }

.eyebrow::before{
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--secondary);
            box-shadow: 0 0 0 5px rgba(0, 183, 168, .12)
        }

.btn{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 48px;
            padding: 0 21px;
            border: 1px solid transparent;
            border-radius: 13px;
            font-weight: 750;
            transition: .22s ease
        }

.btn:hover{
            transform: translateY(-2px)
        }

.btn-primary{
            color: #fff;
            background: var(--primary);
            box-shadow: 0 12px 28px rgba(103, 87, 217, .28)
        }

.btn-outline{
            color: var(--primary-dark);
            background: rgba(255, 255, 255, .78);
            border-color: #DCD9F0
        }

.btn-light{
            color: var(--primary-dark);
            background: #fff
        }

.btn-secondary{
            color: #fff;
            background: var(--secondary)
        }

.btn-sm{
            min-height: 42px;
            padding: 0 17px;
            font-size: 13px
        }

.site-header{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            background: rgba(255, 255, 255, .92);
            border-bottom: 1px solid rgba(232, 231, 241, .86);
            backdrop-filter: blur(17px);
            transition: .25s
        }

.site-header.scrolled{
            box-shadow: 0 9px 28px rgba(31, 27, 82, .08)
        }

.header-inner{
            min-height: 82px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px
        }

.brand{
            display: inline-flex;
            align-items: center;
            gap: 12px;
            min-width: max-content
        }

.brand-logo{
            width: 49px;
            height: 49px;
            filter: drop-shadow(0 10px 14px rgba(103, 87, 217, .20))
        }

.brand-copy strong{
            display: block;
            color: var(--navy);
            font: 800 19px/1.1 "Manrope", sans-serif
        }

.brand-copy small{
            display: block;
            margin-top: 5px;
            color: var(--muted);
            font-size: 9px;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase
        }

.desktop-nav{
            display: flex;
            align-items: center;
            gap: 4px
        }

.nav-item{
            position: relative
        }

.nav-link{
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 12px 13px;
            color: #48475F;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 700;
            transition: .18s
        }

.nav-link:hover,
        .nav-link.active{
            color: var(--primary);
            background: var(--primary-light)
        }

.chevron{
            font-size: 10px;
            transition: .18s
        }

.nav-item:hover .chevron{
            transform: rotate(180deg)
        }

.dropdown{
            position: absolute;
            top: calc(100% + 12px);
            left: 0;
            width: 300px;
            padding: 10px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 18px;
            box-shadow: var(--shadow);
            opacity: 0;
            visibility: hidden;
            transform: translateY(9px);
            transition: .18s
        }

.nav-item:hover .dropdown{
            opacity: 1;
            visibility: visible;
            transform: translateY(0)
        }

.dropdown.wide{
            width: 680px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px
        }

.drop-link{
            display: flex;
            gap: 12px;
            padding: 12px;
            border-radius: 12px;
            transition: .18s
        }

.drop-link:hover{
            background: var(--primary-light)
        }

.drop-icon{
            flex: 0 0 auto;
            width: 38px;
            height: 38px;
            border-radius: 11px;
            display: grid;
            place-items: center;
            color: var(--primary);
            background: #F3F1FF;
            font-size: 17px
        }

.drop-link strong{
            display: block;
            color: var(--navy);
            font-size: 13px
        }

.drop-link span{
            display: block;
            margin-top: 2px;
            color: var(--muted);
            font-size: 11px;
            line-height: 1.45
        }

.header-action{
            display: flex;
            align-items: center;
            gap: 9px
        }

.menu-toggle{
            display: none;
            width: 45px;
            height: 45px;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: #fff;
            color: var(--navy)
        }

.mobile-panel{
            display: none;
            position: fixed;
            inset: 82px 0 0;
            z-index: 99;
            padding: 18px 20px 35px;
            background: #fff;
            overflow: auto
        }

.mobile-panel.open{
            display: block
        }

.mobile-group{
            border-bottom: 1px solid var(--line)
        }

.mobile-main{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 4px;
            border: 0;
            background: none;
            color: var(--navy);
            font-weight: 800;
            text-align: left
        }

.mobile-sub{
            display: none;
            padding: 0 0 12px 12px
        }

.mobile-sub.open{
            display: grid
        }

.mobile-sub a{
            padding: 9px 8px;
            color: var(--muted);
            font-size: 14px
        }

.mobile-login{
            margin-top: 20px;
            width: 100%
        }

.hero{
            position: relative;
            overflow: hidden;
            padding: 154px 0 92px;
            background: radial-gradient(circle at 14% 23%, rgba(0, 183, 168, .14), transparent 27%), radial-gradient(circle at 87% 20%, rgba(255, 201, 92, .20), transparent 24%), linear-gradient(135deg, #F4F1FF 0%, #FFFFFF 52%, #EDFBF9 100%)
        }

.hero::before{
            content: "";
            position: absolute;
            left: -110px;
            bottom: -145px;
            width: 360px;
            height: 360px;
            border: 52px solid rgba(103, 87, 217, .055);
            border-radius: 50%
        }

.hero-grid{
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1.03fr .97fr;
            gap: 62px;
            align-items: center
        }

.hero h1{
            margin: 20px 0 19px;
            font-size: clamp(42px, 5.2vw, 68px);
            line-height: 1.05
        }

.gradient-text{
            background: linear-gradient(90deg, var(--primary), var(--secondary-dark));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent
        }

.hero-lead{
            max-width: 700px;
            color: #626278;
            font-size: 17px
        }

.hero-actions{
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 28px
        }

.hero-proof{
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            margin-top: 30px
        }

.proof-item{
            display: flex;
            align-items: center;
            gap: 9px;
            color: #5D5C72;
            font-size: 12px;
            font-weight: 700
        }

.proof-icon{
            width: 28px;
            height: 28px;
            display: grid;
            place-items: center;
            color: var(--secondary-dark);
            background: #E9FAF7;
            border-radius: 9px
        }

.hero-visual{
            position: relative;
            min-height: 490px
        }

.visual-main{
            position: absolute;
            inset: 10px 0 15px 35px;
            padding: 22px;
            background: rgba(255, 255, 255, .78);
            border: 1px solid rgba(255, 255, 255, .95);
            border-radius: 34px;
            box-shadow: var(--shadow);
            backdrop-filter: blur(15px)
        }

.faq-board{
            height: 100%;
            padding: 24px;
            background: linear-gradient(150deg, #282162, #17143D);
            border-radius: 25px;
            overflow: hidden
        }

.board-top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            color: #fff;
            font-size: 12px;
            font-weight: 800
        }

.board-status{
            padding: 5px 8px;
            color: #B9FFF6;
            background: rgba(0, 183, 168, .15);
            border-radius: 99px;
            font-size: 8px
        }

.board-search{
            padding: 16px;
            background: #fff;
            border-radius: 15px
        }

.board-search small{
            display: block;
            color: var(--muted);
            font-size: 9px
        }

.board-search strong{
            display: block;
            margin-top: 3px;
            color: var(--navy);
            font-size: 13px
        }

.board-categories{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 13px
        }

.board-card{
            padding: 15px;
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .10);
            border-radius: 14px
        }

.board-card i{
            display: grid;
            place-items: center;
            width: 34px;
            height: 34px;
            margin-bottom: 10px;
            color: #fff;
            background: rgba(103, 87, 217, .55);
            border-radius: 10px;
            font-style: normal
        }

.board-card strong{
            display: block;
            color: #fff;
            font-size: 11px
        }

.board-card span{
            display: block;
            margin-top: 2px;
            color: rgba(255, 255, 255, .55);
            font-size: 8px
        }

.board-answer{
            margin-top: 12px;
            padding: 17px;
            background: linear-gradient(135deg, rgba(103, 87, 217, .64), rgba(0, 183, 168, .30));
            border: 1px solid rgba(255, 255, 255, .10);
            border-radius: 16px
        }

.board-answer strong{
            display: block;
            color: #fff;
            font-size: 13px
        }

.board-answer p{
            margin: 5px 0 0;
            color: rgba(255, 255, 255, .65);
            font-size: 9px
        }

.float-card{
            position: absolute;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 13px 15px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 15px;
            box-shadow: var(--shadow-sm)
        }

.float-card.one{
            left: 0;
            top: 71px
        }

.float-card.two{
            right: -8px;
            bottom: 54px
        }

.float-card i{
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            font-style: normal;
            color: var(--primary);
            background: var(--primary-light);
            border-radius: 11px
        }

.float-card strong{
            display: block;
            color: var(--navy);
            font-size: 11px
        }

.float-card span{
            display: block;
            color: var(--muted);
            font-size: 8px
        }

.quick-categories{
            position: relative;
            z-index: 3;
            margin-top: -32px
        }

.category-grid{
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 20px;
            box-shadow: var(--shadow-sm);
            overflow: hidden
        }

.category-link{
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 18px;
            border-right: 1px solid var(--line);
            transition: .18s
        }

.category-link:last-child{
            border-right: 0
        }

.category-link:hover{
            background: var(--primary-light)
        }

.category-link i{
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            font-style: normal;
            color: var(--primary);
            background: var(--primary-light);
            border-radius: 10px
        }

.category-link strong{
            display: block;
            color: var(--navy);
            font-size: 10px
        }

.category-link span{
            display: block;
            color: var(--muted);
            font-size: 8px
        }

.help-tools{
            max-width: 930px;
            margin: 0 auto 38px
        }

.search-box{
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 9px 8px 18px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 17px;
            box-shadow: var(--shadow-sm)
        }

.search-box span{
            font-size: 20px
        }

.search-box input{
            width: 100%;
            min-width: 0;
            padding: 12px 0;
            border: 0;
            outline: 0;
            color: var(--text);
            background: transparent
        }

.search-box button{
            min-height: 42px;
            padding: 0 17px;
            border: 0;
            border-radius: 11px;
            color: #fff;
            background: var(--primary);
            font-weight: 800
        }

.filter-row{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            margin-top: 18px
        }

.filter-btn{
            min-height: 39px;
            padding: 0 14px;
            border: 1px solid var(--line);
            border-radius: 10px;
            color: var(--muted);
            background: #fff;
            font-size: 11px;
            font-weight: 800
        }

.filter-btn.active{
            color: #fff;
            background: var(--primary);
            border-color: var(--primary)
        }

.faq-layout{
            display: grid;
            grid-template-columns: 270px minmax(0, 1fr);
            gap: 28px;
            align-items: start
        }

.faq-sidebar{
            position: sticky;
            top: 105px;
            padding: 22px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 19px;
            box-shadow: var(--shadow-sm)
        }

.faq-sidebar h3{
            margin-bottom: 14px;
            font-size: 17px
        }

.side-links{
            display: grid;
            gap: 5px
        }

.side-links button{
            width: 100%;
            padding: 10px 11px;
            border: 0;
            border-radius: 9px;
            color: var(--muted);
            background: transparent;
            text-align: left;
            font-size: 12px;
            font-weight: 700
        }

.side-links button:hover,
        .side-links button.active{
            color: var(--primary);
            background: var(--primary-light)
        }

.side-note{
            margin-top: 18px;
            padding: 15px;
            color: #5A5770;
            background: #F8F7FF;
            border-radius: 12px;
            font-size: 10px
        }

.faq-content{
            display: grid;
            gap: 32px
        }

.faq-group{
            scroll-margin-top: 110px
        }

.group-head{
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 15px
        }

.group-icon{
            width: 44px;
            height: 44px;
            display: grid;
            place-items: center;
            color: var(--primary);
            background: var(--primary-light);
            border-radius: 13px;
            font-size: 18px
        }

.group-head h2{
            margin: 0;
            font-size: 24px
        }

.group-head p{
            margin: 2px 0 0;
            color: var(--muted);
            font-size: 11px
        }

.faq-item{
            margin-bottom: 10px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 16px;
            overflow: hidden;
            transition: .18s
        }

.faq-item:hover{
            border-color: #D7D3F4
        }

.faq-q{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 19px 21px;
            border: 0;
            background: #fff;
            color: var(--navy);
            font-weight: 800;
            text-align: left
        }

.faq-plus{
            flex: 0 0 auto;
            width: 29px;
            height: 29px;
            display: grid;
            place-items: center;
            color: var(--primary);
            background: var(--primary-light);
            border-radius: 9px;
            transition: .2s
        }

.faq-a{
            display: none;
            padding: 0 21px 21px;
            color: var(--muted);
            font-size: 13px
        }

.faq-a p:last-child{
            margin-bottom: 0
        }

.faq-a a{
            color: var(--primary);
            font-weight: 800
        }

.faq-item.open{
            box-shadow: var(--shadow-sm)
        }

.faq-item.open .faq-a{
            display: block
        }

.faq-item.open .faq-plus{
            transform: rotate(45deg)
        }

.faq-item.hidden,
        .faq-group.hidden{
            display: none
        }

.service-hub{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 17px
        }

.hub-card{
            position: relative;
            overflow: hidden;
            min-height: 215px;
            padding: 23px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 19px;
            box-shadow: var(--shadow-sm);
            transition: .22s
        }

.hub-card:hover{
            transform: translateY(-4px);
            box-shadow: var(--shadow)
        }

.hub-card i{
            width: 45px;
            height: 45px;
            display: grid;
            place-items: center;
            font-style: normal;
            color: var(--primary);
            background: var(--primary-light);
            border-radius: 13px
        }

.hub-card:nth-child(2n) i{
            color: var(--secondary-dark);
            background: #E9FAF7
        }

.hub-card h3{
            margin: 15px 0 7px;
            font-size: 16px
        }

.hub-card p{
            color: var(--muted);
            font-size: 10px
        }

.hub-card a{
            position: absolute;
            left: 23px;
            bottom: 20px;
            color: var(--primary);
            font-size: 11px;
            font-weight: 800
        }

.final-cta{
            padding: 76px 0
        }

.cta-box{
            position: relative;
            overflow: hidden;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 35px;
            align-items: center;
            padding: 42px 48px;
            color: #fff;
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
            border-radius: 30px
        }

.cta-box::after{
            content: "";
            position: absolute;
            right: -80px;
            top: -110px;
            width: 270px;
            height: 270px;
            border: 45px solid rgba(255, 255, 255, .07);
            border-radius: 50%
        }

.cta-box h2{
            margin-bottom: 9px;
            color: #fff;
            font-size: clamp(28px, 4vw, 43px)
        }

.cta-box p{
            margin: 0;
            color: rgba(255, 255, 255, .70)
        }

.cta-actions{
            position: relative;
            z-index: 2;
            display: flex;
            gap: 10px;
            flex-wrap: wrap
        }

.site-footer{
            color: rgba(255, 255, 255, .72);
            background: #141132
        }

.footer-main{
            padding: 68px 0 46px
        }

.footer-grid{
            display: grid;
            grid-template-columns: 1.45fr repeat(3, 1fr);
            gap: 48px
        }

.footer-brand p{
            max-width: 390px;
            margin: 19px 0 22px;
            font-size: 12px
        }

.footer-brand .brand-copy strong,
        .footer-title{
            color: #fff
        }

.footer-title{
            margin-bottom: 18px;
            font: 800 14px "Manrope"
        }

.footer-links{
            display: grid;
            gap: 10px
        }

.footer-links a{
            font-size: 12px;
            transition: .18s
        }

.footer-links a:hover,
        .footer-links a.active{
            color: #fff;
            transform: translateX(3px)
        }

.footer-contact{
            display: grid;
            gap: 10px;
            margin-top: 18px
        }

.contact-row{
            display: flex;
            gap: 10px;
            font-size: 11px
        }

.contact-row i{
            font-style: normal;
            color: #AFA6FF
        }

.newsletter{
            display: flex;
            max-width: 395px;
            margin-top: 17px;
            padding: 5px;
            background: #fff;
            border-radius: 12px
        }

.newsletter input{
            width: 100%;
            min-width: 0;
            padding: 0 12px;
            border: 0;
            outline: 0;
            font-size: 11px
        }

.newsletter button{
            width: 43px;
            border: 0;
            border-radius: 9px;
            color: #fff;
            background: var(--primary)
        }

.footer-bottom{
            padding: 19px 0;
            border-top: 1px solid rgba(255, 255, 255, .09);
            font-size: 10px
        }

.footer-bottom-inner{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px
        }

.footer-legal{
            display: flex;
            flex-wrap: wrap;
            gap: 15px
        }

.floating-help{
            position: fixed;
            right: 22px;
            bottom: 22px;
            z-index: 90;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 11px 15px;
            color: #fff;
            background: #1FAF6D;
            border-radius: 99px;
            box-shadow: 0 15px 35px rgba(16, 119, 73, .28);
            font-size: 11px;
            font-weight: 800
        }

.sr-only{
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0
        }

@media(max-width:1060px){
.desktop-nav,
            .header-action .btn-outline{
                display: none
            }
.menu-toggle{
                display: grid;
                place-items: center
            }
.hero-grid{
                grid-template-columns: 1fr
            }
.hero-visual{
                max-width: 650px;
                width: 100%;
                margin: 0 auto
            }
.category-grid{
                grid-template-columns: repeat(2, 1fr)
            }
.category-link{
                border-bottom: 1px solid var(--line)
            }
.faq-layout{
                grid-template-columns: 1fr
            }
.faq-sidebar{
                position: static
            }
.side-links{
                grid-template-columns: repeat(3, 1fr)
            }
.service-hub{
                grid-template-columns: repeat(2, 1fr)
            }
.footer-grid{
                grid-template-columns: repeat(2, 1fr)
            }
}

@media(max-width:700px){
.container{
                width: min(100% - 28px, var(--container))
            }
.section{
                padding: 68px 0
            }
.brand-copy small{
                display: none
            }
.brand-logo{
                width: 43px;
                height: 43px
            }
.header-inner{
                min-height: 74px
            }
.mobile-panel{
                inset: 74px 0 0
            }
.header-action .btn-primary{
                display: none
            }
.hero{
                padding: 122px 0 66px
            }
.hero h1{
                font-size: 42px
            }
.hero-lead{
                font-size: 15px
            }
.hero-visual{
                min-height: 445px
            }
.visual-main{
                inset: 8px 0 22px 18px
            }
.float-card.one{
                left: -3px
            }
.float-card.two{
                right: -3px
            }
.quick-categories{
                margin-top: -18px
            }
.category-grid,
            .side-links,
            .service-hub,
            .footer-grid{
                grid-template-columns: 1fr
            }
.category-link{
                border-right: 0
            }
.search-box{
                align-items: stretch;
                flex-wrap: wrap
            }
.search-box button{
                width: 100%
            }
.faq-q{
                padding: 17px
            }
.faq-a{
                padding: 0 17px 18px
            }
.cta-box{
                grid-template-columns: 1fr;
                padding: 34px 25px
            }
.cta-actions{
                flex-direction: column
            }
.footer-bottom-inner{
                align-items: flex-start;
                flex-direction: column
            }
.floating-help{
                right: 14px;
                bottom: 14px;
                padding: 11px
            }
.floating-help span:last-child{
                display: none
            }
}

/* Header navigation refinement — unified multipage */
        .desktop-nav{
            gap: 10px
        }

.nav-link{
            position: relative;
            gap: 7px;
            padding: 12px 5px;
            border: 0;
            border-radius: 0;
            background: transparent !important;
            box-shadow: none !important;
        }

.nav-link:hover,
        .nav-link.active{
            color: var(--primary);
            background: transparent !important;
        }

.nav-link::after{
            content: "";
            position: absolute;
            left: 5px;
            right: 5px;
            bottom: 4px;
            height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            border-radius: 99px;
            transform: scaleX(0);
            transform-origin: center;
            transition: transform .2s ease;
        }

.nav-link:hover::after,
        .nav-link.active::after{
            transform: scaleX(1)
        }

.mobile-main{
            gap: 10px
        }

@media(max-width:1060px){
.desktop-nav{
                gap: 4px
            }
}

:root{
      --primary: #6255d9;
      --primary-dark: #30276f;
      --primary-soft: #f1efff;
      --secondary: #00b7a8;
      --accent: #ffcc5c;
      --navy: #15123b;
      --text: #41415a;
      --muted: #74748a;
      --line: #e8e7f1;
      --surface: #ffffff;
      --page: #fafaff;
      --success: #188b65;
      --shadow: 0 20px 55px rgba(33, 28, 88, .10);
      --radius-lg: 26px;
      --radius-md: 18px;
      --container: 1180px;
    }

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
      margin: 0;
      color: var(--text);
      background: var(--page);
      font-family: "Inter", Arial, sans-serif;
      line-height: 1.75;
    }

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

img{ max-width: 100%; display: block; }

button, input{ font: inherit; }

.container{ width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }

/* HEADER — meniru gaya halaman utama */
    .site-header{
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,.96);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(232,231,241,.9);
    }

.header-inner{
      min-height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

.brand{
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: max-content;
    }

.brand-mark{
      width: 46px;
      height: 46px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      color: #fff;
      background: linear-gradient(135deg, var(--primary), #8b7ff0);
      box-shadow: 0 10px 25px rgba(98,85,217,.28);
      font: 800 18px/1 "Manrope", sans-serif;
    }

.brand-name{
      color: var(--navy);
      font: 800 19px/1.15 "Manrope", sans-serif;
    }

.brand-name small{
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font: 600 10px/1.2 "Inter", sans-serif;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

.nav-menu{
      display: flex;
      align-items: center;
      gap: 27px;
      font-size: 14px;
      font-weight: 600;
    }

.nav-menu a:hover, .nav-menu a.active{ color: var(--primary); }

.header-actions{ display: flex; gap: 10px; }

.btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 0 20px;
      border: 0;
      border-radius: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: .2s ease;
    }

.btn-primary{
      color: #fff;
      background: var(--primary);
      box-shadow: 0 10px 22px rgba(98,85,217,.24);
    }

.btn-primary:hover{ transform: translateY(-2px); background: #5145c6; }

.menu-toggle{
      display: none;
      width: 44px;
      height: 44px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      color: var(--navy);
    }

/* HERO */
    .legal-hero{
      position: relative;
      overflow: hidden;
      padding: 78px 0 70px;
      background:
        radial-gradient(circle at 15% 25%, rgba(0,183,168,.16), transparent 27%),
        radial-gradient(circle at 84% 28%, rgba(255,204,92,.20), transparent 25%),
        linear-gradient(135deg, #f5f2ff 0%, #fff 52%, #edfafa 100%);
    }

.legal-hero::after{
      content: "";
      position: absolute;
      inset: auto -80px -140px auto;
      width: 360px;
      height: 360px;
      border: 54px solid rgba(98,85,217,.06);
      border-radius: 50%;
    }

.hero-grid{
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.12fr .88fr;
      align-items: center;
      gap: 55px;
    }

.eyebrow{
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 8px 13px;
      color: var(--primary-dark);
      background: rgba(255,255,255,.9);
      border: 1px solid rgba(98,85,217,.16);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

.eyebrow::before{
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--secondary);
    }

h1, h2, h3{ margin-top: 0; color: var(--navy); font-family: "Manrope", sans-serif; }

h1{
      max-width: 730px;
      margin: 21px 0 18px;
      font-size: clamp(38px, 5vw, 64px);
      line-height: 1.08;
      letter-spacing: -.035em;
    }

.hero-copy{
      max-width: 690px;
      margin: 0 0 26px;
      color: #626279;
      font-size: 17px;
    }

.meta-row{
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

.meta-pill{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      color: var(--primary-dark);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      font-size: 13px;
      font-weight: 700;
      box-shadow: 0 8px 18px rgba(33,28,88,.05);
    }

.illustration-card{
      position: relative;
      padding: 24px;
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(255,255,255,.9);
      border-radius: 32px;
      box-shadow: var(--shadow);
    }

.illustration-card svg{ width: 100%; height: auto; }

/* CONTENT */
    .legal-section{ padding: 76px 0 100px; }

.legal-layout{
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr);
      align-items: start;
      gap: 35px;
    }

.legal-sidebar{
      position: sticky;
      top: 108px;
      padding: 24px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      box-shadow: 0 15px 38px rgba(33,28,88,.07);
    }

.legal-sidebar h2{ margin-bottom: 14px; font-size: 18px; }

.toc{
      display: grid;
      gap: 3px;
      max-height: calc(100vh - 210px);
      overflow: auto;
      padding-right: 5px;
    }

.toc a{
      padding: 8px 10px;
      color: var(--muted);
      border-radius: 9px;
      font-size: 13px;
      line-height: 1.4;
    }

.toc a:hover{ color: var(--primary); background: var(--primary-soft); }

.legal-content{
      padding: clamp(26px, 4vw, 54px);
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
    }

.notice{
      margin-bottom: 34px;
      padding: 20px 22px;
      color: #4e4675;
      background: linear-gradient(135deg, #f2efff, #f7ffff);
      border: 1px solid #ddd8ff;
      border-left: 5px solid var(--primary);
      border-radius: 14px;
    }

.legal-article{
      scroll-margin-top: 115px;
      padding: 31px 0;
      border-top: 1px solid var(--line);
    }

.legal-article:first-of-type{ border-top: 0; padding-top: 0; }

.legal-article h2{
      display: flex;
      align-items: flex-start;
      gap: 13px;
      margin-bottom: 14px;
      font-size: clamp(21px, 2.6vw, 27px);
      line-height: 1.35;
    }

.article-no{
      flex: 0 0 auto;
      display: inline-grid;
      place-items: center;
      width: 37px;
      height: 37px;
      color: #fff;
      background: var(--primary);
      border-radius: 11px;
      font: 800 13px/1 "Inter", sans-serif;
    }

.legal-article p{ margin: 10px 0; }

.legal-article ol, .legal-article ul{ margin: 12px 0 0; padding-left: 22px; }

.legal-article li{ margin: 8px 0; padding-left: 3px; }

.legal-article strong{ color: var(--navy); }

.highlight-box{
      margin-top: 18px;
      padding: 18px 20px;
      background: #fbfbff;
      border: 1px dashed #cfcbee;
      border-radius: 14px;
    }

/* CTA */
    .help-card{
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 25px;
      margin-top: 34px;
      padding: 28px;
      color: #fff;
      background: linear-gradient(135deg, var(--primary-dark), var(--primary));
      border-radius: 20px;
    }

.help-card h2{ margin-bottom: 8px; color: #fff; font-size: 24px; }

.help-card p{ margin: 0; color: rgba(255,255,255,.78); }

.help-card .btn{ color: var(--primary-dark); background: #fff; }

/* FOOTER — struktur mengikuti homepage */
    .site-footer{
      color: rgba(255,255,255,.77);
      background: #141132;
    }

.footer-main{ padding: 65px 0 45px; }

.footer-grid{
      display: grid;
      grid-template-columns: 1.4fr repeat(3, 1fr);
      gap: 46px;
    }

.footer-brand .brand-name, .footer-title{ color: #fff; }

.footer-brand p{ max-width: 420px; margin: 19px 0 22px; }

.footer-title{
      margin-bottom: 17px;
      font: 800 15px/1.2 "Manrope", sans-serif;
    }

.footer-links{ display: grid; gap: 10px; font-size: 14px; }

.footer-links a:hover, .footer-links a.active{ color: #fff; }

.newsletter{
      display: flex;
      max-width: 390px;
      padding: 5px;
      background: #fff;
      border-radius: 12px;
    }

.newsletter input{
      width: 100%;
      min-width: 0;
      padding: 0 13px;
      border: 0;
      outline: none;
    }

.newsletter button{
      min-width: 45px;
      border: 0;
      border-radius: 9px;
      color: #fff;
      background: var(--primary);
      cursor: pointer;
    }

.footer-bottom{
      padding: 19px 0;
      border-top: 1px solid rgba(255,255,255,.10);
      font-size: 13px;
    }

.footer-bottom-inner{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

@media (max-width: 1000px){
.nav-menu, .header-actions{ display: none; }
.menu-toggle{ display: inline-grid; place-items: center; }
.nav-menu.open{
        position: absolute;
        top: 82px;
        left: 20px;
        right: 20px;
        display: grid;
        gap: 0;
        padding: 15px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 16px;
        box-shadow: var(--shadow);
      }
.nav-menu.open a{ padding: 12px; }
.hero-grid{ grid-template-columns: 1fr; }
.illustration-card{ max-width: 590px; }
.legal-layout{ grid-template-columns: 1fr; }
.legal-sidebar{ position: static; }
.toc{ grid-template-columns: repeat(2, minmax(0,1fr)); max-height: none; }
.footer-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px){
.container{ width: min(100% - 28px, var(--container)); }
.legal-hero{ padding: 56px 0; }
h1{ font-size: 39px; }
.legal-section{ padding: 45px 0 70px; }
.toc{ grid-template-columns: 1fr; }
.legal-content{ padding: 24px 20px; }
.legal-article h2{ font-size: 21px; }
.help-card{ grid-template-columns: 1fr; }
.footer-grid{ grid-template-columns: 1fr; gap: 34px; }
.footer-bottom-inner{ align-items: flex-start; flex-direction: column; }
}

/* Header & Footer alignment with homepage */
    html{scroll-padding-top:100px}

body.menu-open{overflow:hidden}

.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.92);border-bottom:1px solid rgba(232,231,241,.86);backdrop-filter:blur(17px);transition:.25s ease}

.site-header.scrolled{box-shadow:0 9px 28px rgba(31,27,82,.08)}

.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}

.brand{display:inline-flex;align-items:center;gap:12px;min-width:max-content}

.brand-logo{width:49px;height:49px;filter:drop-shadow(0 10px 14px rgba(103,87,217,.20))}

.brand-copy strong{display:block;color:var(--navy);font:800 19px/1.1 "Manrope",sans-serif}

.brand-copy small{display:block;margin-top:5px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}

.desktop-nav{display:flex;align-items:center;gap:4px}

.nav-item{position:relative}

.nav-link{display:flex;align-items:center;gap:6px;padding:12px 13px;color:#48475F;border-radius:10px;font-size:13px;font-weight:700;transition:.18s ease}

.nav-link:hover,.nav-link.active{color:var(--primary);background:var(--primary-soft)}

.chevron{font-size:10px;transition:.18s}

.nav-item:hover .chevron{transform:rotate(180deg)}

.dropdown{position:absolute;top:calc(100% + 12px);left:0;width:300px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(9px);transition:.18s ease}

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}

.dropdown.wide{width:680px;display:grid;grid-template-columns:1fr 1fr;gap:6px}

.drop-link{display:flex;gap:12px;padding:12px;border-radius:12px;transition:.18s}

.drop-link:hover{background:var(--primary-soft)}

.drop-icon{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--primary);background:#F3F1FF;font-size:17px}

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span{display:block;margin-top:2px;color:var(--muted);font-size:11px;line-height:1.45}

.header-action{display:flex;align-items:center;gap:9px}

.btn-outline{color:var(--primary-dark);background:rgba(255,255,255,.75);border:1px solid #DCD9F0}

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.menu-toggle{display:none;width:45px;height:45px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--navy)}

.mobile-panel{display:none;position:fixed;inset:82px 0 0;z-index:99;padding:18px 20px 35px;background:#fff;overflow:auto}

.mobile-panel.open{display:block}

.mobile-group{border-bottom:1px solid var(--line)}

.mobile-main{width:100%;display:flex;align-items:center;justify-content:space-between;padding:15px 4px;border:0;background:none;color:var(--navy);font-weight:800;text-align:left}

.mobile-sub{display:none;padding:0 0 12px 12px}

.mobile-sub.open{display:grid}

.mobile-sub a{padding:9px 8px;color:var(--muted);font-size:14px}

.mobile-login{margin-top:20px;width:100%}

.legal-hero{padding-top:160px}

.site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:68px 0 46px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:48px}

.footer-brand p{max-width:390px;margin:19px 0 22px;font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:18px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:10px}

.footer-links a{font-size:12px;transition:.18s}

.footer-links a:hover,.footer-links a.active{color:#fff;transform:translateX(3px)}

.footer-contact{display:grid;gap:10px;margin-top:18px}

.contact-row{display:flex;gap:10px;font-size:11px}

.contact-row i{font-style:normal;color:#AFA6FF}

.newsletter{display:flex;max-width:395px;margin-top:17px;padding:5px;background:#fff;border-radius:12px}

.newsletter input{width:100%;min-width:0;padding:0 12px;border:0;outline:0;font-size:11px}

.newsletter button{width:43px;border:0;border-radius:9px;color:#fff;background:var(--primary)}

.footer-bottom{padding:19px 0;border-top:1px solid rgba(255,255,255,.09);font-size:10px}

.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}

.footer-legal{display:flex;flex-wrap:wrap;gap:15px}

@media(max-width:1060px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:grid;place-items:center}
.footer-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.brand-copy small{display:none}
.brand-logo{width:43px;height:43px}
.header-inner{min-height:74px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.legal-hero{padding-top:128px}
.footer-grid{grid-template-columns:1fr}
.footer-bottom-inner{align-items:flex-start;flex-direction:column}
}

/* Header navigation refinement — unified multipage */
    .desktop-nav{gap:10px}

.nav-link{
      position:relative;
      gap:7px;
      padding:12px 5px;
      border:0;
      border-radius:0;
      background:transparent!important;
      box-shadow:none!important;
    }

.nav-link:hover,.nav-link.active{
      color:var(--primary);
      background:transparent!important;
    }

.nav-link::after{
      content:"";
      position:absolute;
      left:5px;right:5px;bottom:4px;
      height:2px;
      background:linear-gradient(90deg,var(--primary),var(--secondary));
      border-radius:99px;
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .2s ease;
    }

.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}

.mobile-main{gap:10px}

@media(max-width:1060px){
.desktop-nav{gap:4px}
}

:root{
      --primary: #6255d9;
      --primary-dark: #30276f;
      --primary-soft: #f1efff;
      --secondary: #00b7a8;
      --accent: #ffcc5c;
      --navy: #15123b;
      --text: #41415a;
      --muted: #74748a;
      --line: #e8e7f1;
      --surface: #ffffff;
      --page: #fafaff;
      --success: #188b65;
      --shadow: 0 20px 55px rgba(33, 28, 88, .10);
      --radius-lg: 26px;
      --radius-md: 18px;
      --container: 1180px;
    }

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
      margin: 0;
      color: var(--text);
      background: var(--page);
      font-family: "Inter", Arial, sans-serif;
      line-height: 1.75;
    }

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

img{ max-width: 100%; display: block; }

button, input{ font: inherit; }

.container{ width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }

/* HEADER — meniru gaya halaman utama */
    .site-header{
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,.96);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(232,231,241,.9);
    }

.header-inner{
      min-height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

.brand{
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: max-content;
    }

.brand-mark{
      width: 46px;
      height: 46px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      color: #fff;
      background: linear-gradient(135deg, var(--primary), #8b7ff0);
      box-shadow: 0 10px 25px rgba(98,85,217,.28);
      font: 800 18px/1 "Manrope", sans-serif;
    }

.brand-name{
      color: var(--navy);
      font: 800 19px/1.15 "Manrope", sans-serif;
    }

.brand-name small{
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font: 600 10px/1.2 "Inter", sans-serif;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

.nav-menu{
      display: flex;
      align-items: center;
      gap: 27px;
      font-size: 14px;
      font-weight: 600;
    }

.nav-menu a:hover, .nav-menu a.active{ color: var(--primary); }

.header-actions{ display: flex; gap: 10px; }

.btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 0 20px;
      border: 0;
      border-radius: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: .2s ease;
    }

.btn-primary{
      color: #fff;
      background: var(--primary);
      box-shadow: 0 10px 22px rgba(98,85,217,.24);
    }

.btn-primary:hover{ transform: translateY(-2px); background: #5145c6; }

.menu-toggle{
      display: none;
      width: 44px;
      height: 44px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      color: var(--navy);
    }

/* HERO */
    .legal-hero{
      position: relative;
      overflow: hidden;
      padding: 78px 0 70px;
      background:
        radial-gradient(circle at 15% 25%, rgba(0,183,168,.16), transparent 27%),
        radial-gradient(circle at 84% 28%, rgba(255,204,92,.20), transparent 25%),
        linear-gradient(135deg, #f5f2ff 0%, #fff 52%, #edfafa 100%);
    }

.legal-hero::after{
      content: "";
      position: absolute;
      inset: auto -80px -140px auto;
      width: 360px;
      height: 360px;
      border: 54px solid rgba(98,85,217,.06);
      border-radius: 50%;
    }

.hero-grid{
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.12fr .88fr;
      align-items: center;
      gap: 55px;
    }

.eyebrow{
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 8px 13px;
      color: var(--primary-dark);
      background: rgba(255,255,255,.9);
      border: 1px solid rgba(98,85,217,.16);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

.eyebrow::before{
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--secondary);
    }

h1, h2, h3{ margin-top: 0; color: var(--navy); font-family: "Manrope", sans-serif; }

h1{
      max-width: 730px;
      margin: 21px 0 18px;
      font-size: clamp(38px, 5vw, 64px);
      line-height: 1.08;
      letter-spacing: -.035em;
    }

.hero-copy{
      max-width: 690px;
      margin: 0 0 26px;
      color: #626279;
      font-size: 17px;
    }

.meta-row{
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

.meta-pill{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      color: var(--primary-dark);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      font-size: 13px;
      font-weight: 700;
      box-shadow: 0 8px 18px rgba(33,28,88,.05);
    }

.illustration-card{
      position: relative;
      padding: 24px;
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(255,255,255,.9);
      border-radius: 32px;
      box-shadow: var(--shadow);
    }

.illustration-card svg{ width: 100%; height: auto; }

/* CONTENT */
    .legal-section{ padding: 76px 0 100px; }

.legal-layout{
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr);
      align-items: start;
      gap: 35px;
    }

.legal-sidebar{
      position: sticky;
      top: 108px;
      padding: 24px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      box-shadow: 0 15px 38px rgba(33,28,88,.07);
    }

.legal-sidebar h2{ margin-bottom: 14px; font-size: 18px; }

.toc{
      display: grid;
      gap: 3px;
      max-height: calc(100vh - 210px);
      overflow: auto;
      padding-right: 5px;
    }

.toc a{
      padding: 8px 10px;
      color: var(--muted);
      border-radius: 9px;
      font-size: 13px;
      line-height: 1.4;
    }

.toc a:hover{ color: var(--primary); background: var(--primary-soft); }

.legal-content{
      padding: clamp(26px, 4vw, 54px);
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
    }

.notice{
      margin-bottom: 34px;
      padding: 20px 22px;
      color: #4e4675;
      background: linear-gradient(135deg, #f2efff, #f7ffff);
      border: 1px solid #ddd8ff;
      border-left: 5px solid var(--primary);
      border-radius: 14px;
    }

.legal-article{
      scroll-margin-top: 115px;
      padding: 31px 0;
      border-top: 1px solid var(--line);
    }

.legal-article:first-of-type{ border-top: 0; padding-top: 0; }

.legal-article h2{
      display: flex;
      align-items: flex-start;
      gap: 13px;
      margin-bottom: 14px;
      font-size: clamp(21px, 2.6vw, 27px);
      line-height: 1.35;
    }

.article-no{
      flex: 0 0 auto;
      display: inline-grid;
      place-items: center;
      width: 37px;
      height: 37px;
      color: #fff;
      background: var(--primary);
      border-radius: 11px;
      font: 800 13px/1 "Inter", sans-serif;
    }

.legal-article p{ margin: 10px 0; }

.legal-article ol, .legal-article ul{ margin: 12px 0 0; padding-left: 22px; }

.legal-article li{ margin: 8px 0; padding-left: 3px; }

.legal-article strong{ color: var(--navy); }

.highlight-box{
      margin-top: 18px;
      padding: 18px 20px;
      background: #fbfbff;
      border: 1px dashed #cfcbee;
      border-radius: 14px;
    }

/* CTA */
    .help-card{
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 25px;
      margin-top: 34px;
      padding: 28px;
      color: #fff;
      background: linear-gradient(135deg, var(--primary-dark), var(--primary));
      border-radius: 20px;
    }

.help-card h2{ margin-bottom: 8px; color: #fff; font-size: 24px; }

.help-card p{ margin: 0; color: rgba(255,255,255,.78); }

.help-card .btn{ color: var(--primary-dark); background: #fff; }

/* FOOTER — struktur mengikuti homepage */
    .site-footer{
      color: rgba(255,255,255,.77);
      background: #141132;
    }

.footer-main{ padding: 65px 0 45px; }

.footer-grid{
      display: grid;
      grid-template-columns: 1.4fr repeat(3, 1fr);
      gap: 46px;
    }

.footer-brand .brand-name, .footer-title{ color: #fff; }

.footer-brand p{ max-width: 420px; margin: 19px 0 22px; }

.footer-title{
      margin-bottom: 17px;
      font: 800 15px/1.2 "Manrope", sans-serif;
    }

.footer-links{ display: grid; gap: 10px; font-size: 14px; }

.footer-links a:hover, .footer-links a.active{ color: #fff; }

.newsletter{
      display: flex;
      max-width: 390px;
      padding: 5px;
      background: #fff;
      border-radius: 12px;
    }

.newsletter input{
      width: 100%;
      min-width: 0;
      padding: 0 13px;
      border: 0;
      outline: none;
    }

.newsletter button{
      min-width: 45px;
      border: 0;
      border-radius: 9px;
      color: #fff;
      background: var(--primary);
      cursor: pointer;
    }

.footer-bottom{
      padding: 19px 0;
      border-top: 1px solid rgba(255,255,255,.10);
      font-size: 13px;
    }

.footer-bottom-inner{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

@media (max-width: 1000px){
.nav-menu, .header-actions{ display: none; }
.menu-toggle{ display: inline-grid; place-items: center; }
.nav-menu.open{
        position: absolute;
        top: 82px;
        left: 20px;
        right: 20px;
        display: grid;
        gap: 0;
        padding: 15px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 16px;
        box-shadow: var(--shadow);
      }
.nav-menu.open a{ padding: 12px; }
.hero-grid{ grid-template-columns: 1fr; }
.illustration-card{ max-width: 590px; }
.legal-layout{ grid-template-columns: 1fr; }
.legal-sidebar{ position: static; }
.toc{ grid-template-columns: repeat(2, minmax(0,1fr)); max-height: none; }
.footer-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px){
.container{ width: min(100% - 28px, var(--container)); }
.legal-hero{ padding: 56px 0; }
h1{ font-size: 39px; }
.legal-section{ padding: 45px 0 70px; }
.toc{ grid-template-columns: 1fr; }
.legal-content{ padding: 24px 20px; }
.legal-article h2{ font-size: 21px; }
.help-card{ grid-template-columns: 1fr; }
.footer-grid{ grid-template-columns: 1fr; gap: 34px; }
.footer-bottom-inner{ align-items: flex-start; flex-direction: column; }
}

/* Header & Footer alignment with homepage */
    html{scroll-padding-top:100px}

body.menu-open{overflow:hidden}

.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.92);border-bottom:1px solid rgba(232,231,241,.86);backdrop-filter:blur(17px);transition:.25s ease}

.site-header.scrolled{box-shadow:0 9px 28px rgba(31,27,82,.08)}

.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}

.brand{display:inline-flex;align-items:center;gap:12px;min-width:max-content}

.brand-logo{width:49px;height:49px;filter:drop-shadow(0 10px 14px rgba(103,87,217,.20))}

.brand-copy strong{display:block;color:var(--navy);font:800 19px/1.1 "Manrope",sans-serif}

.brand-copy small{display:block;margin-top:5px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}

.desktop-nav{display:flex;align-items:center;gap:4px}

.nav-item{position:relative}

.nav-link{display:flex;align-items:center;gap:6px;padding:12px 13px;color:#48475F;border-radius:10px;font-size:13px;font-weight:700;transition:.18s ease}

.nav-link:hover,.nav-link.active{color:var(--primary);background:var(--primary-soft)}

.chevron{font-size:10px;transition:.18s}

.nav-item:hover .chevron{transform:rotate(180deg)}

.dropdown{position:absolute;top:calc(100% + 12px);left:0;width:300px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(9px);transition:.18s ease}

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}

.dropdown.wide{width:680px;display:grid;grid-template-columns:1fr 1fr;gap:6px}

.drop-link{display:flex;gap:12px;padding:12px;border-radius:12px;transition:.18s}

.drop-link:hover{background:var(--primary-soft)}

.drop-icon{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--primary);background:#F3F1FF;font-size:17px}

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span{display:block;margin-top:2px;color:var(--muted);font-size:11px;line-height:1.45}

.header-action{display:flex;align-items:center;gap:9px}

.btn-outline{color:var(--primary-dark);background:rgba(255,255,255,.75);border:1px solid #DCD9F0}

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.menu-toggle{display:none;width:45px;height:45px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--navy)}

.mobile-panel{display:none;position:fixed;inset:82px 0 0;z-index:99;padding:18px 20px 35px;background:#fff;overflow:auto}

.mobile-panel.open{display:block}

.mobile-group{border-bottom:1px solid var(--line)}

.mobile-main{width:100%;display:flex;align-items:center;justify-content:space-between;padding:15px 4px;border:0;background:none;color:var(--navy);font-weight:800;text-align:left}

.mobile-sub{display:none;padding:0 0 12px 12px}

.mobile-sub.open{display:grid}

.mobile-sub a{padding:9px 8px;color:var(--muted);font-size:14px}

.mobile-login{margin-top:20px;width:100%}

.legal-hero{padding-top:160px}

.site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:68px 0 46px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:48px}

.footer-brand p{max-width:390px;margin:19px 0 22px;font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:18px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:10px}

.footer-links a{font-size:12px;transition:.18s}

.footer-links a:hover,.footer-links a.active{color:#fff;transform:translateX(3px)}

.footer-contact{display:grid;gap:10px;margin-top:18px}

.contact-row{display:flex;gap:10px;font-size:11px}

.contact-row i{font-style:normal;color:#AFA6FF}

.newsletter{display:flex;max-width:395px;margin-top:17px;padding:5px;background:#fff;border-radius:12px}

.newsletter input{width:100%;min-width:0;padding:0 12px;border:0;outline:0;font-size:11px}

.newsletter button{width:43px;border:0;border-radius:9px;color:#fff;background:var(--primary)}

.footer-bottom{padding:19px 0;border-top:1px solid rgba(255,255,255,.09);font-size:10px}

.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}

.footer-legal{display:flex;flex-wrap:wrap;gap:15px}

@media(max-width:1060px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:grid;place-items:center}
.footer-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.brand-copy small{display:none}
.brand-logo{width:43px;height:43px}
.header-inner{min-height:74px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.legal-hero{padding-top:128px}
.footer-grid{grid-template-columns:1fr}
.footer-bottom-inner{align-items:flex-start;flex-direction:column}
}

/* Header navigation refinement — unified multipage */
    .desktop-nav{gap:10px}

.nav-link{
      position:relative;
      gap:7px;
      padding:12px 5px;
      border:0;
      border-radius:0;
      background:transparent!important;
      box-shadow:none!important;
    }

.nav-link:hover,.nav-link.active{
      color:var(--primary);
      background:transparent!important;
    }

.nav-link::after{
      content:"";
      position:absolute;
      left:5px;right:5px;bottom:4px;
      height:2px;
      background:linear-gradient(90deg,var(--primary),var(--secondary));
      border-radius:99px;
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .2s ease;
    }

.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}

.mobile-main{gap:10px}

@media(max-width:1060px){
.desktop-nav{gap:4px}
}

:root{
      --primary:#6757D9;
      --primary-dark:#342A78;
      --primary-light:#F1EFFF;
      --secondary:#00B7A8;
      --secondary-dark:#087E76;
      --accent:#FFC95C;
      --navy:#17143D;
      --text:#44445B;
      --muted:#737388;
      --line:#E8E7F1;
      --white:#FFFFFF;
      --page:#FAFAFF;
      --success:#208A69;
      --danger:#C04A67;
      --shadow:0 22px 60px rgba(31,27,82,.10);
      --shadow-sm:0 12px 30px rgba(31,27,82,.08);
      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
      --container:1180px;
    }

*{box-sizing:border-box}

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

body{
      margin:0;
      color:var(--text);
      background:var(--page);
      font-family:"Inter",Arial,sans-serif;
      line-height:1.7;
      overflow-x:hidden;
    }

body.menu-open{overflow:hidden}

img,svg{max-width:100%;display:block}

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

button,input,select,textarea{font:inherit}

button{cursor:pointer}

h1,h2,h3,h4,p{margin-top:0}

h1,h2,h3,h4{
      color:var(--navy);
      font-family:"Manrope",sans-serif;
      letter-spacing:-.025em;
    }

.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}

.section{padding:96px 0}

.section-soft{background:linear-gradient(180deg,#F8F7FF 0%,#FFFFFF 100%)}

.section-dark{color:#fff;background:var(--navy)}

.section-dark h2,.section-dark h3,.section-dark h4{color:#fff}

.section-head{max-width:760px;margin:0 auto 48px;text-align:center}

.section-head.left{margin-left:0;text-align:left}

.section-head h2{
      margin:14px 0 15px;
      font-size:clamp(31px,4vw,48px);
      line-height:1.14;
    }

.section-head p{color:var(--muted);font-size:16px}

.section-dark .section-head p{color:rgba(255,255,255,.68)}

.eyebrow{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:7px 12px;
      color:var(--primary-dark);
      background:#fff;
      border:1px solid rgba(103,87,217,.17);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.10em;
      text-transform:uppercase;
    }

.eyebrow::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:var(--secondary);
      box-shadow:0 0 0 5px rgba(0,183,168,.12);
    }

.section-dark .eyebrow{
      color:#fff;background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.12);
    }

.btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 21px;
      border:1px solid transparent;
      border-radius:13px;
      font-weight:750;
      transition:.22s ease;
    }

.btn:hover{transform:translateY(-2px)}

.btn-primary{
      color:#fff;background:var(--primary);
      box-shadow:0 12px 28px rgba(103,87,217,.28);
    }

.btn-primary:hover{background:#5747C8}

.btn-secondary{color:#fff;background:var(--secondary)}

.btn-light{color:var(--primary-dark);background:#fff}

.btn-outline{
      color:var(--primary-dark);
      background:rgba(255,255,255,.75);
      border-color:#DCD9F0;
    }

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.icon-arrow{font-size:18px;line-height:1}

.tag{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      color:var(--primary-dark);
      background:var(--primary-light);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
    }

/* Header */
    .site-header{
      position:fixed;top:0;left:0;right:0;z-index:100;
      background:rgba(255,255,255,.92);
      border-bottom:1px solid rgba(232,231,241,.86);
      backdrop-filter:blur(17px);
      transition:.25s ease;
    }

.site-header.scrolled{box-shadow:0 9px 28px rgba(31,27,82,.08)}

.header-inner{
      min-height:82px;
      display:flex;align-items:center;justify-content:space-between;gap:24px;
    }

.brand{display:inline-flex;align-items:center;gap:12px;min-width:max-content}

.brand-logo{width:49px;height:49px;filter:drop-shadow(0 10px 14px rgba(103,87,217,.20))}

.brand-copy strong{
      display:block;color:var(--navy);
      font:800 19px/1.1 "Manrope",sans-serif;
    }

.brand-copy small{
      display:block;margin-top:5px;color:var(--muted);
      font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    }

.desktop-nav{display:flex;align-items:center;gap:4px}

.nav-item{position:relative}

.nav-link{
      display:flex;align-items:center;gap:6px;
      padding:12px 13px;
      color:#48475F;
      border-radius:10px;
      font-size:13px;font-weight:700;
      transition:.18s ease;
    }

.nav-link:hover,.nav-link.active{color:var(--primary);background:var(--primary-light)}

.chevron{font-size:10px;transition:.18s}

.nav-item:hover .chevron{transform:rotate(180deg)}

.dropdown{
      position:absolute;top:calc(100% + 12px);left:0;
      width:300px;padding:10px;
      background:#fff;border:1px solid var(--line);
      border-radius:18px;box-shadow:var(--shadow);
      opacity:0;visibility:hidden;transform:translateY(9px);
      transition:.18s ease;
    }

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}

.dropdown.wide{width:680px;display:grid;grid-template-columns:1fr 1fr;gap:6px}

.drop-link{
      display:flex;gap:12px;padding:12px;
      border-radius:12px;transition:.18s;
    }

.drop-link:hover{background:var(--primary-light)}

.drop-icon{
      flex:0 0 auto;width:38px;height:38px;border-radius:11px;
      display:grid;place-items:center;
      color:var(--primary);background:#F3F1FF;font-size:17px;
    }

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span{display:block;margin-top:2px;color:var(--muted);font-size:11px;line-height:1.45}

.header-action{display:flex;align-items:center;gap:9px}

.menu-toggle{
      display:none;width:45px;height:45px;
      border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--navy);
    }

/* Mobile menu */
    .mobile-panel{
      display:none;
      position:fixed;inset:82px 0 0;z-index:99;
      padding:18px 20px 35px;
      background:#fff;overflow:auto;
    }

.mobile-panel.open{display:block}

.mobile-group{border-bottom:1px solid var(--line)}

.mobile-main{
      width:100%;display:flex;align-items:center;justify-content:space-between;
      padding:15px 4px;border:0;background:none;color:var(--navy);font-weight:800;text-align:left;
    }

.mobile-sub{display:none;padding:0 0 12px 12px}

.mobile-sub.open{display:grid}

.mobile-sub a{padding:9px 8px;color:var(--muted);font-size:14px}

.mobile-login{margin-top:20px;width:100%}

/* Hero */
    .hero{
      position:relative;overflow:hidden;
      padding:156px 0 82px;
      background:
        radial-gradient(circle at 14% 23%,rgba(0,183,168,.14),transparent 27%),
        radial-gradient(circle at 87% 20%,rgba(255,201,92,.20),transparent 24%),
        linear-gradient(135deg,#F4F1FF 0%,#FFFFFF 52%,#EDFBF9 100%);
    }

.hero::before{
      content:"";position:absolute;left:-110px;bottom:-145px;
      width:360px;height:360px;border:52px solid rgba(103,87,217,.055);border-radius:50%;
    }

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:62px;align-items:center}

.hero h1{
      margin:20px 0 19px;
      font-size:clamp(42px,5.4vw,69px);
      line-height:1.05;
    }

.gradient-text{
      background:linear-gradient(90deg,var(--primary),var(--secondary-dark));
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }

.hero-lead{max-width:690px;color:#626278;font-size:17px}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px}

.hero-proof{display:flex;flex-wrap:wrap;gap:16px;margin-top:31px}

.proof-item{display:flex;align-items:center;gap:9px;color:#5D5C72;font-size:12px;font-weight:700}

.proof-icon{
      width:28px;height:28px;display:grid;place-items:center;
      color:var(--secondary-dark);background:#E9FAF7;border-radius:9px;
    }

.hero-visual{position:relative;min-height:530px}

.visual-main{
      position:absolute;inset:18px 6px 18px 40px;
      padding:22px;
      background:rgba(255,255,255,.78);
      border:1px solid rgba(255,255,255,.95);
      border-radius:34px;box-shadow:var(--shadow);
      backdrop-filter:blur(15px);
    }

.dashboard{
      height:100%;padding:22px;
      background:linear-gradient(150deg,#282162,#17143D);
      border-radius:25px;overflow:hidden;
    }

.dash-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}

.dash-brand{display:flex;align-items:center;gap:9px;color:#fff;font-size:12px;font-weight:800}

.dash-dots{display:flex;gap:5px}

.dash-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}

.dash-hero{
      padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.62),rgba(0,183,168,.36));
      border:1px solid rgba(255,255,255,.12);border-radius:19px;
    }

.dash-label{color:#D9D4FF;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.dash-hero h3{margin:8px 0 7px;color:#fff;font-size:25px;line-height:1.2}

.dash-hero p{margin:0;color:rgba(255,255,255,.68);font-size:11px}

.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}

.dash-stat{padding:13px;background:rgba(255,255,255,.07);border-radius:13px}

.dash-stat strong{display:block;color:#fff;font-size:16px}

.dash-stat span{color:rgba(255,255,255,.55);font-size:9px}

.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}

.dash-card{padding:16px;background:#fff;border-radius:16px}

.dash-card h4{margin-bottom:10px;font-size:12px}

.progress{height:7px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.mini-list{display:grid;gap:8px}

.mini-row{display:flex;align-items:center;gap:8px}

.mini-row i{width:9px;height:9px;border-radius:3px;background:var(--secondary)}

.mini-row span{font-size:9px;color:var(--muted)}

.float-card{
      position:absolute;z-index:2;display:flex;align-items:center;gap:12px;
      padding:14px 17px;background:#fff;border:1px solid var(--line);
      border-radius:16px;box-shadow:var(--shadow-sm);
    }

.float-card.one{left:0;top:88px}

.float-card.two{right:-10px;bottom:75px}

.float-card.three{left:10px;bottom:15px}

.float-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--primary-light);color:var(--primary)}

.float-card strong{display:block;color:var(--navy);font-size:12px}

.float-card small{display:block;color:var(--muted);font-size:9px}

/* Trust strip */
    .trust-strip{position:relative;z-index:3;margin-top:-1px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.trust-inner{display:grid;grid-template-columns:1.15fr repeat(4,1fr);align-items:center;gap:20px;padding:25px 0}

.trust-copy strong{display:block;color:var(--navy);font-size:13px}

.trust-copy span{color:var(--muted);font-size:11px}

.trust-item{display:flex;align-items:center;justify-content:center;gap:9px;color:#69677D;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}

.trust-mark{width:32px;height:32px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:10px}

/* Solution cards */
    .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

.service-card{
      position:relative;overflow:hidden;
      min-height:310px;padding:28px;
      background:#fff;border:1px solid var(--line);
      border-radius:var(--radius-lg);box-shadow:0 12px 35px rgba(31,27,82,.055);
      transition:.25s ease;
    }

.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}

.service-card::after{
      content:"";position:absolute;right:-45px;bottom:-50px;width:145px;height:145px;
      border:27px solid rgba(103,87,217,.055);border-radius:50%;
    }

.card-icon{
      width:54px;height:54px;display:grid;place-items:center;
      color:var(--primary);background:var(--primary-light);
      border-radius:16px;font-size:24px;
    }

.service-card:nth-child(2n) .card-icon{color:var(--secondary-dark);background:#E9FAF7}

.service-card:nth-child(3n) .card-icon{color:#9A6C0F;background:#FFF6DE}

.service-card h3{margin:21px 0 11px;font-size:21px}

.service-card p{color:var(--muted);font-size:13px}

.card-list{display:grid;gap:8px;margin:18px 0 20px;padding:0;list-style:none}

.card-list li{display:flex;gap:9px;color:#55546A;font-size:12px}

.card-list li::before{content:"✓";color:var(--secondary-dark);font-weight:900}

.text-link{position:relative;z-index:2;color:var(--primary);font-size:12px;font-weight:800}

.text-link:hover{text-decoration:underline}

/* Split */
    .split{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}

.feature-visual{
      position:relative;min-height:520px;padding:33px;
      background:linear-gradient(145deg,#F0EDFF,#EAFBF8);
      border:1px solid #E2DFF7;border-radius:32px;
    }

.feature-screen{
      position:absolute;inset:48px 32px 34px 57px;padding:22px;
      background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow);
    }

.screen-nav{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}

.screen-title{font-size:11px;font-weight:800;color:var(--navy)}

.screen-pill{padding:5px 9px;color:var(--secondary-dark);background:#E8FAF7;border-radius:99px;font-size:8px;font-weight:800}

.chart-area{display:flex;align-items:flex-end;gap:10px;height:155px;padding:25px 10px 8px;border-bottom:1px solid var(--line)}

.bar{flex:1;min-width:15px;background:linear-gradient(180deg,var(--primary),#9488EC);border-radius:7px 7px 2px 2px}

.screen-bottom{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px}

.screen-box{padding:14px;background:#FAFAFF;border:1px solid var(--line);border-radius:13px}

.screen-box strong{display:block;color:var(--navy);font-size:19px}

.screen-box span{color:var(--muted);font-size:9px}

.feature-chip{
      position:absolute;display:flex;align-items:center;gap:9px;padding:12px 14px;
      background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);
    }

.feature-chip.one{top:21px;right:18px}

.feature-chip.two{left:12px;bottom:53px}

.feature-chip i{width:32px;height:32px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.feature-chip strong{display:block;color:var(--navy);font-size:10px}

.feature-chip span{display:block;color:var(--muted);font-size:8px}

.feature-copy h2{margin:14px 0 16px;font-size:clamp(31px,4vw,48px);line-height:1.14}

.feature-copy>p{color:var(--muted)}

.feature-points{display:grid;gap:16px;margin:27px 0 30px}

.feature-point{display:flex;gap:14px}

.point-icon{flex:0 0 auto;width:39px;height:39px;display:grid;place-items:center;color:var(--secondary-dark);background:#E9FAF7;border-radius:12px;font-weight:900}

.feature-point strong{display:block;color:var(--navy);font-size:13px}

.feature-point span{display:block;margin-top:2px;color:var(--muted);font-size:11px}

/* Innovation */
    .innovation-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:25px}

.innovation-main{
      min-height:480px;padding:34px;
      color:#fff;background:linear-gradient(145deg,var(--primary-dark),var(--primary));
      border-radius:29px;overflow:hidden;position:relative;
    }

.innovation-main h3{max-width:540px;margin:18px 0 14px;color:#fff;font-size:32px;line-height:1.17}

.innovation-main p{max-width:610px;color:rgba(255,255,255,.74)}

.innovation-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}

.innovation-tags span{padding:8px 11px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.13);border-radius:99px;font-size:10px;font-weight:800}

.ai-orbit{position:absolute;right:-35px;bottom:-72px;width:330px;height:330px;border:1px solid rgba(255,255,255,.15);border-radius:50%}

.ai-orbit::before,.ai-orbit::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%}

.ai-orbit::before{inset:45px}

.ai-orbit::after{inset:93px}

.ai-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:83px;height:83px;display:grid;place-items:center;color:var(--primary-dark);background:#fff;border-radius:24px;font:800 25px "Manrope"}

.orbit-dot{position:absolute;width:36px;height:36px;display:grid;place-items:center;color:#fff;background:var(--secondary);border-radius:12px;font-size:13px}

.orbit-dot.a{left:39px;top:57px}

.orbit-dot.b{right:18px;top:115px}

.orbit-dot.c{left:72px;bottom:27px}

.innovation-side{display:grid;gap:20px}

.example-card{padding:25px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.example-head{display:flex;align-items:center;justify-content:space-between;gap:15px}

.example-head h3{margin:0;font-size:18px}

.example-card p{margin:12px 0 15px;color:var(--muted);font-size:12px}

.example-meta{display:flex;flex-wrap:wrap;gap:7px}

.example-meta span{padding:6px 9px;color:#65637A;background:#F5F4FA;border-radius:8px;font-size:9px;font-weight:750}

/* Foundation */
    .foundation-card{
      position:relative;overflow:hidden;padding:33px;
      background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-sm);
    }

.foundation-card.education{background:linear-gradient(145deg,#FFFFFF,#F3F0FF)}

.foundation-card.umkm{background:linear-gradient(145deg,#FFFFFF,#EBFAF7)}

.foundation-card h3{margin:19px 0 11px;font-size:27px}

.foundation-card p{color:var(--muted);font-size:13px}

.foundation-programs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:24px 0}

.program-mini{padding:13px;background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:13px}

.program-mini strong{display:block;color:var(--navy);font-size:11px}

.program-mini span{display:block;margin-top:3px;color:var(--muted);font-size:9px}

/* Journey */
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.step{
      position:relative;padding:25px 22px;background:#fff;border:1px solid var(--line);border-radius:20px;
    }

.step-no{
      width:41px;height:41px;display:grid;place-items:center;
      color:#fff;background:var(--primary);border-radius:13px;font-weight:800;
    }

.step h3{margin:17px 0 8px;font-size:17px}

.step p{color:var(--muted);font-size:11px}

.step:not(:last-child)::after{
      content:"→";position:absolute;right:-17px;top:32px;z-index:3;color:#B3AEE2;font-size:22px;font-weight:900;
    }

/* Curriculum */
    .curriculum-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:30px}

.tab-btn{
      min-height:41px;padding:0 15px;border:1px solid var(--line);border-radius:11px;
      color:var(--muted);background:#fff;font-size:11px;font-weight:800;
    }

.tab-btn.active{color:#fff;background:var(--primary);border-color:var(--primary)}

.curriculum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.curriculum-item{padding:21px;background:#fff;border:1px solid var(--line);border-radius:17px}

.curriculum-item .num{color:var(--primary);font-size:10px;font-weight:900}

.curriculum-item h3{margin:8px 0 7px;font-size:15px;line-height:1.35}

.curriculum-item p{margin:0;color:var(--muted);font-size:10px}

/* App */
    .app-wrap{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr .92fr;gap:55px;align-items:center;
      padding:50px 55px;color:#fff;
      background:linear-gradient(135deg,#211A58,#6757D9);
      border-radius:34px;
    }

.app-wrap h2{margin:14px 0 14px;color:#fff;font-size:clamp(30px,4vw,47px);line-height:1.15}

.app-wrap p{color:rgba(255,255,255,.70)}

.store-row{display:flex;flex-wrap:wrap;gap:11px;margin-top:25px}

.store-badge{
      display:flex;align-items:center;gap:11px;min-width:175px;padding:10px 14px;
      color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
      border-radius:13px;
    }

.store-badge svg{width:28px;height:28px}

.store-badge small{display:block;color:rgba(255,255,255,.60);font-size:8px;text-transform:uppercase;letter-spacing:.08em}

.store-badge strong{display:block;font-size:12px}

.phone-scene{position:relative;min-height:420px}

.phone{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(5deg);
      width:230px;height:420px;padding:9px;background:#111026;border:2px solid rgba(255,255,255,.25);
      border-radius:35px;box-shadow:0 28px 55px rgba(0,0,0,.32);
    }

.phone-screen{height:100%;padding:19px 15px;background:linear-gradient(180deg,#F5F2FF,#fff);border-radius:27px;overflow:hidden}

.notch{width:76px;height:17px;margin:-11px auto 15px;background:#111026;border-radius:0 0 13px 13px}

.mobile-logo{display:flex;align-items:center;gap:7px;color:var(--navy);font-size:9px;font-weight:900}

.mobile-logo svg{width:25px}

.mobile-welcome{margin-top:18px;padding:16px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:17px}

.mobile-welcome strong{display:block;font-size:13px}

.mobile-welcome span{font-size:8px;opacity:.78}

.mobile-course-title{margin:16px 0 9px;color:var(--navy);font-size:10px;font-weight:900}

.mobile-course{display:flex;gap:9px;margin-bottom:8px;padding:9px;background:#fff;border:1px solid var(--line);border-radius:11px}

.mobile-thumb{width:42px;height:38px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:8px;font-size:12px}

.mobile-course strong{display:block;color:var(--navy);font-size:8px}

.mobile-course span{display:block;color:var(--muted);font-size:6px}

.app-float{position:absolute;padding:13px 16px;background:#fff;border-radius:15px;box-shadow:var(--shadow)}

.app-float.a{left:5%;top:21%}

.app-float.b{right:3%;bottom:15%}

.app-float strong{display:block;color:var(--navy);font-size:10px}

.app-float span{color:var(--muted);font-size:8px}

/* About */
    .about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:29px}

.about-stat{padding:20px;background:#fff;border:1px solid var(--line);border-radius:16px}

.about-stat strong{display:block;color:var(--primary);font:800 24px "Manrope"}

.about-stat span{color:var(--muted);font-size:10px}

.about-note{padding:20px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 14px 14px 0;font-size:12px}

/* FAQ */
    .faq-wrap{max-width:880px;margin:0 auto}

.faq-item{margin-bottom:11px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}

.faq-q{
      width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
      padding:19px 21px;border:0;background:#fff;color:var(--navy);font-weight:800;text-align:left;
    }

.faq-plus{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:9px}

.faq-a{display:none;padding:0 21px 20px;color:var(--muted);font-size:12px}

.faq-item.open .faq-a{display:block}

.faq-item.open .faq-plus{transform:rotate(45deg)}

/* CTA */
    .final-cta{padding:78px 0}

.cta-box{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center;
      padding:42px 48px;color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));
      border-radius:30px;
    }

.cta-box::after{content:"";position:absolute;right:-80px;top:-110px;width:270px;height:270px;border:45px solid rgba(255,255,255,.07);border-radius:50%}

.cta-box h2{margin-bottom:9px;color:#fff;font-size:clamp(28px,4vw,43px)}

.cta-box p{margin:0;color:rgba(255,255,255,.70)}

.cta-actions{position:relative;z-index:2;display:flex;gap:10px;flex-wrap:wrap}

/* Footer */
    .site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:68px 0 46px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:48px}

.footer-brand p{max-width:390px;margin:19px 0 22px;font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:18px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:10px}

.footer-links a{font-size:12px;transition:.18s}

.footer-links a:hover{color:#fff;transform:translateX(3px)}

.footer-contact{display:grid;gap:10px;margin-top:18px}

.contact-row{display:flex;gap:10px;font-size:11px}

.contact-row i{font-style:normal;color:#AFA6FF}

.newsletter{display:flex;max-width:395px;margin-top:17px;padding:5px;background:#fff;border-radius:12px}

.newsletter input{width:100%;min-width:0;padding:0 12px;border:0;outline:0;font-size:11px}

.newsletter button{width:43px;border:0;border-radius:9px;color:#fff;background:var(--primary)}

.footer-bottom{padding:19px 0;border-top:1px solid rgba(255,255,255,.09);font-size:10px}

.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}

.footer-legal{display:flex;flex-wrap:wrap;gap:15px}

/* Floating WA */
    .floating-help{
      position:fixed;right:22px;bottom:22px;z-index:90;
      display:flex;align-items:center;gap:10px;padding:11px 15px;
      color:#fff;background:#1FAF6D;border-radius:99px;
      box-shadow:0 15px 35px rgba(16,119,73,.28);font-size:11px;font-weight:800;
    }

.floating-help span:first-child{font-size:19px}

/* Utilities */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:1060px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:grid;place-items:center}
.hero-grid,.split,.innovation-grid,.app-wrap{grid-template-columns:1fr}
.hero-visual{max-width:650px;width:100%;margin:0 auto}
.cards-3{grid-template-columns:repeat(2,1fr)}
.curriculum-grid{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(2,1fr)}
.step:nth-child(2)::after{display:none}
.footer-grid{grid-template-columns:repeat(2,1fr)}
.trust-inner{grid-template-columns:repeat(2,1fr)}
.trust-copy{grid-column:1/-1;text-align:center}
}

@media(max-width:700px){
.container{width:min(100% - 28px,var(--container))}
.section{padding:69px 0}
.brand-copy small{display:none}
.brand-logo{width:43px;height:43px}
.header-inner{min-height:74px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.hero{padding:124px 0 60px}
.hero h1{font-size:43px}
.hero-lead{font-size:15px}
.hero-visual{min-height:460px}
.visual-main{inset:12px 0 28px 20px}
.float-card.one{left:-4px;top:52px}
.float-card.two{right:-4px}
.float-card.three{display:none}
.dash-stats{grid-template-columns:1fr}
.dash-stat:nth-child(n+2){display:none}
.cards-3,.cards-2,.foundation-programs,.curriculum-grid,.about-stats,.steps,.footer-grid{grid-template-columns:1fr}
.step::after{display:none!important}
.feature-visual{min-height:445px;padding:20px}
.feature-screen{inset:44px 15px 25px 37px}
.innovation-main{min-height:520px}
.app-wrap{padding:35px 22px}
.phone-scene{min-height:390px}
.app-float.a{left:-10px}
.app-float.b{right:-10px}
.trust-inner{grid-template-columns:1fr 1fr}
.trust-item{font-size:9px}
.cta-box{grid-template-columns:1fr;padding:34px 25px}
.cta-actions{align-items:stretch;flex-direction:column}
.footer-bottom-inner{align-items:flex-start;flex-direction:column}
.floating-help{right:14px;bottom:14px;padding:11px}
.floating-help span:last-child{display:none}
}

/* Online Classes */
    .course-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:20px;
    }

.course-card{
      overflow:hidden;
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:var(--shadow-sm);
      transition:.24s ease;
    }

.course-card:hover{
      transform:translateY(-5px);
      box-shadow:var(--shadow);
    }

.course-cover{
      position:relative;
      min-height:180px;
      padding:22px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      color:#fff;
      overflow:hidden;
    }

.course-cover::after{
      content:"";
      position:absolute;
      right:-35px;
      bottom:-45px;
      width:135px;
      height:135px;
      border:24px solid rgba(255,255,255,.10);
      border-radius:50%;
    }

.course-cover.one{background:linear-gradient(135deg,#3A2F87,#6757D9)}

.course-cover.two{background:linear-gradient(135deg,#087E76,#00B7A8)}

.course-cover.three{background:linear-gradient(135deg,#8A5F13,#E0A832)}

.course-cover.four{background:linear-gradient(135deg,#8B3E62,#C04A67)}

.course-label{
      position:relative;
      z-index:1;
      align-self:flex-start;
      padding:6px 9px;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.17);
      border-radius:999px;
      font-size:9px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

.course-cover h3{
      position:relative;
      z-index:1;
      margin:28px 0 0;
      color:#fff;
      font-size:20px;
      line-height:1.28;
    }

.course-body{padding:21px}

.course-meta{
      display:flex;
      flex-wrap:wrap;
      gap:7px;
      margin-bottom:13px;
    }

.course-meta span{
      padding:5px 8px;
      color:var(--muted);
      background:#F5F4FA;
      border-radius:8px;
      font-size:9px;
      font-weight:750;
    }

.course-body p{
      margin-bottom:17px;
      color:var(--muted);
      font-size:12px;
    }

.course-actions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

.course-status{
      color:var(--secondary-dark);
      font-size:10px;
      font-weight:800;
    }

.course-more{
      margin-top:31px;
      text-align:center;
    }

@media(max-width:1060px){
.course-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.course-grid{grid-template-columns:1fr}
}

/* Banking Solution page */
    .solution-hero{padding-bottom:92px}

.solution-hero .hero-grid{grid-template-columns:1fr .96fr}

.solution-kicker{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}

.solution-kicker span{padding:7px 10px;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px;font-weight:800}

.solution-board{height:100%;padding:25px;background:linear-gradient(150deg,#282162,#17143D);border-radius:25px;overflow:hidden}

.board-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:#fff;font-size:12px;font-weight:800}

.board-status{padding:5px 8px;color:#B9FFF6;background:rgba(0,183,168,.15);border-radius:99px;font-size:8px}

.board-focus{padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.72),rgba(0,183,168,.35));border:1px solid rgba(255,255,255,.12);border-radius:18px}

.board-focus small{color:#D9D4FF;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

.board-focus h3{margin:7px 0 8px;color:#fff;font-size:23px}

.board-focus p{margin:0;color:rgba(255,255,255,.67);font-size:10px}

.board-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:13px}

.board-card{padding:15px;background:#fff;border-radius:14px}

.board-card strong{display:block;color:var(--navy);font-size:11px}

.board-card span{display:block;margin-top:3px;color:var(--muted);font-size:8px}

.board-meter{height:6px;margin-top:11px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.board-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.quick-nav{position:relative;z-index:4;margin-top:-31px}

.quick-nav-inner{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden}

.quick-nav a{display:flex;align-items:center;gap:11px;padding:19px;border-right:1px solid var(--line);transition:.18s}

.quick-nav a:last-child{border-right:0}

.quick-nav a:hover{background:var(--primary-light)}

.quick-nav i{width:34px;height:34px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.quick-nav strong{display:block;color:var(--navy);font-size:11px}

.quick-nav span span{display:block;color:var(--muted);font-size:8px}

.challenge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.challenge-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:19px}

.challenge-no{color:var(--primary);font-size:10px;font-weight:900}

.challenge-card h3{margin:9px 0 8px;font-size:16px}

.challenge-card p{margin:0;color:var(--muted);font-size:11px}

.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.solution-card{position:relative;overflow:hidden;padding:27px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm);transition:.22s}

.solution-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}

.solution-card .card-icon{width:50px;height:50px;font-size:20px}

.solution-card h3{margin:18px 0 9px;font-size:19px}

.solution-card p{color:var(--muted);font-size:12px}

.solution-card ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}

.solution-card li{display:flex;gap:8px;color:#57566B;font-size:10px}

.solution-card li:before{content:'✓';color:var(--secondary-dark);font-weight:900}

.method-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}

.method-panel{padding:30px;background:linear-gradient(145deg,#241D60,#6757D9);border-radius:28px;color:#fff}

.method-panel h3{color:#fff;font-size:27px}

.method-panel p{color:rgba(255,255,255,.68);font-size:12px}

.method-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}

.method-stat{padding:15px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.11);border-radius:14px}

.method-stat strong{display:block;color:#fff;font-size:13px}

.method-stat span{font-size:8px;color:rgba(255,255,255,.58)}

.process-list{display:grid;gap:13px}

.process-item{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:17px;background:#fff;border:1px solid var(--line);border-radius:17px}

.process-number{width:42px;height:42px;display:grid;place-items:center;color:#fff;background:var(--primary);border-radius:12px;font-weight:900}

.process-item h3{margin:0 0 4px;font-size:15px}

.process-item p{margin:0;color:var(--muted);font-size:10px}

.deliverable-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}

.deliverable{padding:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.11);border-radius:18px}

.deliverable i{display:grid;place-items:center;width:39px;height:39px;font-style:normal;background:rgba(255,255,255,.1);border-radius:11px}

.deliverable h3{margin:15px 0 7px;font-size:16px}

.deliverable p{margin:0;color:rgba(255,255,255,.63);font-size:10px}

.principle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.principle{padding:21px;background:#fff;border:1px solid var(--line);border-radius:18px}

.principle strong{display:block;color:var(--navy);font-size:13px}

.principle p{margin:7px 0 0;color:var(--muted);font-size:10px}

.notice-box{margin-top:24px;padding:20px 22px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 15px 15px 0;font-size:11px}

@media(max-width:1060px){
.quick-nav-inner,.challenge-grid,.principle-grid{grid-template-columns:repeat(2,1fr)}
.solution-grid,.deliverable-grid{grid-template-columns:repeat(2,1fr)}
.method-wrap{grid-template-columns:1fr}
}

@media(max-width:700px){
.quick-nav{margin-top:-18px}
.quick-nav-inner,.challenge-grid,.solution-grid,.deliverable-grid,.principle-grid{grid-template-columns:1fr}
.quick-nav a{border-right:0;border-bottom:1px solid var(--line)}
.quick-nav a:last-child{border-bottom:0}
.solution-hero .hero-grid{grid-template-columns:1fr}
}

/* Banking Talent Solution page */
    .talent-hero .hero-grid{grid-template-columns:1.02fr .98fr}

.talent-board{height:100%;padding:24px;background:linear-gradient(150deg,#282162,#17143D);border-radius:25px;overflow:hidden}

.talent-board-head{display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:12px;font-weight:800;margin-bottom:17px}

.talent-board-head span{padding:5px 8px;color:#C9FFF8;background:rgba(0,183,168,.16);border-radius:999px;font-size:8px}

.talent-profile{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center;padding:17px;background:linear-gradient(135deg,rgba(103,87,217,.7),rgba(0,183,168,.32));border:1px solid rgba(255,255,255,.12);border-radius:18px}

.talent-avatar{width:54px;height:54px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.15);border-radius:17px;font-size:23px}

.talent-profile h3{margin:0;color:#fff;font-size:17px}

.talent-profile p{margin:3px 0 0;color:rgba(255,255,255,.65);font-size:9px}

.competency-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}

.competency-card{padding:14px;background:#fff;border-radius:14px}

.competency-card strong{display:flex;justify-content:space-between;color:var(--navy);font-size:10px}

.competency-card strong em{font-style:normal;color:var(--primary)}

.competency-card small{display:block;margin-top:3px;color:var(--muted);font-size:8px}

.talent-path{display:flex;align-items:center;gap:7px;margin-top:12px;padding:13px;background:rgba(255,255,255,.08);border-radius:14px}

.talent-path i{width:29px;height:29px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.11);border-radius:9px;font-style:normal}

.talent-path span{color:rgba(255,255,255,.67);font-size:8px}

.talent-path strong{display:block;color:#fff;font-size:10px}

.audience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.audience-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:19px}

.audience-card i{width:40px;height:40px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:12px}

.audience-card h3{margin:15px 0 7px;font-size:16px}

.audience-card p{margin:0;color:var(--muted);font-size:10px}

.framework-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}

.framework-item{position:relative;padding:21px 17px;background:#fff;border:1px solid var(--line);border-radius:18px}

.framework-item:not(:last-child):after{content:'→';position:absolute;right:-12px;top:26px;z-index:3;color:#B5AFE5;font-weight:900}

.framework-item b{display:grid;place-items:center;width:36px;height:36px;color:#fff;background:var(--primary);border-radius:11px}

.framework-item h3{margin:14px 0 6px;font-size:14px}

.framework-item p{margin:0;color:var(--muted);font-size:9px}

.matrix-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:45px;align-items:center}

.matrix-card{padding:27px;background:linear-gradient(145deg,#231C5E,#6757D9);border-radius:27px;color:#fff}

.matrix-card h3{color:#fff;font-size:26px}

.matrix-card p{color:rgba(255,255,255,.67);font-size:11px}

.matrix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:19px}

.matrix-cell{min-height:76px;padding:11px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.11);border-radius:12px}

.matrix-cell strong{display:block;color:#fff;font-size:9px}

.matrix-cell span{display:block;margin-top:4px;color:rgba(255,255,255,.55);font-size:7px}

.matrix-cell.highlight{background:rgba(0,183,168,.27);border-color:rgba(163,255,242,.25)}

.benefit-list{display:grid;gap:14px}

.benefit-item{display:flex;gap:14px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:17px}

.benefit-item i{flex:0 0 auto;width:39px;height:39px;display:grid;place-items:center;font-style:normal;color:var(--secondary-dark);background:#E9FAF7;border-radius:11px}

.benefit-item h3{margin:0 0 4px;font-size:14px}

.benefit-item p{margin:0;color:var(--muted);font-size:10px}

.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.package-card{padding:27px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.package-card.featured{color:#fff;background:linear-gradient(145deg,var(--primary-dark),var(--primary));border:0}

.package-card.featured h3,.package-card.featured strong{color:#fff}

.package-card h3{margin:18px 0 8px;font-size:20px}

.package-card p{color:var(--muted);font-size:11px}

.package-card.featured p,.package-card.featured li{color:rgba(255,255,255,.7)}

.package-card ul{display:grid;gap:8px;padding:0;margin:18px 0 0;list-style:none}

.package-card li{display:flex;gap:8px;color:#55546A;font-size:10px}

.package-card li:before{content:'✓';color:var(--secondary);font-weight:900}

@media(max-width:1060px){
.audience-grid{grid-template-columns:repeat(2,1fr)}
.framework-grid{grid-template-columns:repeat(3,1fr)}
.framework-item:after{display:none}
.matrix-wrap{grid-template-columns:1fr}
.package-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.talent-hero .hero-grid{grid-template-columns:1fr}
.audience-grid,.framework-grid,.package-grid{grid-template-columns:1fr}
.competency-grid{grid-template-columns:1fr}
}

/* Header navigation refinement — unified multipage */
    .desktop-nav{gap:10px}

.nav-link{
      position:relative;
      gap:7px;
      padding:12px 5px;
      border:0;
      border-radius:0;
      background:transparent!important;
      box-shadow:none!important;
    }

.nav-link:hover,.nav-link.active{
      color:var(--primary);
      background:transparent!important;
    }

.nav-link::after{
      content:"";
      position:absolute;
      left:5px;right:5px;bottom:4px;
      height:2px;
      background:linear-gradient(90deg,var(--primary),var(--secondary));
      border-radius:99px;
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .2s ease;
    }

.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}

.mobile-main{gap:10px}

@media(max-width:1060px){
.desktop-nav{gap:4px}
}

:root{
      --primary:#6757D9;
      --primary-dark:#342A78;
      --primary-light:#F1EFFF;
      --secondary:#00B7A8;
      --secondary-dark:#087E76;
      --accent:#FFC95C;
      --navy:#17143D;
      --text:#44445B;
      --muted:#737388;
      --line:#E8E7F1;
      --white:#FFFFFF;
      --page:#FAFAFF;
      --success:#208A69;
      --danger:#C04A67;
      --shadow:0 22px 60px rgba(31,27,82,.10);
      --shadow-sm:0 12px 30px rgba(31,27,82,.08);
      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
      --container:1180px;
    }

*{box-sizing:border-box}

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

body{
      margin:0;
      color:var(--text);
      background:var(--page);
      font-family:"Inter",Arial,sans-serif;
      line-height:1.7;
      overflow-x:hidden;
    }

body.menu-open{overflow:hidden}

img,svg{max-width:100%;display:block}

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

button,input,select,textarea{font:inherit}

button{cursor:pointer}

h1,h2,h3,h4,p{margin-top:0}

h1,h2,h3,h4{
      color:var(--navy);
      font-family:"Manrope",sans-serif;
      letter-spacing:-.025em;
    }

.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}

.section{padding:96px 0}

.section-soft{background:linear-gradient(180deg,#F8F7FF 0%,#FFFFFF 100%)}

.section-dark{color:#fff;background:var(--navy)}

.section-dark h2,.section-dark h3,.section-dark h4{color:#fff}

.section-head{max-width:760px;margin:0 auto 48px;text-align:center}

.section-head.left{margin-left:0;text-align:left}

.section-head h2{
      margin:14px 0 15px;
      font-size:clamp(31px,4vw,48px);
      line-height:1.14;
    }

.section-head p{color:var(--muted);font-size:16px}

.section-dark .section-head p{color:rgba(255,255,255,.68)}

.eyebrow{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:7px 12px;
      color:var(--primary-dark);
      background:#fff;
      border:1px solid rgba(103,87,217,.17);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.10em;
      text-transform:uppercase;
    }

.eyebrow::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:var(--secondary);
      box-shadow:0 0 0 5px rgba(0,183,168,.12);
    }

.section-dark .eyebrow{
      color:#fff;background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.12);
    }

.btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 21px;
      border:1px solid transparent;
      border-radius:13px;
      font-weight:750;
      transition:.22s ease;
    }

.btn:hover{transform:translateY(-2px)}

.btn-primary{
      color:#fff;background:var(--primary);
      box-shadow:0 12px 28px rgba(103,87,217,.28);
    }

.btn-primary:hover{background:#5747C8}

.btn-secondary{color:#fff;background:var(--secondary)}

.btn-light{color:var(--primary-dark);background:#fff}

.btn-outline{
      color:var(--primary-dark);
      background:rgba(255,255,255,.75);
      border-color:#DCD9F0;
    }

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.icon-arrow{font-size:18px;line-height:1}

.tag{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      color:var(--primary-dark);
      background:var(--primary-light);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
    }

/* Header */
    .site-header{
      position:fixed;top:0;left:0;right:0;z-index:100;
      background:rgba(255,255,255,.92);
      border-bottom:1px solid rgba(232,231,241,.86);
      backdrop-filter:blur(17px);
      transition:.25s ease;
    }

.site-header.scrolled{box-shadow:0 9px 28px rgba(31,27,82,.08)}

.header-inner{
      min-height:82px;
      display:flex;align-items:center;justify-content:space-between;gap:24px;
    }

.brand{display:inline-flex;align-items:center;gap:12px;min-width:max-content}

.brand-logo{width:49px;height:49px;filter:drop-shadow(0 10px 14px rgba(103,87,217,.20))}

.brand-copy strong{
      display:block;color:var(--navy);
      font:800 19px/1.1 "Manrope",sans-serif;
    }

.brand-copy small{
      display:block;margin-top:5px;color:var(--muted);
      font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    }

.desktop-nav{display:flex;align-items:center;gap:4px}

.nav-item{position:relative}

.nav-link{
      display:flex;align-items:center;gap:6px;
      padding:12px 13px;
      color:#48475F;
      border-radius:10px;
      font-size:13px;font-weight:700;
      transition:.18s ease;
    }

.nav-link:hover,.nav-link.active{color:var(--primary);background:var(--primary-light)}

.chevron{font-size:10px;transition:.18s}

.nav-item:hover .chevron{transform:rotate(180deg)}

.dropdown{
      position:absolute;top:calc(100% + 12px);left:0;
      width:300px;padding:10px;
      background:#fff;border:1px solid var(--line);
      border-radius:18px;box-shadow:var(--shadow);
      opacity:0;visibility:hidden;transform:translateY(9px);
      transition:.18s ease;
    }

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}

.dropdown.wide{width:680px;display:grid;grid-template-columns:1fr 1fr;gap:6px}

.drop-link{
      display:flex;gap:12px;padding:12px;
      border-radius:12px;transition:.18s;
    }

.drop-link:hover{background:var(--primary-light)}

.drop-icon{
      flex:0 0 auto;width:38px;height:38px;border-radius:11px;
      display:grid;place-items:center;
      color:var(--primary);background:#F3F1FF;font-size:17px;
    }

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span{display:block;margin-top:2px;color:var(--muted);font-size:11px;line-height:1.45}

.header-action{display:flex;align-items:center;gap:9px}

.menu-toggle{
      display:none;width:45px;height:45px;
      border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--navy);
    }

/* Mobile menu */
    .mobile-panel{
      display:none;
      position:fixed;inset:82px 0 0;z-index:99;
      padding:18px 20px 35px;
      background:#fff;overflow:auto;
    }

.mobile-panel.open{display:block}

.mobile-group{border-bottom:1px solid var(--line)}

.mobile-main{
      width:100%;display:flex;align-items:center;justify-content:space-between;
      padding:15px 4px;border:0;background:none;color:var(--navy);font-weight:800;text-align:left;
    }

.mobile-sub{display:none;padding:0 0 12px 12px}

.mobile-sub.open{display:grid}

.mobile-sub a{padding:9px 8px;color:var(--muted);font-size:14px}

.mobile-login{margin-top:20px;width:100%}

/* Hero */
    .hero{
      position:relative;overflow:hidden;
      padding:156px 0 82px;
      background:
        radial-gradient(circle at 14% 23%,rgba(0,183,168,.14),transparent 27%),
        radial-gradient(circle at 87% 20%,rgba(255,201,92,.20),transparent 24%),
        linear-gradient(135deg,#F4F1FF 0%,#FFFFFF 52%,#EDFBF9 100%);
    }

.hero::before{
      content:"";position:absolute;left:-110px;bottom:-145px;
      width:360px;height:360px;border:52px solid rgba(103,87,217,.055);border-radius:50%;
    }

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:62px;align-items:center}

.hero h1{
      margin:20px 0 19px;
      font-size:clamp(42px,5.4vw,69px);
      line-height:1.05;
    }

.gradient-text{
      background:linear-gradient(90deg,var(--primary),var(--secondary-dark));
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }

.hero-lead{max-width:690px;color:#626278;font-size:17px}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px}

.hero-proof{display:flex;flex-wrap:wrap;gap:16px;margin-top:31px}

.proof-item{display:flex;align-items:center;gap:9px;color:#5D5C72;font-size:12px;font-weight:700}

.proof-icon{
      width:28px;height:28px;display:grid;place-items:center;
      color:var(--secondary-dark);background:#E9FAF7;border-radius:9px;
    }

.hero-visual{position:relative;min-height:530px}

.visual-main{
      position:absolute;inset:18px 6px 18px 40px;
      padding:22px;
      background:rgba(255,255,255,.78);
      border:1px solid rgba(255,255,255,.95);
      border-radius:34px;box-shadow:var(--shadow);
      backdrop-filter:blur(15px);
    }

.dashboard{
      height:100%;padding:22px;
      background:linear-gradient(150deg,#282162,#17143D);
      border-radius:25px;overflow:hidden;
    }

.dash-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}

.dash-brand{display:flex;align-items:center;gap:9px;color:#fff;font-size:12px;font-weight:800}

.dash-dots{display:flex;gap:5px}

.dash-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}

.dash-hero{
      padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.62),rgba(0,183,168,.36));
      border:1px solid rgba(255,255,255,.12);border-radius:19px;
    }

.dash-label{color:#D9D4FF;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.dash-hero h3{margin:8px 0 7px;color:#fff;font-size:25px;line-height:1.2}

.dash-hero p{margin:0;color:rgba(255,255,255,.68);font-size:11px}

.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}

.dash-stat{padding:13px;background:rgba(255,255,255,.07);border-radius:13px}

.dash-stat strong{display:block;color:#fff;font-size:16px}

.dash-stat span{color:rgba(255,255,255,.55);font-size:9px}

.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}

.dash-card{padding:16px;background:#fff;border-radius:16px}

.dash-card h4{margin-bottom:10px;font-size:12px}

.progress{height:7px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.mini-list{display:grid;gap:8px}

.mini-row{display:flex;align-items:center;gap:8px}

.mini-row i{width:9px;height:9px;border-radius:3px;background:var(--secondary)}

.mini-row span{font-size:9px;color:var(--muted)}

.float-card{
      position:absolute;z-index:2;display:flex;align-items:center;gap:12px;
      padding:14px 17px;background:#fff;border:1px solid var(--line);
      border-radius:16px;box-shadow:var(--shadow-sm);
    }

.float-card.one{left:0;top:88px}

.float-card.two{right:-10px;bottom:75px}

.float-card.three{left:10px;bottom:15px}

.float-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--primary-light);color:var(--primary)}

.float-card strong{display:block;color:var(--navy);font-size:12px}

.float-card small{display:block;color:var(--muted);font-size:9px}

/* Trust strip */
    .trust-strip{position:relative;z-index:3;margin-top:-1px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.trust-inner{display:grid;grid-template-columns:1.15fr repeat(4,1fr);align-items:center;gap:20px;padding:25px 0}

.trust-copy strong{display:block;color:var(--navy);font-size:13px}

.trust-copy span{color:var(--muted);font-size:11px}

.trust-item{display:flex;align-items:center;justify-content:center;gap:9px;color:#69677D;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}

.trust-mark{width:32px;height:32px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:10px}

/* Solution cards */
    .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

.service-card{
      position:relative;overflow:hidden;
      min-height:310px;padding:28px;
      background:#fff;border:1px solid var(--line);
      border-radius:var(--radius-lg);box-shadow:0 12px 35px rgba(31,27,82,.055);
      transition:.25s ease;
    }

.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}

.service-card::after{
      content:"";position:absolute;right:-45px;bottom:-50px;width:145px;height:145px;
      border:27px solid rgba(103,87,217,.055);border-radius:50%;
    }

.card-icon{
      width:54px;height:54px;display:grid;place-items:center;
      color:var(--primary);background:var(--primary-light);
      border-radius:16px;font-size:24px;
    }

.service-card:nth-child(2n) .card-icon{color:var(--secondary-dark);background:#E9FAF7}

.service-card:nth-child(3n) .card-icon{color:#9A6C0F;background:#FFF6DE}

.service-card h3{margin:21px 0 11px;font-size:21px}

.service-card p{color:var(--muted);font-size:13px}

.card-list{display:grid;gap:8px;margin:18px 0 20px;padding:0;list-style:none}

.card-list li{display:flex;gap:9px;color:#55546A;font-size:12px}

.card-list li::before{content:"✓";color:var(--secondary-dark);font-weight:900}

.text-link{position:relative;z-index:2;color:var(--primary);font-size:12px;font-weight:800}

.text-link:hover{text-decoration:underline}

/* Split */
    .split{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}

.feature-visual{
      position:relative;min-height:520px;padding:33px;
      background:linear-gradient(145deg,#F0EDFF,#EAFBF8);
      border:1px solid #E2DFF7;border-radius:32px;
    }

.feature-screen{
      position:absolute;inset:48px 32px 34px 57px;padding:22px;
      background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow);
    }

.screen-nav{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}

.screen-title{font-size:11px;font-weight:800;color:var(--navy)}

.screen-pill{padding:5px 9px;color:var(--secondary-dark);background:#E8FAF7;border-radius:99px;font-size:8px;font-weight:800}

.chart-area{display:flex;align-items:flex-end;gap:10px;height:155px;padding:25px 10px 8px;border-bottom:1px solid var(--line)}

.bar{flex:1;min-width:15px;background:linear-gradient(180deg,var(--primary),#9488EC);border-radius:7px 7px 2px 2px}

.screen-bottom{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px}

.screen-box{padding:14px;background:#FAFAFF;border:1px solid var(--line);border-radius:13px}

.screen-box strong{display:block;color:var(--navy);font-size:19px}

.screen-box span{color:var(--muted);font-size:9px}

.feature-chip{
      position:absolute;display:flex;align-items:center;gap:9px;padding:12px 14px;
      background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);
    }

.feature-chip.one{top:21px;right:18px}

.feature-chip.two{left:12px;bottom:53px}

.feature-chip i{width:32px;height:32px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.feature-chip strong{display:block;color:var(--navy);font-size:10px}

.feature-chip span{display:block;color:var(--muted);font-size:8px}

.feature-copy h2{margin:14px 0 16px;font-size:clamp(31px,4vw,48px);line-height:1.14}

.feature-copy>p{color:var(--muted)}

.feature-points{display:grid;gap:16px;margin:27px 0 30px}

.feature-point{display:flex;gap:14px}

.point-icon{flex:0 0 auto;width:39px;height:39px;display:grid;place-items:center;color:var(--secondary-dark);background:#E9FAF7;border-radius:12px;font-weight:900}

.feature-point strong{display:block;color:var(--navy);font-size:13px}

.feature-point span{display:block;margin-top:2px;color:var(--muted);font-size:11px}

/* Innovation */
    .innovation-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:25px}

.innovation-main{
      min-height:480px;padding:34px;
      color:#fff;background:linear-gradient(145deg,var(--primary-dark),var(--primary));
      border-radius:29px;overflow:hidden;position:relative;
    }

.innovation-main h3{max-width:540px;margin:18px 0 14px;color:#fff;font-size:32px;line-height:1.17}

.innovation-main p{max-width:610px;color:rgba(255,255,255,.74)}

.innovation-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}

.innovation-tags span{padding:8px 11px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.13);border-radius:99px;font-size:10px;font-weight:800}

.ai-orbit{position:absolute;right:-35px;bottom:-72px;width:330px;height:330px;border:1px solid rgba(255,255,255,.15);border-radius:50%}

.ai-orbit::before,.ai-orbit::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%}

.ai-orbit::before{inset:45px}

.ai-orbit::after{inset:93px}

.ai-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:83px;height:83px;display:grid;place-items:center;color:var(--primary-dark);background:#fff;border-radius:24px;font:800 25px "Manrope"}

.orbit-dot{position:absolute;width:36px;height:36px;display:grid;place-items:center;color:#fff;background:var(--secondary);border-radius:12px;font-size:13px}

.orbit-dot.a{left:39px;top:57px}

.orbit-dot.b{right:18px;top:115px}

.orbit-dot.c{left:72px;bottom:27px}

.innovation-side{display:grid;gap:20px}

.example-card{padding:25px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.example-head{display:flex;align-items:center;justify-content:space-between;gap:15px}

.example-head h3{margin:0;font-size:18px}

.example-card p{margin:12px 0 15px;color:var(--muted);font-size:12px}

.example-meta{display:flex;flex-wrap:wrap;gap:7px}

.example-meta span{padding:6px 9px;color:#65637A;background:#F5F4FA;border-radius:8px;font-size:9px;font-weight:750}

/* Foundation */
    .foundation-card{
      position:relative;overflow:hidden;padding:33px;
      background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-sm);
    }

.foundation-card.education{background:linear-gradient(145deg,#FFFFFF,#F3F0FF)}

.foundation-card.umkm{background:linear-gradient(145deg,#FFFFFF,#EBFAF7)}

.foundation-card h3{margin:19px 0 11px;font-size:27px}

.foundation-card p{color:var(--muted);font-size:13px}

.foundation-programs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:24px 0}

.program-mini{padding:13px;background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:13px}

.program-mini strong{display:block;color:var(--navy);font-size:11px}

.program-mini span{display:block;margin-top:3px;color:var(--muted);font-size:9px}

/* Journey */
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.step{
      position:relative;padding:25px 22px;background:#fff;border:1px solid var(--line);border-radius:20px;
    }

.step-no{
      width:41px;height:41px;display:grid;place-items:center;
      color:#fff;background:var(--primary);border-radius:13px;font-weight:800;
    }

.step h3{margin:17px 0 8px;font-size:17px}

.step p{color:var(--muted);font-size:11px}

.step:not(:last-child)::after{
      content:"→";position:absolute;right:-17px;top:32px;z-index:3;color:#B3AEE2;font-size:22px;font-weight:900;
    }

/* Curriculum */
    .curriculum-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:30px}

.tab-btn{
      min-height:41px;padding:0 15px;border:1px solid var(--line);border-radius:11px;
      color:var(--muted);background:#fff;font-size:11px;font-weight:800;
    }

.tab-btn.active{color:#fff;background:var(--primary);border-color:var(--primary)}

.curriculum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.curriculum-item{padding:21px;background:#fff;border:1px solid var(--line);border-radius:17px}

.curriculum-item .num{color:var(--primary);font-size:10px;font-weight:900}

.curriculum-item h3{margin:8px 0 7px;font-size:15px;line-height:1.35}

.curriculum-item p{margin:0;color:var(--muted);font-size:10px}

/* App */
    .app-wrap{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr .92fr;gap:55px;align-items:center;
      padding:50px 55px;color:#fff;
      background:linear-gradient(135deg,#211A58,#6757D9);
      border-radius:34px;
    }

.app-wrap h2{margin:14px 0 14px;color:#fff;font-size:clamp(30px,4vw,47px);line-height:1.15}

.app-wrap p{color:rgba(255,255,255,.70)}

.store-row{display:flex;flex-wrap:wrap;gap:11px;margin-top:25px}

.store-badge{
      display:flex;align-items:center;gap:11px;min-width:175px;padding:10px 14px;
      color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
      border-radius:13px;
    }

.store-badge svg{width:28px;height:28px}

.store-badge small{display:block;color:rgba(255,255,255,.60);font-size:8px;text-transform:uppercase;letter-spacing:.08em}

.store-badge strong{display:block;font-size:12px}

.phone-scene{position:relative;min-height:420px}

.phone{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(5deg);
      width:230px;height:420px;padding:9px;background:#111026;border:2px solid rgba(255,255,255,.25);
      border-radius:35px;box-shadow:0 28px 55px rgba(0,0,0,.32);
    }

.phone-screen{height:100%;padding:19px 15px;background:linear-gradient(180deg,#F5F2FF,#fff);border-radius:27px;overflow:hidden}

.notch{width:76px;height:17px;margin:-11px auto 15px;background:#111026;border-radius:0 0 13px 13px}

.mobile-logo{display:flex;align-items:center;gap:7px;color:var(--navy);font-size:9px;font-weight:900}

.mobile-logo svg{width:25px}

.mobile-welcome{margin-top:18px;padding:16px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:17px}

.mobile-welcome strong{display:block;font-size:13px}

.mobile-welcome span{font-size:8px;opacity:.78}

.mobile-course-title{margin:16px 0 9px;color:var(--navy);font-size:10px;font-weight:900}

.mobile-course{display:flex;gap:9px;margin-bottom:8px;padding:9px;background:#fff;border:1px solid var(--line);border-radius:11px}

.mobile-thumb{width:42px;height:38px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:8px;font-size:12px}

.mobile-course strong{display:block;color:var(--navy);font-size:8px}

.mobile-course span{display:block;color:var(--muted);font-size:6px}

.app-float{position:absolute;padding:13px 16px;background:#fff;border-radius:15px;box-shadow:var(--shadow)}

.app-float.a{left:5%;top:21%}

.app-float.b{right:3%;bottom:15%}

.app-float strong{display:block;color:var(--navy);font-size:10px}

.app-float span{color:var(--muted);font-size:8px}

/* About */
    .about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:29px}

.about-stat{padding:20px;background:#fff;border:1px solid var(--line);border-radius:16px}

.about-stat strong{display:block;color:var(--primary);font:800 24px "Manrope"}

.about-stat span{color:var(--muted);font-size:10px}

.about-note{padding:20px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 14px 14px 0;font-size:12px}

/* FAQ */
    .faq-wrap{max-width:880px;margin:0 auto}

.faq-item{margin-bottom:11px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}

.faq-q{
      width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
      padding:19px 21px;border:0;background:#fff;color:var(--navy);font-weight:800;text-align:left;
    }

.faq-plus{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:9px}

.faq-a{display:none;padding:0 21px 20px;color:var(--muted);font-size:12px}

.faq-item.open .faq-a{display:block}

.faq-item.open .faq-plus{transform:rotate(45deg)}

/* CTA */
    .final-cta{padding:78px 0}

.cta-box{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center;
      padding:42px 48px;color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));
      border-radius:30px;
    }

.cta-box::after{content:"";position:absolute;right:-80px;top:-110px;width:270px;height:270px;border:45px solid rgba(255,255,255,.07);border-radius:50%}

.cta-box h2{margin-bottom:9px;color:#fff;font-size:clamp(28px,4vw,43px)}

.cta-box p{margin:0;color:rgba(255,255,255,.70)}

.cta-actions{position:relative;z-index:2;display:flex;gap:10px;flex-wrap:wrap}

/* Footer */
    .site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:68px 0 46px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:48px}

.footer-brand p{max-width:390px;margin:19px 0 22px;font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:18px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:10px}

.footer-links a{font-size:12px;transition:.18s}

.footer-links a:hover{color:#fff;transform:translateX(3px)}

.footer-contact{display:grid;gap:10px;margin-top:18px}

.contact-row{display:flex;gap:10px;font-size:11px}

.contact-row i{font-style:normal;color:#AFA6FF}

.newsletter{display:flex;max-width:395px;margin-top:17px;padding:5px;background:#fff;border-radius:12px}

.newsletter input{width:100%;min-width:0;padding:0 12px;border:0;outline:0;font-size:11px}

.newsletter button{width:43px;border:0;border-radius:9px;color:#fff;background:var(--primary)}

.footer-bottom{padding:19px 0;border-top:1px solid rgba(255,255,255,.09);font-size:10px}

.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}

.footer-legal{display:flex;flex-wrap:wrap;gap:15px}

/* Floating WA */
    .floating-help{
      position:fixed;right:22px;bottom:22px;z-index:90;
      display:flex;align-items:center;gap:10px;padding:11px 15px;
      color:#fff;background:#1FAF6D;border-radius:99px;
      box-shadow:0 15px 35px rgba(16,119,73,.28);font-size:11px;font-weight:800;
    }

.floating-help span:first-child{font-size:19px}

/* Utilities */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:1060px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:grid;place-items:center}
.hero-grid,.split,.innovation-grid,.app-wrap{grid-template-columns:1fr}
.hero-visual{max-width:650px;width:100%;margin:0 auto}
.cards-3{grid-template-columns:repeat(2,1fr)}
.curriculum-grid{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(2,1fr)}
.step:nth-child(2)::after{display:none}
.footer-grid{grid-template-columns:repeat(2,1fr)}
.trust-inner{grid-template-columns:repeat(2,1fr)}
.trust-copy{grid-column:1/-1;text-align:center}
}

@media(max-width:700px){
.container{width:min(100% - 28px,var(--container))}
.section{padding:69px 0}
.brand-copy small{display:none}
.brand-logo{width:43px;height:43px}
.header-inner{min-height:74px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.hero{padding:124px 0 60px}
.hero h1{font-size:43px}
.hero-lead{font-size:15px}
.hero-visual{min-height:460px}
.visual-main{inset:12px 0 28px 20px}
.float-card.one{left:-4px;top:52px}
.float-card.two{right:-4px}
.float-card.three{display:none}
.dash-stats{grid-template-columns:1fr}
.dash-stat:nth-child(n+2){display:none}
.cards-3,.cards-2,.foundation-programs,.curriculum-grid,.about-stats,.steps,.footer-grid{grid-template-columns:1fr}
.step::after{display:none!important}
.feature-visual{min-height:445px;padding:20px}
.feature-screen{inset:44px 15px 25px 37px}
.innovation-main{min-height:520px}
.app-wrap{padding:35px 22px}
.phone-scene{min-height:390px}
.app-float.a{left:-10px}
.app-float.b{right:-10px}
.trust-inner{grid-template-columns:1fr 1fr}
.trust-item{font-size:9px}
.cta-box{grid-template-columns:1fr;padding:34px 25px}
.cta-actions{align-items:stretch;flex-direction:column}
.footer-bottom-inner{align-items:flex-start;flex-direction:column}
.floating-help{right:14px;bottom:14px;padding:11px}
.floating-help span:last-child{display:none}
}

/* Online Classes */
    .course-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:20px;
    }

.course-card{
      overflow:hidden;
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:var(--shadow-sm);
      transition:.24s ease;
    }

.course-card:hover{
      transform:translateY(-5px);
      box-shadow:var(--shadow);
    }

.course-cover{
      position:relative;
      min-height:180px;
      padding:22px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      color:#fff;
      overflow:hidden;
    }

.course-cover::after{
      content:"";
      position:absolute;
      right:-35px;
      bottom:-45px;
      width:135px;
      height:135px;
      border:24px solid rgba(255,255,255,.10);
      border-radius:50%;
    }

.course-cover.one{background:linear-gradient(135deg,#3A2F87,#6757D9)}

.course-cover.two{background:linear-gradient(135deg,#087E76,#00B7A8)}

.course-cover.three{background:linear-gradient(135deg,#8A5F13,#E0A832)}

.course-cover.four{background:linear-gradient(135deg,#8B3E62,#C04A67)}

.course-label{
      position:relative;
      z-index:1;
      align-self:flex-start;
      padding:6px 9px;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.17);
      border-radius:999px;
      font-size:9px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

.course-cover h3{
      position:relative;
      z-index:1;
      margin:28px 0 0;
      color:#fff;
      font-size:20px;
      line-height:1.28;
    }

.course-body{padding:21px}

.course-meta{
      display:flex;
      flex-wrap:wrap;
      gap:7px;
      margin-bottom:13px;
    }

.course-meta span{
      padding:5px 8px;
      color:var(--muted);
      background:#F5F4FA;
      border-radius:8px;
      font-size:9px;
      font-weight:750;
    }

.course-body p{
      margin-bottom:17px;
      color:var(--muted);
      font-size:12px;
    }

.course-actions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

.course-status{
      color:var(--secondary-dark);
      font-size:10px;
      font-weight:800;
    }

.course-more{
      margin-top:31px;
      text-align:center;
    }

@media(max-width:1060px){
.course-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.course-grid{grid-template-columns:1fr}
}

/* Banking Solution page */
    .solution-hero{padding-bottom:92px}

.solution-hero .hero-grid{grid-template-columns:1fr .96fr}

.solution-kicker{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}

.solution-kicker span{padding:7px 10px;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px;font-weight:800}

.solution-board{height:100%;padding:25px;background:linear-gradient(150deg,#282162,#17143D);border-radius:25px;overflow:hidden}

.board-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:#fff;font-size:12px;font-weight:800}

.board-status{padding:5px 8px;color:#B9FFF6;background:rgba(0,183,168,.15);border-radius:99px;font-size:8px}

.board-focus{padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.72),rgba(0,183,168,.35));border:1px solid rgba(255,255,255,.12);border-radius:18px}

.board-focus small{color:#D9D4FF;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

.board-focus h3{margin:7px 0 8px;color:#fff;font-size:23px}

.board-focus p{margin:0;color:rgba(255,255,255,.67);font-size:10px}

.board-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:13px}

.board-card{padding:15px;background:#fff;border-radius:14px}

.board-card strong{display:block;color:var(--navy);font-size:11px}

.board-card span{display:block;margin-top:3px;color:var(--muted);font-size:8px}

.board-meter{height:6px;margin-top:11px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.board-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.quick-nav{position:relative;z-index:4;margin-top:-31px}

.quick-nav-inner{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden}

.quick-nav a{display:flex;align-items:center;gap:11px;padding:19px;border-right:1px solid var(--line);transition:.18s}

.quick-nav a:last-child{border-right:0}

.quick-nav a:hover{background:var(--primary-light)}

.quick-nav i{width:34px;height:34px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.quick-nav strong{display:block;color:var(--navy);font-size:11px}

.quick-nav span span{display:block;color:var(--muted);font-size:8px}

.challenge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.challenge-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:19px}

.challenge-no{color:var(--primary);font-size:10px;font-weight:900}

.challenge-card h3{margin:9px 0 8px;font-size:16px}

.challenge-card p{margin:0;color:var(--muted);font-size:11px}

.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.solution-card{position:relative;overflow:hidden;padding:27px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm);transition:.22s}

.solution-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}

.solution-card .card-icon{width:50px;height:50px;font-size:20px}

.solution-card h3{margin:18px 0 9px;font-size:19px}

.solution-card p{color:var(--muted);font-size:12px}

.solution-card ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}

.solution-card li{display:flex;gap:8px;color:#57566B;font-size:10px}

.solution-card li:before{content:'✓';color:var(--secondary-dark);font-weight:900}

.method-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}

.method-panel{padding:30px;background:linear-gradient(145deg,#241D60,#6757D9);border-radius:28px;color:#fff}

.method-panel h3{color:#fff;font-size:27px}

.method-panel p{color:rgba(255,255,255,.68);font-size:12px}

.method-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}

.method-stat{padding:15px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.11);border-radius:14px}

.method-stat strong{display:block;color:#fff;font-size:13px}

.method-stat span{font-size:8px;color:rgba(255,255,255,.58)}

.process-list{display:grid;gap:13px}

.process-item{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:17px;background:#fff;border:1px solid var(--line);border-radius:17px}

.process-number{width:42px;height:42px;display:grid;place-items:center;color:#fff;background:var(--primary);border-radius:12px;font-weight:900}

.process-item h3{margin:0 0 4px;font-size:15px}

.process-item p{margin:0;color:var(--muted);font-size:10px}

.deliverable-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}

.deliverable{padding:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.11);border-radius:18px}

.deliverable i{display:grid;place-items:center;width:39px;height:39px;font-style:normal;background:rgba(255,255,255,.1);border-radius:11px}

.deliverable h3{margin:15px 0 7px;font-size:16px}

.deliverable p{margin:0;color:rgba(255,255,255,.63);font-size:10px}

.principle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.principle{padding:21px;background:#fff;border:1px solid var(--line);border-radius:18px}

.principle strong{display:block;color:var(--navy);font-size:13px}

.principle p{margin:7px 0 0;color:var(--muted);font-size:10px}

.notice-box{margin-top:24px;padding:20px 22px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 15px 15px 0;font-size:11px}

@media(max-width:1060px){
.quick-nav-inner,.challenge-grid,.principle-grid{grid-template-columns:repeat(2,1fr)}
.solution-grid,.deliverable-grid{grid-template-columns:repeat(2,1fr)}
.method-wrap{grid-template-columns:1fr}
}

@media(max-width:700px){
.quick-nav{margin-top:-18px}
.quick-nav-inner,.challenge-grid,.solution-grid,.deliverable-grid,.principle-grid{grid-template-columns:1fr}
.quick-nav a{border-right:0;border-bottom:1px solid var(--line)}
.quick-nav a:last-child{border-bottom:0}
.solution-hero .hero-grid{grid-template-columns:1fr}
}

/* Banking Talent Solution page */
    .talent-hero .hero-grid{grid-template-columns:1.02fr .98fr}

.talent-board{height:100%;padding:24px;background:linear-gradient(150deg,#282162,#17143D);border-radius:25px;overflow:hidden}

.talent-board-head{display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:12px;font-weight:800;margin-bottom:17px}

.talent-board-head span{padding:5px 8px;color:#C9FFF8;background:rgba(0,183,168,.16);border-radius:999px;font-size:8px}

.talent-profile{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center;padding:17px;background:linear-gradient(135deg,rgba(103,87,217,.7),rgba(0,183,168,.32));border:1px solid rgba(255,255,255,.12);border-radius:18px}

.talent-avatar{width:54px;height:54px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.15);border-radius:17px;font-size:23px}

.talent-profile h3{margin:0;color:#fff;font-size:17px}

.talent-profile p{margin:3px 0 0;color:rgba(255,255,255,.65);font-size:9px}

.competency-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}

.competency-card{padding:14px;background:#fff;border-radius:14px}

.competency-card strong{display:flex;justify-content:space-between;color:var(--navy);font-size:10px}

.competency-card strong em{font-style:normal;color:var(--primary)}

.competency-card small{display:block;margin-top:3px;color:var(--muted);font-size:8px}

.talent-path{display:flex;align-items:center;gap:7px;margin-top:12px;padding:13px;background:rgba(255,255,255,.08);border-radius:14px}

.talent-path i{width:29px;height:29px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.11);border-radius:9px;font-style:normal}

.talent-path span{color:rgba(255,255,255,.67);font-size:8px}

.talent-path strong{display:block;color:#fff;font-size:10px}

.audience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.audience-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:19px}

.audience-card i{width:40px;height:40px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:12px}

.audience-card h3{margin:15px 0 7px;font-size:16px}

.audience-card p{margin:0;color:var(--muted);font-size:10px}

.framework-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}

.framework-item{position:relative;padding:21px 17px;background:#fff;border:1px solid var(--line);border-radius:18px}

.framework-item:not(:last-child):after{content:'→';position:absolute;right:-12px;top:26px;z-index:3;color:#B5AFE5;font-weight:900}

.framework-item b{display:grid;place-items:center;width:36px;height:36px;color:#fff;background:var(--primary);border-radius:11px}

.framework-item h3{margin:14px 0 6px;font-size:14px}

.framework-item p{margin:0;color:var(--muted);font-size:9px}

.matrix-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:45px;align-items:center}

.matrix-card{padding:27px;background:linear-gradient(145deg,#231C5E,#6757D9);border-radius:27px;color:#fff}

.matrix-card h3{color:#fff;font-size:26px}

.matrix-card p{color:rgba(255,255,255,.67);font-size:11px}

.matrix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:19px}

.matrix-cell{min-height:76px;padding:11px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.11);border-radius:12px}

.matrix-cell strong{display:block;color:#fff;font-size:9px}

.matrix-cell span{display:block;margin-top:4px;color:rgba(255,255,255,.55);font-size:7px}

.matrix-cell.highlight{background:rgba(0,183,168,.27);border-color:rgba(163,255,242,.25)}

.benefit-list{display:grid;gap:14px}

.benefit-item{display:flex;gap:14px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:17px}

.benefit-item i{flex:0 0 auto;width:39px;height:39px;display:grid;place-items:center;font-style:normal;color:var(--secondary-dark);background:#E9FAF7;border-radius:11px}

.benefit-item h3{margin:0 0 4px;font-size:14px}

.benefit-item p{margin:0;color:var(--muted);font-size:10px}

.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.package-card{padding:27px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.package-card.featured{color:#fff;background:linear-gradient(145deg,var(--primary-dark),var(--primary));border:0}

.package-card.featured h3,.package-card.featured strong{color:#fff}

.package-card h3{margin:18px 0 8px;font-size:20px}

.package-card p{color:var(--muted);font-size:11px}

.package-card.featured p,.package-card.featured li{color:rgba(255,255,255,.7)}

.package-card ul{display:grid;gap:8px;padding:0;margin:18px 0 0;list-style:none}

.package-card li{display:flex;gap:8px;color:#55546A;font-size:10px}

.package-card li:before{content:'✓';color:var(--secondary);font-weight:900}

@media(max-width:1060px){
.audience-grid{grid-template-columns:repeat(2,1fr)}
.framework-grid{grid-template-columns:repeat(3,1fr)}
.framework-item:after{display:none}
.matrix-wrap{grid-template-columns:1fr}
.package-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.talent-hero .hero-grid{grid-template-columns:1fr}
.audience-grid,.framework-grid,.package-grid{grid-template-columns:1fr}
.competency-grid{grid-template-columns:1fr}
}

/* Header navigation refinement — unified multipage */
    .desktop-nav{gap:10px}

.nav-link{
      position:relative;
      gap:7px;
      padding:12px 5px;
      border:0;
      border-radius:0;
      background:transparent!important;
      box-shadow:none!important;
    }

.nav-link:hover,.nav-link.active{
      color:var(--primary);
      background:transparent!important;
    }

.nav-link::after{
      content:"";
      position:absolute;
      left:5px;right:5px;bottom:4px;
      height:2px;
      background:linear-gradient(90deg,var(--primary),var(--secondary));
      border-radius:99px;
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .2s ease;
    }

.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}

.mobile-main{gap:10px}

@media(max-width:1060px){
.desktop-nav{gap:4px}
}

:root{
      --primary:#6757D9;
      --primary-dark:#342A78;
      --primary-light:#F1EFFF;
      --secondary:#00B7A8;
      --secondary-dark:#087E76;
      --accent:#FFC95C;
      --navy:#17143D;
      --text:#44445B;
      --muted:#737388;
      --line:#E8E7F1;
      --white:#FFFFFF;
      --page:#FAFAFF;
      --success:#208A69;
      --danger:#C04A67;
      --shadow:0 22px 60px rgba(31,27,82,.10);
      --shadow-sm:0 12px 30px rgba(31,27,82,.08);
      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
      --container:1180px;
    }

*{box-sizing:border-box}

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

body{
      margin:0;
      color:var(--text);
      background:var(--page);
      font-family:"Inter",Arial,sans-serif;
      line-height:1.7;
      overflow-x:hidden;
    }

body.menu-open{overflow:hidden}

img,svg{max-width:100%;display:block}

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

button,input,select,textarea{font:inherit}

button{cursor:pointer}

h1,h2,h3,h4,p{margin-top:0}

h1,h2,h3,h4{
      color:var(--navy);
      font-family:"Manrope",sans-serif;
      letter-spacing:-.025em;
    }

.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}

.section{padding:96px 0}

.section-soft{background:linear-gradient(180deg,#F8F7FF 0%,#FFFFFF 100%)}

.section-dark{color:#fff;background:var(--navy)}

.section-dark h2,.section-dark h3,.section-dark h4{color:#fff}

.section-head{max-width:760px;margin:0 auto 48px;text-align:center}

.section-head.left{margin-left:0;text-align:left}

.section-head h2{
      margin:14px 0 15px;
      font-size:clamp(31px,4vw,48px);
      line-height:1.14;
    }

.section-head p{color:var(--muted);font-size:16px}

.section-dark .section-head p{color:rgba(255,255,255,.68)}

.eyebrow{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:7px 12px;
      color:var(--primary-dark);
      background:#fff;
      border:1px solid rgba(103,87,217,.17);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.10em;
      text-transform:uppercase;
    }

.eyebrow::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:var(--secondary);
      box-shadow:0 0 0 5px rgba(0,183,168,.12);
    }

.section-dark .eyebrow{
      color:#fff;background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.12);
    }

.btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 21px;
      border:1px solid transparent;
      border-radius:13px;
      font-weight:750;
      transition:.22s ease;
    }

.btn:hover{transform:translateY(-2px)}

.btn-primary{
      color:#fff;background:var(--primary);
      box-shadow:0 12px 28px rgba(103,87,217,.28);
    }

.btn-primary:hover{background:#5747C8}

.btn-secondary{color:#fff;background:var(--secondary)}

.btn-light{color:var(--primary-dark);background:#fff}

.btn-outline{
      color:var(--primary-dark);
      background:rgba(255,255,255,.75);
      border-color:#DCD9F0;
    }

.btn-sm{min-height:42px;padding:0 17px;font-size:13px}

.icon-arrow{font-size:18px;line-height:1}

.tag{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      color:var(--primary-dark);
      background:var(--primary-light);
      border-radius:999px;
      font-size:11px;
      font-weight:800;
    }

/* Header */
    .site-header{
      position:fixed;top:0;left:0;right:0;z-index:100;
      background:rgba(255,255,255,.92);
      border-bottom:1px solid rgba(232,231,241,.86);
      backdrop-filter:blur(17px);
      transition:.25s ease;
    }

.site-header.scrolled{box-shadow:0 9px 28px rgba(31,27,82,.08)}

.header-inner{
      min-height:82px;
      display:flex;align-items:center;justify-content:space-between;gap:24px;
    }

.brand{display:inline-flex;align-items:center;gap:12px;min-width:max-content}

.brand-logo{width:49px;height:49px;filter:drop-shadow(0 10px 14px rgba(103,87,217,.20))}

.brand-copy strong{
      display:block;color:var(--navy);
      font:800 19px/1.1 "Manrope",sans-serif;
    }

.brand-copy small{
      display:block;margin-top:5px;color:var(--muted);
      font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    }

.desktop-nav{display:flex;align-items:center;gap:4px}

.nav-item{position:relative}

.nav-link{
      display:flex;align-items:center;gap:6px;
      padding:12px 13px;
      color:#48475F;
      border-radius:10px;
      font-size:13px;font-weight:700;
      transition:.18s ease;
    }

.nav-link:hover,.nav-link.active{color:var(--primary);background:var(--primary-light)}

.chevron{font-size:10px;transition:.18s}

.nav-item:hover .chevron{transform:rotate(180deg)}

.dropdown{
      position:absolute;top:calc(100% + 12px);left:0;
      width:300px;padding:10px;
      background:#fff;border:1px solid var(--line);
      border-radius:18px;box-shadow:var(--shadow);
      opacity:0;visibility:hidden;transform:translateY(9px);
      transition:.18s ease;
    }

.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}

.dropdown.wide{width:680px;display:grid;grid-template-columns:1fr 1fr;gap:6px}

.drop-link{
      display:flex;gap:12px;padding:12px;
      border-radius:12px;transition:.18s;
    }

.drop-link:hover{background:var(--primary-light)}

.drop-icon{
      flex:0 0 auto;width:38px;height:38px;border-radius:11px;
      display:grid;place-items:center;
      color:var(--primary);background:#F3F1FF;font-size:17px;
    }

.drop-link strong{display:block;color:var(--navy);font-size:13px}

.drop-link span{display:block;margin-top:2px;color:var(--muted);font-size:11px;line-height:1.45}

.header-action{display:flex;align-items:center;gap:9px}

.menu-toggle{
      display:none;width:45px;height:45px;
      border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--navy);
    }

/* Mobile menu */
    .mobile-panel{
      display:none;
      position:fixed;inset:82px 0 0;z-index:99;
      padding:18px 20px 35px;
      background:#fff;overflow:auto;
    }

.mobile-panel.open{display:block}

.mobile-group{border-bottom:1px solid var(--line)}

.mobile-main{
      width:100%;display:flex;align-items:center;justify-content:space-between;
      padding:15px 4px;border:0;background:none;color:var(--navy);font-weight:800;text-align:left;
    }

.mobile-sub{display:none;padding:0 0 12px 12px}

.mobile-sub.open{display:grid}

.mobile-sub a{padding:9px 8px;color:var(--muted);font-size:14px}

.mobile-login{margin-top:20px;width:100%}

/* Hero */
    .hero{
      position:relative;overflow:hidden;
      padding:156px 0 82px;
      background:
        radial-gradient(circle at 14% 23%,rgba(0,183,168,.14),transparent 27%),
        radial-gradient(circle at 87% 20%,rgba(255,201,92,.20),transparent 24%),
        linear-gradient(135deg,#F4F1FF 0%,#FFFFFF 52%,#EDFBF9 100%);
    }

.hero::before{
      content:"";position:absolute;left:-110px;bottom:-145px;
      width:360px;height:360px;border:52px solid rgba(103,87,217,.055);border-radius:50%;
    }

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:62px;align-items:center}

.hero h1{
      margin:20px 0 19px;
      font-size:clamp(42px,5.4vw,69px);
      line-height:1.05;
    }

.gradient-text{
      background:linear-gradient(90deg,var(--primary),var(--secondary-dark));
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }

.hero-lead{max-width:690px;color:#626278;font-size:17px}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px}

.hero-proof{display:flex;flex-wrap:wrap;gap:16px;margin-top:31px}

.proof-item{display:flex;align-items:center;gap:9px;color:#5D5C72;font-size:12px;font-weight:700}

.proof-icon{
      width:28px;height:28px;display:grid;place-items:center;
      color:var(--secondary-dark);background:#E9FAF7;border-radius:9px;
    }

.hero-visual{position:relative;min-height:530px}

.visual-main{
      position:absolute;inset:18px 6px 18px 40px;
      padding:22px;
      background:rgba(255,255,255,.78);
      border:1px solid rgba(255,255,255,.95);
      border-radius:34px;box-shadow:var(--shadow);
      backdrop-filter:blur(15px);
    }

.dashboard{
      height:100%;padding:22px;
      background:linear-gradient(150deg,#282162,#17143D);
      border-radius:25px;overflow:hidden;
    }

.dash-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}

.dash-brand{display:flex;align-items:center;gap:9px;color:#fff;font-size:12px;font-weight:800}

.dash-dots{display:flex;gap:5px}

.dash-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}

.dash-hero{
      padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.62),rgba(0,183,168,.36));
      border:1px solid rgba(255,255,255,.12);border-radius:19px;
    }

.dash-label{color:#D9D4FF;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.dash-hero h3{margin:8px 0 7px;color:#fff;font-size:25px;line-height:1.2}

.dash-hero p{margin:0;color:rgba(255,255,255,.68);font-size:11px}

.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}

.dash-stat{padding:13px;background:rgba(255,255,255,.07);border-radius:13px}

.dash-stat strong{display:block;color:#fff;font-size:16px}

.dash-stat span{color:rgba(255,255,255,.55);font-size:9px}

.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}

.dash-card{padding:16px;background:#fff;border-radius:16px}

.dash-card h4{margin-bottom:10px;font-size:12px}

.progress{height:7px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.mini-list{display:grid;gap:8px}

.mini-row{display:flex;align-items:center;gap:8px}

.mini-row i{width:9px;height:9px;border-radius:3px;background:var(--secondary)}

.mini-row span{font-size:9px;color:var(--muted)}

.float-card{
      position:absolute;z-index:2;display:flex;align-items:center;gap:12px;
      padding:14px 17px;background:#fff;border:1px solid var(--line);
      border-radius:16px;box-shadow:var(--shadow-sm);
    }

.float-card.one{left:0;top:88px}

.float-card.two{right:-10px;bottom:75px}

.float-card.three{left:10px;bottom:15px}

.float-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--primary-light);color:var(--primary)}

.float-card strong{display:block;color:var(--navy);font-size:12px}

.float-card small{display:block;color:var(--muted);font-size:9px}

/* Trust strip */
    .trust-strip{position:relative;z-index:3;margin-top:-1px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.trust-inner{display:grid;grid-template-columns:1.15fr repeat(4,1fr);align-items:center;gap:20px;padding:25px 0}

.trust-copy strong{display:block;color:var(--navy);font-size:13px}

.trust-copy span{color:var(--muted);font-size:11px}

.trust-item{display:flex;align-items:center;justify-content:center;gap:9px;color:#69677D;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}

.trust-mark{width:32px;height:32px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:10px}

/* Solution cards */
    .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

.service-card{
      position:relative;overflow:hidden;
      min-height:310px;padding:28px;
      background:#fff;border:1px solid var(--line);
      border-radius:var(--radius-lg);box-shadow:0 12px 35px rgba(31,27,82,.055);
      transition:.25s ease;
    }

.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}

.service-card::after{
      content:"";position:absolute;right:-45px;bottom:-50px;width:145px;height:145px;
      border:27px solid rgba(103,87,217,.055);border-radius:50%;
    }

.card-icon{
      width:54px;height:54px;display:grid;place-items:center;
      color:var(--primary);background:var(--primary-light);
      border-radius:16px;font-size:24px;
    }

.service-card:nth-child(2n) .card-icon{color:var(--secondary-dark);background:#E9FAF7}

.service-card:nth-child(3n) .card-icon{color:#9A6C0F;background:#FFF6DE}

.service-card h3{margin:21px 0 11px;font-size:21px}

.service-card p{color:var(--muted);font-size:13px}

.card-list{display:grid;gap:8px;margin:18px 0 20px;padding:0;list-style:none}

.card-list li{display:flex;gap:9px;color:#55546A;font-size:12px}

.card-list li::before{content:"✓";color:var(--secondary-dark);font-weight:900}

.text-link{position:relative;z-index:2;color:var(--primary);font-size:12px;font-weight:800}

.text-link:hover{text-decoration:underline}

/* Split */
    .split{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}

.feature-visual{
      position:relative;min-height:520px;padding:33px;
      background:linear-gradient(145deg,#F0EDFF,#EAFBF8);
      border:1px solid #E2DFF7;border-radius:32px;
    }

.feature-screen{
      position:absolute;inset:48px 32px 34px 57px;padding:22px;
      background:#fff;border:1px solid var(--line);border-radius:23px;box-shadow:var(--shadow);
    }

.screen-nav{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}

.screen-title{font-size:11px;font-weight:800;color:var(--navy)}

.screen-pill{padding:5px 9px;color:var(--secondary-dark);background:#E8FAF7;border-radius:99px;font-size:8px;font-weight:800}

.chart-area{display:flex;align-items:flex-end;gap:10px;height:155px;padding:25px 10px 8px;border-bottom:1px solid var(--line)}

.bar{flex:1;min-width:15px;background:linear-gradient(180deg,var(--primary),#9488EC);border-radius:7px 7px 2px 2px}

.screen-bottom{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px}

.screen-box{padding:14px;background:#FAFAFF;border:1px solid var(--line);border-radius:13px}

.screen-box strong{display:block;color:var(--navy);font-size:19px}

.screen-box span{color:var(--muted);font-size:9px}

.feature-chip{
      position:absolute;display:flex;align-items:center;gap:9px;padding:12px 14px;
      background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);
    }

.feature-chip.one{top:21px;right:18px}

.feature-chip.two{left:12px;bottom:53px}

.feature-chip i{width:32px;height:32px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.feature-chip strong{display:block;color:var(--navy);font-size:10px}

.feature-chip span{display:block;color:var(--muted);font-size:8px}

.feature-copy h2{margin:14px 0 16px;font-size:clamp(31px,4vw,48px);line-height:1.14}

.feature-copy>p{color:var(--muted)}

.feature-points{display:grid;gap:16px;margin:27px 0 30px}

.feature-point{display:flex;gap:14px}

.point-icon{flex:0 0 auto;width:39px;height:39px;display:grid;place-items:center;color:var(--secondary-dark);background:#E9FAF7;border-radius:12px;font-weight:900}

.feature-point strong{display:block;color:var(--navy);font-size:13px}

.feature-point span{display:block;margin-top:2px;color:var(--muted);font-size:11px}

/* Innovation */
    .innovation-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:25px}

.innovation-main{
      min-height:480px;padding:34px;
      color:#fff;background:linear-gradient(145deg,var(--primary-dark),var(--primary));
      border-radius:29px;overflow:hidden;position:relative;
    }

.innovation-main h3{max-width:540px;margin:18px 0 14px;color:#fff;font-size:32px;line-height:1.17}

.innovation-main p{max-width:610px;color:rgba(255,255,255,.74)}

.innovation-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}

.innovation-tags span{padding:8px 11px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.13);border-radius:99px;font-size:10px;font-weight:800}

.ai-orbit{position:absolute;right:-35px;bottom:-72px;width:330px;height:330px;border:1px solid rgba(255,255,255,.15);border-radius:50%}

.ai-orbit::before,.ai-orbit::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%}

.ai-orbit::before{inset:45px}

.ai-orbit::after{inset:93px}

.ai-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:83px;height:83px;display:grid;place-items:center;color:var(--primary-dark);background:#fff;border-radius:24px;font:800 25px "Manrope"}

.orbit-dot{position:absolute;width:36px;height:36px;display:grid;place-items:center;color:#fff;background:var(--secondary);border-radius:12px;font-size:13px}

.orbit-dot.a{left:39px;top:57px}

.orbit-dot.b{right:18px;top:115px}

.orbit-dot.c{left:72px;bottom:27px}

.innovation-side{display:grid;gap:20px}

.example-card{padding:25px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.example-head{display:flex;align-items:center;justify-content:space-between;gap:15px}

.example-head h3{margin:0;font-size:18px}

.example-card p{margin:12px 0 15px;color:var(--muted);font-size:12px}

.example-meta{display:flex;flex-wrap:wrap;gap:7px}

.example-meta span{padding:6px 9px;color:#65637A;background:#F5F4FA;border-radius:8px;font-size:9px;font-weight:750}

/* Foundation */
    .foundation-card{
      position:relative;overflow:hidden;padding:33px;
      background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-sm);
    }

.foundation-card.education{background:linear-gradient(145deg,#FFFFFF,#F3F0FF)}

.foundation-card.umkm{background:linear-gradient(145deg,#FFFFFF,#EBFAF7)}

.foundation-card h3{margin:19px 0 11px;font-size:27px}

.foundation-card p{color:var(--muted);font-size:13px}

.foundation-programs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:24px 0}

.program-mini{padding:13px;background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:13px}

.program-mini strong{display:block;color:var(--navy);font-size:11px}

.program-mini span{display:block;margin-top:3px;color:var(--muted);font-size:9px}

/* Journey */
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.step{
      position:relative;padding:25px 22px;background:#fff;border:1px solid var(--line);border-radius:20px;
    }

.step-no{
      width:41px;height:41px;display:grid;place-items:center;
      color:#fff;background:var(--primary);border-radius:13px;font-weight:800;
    }

.step h3{margin:17px 0 8px;font-size:17px}

.step p{color:var(--muted);font-size:11px}

.step:not(:last-child)::after{
      content:"→";position:absolute;right:-17px;top:32px;z-index:3;color:#B3AEE2;font-size:22px;font-weight:900;
    }

/* Curriculum */
    .curriculum-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:30px}

.tab-btn{
      min-height:41px;padding:0 15px;border:1px solid var(--line);border-radius:11px;
      color:var(--muted);background:#fff;font-size:11px;font-weight:800;
    }

.tab-btn.active{color:#fff;background:var(--primary);border-color:var(--primary)}

.curriculum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.curriculum-item{padding:21px;background:#fff;border:1px solid var(--line);border-radius:17px}

.curriculum-item .num{color:var(--primary);font-size:10px;font-weight:900}

.curriculum-item h3{margin:8px 0 7px;font-size:15px;line-height:1.35}

.curriculum-item p{margin:0;color:var(--muted);font-size:10px}

/* App */
    .app-wrap{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr .92fr;gap:55px;align-items:center;
      padding:50px 55px;color:#fff;
      background:linear-gradient(135deg,#211A58,#6757D9);
      border-radius:34px;
    }

.app-wrap h2{margin:14px 0 14px;color:#fff;font-size:clamp(30px,4vw,47px);line-height:1.15}

.app-wrap p{color:rgba(255,255,255,.70)}

.store-row{display:flex;flex-wrap:wrap;gap:11px;margin-top:25px}

.store-badge{
      display:flex;align-items:center;gap:11px;min-width:175px;padding:10px 14px;
      color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
      border-radius:13px;
    }

.store-badge svg{width:28px;height:28px}

.store-badge small{display:block;color:rgba(255,255,255,.60);font-size:8px;text-transform:uppercase;letter-spacing:.08em}

.store-badge strong{display:block;font-size:12px}

.phone-scene{position:relative;min-height:420px}

.phone{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(5deg);
      width:230px;height:420px;padding:9px;background:#111026;border:2px solid rgba(255,255,255,.25);
      border-radius:35px;box-shadow:0 28px 55px rgba(0,0,0,.32);
    }

.phone-screen{height:100%;padding:19px 15px;background:linear-gradient(180deg,#F5F2FF,#fff);border-radius:27px;overflow:hidden}

.notch{width:76px;height:17px;margin:-11px auto 15px;background:#111026;border-radius:0 0 13px 13px}

.mobile-logo{display:flex;align-items:center;gap:7px;color:var(--navy);font-size:9px;font-weight:900}

.mobile-logo svg{width:25px}

.mobile-welcome{margin-top:18px;padding:16px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:17px}

.mobile-welcome strong{display:block;font-size:13px}

.mobile-welcome span{font-size:8px;opacity:.78}

.mobile-course-title{margin:16px 0 9px;color:var(--navy);font-size:10px;font-weight:900}

.mobile-course{display:flex;gap:9px;margin-bottom:8px;padding:9px;background:#fff;border:1px solid var(--line);border-radius:11px}

.mobile-thumb{width:42px;height:38px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:8px;font-size:12px}

.mobile-course strong{display:block;color:var(--navy);font-size:8px}

.mobile-course span{display:block;color:var(--muted);font-size:6px}

.app-float{position:absolute;padding:13px 16px;background:#fff;border-radius:15px;box-shadow:var(--shadow)}

.app-float.a{left:5%;top:21%}

.app-float.b{right:3%;bottom:15%}

.app-float strong{display:block;color:var(--navy);font-size:10px}

.app-float span{color:var(--muted);font-size:8px}

/* About */
    .about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:29px}

.about-stat{padding:20px;background:#fff;border:1px solid var(--line);border-radius:16px}

.about-stat strong{display:block;color:var(--primary);font:800 24px "Manrope"}

.about-stat span{color:var(--muted);font-size:10px}

.about-note{padding:20px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 14px 14px 0;font-size:12px}

/* FAQ */
    .faq-wrap{max-width:880px;margin:0 auto}

.faq-item{margin-bottom:11px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}

.faq-q{
      width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
      padding:19px 21px;border:0;background:#fff;color:var(--navy);font-weight:800;text-align:left;
    }

.faq-plus{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;color:var(--primary);background:var(--primary-light);border-radius:9px}

.faq-a{display:none;padding:0 21px 20px;color:var(--muted);font-size:12px}

.faq-item.open .faq-a{display:block}

.faq-item.open .faq-plus{transform:rotate(45deg)}

/* CTA */
    .final-cta{padding:78px 0}

.cta-box{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center;
      padding:42px 48px;color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));
      border-radius:30px;
    }

.cta-box::after{content:"";position:absolute;right:-80px;top:-110px;width:270px;height:270px;border:45px solid rgba(255,255,255,.07);border-radius:50%}

.cta-box h2{margin-bottom:9px;color:#fff;font-size:clamp(28px,4vw,43px)}

.cta-box p{margin:0;color:rgba(255,255,255,.70)}

.cta-actions{position:relative;z-index:2;display:flex;gap:10px;flex-wrap:wrap}

/* Footer */
    .site-footer{color:rgba(255,255,255,.72);background:#141132}

.footer-main{padding:68px 0 46px}

.footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:48px}

.footer-brand p{max-width:390px;margin:19px 0 22px;font-size:12px}

.footer-brand .brand-copy strong,.footer-title{color:#fff}

.footer-title{margin-bottom:18px;font:800 14px "Manrope"}

.footer-links{display:grid;gap:10px}

.footer-links a{font-size:12px;transition:.18s}

.footer-links a:hover{color:#fff;transform:translateX(3px)}

.footer-contact{display:grid;gap:10px;margin-top:18px}

.contact-row{display:flex;gap:10px;font-size:11px}

.contact-row i{font-style:normal;color:#AFA6FF}

.newsletter{display:flex;max-width:395px;margin-top:17px;padding:5px;background:#fff;border-radius:12px}

.newsletter input{width:100%;min-width:0;padding:0 12px;border:0;outline:0;font-size:11px}

.newsletter button{width:43px;border:0;border-radius:9px;color:#fff;background:var(--primary)}

.footer-bottom{padding:19px 0;border-top:1px solid rgba(255,255,255,.09);font-size:10px}

.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}

.footer-legal{display:flex;flex-wrap:wrap;gap:15px}

/* Floating WA */
    .floating-help{
      position:fixed;right:22px;bottom:22px;z-index:90;
      display:flex;align-items:center;gap:10px;padding:11px 15px;
      color:#fff;background:#1FAF6D;border-radius:99px;
      box-shadow:0 15px 35px rgba(16,119,73,.28);font-size:11px;font-weight:800;
    }

.floating-help span:first-child{font-size:19px}

/* Utilities */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:1060px){
.desktop-nav,.header-action .btn-outline{display:none}
.menu-toggle{display:grid;place-items:center}
.hero-grid,.split,.innovation-grid,.app-wrap{grid-template-columns:1fr}
.hero-visual{max-width:650px;width:100%;margin:0 auto}
.cards-3{grid-template-columns:repeat(2,1fr)}
.curriculum-grid{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(2,1fr)}
.step:nth-child(2)::after{display:none}
.footer-grid{grid-template-columns:repeat(2,1fr)}
.trust-inner{grid-template-columns:repeat(2,1fr)}
.trust-copy{grid-column:1/-1;text-align:center}
}

@media(max-width:700px){
.container{width:min(100% - 28px,var(--container))}
.section{padding:69px 0}
.brand-copy small{display:none}
.brand-logo{width:43px;height:43px}
.header-inner{min-height:74px}
.mobile-panel{inset:74px 0 0}
.header-action .btn-primary{display:none}
.hero{padding:124px 0 60px}
.hero h1{font-size:43px}
.hero-lead{font-size:15px}
.hero-visual{min-height:460px}
.visual-main{inset:12px 0 28px 20px}
.float-card.one{left:-4px;top:52px}
.float-card.two{right:-4px}
.float-card.three{display:none}
.dash-stats{grid-template-columns:1fr}
.dash-stat:nth-child(n+2){display:none}
.cards-3,.cards-2,.foundation-programs,.curriculum-grid,.about-stats,.steps,.footer-grid{grid-template-columns:1fr}
.step::after{display:none!important}
.feature-visual{min-height:445px;padding:20px}
.feature-screen{inset:44px 15px 25px 37px}
.innovation-main{min-height:520px}
.app-wrap{padding:35px 22px}
.phone-scene{min-height:390px}
.app-float.a{left:-10px}
.app-float.b{right:-10px}
.trust-inner{grid-template-columns:1fr 1fr}
.trust-item{font-size:9px}
.cta-box{grid-template-columns:1fr;padding:34px 25px}
.cta-actions{align-items:stretch;flex-direction:column}
.footer-bottom-inner{align-items:flex-start;flex-direction:column}
.floating-help{right:14px;bottom:14px;padding:11px}
.floating-help span:last-child{display:none}
}

/* Online Classes */
    .course-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:20px;
    }

.course-card{
      overflow:hidden;
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:var(--shadow-sm);
      transition:.24s ease;
    }

.course-card:hover{
      transform:translateY(-5px);
      box-shadow:var(--shadow);
    }

.course-cover{
      position:relative;
      min-height:180px;
      padding:22px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      color:#fff;
      overflow:hidden;
    }

.course-cover::after{
      content:"";
      position:absolute;
      right:-35px;
      bottom:-45px;
      width:135px;
      height:135px;
      border:24px solid rgba(255,255,255,.10);
      border-radius:50%;
    }

.course-cover.one{background:linear-gradient(135deg,#3A2F87,#6757D9)}

.course-cover.two{background:linear-gradient(135deg,#087E76,#00B7A8)}

.course-cover.three{background:linear-gradient(135deg,#8A5F13,#E0A832)}

.course-cover.four{background:linear-gradient(135deg,#8B3E62,#C04A67)}

.course-label{
      position:relative;
      z-index:1;
      align-self:flex-start;
      padding:6px 9px;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.17);
      border-radius:999px;
      font-size:9px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

.course-cover h3{
      position:relative;
      z-index:1;
      margin:28px 0 0;
      color:#fff;
      font-size:20px;
      line-height:1.28;
    }

.course-body{padding:21px}

.course-meta{
      display:flex;
      flex-wrap:wrap;
      gap:7px;
      margin-bottom:13px;
    }

.course-meta span{
      padding:5px 8px;
      color:var(--muted);
      background:#F5F4FA;
      border-radius:8px;
      font-size:9px;
      font-weight:750;
    }

.course-body p{
      margin-bottom:17px;
      color:var(--muted);
      font-size:12px;
    }

.course-actions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

.course-status{
      color:var(--secondary-dark);
      font-size:10px;
      font-weight:800;
    }

.course-more{
      margin-top:31px;
      text-align:center;
    }

@media(max-width:1060px){
.course-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.course-grid{grid-template-columns:1fr}
}

/* Banking Solution page */
    .solution-hero{padding-bottom:92px}

.solution-hero .hero-grid{grid-template-columns:1fr .96fr}

.solution-kicker{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}

.solution-kicker span{padding:7px 10px;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px;font-weight:800}

.solution-board{height:100%;padding:25px;background:linear-gradient(150deg,#282162,#17143D);border-radius:25px;overflow:hidden}

.board-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:#fff;font-size:12px;font-weight:800}

.board-status{padding:5px 8px;color:#B9FFF6;background:rgba(0,183,168,.15);border-radius:99px;font-size:8px}

.board-focus{padding:21px;background:linear-gradient(135deg,rgba(103,87,217,.72),rgba(0,183,168,.35));border:1px solid rgba(255,255,255,.12);border-radius:18px}

.board-focus small{color:#D9D4FF;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

.board-focus h3{margin:7px 0 8px;color:#fff;font-size:23px}

.board-focus p{margin:0;color:rgba(255,255,255,.67);font-size:10px}

.board-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:13px}

.board-card{padding:15px;background:#fff;border-radius:14px}

.board-card strong{display:block;color:var(--navy);font-size:11px}

.board-card span{display:block;margin-top:3px;color:var(--muted);font-size:8px}

.board-meter{height:6px;margin-top:11px;background:#ECEAF6;border-radius:99px;overflow:hidden}

.board-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}

.quick-nav{position:relative;z-index:4;margin-top:-31px}

.quick-nav-inner{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden}

.quick-nav a{display:flex;align-items:center;gap:11px;padding:19px;border-right:1px solid var(--line);transition:.18s}

.quick-nav a:last-child{border-right:0}

.quick-nav a:hover{background:var(--primary-light)}

.quick-nav i{width:34px;height:34px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:10px}

.quick-nav strong{display:block;color:var(--navy);font-size:11px}

.quick-nav span span{display:block;color:var(--muted);font-size:8px}

.challenge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.challenge-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:19px}

.challenge-no{color:var(--primary);font-size:10px;font-weight:900}

.challenge-card h3{margin:9px 0 8px;font-size:16px}

.challenge-card p{margin:0;color:var(--muted);font-size:11px}

.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.solution-card{position:relative;overflow:hidden;padding:27px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm);transition:.22s}

.solution-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}

.solution-card .card-icon{width:50px;height:50px;font-size:20px}

.solution-card h3{margin:18px 0 9px;font-size:19px}

.solution-card p{color:var(--muted);font-size:12px}

.solution-card ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}

.solution-card li{display:flex;gap:8px;color:#57566B;font-size:10px}

.solution-card li:before{content:'✓';color:var(--secondary-dark);font-weight:900}

.method-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}

.method-panel{padding:30px;background:linear-gradient(145deg,#241D60,#6757D9);border-radius:28px;color:#fff}

.method-panel h3{color:#fff;font-size:27px}

.method-panel p{color:rgba(255,255,255,.68);font-size:12px}

.method-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}

.method-stat{padding:15px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.11);border-radius:14px}

.method-stat strong{display:block;color:#fff;font-size:13px}

.method-stat span{font-size:8px;color:rgba(255,255,255,.58)}

.process-list{display:grid;gap:13px}

.process-item{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:17px;background:#fff;border:1px solid var(--line);border-radius:17px}

.process-number{width:42px;height:42px;display:grid;place-items:center;color:#fff;background:var(--primary);border-radius:12px;font-weight:900}

.process-item h3{margin:0 0 4px;font-size:15px}

.process-item p{margin:0;color:var(--muted);font-size:10px}

.deliverable-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}

.deliverable{padding:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.11);border-radius:18px}

.deliverable i{display:grid;place-items:center;width:39px;height:39px;font-style:normal;background:rgba(255,255,255,.1);border-radius:11px}

.deliverable h3{margin:15px 0 7px;font-size:16px}

.deliverable p{margin:0;color:rgba(255,255,255,.63);font-size:10px}

.principle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.principle{padding:21px;background:#fff;border:1px solid var(--line);border-radius:18px}

.principle strong{display:block;color:var(--navy);font-size:13px}

.principle p{margin:7px 0 0;color:var(--muted);font-size:10px}

.notice-box{margin-top:24px;padding:20px 22px;color:#57546A;background:#F8F7FF;border-left:4px solid var(--primary);border-radius:0 15px 15px 0;font-size:11px}

@media(max-width:1060px){
.quick-nav-inner,.challenge-grid,.principle-grid{grid-template-columns:repeat(2,1fr)}
.solution-grid,.deliverable-grid{grid-template-columns:repeat(2,1fr)}
.method-wrap{grid-template-columns:1fr}
}

@media(max-width:700px){
.quick-nav{margin-top:-18px}
.quick-nav-inner,.challenge-grid,.solution-grid,.deliverable-grid,.principle-grid{grid-template-columns:1fr}
.quick-nav a{border-right:0;border-bottom:1px solid var(--line)}
.quick-nav a:last-child{border-bottom:0}
.solution-hero .hero-grid{grid-template-columns:1fr}
}

/* Banking Talent Solution page */
    .talent-hero .hero-grid{grid-template-columns:1.02fr .98fr}

.talent-board{height:100%;padding:24px;background:linear-gradient(150deg,#282162,#17143D);border-radius:25px;overflow:hidden}

.talent-board-head{display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:12px;font-weight:800;margin-bottom:17px}

.talent-board-head span{padding:5px 8px;color:#C9FFF8;background:rgba(0,183,168,.16);border-radius:999px;font-size:8px}

.talent-profile{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center;padding:17px;background:linear-gradient(135deg,rgba(103,87,217,.7),rgba(0,183,168,.32));border:1px solid rgba(255,255,255,.12);border-radius:18px}

.talent-avatar{width:54px;height:54px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.15);border-radius:17px;font-size:23px}

.talent-profile h3{margin:0;color:#fff;font-size:17px}

.talent-profile p{margin:3px 0 0;color:rgba(255,255,255,.65);font-size:9px}

.competency-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}

.competency-card{padding:14px;background:#fff;border-radius:14px}

.competency-card strong{display:flex;justify-content:space-between;color:var(--navy);font-size:10px}

.competency-card strong em{font-style:normal;color:var(--primary)}

.competency-card small{display:block;margin-top:3px;color:var(--muted);font-size:8px}

.talent-path{display:flex;align-items:center;gap:7px;margin-top:12px;padding:13px;background:rgba(255,255,255,.08);border-radius:14px}

.talent-path i{width:29px;height:29px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.11);border-radius:9px;font-style:normal}

.talent-path span{color:rgba(255,255,255,.67);font-size:8px}

.talent-path strong{display:block;color:#fff;font-size:10px}

.audience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.audience-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:19px}

.audience-card i{width:40px;height:40px;display:grid;place-items:center;font-style:normal;color:var(--primary);background:var(--primary-light);border-radius:12px}

.audience-card h3{margin:15px 0 7px;font-size:16px}

.audience-card p{margin:0;color:var(--muted);font-size:10px}

.framework-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}

.framework-item{position:relative;padding:21px 17px;background:#fff;border:1px solid var(--line);border-radius:18px}

.framework-item:not(:last-child):after{content:'→';position:absolute;right:-12px;top:26px;z-index:3;color:#B5AFE5;font-weight:900}

.framework-item b{display:grid;place-items:center;width:36px;height:36px;color:#fff;background:var(--primary);border-radius:11px}

.framework-item h3{margin:14px 0 6px;font-size:14px}

.framework-item p{margin:0;color:var(--muted);font-size:9px}

.matrix-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:45px;align-items:center}

.matrix-card{padding:27px;background:linear-gradient(145deg,#231C5E,#6757D9);border-radius:27px;color:#fff}

.matrix-card h3{color:#fff;font-size:26px}

.matrix-card p{color:rgba(255,255,255,.67);font-size:11px}

.matrix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:19px}

.matrix-cell{min-height:76px;padding:11px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.11);border-radius:12px}

.matrix-cell strong{display:block;color:#fff;font-size:9px}

.matrix-cell span{display:block;margin-top:4px;color:rgba(255,255,255,.55);font-size:7px}

.matrix-cell.highlight{background:rgba(0,183,168,.27);border-color:rgba(163,255,242,.25)}

.benefit-list{display:grid;gap:14px}

.benefit-item{display:flex;gap:14px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:17px}

.benefit-item i{flex:0 0 auto;width:39px;height:39px;display:grid;place-items:center;font-style:normal;color:var(--secondary-dark);background:#E9FAF7;border-radius:11px}

.benefit-item h3{margin:0 0 4px;font-size:14px}

.benefit-item p{margin:0;color:var(--muted);font-size:10px}

.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.package-card{padding:27px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}

.package-card.featured{color:#fff;background:linear-gradient(145deg,var(--primary-dark),var(--primary));border:0}

.package-card.featured h3,.package-card.featured strong{color:#fff}

.package-card h3{margin:18px 0 8px;font-size:20px}

.package-card p{color:var(--muted);font-size:11px}

.package-card.featured p,.package-card.featured li{color:rgba(255,255,255,.7)}

.package-card ul{display:grid;gap:8px;padding:0;margin:18px 0 0;list-style:none}

.package-card li{display:flex;gap:8px;color:#55546A;font-size:10px}

.package-card li:before{content:'✓';color:var(--secondary);font-weight:900}

@media(max-width:1060px){
.audience-grid{grid-template-columns:repeat(2,1fr)}
.framework-grid{grid-template-columns:repeat(3,1fr)}
.framework-item:after{display:none}
.matrix-wrap{grid-template-columns:1fr}
.package-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.talent-hero .hero-grid{grid-template-columns:1fr}
.audience-grid,.framework-grid,.package-grid{grid-template-columns:1fr}
.competency-grid{grid-template-columns:1fr}
}

/* Header navigation refinement — unified multipage */
    .desktop-nav{gap:10px}

.nav-link{
      position:relative;
      gap:7px;
      padding:12px 5px;
      border:0;
      border-radius:0;
      background:transparent!important;
      box-shadow:none!important;
    }

.nav-link:hover,.nav-link.active{
      color:var(--primary);
      background:transparent!important;
    }

.nav-link::after{
      content:"";
      position:absolute;
      left:5px;right:5px;bottom:4px;
      height:2px;
      background:linear-gradient(90deg,var(--primary),var(--secondary));
      border-radius:99px;
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .2s ease;
    }

.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}

.mobile-main{gap:10px}

@media(max-width:1060px){
.desktop-nav{gap:4px}
}