:root{
  --alert-bg:   #D6E6F7;
  --alert-text: #1F2937;
  --line:       #E5E7EB;
  --line-soft:  #F3F4F6;
  --ink:        #111827;
  --ink-soft:   #374151;
  --ink-mute:   #6B7280;
  --bg:         #FFFFFF;
  --bg-soft:    #F9FAFB;
  --brand:      #2563EB;
  --brand-d:    #1D4ED8;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --ease: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:14px;
  line-height:1.5;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
ul{ margin:0; padding:0; list-style:none; }

/* ============================================================
   SVG SPRITE (tersembunyi, dirujuk oleh marquee)
   ============================================================ */
.svg-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* ============================================================
   ALERT BAR
   ============================================================ */
.alert{
  position:relative;
  background:var(--alert-bg);
  color:var(--alert-text);
  padding:12px 48px 12px 24px;
}
.alert__inner{
  max-width:1180px;
  margin:0 auto;
  font-size:13px;
}
.alert__inner a{
  color:var(--alert-text);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(31,41,55,.4);
  transition:text-decoration-color .15s var(--ease);
}
.alert__inner a:hover{ text-decoration-color:currentColor; }
.alert__close{
  position:absolute;
  top:50%; right:24px;
  transform:translateY(-50%);
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; background:transparent; border:0;
  color:var(--alert-text); font-size:20px; line-height:1;
  cursor:pointer; border-radius:6px; opacity:.7;
  transition:opacity .15s var(--ease), background-color .15s var(--ease);
}
.alert__close:hover{ opacity:1; background:rgba(31,41,55,.08); }
.alert__close:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* ============================================================
   LANGUAGE BAR
   ============================================================ */
.lang{ border-bottom:1px solid var(--line); background:var(--bg); }
.lang__inner{
  max-width:1180px; margin:0 auto; padding:10px 24px;
  display:flex; justify-content:flex-end; align-items:center; gap:20px;
}
.lang__btn{
  padding:0; background:none; border:0;
  font-size:13px; font-weight:500;
  color:var(--ink-mute); cursor:pointer;
  transition:color .15s var(--ease);
}
.lang__btn:hover{ color:var(--ink); }
.lang__btn.is-active{ color:var(--brand); }
.lang__btn:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:2px; }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{
  position:relative; background:var(--bg);
  border-bottom:1px solid var(--line); z-index:40;
}
.nav__inner{
  max-width:1180px; margin:0 auto; padding:0 24px; height:64px;
  display:flex; align-items:center; gap:44px;
}
.nav__brand{ display:inline-flex; align-items:center; flex:0 0 auto; }
.nav__brand img{ display:block; height:28px; width:auto; }
.nav__menu{ display:flex; align-items:center; gap:2px; flex:1 1 auto; min-width:0; }
.nav__item{ position:relative; }
.nav__link,
.nav__trigger{
  display:inline-flex; align-items:center; gap:5px;
  padding:8px 12px; border:0; background:none;
  font-size:14px; font-weight:500; color:var(--ink-soft);
  cursor:pointer; border-radius:var(--r-sm);
  white-space:nowrap; transition:color .15s var(--ease);
}
.nav__link:hover,
.nav__trigger:hover{ color:var(--ink); }
.nav__link.is-active{ color:var(--brand); }
.nav__trigger svg{
  width:10px; height:10px; color:var(--ink-mute);
  transition:transform .2s var(--ease);
}
.nav__trigger[aria-expanded="true"] svg{ transform:rotate(180deg); }
.nav__trigger[aria-expanded="true"]{ color:var(--ink); }
.nav__actions{ display:flex; align-items:center; gap:4px; flex:0 0 auto; }
.nav__login{
  padding:8px 12px; font-size:14px; font-weight:500;
  color:var(--ink-soft); border-radius:var(--r-sm);
  white-space:nowrap; transition:color .15s var(--ease);
}
.nav__login:hover{ color:var(--ink); }
.nav__cta{
  display:inline-flex; align-items:center; height:36px; padding:0 16px;
  background:var(--brand); color:#FFFFFF;
  font-size:14px; font-weight:500; border-radius:var(--r-md);
  white-space:nowrap; transition:background-color .15s var(--ease);
}
.nav__cta:hover{ background:var(--brand-d); }
.nav__cta:active{ transform:translateY(.5px); }

/* ============================================================
   DROPDOWN
   ============================================================ */
