/* =========================================================
   INTESY — Modern White UI (Accent #eaa116) — PRO v2
   ========================================================= */

:root{
  --accent: #eaa116;
  --accent2: #f3c15a;

  --ink: #0f172a;
  --muted: #475569;
  --muted2: #64748b;

  --bg: #ffffff;
  --soft: #f6f7fb;
  --soft2: #f1f3f7;

  --line: rgba(2,6,23,.10);
  --line2: rgba(2,6,23,.16);

  --shadow-sm: 0 1px 2px rgba(2,6,23,.05), 0 10px 26px rgba(2,6,23,.06);
  --shadow-md: 0 12px 30px rgba(2,6,23,.10), 0 30px 70px rgba(2,6,23,.12);

  --r-xl: 1.5rem;
  --r-lg: 1.25rem;
  --r-md: 1rem;
}

/* Base */
html, body { height: 100%; }
body{
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tailwind helper overrides */
.text-gray-900{ color: var(--ink) !important; }
.text-gray-600{ color: var(--muted) !important; }
.text-gray-500{ color: var(--muted2) !important; }
.border-gray-200{ border-color: var(--line) !important; }
.bg-gray-50{ background: var(--soft) !important; }
.bg-white{ background: #fff !important; }

a{ text-underline-offset: 3px; }
a:hover{ text-decoration-color: rgba(234,161,22,.65) !important; }

/* ======================================
   Header / Nav
   ====================================== */
header{
  backdrop-filter: blur(10px);
}
header nav a{
  position: relative;
  transition: color .18s ease;
}
header nav a:hover{ color: var(--ink); }

/* active item underline (keď dáš triedu text-gray-950) */
header nav a.text-gray-950::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  width:100%;
  height:3px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

/* Mobile panel hover */
[data-mobile-panel] a{ border:1px solid transparent; }
[data-mobile-panel] a:hover{ border-color: var(--line); }

/* ======================================
   Hero / Brand
   ====================================== */
.brand-gradient{
  background:
    radial-gradient(900px 320px at 12% -10%, rgba(234,161,22,.22), transparent 60%),
    radial-gradient(700px 260px at 85% 0%, rgba(15,23,42,.06), transparent 55%),
    linear-gradient(180deg, #ffffff, #f7f8fb);
}

/* Tech Mesh (logo-inspired) */
.brand-mesh{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.brand-mesh::before{
  content:"";
  position:absolute;
  inset:-140px;
  background:
    radial-gradient(900px 360px at 12% -10%, rgba(234,161,22,.22), transparent 60%),
    radial-gradient(700px 300px at 88% 0%, rgba(15,23,42,.08), transparent 55%),
    radial-gradient(600px 260px at 20% 85%, rgba(234,161,22,.12), transparent 60%);
  z-index:0;
  pointer-events:none;
}
.brand-mesh::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(15,23,42,.14) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity:.14;
  mask-image: radial-gradient(ellipse at 20% 10%, rgba(0,0,0,1) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 72%);
  z-index:0;
  pointer-events:none;
}
.brand-mesh > *{ position:relative; z-index:1; }

/* Premium “film grain” (jemné, ale robí moderný feeling) */
.brand-mesh .grain{
  pointer-events:none;
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.08;
  background-image:
    repeating-linear-gradient(0deg, rgba(2,6,23,.06) 0, rgba(2,6,23,.06) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: multiply;
}

/* Hero title */
.hero-title{ letter-spacing:-0.03em; }
@media (min-width: 1024px){
  .hero-title{ font-size: 3.25rem; line-height: 1.03; }
}

/* Underline accent for headings */
.title-underline{
  position: relative;
  display: inline-block;
}
.title-underline::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-12px;
  width: 72%;
  max-width: 120px;
  height: 6px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(234,161,22,.95), rgba(234,161,22,.15));
}

/* ======================================
   Section divider (subtle)
   ====================================== */
.section-divider{ position:relative; }
.section-divider::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform: translateX(-50%);
  width: min(920px, 86%);
  height:1px;
  background: linear-gradient(to right, transparent, rgba(2,6,23,.10), transparent);
}

/* ======================================
   Cards
   ====================================== */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  transition: transform .20s ease, box-shadow .20s ease, border-color .20s ease;
  position: relative;
}

/* subtle edge highlight (premium) */
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  opacity:.75;
}

.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(234,161,22,.35);
}

/* Card topline */
.card-topline{ position:relative; }
.card-topline::before{
  content:"";
  position:absolute;
  left: 1.25rem;
  top: 0.95rem;
  width: 74px;
  height: 4px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(234,161,22,.95), transparent);
  opacity:.85;
}

