/* =========================================================
   EaseFy — AI Visibility / 2100 Digital-Glass (Brand-Native)
   • Deep holo canvas with scanlines + perspective grid
   • Hologlass cards, neon edge + corner nodes
   • Non-blocking FX (pointer-events:none). iPad-safe.
   • Scope your page with: <div class="aiV"><div class="ai-visibility-canvas">…</div></div>
========================================================= */

/* ---------- Stop iPad auto-dark and unify tone ---------- */
.aiV,
.aiV :root,
.aiV html { color-scheme: light; }

/* ---------- Brand system (warm neon) ---------- */
.aiV{
  --ef-brown:  #663d29;
  --ef-coral:  #da926e;            /* neon coral */
  --ef-amber:  #ffd29a;            /* warm neon */
  --ink-1:     #fff7f1;            /* primary text on dark */
  --ink-2:     #e8dbd3;            /* secondary */
  --ink-3:     #cdb7ac;            /* subtle */

  --canvas:    #0f0a07;            /* espresso night */

  --glass:     rgba(25,18,14,.62); /* card glass */
  --line:      rgba(218,146,110,.35);
  --edge-1:    rgba(218,146,110,.24);
  --edge-2:    rgba(255,210,154,.18);

  --radius:    18px;
  --shadow-3d: 0 28px 80px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.35);
  --easing:    cubic-bezier(.2,.7,.2,1);
}

/* Optional wide-gamut pop on modern screens */
@supports (color: color(display-p3 1 0 0)){
  .aiV{
    --ef-coral: color(display-p3 .88 .62 .52);
    --ef-amber: color(display-p3 1 .83 .63);
  }
}

/* =========================================================
   CANVAS — scanlines + aurora + perspective grid
========================================================= */
.aiV .ai-visibility-canvas{
  position: relative;
  min-height: 100dvh;
  color: var(--ink-1);
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(218,146,110,.18), transparent 60%),
    radial-gradient(900px 600px  at -10% 25%, rgba(255,210,154,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%),
    var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Animated scanlines */
.aiV .ai-visibility-canvas::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
  mix-blend-mode: soft-light; opacity:.35;
  animation: aiV_scan 6s linear infinite;
}
@keyframes aiV_scan { to { background-position-y: 120px; } }

/* Perspective grid “floor” */
.aiV .ai-visibility-canvas::after{
  content:""; position:absolute; left:-15vw; right:-15vw; bottom:-8vh; height:55vh;
  pointer-events:none; transform: perspective(800px) rotateX(68deg);
  background:
    radial-gradient(80% 120% at 50% 100%, rgba(218,146,110,.28), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(255,255,255,.06) 58px 60px),
    repeating-linear-gradient(0deg,  transparent 0 58px, rgba(255,255,255,.06) 58px 60px);
  opacity:.25; filter: blur(.2px);
}

/* =========================================================
   CARD — hologlass with neon perimeter + corner nodes
========================================================= */
.aiV .seo-metric-card{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--glass);
  border-radius: var(--radius);
  border: 1px solid rgba(218,146,110,.22);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow-3d);
  padding: clamp(18px, 2.2vw, 28px);
  isolation:isolate;
  overflow:hidden;
}

/* Neon edge (masked gradient border) */
.aiV .seo-metric-card::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; border-radius:inherit;
  background:
    linear-gradient(135deg, var(--edge-1), transparent 35%),
    linear-gradient(315deg, var(--edge-2), transparent 45%);
  -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);
  padding:1px; border:1px solid transparent;
}

/* Soft sheen sweep */
.aiV .seo-metric-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: linear-gradient(120deg, #fff0 35%, rgba(255,255,255,.25) 50%, #fff0 65%);
  filter: blur(8px); opacity:.42;
  animation: aiV_sheen 8.8s linear infinite;
}
@keyframes aiV_sheen{ to { transform: translateX(120%);} }

/* Corner “nodes” */
.aiV .seo-metric-card > .nodes{
  position:absolute; inset:0; pointer-events:none; z-index:1;
}
.aiV .seo-metric-card > .nodes::before,
.aiV .seo-metric-card > .nodes::after{
  content:""; position:absolute; width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle, #ffe4d5 0 40%, rgba(255,176,138,.55) 55%, transparent 62%);
  box-shadow: 0 0 12px 4px rgba(218,146,110,.35);
}
.aiV .seo-metric-card > .nodes::before{ top:10px; left:10px; }
.aiV .seo-metric-card > .nodes::after { bottom:10px; right:10px; }

