@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/proposals/fraunces-600.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/proposals/barlow-400.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/proposals/barlow-600.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/proposals/barlow-800.woff2') format('woff2')}

:root{
  --ink:#0b1228;
  --ink2:#2c3658;
  --mute:#5a6488;
  --paper:#f4f6fb;
  --blue:#2f54e8;
  --blue-deep:#1b2f9c;
  --line:rgba(47,84,232,.16);
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Barlow','Helvetica Neue',ui-sans-serif,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body.lp-shop{
  min-height:100vh;
  color:var(--ink);
  font:400 17px/1.5 var(--sans);
  background:var(--paper);
  position:relative;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid var(--blue);outline-offset:4px}

.lp-atmosphere{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 480px at 12% 8%,rgba(47,84,232,.18),transparent 70%),
    radial-gradient(700px 420px at 88% 18%,rgba(27,47,156,.12),transparent 72%),
    linear-gradient(165deg,#eef1fa 0%,#f7f8fc 42%,#e8ecf8 100%);
  animation:lp-shift 14s ease-in-out infinite alternate;
}
@keyframes lp-shift{
  from{filter:hue-rotate(0deg)}
  to{filter:hue-rotate(-8deg)}
}

.lp-top,.lp-hero,.lp-foot{position:relative;z-index:1}
.lp-top{
  display:flex;justify-content:space-between;align-items:center;
  padding:28px 5vw 8px;gap:20px;
}
.lp-brand{
  font-family:var(--display);
  font-size:clamp(34px,4.2vw,52px);
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1;
  animation:lp-rise .7s ease both;
}
.lp-lang{
  font-size:13px;font-weight:800;letter-spacing:.08em;
  padding:10px 0;border-bottom:2px solid transparent;
}
.lp-lang:hover{border-color:var(--blue)}

.lp-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,64px);
  align-items:center;
  min-height:calc(100vh - 160px);
  padding:24px 5vw 48px;
}
.lp-copy{max-width:540px;animation:lp-rise .7s ease both}
.lp-hero h1{
  font-family:var(--display);
  font-size:clamp(40px,5.2vw,72px);
  line-height:1.02;
  letter-spacing:-.045em;
  margin:0 0 18px;
  font-weight:600;
}
.lp-lead{margin:0 0 28px;color:var(--ink2);font-size:clamp(17px,1.4vw,20px);max-width:440px}
.lp-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:16px 28px;
  background:var(--blue);color:#fff;font-weight:800;font-size:18px;letter-spacing:.01em;
  border-radius:10px;box-shadow:0 10px 30px rgba(47,84,232,.28);
  transition:transform .2s ease,background .2s ease;
}
.lp-cta:hover{background:var(--blue-deep);transform:translateY(-1px)}
.lp-note{margin:18px 0 0;font-size:13px;color:var(--mute);max-width:420px;line-height:1.55}

.lp-demo{
  margin:0;min-width:0;width:100%;
  animation:lp-rise .8s ease both;
}
.lp-demo-stage{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  min-height:220px;
  overflow:hidden;
  background:#0b1228;
  box-shadow:0 28px 70px rgba(11,18,40,.22);
}
.lp-demo-still,.lp-demo-video{
  display:block;width:100%;height:100%;
  object-fit:cover;border:0;
}
.lp-demo-video{
  position:absolute;inset:0;z-index:1;
  background:transparent;
}
.lp-demo-still{
  position:relative;z-index:2;
  animation:lp-demo-pan 20s ease-in-out infinite alternate;
}
@keyframes lp-demo-pan{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to{transform:scale(1.12) translate3d(-2%,-1%,0)}
}
.lp-demo figcaption{margin-top:12px;font-size:12px;color:var(--mute)}

.lp-examples{
  position:relative;z-index:1;
  padding:8px 5vw 56px;
  animation:lp-rise .85s ease both;
}
.lp-examples h2{
  font-family:var(--display);
  font-size:clamp(28px,3.2vw,40px);
  letter-spacing:-.03em;
  margin:0 0 10px;
  font-weight:600;
}
.lp-examples-lead{
  margin:0 0 28px;color:var(--mute);font-size:15px;max-width:520px;
}
.lp-example-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.5vw,28px);
}
.lp-example-card{
  min-width:0;
  background:rgba(255,255,255,.55);
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.lp-example-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(11,18,40,.12);
}
.lp-example-card a{display:block;color:inherit}
.lp-example-card img{
  display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:#dfe5f5;
}
.lp-example-card h3{
  font-family:var(--display);
  font-size:22px;margin:0 0 6px;letter-spacing:-.02em;font-weight:600;
}
.lp-example-card p{margin:0;color:var(--ink2);font-size:14px;line-height:1.4}
.lp-example-card > a > div{padding:16px 18px 20px}

.lp-foot{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
  gap:16px;padding:22px 5vw 32px;
  border-top:1px solid var(--line);font-size:13px;color:var(--mute);
}
.lp-foot nav{display:flex;gap:22px}
.lp-foot a{padding:8px 0}

@keyframes lp-rise{
  from{transform:translateY(12px)}
  to{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .lp-atmosphere,.lp-brand,.lp-copy,.lp-demo,.lp-demo-still,.lp-examples{animation:none}
  .lp-example-card{transition:none}
}

@media (max-width:860px){
  .lp-hero{
    grid-template-columns:1fr;
    min-height:auto;
    padding:12px 6vw 36px;
    gap:28px;
  }
  .lp-brand{font-size:32px}
  .lp-hero h1{font-size:42px}
  .lp-cta{width:100%}
  .lp-demo{order:-1;width:100%;margin:0}
  .lp-demo-stage{aspect-ratio:16/11;min-height:180px}
  .lp-example-grid{grid-template-columns:1fr;gap:18px}
  .lp-examples{padding:4px 6vw 40px}
  .lp-foot{flex-direction:column;align-items:flex-start;padding:20px 6vw 28px}
}
