:root, [data-theme="light"] {
  --bg: #f5f5f7; --card: #ffffff; --card-2: #f9f9fb; --text: #1d1d1f; --text-2: #6e6e73; --text-3: #a1a1a6;
  --border: rgba(0, 0, 0, .08); --border-hi: rgba(0, 0, 0, .16); --accent: #0071e3; --accent-2: #5e5ce6;
  --spot: rgba(0, 113, 227, .09); --grid: rgba(0, 0, 0, .045); --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -12px rgba(0, 0, 0, .12);
  --island: #000; color-scheme: light;
}
[data-theme="dark"] {
  --bg: #09090b; --card: #131316; --card-2: #18181c; --text: #f5f5f7; --text-2: #a1a1a6; --text-3: #63636b;
  --border: rgba(255, 255, 255, .08); --border-hi: rgba(255, 255, 255, .18); --accent: #2997ff; --accent-2: #7d7aff;
  --spot: rgba(41, 151, 255, .13); --grid: rgba(255, 255, 255, .035); --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 40px -24px rgba(0, 0, 0, .8);
  --island: #000; color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; scrollbar-gutter: stable; }
html.modal-lock { overflow: hidden; }
body {
  font-family: 'Geist', -apple-system, system-ui, sans-serif; background: var(--bg); color: var(--text);
  line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background .4s, color .4s; overflow-x: hidden;
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}
body::after {
  content: ''; position: fixed; left: 50%; top: -340px; width: 1100px; height: 600px; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); filter: blur(40px);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
.mono { font-family: 'Geist Mono', ui-monospace, monospace; }
.i { display: inline-flex; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ─── Nav ─────────────────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 40; backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); background: color-mix(in srgb, var(--bg) 72%, transparent); border-bottom: 1px solid var(--border); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.02em; }
.brand .b-short { display: none; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--text); color: var(--bg); font-size: 12px; font-weight: 700; }
.links { display: flex; gap: 4px; }
.links a { padding: 7px 14px; border-radius: 999px; font-size: 14px; color: var(--text-2); transition: color .2s, background .2s; }
.links a:hover { color: var(--text); background: var(--border); }
.tools { display: flex; gap: 8px; align-items: center; }
.lang-switch { display: flex; padding: 3px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow); }
.lang-switch button { position: relative; z-index: 0; min-width: 40px; padding: 0 10px; border-radius: 7px; font-size: 12.5px; font-weight: 650; letter-spacing: .05em; color: var(--text-3); transition: color .25s; }
.lang-switch button.on { color: var(--accent); }
.lang-pill { position: absolute; inset: 0; z-index: -1; border-radius: 7px; background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.kbd { font-family: 'Geist Mono', monospace; font-size: 11px; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--card-2); color: var(--text-2); }
.icon-btn { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow); }

/* ─── Cards + spotlight ───────────────────────────────────────────────── */
/* No CSS transition on transform here — Framer Motion drives transforms every frame. */
.card {
  position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 26px; overflow: hidden;
  box-shadow: var(--shadow); transition: border-color .3s;
}
.card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(420px circle at var(--x, -999px) var(--y, -999px), var(--spot), transparent 45%);
}
.card::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1px;
  background: radial-gradient(260px circle at var(--x, -999px) var(--y, -999px), color-mix(in srgb, var(--accent) 55%, transparent), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.card > * { position: relative; z-index: 1; }
.pad { padding: 26px; }
.label { font-size: 12px; font-weight: 500; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }

section { padding: 36px 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 60px 0 22px; }
.sec-head h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 650; letter-spacing: -.035em; line-height: 1.05; }
.sec-head p { color: var(--text-2); max-width: 380px; font-size: 15px; }
.eyebrow { display: block; font-size: 13px; color: var(--accent); font-weight: 550; margin-bottom: 10px; }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }

