:root{
  --ink:#21161a;
  --plum:#4b0c22;
  --plum-2:#2a0613;
  --wine:#691638;
  --gold:#d8ae49;
  --gold-2:#f2d985;
  --cream:#fff8ed;
  --sand:#efe3d3;
  --taupe:#7d6465;
  --line:rgba(75,12,34,.16);
  --shadow:0 26px 70px rgba(45,12,22,.18);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--cream);
  font-family:"Inter","Segoe UI",Arial,sans-serif;
  line-height:1.55;
}
body:before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.38;
  background:
    radial-gradient(circle at 10% 12%, rgba(216,174,73,.22), transparent 26%),
    radial-gradient(circle at 80% 8%, rgba(105,22,56,.18), transparent 22%),
    linear-gradient(120deg, transparent 0 48%, rgba(216,174,73,.08) 48% 49%, transparent 49%);
  z-index:-1;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(1180px, calc(100% - 44px)); margin-inline:auto}
.serif{font-family:Georgia,"Times New Roman",serif}
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(41,6,19,.94);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(242,217,133,.15);
}
.nav{
  height:82px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{display:flex; align-items:center; gap:14px; letter-spacing:.08em; color:#fff}
.brand-mark{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(216,174,73,.7); color:var(--gold-2); font-family:Georgia,serif; font-weight:800;
  background:radial-gradient(circle at 35% 30%, rgba(216,174,73,.24), transparent 45%), #381023;
  box-shadow:0 0 0 6px rgba(216,174,73,.05);
}
.brand strong{font-size:15px; line-height:1.15}
.nav-links{display:flex; align-items:center; gap:32px; color:#fff6e8; font-size:14px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  border:1px solid rgba(216,174,73,.45);
  border-radius:999px;
  padding:14px 22px;
  font-weight:800;
  transition:.25s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(75,12,34,.22)}
.btn-primary{background:var(--plum); color:white; border-color:var(--plum)}
.btn-gold{background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:#2b0715; border:0}
.btn-ghost{background:rgba(255,255,255,.65); color:var(--plum)}
.hero{
  overflow:hidden;
  background:
    linear-gradient(100deg, var(--cream) 0 48%, rgba(75,12,34,.1) 48% 49%, transparent 49%),
    radial-gradient(circle at 80% 20%, rgba(216,174,73,.28), transparent 25%);
}
.hero-grid{
  min-height:720px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:24px;
}
.kicker{letter-spacing:.16em; text-transform:uppercase; color:var(--wine); font-weight:900; font-size:12px}
.kicker:after{content:""; display:inline-block; width:45px; height:1px; background:var(--gold); vertical-align:middle; margin-left:12px}
h1,h2,h3{margin:0}
.hero h1{
  margin-top:18px; font-family:Georgia,serif; font-size:clamp(50px, 7vw, 88px); line-height:.96; letter-spacing:-.045em;
}
.hero h1 em{color:var(--wine); font-style:normal}
.lead{font-size:19px; color:#5a4647; max-width:560px}
.hero-actions{display:flex; flex-wrap:wrap; gap:16px; margin:32px 0}
.micro-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:44px}
.micro{
  display:flex; gap:12px; align-items:center;
  padding:16px; border-right:1px solid var(--line);
  color:#5d4b4e; font-size:13px; animation:rise .7s ease both;
}
.micro:nth-child(2){animation-delay:.12s}.micro:nth-child(3){animation-delay:.24s}
.micro i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--wine);background:#fff1d4;border:1px solid rgba(216,174,73,.35);font-style:normal}
.hero-visual{
  position:relative; min-height:720px; display:grid; place-items:center;
  background:
    linear-gradient(180deg, rgba(42,6,19,.25), rgba(42,6,19,.85)),
    url("assets/banner.png") center/cover no-repeat;
  clip-path:ellipse(92% 100% at 80% 50%);
}
.hero-visual:before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 60% 40%, transparent, rgba(42,6,19,.55) 70%);
}
.device-cluster{position:relative; z-index:1; display:flex; gap:24px; align-items:center}
.phone{
  width:230px; padding:12px; border-radius:38px; background:#111; box-shadow:0 35px 70px rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.2);
}
.phone img{border-radius:28px}
.phone:nth-child(1){transform:rotate(-5deg) translateY(34px); animation:float 6s ease-in-out infinite}
.phone:nth-child(2){transform:rotate(6deg) translateY(-24px); animation:float 6.5s ease-in-out infinite reverse}
.app-badge{
  position:absolute; z-index:3; left:18%; bottom:95px; width:96px; height:96px; border-radius:24px;
  box-shadow:0 18px 38px rgba(0,0,0,.34); animation:pulse 3.2s ease-in-out infinite;
}
.section{padding:92px 0}
.spotlight{
  background:
    radial-gradient(circle at 72% 20%, rgba(216,174,73,.18), transparent 22%),
    linear-gradient(135deg,#4b0c22,#240612);
  color:#fff8ee;
  overflow:hidden;
}
.spot-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:42px; align-items:center}
.spotlight h2,.section h2{font-family:Georgia,serif; font-size:clamp(36px,5vw,60px); line-height:1}
.feature-list{display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; margin:34px 0}
.feature-list div{display:flex; gap:10px; align-items:center}
.feature-list span{color:var(--gold-2)}
.screens{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:end}
.screen-card{text-align:center; animation:rise linear both; animation-timeline:view(); animation-range:entry 0 cover 35%}
.screen-card img{max-height:520px; margin:auto; filter:drop-shadow(0 26px 38px rgba(0,0,0,.45))}
.screen-card b{display:block; margin-top:14px}
.service-head{display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:34px}
.services{display:grid; grid-template-columns:repeat(6,1fr); gap:18px}
.service{
  min-height:220px; padding:26px 20px; border:1px solid rgba(75,12,34,.15); border-radius:18px;
  background:rgba(255,255,255,.56); box-shadow:0 10px 26px rgba(75,12,34,.06);
  transition:.25s ease;
}
.service:hover{transform:translateY(-8px); box-shadow:var(--shadow)}
.service i{font-style:normal; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; color:var(--wine); border:1px solid rgba(216,174,73,.55); margin-bottom:24px}
.service h3{font-size:17px}
.service p{font-size:13px; color:#66575a}
.process{
  background:
    radial-gradient(circle at 20% 50%, rgba(216,174,73,.16), transparent 18%),
    linear-gradient(135deg,#310716,#541128);
  color:#fff8ee;
  text-align:center;
}
.timeline{display:grid; grid-template-columns:repeat(5,1fr); gap:20px; position:relative; margin-top:56px}
.timeline:before{
  content:""; position:absolute; left:4%; right:4%; top:49px; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--gold-2),var(--gold),transparent);
}
.step{position:relative}
.step-icon{width:92px;height:92px;border-radius:50%;margin:auto;display:grid;place-items:center;background:#4b0c22;border:2px solid var(--gold);font-size:34px;box-shadow:0 0 35px rgba(216,174,73,.25)}
.step h3{margin-top:24px}
.step p{font-size:13px; color:#ead9c4}
.trust{padding:48px 0; background:#fff4de}
.trust-row{display:grid; grid-template-columns:repeat(5,1fr); gap:0}
.trust-item{text-align:center; padding:0 24px; border-right:1px solid rgba(75,12,34,.14)}
.trust-item:last-child{border:0}
.trust-item strong{display:block; color:var(--wine); font-size:28px; font-family:Georgia,serif}
.contact{background:#fffaf2}
.contact-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:50px; align-items:center}
.contact h2{font-family:Georgia,serif; font-size:52px; line-height:1}
.contact-cards{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.contact-card{padding:26px; border:1px solid rgba(75,12,34,.12); border-radius:18px; background:white; box-shadow:0 16px 35px rgba(75,12,34,.08)}
.contact-card small{display:block; color:var(--taupe); font-weight:800}
.footer{
  color:#fff8ee;
  background:
    radial-gradient(circle at 92% 90%, rgba(216,174,73,.16), transparent 24%),
    linear-gradient(135deg,#280610,#4b0c22);
  padding:62px 0 24px;
}
.footer-grid{display:grid; grid-template-columns:1.4fr .8fr .8fr 1fr 1.2fr; gap:38px}
.footer h4{color:var(--gold-2); margin:0 0 16px}
.footer a,.footer p{color:#f2e5d5; font-size:14px}
.footer li{list-style:none; margin:9px 0}
.footer ul{padding:0; margin:0}
.footer-product{display:flex; gap:12px}
.footer-product img{width:56px; height:56px; border-radius:14px}
.copyright{border-top:1px solid rgba(255,255,255,.12); margin-top:42px; padding-top:18px; display:flex; justify-content:space-between; gap:20px; color:#d7c5b2; font-size:13px}
.policy-hero{
  background:
    linear-gradient(90deg, rgba(42,6,19,.94), rgba(42,6,19,.64)),
    url("assets/banner.png") center/cover no-repeat;
  color:#fff8ee; padding:120px 0 110px;
}
.policy-hero h1{font-family:Georgia,serif; font-size:72px; line-height:1}
.policy-layout{display:grid; grid-template-columns:1fr 330px; gap:34px; align-items:start}
.policy-card,.key-card{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(75,12,34,.13);
  border-radius:24px;
  box-shadow:0 22px 54px rgba(75,12,34,.12);
}
.policy-card{padding:34px}
.policy-item{display:grid; grid-template-columns:42px 1fr; gap:20px; padding:22px 0; border-bottom:1px solid var(--line)}
.policy-item:last-child{border-bottom:0}
.number{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--plum);color:white;font-weight:900}
.policy-item h2{font-family:Georgia,serif;font-size:25px;margin-bottom:8px}
.policy-item p{margin:0;color:#4f4143}
.key-card{padding:34px; position:sticky; top:110px}
.key-card h2{font-family:Georgia,serif;font-size:36px}
.key-card ul{padding:0; margin:28px 0 0}
.key-card li{list-style:none; display:flex; gap:12px; padding:18px 0; border-top:1px solid var(--line)}
.key-card span{width:28px;height:28px;border-radius:50%;background:var(--gold);display:grid;place-items:center;color:#381023;font-weight:900;flex:none}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -18px}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes rise{from{opacity:0; transform:translateY(24px)}to{opacity:1; transform:none}}
@media (max-width:900px){
  .nav-links{display:none}
  .hero-grid,.spot-grid,.contact-grid,.policy-layout{grid-template-columns:1fr}
  .hero-visual{clip-path:none; min-height:560px}
  .micro-row,.services,.screens,.timeline,.trust-row,.footer-grid,.contact-cards{grid-template-columns:1fr}
  .service-head{display:block}
  .timeline:before{display:none}
  .footer-grid{gap:24px}
  .copyright{display:block}
}