:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --border: rgba(0,0,0,0.08);
  --text: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #aeaeb2;
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-light: rgba(0,113,227,0.08);
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 2px 20px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 40px rgba(0,0,0,0.12);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden}

/* NAV */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:52px;
  background:rgba(255,255,255,0.85);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 28px;
}
.nav-logo{display:flex;align-items:center;text-decoration:none;gap:0}
.nav-logo img{height:30px;object-fit:contain;display:block}
.nav-logo .logo-fallback{display:none;font-weight:700;font-size:14px;color:var(--text)}
.nav-links{display:flex;align-items:center}
.nav-links a{
  color:var(--text-secondary);font-size:12px;font-weight:400;
  text-decoration:none;padding:0 16px;height:52px;display:flex;align-items:center;
  transition:color .15s;white-space:nowrap;
}
.nav-links a:hover{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:10px}
.lang-sw{display:flex;align-items:center;gap:2px;background:rgba(0,0,0,0.05);border-radius:100px;padding:3px}
.lbtn{
  display:flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:100px;border:none;
  background:transparent;color:var(--text-secondary);
  font-family:'Inter',sans-serif;font-size:11px;font-weight:500;
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
.lbtn.active{background:var(--surface);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,0.12)}
.lbtn:hover:not(.active){background:rgba(0,0,0,0.05);color:var(--text)}
.nav-cta{
  background:var(--accent);color:#fff;font-size:12px;font-weight:500;
  padding:7px 16px;border-radius:980px;text-decoration:none;
  transition:background .15s,transform .15s;white-space:nowrap;
}
.nav-cta:hover{background:var(--accent-hover);transform:scale(1.02)}

/* HERO */
#hero{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:110px 24px 80px;position:relative;overflow:hidden;
  background:#0a0a0f;
}

/* ── PARALLAX HERO ── */
.parallax-bg {
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}
.px-layer {
  position:absolute;left:0;width:100%;
  will-change:transform;
  transform-origin:center bottom;
}
.px-sky-layer   { top:0;height:100%; }
.px-far-layer   { bottom:0;height:100%; }
.px-mid-layer   { bottom:0;height:100%; }
.px-near-layer  { bottom:0;height:100%; }

/* Cinematic overlays */
.px-grade {
  position:absolute;inset:0;z-index:20;pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(4,8,20,0.25) 0%,
      rgba(4,8,20,0.05) 40%,
      rgba(4,8,20,0.0) 60%,
      rgba(4,8,20,0.70) 100%);
}
.px-bloom {
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:80vw;height:40vh;z-index:21;pointer-events:none;will-change:transform;
  background:radial-gradient(ellipse at center bottom,
    rgba(245,166,35,0.22) 0%,rgba(200,90,10,0.08) 50%,transparent 75%);
  filter:blur(48px);
}
.px-vignette {
  position:absolute;inset:0;z-index:22;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%, transparent 38%, rgba(0,0,0,0.68) 100%);
}

#hero > *:not(.parallax-bg){ position:relative;z-index:30; }
.hero-glow{display:none}

