/* =============================================================
   Ikmet KaraChousein — link hub
   Aurora glass, dark premium
   ============================================================= */

/* ── Tokens ──────────────────────────────────────────────────── */
/* Earth palette: soil, terracotta, ochre, moss, umber. */
:root{
  --bg:            #0c0906;
  --bg-deep:       #060403;

  --ink:           #f7f1e8;
  --ink-soft:      #d6c8b4;
  --ink-mute:      #9c8c78;

  --line:          rgba(255,255,255,.085);
  --line-hi:       rgba(255,255,255,.2);

  --glass:         rgba(255,255,255,.038);
  --glass-hi:      rgba(255,255,255,.062);

  --gold:          #e8c58c;
  --live:          #9fc25c;   /* moss — "available" indicator */

  /* per-card accent, overridden by [data-accent] */
  --a1:            #e9a075;
  --a2:            #c2643a;

  --r-card:        20px;
  --r-pill:        999px;

  --shadow-lo:     0 1px 2px rgba(0,0,0,.4);
  --shadow-md:     0 10px 30px -12px rgba(0,0,0,.75);
  --shadow-hi:     0 22px 50px -20px rgba(0,0,0,.85);

  --ease:          cubic-bezier(.22,.68,.36,1);
  --dur:           .38s;

  --wrap:          580px;
}

