/* ============================================================
   PORTFOLIO v2 · main page components.
   Shared: /assets/claude/tokens.css, site.css, effects.css, /assets/navigation.css.
   Venture theme per card: --v1 primary, --v2 secondary, --v3 small third blob, --vd button/ink.
   ============================================================ */

/* ---------- hero ---------- */
.phero{position:relative;overflow:hidden;padding:128px 0 56px}
@media(max-width:760px){.phero{padding:104px 0 40px}}
.phero .wrap{position:relative;z-index:1}
.phero h1{max-width:820px;color:var(--text)}
/* headline break only on wide screens; phones wrap naturally and balanced (no lone word) */
.phero h1{text-wrap:balance}
.dbr{display:none}
@media(min-width:761px){.dbr{display:inline}}
.phero .lede{max-width:560px;margin-top:16px}
/* hero wash: soft TQ multicolour, no warm tones (Kaan picked option D, 24 Oct): purple, blue, a touch of teal green, steel */
.pwash .b1{background:#7C5CFF;opacity:.20}
.pwash .b2{background:#3D8BFF;opacity:.16}
.pwash .b3{background:#2FD4B8;opacity:.15}
.pwash .b4{background:#5B9BD5;opacity:.16}
.pwash .b1{top:4%}.pwash .b2{top:-6%}.pwash .b3{top:46%}.pwash .b4{top:56%}

/* ---------- visual index ---------- */
.ix{margin-top:36px}
.ixlabel{font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.ixgrid{list-style:none;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
.ixgrid li{display:flex}
.ixgrid a{--v:var(--v1);position:relative;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:18px 8px 14px;background:#fff;border:1px solid #E6EAF2;border-radius:18px;box-shadow:var(--sh-2);text-decoration:none;color:var(--text);transition:transform var(--t-card) ease,box-shadow var(--t-card) ease,border-color var(--t-card) ease;overflow:hidden}
.ixgrid a::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--v1),var(--v2));opacity:.85}
@media(hover:hover){.ixgrid a:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}}
.ixgrid a[aria-current="true"]{border-color:color-mix(in srgb,var(--v1) 45%,#fff)}
.ixlogo{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 2px color-mix(in srgb,var(--v1) 70%,#fff),0 0 0 6px color-mix(in srgb,var(--v1) 10%,transparent),0 8px 18px color-mix(in srgb,var(--v1) 18%,transparent);overflow:hidden}
.ixlogo img{width:34px;height:34px;object-fit:contain}
.ixlogo.fill img{width:100%;height:100%;object-fit:cover}
.ixname{font-weight:600;font-size:13px;line-height:1.25}
.ixstat{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--faint);white-space:nowrap}
.sdot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none;background:var(--steel)}
.sdot.soon{background:var(--amber)}
.ixgrid a.next{background:rgba(255,255,255,.55);border:1.5px dashed #C8D0DE;box-shadow:none;color:var(--muted)}
.ixgrid a.next::after{display:none}
.ixlogo.plus{box-shadow:none;background:transparent;border:1.5px dashed #AEB8CA;color:var(--muted)}
.ixlogo.plus svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.ixlegend{display:flex;gap:6px 16px;flex-wrap:wrap;margin-top:16px;font-size:12px;color:var(--faint)}
.ixlegend span{display:inline-flex;align-items:center;gap:7px}
@media(max-width:960px){.ixgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){
  .ix{margin-top:28px}
  .ixgrid{gap:8px}
  .ixgrid a{padding:14px 4px 10px;gap:8px;border-radius:16px}
  .ixlogo{width:42px;height:42px;border-radius:12px}
  .ixlogo img{width:28px;height:28px}
  .ixname{font-size:11.5px}
  .ixstat{font-size:0;gap:0}
}

/* ---------- floating mini index (appears once the index scrolls away) ---------- */
.dock{position:fixed;left:50%;top:calc(86px + env(safe-area-inset-top));transform:translate(-50%,-12px);z-index:95;display:flex;gap:6px;padding:6px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid #E6EAF2;border-radius:999px;box-shadow:var(--sh-3);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s var(--ease-move)}
.dock.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.dock a{--v:var(--v1);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 1px #E6EAF2;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}
.dock a img{width:22px;height:22px;object-fit:contain}
.dock a.fill img{width:100%;height:100%;object-fit:cover}
.dock a[aria-current="true"]{box-shadow:0 0 0 2px var(--v1),0 4px 10px color-mix(in srgb,var(--v1) 30%,transparent);transform:scale(1.06)}
@media(min-width:1260px){.dock{left:24px;top:50%;transform:translate(-12px,-50%);flex-direction:column}.dock.on{transform:translate(0,-50%)}}
@media(max-width:560px){.dock{top:calc(80px + env(safe-area-inset-top));gap:5px;padding:5px}.dock a{width:34px;height:34px}.dock a img{width:20px;height:20px}}

/* ---------- venture cards ---------- */
.ventures{padding:8px 0 var(--sect-y)}
.vlist{display:flex;flex-direction:column;gap:32px}
@media(max-width:760px){.vlist{gap:20px}}
.vcard{--vd:color-mix(in srgb,var(--v1) 72%,#0C1220);position:relative;scroll-margin-top:150px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center;padding:44px;border-radius:28px;border:1px solid color-mix(in srgb,var(--v1) 16%,#E6EAF2);box-shadow:var(--sh-3);overflow:hidden;isolation:isolate;
  background:
    radial-gradient(70% 80% at 0% 0%,color-mix(in srgb,var(--v1) 30%,transparent),transparent 64%),
    radial-gradient(50% 60% at 62% 0%,color-mix(in srgb,var(--v3) 18%,transparent),transparent 66%),
    radial-gradient(80% 90% at 100% 100%,color-mix(in srgb,var(--v2) 28%,transparent),transparent 64%),
    #fff}
.vcard.rv{transform:none}
.vcard.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.vcard.flip .vtext{order:2}
.vtext{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.vhead{display:flex;align-items:center;gap:16px;width:100%}
.vlogo{width:60px;height:60px;border-radius:17px;flex:none;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 2px color-mix(in srgb,var(--v1) 70%,#fff),0 0 0 7px color-mix(in srgb,var(--v1) 12%,transparent),0 10px 22px color-mix(in srgb,var(--v1) 22%,transparent);overflow:hidden}
.vlogo img{width:40px;height:40px;object-fit:contain}
.vlogo.fill img{width:100%;height:100%;object-fit:cover}
.vcat{font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--vd)}
.vcard h3{font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--text);margin-top:2px}
.spill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--text);background:#fff;border:1px solid #E6EAF2;border-radius:999px;padding:4px 11px 4px 10px;box-shadow:var(--sh-1);white-space:nowrap;margin-top:18px}
.vline{font-size:var(--fs-lede);line-height:1.55;color:var(--muted);margin-top:14px;max-width:440px}
.vstats{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.vstats div{background:rgba(255,255,255,.8);border:1px solid #E6EAF2;border-radius:14px;padding:9px 14px;box-shadow:var(--sh-1)}
.vstats b{display:block;font-family:var(--display);font-size:20px;font-weight:700;line-height:1.1;color:var(--text)}
.vstats span{font-size:11.5px;color:var(--faint);font-weight:500}
.vnote{font-size:11px;color:var(--faint);margin-top:8px}
.vchips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.vchips li{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--text);background:#fff;border:1px solid #E6EAF2;border-radius:999px;padding:5px 13px 5px 5px;box-shadow:var(--sh-1)}
.vchips .tq-ic{--ic:var(--v1);width:28px;height:28px;border-radius:50%}
.vchips .tq-ic::before{border-radius:50%;inset:-2px}
.vchips .tq-ic>svg{width:14px;height:14px}
.vcta{display:flex;align-items:center;gap:10px 20px;flex-wrap:wrap;margin-top:26px}
.vbtn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:#fff;background:var(--vd);padding:13px 20px;border-radius:12px;text-decoration:none;box-shadow:0 10px 22px color-mix(in srgb,var(--v1) 28%,transparent),0 2px 6px rgba(12,18,32,.12);transition:transform var(--t-hover) ease,box-shadow var(--t-hover) ease}
.vbtn svg,.vext svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-hover) var(--ease-move)}
@media(hover:hover){.vbtn:hover{transform:translateY(-2px)}.vbtn:hover svg{transform:translateX(3px)}.vext:hover svg{transform:translate(2px,-2px)}}
.vext{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;color:var(--text);text-decoration:none;border-bottom:1px solid #C8D0DE;padding-bottom:2px}
.vext svg{width:14px;height:14px}

.ghead{margin:28px 0 -4px}
.ghead:first-child{margin-top:0}
.ghead h2{font-size:clamp(22px,3vw,30px)}
.ghead p{font-size:var(--fs-body);color:var(--muted);margin-top:6px}
@media(max-width:760px){.ghead{margin:20px 0 0}}
/* media: browser frame + overlapping phone, real captures */
.vmedia{min-width:0}
.stage{position:relative;padding:0 10% 34px 0}
.browser{background:#fff;border:1px solid #E6EAF2;border-radius:14px;overflow:hidden;box-shadow:var(--sh-3);transition:transform var(--t-card) ease}
.bbar{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;background:#F7F9FC;border-bottom:1px solid #E6EAF2}
.bbar i{width:9px;height:9px;border-radius:50%;background:#D5DBE6;flex:none}
.baddr{margin:0 auto;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--faint);background:#fff;border:1px solid #E6EAF2;border-radius:999px;padding:2px 14px;max-width:64%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translateX(-14px)}
.baddr svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.bview{aspect-ratio:16/10;background:var(--canvas)}
.bview img{width:100%;height:100%;object-fit:cover;object-position:top}
.phone{position:absolute;right:0;bottom:0;width:24%;aspect-ratio:520/1125;border-radius:22px;background:#0B0E15;padding:5px;box-shadow:var(--sh-3),0 20px 40px rgba(12,18,32,.18);transition:transform var(--t-card) ease}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:17px}
@media(hover:hover){.vcard:hover .browser{transform:translateY(-4px)}.vcard:hover .phone{transform:translateY(-8px)}}

/* Global Mines: no product yet, so an honest concept panel (mark on the brand wash), not a placeholder screenshot */
.concept{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;display:grid;place-items:center;box-shadow:var(--sh-3);background:radial-gradient(70% 90% at 20% 10%,#5a4a42,transparent 60%),radial-gradient(60% 80% at 90% 100%,#A64A31,transparent 60%),#383938}
.concept svg.contours{position:absolute;inset:0;width:100%;height:100%;opacity:.22}
.concept .cmark{position:relative;width:132px;height:132px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 8px rgba(255,255,255,.08),0 0 0 18px rgba(255,255,255,.04),0 24px 48px rgba(0,0,0,.35)}
.concept .cmark img{width:84px;height:84px;object-fit:contain}
.concept .cchip{position:absolute;left:16px;bottom:16px;font-size:12px;font-weight:600;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:5px 12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* phone first: one column, media between the line and the chips */
@media(max-width:920px){
  .vcard,.vcard.flip{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:28px 22px 26px;border-radius:24px}
  .vtext{display:contents}
  .vhead{order:1}.spill{order:2;align-self:flex-start}.vline{order:3}.vstats{order:4}.vnote{order:5}.vmedia{order:6;margin-top:24px}.vchips{order:7}.vcta{order:8}
  .vcard h3{font-size:24px}
  .vlogo{width:52px;height:52px;border-radius:15px}.vlogo img{width:34px;height:34px}
  .vline{font-size:15.5px}
  .stage{padding:0 12% 26px 0}
  .phone{width:30%;border-radius:18px;padding:4px}.phone img{border-radius:14px}
  .concept .cmark{width:104px;height:104px}.concept .cmark img{width:66px;height:66px}
}
@media(max-width:560px){
  .spill{margin-top:16px}
  .vcta{margin-top:22px}
  .vbtn{flex:1 1 100%;justify-content:center}
  .vstats b{font-size:18px}
  .vstats div{padding:8px 12px}
}

/* ---------- [confirm] tag: marks claims still open with Kaan; ?clean hides them ---------- */
.cf{display:inline-block;vertical-align:middle;font:600 10px/1.6 var(--body);letter-spacing:.02em;color:#9A5B05;background:#FFF5E1;border:1px dashed #E9A93A;border-radius:6px;padding:0 6px;margin-left:6px;white-space:nowrap}
html.clean .cf{display:none}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .dock{transition:none}
  .ixgrid a,.browser,.phone,.vbtn{transition:none!important}
  .vcard:hover .browser,.vcard:hover .phone,.ixgrid a:hover,.vbtn:hover{transform:none!important}
}

/* whole venture card opens its page (Kaan 24 Oct). The "View" button's hit area stretches over the card,
   so it stays one real link (keyboard, long press, open in new tab); "Visit <site>" sits above it and stays separate.
   No transform on the button itself: a transformed button would become the containing block and shrink the hit area. */
.vcard{cursor:pointer}
.vcard .vbtn::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:5}
.vcard .vext{position:relative;z-index:6}
.vcard .vbtn:hover{transform:none}
@media(hover:hover){.vcard:hover .vbtn{box-shadow:0 14px 28px color-mix(in srgb,var(--v1) 34%,transparent),0 3px 8px rgba(12,18,32,.14)}.vcard:hover .vbtn svg{transform:translateX(3px)}}
.vcard:has(.vbtn:focus-visible){outline:3px solid #7C5CFF;outline-offset:4px}

/* closing CTA: white card on a soft wash, the page's one multicolour beam (Kaan, 24 Oct; same rule as Home and Services) */
.bcta{background:radial-gradient(520px 300px at 18% 70%,color-mix(in srgb,var(--c1) 10%,transparent),transparent 70%),radial-gradient(520px 300px at 82% 40%,color-mix(in srgb,var(--c2) 14%,transparent),transparent 70%)}
.bcta .ctaisland{background:#fff;color:var(--text);border:1px solid #E6EAF2;box-shadow:var(--sh-3);overflow:visible}
.bcta .ctaisland h2{color:var(--text)}
.bcta .ctaisland h2 .hl{color:color-mix(in srgb,var(--c1) 74%,#0C1220)}
.bcta .ctaisland p{color:var(--muted)}
.bcta .ctaisland .micro{color:var(--faint)}

/* jump targets clear the fixed nav and the floating mini index, incl. the phone safe area (QA 24 Oct) */
.vcard,.ghead{scroll-margin-top:calc(166px + env(safe-area-inset-top))}
@media(max-width:560px){.vcard,.ghead{scroll-margin-top:calc(150px + env(safe-area-inset-top))}}
@media(min-width:1260px){.vcard,.ghead{scroll-margin-top:100px}}