/* App home look, animation and 3D (app-home-fx.js, founder 2026-10-08: "Make it beautiful. Add animations, effects,
   etc advance 3Ds as well"). Scoped under .ahx (the app home only). The app is dark; corners follow the app's square look. */
.ahx { --ahx-line: rgba(255,255,255,.09); --ahx-card: rgba(255,255,255,.035); }

/* Rise in one after another */
.ahx-rise { animation: ahxRise .75s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes ahxRise { from { opacity: 0; transform: translateY(20px) scale(.985); } to { opacity: 1; transform: none; } }

/* 3D tilt with a light sheen under the pointer */
.ahx-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .25s ease, box-shadow .25s ease, border-color .2s; position: relative; }
.ahx-tilt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.10), transparent 45%); opacity: 0; transition: opacity .25s; }
.ahx-tilt:hover::after { opacity: 1; }
.ahx-tilt:hover { box-shadow: 0 24px 44px -24px rgba(56,182,255,.6), 0 0 0 1px rgba(139,92,246,.35); }

/* Hero */
.ahx-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 24px; min-height: 230px; margin: 0 0 18px; padding: 30px 34px; border: 1px solid rgba(56,182,255,.22);
  background: radial-gradient(70% 120% at 0% 0%, rgba(34,211,238,.16), transparent 60%), radial-gradient(60% 120% at 100% 100%, rgba(217,70,239,.16), transparent 60%), linear-gradient(135deg, #061430, #0a0f2a 60%, #120a2c); isolation: isolate; }
.ahx-hero::before { content: ""; position: absolute; inset: -40%; z-index: -2; background: conic-gradient(from 0deg, transparent, rgba(56,182,255,.10), transparent 30%, rgba(236,72,153,.08), transparent 60%); animation: ahxSpin 22s linear infinite; }
@keyframes ahxSpin { to { transform: rotate(360deg); } }
.ahx-hero::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; padding: 1px; background: conic-gradient(from var(--ahxA), transparent 0 60%, #22d3ee 72%, #8b5cf6 82%, #ec4899 90%, transparent 97%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ahxBorder 7s linear infinite; }
@property --ahxA { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ahxBorder { to { --ahxA: 360deg; } }
.ahx-orb { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.ahx-hero-tx { position: relative; flex: 1; min-width: 0; max-width: 640px; }
.ahx-when { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.ahx-when span { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7dd3fc; }
.ahx-when strong { font: 600 .95rem var(--font-head, inherit); color: #c7d2fe; font-variant-numeric: tabular-nums; }
.ahx .ahx-hero .ah-hi { font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.1; margin: 0 0 8px; background: linear-gradient(90deg, #fff 0%, #a5f3fc 30%, #fff 50%, #f5d08a 70%, #fff 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ahxShine 7s linear infinite; }
@keyframes ahxShine { to { background-position: -220% 0; } }
.ahx .ahx-hero .ah-sub { margin: 0; color: #b4c0e0; font-size: 1rem; }
/* Photo in an orbit ring */
.ahx-av { position: relative; flex: 0 0 120px; width: 120px; height: 120px; margin-right: clamp(0px, 14vw, 220px); }
.ahx-av-pic { position: absolute; inset: 14px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: #c7d2fe; background: radial-gradient(circle at 35% 30%, #23407a, #0b1838); box-shadow: 0 0 0 3px rgba(255,255,255,.08), 0 18px 40px -14px rgba(56,182,255,.7); }
.ahx-av-pic img { width: 100%; height: 100%; object-fit: cover; }
.ahx-av-pic svg { width: 40px; height: 40px; }
.ahx-av-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: #22d3ee; border-right-color: rgba(139,92,246,.7); animation: ahxSpin 3.5s linear infinite; filter: drop-shadow(0 0 6px rgba(34,211,238,.7)); }
.ahx-av-ring.is-2 { inset: -9px; border-width: 1px; border-top-color: transparent; border-bottom-color: #ec4899; border-left-color: rgba(245,184,46,.7); animation-duration: 6s; animation-direction: reverse; }

/* Tiles */
.ahx .ah-tiles { gap: 14px; perspective: 1200px; }
.ahx-tile { position: relative; overflow: hidden; min-height: 150px; padding: 18px 18px 16px !important; border-radius: 0 !important; background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015)) !important; border: 1px solid var(--ahx-line) !important; }
.ahx-tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ahx-c, linear-gradient(90deg, #22d3ee, #3b82f6)); transform-origin: 0 50%; animation: ahxBar 1.1s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 80ms + .3s); }
@keyframes ahxBar { from { transform: scaleX(0); } to { transform: none; } }
.ahx-t0 { --ahx-c: linear-gradient(90deg, #22d3ee, #f5b82e); --ahx-g: #f5b82e; }
.ahx-t1 { --ahx-c: linear-gradient(90deg, #3b82f6, #8b5cf6); --ahx-g: #8b5cf6; }
.ahx-t2 { --ahx-c: linear-gradient(90deg, #10b981, #22d3ee); --ahx-g: #22d3ee; }
.ahx-t3 { --ahx-c: linear-gradient(90deg, #ec4899, #f97316); --ahx-g: #ec4899; }
.ahx-ic { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 38px; height: 38px; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--ahx-g) 85%, #fff), color-mix(in srgb, var(--ahx-g) 60%, #000)); box-shadow: 0 10px 22px -10px var(--ahx-g); transform: translateZ(30px); }
.ahx-ic svg { width: 19px; height: 19px; }
.ahx-tile strong { font-size: 1.6rem !important; font-variant-numeric: tabular-nums; position: relative; }
.ahx-tile small { padding-right: 48px; }
/* Points ring */
.ahx-ring { position: absolute; right: 12px; bottom: 12px; width: 52px; height: 52px; }
.ahx-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ahx-ring-bg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 4; }
.ahx-ring-fg { fill: none; stroke: url(#ahxRg); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1); filter: drop-shadow(0 0 4px rgba(245,184,46,.6)); }
.ahx-t0 > span:not(.ahx-ic):not(.ahx-ring) { padding-right: 60px; }
/* Countdown */
.ahx-cd { display: flex; gap: 6px; margin: 10px 0 2px; }
.ahx-cd-c { display: flex; flex-direction: column; align-items: center; min-width: 44px; padding: 6px 4px 4px; background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.3); perspective: 200px; }
.ahx-cd-c b { font: 700 1.15rem/1 var(--font-head, inherit); color: #fff; font-variant-numeric: tabular-nums; display: inline-block; }
.ahx-cd-c b.is-flip { animation: ahxFlip .45s ease; }
@keyframes ahxFlip { 0% { transform: rotateX(90deg); opacity: .2; } 100% { transform: none; opacity: 1; } }
.ahx-cd-c small { margin: 2px 0 0 !important; font-size: .6rem !important; letter-spacing: .08em; text-transform: uppercase; color: #a5b4fc !important; padding: 0 !important; }
.ahx-cd.is-live { display: none; }
.ahx-tile.is-live { border-color: rgba(52,211,153,.6) !important; box-shadow: 0 0 0 1px rgba(52,211,153,.4), 0 0 30px -6px rgba(52,211,153,.5); }
/* Country globe */
.ahx-t2.has-globe { padding-right: 120px !important; }
.ahx-mglobe { position: absolute; right: -14px; bottom: -22px; width: 140px; height: 140px; }
.ahx-mglobe .sa-globe { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; }
.ahx-mglobe .sa-gtip { display: none; }
/* Join */
.ahx-join { display: inline-flex !important; align-items: center; gap: 6px; margin-top: 12px; padding: 9px 16px; color: #fff !important; background: linear-gradient(90deg, #ec4899, #f97316); box-shadow: 0 10px 24px -12px rgba(236,72,153,.9); position: relative; }
.ahx-join::before { content: ""; position: absolute; inset: 0; border: 2px solid rgba(236,72,153,.7); animation: ahxPing 2s ease-out infinite; pointer-events: none; }
@keyframes ahxPing { from { transform: scale(1); opacity: .9; } to { transform: scale(1.25, 1.5); opacity: 0; } }
.ahx-t3.is-live .ahx-join { background: linear-gradient(90deg, #10b981, #22d3ee); }

/* Your websites today */
.ahx-stats { margin: 0 0 18px; padding: 18px 20px; border: 1px solid rgba(52,211,153,.22); background: radial-gradient(80% 140% at 0% 0%, rgba(52,211,153,.10), transparent 60%), var(--ahx-card); }
.ahx-stats-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.ahx-stats-head h2 { margin: 0; font-size: 1.1rem; }
.ahx-stats-head a { margin-left: auto; font-size: .86rem; font-weight: 600; color: #38b6ff; text-decoration: none; }
.ahx-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #5b6584; }
.ahx-stats.has-live .ahx-live-dot { background: #34d399; animation: ahxPulse 1.6s infinite; }
@keyframes ahxPulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.6); } 70% { box-shadow: 0 0 0 10px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.ahx-stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ahx-stat { padding: 14px 16px; border: 1px solid var(--ahx-line); background: rgba(4,11,31,.45); }
.ahx-stat-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-bottom: 8px; color: #34d399; background: rgba(52,211,153,.12); }
.ahx-stat-ic svg { width: 16px; height: 16px; }
.ahx-stat strong { display: block; font: 700 1.6rem/1.1 var(--font-head, inherit); font-variant-numeric: tabular-nums; }
.ahx-stat strong.is-bump { animation: ahxBump .9s ease; }
@keyframes ahxBump { 30% { color: #34d399; transform: scale(1.1); text-shadow: 0 0 16px rgba(52,211,153,.6); } }
.ahx-stat small { font-size: .78rem; color: #8b93ad; }

/* Quick actions */
.ahx-qa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; perspective: 1200px; }
.ahx-qa-c { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 16px; min-height: 84px; color: #e8ecf8; text-decoration: none; border: 1px solid var(--ahx-line); background: var(--ahx-card); animation: ahxFlipIn .8s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 90ms + .3s); }
@keyframes ahxFlipIn { from { opacity: 0; transform: perspective(900px) rotateY(-60deg); } to { opacity: 1; transform: none; } }
.ahx-qa-ic { flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; color: #fff; transform: translateZ(26px); box-shadow: 0 12px 24px -12px var(--qa); background: linear-gradient(135deg, color-mix(in srgb, var(--qa) 85%, #fff), color-mix(in srgb, var(--qa) 55%, #000)); }
.ahx-qa-ic svg { width: 22px; height: 22px; }
.ahx-qa-c.is-a { --qa: #1d7bff; } .ahx-qa-c.is-b { --qa: #10b981; } .ahx-qa-c.is-c { --qa: #f5b82e; } .ahx-qa-c.is-d { --qa: #8b5cf6; }
.ahx-qa-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ahx-qa-tx strong { font-size: .98rem; }
.ahx-qa-tx small { font-size: .78rem; color: #8b93ad; }
.ahx-qa-go { position: absolute; right: -6px; bottom: -8px; opacity: .08; color: var(--qa); transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .3s; }
.ahx-qa-go svg { width: 64px; height: 64px; }
.ahx-qa-c:hover { border-color: color-mix(in srgb, var(--qa) 60%, transparent); }
.ahx-qa-c:hover .ahx-qa-go { opacity: .22; transform: translate(-8px, -8px) rotate(-12deg); }

/* Tip of the day */
.ahx-tip { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 8px; padding: 16px 18px; border: 1px solid rgba(245,184,46,.28); background: linear-gradient(90deg, rgba(245,184,46,.08), transparent 70%); }
.ahx-tip-ic { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; color: #3b2300; background: radial-gradient(circle at 32% 28%, #fff7c2, #f5b82e 55%, #c2780a); box-shadow: 0 0 22px rgba(245,184,46,.45); animation: ahxGlow 2.6s ease-in-out infinite; }
.ahx-tip-ic svg { width: 20px; height: 20px; }
@keyframes ahxGlow { 50% { box-shadow: 0 0 34px rgba(245,184,46,.75); } }
.ahx-tip-tx small { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #f5d08a; margin-bottom: 4px; }
.ahx-tip-tx p { margin: 0; color: #dbe2f5; line-height: 1.55; min-height: 1.55em; }
.ahx-tip-tx p:not(.is-done)::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: #f5d08a; animation: ahxCaret .8s steps(1) infinite; }
@keyframes ahxCaret { 50% { opacity: 0; } }

/* Website cards */
.ahx .ah-site.ahx-card-in { animation: ahxFlipIn .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 70ms); }
.ahx .ah-site .ah-site-pic img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ahx .ah-site:hover .ah-site-pic img { transform: scale(1.07); }
.ahx .ah-site-st.is-live { display: inline-flex; align-items: center; gap: 6px; }
.ahx .ah-site-st.is-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34d399; animation: ahxPulse 1.6s infinite; }
.ahx .ah-mine-head h2 { background: linear-gradient(90deg, #fff, #a5f3fc); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (max-width: 980px) { .ahx-stats-row, .ahx-qa { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ahx-av { margin-right: 0; } }
@media (max-width: 640px) {
  .ahx-hero { flex-direction: column-reverse; align-items: flex-start; min-height: 0; padding: 22px 18px; gap: 14px; }
  .ahx-av { flex-basis: auto; width: 84px; height: 84px; }
  .ahx-av-pic { inset: 10px; } .ahx-av-pic svg { width: 30px; height: 30px; }
  .ahx-tile { min-height: 0; } .ahx-tile strong { font-size: 1.3rem !important; }
  .ahx-cd-c { min-width: 0; flex: 1; }
  .ahx-t2.has-globe { padding-right: 90px !important; } .ahx-mglobe { width: 110px; height: 110px; right: -16px; bottom: -18px; }
  .ahx-qa-c { padding: 12px; gap: 10px; } .ahx-qa-ic { width: 38px; height: 38px; } .ahx-qa-tx small { display: none; }
  .ahx-stat strong { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ahx *, .ahx *::before, .ahx *::after, .ahx-hero::before, .ahx-hero::after { animation: none !important; transition: none !important; }
  .ahx .ahx-hero .ah-hi { color: #fff; background: none; }
}
/* The tile text style (.ah-tile span: grey, block, margin) must not reach the icon and the ring. */
.ahx .ah-tile .ahx-ic { display: grid; margin: 0; color: #fff; }
.ahx .ah-tile .ahx-ring { display: block; margin: 0; }