*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:"Poppins",Arial,sans-serif;background:#050b14;color:#edf5ff;line-height:1.6;overflow-x:hidden}a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}.section{width:min(1180px,92%);margin:auto;padding:120px 0}.navbar{position:fixed;z-index:50;top:0;left:0;width:100%;height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;background:rgba(5,11,20,.72);backdrop-filter:blur(18px);border-bottom:1px solid rgba(130,190,255,.08)}.brand{font-family:"Poppins";font-weight:700;letter-spacing:-.03em}.brand span{color:#48a9ff}.navbar nav{display:flex;gap:28px;align-items:center;font-size:13px;color:#aabbd0}.navbar nav a:hover{color:#fff}.nav-cta{padding:10px 18px;border:1px solid #2388e9;border-radius:30px;color:#fff!important}.menu-btn{display:none;background:none;border:0}.hero{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:40px;padding-top:150px}.eyebrow{font-size:11px;letter-spacing:.2em;color:#4caeff;font-weight:700;margin-bottom:18px}.hero h1,h2{font-family:"Poppins";line-height:.98;letter-spacing:-.05em}.hero h1{font-size:clamp(52px,8vw,105px);max-width:850px}.hero h1 span,h2 span{color:#48a9ff}.hero-text{max-width:650px;color:#91a4ba;margin:28px 0;font-size:16px}.hero-actions{display:flex;gap:12px}.btn{border:0;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;padding:14px 23px;border-radius:7px;font-weight:700;font-size:13px;transition:.25s}.btn.primary{background:#1686ea;color:#fff;box-shadow:0 10px 30px rgba(22,134,234,.2)}.btn.primary:hover{transform:translateY(-2px);background:#2697f7}.btn.ghost{border:1px solid #29405b;color:#dbeaff}.hero-meta{display:flex;gap:55px;margin-top:70px}.hero-meta div{display:flex;flex-direction:column}.hero-meta strong{font-family:"Poppins";font-size:14px}.hero-meta span,.muted{font-size:12px;color:#71859b}.hero-visual{height:600px;position:relative;display:flex;align-items:center;justify-content:center}.glow{position:absolute;width:330px;height:330px;background:#1679d9;filter:blur(120px);opacity:.2}.profile-frame{position:relative;width:min(410px,90%);height:510px;border:none;background:transparent;overflow:visible;box-shadow:none}.profile-frame img{width:100%;height:100%;object-fit:contain;border:none;background:transparent}.photo-fallback{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;background:transparent}.photo-fallback span{font:700 90px "Poppins";color:#48a9ff}.photo-fallback small{letter-spacing:.2em;color:#6f8ba8}.floating-card span{color:#48a9ff}.section-head{margin-bottom:55px}.section-head h2{font-size:clamp(42px,6vw,78px)}.section-head.row{display:flex;justify-content:space-between;align-items:end;gap:30px}.about{border-top:1px solid #172536}.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:90px}.large-copy{font:600 clamp(27px,3.5vw,48px)/1.25 "Poppins";letter-spacing:-.03em}.about-details{color:#8498ad}.facts{margin-top:40px;border-top:1px solid #223448}.facts div{display:flex;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px solid #223448}.facts b{color:#fff}.portfolio{border-top:1px solid #172536}.portfolio-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.project{background:#0a1421;border:1px solid #172b3e;overflow:hidden}.project img{display:block;width:100%;height:360px;object-fit:cover;background:linear-gradient(135deg,#0e2941,#07101c)}.project.tall img{height:510px}.project div{padding:20px}.project span{font-size:10px;letter-spacing:.15em;color:#4caeff}.project h3{font:600 24px "Poppins";margin-top:5px}.services{border-top:1px solid #172536}.service-list{border-top:1px solid #24384e}.service-list>div{display:grid;grid-template-columns:70px 1fr 1fr;gap:30px;padding:32px 0;border-bottom:1px solid #24384e;align-items:start}.service-list b{color:#48a9ff}.service-list h3{font:600 22px "Poppins"}.service-list p{color:#7f93aa;max-width:430px}.products{border-top:1px solid #172536}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.product{background:#0a1421;border:1px solid #1b3045;padding:28px;display:flex;flex-direction:column;min-height:310px;transition:.25s}.product:hover{border-color:#2e8fdc;transform:translateY(-5px)}.product-tag{font-size:10px;color:#4caeff;letter-spacing:.14em}.product h3{font:600 22px "Poppins";margin:25px 0 10px}.price{font:700 26px "Poppins";margin-bottom:20px}.product p{color:#8094aa;font-size:13px;flex:1}.features{list-style:none;margin:15px 0 25px;color:#b4c6d9;font-size:12px}.features li{margin:7px 0}.features li:before{content:"✓";color:#48a9ff;margin-right:8px}.product .btn{width:100%}.order{padding-bottom:150px}.order-box{display:grid;grid-template-columns:1fr 1fr;gap:70px;background:linear-gradient(120deg,#0b1d30,#08111d);border:1px solid #1b354d;padding:55px}.order-box h2{font-size:clamp(43px,5vw,70px)}.order-box>div>p:last-child{color:#8195ab;max-width:430px;margin-top:25px}.order form{display:flex;flex-direction:column;gap:15px}.order label{font-size:12px;color:#9cb0c5}.order input,.order select,.order textarea{width:100%;margin-top:7px;padding:13px 14px;background:#07111e;border:1px solid #263d53;color:#fff;border-radius:5px;outline:none}.order input:focus,.order select:focus,.order textarea:focus{border-color:#318ed8}.form-note{color:#61768c;font-size:10px}.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(1,6,12,.78);backdrop-filter:blur(12px);padding:20px}.modal.show{display:flex}.modal-card{position:relative;width:min(550px,100%);background:#0a1523;border:1px solid #29435d;padding:42px}.modal-card h2{font-size:45px}.modal-card>p:not(.eyebrow){color:#8da1b7;margin:20px 0}.modal-price{font:700 26px "Poppins";color:#48a9ff}.modal-card ul{padding-left:20px;color:#b8c8d8;margin-bottom:28px}.modal-close{position:absolute;right:18px;top:12px;background:none;border:0;color:#9db0c4;font-size:30px;cursor:pointer}footer{border-top:1px solid #172536;padding:50px 4%;display:grid;grid-template-columns:1fr auto auto;gap:50px;align-items:end;color:#7890a8}footer .brand{color:#fff}footer p{font-size:12px;margin-top:10px}.footer-links{display:flex;gap:20px;font-size:12px}.footer-links a:hover{color:#fff}.copyright{text-align:right}.loader{position:fixed;inset:0;background:#050b14;z-index:200;display:grid;place-items:center;transition:.5s}.loader.hide{opacity:0;pointer-events:none}.loader-logo{font:800 42px "Poppins"}.loader-logo span{color:#48a9ff}
@media(max-width:800px){.navbar nav{position:absolute;top:78px;left:0;width:100%;display:none;flex-direction:column;align-items:flex-start;padding:25px 5%;background:#07101c;border-bottom:1px solid #1b3045}.navbar nav.open{display:flex}.menu-btn{display:flex;flex-direction:column;gap:5px}.menu-btn span{display:block;width:25px;height:2px;background:#fff}.hero{grid-template-columns:1fr;padding-top:125px}.hero-visual{height:470px}.profile-frame{height:420px}.about-grid,.order-box{grid-template-columns:1fr;gap:45px}.portfolio-grid,.product-grid{grid-template-columns:1fr}.project.tall img,.project img{height:380px}.service-list>div{grid-template-columns:45px 1fr}.service-list p{grid-column:2}.section-head.row{display:block}.section-head.row .muted{margin-top:15px}footer{grid-template-columns:1fr}.copyright{text-align:left}.hero-meta{gap:25px;margin-top:45px}.order-box{padding:30px 22px}}

/* Professional Poppins polish */
body{font-weight:400;letter-spacing:-.01em}
h1,h2,h3,.brand,.btn,.price,.modal-price{font-family:"Poppins",Arial,sans-serif}
h1,h2{font-weight:700}
.hero h1{font-weight:700;letter-spacing:-.045em}
.section-head h2{font-weight:700;letter-spacing:-.035em}
.brand{font-weight:700}
.navbar{height:82px}
.navbar nav{font-weight:500}
.nav-cta{font-weight:600}
.btn{font-weight:600;letter-spacing:-.01em}
.hero-text,.about-details,.service-list p,.product p,.order-box>div>p:last-child{line-height:1.8}
.eyebrow{font-weight:600;letter-spacing:.16em}
.project,.product,.order-box{border-radius:12px}
.project{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.project:hover{transform:translateY(-5px);border-color:#112770;box-shadow:0 20px 50px rgba(0,0,0,.18)}
.project img{transition:transform .45s ease}
.project:hover img{transform:scale(1.025)}
.product{border-radius:12px;box-shadow:0 10px 35px rgba(0,0,0,.08)}
.product h3{font-weight:600}
.price{font-weight:700}
.btn{border-radius:8px}
.order-box{border-radius:16px;box-shadow:0 25px 80px rgba(0,0,0,.15)}
.order input,.order select,.order textarea{border-radius:8px}
.modal-card{border-radius:14px;box-shadow:0 25px 100px rgba(0,0,0,.35)}
footer .brand{font-weight:700}

/* ===== Responsive professional sizing ===== */
:root{
  --container:1180px;
  --blue:#112770;
  --blue2:#112770;
}
body{font-size:14px}
.section{width:min(var(--container),92%);padding:88px 0}
.navbar{padding:0 max(4%,calc((100vw - var(--container))/2));}
.navbar nav{gap:24px;font-size:12px}
.hero{min-height:760px;padding-top:110px;gap:55px}
.hero h1{font-size:clamp(42px,5.2vw,72px);line-height:1.04}
.hero-text{font-size:14px;max-width:570px;margin:22px 0;line-height:1.75}
.hero-visual{height:500px}
.profile-frame{width:min(350px,88%);height:450px}
.hero-meta{gap:38px;margin-top:48px}
.hero-meta strong{font-size:12px}.hero-meta span{font-size:10px}
.section-head{margin-bottom:40px}
.section-head h2{font-size:clamp(34px,4.5vw,58px)}
.eyebrow{font-size:10px;margin-bottom:14px}
.large-copy{font-size:clamp(22px,2.8vw,36px)}
.about-grid{gap:60px}
.about-details{font-size:13px}
.facts div{font-size:12px}
.project img{height:300px}.project.tall img{height:420px}
.project h3{font-size:18px}
.service-list>div{padding:26px 0}
.service-list h3{font-size:19px}
.service-list p{font-size:12px}
.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.product{min-height:285px;padding:24px}
.product h3{font-size:19px;margin:18px 0 7px}
.price{font-size:21px}
.product p,.features{font-size:11px}
.btn{padding:11px 18px;font-size:12px}
.order-box{padding:42px}
.order-box h2{font-size:clamp(34px,4.5vw,56px)}
.order input,.order select,.order textarea{font-size:12px;padding:11px 12px}
footer{padding:42px 4%}

/* Tablet */
@media (max-width: 900px){
  .section{padding:72px 0}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:125px}
  .hero-visual{height:430px}
  .profile-frame{height:390px;width:300px}
  .about-grid{grid-template-columns:1fr;gap:35px}
  .portfolio-grid{gap:16px}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Phone */
@media (max-width: 600px){
  body{font-size:13px}
  .section{width:90%;padding:58px 0}
  .navbar{height:70px}
  .navbar nav{top:70px}
  .hero{padding-top:105px;gap:25px}
  .hero h1{font-size:clamp(34px,10vw,46px);line-height:1.08}
  .hero-text{font-size:12px;margin:18px 0;line-height:1.7}
  .hero-actions{gap:8px}
  .btn{padding:10px 14px;font-size:11px}
  .hero-meta{gap:22px;margin-top:35px}
  .hero-meta strong{font-size:10px}.hero-meta span{font-size:9px}
  .hero-visual{height:350px}
  .profile-frame{height:325px;width:235px}
  .floating-card{right:2%;bottom:25px;padding:12px 14px;font-size:8px}
  .section-head{margin-bottom:30px}
  .section-head h2{font-size:clamp(29px,8vw,38px)}
  .eyebrow{font-size:8px;letter-spacing:.14em}
  .large-copy{font-size:21px}
  .about-details{font-size:12px}
  .facts div{font-size:10px;padding:13px 0}
  .portfolio-grid{grid-template-columns:1fr;gap:14px}
  .project img,.project.tall img{height:260px}
  .project div{padding:14px}
  .project h3{font-size:16px}
  .project span{font-size:8px}
  .service-list>div{grid-template-columns:32px 1fr;gap:12px;padding:20px 0}
  .service-list h3{font-size:16px}
  .service-list p{grid-column:2;font-size:11px}
  .product-grid{grid-template-columns:1fr;gap:12px}
  .product{min-height:0;padding:20px}
  .product h3{font-size:17px;margin:13px 0 5px}
  .price{font-size:19px}
  .product p,.features{font-size:10px}
  .order{padding-bottom:80px}
  .order-box{padding:26px 18px;gap:30px}
  .order-box h2{font-size:32px}
  .order-box>div>p:last-child{font-size:11px}
  .modal-card{padding:30px 22px}
  .modal-card h2{font-size:30px}
  footer{padding:35px 5%;gap:25px}
  .footer-links{font-size:10px;gap:14px}
}
.product .btn {
  background: #07111e;
  color: #48a9ff;
  border: 1px solid #29405b;
}

.product .btn:hover {
  background: #0d1c2c;
  color: #ffffff;
  border-color: #48a9ff;
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.project {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  background: #07101c;
}

.project img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
}

 .project img {
    height: 220px;
  }
/* =========================
   PORTFOLIO FINAL
   Semua card ukuran sama
   ========================= */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.project {
  background: #0a1421;
  border: 1px solid #172b3e;
  border-radius: 12px;
  overflow: hidden;
  transition: transform .3s ease,
              border-color .3s ease,
              box-shadow .3s ease;
}

/* MATIKAN efek "tall" */
.project.tall {
  grid-row: auto;
}

/* Semua gambar sama persis */
.project img,
.project.tall img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  background: #07101c;
}

/* Isi card */
.project > div {
  padding: 20px;
}

.project span {
  font-size: 10px;
  letter-spacing: .15em;
  color: #4caeff;
}

.project h3 {
  font: 600 18px "Poppins", Arial, sans-serif;
  margin-top: 5px;
}

/* Hover */
.project:hover {
  transform: translateY(-5px);
  border-color: #112770;
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
}

.project:hover img {
  transform: scale(1.025);
}

/* =========================
   HP
   Tetap 2 kolom
   ========================= */

@media (max-width: 600px){}

  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .project img,
  .project.tall img {
    height: 180px;
  }

  .project > div {
    padding: 12px;
  }

  .project span {
    font-size: 8px;
  }

  .project h3 {
    font-size: 14px;
  }
/* =========================
   CLEAN BLUE THEME
   ========================= */

:root {
  --blue: #1A3AA7;
  --blue-dark: #112770;
  --white: #FFFFFF;
  --text: #A8B6D8;
  --bg: #050b14;
  --card: #0a1421;
}

/* Headline besar putih */
h1,
h2,
.section-head h2,
.hero h1,
.order-box h2 {
  color: var(--white);
}

/* Semua teks kecil / subjudul biru */
.eyebrow,
.project span,
.product-tag,
.service-list b,
.floating-card span,
.loader-logo span {
  color: var(--blue);
}

/* Deskripsi / body text */
.hero-text,
.about-details,
.service-list p,
.product p,
.order-box > div > p:last-child {
  color: var(--text);
}

/* Judul kecil tetap putih */
h3,
.project h3,
.product h3,
.service-list h3 {
  color: var(--white);
}

/* Harga */
.price,
.modal-price {
  color: var(--white);
}

/* Tombol utama — biru solid */
.btn.primary {
  background: var(--blue);
  color: var(--white);
  box-shadow: none;
}

.btn.primary:hover {
  background: var(--blue-dark);
}

/* Tombol outline */
.btn.ghost {
  background: transparent;
  border: 1px solid var(--blue);
  color: var(--white);
}

.btn.ghost:hover {
  background: var(--blue);
  color: var(--white);
}

/* CTA navbar */
.nav-cta {
  border-color: var(--blue);
}

/* Garis / border */
.about,
.portfolio,
.services,
.products,
footer {
  border-color: rgba(26, 58, 167, 0.28);
}

/* Card */
.project,
.product {
  background: var(--card);
  border-color: rgba(26, 58, 167, 0.28);
}

/* Hover card */
.project:hover,
.product:hover {
  border-color: var(--blue);
}

/* Form */
.order input,
.order select,
.order textarea {
  border-color: rgba(26, 58, 167, 0.4);
}

.order input:focus,
.order select:focus,
.order textarea:focus {
  border-color: var(--blue);
}

/* Hilangkan gradient */
.project img {
  background: var(--card);
}

.order-box {
  background: var(--card);
}

/* Loader */
.loader {
  background: var(--bg);
}

.loader-logo {
  color: var(--white);
}

/* Check icon */
.features li:before {
  color: var(--blue);
}body {
  font-family: "Inter", sans-serif;
}

h1,
h2,
h3 {
  font-family: "DM Sans", sans-serif;
}/* ================================
   CLEAN TYPOGRAPHY
   Dimas Creative
================================ */

body {
  font-family: "Inter", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Main headings */
h1,
h2,
h3,
.hero h1,
.section-head h2,
.order-box h2 {
  font-family: "DM Sans", Arial, sans-serif;
  color: #ffffff;
}

/* Hero title */
.hero h1 {
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.055em;
}

/* Section titles */
.section-head h2,
.order-box h2 {
  font-weight: 600;
  letter-spacing: -0.045em;
}

/* Card titles */
.project h3,
.product h3,
.service-list h3 {
  font-weight: 600;
  letter-spacing: -0.025em;
}

/* Normal text */
.hero-text,
.large-copy,
.about-details,
.service-list p,
.product p,
.order-box > div > p:last-child {
  font-family: "Inter", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.7;
}

/* Small labels */
.eyebrow,
.project span,
.product-tag {
  font-family: "Inter", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* Navigation */
.navbar nav,
.nav-cta,
.btn {
  font-family: "Inter", Arial, sans-serif;
  font-weight: 600;
}

/* Prices */
.price,
.modal-price {
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.025em;
}

/* Brand */
.brand,
.loader-logo {
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.035em;
}/* ================================
   PAYMENT
================================ */

.payment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 45px;
}

.payment-card {
  position: relative;
  min-height: 250px;
  padding: 30px;
  background: #0a1421;
  border: 1px solid rgba(26, 58, 167, 0.28);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.25s ease;
}

.payment-card:hover {
  border-color: #1A3AA7;
}

.payment-number {
  color: #1A3AA7;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.payment-card h3 {
  margin: 35px 0 10px;
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
}

.payment-card p {
  max-width: 430px;
  color: #8f9db8;
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  line-height: 1.7;
}

.payment-card strong {
  color: #fff;
}

.payment-value {
  align-self: flex-end;
  margin-top: 20px;
  color: #1A3AA7;
  font-family: "DM Sans", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.payment-note {
  margin-top: 18px;
  padding: 25px 30px;
  border-top: 1px solid rgba(26, 58, 167, 0.28);
  border-bottom: 1px solid rgba(26, 58, 167, 0.28);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.payment-note h3 {
  margin-top: 8px;
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  font-weight: 500;
}

.payment-note p {
  max-width: 400px;
  color: #8f9db8;
  font-size: 0.85rem;
  line-height: 1.6;
}

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

  .payment-card {
    min-height: 220px;
    padding: 24px;
  }

  .payment-note {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 0;
  }

  .payment-value {
    font-size: 2rem;
  }
}/* ================================
   SELECTED WORKS — VIEW ALL
   ================================ */

.portfolio-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: #8fbfff;
  font-family: "Inter", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;

  padding-bottom: 8px;

  border-bottom: 1px solid rgba(72, 169, 255, 0.35);

  transition:
    color .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

.view-all:hover {
  color: #48a9ff;
  border-color: #48a9ff;
  transform: translateX(4px);
}

/* Card portfolio bisa diklik */
.project {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.project h3 {
  transition: color .25s ease;
}

.project:hover h3 {
  color: #48a9ff;
}

/* Image hover */
.project img {
  transition: transform .45s ease;
}

.project:hover img {
  transform: scale(1.025);
}

/* HP */
@media (max-width: 600px) {
  .portfolio-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .view-all {
    font-size: 11px;
  }
}/* =================================
   HERO LOGO — LIGHT SCAN REVEAL
================================= */

.profile-frame {
  position: relative;
  overflow: hidden;
}

/* Logo putih */
.profile-frame img {
  position: relative;
  z-index: 2;

  opacity: 0;
  transform: scale(.94);
  filter: blur(8px) brightness(.8);

  animation:
    heroLogoReveal 1.2s cubic-bezier(.16,1,.3,1) .3s forwards,
    heroLogoFloat 5s ease-in-out 1.6s infinite;
}


/* Cahaya yang menyapu logo */
.profile-frame::after {
  content: "";

  position: absolute;
  z-index: 3;

  width: 45px;
  height: 180%;

  top: -40%;
  left: -80px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.75),
    transparent
  );

  filter: blur(5px);

  transform: rotate(18deg);

  opacity: 0;

  animation:
    logoLightScan 1.2s cubic-bezier(.4,0,.2,1) 1s forwards;
}


/* Glow tipis di belakang */
.profile-frame::before {
  content: "";

  position: absolute;
  z-index: 1;

  width: 180px;
  height: 180px;

  left: 50%;
  top: 50%;

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

  background: rgba(72,169,255,.10);

  filter: blur(55px);

  border-radius: 50%;

  opacity: 0;

  animation: logoGlowIn 1.5s ease-out .5s forwards;
}


/* Reveal */
@keyframes heroLogoReveal {

  0% {
    opacity: 0;
    transform: scale(.94);
    filter: blur(8px) brightness(.8);
  }

  60% {
    opacity: 1;
    transform: scale(1.015);
    filter: blur(0) brightness(1.08);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) brightness(1);
  }

}


/* Light sweep */
@keyframes logoLightScan {

  0% {
    left: -80px;
    opacity: 0;
  }

  15% {
    opacity: .8;
  }

  70% {
    opacity: .45;
  }

  100% {
    left: 120%;
    opacity: 0;
  }

}


/* Glow masuk */
@keyframes logoGlowIn {

  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.7);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

}


/* Floating sangat halus */
@keyframes heroLogoFloat {

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

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

}


/* HP */
@media (max-width: 600px) {

  .profile-frame::before {
    width: 130px;
    height: 130px;
  }

}/* =================================
   RESPONSIVE HERO LOGO
================================= */

.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Frame logo */
.profile-frame {
  position: relative;

  width: clamp(220px, 30vw, 430px);
  height: clamp(220px, 30vw, 430px);

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo */
.profile-frame img {
  width: clamp(120px, 16vw, 230px);
  max-width: 75%;
  height: auto;

  object-fit: contain;
}


/* =================================
   DESKTOP
================================= */

@media (min-width: 1200px) {

  .hero-visual {
    transform: translateX(20px);
  }

}


/* =================================
   LAPTOP
================================= */

@media (min-width: 769px) and (max-width: 1199px) {

  .hero-visual {
    transform: translateX(5px);
  }

}


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

@media (max-width: 768px) {

  .hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-copy {
    align-items: center;
  }

  .hero-visual {
    margin-top: 20px;
    transform: none;
  }

  .profile-frame {
    width: 280px;
    height: 280px;
  }

  .profile-frame img {
    width: 145px;
  }

}


/* =================================
   HP
================================= */

@media (max-width: 600px) {

  .hero {
    padding-top: 110px;
  }

  .hero-visual {
    margin-top: 5px;
  }

  .profile-frame {
    width: 230px;
    height: 230px;
  }

  .profile-frame img {
    width: 125px;
  }

}


/* =================================
   HP KECIL
================================= */

@media (max-width: 380px) {

  .profile-frame {
    width: 200px;
    height: 200px;
  }

  .profile-frame img {
    width: 110px;
  }

}
/* =================================
   HEADLINE — CLEAN WHITE
================================= */

.hero h1,
.section h2,
.section h2 span,
.order-box h2,
.products h2,
.payment h2,
.portfolio-page-header h1,
.portfolio-page-header h1 span {
  color: #ffffff;
}.hero-copy h1 span {
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
}/* =========================================================
  /* =========================================
   RUNNING TEXT - FORCE MOVE
   ========================================= */

.running-banner {
  width: 100%;
  overflow: hidden;
  padding: 25px 0;
}

.running-shape {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--line2);
  border-bottom: 1px solid var(--line2);
  background: rgba(10, 20, 33, 0.65);
  padding: 18px 0;
}

.running-track {
  display: flex !important;
  width: max-content !important;
  flex-shrink: 0;
  animation: runningTextMove 15s linear infinite !important;
  will-change: transform;
}

.running-item {
  display: flex !important;
  align-items: center;
  flex-shrink: 0;
  width: max-content;
  white-space: nowrap;
  gap: 28px;
  padding-right: 28px;
}

.running-item span {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .16em;
}

.running-item b {
  color: var(--blue);
  font-size: 14px;
}

@keyframes runningTextMove {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Tetap jalan di mobile */
@media (max-width: 650px) {
  .marquee-track {
    animation-duration: 14s;
  }
}

/* Jika user memilih mengurangi animasi */
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}/* RUNNING TEXT - FIX */
.running-track {
  display: flex;
  width: max-content;
  animation: runningText 12s linear infinite;
}

.running-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  gap: 28px;
  padding-right: 28px;
}

@keyframes runningText {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}/* =========================================
   PREVENT MOBILE HORIZONTAL SCROLL
   ========================================= */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  position: relative;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

* {
  box-sizing: border-box;
}/* FIX POSISI LOGO LOADING */
.loader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  z-index: 99999;
}

