:root { --orange:#EA5B2A; --orange-bright:#FD4D02; --blue:#3848DE; --blue-light:#5590E7; --ink:#2D2D2D; --cream:#FEF8F5; --white:#FFFFFF; --line:rgba(45,45,45,.14); --radius:28px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--white); color:var(--ink); font-family:Arial, Helvetica, sans-serif; line-height:1.45; }
img { display:block; width:100%; height:auto; }
a { color:inherit; }
.section { padding:76px 0; overflow:hidden; }
.container { width:min(1120px, calc(100% - 40px)); margin:0 auto; }
.section--dark { background:var(--ink); color:var(--white); }
.section--soft { background:var(--cream); }
.section--blue { background:var(--blue); color:var(--white); }
.eyebrow { margin:0 0 13px; color:var(--orange); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.eyebrow--light { color:#FFA97E; }
h1,h2,h3,h4,p { margin-top:0; }
h1,h2,h3,h4 { font-family:"Manrope", Arial, sans-serif; font-weight:600; letter-spacing:-.055em; line-height:1.02; text-transform:uppercase; }
h1 { margin-bottom:24px; font-size:clamp(44px, 7vw, 88px); max-width:770px; }
h2 { margin-bottom:20px; font-size:clamp(34px, 5vw, 58px); max-width:900px; }
h3 { margin-bottom:14px; font-size:clamp(30px, 4vw, 45px); }
h4 { margin:0 0 10px; font-size:27px; }
.hero { padding:0; min-height:680px; background:linear-gradient(132deg, #202020 0%, #2D2D2D 57%, #3848DE 150%); }
.hero__grid { min-height:680px; display:grid; align-items:center; grid-template-columns:1.03fr .97fr; gap:40px; }
.hero__content { padding:76px 0; position:relative; z-index:1; }
.hero__lead { max-width:580px; font-size:20px; color:#F7F4F2; }
.microcopy { margin:13px 0 0; color:#C6C2C0; font-size:13px; }
.hero__portrait { align-self:end; margin:0; position:relative; min-height:600px; padding:26px 18px 0 0; }
.hero__portrait::before { content:""; position:absolute; right:1%; bottom:2%; z-index:0; width:84%; height:76%; border-radius:50%; background:var(--orange); }
.hero__portrait::after { content:""; position:absolute; right:8%; top:8%; z-index:0; width:35%; aspect-ratio:1; border:18px solid var(--blue-light); border-radius:50%; }
.hero__portrait-frame { position:relative; z-index:1; height:620px; overflow:hidden; border-radius:48% 48% 38px 38px / 24% 24% 38px 38px; }
.hero__portrait img { height:100%; object-fit:cover; object-position:50% 38%; filter:saturate(1.05); }
.hero__portrait figcaption { position:absolute; right:0; bottom:28px; z-index:2; max-width:235px; padding:10px 13px; border-radius:18px; background:var(--white); color:var(--ink); font-size:11px; font-weight:700; box-shadow:8px 8px 0 var(--blue); }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:52px; padding:14px 20px; border:2px solid transparent; border-radius:14px; font-size:13px; font-weight:800; line-height:1.1; text-align:center; text-decoration:none; transition:transform .18s ease, background .18s ease; }
.button:hover { transform:translateY(-2px); }
.button--orange { background:var(--orange-bright); color:var(--white); }
.button--blue { background:var(--blue); color:var(--white); }
.button--telegram { background:var(--blue); color:var(--white); }
.button--max { background:var(--orange-bright); color:var(--white); }
.button--dark { background:var(--ink); color:var(--white); }
.button--outline, .button--outline-blue { background:transparent; border-color:var(--blue); color:var(--blue); }
.button--white-outline { background:transparent; border-color:var(--white); color:var(--white); }
.intro__grid { display:grid; grid-template-columns:80px 1.15fr .85fr; gap:32px; align-items:start; }
.section-number { margin:0; color:var(--blue); font-family:Impact, Arial, sans-serif; font-size:48px; line-height:.8; }
.section-number--light { color:#AEB7FF; }
.intro__text { margin:10px 0 0; font-size:18px; }
.diagnosis { background:#F0F2FF; }
.section-heading { max-width:760px; margin-bottom:32px; }
.section-heading > p:last-child { font-size:18px; }
.progress { display:grid; gap:9px; width:min(620px,100%); margin:0 0 26px; font-size:13px; font-weight:800; }
.progress__track { display:block; height:9px; border-radius:99px; background:#D7DCF9; overflow:hidden; }
.progress__bar { display:block; width:0; height:100%; border-radius:inherit; background:var(--orange); transition:width .2s ease; }
.notice { padding:14px; border:2px solid var(--orange); border-radius:12px; font-weight:700; }
.diagnosis-form { display:grid; gap:12px; }
.question { margin:0; padding:21px 22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); transition:border-color .2s, transform .2s; }
.question:hover { transform:translateY(-2px); border-color:var(--blue-light); }
.question--missing { border-color:var(--orange); box-shadow:0 0 0 4px rgba(234,91,42,.14); }
.question legend { width:100%; font-weight:800; font-size:18px; line-height:1.25; }
.question legend span { display:inline-flex; align-items:center; justify-content:center; width:27px; height:27px; margin-right:9px; border-radius:50%; background:var(--blue); color:var(--white); font-size:11px; vertical-align:top; }
.choices { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.choices label { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; background:#F4F5FA; font-size:14px; font-weight:700; cursor:pointer; }
input { accent-color:var(--orange); }
.diagnosis-form > .button { justify-self:start; margin-top:12px; }
.result { margin-top:36px; padding:32px; border-radius:var(--radius); background:var(--blue); color:var(--white); }
.result[data-level="foundation"] { background:var(--ink); }
.result[data-level="scale"] { background:linear-gradient(135deg, var(--orange-bright), var(--orange)); }
.result__label { margin-bottom:10px; color:#D7DCFF; font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.result[data-level="scale"] .result__label { color:#FFE2D3; }
.result__focus { margin:18px 0 26px; padding:15px; border-radius:14px; background:rgba(255,255,255,.16); font-weight:700; }
.route { padding:22px; border-radius:20px; background:var(--white); color:var(--ink); }
.route__kicker { margin-bottom:8px; color:var(--orange); font-size:12px; font-weight:800; text-transform:uppercase; }
.route p { max-width:660px; }
.channel-buttons { display:flex; flex-wrap:wrap; gap:10px; }
.marina-story__grid { display:grid; grid-template-columns:.83fr 1.17fr; gap:60px; align-items:center; }
.marina-story__portrait { position:relative; margin:0; }
.marina-story__portrait::after { content:""; position:absolute; inset:auto -8% 3% 20%; z-index:0; height:62%; border-radius:34px; background:var(--orange); }
.marina-story__portrait img { position:relative; z-index:1; border-radius:30px; }
.marina-story__content p { font-size:18px; }
.caption { margin-top:22px; color:#6B6765; font-size:13px!important; }
.roadmap__list { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; padding:0; list-style:none; counter-reset:roadmap; }
.roadmap__list li { min-height:285px; padding:22px; border-radius:24px; background:var(--ink); color:var(--white); }
.roadmap__list li:nth-child(2),.roadmap__list li:nth-child(5) { background:var(--blue); }
.roadmap__list li:nth-child(4),.roadmap__list li:nth-child(7) { background:var(--orange); }
.roadmap__top { display:flex; align-items:flex-start; justify-content:space-between; min-height:112px; }
.roadmap__list span { display:block; margin:4px 0 0; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.roadmap__icon { width:112px; height:112px; margin:-12px -8px 0 12px; object-fit:contain; filter:drop-shadow(0 10px 12px rgba(0,0,0,.16)); }
.roadmap__list strong { display:block; margin-bottom:8px; font-size:19px; line-height:1.16; }
.roadmap__list p { margin:0; color:rgba(255,255,255,.88); font-size:15px; }
.author__grid { display:grid; grid-template-columns:80px minmax(0,1fr) 270px; gap:32px; align-items:center; max-width:1120px; }
.author p:not(.eyebrow) { max-width:740px; font-size:19px; }
.author__portrait { position:relative; margin:0; padding:12px 10px 0 0; }
.author__portrait::before { content:""; position:absolute; inset:8% 0 0 8%; border-radius:50%; background:var(--orange); }
.author__portrait::after { content:""; position:absolute; top:4%; left:-2%; width:34%; aspect-ratio:1; border:12px solid #AEB7FF; border-radius:50%; }
.author__portrait img { position:relative; z-index:1; height:350px; object-fit:cover; object-position:50% 21%; border-radius:48% 52% 47% 53% / 37% 38% 62% 63%; }
.tour { background:#F2F7FF; }
.tour__grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.tour__content > p:not(.eyebrow) { font-size:18px; }
.tour .route { margin-top:23px; padding:0; background:transparent; }
.tour .route > p { font-weight:800; }
.tour__image { margin:0; padding:12px; border-radius:28px; background:var(--blue); box-shadow:14px 14px 0 var(--orange); }
.tour__image img { border-radius:18px; }
.cases__track { display:flex; gap:20px; overflow-x:auto; padding:4px 0 16px; scroll-snap-type:x mandatory; scrollbar-color:var(--orange) #E9E4E1; }
.case-slide { flex:0 0 min(760px, 76vw); margin:0; scroll-snap-align:start; overflow:hidden; border-radius:24px; box-shadow:8px 8px 0 var(--blue); }
.case-slide__button { display:block; width:100%; padding:0; border:0; background:transparent; cursor:zoom-in; }
.case-slide__button:focus-visible { outline:5px solid var(--blue); outline-offset:-5px; }
.case-slide img { height:auto; }
.cases__controls { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:20px; }
.cases__arrow { display:grid; place-items:center; width:52px; height:52px; padding:0 0 4px; border:0; border-radius:50%; color:var(--white); font:700 29px/1 Arial,sans-serif; cursor:pointer; box-shadow:0 7px 0 rgba(45,45,45,.16); transition:transform .18s ease, opacity .18s ease; }
.cases__arrow:hover { transform:translateY(-2px); }
.cases__arrow--prev { background:var(--blue); }
.cases__arrow--next { background:var(--orange); }
.cases__arrow:disabled { opacity:.35; cursor:default; transform:none; }
.cases__arrow:focus-visible { outline:4px solid var(--ink); outline-offset:3px; }
.cases__hint { min-width:108px; margin:0; text-align:center; }
.cases__hint span { display:block; font-size:13px; font-weight:800; text-transform:uppercase; }
.cases__hint strong { display:block; margin-top:3px; color:var(--orange); font-size:15px; }
.case-modal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:64px 20px 24px; background:rgba(16,16,18,.92); overflow:auto; overscroll-behavior:contain; }
.case-modal[hidden] { display:none; }
.case-modal__content { display:flex; align-items:center; justify-content:center; width:min(1200px, 100%); min-height:100%; }
.case-modal__content img { width:auto; max-width:100%; max-height:calc(100vh - 96px); border-radius:18px; object-fit:contain; box-shadow:0 22px 70px rgba(0,0,0,.45); touch-action:pinch-zoom; }
.case-modal__close { position:fixed; top:max(14px, env(safe-area-inset-top)); right:max(14px, env(safe-area-inset-right)); z-index:1001; display:grid; place-items:center; width:48px; height:48px; padding:0 0 4px; border:0; border-radius:50%; background:var(--white); color:var(--ink); font:400 36px/1 Arial,sans-serif; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.28); }
.case-modal__close:focus-visible { outline:4px solid var(--orange); outline-offset:3px; }
body.modal-open { overflow:hidden; }
.final h2 { max-width:700px; }
.final__cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:30px; }
.final-card { padding:28px; border-radius:var(--radius); }
.final-card--orange { background:var(--orange); color:var(--white); }
.final-card--orange .button--max { background:var(--ink); color:var(--white); }
.final-card--white { background:var(--white); color:var(--ink); }
.final-card__number { margin-bottom:30px; font-family:Impact,Arial,sans-serif; font-size:42px; line-height:.8; }
.final-card__code { margin-top:26px; font-weight:800; }
.final-card { display:flex; flex-direction:column; }
.final-card h3 { min-height:45px; font-size:clamp(27px, 3vw, 38px); white-space:nowrap; }
.final-card .channel-buttons { margin-top:auto; padding-top:18px; }
@media (max-width: 720px) { .section { padding:54px 0; } .container { width:min(100% - 30px,1120px); } h1 { font-size:38px; } h2 { font-size:37px; } .hero { min-height:0; } .hero__grid,.intro__grid,.marina-story__grid,.tour__grid,.author__grid { grid-template-columns:1fr; gap:26px; } .hero__content { padding:56px 0 0; } .hero__lead { font-size:18px; } .hero__portrait { min-height:430px; padding:18px 12px 0 0; } .hero__portrait-frame { height:450px; border-radius:48% 48% 28px 28px / 20% 20% 28px 28px; } .hero__portrait img { object-position:50% 28%; } .hero__portrait::before { width:92%; height:75%; right:-5%; } .hero__portrait::after { top:5%; right:9%; border-width:13px; } .hero__portrait figcaption { bottom:22px; } .section-number { font-size:39px; } .intro__text { margin:0; font-size:17px; } .question { padding:18px 16px; } .question legend { font-size:16px; } .choices { flex-direction:column; } .choices label { width:100%; } .diagnosis-form > .button { width:100%; } .result { padding:22px 16px; } .channel-buttons { flex-direction:column; } .channel-buttons .button { width:100%; } .marina-story__grid { gap:30px; } .marina-story__portrait { order:2; max-width:430px; } .marina-story__content p { font-size:17px; } .roadmap__list,.final__cards { grid-template-columns:1fr; } .roadmap__list li { min-height:auto; } .tour__image { box-shadow:8px 8px 0 var(--orange); } .author p:not(.eyebrow) { font-size:17px; } .author__portrait { order:2; max-width:290px; } .author__portrait img { height:350px; } .case-slide { flex-basis:calc(100vw - 46px); box-shadow:6px 6px 0 var(--blue); } .cases__controls { gap:14px; } .case-modal { display:grid; place-items:center; padding:70px 10px 18px; overflow:auto; } .case-modal__content { display:flex; width:100%; min-height:100%; } .case-modal__content img { width:auto; max-width:100%; max-height:calc(100dvh - 100px); border-radius:12px; } .case-modal__close { width:46px; height:46px; } .final-card h3 { min-height:0; white-space:normal; } }