
/* /cimc_website_landing/static/src/css/landing.css */
:root{--bg: #edf2f8; --ink: #13263d; --muted: #4c5f75; --card: #ffffff; --line: rgba(19, 38, 61, 0.2); --rail: rgba(19, 38, 61, 0.08); --brand: #0048da; --brand-dark: #0038ae; --accent: #01cdb2; --shadow: 0 14px 28px rgba(14, 32, 51, 0.1); --section-gap: 2.35rem; --module-gap: 0.75rem;}*{box-sizing: border-box;}html{scroll-behavior: smooth;}.cimc-pack-layout{margin: 0; color: var(--ink); font-family: "Public Sans", "Segoe UI", sans-serif; line-height: 1.45; background: repeating-linear-gradient(90deg, transparent 0 90px, rgba(19, 38, 61, 0.028) 90px 92px), linear-gradient(180deg, #f2f6fb 0%, #edf2f8 100%);}.container{width: min(1180px, 94vw); margin: 0 auto;}body.cimc-rail-open{overflow: hidden;}.section{padding: var(--section-gap) 0;}.section .container, .hero .container{position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.92)); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; box-shadow: var(--shadow);}.section .container::before, .section .container::after, .hero .container::before, .hero .container::after{content: ""; position: absolute; width: 18px; height: 18px; border-color: var(--brand); pointer-events: none;}.section .container::before, .hero .container::before{top: -1px; left: -1px; border-top: 3px solid; border-left: 3px solid; border-top-left-radius: 7px;}.section .container::after, .hero .container::after{right: -1px; bottom: -1px; border-right: 3px solid var(--accent); border-bottom: 3px solid var(--accent); border-bottom-right-radius: 7px;}.site-header{position: sticky; top: 0; z-index: 30; backdrop-filter: blur(10px); background: rgba(237, 242, 248, 0.84); border-bottom: 1px solid rgba(19, 38, 61, 0.12);}.nav-wrap{min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 1rem;}.logo{text-decoration: none; color: var(--brand); font-family: "Archivo", sans-serif; font-size: 0.98rem; font-weight: 700; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 0.45rem;}.nav-logo{width: 84px; height: auto; display: block;}nav{display: flex; gap: 1rem;}nav a{text-decoration: none; color: var(--ink); font-weight: 600; font-size: 0.95rem;}.scroll-progress{height: 2px; width: 100%; background: rgba(19, 38, 61, 0.08); border-top: 1px solid rgba(19, 38, 61, 0.06);}.scroll-progress span{display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--brand)); transition: width 80ms linear;}.hero{padding: calc(var(--section-gap) + 0.8rem) 0 var(--section-gap);}.hero-grid{display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.9rem; align-items: start;}.tag{display: inline-block; margin: 0 0 0.6rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; color: var(--brand-dark);}h1, h2, h3{margin: 0 0 0.6rem; line-height: 1.15; font-family: "Archivo", sans-serif;}h1{font-size: clamp(1.72rem, 4.1vw, 3rem); max-width: 15ch;}h2{font-size: clamp(1.2rem, 2.7vw, 2rem);}h3{font-size: 0.98rem;}.lead{color: var(--muted); max-width: 70ch;}.ink-mark{position: relative; display: inline; z-index: 0;}.ink-mark::after{content: ""; position: absolute; left: -0.08em; right: -0.08em; bottom: 0.08em; height: 0.52em; z-index: -1; background: linear-gradient(90deg, rgba(25, 199, 191, 0.24), rgba(11, 79, 204, 0.2)); border-radius: 0.16em; transform-origin: left center; transform: scaleX(0); opacity: 0.9; transition: transform 520ms ease;}.ink-mark.is-marked::after{transform: scaleX(1);}.hero-actions{display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 0.95rem;}.cta{display: inline-block; border: 0; border-radius: 999px; padding: 0.72rem 1.05rem; background: var(--brand); color: #fff; text-decoration: none; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: transform 180ms ease, background-color 180ms ease;}.cta:hover{background: var(--brand-dark); transform: translateY(-2px);}.cta.ghost{background: transparent; color: var(--ink); border: 1px solid var(--line);}.metrics{margin-top: 1rem; display: grid; gap: var(--module-gap); grid-template-columns: repeat(3, minmax(0, 1fr));}.metrics article, .hero-card, .card, .flow article, .scene-card, .faq-item, .product-card, .macro-chain article, .system-map article{border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 2px 0 rgba(11, 79, 204, 0.07);}.metrics article{padding: 0.72rem;}.metrics strong{display: block; font-family: "Archivo", sans-serif; color: var(--brand-dark);}.metrics span{color: var(--muted); font-size: 0.86rem;}.hero-card, .card, .scene-card, .product-card{padding: 0.9rem;}.hero-card ul, .scene-bullets, .product-card ul{margin: 0.45rem 0 0; padding-left: 1.05rem;}.hero-card li, .scene-bullets li, .product-card li{margin: 0.3rem 0;}.cards, .products-grid{display: grid; gap: var(--module-gap); margin-top: 0.8rem;}.cards{grid-template-columns: repeat(2, minmax(0, 1fr));}.cards-3, .products-grid{grid-template-columns: repeat(3, minmax(0, 1fr));}.results-grid{margin-top: 0.8rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--module-gap);}.result-card{border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 0.82rem;}.scenario-grid{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--module-gap); margin-top: 0.8rem;}.scenario-card{border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 2px 0 rgba(11, 79, 204, 0.07); padding: 0.85rem 0.9rem;}.scenario-head{display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem;}.scenario-head h3{margin: 0;}.scenario-state{display: inline-block; font-size: 0.72rem; font-weight: 700; color: var(--brand-dark); border: 1px solid rgba(11, 79, 204, 0.35); background: rgba(11, 79, 204, 0.08); border-radius: 999px; padding: 0.15rem 0.5rem; white-space: nowrap;}.scenario-card p{margin: 0 0 0.45rem; color: var(--muted);}.scenario-card ul{margin: 0; padding-left: 1.05rem;}.scenario-card li{margin: 0.25rem 0;}.case-visual-layout{margin-top: 0.8rem; display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--module-gap); align-items: start;}.case-stage{min-height: 420px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(130deg, rgba(0, 72, 218, 0.16), rgba(1, 205, 178, 0.14)), repeating-linear-gradient(45deg, rgba(19, 38, 61, 0.06) 0 8px, transparent 8px 16px); position: relative; overflow: hidden;}.case-stage::before{content: ""; position: absolute; inset: 0; border: 1px dashed rgba(255, 255, 255, 0.45); border-radius: 12px; margin: 0.9rem;}.case-stage-overlay{position: absolute; left: 1rem; right: 1rem; bottom: 1rem; background: rgba(10, 22, 38, 0.62); color: #fff; border-radius: 8px; padding: 0.55rem 0.65rem;}.case-stage-overlay strong{display: block; font-family: "Archivo", sans-serif;}.case-stage-overlay span{font-size: 0.86rem; opacity: 0.92;}.case-thumbs{margin-top: 0.6rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem;}.case-thumb{min-height: 92px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.96); display: grid; place-items: center; text-align: center; padding: 0.4rem; color: var(--muted); font-size: 0.82rem;}.case-meta{border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 0.82rem;}.case-meta ul{margin: 0.5rem 0 0; padding-left: 1.05rem;}.case-meta li{margin: 0.3rem 0;}.product-badge{display: inline-block; margin-bottom: 0.4rem; padding: 0.2rem 0.45rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: var(--brand-dark); background: rgba(25, 199, 191, 0.16); border: 1px solid rgba(25, 199, 191, 0.35);}.card p, .outcome, .contact-direct, .faq-item p, footer, .small, .macro-chain span{color: var(--muted);}.panel{background: transparent;}.flow{display: grid; gap: var(--module-gap); grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0.8rem;}.flow article{padding: 0.72rem; text-align: left;}.outcome{margin: 0.75rem 0 0; font-weight: 600;}.showcase-head{margin-bottom: 0.75rem;}.macro-chain{display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.55rem; margin: 0.7rem 0;}.macro-chain article{padding: 0.6rem; min-height: 92px; position: relative;}.macro-chain article strong{display: block; font-size: 0.9rem; color: var(--brand-dark); margin-bottom: 0.25rem;}.macro-chain article:not(:last-child)::after{content: ">"; position: absolute; right: -0.46rem; top: 50%; transform: translateY(-50%); color: var(--brand); font-weight: 700;}.scene-placeholder{min-height: 220px; border: 1px dashed rgba(11, 79, 204, 0.42); border-radius: 10px; display: grid; place-content: center; text-align: center; background: repeating-linear-gradient(0deg, rgba(11, 79, 204, 0.035) 0 14px, transparent 14px 28px), linear-gradient(160deg, rgba(25, 199, 191, 0.11), rgba(11, 79, 204, 0.07)); margin-bottom: 0.75rem;}.scene-large{min-height: 430px;}.scene-placeholder p{margin: 0; font-weight: 700; font-family: "Archivo", sans-serif; color: var(--brand-dark);}.scene-placeholder span{color: var(--muted); font-size: 0.86rem;}.system-map{display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.55rem; margin: 0 0 0.75rem;}.system-map article{padding: 0.48rem; text-align: center;}.system-map strong{display: block; font-family: "Archivo", sans-serif; font-size: 1rem; color: var(--brand-dark);}.system-map span{font-size: 0.8rem; color: var(--muted);}.scenario-copy{color: var(--muted); margin-top: 0.6rem; font-weight: 600;}.faq{border-top: 1px solid rgba(19, 38, 61, 0.12); border-bottom: 1px solid rgba(19, 38, 61, 0.12);}.faq-item{padding: 0.85rem; margin-top: 0.6rem;}.faq-item summary{cursor: pointer; font-family: "Archivo", sans-serif; font-weight: 700;}.download-box{margin: 0.6rem 0 0.8rem; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.95);}.download-box p{margin: 0; font-weight: 700;}.brochure-actions{width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem;}.brochure-actions .cta{width: 100%; text-align: center;}.contact-form{margin-top: 0.7rem; display: grid; gap: 0.65rem; grid-template-columns: repeat(2, minmax(0, 1fr));}.contact-form label{display: flex; flex-direction: column; gap: 0.27rem; font-weight: 700;}.contact-form input, .contact-form textarea, .contact-form select{width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 0.62rem 0.68rem; font: inherit;}.full{grid-column: 1 / -1;}.contact-direct{margin-top: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.7rem 1.3rem;}.contact-direct a, .footer-wrap a{color: var(--brand-dark); text-decoration: none; font-weight: 700;}.site-footer{padding: 1.1rem 0 1.7rem; border-top: 1px solid rgba(19, 38, 61, 0.1);}.footer-brandline{max-width: 520px;}.footer-slogan{width: 100%; height: auto; display: block;}.footer-wrap{display: flex; justify-content: space-between; align-items: center; gap: 1rem;}.reveal{opacity: 0; transform: translateY(10px); transition: opacity 400ms ease, transform 400ms ease;}.reveal.visible{opacity: 1; transform: translateY(0);}@media (prefers-reduced-motion: reduce){*{animation: none !important; transition: none !important; scroll-behavior: auto !important;}.ink-mark::after{transform: scaleX(1);}}.quick-contact{position: fixed; right: 14px; bottom: 16px; z-index: 65;}.quick-contact-toggle{border: 1px solid rgba(11, 79, 204, 0.35); border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--brand-dark); padding: 0.5rem 0.82rem; font: inherit; font-weight: 700;}.quick-contact-panel{display: none; margin-top: 0.5rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.97); overflow: hidden;}.quick-contact-panel.open{display: grid;}.quick-contact-panel a{padding: 0.5rem 0.72rem; text-decoration: none; color: var(--ink); border-bottom: 1px solid rgba(19, 38, 61, 0.08); font-size: 0.86rem;}.quick-contact-panel a:last-child{border-bottom: 0;}.insights-head{margin-top: 0.55rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center;}.insights-grid{margin-top: 0.8rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--module-gap);}.insight-card{border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 0.82rem;}.insight-date{margin: 0 0 0.3rem; font-size: 0.8rem; font-weight: 700; color: var(--brand-dark);}.partner-note{margin-top: 0.8rem; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(135deg, rgba(0, 72, 218, 0.07), rgba(1, 205, 178, 0.08)); padding: 0.82rem;}.partner-note p{margin-bottom: 0.75rem; color: var(--muted);}.mobile-section-rail, .mobile-rail-panel{display: none;}@media (max-width: 1040px){nav{display: none;}.hero-grid, .cards, .cards-3, .products-grid, .scenario-grid, .case-visual-layout, .case-thumbs, .results-grid, .flow, .macro-chain, .system-map, .metrics, .contact-form{grid-template-columns: 1fr;}.macro-chain article::after{display: none;}.logo span{display: none;}.scene-large{min-height: 310px;}.download-box, .footer-wrap{flex-direction: column; align-items: flex-start;}.mobile-section-rail{position: fixed; right: 8px; top: 46%; transform: translateY(-50%) translateX(14px); opacity: 0; z-index: 60; display: grid; gap: 0.45rem; transition: opacity 220ms ease, transform 220ms ease; pointer-events: none;}.mobile-section-rail.visible{opacity: 1; transform: translateY(-50%) translateX(0); pointer-events: auto;}.rail-pill{border: 0; border-radius: 999px; background: var(--brand); color: #fff; font-family: "Archivo", sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.01em; padding: 0.34rem 0.4rem; width: 88px; text-align: center;}.rail-dots{border: 0; border-radius: 0; background: transparent; padding: 0; display: grid; gap: 0.34rem; justify-items: center;}.rail-dot{width: 7px; height: 7px; border-radius: 50%; background: rgba(11, 79, 204, 0.36);}.rail-dot.active{background: var(--brand); transform: scale(1.2);}.mobile-rail-panel{position: fixed; inset: 0; z-index: 70; background: rgba(8, 14, 22, 0.62); padding: 1rem;}.mobile-rail-panel.open{display: grid; place-items: center;}.mobile-rail-sheet{width: min(92vw, 560px); max-height: 82vh; overflow: auto; background: transparent; border: 0; border-radius: 0; padding: 0.8rem;}.mobile-rail-panel-head{display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}.mobile-rail-panel-head strong{font-family: "Archivo", sans-serif; color: #fff;}.mobile-rail-panel-head button{border: 0; background: rgba(255, 255, 255, 0.16); border-radius: 999px; padding: 0.3rem 0.56rem; font-size: 0.78rem; color: #fff;}.mobile-rail-links{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem;}.mobile-rail-links a{text-decoration: none; border: 0; border-radius: 6px; padding: 0.35rem 0.4rem; color: #dce8ff; background: rgba(255, 255, 255, 0.1); text-align: center; font-size: 0.78rem; font-weight: 600;}.mobile-rail-links a.active{color: #fff; background: rgba(11, 79, 204, 0.75);}#mobile-rail-current{display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}.insights-grid, .brochure-actions{grid-template-columns: 1fr;}}