/* Hero text styling */
.hero-eyebrow{
  color:#f5a623 !important;letter-spacing:.18em !important;
  font-weight:600 !important;font-size:11px !important;
  text-transform:uppercase;margin-bottom:18px;
  animation:fadeUp .6s .06s ease both;
}
h1.hero-title{ color:#fff !important; text-shadow:0 4px 48px rgba(0,0,0,0.6); }
h1.hero-title span{
  background:linear-gradient(105deg,#f7d060 0%,#f5a623 55%,#e8773a 100%) !important;
  -webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;background-clip:text !important;
}
.hero-sub{ color:rgba(255,255,255,0.9) !important; text-shadow:0 2px 12px rgba(0,0,0,0.8), 0 0 4px rgba(0,0,0,0.9); font-weight: 500; }
.btn-p{ background:linear-gradient(135deg,#f5a623,#e8773a) !important;
  box-shadow:0 4px 28px rgba(245,166,35,0.4) !important; }
.btn-p:hover{ background:linear-gradient(135deg,#ffd060,#f5a623) !important;
  box-shadow:0 8px 36px rgba(245,166,35,0.55) !important; transform:scale(1.03) !important; }
.btn-g{ background:rgba(255,255,255,0.08) !important; color:#fff !important;
  border:1px solid rgba(255,255,255,0.22) !important; backdrop-filter:blur(12px); }
.btn-g:hover{ background:rgba(255,255,255,0.16) !important; }
.hero-stats{ border-top-color:rgba(255,255,255,0.12) !important; }
.hstat-n{ color:#fff !important; font-size:36px; }
.hstat-l{ color:rgba(255,255,255,0.5) !important; }
.hero-logo-img{height:80px;color: white;object-fit:contain;margin-bottom:36px;animation:fadeUp .6s ease both;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.4));}
.hero-eyebrow{
  font-size:12px;font-weight:500;color:var(--accent);letter-spacing:.03em;
  margin-bottom:18px;animation:fadeUp .6s .06s ease both;
}
h1.hero-title{
  font-size:clamp(44px,7vw,88px);font-weight:700;
  line-height:1.05;letter-spacing:-.03em;color:var(--text);
  max-width:860px;margin:0 auto 20px;animation:fadeUp .6s .12s ease both;
}
h1.hero-title span{
  background:linear-gradient(100deg,#0071e3 0%,#34aadc 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-sub{
  font-size:17px;font-weight:400;line-height:1.65;color:var(--text-secondary);
  max-width:520px;margin:0 auto 40px;animation:fadeUp .6s .18s ease both;
}
.hero-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;animation:fadeUp .6s .24s ease both}
.btn-p{
  background:var(--accent);color:#fff;font-size:15px;font-weight:500;
  padding:13px 26px;border-radius:980px;text-decoration:none;
  transition:background .15s,box-shadow .2s,transform .15s;
}
.btn-p:hover{background:var(--accent-hover);box-shadow:0 4px 20px rgba(0,113,227,.35);transform:scale(1.02)}
.btn-g{
  background:rgba(0,0,0,0.06);color:var(--text);font-size:15px;font-weight:500;
  padding:13px 26px;border-radius:980px;text-decoration:none;
  transition:background .15s,transform .15s;
}
.btn-g:hover{background:rgba(0,0,0,0.1);transform:scale(1.02)}
.hero-stats{
  display:flex;justify-content:center;margin-top:64px;
  border-top:1px solid var(--border);padding-top:40px;width:100%;max-width:560px;
  animation:fadeUp .6s .3s ease both;
}
.hstat{flex:1;text-align:center;padding:0 20px}
.hstat+.hstat{border-left:1px solid var(--border)}
.hstat-n{font-size:34px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.hstat-l{font-size:12px;color:var(--text-secondary);margin-top:4px}

/* SECTIONS */
section{padding:96px 24px}
.inner{max-width:1080px;margin:0 auto}
.eyebrow{font-size:11px;font-weight:600;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.stitle{font-size:clamp(30px,4vw,48px);font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--text);margin-bottom:14px}
.ssub{font-size:15px;color:var(--text-secondary);line-height:1.6;max-width:480px}

/* PRINCIPLES */
#principles{background:var(--bg)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px}
.pcard{
  background:var(--surface);border-radius:var(--radius);padding:34px 30px;
  border:1px solid var(--border);transition:box-shadow .25s,transform .25s;
}
.pcard:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.picon{
  width:46px;height:46px;background:var(--accent-light);border-radius:13px;
  display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:18px;
}
.ptitle{font-size:17px;font-weight:600;margin-bottom:9px;color:var(--text)}
.pdesc{font-size:13.5px;color:var(--text-secondary);line-height:1.65}

/* VISION MISSION */
#vision{background:var(--surface)}
.vmgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:52px}
.vmcard{
  background:var(--bg);border-radius:var(--radius);padding:44px 36px;
  border:1px solid var(--border);position:relative;overflow:hidden;
  transition:box-shadow .25s,transform .25s;
}
.vmcard:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.vmcard::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),#34aadc);
}
.vmbadge{
  display:inline-block;background:var(--accent-light);color:var(--accent);
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 12px;border-radius:100px;margin-bottom:18px;
}
.vmtitle{font-size:26px;font-weight:700;letter-spacing:-.01em;margin-bottom:12px;color:var(--text)}
.vmtext{font-size:14px;color:var(--text-secondary);line-height:1.7}

/* SERVICES */
#services{background:var(--bg)}
.svchdr{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:36px}
.cbtns{display:flex;gap:8px}
.cbtn{
  width:38px;height:38px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);
  color:var(--text);font-size:15px;cursor:pointer;
  display:grid;place-items:center;
  transition:background .15s,box-shadow .15s;box-shadow:var(--shadow);
}
.cbtn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.cwrap{overflow:hidden}
.ctrack{
  display:flex;gap:14px;
  transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform;
}
.scard{
  flex:0 0 300px;background:var(--surface);border-radius:var(--radius);
  padding:30px 26px;border:1px solid var(--border);
  transition:box-shadow .25s,transform .25s;cursor:pointer;position:relative;text-align:center;
}
.scard:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.scard:hover .sarrow{opacity:1;transform:translate(2px,-2px)}
.snum{position:absolute;top:18px;right:20px;font-size:11px;font-weight:600;color:var(--text-tertiary);letter-spacing:.04em}
.simg{
  width:90px;height:90px;border-radius:50%;object-fit:cover;
  margin:0 auto 18px auto;display:block;box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.sname{font-size:16px;font-weight:600;color:var(--text);margin-bottom:9px}
.sdesc{font-size:13px;color:var(--text-secondary);line-height:1.6}
.sarrow{display:block;margin-top:22px;font-size:16px;color:var(--accent);opacity:0;transform:translate(0,0);transition:opacity .25s,transform .25s}
.cdots{display:flex;gap:6px;justify-content:center;margin-top:24px}
.cdot{width:6px;height:6px;border-radius:100px;background:var(--border);cursor:pointer;border:none;transition:width .3s,background .3s}
.cdot.active{width:20px;background:var(--accent)}

/* PARTNERSHIP */
#partnership{background:var(--surface)}
.featgrid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--border);border-radius:var(--radius);overflow:hidden;margin-top:52px;
}
.fcell{background:var(--surface);padding:34px 26px;transition:background .2s}
.fcell:hover{background:var(--bg)}
.fn{font-size:38px;font-weight:700;letter-spacing:-.02em;color:var(--accent);margin-bottom:6px}
.ft{font-size:14px;font-weight:600;color:var(--text);margin-bottom:5px}
.fd{font-size:13px;color:var(--text-secondary);line-height:1.55}

