﻿/*
  Cuter & Nomura ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â Landing styles
  Uses Spectre.css as base and adds light custom theming.
*/

:root {
  --cn-bg: #0b1f36;
  --cn-bg-2: #f6f8fb;
  --cn-primary: #243b53;
  --cn-primary-600: #1f5cd4;
  --cn-accent: #00b3a4;
  --cn-text: #243b53;
  --cn-text-muted: #6b7c93;
  --cn-white: #ffffff;
  --cn-shadow: 0 6px 24px rgba(18, 38, 63, 0.12);
}

html, body {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  color: var(--cn-text);
  line-height: 1.6;
  background: #fff;
}

/* Navbar */
.cn-navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--cn-white);
  border-bottom: 1px solid rgba(36,59,83,0.06);
  min-width: 240px;
}
.cn-navbar.scrolled { box-shadow: var(--cn-shadow);}
.cn-navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.cn-navbar .navbar {
  flex: 1;
}
.cn-navbar .cn-nav-toggle {
  margin-left: auto;
}
.cn-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--cn-bg);
  color: var(--cn-white) !important;
  font-weight: 700;
  letter-spacing: .5px;
}
.cn-brand-name { font-weight: 600; color: var(--cn-text); min-width: 125px;}
.cn-brand-link { text-decoration: none; }
.cn-brand-link:hover, .cn-brand-link:focus { text-decoration: none; }
.cn-divider { display:inline-block; width:1px; height:24px; background: rgba(36,59,83,0.2); margin:0 .75rem 0 .75rem; }
.cn-nav-toggle { display:none; }
@media (max-width: 600px) {
  .cn-nav-links { display: none; }
  .cn-nav-toggle { display: inline-flex; }
  .cn-navbar.open .cn-nav-links { display: inline-flex; flex-direction: column; gap: .25rem; position:absolute; right: .75rem; top: 56px; background:#fff; padding:.5rem; border:1px solid rgba(0,0,0,.05); box-shadow: var(--cn-shadow); }
}

/* Hero */
.cn-hero {
  background: radial-gradient(1200px 500px at 10% 10%, rgba(39,110,241,.06), transparent 60%),
              radial-gradient(1000px 600px at 90% 10%, rgba(0,179,164,.08), transparent 60%),
              linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  padding: 5rem 0 3rem;
}
.cn-hero-title { font-size: 2.25rem; line-height: 1.2; font-weight: 700; margin-bottom: .75rem; }
.cn-hero-subtitle { color: var(--cn-text-muted); font-size: 1.1rem; margin-bottom: 1.5rem; }
.cn-cta-group .btn { margin-right: .5rem; margin-bottom: .5rem; }
.cn-hero-badges { list-style: none; padding:0; margin:1rem 0 0; display:flex; flex-wrap:wrap; gap: .75rem 1rem; color: var(--cn-text-muted); }
.cn-hero-badges i { margin-right:.35rem; color: var(--cn-primary); }
.cn-hero-card { box-shadow: var(--cn-shadow); border:none; }

/* Sections */
.cn-section { padding: 3.5rem 0; }
.cn-section-alt { background: var(--cn-bg-2); }
.cn-section-title { margin: 0 0 .25rem; font-weight: 700; }
.cn-section-subtitle { color: var(--cn-text-muted); margin-bottom: 2rem; }

/* Cards & lists */
.cn-card { height: 100%; border:1px solid rgba(36,59,83,0.08); }
.cn-card .card-body { padding: 1rem 1.1rem; }
.cn-icon { color: var(--cn-primary); font-size: 22px; }
.cn-list-check { list-style: none; padding-left: 0; }
.cn-list-check li { position: relative; padding-left: 1.5rem; margin: .5rem 0; }
.cn-list-check li::before { content: '\2713'; position:absolute; left:0; top:0; color: var(--cn-accent); font-weight: 700; }
.cn-list-plain { list-style: none; padding-left: 0; margin: 0; }
.cn-list-plain li { margin: .4rem 0; }

/* FAQ */
.cn-faq { border:1px solid rgba(36,59,83,0.1); border-radius: .25rem; padding: .75rem 1rem; margin-bottom: .75rem; background: #fff; }
.cn-faq summary { cursor: pointer; font-weight: 600; }
.cn-faq[open] { box-shadow: var(--cn-shadow); }
.cn-faq p { margin: .5rem 0 0; color: var(--cn-text); }

/* Contact */
.cn-contact { box-shadow: var(--cn-shadow); border:none; }
.cn-cta { border:1px solid rgba(36,59,83,0.08); }

/* Footer */
.cn-footer { background: #0f1e33; color: #c8d1dc; padding: 2.5rem 0 1.5rem; margin-top: 2rem; }
.cn-footer a { color: #c8d1dc; }
.cn-footer .btn.btn-link { color: #c8d1dc; opacity: .9; }
.cn-footer .btn.btn-link:hover { opacity: 1; }
.cn-footer-brand { color: #eef3f8; font-weight: 600; margin-bottom: .25rem; }
.cn-copy { margin-top: 1rem; font-size: .65rem; }

/* Top link */
.cn-top { position: relative; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.reveal-visible { opacity: 1; transform: translateY(0); }

/* Buttons */
.btn-primary { background: var(--cn-primary); border-color: var(--cn-primary); }
.btn-primary:hover { background: var(--cn-primary-600); border-color: var(--cn-primary-600); }

/* Utilities */
.text-center-sm { }
@media (max-width: 600px) {
  .text-center-sm { text-align: center !important; }
}

/* Accessibility focus */
a:focus, button:focus, [tabindex]:focus { outline: 2px solid var(--cn-accent); outline-offset: 2px; }


