@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  --page: #fffaf1;
  --ink: #11203b;
  --muted: #5d6878;
  --muted-strong: #34435a;
  --accent: #0866ff;
  --accent-hover: #0054da;
  --focus: #e8452f;
  --selection: #ffcf52;
  --selection-ink: #1a2540;
  --surface: #e9f6ff;
  --nav-line: rgba(24, 46, 80, .13);
  --nav-ink: #182a47;
  --control-line: rgba(24, 46, 80, .16);
  --control-bg: rgba(255, 250, 241, .86);
  --button-ink: #fff;
  --button-shadow: 0 14px 0 #113a86;
  --button-shadow-hover: 0 17px 0 #113a86;
  --chip-bg: #fffdf8;
  --chip-line: rgba(25, 49, 84, .15);
  --chip-ink: #142744;
  --chip-muted: #68758a;
  --chip-shadow: 8px 9px 0 rgba(20, 42, 75, .11);
  --card-bg: #fff;
  --card-line: #18345f;
  --card-line-hover: #18345f;
  --card-ink: #132642;
  --card-muted: #506077;
  --card-number: rgba(17, 42, 77, .5);
  --card-shadow-hover: 10px 12px 0 rgba(22, 49, 87, .12);
  --icon-bg: #0866ff;
  --cta-bg: #0866ff;
  --cta-ink: #fff;
  --cta-muted: #dce9ff;
  --footer-line: rgba(27, 50, 82, .14);
  --footer-ink: #142643;
  --footer-muted: #667388;
  --mobile-menu-bg: #fffaf1;
  --mobile-menu-ink: #142643;
  --mobile-menu-line: rgba(27, 50, 82, .14);
  --font-body: "Plus Jakarta Sans", "Noto Sans TC", "Noto Sans KR", "Noto Sans JP", "Noto Sans Thai", sans-serif;
  --font-display: var(--font-body);
}

body {
  background:
    radial-gradient(circle at 3% 8%, rgba(255, 192, 46, .24), transparent 16%),
    radial-gradient(circle at 95% 28%, rgba(29, 202, 190, .16), transparent 20%),
    #fffaf1;
}

.site-header { background: rgba(255, 250, 241, .72); backdrop-filter: blur(14px); }
.social-hero { min-height: 880px; padding-top: 145px; }
.social-hero .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(500px, 1.1fr); min-height: 680px; }
.social-hero h1 { max-width: 740px; font-size: clamp(66px, 7.8vw, 118px); font-weight: 800; line-height: .92; }

.social-hero .hero-copy::before {
  position: absolute;
  z-index: -1;
  top: -56px;
  left: -62px;
  width: 132px;
  height: 64px;
  border: 2px solid #152c51;
  border-radius: 50%;
  content: "";
  transform: rotate(-18deg);
}

.social-canvas {
  position: absolute;
  inset: 28px 0 18px 5%;
  overflow: hidden;
  border: 2px solid #18345f;
  border-radius: 90px 32px 90px 32px;
  background: #8edcf3;
  box-shadow: 13px 15px 0 #18345f;
  transform: rotate(2deg);
}

.social-canvas::before {
  position: absolute;
  top: -90px;
  right: -40px;
  width: 270px;
  height: 270px;
  border: 2px solid #18345f;
  border-radius: 50%;
  content: "";
  background: #ff765e;
}

.social-canvas::after {
  position: absolute;
  bottom: -105px;
  left: -50px;
  width: 260px;
  height: 260px;
  border: 2px solid #18345f;
  border-radius: 50%;
  content: "";
  background: #ffcd48;
}

.social-device {
  position: absolute;
  z-index: 3;
  right: 9%;
  bottom: -15%;
  width: min(76%, 490px);
  filter: drop-shadow(0 24px 28px rgba(29, 57, 91, .24));
  animation: social-bob 5s ease-in-out infinite;
}

.social-chip-a { z-index: 4; top: 7%; left: -2%; transform: rotate(-4deg); }
.social-chip-b { z-index: 4; right: -2%; bottom: 10%; transform: rotate(4deg); }

.social-sticker {
  position: absolute;
  z-index: 5;
  top: 12%;
  right: 1%;
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  border: 2px solid #18345f;
  border-radius: 50%;
  color: #13294b;
  background: #ffcd48;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  transform: rotate(10deg);
}

@keyframes social-bob { 50% { transform: translateY(-15px) rotate(1.4deg); } }

.social-about { padding-top: calc(var(--section-space) + 20px); overflow: hidden; }
.social-about .media-frame {
  overflow: visible;
  border: 2px solid #18345f;
  border-radius: 32px 110px 32px 32px;
  background: #ffcd48;
  box-shadow: -14px 15px 0 #18345f;
}

