/* Gold Box 3.2: camada visual responsiva */
:root { --motion-premium: cubic-bezier(.2,.75,.25,1); }
.about-breath { position:relative; color:#17120e; background:linear-gradient(135deg,#f7f4ee 0%,#eee8dd 58%,#e5ddd0 100%); }
.about-breath::before { position:absolute; inset:0; background:radial-gradient(circle at 12% 20%,rgba(183,138,61,.16),transparent 28%),linear-gradient(90deg,transparent 49.9%,rgba(30,24,18,.045) 50%,transparent 50.1%); content:""; pointer-events:none; }
.about-breath .about-rings { border-color:rgba(98,72,31,.13); box-shadow:0 0 0 70px rgba(98,72,31,.025),0 0 0 140px rgba(98,72,31,.018); }
.about-breath .about-copy { position:relative; z-index:1; }
.about-breath .about-lead { color:#2c261f!important; }
.about-breath .about-copy>p { color:#655d52; }
.about-breath .about-principles div { border-color:rgba(55,42,27,.13); background:rgba(255,255,255,.5); box-shadow:0 12px 30px rgba(69,50,25,.05); }
.about-breath .about-principles strong { color:#221c16; }
.about-breath .about-principles span { color:#756c61; }
.services-bento { grid-template-columns:repeat(12,minmax(0,1fr)); gap:20px; }
.services-bento .service-card { grid-column:span 4; min-height:0; padding:26px; transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0)); transform-style:preserve-3d; transition:transform 420ms var(--motion-premium),border-color 320ms ease,box-shadow 320ms ease; will-change:transform; }
.services-bento .service-card-wide { grid-column:span 8; }
.services-bento .service-card:nth-child(8) { grid-column:span 12; }
.services-bento .service-card:hover { --lift:-7px; border-color:rgba(226,190,119,.48); box-shadow:0 28px 70px rgba(0,0,0,.35); }
.services-bento .service-card::before { background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(214,165,72,.18),transparent 37%); opacity:.65; }
.services-bento .service-card>* { position:relative; z-index:1; }
.services-bento .service-icon { width:43px; height:43px; margin-bottom:18px; border-radius:13px; }
.services-bento .service-number { top:27px; right:27px; }
.service-visual { position:relative; height:180px; margin:0 0 24px; overflow:hidden; border:1px solid rgba(255,255,255,.09); border-radius:18px; background:#0a0908; box-shadow:inset 0 1px rgba(255,255,255,.04); transform:translateZ(18px); }
.service-card-wide .service-visual { height:202px; }
.service-visual::after { position:absolute; inset:0; background:linear-gradient(180deg,transparent 48%,rgba(2,2,2,.5)); content:""; pointer-events:none; }
.visual-social { background:radial-gradient(circle at 50% 100%,rgba(183,138,61,.24),transparent 52%),#090806; }
.visual-social img { position:absolute; top:14px; width:116px; height:158px; border:1px solid rgba(238,205,136,.28); border-radius:11px; object-fit:cover; box-shadow:0 18px 40px rgba(0,0,0,.5); transition:transform 600ms var(--motion-premium); }
.visual-social img:first-child { left:calc(50% - 112px); transform:rotate(-7deg); }
.visual-social img:nth-child(2) { left:calc(50% + 2px); transform:rotate(7deg); }
.visual-social>span { position:absolute; right:14px; bottom:12px; z-index:2; color:#dfc17e; font-size:.48rem; font-weight:800; letter-spacing:.14em; }
.service-card:hover .visual-social img:first-child { transform:translate(-9px,-5px) rotate(-10deg); }
.service-card:hover .visual-social img:nth-child(2) { transform:translate(9px,-5px) rotate(10deg); }
.visual-identity { display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:22px; background:linear-gradient(140deg,#17120e,#070707); }
.visual-brand { display:grid; width:94px; height:94px; place-items:center; border:1px solid rgba(224,189,118,.34); border-radius:50%; box-shadow:0 0 55px rgba(183,138,61,.22); }
.visual-brand img { width:84px; height:84px; border-radius:50%; transition:transform 600ms var(--motion-premium); }
.visual-palette { display:flex; align-self:end; justify-self:end; gap:6px; }
.visual-palette i { width:19px; height:54px; border-radius:99px; background:#050505; }
.visual-palette i:nth-child(2) { background:#b78a3d; }
.visual-palette i:nth-child(3) { background:#e2ddd1; }
.visual-palette i:nth-child(4) { background:#5c5144; }
.visual-identity small { position:absolute; right:21px; top:22px; color:#8f826f; font-size:.48rem; font-weight:800; letter-spacing:.17em; }
.service-card:hover .visual-brand img { transform:rotate(7deg) scale(1.04); }
.visual-web { padding:15px 44px 15px 15px; background:radial-gradient(circle at 78% 58%,rgba(196,145,51,.2),transparent 35%),#080808; }
.mini-browser { position:relative; height:100%; padding:11px; border:1px solid rgba(255,255,255,.13); border-radius:10px; background:#13110f; }
.mini-browser>i { display:inline-block; width:5px; height:5px; margin-right:2px; border-radius:50%; background:#786b5e; }
.mini-browser>span { float:right; color:#776c60; font-size:.42rem; }
.mini-browser>div { position:absolute; inset:35px 12px 12px; padding:13px; background:radial-gradient(circle at 78% 32%,rgba(202,153,61,.2),transparent 36%),#090909; }
.mini-browser strong { color:#f3eadb; font-size:.82rem; line-height:1.05; letter-spacing:-.04em; }
.mini-browser b { display:block; width:34px; height:3px; margin-bottom:9px; background:#b78a3d; }
.mini-browser em { display:block; width:60px; height:13px; margin-top:11px; border-radius:99px; background:linear-gradient(90deg,#e1c17c,#aa782f); }
.mini-phone { position:absolute; right:13px; bottom:10px; z-index:2; width:51px; height:105px; padding:18px 7px 7px; border:1px solid rgba(255,255,255,.28); border-radius:12px; background:#070707; box-shadow:0 13px 28px rgba(0,0,0,.52); transition:transform 500ms var(--motion-premium); }
.mini-phone b { position:absolute; top:6px; left:17px; width:17px; height:3px; border-radius:99px; background:#50483f; }
.mini-phone span { display:block; height:8px; margin-bottom:6px; border-radius:3px; background:rgba(255,255,255,.1); }
.mini-phone span:first-of-type { height:32px; background:linear-gradient(145deg,#6e4b22,#16110c); }
.service-card:hover .mini-phone { transform:translate(0,-6px) rotate(3deg); }
.visual-profile { padding:64px 20px 15px; background:#111; }
.profile-cover { position:absolute; inset:0 0 auto; height:50px; background:linear-gradient(115deg,#775223,#d2a758 48%,#231a11); }
.profile-avatar { position:absolute; top:29px; left:20px; display:grid; width:48px; height:48px; place-items:center; border:3px solid #111; border-radius:50%; background:#e9e4da; color:#16120e; font-size:.62rem; font-weight:800; }
.visual-profile strong,.visual-profile small { display:block; margin-left:62px; }
.visual-profile strong { color:#f1ede6; font-size:.72rem; }
.visual-profile small { color:#887f75; font-size:.48rem; }
.visual-profile>span { display:block; width:86%; height:5px; margin-top:13px; border-radius:99px; background:#282522; }
.visual-profile>span:nth-of-type(2) { width:68%; }
.visual-profile>span:nth-of-type(3) { width:76%; }
.visual-materials { perspective:900px; background:radial-gradient(circle at 50% 90%,rgba(183,138,61,.24),transparent 50%),#080808; }
.visual-materials img { position:absolute; top:17px; left:50%; width:86px; height:128px; border:1px solid rgba(255,255,255,.2); border-radius:7px; object-fit:cover; box-shadow:0 18px 28px rgba(0,0,0,.55); transition:transform 560ms var(--motion-premium); }
.visual-materials img:first-child { transform:translateX(-105%) rotate(-9deg); }
.visual-materials img:nth-child(2) { z-index:2; transform:translateX(-50%) translateY(7px); }
.visual-materials img:nth-child(3) { transform:translateX(5%) rotate(9deg); }
.service-card:hover .visual-materials img:first-child { transform:translateX(-112%) rotate(-12deg); }
.service-card:hover .visual-materials img:nth-child(2) { transform:translateX(-50%) translateY(0); }
.service-card:hover .visual-materials img:nth-child(3) { transform:translateX(12%) rotate(12deg); }
.visual-flow { display:flex; align-items:center; justify-content:center; gap:10px; padding:24px 15px; background:radial-gradient(circle at center,rgba(194,145,52,.2),transparent 58%),#080808; }
.visual-flow span { display:grid; z-index:2; width:48px; height:48px; place-items:center; border:1px solid rgba(230,195,125,.38); border-radius:14px; background:#15120e; color:#e7ca89; font-size:.52rem; font-weight:800; box-shadow:0 0 25px rgba(183,138,61,.12); }
.visual-flow i { width:22px; height:1px; background:linear-gradient(90deg,#7d5727,#d5aa59); }
.visual-flow b { position:absolute; bottom:14px; padding:5px 9px; border:1px solid rgba(67,197,149,.24); border-radius:99px; background:rgba(20,93,69,.15); color:#66d5aa; font-size:.42rem; letter-spacing:.14em; }
.visual-dashboard { padding:18px; background:linear-gradient(145deg,#12100e,#070707); }
.visual-dashboard header,.visual-dashboard footer { display:flex; align-items:center; justify-content:space-between; }
.visual-dashboard header span { color:#8f857a; font-size:.46rem; font-weight:800; letter-spacing:.13em; }
.visual-dashboard header b { color:#61d8ad; font-size:.43rem; }
.dash-chart { display:flex; align-items:end; gap:8px; height:83px; margin:15px 0 12px; padding:10px 10px 0; border-left:1px solid #2f2a25; border-bottom:1px solid #2f2a25; }
.dash-chart i { flex:1; height:35%; border-radius:4px 4px 0 0; background:linear-gradient(#dfb65f,#6c471d); transition:height 520ms var(--motion-premium); }
.dash-chart i:nth-child(2) { height:58%; }.dash-chart i:nth-child(3) { height:43%; }.dash-chart i:nth-child(4) { height:78%; }.dash-chart i:nth-child(5) { height:92%; }
.service-card:hover .dash-chart i:nth-child(2) { height:71%; }.service-card:hover .dash-chart i:nth-child(4) { height:91%; }
.visual-dashboard footer { gap:8px; }.visual-dashboard footer span { flex:1; height:16px; border:1px solid #292622; border-radius:5px; background:#141310; }
.visual-video { background:#070707; }
.visual-video>img { width:46%; height:100%; object-fit:cover; object-position:center; opacity:.75; transition:transform 700ms var(--motion-premium); }
.video-interface { position:absolute; inset:0 0 0 40%; z-index:2; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; background:linear-gradient(90deg,transparent,#090909 20%); }
.video-interface>span { position:absolute; top:14px; right:16px; color:#8c8175; font-size:.47rem; }
.video-interface button { display:grid; width:47px; height:47px; place-items:center; border:1px solid #d2aa5b; border-radius:50%; background:#d5aa58; color:#090909; font-size:.75rem; pointer-events:none; }
.video-interface>div { width:68%; height:3px; border-radius:99px; background:#302c27; }.video-interface>div i { display:block; width:42%; height:100%; background:#c99b48; }
.video-interface small { color:#8d8275; font-size:.45rem; font-weight:800; letter-spacing:.14em; }
.service-card:hover .visual-video>img { transform:scale(1.06); }
.case-panel { position:relative; isolation:isolate; transition:transform 420ms var(--motion-premium),box-shadow 420ms ease; }
.case-panel::after { position:absolute; inset:0 0 auto; z-index:3; height:1px; background:linear-gradient(90deg,transparent,rgba(208,163,77,.72),transparent); content:""; pointer-events:none; }
.case-panel:hover { transform:translateY(-4px); box-shadow:0 30px 90px rgba(43,31,17,.13); }
.case-accent-joira .case-gallery { background:radial-gradient(circle at 48% 38%,rgba(204,158,73,.22),transparent 43%),linear-gradient(145deg,#201810,#070707 72%); }
.case-accent-blix .case-gallery { background:radial-gradient(circle at 48% 38%,rgba(20,145,101,.2),transparent 43%),linear-gradient(145deg,#0c211b,#070a09 72%); }
.case-accent-blix::after { background:linear-gradient(90deg,transparent,rgba(44,176,128,.7),transparent); }
.case-gallery { touch-action:pan-y; }
.case-slide:focus-visible,.service-card a:focus-visible { outline:2px solid #e2bd70; outline-offset:3px; }
@media (max-width:1080px) {
  .services-bento { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .services-bento .service-card,.services-bento .service-card-wide,.services-bento .service-card:nth-child(8) { grid-column:auto; }
  .service-card-wide .service-visual { height:180px; }
  .about-breath { padding-block:110px; }
}
@media (max-width:820px) {
  .about-breath { padding-block:88px; }
  .about-breath .expert-grid { gap:42px; }
  .about-breath .expert-identity { min-height:470px; }
  .services-bento { grid-template-columns:1fr; gap:16px; }
  .services-bento .service-card { min-height:0; padding:24px; }
  .service-visual,.service-card-wide .service-visual { height:180px; }
  .case-panel:hover { transform:none; }
  .case-panel-reverse .case-copy { order:1; }
  .case-panel-reverse .case-gallery { order:2; }
}
@media (max-width:540px) {
  .about-breath { padding-block:70px; }
  .about-breath .about-rings { display:none; }
  .about-breath .expert-identity { min-height:390px; padding:38px 20px; border-radius:26px; }
  .about-breath .expert-logo { width:134px; height:134px; margin-bottom:25px; }
  .about-breath .expert-logo img { width:122px; height:122px; }
  .about-breath .about-principles { grid-template-columns:1fr; }
  .services-bento .service-card { padding:21px; border-radius:20px; }
  .service-visual,.service-card-wide .service-visual { height:158px; margin-bottom:20px; border-radius:15px; }
  .visual-social img { top:11px; width:96px; height:132px; }
  .visual-brand { width:80px; height:80px; }.visual-brand img { width:70px; height:70px; }
  .visual-flow { gap:6px; }.visual-flow span { width:41px; height:41px; border-radius:12px; }.visual-flow i { width:13px; }
  .case-panel { border-radius:23px; }
  .case-gallery { min-height:0; }
  .case-gallery::before { inset:11px; border-radius:17px; }
  .case-slide { inset:17px; width:calc(100% - 34px); height:calc(100% - 34px); border-radius:15px; }
}
@media (hover:none),(pointer:coarse) {
  .services-bento .service-card { transform:none!important; will-change:auto; }
  .services-bento .service-card:hover { --lift:0; }
}
@media (prefers-reduced-motion:reduce) {
  .services-bento .service-card,.service-visual *,.case-panel { transition:none!important; transform:none!important; }
}
html,body { max-width:100%; overflow-x:clip; }
.hero-copy { min-width:0; width:100%; }
.hero h1,.hero-lead { max-width:100%; overflow-wrap:break-word; }
@media (max-width:540px) {
  .hero h1 { font-size:clamp(2.2rem,10.7vw,2.8rem); line-height:1.02; }
  .hero h1 em { margin-top:8px; }
  .hero-lead { font-size:.9rem; line-height:1.68; }
}
.services-bento .service-number { position:absolute; top:27px; right:27px; z-index:2; }