/* ============================================
   LARNACA ONLINE — guide & case-study layer
   Extends base.css + showroom.css tokens
   ============================================ */

.skip-link { position:absolute; left:-9999px; top:0; z-index:200; background:var(--mint);
  color:#04120E; padding:.7rem 1.2rem; border-radius:0 0 10px 0; font-weight:700; }
.skip-link:focus { left:0; }

.site-nav { background:rgba(10,13,22,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06); }
.site-nav .brand { color:var(--ink); font-family:var(--font-display); font-size:1.05rem; }
.site-nav .brand span { color:var(--mint); }
.lang-switch { border:1px solid rgba(255,255,255,.18); border-radius:999px;
  padding:.3rem .8rem !important; font-size:.78rem !important; letter-spacing:.06em;
  color:var(--muted); }
.lang-switch:hover { color:var(--ink); border-color:var(--mint); }
.lang-switch::after { display:none !important; }
.mobile-lang { display:none; }
@media (max-width:820px){ .mobile-lang { display:inline-block; } }

.container { width:min(1180px, 92%); margin-inline:auto; }
.container.narrow { width:min(760px, 92%); }

/* ---------- accent scoping ---------- */
.accent-mint   { --ac:var(--mint);   --ac-ink:#04120E; }
.accent-violet { --ac:var(--violet); --ac-ink:#0B0620; }
.accent-coral  { --ac:var(--coral);  --ac-ink:#22090A; }

/* ---------- category / case hero ---------- */
.cat-hero { position:relative; padding:9.5rem 0 3.6rem; overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.07); }
.cat-hero .hero-glow { position:absolute; width:520px; height:520px; border-radius:50%;
  background:var(--ac,var(--mint)); filter:blur(120px); opacity:.20;
  top:-240px; right:-140px; pointer-events:none; }
.cat-hero h1 { font-family:var(--font-display); font-size:clamp(2rem,4.6vw,3.1rem);
  line-height:1.1; margin:.5rem 0 1.1rem; }
.cat-hero .crumb { color:var(--muted); font-size:.85rem; display:inline-block; margin-bottom:.5rem; }
.cat-hero .crumb:hover { color:var(--ac,var(--mint)); }
.cat-hero .kind { display:inline-block; color:var(--ac,var(--mint)); font-size:.8rem;
  letter-spacing:.1em; text-transform:uppercase; font-weight:700; }
.cat-hero .btn { margin-top:1.6rem; }

/* the passage AI engines quote — kept visually first and typographically distinct */
.answer { font-size:1.14rem; line-height:1.75; color:#CBCBDA; max-width:64ch; margin:0; }

/* ---------- sections ---------- */
.sec { padding:3.4rem 0; }
.sec h2 { font-family:var(--font-display); font-size:clamp(1.35rem,2.6vw,1.75rem);
  margin:0 0 1.1rem; }
.sec h3.minor { font-size:1rem; color:var(--muted); font-weight:600;
  text-transform:uppercase; letter-spacing:.1em; margin:0 0 1rem; }
.bg-panel { background:var(--bg-2); border-block:1px solid rgba(255,255,255,.05); }
.sub { color:var(--muted); margin:-.4rem 0 1.4rem; font-size:.95rem; }
.micro { font-size:.85rem; color:var(--muted); margin-top:1.4rem; }
.micro a { color:var(--mint); }
.body-lg { font-size:1.08rem; line-height:1.8; color:#C4C4D4; max-width:68ch; }

/* ---------- lists ---------- */
ul.tick { display:grid; gap:.75rem; }
ul.tick li { position:relative; padding-left:1.9rem; line-height:1.65; color:#C4C4D4; }
ul.tick li::before { content:""; position:absolute; left:0; top:.55em; width:9px; height:9px;
  border-radius:50%; background:var(--mint); }

ul.numbered { counter-reset:n; display:grid; gap:.85rem; }
ul.numbered li { counter-increment:n; position:relative; padding-left:2.6rem;
  line-height:1.65; color:#C4C4D4; }
ul.numbered li::before { content:counter(n); position:absolute; left:0; top:-.05em;
  width:1.8rem; height:1.8rem; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  font-size:.8rem; font-weight:700; color:var(--mint); }

/* ---------- business listings ---------- */
.lst-wrap { display:grid; gap:.6rem; }
.lst { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.2rem; border:1px solid rgba(255,255,255,.09); border-radius:14px;
  background:rgba(255,255,255,.02); transition:border-color .3s, background .3s; }
.lst:hover { border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.04); }
.lst b { display:block; font-size:1rem; }
.lst span { display:block; color:var(--muted); font-size:.86rem; margin-top:.15rem; }
.lst-link { color:var(--mint); font-size:.86rem; font-weight:600; white-space:nowrap; }
.lst-none { color:var(--muted); font-size:.78rem; border:1px dashed rgba(255,255,255,.18);
  padding:.25rem .6rem; border-radius:999px; white-space:nowrap; }

/* ---------- CTA card ---------- */
.cta-card { position:relative; padding:2.2rem; border-radius:20px; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--ac) 35%, transparent);
  background:linear-gradient(150deg, color-mix(in srgb, var(--ac) 13%, transparent), rgba(255,255,255,.02)); }
.cta-card .eyebrow { color:var(--ac); font-size:.75rem; letter-spacing:.12em;
  text-transform:uppercase; font-weight:700; }
.cta-card h2 { margin:.5rem 0 .7rem; }
.cta-card p { color:#C7C7D6; line-height:1.7; margin:0 0 1.2rem; max-width:60ch; }
.cta-points { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.cta-points li { font-size:.82rem; color:#D3D3E0; padding:.35rem .8rem; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); }
.cta-card .btn-primary { background:var(--ac); color:var(--ac-ink); }

/* ---------- FAQ ---------- */
.faq { border:1px solid rgba(255,255,255,.09); border-radius:14px; margin-bottom:.7rem;
  background:rgba(255,255,255,.02); overflow:hidden; }
.faq summary { cursor:pointer; padding:1.05rem 1.3rem; font-weight:600; list-style:none;
  display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--mint); font-size:1.3rem; line-height:1;
  transition:transform .3s; }
.faq[open] summary::after { transform:rotate(45deg); }
.faq p { margin:0; padding:0 1.3rem 1.2rem; color:#B9B9CB; line-height:1.72; }

/* ---------- chips ---------- */
.chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.chip { font-size:.85rem; padding:.45rem 1rem; border-radius:999px; color:#C4C4D4;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03);
  transition:border-color .3s, color .3s; }
.chip:hover { border-color:var(--mint); color:var(--ink); }

/* ---------- card grids ---------- */
.gcard-grid, .wcard-grid { display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(268px,1fr)); }
.gcard, .wcard { position:relative; padding:1.5rem; border-radius:18px;
  border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.025);
  transition:transform .4s cubic-bezier(.22,.61,.36,1), border-color .4s, background .4s; }
.gcard:hover, .wcard:hover { transform:translateY(-5px);
  border-color:color-mix(in srgb, var(--ac) 55%, transparent);
  background:color-mix(in srgb, var(--ac) 7%, rgba(255,255,255,.02)); }
.gcard h3, .wcard h3 { font-family:var(--font-display); font-size:1.1rem; margin:.35rem 0 .5rem; }
.gcard p, .wcard p { color:var(--muted); font-size:.9rem; line-height:1.6; margin:0; }
.gcard .go { position:absolute; top:1.4rem; right:1.4rem; color:var(--ac);
  opacity:0; transform:translateX(-6px); transition:opacity .35s, transform .35s; }
.gcard:hover .go { opacity:1; transform:translateX(0); }
.wcard .kind { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ac); font-weight:700; }

/* ---------- footer ---------- */
.site-footer { background:var(--bg-2); border-top:1px solid rgba(255,255,255,.07);
  padding:3.2rem 0 2.4rem; margin-top:1rem; }
.foot-grid { display:grid; gap:2rem; grid-template-columns:1.6fr 1fr 1fr 1fr; }
@media (max-width:860px){ .foot-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid { grid-template-columns:1fr; } }
.foot-brand .brand { font-family:var(--font-display); font-weight:700; font-size:1.1rem; }
.foot-brand .brand span { color:var(--mint); }
.foot-brand p { color:var(--muted); font-size:.9rem; line-height:1.6; margin:.6rem 0 0; max-width:34ch; }
.site-footer h4 { font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .9rem; }
.site-footer ul { display:grid; gap:.45rem; }
.site-footer a { color:#B4B4C6; font-size:.88rem; }
.site-footer a:hover { color:var(--mint); }
.foot-cats { max-height:none; }

/* ---------- section head ---------- */
.section-head { margin-bottom:1.8rem; }
.section-head .eyebrow { color:var(--mint); font-size:.75rem; letter-spacing:.12em;
  text-transform:uppercase; font-weight:700; }
.section-head h2 { font-family:var(--font-display); margin:.5rem 0 0;
  font-size:clamp(1.4rem,3vw,2rem); max-width:24ch; }

/* ---------- mobile nav: 3 links fit without a hamburger ---------- */
@media (max-width:820px){
  .site-nav { padding:12px 5%; gap:.6rem; }
  .site-nav .nav-links { display:flex !important; gap:1rem; align-items:center; }
  .site-nav .nav-links a { font-size:.78rem; letter-spacing:0; }
  .site-nav .nav-links .lang-switch { display:none; }   /* mobile-lang shows instead */
  .site-nav .brand { font-size:.95rem; }
}
@media (max-width:600px){
  .site-nav .nav-links { gap:.7rem; }
  .site-nav .nav-links a { font-size:.72rem; }
  .site-nav .brand { font-size:.88rem; }
}
@media (max-width:420px){
  .site-nav .nav-links a:nth-child(3) { display:none; }  /* drop "About", reachable in footer */
}

@media (max-width:820px){
  .site-nav .nav-links a { white-space:nowrap; }
}