/* ==========================================================================
   Social Media Management page - loaded only on /services/social-media-management
   A "marketing dashboard" composition. All posts, calendars and campaigns are original illustrative
   content; no real platform logos, statistics or integrations are shown.
   ========================================================================== */

@property --pw { syntax: '<length>'; inherits: true; initial-value: 340px; }
@property --ar { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --glow { syntax: '<number>'; inherits: true; initial-value: .14; }

.g { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.av img { display: block; border-radius: 22%; background: #fff; border: 1px solid rgba(8, 8, 8, .08); }
.pd { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; } .pd.p0, .pd-instagram { background: linear-gradient(135deg, #7ED957, #2f7d17); } .pd.p1, .pd-linkedin { background: #151A18; } .pd.p2, .pd-facebook { background: #4a5a50; } .pd.p3, .pd-youtube { background: #b7e8a0; border: 1px solid rgba(8, 8, 8, .25); }

/* ----- mini post components (hero + stage) ----- */
.smp { position: absolute; background: #fff; color: #16201b; border-radius: 16px; overflow: hidden; container-type: inline-size; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .5) inset; }
.mp-head { display: flex; align-items: center; gap: 3cqw; padding: 4cqw; } .mp-head .av img { width: 9cqw; height: 9cqw; } .mp-head b { display: block; font-size: 4.4cqw; line-height: 1.1; } .mp-head small { display: block; font-size: 3.2cqw; color: #78847d; }
.mp-media { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 1.6cqw; padding: 6cqw; color: #fff; background: radial-gradient(90% 70% at 90% 0%, rgba(126, 217, 87, .45), transparent 60%), linear-gradient(135deg, #080808, #151A18); }
.mp-media.wide { aspect-ratio: 1.9; } .mp-media.g { background: linear-gradient(135deg, #7ED957, #2f7d17); color: #07120a; }
.mp-media small { font-size: 3cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--green); font-weight: 800; } .mp-media b { font-size: 7.4cqw; line-height: 1.1; letter-spacing: -.03em; font-weight: 800; }
.mp-acts { display: flex; align-items: center; gap: 3.4cqw; padding: 3.5cqw 4cqw; } .mp-acts .g { width: 5.4cqw; height: 5.4cqw; } .mp-acts span { flex: 1; } .mp-acts.sm .g { width: 4.6cqw; height: 4.6cqw; }
.mp-cap { margin: 0; padding: 2cqw 4cqw 4cqw; } .mp-cap i { display: block; height: 1.6cqw; border-radius: 9cqw; background: #dfe5e0; margin: 2cqw 0; } .mp-cap i:nth-child(2) { width: 72%; } .mp-cap i:nth-child(3) { width: 46%; }

/* ============ 1. HERO ============ */
.sm-hero { position: relative; display: flex; align-items: center; overflow: hidden; min-height: min(100svh, 980px); padding: calc(var(--header-h) + clamp(30px, 5vw, 64px)) 0 clamp(80px, 9vw, 120px); background: radial-gradient(110% 100% at 15% 100%, #0f1a13, var(--black) 62%); }
.sm-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .sm-glow { position: absolute; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; right: -12vw; top: -8vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(126, 217, 87, .22), transparent); }
.sm-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: center; width: 100%; }
.sm-label { display: inline-flex; align-items: center; gap: 12px; font-size: .76rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--green); margin-bottom: 22px; } .sm-label::before { content: ''; width: 34px; height: 1.5px; background: currentColor; }
.sm-title { font-size: clamp(2.2rem, 4.7vw, 4.2rem); line-height: 1.04; letter-spacing: -.045em; font-weight: 800; color: #fff; }
.sm-title .ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; } .sm-title .lni { display: inline-block; will-change: transform; } .sm-title em { font-style: normal; background: linear-gradient(100deg, #7ED957 10%, #d3f7bd 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sm-draw { display: block; width: 120px; height: 2px; margin: 26px 0 4px; background: linear-gradient(90deg, var(--green), transparent); transform-origin: left; animation: smDraw 1.5s 1s var(--ease) both; } @keyframes smDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sm-lead { margin-top: 22px; max-width: 54ch; } .sm-ctas { margin-top: 34px; }
.sm-eco { position: relative; width: min(100%, 560px); aspect-ratio: 1 / 1.05; margin-inline: auto; perspective: 1500px; }
.eco-net { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .eco-net path { fill: none; stroke: rgba(126, 217, 87, .45); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; } .eco-net circle { fill: var(--green); filter: drop-shadow(0 0 4px var(--green)); animation: smPulse 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .eco-net circle:nth-child(2n) { animation-delay: -1.4s; } @keyframes smPulse { 0%, 100% { opacity: .5; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.3); } }
.eco-3d { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(var(--ry, -16deg)) rotateX(var(--rx, 6deg)); transition: transform .4s var(--ease); }
.hp-ig { left: 2%; top: 4%; width: 36%; transform: translateZ(60px); } .hp-li { right: 0; top: 0; width: 57%; transform: translateZ(30px); } .hp-fb { right: 3%; top: 36%; width: 48%; transform: translateZ(90px); }
.hp-yt { left: 12%; top: 55%; width: 46%; transform: translateZ(120px); } .hp-plan { right: 0; bottom: 0; width: 40%; transform: translateZ(60px); } .hp-camp { left: 0; bottom: 1%; width: 24%; aspect-ratio: .72; transform: translateZ(140px); }
.yt-thumb { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: flex-end; padding: 5cqw; color: #fff; background: linear-gradient(135deg, #151A18, #080808 55%, #1d3a1f); } .yt-thumb b { font-size: 5.2cqw; line-height: 1.15; } .yt-play { position: absolute; left: 50%; top: 40%; translate: -50% -50%; display: grid; place-items: center; width: 14cqw; height: 14cqw; border-radius: 50%; background: rgba(255, 255, 255, .94); color: #080808; } .yt-play .g { width: 6cqw; height: 6cqw; fill: currentColor; stroke: none; }
.yt-meta { padding: 4cqw; } .yt-meta i { display: block; height: 1.8cqw; border-radius: 9cqw; background: #dfe5e0; margin-bottom: 2cqw; } .yt-meta i:last-child { width: 55%; margin: 0; }
.hp-plan { padding: 1.6%; } .hp-plan small { display: block; font-size: 4.2cqw; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #55605a; margin-bottom: 3cqw; } .pl-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2cqw; } .pl-grid u { aspect-ratio: 1; border-radius: 1.6cqw; background: #e8ece8; } .pl-grid u.on { background: var(--green); }
.hp-camp { display: flex; flex-direction: column; justify-content: space-between; padding: 1.9%; color: #fff; background: radial-gradient(100% 70% at 100% 0%, rgba(126, 217, 87, .6), transparent 60%), #080808; } .hp-camp small { font-size: 7cqw; letter-spacing: .12em; text-transform: uppercase; color: var(--green); font-weight: 800; } .hp-camp b { font-size: 15cqw; line-height: 1.05; letter-spacing: -.03em; } .hp-camp .av img { width: 22cqw; height: 22cqw; }
.hp-eng { position: absolute; z-index: 5; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #07120a; background: var(--green); box-shadow: 0 0 0 6px rgba(126, 217, 87, .22), 0 14px 30px -10px rgba(0, 0, 0, .6); transform: translateZ(160px); animation: smBob 5s ease-in-out infinite; } .hp-eng .g { width: 22px; height: 22px; } .hp-eng.e1 { left: 34%; top: 2%; } .hp-eng.e2 { right: 40%; top: 58%; animation-delay: -1.6s; } .hp-eng.e3 { right: 44%; bottom: 2%; animation-delay: -3s; } @keyframes smBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.eco-note { position: absolute; left: 0; bottom: -4%; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }

/* ============ 2. INTRO ============ */
.sm-intro { background: var(--offwhite, #F6F8F6); overflow: clip; }
.sm-intro-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 96px); align-items: start; }
.sm-orbit-wrap { align-self: stretch; } .sm-orbit { position: sticky; top: calc(var(--header-h) + 40px); width: min(100%, 440px); aspect-ratio: 1; margin-inline: auto; }
.orb-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .orb-lines circle { fill: none; stroke: rgba(8, 8, 8, .14); stroke-width: .5; stroke-dasharray: 1.5 2; } .orb-lines circle.in { stroke: rgba(47, 125, 23, .35); } .orb-lines .spoke { stroke: rgba(8, 8, 8, .14); stroke-width: .5; fill: none; transition: stroke .5s, stroke-width .5s; }
.orb-core { position: absolute; left: 50%; top: 50%; width: 22%; translate: -50% -50%; border-radius: 22%; background: #fff; box-shadow: 0 20px 44px -20px rgba(8, 8, 8, .5), 0 0 0 8px rgba(126, 217, 87, .18); } .orb-core img { display: block; width: 100%; height: auto; border-radius: 22%; }
.orb-node { position: absolute; display: grid; place-items: center; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #fff; border: 1px solid var(--line-l); text-align: center; box-shadow: 0 16px 30px -20px rgba(8, 8, 8, .4); transition: all .5s var(--ease); } .orb-node b { font-size: .72rem; color: var(--green-ink); letter-spacing: .12em; } .orb-node i { font-style: normal; font-weight: 800; font-size: .84rem; letter-spacing: -.02em; }
.orb-node.n0 { left: 39%; top: 1%; } .orb-node.n1 { right: 1%; top: 39%; } .orb-node.n2 { left: 39%; bottom: 1%; } .orb-node.n3 { left: 1%; top: 39%; }
.sm-orbit[data-active="0"] .n0, .sm-orbit[data-active="1"] .n1, .sm-orbit[data-active="2"] .n2, .sm-orbit[data-active="3"] .n3 { background: #080808; color: #fff; border-color: #080808; transform: scale(1.14); box-shadow: 0 0 0 8px rgba(126, 217, 87, .28), 0 22px 40px -18px rgba(8, 8, 8, .6); } .sm-orbit[data-active="0"] .n0 b, .sm-orbit[data-active="1"] .n1 b, .sm-orbit[data-active="2"] .n2 b, .sm-orbit[data-active="3"] .n3 b { color: var(--green); }
.sm-orbit[data-active="0"] .s0, .sm-orbit[data-active="1"] .s1, .sm-orbit[data-active="2"] .s2, .sm-orbit[data-active="3"] .s3 { stroke: var(--green-ink); stroke-width: 1.2; }
.sm-lead-l { margin: 18px 0 0; max-width: 54ch; font-size: 1.1rem; color: var(--mute-l); }
.sm-concepts { list-style: none; margin: clamp(26px, 4vw, 48px) 0 0; padding: 0; }
.sm-concept { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 3vw, 34px); padding: clamp(26px, 4.4vw, 50px) 0; opacity: .42; transition: opacity .6s var(--ease); } .sm-concept.on { opacity: 1; }
.cn-n { font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1; font-weight: 800; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(47, 125, 23, .55); transition: color .5s, -webkit-text-stroke-color .5s; } .sm-concept.on .cn-n { color: rgba(126, 217, 87, .22); -webkit-text-stroke-color: var(--green-ink); }
.sm-concept h3 { font-size: clamp(1.3rem, 2.4vw, 1.85rem); letter-spacing: -.03em; line-height: 1.12; font-weight: 800; } .sm-concept p { margin-top: 8px; color: var(--mute-l); font-size: 1.06rem; max-width: 42ch; }
.cn-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(8, 8, 8, .1); } .cn-line::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--green-ink), transparent 80%); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease); } .sm-concept.on .cn-line::after, .sm-concept.seen .cn-line::after { transform: scaleX(1); }

/* ============ 3. COMMAND CENTER ============ */
.sm-cc-sec { background: radial-gradient(100% 90% at 0% 0%, #10201a, var(--black) 60%); }
.sm-cc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 60px; flex-wrap: wrap; margin-bottom: clamp(28px, 5vw, 52px); } .sm-cc-head > div { max-width: 760px; } .sm-sub { max-width: 40ch; margin: 0; color: var(--mute-d); }
.cc { border-radius: 28px; background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)); border: 1px solid var(--line-d); overflow: hidden; box-shadow: 0 60px 100px -60px rgba(0, 0, 0, .9); }
.cc-bar { display: flex; align-items: center; gap: 7px; padding: 12px 18px; border-bottom: 1px solid var(--line-d); background: rgba(0, 0, 0, .3); } .cc-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .22); } .cc-bar span { margin-left: 12px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.cc-body { display: grid; grid-template-columns: 230px minmax(0, 1fr) 250px; gap: 20px; padding: 20px; }
.cc-t { margin: 0 0 8px; font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .5); } .cc-side .cc-t:not(:first-child) { margin-top: 22px; }
.cc-plats { display: grid; gap: 8px; } .cc-plats button { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 14px; color: rgba(255, 255, 255, .6); border: 1px solid var(--line-d); background: rgba(255, 255, 255, .03); transition: all .4s var(--ease); } .cc-plats b { display: block; font-size: .96rem; color: inherit; } .cc-plats small { display: block; font-size: .74rem; opacity: .7; }
.cc-plats button:hover { color: #fff; } .cc-plats button[aria-selected="true"] { color: #fff; background: rgba(126, 217, 87, .1); border-color: rgba(126, 217, 87, .55); box-shadow: 0 20px 36px -26px rgba(126, 217, 87, .6); }
.cc-types { display: grid; gap: 8px; } .cc-types button { text-align: left; padding: 11px 14px; border-radius: 12px; font-size: .88rem; font-weight: 700; color: rgba(255, 255, 255, .65); border: 1px solid var(--line-d); background: rgba(255, 255, 255, .03); transition: all .35s var(--ease); } .cc-types button[aria-checked="true"] { color: #07120a; background: var(--green); border-color: var(--green); }
.cc-stage { position: relative; display: grid; place-items: center; min-height: 560px; border-radius: 22px; padding: 24px 18px; background: radial-gradient(70% 70% at 50% 40%, rgba(126, 217, 87, var(--glow, .14)), transparent 70%), rgba(0, 0, 0, .35); border: 1px solid var(--line-d); overflow: hidden; transition: --glow .6s; }
.cc-stage::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.3px); background-size: 22px 22px; mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent); -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent); pointer-events: none; }
.cc-post { --pw: 340px; --ar: 1; position: relative; display: flex; flex-direction: column; width: min(100%, var(--pw)); background: #fff; color: #16201b; border-radius: 18px; overflow: hidden; container-type: inline-size; box-shadow: 0 50px 80px -34px rgba(0, 0, 0, .85); transition: --pw .7s var(--ease), --ar .7s var(--ease), box-shadow .5s; }
.cc-post[data-p="1"] { --pw: 520px; --ar: 1.91; } .cc-post[data-p="2"] { --pw: 440px; --ar: 1.6; } .cc-post[data-p="3"] { --pw: 520px; --ar: 1.78; }
.cp-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; order: 1; } .cp-head .av img { width: 40px; height: 40px; } .cp-head b { display: block; font-size: .98rem; line-height: 1.1; } .cp-head small { display: block; font-size: .78rem; color: #78847d; } .cp-more { margin-left: auto; color: #78847d; letter-spacing: .1em; }
.cp-media { position: relative; order: 2; aspect-ratio: var(--ar); display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 6%; overflow: hidden; color: #fff; background: radial-gradient(90% 70% at 90% 0%, rgba(126, 217, 87, .45), transparent 60%), linear-gradient(135deg, #080808, #151A18); transition: background .6s; }
.cp-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--green); } .cp-headline { font-size: clamp(1.3rem, 4.4cqw, 2rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 800; max-width: 16ch; }
.cc-post[data-p="1"] .cp-headline, .cc-post[data-p="3"] .cp-headline { max-width: 20ch; font-size: clamp(1.3rem, 4cqw, 2rem); }
.cp-play { display: none; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 62px; height: 62px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: #080808; place-items: center; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .6); } .cp-play .g { width: 26px; height: 26px; fill: currentColor; stroke: none; } .cc-post[data-p="3"] .cp-play { display: grid; }
.cp-sample { position: absolute; top: 12px; right: 12px; font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(6px); }
.cp-deco { position: absolute; right: 7%; top: 14%; display: grid; gap: 7px; width: 26%; opacity: .95; transition: opacity .5s; } .cp-deco i { display: block; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .22); } .cp-deco i:nth-child(1) { background: var(--green); width: 100%; } .cp-deco i:nth-child(2) { width: 72%; } .cp-deco i:nth-child(3) { width: 46%; }
.cc-post[data-t="0"] .cp-deco { width: 22%; aspect-ratio: 1; border: 2px solid rgba(126, 217, 87, .8); border-radius: 50%; display: block; } .cc-post[data-t="0"] .cp-deco i { display: none; }
.cc-post[data-t="1"] .cp-media { background: radial-gradient(90% 70% at 10% 0%, rgba(255, 255, 255, .25), transparent 60%), linear-gradient(135deg, #7ED957, #2f7d17); color: #07120a; } .cc-post[data-t="1"] .cp-kicker { color: #07120a; } .cc-post[data-t="1"] .cp-deco i { background: rgba(8, 18, 10, .22); } .cc-post[data-t="1"] .cp-deco i:nth-child(1) { background: #07120a; } .cc-post[data-t="1"] .cp-sample { background: rgba(8, 18, 10, .16); color: #07120a; }
.cc-post[data-t="2"] .cp-media { background: radial-gradient(90% 70% at 90% 100%, rgba(126, 217, 87, .3), transparent 60%), linear-gradient(135deg, #151A18, #0b100d); } .cc-post[data-t="2"] .cp-deco i { height: 10px; }
.cc-post[data-t="3"] .cp-media { background: linear-gradient(135deg, #080808, #11251a); box-shadow: inset 0 0 0 2px rgba(126, 217, 87, .5); } .cc-post[data-t="3"] .cp-deco i:nth-child(1) { width: 100%; } .cc-post[data-t="3"] .cp-deco i:nth-child(2) { width: 58%; background: rgba(126, 217, 87, .6); }
.cp-acts { display: flex; align-items: center; gap: 14px; padding: 12px 16px 2px; order: 3; } .cp-acts .g { width: 24px; height: 24px; } .cp-acts span { flex: 1; } .cp-like { display: none; font-style: normal; }
.cp-cap { order: 4; padding: 6px 16px 18px; } .cp-cap p { margin: 0; font-size: .92rem; line-height: 1.5; white-space: pre-line; }
/* platform-specific arrangements */
.cc-post[data-p="1"] .cp-head, .cc-post[data-p="2"] .cp-head { order: 1; } .cc-post[data-p="1"] .cp-cap, .cc-post[data-p="2"] .cp-cap { order: 2; padding: 0 16px 12px; } .cc-post[data-p="1"] .cp-media, .cc-post[data-p="2"] .cp-media { order: 3; } .cc-post[data-p="1"] .cp-acts, .cc-post[data-p="2"] .cp-acts { order: 4; border-top: 1px solid #e8ece8; margin-top: 0; padding: 10px 16px; gap: 22px; } .cc-post[data-p="1"] .cp-acts .g:nth-child(n+2):not(:nth-child(3)) { display: none; } .cc-post[data-p="1"] .cp-acts span, .cc-post[data-p="1"] .cp-acts svg:nth-child(4), .cc-post[data-p="1"] .cp-acts svg:nth-child(5) { display: none; }
.cc-post[data-p="3"] .cp-media { order: 1; } .cc-post[data-p="3"] .cp-head { order: 2; } .cc-post[data-p="3"] .cp-cap { order: 3; padding: 0 16px 8px; } .cc-post[data-p="3"] .cp-cap p { color: #4a5650; font-size: .86rem; } .cc-post[data-p="3"] .cp-acts { order: 4; padding: 4px 16px 16px; } .cc-post[data-p="3"] .cp-acts .g:not(:first-child) { display: none; } .cc-post[data-p="3"] .cp-acts span { display: none; } .cc-post[data-p="3"] .cp-like { display: none; }
.cc-post[data-p="0"] .cp-cap p { font-size: .88rem; }
.cc-post.swap .cp-media, .cc-post.swap .cp-cap, .cc-post.swap .cp-head { animation: smSwap .6s var(--ease) both; } @keyframes smSwap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cc-info { display: grid; gap: 14px; align-content: start; } .ci-card { padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-d); } .ci-card b { display: block; font-size: 1.05rem; line-height: 1.25; color: #fff; } .ci-card small { display: block; margin-top: 6px; font-size: .78rem; color: var(--mute-d); }
.ci-status { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; } .ci-status li { position: relative; padding: 7px 12px 7px 30px; border-radius: 10px; font-size: .84rem; font-weight: 700; color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .04); } .ci-status li::before { content: ''; position: absolute; left: 11px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; border: 2px solid currentColor; } .ci-status li.done { color: rgba(255, 255, 255, .8); } .ci-status li.done::before { background: var(--green); border-color: var(--green); } .ci-status li.on { color: #07120a; background: var(--green); } .ci-status li.on::before { background: #07120a; border-color: #07120a; }
.ci-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 6px; } .ci-week span { display: grid; gap: 4px; text-align: center; } .ci-week i { font-style: normal; font-size: .64rem; color: rgba(255, 255, 255, .5); } .ci-week u { height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .08); transition: background .5s; } .ci-week span.on u { background: var(--green); box-shadow: 0 0 14px rgba(126, 217, 87, .6); }

/* ============ 4. SERVICES BENTO ============ */
.sm-svc { background: #fff; }
.sm-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(210px, auto); gap: 16px; }
.sb { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: 26px; background: #f3f6f3; border: 1px solid var(--line-l); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s, border-color .4s; } .sb:hover { transform: translateY(-6px); border-color: rgba(47, 125, 23, .5); box-shadow: 0 34px 56px -34px rgba(8, 8, 8, .5), 0 0 0 1px rgba(126, 217, 87, .35); }
.sb-n { font-size: .78rem; font-weight: 800; letter-spacing: .16em; color: var(--green-ink); } .sb h3 { font-size: clamp(1.15rem, 1.8vw, 1.5rem); letter-spacing: -.03em; line-height: 1.12; font-weight: 800; } .sb p { margin: 0; color: var(--mute-l); font-size: .96rem; max-width: 38ch; }
.sb-art { margin-bottom: auto; width: 96px; height: 76px; color: var(--green-ink); transition: transform .7s var(--ease); } .sb:hover .sb-art { transform: translateY(-4px) scale(1.06); } .sb-art svg { width: 76px; height: 76px; }
.sb-strategy { grid-column: span 5; grid-row: span 2; background: #080808; color: #fff; border-color: #080808; justify-content: flex-end; } .sb-strategy h3 { color: #fff; font-size: clamp(1.6rem, 2.8vw, 2.3rem); } .sb-strategy p { color: var(--mute-d); } .sb-strategy .sb-n { color: var(--green); } .sb-strategy .sb-art { color: var(--green); width: 150px; height: 150px; } .sb-strategy .sb-art svg { width: 150px; height: 150px; }
.sb-plan { grid-column: span 4; } .sb-design { grid-column: span 3; background: #eaf7e3; } .sb-copy { grid-column: span 3; } .sb-brand { grid-column: span 4; background: #0f1a14; color: #fff; border-color: transparent; } .sb-brand h3 { color: #fff; } .sb-brand p { color: var(--mute-d); } .sb-brand .sb-n { color: var(--green); }
.sb-schedule { grid-column: span 4; } .sb-community { grid-column: span 4; background: #eaf7e3; } .sb-review { grid-column: span 4; }
.a-plan { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; width: 96px; } .a-plan u { aspect-ratio: 1; border-radius: 4px; background: rgba(47, 125, 23, .18); } .a-plan u.on { background: var(--green); }
.a-design { position: relative; display: block; width: 90px; height: 76px; } .a-design i { position: absolute; border-radius: 10px; } .a-design .d1 { left: 0; top: 8px; width: 52px; height: 52px; background: #080808; transform: rotate(-8deg); } .a-design .d2 { left: 24px; top: 0; width: 52px; height: 52px; background: var(--green); transform: rotate(6deg); } .a-design .d3 { left: 40px; top: 24px; width: 46px; height: 46px; background: #fff; border: 1px solid rgba(8, 8, 8, .2); }
.a-copy { display: grid; gap: 8px; width: 96px; } .a-copy i { display: block; height: 7px; border-radius: 9px; background: rgba(47, 125, 23, .5); } .a-copy i:nth-child(2) { width: 76%; } .a-copy i:nth-child(3) { width: 48%; } .a-copy em { display: block; width: 3px; height: 16px; background: var(--green-ink); animation: smBlink 1s steps(2) infinite; } @keyframes smBlink { 50% { opacity: 0; } }
.a-brand { display: flex; align-items: center; gap: 6px; } .a-brand img { width: 52px; height: 52px; border-radius: 22%; background: #fff; } .a-brand u { width: 14px; height: 52px; border-radius: 7px; background: var(--green); } .a-brand u:nth-of-type(2) { background: #fff; } .a-brand u:nth-of-type(3) { background: #2f7d17; }
.a-chat { position: relative; display: block; width: 96px; height: 76px; } .a-chat i { position: absolute; height: 28px; border-radius: 14px; background: var(--green-ink); } .a-chat .c1 { left: 0; top: 4px; width: 62px; border-bottom-left-radius: 4px; } .a-chat .c2 { right: 0; top: 38px; width: 56px; background: #080808; border-bottom-right-radius: 4px; }
.a-bars { display: flex; align-items: flex-end; gap: 6px; width: 96px; height: 76px; } .a-bars u { flex: 1; border-radius: 5px 5px 0 0; background: var(--green-ink); opacity: .35; } .a-bars u:nth-child(1) { height: 40%; } .a-bars u:nth-child(2) { height: 62%; opacity: .55; } .a-bars u:nth-child(3) { height: 50%; } .a-bars u:nth-child(4) { height: 82%; opacity: .8; } .a-bars u:nth-child(5) { height: 68%; background: var(--green); opacity: 1; }

/* ============ 5. CALENDAR ============ */
.sm-cal { background: var(--offwhite, #F6F8F6); }
.cal { padding: clamp(18px, 3vw, 32px); border-radius: 28px; background: #fff; border: 1px solid var(--line-l); box-shadow: 0 50px 90px -60px rgba(8, 8, 8, .45); }
.cal-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .cal-nav { display: flex; align-items: center; gap: 12px; } .cal-nav b { min-width: 9.5em; text-align: center; font-size: 1.15rem; letter-spacing: -.02em; }
.cal-filter { display: flex; flex-wrap: wrap; gap: 8px; } .cal-filter button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 99px; font-size: .86rem; font-weight: 700; color: var(--mute-l); background: #f3f6f3; border: 1px solid var(--line-l); transition: all .35s var(--ease); } .cal-filter button.on { background: #080808; color: #fff; border-color: #080808; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 16px; font-size: .78rem; color: var(--mute-l); } .cal-legend span { display: inline-flex; align-items: center; gap: 7px; } .cal-legend i, .cp i.dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.c-awareness { background: #7ED957; } .c-promotion { background: #080808; } .c-educational { background: #2f7d17; } .c-community { background: #bdf09f; box-shadow: inset 0 0 0 1px rgba(8, 8, 8, .25); }
.cal-main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .cal-dow span { padding: 8px 6px; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mute-l); text-align: center; }
.cal-grid { gap: 6px; } .cal-cell { position: relative; min-height: 98px; padding: 8px; border-radius: 12px; background: #f6f8f6; border: 1px solid transparent; display: flex; flex-direction: column; gap: 5px; transition: background .3s, border-color .3s; } .cal-cell.empty { background: transparent; } .cal-cell .dn { font-size: .78rem; font-weight: 700; color: #55605a; } .cal-cell.has { background: #fff; border-color: var(--line-l); } .cal-cell.sel { border-color: var(--green-ink); box-shadow: 0 0 0 2px rgba(126, 217, 87, .45); }
.cp { display: flex; align-items: center; gap: 5px; width: 100%; padding: 5px 6px; border-radius: 7px; font-size: .66rem; font-weight: 700; text-align: left; color: #16201b; background: #f0f4f0; border-left: 3px solid #7ED957; transition: transform .3s var(--ease), background .3s; overflow: hidden; } .cp:hover { transform: translateX(2px); background: #e4efe0; } .cp span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; white-space: normal; }
.cp.c-awareness { border-left-color: #7ED957; background: #eef9e8; } .cp.c-promotion { border-left-color: #080808; background: #eceeec; } .cp.c-educational { border-left-color: #2f7d17; background: #e4f0de; } .cp.c-community { border-left-color: #bdf09f; background: #f3fbee; } .cp.sel { outline: 2px solid var(--green-ink); }
.cp .st { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; flex: none; border: 2px solid #8a948d; } .cp .st.review { border-color: #d9a400; background: #ffe58a; } .cp .st.scheduled { border-color: #2f7d17; background: var(--green); } .cp .st.draft { border-style: dashed; }
.cal-agenda { display: none; list-style: none; margin: 0; padding: 0; gap: 8px; }
.cal-detail { position: sticky; top: calc(var(--header-h) + 24px); min-height: 280px; padding: 22px; border-radius: 22px; background: #080808; color: #fff; overflow: hidden; } .cal-detail::before { content: ''; position: absolute; width: 220px; height: 220px; right: -80px; top: -90px; border-radius: 50%; background: radial-gradient(closest-side, rgba(126, 217, 87, .35), transparent); }
.cd-empty { margin: 0; color: var(--mute-d); } .cd-card { position: relative; display: grid; gap: 12px; animation: smSwap .5s var(--ease) both; } .cd-card[hidden] { display: none; } .cd-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .cd-plat { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green); } .cd-time { font-size: .84rem; color: var(--mute-d); }
.cd-card h3 { font-size: 1.35rem; letter-spacing: -.03em; line-height: 1.15; } .cd-cap { margin: 0; color: #dfe9e1; font-size: .98rem; } .cd-meta { display: flex; flex-wrap: wrap; gap: 8px; } .cd-cat, .cd-status { padding: 6px 12px; border-radius: 99px; font-size: .76rem; font-weight: 800; letter-spacing: .06em; }
.cd-cat { background: rgba(255, 255, 255, .1); } .cd-status { background: #3a3d3b; transition: background .5s, color .5s; } .cd-status.review { background: #ffe58a; color: #3d3000; } .cd-status.scheduled { background: var(--green); color: #07120a; } .cd-fine { margin: 0; font-size: .74rem; color: var(--mute-d); }
.cd-card .btn { width: fit-content; }

/* ============ 6. JOURNEY (pinned, scroll-driven) ============ */
.sm-journey { position: relative; height: 460vh; background: radial-gradient(100% 90% at 100% 0%, #11201a, var(--black) 60%); overflow: clip; }
.sm-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding-top: var(--header-h); }
.sm-pin-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(30px, 6vw, 90px); align-items: center; width: 100%; }
.jr-copy .display { margin-bottom: clamp(22px, 4vw, 40px); } .jr-steps { position: relative; min-height: 190px; }
.jr-step { position: absolute; inset: 0 auto auto 0; max-width: 44ch; opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .7s var(--ease); pointer-events: none; } .jr-step.on { opacity: 1; transform: none; }
.js-n { display: block; font-size: clamp(3.4rem, 8vw, 6rem); line-height: .9; font-weight: 800; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1.6px var(--green); } .jr-step h3 { margin: 14px 0 8px; font-size: clamp(1.5rem, 3vw, 2.3rem); letter-spacing: -.03em; color: #fff; } .jr-step p { margin: 0; color: var(--mute-d); font-size: 1.06rem; }
.jr-stage { position: relative; display: grid; place-items: center; } .jr-rail { position: absolute; right: 0; top: 50%; translate: 0 -50%; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .jr-rail li { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .22); transition: all .5s var(--ease); } .jr-rail li.on { background: var(--green); box-shadow: 0 0 0 6px rgba(126, 217, 87, .25); }
.jr-post { position: relative; width: min(100%, 340px); aspect-ratio: .8; container-type: inline-size; border-radius: 20px; background: #fff; color: #16201b; padding: 5cqw; display: flex; flex-direction: column; gap: 3cqw; box-shadow: 0 60px 90px -40px rgba(0, 0, 0, .9); transition: transform .9s var(--ease), box-shadow .9s; }
.jr-post > * { transition: opacity .7s var(--ease), transform .8s var(--ease); }
.jp-frame { position: absolute; inset: 3cqw; border: 2px dashed rgba(47, 125, 23, .55); border-radius: 14px; pointer-events: none; } .jr-post:not(.has-1) .jp-frame { opacity: 0; } .jr-post.has-2 .jp-frame { opacity: .35; } .jr-post.has-3 .jp-frame, .jr-post.has-4 .jp-frame, .jr-post.has-5 .jp-frame { opacity: 0; }
.jp-head { display: flex; align-items: center; gap: 3cqw; opacity: 0; transform: translateY(8px); } .jp-head .av img { width: 10cqw; height: 10cqw; } .jp-head b { display: block; font-size: 4.4cqw; } .jp-head small { font-size: 3.2cqw; color: #78847d; }
.jp-tags { display: flex; flex-wrap: wrap; gap: 2cqw; opacity: 0; transform: translateY(8px); } .jp-tags em { font-style: normal; font-size: 3.4cqw; font-weight: 700; padding: 1.4cqw 3.4cqw; border-radius: 99px; background: rgba(126, 217, 87, .22); color: #1d5a0a; }
.jp-media { position: relative; flex: 1; border-radius: 3cqw; overflow: hidden; display: flex; align-items: flex-end; padding: 5cqw; background: #eef2ee; } .jp-media i { position: absolute; border-radius: 50%; opacity: 0; transform: scale(.4); transition: opacity .7s var(--ease), transform .9s var(--ease); } .jp-media .m1 { right: -10cqw; top: -10cqw; width: 46cqw; height: 46cqw; background: var(--green); } .jp-media .m2 { left: -8cqw; bottom: 10cqw; width: 26cqw; height: 26cqw; background: #151A18; } .jp-media .m3 { right: 14cqw; bottom: 14cqw; width: 12cqw; height: 12cqw; background: #fff; border: 1px solid rgba(8, 8, 8, .2); }
.jp-media b { position: relative; font-size: 8cqw; line-height: 1.05; letter-spacing: -.03em; font-weight: 800; opacity: 0; transform: translateY(10px); transition: opacity .7s .2s, transform .8s .2s; }
.jp-cap { display: grid; gap: 2cqw; opacity: 0; } .jp-cap i { display: block; height: 2cqw; border-radius: 9cqw; background: #d9dfda; transform-origin: left; transform: scaleX(0); transition: transform .8s var(--ease); } .jp-cap i:nth-child(2) { width: 80%; } .jp-cap i:nth-child(3) { width: 52%; }
.jp-polish { position: absolute; inset: 0; border-radius: 20px; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 35%, rgba(126, 217, 87, .25) 50%, transparent 65%); box-shadow: inset 0 0 0 2px rgba(126, 217, 87, .8); }
.jp-sched { position: absolute; left: 50%; bottom: -6cqw; translate: -50% 0; display: grid; gap: 1cqw; padding: 4cqw 6cqw; border-radius: 4cqw; text-align: center; background: #080808; color: #fff; opacity: 0; transform: translateY(14px) scale(.9); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .8); } .jp-sched b { font-size: 4.6cqw; color: var(--green); } .jp-sched small { font-size: 3cqw; color: var(--mute-d); }
.jr-post.has-2 .jp-head, .jr-post.has-2 .jp-tags, .jr-post.has-3 .jp-head, .jr-post.has-4 .jp-head, .jr-post.has-5 .jp-head { opacity: 1; transform: none; } .jr-post.has-3 .jp-tags, .jr-post.has-4 .jp-tags, .jr-post.has-5 .jp-tags { opacity: 1; transform: none; }
.jr-post.has-3 .jp-media i, .jr-post.has-4 .jp-media i, .jr-post.has-5 .jp-media i { opacity: 1; transform: none; } .jr-post.has-3 .jp-media b, .jr-post.has-4 .jp-media b, .jr-post.has-5 .jp-media b { opacity: 1; transform: none; }
.jr-post.has-3 .jp-cap, .jr-post.has-4 .jp-cap, .jr-post.has-5 .jp-cap { opacity: 1; } .jr-post.has-4 .jp-cap i, .jr-post.has-5 .jp-cap i { transform: none; } .jr-post.has-3 .jp-cap i:nth-child(1) { transform: none; }
.jr-post.has-4 .jp-polish, .jr-post.has-5 .jp-polish { opacity: 1; animation: smShine 2.4s .2s ease-out both; } @keyframes smShine { from { background-position: -140% 0; } to { background-position: 140% 0; } }
.jr-post.has-5 { transform: scale(.9) translateY(-6%); box-shadow: 0 60px 90px -40px rgba(126, 217, 87, .35); } .jr-post.has-5 .jp-sched { opacity: 1; transform: none; transition-delay: .3s; }

/* ============ 7. WHY ============ */
.sm-why { background: #080808; }
.sm-why-frames { opacity: .55; position: absolute; right: -6%; top: 6%; width: min(52vw, 640px); aspect-ratio: 1; pointer-events: none; } .sm-why-frames i { position: absolute; inset: 0; border: 1px solid rgba(126, 217, 87, .28); border-radius: 22px; } .sm-why-frames i:nth-child(1) { transform: rotate(8deg) scale(.96); } .sm-why-frames i:nth-child(2) { transform: rotate(-4deg) scale(.78); border-color: rgba(126, 217, 87, .4); } .sm-why-frames i:nth-child(3) { transform: rotate(2deg) scale(.58); border-color: rgba(126, 217, 87, .55); animation: smPulseB 6s ease-in-out infinite; } @keyframes smPulseB { 50% { transform: rotate(2deg) scale(.62); } }
.sm-why .wrap { position: relative; } .sm-big { font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: .98; letter-spacing: -.05em; font-weight: 800; color: #fff; max-width: 16ch; } .sm-big span { color: var(--green); }
.sm-why-list { list-style: none; margin: clamp(34px, 5vw, 64px) 0 0; padding: 0; }
.sm-why-list li { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: baseline; padding: clamp(20px, 3vw, 32px) 0; opacity: .35; transform: translateX(-16px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .sm-why-list li.in { opacity: 1; transform: none; }
.wy-n { font-size: 1.1rem; font-weight: 800; letter-spacing: .1em; color: var(--green); } .sm-why .sm-big { font-size: clamp(1.7rem, 3.6vw, 3rem); max-width: 20ch; } .sm-why-list h3 { font-size: clamp(1.15rem, 2.2vw, 1.8rem); letter-spacing: -.045em; line-height: 1.05; color: #fff; } .sm-why-list p { margin: 0; color: var(--mute-d); max-width: 36ch; }
.wy-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, .12); } .wy-line::after { content: ''; position: absolute; inset: 0; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) .2s; } .sm-why-list li.in .wy-line::after { transform: scaleX(1); }

/* ============ 8. CAMPAIGN ============ */
.sm-camp { background: #fff; }
.camp-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(26px, 5vw, 70px); align-items: center; }
.camp-steps { display: grid; gap: 10px; } .camp-steps button { display: grid; gap: 2px; text-align: left; padding: 18px 22px; border-radius: 18px; background: #f3f6f3; border: 1px solid var(--line-l); transition: all .45s var(--ease); } .camp-steps small { font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--green-ink); } .camp-steps b { font-size: 1.3rem; letter-spacing: -.03em; }
.camp-steps button:hover { transform: translateX(5px); } .camp-steps button[aria-selected="true"] { background: #080808; color: #fff; border-color: #080808; box-shadow: 0 26px 44px -28px rgba(8, 8, 8, .7); } .camp-steps button[aria-selected="true"] small { color: var(--green); }
.camp-note { margin: 8px 0 0; color: var(--mute-l); font-size: 1.04rem; max-width: 40ch; }
.camp-stage { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); gap: clamp(14px, 2.4vw, 28px); align-items: center; } .camp-stage figure { margin: 0; container-type: inline-size; } .camp-stage figcaption { margin-top: 10px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mute-l); }
.cmp { position: relative; aspect-ratio: 1 / 1.08; border-radius: 4cqw; padding: 8cqw; display: flex; flex-direction: column; justify-content: flex-end; gap: 2.6cqw; overflow: hidden; background: #eceff0; color: #4d5852; box-shadow: 0 40px 70px -40px rgba(8, 8, 8, .55); transition: background .8s var(--ease), color .6s; }
.cmp b { font-family: Arial, sans-serif; font-size: 8cqw; line-height: 1.1; font-weight: 700; transition: font-size .6s var(--ease); } .cmp small, .cmp .cmp-sub { font-family: Arial, sans-serif; font-size: 4.2cqw; opacity: .8; } .cmp-logo, .cmp-kick, .cmp-bar, .cmp-btn { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .7s var(--ease); } .cmp-logo { position: absolute; left: 8cqw; top: 8cqw; } .cmp-logo img { display: block; width: 36cqw; height: auto; border-radius: 2cqw; background: #fff; padding: 1cqw 2cqw; } .cmp-kick { font-size: 3.6cqw; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: #2f7d17; } .cmp-bar { width: 22cqw; height: 1.4cqw; background: var(--green); border-radius: 9cqw; } .cmp-btn { align-self: flex-start; font-style: normal; font-weight: 800; font-size: 4cqw; padding: 2.4cqw 6cqw; border-radius: 9cqw; background: var(--green); color: #07120a; }
.camp-stage[data-ph="1"] .camp-after .cmp { background: #f6f8f6; color: #16201b; } .camp-stage[data-ph="1"] .camp-after .cmp b { font-family: Georgia, serif; font-size: 10.5cqw; font-weight: 700; color: #080808; letter-spacing: -.02em; } .camp-stage[data-ph="1"] .camp-after .cmp-kick, .camp-stage[data-ph="1"] .camp-after .cmp-bar { opacity: 1; transform: none; } .camp-stage[data-ph="1"] .camp-after .cmp .cmp-sub { font-family: 'Segoe UI', system-ui, sans-serif; }
.camp-stage[data-ph="2"] .camp-after .cmp { background: radial-gradient(90% 60% at 100% 0%, rgba(126, 217, 87, .5), transparent 60%), linear-gradient(160deg, #080808, #151A18); color: #fff; } .camp-stage[data-ph="2"] .camp-after .cmp b { font-family: Georgia, serif; font-size: 12cqw; color: #fff; letter-spacing: -.03em; } .camp-stage[data-ph="2"] .camp-after .cmp-kick { color: var(--green); } .camp-stage[data-ph="2"] .camp-after .cmp-logo, .camp-stage[data-ph="2"] .camp-after .cmp-kick, .camp-stage[data-ph="2"] .camp-after .cmp-bar, .camp-stage[data-ph="2"] .camp-after .cmp-btn { opacity: 1; transform: none; } .camp-stage[data-ph="2"] .camp-after .cmp .cmp-sub { font-family: 'Segoe UI', system-ui, sans-serif; opacity: .85; }
.cmp-p1 { box-shadow: 0 30px 50px -36px rgba(8, 8, 8, .5); } .cmp-p1 b { font-size: 9cqw; } .cmp-p1 small { font-size: 5cqw; }
.sm-fine { margin: 18px 0 0; font-size: .78rem; letter-spacing: .04em; color: var(--mute-l); }

/* ============ contact panel ============ */
.sm-contact-panel { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(28px, 5vw, 60px); border-radius: 28px; background: linear-gradient(135deg, #fff 0%, var(--green-soft) 100%); border: 1px solid rgba(47, 125, 23, .22); box-shadow: 0 40px 80px -50px rgba(27, 110, 0, .45); overflow: hidden; }
.sm-contact-panel::before { content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(126, 217, 87, .35), transparent); pointer-events: none; }
.sm-contact-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .sm-contact-copy .display { margin: 0; } .sm-contact-copy > p:not(.eyebrow) { margin: 0; color: var(--mute-l); max-width: 52ch; }
.sm-contact-ways { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .sm-contact-ways a { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 18px; background: #fff; border: 1px solid rgba(8, 8, 8, .08); transition: transform .35s, border-color .35s, box-shadow .35s; min-width: 0; } .sm-contact-ways a:hover { transform: translateX(6px); border-color: rgba(47, 125, 23, .5); box-shadow: 0 18px 36px -24px rgba(27, 110, 0, .5); }
.sm-cw-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: #080808; } .sm-cw-ic svg { width: 20px; height: 20px; } .sm-contact-ways small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute-l); } .sm-contact-ways strong { display: block; overflow-wrap: anywhere; color: #080808; }

/* ============ responsive ============ */
@media (max-width: 1100px) {
  .sm-hero { min-height: 0; } .sm-hero-grid, .sm-intro-grid, .camp-grid, .sm-contact-panel { grid-template-columns: minmax(0, 1fr); }
  .sm-eco { width: min(100%, 480px); } .sm-orbit { position: relative; top: auto; width: min(100%, 340px); margin-bottom: 26px; }
  .sm-concept { opacity: 1; } .cn-n { color: rgba(126, 217, 87, .22); -webkit-text-stroke-color: var(--green-ink); } .cn-line::after { transform: scaleX(1); }
  .cc-body { grid-template-columns: minmax(0, 1fr); } .cc-side { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .cc-side .cc-t { grid-column: auto; } .cc-plats { grid-template-columns: repeat(2, 1fr); } .cc-info { grid-template-columns: repeat(3, 1fr); }
  .sm-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: auto; } .sm-bento > .sb { grid-column: span 3 !important; grid-row: auto !important; } .sb-strategy { grid-column: 1 / -1 !important; }
  .cal-main { grid-template-columns: minmax(0, 1fr); } .cal-detail { position: static; }
  .sm-why-list li { grid-template-columns: 50px minmax(0, 1fr); } .sm-why-list p { grid-column: 2; } .sm-why-frames { opacity: .5; }
  .sm-pin-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: center; } .jr-copy .display { font-size: 1.3rem; margin-bottom: 14px; } .jr-steps { min-height: 150px; } .js-n { font-size: 3rem; } .jr-step h3 { margin: 6px 0 4px; font-size: 1.4rem; } .jr-step p { font-size: .96rem; } .jr-post { width: min(60vw, 250px); } .jr-rail { display: none; }
}
@media (max-width: 720px) {
  .cc-side { grid-template-columns: minmax(0, 1fr); } .cc-info { grid-template-columns: minmax(0, 1fr); } .cc-stage { min-height: 0; padding: 18px 12px; } .cc-body { padding: 14px; gap: 14px; }
  .cc-plats { grid-template-columns: repeat(2, 1fr); } .cc-plats button { padding: 10px 12px; } .cc-plats small { display: none; }
  .sm-bento { display: flex !important; flex-wrap: nowrap; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; scrollbar-width: none; cursor: grab; align-items: stretch; margin-inline: calc(-1 * clamp(20px, 4vw, 48px)); padding: 6px clamp(20px, 4vw, 48px) 22px; scroll-padding-inline: clamp(20px, 4vw, 48px); }
  .sm-bento::-webkit-scrollbar { display: none; } .sm-bento > .sb { flex: 0 0 min(80%, 310px) !important; grid-column: auto !important; min-height: 270px; scroll-snap-align: start; scroll-snap-stop: always; } .sm-bento.dragging { cursor: grabbing; user-select: none; } .sm-bento.dragging, .sm-bento.gliding { scroll-snap-type: none !important; }
  .cal-dow, .cal-grid { display: none; } .cal-agenda { display: grid; } .cal-nav b { min-width: 7.5em; font-size: 1rem; } .cal-filter button { padding: 8px 12px; font-size: .8rem; }
  .cal-agenda li button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px; background: #f6f8f6; border: 1px solid var(--line-l); } .cal-agenda li button.sel { border-color: var(--green-ink); box-shadow: 0 0 0 2px rgba(126, 217, 87, .45); } .ag-d { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #080808; color: #fff; font-weight: 800; } .ag-t b { display: block; font-size: .94rem; } .ag-t small { color: var(--mute-l); font-size: .76rem; }
  .camp-stage { grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); gap: 12px; }
  .sm-why-list li { padding: 18px 0; } .sm-contact-panel { border-radius: 22px; } .sm-contact-copy .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; } .sm-contact-ways strong { overflow-wrap: break-word; font-size: .93rem; } .sm-contact-ways a { padding: 14px 16px; gap: 12px; }
  .hp-eng { width: 38px; height: 38px; } .hp-eng .g { width: 18px; height: 18px; } .sm-eco { margin-top: 14px; } .eco-note { left: 4%; }
  .jr-post { width: min(54vw, 210px); } .sm-journey { height: 440vh; }
}
@media (prefers-reduced-motion: reduce) {
  .eco-3d, .sm-draw, .eco-net circle, .hp-eng, .a-copy em, .sm-why-frames i { animation: none !important; }
  .eco-net path { stroke-dashoffset: 0 !important; }
  .sm-concept, .sm-why-list li { opacity: 1 !important; transform: none !important; } .cn-line::after, .wy-line::after { transform: scaleX(1) !important; }
  .jr-step { transition: none; } .jr-post, .jr-post > *, .jp-media i, .jp-media b, .jp-cap i { transition: none; } .jp-polish { animation: none !important; }
  .cc-post, .cc-post * { transition: none !important; animation: none !important; }
}
.smp { translate: calc(var(--mx, 0) * var(--d, 1) * 14px) calc(var(--my, 0) * var(--d, 1) * 10px); transition: translate .4s var(--ease); } .hp-ig { --d: .6; } .hp-li { --d: .4; } .hp-fb { --d: 1; } .hp-yt { --d: 1.4; } .hp-plan { --d: .8; } .hp-camp { --d: 1.8; }
.smp { height: max-content; } .hp-camp { height: auto; }
@media (max-width: 720px) {
  .camp-stage { grid-template-columns: minmax(0, 1fr); } .camp-before { display: none; }
  .cc-post { --pw: 100% !important; } .cc-post[data-p] { width: 100%; }
  .sm-journey { height: 420vh; } .sm-pin { padding-top: calc(var(--header-h) + 6px); align-items: flex-start; } .sm-pin-grid { padding-top: 10px; }
  .jr-post { width: min(52vw, 200px); margin-inline: auto; }
  .sm-big { font-size: clamp(2rem, 9vw, 2.8rem); } .sm-why-frames { display: none; }
  .hp-fb, .hp-plan { display: none; } .hp-li { width: 60%; } .hp-ig { width: 40%; } .hp-yt { top: 50%; left: 8%; width: 52%; } .hp-camp { width: 26%; }
  .sm-eco { aspect-ratio: 1 / .95; } .hp-eng.e2, .hp-eng.e3 { display: none; }
}
.camp-before .cmp { background: #eceff0; color: #4d5852; } .camp-before .cmp b { font-family: Arial, sans-serif; font-size: 9cqw; color: #4d5852; }
.camp-before .cmp b { font-size: 8.4cqw; } .camp-before .cmp small { font-size: 5cqw; } .camp-before .cmp { padding: 7cqw; }
@media (max-width: 720px) {
  .camp-stage .camp-after { max-width: 300px; margin-inline: auto; width: 100%; }
  .eco-3d { transform: rotateY(-6deg) rotateX(3deg); } .smp.hp-camp { left: 3%; } .smp.hp-li { right: 2%; } .smp.hp-ig { left: 3%; }
  .orb-node b { font-size: .64rem; } .orb-node i { font-size: .74rem; }
}
@media (max-width: 720px) { .smp.hp-camp { left: 7%; width: 24%; } .smp.hp-yt { left: 14%; width: 50%; } .smp.hp-ig { left: 6%; } }