/* ==========================================================================
   OFuyuan site stylesheet
   Layout follows the structure of obdev.at (studied 2026-09-06 by scrolling
   the whole page): a pale gradient hero, the flagship product carrying a
   section of its own, the remaining products as cards.

   Not taken from there, deliberately:
     - the three-column Uncover/Take Action/Protect block (that is the shape
       this site removed on 2026-09-05)
     - the mission statement with years of experience (barred from this site)
     - the floating blocked-connection counters (would need real numbers)

   No framework, no JavaScript dependency.
   ========================================================================== */

/* --- Local webfonts (no CDN) --------------------------------------------- */

@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato/lato-reg-webfont.woff') format('woff'),
       url('../fonts/lato/lato-reg-webfont.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato/lato-bol-webfont.woff') format('woff'),
       url('../fonts/lato/lato-bol-webfont.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Design tokens ------------------------------------------------------- */

:root {
  --ink:      #181d23;
  --soft:     #4a5560;
  --line:     #e3e7ec;

  /* Product accents. Deliberately dark: the first pass used the lighter tones
     obdev uses on its own three columns, and the coloured word in the headline
     measured 2.58 against a 3.0 requirement on the pale hero. */
  --c1: #0b5f9e;   /* SvrGuard  */
  --c2: #5b34ba;   /* PhotoTrans */
  --c3: #1d6f45;   /* FollowMe8 */
  --c4: #8a520c;   /* CrashGuard */
  --link: #0b5f9e;

  --page:    62rem;
  --measure: 34rem;
  --step:    clamp(3.2rem, 6vw, 4.6rem);

  --font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          'Microsoft JhengHei', 'PingFang TC', 'Noto Sans TC', sans-serif;
}

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; border: 0; }
a { color: var(--link); }
h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 700; }
p { margin: 0 0 1.05em; }

.page { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 1.6rem; }

a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* --- Navigation ---------------------------------------------------------- */

/* Two links only, so no hamburger and no JavaScript. They fit at 320px. */
.topbar {
  background: linear-gradient(90deg, #dde6f2, #e6e2f2 55%, #efe3f0);
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.topbar .page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
}

.topbar img { height: 24px; width: auto; display: block; }
.topbar nav { display: flex; gap: 1.4rem; }

/* The headline lives here now, beside the logo, so the hero does not have to
   make room for it. */
.topbar .brand { display: flex; align-items: center; gap: .85rem; min-width: 0; }

.topbar .tagline {
  font-size: .95rem;
  color: #1b3a52;
  white-space: nowrap;
  padding-left: .85rem;
  border-left: 1px solid rgba(11, 58, 92, .28);
}

/* 375px cannot hold logo + tagline + four links. */
@media (max-width: 700px) { .topbar .tagline { display: none; } }

.topbar a {
  color: var(--ink);
  text-decoration: none;
  font-size: .93rem;
  white-space: nowrap;
}

.topbar a:hover, .topbar a:focus { text-decoration: underline; }

/* --- Hero ---------------------------------------------------------------- */

/* The flagship product carries the hero on its own. The stock hero padding
   left about 180px of empty space above the product name; measured 90px after
   this change. */
.hero {
  background: linear-gradient(120deg, #dbe6f4 0%, #e4e2f4 48%, #f0e3f1 100%);
  padding: clamp(1.5rem, 3vw, 2.3rem) 0 calc(var(--step) * 1.25);
  text-align: center;
}

/* Mark and wordmark sit on one line. The img carries an empty alt because the
   product name is right beside it as text; announcing both reads "SvrGuard
   SvrGuard". */
.hero .lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-bottom: .9rem;
}

.hero .lockup img { height: 72px; width: auto; display: block; margin: 0; }

.hero h2.big {
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
}

/* 52rem wide and capped at 1.35rem so the shortened line stays on one line
   down to 700px. */
.hero .lede {
  font-size: clamp(1.02rem, 2.1vw, 1.35rem);
  font-weight: 700;
  color: var(--c1);
  margin: 0 auto 1.3rem;
  max-width: 52rem;
}

.hero .krest {
  color: var(--soft);
  max-width: var(--measure);
  margin: 0 auto 1em;
  text-align: left;
}

@media (max-width: 520px) {
  .hero .lockup { gap: .7rem; }
  .hero .lockup img { height: 52px; }
}

/* --- Hero carousel ------------------------------------------------------- */

/* Radio buttons and labels carry the slides, so the arrows and dots work with
   JavaScript switched off. The timer at the foot of the page is the only part
   that needs it. */
.shots { margin: 2.2rem auto 0; max-width: var(--page); position: relative; }
.shots input { position: absolute; opacity: 0; pointer-events: none; }

.viewport { overflow: hidden; border-radius: 10px; position: relative; }

.track { display: flex; transition: transform .35s ease; }
.track figure { flex: 0 0 100%; margin: 0; }
.track a.shotlink { display: block; border-radius: 10px; }

.track a.shotlink:hover img, .track a.shotlink:focus-visible img {
  box-shadow: 0 22px 52px rgba(12, 40, 66, .36);
  transform: translateY(-2px);
}

.track img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(12, 40, 66, .28);
  border: 1px solid rgba(0, 0, 0, .08);
  transition: box-shadow .2s, transform .2s;
}

