/*
  Survindo Data Pratama — Modern, minimal, IT-styled company profile
  Colors inspired by the provided logo (blue ↔ teal gradient)
*/

:root{
  --primary:#0B6CFF; /* blue */
  --accent:#10C6C3;  /* teal */
  --ink:#0B1F33;     /* dark text */
  --muted:#5B6B82;   /* secondary text */
  --bg:#EAF4FF;      /* soft background */
  --card:#FFFFFF;
  --ring:0 0 0 3px rgba(11,108,255,.2);
  --radius:16px;
  --transition:220ms cubic-bezier(.2,.8,.2,1);

  /* Glassmorphism tokens */
  --glass-bg:rgba(255,255,255,0.18);
  --glass-strong-bg:rgba(255,255,255,0.28);
  --glass-border:1px solid rgba(255,255,255,0.35);
  --glass-shadow:0 20px 60px -30px rgba(2,6,23,.35), 0 8px 28px -18px rgba(2,6,23,.25);
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.32), inset 0 .5px 0 rgba(255,255,255,.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  /* Liquid glass ambient background */
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(16,198,195,.20), transparent 60%),
    radial-gradient(900px 500px at 10% 10%, rgba(11,108,255,.18), transparent 60%),
    radial-gradient(700px 400px at 90% 80%, rgba(16,198,195,.16), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  min-height:100vh; display:flex; flex-direction:column;
  position:relative;
}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#000;color:#fff;padding:.5rem .75rem;border-radius:8px}

.container{width:min(1120px, 92%); margin-inline:auto}

#content{position:relative; flex:1 0 auto}

/* Global ambient animated background across all pages */
.ambient-bg{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
/* Ensure content sits above ambient */
#content, .site-footer{position:relative; z-index:1}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--glass-strong-bg);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(15,23,42,.06);
  box-shadow:0 8px 24px -20px rgba(2,6,23,.25);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 0}
.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none; color:inherit}
.brand img{height:40px; width:auto; display:block}
.brand-fallback{font-weight:700; letter-spacing:.3px}

.site-nav{position:relative; display:flex; align-items:center; gap:.5rem}
.site-nav a{position:relative; padding:.6rem .9rem; text-decoration:none; color:var(--ink); border-radius:10px; transition:transform var(--transition), background var(--transition)}
.site-nav a:hover{transform:translateY(-1px); background:rgba(11,108,255,.06)}
.site-nav .active-indicator{position:absolute; height:36px; width:84px; left:0; top:50%; transform:translateY(-50%); background:linear-gradient(135deg, var(--accent), var(--primary)); border-radius:12px; opacity:.12; transition:all var(--transition)}

