/* Vezolino manifesto: a code-native architectural signet, not a decorative bitmap. */
.manifesto { position:relative; overflow:hidden; max-width:1440px; margin:0 auto; padding:clamp(90px,11vw,160px) 4.8vw 32px; color:#f4f0e9; background:#0e151b; }
.manifesto::before { position:absolute; inset:0; content:""; opacity:.85; background:linear-gradient(90deg,transparent 33.3%,rgba(232,238,235,.09) 33.3%,rgba(232,238,235,.09) calc(33.3% + 1px),transparent calc(33.3% + 1px),transparent 66.6%,rgba(232,238,235,.09) 66.6%,rgba(232,238,235,.09) calc(66.6% + 1px),transparent calc(66.6% + 1px)); pointer-events:none; }
.manifesto-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(280px,.82fr) minmax(580px,1.35fr); gap:clamp(42px,5vw,82px); align-items:center; }
.manifesto-copy { max-width:500px; }
.manifesto-index,.manifesto-kicker { margin:0; color:#d98a67; font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }.manifesto-kicker { margin-top:32px; color:#c9c3b8; }
.manifesto h2 { margin:22px 0 29px; font:500 clamp(3.35rem,5.5vw,6.45rem)/.87 var(--serif); letter-spacing:-.06em; }.manifesto h2 em { color:#d78362; font-weight:500; }.manifesto-copy > p:not(.manifesto-index):not(.manifesto-kicker) { max-width:420px; margin:0; color:#c5c7c3; font-size:15px; line-height:1.72; }
.manifesto-mobile-break { display:none; }
.manifesto-link { position:relative; display:inline-flex; align-items:center; gap:13px; margin-top:35px; padding-bottom:8px; border-bottom:1px solid rgba(244,240,233,.52); color:#f4f0e9; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.manifesto-link span { color:#d78362; font-size:18px; transition:transform .25s ease; }.manifesto-link:hover span { transform:translate(3px,-3px); }
.sigil-stage { --sigil-rx:0deg; --sigil-ry:0deg; --sigil-x:50%; --sigil-y:50%; min-width:0; }
.sigil-field { position:relative; display:grid; min-height:clamp(400px,43vw,610px); place-items:center; overflow:hidden; border:1px solid rgba(236,240,234,.13); background:radial-gradient(circle at var(--sigil-x) var(--sigil-y),rgba(86,130,143,.34),transparent 31%),radial-gradient(circle at 72% 68%,rgba(197,125,84,.2),transparent 28%),linear-gradient(135deg,#152932,#090e13 68%); box-shadow:0 28px 70px rgba(0,0,0,.32); isolation:isolate; transition:background .22s ease; }
.sigil-field::before,.sigil-field::after { position:absolute; z-index:-1; content:""; pointer-events:none; }.sigil-field::before { inset:8%; border:1px solid rgba(244,240,233,.08); }.sigil-field::after { width:68%; aspect-ratio:1; right:-30%; bottom:-37%; border:1px solid rgba(215,131,98,.15); border-radius:50%; box-shadow:0 0 0 36px rgba(215,131,98,.025),0 0 0 72px rgba(215,131,98,.018); }
.sigil-svg { width:min(82%,505px); overflow:visible; filter:drop-shadow(0 20px 24px rgba(0,0,0,.28)); transform:perspective(900px) rotateX(var(--sigil-rx)) rotateY(var(--sigil-ry)); transform-style:preserve-3d; transition:transform 360ms cubic-bezier(.22,1,.36,1); }
.sigil-guides { stroke:rgba(225,234,231,.075); stroke-width:1; }.sigil-guides circle,.sigil-guides path { stroke-dasharray:1100; stroke-dashoffset:1100; }.sigil-architecture { stroke:rgba(225,234,231,.055); stroke-width:1; }.sigil-architecture path { stroke-dasharray:900; stroke-dashoffset:900; }.sigil-umbra { opacity:0; filter:blur(7px); }.sigil-v-left,.sigil-v-right { opacity:0; transform-origin:240px 240px; filter:drop-shadow(0 12px 14px rgba(0,0,0,.28)); }.sigil-v-left { transform:translate(-14px,14px); }.sigil-v-right { transform:translate(14px,14px); }.sigil-v-edge,.sigil-z-ligature { opacity:0; stroke-dasharray:500; stroke-dashoffset:500; }.sigil-keystone { opacity:0; transform:translateY(-28px); }.sigil-labels { fill:#d6dad4; opacity:0; font:600 9px var(--sans); letter-spacing:.12em; }
.sigil-glint { position:absolute; inset:-30%; z-index:2; pointer-events:none; background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.18) 48%,transparent 54%); transform:translateX(-85%) rotate(9deg); }
.sigil-caption { display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:end; margin-top:15px; color:#abb5b3; }.sigil-caption span { color:#e6c08a; font:500 1.2rem/1 var(--serif); }.sigil-caption p { margin:0; font-size:10px; line-height:1.55; letter-spacing:.08em; text-transform:uppercase; }.sigil-caption i { color:#d78362; font-size:19px; font-style:normal; }
.manifesto-foot { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr) 2fr; gap:18px; align-items:end; margin-top:clamp(60px,8vw,110px); padding-top:15px; border-top:1px solid rgba(244,240,233,.24); color:#b7bbb5; font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }.manifesto-foot p { justify-self:end; max-width:280px; margin:0; color:#d78362; font-size:10px; font-weight:500; letter-spacing:.08em; text-align:right; }
.manifesto.is-visible .sigil-guides circle,.manifesto.is-visible .sigil-guides path { animation:sigil-draw 1.25s .08s cubic-bezier(.16,1,.3,1) forwards; }.manifesto.is-visible .sigil-architecture path { animation:sigil-draw 1s .3s cubic-bezier(.16,1,.3,1) forwards; }.manifesto.is-visible .sigil-umbra { animation:sigil-fade .55s .48s ease forwards; }.manifesto.is-visible .sigil-v-left { animation:sigil-left .8s .56s cubic-bezier(.16,1,.3,1) forwards; }.manifesto.is-visible .sigil-v-right { animation:sigil-right .8s .64s cubic-bezier(.16,1,.3,1) forwards; }.manifesto.is-visible .sigil-v-edge { animation:sigil-draw .55s 1.1s cubic-bezier(.16,1,.3,1) forwards; }.manifesto.is-visible .sigil-z-ligature { animation:sigil-draw .55s 1.18s cubic-bezier(.16,1,.3,1) forwards; }.manifesto.is-visible .sigil-labels { animation:sigil-fade .5s 1.22s ease forwards; }.manifesto.is-visible .sigil-keystone { animation:sigil-keystone .65s 1.32s cubic-bezier(.16,1,.3,1) forwards; }.manifesto.is-visible .sigil-glint { animation:sigil-glint 1.1s 1.55s cubic-bezier(.16,1,.3,1) both; }
@keyframes sigil-draw { to { stroke-dashoffset:0; } } @keyframes sigil-left { to { opacity:1; transform:translate(0,0); } } @keyframes sigil-right { to { opacity:1; transform:translate(0,0); } } @keyframes sigil-fade { to { opacity:1; } } @keyframes sigil-keystone { 0% { opacity:0; transform:translateY(-28px); } 72% { opacity:1; transform:translateY(4px); } 100% { opacity:1; transform:translateY(0); } } @keyframes sigil-glint { to { transform:translateX(85%) rotate(9deg); } }
@media (max-width:800px) { .manifesto { padding:84px 22px 25px; }.manifesto::before { background:linear-gradient(90deg,transparent 50%,rgba(232,238,235,.08) 50%,rgba(232,238,235,.08) calc(50% + 1px),transparent calc(50% + 1px)); }.manifesto-grid { display:block; }.manifesto-copy { max-width:calc(100vw - 44px); min-width:0; }.manifesto-kicker { margin-top:25px; }.manifesto h2 { max-width:100%; font-size:clamp(2.9rem,11.8vw,3.35rem); overflow-wrap:break-word; }.manifesto-mobile-break { display:inline; }.manifesto-copy > p:not(.manifesto-index):not(.manifesto-kicker) { width:100%; max-width:none; font-size:14px; }.sigil-stage { margin-top:58px; }.sigil-field { min-height:360px; }.sigil-caption { gap:12px; }.manifesto-foot { grid-template-columns:1fr 1fr; gap:14px; margin-top:58px; }.manifesto-foot span:last-of-type { grid-column:1 / -1; }.manifesto-foot p { grid-column:1 / -1; justify-self:start; text-align:left; } }
@media (prefers-reduced-motion:reduce) { .sigil-svg,.manifesto-link span { transition:none; }.sigil-guides circle,.sigil-guides path,.sigil-architecture path,.sigil-v-edge,.sigil-z-ligature { stroke-dashoffset:0; }.sigil-umbra,.sigil-v-left,.sigil-v-right,.sigil-keystone,.sigil-labels { opacity:1; transform:none; }.sigil-glint { display:none; } }

/* Live studio field: a code-native visual rather than a decorative logo. */
.studio-console { position:relative; box-sizing:border-box; width:100%; max-width:100%; min-width:0; min-height:clamp(400px,43vw,610px); overflow:hidden; isolation:isolate; border:1px solid rgba(224,233,226,.17); background:radial-gradient(circle at 50% 46%,rgba(44,85,102,.35),transparent 34%),radial-gradient(circle at 78% 78%,rgba(200,110,77,.16),transparent 29%),linear-gradient(135deg,#12252d,#071016 73%); box-shadow:0 28px 70px rgba(0,0,0,.32); }
.studio-console::before { position:absolute; z-index:0; inset:0; content:""; pointer-events:none; background:radial-gradient(circle at var(--console-x,50%) var(--console-y,50%),rgba(169,209,219,.16),transparent 23%); mix-blend-mode:screen; }
.studio-canvas { position:absolute; z-index:1; inset:0; display:block; width:100%; height:100%; opacity:.58; }
.console-grid { position:absolute; z-index:2; inset:0; pointer-events:none; opacity:.48; background-image:linear-gradient(rgba(220,234,229,.085) 1px,transparent 1px),linear-gradient(90deg,rgba(220,234,229,.085) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.82),transparent 86%); }
.console-axis { position:absolute; z-index:3; pointer-events:none; background:rgba(230,239,234,.2); }.console-axis-x { top:50%; left:0; width:100%; height:1px; }.console-axis-y { top:0; left:50%; width:1px; height:100%; }
.console-topline,.console-meta { position:absolute; z-index:4; display:flex; color:rgba(237,242,236,.7); font:600 9px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; }.console-topline { top:21px; right:22px; left:22px; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid rgba(229,239,233,.18); }.console-topline span:last-child { color:#d8a27e; font-variant-numeric:tabular-nums; }
.console-center { position:absolute; z-index:4; top:50%; left:50%; display:grid; justify-items:center; width:min(38%,226px); transform:translate(-50%,-50%); color:#f1eee5; text-align:center; }.console-mark { display:block; width:100%; height:auto; filter:drop-shadow(0 0 25px rgba(204,229,226,.14)); }
.console-meta { bottom:22px; flex-direction:column; gap:7px; }.console-meta-left { left:22px; }.console-meta-right { right:22px; align-items:flex-end; text-align:right; }.console-live { color:#dbe8df; }.console-live i { display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:#68d9b6; box-shadow:0 0 0 4px rgba(104,217,182,.12); animation:console-pulse 2.4s ease-in-out infinite; }
.console-caption { position:absolute; z-index:4; right:22px; bottom:94px; max-width:188px; margin:0; color:rgba(225,234,228,.66); font:400 13px/1.5 var(--sans); text-align:right; }
@keyframes console-pulse { 50% { opacity:.45; transform:scale(.8); } }
@media (max-width:800px) { .studio-console { min-height:360px; margin-top:58px; }.console-grid { background-size:54px 54px; }.console-topline { top:16px; right:16px; left:16px; font-size:8px; }.console-meta { bottom:16px; font-size:8px; }.console-meta-left { left:16px; }.console-meta-right { right:16px; }.console-caption { display:none; }.console-center { width:min(49%,184px); } }
@media (prefers-reduced-motion:reduce) { .console-live i { animation:none; } }

/* The studio field is deliberately editorial: it supports the manifesto instead of mimicking a dashboard. */
.studio-console { background:radial-gradient(circle at 50% 50%,rgba(49,87,94,.3),transparent 34%),linear-gradient(135deg,#0d1a21,#0a1218 72%); }
.studio-console::before { background:radial-gradient(circle at var(--console-x,50%) var(--console-y,50%),rgba(180,211,205,.15),transparent 22%); }
.studio-canvas { opacity:1; }
.console-grid { opacity:.33; background-image:linear-gradient(90deg,transparent 33.3%,rgba(220,234,229,.11) 33.3%,rgba(220,234,229,.11) calc(33.3% + 1px),transparent calc(33.3% + 1px),transparent 66.6%,rgba(220,234,229,.11) 66.6%,rgba(220,234,229,.11) calc(66.6% + 1px),transparent calc(66.6% + 1px)); background-size:100% 100%; mask-image:none; }
.field-label,.field-instruction,.field-qualities { position:absolute; z-index:4; margin:0; font:600 9px/1.4 var(--sans); letter-spacing:.15em; text-transform:uppercase; }.field-label { top:24px; left:25px; color:#da9270; }.field-instruction { right:25px; bottom:24px; color:rgba(230,237,231,.52); }.field-qualities { bottom:24px; left:25px; display:flex; gap:16px; color:rgba(230,237,231,.72); }.field-qualities span + span::before { display:inline-block; width:3px; height:3px; margin:0 16px 2px 0; border-radius:50%; background:#d78362; content:""; }
@media (max-width:800px) { .field-label { top:18px; left:17px; font-size:8px; }.field-instruction { right:17px; bottom:18px; font-size:8px; }.field-qualities { bottom:18px; left:17px; gap:8px; font-size:8px; }.field-qualities span + span::before { margin-right:8px; } }

/* A clear service statement replaces the decorative field in Chi siamo. */
.brand-support { min-width:0; padding:clamp(28px,4vw,54px); border-top:1px solid rgba(244,240,233,.34); border-bottom:1px solid rgba(244,240,233,.34); background:linear-gradient(135deg,rgba(244,240,233,.055),rgba(244,240,233,.015)); }
.brand-support-top { display:flex; justify-content:space-between; gap:16px; color:#d78362; font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }.brand-support-top p { margin:0; }.brand-support-top span { color:#bfc5bf; }
.brand-support h3 { max-width:540px; margin:clamp(50px,7vw,88px) 0 clamp(42px,5vw,68px); color:#f4f0e9; font:500 clamp(2.55rem,4.15vw,4.6rem)/.9 var(--serif); letter-spacing:-.055em; }.brand-support h3 em { color:#d78362; font-weight:500; }
.brand-support-list { margin:0; padding:0; list-style:none; border-top:1px solid rgba(244,240,233,.26); }.brand-support-list li { display:grid; grid-template-columns:38px minmax(0,1fr); gap:18px; padding:19px 0 20px; border-bottom:1px solid rgba(244,240,233,.2); }.brand-support-list > li > span { padding-top:3px; color:#d78362; font-size:10px; font-weight:700; letter-spacing:.1em; }.brand-support-list h4 { margin:0; color:#f4f0e9; font:500 1.32rem/1.05 var(--serif); letter-spacing:-.025em; }.brand-support-list p { max-width:410px; margin:7px 0 0; color:#bdc3bd; font-size:13px; line-height:1.55; }
.brand-support-link { display:inline-flex; gap:12px; align-items:center; margin-top:30px; padding-bottom:8px; border-bottom:1px solid rgba(244,240,233,.46); color:#f4f0e9; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.brand-support-link span { color:#d78362; font-size:17px; transition:transform .25s ease; }.brand-support-link:hover span { transform:translate(3px,3px); }
@media (max-width:800px) { .manifesto-grid,.brand-support { width:100%; max-width:100%; min-width:0; box-sizing:border-box; }.brand-support { margin-top:55px; padding:27px 0 3px; background:none; }.brand-support h3 { max-width:100%; margin:48px 0 42px; font-size:clamp(2.12rem,9vw,3rem); overflow-wrap:break-word; }.brand-support-list li { grid-template-columns:30px minmax(0,1fr); gap:12px; }.brand-support-list li > div { min-width:0; }.brand-support-list h4,.brand-support-list p { overflow-wrap:break-word; }.brand-support-list p { max-width:100%; font-size:13px; }.brand-support-link { margin-top:27px; } }

/* Chi siamo: one human image, one message. */
.atelier-visual { position:relative; min-width:0; min-height:0; aspect-ratio:16 / 9; margin:0; overflow:hidden; background:#0d171f; box-shadow:0 28px 65px rgba(0,0,0,.25); }.atelier-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.94) contrast(1.02); transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .5s ease; }.atelier-visual::after { position:absolute; inset:0; content:""; pointer-events:none; background:linear-gradient(180deg,rgba(8,15,21,.01) 42%,rgba(8,15,21,.58) 100%),linear-gradient(90deg,rgba(8,15,21,.08),transparent 64%); }.atelier-visual:hover img { filter:saturate(1) contrast(1.03); transform:scale(1.025); }.atelier-visual figcaption { position:absolute; z-index:1; right:24px; bottom:22px; left:24px; display:flex; justify-content:space-between; align-items:end; gap:20px; color:#f3eee5; }.atelier-visual figcaption span { color:#df9370; font-size:10px; font-weight:700; letter-spacing:.13em; }.atelier-visual figcaption p { max-width:175px; margin:0; font:500 1.32rem/.98 var(--serif); letter-spacing:-.025em; text-align:right; }

/* Come possiamo aiutarti: one composed service system, not three detached cards. */
.brand-help { max-width:1440px; margin:0 auto; padding:clamp(96px,11vw,155px) 4.8vw; background:#ece8df; color:#1c1b18; }.brand-help-head { display:grid; grid-template-columns:.7fr 1.55fr .75fr; gap:34px; align-items:end; margin-bottom:clamp(58px,8vw,104px); }.brand-help-head .kicker { margin-top:12px; }.brand-help-head h2 { margin:0; font:600 clamp(3rem,5.3vw,5.8rem)/.88 var(--serif); letter-spacing:-.055em; }.brand-help-head h2 em { color:#bc6647; font-weight:500; }.brand-help-head > p { max-width:285px; margin:0 0 4px; color:#615e57; font-size:14px; line-height:1.58; }.brand-help-stage { position:relative; min-height:clamp(440px,38vw,610px); overflow:hidden; background:#10242f; }.brand-help-media { position:absolute; inset:0; min-width:0; margin:0; background:#142e3b; }.brand-help-media img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 48%; transition:transform .8s cubic-bezier(.16,1,.3,1); }.brand-help-media::after { position:absolute; inset:0; content:""; pointer-events:none; background:linear-gradient(90deg,rgba(244,240,232,.04) 25%,rgba(10,20,26,.12) 48%,rgba(7,15,20,.8) 100%); }.brand-help-media:hover img { transform:scale(1.018); }.brand-help-media figcaption { position:absolute; z-index:1; top:21px; left:22px; display:inline-flex; gap:14px; padding:9px 11px; color:#1c2529; background:rgba(246,242,235,.8); font-size:9px; font-weight:700; letter-spacing:.12em; }.brand-help-media figcaption span:last-child { color:#a5583f; }.brand-help-steps { position:absolute; z-index:2; top:0; right:0; bottom:0; display:grid; width:min(43%,560px); grid-template-rows:repeat(3,1fr); border-left:1px solid rgba(244,240,233,.28); background:rgba(11,22,28,.63); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }.brand-help-step { position:relative; display:grid; min-height:0; grid-template-columns:39px minmax(0,1fr); gap:17px; padding:20px 28px; border-bottom:1px solid rgba(244,240,233,.22); color:#f4f0e9; background:transparent; transition:background .3s ease,transform .3s cubic-bezier(.16,1,.3,1); }.brand-help-step:last-child { border-bottom:0; }.brand-help-step > span { padding-top:3px; color:#df9370; font-size:10px; font-weight:700; letter-spacing:.1em; }.brand-help-step p { margin:0; color:#d99070; font-size:9px; font-weight:700; letter-spacing:.12em; }.brand-help-step h3 { max-width:330px; margin:8px 29px 0 0; font:500 clamp(1.65rem,2.2vw,2.45rem)/.9 var(--serif); letter-spacing:-.045em; }.brand-help-step small { display:block; max-width:350px; margin-top:10px; color:#d9dcd6; font-size:12px; line-height:1.45; }.brand-help-step::after { position:absolute; top:50%; right:25px; color:#df9370; content:"↗"; font-size:17px; opacity:0; transform:translate(-5px,-50%); transition:opacity .25s ease,transform .25s ease; }.brand-help-step:hover { background:rgba(222,147,112,.13); transform:translateX(-6px); }.brand-help-step:hover::after { opacity:1; transform:translate(0,-50%); }.brand-help-link { display:inline-flex; align-items:center; gap:13px; margin-top:31px; padding-bottom:8px; border-bottom:1px solid #1c1b18; color:#1c1b18; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }.brand-help-link span { color:#bc6647; font-size:18px; transition:transform .25s ease; }.brand-help-link:hover span { transform:translate(3px,-3px); }
@media (max-width:800px) { .atelier-visual { min-height:400px; aspect-ratio:auto; margin-top:54px; }.atelier-visual figcaption { right:17px; bottom:17px; left:17px; }.atelier-visual figcaption p { font-size:1.12rem; }.brand-help { padding:84px 22px; }.brand-help-head { display:block; margin-bottom:48px; }.brand-help-head h2 { margin-top:28px; font-size:clamp(2.9rem,12vw,4rem); }.brand-help-head > p { margin-top:25px; }.brand-help-stage { min-height:0; overflow:visible; background:none; }.brand-help-media { position:relative; aspect-ratio:1366 / 768; }.brand-help-media figcaption { top:14px; left:14px; font-size:8px; }.brand-help-media figcaption span:last-child { display:none; }.brand-help-steps { position:relative; display:block; width:auto; margin-top:12px; border-left:0; background:#153846; backdrop-filter:none; -webkit-backdrop-filter:none; }.brand-help-step { min-height:155px; padding:20px 17px; grid-template-columns:31px minmax(0,1fr); gap:12px; }.brand-help-step h3 { font-size:clamp(1.85rem,9vw,2.6rem); }.brand-help-step small { margin-top:9px; font-size:12px; }.brand-help-step::after { right:17px; opacity:1; }.brand-help-step:hover { transform:none; }.brand-help-link { margin-top:27px; } }

/* Brand-help rebuild: the writing and the visual are one connected digital system. */
.brand-help-stage { position:relative; min-height:clamp(530px,43vw,680px); padding:clamp(68px,6vw,94px) clamp(32px,5vw,78px) 46px; overflow:hidden; background:#0d171d; isolation:isolate; }.brand-help-stage::before { position:absolute; inset:0; z-index:-2; content:""; background:linear-gradient(90deg,transparent 32%,rgba(218,229,231,.075) 32%,rgba(218,229,231,.075) calc(32% + 1px),transparent calc(32% + 1px)),linear-gradient(0deg,transparent 33.3%,rgba(218,229,231,.055) 33.3%,rgba(218,229,231,.055) calc(33.3% + 1px),transparent calc(33.3% + 1px),transparent 66.6%,rgba(218,229,231,.055) 66.6%,rgba(218,229,231,.055) calc(66.6% + 1px),transparent calc(66.6% + 1px)); }.brand-help-stage::after { position:absolute; z-index:-1; top:-35%; right:-16%; width:65%; aspect-ratio:1; border-radius:50%; content:""; background:radial-gradient(circle,rgba(35,94,126,.32),rgba(13,23,29,0) 67%); }.brand-help-stage-label { position:absolute; top:24px; right:clamp(32px,5vw,78px); left:clamp(32px,5vw,78px); z-index:3; display:flex; justify-content:space-between; color:#aeb8b8; font-size:9px; font-weight:700; letter-spacing:.14em; }.brand-help-stage-label span:last-child { color:#db8d6b; }.brand-help-scene { position:absolute; top:50%; right:clamp(26px,4vw,70px); z-index:1; width:min(47%,610px); aspect-ratio:1.08 / 1; transform:translateY(-42%); }.brand-help-orbit { position:absolute; display:block; border:1px solid rgba(194,214,216,.2); border-radius:50%; }.brand-help-orbit-one { inset:4% 0 10% 4%; transform:rotate(-15deg); }.brand-help-orbit-two { inset:15% 10% 2% 0; border-color:rgba(217,132,98,.32); transform:rotate(24deg); }.brand-help-orbit-three { inset:28% 4% 16% 11%; border-color:rgba(74,143,185,.42); transform:rotate(-28deg); }.brand-help-window { position:absolute; inset:19% 9% 17% 13%; overflow:hidden; border:1px solid rgba(223,235,232,.42); background:linear-gradient(135deg,rgba(28,58,71,.98),rgba(10,20,26,.98)); box-shadow:0 28px 60px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.12); transform:perspective(1000px) rotateY(-12deg) rotateX(5deg) rotateZ(-4deg); }.brand-help-window::before { position:absolute; top:-55%; right:-30%; width:95%; aspect-ratio:1; border:1px solid rgba(223,235,232,.12); border-radius:50%; content:""; }.brand-help-window-bar { position:relative; z-index:2; display:flex; align-items:center; gap:6px; height:30px; padding:0 13px; border-bottom:1px solid rgba(223,235,232,.18); color:#c9d2d0; font-size:7px; letter-spacing:.12em; }.brand-help-window-bar span { width:5px; height:5px; border-radius:50%; background:#d98a67; }.brand-help-window-bar span:nth-child(2) { opacity:.55; }.brand-help-window-bar span:nth-child(3) { background:#5a9dbf; }.brand-help-window-bar b { margin-left:auto; font-size:7px; font-weight:700; }.brand-help-window-body { position:absolute; inset:31px 0 0; overflow:hidden; }.brand-help-window-arch { position:absolute; right:12%; bottom:-20%; left:13%; height:90%; border:1px solid rgba(222,235,230,.46); border-bottom:0; border-radius:300px 300px 0 0; }.brand-help-window-arch::after { position:absolute; top:23%; right:17%; bottom:0; left:17%; border:1px solid rgba(219,138,103,.74); border-bottom:0; border-radius:240px 240px 0 0; content:""; }.brand-help-window-copy { position:absolute; top:18%; left:13%; display:grid; gap:7px; width:34%; }.brand-help-window-copy i { display:block; height:4px; background:rgba(232,239,234,.6); }.brand-help-window-copy i:nth-child(2) { width:68%; }.brand-help-window-copy i:nth-child(3) { width:82%; background:#d98a67; }.brand-help-window-copy i:nth-child(4) { width:49%; }.brand-help-window-card { position:absolute; right:15%; bottom:16%; width:28%; aspect-ratio:1; border:1px solid rgba(232,239,234,.44); background:linear-gradient(145deg,#d98a67 0 48%,#1f5671 48%); box-shadow:14px 14px 0 rgba(6,14,19,.32); }.brand-help-glow { position:absolute; right:21%; bottom:6%; width:23%; aspect-ratio:1; border-radius:50%; background:#337eb0; box-shadow:0 0 0 13px rgba(51,126,176,.08),0 0 50px rgba(51,126,176,.55); }.brand-help-steps { position:relative; z-index:2; display:block; width:min(57%,720px); border:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; }.brand-help-step { position:relative; display:grid; grid-template-columns:44px minmax(0,1fr); gap:17px; min-height:0; padding:clamp(22px,2.4vw,34px) 0; border-bottom:1px solid rgba(234,239,233,.23); color:#f4f0e9; background:none; transition:transform .3s cubic-bezier(.16,1,.3,1); }.brand-help-step:first-child { border-top:1px solid rgba(234,239,233,.23); }.brand-help-step:nth-child(2) { margin-left:7%; width:93%; }.brand-help-step > span { padding-top:5px; color:#df9370; font-size:10px; font-weight:700; letter-spacing:.1em; }.brand-help-step p { margin:0; color:#df9370; font-size:9px; font-weight:700; letter-spacing:.14em; }.brand-help-step h3 { max-width:570px; margin:8px 0 0; font:500 clamp(2rem,3.3vw,3.8rem)/.88 var(--serif); letter-spacing:-.052em; }.brand-help-step small { display:block; max-width:410px; margin-top:12px; color:#c9d0ca; font-size:13px; line-height:1.5; }.brand-help-step::after { position:absolute; top:50%; left:calc(100% - 18px); width:clamp(64px,8vw,135px); height:1px; content:""; background:linear-gradient(90deg,rgba(223,147,112,.8),rgba(82,142,177,.05)); opacity:.62; transition:width .3s ease,opacity .3s ease; }.brand-help-step::before { position:absolute; top:calc(50% - 4px); left:calc(100% + clamp(43px,8vw,113px)); width:8px; height:8px; border-radius:50%; content:""; background:#df9370; box-shadow:0 0 0 6px rgba(223,147,112,.1); opacity:.66; transition:transform .3s ease,background .3s ease; }.brand-help-step:hover { background:none; transform:translateX(8px); }.brand-help-step:hover::after { width:clamp(84px,10vw,170px); opacity:1; }.brand-help-step:hover::before { background:#4c9bd0; box-shadow:0 0 0 9px rgba(76,155,208,.12),0 0 18px rgba(76,155,208,.65); transform:scale(1.18); }.brand-help-link { margin-top:31px; }
@media (max-width:1000px) { .brand-help-scene { width:45%; right:20px; }.brand-help-steps { width:61%; }.brand-help-step h3 { font-size:clamp(1.85rem,3.7vw,3rem); }.brand-help-step::before { display:none; }.brand-help-step::after { width:clamp(34px,4vw,58px); } }
@media (max-width:800px) { .brand-help-stage { min-height:0; padding:68px 22px 28px; overflow:hidden; background:#0d171d; isolation:isolate; }.brand-help-stage-label { top:20px; right:22px; left:22px; }.brand-help-scene { position:relative; top:auto; right:auto; width:100%; max-width:420px; margin:16px auto 43px; transform:none; }.brand-help-window { inset:19% 9% 17% 13%; }.brand-help-steps { width:100%; margin:0; }.brand-help-step,.brand-help-step:nth-child(2) { width:100%; margin-left:0; padding:25px 0; grid-template-columns:32px minmax(0,1fr); gap:12px; }.brand-help-step h3 { font-size:clamp(2rem,10vw,3rem); }.brand-help-step small { font-size:12px; }.brand-help-step::after,.brand-help-step::before { display:none; }.brand-help-step:hover { transform:none; } }
@media (prefers-reduced-motion:reduce) { .brand-help-window,.brand-help-step,.brand-help-step::after,.brand-help-step::before { transition:none; } }