.dropdown{
  position:absolute; top:calc(100% + 10px); left:-8px;
  padding:20px 20px 18px; background:#FFFFFF;
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 2px 4px rgba(17,24,39,.04), 0 12px 24px rgba(17,24,39,.06);
  display:grid; grid-template-columns:repeat(3, minmax(150px, 1fr));
  gap:2px 32px; opacity:0; visibility:hidden;
  transform:translateY(-4px);
  transition:opacity .15s var(--ease), transform .2s var(--ease), visibility .2s;
}
.dropdown.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown::before{
  content:""; position:absolute; top:-5px; left:28px;
  width:8px; height:8px; background:#FFFFFF;
  border-top:1px solid var(--line); border-left:1px solid var(--line);
  transform:rotate(45deg); border-top-left-radius:2px;
}
.dropdown a{
  display:block; padding:8px 10px; font-size:13.5px;
  color:var(--ink-soft); border-radius:var(--r-sm);
  white-space:nowrap;
  transition:background-color .12s var(--ease), color .12s var(--ease);
}
.dropdown a:hover{ background:var(--line-soft); color:var(--ink); }

/* ============================================================
   HERO GRAPHIC
   ============================================================ */
.hero-graphic{
  display:block; max-width:1180px;
  margin:-80px auto 0; padding:0 24px; line-height:0;
}
.hero-graphic img{ display:block; width:100%; height:auto; margin:0; padding:0; border:0; }

/* ============================================================
   POPUP
   ============================================================ */
.promo{
  position:fixed; inset:0; z-index:999;
  display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(10,14,22,.78);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
.promo.is-open{ opacity:1; visibility:visible; }
.promo__card{
  position:relative; width:100%;
  max-width:min(720px, calc(100vw - 32px));
  aspect-ratio:16 / 10; overflow:hidden;
  background:#0B0F17; box-shadow:0 30px 80px rgba(0,0,0,.5);
  transform:scale(.96); transition:transform .35s var(--ease);
}
.promo.is-open .promo__card{ transform:scale(1); }
.promo__img{ display:block; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; }
.promo__close{
  position:absolute; top:10px; right:10px; z-index:2;
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; background:transparent; border:0; color:#FFFFFF;
  cursor:pointer;
  transition:transform .18s var(--ease), opacity .18s var(--ease);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.7));
}
.promo__close:hover{ transform:scale(1.1); opacity:.85; }
.promo__close:active{ transform:scale(.94); }
.promo__close:focus-visible{ outline:2px solid #FFFFFF; outline-offset:2px; border-radius:4px; }
.promo__close svg{ width:26px; height:26px; display:block; }
body.promo-lock{ overflow:hidden; }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-stack{
  margin-top:-80px; padding:22px 0; background:var(--bg);
  display:flex; flex-direction:column; gap:18px;
}
.marquee{ overflow:hidden; }
.marquee__track{
  display:flex; align-items:center; gap:26px; width:max-content;
  animation:marquee-scroll 40s linear infinite;
}
.marquee--reverse .marquee__track{ animation-direction:reverse; }
.marquee__item{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; flex:none; opacity:.9;
  transition:opacity .2s var(--ease);
}
.marquee__item svg,
.marquee__item img{ display:block; height:100%; width:auto; max-width:160px; }
.marquee__item--openai{ color:#111827; }
.marquee__track:hover .marquee__item{ opacity:.5; }
.marquee__track:hover .marquee__item:hover{ opacity:1; }
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){
  .marquee__track{ animation:none; }
}

/* ============================================================
   FEATURE SECTIONS
   ============================================================ */
.feature{ max-width:1180px; margin:64px auto; padding:0 24px; }
.feature__inner{ display:grid; grid-template-columns:auto 1fr; gap:56px; align-items:center; }
.feature--reverse .feature__inner{ grid-template-columns:1fr auto; gap:56px; }

.feature__media{ line-height:0; }
.feature__media img{
  display:block; height:440px; width:auto; max-width:100%;
  object-fit:contain; margin:0; padding:0; border:0;
}
.feature__text{ max-width:56ch; }
.feature__title{
  margin:0 0 18px;
  font-size:clamp(24px, 3vw, 32px);
  line-height:1.2; font-weight:700;
  letter-spacing:-.026em; color:var(--ink);
}
.feature__desc{
  margin:0 0 22px; font-size:15.5px; line-height:1.65;
  color:var(--ink-soft);
}
.feature__list{
  margin:0 0 26px; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:10px;
}
.feature__list li{
  position:relative; padding-left:26px;
  font-size:14.5px; line-height:1.55; color:var(--ink-soft);
}
.feature__list li::before{
  content:""; position:absolute; left:0; top:6px;
  width:13px; height:7px;
  border-left:2px solid var(--brand);
  border-bottom:2px solid var(--brand);
  transform:rotate(-45deg);
}
.feature__list--stacked{ gap:18px; }
.feature__list--stacked li{ padding-left:30px; }
.feature__list--stacked li::before{ top:5px; width:14px; height:8px; }
.feature__list--stacked strong{
  display:block; font-size:15px; font-weight:600;
  color:var(--ink); margin-bottom:2px; letter-spacing:-.01em;
}
.feature__list--stacked span{
  display:block; font-size:14px; line-height:1.55; color:var(--ink-soft);
}

.cta-container{ display:flex; align-items:center; gap:12px; }
.cta-arrow{
  height:44px; width:auto; display:block;
  pointer-events:none; user-select:none; -webkit-user-drag:none;
}
.feature__cta{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 22px; background:var(--brand); color:#FFFFFF;
  font-size:14.5px; font-weight:500; border-radius:8px;
  white-space:nowrap; transition:background-color .15s var(--ease);
}
.feature__cta:hover{ background:var(--brand-d); }

/* ============================================================
   STATS SECTION
   ============================================================ */
.stats{ max-width:1180px; margin:88px auto; padding:0 24px; }
.stats__head{ text-align:center; max-width:640px; margin:0 auto 56px; }
.stats__eyebrow{
  display:inline-block; margin:0 0 14px;
  font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand);
}
.stats__title{
  margin:0;
  font-size:clamp(26px, 3.4vw, 38px);
  line-height:1.15; font-weight:700;
  letter-spacing:-.028em; color:var(--ink);
}
.stats__grid{
  display:grid; grid-template-columns:repeat(4, 1fr); align-items:stretch;
}
.stat{
  position:relative; padding:8px 18px; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; min-height:140px;
}
.stat + .stat::before{
  content:""; position:absolute; left:0; top:22%; bottom:22%;
  width:1px; background:var(--line);
}
.stat__row{
  display:inline-flex; align-items:baseline; gap:2px;
  font-variant-numeric:tabular-nums; line-height:1;
}
.stat__prefix,
.stat__suffix{
  font-size:clamp(20px, 2.4vw, 28px);
  font-weight:600; letter-spacing:-.02em;
  color:var(--brand); line-height:1;
}
.stat__suffix--unit{
  font-size:clamp(13px, 1.4vw, 16px);
  margin-left:4px; font-weight:500;
  color:var(--ink-mute);
}
.stat__num{
  font-size:clamp(38px, 5.2vw, 60px);
  font-weight:700; letter-spacing:-.036em;
  color:var(--ink); line-height:1;
}
.stat__label{
  margin:16px 0 0; font-size:13.5px; line-height:1.5;
  color:var(--ink-mute); letter-spacing:-.003em; max-width:20ch;
}

