/* ===================== 3D-слой: иконки, эмблемы, сцены ===================== */
/* --- объёмные иконки */
.i3{position:relative;display:inline-grid;width:17px;height:17px;flex:none;transform-style:preserve-3d;transform:perspective(120px);will-change:transform}
.i3 svg{grid-area:1/1;width:100%;height:100%}
.i3 .i3b{transform:translateZ(var(--z));color:var(--accent-line);opacity:.9}
.i3 .i3f{transform:translateZ(0);color:var(--muted)}
.nav a .i3{width:17px;height:17px}
.nav a .i3 svg{stroke:currentColor !important}
.nav a.active .i3 .i3f,.nav a:hover .i3 .i3f{color:var(--accent)}
.nav a:hover .i3,.nav a.active .i3{animation:var(--ia,i3-tilt) .9s cubic-bezier(.3,.7,.3,1) both}
.mnav a .i3{width:21px;height:21px;margin-bottom:1px}
.mnav a .i3 .i3f{color:currentColor}
.mnav a.active .i3{animation:var(--ia,i3-tilt) .9s cubic-bezier(.3,.7,.3,1) both}
.i3[data-i=sun]{--ia:i3-spin}
.i3[data-i=disc]{--ia:i3-coin}
.i3[data-i=cal],.i3[data-i=habit]{--ia:i3-flipx}
.i3[data-i=book],.i3[data-i=news]{--ia:i3-open}
.i3[data-i=film]{--ia:i3-coin}
.i3[data-i=music],.i3[data-i=run]{--ia:i3-hop}
.i3[data-i=heart]{--ia:i3-beat}
.i3[data-i=bag],.i3[data-i=note]{--ia:i3-swing}
.i3[data-i=camera]{--ia:i3-pop}
.i3[data-i=map],.i3[data-i=inbox],.i3[data-i=archive]{--ia:i3-drop}
.i3[data-i=gear]{--ia:i3-gear}
.i3[data-i=check],.i3[data-i=brief]{--ia:i3-tilt}
@keyframes i3-tilt{0%{transform:perspective(120px)}40%{transform:perspective(120px) rotateY(-38deg) rotateX(16deg)}100%{transform:perspective(120px) rotateY(-14deg) rotateX(8deg)}}
@keyframes i3-spin{0%{transform:perspective(120px)}100%{transform:perspective(120px) rotateZ(180deg) rotateX(18deg)}}
@keyframes i3-coin{0%{transform:perspective(120px)}100%{transform:perspective(120px) rotateY(360deg) rotateX(10deg)}}
@keyframes i3-flipx{0%{transform:perspective(120px)}100%{transform:perspective(120px) rotateX(360deg)}}
@keyframes i3-open{0%{transform:perspective(120px)}50%{transform:perspective(120px) rotateY(-52deg)}100%{transform:perspective(120px) rotateY(-18deg) rotateX(6deg)}}
@keyframes i3-hop{0%{transform:perspective(120px)}35%{transform:perspective(120px) translateY(-4px) rotateZ(-10deg) rotateY(-20deg)}70%{transform:perspective(120px) translateY(1px)}100%{transform:perspective(120px) rotateY(-16deg)}}
@keyframes i3-beat{0%,100%{transform:perspective(120px) rotateY(-14deg)}30%{transform:perspective(120px) scale(1.25) rotateY(-14deg)}55%{transform:perspective(120px) scale(.94)}}
@keyframes i3-swing{0%{transform:perspective(120px)}30%{transform:perspective(120px) rotateZ(14deg) rotateY(-20deg)}60%{transform:perspective(120px) rotateZ(-8deg)}100%{transform:perspective(120px) rotateY(-14deg)}}
@keyframes i3-pop{0%{transform:perspective(120px)}40%{transform:perspective(120px) translateZ(14px) rotateY(-24deg)}100%{transform:perspective(120px) rotateY(-14deg) rotateX(8deg)}}
@keyframes i3-drop{0%{transform:perspective(120px) translateY(-5px) rotateX(40deg);opacity:.4}60%{transform:perspective(120px) translateY(1px)}100%{transform:perspective(120px) rotateX(14deg) rotateY(-10deg);opacity:1}}
@keyframes i3-gear{0%{transform:perspective(120px)}100%{transform:perspective(120px) rotateZ(120deg) rotateX(20deg)}}