.track figcaption { margin: .9rem 0 0; color: #41505e; font-size: .95rem; }

/* The title sits on the picture. The scrim is a solid band rather than a
   gradient: the gradient had faded to nothing by the bottom of the text, which
   on the map slide put white type on the light blue ocean and measured 1.23
   against a 4.5 requirement. */
.frame { position: relative; }

.frame .shot-title {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
  padding: .85rem 4.2rem;
  text-align: center;
  color: #fff;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: 10px 10px 0 0;
  background: rgba(5, 12, 22, .72);
}

/* Each slide carries its own pair of arrows, inside .frame, so they travel
   with the track. An earlier version put one pair outside and it sat 75px low:
   .viewport holds the caption as well, so its midline is not the picture's. */
.frame label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--c1);
  border: 1px solid rgba(11, 95, 158, .3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  box-shadow: 0 3px 12px rgba(12, 40, 66, .3);
  user-select: none;
  z-index: 2;
}

.frame label:hover { background: #fff; box-shadow: 0 4px 16px rgba(12, 40, 66, .4); }
.frame label.prev { left: 14px; }
.frame label.next { right: 14px; }

#sh1:checked ~ .viewport .track { transform: translateX(-0%); }
#sh2:checked ~ .viewport .track { transform: translateX(-100%); }
#sh3:checked ~ .viewport .track { transform: translateX(-200%); }
#sh4:checked ~ .viewport .track { transform: translateX(-300%); }

.dots { display: flex; justify-content: center; gap: .55rem; margin-top: 1rem; }
.dots label { width: 9px; height: 9px; border-radius: 50%; background: #b9c8d6; cursor: pointer; }

#sh1:checked ~ .dots label[for=sh1],
#sh2:checked ~ .dots label[for=sh2],
#sh3:checked ~ .dots label[for=sh3],
#sh4:checked ~ .dots label[for=sh4] { background: var(--c1); }

@media (max-width: 520px) {
  .frame .shot-title { font-size: .92rem; padding: .6rem 3rem; }
  .frame label { width: 36px; height: 36px; font-size: 1.2rem; }
  .frame label.prev { left: 8px; }
  .frame label.next { right: 8px; }
}

/* --- Remaining products -------------------------------------------------- */

.more { padding: var(--step) 0 calc(var(--step) * 1.1); background: #fafcfd; }

.apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }

/* Icon on top, not beside: at a third of the container the side-by-side
   version left the text column about 236px wide, too narrow for Chinese. */
.app {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.6rem 1.6rem 1.4rem;
}

.app img { width: 54px; height: auto; display: block; margin-bottom: .9rem; }
.app h2 { font-size: 1.22rem; margin: 0 0 .7rem; }
.app p { color: var(--soft); font-size: .94rem; }

.app:nth-child(1) h2 { color: var(--c2); }
.app:nth-child(2) h2 { color: var(--c3); }
.app:nth-child(3) h2 { color: var(--c4); }

.links { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: 1.1rem; }

.links a {
  color: var(--link);
  text-decoration: none;
  font-weight: 700;
  font-size: .92rem;
  border-bottom: 1px solid rgba(11, 95, 158, .3);
}

.links a:hover, .links a:focus { border-bottom-color: var(--link); }

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  background: #f1f4f7;
  border-top: 1px solid var(--line);
  padding: calc(var(--step) * .8) 0;
  color: var(--soft);
  font-size: .92rem;
}

.site-footer img { height: 30px; width: auto; margin-bottom: .8rem; }
.site-footer p { margin: 0; line-height: 2; }

/* --- Breakpoints --------------------------------------------------------- */

@media (max-width: 900px) {
  .apps { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  body { font-size: 16px; line-height: 1.8; }
  .page { padding: 0 1.15rem; }
  .topbar nav { gap: 1rem; }
}

@media (max-width: 380px) {
  .topbar a { font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}