/* ============================================================
   DEVELOPER QUOTE SECTION
   ============================================================ */
.devquote{
  padding:0 24px;
  margin:96px auto;
  max-width:1180px;
}

.devquote__box{
  max-width:760px;
  margin:0 auto;
  padding:48px 48px 44px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:20px;
  position:relative;
}

.devquote__mark{
  display:block;
  width:44px;
  height:auto;
  color:var(--brand);
  opacity:.9;
  margin:0 0 20px;
}

.devquote__body{
  font-family:'Fraunces', Georgia, serif;
  font-size:clamp(20px, 2.4vw, 26px);
  line-height:1.45;
  font-weight:400;
  letter-spacing:-.014em;
  color:var(--ink);
  margin:0 0 32px;
}

.devquote__author{
  display:flex;
  align-items:center;
  gap:14px;
  padding-top:24px;
  border-top:1px solid var(--line);
}

.devquote__avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  flex:none;
  background:var(--line-soft);
}

.devquote__meta{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}

.devquote__name{
  margin:0;
  font-size:14.5px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.01em;
}

.devquote__role{
  margin:0;
  font-size:13px;
  color:var(--ink-mute);
}

/* ============================================================
   TESTIMONIALS SECTION
   ============================================================ */
.testimonials{
  padding:88px 24px 96px;
  background:var(--bg-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.testimonials__inner{
  max-width:1180px;
  margin:0 auto;
}

.testimonials__head{
  text-align:center;
  max-width:600px;
  margin:0 auto 52px;
}

.testimonials__eyebrow{
  display:inline-block;
  margin:0 0 14px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand);
}

.testimonials__title{
  margin:0;
  font-size:clamp(26px, 3.4vw, 38px);
  line-height:1.15;
  font-weight:700;
  letter-spacing:-.028em;
  color:var(--ink);
}

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

.testimonial{
  padding:28px 26px 24px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:14px;
  display:flex;
  flex-direction:column;
  gap:20px;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}

.testimonial:hover{
  border-color:#D1D5DB;
  transform:translateY(-2px);
}

.testimonial__quote{
  margin:0;
  font-size:15px;
  line-height:1.65;
  color:var(--ink-soft);
  letter-spacing:-.004em;
  flex:1 1 auto;
}

.testimonial__author{
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:18px;
  border-top:1px solid var(--line-soft);
}

.testimonial__avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  flex:none;
  background:var(--line-soft);
}