/* PARTNERS MARQUEE */
#partners{background:var(--bg);padding:80px 0;overflow:hidden}
.partners-hdr{padding:0 24px;max-width:1080px;margin:0 auto 40px}
.mqwrap{overflow:hidden}
.mq{display:flex;gap:14px;width:max-content;animation:marquee 35s linear infinite}
.mq:hover{animation-play-state:paused}
.plogo{
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:12px 18px;
  width:160px;height:72px;flex-shrink:0;
  transition:box-shadow .2s,transform .2s;overflow:hidden;
}
.plogo:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.plogo svg{transition:opacity .2s;opacity:0.82}
.plogo:hover svg{opacity:1}
.plogo img{max-width:130px;max-height:52px;width:auto;height:auto;object-fit:contain;filter:grayscale(10%);transition:filter .25s}
.plogo:hover img{filter:grayscale(0)}
.plogo span{font-size:11px;font-weight:600;color:var(--text-secondary);text-align:center;line-height:1.3}

/* CONTACT */
#contact{background:var(--text);text-align:center;padding:96px 24px}
#contact .eyebrow{color:rgba(255,255,255,.4)}
#contact .stitle{color:#fff}
#contact .ssub{color:rgba(255,255,255,.5);margin:0 auto 44px}
.cchips{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:44px}
.cchip{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);padding:18px 24px;text-align:left;min-width:190px;
  transition:background .2s;
}
.cchip:hover{background:rgba(255,255,255,.11)}
.chlabel{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:5px}
.chval{font-size:13.5px;font-weight:500;color:#fff;word-break:break-all}
.ccta{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:var(--text);font-size:15px;font-weight:600;
  padding:14px 34px;border-radius:980px;text-decoration:none;
  transition:transform .15s,box-shadow .2s;
}
.ccta:hover{transform:scale(1.03);box-shadow:0 8px 30px rgba(0,0,0,.28)}

/* FOOTER */
footer{
  background:var(--text);border-top:1px solid rgba(255,255,255,.06);
  padding:22px 28px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
}
footer img{height:22px;filter:brightness(0) invert(1);opacity:.55}
footer .flogofb{display:none;font-size:13px;font-weight:600;color:rgba(255,255,255,.5)}
footer p{font-size:12px;color:rgba(255,255,255,.3)}

/* WA */
.wafloat{position:fixed;bottom:26px;right:26px;z-index:999;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.watip{
  background:var(--surface);color:var(--text);
  font-size:12px;font-weight:500;padding:7px 13px;
  border-radius:100px;box-shadow:var(--shadow-md);
  white-space:nowrap;opacity:0;transform:translateX(8px);
  transition:opacity .25s,transform .25s;pointer-events:none;
  border:1px solid var(--border);
}
.wafloat:hover .watip{opacity:1;transform:translateX(0)}
.wabtn{
  width:52px;height:52px;border-radius:50%;background:#25D366;
  display:grid;place-items:center;text-decoration:none;
  box-shadow:0 4px 20px rgba(37,211,102,.4);
  transition:transform .2s,box-shadow .2s;position:relative;
}
.wabtn:hover{transform:scale(1.1);box-shadow:0 8px 28px rgba(37,211,102,.55)}
.wabtn svg{width:26px;height:26px;fill:#fff}
.wapulse{position:absolute;inset:0;border-radius:50%;background:rgba(37,211,102,.3);animation:waPulse 2.5s ease-out infinite}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes waPulse{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.6);opacity:0}100%{transform:scale(1.6);opacity:0}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── ABOUT ── */
#about{background:var(--bg);padding:96px 0 80px}
#about .inner{max-width:1080px;margin:0 auto;padding:0 24px}

/* Hero intro */
.about-intro{display:grid;grid-template-columns:1fr;gap:64px;align-items:center;margin-top:56px}
@media(max-width:768px){.about-intro{grid-template-columns:1fr;gap:36px}}

.about-intro-text h3{font-size:clamp(20px,3vw,28px);font-weight:800;color:var(--text);margin-bottom:18px;line-height:1.3}
.about-intro-text p{font-size:15px;line-height:1.8;color:var(--text-secondary)}
.about-visual{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;max-width:380px}
@media(max-width:768px){.about-visual{max-width:100%;aspect-ratio:4/3}}
.about-visual svg{width:100%;height:100%;display:block}

/* Principles grid */
.about-principles{margin-top:72px}
.about-principles h2{font-size:clamp(22px,3vw,32px);font-weight:800;margin-bottom:8px;color:var(--text)}
.about-principles .eyebrow{margin-bottom:8px}
.apgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
@media(max-width:768px){.apgrid{grid-template-columns:1fr}}
.apcard{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:36px 28px;
  position:relative;overflow:hidden;
  transition:box-shadow .25s, transform .25s;
}
.apcard:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.apcard::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),#f5a623);
  transform:scaleX(0);transform-origin:left;transition:transform .3s;
}
.apcard:hover::before{transform:scaleX(1)}
.apcard-icon{font-size:36px;margin-bottom:18px;display:block}
.apcard-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:10px}
.apcard-desc{font-size:14px;line-height:1.7;color:var(--text-secondary)}