.social-about .media-frame img {
  border-radius: 30px 108px 30px 30px;
  object-position: center;
}

.social-about .media-frame::after {
  position: absolute;
  right: -28px;
  bottom: -28px;
  width: 86px;
  height: 86px;
  border: 2px solid #18345f;
  border-radius: 20px;
  content: "";
  background: #ff765e;
  transform: rotate(14deg);
}

.social-about .about-copy h2 { font-weight: 800; }

.social-strategy {
  color: #fff;
  background: #142c52;
}

.social-strategy .strategy-grid { grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); }
.social-strategy .strategy-copy { order: 2; }
.social-strategy .strategy-copy > p { color: #c8d7ec; }
.social-strategy .section-kicker { color: #6de2d6; }
.social-strategy .strategy-visual {
  overflow: visible;
  border: 2px solid #fff;
  border-radius: 100px 30px 100px 30px;
  box-shadow: 13px 14px 0 #6de2d6;
}

.social-strategy .strategy-visual img { border-radius: 98px 28px 98px 28px; }
.social-strategy .info-chip { right: -35px; bottom: 28px; }

.social-formats .formats-grid { gap: 22px; }
.social-formats .format-card { border-width: 2px; box-shadow: 7px 8px 0 #18345f; }
.social-formats .format-card:nth-child(1) { color: #fff; background: #0866ff; --card-muted: #fff; --card-number: rgba(255,255,255,.7); --icon-bg: #142c52; }
.social-formats .format-card:nth-child(2) { background: #ffcd48; --card-muted: #24324a; --icon-bg: #ff765e; }
.social-formats .format-card:nth-child(3) { background: #72dfd3; --card-muted: #24324a; --icon-bg: #142c52; }
.social-formats .format-card:nth-child(4) { background: #ff836c; --card-muted: #24324a; --icon-bg: #0866ff; }

.social-formats .format-card::before {
  position: absolute;
  right: 18%;
  bottom: -72px;
  width: 148px;
  height: 148px;
  border: 2px solid currentColor;
  border-radius: 50%;
  content: "";
  opacity: .16;
}

.social-formats .format-card:hover { transform: translate(-4px, -6px) rotate(-.4deg); box-shadow: 12px 14px 0 #18345f; }

.social-cta .cta-panel {
  border: 2px solid #142c52;
  box-shadow: 14px 16px 0 #142c52;
}

.social-cta .cta-panel::before,
.social-cta .cta-panel::after {
  position: absolute;
  border: 2px solid #142c52;
  border-radius: 50%;
  content: "";
}

.social-cta .cta-panel::before { top: -125px; right: -60px; width: 320px; height: 320px; background: #ffcd48; }
.social-cta .cta-panel::after { right: 28%; bottom: -160px; width: 300px; height: 300px; background: #72dfd3; }
.social-cta { --cta-muted: #fff; }
.social-cta .section-kicker { color: #fff; }
.social-cta .cta-visual { z-index: 2; right: 1%; bottom: -39%; filter: drop-shadow(0 26px 24px rgba(11, 43, 97, .25)); }

@media (max-width: 900px) {
  .social-hero .hero-grid { grid-template-columns: 1fr; }
  .social-canvas { inset: 18px 8% 16px; }
  .social-device { right: 20%; width: 60%; }
  .social-strategy .strategy-copy { order: 0; }
  .social-strategy .strategy-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .social-hero h1 { font-size: clamp(54px, 16vw, 76px); }
  .social-canvas { inset: 15px 0 12px; border-radius: 56px 22px; box-shadow: 8px 9px 0 #18345f; }
  .social-device { right: 8%; bottom: -8%; width: 82%; }
  .social-chip-a { top: 2%; left: -2%; }
  .social-chip-b { right: -2%; bottom: 6%; }
  .social-sticker { display: none; }
  .social-about .media-frame { min-height: 390px; border-radius: 24px 70px 24px 24px; box-shadow: -8px 9px 0 #18345f; }
  .social-about .media-frame img { border-radius: 22px 68px 22px 22px; }
  .social-strategy .strategy-visual { border-radius: 60px 22px; box-shadow: 8px 9px 0 #6de2d6; }
  .social-strategy .strategy-visual img { border-radius: 58px 20px; }
  .social-strategy .info-chip { right: -5px; bottom: 14px; }
  .social-formats .format-card { box-shadow: 5px 6px 0 #18345f; }
  .social-cta .cta-panel { box-shadow: 8px 9px 0 #142c52; }
}