.testimonial__meta{
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0;
}

.testimonial__name{
  margin:0;
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.008em;
}

.testimonial__role{
  margin:0;
  font-size:12.5px;
  color:var(--ink-mute);
}

/* ============================================================
   RESPONSIVE — NAV + FEATURE
   ============================================================ */
@media (max-width:900px){
  .nav__inner{
    height:auto; flex-wrap:wrap; align-items:center;
    column-gap:12px; row-gap:0; padding:12px 20px 0;
  }
  .nav__brand img{ height:26px; }
  .nav__menu{
    flex:0 0 100%; order:3; width:100%; min-width:0;
    overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    margin:0 -20px; padding:0 20px 10px;
  }
  .nav__menu::-webkit-scrollbar{ display:none; }
  .nav__actions{ margin-left:auto; }
  .nav__link,
  .nav__trigger{ padding:8px 10px; font-size:14px; flex:0 0 auto; }
  .dropdown{
    position:fixed; left:16px; right:16px; top:auto; margin-top:4px;
    grid-template-columns:repeat(2, 1fr); gap:2px 16px;
    padding:16px; max-height:70vh; overflow-y:auto;
  }
  .dropdown::before{ display:none; }

  .hero-graphic{ margin:-20px auto 0; padding:0 20px; }

  .marquee-stack{ margin-top:-20px; padding:18px 0; gap:14px; }
  .marquee__track{ gap:22px; animation-duration:36s; }
  .marquee__item{ height:36px; }

  .feature{ padding:0 20px; margin:44px auto; }
  .feature__inner,
  .feature--reverse .feature__inner{ gap:24px; }
  .feature__media img{ height:320px; }
  .feature__text{ max-width:100%; }
  .feature__title{ font-size:22px; margin-bottom:12px; }
  .feature__desc{ font-size:14px; margin-bottom:16px; }
  .feature__list{ gap:8px; margin-bottom:18px; }
  .feature__list li{ font-size:13.5px; padding-left:22px; }
  .feature__list li::before{ width:11px; height:6px; top:5px; }
  .feature__list--stacked{ gap:14px; }
  .feature__list--stacked li{ padding-left:26px; }
  .feature__list--stacked strong{ font-size:14px; }
  .feature__list--stacked span{ font-size:13px; }
  .feature__cta{ height:38px; padding:0 16px; font-size:13.5px; }
  .cta-arrow{ height:38px; }

  .stats{ margin:64px auto; }
  .stats__head{ margin-bottom:40px; }
  .stats__grid{ grid-template-columns:repeat(2, 1fr); gap:40px 0; }
  .stat + .stat::before{ display:none; }
  .stat{ padding:0 14px; min-height:0; }
  .stat:nth-child(2)::before,
  .stat:nth-child(4)::before{
    content:""; display:block; position:absolute;
    left:0; top:15%; bottom:15%;
    width:1px; background:var(--line);
  }

  .devquote{ margin:72px auto; padding:0 20px; }
  .devquote__box{ padding:36px 32px 32px; border-radius:16px; }
  .devquote__mark{ width:36px; margin-bottom:16px; }
  .devquote__body{ margin-bottom:26px; }

  .testimonials{ padding:64px 20px 72px; }
  .testimonials__head{ margin-bottom:40px; }
  .testimonials__grid{ gap:16px; }
  .testimonial{ padding:24px 22px 20px; }
  .testimonial__quote{ font-size:14px; }
}