/* Dark featured card */
.card-dark{
  background: linear-gradient(135deg, #0b1220, #111827);
  border: 1px solid rgba(255,255,255,.10);
  color:#fff;
}
.card-dark::after{ opacity:.25; }
.card-dark .muted-dark{ color: rgba(226,232,240,.78); }

/* Icon bubble */
.icon-bubble{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(234,161,22,.14);
  border: 1px solid rgba(234,161,22,.22);
  box-shadow: 0 10px 20px rgba(234,161,22,.10);
}

/* ======================================
   Buttons
   ====================================== */
button, .btn{
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease, filter .18s ease;
}

.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  background: linear-gradient(135deg, #0b1220, #111827);
  color:#fff;
  border-radius: 1.15rem;
  padding: .78rem 1.25rem;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(2,6,23,.18);
}
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(2,6,23,.28);
}

.btn-accent{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  color:#111;
  border: 1px solid rgba(234,161,22,.35);
  border-radius: 1.15rem;
  padding: .78rem 1.25rem;
  font-weight: 900;
  box-shadow: 0 14px 28px rgba(234,161,22,.20);
}
.btn-accent:hover{
  transform: translateY(-1px);
  filter: brightness(.98);
  box-shadow: 0 20px 44px rgba(234,161,22,.30);
}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  background: rgba(15,23,42,.04);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 1.1rem;
  padding: .7rem 1rem;
  font-weight: 800;
}
.btn-ghost:hover{
  background: rgba(15,23,42,.06);
  border-color: var(--line2);
  transform: translateY(-1px);
}

/* Map tailwind class used in HTML */
.bg-gray-900{
  background: linear-gradient(135deg, #0b1220, #111827) !important;
}

/* ======================================
   Inputs / Forms
   ====================================== */
input, textarea, select{
  border-radius: 1.15rem !important;
  border-color: #000 !important;
  background:#fff;
}
input::placeholder, textarea::placeholder{ color: rgba(71,85,105,.7); }
input:focus, textarea:focus, select:focus{
  outline:none !important;
  border-color: rgba(234,161,22,.75) !important;
  box-shadow: 0 0 0 4px rgba(234,161,22,.18) !important;
}
.form-soft{
  background: linear-gradient(180deg, #ffffff, var(--soft));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
input[type="checkbox"]{ accent-color: var(--accent); }

/* ======================================
   Badges
   ====================================== */
.badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .75rem;
  font-size:.75rem;
  font-weight:900;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(15,23,42,.03);
  color: var(--ink);
}
.badge-accent{
  border-color: rgba(234,161,22,.25);
  background: rgba(234,161,22,.14);
  color: #7a4e00;
}

/* ======================================
   Trust strip
   ====================================== */
.trust-strip{
  background: linear-gradient(180deg, #fff, rgba(246,247,251,.92));
  border: 1px solid rgba(2,6,23,.10);
  border-radius: 1.5rem;
  box-shadow: 0 1px 2px rgba(2,6,23,.04), 0 14px 38px rgba(2,6,23,.06);
}

/* ======================================
   FAQ
   ====================================== */
.faq-item{
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:#fff;
  overflow:hidden;
}
.faq-q{
  width:100%;
  text-align:left;
  padding: 1rem 1.1rem;
  font-weight: 900;
  color: var(--ink);
  background: linear-gradient(180deg, #fff, rgba(15,23,42,.02));
}
.faq-q:hover{ background: linear-gradient(180deg, #fff, rgba(234,161,22,.06)); }
.faq-a{
  padding: .9rem 1.1rem 1.1rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

/* ======================================
   Footer
   ====================================== */
footer{ background: linear-gradient(180deg, #fff, var(--soft)); }

/* ======================================
   Assistant widget
   ====================================== */
[data-assistant-panel]{
  border-radius: var(--r-xl) !important;
  box-shadow: 0 20px 70px rgba(2,6,23,.18) !important;
}
[data-assistant-feed]::-webkit-scrollbar{ width:10px; }
[data-assistant-feed]::-webkit-scrollbar-thumb{
  background: rgba(2,6,23,.12);
  border-radius: 999px;
}

/* ======================================
   Notices
   ====================================== */
.notice{
  border-radius: 1.1rem;
  border: 1px solid var(--line);
  padding: .85rem 1rem;
  font-size: .9rem;
}
.notice-ok{
  border-color: rgba(34,197,94,.25);
  background: rgba(34,197,94,.08);
  color: rgba(20,83,45,1);
}
.notice-err{
  border-color: rgba(239,68,68,.25);
  background: rgba(239,68,68,.08);
  color: rgba(127,29,29,1);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}