/* UNNA AI | Premium Tanzania Flag Product System */
:root{
  --tz-green:#1eb53a;
  --tz-yellow:#fcd116;
  --tz-black:#111111;
  --tz-blue:#00a3dd;

  --bg:#050d14;
  --bg-soft:#081923;
  --card:#0d1b24;
  --text:#f8fafc;
  --muted:#9fb0c0;
  --line:rgba(255,255,255,.12);

  --shadow:0 24px 70px rgba(0,0,0,.34);
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:Inter,Arial,Helvetica,sans-serif;
  background:
    radial-gradient(circle at 12% 8%,rgba(30,181,58,.24),transparent 28%),
    radial-gradient(circle at 88% 14%,rgba(0,163,221,.24),transparent 30%),
    radial-gradient(circle at 50% 100%,rgba(252,209,22,.13),transparent 34%),
    linear-gradient(180deg,#050d14,#07131d 45%,#050d14);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
}

a{text-decoration:none;color:inherit}

.wrap{
  width:min(1180px,92%);
  margin:auto;
}

.flag-strip{
  height:6px;
  background:linear-gradient(
    90deg,
    var(--tz-green) 0 32%,
    var(--tz-yellow) 32% 43%,
    var(--tz-black) 43% 57%,
    var(--tz-yellow) 57% 68%,
    var(--tz-blue) 68% 100%
  );
}

.topbar{
  position:sticky;
  top:0;
  z-index:99;
  background:rgba(5,13,20,.86);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}

nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:15px 0;
  flex-wrap:wrap;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:950;
  font-size:24px;
  letter-spacing:-.6px;
}

.brand span:last-child{
  background:linear-gradient(90deg,#fff,var(--tz-yellow),var(--tz-blue));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.flag-mark{
  width:48px;
  height:32px;
  border-radius:9px;
  position:relative;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.32);
  background:linear-gradient(
    145deg,
    var(--tz-green) 0 34%,
    var(--tz-yellow) 34% 43%,
    var(--tz-black) 43% 57%,
    var(--tz-yellow) 57% 66%,
    var(--tz-blue) 66% 100%
  );
  animation:flagWave 3s ease-in-out infinite;
  transform-origin:left center;
}

.flag-mark:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.20),transparent 24%,rgba(0,0,0,.15) 52%,transparent 76%);
}

@keyframes flagWave{
  0%,100%{transform:skewY(0deg) scaleX(1)}
  50%{transform:skewY(-3deg) scaleX(.98)}
}

.navlinks{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.navbtn,
.theme-select,
.lang-toggle{
  min-height:42px;
  padding:10px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.055);
  color:#e0f2fe;
  font-weight:850;
  font-size:13px;
  outline:none;
  cursor:pointer;
}

.navbtn{
  text-transform:capitalize;
  letter-spacing:.1px;
}

.navbtn:hover,
.theme-select:hover,
.lang-toggle:hover{
  border-color:rgba(252,209,22,.55);
  background:rgba(255,255,255,.085);
  color:#fff;
}

.lang-wrap{
  position:relative;
}

.lang-toggle{
  display:flex;
  align-items:center;
  gap:8px;
}

.lang-menu{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  width:220px;
  padding:10px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(8,25,35,.98);
  box-shadow:var(--shadow);
  display:none;
  z-index:120;
}

.lang-wrap.open .lang-menu{
  display:grid;
  gap:7px;
}

.lang-option{
  width:100%;
  padding:10px 12px;
  border-radius:13px;
  border:1px solid transparent;
  background:transparent;
  color:#dbeafe;
  text-align:left;
  font-weight:800;
  cursor:pointer;
}

.lang-option:hover,
.lang-option.active{
  background:rgba(252,209,22,.12);
  border-color:rgba(252,209,22,.32);
  color:#fff;
}

.hero{
  min-height:calc(100vh - 78px);
  display:grid;
  grid-template-columns:1.03fr .97fr;
  gap:44px;
  align-items:center;
  padding:64px 0;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 13px;
  border-radius:999px;
  border:1px solid rgba(252,209,22,.42);
  background:rgba(252,209,22,.12);
  color:#fde68a;
  font-weight:900;
  font-size:12px;
}

.pulse{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--tz-green);
  box-shadow:0 0 0 8px rgba(30,181,58,.14);
}

h1{
  font-size:clamp(42px,6vw,78px);
  line-height:.98;
  letter-spacing:-2.2px;
  margin:18px 0 22px;
}

