/* sakartvelo.ai — Homepage 2026 visual layer
   Progressive enhancement only. Existing IDs, links, SEO and JS hooks remain authoritative. */

:root{
  --s26-bg:#0b0908;
  --s26-surface:rgba(27,21,18,.82);
  --s26-surface-strong:#17110f;
  --s26-line:rgba(255,255,255,.12);
  --s26-text:#fffaf4;
  --s26-muted:#c9beb5;
  --s26-wine:#d93d4b;
  --s26-wine-deep:#9f1f2c;
  --s26-gold:#e6bd69;
  --s26-gold-soft:#f2d99c;
  --s26-green:#56c79b;
  --s26-shadow:0 24px 72px rgba(0,0,0,.34);
  --s26-radius:26px;
}

[data-theme="light"]{
  --s26-bg:#fbf6ee;
  --s26-surface:rgba(255,255,255,.88);
  --s26-surface-strong:#fffaf2;
  --s26-line:rgba(77,49,34,.12);
  --s26-text:#211814;
  --s26-muted:#75655b;
  --s26-shadow:0 24px 60px rgba(104,72,44,.12);
}

html{background:var(--s26-bg)}
body{background:var(--s26-bg);color:var(--s26-text);text-rendering:optimizeLegibility}

body::before{
  background:
    radial-gradient(50% 32% at 88% 6%,rgba(217,61,75,.16),transparent 65%),
    radial-gradient(45% 34% at 5% 32%,rgba(230,189,105,.10),transparent 62%),
    radial-gradient(70% 45% at 50% 105%,rgba(86,199,155,.05),transparent 65%);
}

.wrap,header.top{max-width:920px}

header.top{
  position:relative;
  z-index:20;
  padding-top:max(16px,env(safe-area-inset-top));
}

.logo{letter-spacing:-.035em}
.logo .mark{filter:drop-shadow(0 6px 14px rgba(0,0,0,.22))}
.theme-btn{
  min-width:44px;min-height:44px;
  border-color:var(--s26-line);
  background:color-mix(in srgb,var(--s26-surface) 90%,transparent);
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  box-shadow:0 8px 24px rgba(0,0,0,.14)
}

#langBtn{
  width:auto;
  min-width:48px;
  padding:0 12px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.03em;
  font-size:.78rem;
}

.hero{
  min-height:clamp(540px,72vh,760px);
  margin-inline:calc(50% - 50vw);
  padding:clamp(120px,16vh,170px) max(20px,calc((100vw - 920px)/2 + 20px)) 42px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  text-align:left;
  border:0;
  border-radius:0 0 34px 34px;
  background:
    linear-gradient(180deg,rgba(4,6,7,.12) 0%,rgba(5,6,7,.20) 36%,rgba(8,8,8,.83) 78%,var(--s26-bg) 100%),
    linear-gradient(90deg,rgba(5,5,5,.52),transparent 68%),
    url('/hero-kazbegi.jpeg') center 38%/cover no-repeat;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.05);
}

[data-theme="light"] .hero{
  background:
    linear-gradient(180deg,rgba(14,10,8,.08) 0%,rgba(14,10,8,.10) 35%,rgba(18,13,10,.58) 78%,rgba(251,246,238,.98) 100%),
    linear-gradient(90deg,rgba(7,6,5,.42),transparent 72%),
    url('/hero-kazbegi.jpeg') center 38%/cover no-repeat;
}