/* --- эмблема в шапке страницы */
.ph-t{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center}
.ph-t>*:not(.orb){grid-column:2}
.orb{grid-column:1;grid-row:1/span 4;position:relative;width:58px;height:58px;perspective:420px}
.orb-g{position:absolute;inset:0;transform-style:preserve-3d;animation:orb-g 18s linear infinite}
.orb-g i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);border-color:var(--accent) var(--accent) var(--accent-line) transparent;transform-style:preserve-3d}
.orb-g i::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--accent);top:5px;left:50%;box-shadow:0 0 8px var(--accent)}
.orb-g .o1{animation:orb-1 6s linear infinite}
.orb-g .o2{inset:5px;opacity:.75;animation:orb-2 8s linear infinite}
.orb-g .o3{inset:-4px;opacity:.45;animation:orb-3 11s linear infinite}
@keyframes orb-g{to{transform:rotateY(360deg)}}
@keyframes orb-1{from{transform:rotateX(68deg) rotateZ(0)}to{transform:rotateX(68deg) rotateZ(360deg)}}
@keyframes orb-2{from{transform:rotateY(64deg) rotateZ(0)}to{transform:rotateY(64deg) rotateZ(-360deg)}}
@keyframes orb-3{from{transform:rotateX(-40deg) rotateY(40deg) rotateZ(0)}to{transform:rotateX(-40deg) rotateY(40deg) rotateZ(360deg)}}
.orb-c{position:absolute;inset:13px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff 0,var(--accent-soft) 55%,#cdeceb 100%);box-shadow:0 6px 16px -6px rgba(15,158,153,.45),inset 0 -3px 6px rgba(15,158,153,.12);display:grid;place-items:center}
.orb-c .i3{width:18px;height:18px;animation:orb-i 5s ease-in-out infinite}
.orb-c .i3 .i3f{color:var(--accent-ink)}
@keyframes orb-i{0%,100%{transform:perspective(120px) rotateY(-24deg) rotateX(10deg)}50%{transform:perspective(120px) rotateY(24deg) rotateX(-6deg)}}

/* --- появление страницы */
.content.enter>*{animation:rise3d .55s cubic-bezier(.2,.75,.25,1) both}
.content.enter>*:nth-child(2){animation-delay:.05s}.content.enter>*:nth-child(3){animation-delay:.1s}.content.enter>*:nth-child(4){animation-delay:.15s}.content.enter>*:nth-child(n+5){animation-delay:.2s}
@keyframes rise3d{from{opacity:0;transform:perspective(1000px) rotateX(7deg) translateY(12px)}to{opacity:1;transform:none}}
.ccard,.tilt{transition:transform .25s ease-out,border-color .15s,box-shadow .25s;transform-style:preserve-3d;will-change:transform}
.ccard:hover{box-shadow:0 14px 30px -18px rgba(11,127,123,.45)}

/* --- геро-блок со сценой */
.hero3d{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:8px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(160deg,#fff 0%,#f4fbfb 60%,#eaf7f6 100%);margin-bottom:16px;overflow:hidden;position:relative}
.h3-scene{position:relative;min-height:250px;perspective:1100px;display:grid;place-items:center;overflow:hidden}
.h3-stage{position:relative;transform-style:preserve-3d;display:grid;place-items:center;margin-top:30px}
.h3-cap{position:absolute;left:18px;right:18px;bottom:12px;display:flex;justify-content:space-between;font-size:var(--t-xs);color:var(--faint)}
.h3-side{padding:22px 22px 20px 6px;display:flex;flex-direction:column;gap:14px;justify-content:center;min-width:0}
.h3-big{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.h3-big.three{grid-template-columns:repeat(3,1fr)}
.h3-big>div{background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0}
.h3-big .k,.h3-next .k{font-size:var(--t-xs);color:var(--muted);font-weight:600}
.h3-big .v{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-top:2px}
.h3-big .v small{font-size:13px;color:var(--muted);margin-left:2px;font-weight:600}
.h3-big .d{font-size:var(--t-xs);color:var(--faint)}
.h3-ready{display:flex;gap:10px;align-items:flex-start;background:var(--accent-soft);border-radius:10px;padding:10px 12px;color:var(--accent-ink)}
.h3-ready svg{width:18px;height:18px;flex:none;margin-top:2px}
.h3-next{display:flex;flex-direction:column;gap:2px;color:var(--text);text-decoration:none}
.h3-next b{font-size:18px;line-height:1.3}
a.h3-next:hover b{color:var(--accent-ink)}
.h3-mini{display:flex;gap:14px;align-items:center}
.h3-kv{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1;min-width:0}
.h3-kv>div{display:flex;flex-direction:column;min-width:0}
.h3-kv span{font-size:var(--t-xs);color:var(--muted)}
.h3-kv b{font-size:16px}
.h3-kv em{font-style:normal;font-size:11px;color:var(--faint)}

/* --- изометрия */
.iso{position:relative;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-40deg);animation:iso-sway 14s ease-in-out infinite alternate}
.iso::before{content:"";position:absolute;inset:-16px;border-radius:10px;background:linear-gradient(135deg,rgba(15,158,153,.10),rgba(15,158,153,.03));background-image:linear-gradient(rgba(15,158,153,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(15,158,153,.10) 1px,transparent 1px);background-size:16px 16px;box-shadow:0 0 0 1px rgba(15,158,153,.12)}
@keyframes iso-sway{from{transform:rotateX(58deg) rotateZ(-34deg)}to{transform:rotateX(54deg) rotateZ(-50deg)}}
.bx{position:absolute;top:0;width:var(--w);height:var(--w);transform-style:preserve-3d;transform-origin:center;animation:bx-up .9s cubic-bezier(.2,.8,.2,1) var(--d,0ms) both;--ct:#3cc2bc;--cf:#0f9e99;--cs:#0b7f7b;cursor:default}
.bx i{position:absolute;display:block}
.bx .t{inset:0;transform:translateZ(var(--h));background:var(--ct);border-radius:2px}
.bx .f{left:0;top:100%;width:var(--w);height:var(--h);transform-origin:top;transform:rotateX(90deg);background:linear-gradient(0deg,var(--cf),color-mix(in srgb,var(--cf) 70%,#fff))}
.bx .s{left:0;top:0;width:var(--h);height:var(--w);transform-origin:left;transform:rotateY(-90deg);background:linear-gradient(90deg,var(--cs),color-mix(in srgb,var(--cs) 75%,#fff))}
.bx.cur{--ct:#5fe0d6;--cf:#12b3ac;--cs:#0b8c86}
.bx.zero{--ct:#cfe7e6;--cf:#b9dcda;--cs:#a5d0ce}
.bx:not(.eq):hover{--ct:#8af0e8}
@keyframes bx-up{from{transform:scaleZ(.02)}to{transform:scaleZ(1)}}
.bx.eq{animation:eq var(--t) ease-in-out var(--d) infinite alternate}
@keyframes eq{0%{transform:scaleZ(.1)}50%{transform:scaleZ(.55)}100%{transform:scaleZ(1)}}
.eqf{animation-duration:20s}

/* --- кольцо сна */
.ring3d{position:relative;width:86px;height:86px;flex:none;perspective:400px;display:grid;place-items:center}
.ring3d .rg{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(58deg);animation:ring-r 9s linear infinite}
.ring3d .rg i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p)*1%),#d9eeed 0);-webkit-mask:radial-gradient(circle,transparent 58%,#000 59%);mask:radial-gradient(circle,transparent 58%,#000 59%)}
.ring3d .rg i:nth-child(1){transform:translateZ(0);opacity:.35}.ring3d .rg i:nth-child(2){transform:translateZ(2px);opacity:.55}.ring3d .rg i:nth-child(3){transform:translateZ(4px);opacity:.8}.ring3d .rg i:nth-child(4){transform:translateZ(6px)}
@keyframes ring-r{from{transform:rotateX(58deg) rotateZ(0)}to{transform:rotateX(58deg) rotateZ(360deg)}}
.ring3d b{position:relative;font-size:20px;margin-top:-10px}
.ring3d span{position:absolute;bottom:4px;font-size:11px;color:var(--muted)}

/* --- вертушка */
.tt{width:330px;height:250px;perspective:900px;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tt-deck{position:relative;width:300px;height:220px;border-radius:18px;background:linear-gradient(150deg,#ffffff,#eef5f5);box-shadow:0 1px 0 #fff inset,0 10px 0 -2px #d8e4e3,0 30px 40px -18px rgba(11,80,78,.45);transform-style:preserve-3d;transform:rotateX(50deg) rotateZ(-16deg);animation:tt-sway 16s ease-in-out infinite alternate}
@keyframes tt-sway{from{transform:rotateX(50deg) rotateZ(-12deg)}to{transform:rotateX(46deg) rotateZ(-22deg)}}
.tt-plat{position:absolute;left:18px;top:16px;width:188px;height:188px;border-radius:50%;background:radial-gradient(circle,#d7e1e0 0 60%,#c3d1d0 61%,#e6eeed 70%);transform-style:preserve-3d;transform:translateZ(3px);box-shadow:0 0 0 1px #cbd8d7}
.tt-rec{position:absolute;inset:6px;border-radius:50%;transform:translateZ(5px);background:radial-gradient(circle,#0e1212 0 18%,transparent 18.5%),repeating-radial-gradient(circle,#151a1a 0 1.2px,#232a2a 1.2px 2.6px);box-shadow:0 6px 10px -4px rgba(0,0,0,.5);display:grid;place-items:center;animation:tt-spin 1.8s linear infinite;animation-play-state:paused}
.tt.on .tt-rec{animation-play-state:running}
@keyframes tt-spin{to{transform:translateZ(5px) rotate(360deg)}}
.tt-label{width:62px;height:62px;border-radius:50%;background:radial-gradient(circle,#fff 0 3px,transparent 3.5px),linear-gradient(135deg,var(--accent),#0b6f6b);background-size:cover;background-position:center;display:grid;place-items:center;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.tt-label span{color:#fff;font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;max-width:46px;text-align:center;line-height:1.1;overflow:hidden}
.tt-sheen{position:absolute;inset:6px;border-radius:50%;transform:translateZ(6px);pointer-events:none;background:conic-gradient(from 20deg,transparent 0 8%,rgba(255,255,255,.16) 13%,transparent 20% 52%,rgba(255,255,255,.10) 60%,transparent 68%);-webkit-mask:radial-gradient(circle,transparent 18%,#000 19%);mask:radial-gradient(circle,transparent 18%,#000 19%)}
.tt-arm{position:absolute;right:30px;top:22px;width:24px;height:150px;transform-style:preserve-3d;transform:translateZ(14px) rotate(4deg);transform-origin:12px 12px;transition:transform 1.1s cubic-bezier(.4,.1,.2,1)}
.tt.on .tt-arm{transform:translateZ(14px) rotate(27deg)}
.tt-piv{position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#b9c8c7);box-shadow:0 2px 4px rgba(0,0,0,.25)}
.tt-bar{position:absolute;left:10px;top:12px;width:4px;height:120px;border-radius:2px;background:linear-gradient(90deg,#c9d4d3,#fff,#b5c3c2);box-shadow:3px 6px 6px rgba(0,0,0,.18)}
.tt-head{position:absolute;left:4px;top:126px;width:16px;height:22px;border-radius:3px;background:linear-gradient(#2a3131,#0f1414);transform:rotate(-14deg)}
.tt-knob{position:absolute;right:26px;bottom:22px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#c3d0cf);box-shadow:0 2px 3px rgba(0,0,0,.2);transform:translateZ(2px)}
.tt-led{position:absolute;right:62px;bottom:30px;width:6px;height:6px;border-radius:50%;background:#bcc9c8;transform:translateZ(2px)}
.tt.on .tt-led{background:var(--accent);box-shadow:0 0 8px var(--accent)}

/* --- спорт: значки тренировок */
.act-i{width:30px;height:30px;border-radius:8px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;flex:none}
.act-i svg{width:16px;height:16px}

@media (max-width:860px){
  .hero3d{grid-template-columns:1fr}
  .h3-scene{min-height:210px}
  .h3-side{padding:4px 16px 18px}
  .h3-stage{transform:scale(.74);margin-top:46px}
  .tt{transform:scale(.8)}
  .orb{width:46px;height:46px}.ph-t{column-gap:12px}
  .orb-c{inset:10px}
  .h3-big .v{font-size:21px}
}
@media (prefers-reduced-motion: reduce){
  .orb-g,.orb-g i,.orb-c .i3,.iso,.bx,.bx.eq,.ring3d .rg,.tt-deck,.tt-rec,.content.enter>*,.nav a .i3,.mnav a .i3{animation:none !important}
}
.lr-r{margin:14px 0 4px;max-height:52vh;overflow:auto;display:flex;flex-direction:column;gap:6px}
.lr-i{display:flex;gap:12px;align-items:center;padding:6px;border-radius:10px}
.lr-i:hover{background:var(--soft)}
.lr-i img{width:40px;height:56px;object-fit:cover;border-radius:4px;flex:none;background:var(--soft);box-shadow:2px 3px 6px -2px rgba(0,0,0,.25)}
.lr-i .title{flex:1;min-width:0}.lr-i .t{font-weight:600;line-height:1.3}.lr-i .meta{font-size:var(--t-xs);color:var(--muted)}