@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;600;700;800;900&display=swap');

:root{
  --bg: #f6f2ea;
  --bg2:#f7f4ef;
  --text:#0e0e10;
  --muted:#6f6f72;

  --orange:#f39a2d;
  --orange2:#ff7a22;

  --card:#ffffff;
  --line:rgba(0,0,0,.08);

  --wrap: 1100px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Heebo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);

  font-size: 18px;
  line-height: 1.75;
}

.wrap{
  width:min(var(--wrap), calc(100% - 36px));
  margin-inline:auto;
}

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

/* ===== Top bar ===== */
.topbar{
  background:#d8d6d3;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.nav{
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.brand{
  font-weight:900;
  letter-spacing:.2px;
  font-size:16.5px;
  white-space:nowrap;
}
.brand__orange{ color:var(--orange2); }
.brand__black{ color:#111; }
.brand--footer .brand__black{ color:#fff; }

/* ===== Tabs (Dynamic / Cosmic) ===== */
.tabs{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(10px);
}

.tab{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 9px 14px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 14.5px;
  color: rgba(0,0,0,.72);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.tab:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.55);
  color: rgba(0,0,0,.85);
}

.tab.is-active{
  color: #111;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  overflow:hidden;
}

.tab.is-active::before{
  content:"";
  position:absolute;
  inset:-50%;
  background:
    radial-gradient(closest-side, rgba(255,122,34,.35), transparent 60%),
    radial-gradient(closest-side, rgba(243,154,45,.25), transparent 62%),
    radial-gradient(closest-side, rgba(255,255,255,.22), transparent 65%);
  animation: cosmic 2.8s linear infinite;
  filter: blur(2px);
  opacity: .9;
}

.tab.is-active::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.35));
  opacity:.55;
}

.tab.is-active > *{ position:relative; z-index:1; }

@keyframes cosmic{
  0%{ transform: rotate(0deg) translateZ(0); }
  100%{ transform: rotate(360deg) translateZ(0); }
}

/* ===== Pills / Buttons ===== */
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.pill--small{
  padding:9px 14px;
  font-size:14.5px;
}
.pill--orange{
  background: linear-gradient(180deg, var(--orange), var(--orange2));
  color:#fff;
  box-shadow: 0 16px 30px rgba(243,154,45,.22);
}
.pill:hover{ transform: translateY(-1px); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 20px;
  border-radius:999px;
  font-weight:900;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
  font-size:16.5px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{ transform: translateY(-1px); }

.btn--primary{
  border-color:transparent;
  color:#fff;
  background: linear-gradient(180deg, var(--orange), var(--orange2));
  box-shadow: 0 18px 40px rgba(255,122,34,.22);
}
.btn--white{
  background:#fff;
  border-color:rgba(255,255,255,.65);
  color:#111;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}
.btn--ghost{
  background:transparent;
  border-color:rgba(255,255,255,.18);
  color:#fff;
}

/* ===== Hero ===== */
.hero{
  background: radial-gradient(900px 500px at 50% 100%, rgba(255,122,34,.08), transparent 60%),
              var(--bg2);
  min-height: 640px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero__inner{ padding: 70px 0 60px; }
.hero__center{
  text-align:center;
  margin-inline:auto;
  max-width: 760px;
}

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,122,34,.10);
  border:1px solid rgba(255,122,34,.18);
  color:#7b4a1c;
  font-weight:900;
  font-size:14.5px;
  margin-bottom:18px;
}

.hero__title{
  margin:0 0 12px;
  font-size: clamp(40px, 6.4vw, 60px);
  line-height:1.02;
  letter-spacing:-0.6px;
  font-weight:900;
}
.hero__title .accent{ color:var(--orange2); }

.hero__desc{
  margin:0 auto 18px;
  color:var(--muted);
  font-size:18px;
  font-weight:600;
  line-height:1.75;
  max-width: 62ch;
}

.hero__actions{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin-top: 14px;
}

/* ===== Why ===== */
.why{
  padding: 70px 0 64px;
  background:#fff;
}
.h2{
  margin:0;
  text-align:center;
  font-weight:900;
  font-size: clamp(28px, 4vw, 38px);
}
.brandWord{ color:var(--orange2); }

.sub{
  margin:10px 0 0;
  text-align:center;
  color:var(--muted);
  font-weight:600;
  font-size:17px;
}

.cards3{
  margin-top: 34px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius: 18px;
  padding: 24px 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.05);
  text-align:center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 55px rgba(0,0,0,.09);
}
.card__icon{
  font-size: 26px;
  margin-bottom: 10px;
}
.card__title{
  margin:0 0 8px;
  font-weight:900;
  font-size:20px;
}
.card__text{
  margin:0;
  color:var(--muted);
  font-weight:600;
  line-height:1.7;
  font-size:16.5px;
}