@media (max-width:520px){
  .alert{ padding:10px 44px 10px 16px; }
  .alert__inner{ font-size:12.5px; }
  .alert__close{ right:12px; width:26px; height:26px; font-size:18px; }
  .lang__inner{ padding:8px 16px; gap:14px; }
  .nav__inner{ padding:10px 16px 0; }
  .nav__brand img{ height:24px; }
  .nav__cta{ height:32px; padding:0 12px; font-size:13px; }
  .nav__login{ padding:6px 8px; font-size:13px; }
  .nav__menu{ margin:0 -16px; padding:0 16px 8px; }
  .dropdown{ grid-template-columns:1fr; }

  .hero-graphic{ margin:-40px auto 0; padding:0 16px; }

  .marquee-stack{ margin-top:-20px; padding:14px 0; gap:10px; }
  .marquee__track{ gap:18px; animation-duration:28s; }
  .marquee__item{ height:28px; }

  .feature{ padding:0 16px; margin:36px auto; }
  .feature__inner,
  .feature--reverse .feature__inner{ gap:16px; }
  .feature__media img{ height:220px; }
  .feature__title{ font-size:18px; margin-bottom:10px; }
  .feature__desc{ font-size:13px; margin-bottom:14px; line-height:1.6; }
  .feature__list{ gap:7px; margin-bottom:16px; }
  .feature__list li{ font-size:12.5px; padding-left:20px; line-height:1.55; }
  .feature__list li::before{ width:10px; height:5px; top:5px; }
  .feature__list--stacked{ gap:12px; }
  .feature__list--stacked li{ padding-left:24px; }
  .feature__list--stacked strong{ font-size:13px; }
  .feature__list--stacked span{ font-size:12.5px; }
  .feature__cta{ height:36px; padding:0 14px; font-size:13px; }
  .cta-container{ gap:8px; }
  .cta-arrow{ height:36px; }

  .stats{ margin:52px auto; padding:0 16px; }
  .stats__title{ font-size:22px; }
  .stats__grid{ gap:32px 0; }
  .stat__label{ font-size:12.5px; margin-top:12px; }

  .devquote{ margin:56px auto; padding:0 16px; }
  .devquote__box{ padding:28px 22px 24px; border-radius:14px; }
  .devquote__mark{ width:30px; margin-bottom:14px; }
  .devquote__body{ font-size:18px; line-height:1.5; margin-bottom:22px; }
  .devquote__author{ padding-top:18px; gap:12px; }
  .devquote__avatar{ width:42px; height:42px; }
  .devquote__name{ font-size:14px; }
  .devquote__role{ font-size:12.5px; }

  .testimonials{ padding:52px 16px 60px; }
  .testimonials__head{ margin-bottom:32px; }
  .testimonials__title{ font-size:22px; }
  .testimonials__grid{ grid-template-columns:1fr; gap:14px; }
  .testimonial{ padding:22px 20px 18px; }
  .testimonial__quote{ font-size:13.5px; line-height:1.6; }
  .testimonial__avatar{ width:38px; height:38px; }
  .testimonial__name{ font-size:13.5px; }
  .testimonial__role{ font-size:12px; }

  .promo{ padding:14px; }
  .promo__close{ top:4px; right:4px; width:40px; height:40px; }
  .promo__close svg{ width:24px; height:24px; }
}

@media (max-width:380px){
  .feature__media img{ height:170px; }
  .feature__title{ font-size:16px; }
  .feature__desc{ font-size:12.5px; }
  .feature__list li{ font-size:12px; }
  .feature__list--stacked strong{ font-size:12.5px; }
  .feature__list--stacked span{ font-size:12px; }
  .cta-arrow{ height:32px; }
  .devquote__body{ font-size:17px; }
}

/* ============================================================
   FEEDBACK FORM
   ============================================================ */
.feedback{
  padding:96px 24px;
  background:#F9FAFB;
  border-top:1px solid #E5E7EB;
}
.feedback__inner{
  max-width:640px;
  margin:0 auto;
}
.feedback__head{
  text-align:center;
  margin:0 0 40px;
}
.feedback__eyebrow{
  display:inline-block;
  margin:0 0 14px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#2563EB;
}
.feedback__title{
  margin:0 0 12px;
  font-size:clamp(26px, 3.4vw, 36px);
  line-height:1.15;
  font-weight:700;
  letter-spacing:-.028em;
  color:#111827;
}
.feedback__desc{
  margin:0;
  font-size:15px;
  line-height:1.65;
  color:#374151;
}