/* Fallback when blur is unsupported */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
  .aiV .seo-metric-card{ background: rgba(30,22,18,.9); }
}

/* =========================================================
   TITLES & META
========================================================= */
.aiV .seo-metric-card h6{
  margin:0 0 .5rem; letter-spacing:.22px; font-weight:900;
  background: linear-gradient(180deg, #ffeadd 0%, #f5ceb6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* Score glow + reflection */
.aiV #aiScore{
  font-size: clamp(42px, 6.5vw, 66px);
  font-weight: 1000; letter-spacing:.6px; line-height:1;
  color:#fff;
  text-shadow: 0 0 24px rgba(218,146,110,.35), 0 2px 0 rgba(0,0,0,.55);
  position:relative; z-index:2;
}
.aiV #aiScore::after{
  content:""; position:absolute; left:-6%; right:-6%; bottom:-14px; height:16px; pointer-events:none;
  background: radial-gradient(50% 120% at 50% 0%, rgba(218,146,110,.28), transparent 70%);
  filter: blur(8px); z-index:-1;
}
.aiV #aiUpdated{ color: var(--ink-3); font-weight:700; }

/* =========================================================
   CHART FRAME (place Chart.js canvas inside)
========================================================= */
.aiV #aiTrend{
  display:block; width:100%!important; height:auto;
  border-radius: 14px;
  padding: 6px;
  border: 1px dashed var(--line);
  background:
    linear-gradient(180deg, rgba(218,146,110,.12), transparent 40%),
    linear-gradient(0deg,   rgba(255,210,154,.10), transparent 50%),
    rgba(255,255,255,.02);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* =========================================================
   BADGES / CHIPS
========================================================= */
.aiV .ai-chip{
  display:inline-block; padding:.3rem .7rem; border-radius:999px;
  background: rgba(218,146,110,.12);
  border: 1px solid rgba(218,146,110,.38);
  color:#fff1e9; font-weight:900;
  box-shadow: 0 8px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.15);
}
.aiV #aiEnginesBadge{ display:none; }

/* =========================================================
   BUTTON — cyber/neon
========================================================= */
.aiV #btnRecheckAI{
  position:relative; border-radius:12px; color:#fff; font-weight:900; letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.25);
  background:
    radial-gradient(140% 160% at 20% -30%, rgba(218,146,110,.35), transparent 60%),
    linear-gradient(180deg, #7a4a35 0%, #633924 55%, #da926e 120%);
  transition: transform .18s var(--easing), box-shadow .18s var(--easing), filter .18s var(--easing);
  box-shadow: 0 16px 34px rgba(0,0,0,.45), 0 0 0 0 rgba(218,146,110,0);
}
.aiV #btnRecheckAI:hover{
  transform: translateY(-2px); filter:saturate(1.06);
  box-shadow: 0 22px 46px rgba(0,0,0,.55), 0 0 26px 3px rgba(218,146,110,.22);
}
.aiV #btnRecheckAI:active{
  transform: translateY(0);
  box-shadow: 0 14px 28px rgba(0,0,0,.45), 0 0 16px 1px rgba(218,146,110,.18);
}

/* =========================================================
   LISTS — Breakdown & Opportunities
========================================================= */
.aiV #aiBreakdown .list-group-item,
.aiV #aiOpps .list-group-item{
  background: transparent;
  border-color: var(--line);
  padding: .8rem .95rem;
}
.aiV #aiBreakdown .list-group-item{
  display:flex; justify-content:space-between; align-items:center;
}
.aiV #aiBreakdown .list-group-item span:first-child{
  color:#fff2e9; font-weight:900; text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.aiV #aiBreakdown .list-group-item span:last-child,
.aiV #aiOpps .list-group-item .text-muted{
  color: var(--ink-3) !important;
}
.aiV #aiOpps .list-group-item strong{
  color:#fff; font-weight:900; text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.aiV #aiOpps .list-group-item + .list-group-item{ border-top:1px solid var(--line); }

/* =========================================================
   CALLOUTS / ALERTS
========================================================= */
.aiV #aiVisError,
.aiV #aiVisInfo{
  border-radius:12px;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color: var(--ink-2);
  box-shadow: 0 12px 28px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
  font-size:.95rem; margin-top:10px;
}