.grad{
  background:linear-gradient(90deg,var(--tz-green),var(--tz-yellow),var(--tz-blue));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.lead{
  font-size:18px;
  color:#d5e5ef;
  max-width:780px;
}

.actions{
  display:flex;
  gap:13px;
  flex-wrap:wrap;
  margin-top:28px;
}

.btn{
  padding:14px 20px;
  border-radius:16px;
  font-weight:900;
  border:1px solid transparent;
  display:inline-flex;
  cursor:pointer;
}

.btn.primary{
  background:linear-gradient(135deg,var(--tz-yellow),#fff176);
  color:#111;
}

.btn.secondary{
  background:rgba(255,255,255,.055);
  border-color:var(--line);
  color:#fff;
}

.mock{
  background:linear-gradient(145deg,rgba(13,27,36,.96),rgba(2,8,14,.82));
  border:1px solid var(--line);
  border-radius:32px;
  padding:24px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}

.mock:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(135deg,rgba(30,181,58,.24),rgba(252,209,22,.14),rgba(0,163,221,.22));
  filter:blur(36px);
  z-index:-1;
}

.phone{
  max-width:405px;
  margin:auto;
  background:linear-gradient(180deg,#071018,#050b10);
  border:1px solid rgba(255,255,255,.14);
  border-radius:36px;
  padding:16px;
  box-shadow:
    inset 0 0 0 6px rgba(255,255,255,.03),
    0 18px 50px rgba(0,0,0,.32);
}

.phone-top{
  height:24px;
  width:120px;
  border-radius:0 0 16px 16px;
  background:#010409;
  margin:-16px auto 16px;
}

.chat-head{
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--line);
  padding-bottom:14px;
  margin-bottom:14px;
}

.avatar{
  width:42px;
  height:42px;
  border-radius:16px;
  background:linear-gradient(135deg,var(--tz-green),var(--tz-yellow),var(--tz-blue));
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  color:#111;
}

.chat-title b{display:block}

.chat-title small{
  color:var(--muted);
  font-weight:800;
}

.bubbles{
  display:grid;
  gap:12px;
}

.bubble{
  padding:12px 14px;
  border-radius:18px;
  font-size:13px;
  border:1px solid rgba(255,255,255,.08);
}

.ai{background:rgba(30,181,58,.13)}
.user{background:rgba(0,163,221,.12);margin-left:36px}

.flow-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:18px;
}

.tag{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  font-size:11px;
  font-weight:850;
  color:#e0f2fe;
}

section{padding:72px 0}

.section-head{
  display:flex;
  justify-content:space-between;
  gap:22px;
  align-items:end;
  margin-bottom:28px;
}

h2{
  font-size:clamp(30px,4vw,50px);
  line-height:1.05;
  letter-spacing:-1px;
}

.muted,
.card p,
.section-head p{
  color:var(--muted);
}

.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.card{
  background:linear-gradient(145deg,rgba(13,27,36,.94),rgba(2,8,14,.76));
  border:1px solid var(--line);
  border-radius:26px;
  padding:24px;
  box-shadow:0 16px 50px rgba(0,0,0,.20);
}

.card h3{
  font-size:19px;
  margin-bottom:8px;
}

.icon{
  width:46px;
  height:46px;
  border-radius:16px;
  background:rgba(30,181,58,.13);
  border:1px solid rgba(30,181,58,.28);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
}

.form{display:grid;gap:12px}

.input,
.textarea{
  width:100%;
  background:#071018;
  border:1px solid var(--line);
  border-radius:14px;
  color:#fff;
  padding:13px 14px;
  font:inherit;
}

.textarea{min-height:120px}

.footer{
  padding:34px 0;
  border-top:1px solid var(--line);
  color:var(--muted);
  text-align:center;
}

body.theme-light{
  --bg:#f8fafc;
  --card:#ffffff;
  --text:#111827;
  --muted:#475569;
  background:#f8fafc;
  color:#111827;
}

body.theme-light .topbar,
body.theme-light .card,
body.theme-light .mock,
body.theme-light .phone,
body.theme-light .navbtn,
body.theme-light .theme-select,
body.theme-light .lang-toggle,
body.theme-light .lang-menu{
  background:#fff;
  color:#111827;
}

body.theme-light .lead,
body.theme-light .muted,
body.theme-light .card p,
body.theme-light .chat-title small{
  color:#475569;
}

body.theme-light .tag,
body.theme-light .bubble{
  color:#111827;
}

[dir="rtl"] body{text-align:right}
[dir="rtl"] .brand,
[dir="rtl"] .navlinks{direction:ltr}

@media(max-width:920px){
  .hero,.grid2,.grid3,.grid4{grid-template-columns:1fr}
  .section-head{display:block}
  .section-head p{margin-top:12px}
  h1{letter-spacing:-1.4px}
}

@media(max-width:560px){
  nav{align-items:flex-start}
  .navlinks,.navbtn,.theme-select,.lang-wrap,.lang-toggle{width:100%}
  .lang-menu{left:0;right:auto;width:100%}
  .hero{padding:46px 0}
  .phone{max-width:100%}
}