/* ─── Hero bento ──────────────────────────────────────────────────────── */
.hero { padding-top: 34px; }
.hero-grid {
  display: grid; gap: 14px; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "intro intro intro intro intro intro intro intro photo photo photo photo"
    "years years years globe globe globe globe globe globe status status status"
    "apps  apps  apps  globe globe globe globe globe globe lang   lang   lang"
    "mq    mq    mq    mq    mq    mq    mq    mq    mq    mq     mq     mq";
}
.b-intro { grid-area: intro; padding: 36px; display: flex; flex-direction: column; justify-content: space-between; min-height: 420px; }
.b-photo { grid-area: photo; min-height: 420px; }
.b-years { grid-area: years; } .b-apps { grid-area: apps; } .b-status { grid-area: status; } .b-lang { grid-area: lang; }
.b-globe { grid-area: globe; min-height: 300px; }
.b-marquee { grid-area: mq; padding: 18px 0; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; padding: 6px 12px 6px 10px; border-radius: 999px; background: color-mix(in srgb, #34c759 12%, transparent); color: #1f9d48; }
[data-theme="dark"] .status-pill { color: #4ade80; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #34c759; position: relative; }
.pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #34c759; animation: pulse 1.8s infinite; }
@keyframes pulse { to { transform: scale(3); opacity: 0; } }
.hero h1 { font-size: clamp(44px, 6.4vw, 82px); font-weight: 700; letter-spacing: -.05em; line-height: .95; margin: 22px 0 14px; }
.hero h1 .muted { color: var(--text-3); }
.role { font-size: 18px; font-weight: 500; margin-bottom: 12px; }
.bio { color: var(--text-2); max-width: 560px; font-size: 16px; }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 28px; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 12px; font-size: 15px; font-weight: 550; transition: transform .2s, box-shadow .2s, background .2s; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 20px -8px var(--accent); }
.btn-primary:hover { box-shadow: 0 12px 28px -8px var(--accent); }
.btn-ghost { border: 1px solid var(--border-hi); background: var(--card); }
.hint { font-size: 13px; color: var(--text-3); display: flex; align-items: center; gap: 6px; margin-left: 6px; }
.photo { position: absolute !important; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.b-photo:hover .photo { transform: scale(1.05); }
.photo-cap { position: absolute !important; left: 14px; right: 14px; bottom: 14px; display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 16px; background: rgba(0, 0, 0, .35); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #fff; font-size: 13px; }
.photo-cap b { font-size: 15px; display: block; }
.big-num { font-size: 64px; font-weight: 700; letter-spacing: -.06em; line-height: 1; margin: 14px 0 6px; font-variant-numeric: tabular-nums; }
.big-num sup { font-size: 32px; color: var(--accent); vertical-align: top; position: relative; top: 6px; }
.sub { font-size: 14px; color: var(--text-2); }
.globe-title { font-size: 26px; font-weight: 650; letter-spacing: -.03em; display: block; margin-top: 2px; }
.coords { font-size: 12.5px; color: var(--text-3); margin-top: 6px; display: block; }
.globe-canvas { position: absolute !important; z-index: 0 !important; width: 420px; aspect-ratio: 1; right: -24px; top: 54px; cursor: grab; contain: layout paint size; opacity: 0; transition: opacity 1s; }
.clock { font-size: 40px; font-weight: 650; letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin-top: 12px; line-height: 1; }
.langs { list-style: none; margin-top: 12px; }
.langs li { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; font-size: 16px; font-weight: 550; letter-spacing: -.01em; border-top: 1px solid var(--border); }
.langs li:first-child { border-top: 0; }
.langs b { font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 8px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.marquee { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 10px; padding-right: 10px; flex-shrink: 0; animation: mq 50s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-100%); } }
.chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13.5px; font-weight: 500; padding: 7px 13px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-2); color: var(--text-2); }

/* ─── Expertise ───────────────────────────────────────────────────────── */
.exp { grid-column: span 3; padding: 26px; }
.exp-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); margin-bottom: 40px; }
.exp h3 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; }
.exp p { font-size: 14px; color: var(--text-2); }

/* ─── Projects: cards that expand in place (App Store "Today" style) ── */
.p-slot { display: grid; }
.p-slot.p-prostor { grid-column: span 7; grid-row: span 2; }
.p-slot.p-telldus, .p-slot.p-accessersise { grid-column: span 5; }
.p-slot.p-botsi, .p-slot.p-healthcare { grid-column: span 7; }
.p-slot.p-crypto { grid-column: span 5; grid-row: span 2; }
.projects-grid { grid-auto-flow: row dense; }
.p-card { display: flex; flex-direction: column; min-height: 360px; cursor: pointer; }
.p-card:hover { border-color: var(--border-hi); }
.p-card.is-open {
  position: fixed; inset: 0; margin: auto; z-index: 70; cursor: default; min-height: 0;
  width: min(920px, calc(100vw - 32px)); height: min(880px, calc(100dvh - 48px));
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .55);
}
.p-cover {
  position: relative; flex: 1; min-height: 220px; overflow: hidden; container-type: size;
  background: radial-gradient(120% 90% at 50% 110%, color-mix(in srgb, var(--pc) 55%, transparent), color-mix(in srgb, var(--pc) 8%, var(--card-2)) 70%);
}
.is-open .p-cover { flex: none; min-height: 0; aspect-ratio: var(--ar); max-height: 40vh; height: var(--cover-h, auto); }
/* Art keeps one aspect ratio in both states, so the morph is a uniform scale — no squashed screenshots */
.art { position: absolute !important; left: 0; right: 0; bottom: 0; aspect-ratio: var(--ar); margin-inline: auto; width: calc(var(--art-scale, 1) * 100%); }
/* Where the cover can be shorter than the art at full width (tall cards, the open sheet with its
   collapsing header), the art fits the cover's height instead and stays centred.
   Not used on single-row desktop cards: Chrome resolves cq units there during grid intrinsic
   sizing (as 0) and never updates them. */