.hero::after{height:2px;background:linear-gradient(90deg,transparent,var(--s26-gold),var(--s26-wine),transparent);opacity:.9}
.hero h1,
[data-theme="light"] .hero h1{
  max-width:760px;
  margin:0;
  color:#fffaf4;
  font-size:clamp(3.1rem,10vw,6.25rem);
  line-height:.91;
  letter-spacing:-.055em;
  text-shadow:0 12px 42px rgba(0,0,0,.40);
}
.hero h1 .em{color:#ef5966}
.hero .greet,
[data-theme="light"] .hero .greet{
  order:-1;
  display:inline-flex;
  width:max-content;
  max-width:100%;
  margin:0 0 14px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(10,9,8,.34);
  color:var(--s26-gold-soft);
  text-shadow:none;
  backdrop-filter:blur(10px)
}
.hero .sub,
[data-theme="light"] .hero .sub{
  max-width:610px;
  margin:18px 0 0;
  color:#f3eee8;
  font-size:clamp(1rem,2.5vw,1.2rem);
  text-shadow:0 3px 18px rgba(0,0,0,.55)
}
.hero .trust{
  order:-2;
  width:max-content;
  max-width:100%;
  margin:0 0 12px;
  color:#eee6de;
  background:rgba(12,10,9,.48);
  border-color:rgba(255,255,255,.18);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%)
}

.chat-shell,.law,.tile,.guide-card,.signal-card{
  border-color:var(--s26-line);
  box-shadow:var(--s26-shadow)
}

.chat-shell{
  margin-top:-8px;
  position:relative;
  z-index:4;
  border-radius:var(--s26-radius);
}

.chat-shell:not(.full){overflow:hidden}
.chat-shell:not(.full) .messages{max-height:380px}
.quick{gap:9px}
.quick button{min-height:42px;padding-inline:14px}
.input-row{gap:9px}
.input-row input{min-height:50px}
.icon-btn{min-width:50px;min-height:50px}

.law{border-radius:22px;padding:18px 20px}

.section-title{font-size:clamp(1.65rem,4vw,2rem);letter-spacing:-.035em}
.section-sub{max-width:620px}

.bento{gap:13px}
.tile{
  min-height:128px;
  border-radius:22px;
  padding:18px;
  border-left-width:1px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--card) 94%,white 6%),var(--card));
}
.tile::after{opacity:.06}
.tile .ti{width:44px;height:44px;border-radius:14px;box-shadow:none}
.tile h3,.tile h4{font-size:1.05rem;line-height:1.2}

/* Radar is still the real link/functionality; this layer only increases presence. */
.signal-card{
  border-radius:28px!important;
  overflow:hidden;
  box-shadow:0 26px 72px rgba(0,0,0,.32)!important;
}
.radar-screen{box-shadow:0 0 0 2px rgba(230,189,105,.85),0 0 30px rgba(86,199,155,.20)!important}
.signal-live-badge{backdrop-filter:blur(8px)}

.guide-grid{gap:13px!important}
.guide-card{
  border-radius:20px!important;
  overflow:hidden;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.share button{min-width:52px;min-height:52px}

:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid color-mix(in srgb,var(--s26-gold) 75%,white 25%);
  outline-offset:3px;
}

[dir="rtl"] .hero{text-align:right}
[dir="rtl"] .hero .sub{margin-right:0;margin-left:auto}
[dir="rtl"] .section-title::before{left:auto;right:-14px}

@media (hover:hover) and (pointer:fine){
  .tile:hover,.guide-card:hover{transform:translateY(-4px);border-color:rgba(230,189,105,.35)}
}

@media (max-width:680px){
  .wrap{padding-inline:14px}
  header.top{padding-inline:14px}
  .hero{padding-inline:18px;min-height:600px;border-radius:0 0 26px 26px}
  .hero h1{font-size:clamp(3rem,14vw,4.8rem)}
  .chat-shell{border-radius:22px}
  .bento{grid-template-columns:1fr 1fr;gap:10px}
  .tile{padding:15px;min-height:118px}
}

@media (max-width:430px){
  .hero{min-height:560px}
  .hero .trust{font-size:.75rem;padding:8px 11px}
  .hero .sub{font-size:.98rem}
  .bento{grid-template-columns:1fr 1fr}
  .tile.big{grid-column:span 2}
  .tile h3,.tile h4{font-size:.98rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

@supports not (backdrop-filter:blur(1px)){
  .theme-btn,.hero .trust,.hero .greet{background:rgba(15,11,9,.92)}
}