:root{
  --bg:#f8fafc;          /* ļoti gaišs fons */
  --card:#ffffff;        /* kāršu fons */
  --text:#0f172a;        /* tumšs teksts */
  --muted:#64748b;       /* sekundārais teksts */
  --stroke:#e2e8f0;      /* līnijas */
  --accent:#4f46e5;      /* akcents (violets) */
  --accent-weak:#eef2ff; /* accent tint */
  --success:#16a34a;
  --shadow:0 10px 30px rgba(15,23,42,.06);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;background:var(--bg); color:var(--text); line-height:1.6;}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
header{position:sticky; top:0; backdrop-filter:saturate(140%) blur(6px); background:rgba(248,250,252,.85); border-bottom:1px solid var(--stroke); z-index:50}
section{padding:50px 0;}
section.hero {padding-bottom:0;}
h1{font-size:48px; line-height:1.1; margin:14px 0;text-align:center;}
h2{font-size:32px; margin:0 0 12px}
p.lead{color:var(--muted); margin:0 0 18px}
label{display:block; font-weight:600; margin:12px 0 8px}
footer{padding:40px 0; border-top:1px solid var(--stroke); color:var(--muted)}
.container{max-width:1120px; margin:0 auto; padding:0 20px}
.nav{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.menu{display:flex; gap:22px}
.menu a{color:var(--muted); font-weight:500}
.cta{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:12px; background:var(--accent); color:#fff; font-weight:600; box-shadow:var(--shadow)}
.cta:hover{opacity:.95}
.mobile-toggle{display:none; background:#fff; border:1px solid var(--stroke); border-radius:12px; padding:10px}
.mobile-panel{display:none; border-top:1px solid var(--stroke); background:rgba(255,255,255,.9)}
.mobile-panel a {display:block; padding:14px 20px; border-bottom:1px solid var(--stroke); color:var(--muted);margin:0 -20px;}
.mobile-panel a:last-child {border-bottom: none;}
.hero-grid{display:grid; grid-template-columns:1.2fr 0.8fr; gap:40px; align-items:center}
.lead{color:var(--muted); font-size:18px;}
.hero-actions{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 18px; border-radius:14px; font-weight:600; border:1px solid var(--stroke); background:#fff}
.btn.primary{background:var(--accent); color:#fff; border-color:transparent;border:0;}
.hero-card{background:var(--card); border:1px solid var(--stroke); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px}
.stat{background:var(--card); border:1px solid var(--stroke); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; margin-bottom:16px; display:flex; align-items:center; gap:12px}
.stat:last-child{margin-bottom:0}
.stat h3{margin:0; font-size:28px; font-weight:600}
.stat p{margin:0; color:var(--muted); font-size:14px}
.stat .badge{width:40px; height:40px; border-radius:50%; background:var(--accent-weak); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0}
.section-lead{color:var(--muted); max-width:60ch}
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px}
.badge{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:var(--accent-weak)}
.screens{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:28px}
.mock{background:linear-gradient(180deg,#fff, #f3f6fb); border:1px solid var(--stroke); border-radius:14px; box-shadow:var(--shadow); padding:14px}
.mock .top{display:flex; gap:6px; margin-bottom:10px}
.dot{width:8px; height:8px; border-radius:50%; background:#cbd5e1}
.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px}
.price-card{background:var(--card); border:1px solid var(--stroke); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); display:flex; flex-direction:column}
.price{font-size:34px; font-weight:700}
.price small{color:var(--muted); font-weight:600}
.check{color:var(--success); font-weight:600}
.muted{color:var(--muted)}
.price-card .btn{margin-top:auto}
.faq-grid{display:grid; grid-template-columns:1fr; gap:18px; margin-top:18px}
.faq-item{background:var(--card); border:1px solid var(--stroke); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.faq-q{width:100%; text-align:left; background:#fff; border:0; padding:16px 18px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:space-between}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease; padding:0 18px; color:var(--muted)}
.faq-a.open{padding:0 18px 16px 18px}
.cookie-popup {position: fixed;top: 20px;left: 20px;right: 20px;background: var(--card);border: 1px solid var(--stroke);border-radius: var(--radius);box-shadow: var(--shadow);padding: 20px;z-index: 1000;display: none;opacity: 0;transform: translateY(-20px);transition: all 0.3s ease;max-width: 500px;margin: 0 auto;}
.cookie-popup.show {opacity: 1;transform: translateY(0);}
.cookie-popup-content {display: flex;flex-direction: column;gap: 16px;}
.cookie-popup-header {display: flex;align-items: center;gap: 12px;margin-bottom: 8px;}
.cookie-popup-icon {width: 24px;height: 24px;background: var(--accent);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: white;font-size: 14px;font-weight: bold;}
.cookie-popup-title {font-size: 18px;font-weight: 600;margin: 0;color: var(--text);}
.cookie-popup-text {color: var(--muted);font-size: 14px;line-height: 1.5;margin: 0;}
.cookie-popup-actions {display: flex;gap: 12px;flex-wrap: wrap;}
.cookie-popup-btn {padding: 10px 16px;border-radius: 8px;font-weight: 600;font-size: 14px;cursor: pointer;border: 1px solid var(--stroke);background: #fff;color: var(--text);transition: all 0.2s ease;}
.cookie-popup-btn:hover {background: var(--accent-weak);}
.cookie-popup-btn.accept {background: var(--accent);color: white;border-color: var(--accent);}
.cookie-popup-btn.accept:hover {background: #4338ca;}
.cookie-popup-btn.reject {background: #fff;color: var(--muted);border-color: var(--stroke);}
.cookie-popup-btn.reject:hover {background: #f8fafc;color: var(--text);}
.chev{transition:transform .25s ease}
.open + .chev{transform:rotate(180deg)}
.privacy-modal {display: none;position: fixed;z-index: 1000;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);backdrop-filter: blur(4px);}
.privacy-modal.show {display: flex;align-items: center;justify-content: center;}
.privacy-modal-content {background: white;border-radius: 12px;box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);max-width: 600px;width: 90%;max-height: 80vh;overflow: hidden;animation: modalSlideIn 0.3s ease-out;}
.privacy-modal-header {display: flex;justify-content: space-between;align-items: center;padding: 20px 24px;border-bottom: 1px solid #e5e7eb;background: #f9fafb;}
.privacy-modal-header h2 {margin: 0;font-size: 20px;font-weight: 600;color: #111827;}
.privacy-modal-close {background: none;border: none;font-size: 24px;cursor: pointer;color: #6b7280;padding: 4px;border-radius: 4px;transition: all 0.2s ease;}
.privacy-modal-close:hover {color: #374151;background: #f3f4f6;}
.privacy-modal-body {padding: 20px;max-height: calc(80vh - 80px);overflow-y: auto;}
.privacy-list {list-style: none;padding: 0;margin: 0;}
.privacy-list-item {display: flex;align-items: flex-start;margin-bottom: -5px;padding: 8px 0;}
.privacy-bullet {width: 6px;height: 6px;background-color: #3b82f6;border-radius: 50%;margin-right: 10px;margin-top: 8px;flex-shrink: 0;}
.privacy-text {color: #374151;margin: 0;flex: 1;}
.privacy-title {font-weight: 600;font-size: 18px;color: #1e40af;margin-top: 16px;padding-bottom: 8px;border-bottom: 2px solid #3b82f6;}
.privacy-loading {text-align: center;padding: 40px;color: #6b7280;font-style: italic;}
.privacy-error {text-align: center;padding: 40px;color: #dc2626;background: #fef2f2;border-radius: 8px;border: 1px solid #fecaca;}
.rules-modal {display: none;position: fixed;z-index: 1000;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);backdrop-filter: blur(4px);}
.rules-modal.show {display: flex;align-items: center;justify-content: center;}
.rules-modal-content {background: white;border-radius: 12px;box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);max-width: 600px;width: 90%;max-height: 80vh;overflow: hidden;animation: modalSlideIn 0.3s ease-out;}
.rules-modal-header {display: flex;justify-content: space-between;align-items: center;padding: 20px 24px;border-bottom: 1px solid #e5e7eb;background: #f9fafb;}
.rules-modal-header h2 {margin: 0;font-size: 20px;font-weight: 600;color: #111827;}
.rules-modal-close {background: none;border: none;font-size: 24px;cursor: pointer;color: #6b7280;padding: 4px;border-radius: 4px;transition: all 0.2s ease;}
.rules-modal-close:hover {color: #374151;background: #f3f4f6;}
.rules-modal-body {padding: 20px;max-height: calc(80vh - 80px);overflow-y: auto;}
.rules-list {list-style: none;padding: 0;margin: 0;}
.rules-list-item {display: flex;align-items: flex-start;margin-bottom: -5px;padding: 8px 0;}
.rules-bullet {width: 6px;height: 6px;background-color: #10b981;border-radius: 50%;margin-right: 10px;margin-top: 8px;flex-shrink: 0;}
.rules-text {color: #374151;margin: 0;flex: 1;}
.rules-title {font-weight: 600;font-size: 18px;color: #047857;margin-top: 16px;padding-bottom: 8px;border-bottom: 2px solid #10b981;}
.rules-loading {text-align: center;padding: 40px;color: #6b7280;font-style: italic;}
.rules-error {text-align: center;padding: 40px;color: #dc2626;background: #fef2f2;border-radius: 8px;border: 1px solid #fecaca;}
.wrap{display:grid; min-height:calc(100vh - 64px); grid-template-columns:var(--grid-columns, 1fr)}
.left{display:flex; align-items:center; justify-content:center; padding:20px;}
.right{display:none; background:linear-gradient(180deg,#fff,#f3f6fb); border-left:1px solid var(--stroke)}
.right .mock{height:100%; display:flex; align-items:center; justify-content:center; padding:40px}
.card{width:100%; background:var(--card); border:1px solid var(--stroke); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px}
.card.login-page {max-width:420px;}
.card.signup-page, .card.forgot-password-page {max-width:620px;}
.card h3{margin:6px 0 10px}
.input{width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--stroke); background:#fff}
.row{display:grid; grid-template-columns:1fr; gap:12px}
.row.signup-page{grid-template-columns:1fr 1fr;}
.row.full{grid-template-columns:1fr}
.input-wrap{position:relative}
.toggle{position:absolute; right:10px; top:50%; transform:translateY(-50%); background:transparent; border:0; cursor:pointer; color:var(--muted)}
.muted{color:var(--muted)}
.actions{display:flex; align-items:center; justify-content:space-between; margin:10px 0 0}
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:14px; font-weight:600; border:1px solid var(--stroke); background:#fff}
.btn.primary{background:var(--accent); color:#fff; border-color:transparent}
.notice{display:none; margin-top:10px; padding:10px 12px; border-radius:12px}
.notice.error{border:1px solid #fecaca; background:#fee2e2; color:#991b1b}
.notice.success{border:1px solid #bbf7d0; background:#dcfce7; color:#166534}
.divider{display:flex; align-items:center; gap:10px; margin:18px 0}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--stroke)}
.login-loading {text-align: center;padding: 40px;color: var(--muted);font-style: italic;}
.mock {position: relative;}
.login-screenshot {width: 100%;height: auto;border-radius: 8px;display: none;}
.login-screenshot.active {display: block;}
.screenshots-dots {position: absolute;bottom: 16px;left: 50%;transform: translateX(-50%);display: flex;justify-content: center;gap: 8px;z-index: 10;}
.screenshot-dot {width: 8px;height: 8px;border-radius: 50%;background-color: var(--stroke);cursor: pointer;transition: background-color 0.3s ease;}
.screenshot-dot.active {background-color: var(--accent);}
.screenshot-dot:hover {background-color: var(--accent);opacity: 0.7;}
.signup-loading {text-align: center;padding: 40px;color: var(--muted);font-style: italic;}
.signup-screenshot {width: 100%;height: auto;border-radius: 8px;display: none;}
.signup-screenshot.active {display: block;}
.forgot-password-loading {text-align: center;padding: 40px;color: var(--muted);font-style: italic;}
.forgot-password-screenshot {width: 100%;height: auto;border-radius: 8px;display: none;}
.forgot-password-screenshot.active {display: block;}
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr; text-align:left}
  h1{font-size:40px}
  .features{grid-template-columns:1fr 1fr}
  .screens{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr 1fr}
  .cta-block{flex-direction:column; align-items:flex-start}
}
@media (max-width: 680px) {
  .cookie-popup {left: 16px;right: 16px;top: 16px;padding: 16px;}
  .cookie-popup-actions {flex-direction: column;}
  .cookie-popup-btn {width: 100%;justify-content: center;}
  h1{font-size:34px}
  .features, .pricing{grid-template-columns:1fr}
  .privacy-modal-content {width: 95%;margin: 20px;}
  .privacy-modal-header {padding: 16px 20px;}
  .privacy-modal-body {padding: 20px;}
  .privacy-modal-header h2 {font-size: 18px;}
  .rules-modal-content {width: 95%;margin: 20px;}
  .rules-modal-header {padding: 16px 20px;}
  .rules-modal-body {padding: 20px;}
  .rules-modal-header h2 {font-size: 18px;}
}
@media (max-width:880px){
  .menu{display:none}
  .mobile-toggle{display:inline-block}
}
@media (max-width:900px){
  .faq-grid{grid-template-columns:1fr}
}
@media (max-width:980px){ 
  .wrap{grid-template-columns: 1fr;}
}
@media (min-width:980px){ 
  .right{display:block}
}