/* =========================================================
   LOADING SHIMMER
========================================================= */
.aiV .seo-metric-card.is-loading{ overflow:hidden; }
.aiV .seo-metric-card.is-loading::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(218,146,110,.18), transparent);
  animation: aiV_sweep 1.15s linear infinite;
}
@keyframes aiV_sweep{ 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

/* =========================================================
   INTERACTIONS
========================================================= */
.aiV .seo-metric-card a:hover{
  text-decoration:none;
  box-shadow:0 1px 0 0 var(--ef-coral);
}

/* =========================================================
   RESPONSIVE POLISH
========================================================= */
@media (max-width: 576px){
  .aiV .seo-metric-card{ padding:16px; }
  .aiV #btnRecheckAI{ padding:.5rem .95rem; }
}

/* =========================================================
   iPad / Safari brightness normalization
========================================================= */
@supports (-webkit-touch-callout: none) {
  .aiV .seo-metric-card{
    background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)), var(--glass);
    -webkit-backdrop-filter: blur(14px) saturate(140%) brightness(1.05);
            backdrop-filter: blur(14px) saturate(140%) brightness(1.05);
  }
}

/* ==========================================================
   AI Visibility — FAQ (Futuristic Glass v4)
   Matches homepage card/glass tokens
   Targets:
   <section id="ai-visibility-faq" aria-labelledby="ai-visibility-faq-title">
     <div class="faq-list"><details>…</details></div>
   </section>
   ========================================================== */

/* Section heading with consistent gutters */
#ai-visibility-faq h2{
  width: min(var(--maxw), 100% - 2*var(--gutter));
  margin: 28px auto 12px;
  text-align:center;
}

/* Layout list like stacked glass cards */
#ai-visibility-faq .faq-list{
  width: min(var(--maxw), 100% - 2*var(--gutter));
  margin-inline:auto;
  display:grid;
  gap: clamp(12px, 2.4vw, 20px);
}

/* Glass card base for each Q/A */
#ai-visibility-faq .faq-list details{
  position:relative;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(14px) saturate(130%);
  padding: var(--pad);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  will-change: transform, box-shadow;
}

/* Subtle neon edge like other cards */
#ai-visibility-faq .faq-list details::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(218,146,110,.28), 0 0 24px rgba(218,146,110,.18);
}

/* Micro-lift on hover (NO text color change) */
#ai-visibility-faq .faq-list details:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(102,61,41,.22), inset 0 1px 0 rgba(255,255,255,.55);
  /* slightly richer glass without darkening text contrast */
  background: linear-gradient(180deg, rgba(255,250,243,.92), rgba(255,250,243,.66));
}

/* Open state keeps stronger surface + glow */
#ai-visibility-faq .faq-list details[open]{
  background: linear-gradient(180deg, rgba(255,250,243,.90), rgba(255,250,243,.65));
  box-shadow: var(--glass-shadow), 0 0 36px rgba(218,146,110,.22);
}

/* Summary (question row) */
#ai-visibility-faq .faq-list summary{
  position: relative;
  list-style:none;
  cursor:pointer;
  display:flex; align-items:center; gap:.75rem;
  margin:-.2rem 0 0;
  padding-right: 2.2rem; /* room for chevron */
  color:var(--brand);
  font-weight:800;
  letter-spacing:.2px;
  user-select:none;
}
#ai-visibility-faq .faq-list summary::-webkit-details-marker{ display:none; }

/* Chevron icon (rotates when open) */
#ai-visibility-faq .faq-list summary::after{
  content:"";
  position:absolute; right:16px; top: calc(var(--pad) - 2px);
  width: 18px; height: 18px; opacity:.9;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.35));
  transition: transform .18s ease, opacity .18s ease;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') center/contain no-repeat;
}
#ai-visibility-faq .faq-list details[open] summary::after{ transform: rotate(180deg); }

/* Focus ring (keyboard + a11y) */
#ai-visibility-faq .faq-list summary:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(218,146,110,.35), 0 0 0 6px rgba(218,146,110,.18);
  border-radius: 12px;
}

/* Answer body */
#ai-visibility-faq .faq-list details > p{
  margin: .85rem 0 0;
  color: var(--ink);
  line-height:1.6;
  background: linear-gradient(180deg, rgba(255,250,243,.78), rgba(255,250,243,.52));
  border-radius: calc(var(--radius) - 6px);
  padding: clamp(10px, 1.6vw, 14px);
  animation: faqOpen .22s ease both;
}