/* ===== FULLSCREEN MOCK SECTION ===== */
.demo{
  background: linear-gradient(180deg, #161617, #0f0f10);
  padding: 0;
}

.demo__inner{
  min-height: 92vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 56px 18px;
}

.mock{
  border-radius: 22px;
  background: radial-gradient(900px 260px at 50% 0%, rgba(255,122,34,.22), transparent 60%),
              rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 70px rgba(0,0,0,.35);
  overflow:hidden;
  color:#fff;
}

.mock--full{
  width: min(1200px, calc(100% - 12px));
  min-height: 70vh;
}

.mock__top{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 18px 18px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.dot{ width:11px; height:11px; border-radius:999px; opacity:.95; }
.dot.r{ background:#ff5f57; }
.dot.y{ background:#febc2e; }
.dot.g{ background:#28c840; }
.mock__hint{
  margin-right:auto;
  color: rgba(255,255,255,.60);
  font-weight:800;
  font-size:14.5px;
}

.mock__body{
  padding: 28px 22px 28px;
  display:flex;
  flex-direction:column;
  gap: 16px;
}

.mock__line{
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  padding: 18px 18px;
  border-radius: 16px;
  font-weight:650;
  font-size: 18px;
}

.mock__status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  padding: 12px 14px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

.mock__statusText{
  color: rgba(255,122,34,.98);
  font-weight:900;
  font-size: 16px;
}

.mock__loading{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color: rgba(255,255,255,.78);
  font-weight:900;
  font-size: 15px;
  white-space: nowrap;
}

.mock__loadingText{ opacity:.9; }

.dots{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.dots span{
  width:7px;
  height:7px;
  border-radius:999px;
  background: rgba(255,122,34,.95);
  transform: translateY(0);
  animation: dotBounce 1.05s infinite ease-in-out;
  box-shadow: 0 0 18px rgba(255,122,34,.35);
}
.dots .dot2{ animation-delay: .15s; opacity:.9; }
.dots .dot3{ animation-delay: .30s; opacity:.8; }

@keyframes dotBounce{
  0%, 70%, 100% { transform: translateY(0); }
  35% { transform: translateY(-7px); }
}

/* ===== CTA ===== */
.cta{
  padding: 72px 0;
  background: linear-gradient(180deg, var(--orange), var(--orange2));
  color:#fff;
}
.cta__inner{ text-align:center; }
.cta__title{
  margin:0;
  font-weight:900;
  font-size: clamp(34px, 5vw, 52px);
}
.cta__sub{
  margin:10px auto 18px;
  max-width: 60ch;
  color: rgba(255,255,255,.86);
  font-weight:650;
  font-size:18px;
}

/* ===== Footer ===== */
.footer{
  background:#0f0f10;
  color:#fff;
  padding: 26px 0 34px;
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.footer__copy{
  color: rgba(255,255,255,.55);
  font-weight:650;
  font-size:15.5px;
}
.footer__links{
  display:flex;
  align-items:center;
  gap:12px;
}
.footer__link{
  color: rgba(255,255,255,.82);
  font-weight:850;
  font-size:15px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.footer__link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
}

/* ===== Pages ===== */
.page{ min-height: calc(100vh - 56px); }

.legalHero{
  padding: 64px 0 38px;
  background: radial-gradient(900px 420px at 50% 0%, rgba(255,122,34,.10), transparent 60%),
              #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.legalTitle{
  margin: 10px 0 0;
  font-weight: 900;
  font-size: clamp(34px, 5vw, 54px);
  letter-spacing: -0.6px;
}
.legalSub{
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 650;
  font-size: 17px;
}

.legalBody{
  padding: 34px 0 70px;
  background: var(--bg2);
}
.legalCard{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  box-shadow: 0 14px 50px rgba(0,0,0,.06);
  overflow:hidden;
}
.legalText{
  padding: 26px 24px 18px;
  color:#111;
}
.legalText p{
  margin: 0 0 12px;
  font-weight: 650;
  color: #2a2a2c;
}
.legalH2{
  margin: 18px 0 10px;
  font-weight: 900;
  font-size: 22px;
  color:#111;
}
.legalList{
  margin: 0 0 12px;
  padding: 0 18px 0 0;
  color: #2a2a2c;
  font-weight: 650;
}
.legalList li{ margin: 0 0 8px; }
.legalLink{
  color: var(--orange2);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legalActions{
  display:flex;
  gap:12px;
  justify-content:flex-start;
  padding: 16px 18px 20px;
  background: linear-gradient(180deg, #161617, #0f0f10);
}

/* ===== About ===== */
.aboutGrid{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap: 18px;
  padding: 22px;
  align-items: start;
}

.aboutMedia{
  position: sticky;
  top: 80px;
}

.aboutPhoto{
  width: 100%;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.10);
  background: #fff;
}

.aboutText{
  padding: 6px 6px 0;
}

.aboutText p{
  margin: 0 0 14px;
  font-weight: 650;
  color: #2a2a2c;
  font-size: 18px;
  line-height: 1.85;
}

.aboutActions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 16px;
}

/* ===== Reveal animations ===== */
.js-reveal{
  opacity:0;
  transform: translateY(16px);
  transition: opacity .65s ease, transform .65s ease;
  transition-delay: var(--d, 0ms);
}
.js-reveal[data-reveal="fade"]{ transform:none; }
.js-reveal.is-in{
  opacity:1;
  transform: translateY(0);
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .cards3{ grid-template-columns: 1fr; }
  .hero{ min-height: 620px; }
  .mock--full{ min-height: 68vh; }
  .mock__status{ flex-direction:column; align-items:flex-start; }
  .footer__inner{ flex-direction:column; text-align:center; }
  .legalActions{ flex-direction:column; }

  .tabs{ width: 100%; justify-content: center; }
  .nav{ flex-wrap: wrap; height: auto; padding: 10px 0; }
  .aboutGrid{ grid-template-columns: 1fr; }
  .aboutMedia{ position: relative; top: auto; }
}

@media (max-width: 520px){
  .demo__inner{ min-height: 88vh; padding: 42px 14px; }
  .mock__body{ padding: 22px 16px; }
  .legalText{ padding: 22px 16px 14px; }
  .aboutGrid{ padding: 16px; }
  .tab{ padding: 9px 12px; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .dots span{ animation:none !important; }
  .btn, .pill, .card, .footer__link, .tab{ transition:none !important; }
  .tab.is-active::before{ animation:none !important; }
}

/* =========================================
   CONTACT FORM (EmailJS) - same style
========================================= */
.form{
  max-width: 860px;
}

.formGrid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.field{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.label{
  font-weight: 900;
  font-size: 15.5px;
  color: #151516;
}

.input, .textarea{
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  padding: 14px 14px;
  font-size: 16.5px;
  font-weight: 650;
  outline: none;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.textarea{
  resize: vertical;
  min-height: 160px;
}

.input:focus, .textarea:focus{
  border-color: rgba(255,122,34,.40);
  box-shadow: 0 0 0 6px rgba(255,122,34,.10);
}

.formActions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.notice{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
  font-weight: 900;
  font-size: 15.5px;
  color: #1e1e20;
  min-height: 22px;
}

.notice--ok{
  border-color: rgba(40,200,64,.25);
  background: rgba(40,200,64,.10);
}

.notice--err{
  border-color: rgba(255,95,87,.28);
  background: rgba(255,95,87,.10);
}

.btn.is-loading{
  opacity: .92;
  cursor: progress;
}

@media (max-width: 980px){
  .formGrid{ grid-template-columns: 1fr; }
}