* {
  box-sizing: border-box;
}

:root {
  --cyan: #10c7cf;
  --pink: #ff0bdc;
  --light-pink: #f6d8f4;
  --dark-teal: #007d83;
  --card: #ffffff;
  --text: #152235;
  --image-bg: #922c29;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background:
    linear-gradient(115deg, #ff11df 0%, #ef59e1 47%, #f4dff2 100%);
}

.visual-page {
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto;
  padding: 64px 0 90px;
}

.hero {
  text-align: center;
}

h1 {
  margin: 15px 0 42px;
  color: var(--cyan);
  font-size: clamp(54px, 6.3vw, 112px);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.intro {
  max-width: 1420px;
  margin: 0 auto 30px;
  color: var(--cyan);
  font-size: clamp(17px, 1.45vw, 25px);
  line-height: 1.6;
  font-weight: 700;
}

.contact-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  width: 100%;
  padding: 22px 34px;
  margin: 0 auto;
  border-left: 4px solid #198b8e;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.97);
  color: var(--cyan);
  text-decoration: none;
  font-size: clamp(18px, 1.4vw, 24px);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(80, 20, 90, 0.12);
}

.product {
  margin-top: 46px;
}

.product-visual {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 520px;
}

.image-frame {
  position: relative;
  width: min(820px, 66vw);
  aspect-ratio: 1.37 / 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--image-bg);
}

.image-frame img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--image-bg);
}

.image-frame img:not([src]),
.image-frame img[src=""] {
  display: none;
}

.image-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  padding: 30px;
  color: rgba(255,255,255,.82);
  text-align: center;
  line-height: 1.6;
}

.image-frame:has(img[src]) .image-fallback {
  /* The fallback remains under the image and appears only if the image fails. */
}

.product-info {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 115px;
  margin-top: 48px;
  border-top: 1px solid rgba(40, 70, 90, 0.5);
}

.description {
  margin: 28px auto 10px;
  max-width: 900px;
  font-size: clamp(18px, 1.45vw, 24px);
  line-height: 1.45;
  text-align: center;
}

.price-card {
  min-height: 96px;
  display: flex;
  align-items: center;
  margin-top: 14px;
  padding: 22px 34px;
  border-left: 4px solid #198b8e;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.97);
  color: var(--dark-teal);
  font-size: clamp(19px, 1.4vw, 24px);
}

/* Small CSS robot mascot */
.robot {
  position: absolute;
  width: 110px;
  height: 132px;
  filter: drop-shadow(0 5px 0 rgba(92, 16, 77, 0.45));
}

.robot-left {
  left: 5%;
  top: 0;
}

.robot-small {
  left: 7%;
  top: -52px;
  transform: scale(.9);
}

.robot-antenna {
  width: 25px;
  height: 13px;
  margin: 0 auto -2px;
  border-radius: 50% 50% 35% 35%;
  background: #80aaff;
  border: 3px solid #162450;
}

.robot-head {
  position: relative;
  width: 100px;
  height: 78px;
  margin: 0 auto;
  border: 3px solid #162450;
  border-radius: 42px 42px 32px 32px;
  background: #70a2ff;
}

.robot-head::before {
  content: "";
  position: absolute;
  inset: 20px 14px 13px;
  border: 3px solid #162450;
  border-radius: 20px;
  background: #142856;
}

.eye {
  position: absolute;
  top: 39px;
  z-index: 2;
  width: 10px;
  height: 6px;
  border-bottom: 3px solid #63ffff;
  border-radius: 0 0 10px 10px;
}

.eye-left { left: 31px; transform: rotate(12deg); }
.eye-right { right: 31px; transform: rotate(-12deg); }

.robot-mouth {
  position: absolute;
  left: 48%;
  top: 50px;
  z-index: 3;
  width: 6px;
  height: 3px;
  border-radius: 50%;
  background: #66f6ff;
}

.robot-body {
  width: 68px;
  height: 48px;
  margin: -1px auto 0;
  display: grid;
  place-content: center;
  border: 3px solid #162450;
  border-radius: 16px 16px 20px 20px;
  background: #4c7ef2;
  color: #d9ffff;
  font-size: 16px;
  font-weight: 800;
}

.robot-feet {
  position: relative;
  width: 62px;
  margin: -1px auto 0;
}

.robot-feet::before,
.robot-feet::after {
  content: "";
  position: absolute;
  top: 0;
  width: 22px;
  height: 14px;
  border: 3px solid #162450;
  border-radius: 7px;
  background: #5c87f4;
}

.robot-feet::before { left: 5px; transform: rotate(8deg); }
.robot-feet::after { right: 5px; transform: rotate(-8deg); }

