:root { --orange:#f28c00; --orange-dark:#b66600; --ink:#242027; --muted:#716975; --paper:#fffaf3; --line:#ead5b5; --green:#277554; --red:#ad4b3c; }
* { box-sizing:border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; }
body { color:var(--ink); font-family:Arial, Helvetica, sans-serif; background:#fffaf4; }
.slide { position:relative; display:grid; width:100vw; height:100vh; min-height:540px; overflow:hidden; background:linear-gradient(90deg,rgba(242,140,0,.055) 1px,transparent 1px),linear-gradient(0deg,rgba(242,140,0,.055) 1px,transparent 1px),#fffaf4; background-size:56px 56px; }
.slide::before { position:absolute; inset:0; z-index:0; background:radial-gradient(circle at 8% 5%,rgba(242,140,0,.17),transparent 27rem); content:""; pointer-events:none; }
.topline, .content, .slide-nav { position:relative; z-index:1; }
.topline { position:absolute; top:clamp(22px,3.2vh,46px); right:clamp(30px,4vw,76px); left:clamp(30px,4vw,76px); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { width:150px; height:auto; }
.step-link { display:inline-flex; align-items:center; min-height:34px; border:1px solid var(--line); border-radius:8px; padding:0 12px; background:rgba(255,255,255,.78); color:var(--orange-dark); font-size:clamp(.66rem,1vw,.88rem); font-weight:900; letter-spacing:.045em; text-decoration:none; text-transform:uppercase; }
.step-link:hover { border-color:var(--orange); }
.content { width:min(1400px,calc(100% - 12vw)); margin:auto; padding:11vh 0 10vh; }
.eyebrow { margin:0 0 13px; color:var(--orange); font-size:clamp(.78rem,1.1vw,1rem); font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:12ch; margin-bottom:0; font-size:clamp(3.8rem,7vw,8.8rem); line-height:.91; letter-spacing:0; }
h2 { max-width:18ch; margin-bottom:0; font-size:clamp(3rem,5.3vw,6.4rem); line-height:.94; letter-spacing:0; }
h3 { margin-bottom:10px; font-size:clamp(1.1rem,1.55vw,1.8rem); }
.lead { max-width:760px; margin:24px 0 0; color:var(--muted); font-size:clamp(1.1rem,1.6vw,1.65rem); line-height:1.48; }
.slide-nav { position:absolute; right:clamp(30px,4vw,76px); bottom:clamp(20px,3vh,40px); left:clamp(30px,4vw,76px); display:flex; align-items:center; justify-content:space-between; }
.slide-count { color:var(--muted); font-size:.82rem; font-weight:900; letter-spacing:.08em; }
.nav-buttons { display:flex; gap:8px; }
.nav-button { display:grid; width:42px; height:42px; place-items:center; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--orange-dark); cursor:pointer; font-size:1.45rem; font-weight:900; text-decoration:none; }
.nav-button:hover { border-color:var(--orange); background:var(--soft,#fff7eb); }
.nav-button[aria-disabled="true"] { visibility:hidden; }
.reveal { opacity:0; transform:translateY(18px); transition:opacity 340ms ease,transform 340ms ease; }
.reveal.is-visible { opacity:1; transform:none; }
.hero { display:block; }
.hero .content { position:relative; z-index:2; width:auto; margin:0; padding-left:clamp(30px,7vw,130px); align-self:center; }
.hero-art { position:absolute; inset:0; z-index:0; min-height:0; }
.hero-art img { width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-art::after { position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,250,244,.42) 0%,rgba(255,250,244,.1) 43%,transparent 62%); content:""; }
.route { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:42px; }
.route-card { min-height:220px; padding:21px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.82); }
.route-card span { display:grid; width:38px; height:38px; margin-bottom:28px; place-items:center; border-radius:50%; background:var(--orange); color:#fff; font-weight:900; }
.route-card p { margin:0; color:var(--muted); line-height:1.4; }
.big-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:34px; }
.big-card { min-height:300px; padding:32px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.88); }
.big-card.agent { background:#fff1dc; }
.big-card .tag { margin-bottom:20px; color:var(--orange-dark); font-size:.8rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.big-card p { max-width:480px; margin:0; color:var(--muted); font-size:clamp(1.15rem,1.6vw,1.6rem); line-height:1.45; }
.definition { max-width:980px; margin-top:34px; padding:26px 30px; border-left:7px solid var(--orange); background:rgba(255,255,255,.8); color:var(--ink); font-size:clamp(1.3rem,2.2vw,2.35rem); font-weight:800; line-height:1.25; }
.visual-split { display:grid; grid-template-columns:.9fr 1.1fr; gap:42px; align-items:center; }
.visual-split .art-frame { border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; }
.visual-split .art-frame img { display:block; width:100%; height:min(55vh,610px); object-fit:cover; }
.number-stack { display:grid; gap:12px; margin-top:32px; }
.number-line { display:grid; grid-template-columns:52px 1fr; gap:14px; align-items:center; min-height:78px; padding:12px 0; border-bottom:1px solid var(--line); }
.number-line span { display:grid; width:38px; height:38px; place-items:center; border-radius:50%; background:var(--orange); color:#fff; font-weight:900; }
.number-line p { margin:0; color:var(--muted); font-size:clamp(1.12rem,1.5vw,1.55rem); line-height:1.35; }
.quote-pair { display:grid; grid-template-columns:1fr 80px 1fr; gap:22px; align-items:center; margin-top:38px; }
.quote { min-height:220px; padding:32px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); font-size:clamp(1.5rem,2.4vw,2.7rem); font-weight:800; line-height:1.18; }
.quote.is-mission { background:#fff0d8; }
.arrow { color:var(--orange); font-size:4rem; font-weight:900; text-align:center; }
.sequence { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:38px; }
.sequence-item { min-height:178px; padding:20px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.86); }
.sequence-item b { display:block; margin-bottom:14px; color:var(--orange-dark); font-size:1.05rem; }
.sequence-item p { margin:0; color:var(--muted); line-height:1.38; }
.canvas { display:grid; grid-template-columns:repeat(3,1fr); margin-top:35px; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.canvas-item { min-height:188px; padding:25px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.9); }
.canvas-item:nth-child(3n) { border-right:0; }.canvas-item:nth-last-child(-n+3) { border-bottom:0; }
.canvas-item span { display:block; margin-bottom:17px; color:var(--orange); font-size:.8rem; font-weight:900; letter-spacing:.09em; }.canvas-item p { margin:0; color:var(--muted); font-size:1.1rem; line-height:1.35; }
.traffic { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px; }.traffic-card { min-height:310px; padding:28px; border:1px solid var(--line); border-top:10px solid var(--orange); border-radius:8px; background:#fff; }.traffic-card.green { border-top-color:var(--green); }.traffic-card.red { border-top-color:var(--red); }.traffic-card h3 { margin-bottom:18px; }.traffic-card p { margin:0; color:var(--muted); font-size:clamp(1.1rem,1.55vw,1.55rem); line-height:1.42; }
.final { text-align:center; }.final h1 { max-width:16ch; margin:0 auto; }.final .lead { margin-right:auto; margin-left:auto; }.final-card { display:inline-flex; align-items:center; gap:16px; margin-top:36px; border:1px solid var(--line); border-radius:8px; padding:18px 21px; background:#fff; color:var(--orange-dark); font-weight:900; text-decoration:none; }.final-card:hover { border-color:var(--orange); }
.hint { position:absolute; bottom:clamp(28px,4vh,50px); left:50%; z-index:2; color:var(--muted); font-size:.75rem; font-weight:800; letter-spacing:.05em; transform:translateX(-50%); }
@media (max-width:800px) { .slide { min-height:0; overflow:auto; }.content { width:min(100% - 42px,1400px); padding:125px 0 90px; }.hero .content { padding:130px 24px 70px; }.hero-art { height:100%; }.hero-art::after { background:linear-gradient(0deg,rgba(255,250,244,.72) 0%,transparent 42%); }.route,.big-pair,.visual-split,.traffic { grid-template-columns:1fr; }.quote-pair { grid-template-columns:1fr; }.arrow { transform:rotate(90deg); }.sequence { grid-template-columns:repeat(2,1fr); }.canvas { grid-template-columns:repeat(2,1fr); }.canvas-item:nth-child(3n){border-right:1px solid var(--line)}.canvas-item:nth-child(2n){border-right:0}.canvas-item:nth-last-child(-n+3){border-bottom:1px solid var(--line)}.canvas-item:nth-last-child(-n+2){border-bottom:0}.hint{display:none} }