.feedback__form{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.feedback__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.field__label{
  font-size:13px;
  font-weight:500;
  color:#111827;
  letter-spacing:-.005em;
}
.field__input{
  width:100%;
  padding:11px 14px;
  font-family:inherit;
  font-size:14.5px;
  line-height:1.4;
  color:#111827;
  background:#FFFFFF;
  border:1px solid #E5E7EB;
  border-radius:10px;
  outline:none;
  -webkit-appearance:none;
          appearance:none;
  transition:border-color .15s cubic-bezier(.4,0,.2,1),
             box-shadow .15s cubic-bezier(.4,0,.2,1);
}
.field__input::placeholder{
  color:#9CA3AF;
  opacity:1;
}
.field__input:hover{ border-color:#D1D5DB; }
.field__input:focus{
  border-color:#2563EB;
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.field__input--select{
  padding-right:40px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px;
  cursor:pointer;
}
.field__input--area{
  min-height:130px;
  resize:vertical;
  line-height:1.55;
}

.feedback__submit{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:46px;
  padding:0 24px;
  margin-top:4px;
  font-family:inherit;
  font-size:14.5px;
  font-weight:500;
  color:#FFFFFF;
  background:#2563EB;
  border:0;
  border-radius:10px;
  cursor:pointer;
  transition:background-color .15s cubic-bezier(.4,0,.2,1),
             transform .1s cubic-bezier(.4,0,.2,1);
}
.feedback__submit:hover{ background:#1D4ED8; }
.feedback__submit:active{ transform:translateY(1px); }

.feedback__status{
  margin:0;
  padding:12px 14px;
  font-size:13.5px;
  line-height:1.5;
  color:#065F46;
  background:#ECFDF5;
  border:1px solid #A7F3D0;
  border-radius:10px;
}

#feedback{ scroll-margin-top:24px; }

@media (max-width:640px){
  .feedback{ padding:64px 20px; }
  .feedback__head{ margin-bottom:32px; }
  .feedback__row{ grid-template-columns:1fr; gap:16px; }
  .feedback__form{ gap:16px; }
  .feedback__submit{ align-self:stretch; }
}

/* ============================================================
   FEEDBACK MODAL
   ============================================================ */





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

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

/* ============================================================
   FEEDBACK MODAL
   ============================================================ */





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

/* ============================================================
   FEEDBACK MODAL
   ============================================================ */
.fb.is-open{ opacity:1; visibility:visible; pointer-events:auto; }


.fb.is-open .fb__card{ transform:translateY(0) scale(1); }











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



.fb.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}



















@media (max-width:640px){






}


/* ============================================================
   FEEDBACK MODAL
   ============================================================ */
.fb{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:56px 20px 24px;
  background:rgba(248,250,252,.72);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}
.fb.is-open{ opacity:1; visibility:visible; pointer-events:auto; }

.fb__overlay{
  position:absolute;
  inset:0;
  cursor:pointer;
}

.fb__card{
  position:relative;
  width:100%;
  max-width:500px;
  padding:36px 14px 14px;
  background:#fff;
  border:1px solid #E8EBEF;
  border-radius:18px;
  box-shadow:
    0 1px 2px rgba(15,23,42,.03),
    0 24px 48px rgba(15,23,42,.08);
  transform:translateY(6px);
  transition:transform .26s cubic-bezier(.4,0,.2,1);
}
.fb.is-open .fb__card{ transform:translateY(0); }

.fb__pill{
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%,-50%);
  padding:5px 14px;
  font-size:13px;
  font-weight:600;
  letter-spacing:-.005em;
  color:#0F172A;
  background:#F4F5F7;
  border:1px solid #E8EBEF;
  border-radius:999px;
  white-space:nowrap;
}

.fb__form{
  display:block;
  margin:0;
}

.fb__field{
  position:relative;
  margin:0 0 12px;
}

.fb__area{
  display:block;
  width:100%;
  min-height:140px;
  padding:14px 14px 36px;
  font-family:inherit;
  font-size:14.5px;
  line-height:1.55;
  color:#0F172A;
  background:#fff;
  border:1px solid #E8EBEF;
  border-radius:12px;
  outline:none;
  resize:none;
  box-sizing:border-box;
  transition:border-color .15s ease;
}
.fb__area::placeholder{ color:#9CA3AF; opacity:1; }
.fb__area:hover{ border-color:#D1D5DB; }
.fb__area:focus{ border-color:#94A3B8; }

.fb__hint{
  position:absolute;
  right:14px;
  bottom:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:#9CA3AF;
  pointer-events:none;
}
.fb__hint svg{ width:14px; height:14px; flex:none; }

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

.fb__moods{
  display:inline-flex;
  align-items:center;
  gap:2px;
}
.fb__mood{
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:transparent;
  border:0;
  border-radius:8px;
  color:#6B7280;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .15s ease, background-color .15s ease, transform .12s ease;
}
.fb__mood:hover{ color:#0F172A; background:rgba(15,23,42,.05); }
.fb__mood:active{ transform:scale(.94); }
.fb__mood.is-active{ color:#0F172A; background:rgba(15,23,42,.08); }
.fb__mood svg{ width:20px; height:20px; }

.fb__send{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;
  padding:0 20px;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  color:#fff;
  background:#0F172A;
  border:0;
  border-radius:9px;
  cursor:pointer;
  transition:background-color .15s ease, transform .12s ease;
}
.fb__send:hover{ background:#000; }
.fb__send:active{ transform:translateY(1px); }

.fb__thanks{
  margin:12px 0 0;
  padding:10px 12px;
  font-size:13px;
  text-align:center;
  color:#065F46;
  background:#ECFDF5;
  border:1px solid #A7F3D0;
  border-radius:8px;
}

body.fb-lock{ overflow:hidden; }

@media (max-width:520px){
  .fb{ padding:48px 14px 14px; }
  .fb__card{ padding:34px 12px 12px; border-radius:16px; }
  .fb__pill{ font-size:12.5px; padding:4px 12px; }
  .fb__area{ min-height:120px; padding:12px 12px 34px; font-size:14px; }
  .fb__mood{ width:30px; height:30px; }
  .fb__mood svg{ width:19px; height:19px; }
  .fb__send{ height:34px; padding:0 16px; font-size:13.5px; }
  .fb__hint{ font-size:11.5px; right:12px; bottom:10px; }
}

/* ============================================================
   STICKY NAVBAR
   ============================================================ */
.nav{
  position:sticky;
  top:0;
  z-index:100;
  background-color:#ffffff;
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  transition:
    background-color .28s cubic-bezier(.4,0,.2,1),
    border-color .28s cubic-bezier(.4,0,.2,1),
    box-shadow .28s cubic-bezier(.4,0,.2,1);
}
.nav.is-scrolled{
  background-color:rgba(255,255,255,.78);
  border-bottom-color:#E5E7EB;
  box-shadow:
    0 1px 2px rgba(15,23,42,.03),
    0 6px 24px rgba(15,23,42,.06);
}
.nav__inner{
  transition:height .28s cubic-bezier(.4,0,.2,1);
}
.nav.is-scrolled .nav__inner{
  height:56px;
}
.nav__brand img{
  transition:height .28s cubic-bezier(.4,0,.2,1);
}
.nav.is-scrolled .nav__brand img{
  height:24px;
}

@media (max-width:900px){
  .nav.is-scrolled .nav__inner{
    height:auto;
  }
}


/* ============================================================
   PRICING SECTION
   ============================================================ */
.pricing{
  padding:96px 24px;
  background:#FFFFFF;
  font-family:'Inter',-apple-system,sans-serif;
}
.pricing__inner{max-width:560px;margin:0 auto}

.pricing__head{
  text-align:center;
  margin:0 0 40px;
}
.pricing__title{
  font-size:clamp(28px,3.6vw,36px);
  font-weight:700;
  letter-spacing:-.03em;
  color:#0A0A0A;
  margin:0 0 12px;
  line-height:1.15;
}
.pricing__sub{
  font-size:15px;
  color:#6B7280;
  margin:0;
  letter-spacing:-.005em;
}

.plan{
  background:#FAFAFA;
  border:1px solid #E5E5E5;
  border-radius:16px;
  padding:36px 32px 32px;
  display:flex;
  flex-direction:column;
}

.plan__top{margin-bottom:28px}
.plan__name{
  font-size:22px;
  font-weight:700;
  letter-spacing:-.02em;
  color:#0A0A0A;
  margin:0 0 6px;
}
.plan__desc{
  font-size:14px;
  color:#6B7280;
  margin:0;
  letter-spacing:-.005em;
}

.plan__options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:28px;
}

.plan__opt{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px 16px 18px;
  background:#FFFFFF;
  border:1.5px solid #E5E5E5;
  border-radius:12px;
  text-align:left;
  cursor:pointer;
  font-family:inherit;
  transition:all .15s cubic-bezier(.4,0,.2,1);
}
.plan__opt:hover{border-color:#A1A1AA}
.plan__opt.is-active{
  border-color:#0A0A0A;
  background:#0A0A0A;
  color:#FAFAFA;
}

.plan__opt-label{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6B7280;
}
.plan__opt.is-active .plan__opt-label{color:#A1A1AA}

.plan__opt-price{
  display:flex;
  align-items:baseline;
  gap:2px;
  font-size:26px;
  font-weight:700;
  letter-spacing:-.03em;
  color:#0A0A0A;
  line-height:1;
}
.plan__opt.is-active .plan__opt-price{color:#FAFAFA}

.plan__opt-per{
  font-size:13px;
  font-weight:500;
  color:#6B7280;
  margin-left:2px;
  letter-spacing:-.005em;
}
.plan__opt.is-active .plan__opt-per{color:#A1A1AA}

.plan__opt-badge{
  position:absolute;
  top:-9px;
  right:12px;
  padding:3px 9px;
  font-size:10.5px;
  font-weight:600;
  color:#92400E;
  background:#FED7AA;
  border-radius:5px;
  letter-spacing:.01em;
}

.plan__body{
  padding-top:28px;
  border-top:1px solid #E5E5E5;
  margin-bottom:28px;
}
.plan__label{
  font-size:13px;
  font-weight:600;
  color:#0A0A0A;
  margin:0 0 18px;
  letter-spacing:-.005em;
}
.plan__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.plan__list li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  color:#374151;
  letter-spacing:-.005em;
}
.plan__list svg{
  width:16px;
  height:16px;
  flex:none;
  color:#0A0A0A;
  stroke-width:2.5;
}

.plan__cta{
  display:flex;
  align-items:center;
  justify-content:center;
  height:50px;
  padding:0 24px;
  font-size:15px;
  font-weight:600;
  color:#FAFAFA;
  background:#0A0A0A;
  border-radius:10px;
  text-decoration:none;
  transition:background-color .15s;
  letter-spacing:-.005em;
}
.plan__cta:hover{background:#27272A}

@media (max-width:520px){
  .pricing{padding:64px 20px}
  .plan{padding:28px 20px 24px}
  .plan__opt{padding:14px 12px 16px}
  .plan__opt-price{font-size:22px}
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:#0A0A0A;
  color:#A1A1AA;
  padding:96px 24px 48px;
  text-align:center;
  font-family:'Inter',-apple-system,sans-serif;
}

.footer__nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 32px;
  margin-bottom:32px;
}
.footer__nav a{
  font-size:14.5px;
  font-weight:500;
  color:#E4E4E7;
  text-decoration:none;
  letter-spacing:-.005em;
  transition:color .15s;
}
.footer__nav a:hover{color:#FFFFFF}

.footer__social{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin-bottom:36px;
}
.footer__social a{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#A1A1AA;
  border-radius:8px;
  transition:color .15s, background-color .15s;
}
.footer__social a:hover{
  color:#FFFFFF;
  background:rgba(255,255,255,.06);
}
.footer__social svg{
  width:20px;
  height:20px;
}

.footer__copy{
  font-size:13.5px;
  color:#71717A;
  margin:0;
  letter-spacing:-.005em;
}

@media (max-width:520px){
  .footer{padding:72px 20px 40px}
  .footer__nav{gap:6px 20px;margin-bottom:28px}
  .footer__nav a{font-size:13.5px}
  .footer__social{gap:8px;margin-bottom:28px}
  .footer__social a{width:32px;height:32px}
  .footer__social svg{width:18px;height:18px}
  .footer__copy{font-size:12.5px}
}

/* ============================================================
   NAV USER PILL
   ============================================================ */
.nav__user{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 14px 0 12px;
  font-family:inherit;
  font-size:13.5px;
  font-weight:500;
  color:var(--ink-soft);
  background:var(--line-soft);
  border:1px solid var(--line);
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .15s var(--ease),border-color .15s var(--ease);
}
.nav__user:hover{
  background:#FFFFFF;
  border-color:#D1D5DB;
}
.nav__user svg{
  width:16px;
  height:16px;
  flex:none;
  color:var(--ink-mute);
}
.nav__user-email{
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Logout item dalam dropdown */
.dd-item--danger{color:#DC2626 !important}
.dd-item--danger:hover{background:rgba(220,38,38,.08) !important}
.dd-item--danger svg{color:#DC2626 !important}

@media (max-width:520px){
  .nav__user{
    height:32px;
    padding:0 10px 0 8px;
    font-size:13px;
  }
  .nav__user-email{max-width:120px}
}

@media (max-width:360px){
  .nav__user-email{display:none}
  .nav__user{padding:0 10px}
}

.dropdown-danger{color:#DC2626 !important}
.dropdown-danger:hover{background:rgba(220,38,38,.08) !important}
.dropdown-danger svg{color:#DC2626 !important}