/* Team section */
.about-team{margin-top:80px}
.about-team-label{margin-bottom:8px}
.about-team h2{font-size:clamp(22px,3vw,32px);font-weight:800;margin-bottom:40px;color:var(--text)}
.team-grid{display:grid;grid-template-columns:repeat(2,360px);gap:48px;justify-content:center}
@media(max-width:820px){.team-grid{grid-template-columns:1fr}}
@media(max-width:560px){.team-grid{grid-template-columns:1fr}}
.team-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  transition:box-shadow .25s,transform .25s;text-align:center;
}
.team-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.team-avatar{
  width:100%;aspect-ratio:3/4;overflow:hidden;
  background:linear-gradient(135deg,#e8f0fe,#d0e8ff);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.team-avatar svg{width:100%;height:100%;display:block}
.team-info{padding:20px 16px 22px}
.team-name{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px}
.team-role{font-size:12px;color:var(--text-secondary);font-weight:500;
  background:rgba(245,166,35,0.12);color:#c47d00;
  display:inline-block;padding:3px 10px;border-radius:100px}

/* Company profile strip */
.about-compro{margin-top:80px;background:var(--surface);border-radius:var(--radius);padding:40px;border:1px solid var(--border)}
.about-compro h3{font-size:18px;font-weight:700;color:var(--text);margin-bottom:6px}
.about-compro p{font-size:14px;color:var(--text-secondary);margin-bottom:28px}
.compro-pages{display:flex;gap:10px;flex-wrap:wrap}
.compro-page{
  width:60px;height:60px;border-radius:6px;
  background:var(--bg);border:1px solid var(--border);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  transition:transform .2s,box-shadow .2s;cursor:pointer;
}
.compro-page:hover{transform:scale(1.08);box-shadow:var(--shadow-md)}
.compro-page svg{width:52px;height:52px}

/* ── TESTIMONIAL ── */
#testimonial{background:#f0f2f5;overflow:hidden;padding:96px 0 80px}
#testimonial .inner{max-width:1080px;margin:0 auto;padding:0 24px}

/* Grid carousel */
.tcarousel-wrap{position:relative;margin-top:52px}
.ttrack{
  display:flex;gap:22px;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}

/* Letter card — surat apresiasi style */
.tcard{
  flex:0 0 260px;
  background:#fff;
  border-radius:4px;
  overflow:hidden;
  position:relative;
  cursor:pointer;
  box-shadow:0 2px 12px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.08);
  transition:box-shadow .3s, transform .3s;
  border:1px solid rgba(0,0,0,0.06);
}
.tcard:hover{
  box-shadow:0 12px 40px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.10);
  transform:translateY(-6px) scale(1.02);
}