/* Dark theme answer background */
[data-theme="dark"] #ai-visibility-faq .faq-list details > p{
  background: linear-gradient(180deg, rgba(31,28,26,.55), rgba(31,28,26,.38));
}

/* Open/close content motion */
@keyframes faqOpen{
  from { opacity:0; transform: translateY(-4px); }
  to   { opacity:1; transform: translateY(0); }
}

/* Compact on small screens */
@media (max-width: 576px){
  #ai-visibility-faq .faq-list{ gap: 12px; }
  #ai-visibility-faq .faq-list summary{ padding-right: 1.9rem; }
}

/* Keep text readable on hover for unrelated cards in offers section */
#easefy-offers .seo-metric-card:hover{
  background: var(--glass);
  color: var(--ink);
}
/* ========= AI Visibility hero (works w/ or w/o .aiV wrapper) ========= */

/* Heading */
.aiV h1,
h1:has(+ .page-lead) {
  width: min(1100px, calc(100% - 32px));
  margin: 28px auto 6px;
  padding: clamp(6px, 0.8vw, 10px) clamp(10px, 1.2vw, 16px);
  font-size: clamp(1.6rem, 2.2vw + 1rem, 2.6rem);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: .2px;
  display: inline-block;

  /* gold → warm highlight gradient text */
  color: transparent;
  background: linear-gradient(92deg, #d38e62, #bc7f59 55%, #fff0e6 100%);
  -webkit-background-clip: text;
          background-clip: text;

  text-shadow: 0 6px 24px rgba(188,127,89,.18);
  position: relative;
}

.aiV h1::after,
h1:has(+ .page-lead)::after {
  content:"";
  position:absolute; left: 10px; right: 10px; bottom:-8px;
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(188,127,89,.25), rgba(255,240,230,.55), rgba(188,127,89,.25));
  filter: blur(6px); opacity:.9; pointer-events:none;
}

/* tweak the emoji a touch */
.aiV h1 > span[aria-hidden="true"],
h1:has(+ .page-lead) > span[aria-hidden="true"]{
  display:inline-block; transform: translateY(-1px); margin-right:.45rem;
}

/* Lead paragraph (glass card) */
.aiV .page-lead,
h1 + .page-lead {
  width: min(1100px, calc(100% - 32px));
  margin: 8px auto 18px;
  color: #3a2a22;
  font-size: clamp(.98rem, .35vw + .9rem, 1.05rem);
  line-height: 1.6;

  background: linear-gradient(180deg, rgba(255,250,243,.78), rgba(255,250,243,.52));
  border: 1px solid rgba(188,127,89,.28);
  border-radius: 14px;
  padding: clamp(10px, 1.2vw, 14px) clamp(12px, 1.4vw, 18px);
  box-shadow: 0 10px 30px rgba(102,61,41,.15);
  backdrop-filter: blur(14px) saturate(130%);
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.aiV .page-lead::before,
.aiV .page-lead::after,
h1 + .page-lead::before,
h1 + .page-lead::after{
  content:"";
  position:absolute; width:10px; height:10px; border-radius:50%;
  background: radial-gradient(closest-side, #fff 0 40%, rgba(255,255,255,0) 60%);
  opacity:.7; pointer-events:none;
}
.aiV .page-lead::before,
h1 + .page-lead::before { top:6px; left:6px; }
.aiV .page-lead::after,
h1 + .page-lead::after { bottom:6px; right:6px; }

@media (hover:hover){
  .aiV .page-lead:hover,
  h1 + .page-lead:hover{
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(102,61,41,.22), inset 0 1px 0 rgba(255,255,255,.55);
  }
}

/* Optional dark theme (if you toggle [data-theme="dark"] on html/body) */
[data-theme="dark"] .aiV h1,
[data-theme="dark"] h1:has(+ .page-lead){ text-shadow: 0 10px 28px rgba(188,127,89,.28); }

[data-theme="dark"] .aiV .page-lead,
[data-theme="dark"] h1 + .page-lead{
  background: linear-gradient(180deg, rgba(31,28,26,.55), rgba(31,28,26,.38));
  border-color: rgba(188,127,89,.32);
  color: #f7eee9;
}

/* Motion sensitivity */
@media (prefers-reduced-motion: reduce){
  .aiV .page-lead,
  h1 + .page-lead{ transition: none; }
}