@media (max-width: 900px) {
  .visual-page {
    width: min(100% - 28px, 1440px);
    padding-top: 42px;
  }

  h1 {
    margin-bottom: 28px;
  }

  .contact-card {
    min-height: 78px;
    border-radius: 22px;
  }

  .product {
    margin-top: 32px;
  }

  .product-visual {
    min-height: auto;
    padding-top: 100px;
  }

  .image-frame {
    width: 100%;
    aspect-ratio: 4 / 3;
  }

  .robot-left {
    left: 12px;
    top: 0;
    transform: scale(.76);
    transform-origin: top left;
  }

  .product-info {
    margin-top: 34px;
    padding-top: 45px;
  }

  .robot-small {
    left: 16px;
    top: -48px;
    transform: scale(.7);
    transform-origin: top left;
  }

  .description {
    margin-top: 18px;
    padding: 0 12px;
  }

  .price-card {
    min-height: 78px;
    border-radius: 22px;
  }
}

@media (max-width: 520px) {
  .visual-page {
    width: min(100% - 20px, 1440px);
    padding: 30px 0 50px;
  }

  h1 {
    font-size: clamp(42px, 15vw, 68px);
  }

  .intro {
    font-size: 16px;
    line-height: 1.55;
  }

  .contact-card,
  .price-card {
    padding: 18px 20px;
    font-size: 17px;
  }

  .image-fallback strong {
    overflow-wrap: anywhere;
  }
}


/* collaboration-hub:blocks:start */
*{box-sizing:border-box}body{margin:0;color:#1fdde0;background:linear-gradient(135deg,#ff00ea,#30797e18);font-family:ui-rounded,system-ui,sans-serif}.visual-page{width:min(1160px,calc(100% - 36px));min-height:100vh;margin:auto;display:flex;flex-direction:column;padding:72px 0}.visual-page.position-center{justify-content:center}.visual-page.position-top{justify-content:flex-start}.visual-block{width:100%;max-width:100%;margin:12px 0;padding:0;color:var(--block-color,inherit);background:var(--block-bg,transparent)}.visual-page h1{font-size:clamp(42px,7vw,78px);line-height:.98;letter-spacing:-.05em}.visual-page p,.visual-page li{color:var(--block-color,#7a5a4d);font-size:18px;line-height:1.7}.visual-page a:not(.visual-button){color:var(--block-color,#30797e)}.visual-button,.visual-badge{display:inline-block;text-decoration:none}.type-button,.type-badge{background:transparent}.visual-button{padding:14px 22px;border:2px solid var(--block-bg,#30797e);border-radius:inherit;color:var(--block-color,#fff);background:var(--block-bg,#30797e);font-weight:800}.visual-badge{padding:7px 12px;border:1px solid var(--block-bg,#30797e);border-radius:inherit;color:#fff;background:var(--block-bg,#30797e);font-size:12px;font-weight:800;letter-spacing:.1em}.variant-outline .visual-button,.variant-outline .visual-badge{color:var(--block-color,#30797e);background:transparent;border-color:var(--block-bg,#30797e)}.variant-soft .visual-button,.variant-soft .visual-badge{color:var(--block-color,#30797e);background:var(--block-bg,#30797e1c);border-color:transparent}.visual-page img{display:block;width:100%;height:auto;margin:auto;border-radius:inherit;object-fit:cover}.visual-page blockquote,.visual-callout{border-left:4px solid #30797e;color:var(--block-color,#1fdde0);background:var(--block-bg,#ffffffa8);font-size:22px}.visual-callout{line-height:1.65}.visual-page ul{list-style-position:inside}.visual-page li::marker{color:#30797e}.visual-page hr{width:100%;border:0;border-top-style:solid;border-top-color:var(--block-color,#7a5a4d)}.divider-thin{border-top-width:1px!important}.divider-medium{border-top-width:3px!important}.divider-thick{border-top-width:6px!important}.visual-placeholder{padding:50px;border:1px dashed #7a5a4d;border-radius:16px;color:#7a5a4d}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.align-center img{margin-inline:auto}.align-right img{margin-left:auto}.size-small{font-size:14px!important}.size-medium{font-size:18px}.size-large{font-size:clamp(22px,3vw,32px)!important}.size-display{font-size:clamp(48px,8vw,92px)!important}.weight-regular{font-weight:400}.weight-semibold{font-weight:650}.weight-bold{font-weight:850}.pad-small{padding:12px}.pad-medium{padding:24px}.pad-large{padding:42px}.space-tight{margin-block:4px}.space-normal{margin-block:12px}.space-airy{margin-block:28px}.radius-small{border-radius:10px}.radius-large{border-radius:24px}.radius-pill{border-radius:999px}.width-auto{width:max-content}.width-medium{width:min(680px,100%)}.align-center.width-auto,.align-center.width-medium{margin-inline:auto}.align-right.width-auto,.align-right.width-medium{margin-left:auto}.shadow-soft{box-shadow:0 12px 35px #1720331c}.shadow-strong{box-shadow:0 20px 55px #17203338}.aspect-landscape img{aspect-ratio:16/9}.aspect-square img{aspect-ratio:1}.aspect-portrait img{aspect-ratio:4/5}.spacer-small{height:24px}.spacer-medium{height:56px}.spacer-large{height:96px}.spacer-huge{height:160px}@media(max-width:600px){.visual-page{padding:42px 0}.visual-page h1,.size-display{font-size:44px!important}.visual-page p,.visual-page li{font-size:16px}.pad-large{padding:28px}}
/* collaboration-hub:blocks:end */