/* Document image area */
.tcard-img{
  width:100%;aspect-ratio:3/4;overflow:hidden;
  background:#e8e8e8;position:relative;
}
.tcard-img img{
  width:100%;height:100%;object-fit:cover;
  filter:sepia(8%) contrast(1.02);
  transition:transform .4s ease;
  display:block;
}
.tcard:hover .tcard-img img{transform:scale(1.04)}

/* SVG placeholder doc (fallback) */
.tcard-img .doc-placeholder{
  width:100%;height:100%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;
  padding:20px 16px;gap:6px;
  background:linear-gradient(135deg,#fafafa 0%,#f0f0ee 100%);
}
.doc-line{height:6px;border-radius:2px;background:#d0d0cc}
.doc-line.title{width:70%;height:9px;background:#b0b0aa;margin-bottom:6px}
.doc-line.short{width:45%}
.doc-line.medium{width:75%}
.doc-line.long{width:90%}
.doc-logo-placeholder{width:52px;height:20px;background:#c0c0be;border-radius:2px;margin-bottom:12px}

/* Hover zoom icon */
.tcard-zoom{
  position:absolute;bottom:10px;right:10px;
  width:32px;height:32px;border-radius:50%;
  background:rgba(0,0,0,0.55);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;opacity:0;transition:opacity .25s;
  pointer-events:none;
}
.tcard:hover .tcard-zoom{opacity:1}

/* Bottom label */
.tcard-label{
  padding:12px 14px 14px;
  background:#fff;
}
.tcard-company{
  font-size:12px;font-weight:700;color:#1a1a1a;
  line-height:1.3;
}
.tcard-tag{
  display:inline-block;margin-top:5px;
  font-size:10px;font-weight:500;color:#f5a623;
  background:rgba(245,166,35,0.1);
  padding:2px 8px;border-radius:100px;
}

/* Controls */
.tcontrols{display:flex;align-items:center;justify-content:space-between;margin-top:32px;padding:0 4px}
.tdots{display:flex;gap:6px}
.tdot{width:7px;height:7px;border-radius:100px;background:rgba(0,0,0,0.15);border:none;cursor:pointer;transition:width .3s,background .3s}
.tdot.active{width:22px;background:#f5a623}
.tbtns{display:flex;gap:8px}

/* ── LIGHTBOX ── */
#tLightbox{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0);
  pointer-events:none;
  transition:background .35s ease;
}
#tLightbox.open{
  background:rgba(0,0,0,0.85);
  pointer-events:all;
  backdrop-filter:blur(6px);
}
.tlb-inner{
  position:relative;
  max-width:min(520px,92vw);
  max-height:92vh;
  width:100%;
  border-radius:6px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 32px 80px rgba(0,0,0,0.5);
  transform:scale(0.82) translateY(30px);
  opacity:0;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
}
#tLightbox.open .tlb-inner{
  transform:scale(1) translateY(0);
  opacity:1;
}
.tlb-img{
  width:100%;display:block;
  max-height:78vh;object-fit:contain;
  background:#f5f5f3;
}
.tlb-footer{
  padding:14px 18px 16px;
  display:flex;align-items:center;justify-content:space-between;
  background:#fff;border-top:1px solid #eee;
}
.tlb-company{font-size:13px;font-weight:700;color:#1a1a1a}
.tlb-tag{font-size:11px;color:#f5a623;font-weight:600}
.tlb-close{
  position:absolute;top:12px;right:12px;
  width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,0.6);color:#fff;
  border:none;cursor:pointer;font-size:18px;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s, transform .2s;z-index:10;
  line-height:1;
}
.tlb-close:hover{background:rgba(0,0,0,0.85);transform:scale(1.1)}
.tlb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;
  background:rgba(0,0,0,0.5);color:#fff;
  border:none;cursor:pointer;font-size:18px;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;z-index:10;
}
.tlb-nav:hover{background:rgba(0,0,0,0.8)}
.tlb-prev{left:12px}
.tlb-next{right:12px}
.tlb-counter{
  font-size:11px;color:rgba(255,255,255,0.7);
  position:absolute;bottom:70px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,0.5);padding:3px 10px;border-radius:100px;
  pointer-events:none;
}

/* SERVICE CARDS enhanced */
.scard{position:relative;overflow:hidden}
.scard::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),#34aadc);
  transform:scaleX(0);transform-origin:left;transition:transform .3s;
}
.scard:hover::after{transform:scaleX(1)}