.menu-toggle{display:none; background:none; border:0; padding:0; border-radius:12px; width:40px; height:40px; align-items:center; justify-content:center; flex-direction:column; gap:4px}
.menu-toggle span{display:block; width:18px; height:2px; background:#0b1f33; margin:0; transition:transform var(--transition), opacity var(--transition)}

/* Language switch */
.lang-switch{display:flex; align-items:center; gap:.3rem; padding:.2rem; background:var(--glass-bg); border:var(--glass-border); border-radius:999px; margin-left:.5rem; -webkit-backdrop-filter:blur(14px) saturate(180%); backdrop-filter:blur(14px) saturate(180%)}
.lang-btn{appearance:none; background:var(--glass-strong-bg); border:var(--glass-border); border-radius:999px; padding:.25rem; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; cursor:pointer; transition:transform var(--transition), box-shadow var(--transition)}
.lang-btn img{width:20px; height:20px; display:block; border-radius:50%; object-fit:cover}
.lang-btn.active{box-shadow:0 6px 18px -8px rgba(2,6,23,.35), var(--glass-inset)}
.lang-btn:hover{transform:translateY(-1px)}

/* Layout helpers */
.grid-two{display:grid; grid-template-columns:1.1fr .9fr; gap:min(5vw,48px); align-items:center; padding:3.2rem 0}

h1{font-size:clamp(2rem, 4.5vw, 3.2rem); line-height:1.1; margin:.2rem 0 1rem}
h2{font-size:clamp(1.6rem, 3.2vw, 2.2rem); margin:0 0 .6rem}
h3{font-size:1.15rem; margin:.2rem 0 .2rem}
.lead{color:var(--muted); font-size:1.05rem}

.cta-row{display:flex; gap:.8rem; margin:1.2rem 0 1.5rem}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:.8rem 1rem; border-radius:12px; border:1px solid transparent; text-decoration:none; cursor:pointer; transition:box-shadow var(--transition), transform var(--transition), background var(--transition)}
.btn-primary{background:linear-gradient(135deg, var(--accent), var(--primary)); color:#fff}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 30px -12px rgba(11,108,255,.5)}
.btn-ghost{background:transparent; border-color:rgba(11,108,255,.2); color:var(--ink)}
.btn-ghost:hover{background:rgba(11,108,255,.06)}

.badges{display:flex; flex-wrap:wrap; gap:.6rem; padding:0; margin:0; list-style:none}
.badges li{background:rgba(16,198,195,.12); color:#0b716f; padding:.35rem .6rem; border-radius:999px; font-size:.85rem}

/* Hero art */
.hero-art{position:relative; min-height:320px}
/* Animated gradient blobs (lava lamp style) */
.orb{
  position:absolute;
  filter:blur(10px);
  opacity:.9;
  will-change:transform, border-radius;
  pointer-events:none;
  transform:translateZ(0);
}
/* Keep original colors; animate shape + subtle drift */
.orb-a{
  right:18%; top:8%; width:160px; height:160px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #6ff, #19c1ff 60%, transparent 62%);
  /* +50% speed, then +30%: 18s -> 12s -> ~9.2s */
  animation:lavaA 9.2s ease-in-out infinite alternate;
}
.orb-b{
  right:2%; bottom:-8%; width:240px; height:240px;
  border-radius:50%;
  background:radial-gradient(circle at 70% 40%, #12e3d9, #0b6cff 65%, transparent 67%);
  /* +50% speed, then +30%: 22s -> 14.7s -> ~11.3s */
  animation:lavaB 11.3s ease-in-out infinite alternate;
}
/* Additional blobs in different areas */
.orb-c{
  right:32%; bottom:18%; width:120px; height:120px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #6ff, #19c1ff 60%, transparent 62%);
  animation:lavaC 10.4s ease-in-out infinite alternate;
  animation-delay:-2s;
}
.orb-d{
  right:55%; top:24%; width:90px; height:90px;
  border-radius:50%;
  background:radial-gradient(circle at 60% 40%, #12e3d9, #0b6cff 65%, transparent 67%);
  animation:lavaD 8.6s ease-in-out infinite alternate;
  animation-delay:-1.2s;
}
.hero-card{position:absolute; right:6%; top:18%; width:min(380px, 90%); background:var(--glass-strong-bg); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%); border:var(--glass-border); border-radius:var(--radius); padding:1rem; box-shadow:var(--glass-shadow)}
.hero-card{position:absolute; right:6%; top:18%; width:min(380px, 90%); background:var(--glass-strong-bg); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%); border:var(--glass-border); border-radius:var(--radius); padding:1rem; box-shadow:var(--glass-shadow)}
.metric{display:flex; align-items:baseline; gap:.6rem; padding:.5rem .4rem}
.metric .num{font-size:1.8rem; font-weight:800; background:linear-gradient(135deg, var(--accent), var(--primary)); -webkit-background-clip:text; background-clip:text; color:transparent}
.metric .label{color:var(--muted)}

/* Pages + transitions */
.page{display:none}
.page.active{display:block; animation:fadeInUp var(--transition) forwards}
.page.leaving{display:block; position:absolute; inset:0; width:100%; pointer-events:none; animation:fadeOutDown var(--transition) forwards}

@keyframes fadeInUp{
  from{opacity:0; transform:translateY(8px)}
  to{opacity:1; transform:translateY(0)}
}
@keyframes fadeOutDown{
  from{opacity:1; transform:translateY(0)}
  to{opacity:0; transform:translateY(8px)}
}

/* Blob morphing animations */
@keyframes lavaA{
  0%   { transform:translate(0,0) scale(1);     border-radius:50% 50% 50% 50% / 50% 50% 50% 50% }
  25%  { transform:translate(-6%,4%) scale(1.05); border-radius:42% 58% 60% 40% / 45% 48% 52% 55% }
  50%  { transform:translate(-2%,10%) scale(.98); border-radius:58% 42% 35% 65% / 60% 45% 55% 40% }
  75%  { transform:translate(6%,4%) scale(1.04);  border-radius:48% 52% 60% 40% / 50% 60% 40% 50% }
  100% { transform:translate(0,0) scale(1);     border-radius:50% 50% 50% 50% / 50% 50% 50% 50% }
}
@keyframes lavaB{
  0%   { transform:translate(0,0) scale(1);      border-radius:50% 50% 50% 50% / 50% 50% 50% 50% }
  20%  { transform:translate(4%,-2%) scale(1.02); border-radius:40% 60% 55% 45% / 48% 58% 42% 52% }
  50%  { transform:translate(-8%,6%) scale(1.06);  border-radius:62% 38% 45% 55% / 60% 40% 55% 45% }
  80%  { transform:translate(2%,10%) scale(.97);   border-radius:46% 54% 65% 35% / 42% 56% 44% 58% }
  100% { transform:translate(0,0) scale(1);      border-radius:50% 50% 50% 50% / 50% 50% 50% 50% }
}
/* Extra variants for variety */
@keyframes lavaC{
  0%   { transform:translate(0,0) scale(1);      border-radius:50% 50% 50% 50% / 50% 50% 50% 50% }
  30%  { transform:translate(-5%,6%) scale(1.03); border-radius:45% 55% 52% 48% / 44% 56% 54% 46% }
  55%  { transform:translate(6%,-4%) scale(1.07); border-radius:60% 40% 44% 56% / 58% 42% 48% 52% }
  85%  { transform:translate(-3%,8%) scale(.98);  border-radius:48% 52% 62% 38% / 46% 54% 44% 56% }
  100% { transform:translate(0,0) scale(1);      border-radius:50% 50% 50% 50% / 50% 50% 50% 50% }
}
@keyframes lavaD{
  0%   { transform:translate(0,0) scale(1);      border-radius:50% 50% 50% 50% / 50% 50% 50% 50% }
  25%  { transform:translate(8%,-6%) scale(1.05); border-radius:58% 42% 40% 60% / 54% 46% 56% 44% }
  60%  { transform:translate(-10%,4%) scale(.95);  border-radius:42% 58% 62% 38% / 40% 60% 44% 56% }
  90%  { transform:translate(4%,10%) scale(1.02);  border-radius:50% 50% 60% 40% / 48% 52% 58% 42% }
  100% { transform:translate(0,0) scale(1);      border-radius:50% 50% 50% 50% / 50% 50% 50% 50% }
}

.section-intro{color:var(--muted); margin-bottom:1rem}
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.card{background:var(--glass-bg); -webkit-backdrop-filter:blur(14px) saturate(180%); backdrop-filter:blur(14px) saturate(180%); border:var(--glass-border); border-radius:var(--radius); padding:1rem; transition:transform var(--transition), box-shadow var(--transition); box-shadow:var(--glass-shadow)}
.card:hover{transform:translateY(-4px); box-shadow:0 24px 60px -28px rgba(2,6,23,.35)}
.card .icon{font-size:1.2rem; margin-right:.25rem}
.card .link{margin-top:.6rem; background:transparent; border:0; color:var(--primary); padding:0; cursor:pointer}

.tabs{margin-top:1.2rem; background:var(--glass-bg); -webkit-backdrop-filter:blur(12px) saturate(180%); backdrop-filter:blur(12px) saturate(180%); border:var(--glass-border); border-radius:18px; padding:1rem; box-shadow:var(--glass-shadow)}
.tab-list{display:flex; gap:.5rem; flex-wrap:wrap}
.tab{appearance:none; background:var(--glass-strong-bg); border:var(--glass-border); padding:.55rem .8rem; border-radius:999px; cursor:pointer; transition:background var(--transition), color var(--transition), transform var(--transition)}
.tab:hover{transform:translateY(-1px)}
.tab.active{background:linear-gradient(135deg, var(--accent), var(--primary)); color:#fff}
.tab-panels{position:relative; min-height:150px; padding:.5rem}
.tab-panel{opacity:0; transform:translateY(6px); position:absolute; inset:.5rem; transition:opacity var(--transition), transform var(--transition)}
.tab-panel.active{opacity:1; transform:translateY(0); position:relative}
.checks{columns:2; gap:1.2rem; margin:0; padding-left:1rem}
.checks li{margin:.35rem 0}

.about .pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem}
.pillar{background:var(--glass-bg); -webkit-backdrop-filter:blur(14px) saturate(180%); backdrop-filter:blur(14px) saturate(180%); border:var(--glass-border); border-radius:var(--radius); padding:1rem; box-shadow:var(--glass-shadow)}

.contact .contact-list{list-style:none; padding:0; margin:0 0 1rem; color:var(--muted)}
.form{display:grid; gap:.7rem; background:var(--glass-strong-bg); -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%); border:var(--glass-border); border-radius:var(--radius); padding:1rem; box-shadow:var(--glass-shadow)}
.form input,.form textarea{width:100%; padding:.7rem .8rem; border-radius:12px; border:1px solid rgba(2,6,23,.15); outline:0; transition:box-shadow var(--transition), border-color var(--transition)}
.form input:focus,.form textarea:focus{border-color:var(--primary); box-shadow:var(--ring)}

.site-footer{border-top:1px solid rgba(2,6,23,.08); margin-top:3rem; padding:1.2rem 0; background:var(--glass-strong-bg); -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%)}
.footer-inner{display:flex; align-items:center; justify-content:space-between}
.brand-mini{display:flex; align-items:center; gap:.6rem}
.brand-mini img{height:24px}

