:root{
      --blue:#1d4f9c;
      --blue-dark:#10366f;
      --blue-deep:#0a2852;
      --teal:#21b892;
      --teal-dark:#179676;
      --text:#173865;
      --muted:#5d7392;
      --bg:#f4f9ff;
      --bg-soft:#fbfdff;
      --white:#ffffff;
      --line:rgba(29,79,156,.10);
      --shadow:0 12px 32px rgba(16,54,111,.08);
      --shadow-hover:0 18px 42px rgba(16,54,111,.13);
      --radius-xl:30px;
      --radius-lg:22px;
      --radius-md:18px;
      --container:1180px;
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      color:var(--text);
      background:#ffffff;
      overflow-x:hidden;
    }

    a{text-decoration:none;color:inherit}
    img{max-width:100%;display:block}
    .container{
      width:min(var(--container), calc(100% - 40px));
      margin-inline:auto;
      position:relative;
      z-index:2;
    }

    /* HEADER */
    .site-header{
      position:sticky;
      top:0;
      z-index:1000;
      background:#ffffff;
      backdrop-filter:none;
      border-bottom:1px solid rgba(29,79,156,.07);
      box-shadow:0 8px 24px rgba(16,54,111,.04);
    }

    .nav-wrap{
      min-height:84px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:14px;
      min-width:0;
    }

    .brand-logo{
      width:48px;
      height:48px;
      border-radius:14px;
      position:relative;
      overflow:hidden;
      flex-shrink:0;
      background:linear-gradient(135deg, rgba(29,79,156,.12), rgba(33,184,146,.12));
      border:1px solid rgba(29,79,156,.08);
    }

    .brand-logo::before{
      content:"";
      position:absolute;
      inset:8px;
      background:
        radial-gradient(circle, var(--blue) 0 45%, transparent 47%) 0 0 / 12px 12px,
        radial-gradient(circle, var(--teal) 0 45%, transparent 47%) 6px 6px / 12px 12px;
      border-radius:8px;
    }

    .brand-text{
      line-height:1.02;
    }

    .brand-text strong{
      display:block;
      color:var(--blue);
      font-size:1.22rem;
      font-weight:900;
      letter-spacing:.2px;
    }

    .brand-text span{
      display:block;
      color:var(--teal);
      font-size:.98rem;
      font-weight:800;
      letter-spacing:.2px;
    }

    .nav-menu{
      display:flex;
      align-items:center;
      gap:28px;
      font-weight:800;
      color:var(--blue-dark);
    }

    .nav-menu a{
      position:relative;
      transition:.25s ease;
    }

    .nav-menu a:hover{
      color:var(--teal-dark);
    }

    .nav-menu a::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-8px;
      width:0;
      height:3px;
      border-radius:999px;
      background:linear-gradient(90deg, var(--blue), var(--teal));
      transition:.25s ease;
    }

    .nav-menu a:hover::after{
      width:100%;
    }

    .nav-actions{
      display:flex;
      align-items:center;
      gap:12px;
    }

    .btn{
      min-height:48px;
      padding:0 22px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:14px;
      font-size:.95rem;
      font-weight:900;
      transition:.25s ease;
      border:1px solid transparent;
      cursor:pointer;
    }

    .btn-primary{
      color:#fff;
      background:linear-gradient(135deg, var(--teal), #30c7a0);
      box-shadow:0 12px 24px rgba(33,184,146,.18);
    }

    .btn-primary:hover{
      transform:translateY(-2px);
      background:linear-gradient(135deg, var(--teal-dark), #26b690);
      box-shadow:0 16px 28px rgba(33,184,146,.24);
    }

    .btn-outline{
      color:var(--blue);
      border-color:rgba(29,79,156,.16);
      background:rgba(255,255,255,.92);
    }

    .btn-outline:hover{
      transform:translateY(-2px);
      border-color:rgba(33,184,146,.26);
      color:var(--teal-dark);
      box-shadow:0 10px 20px rgba(16,54,111,.07);
    }

    /* HERO */
    .hero{
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(circle at 82% 20%, rgba(255,255,255,.14), transparent 18%),
        radial-gradient(circle at 20% 80%, rgba(33,184,146,.12), transparent 18%),
        linear-gradient(135deg, #0c2e63 0%, #18478f 42%, #1d4f9c 70%, #1a9177 100%);
      color:#fff;
    }

    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle, rgba(255,255,255,.10) 0 1px, transparent 2px) 0 0 / 110px 110px,
        radial-gradient(circle, rgba(255,255,255,.06) 0 1px, transparent 2px) 30px 50px / 140px 140px;
      opacity:.55;
      pointer-events:none;
    }

    .hero::after{
      content:"";
      position:absolute;
      left:-5%;
      right:-5%;
      bottom:-70px;
      height:180px;
      background:
        radial-gradient(120% 120px at 50% 0%, rgba(255,255,255,.18), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.16));
      border-radius:50% 50% 0 0;
      pointer-events:none;
    }

    .hero-inner{
      min-height:700px;
      display:grid;
      grid-template-columns:1.02fr .98fr;
      gap:44px;
      align-items:center;
      padding:86px 0 132px;
    }

    .hero-copy h1{
      font-size:clamp(2.5rem, 4vw, 4.6rem);
      line-height:1.04;
      font-weight:900;
      letter-spacing:-.6px;
      max-width:720px;
      margin-bottom:18px;
    }

    .hero-copy p{
      max-width:610px;
      font-size:1.04rem;
      line-height:1.85;
      color:rgba(255,255,255,.90);
      margin-bottom:30px;
    }

    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      margin-bottom:28px;
    }

    .hero-tags{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
    }

    .hero-tag{
      padding:10px 14px;
      border-radius:999px;
      background:rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.16);
      color:#fff;
      font-size:.9rem;
      font-weight:800;
      backdrop-filter:blur(10px);
    }

    /* CITY VISUAL */
    .hero-visual{
      position:relative;
      min-height:450px;
      display:flex;
      align-items:flex-end;
      justify-content:center;
    }

    .city-scene{
      position:relative;
      width:min(100%, 590px);
      height:420px;
      transform:translateY(8px);
      transition:transform .25s ease-out;
    }

    .city-glow{
      position:absolute;
      left:10%;
      right:10%;
      bottom:24px;
      height:38px;
      border-radius:999px;
      background:radial-gradient(circle, rgba(141,245,225,.34) 0%, rgba(255,255,255,.10) 48%, transparent 74%);
      filter:blur(10px);
      animation:pulseGlow 6s ease-in-out infinite;
    }

    .water-line{
      position:absolute;
      left:12%;
      right:10%;
      bottom:18px;
      height:16px;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.58), rgba(255,255,255,.18));
    }

    .building{
      position:absolute;
      bottom:48px;
      border-radius:14px 14px 0 0;
      overflow:hidden;
      background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(196,229,248,.92));
      border:1px solid rgba(255,255,255,.42);
      box-shadow:0 18px 34px rgba(7,30,72,.16);
      animation:floatSoft 6s ease-in-out infinite;
    }

    .building::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        repeating-linear-gradient(to right, rgba(29,79,156,.14) 0 8px, transparent 8px 18px),
        repeating-linear-gradient(to bottom, rgba(255,255,255,.24) 0 10px, transparent 10px 22px);
      opacity:.95;
    }

    .building::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(33,184,146,.05), transparent 45%);
    }

    .b1{left:4%; width:60px; height:150px; animation-delay:0s;}
    .b2{left:16%; width:80px; height:220px; animation-delay:.6s;}
    .b3{left:29%; width:90px; height:275px; animation-delay:1s;}
    .b4{left:45%; width:112px; height:344px; animation-delay:.3s;}
    .b5{left:64%; width:92px; height:256px; animation-delay:1.2s;}
    .b6{left:79%; width:74px; height:188px; animation-delay:.8s;}

    .green-block{
      position:absolute;
      bottom:46px;
      border-radius:14px 14px 8px 8px;
      background:linear-gradient(180deg, #5bd5b5, var(--teal));
      box-shadow:0 14px 24px rgba(33,184,146,.18);
      animation:floatSoft 5.5s ease-in-out infinite;
    }

    .g1{left:10%; width:68px; height:34px; animation-delay:.4s;}
    .g2{left:56%; width:78px; height:38px; animation-delay:1s;}
    .g3{left:72%; width:56px; height:32px; animation-delay:.7s;}

    .dome{
      position:absolute;
      right:0;
      bottom:42px;
      width:126px;
      animation:floatSoft 6.4s ease-in-out infinite;
      animation-delay:1.1s;
    }

    .dome-top{
      width:76px;
      height:44px;
      margin:0 auto;
      background:linear-gradient(180deg, #fff, #e3f3ff);
      border-radius:76px 76px 0 0;
      border:1px solid rgba(255,255,255,.55);
    }

    .dome-body{
      width:116px;
      height:50px;
      margin:-2px auto 0;
      background:linear-gradient(180deg, #fff, #d9efff);
      border-radius:10px 10px 0 0;
      border:1px solid rgba(255,255,255,.55);
      padding:0 10px;
      display:flex;
      justify-content:space-evenly;
    }

    .dome-body span{
      width:10px;
      height:100%;
      background:rgba(29,79,156,.12);
      border-radius:3px 3px 0 0;
    }

    .dome-base{
      width:126px;
      height:10px;
      margin-top:4px;
      background:linear-gradient(180deg, #fff, #d6efff);
      border-radius:6px;
      border:1px solid rgba(255,255,255,.55);
    }

    /* SECTION */
    .section{
      position:relative;
      overflow:hidden;
      padding:84px 0;
      background:#ffffff;
      border-top:1px solid rgba(255,255,255,.7);
      border-bottom:1px solid rgba(29,79,156,.04);
    }

    .section.wave::before{
      content:none;
    }

    .section-header{
      margin-bottom:34px;
      position:relative;
      z-index:2;
    }

    .section-header h2{
      font-size:clamp(1.9rem, 2vw, 2.7rem);
      line-height:1.1;
      margin-bottom:12px;
      color:var(--blue-dark);
      font-weight:900;
      letter-spacing:-.3px;
    }

    .section-header p{
      max-width:760px;
      color:var(--muted);
      line-height:1.8;
      font-size:1rem;
    }

    /* ROW 1 */
    .row-1-grid{
      display:grid;
      grid-template-columns:1.02fr .98fr;
      gap:36px;
      align-items:center;
    }

    .about-copy p{
      color:var(--muted);
      line-height:1.85;
      margin-bottom:16px;
    }

    .about-actions{
      margin-top:22px;
      display:flex;
      flex-wrap:wrap;
      gap:12px;
    }

    .about-visual{
      min-height:350px;
      border-radius:var(--radius-xl);
      background:
        radial-gradient(circle at 84% 16%, rgba(33,184,146,.12), transparent 18%),
        linear-gradient(135deg, rgba(233,247,255,.96), rgba(255,255,255,.98));
      border:1px solid rgba(29,79,156,.08);
      box-shadow:var(--shadow);
      overflow:hidden;
      position:relative;
      padding:26px;
    }

    .about-visual::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:78px;
      background:linear-gradient(180deg, transparent, rgba(29,79,156,.04));
      pointer-events:none;
    }

    .campus-scene{
      position:relative;
      width:100%;
      height:260px;
      margin-top:26px;
    }

    .campus-b1,.campus-b2,.campus-b3{
      position:absolute;
      bottom:34px;
      border-radius:16px 16px 0 0;
      overflow:hidden;
      background:linear-gradient(180deg, #fff, #deefff);
      border:1px solid rgba(29,79,156,.09);
      box-shadow:0 16px 28px rgba(16,54,111,.09);
      animation:floatSoft 6.2s ease-in-out infinite;
    }

    .campus-b1::before,.campus-b2::before,.campus-b3::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        repeating-linear-gradient(to right, rgba(29,79,156,.14) 0 8px, transparent 8px 18px),
        repeating-linear-gradient(to bottom, rgba(255,255,255,.24) 0 10px, transparent 10px 20px);
    }

    .campus-b1{left:4%; width:104px; height:84px;}
    .campus-b2{left:24%; width:132px; height:112px; animation-delay:.4s;}
    .campus-b3{left:49%; width:196px; height:146px; animation-delay:.8s;}

    .campus-label{
      position:absolute;
      right:24px;
      bottom:60px;
      padding:9px 16px;
      border-radius:999px;
      background:linear-gradient(135deg, var(--blue), var(--teal));
      color:#fff;
      font-size:.84rem;
      font-weight:900;
      box-shadow:0 10px 22px rgba(16,54,111,.14);
    }

    .campus-land{
      position:absolute;
      left:0;
      right:0;
      bottom:20px;
      height:28px;
      border-radius:999px;
      background:linear-gradient(90deg, #9ce5cf, #4bc8aa, #9ce5cf);
      box-shadow:0 10px 22px rgba(33,184,146,.16);
    }

    /* CARD GRID */
    .card-grid{
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      gap:24px;
    }

    .card{
      background:rgba(255,255,255,.96);
      border:1px solid rgba(29,79,156,.08);
      border-radius:22px;
      box-shadow:var(--shadow);
      overflow:hidden;
      transition:.28s ease;
      position:relative;
    }

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

    .card::before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:4px;
      background:linear-gradient(90deg, var(--blue), var(--teal));
    }

    .card-media{
      height:108px;
      background:
        radial-gradient(circle at 84% 18%, rgba(255,255,255,.52), transparent 18%),
        linear-gradient(135deg, #22569d 0%, #3f87bf 58%, #95e0d1 100%);
      position:relative;
      overflow:hidden;
    }

    .card-media::before{
      content:"";
      position:absolute;
      left:18px;
      top:20px;
      width:64px;
      height:42px;
      border-radius:14px;
      background:rgba(255,255,255,.18);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
    }

    .card-media::after{
      content:"";
      position:absolute;
      left:18px;
      right:18px;
      bottom:18px;
      height:16px;
      border-radius:999px;
      background:rgba(255,255,255,.24);
    }

    .card-body{
      padding:22px 20px 20px;
    }

    .card h3{
      color:var(--blue-dark);
      font-size:1.34rem;
      line-height:1.2;
      margin-bottom:10px;
      font-weight:900;
    }

    .card p{
      color:var(--muted);
      font-size:.95rem;
      line-height:1.75;
    }

    #services .services-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:22px;
      align-items:stretch;
    }

    #services .service-card{
      position:relative;
      display:flex;
      flex-direction:column;
      gap:18px;
      height:100%;
      padding:26px 24px 24px;
      border-radius:24px;
      background:#ffffff;
      border:1px solid rgba(29,79,156,.12);
      box-shadow:0 12px 30px rgba(16,54,111,.08);
      overflow:hidden;
      transition:.28s ease;
    }

    #services .service-card::before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:4px;
      background:linear-gradient(90deg, var(--blue), var(--teal));
      opacity:0;
      transition:.28s ease;
    }

    #services .service-card:hover{
      transform:translateY(-6px);
      box-shadow:0 18px 42px rgba(16,54,111,.12);
    }

    #services .service-card:hover::before{
      opacity:1;
    }

    #services .service-icon{
      width:70px;
      height:70px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:18px;
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,247,255,.96));
      box-shadow:
        inset 0 0 0 1px rgba(29,79,156,.04),
        0 12px 24px rgba(16,54,111,.06);
      color:var(--blue);
    }

    #services .service-icon i{
      font-size:2rem;
      color:var(--blue);
    }

    #services .service-card h3{
      color:var(--blue-dark);
      font-size:1.18rem;
      line-height:1.4;
      font-weight:900;
    }

    #services .service-card p{
      color:var(--muted);
      font-size:.98rem;
      line-height:1.8;
    }

    @media (max-width:1100px){
      #services .services-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
    }

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

    #product .services-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:22px;
      align-items:stretch;
    }

    #product .service-card{
      position:relative;
      display:flex;
      flex-direction:column;
      gap:18px;
      height:100%;
      padding:26px 24px 24px;
      border-radius:24px;
      background:#ffffff;
      border:1px solid rgba(29,79,156,.12);
      box-shadow:0 12px 30px rgba(16,54,111,.08);
      overflow:hidden;
      transition:.28s ease;
    }

    #product .service-card::before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:4px;
      background:linear-gradient(90deg, var(--blue), var(--teal));
      opacity:0;
      transition:.28s ease;
    }

    #product .service-card:hover{
      transform:translateY(-6px);
      box-shadow:0 18px 42px rgba(16,54,111,.12);
    }

    #product .service-card:hover::before{
      opacity:1;
    }

    #product .service-icon{
      width:78px;
      height:78px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:20px;
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,247,255,.96));
      box-shadow:
        inset 0 0 0 1px rgba(29,79,156,.04),
        0 12px 24px rgba(16,54,111,.06);
      padding:12px;
    }

    #product .service-icon img{
      width:100%;
      max-width:52px;
      max-height:52px;
      object-fit:contain;
    }

    #product .service-icon-wide{
      width:116px;
      justify-content:flex-start;
      padding-inline:16px;
    }

    #product .service-icon-wide img{
      max-width:84px;
    }

    #product .service-card h3{
      color:var(--blue-dark);
      font-size:1.18rem;
      line-height:1.4;
      font-weight:900;
    }

    #product .service-card p{
      color:var(--muted);
      font-size:.98rem;
      line-height:1.8;
    }

    @media (max-width:1100px){
      #product .services-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width:700px){
      #product .services-grid{
        grid-template-columns:1fr;
      }

      #product .service-icon-wide{
        width:100px;
      }
    }

    #existing-projects .services-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:20px;
      align-items:stretch;
    }

    #existing-projects .service-card{
      position:relative;
      display:flex;
      flex-direction:column;
      gap:16px;
      height:100%;
      padding:22px 20px 20px;
      border-radius:22px;
      background:#ffffff;
      border:1px solid rgba(29,79,156,.12);
      box-shadow:0 12px 28px rgba(16,54,111,.08);
      overflow:hidden;
      transition:.28s ease;
    }

    #existing-projects .service-card::before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:4px;
      background:linear-gradient(90deg, var(--blue), var(--teal));
      opacity:0;
      transition:.28s ease;
    }

    #existing-projects .service-card:hover{
      transform:translateY(-6px);
      box-shadow:0 18px 38px rgba(16,54,111,.12);
    }

    #existing-projects .service-card:hover::before{
      opacity:1;
    }

    #existing-projects .service-icon{
      width:68px;
      height:68px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:18px;
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,247,255,.96));
      box-shadow:
        inset 0 0 0 1px rgba(29,79,156,.04),
        0 10px 22px rgba(16,54,111,.06);
      color:var(--blue);
    }

    #existing-projects .service-icon i{
      font-size:1.9rem;
      color:var(--blue);
    }

    #existing-projects .service-card h3{
      color:var(--blue-dark);
      font-size:1.08rem;
      line-height:1.35;
      font-weight:900;
    }

    #existing-projects .service-card p{
      color:var(--muted);
      font-size:.93rem;
      line-height:1.65;
    }

    @media (max-width:1100px){
      #existing-projects .services-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width:700px){
      #existing-projects .services-grid{
        grid-template-columns:1fr;
      }
    }

    #focus-services .features-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:24px;
      max-width:900px;
      margin:0 auto;
      align-items:stretch;
    }

    #focus-services .feature-item{
      text-align:center;
      padding:28px 24px;
      background:#ffffff;
      border:1px solid rgba(29,79,156,.12);
      border-radius:24px;
      box-shadow:0 12px 30px rgba(16,54,111,.08);
      transition:.28s ease;
    }

    #focus-services .feature-item:hover{
      transform:translateY(-6px);
      box-shadow:0 18px 40px rgba(16,54,111,.12);
    }

    #focus-services .feature-icon{
      width:80px;
      height:80px;
      margin:0 auto 18px;
      border-radius:50%;
      background:linear-gradient(135deg, var(--blue), var(--teal));
      box-shadow:0 14px 28px rgba(16,54,111,.14);
      display:flex;
      align-items:center;
      justify-content:center;
    }

    #focus-services .feature-icon::before{
      content:none;
    }

    #focus-services .feature-icon i{
      font-size:2rem;
      color:#ffffff;
    }

    #focus-services .feature-item h3{
      color:var(--blue-dark);
      font-size:1.2rem;
      line-height:1.4;
      font-weight:900;
      margin-bottom:12px;
    }

    #focus-services .feature-item p{
      color:var(--muted);
      font-size:.98rem;
      line-height:1.75;
    }

    @media (max-width:700px){
      #focus-services .features-grid{
        grid-template-columns:1fr;
      }
    }

    #why-choose .features-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:24px;
      align-items:stretch;
    }

    #why-choose .feature-item{
      text-align:center;
      padding:28px 22px;
      background:#ffffff;
      border:1px solid rgba(29,79,156,.12);
      border-radius:24px;
      box-shadow:0 12px 30px rgba(16,54,111,.08);
      transition:.28s ease;
    }

    #why-choose .feature-item:hover{
      transform:translateY(-6px);
      box-shadow:0 18px 40px rgba(16,54,111,.12);
    }

    #why-choose .feature-icon{
      width:78px;
      height:78px;
      margin:0 auto 18px;
      border-radius:50%;
      background:linear-gradient(135deg, var(--blue), var(--teal));
      box-shadow:0 14px 28px rgba(16,54,111,.14);
      display:flex;
      align-items:center;
      justify-content:center;
    }

    #why-choose .feature-icon::before{
      content:none;
    }

    #why-choose .feature-icon i{
      font-size:1.95rem;
      color:#ffffff;
    }

    #why-choose .feature-item h3{
      color:var(--blue-dark);
      font-size:1.16rem;
      line-height:1.38;
      font-weight:900;
      margin-bottom:12px;
    }

    #why-choose .feature-item p{
      color:var(--muted);
      font-size:.96rem;
      line-height:1.72;
    }

    @media (max-width:1100px){
      #why-choose .features-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width:700px){
      #why-choose .features-grid{
        grid-template-columns:1fr;
      }
    }

    /* Unified card system */
    #services .services-grid,
    #product .services-grid,
    #existing-projects .services-grid,
    #focus-services .features-grid,
    #why-choose .features-grid{
      display:grid;
      gap:24px;
      align-items:stretch;
    }

    #services .services-grid,
    #product .services-grid,
    #existing-projects .services-grid{
      grid-template-columns:repeat(3, minmax(0, 1fr));
    }

    #focus-services .features-grid,
    #why-choose .features-grid{
      grid-template-columns:repeat(2, minmax(0, 1fr));
      max-width:980px;
      margin:0 auto;
    }

    #services .card-base,
    #product .card-base,
    #existing-projects .card-base,
    #focus-services .card-base,
    #why-choose .card-base{
      position:relative;
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      justify-content:flex-start;
      gap:16px;
      height:100%;
      min-height:292px;
      padding:24px;
      text-align:left;
      background:#ffffff;
      border:1px solid rgba(29,79,156,.12);
      border-radius:24px;
      box-shadow:0 12px 30px rgba(16,54,111,.08);
      overflow:hidden;
      transition:.28s ease;
    }

    #services .card-base::before,
    #product .card-base::before,
    #existing-projects .card-base::before,
    #focus-services .card-base::before,
    #why-choose .card-base::before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:4px;
      background:linear-gradient(90deg, var(--blue), var(--teal));
      opacity:0;
      transition:.28s ease;
    }

    #services .card-base:hover,
    #product .card-base:hover,
    #existing-projects .card-base:hover,
    #focus-services .card-base:hover,
    #why-choose .card-base:hover{
      transform:translateY(-6px);
      box-shadow:0 18px 40px rgba(16,54,111,.12);
    }

    #services .card-base:hover::before,
    #product .card-base:hover::before,
    #existing-projects .card-base:hover::before,
    #focus-services .card-base:hover::before,
    #why-choose .card-base:hover::before{
      opacity:1;
    }

    #services .card-base-icon,
    #product .card-base-icon,
    #existing-projects .card-base-icon,
    #focus-services .card-base-icon,
    #why-choose .card-base-icon{
      width:72px;
      height:72px;
      min-width:72px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      align-self:flex-start;
      margin:0;
      padding:12px;
      border-radius:20px;
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,247,255,.96));
      box-shadow:
        inset 0 0 0 1px rgba(29,79,156,.04),
        0 12px 24px rgba(16,54,111,.06);
      color:var(--blue);
      flex-shrink:0;
    }

    #focus-services .card-base-icon::before,
    #why-choose .card-base-icon::before{
      content:none;
    }

    #services .card-base-icon i,
    #existing-projects .card-base-icon i,
    #focus-services .card-base-icon i,
    #why-choose .card-base-icon i{
      font-size:1.9rem;
      color:var(--blue);
    }

    #product .card-base-icon img{
      width:auto;
      max-width:100%;
      max-height:100%;
      object-fit:contain;
    }

    #services .card-base h3,
    #product .card-base h3,
    #existing-projects .card-base h3,
    #focus-services .card-base h3,
    #why-choose .card-base h3{
      color:var(--blue-dark);
      font-size:1.14rem;
      line-height:1.4;
      font-weight:900;
      margin:0;
    }

    #services .card-base p,
    #product .card-base p,
    #existing-projects .card-base p,
    #focus-services .card-base p,
    #why-choose .card-base p{
      color:var(--muted);
      font-size:.96rem;
      line-height:1.72;
      margin:0;
    }

    @media (max-width:1100px){
      #services .services-grid,
      #product .services-grid,
      #existing-projects .services-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width:700px){
      #services .services-grid,
      #product .services-grid,
      #existing-projects .services-grid,
      #focus-services .features-grid,
      #why-choose .features-grid{
        grid-template-columns:1fr;
      }

      #services .card-base,
      #product .card-base,
      #existing-projects .card-base,
      #focus-services .card-base,
      #why-choose .card-base{
        min-height:auto;
      }
    }
    #portfolio .portfolio-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:22px;
      align-items:stretch;
    }

    #portfolio .portfolio-link{
      display:block;
      color:inherit;
      text-decoration:none;
    }

    #portfolio .portfolio-item{
      position:relative;
      height:100%;
      min-height:230px;
      border-radius:24px;
      overflow:hidden;
      border:1px solid rgba(29,79,156,.12);
      box-shadow:0 12px 30px rgba(16,54,111,.08);
      background:
        radial-gradient(circle at 84% 18%, rgba(255,255,255,.52), transparent 18%),
        linear-gradient(180deg, #ffffff, #f4f9ff);
      transition:.28s ease;
    }

    #portfolio .portfolio-item:hover{
      transform:translateY(-6px);
      box-shadow:0 18px 40px rgba(16,54,111,.12);
    }

    #portfolio .portfolio-item img{
      width:100%;
      height:220px;
      object-fit:contain;
      padding:30px;
      transition:transform .28s ease;
    }

    #portfolio .portfolio-item:hover img{
      transform:scale(1.04);
    }

    #portfolio .portfolio-overlay{
      position:absolute;
      inset:0;
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      padding:22px;
      background:linear-gradient(180deg, rgba(16,54,111,0) 28%, rgba(16,54,111,.84) 100%);
      opacity:0;
      transition:opacity .28s ease;
    }

    #portfolio .portfolio-item:hover .portfolio-overlay,
    #portfolio .portfolio-link:hover .portfolio-overlay,
    #portfolio .portfolio-link:focus-visible .portfolio-overlay{
      opacity:1;
    }

    #portfolio .portfolio-overlay h3{
      color:#ffffff;
      font-size:1.12rem;
      line-height:1.35;
      font-weight:900;
      margin-bottom:6px;
    }

    #portfolio .portfolio-overlay p{
      color:rgba(255,255,255,.92);
      font-size:.92rem;
      line-height:1.6;
    }

    @media (max-width:1100px){
  
    #portfolio .portfolio-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
    }

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

      #portfolio .portfolio-item img{
        height:200px;
        padding:24px;
      }

      #portfolio .portfolio-overlay{
        opacity:1;
      }
    }

    /* LOGO STRIP */
    .logo-strip{
      display:grid;
      grid-template-columns:repeat(5, 1fr);
      gap:16px;
      margin-bottom:40px;
    }

    .logo-pill{
      min-height:82px;
      padding:14px 16px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      border-radius:18px;
      background:rgba(255,255,255,.96);
      border:1px solid rgba(29,79,156,.08);
      box-shadow:var(--shadow);
      font-weight:900;
      font-size:1.05rem;
      color:var(--blue);
      transition:.25s ease;
    }

    .logo-pill:nth-child(even){
      color:var(--teal-dark);
    }

    .logo-pill:hover{
      transform:translateY(-4px);
    }

    /* PROJECT */
    .project-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:24px;
      margin-bottom:40px;
    }

    .project-card{
      min-height:220px;
      padding:22px;
      border-radius:22px;
      background:rgba(255,255,255,.96);
      border:1px solid rgba(29,79,156,.08);
      box-shadow:var(--shadow);
      transition:.28s ease;
    }

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

    .project-icon{
      width:78px;
      height:78px;
      border-radius:22px;
      margin-bottom:18px;
      background:linear-gradient(135deg, var(--blue), var(--teal));
      box-shadow:0 14px 24px rgba(16,54,111,.16);
      position:relative;
    }

    .project-icon::before{
      content:"";
      position:absolute;
      left:20px;
      top:18px;
      width:38px;
      height:12px;
      border-radius:8px;
      background:rgba(255,255,255,.88);
    }

    .project-icon::after{
      content:"";
      position:absolute;
      left:28px;
      top:36px;
      width:22px;
      height:22px;
      border-radius:50%;
      background:rgba(255,255,255,.88);
    }

    .project-card h3{
      color:var(--blue-dark);
      font-size:1.3rem;
      margin-bottom:10px;
      font-weight:900;
    }

    .project-card p{
      color:var(--muted);
      font-size:.95rem;
      line-height:1.75;
    }

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

    .feature-box{
      min-height:172px;
      padding:22px;
      border-radius:20px;
      background:rgba(255,255,255,.96);
      border:1px solid rgba(29,79,156,.08);
      box-shadow:var(--shadow);
      transition:.25s ease;
    }

    .feature-box:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-hover);
    }

    .feature-top{
      display:flex;
      align-items:center;
      gap:14px;
      margin-bottom:14px;
    }

    .feature-icon{
      width:56px;
      height:56px;
      border-radius:18px;
      background:linear-gradient(135deg, var(--blue), var(--teal));
      box-shadow:0 10px 18px rgba(16,54,111,.14);
      flex-shrink:0;
      position:relative;
    }

    .feature-icon::before{
      content:"";
      position:absolute;
      inset:15px;
      border-radius:8px;
      background:rgba(255,255,255,.88);
    }

    .feature-box h3{
      color:var(--blue-dark);
      font-size:1.12rem;
      line-height:1.24;
      font-weight:900;
    }

    .feature-box p{
      color:var(--muted);
      font-size:.94rem;
      line-height:1.7;
    }

    .section-header p{
      text-wrap:pretty;
    }

    .logo-pill{
      text-wrap:balance;
    }

    .card,
    .project-card,
    .feature-box,
    .client-card{
      height:100%;
    }

    .card,
    .project-card,
    .feature-box{
      display:flex;
      flex-direction:column;
    }

    .card-body,
    .client-copy{
      padding:22px 20px 20px;
      display:flex;
      flex-direction:column;
      gap:10px;
      flex:1;
    }

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

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

    .client-card-link{
      color:inherit;
      text-decoration:none;
      display:block;
    }

    .client-media{
      min-height:168px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:20px;
      background:
        radial-gradient(circle at 84% 18%, rgba(255,255,255,.52), transparent 18%),
        linear-gradient(135deg, rgba(34,86,157,.16) 0%, rgba(63,135,191,.22) 58%, rgba(149,224,209,.28) 100%);
    }

    .client-media img{
      width:100%;
      max-width:180px;
      height:120px;
      object-fit:contain;
    }

    .social-links{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:16px;
    }

    .social-links a{
      width:40px;
      height:40px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(255,255,255,.08);
      color:#fff;
      transition:.25s ease;
    }

    .social-links a:hover{
      transform:translateY(-2px);
      background:rgba(255,255,255,.16);
    }
    /* FOOTER */
    .site-footer{
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(circle at 84% 18%, rgba(255,255,255,.08), transparent 18%),
        linear-gradient(135deg, #0a2852 0%, #10366f 42%, #1d4f9c 76%, #17896f 100%);
      color:rgba(255,255,255,.92);
      padding:66px 0 26px;
    }

    .site-footer::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle, rgba(255,255,255,.08) 0 1px, transparent 2px) 0 0 / 140px 140px,
        linear-gradient(180deg, transparent, rgba(255,255,255,.03));
      opacity:.6;
      pointer-events:none;
    }

    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr 1fr 1fr 1.1fr;
      gap:28px;
      padding-bottom:28px;
      border-bottom:1px solid rgba(255,255,255,.14);
      position:relative;
      z-index:2;
    }

    .footer-brand{
      display:flex;
      align-items:center;
      gap:14px;
      margin-bottom:14px;
    }

    .footer-brand .brand-logo{
      background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.14);
    }

    .footer-brand-text strong{
      display:block;
      color:#fff;
      font-size:1.6rem;
      font-weight:900;
      line-height:1;
    }

    .footer-brand-text span{
      display:block;
      color:#98f0da;
      font-size:1rem;
      font-weight:800;
    }

    .footer-col h4{
      color:#fff;
      font-size:1.16rem;
      margin-bottom:14px;
      font-weight:900;
    }

    .footer-col p,
    .footer-col li,
    .footer-col a{
      color:rgba(255,255,255,.82);
      font-size:.96rem;
      line-height:1.85;
    }

    .footer-col ul{
      list-style:none;
    }

    .footer-bottom{
      text-align:center;
      padding-top:18px;
      color:rgba(255,255,255,.70);
      font-size:.92rem;
      position:relative;
      z-index:2;
    }

    /* REVEAL */
    .reveal{
      opacity:0;
      transform:translateY(24px);
      transition:all .7s ease;
    }

    .reveal.show{
      opacity:1;
      transform:translateY(0);
    }

    /* ANIMATION */
    @keyframes floatSoft{
      0%,100%{transform:translateY(0)}
      50%{transform:translateY(-5px)}
    }

    @keyframes pulseGlow{
      0%,100%{opacity:.72;transform:scale(1)}
      50%{opacity:1;transform:scale(1.03)}
    }

    /* UI SYSTEM REFINEMENT */
    :root{
      --btn-radius:16px;
      --btn-py:14px;
      --btn-px:26px;
      --card-pad:24px;
      --section-space:108px;
      --grid-min:260px;
    }

    .section{
      padding:var(--section-space) 0;
    }

    .section-header{
      margin-bottom:44px;
      text-align:center;
    }

    .section-header h2{
      margin-bottom:12px;
    }

    .section-header p,
    .about-copy p,
    .card p,
    .project-card p,
    .feature-box p,
    .client-copy p{
      line-height:1.8;
    }

    .section-header p{
      max-width:680px;
      margin-inline:auto;
    }

    .card-grid{
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:24px;
      align-items:stretch;
    }

    .project-grid{
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:24px;
      align-items:stretch;
    }

    .feature-grid{
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:20px;
      align-items:stretch;
    }

    .focus-grid{
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:20px;
      align-items:stretch;
    }

    .client-grid{
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:24px;
      align-items:stretch;
    }

    .logo-strip{
      grid-template-columns:repeat(5, minmax(0, 1fr));
      gap:18px;
    }

    .about-copy .section-header{
      text-align:left;
    }

    .about-copy .section-header p{
      max-width:none;
      margin-inline:0;
    }

    .card,
    .project-card,
    .feature-box,
    .client-card,
    .logo-pill{
      border-radius:24px;
    }

    .card,
    .project-card,
    .feature-box,
    .client-card{
      box-shadow:0 14px 34px rgba(16,54,111,.09);
    }

    .card:hover,
    .project-card:hover,
    .feature-box:hover,
    .client-card:hover,
    .logo-pill:hover{
      transform:translateY(-6px);
      box-shadow:0 18px 42px rgba(16,54,111,.14);
    }

    .card-body,
    .project-card,
    .feature-box,
    .client-copy{
      padding:var(--card-pad);
    }

    .card-body,
    .client-copy,
    .project-card,
    .feature-box{
      gap:12px;
    }

    .card h3,
    .project-card h3,
    .feature-box h3,
    .client-copy h3{
      margin-bottom:0;
    }

    .card-media{
      height:124px;
    }

    .card-media::before{
      width:58px;
      height:58px;
      left:22px;
      top:22px;
      border-radius:16px;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-family:"Font Awesome 6 Free";
      font-weight:900;
      font-size:1.32rem;
      background:rgba(255,255,255,.16);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
      backdrop-filter:blur(2px);
      content:"\f0e8";
    }

    .card-media::after{
      left:22px;
      right:auto;
      bottom:22px;
      width:128px;
      height:14px;
      border-radius:999px;
      background:rgba(255,255,255,.22);
    }

    .card-grid .card:nth-child(1) .card-media::before{ content:"\f0e8"; }
    .card-grid .card:nth-child(2) .card-media::before{ content:"\f19c"; }
    .card-grid .card:nth-child(3) .card-media::before{ content:"\f544"; }
    .card-grid .card:nth-child(4) .card-media::before{ content:"\f121"; }
    .card-grid .card:nth-child(5) .card-media::before{ content:"\f1c0"; }
    .card-grid .card:nth-child(6) .card-media::before{ content:"\f3ed"; }

    .project-grid + .feature-grid{
      margin-top:24px;
    }

    .btn{
      min-height:56px;
      padding:var(--btn-py) var(--btn-px);
      border-radius:var(--btn-radius);
      font-size:1rem;
      line-height:1;
    }

    .nav-actions .btn{
      min-height:52px;
      padding:12px 22px;
    }

    .hero-inner{
      min-height:660px;
      grid-template-columns:1.14fr .86fr;
      gap:32px;
      padding:96px 0 124px;
    }

    .hero-copy h1{
      max-width:680px;
      margin-bottom:20px;
    }

    .hero-copy p{
      max-width:600px;
      margin-bottom:34px;
    }

    .hero-actions{
      gap:16px;
      margin-bottom:34px;
    }

    .hero .btn{
      min-height:60px;
      padding:16px 30px;
      border-radius:18px;
      font-size:1rem;
    }

    .hero-visual{
      min-height:360px;
      align-items:center;
      opacity:.9;
    }

    .city-scene{
      width:min(100%, 500px);
      height:340px;
    }

    .b1,
    .b6,
    .g1,
    .g3,
    .water-line{
      display:none;
    }

    .b2{ left:8%; width:86px; height:200px; }
    .b3{ left:26%; width:96px; height:248px; }
    .b4{ left:47%; width:112px; height:316px; }
    .b5{ left:69%; width:94px; height:234px; }
    .g2{ left:56%; width:74px; height:34px; }
    .dome{ right:4%; width:118px; }

    .hero-tags{
      gap:10px;
    }

    .hero-tag{
      padding:10px 16px;
      font-size:.92rem;
    }

    .row-1-grid{
      gap:44px;
    }

    .about-visual{
      min-height:380px;
      padding:30px;
    }

    .campus-scene{
      height:280px;
      margin-top:18px;
    }

    .footer-grid{
      gap:32px;
    }

    @media (max-width:1100px){
      .hero-inner{
        grid-template-columns:1fr;
        min-height:auto;
        padding:78px 0 118px;
      }

      .hero-visual{
        min-height:320px;
      }
    }

    @media (max-width:700px){
      :root{
        --section-space:84px;
        --grid-min:100%;
      }

      .hero .btn,
      .btn{
        width:100%;
      }

      .hero-actions{
        align-items:stretch;
      }

      .hero-visual{
        min-height:280px;
      }

      .city-scene{
        width:min(100%, 360px);
        height:260px;
      }
    }
    /* RESPONSIVE */
    @media (max-width:1100px){
      .hero-inner,
      .row-1-grid,
      .footer-grid{
        grid-template-columns:1fr;
      }

      .card-grid,
      .project-grid,
      .feature-grid{
        grid-template-columns:repeat(2,1fr);
      }

      .logo-strip{
        grid-template-columns:repeat(3,1fr);
      }

      .nav-menu{
        display:none;
      }

      .hero-inner{
        min-height:auto;
        padding:68px 0 120px;
      }
    }

    @media (max-width:700px){
      .container{
        width:min(var(--container), calc(100% - 24px));
      }

      .nav-wrap{
        min-height:74px;
      }

      .brand-text strong{
        font-size:1.04rem;
      }

      .brand-text span{
        font-size:.88rem;
      }

      .hero-copy h1{
        font-size:2.05rem;
      }

      .hero-actions,
      .about-actions{
        flex-direction:column;
        align-items:stretch;
      }

      .btn{
        width:100%;
      }

      .card-grid,
      .logo-strip,
      .project-grid,
      .feature-grid{
        grid-template-columns:1fr;
      }

      .city-scene{
        height:310px;
      }

      .b1{width:44px;height:96px}
      .b2{width:56px;height:136px}
      .b3{width:62px;height:170px}
      .b4{width:74px;height:218px}
      .b5{width:58px;height:152px}
      .b6{width:46px;height:112px}
      .dome{
        transform:scale(.82);
        transform-origin:bottom right;
      }
    }


    @media (max-width:1100px){
      .focus-grid,
      .client-grid{
        grid-template-columns:repeat(2,1fr);
      }

      .hero-inner{
        padding:78px 0 118px;
      }
    }

    @media (max-width:700px){
      .focus-grid,
      .client-grid{
        grid-template-columns:1fr;
      }

      .hero-visual{
        min-height:280px;
      }

      .city-scene{
        width:min(100%, 360px);
        height:260px;
      }
    }

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