/* Planet-4 holding page. Built from the Figma file "TEMU HOLDING PAGE" (1920px frame). */
@font-face { font-family: "Tomorrow"; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/tomorrow-latin-300-normal.woff2?v=4c07ea7ee9) format("woff2"); }
@font-face { font-family: "Tomorrow"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/tomorrow-latin-500-normal.woff2?v=2fa3efa51f) format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/roboto-latin-300-normal.woff2?v=bea1e58915) format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/roboto-latin-400-normal.woff2?v=a0bec56364) format("woff2"); }

:root {
  --orange: #dc582a;
  --orange-on-light: #c44a1f; /* AA contrast on the #d9d9d9 bands (design orange is 2.7:1 there) */
  --orange-on-dark: #e66b42;  /* small orange text on #252525 (4.8:1) */
  --ink: #171717;
  --ink-2: #252525;
  --light: #d9d9d9;
  --white: #ffffff;
  --display: "Tomorrow", "Arial Narrow", Arial, sans-serif;
  --body: "Roboto", Arial, Helvetica, sans-serif;
  --gutter: clamp(20px, 4vw, 40px);
  --wrap: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--light); font-family: var(--body); font-size: 16px; line-height: 1.2; letter-spacing: 0.02em; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
picture { display: contents; }
picture > source { display: none; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; text-wrap: balance; }
button, input { font: inherit; letter-spacing: inherit; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
html[data-kendry-input="pointer"] :focus-visible { outline: none; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--orange); color: #000; padding: 10px 16px; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

.display { font-family: var(--display); font-weight: 500; text-transform: uppercase; color: var(--orange); font-size: clamp(28px, 2.2vw + 14px, 38px); line-height: 1.2; letter-spacing: 0.02em; }

/* Two-column grid: 505px + 715px on a 1240px row (Figma x 340 / 865) */
.cols { display: grid; grid-template-columns: minmax(0, 505fr) minmax(0, 715fr); column-gap: 20px; }

/* ---------- Announcement ticker ---------- */
.ticker { position: relative; background: var(--light); color: #000; height: 38px; overflow: hidden; font-size: 14px; line-height: 28px; letter-spacing: 0.05em; }
.ticker-track { display: flex; width: max-content; height: 100%; align-items: center; animation: ticker 60s linear infinite; }
.ticker-group { display: flex; flex-shrink: 0; }
.ticker-item { flex-shrink: 0; padding-right: 150px; white-space: nowrap; }
.ticker:hover .ticker-track, .ticker.is-paused .ticker-track { animation-play-state: paused; }
.ticker-static { display: none; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Header (logo) ---------- */
.site-header { padding-top: 30px; }
.logo-link { display: inline-flex; flex-shrink: 0; min-width: 44px; min-height: 44px; }
.logo-svg { height: 88px; width: auto; flex-shrink: 0; }
@media (max-width: 1023px) { .logo-svg { height: 60px; } }

/* ---------- Hero ---------- */
.hero { position: relative; container-type: inline-size; }
.hero-copy { position: relative; z-index: 2; padding-top: 79px; }
.hero .display { max-width: 505px; text-wrap: wrap; }
.hero-lines { margin-top: 30px; border-left: 10px solid var(--orange); padding: 0 0 0 33px; font-size: 15px; line-height: 27.5px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--light); min-height: 82px; display: flex; flex-direction: column; justify-content: center; }
.hero-art { position: relative; z-index: 1; overflow: hidden; }
.hero-stage { position: relative; aspect-ratio: 1920 / 824; }
.hero-sea { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.obj { position: absolute; height: auto; }
.obj--drone { left: 57.083%; top: 22.209%; width: 7.708%; }
.obj--boat { left: 66.927%; top: 53.405%; width: 9.896%; }
.obj--diver { left: 44.323%; top: 66.99%; width: 11.354%; }
.target { position: absolute; width: 9.271%; height: 21.602%; }
.target .brackets { width: 100%; height: 100%; }
.target--drone { left: 56.302%; top: 16.869%; }
.target--boat { left: 67.240%; top: 48.422%; }
.target--diver { left: 45.365%; top: 67.597%; }

@media (min-width: 1024px) {
  /* Desktop: the sea starts level with the headline (Figma y 240) and runs edge to edge behind the copy. */
  .hero { min-height: calc(79px + 42.917vw); min-height: calc(79px + 42.917cqw); }
  .hero-art { position: absolute; left: 0; right: 0; top: 79px; }
}
@media (max-width: 1023px) {
  .hero-copy { padding-top: 48px; }
  .hero-art { --sw: 135cqw; height: calc(var(--sw) * 0.42917 * 0.88); margin-top: 8px; }
  .hero-stage { position: absolute; top: calc(var(--sw) * 0.42917 * -0.12); width: var(--sw); left: calc(50cqw - var(--sw) * 0.608); }
}
@media (max-width: 599px) {
  .hero-copy { padding-top: 36px; }
  .hero-lines { font-size: 13px; line-height: 24px; padding-left: 20px; min-height: 0; }
  .hero-art { --sw: 190cqw; }
}

/* ---------- Who is Planet-4 ---------- */
.about { padding: 134px 0 82px; }
.about .display { max-width: 302px; }
.about-body { max-width: 609px; font-size: 16px; line-height: 19.2px; color: var(--light); text-wrap: pretty; }
.about-body p + p { margin-top: 19.2px; }
.about-body .domains { margin-top: 49px; font-family: var(--display); font-weight: 500; font-size: clamp(20px, 1.2vw + 12px, 32px); line-height: 1.23; letter-spacing: 0.02em; color: var(--white); text-transform: uppercase; }
.domain { white-space: nowrap; }

/* ---------- Contact band ---------- */
.contact-band { background: var(--light); color: var(--ink); padding: 72px 0; }
.contact-band .display { color: var(--orange-on-light); }
.cols--center { align-items: center; }
.contact-email { font-size: 16px; line-height: 19.2px; }
.contact-email a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink); }
.contact-email a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Product portfolio carousel ---------- */
.products { background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%); padding: 99px 0; color: var(--white); }
.products .display { max-width: 302px; }
.product-tabs { display: flex; flex-direction: column; align-items: flex-start; margin-top: 20px; }
.product-tab { appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: var(--white); font-family: var(--display); font-weight: 300; font-size: 17px; line-height: 31.8px; letter-spacing: 0.02em; text-transform: uppercase; text-align: left; min-height: 32px; }
.product-tab:hover { color: var(--orange-on-dark); }
.product-tab[aria-selected="true"] { color: var(--orange-on-dark); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.products-main { position: relative; }
.slides { display: grid; }
.slide { grid-area: 1 / 1; }
.slide[hidden] { display: block; visibility: hidden; }
.js .slide { opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.js .slide.is-active { opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s; }
.js .slide .product-img { transform: translateX(var(--from, 0)); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.js .slide.is-active .product-img { transform: none; }

.frame { position: relative; aspect-ratio: 715 / 305; touch-action: pan-y; }
.frame .product-img { position: absolute; left: 0; top: 0; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.corner { position: absolute; width: 32px; height: 32px; border: 0 solid var(--orange); pointer-events: none; }
.corner--tl { left: 6px; top: 0; border-width: 11px 0 0 11px; }
.corner--tr { right: 6px; top: 0; border-width: 11px 11px 0 0; }
.corner--bl { left: 6px; bottom: 5px; border-width: 0 0 11px 11px; }
.corner--br { right: 6px; bottom: 5px; border-width: 0 11px 11px 0; }

.slide-info { display: grid; grid-template-columns: 213px minmax(0, 505px); margin-top: 52px; }
.slide-count { font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 21px; letter-spacing: 0.02em; }
.slide-title { font-family: var(--display); font-weight: 500; font-size: clamp(24px, 1vw + 18px, 32px); line-height: 1.23; letter-spacing: 0.02em; text-transform: uppercase; color: var(--white); max-width: 505px; text-wrap: wrap; }
.slide-title .accent { color: var(--orange); }
.slide-text p { margin-top: 32px; font-size: 16px; line-height: 1.35; max-width: 505px; text-wrap: pretty; }

.carousel-nav { position: absolute; left: 0; top: calc(100% - 0px); display: flex; gap: 8px; }
.products-main { --info-top: 0; }
.arrow { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,.35); cursor: pointer; transition: border-color .2s, color .2s; }
.arrow:hover { border-color: var(--orange); color: var(--orange); }
.arrow svg { width: 22px; height: auto; }

@media (min-width: 1024px) {
  /* Arrows sit under the "01 / 03" counter, inside the 213px counter column. */
  .carousel-nav { top: auto; bottom: 0; }
  .slide-info { min-height: 155px; }
}

/* ---------- Get informed (sign-up form) ---------- */
.signup { background: var(--light); color: var(--ink); padding: 22px 0 23px; }
.signup-form { display: grid; grid-template-columns: minmax(0, 295fr) minmax(0, 295fr) minmax(0, 400fr) minmax(0, 193fr); column-gap: 20px; align-items: start; }
.signup-title { font-family: var(--display); font-weight: 500; font-size: 24px; line-height: 44px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--orange-on-light); }
.field input { display: block; width: 100%; height: 44px; border: 1px solid var(--orange-on-light); border-radius: 0; background: transparent; color: var(--ink); padding: 0 20px; font-size: 16px; font-weight: 300; letter-spacing: 0.02em; }
.field input::placeholder { color: var(--ink); opacity: 1; }
.field input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.field input[aria-invalid="true"] { border-width: 2px; }
.field-error { margin-top: 6px; font-size: 14px; color: #8a2a0b; }
.submit { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 44px; padding: 0 22px 0 20px; background: var(--orange); color: var(--ink); border: 0; border-radius: 0; cursor: pointer; font-size: 16px; text-align: left; transition: background-color .2s; }
.submit:hover { background: #c94a1f; }
.submit svg { width: 25px; height: auto; }
.form-status { margin-top: 14px; font-size: 16px; font-weight: 400; color: var(--ink); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer ---------- */
.site-footer { background: var(--orange); color: #000; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 70px; padding-block: 13px; }
.footer-home { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-left: -7px; }
.footer-mark { width: 30px; height: 30px; }
.footer-text { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; column-gap: 8px; row-gap: 4px; font-size: 12px; line-height: 15px; letter-spacing: 0.02em; text-align: right; }
.footer-text a { text-decoration: none; display: inline-block; padding-block: 5px; }
.footer-text a:hover, .footer-text a.u { text-decoration: underline; text-underline-offset: 2px; }
.footer-text .sep { opacity: .9; }

/* ---------- 404 ---------- */
.notfound { padding: 80px 0 120px; }
.notfound p { margin-top: 16px; }
.u { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Scroll reveal (fade-up on desktop, fade-only on small screens) ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (max-width: 1023px) { .js .reveal { transform: none; } }
@media (max-height: 720px) { .js .reveal { opacity: 1; transform: none; } }

/* ---------- Tablet and phone ---------- */
@media (max-width: 1023px) {
  .cols { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .about { padding: 72px 0 64px; }
  .about .display, .products .display { max-width: 20ch; }
  .about-body .domains { margin-top: 36px; }
  .contact-band { padding: 48px 0; }
  .cols--center { row-gap: 8px; }
  .products { padding: 64px 0 72px; }
  .product-tabs { margin-top: 14px; }
  .product-tab { min-height: 44px; line-height: 44px; }
  .slide-info { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
  .slide-count { margin-bottom: 14px; }
  .slide-text p { margin-top: 20px; }
  .carousel-nav { position: static; margin-top: 28px; }
  .signup { padding: 32px 0; }
  .signup-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 14px; }
  .signup-title { grid-column: 1 / -1; line-height: 1.2; }
  .submit { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; padding-block: 16px; }
  .footer-text { justify-content: flex-start; text-align: left; }
}
@media (max-width: 599px) {
  .signup-form { grid-template-columns: minmax(0, 1fr); }
  .footer-text { flex-direction: column; align-items: flex-start; row-gap: 0; }
  .footer-text .sep { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ticker { height: auto; min-height: 38px; }
  .ticker-track { display: none; }
  .ticker-static { display: block; padding: 5px 20px; text-align: center; line-height: 20px; }
  .js .slide, .js .slide.is-active { transition: none; }
  .js .slide .product-img { transform: none; transition: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}