/* Buttons */
.btn-ghost{background:var(--glass-bg); border-color:rgba(255,255,255,.45); -webkit-backdrop-filter:blur(12px) saturate(180%); backdrop-filter:blur(12px) saturate(180%);}
.btn-ghost:hover{background:rgba(255,255,255,.28); box-shadow:0 10px 28px -16px rgba(2,6,23,.35)}

/* Utilities */
.glass{background:var(--glass-bg); border:var(--glass-border); -webkit-backdrop-filter:blur(14px) saturate(180%); backdrop-filter:blur(14px) saturate(180%); box-shadow:var(--glass-shadow)}
.glass-strong{background:var(--glass-strong-bg); border:var(--glass-border); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%); box-shadow:var(--glass-shadow)}

/* Responsive */
@media (max-width: 960px){
  .grid-two{grid-template-columns:1fr; padding:2rem 0}
  .cards{grid-template-columns:repeat(2,1fr)}
  /* Make About pillars 2-up on tablets */
  .about .pillars{grid-template-columns:repeat(2,1fr)}
  /* Tweak blob sizes/positions for tablets */
  .orb-a{right:10%; top:4%; width:140px; height:140px}
  .orb-b{right:-2%; bottom:-10%; width:200px; height:200px}
  .orb-c{right:22%; bottom:12%; width:100px; height:100px}
  .orb-d{right:46%; top:18%; width:80px; height:80px}
}
@media (max-width: 720px){
  .cards{grid-template-columns:1fr}
  .checks{columns:1}
  /* Stack About pillars on small phones */
  .about .pillars{grid-template-columns:1fr}
  /* Prevent header controls from overlapping the fixed language switch */
  .header-inner{padding-right:84px}
  /* Solid for maximum readability on mobile */
  .site-nav{position:fixed; inset:64px 0 auto 0; background:rgba(255,255,255,1); -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%); padding:1rem; display:grid; gap:.6rem; transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity var(--transition), transform var(--transition)}
  .site-nav.open{transform:translateY(0); opacity:1; pointer-events:auto}
  /* Align active indicator with stacked links; use blue gradient */
  .site-nav .active-indicator{left:16px; width:calc(100% - 32px); height:40px; top:0; transform:none; background:linear-gradient(135deg, var(--accent), var(--primary)); opacity:.14; border-radius:12px}
  .site-nav a{position:relative; z-index:1}
  /* Hover tint: subtle blue */
  .site-nav a:hover{background:rgba(11,108,255,.06)}
  .menu-toggle{display:inline-flex; position:relative; z-index:61}
  .lang-switch{position:fixed; right:1rem; top:14px; z-index:60}
  /* Mobile blob adjustments to avoid overlap */
  .hero-art{min-height:260px}
  .orb-a{right:8%; top:2%; width:120px; height:120px}
  .orb-b{right:-8%; bottom:-12%; width:180px; height:180px}
  .orb-c{right:16%; bottom:6%; width:88px; height:88px}
  .orb-d{right:38%; top:16%; width:70px; height:70px}
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}