/* PARTNERS MARQUEE - two rows */
#partners{background:var(--bg);padding:80px 0;overflow:hidden}
.partners-hdr{padding:0 24px;max-width:1080px;margin:0 auto 40px}
.mqwrap{overflow:hidden;display:flex;flex-direction:column;gap:14px}
.mq{display:flex;gap:14px;width:max-content;animation:marquee 35s linear infinite}
.mq.reverse{animation:marqueeR 32s linear infinite}
.mq:hover,.mq.reverse:hover{animation-play-state:paused}

@keyframes marqueeR{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* RESPONSIVE */
@media(max-width:860px){
  .nav-links{display:none}
  .pgrid,.vmgrid{grid-template-columns:1fr}
  .featgrid{grid-template-columns:1fr 1fr}
  .svchdr{flex-direction:column;align-items:flex-start;gap:14px}
  footer{flex-direction:column;text-align:center}
  .cchips{flex-direction:column;align-items:center}
  .hero-stats{flex-direction:column;gap:20px}
  .hstat+.hstat{border-left:none;border-top:1px solid var(--border);padding-top:20px}
}

/* ── SERVICE MODAL ── */
.smodal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
  align-items: center;
  justify-content: center;
}
.smodal.show {
  display: flex;
  opacity: 1;
}
.smodal-content {
  background: var(--surface);
  padding: 40px;
  border-radius: var(--radius);
  width: 90%;
  max-width: 500px;
  position: relative;
  transform: translateY(30px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}
.smodal.show .smodal-content {
  transform: translateY(0) scale(1);
}
.smodal-close {
  position: absolute;
  right: 20px;
  top: 15px;
  color: var(--text-tertiary);
  font-size: 32px;
  font-weight: 300;
  cursor: pointer;
  transition: color 0.2s;
  line-height: 1;
}
.smodal-close:hover {
  color: var(--text);
}
.smodal-icon {
  width: 54px;
  height: 54px;
  background: var(--accent-light);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 20px;
}
.smodal-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
}
.smodal-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ── ACHIEVEMENTS & AWARDS ── */
#awards{background:var(--surface);padding:96px 0 80px}
#awards .inner{max-width:1080px;margin:0 auto;padding:0 24px}
.award-wrap{position:relative;margin-top:52px}
.award-track{
  display:flex;gap:32px;justify-content:center;flex-wrap:wrap;
}
.award-card{
  flex:0 0 300px;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  position:relative;
  cursor:pointer;
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
  transition:box-shadow .3s, transform .3s;
  border:1px solid rgba(0,0,0,0.05);
}
.award-card:hover{
  box-shadow:0 16px 40px rgba(0,0,0,0.18);
  transform:translateY(-8px) scale(1.02);
}
.award-img{
  width:100%;aspect-ratio:3/4;overflow:hidden;
  background:#f5f5f5;position:relative;
}
.award-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
  display:block;
}
.award-card:hover .award-img img{transform:scale(1.05)}
.award-zoom{
  position:absolute;bottom:16px;right:16px;
  width:40px;height:40px;border-radius:50%;
  background:rgba(0,0,0,0.7);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;opacity:0;transition:opacity .25s;
  pointer-events:none;
}
.award-card:hover .award-zoom{opacity:1}