.p-tall .art, .is-open .art { width: calc(var(--art-scale, 1) * min(100%, calc(100cqh * var(--ar)))); }
.p-tall .p-card:not(.is-open) .art { bottom: max(0px, calc((100cqh - var(--art-scale, 1) * min(100cqw / var(--ar), 100cqh)) / 2)); }
/* Crypto's tall card on desktop: screenshots 30% smaller than a full-cover fit (the open sheet stays full size) */
@media (min-width: 1001px) { .p-crypto .p-card:not(.is-open) { --art-scale: .7; } }
.p-top { position: absolute !important; top: 16px; left: 16px; display: flex; gap: 8px; z-index: 3 !important; }
.tag { font-size: 12px; font-weight: 550; padding: 5px 10px; border-radius: 8px; background: color-mix(in srgb, var(--card) 80%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border); display: inline-flex; align-items: center; gap: 4px; }
.fan img { position: absolute; top: 12%; left: 50%; height: 112%; width: auto; max-width: none; border-radius: 22px; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .2); transform: translateX(-50%); transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.fan img:nth-child(1) { top: 18%; transform: translateX(-50%) translateX(-64%) rotate(-9deg); }
.fan img:nth-child(2) { z-index: 2; }
.fan img:nth-child(3) { top: 18%; transform: translateX(-50%) translateX(64%) rotate(9deg); }
.p-card:not(.is-open):hover .fan img:nth-child(1) { transform: translateX(-50%) translateX(-80%) translateY(-6%) rotate(-13deg); }
.p-card:not(.is-open):hover .fan img:nth-child(2) { transform: translateX(-50%) translateY(-8%); }
.p-card:not(.is-open):hover .fan img:nth-child(3) { transform: translateX(-50%) translateX(80%) translateY(-6%) rotate(13deg); }
.browser-shot { position: absolute; left: 9%; right: 9%; top: 18%; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .5), 0 0 0 1px var(--border); transform: perspective(1200px) rotateX(12deg) scale(.96); transform-origin: top; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.p-card:hover .browser-shot, .is-open .browser-shot { transform: perspective(1200px) rotateX(0) scale(1); }
.browser-shot .bar { height: 26px; background: #1e1e22; display: flex; gap: 6px; align-items: center; padding: 0 10px; }
.browser-shot .bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.browser-shot .bar i:nth-child(2) { background: #febc2e; } .browser-shot .bar i:nth-child(3) { background: #28c840; }
.ipads { position: absolute; left: 4%; right: 4%; top: 17%; display: flex; gap: 2.2%; justify-content: center; }
.ipads img { width: 28%; border-radius: 14px; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .15); transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.p-card:not(.is-open):hover .ipads img:nth-child(odd) { transform: translateY(-6%); }
.p-info { padding: 22px 24px 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border-top: 1px solid var(--border); flex: none; }
.p-info h3 { font-size: 24px; font-weight: 650; letter-spacing: -.03em; width: fit-content; transform-origin: 0 0; }
.is-open .p-info h3 { font-size: 34px; }
.p-info p { font-size: 14px; color: var(--text-2); }
.open-btn { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border-hi); transition: background .3s, color .3s; }
.open-btn .i { transition: transform .4s; }
.p-card:not(.is-open):hover .open-btn { background: var(--text); color: var(--bg); }
.p-card:not(.is-open):hover .open-btn .i { transform: rotate(-45deg); }
.p-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 24px 30px; overscroll-behavior: contain; overflow-anchor: none; }
.p-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.p-body .desc { color: var(--text-2); font-size: 16.5px; margin-bottom: 20px; max-width: 760px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.gallery { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.gallery img { height: 380px; width: auto; border-radius: 18px; scroll-snap-align: start; border: 1px solid var(--border); flex-shrink: 0; }
.gallery.wide img { height: auto; width: 100%; }
.close { position: absolute !important; top: 14px; right: 14px; z-index: 5 !important; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.other { grid-column: span 12; padding: 28px; display: grid; grid-template-columns: 1fr 3fr; gap: 28px; }
.other h3 { font-size: 24px; font-weight: 650; letter-spacing: -.03em; margin: 8px 0; }
.other-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.other-item { padding: 18px; border-radius: 18px; background: var(--card-2); border: 1px solid var(--border); }
.other-item .i { color: var(--accent); margin-bottom: 18px; }
.other-item h4 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 6px; }
.other-item p { font-size: 13px; color: var(--text-2); }

/* ─── Skills ──────────────────────────────────────────────────────────── */
.skills-card { padding: 24px; }
.skill-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.skill { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 550; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--card-2); }
.skill i, .legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }

/* ─── Contact ─────────────────────────────────────────────────────────── */
.c-main { grid-column: span 7; padding: 36px; display: flex; flex-direction: column; justify-content: space-between; min-height: 340px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: 0; }
.c-main h2 { font-size: clamp(36px, 5vw, 60px); font-weight: 700; letter-spacing: -.045em; line-height: 1; margin: 10px 0 14px; }
.c-main p { opacity: .85; max-width: 440px; }
.c-main .btn-primary { background: #fff; color: #000; box-shadow: none; }
.c-main .btn-ghost { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff; }
.c-side { grid-column: span 5; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.c-link { padding: 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.c-link .i { color: var(--accent); }
.c-link b { display: block; font-size: 15px; font-weight: 600; }
.c-link span.v { font-size: 13px; color: var(--text-2); word-break: break-all; }
footer { padding: 40px 0 60px; display: flex; justify-content: space-between; gap: 16px; color: var(--text-3); font-size: 13px; }

/* ─── Command palette ─────────────────────────────────────────────────── */
.cmd-pos { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: center; align-items: flex-start; padding: 14vh 16px 16px; pointer-events: none; }
.cmd { pointer-events: auto; width: min(620px, 100%); border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--border-hi); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55); }
.cmd-input { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); color: var(--text-3); }
.cmd-input input { flex: 1; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; color: var(--text); }
.cmd-list { max-height: 360px; overflow: auto; padding: 8px; }
.cmd-group { font-size: 12px; color: var(--text-3); padding: 10px 10px 6px; }
.cmd-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14.5px; text-align: left; color: var(--text); }
.cmd-item .i { color: var(--text-2); }
.cmd-item.on { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cmd-item .kbd { margin-left: auto; }
.cmd-empty { padding: 30px; text-align: center; color: var(--text-3); }

/* ─── Dynamic Island toast ────────────────────────────────────────────── */
.island-pos { position: fixed; top: 12px; left: 0; right: 0; z-index: 90; display: flex; justify-content: center; pointer-events: none; }
.island { background: var(--island); color: #fff; border-radius: 999px; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; overflow: hidden; white-space: nowrap; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .5); }
.island-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #34c759; color: #000; }
.island b { font-size: 14px; display: block; } .island small { font-size: 12px; color: #a1a1a6; }

@media (max-width: 1000px) {
  .links { display: none; }
  .hero-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "intro intro" "photo photo" "years apps" "globe globe" "status lang" "mq mq";
  }
  .b-photo { min-height: 380px; }
  .exp { grid-column: span 6; }
  .p-slot.p-prostor, .p-slot.p-telldus, .p-slot.p-accessersise, .p-slot.p-botsi, .p-slot.p-healthcare, .p-slot.p-crypto { grid-column: span 12; grid-row: auto; }
  /* single-column cards: the cover takes the art's own aspect ratio, so nothing is cropped or left empty */
  .p-card { min-height: 0; }
  .p-cover { flex: none; min-height: 0; aspect-ratio: var(--ar); max-height: 440px; }
  /* single column: Crypto uses the same proportions as Telldus / Accessersise */
  .p-slot.p-crypto .p-card { --ar: 2.7 !important; }
  .art { width: min(100%, calc(100cqh * var(--ar))); }
  .other { grid-template-columns: 1fr; }
  .other-list { grid-template-columns: 1fr 1fr; }
  .c-main, .c-side { grid-column: span 12; }
  .sec-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .b-intro { padding: 26px; }
  .brand .b-full { display: none; } .brand .b-short { display: inline; }
  .hero-grid { grid-template-areas: "intro intro" "photo photo" "years apps" "globe globe" "status status" "lang lang" "mq mq"; }
  .b-years .big-num, .b-apps .big-num { font-size: 52px; }
  .b-globe { min-height: 320px; }
  .globe-canvas { width: 300px; right: -50px; top: 104px; }
  .exp { grid-column: span 12; }
  .other-list { grid-template-columns: 1fr; }
  .p-card.is-open { width: calc(100vw - 16px); height: calc(100dvh - 16px); }
  .is-open .p-info h3 { font-size: 28px; }
  .gallery img { height: 320px; }
  footer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .marquee-track, .pulse::after { animation: none; } }