/* Shared language */
.section-space { padding: 150px 0; }
.section-dark { background: var(--navy); color: #fff; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .11em; line-height: 1.2; text-transform: uppercase; }
.eyebrow > span { display: inline-block; width: 20px; height: 1px; background: currentColor; }
.eyebrow.light { color: rgba(255,255,255,.58); }
.display-title { max-width: 830px; margin: 0; color: var(--ink); font-size: clamp(43px, 5vw, 76px); font-weight: 700; letter-spacing: -.065em; line-height: .98; }
.display-title.light, .light { color: #fff; }
.display-title em, .hero-title em, .case-statement em, .closing-title em { color: var(--blue-bright); font-style: normal; }
.section-lead { max-width: 430px; margin: 25px 0 0; color: #536072; font-size: 17px; line-height: 1.65; }
.section-lead.light { color: rgba(255,255,255,.64); }
.text-link { display: inline-flex; gap: 13px; align-items: center; padding-bottom: 5px; border-bottom: 1px solid var(--ink); font-size: 13px; font-weight: 800; transition: gap .25s var(--ease); }
.text-link:hover { gap: 20px; }
.text-link.light { border-color: #fff; }
.button { display: inline-flex; align-items: center; justify-content: space-between; min-height: 58px; gap: 30px; padding: 0 21px; border: 1px solid transparent; font-size: 13px; font-weight: 800; transition: transform .3s var(--ease), background .3s var(--ease); }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--blue); color: #fff; }
.button-primary:hover { background: #1b52e9; }

/* Navigation */
.site-header { position: absolute; z-index: 20; top: 0; left: 0; width: 100%; height: 90px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(48px, calc((100vw - 1240px)/2)); color: #fff; transition: background .3s, height .3s, color .3s; }
.site-header.is-scrolled { position: fixed; height: 70px; background: rgba(3,17,38,.94); backdrop-filter: blur(12px); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; letter-spacing: .085em; }
.brand img { width: 24px; height: 24px; object-fit: contain; }
.brand svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.site-nav { display: flex; gap: 31px; margin-left: auto; margin-right: 42px; }
.site-nav a { position: relative; color: rgba(255,255,255,.75); font-size: 12px; font-weight: 700; }
.site-nav a::after { content: ""; position: absolute; right: 0; bottom: -6px; left: 0; height: 1px; background: #fff; transform: scaleX(0); transform-origin: right; transition: transform .25s var(--ease); }
.site-nav a:hover { color: #fff; }.site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header-cta { display: flex; align-items: center; gap: 11px; font-size: 12px; font-weight: 800; }.header-cta span { color: var(--blue-bright); font-size: 18px; }
.menu-toggle, .mobile-nav { display: none; }

/* Hero */
.hero { position: relative; min-height: min(855px, 100vh); overflow: hidden; isolation: isolate; display: flex; align-items: flex-end; padding: 160px 0 86px; }
.hero-grid { position: absolute; z-index: -2; inset: 0; opacity: .34; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 90px 90px; mask-image: linear-gradient(to bottom, #000, transparent 94%); }
.hero-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(.3px); }
.orb-one { width: min(66vw, 920px); height: min(66vw, 920px); top: -35%; right: -9%; background: radial-gradient(circle at 35% 45%, rgba(66,107,255,.53), rgba(18,53,134,.14) 42%, transparent 70%); animation: drift 9s ease-in-out infinite; }
.orb-two { width: 370px; height: 370px; right: 15%; bottom: -33%; border: 1px solid rgba(92,129,255,.26); box-shadow: 0 0 0 70px rgba(70,105,226,.045), 0 0 0 145px rgba(70,105,226,.025); }
.hero-content { width: var(--container); }
.hero-title { max-width: 890px; margin: 0; font-size: clamp(54px, 7.5vw, 117px); font-weight: 700; letter-spacing: -.082em; line-height: .88; }
.hero-grid-sub { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: flex-start; margin-top: 52px; width: 100%; }
.hero-sub-left { max-width: 520px; }
.hero-intro { margin: 0 0 28px; color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.7; font-weight: 400; }
.hero-actions { display: flex; align-items: center; gap: 24px; }
.hero-actions .button { min-width: 220px; }

/* Elevated Ecosystem Card */
.hero-system-card { padding: 24px 28px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); border-radius: 4px; box-shadow: 0 20px 40px rgba(0,0,0,.25); }
.system-card-header { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 20px; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #59d3aa; box-shadow: 0 0 10px #59d3aa; animation: pulse 2s infinite; }
.system-card-title { color: rgba(255,255,255,.85); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.system-status { margin-left: auto; color: #59d3aa; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: rgba(89,211,170,.12); padding: 3px 8px; border-radius: 20px; }
.system-flow-nodes { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.flow-step { text-align: center; }
.step-num { display: block; color: var(--blue-bright); font-size: 9px; font-weight: 800; }
.step-text { display: block; margin-top: 4px; color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.flow-connector { flex: 1; min-width: 20px; height: 1px; background: rgba(255,255,255,.2); position: relative; overflow: hidden; }
.flow-connector i { position: absolute; inset: 0; width: 40%; background: var(--blue-bright); animation: travel 2s linear infinite; }

/* Trust */
.trust-strip { display: grid; grid-template-columns: max(230px, calc((100vw - 1240px)/2 + 225px)) 1fr; min-height: 116px; overflow: hidden; background: #fff; border-bottom: 1px solid var(--line); }
.trust-strip > p { display: flex; align-items: center; margin: 0; padding: 0 40px max(0px, calc((100vw - 1240px)/2)); color: var(--muted); border-right: 1px solid var(--line); font-size: 11px; font-weight: 700; line-height: 1.5; }
.marquee { display: flex; align-items: center; min-width: 0; overflow: hidden; }.marquee-track { display: flex; align-items: center; gap: 35px; width: max-content; animation: marquee 33s linear infinite; white-space: nowrap; }.marquee span { color: #667080; font-size: 18px; font-weight: 700; letter-spacing: -.04em; }.marquee b { color: var(--blue); font-size: 13px; }

/* Situations */
.situation-head { display: grid; grid-template-columns: .63fr 1.37fr; }.situation-head > div { max-width: 780px; }.situation-head .section-lead { margin-left: 32%; }
.situation-stories { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-top: 84px; }.story { position: relative; min-height: 525px; overflow: hidden; padding: 27px; border: 1px solid var(--line); background: #fff; }.story:nth-child(2) { transform: translateY(60px); }.story-number { color: #9ea5ae; font-size: 11px; font-weight: 800; }.story-copy { position: relative; z-index: 2; }.story-kicker { margin: 50px 0 12px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.story h3 { margin: 0; font-size: clamp(27px, 2.5vw, 38px); font-weight: 700; letter-spacing: -.065em; line-height: .97; }.story-copy > p:last-child { max-width: 280px; margin: 20px 0 0; color: #667080; font-size: 13px; line-height: 1.7; }.story-visual { position: absolute; }
.chat-stack { right: -9px; bottom: -15px; width: 270px; min-height: 210px; padding: 20px; background: #e9efff; transform: rotate(-5deg); }.chat-bubble { width: max-content; max-width: 180px; margin-bottom: 10px; padding: 9px 12px; font-size: 10px; font-weight: 600; }.chat-bubble.incoming { background: #fff; border-radius: 2px 10px 10px 10px; }.chat-bubble.outgoing { margin-left: auto; background: var(--blue); border-radius: 10px 2px 10px 10px; color: #fff; }.chat-bubble.delayed { opacity: .55; }.chat-auto { position: absolute; right: 18px; bottom: 16px; color: var(--blue); font-size: 9px; font-weight: 800; }
.calendar-board { right: -10px; bottom: -19px; width: 290px; height: 220px; padding: 23px; background: var(--navy); color: #fff; transform: rotate(7deg); }.calendar-bar { display: flex; gap: 5px; }.calendar-bar i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.4); }.calendar-days { display: flex; justify-content: space-between; margin: 19px 0 10px; color: rgba(255,255,255,.5); font-size: 8px; }.calendar-slots { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }.calendar-slots span { height: 32px; background: rgba(255,255,255,.12); }.calendar-slots span:nth-child(2),.calendar-slots span:nth-child(4) { background: var(--blue); }.calendar-note { position: absolute; right: 22px; bottom: 22px; padding: 7px 10px; background: #fff; color: var(--navy); font-size: 8px; font-weight: 800; }
.order-lines { right: -25px; bottom: 0; width: 300px; padding: 22px; background: #f3f0ea; transform: rotate(-4deg); }.order-lines div { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px dashed rgba(11,27,53,.2); color: #546072; font-size: 10px; font-weight: 700; }.order-lines b { color: #178762; font-size: 8px; letter-spacing: .08em; }.order-sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--blue); box-shadow: 0 0 15px var(--blue); animation: travel 3s linear infinite; }

/* Services */
.services { overflow: hidden; background: var(--navy); color: #fff; }.services-intro { display: flex; justify-content: space-between; align-items: flex-end; }.services-intro .section-lead { margin-bottom: 7px; }.services-list { margin-top: 92px; border-top: 1px solid var(--line-light); }.service-row { position: relative; display: grid; grid-template-columns: 8% 30% 1fr 28px; gap: 20px; align-items: center; min-height: 146px; border-bottom: 1px solid var(--line-light); transition: padding .35s var(--ease), background .35s; }.service-row:hover { padding: 0 25px; background: rgba(255,255,255,.045); }.service-index { color: rgba(255,255,255,.35); font-size: 11px; font-weight: 700; }.service-name h3 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -.055em; }.service-name span { color: var(--blue-bright); font-size: 10px; font-weight: 700; }.service-row > p { max-width: 430px; margin: 0; color: rgba(255,255,255,.6); font-size: 13px; line-height: 1.7; }.row-arrow { color: var(--blue-bright); font-size: 23px; transition: transform .3s var(--ease); }.service-row:hover .row-arrow { transform: translate(4px,-4px); }

/* Workflow */
.workflow { overflow: hidden; background: #eef2ff; }.workflow-heading { display: grid; grid-template-columns: .63fr 1.37fr; }.workflow-canvas { position: relative; height: auto; padding: 48px 0 36px; margin-top: 48px; border-top: 1px solid rgba(11,27,53,.2); border-bottom: 1px solid rgba(11,27,53,.2); }.flow-node { position: absolute; display: grid; width: 150px; min-height: 117px; padding: 15px; background: rgba(255,255,255,.75); border: 1px solid rgba(11,27,53,.15); backdrop-filter: blur(3px); }.flow-node strong { align-self: end; margin-top: 14px; font-size: 12px; }.flow-node small { margin-top: 2px; color: #687487; font-size: 9px; }.node-icon { color: var(--blue); font-size: 17px; font-weight: 800; }.node-customer { top: 91px; left: 0; }.node-whatsapp { top: 231px; left: 19%; }.node-ai { top: 103px; right: 22%; }.node-data { top: 332px; right: 0; }.node-notify { position: relative; top: 0; left: 0; width: 160px; background: var(--navy); color:#fff; }.node-notify small { color: rgba(255,255,255,.56); }.flow-core { position: absolute; top: 248px; left: 44%; display: grid; place-items: center; width: 180px; height: 180px; border-radius: 50%; background: var(--blue); color: #fff; text-align: center; box-shadow: 0 0 0 27px rgba(43,99,255,.11),0 0 0 55px rgba(43,99,255,.06); }.core-rings { position: absolute; inset: -76px; border: 1px dashed rgba(43,99,255,.45); border-radius: 50%; animation: orbit 50s linear infinite; }.core-mark { display: grid; place-items: center; width: 41px; height: 41px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; font-size: 17px; font-weight: 800; }.flow-core strong { margin-top: 5px; font-size: 12px; }.flow-core small { max-width: 110px; margin-top: 2px; font-size: 8px; line-height: 1.45; }.flow-line { position: absolute; height: 1px; background: rgba(11,27,53,.35); transform-origin: left center; }.flow-line i { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 6px rgba(43,99,255,.15); }.flow-line b { position:absolute; top: 9px; color: #778196; font-size: 9px; }.line-one { top: 192px; left: 12%; width: 13%; transform: rotate(35deg); }.line-two { top: 348px; left: 31%; width: 14%; transform: rotate(-10deg); }.line-three { top: 290px; left: 57%; width: 16%; transform: rotate(-39deg); }.line-four { top: 207px; left: 74%; width: 13%; transform: rotate(48deg); }.flow-branch { position: absolute; top: 420px; left: 51%; display: flex; align-items: flex-end; gap: 15px; }.flow-branch > i { width: 1px; height: 79px; background: rgba(11,27,53,.35); }.flow-caption { position: static; margin-top: 36px; color: #647086; font-size: 13px; line-height: 1.6; }

/* Demo */
.demo { background: #fff; }.demo-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 12%; align-items: center; }.demo-copy .section-lead { margin-bottom: 48px; }.demo-side-note { display: grid; grid-template-columns: 74px 1fr; max-width: 405px; padding-top: 16px; border-top: 1px solid var(--line); }.demo-side-note span { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.demo-side-note p { margin: 0; color: #5c6676; font-size: 12px; line-height: 1.6; }.demo-window { width: 100%; max-width: 490px; justify-self: end; overflow: hidden; border: 1px solid #d7dce4; background: #fcfcfc; box-shadow: 22px 22px 0 #eef1f7; }.demo-top { display: flex; align-items: center; gap: 11px; min-height: 79px; padding: 0 18px; border-bottom: 1px solid #e5e7eb; }.demo-avatar { display: grid; place-items: center; width: 35px; height: 35px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 800; }.demo-top strong { display: block; font-size: 12px; }.demo-top small { display: flex; align-items: center; gap: 4px; color: #788292; font-size: 10px; }.demo-top small i { width: 5px; height: 5px; border-radius: 50%; background:#35b989; }.demo-top button { display: grid; place-items: center; width: 20px; height: 20px; margin-left: auto; padding: 0; border: 1px solid #aeb5c0; border-radius: 50%; background: none; color: #768192; font-size: 11px; font-weight: 700; }.demo-messages { display: flex; flex-direction: column; gap: 11px; min-height: 253px; padding: 22px 18px; background: #f7f8fa; }.message { position: relative; width: fit-content; max-width: 75%; padding: 11px 34px 15px 12px; font-size: 11px; line-height: 1.55; animation: messageIn .35s var(--ease); }.message.bot { border-radius: 2px 10px 10px; background: #fff; color: #26344a; }.message.user { align-self: flex-end; border-radius: 10px 2px 10px 10px; background: var(--blue); color: #fff; }.message time { position: absolute; right: 9px; bottom: 4px; color: #9da5af; font-size: 8px; }.message.user time { color: rgba(255,255,255,.7); }@keyframes messageIn { from { opacity:0; transform: translateY(7px); } }
.quick-questions { display: flex; gap: 7px; padding: 10px 16px; overflow-x: auto; scrollbar-width: none; background: #f7f8fa; }.quick-questions::-webkit-scrollbar { display:none; }.quick-questions button { flex: 0 0 auto; padding: 7px 9px; border: 1px solid #cfd5de; border-radius: 20px; background: #fff; color: #536073; font-size: 9px; font-weight: 700; transition: border .2s,color .2s; }.quick-questions button:hover { border-color:var(--blue); color: var(--blue); }.demo-input { display: flex; gap: 10px; padding: 13px 16px; border-top: 1px solid #e7e9ee; background: #fff; }.demo-input input { min-width: 0; flex: 1; border: 0; outline: none; color: var(--ink); font-size: 11px; }.demo-input input::placeholder { color:#a1a7b0; }.demo-input button { width: 30px; height: 30px; border: none; border-radius: 50%; background: var(--navy); color: #fff; font-size: 17px; line-height: 1; transition: background .2s; }.demo-input button:hover { background: var(--blue); }

/* /* Case study */
.case-study { overflow: hidden; background: var(--navy); color: #fff; }.case-top { display:flex; justify-content: space-between; align-items: flex-start; }.case-client { margin: 42px 0 0; font-size: clamp(36px, 4vw, 61px); font-weight: 700; letter-spacing: -.07em; line-height: .85; }.case-client em { color: var(--blue-bright); font-style: normal; }.case-position { display:flex; flex-direction: column; gap: 9px; padding-top: 18px; color: rgba(255,255,255,.48); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-align: right; text-transform: uppercase; }.case-content { display: grid; grid-template-columns: 1.15fr .85fr; gap: 11%; margin-top: 100px; }.case-statement { margin: 0; font-size: clamp(43px, 5.4vw, 82px); font-weight: 700; letter-spacing: -.075em; line-height: .93; }.case-points { padding-top: 12px; }.case-point { padding: 0 0 25px; margin-bottom: 27px; border-bottom: 1px solid var(--line-light); }.case-point span,.case-result > span { color: var(--blue-bright); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.case-point p { max-width: 380px; margin: 11px 0 0; color: rgba(255,255,255,.66); font-size: 13px; line-height: 1.75; }.case-machine { display:grid; grid-template-columns: 1fr 260px; gap: 0; margin-top: 82px; border: 1px solid var(--line-light); }.machine-window { padding: 20px 26px 29px; min-width: 0; }.machine-head { display:flex; justify-content: space-between; color: rgba(255,255,255,.47); font-size: 9px; font-weight: 700; }.machine-head b { color:#67d1aa; font-weight: 700; }.machine-flow { display:flex; align-items:center; justify-content:space-between; gap: 13px; margin-top: 35px; }.machine-flow > div { display:grid; gap: 5px; min-width: 70px; }.machine-flow strong { font-size: 11px; }.machine-flow span { color:rgba(255,255,255,.48); font-size: 9px; }.machine-arrow { color: var(--blue-bright); font-size: 14px; font-style: normal; }.dot { width: 8px; height: 8px; border-radius:50%; }.wa { background:#4ccea0; }.ai { background:var(--blue-bright); }.db { background:#e8aa44; }.bell { background:#e86d76; }.case-result { display:flex; flex-direction:column; justify-content:center; gap:18px; padding:30px; border-left:1px solid var(--line-light); background:rgba(255,255,255,.035); }.case-result strong { font-size: 15px; font-weight: 600; letter-spacing: -.035em; line-height:1.55; }

/* Tension & Consequence */
.consequence { background: #fdfdfa; border-bottom: 1px solid var(--line); }
.consequence-head { max-width: 890px; }
.tension-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; }
.tension-card { padding: 32px 28px; border: 1px solid var(--line); background: #fff; border-left: 3px solid var(--blue); }
.tension-no { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.tension-card h3 { margin: 12px 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -.04em; color: var(--ink); }
.tension-card p { margin: 0; color: #626d7f; font-size: 13px; line-height: 1.65; }

/* Plot Twist (Editorial Break - Full Screen Pause) */
.plot-twist { position: relative; min-height: 75vh; display: flex; align-items: center; justify-content: center; background: var(--navy-deep); color: #fff; padding: 120px 0; text-align: center; isolation: isolate; overflow: hidden; }
.plot-twist-content { max-width: 960px; margin: 0 auto; }
.plot-mark { display: block; font-size: 28px; color: var(--blue-bright); margin-bottom: 24px; }
.plot-twist-content h2 { margin: 0 0 28px; font-size: clamp(32px, 3.8vw, 54px); font-weight: 700; letter-spacing: -.055em; line-height: 1.22; color: #ffffff; }
.plot-sub { max-width: 640px; margin: 0 auto; color: rgba(255,255,255,.65); font-size: 16px; line-height: 1.7; font-weight: 500; }

/* Rich Connected Ecosystem Workflow (8 Nodes) */
.rich-nodes-grid { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 60px; padding: 40px 24px; background: rgba(255,255,255,.9); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.rich-nodes-grid::-webkit-scrollbar { display: none; }
.rich-node { flex: 1; min-width: 110px; padding: 16px 12px; background: #fff; border: 1px solid var(--line); text-align: center; }
.rich-node span { display: block; color: var(--blue); font-size: 9px; font-weight: 800; }
.rich-node strong { display: block; margin-top: 4px; font-size: 11px; color: var(--ink); }
.rich-node small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.rich-node.highlight { border-color: var(--blue); background: rgba(43,99,255,.05); }
.rich-node.success { border-color: #35b989; background: rgba(53,185,137,.06); }
.rich-arrow { color: var(--blue); font-weight: 800; font-size: 12px; }

/* Comparison Grid (Sebelum vs Sesudah) */
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 64px; }
.comp-card { padding: 36px 30px; border: 1px solid var(--line-light); background: rgba(255,255,255,.03); }
.comp-badge { display: inline-block; padding: 4px 10px; font-size: 9px; font-weight: 800; letter-spacing: .1em; border-radius: 2px; }
.comp-card.before .comp-badge { background: rgba(232,109,118,.18); color: #e86d76; }
.comp-card.after .comp-badge { background: rgba(103,209,170,.18); color: #67d1aa; }
.comp-card h3 { margin: 16px 0 12px; font-size: 22px; font-weight: 700; letter-spacing: -.04em; }
.comp-card p { margin: 0; color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.7; }

/* Growth Pause & Growth Timeline Journey */
.growth-pause { padding: 120px 0; background: var(--navy); color: #fff; text-align: center; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.pause-content h2 { max-width: 880px; margin: 0 auto; font-size: clamp(28px, 3.4vw, 48px); font-weight: 700; letter-spacing: -.05em; line-height: 1.25; }
.pause-content em { color: var(--blue-bright); font-style: normal; }

.growth-timeline { background: #fff; border-bottom: 1px solid var(--line); }
.timeline-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 72px; position: relative; }
.timeline-item { position: relative; padding: 28px 24px; border: 1px solid var(--line); background: #fdfdfd; transition: transform .3s var(--ease), border-color .3s; }
.timeline-item:hover { transform: translateY(-4px); border-color: var(--blue); }
.time-badge { display: inline-block; padding: 4px 10px; background: var(--navy); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .1em; margin-bottom: 18px; }
.time-phase { display: block; font-size: 10px; font-weight: 800; color: var(--blue); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.timeline-item h3 { margin: 0 0 12px; font-size: 18px; font-weight: 700; letter-spacing: -.04em; color: var(--ink); line-height: 1.3; }
.timeline-item p { margin: 0; color: #5c6778; font-size: 13px; line-height: 1.65; }

/* Why and process */
.why { background:#f7f6f1; }.why-header { display: grid; grid-template-columns: .63fr 1.37fr; }.why-layout { display:grid; grid-template-columns: .85fr 1fr; gap: 15%; margin-top:92px; }.why-manifesto { position:relative; max-width:420px; padding:48px 0 0 50px; }.manifesto-mark { position:absolute; top:0; left:0; color:var(--blue); font-size:77px; font-weight:800; line-height:1; }.why-manifesto p { margin:0; font-size:21px; font-weight:600; letter-spacing:-.045em; line-height:1.4; }.manifesto-rule { width:40px; height:1px; margin:34px 0 13px; background:var(--ink); }.why-manifesto small { color: #6a7380; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.why-list { border-top:1px solid var(--line); }.why-item { display:grid; grid-template-columns: 52px 1fr 1.15fr; gap:20px; padding:23px 0 29px; border-bottom:1px solid var(--line); }.why-item > span { color:var(--blue); font-size:10px; font-weight:800; }.why-item h3 { margin:0; font-size:18px; letter-spacing:-.05em; line-height:1.2; }.why-item p { margin:0; color:#677181; font-size:12px; line-height:1.7; }
.process { overflow:hidden; background:var(--navy); color:#fff; }.process-title-wrap { display:grid; grid-template-columns:.63fr 1.37fr; }.process-track { display:grid; grid-template-columns:repeat(6, 1fr); gap:0; margin-top:84px; padding:0; list-style:none; border-top:1px solid var(--line-light); }.process-track li { position:relative; min-height:230px; padding:23px 20px 0 0; border-right:1px solid var(--line-light); }.process-track li:not(:first-child) { padding-left:20px; }.process-track li:last-child { border-right:0; }.process-no { display:block; color:var(--blue-bright); font-size:10px; font-weight:800; }.process-track li::before { content:""; position:absolute; top:-4px; left:0; width:7px; height:7px; border-radius:50%; background:var(--blue); }.process-track h3 { margin:62px 0 9px; font-size:19px; font-weight:600; letter-spacing:-.05em; }.process-track p { max-width:145px; margin:0; color:rgba(255,255,255,.54); font-size:11px; line-height:1.7; }

/* FAQ & close */
.faq-layout { display:grid; grid-template-columns:.75fr 1.25fr; gap:12%; }.faq-intro .section-lead { margin-bottom:36px; }.accordion { border-top:1px solid var(--line); }.faq-item { border-bottom:1px solid var(--line); }.faq-item button { display:flex; align-items:center; justify-content:space-between; width:100%; padding:24px 0; border:0; background:none; color:var(--ink); text-align:left; font-size:16px; font-weight:600; letter-spacing:-.03em; }
.faq-item button i { position: relative; display: block; flex: 0 0 auto; width: 28px; height: 28px; margin-left: 25px; border: 1px solid var(--line); border-radius: 50%; color: var(--blue); transition: transform .35s var(--ease), background .35s, border-color .35s, color .35s; }
.faq-item button i::before, .faq-item button i::after { content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; border-radius: 1px; transition: transform .35s var(--ease); }
.faq-item button i::before { width: 10px; height: 2px; transform: translate(-50%, -50%); }
.faq-item button i::after { width: 2px; height: 10px; transform: translate(-50%, -50%); }
.faq-item.is-open button i { transform: rotate(135deg); background: var(--blue); border-color: var(--blue); color: #fff; }
.faq-answer { display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease); }.faq-answer p { min-height:0; max-width:520px; margin:0; overflow:hidden; color:#667182; font-size:13px; line-height:1.75; }.faq-item.is-open .faq-answer { grid-template-rows:1fr; }.faq-item.is-open .faq-answer p { padding-bottom:25px; }
.closing { position:relative; overflow:hidden; background:var(--navy-deep); color:#fff; padding:150px 0; isolation:isolate; }.closing-grid { position:absolute; z-index:-1; inset:0; opacity:.4; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:90px 90px; mask-image:radial-gradient(ellipse at 65% 45%, #000, transparent 68%); }.closing-content { position:relative; }.closing-content::after { content:""; position:absolute; top:28%; right:8%; width:230px; height:230px; border:1px solid rgba(70,116,255,.55); border-radius:50%; box-shadow:0 0 0 36px rgba(55,100,255,.05),0 0 0 73px rgba(55,100,255,.035); }.closing-title { max-width:840px; margin:0; font-size:clamp(49px,6.6vw,100px); font-weight:700; letter-spacing:-.08em; line-height:.89; }.closing-actions { display:flex; align-items:center; gap:32px; margin:54px 0 0 36%; }.closing-actions p { margin:0; color:rgba(255,255,255,.54); font-size:12px; line-height:1.65; }
.site-footer { background:#fff; }.footer-top { display:grid; grid-template-columns:1fr 1fr auto; gap:30px; align-items:start; padding-top:48px; padding-bottom:61px; }.footer-brand { color:var(--navy); }.footer-top p { margin:0; color:#687282; font-size:12px; line-height:1.7; }.footer-mail { padding-bottom:5px; border-bottom:1px solid var(--ink); font-size:13px; font-weight:800; }.footer-mail span { margin-left:13px; color:var(--blue); font-size:17px; }.footer-bottom { display:flex; justify-content:space-between; align-items: center; padding:18px 0; border-top:1px solid var(--line); color:#8a929d; font-size:10px; font-weight:700; }.footer-bottom a { color:var(--ink); }
.footer-legal-links { display: flex; gap: 16px; align-items: center; }
.footer-legal-links a { color: #586375; text-decoration: none; font-size: 10px; font-weight: 700; transition: color 0.2s; }
.footer-legal-links a:hover { color: var(--blue); }
.subtle-stack { color: #8fa0b5; font-size: 9px; font-weight: 600; letter-spacing: .04em; }