.loader-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  max-width: 90vw;
  margin: 0;

  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}/* =================================
 /* =================================
   PAKET FEED INSTAGRAM
   STYLE MENYAMAKAN KARTU PRODUK
================================= */

.packages-section {
  padding: 100px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.package-group {
  margin-bottom: 70px;
}

.package-group-title {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.package-group-title > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(30, 90, 190, 0.35);
  font-size: 22px;
}

.package-group-title h3 {
  margin: 0 0 5px;
  font-size: 24px;
}

.package-group-title p {
  margin: 0;
  opacity: 0.65;
  font-size: 14px;
}

.package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

/* CARD */

.package-card {
  position: relative;
  min-height: 390px;
  padding: 30px;
  background: #0a1421;
  border: 1px solid rgba(26, 58, 167, 0.28);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.25s ease;
}.package-card ul {
  flex: 1;
}

.package-card:hover {
  transform: translateY(-4px);
  border-color: rgba(40, 105, 220, 0.75);
  background: #091625;
}

/* CARD TENGAH / FEATURED */

.package-card.featured {
  border-color: rgba(35, 91, 180, 0.65);
}

/* LABEL */

.package-label {
  display: inline-block;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;

  color: #2463d4;

  margin-bottom: 20px;
}

/* TITLE */

.package-card h3 {
  margin: 0 0 10px;

  font-size: 24px;
  line-height: 1.25;

  color: #ffffff;
}

/* PRICE */

.package-price {
  margin-bottom: 25px;

  font-size: 23px;
  font-weight: 700;

  color: #ffffff;
}

.package-price span {
  margin-left: 4px;

  font-size: 13px;
  font-weight: 400;

  color: rgba(255, 255, 255, 0.55);
}

/* LIST */

.package-card ul {
  list-style: none;

  padding: 0;
  margin: 0 0 25px;

  flex: 1;
}

.package-card li {
  position: relative;

  padding-left: 20px;
  margin-bottom: 11px;

  font-size: 13px;
  line-height: 1.5;

  color: rgba(255, 255, 255, 0.68);
}

.package-card li::before {
  content: "✓";

  position: absolute;
  left: 0;
  top: 0;

  color: #1760d8;

  font-weight: 600;
}

/* BUTTON */

.package-btn {
  width: 100%;

  padding: 12px 18px;

  border: 1px solid #1856c4;
  border-radius: 8px;

  background: transparent;
  color: #ffffff;

  cursor: pointer;

  font: inherit;
  font-size: 13px;
  font-weight: 600;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.package-btn:hover {
  background: rgba(24, 86, 196, 0.12);
  border-color: #2d72e8;

  transform: translateY(-2px);
}

/* JARAK ANTAR KELOMPOK */

.company-packages {
  margin-top: 20px;
}

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

@media (max-width: 850px) {
  .packages-section {
    padding: 75px 18px;
  }

  .package-grid {
    grid-template-columns: 1fr;
  }

  .package-card {
    min-height: auto;
    padding: 24px;
  }

  .package-group-title {
    align-items: flex-start;
  }
}