/* AWARD LIGHTBOX */
#aLightbox{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0);
  pointer-events:none;
  transition:background .35s ease;
}
#aLightbox.open{
  background:rgba(0,0,0,0.85);
  pointer-events:all;
  backdrop-filter:blur(6px);
}
.alb-inner{
  position:relative;
  max-width:min(600px,94vw);
  max-height:94vh;
  width:100%;
  border-radius:12px;
  overflow:hidden;
  background:transparent;
  transform:scale(0.8) translateY(40px);
  opacity:0;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
  display:flex;align-items:center;justify-content:center;
}
#aLightbox.open .alb-inner{
  transform:scale(1) translateY(0);
  opacity:1;
}
.alb-img{
  width:auto;height:auto;display:block;
  max-height:90vh;max-width:100%;object-fit:contain;
  border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,0.5);
}
.alb-close{
  position:absolute;top:16px;right:16px;
  width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,0.7);color:#fff;
  border:none;cursor:pointer;font-size:26px;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s, transform .2s;z-index:10;
  line-height:1;
}
.alb-close:hover{background:rgba(0,0,0,0.95);transform:scale(1.1)}
.alb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:50px;height:50px;border-radius:50%;
  background:rgba(0,0,0,0.6);color:#fff;
  border:none;cursor:pointer;font-size:20px;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;z-index:10;
}
.alb-nav:hover{background:rgba(0,0,0,0.9)}
.alb-prev{left:16px}
.alb-next{right:16px}
.alb-counter{
  font-size:14px;font-weight:600;color:#fff;
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,0.7);padding:6px 16px;border-radius:100px;
  pointer-events:none;
}