[data-accent="terracotta"]{ --a1:#eda67c; --a2:#c2643a; }
[data-accent="moss"]      { --a1:#b3cd82; --a2:#6f8f39; }
[data-accent="ochre"]     { --a1:#f0cd85; --a2:#c9992e; }
[data-accent="umber"]     { --a1:#dcb28c; --a2:#a1703f; }
[data-accent="slate"]     { --a1:#b0c3cd; --a2:#607f90; }
[data-accent="sage"]      { --a1:#c2d2b2; --a2:#7d9463; }

/* ── Base ────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100svh;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-optical-sizing:auto;
  font-feature-settings:"cv02" 1,"cv03" 1,"cv04" 1,"cv11" 1,"ss01" 1;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

svg{ width:100%; height:100%; }

:focus-visible{
  outline:2px solid var(--a2);
  outline-offset:3px;
  border-radius:6px;
}

.skip-link{
  position:fixed; top:10px; left:50%;
  translate:-50% -200%;
  z-index:60;
  padding:10px 18px; border-radius:var(--r-pill);
  background:#fff; color:#1a1108; font-weight:600; font-size:14px;
  transition:translate .2s var(--ease);
}
.skip-link:focus{ translate:-50% 0; }

/* ── Ambient background ──────────────────────────────────────── */
.aurora{
  position:fixed; inset:0; z-index:-3;
  overflow:hidden;
  background:
    radial-gradient(125% 90% at 50% -14%, #3a2713 0%, transparent 64%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}

/* Earth pigments are far darker than the blues they replaced, so these run at
   higher opacity to stay visible against the soil-black background. */
.blob{
  position:absolute;
  display:block;
  border-radius:50%;
  filter:blur(72px);
  will-change:transform;
}
.blob-1{                                  /* burnt terracotta */
  width:min(62vw,520px); aspect-ratio:1;
  top:-14%; left:-10%;
  background:radial-gradient(circle at 35% 35%, #d4702c, transparent 68%);
  opacity:.62;
  animation:drift-a 26s var(--ease) infinite alternate;
}
.blob-2{                                  /* ochre */
  width:min(58vw,480px); aspect-ratio:1;
  top:2%; right:-16%;
  background:radial-gradient(circle at 60% 40%, #d9a53d, transparent 68%);
  opacity:.46;
  animation:drift-b 32s var(--ease) infinite alternate;
}
.blob-3{                                  /* moss / olive */
  width:min(70vw,600px); aspect-ratio:1;
  bottom:-22%; left:-6%;
  background:radial-gradient(circle at 45% 55%, #7a9c38, transparent 68%);
  opacity:.44;
  animation:drift-c 29s var(--ease) infinite alternate;
}
.blob-4{                                  /* deep rust */
  width:min(40vw,340px); aspect-ratio:1;
  bottom:6%; right:-8%;
  background:radial-gradient(circle at 50% 50%, #b4552d, transparent 66%);
  opacity:.4;
  animation:drift-a 35s var(--ease) infinite alternate-reverse;
}

@keyframes drift-a{ to{ transform:translate3d(14%,10%,0) scale(1.18); } }
@keyframes drift-b{ to{ transform:translate3d(-16%,14%,0) scale(.86); } }
@keyframes drift-c{ to{ transform:translate3d(18%,-12%,0) scale(1.12); } }

/* faint grid, fading toward the bottom */
.grid-veil{
  position:fixed; inset:0; z-index:-2;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(115% 78% at 50% 0%, #000 0%, transparent 72%);
          mask-image:radial-gradient(115% 78% at 50% 0%, #000 0%, transparent 72%);
  pointer-events:none;
}

/* film grain */
.noise{
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
  opacity:.42;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ── Top bar ─────────────────────────────────────────────────── */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-left)) 14px max(16px, env(safe-area-inset-right));
  max-width:calc(var(--wrap) + 80px);
  margin-inline:auto;
  animation:fade-in .7s var(--ease) both .1s;
}

.monogram{
  display:grid; place-items:center;
  width:40px; height:40px;
  border-radius:13px;
  border:1px solid var(--line);
  background:var(--glass);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  font-size:13px; font-weight:700; letter-spacing:.04em;
  color:var(--ink-soft);
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease),
             transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.monogram span{
  background:linear-gradient(135deg,#fff,var(--gold));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.monogram:hover{
  transform:translateY(-1px);
  border-color:var(--line-hi);
  background:var(--glass-hi);
}

.lang{
  position:relative;
  display:flex;
  padding:3px;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:var(--glass);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
}
.lang-thumb{
  position:absolute; top:3px; left:3px;
  width:calc(50% - 3px); height:calc(100% - 6px);
  border-radius:var(--r-pill);
  background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow-lo);
  transition:transform var(--dur) var(--ease);
}
html[data-lang="en"] .lang-thumb{ transform:translateX(100%); }

.lang-opt{
  position:relative; z-index:1;
  min-width:44px;
  padding:6px 12px;
  border:0; background:none; cursor:pointer;
  border-radius:var(--r-pill);
  font-size:12px; font-weight:650; letter-spacing:.07em;
  color:var(--ink-mute);
  transition:color var(--dur) var(--ease);
}
.lang-opt.is-on{ color:var(--ink); }
.lang-opt:hover{ color:var(--ink-soft); }

/* ── Layout ──────────────────────────────────────────────────── */
.page{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding:calc(96px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-left))
          calc(40px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-right));
}

/* shared entrance — the stagger index lives in `data-i` rather than an inline
   style attribute so the page stays clean under a strict CSP. */
.hero > *,
.section-title,
.reveal{
  animation:rise .72s var(--ease) both;
  animation-delay:calc(var(--i,0) * 52ms + 120ms);
}

[data-i="0"] {--i:0}   [data-i="1"] {--i:1}   [data-i="2"] {--i:2}   [data-i="3"] {--i:3}
[data-i="4"] {--i:4}   [data-i="5"] {--i:5}   [data-i="6"] {--i:6}   [data-i="7"] {--i:7}
[data-i="8"] {--i:8}   [data-i="9"] {--i:9}   [data-i="10"]{--i:10}  [data-i="11"]{--i:11}
[data-i="12"]{--i:12}  [data-i="13"]{--i:13}  [data-i="14"]{--i:14}  [data-i="15"]{--i:15}
[data-i="16"]{--i:16}  [data-i="17"]{--i:17}  [data-i="18"]{--i:18}  [data-i="19"]{--i:19}

@keyframes rise{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }

/* ── Hero ────────────────────────────────────────────────────── */
.hero{
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
  margin-bottom:44px;
}

.avatar-wrap{
  position:relative;
  width:132px; height:132px;
  margin-bottom:22px;
  display:grid; place-items:center;
}

.avatar-halo{
  position:absolute; inset:-26px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(214,142,84,.3), transparent 66%);
  filter:blur(18px);
  animation:pulse-halo 5.5s ease-in-out infinite;
}
@keyframes pulse-halo{
  0%,100%{ opacity:.75; transform:scale(1); }
  50%    { opacity:1;   transform:scale(1.07); }
}

.avatar-ring{
  position:absolute; inset:0;
  border-radius:50%;
  padding:2px;
  background:conic-gradient(from 0deg, var(--gold), #c2643a, #7d9463, #c9992e, var(--gold));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:spin 9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(1turn); } }

/* keep <picture> out of the grid so the image itself stays centred */
.avatar-wrap picture{ display:contents; }

.avatar{
  width:120px; height:120px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow-md);
}

.avatar-badge{
  position:absolute; right:4px; bottom:6px;
  width:30px; height:30px;
  display:grid; place-items:center;
  color:#d9a45c;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
.avatar-badge svg{ width:30px; height:30px; }

.name{
  margin:0;
  font-size:clamp(27px, 7.4vw, 34px);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.15;
  background:linear-gradient(180deg,#fff 32%, #d9c5a6 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

.role{
  margin:9px 0 0;
  font-size:14.5px;
  font-weight:500;
  letter-spacing:.005em;
  color:var(--ink-soft);
}

.tagline{
  margin:12px 0 0;
  max-width:34ch;
  font-size:13.5px;
  font-style:italic;
  line-height:1.55;
  color:var(--ink-mute);
}

.meta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  margin-top:20px;
}

.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px 6px 11px;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:var(--glass);
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  font-size:12.5px; font-weight:500;
  color:var(--ink-soft);
  white-space:nowrap;
}
.chip svg{ width:14px; height:14px; opacity:.7; flex:none; }

.chip-live{ color:#c6dd96; border-color:rgba(159,194,92,.26); }
.dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--live);
  box-shadow:0 0 0 0 rgba(159,194,92,.55);
  animation:ping 2.4s var(--ease) infinite;
  flex:none;
}
@keyframes ping{
  0%  { box-shadow:0 0 0 0 rgba(159,194,92,.5); }
  70% { box-shadow:0 0 0 8px rgba(159,194,92,0); }
  100%{ box-shadow:0 0 0 0 rgba(159,194,92,0); }
}

.hero-actions{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin-top:24px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:var(--glass);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  color:var(--ink-soft);
  font-size:13.5px; font-weight:600; letter-spacing:.005em;
  cursor:pointer;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
             background var(--dur) var(--ease), color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.btn svg{ width:16px; height:16px; flex:none; }
.btn:hover{
  transform:translateY(-2px);
  border-color:var(--line-hi);
  background:var(--glass-hi);
  color:var(--ink);
  box-shadow:var(--shadow-md);
}
.btn:active{ transform:translateY(0) scale(.985); }

.btn-primary{
  color:#1a1108;
  border-color:transparent;
  background:linear-gradient(135deg,#fffdf9 0%, #f3e3cb 55%, #e0bb85 100%);
  box-shadow:0 8px 24px -10px rgba(224,187,133,.5);
}
.btn-primary:hover{
  color:#1a1108;
  background:linear-gradient(135deg,#ffffff 0%, #f8ecdb 55%, #eccea0 100%);
  box-shadow:0 14px 32px -12px rgba(224,187,133,.66);
}

.btn-wide{ width:100%; }

/* ── Sections ────────────────────────────────────────────────── */
.block{ margin-bottom:30px; }

.section-title{
  display:flex; align-items:center; gap:12px;
  margin:0 0 12px;
  padding-left:2px;
  font-size:11px; font-weight:650;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute);
}
.section-title::after{
  content:"";
  flex:1; height:1px;
  background:linear-gradient(90deg, var(--line), transparent);
}

/* ── Cards ───────────────────────────────────────────────────── */
.card{
  position:relative;
  display:flex; align-items:stretch;
  margin-bottom:10px;
  border-radius:var(--r-card);
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.022));
  backdrop-filter:blur(16px) saturate(155%);
  -webkit-backdrop-filter:blur(16px) saturate(155%);
  box-shadow:var(--shadow-md);
  isolation:isolate;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}

/* cursor spotlight */
.card::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  border-radius:inherit;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
             color-mix(in srgb, var(--a1) 20%, transparent), transparent 68%);
  opacity:0;
  transition:opacity var(--dur) var(--ease);
  pointer-events:none;
}

/* gradient hairline on hover */
.card::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(140deg,
            color-mix(in srgb, var(--a1) 70%, transparent),
            transparent 42%, transparent 62%,
            color-mix(in srgb, var(--a2) 45%, transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0;
  transition:opacity var(--dur) var(--ease);
  pointer-events:none;
}

.card:hover,
.card:focus-within{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.14);
  box-shadow:var(--shadow-hi);
}
.card:hover::before,
.card:focus-within::before{ opacity:1; }
.card:hover::after,
.card:focus-within::after{ opacity:1; }
.card:active{ transform:translateY(-1px) scale(.995); }

.card-link{
  position:relative; z-index:2;
  flex:1; min-width:0;
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  border-radius:inherit;
}

/* icon tile */
.ico{
  flex:none;
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:13px;
  border:1px solid color-mix(in srgb, var(--a1) 22%, transparent);
  background:linear-gradient(150deg,
             color-mix(in srgb, var(--a1) 20%, transparent),
             color-mix(in srgb, var(--a2) 9%, transparent));
  color:var(--a1);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ico svg{ width:20px; height:20px; }
.card:hover .ico{
  transform:scale(1.06) rotate(-3deg);
  box-shadow:0 0 20px -4px color-mix(in srgb, var(--a2) 55%, transparent);
}

.txt{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:2px;
}
/* Tracking is tightened a touch because several names are set in all caps,
   and titles may fall to a second row on narrow phones rather than clip. */
.txt strong{
  font-size:15px; font-weight:620;
  letter-spacing:-.012em;
  color:var(--ink);
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* Subtitles carry full service lists, so they wrap instead of being cut off
   with an ellipsis. Three rows is the ceiling — most need one or two, and the
   longest only reach three on narrow phones. */
.txt small{
  font-size:12.5px; font-weight:400;
  line-height:1.4;
  color:var(--ink-mute);
  display:-webkit-box;
  -webkit-line-clamp:3;
  line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.go{
  flex:none;
  width:26px; height:26px;
  display:grid; place-items:center;
  color:var(--ink-mute);
  opacity:.55;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.go svg{ width:17px; height:17px; }
.card:hover .go{
  opacity:1;
  color:var(--a1);
  transform:translate(2px,-2px);
}

/* copy button on split cards */
.card-action{
  position:relative; z-index:2;
  flex:none;
  width:52px;
  margin:8px 8px 8px 0;
  display:grid; place-items:center;
  border:1px solid transparent;
  border-left:1px solid var(--line);
  border-radius:0 14px 14px 0;
  background:none;
  color:var(--ink-mute);
  cursor:pointer;
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.card-action svg{ width:17px; height:17px; grid-area:1/1; transition:opacity .22s var(--ease), transform .22s var(--ease); }
.card-action .ic-done{ opacity:0; transform:scale(.6); color:var(--live); }
.card-action:hover{ color:var(--ink); background:rgba(255,255,255,.05); }
.card-action.is-done .ic-copy{ opacity:0; transform:scale(.6); }
.card-action.is-done .ic-done{ opacity:1; transform:none; }

/* informational card — nothing to click, so it offers no hover affordance */
.card-static{ cursor:default; }
.card-static:hover,
.card-static:focus-within{
  transform:none;
  border-color:var(--line);
  box-shadow:var(--shadow-md);
}
.card-static:hover::before,
.card-static:hover::after{ opacity:0; }
.card-static:hover .ico{ transform:none; box-shadow:none; }

/* featured card */
.card-hero{
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--a2) 13%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border-color:color-mix(in srgb, var(--a1) 20%, transparent);
}
.card-hero::after{ opacity:.45; }
.card-hero .card-link{ padding:18px 18px; }
.card-hero .ico{ width:48px; height:48px; border-radius:15px; }
.card-hero .ico svg{ width:23px; height:23px; }
.card-hero .txt strong{ font-size:16.5px; }
/* the featured subtitle carries the full role line, so it gets three rows */
.card-hero .txt small{
  white-space:normal;
  display:-webkit-box;
  -webkit-line-clamp:3;
  line-clamp:3;
  -webkit-box-orient:vertical;
  line-height:1.45;
}

.tag{
  flex:none;
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px;
  border-radius:var(--r-pill);
  border:1px solid color-mix(in srgb, var(--a1) 26%, transparent);
  background:color-mix(in srgb, var(--a2) 12%, transparent);
  color:var(--a1);
  font-size:10.5px; font-weight:650;
  letter-spacing:.07em; text-transform:uppercase;
  white-space:nowrap;
}
.tag svg{ width:11px; height:11px; }

/* ── Footer ──────────────────────────────────────────────────── */
.foot{
  margin-top:38px;
  text-align:center;
}
.foot-qr{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:var(--glass);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:var(--ink-mute);
  font-size:12.5px; font-weight:550;
  cursor:pointer;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.foot-qr svg{ width:15px; height:15px; }
.foot-qr:hover{ color:var(--ink); border-color:var(--line-hi); transform:translateY(-1px); }

.copy{
  margin:16px 0 0;
  font-size:11.5px;
  color:rgba(126,138,166,.72);
}

/* ── Modal ───────────────────────────────────────────────────── */
.modal{
  padding:0;
  border:0;
  background:none;
  max-width:min(92vw,360px);
  color:var(--ink);
  overflow:visible;
}
.modal::backdrop{
  background:rgba(10,7,4,.74);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.modal[open]{ animation:pop .3s var(--ease) both; }
@keyframes pop{
  from{ opacity:0; transform:translateY(12px) scale(.96); }
  to  { opacity:1; transform:none; }
}

.modal-card{
  position:relative;
  padding:28px 24px 24px;
  border-radius:26px;
  border:1px solid var(--line-hi);
  background:linear-gradient(180deg, #191209, #0b0705);
  box-shadow:var(--shadow-hi);
  text-align:center;
}
.modal-card h3{
  margin:0;
  font-size:18px; font-weight:650; letter-spacing:-.015em;
}
.modal-sub{
  margin:6px 0 18px;
  font-size:13px;
  color:var(--ink-mute);
}
.modal-close{
  position:absolute; top:12px; right:12px;
  width:32px; height:32px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--glass);
  color:var(--ink-mute);
  cursor:pointer;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.modal-close svg{ width:15px; height:15px; }
.modal-close:hover{ color:var(--ink); border-color:var(--line-hi); }

.qr-frame{
  display:inline-block;
  padding:14px;
  border-radius:20px;
  background:linear-gradient(140deg,#fff,#f3e9dc);
  box-shadow:0 12px 34px -14px rgba(201,153,90,.5);
}
.qr-box{ width:184px; height:184px; }
.qr-box svg{ display:block; width:100%; height:100%; }

.modal-url{
  margin:16px 0 16px;
  font-size:12px;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  color:var(--ink-mute);
  word-break:break-all;
}

/* ── Toast ───────────────────────────────────────────────────── */
.toast{
  position:fixed; z-index:80;
  left:50%; bottom:calc(26px + env(safe-area-inset-bottom));
  translate:-50% 140%;
  display:flex; align-items:center; gap:9px;
  padding:11px 18px;
  border-radius:var(--r-pill);
  border:1px solid var(--line-hi);
  background:rgba(24,17,10,.93);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:var(--shadow-hi);
  font-size:13px; font-weight:550;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:translate .42s var(--ease), opacity .42s var(--ease);
}
.toast.is-on{ translate:-50% 0; opacity:1; }
.toast::before{
  content:"";
  width:7px; height:7px; border-radius:50%;
  background:var(--live);
  box-shadow:0 0 10px rgba(159,194,92,.8);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width:420px){
  .page{ padding-top:calc(88px + env(safe-area-inset-top)); }
  .avatar-wrap{ width:118px; height:118px; }
  .avatar{ width:108px; height:108px; }
  .card-link{ gap:12px; padding:13px 14px; }
  .ico{ width:38px; height:38px; border-radius:12px; }
  .ico svg{ width:18px; height:18px; }
  .txt strong{ font-size:14.5px; }
  .txt small{ font-size:12px; }
  .tag{ display:none; }
  /* keep both actions on one row — Greek labels are longer than the English */
  .hero-actions{ gap:8px; }
  .hero-actions .btn{
    white-space:nowrap;
    font-size:12.75px;
    padding:11px 15px;
    gap:7px;
  }
}

@media (min-width:900px){
  :root{ --wrap:600px; }
}

/* ── Motion & contrast preferences ───────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .hero > *, .section-title, .reveal{ opacity:1; transform:none; }
}

@media (prefers-contrast:more){
  :root{
    --line:rgba(255,255,255,.28);
    --ink-mute:#bcac96;
  }
}

/* Browsers without backdrop-filter get a solid-ish surface instead */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card, .btn, .chip, .lang, .monogram, .foot-qr{
    background:rgba(28,21,14,.9);
  }
  .toast{ background:rgba(24,17,10,.98); }
}