:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #141414; --chat-doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150' fill='none' stroke='%23bba3aa' stroke-opacity='.19' stroke-width='1.35'%3E%3Cpath d='M18 27h17a5 5 0 0 1 5 5v9a5 5 0 0 1-5 5h-8l-6 5v-5h-3a5 5 0 0 1-5-5v-9a5 5 0 0 1 5-5Z'/%3E%3Cpath d='m101 19 2.4 5.6 5.6 2.4-5.6 2.4-2.4 5.6-2.4-5.6-5.6-2.4 5.6-2.4 2.4-5.6Z'/%3E%3Cpath d='M78 69c3-3 6-3 8-1l5 5c2 2 2 4 0 6l-4 4c5 9 12 16 21 21l4-4c2-2 4-2 6 0l5 5c2 2 2 5-1 8l-3 3c-3 3-7 3-11 1-16-8-30-22-38-38-2-4-2-8 1-11l3-3Z'/%3E%3Cpath d='M78 123c7 0 13 3 17 8M94 123c7 0 13 3 17 8'/%3E%3Ccircle cx='28' cy='104' r='5'/%3E%3Cpath d='M43 100v9m-4-4h9'/%3E%3C/svg%3E"); }
* { box-sizing: border-box; }
body { margin: 0; }
.landing-page { position: relative; min-height: 100vh; overflow: hidden; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 585' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='red' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%23ff4d67'/%3E%3Cstop offset='.55' stop-color='%23ed002e'/%3E%3Cstop offset='1' stop-color='%23c90028'/%3E%3C/linearGradient%3E%3ClinearGradient id='soft' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop stop-color='%23f6ebed'/%3E%3Cstop offset='.7' stop-color='%23fff' stop-opacity='.78'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='shadow' x='-10%25' y='-10%25' width='120%25' height='125%25'%3E%3CfeDropShadow dx='0' dy='7' stdDeviation='8' flood-color='%239b0020' flood-opacity='.22'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='1024' height='585' fill='%23fff'/%3E%3Cpath d='M278 585 C289 526 339 492 414 438 C507 371 560 323 606 267 C643 222 688 196 743 183 L1024 183 L1024 585Z' fill='url(%23soft)'/%3E%3Cpath filter='url(%23shadow)' d='M1024 52 C940 43 874 47 821 67 C732 101 655 171 605 246 C574 292 554 350 561 400 C566 449 588 476 630 489 L1024 585Z' fill='url(%23red)'/%3E%3C/svg%3E"); background-size: cover; background-position: center; background-repeat: no-repeat; }
.landing-grain { position:absolute; z-index:0; top:0; left:0; width:64vw; height:62vh; opacity:.58; pointer-events:none; background-image:radial-gradient(circle, rgb(112 102 106 / 70%) 1px, transparent 1.3px),radial-gradient(circle, rgb(190 180 183 / 60%) .65px, transparent 1px); background-position:0 0,7px 8px; background-size:12px 12px,17px 17px; -webkit-mask-image:radial-gradient(ellipse 100% 100% at 0 0,#000 0%,rgb(0 0 0 / 68%) 28%,transparent 78%); mask-image:radial-gradient(ellipse 100% 100% at 0 0,#000 0%,rgb(0 0 0 / 68%) 28%,transparent 78%); }
.hero { position:relative; z-index:1; min-height:100vh; max-width:none; margin:auto; padding:clamp(24px,3.2vh,36px) clamp(52px,4.8vw,92px); }
.hero-logo { display:block; width:100px; height:auto; }
.hero-copy { position:relative; z-index:2; width:clamp(340px,35vw,680px); margin-top:clamp(58px,10vh,92px); }
.hero-status { display:inline-flex; align-items:center; gap:7px; margin:0 0 20px; padding:9px 15px; border:1px solid #eee; border-radius:999px; background:rgb(255 255 255 / 78%); font-size:13px; box-shadow:0 3px 10px rgb(30 0 0 / 3%); }
.hero-status span { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgb(34 197 94 / 14%); }.hero-status strong,.hero h1 em { color:#e60028; font-style:normal; }
.hero h1 { margin:0; font-size:clamp(36px,3vw,54px); line-height:1.04; letter-spacing:-.05em; font-weight:800; }.hero-description { width:min(100%,570px); margin:17px 0 23px; font-size:clamp(12px,.78vw,14px); line-height:1.6; color:#343434; }
.hero-cta { display:inline-flex; align-items:center; gap:13px; padding:15px 22px; border-radius:13px; color:#fff; background:linear-gradient(135deg,#ef002e,#d60027); box-shadow:0 10px 20px rgb(220 0 35 / 24%); text-decoration:none; font-size:14px; font-weight:700; }.hero-cta span { font-size:21px; line-height:0; }.hero-cta b { margin-left:10px; font-size:21px; font-weight:400; }
.hero-cta { animation:cta-ring 2.8s cubic-bezier(.36,.07,.19,.97) infinite; }.hero-cta .cta-chat-icon { display:grid; width:22px; height:22px; place-items:center; }.cta-chat-icon svg { width:21px; height:21px; stroke:#fff; }.hero-cta:hover { animation-play-state:paused; } @keyframes cta-ring { 0%,63%,100% { transform:translateX(0) rotate(0) scale(1); box-shadow:0 10px 20px rgb(220 0 35 / 24%); } 67% { transform:translateX(-4px) rotate(-1.5deg) scale(1.045); box-shadow:0 13px 25px rgb(220 0 35 / 38%); } 72% { transform:translateX(4px) rotate(1.5deg) scale(1.045); } 77% { transform:translateX(-3px) rotate(-1deg) scale(1.03); } 82% { transform:translateX(3px) rotate(1deg) scale(1.025); } 87% { transform:translateX(-1px) rotate(-.4deg) scale(1.012); } 92% { transform:translateX(0) rotate(0) scale(1); } }
.hero-trust { display:flex; align-items:center; gap:15px; width:278px; margin-top:32px; padding:14px 17px; border-radius:14px; background:rgb(255 255 255 / 86%); box-shadow:0 7px 18px rgb(0 0 0 / 10%); }.trust-logo { width:32px; height:32px; object-fit:contain; }.hero-trust p { margin:0; font-size:12px; line-height:1.55; }.hero-trust small { color:#666; }.hero-trust i { color:#e60028; font-style:normal; }
.hero-bot { position:absolute; z-index:1; width:auto; height:clamp(480px,84vh,760px); right:34%; bottom:1%; object-fit:contain; filter:drop-shadow(0 14px 14px rgb(100 0 20 / 20%)); animation:megabot-float 3.6s ease-in-out infinite; }
@keyframes megabot-float { 0%,100% { translate:0 0; } 50% { translate:0 -7px; } }
.chat-card { position:absolute; z-index:2; width:clamp(245px,21.5vw,410px); right:clamp(70px,7.5vw,145px); top:clamp(112px,17vh,190px); overflow:hidden; border:2px solid rgb(255 255 255 / 78%); border-radius:24px; background:#fff; box-shadow:0 20px 35px rgb(104 0 20 / 22%); }.chat-card header { display:flex; align-items:center; gap:12px; padding:19px 21px; color:#fff; background:linear-gradient(135deg,#c7002a,#9f0024); box-shadow:inset 0 -1px rgb(255 255 255 / 13%); }.chat-avatar { display:grid; width:42px; height:42px; place-items:center; border-radius:50%; background:#1d1d1d; font-size:25px; }.chat-card header div { flex:1; }.chat-card header strong,.chat-card header small { display:block; }.chat-card header small { font-size:11px; }.chat-card header small i { display:inline-block; width:6px; height:6px; border-radius:50%; background:#31d473; }.chat-card header>b { font-size:22px; font-weight:400; }.chat-content { padding:18px; }.chat-bubble { display:flex; gap:9px; align-items:flex-start; font-size:12px; }.chat-bubble>strong { padding-top:4px; }.chat-bubble span { display:block; padding:12px; border-radius:12px; background:#f0f0f2; line-height:1.45; }.chat-bubble small { display:block; margin-top:6px; color:#999; font-size:9px; }.chat-content ul { display:grid; gap:9px; padding:0; margin:16px 0; list-style:none; }.chat-content li { padding:9px 12px; border:1px solid #ffb6c2; border-radius:8px; color:#3d3d3d; font-size:11px; }.chat-content li::first-letter { color:#e60028; }.chat-input { display:flex; justify-content:space-between; padding:14px; border:1px solid #eee; border-radius:12px; color:#aaa; font-size:11px; }.chat-input b { color:#e60028; font-size:18px; line-height:10px; }.powered { margin:12px 0 0; text-align:center; color:#888; font-size:10px; }.powered strong { color:#e60028; }
.chat-typing { display:flex; align-items:center; gap:4px; width:max-content; margin:8px 0 0 31px; padding:7px 9px; border-radius:10px; background:#f0f0f2; }.chat-typing[hidden] { display:none; }.chat-typing i { width:5px; height:5px; border-radius:50%; background:#9a9a9a; animation:chat-dot 1s ease-in-out infinite; }.chat-typing i:nth-child(2) { animation-delay:.15s; }.chat-typing i:nth-child(3) { animation-delay:.3s; } @keyframes chat-dot { 0%,100% { opacity:.35; transform:translateY(0); } 50% { opacity:1; transform:translateY(-3px); } }
.chat-avatar { overflow:hidden; }.chat-avatar img { width:100%; height:100%; object-fit:cover; object-position:center 38%; }
.chat-thread .message-user { background:linear-gradient(135deg,#ff6680,#e91e49); box-shadow:0 4px 11px rgb(222 20 62 / 17%); }
.chat-bubble { height:94px; overflow:hidden; }
.chat-typing { height:29px; margin-top:8px; }
.chat-typing[hidden] { display:flex !important; visibility:hidden; }
.chat-user { width:82%; margin:0 0 10px auto; padding:10px 12px; border-radius:12px 12px 3px 12px; background:#ffe5e9; color:#353535; font-size:11px; line-height:1.42; }.chat-user small { display:block; margin-top:5px; color:#9b8b8e; font-size:8px; }.chat-bubble > span { display:block; padding:12px; border-radius:12px; background:#f0f0f2; line-height:1.45; }.chat-bubble > span #chatMessage { display:inline; padding:0; border-radius:0; background:transparent; }
.chat-content { background-color:#fafafd; background-image:var(--chat-doodle); background-size:150px 150px; }.chat-thread { display:flex; flex-direction:column; gap:8px; height:208px; overflow:hidden auto; padding:2px 2px 8px; scrollbar-width:none; transition:opacity .35s ease; }.chat-thread::-webkit-scrollbar { display:none; }.chat-thread.is-resetting { opacity:0; }.message { max-width:84%; padding:9px 11px 7px; border-radius:17px; font-size:10px; line-height:1.38; animation:message-in .32s ease both; }.message span { display:block; }.message small { display:block; margin-top:4px; font-size:8px; opacity:.65; }.message-user { align-self:flex-end; border-bottom-right-radius:4px; color:#fff; background:linear-gradient(135deg,#ff3155,#e6002b); box-shadow:0 3px 7px rgb(230 0 43 / 16%); }.message-bot { align-self:flex-start; border-bottom-left-radius:4px; color:#202124; background:#e9ebf0; }.chat-typing { display:flex; height:29px; margin:0 0 8px 4px; background:#e9ebf0; }.chat-input { background:#fff; }.chat-typing[hidden] { display:flex !important; visibility:hidden; } @keyframes message-in { from { opacity:0; transform:translateY(8px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (orientation:landscape) and (max-width:1180px) { .hero { padding:22px clamp(36px,5vw,58px); }.hero-logo { width:105px; }.hero-copy { width:39vw; margin-top:clamp(34px,7vh,58px); }.hero h1 { font-size:clamp(34px,4.2vw,47px); }.hero-description { width:100%; font-size:12px; }.hero-status { margin-bottom:14px; font-size:11px; }.hero-bot { height:clamp(390px,72vh,560px); right:32%; bottom:0; }.chat-card { width:clamp(240px,25vw,300px); right:7vw; top:clamp(58px,12vh,90px); transform:none; }.chat-card header { padding:13px 15px; }.chat-avatar { width:34px; height:34px; font-size:19px; }.chat-content { padding:12px; }.chat-bubble { font-size:10px; }.chat-bubble span { padding:9px; }.chat-content ul { gap:6px; margin:10px 0; }.chat-content li { padding:7px 8px; font-size:9px; }.chat-input { padding:10px; font-size:9px; }.powered { margin:8px 0 0; font-size:8px; } }
@media (max-width:640px) { .landing-page { min-height:760px; background-position:62% center; }.hero { padding:22px; }.hero-logo { width:112px; }.hero-copy { margin-top:54px; width:100%; }.hero-status { font-size:11px; }.hero h1 { font-size:42px; }.hero-description { max-width:370px; font-size:13px; }.hero-bot { width:auto; height:54vh; right:-8vw; bottom:0; opacity:.48; }.chat-card { display:none; }.hero-trust { margin-top:23px; }.landing-grain { width:85vw; } }

/* Landscape memakai grid tiga kolom agar desktop dan tablet tidak menyisakan ruang kosong. */
@media (orientation:landscape) and (min-width:768px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(330px, 1.15fr) minmax(260px, .86fr) minmax(260px, .76fr);
    column-gap: clamp(20px, 2.8vw, 56px);
    align-items: start;
  }

  .hero-logo { position: absolute; top: clamp(22px, 3.2vh, 36px); left: clamp(52px, 4.8vw, 92px); }
  .hero-copy { position: static; grid-column: 1; width: 100%; margin-top: clamp(177px, 22vh, 228px); transform:none; }
  .hero-trust { position:absolute; z-index:3; left:clamp(52px,4.8vw,92px); bottom:clamp(18px,3vh,34px); margin:0; }
  .hero-bot { position: relative; grid-column: 2; right: auto; bottom: auto; justify-self: center; align-self: end; height: min(83vh, 760px); }
  .chat-card { position: relative; grid-column: 3; right: auto; top: auto; width: 100%; justify-self: stretch; align-self: center; }
}

@media (orientation:landscape) and (min-width:768px) and (max-width:1180px) {
  .hero {
    grid-template-columns: minmax(300px, 1.15fr) minmax(220px, .8fr) minmax(230px, .8fr);
    column-gap: clamp(14px, 2vw, 26px);
  }

  .hero-copy { margin-top: clamp(150px, 21vh, 184px); transform:none; }
  .hero-bot { height: min(76vh, 560px); }
  .chat-card { width: 100%; }
}

@media (orientation:landscape) and (max-width:767px) {
  .hero { padding:18px 31px; }
  /* Trust card must be positioned against the full hero, not the copy column. */
  .hero-copy { position:static; width:52vw; margin-top:94px; transform:none; }
  .hero h1 { font-size:34px; }
  .hero-description { font-size:11px; margin:12px 0 15px; }
  .hero-cta { padding:11px 17px; }
  .hero-trust { position:absolute; z-index:3; left:31px; bottom:12px; margin:0; transform:scale(.86); transform-origin:bottom left; }
}

/* One responsive landscape composition: its scale follows the usable browser
   viewport height, rather than the type of device. */
@media (orientation:landscape) {
  .landing-page,
  .hero { min-height:100dvh; height:100dvh; }

  .hero {
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(150px,.72fr) minmax(210px,.95fr);
    column-gap:clamp(8px,1.45vw,30px);
    align-items:center;
    padding:clamp(12px,3vh,34px) clamp(24px,4.8vw,92px);
  }

  .hero-logo { position:absolute; top:clamp(12px,3vh,34px); left:clamp(24px,4.8vw,92px); width:clamp(122px,12vw,198px); }
  .hero-copy { position:static; grid-column:1; width:100%; margin:clamp(18px,4.7dvh,56px) 0 0; transform:none; }
  .hero-status { margin-bottom:clamp(7px,1.8vh,18px); padding:clamp(5px,1vh,9px) clamp(9px,1.2vw,15px); font-size:clamp(8px,.75vw,13px); }
  .hero-status span { width:clamp(5px,.45vw,8px); height:clamp(5px,.45vw,8px); }
  .hero h1 { font-size:clamp(23px,3vw,54px); line-height:1.04; }
  .hero-description { width:min(100%,570px); margin:clamp(8px,1.7vh,17px) 0 clamp(10px,2.2vh,23px); font-size:clamp(9px,.78vw,14px); line-height:1.55; }
  .hero-cta { gap:clamp(7px,.8vw,13px); padding:clamp(8px,1.6vh,15px) clamp(12px,1.4vw,22px); border-radius:clamp(8px,1vw,13px); font-size:clamp(9px,.75vw,14px); }
  .hero-cta span { font-size:clamp(14px,1.1vw,21px); }
  .hero-cta b { margin-left:clamp(4px,.6vw,10px); font-size:clamp(14px,1.1vw,21px); }

  .hero-bot { position:relative; grid-column:2; right:auto; bottom:auto; align-self:end; justify-self:center; width:auto; height:min(76dvh,760px); max-width:100%; transform:translateY(-3dvh) scale(1.02); transform-origin:center bottom; }
  .chat-card { position:relative; grid-column:3; right:auto; top:auto; align-self:center; justify-self:stretch; width:100%; border-radius:clamp(12px,1.5vw,24px); }
  .chat-card header { gap:clamp(6px,.7vw,12px); padding:clamp(8px,1.6vh,19px) clamp(9px,1.1vw,21px); }
  .chat-avatar { width:clamp(23px,2.2vw,42px); height:clamp(23px,2.2vw,42px); font-size:clamp(12px,1.3vw,25px); }
  .chat-card header strong { font-size:clamp(9px,.9vw,16px); }
  .chat-card header small { font-size:clamp(7px,.6vw,11px); }
  .chat-content { padding:clamp(8px,1.5vh,18px); }
  .chat-thread { height:clamp(96px,23dvh,208px); }
  .chat-input { padding:clamp(7px,1.3vh,14px); font-size:clamp(7px,.65vw,11px); }
  .powered { margin:clamp(5px,1vh,12px) 0 0; font-size:clamp(6px,.55vw,10px); }
  .hero-trust { position:absolute; z-index:3; left:clamp(24px,4.8vw,92px); bottom:clamp(10px,2.4dvh,34px); width:clamp(164px,12vw,230px); gap:clamp(7px,.65vw,11px); margin:0; padding:clamp(7px,1.1vh,10px) clamp(9px,1vw,13px); transform:none; }
  .trust-logo { width:clamp(18px,1.35vw,25px); height:clamp(18px,1.35vw,25px); }
  .hero-trust p { font-size:clamp(7px,.53vw,10px); line-height:1.45; }
}

@media (orientation:landscape) and (min-width:768px) and (max-width:1180px) {
  .hero { grid-template-columns:minmax(0,1.05fr) minmax(175px,.7fr) minmax(210px,.9fr); column-gap:clamp(10px,1.35vw,16px); }
  .hero-bot { height:min(70dvh,520px); }
}

@media (prefers-reduced-motion: reduce) { .chat-typing i,.hero-cta,.hero-bot { animation:none; } }

.live-chat-modal { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:clamp(12px,2.5dvh,26px); background:linear-gradient(135deg,rgb(255 255 255 / 52%),rgb(255 225 231 / 42%)); backdrop-filter:blur(18px) saturate(135%); -webkit-backdrop-filter:blur(18px) saturate(135%); }
.live-chat-modal[hidden] { display:none; }
.live-chat-panel { display:flex; flex-direction:column; width:min(680px,100%); height:100%; overflow:hidden; border:1px solid rgb(255 255 255 / 82%); border-radius:28px; background:linear-gradient(135deg,rgb(255 255 255 / 92%),rgb(255 247 249 / 82%)); box-shadow:0 28px 75px rgb(102 0 25 / 28%),inset 0 1px rgb(255 255 255 / 88%); }
.live-chat-modal.is-opening { animation:modal-glass-in .42s cubic-bezier(.16,1,.3,1) both; }.live-chat-modal.is-opening .live-chat-panel { animation:modal-panel-in .52s cubic-bezier(.16,1,.3,1) both; }.live-chat-modal.is-closing { pointer-events:none; animation:modal-glass-out .32s ease-in both; }.live-chat-modal.is-closing .live-chat-panel { animation:modal-panel-out .32s cubic-bezier(.4,0,1,1) both; }@keyframes modal-glass-in { from { opacity:0; backdrop-filter:blur(0) saturate(100%); -webkit-backdrop-filter:blur(0) saturate(100%); } to { opacity:1; } }@keyframes modal-panel-in { from { opacity:0; transform:translateY(34px) scale(.955); filter:blur(5px); } 65% { opacity:1; transform:translateY(-3px) scale(1.006); filter:blur(0); } to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }@keyframes modal-glass-out { to { opacity:0; backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); } }@keyframes modal-panel-out { to { opacity:0; transform:translateY(22px) scale(.97); filter:blur(3px); } }
.live-chat-header { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; color:#fff; background:linear-gradient(135deg,#c7002a,#930022); box-shadow:inset 0 1px rgb(255 255 255 / 21%); }
.live-chat-header>div { display:flex; align-items:center; gap:11px; }.live-chat-header p { margin:0; }.live-chat-header strong,.live-chat-header small { display:block; }.live-chat-header small { font-size:10px; }.live-chat-header small i { display:inline-block; width:6px; height:6px; border-radius:50%; background:#31d473; }.live-chat-close { width:36px; height:36px; border:1px solid rgb(255 255 255 / 28%); border-radius:50%; color:#fff; background:rgb(255 255 255 / 12%); font-size:27px; line-height:1; cursor:pointer; }
.live-chat-body { display:flex; flex:1; min-height:0; flex-direction:column; padding:clamp(16px,3vh,28px); background-color:rgb(250 250 253 / 64%); background-image:var(--chat-doodle),linear-gradient(135deg,rgb(255 255 255 / 48%),rgb(255 240 244 / 32%)); background-size:150px 150px,100% 100%; }.live-chat-intro { align-self:flex-start; max-width:78%; margin:0 0 16px; padding:12px 15px; border-radius:17px 17px 17px 5px; background:#ebedf2; color:#333; font-size:13px; line-height:1.45; }.live-chat-thread { flex:1; min-height:0; overflow:auto; padding:0 8px 0 2px; scrollbar-color:#e78498 transparent; scrollbar-width:thin; }.live-chat-thread::-webkit-scrollbar { width:7px; }.live-chat-thread::-webkit-scrollbar-track { margin:8px 0; border-radius:999px; background:rgb(230 0 40 / 6%); }.live-chat-thread::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:999px; background:linear-gradient(#ef8ca0,#d91d45) padding-box; }.live-chat-thread .message { max-width:78%; margin:0 0 12px; padding:10px 13px; border-radius:17px; font-size:13px; line-height:1.4; }.live-chat-thread .message small { display:block; margin-top:4px; font-size:9px; opacity:.62; }.live-chat-thread .message-user { margin-left:auto; border-bottom-right-radius:5px; background:linear-gradient(135deg,#ff6680,#e91e49); box-shadow:0 4px 11px rgb(222 20 62 / 17%); color:#fff; }.live-chat-thread .message-bot { border-bottom-left-radius:5px; background:#ebedf2; color:#242424; }.live-chat-typing { display:flex; min-height:38px; gap:6px; align-items:center; align-self:flex-start; margin:0 0 10px; padding:10px 13px; border-radius:14px 14px 14px 5px; background:#ebedf2; box-shadow:0 2px 5px rgb(30 35 45 / 8%); }.live-chat-typing[hidden] { display:none; }.live-chat-typing i { width:7px; height:7px; border-radius:50%; background:#e60028; animation:chat-dot 1s ease-in-out infinite; }.live-chat-typing i:nth-child(2) { animation-delay:.15s; }.live-chat-typing i:nth-child(3) { animation-delay:.3s; }.live-chat-composer { display:flex; gap:9px; margin-top:8px; padding:7px 8px 7px 15px; border:1px solid #e5e5e8; border-radius:17px; background:#fff; }.live-chat-composer input { flex:1; min-width:0; border:0; outline:0; font:inherit; font-size:13px; }.live-chat-composer button { width:34px; height:34px; border:0; border-radius:50%; color:#fff; background:#e60028; cursor:pointer; }
.live-chat-profile { display:grid; gap:13px; width:min(410px,100%); margin:auto; padding:24px; border:1px solid #f1d8df; border-radius:20px; background:rgb(255 255 255 / 92%); box-shadow:0 12px 28px rgb(95 0 25 / 10%); }.live-chat-profile h2,.live-chat-profile p { margin:0; }.live-chat-profile h2 { font-size:20px; }.live-chat-profile p { color:#666; font-size:13px; line-height:1.45; }.live-chat-profile label { display:grid; gap:6px; color:#444; font-size:12px; font-weight:700; }.live-chat-profile input { width:100%; padding:11px 12px; border:1px solid #dedee3; border-radius:18px; background:#fff; font:inherit; font-size:14px; }.live-chat-profile input:focus { border-color:#e60028; outline:2px solid rgb(230 0 40 / 12%); }.live-chat-profile button { padding:12px; border:0; border-radius:16px; color:#fff; background:#e60028; font:inherit; font-weight:700; cursor:pointer; }.live-chat-profile .select2-container { width:100% !important; font-size:14px; }.live-chat-profile .select2-container--default .select2-selection--single { height:44px; border:1px solid #dedee3; border-radius:18px; }.live-chat-profile .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left:12px; color:#555; line-height:42px; }.live-chat-profile .select2-container--default .select2-selection__arrow { height:42px; right:8px; }.live-chat-profile .select2-dropdown { border-color:#f5c7d1; border-radius:14px; overflow:hidden; }.live-chat-profile .select2-results__option--highlighted[aria-selected] { color:#a50028; background:#fff0f3; }.live-chat-profile .select2-results__option[aria-selected=true] { color:#a50028; background:#ffe1e8; }.live-chat-form-error { color:#c90028; font-size:12px; }
.live-chat-profile-screen:not([hidden]),.live-chat-conversation:not([hidden]) { display:flex; flex:1; min-height:0; flex-direction:column; }
.live-chat-profile button.is-loading { position:relative; color:transparent; pointer-events:none; }.live-chat-profile button.is-loading::after { position:absolute; inset:0; width:18px; height:18px; margin:auto; border:2px solid rgb(255 255 255 / 42%); border-top-color:#fff; border-radius:50%; content:""; animation:chat-button-spin .65s linear infinite; }@keyframes chat-button-spin { to { transform:rotate(360deg); } }
.live-chat-quick-questions { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 13px; }.live-chat-quick-questions button { padding:8px 10px; border:1px solid #f4a2b2; border-radius:14px; color:#c9002b; background:#fff; font:inherit; font-size:11px; font-weight:700; cursor:pointer; }.live-chat-quick-questions button:hover { color:#fff; background:#e60028; border-color:#e60028; }
.new-installation-form-bubble { width:min(100%,460px); max-width:100% !important; }.new-installation-form { display:grid; gap:9px; }.new-installation-form>strong { font-size:14px; }.new-installation-form>p { margin:0 0 2px; color:#666; font-size:11px; }.new-installation-form label { display:grid; gap:4px; color:#444; font-size:10px; font-weight:700; }.new-installation-form input,.new-installation-form textarea { width:100%; border:1px solid #d9dce3; border-radius:10px; background:#fff; padding:8px 9px; color:#242424; font:inherit; font-size:11px; resize:vertical; }.new-installation-form textarea { min-height:55px; }.new-installation-form input:focus,.new-installation-form textarea:focus { border-color:#e60028; outline:2px solid rgb(230 0 40 / 10%); }.new-installation-location,.new-installation-submit { padding:9px 10px; border-radius:10px; font:inherit; font-size:11px; font-weight:700; cursor:pointer; }.new-installation-location { border:1px solid #f2a4b3; color:#cc1237; background:#fff; }.new-installation-submit { border:0; color:#fff; background:linear-gradient(135deg,#ff6680,#e91e49); }.new-installation-submit:disabled,.new-installation-location:disabled { opacity:.62; cursor:wait; }
.new-installation-form label { width:100%; }.new-installation-location-row { position:relative; display:block; width:100%; }.new-installation-location-row input { display:block; width:100%; padding-right:46px; border-radius:10px; }.new-installation-location-row .new-installation-location { position:absolute; top:4px; right:4px; width:28px; height:28px; padding:0; border:0; border-radius:8px; color:#c9002b; background:#fff0f3; font-size:17px; line-height:1; }.new-installation-package-picker { width:100%; padding:9px 10px; border:1px solid #d9dce3; border-radius:10px; color:#4a4a4a; background:#fff; text-align:left; font:inherit; font-size:11px; cursor:pointer; }.package-picker-modal { position:fixed; z-index:50; inset:0; display:grid; place-items:center; padding:18px; background:rgb(30 0 10 / 34%); backdrop-filter:blur(5px); }.package-picker-panel { position:relative; display:grid; gap:12px; width:min(440px,100%); max-height:min(620px,88vh); padding:21px; overflow:auto; border-radius:20px; background:#fff; box-shadow:0 24px 60px rgb(70 0 18 / 28%); }.package-picker-panel h3 { margin:0; font-size:18px; }.package-picker-close { position:absolute; top:12px; right:12px; width:32px; height:32px; border:0; border-radius:50%; color:#a20027; background:#fff0f3; font-size:24px; line-height:1; cursor:pointer; }.package-picker-list { display:grid; gap:9px; }.package-picker-option { display:grid; gap:4px; padding:13px 14px; border:1px solid #f2c6cf; border-radius:13px; color:#2b2b2b; background:#fff; text-align:left; cursor:pointer; }.package-picker-option:hover { border-color:#e91e49; background:#fff5f7; }.package-picker-option strong { font-size:13px; }.package-picker-option small { color:#777; font-size:11px; line-height:1.4; }
.new-installation-location-row .new-installation-location.is-loading::after { display:block; width:13px; height:13px; margin:auto; border:2px solid rgb(201 0 43 / 25%); border-top-color:#c9002b; border-radius:50%; content:""; animation:chat-button-spin .65s linear infinite; }
body:has(.live-chat-modal:not([hidden])) { overflow:hidden; }
@media (max-width:600px) { .live-chat-modal { padding:0; }.live-chat-panel { border-radius:0; }.live-chat-header { padding:15px 18px; }.live-chat-body { padding:18px; } }

@media (orientation:landscape) and (min-width:768px) and (max-width:1180px) {
  .hero-logo { width:clamp(150px,15vw,180px); }
}

.message-bot,.live-chat-intro,.live-chat-thread .message-bot { box-shadow:0 3px 10px rgb(40 45 55 / 9%); }
.message-user,.live-chat-thread .message-user { box-shadow:0 5px 13px rgb(210 0 40 / 20%); }
.chat-input,.live-chat-composer { box-shadow:0 5px 16px rgb(40 45 55 / 9%); }
.select2-container--default.select2-container--open .select2-selection--single { border-color:#ef8ca0 !important; }.select2-container--default .select2-results__option--highlighted[aria-selected] { color:#a50028 !important; background:#fff0f3 !important; }.select2-container--default .select2-results__option[aria-selected=true] { color:#a50028 !important; background:#ffe1e8 !important; }
.live-chat-profile .select2-container--default .select2-selection--single .select2-selection__arrow { top:50%; right:12px; height:auto; transform:translateY(-50%); }
.live-chat-profile,.live-chat-profile * { box-sizing:border-box; }
.live-chat-profile input,.live-chat-profile .select2-container { max-width:100%; }
.live-chat-profile label { min-width:0; }
.live-chat-profile .select2-container { width:100% !important; min-width:0 !important; overflow:visible; }
.live-chat-profile .select2-container--default .select2-selection--single { min-width:0; overflow:hidden; }
.live-chat-profile .select2-container--default .select2-selection--single .select2-selection__rendered { overflow:hidden; padding-right:35px; text-overflow:ellipsis; white-space:nowrap; }
.package-picker-panel { overflow:hidden; }.package-picker-list { max-height:min(430px,60vh); overflow:auto; padding-right:5px; scrollbar-color:#e78498 transparent; scrollbar-width:thin; }.package-picker-list::-webkit-scrollbar { width:6px; }.package-picker-list::-webkit-scrollbar-thumb { border-radius:999px; background:#e78498; }.package-picker-loading { display:flex; min-height:150px; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#8a5b65; font-size:12px; }.package-picker-loading i { width:25px; height:25px; border:3px solid #ffd4dd; border-top-color:#e91e49; border-radius:50%; animation:chat-button-spin .7s linear infinite; }
.package-picker-search { width:100%; padding:11px 13px; border:1px solid #f1c3ce; border-radius:12px; outline:0; font:inherit; font-size:13px; }.package-picker-search:focus { border-color:#e91e49; box-shadow:0 0 0 3px rgb(233 30 73 / 10%); }
.package-picker-option[hidden] { display:none; }
.live-chat-thread > .message-bot.new-installation-form-bubble,.chat-thread > .message-bot.new-installation-form-bubble { align-self:flex-end !important; margin-left:auto !important; margin-right:0 !important; color:#fff !important; background:linear-gradient(145deg,#ff5d79 0%,#ed1644 100%) !important; border:0 !important; border-bottom-right-radius:5px !important; box-shadow:0 6px 16px rgb(222 20 62 / 22%) !important; }
.new-installation-form { color:#fff; }.new-installation-form > p { color:rgb(255 255 255 / 84%) !important; }.new-installation-form label { color:#fff !important; }
.new-installation-form label:has(input[name="location"]) { display:none; }
.new-installation-form.is-submitted input:disabled,.new-installation-form.is-submitted textarea:disabled,.new-installation-form.is-submitted button:disabled { opacity:.78; cursor:not-allowed; }.new-installation-form.is-submitted .new-installation-submit:disabled { color:#fff; background:#171717; }
.package-info-bubble { display:grid; gap:7px; width:min(100%,460px); max-width:100% !important; }.package-info-bubble>strong { font-size:14px; }.package-info-bubble>p { margin:0; color:rgb(255 255 255 / 86%); font-size:11px; }.package-info-list { display:grid; gap:7px; }.package-info-item { display:grid; gap:3px; padding:9px 10px; border-radius:10px; color:#292929; background:rgb(255 255 255 / 96%); }.package-info-item b { font-size:12px; }.package-info-item span { color:#666; font-size:10px; line-height:1.35; }
.live-chat-thread .message>span { white-space:pre-line; }
.live-chat-intro { display:grid; gap:30px; width:min(100%,460px); }.live-chat-intro>span { display:block; white-space:pre-line; }.live-chat-intro .live-chat-quick-questions { display:grid; grid-template-columns:1fr; gap:10px; margin:0; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .35s ease,transform .35s ease; }.live-chat-intro .live-chat-quick-questions.is-visible { opacity:1; transform:translateY(0); pointer-events:auto; }.live-chat-intro .live-chat-quick-questions button { width:100%; border-color:rgb(255 255 255 / 58%); border-radius:10px; color:#c9002b; background:#fff; text-align:left; }.live-chat-intro .live-chat-quick-questions button:hover { border-color:#fff; color:#fff; background:rgb(125 0 28 / 34%); }
.new-installation-submit.is-loading { position:relative; color:transparent; }.new-installation-submit.is-loading::after { position:absolute; inset:0; width:16px; height:16px; margin:auto; border:2px solid rgb(255 255 255 / 38%); border-top-color:#fff; border-radius:50%; content:""; animation:chat-button-spin .65s linear infinite; }
.chat-thread .message-user,.live-chat-thread .message-user { align-self:flex-start; margin-left:0; margin-right:auto; border-bottom-left-radius:5px; border-bottom-right-radius:17px; }.chat-thread .message-bot,.live-chat-thread .message-bot { align-self:flex-end; margin-left:auto; margin-right:0; border-bottom-left-radius:17px; border-bottom-right-radius:5px; }
.chat-thread .message-bot:not(.new-installation-form-bubble),.live-chat-thread .message-bot:not(.new-installation-form-bubble) { color:#fff; background:linear-gradient(135deg,#ff6680,#e91e49); box-shadow:0 4px 11px rgb(222 20 62 / 17%); }.live-chat-intro { align-self:flex-end; margin-left:auto; border-radius:17px 17px 5px 17px; color:#fff; background:linear-gradient(135deg,#ff6680,#e91e49); box-shadow:0 4px 11px rgb(222 20 62 / 17%); }
.live-chat-thread > .message-user,.chat-thread > .message-user { align-self:flex-start !important; margin-left:0 !important; margin-right:auto !important; color:#242424 !important; background:#ebedf2 !important; box-shadow:0 3px 10px rgb(40 45 55 / 9%) !important; }.live-chat-thread > .message-bot:not(.new-installation-form-bubble),.chat-thread > .message-bot:not(.new-installation-form-bubble) { align-self:flex-end !important; margin-left:auto !important; margin-right:0 !important; color:#fff !important; background:linear-gradient(135deg,#ff6680,#e91e49) !important; box-shadow:0 4px 11px rgb(222 20 62 / 17%) !important; }.live-chat-thread > .live-chat-intro { align-self:flex-end !important; margin-left:auto !important; margin-right:0 !important; color:#fff !important; background:linear-gradient(135deg,#ff6680,#e91e49) !important; box-shadow:0 4px 11px rgb(222 20 62 / 17%) !important; }
.live-chat-composer button { background:#e60028 !important; box-shadow:none; }
.new-installation-form .new-installation-submit { background:#171717 !important; box-shadow:0 4px 10px rgb(0 0 0 / 18%); }

/* Portrait has its own composition.  All of these rules are deliberately
   orientation-scoped so the approved landscape layout remains unchanged. */
.portrait-menu { display:none; }
@media (orientation:portrait) {
  html,
  body {
    width:100%;
    max-width:100%;
    overflow-x:clip;
    overscroll-behavior-x:none;
  }

  .landing-page {
    width:100%;
    height:100dvh;
    min-height:100dvh;
    overflow:hidden;
    background:#fff;
  }

  .landing-page::before {
    position:absolute;
    z-index:0;
    top:clamp(145px,19.5dvh,225px);
    left:-23%;
    width:146%;
    height:clamp(250px,33dvh,360px);
    border-radius:50% 50% 0 0 / 100% 100% 0 0;
    background:linear-gradient(135deg,#f40040 0%,#e60034 58%,#c8002d 100%);
    content:"";
  }

  .landing-grain {
    z-index:0;
    width:72vw;
    height:34dvh;
    opacity:.5;
    background-size:10px 10px,15px 15px;
  }

  .hero {
    isolation:isolate;
    height:100%;
    min-height:0;
    overflow:hidden;
    padding:clamp(36px,5dvh,52px) clamp(20px,5.4vw,42px) clamp(28px,4dvh,42px);
  }

  .hero::before {
    position:absolute;
    z-index:1;
    top:clamp(330px,41.5dvh,493px);
    left:-20%;
    width:140%;
    height:clamp(460px,60dvh,680px);
    border-radius:50% 50% 0 0 / 28% 28% 0 0;
    background:#fff;
    content:"";
  }

  .hero-logo { position:relative; z-index:4; width:clamp(112px,28vw,145px); transform:translateY(-25px); }

  .hero-bot {
    position:absolute;
    z-index:2;
    top:clamp(40px,5.5dvh,62px);
    right:50%;
    bottom:auto;
    width:auto;
    max-width:none;
    height:clamp(340px,44dvh,488px);
    opacity:1;
    transform:translateX(50%);
    filter:drop-shadow(0 11px 10px rgb(100 0 20 / 18%));
  }

  .hero-copy {
    position:relative;
    z-index:3;
    width:100%;
    max-width:570px;
    margin:clamp(265px,34.5dvh,405px) auto 0;
    text-align:center;
  }

  .hero-status {
    justify-content:center;
    gap:5px;
    width:max-content;
    max-width:100%;
    margin:0 auto clamp(20px,2.8dvh,28px);
    padding:8px 13px;
    font-size:clamp(9px,2.55vw,13px);
    white-space:nowrap;
    background:rgb(255 255 255 / 92%);
    box-shadow:0 5px 15px rgb(40 0 12 / 8%);
  }

  .hero-status span { width:7px; height:7px; }
  .hero h1 { font-size:clamp(28px,7.6vw,44px); line-height:1.04; letter-spacing:-.052em; }
  .hero-description { width:min(100%,440px); margin:clamp(14px,2dvh,20px) auto clamp(20px,3dvh,30px); font-size:clamp(11px,2.95vw,15px); line-height:1.58; color:#555; }
  .hero-cta { justify-content:center; width:min(100%,380px); gap:13px; padding:16px 23px; border-radius:13px; font-size:14px; }
  .hero-cta b { margin-left:auto; }
  .chat-card { display:none; }
}

/* The chat becomes an app-like full-screen surface in portrait, including
   portrait tablets. Landscape intentionally keeps the existing modal card. */
@media (orientation:portrait) {
  html:has(.live-chat-modal:not([hidden])) {
    height:100lvh;
    overflow:hidden;
    background-color:#fff9fb;
    background-image:var(--chat-doodle);
    background-size:150px 150px;
  }

  .live-chat-modal {
    inset:0;
    display:block;
    width:100vw;
    height:100lvh;
    min-height:100lvh;
    padding:0;
    overflow:hidden;
    overscroll-behavior:none;
    background-color:#fff9fb;
    background-image:var(--chat-doodle);
    background-size:150px 150px;
  }

  .live-chat-panel {
    width:100%;
    max-width:none;
    height:100lvh;
    min-height:100lvh;
    border:0;
    border-radius:0;
    overflow:hidden;
    background-color:#fff9fb;
    background-image:var(--chat-doodle);
    background-size:150px 150px;
  }

  .live-chat-header { flex:0 0 auto; padding:clamp(15px,2.4dvh,24px) clamp(18px,5vw,32px); }
  .live-chat-body { flex:1 1 auto; min-height:0; padding:4px clamp(18px,5vw,44px) calc(112px + var(--chat-keyboard-offset, 0px)); overflow:hidden; }
  .live-chat-profile { width:100%; max-width:560px; }
  body:has(.live-chat-modal:not([hidden])) { height:100lvh; overflow:hidden; background-color:#fff9fb; background-image:var(--chat-doodle); background-size:150px 150px; }
  body:has(.live-chat-modal:not([hidden])) .landing-page { overflow:hidden; }
  .live-chat-thread { min-height:0; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; }
  .live-chat-conversation > .powered { display:none; }
  .live-chat-thread { padding-bottom:0; }
  .live-chat-composer { position:fixed; right:clamp(18px,5vw,44px); bottom:calc(12px + env(safe-area-inset-bottom) + var(--chat-keyboard-offset, 0px)); left:clamp(18px,5vw,44px); z-index:30; margin:0; }
  .live-chat-composer[hidden] { display:none !important; }
}

@media (orientation:landscape) {
  .live-chat-header { flex:0 0 auto; }
  .live-chat-body { flex:1 1 0; min-height:0; padding-top:4px; padding-bottom:60px; overflow:hidden; }
  .live-chat-conversation { min-height:0; overflow:hidden; }
  .live-chat-thread { min-height:0; padding-bottom:0; overflow-y:auto; }
  .live-chat-thread > .message:last-child { margin-bottom:0; }
  .live-chat-conversation > .powered { display:none; }
  .live-chat-composer {
    position:fixed;
    z-index:30;
    bottom:clamp(26px,3.5dvh,32px);
    left:50%;
    width:min(640px,calc(100vw - 48px));
    transform:translateX(-50%);
  }
  .live-chat-composer[hidden] { display:none !important; }
}