/* ======================================================================
 Nishan landing page - visual-first styles.
 -
 Layout intent:
 - Hero: massive product mockup, headline + 3 stat chips, no prose
 - Every section is one big image + 1-2 lines of supporting text
 - Mobile-first; scales up to a 1200px container
 ====================================================================== */

:root {
 -bg: #ffffff;
 -bg-soft: #f4f7fb;
 -bg-soft-2: #eaf1f7;
 -ink: #0a1f3d;
 -ink-soft: #314c66;
 -ink-mute: #5a6f85;
 -line: #d8e2ec;
 -brand: #0a1f3d;
 -brand-2: #14315a;
 -brand-3: #2da9a9;
 -brand-4: #1f8a8a;
 -accent: #f4a623;
 -ok: #1f9d6a;
 -bad: #c64a4a;
 -shadow: 0 18px 50px -22px rgba(10, 31, 61, 0.28);
 -shadow-soft: 0 8px 24px -10px rgba(10, 31, 61, 0.16);
 -radius: 16px;
 -radius-sm: 10px;
 -max: 1200px;
 -font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
 'Noto Sans', 'Liberation Sans', sans-serif;
 -font-display: 'Plus Jakarta Sans', var(-font-sans);
}

* {
 box-sizing: border-box;
}

html {
 -webkit-text-size-adjust: 100%;
 scroll-behavior: smooth;
}

body {
 margin: 0;
 font-family: var(-font-sans);
 color: var(-ink);
 background: var(-bg);
 line-height: 1.6;
 font-size: 16px;
 -webkit-font-smoothing: antialiased;
}

a {
 color: var(-brand-2);
 text-decoration: none;
 transition: color 0.15s ease;
}
a:hover {
 color: var(-brand);
}

img,
svg {
 max-width: 100%;
 display: block;
}

.container {
 max-width: var(-max);
 margin: 0 auto;
 padding: 0 24px;
}

.visually-hidden {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}

/* - Typography (sparse - visuals do the work) - */

h1,
h2,
h3,
h4 {
 font-family: var(-font-display);
 color: var(-ink);
 margin: 0 0 0.4em;
 line-height: 1.16;
 letter-spacing: -0.012em;
}
h1 {
 font-size: clamp(2.2rem, 5vw, 3.6rem);
 font-weight: 800;
}
h2 {
 font-size: clamp(1.6rem, 3.2vw, 2.2rem);
 font-weight: 700;
}
h3 {
 font-size: 1.1rem;
 font-weight: 700;
}
h4 {
 font-size: 0.85rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 color: var(-ink-soft);
 margin-bottom: 12px;
}

p {
 margin: 0 0 1em;
 color: var(-ink-soft);
}
.lead {
 font-size: 1.1rem;
 color: var(-ink-soft);
}

.eyebrow {
 display: inline-block;
 font-size: 0.75rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.12em;
 color: var(-brand-2);
 background: var(-bg-soft-2);
 padding: 5px 12px;
 border-radius: 999px;
 margin-bottom: 14px;
}
.eyebrow-soft {
 background: var(-bg-soft);
}

.section-head {
 text-align: center;
 max-width: 760px;
 margin: 0 auto clamp(28px, 4vw, 48px);
}
.section-head-left {
 text-align: left;
 max-width: 720px;
 margin: 0 0 clamp(20px, 3vw, 32px);
}
.section-head .eyebrow {
 margin-bottom: 14px;
}

/* - Buttons - */

.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 border: 1px solid transparent;
 font-family: inherit;
 font-weight: 600;
 font-size: 0.95rem;
 padding: 12px 20px;
 border-radius: var(-radius-sm);
 cursor: pointer;
 text-decoration: none;
 transition: transform 0.08s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
 white-space: nowrap;
}
.btn:hover {
 transform: translateY(-1px);
}
.btn:active {
 transform: translateY(0);
}
.btn-primary {
 background: var(-brand);
 color: #fff;
 box-shadow: 0 8px 18px -10px rgba(10, 31, 61, 0.6);
}
.btn-primary:hover {
 background: var(-brand-2);
 color: #fff;
}
.btn-ghost {
 background: transparent;
 color: var(-brand);
 border-color: var(-line);
}
.btn-ghost:hover {
 background: var(-bg-soft);
 color: var(-brand);
}
.btn-sm {
 padding: 8px 14px;
 font-size: 0.9rem;
}
.btn-lg {
 padding: 14px 24px;
 font-size: 1rem;
}

/* - Header - */

.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(255, 255, 255, 0.92);
 backdrop-filter: saturate(160%) blur(8px);
 border-bottom: 1px solid var(-line);
}
.header-inner {
 display: flex;
 align-items: center;
 gap: 24px;
 min-height: 68px;
}
.brand {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 font-family: var(-font-display);
 font-weight: 800;
 font-size: 1.1rem;
 color: var(-brand);
}
.brand-mark {
 display: inline-block;
 width: 40px;
 height: 40px;
 object-fit: contain;
 flex-shrink: 0;
}
.brand:hover {
 color: var(-brand);
}
.brand-footer {
 padding: 0;
 background: transparent;
}
.brand-wordmark {
 display: block;
 height: auto;
 width: 180px;
 max-width: 100%;
}
.site-nav {
 display: flex;
 gap: 22px;
 margin-left: auto;
}
.site-nav a {
 color: var(-ink-soft);
 font-weight: 500;
 font-size: 0.95rem;
}
.site-nav a:hover {
 color: var(-brand);
}
.nav-toggle {
 display: none;
 background: transparent;
 border: 0;
 width: 40px;
 height: 40px;
 cursor: pointer;
 flex-direction: column;
 gap: 4px;
 align-items: center;
 justify-content: center;
}
.nav-toggle span {
 display: block;
 width: 22px;
 height: 2px;
 background: var(-ink);
 border-radius: 2px;
}

/* - Hero - */

.hero {
 position: relative;
 padding: clamp(36px, 6vw, 64px) 0 clamp(40px, 6vw, 80px);
 background:
 radial-gradient(900px 500px at 90% -10%, rgba(74, 155, 214, 0.18), transparent 60%),
 radial-gradient(700px 400px at -10% 40%, rgba(244, 166, 35, 0.07), transparent 60%),
 var(-bg);
 overflow: hidden;
}
.hero-inner {
 display: grid;
 grid-template-columns: 0.95fr 1.05fr;
 gap: clamp(24px, 4vw, 48px);
 align-items: center;
}
.hero-copy {
 max-width: 540px;
}
.hero-sub {
 font-size: 1.05rem;
 color: var(-ink-soft);
 margin: 8px 0 24px;
}
.hero-actions {
 display: flex;
 gap: 12px;
 flex-wrap: wrap;
 margin-bottom: 32px;
}
.hero-stats {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 12px;
 padding: 16px;
 background: var(-bg-soft);
 border-radius: var(-radius);
 border: 1px solid var(-line);
}
.stat {
 display: flex;
 flex-direction: column;
 gap: 2px;
}
.stat-num {
 font-family: var(-font-display);
 font-weight: 800;
 font-size: 1.15rem;
 color: var(-brand);
}
.stat-label {
 font-size: 0.78rem;
 color: var(-ink-mute);
 line-height: 1.3;
}

.hero-visual {
 position: relative;
}
.hero-visual img {
 width: 100%;
 height: auto;
 border-radius: 18px;
 box-shadow: var(-shadow);
 background: #fff;
}

.hero-float {
 position: absolute;
 background: #fff;
 border: 1px solid var(-line);
 border-radius: 14px;
 box-shadow: var(-shadow);
 padding: 12px 14px;
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: 0.85rem;
}
.hero-float strong {
 display: block;
 font-weight: 700;
 color: var(-ink);
}
.hero-float span {
 color: var(-ink-mute);
 font-size: 0.78rem;
}
.hero-float-1 {
 top: 12%;
 left: -28px;
 animation: floatY 4s ease-in-out infinite;
}
.hero-float-1 .hf-dot {
 width: 12px;
 height: 12px;
 border-radius: 50%;
 flex-shrink: 0;
}
.hero-float-1 .hf-dot-ok {
 background: var(-ok);
 box-shadow: 0 0 0 4px rgba(31, 157, 106, 0.18);
}
.hero-float-2 {
 bottom: 14%;
 right: -28px;
 flex-direction: column;
 align-items: flex-start;
 gap: 2px;
 animation: floatY 4.6s ease-in-out infinite reverse;
}
.hero-float-2 .hf-save {
 font-family: var(-font-display);
 font-weight: 800;
 color: var(-ok);
 font-size: 1.15rem;
}
@keyframes floatY {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-8px); }
}

/* - Trust strip - */

.trust {
 background: var(-bg-soft);
 padding: 20px 0;
 border-top: 1px solid var(-line);
 border-bottom: 1px solid var(-line);
}
.trust-inner {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
 gap: 18px 28px;
}
.trust-label {
 font-size: 0.85rem;
 color: var(-ink-mute);
 font-weight: 500;
}
.trust-items {
 display: flex;
 flex-wrap: wrap;
 gap: 14px 24px;
}
.trust-item {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: 0.95rem;
 font-weight: 600;
 color: var(-ink);
}
.trust-emoji {
 font-size: 1.1rem;
}

/* - Sections (sparse, image-led) - */

.section {
 padding: clamp(56px, 7vw, 96px) 0;
}
.section-problem {
 background: var(-bg);
}
.section-how {
 background: var(-bg-soft);
}
.section-features {
 background: var(-bg);
}
.section-why {
 background: var(-bg-soft);
}
.section-who {
 background: var(-bg);
}
.section-cta {
 background: linear-gradient(180deg, var(-bg) 0%, var(-bg-soft) 100%);
}

.big-figure {
 margin: 0 0 clamp(24px, 3vw, 40px);
 background: #fff;
 border: 1px solid var(-line);
 border-radius: 18px;
 padding: 14px;
 box-shadow: var(-shadow-soft);
 overflow: hidden;
}
.big-figure img {
 width: 100%;
 height: auto;
 border-radius: 10px;
}
.big-figure-wide {
 padding: 8px;
}
.big-figure-compare {
 max-width: 900px;
 margin-left: auto;
 margin-right: auto;
}
.big-figure-pano {
 padding: 8px;
}

/* quick stat strip under images */
.problem-quick,
.how-quick,
.why-points {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
 max-width: 980px;
 margin: 0 auto;
}
.pq-item,
.wp-item {
 display: flex;
 flex-direction: column;
 gap: 4px;
 padding: 18px 20px;
 background: #fff;
 border: 1px solid var(-line);
 border-radius: var(-radius);
 text-align: center;
}
.pq-num {
 font-family: var(-font-display);
 font-weight: 800;
 font-size: 1.6rem;
 color: var(-bad);
}
.pq-num-bad {
 color: var(-bad);
}
.pq-text {
 color: var(-ink-soft);
 font-size: 0.92rem;
 line-height: 1.4;
}

.hq-item {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 padding: 18px 20px;
 background: #fff;
 border: 1px solid var(-line);
 border-radius: var(-radius);
}
.hq-icon {
 flex-shrink: 0;
 width: 40px;
 height: 40px;
 border-radius: 10px;
 background: var(-bg-soft-2);
 color: var(-brand);
 display: inline-flex;
 align-items: center;
 justify-content: center;
}
.hq-icon svg {
 width: 22px;
 height: 22px;
}
.hq-item strong {
 display: block;
 margin-bottom: 2px;
 color: var(-ink);
}
.hq-item p {
 margin: 0;
 font-size: 0.92rem;
 line-height: 1.45;
}

.wp-item strong {
 display: block;
 color: var(-brand);
 font-weight: 700;
 margin-bottom: 4px;
}
.wp-item span {
 color: var(-ink-soft);
 font-size: 0.92rem;
 line-height: 1.4;
}

/* - Feature split (phone image + bullets) - */

.feature-split {
 display: grid;
 grid-template-columns: 1fr 0.7fr;
 gap: clamp(28px, 4vw, 56px);
 align-items: center;
 max-width: 1100px;
 margin: 0 auto;
}
.feature-points {
 list-style: none;
 padding: 0;
 margin: 16px 0 0;
 display: grid;
 gap: 12px;
}
.feature-points li {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 font-size: 0.98rem;
 color: var(-ink-soft);
 line-height: 1.5;
}
.fp-tick {
 flex-shrink: 0;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 22px;
 height: 22px;
 border-radius: 50%;
 background: rgba(31, 157, 106, 0.15);
 color: var(-ok);
 font-weight: 800;
 font-size: 0.8rem;
 margin-top: 1px;
}
.feature-split-visual img {
 width: 100%;
 height: auto;
 max-width: 360px;
 margin: 0 auto;
 border-radius: 18px;
 box-shadow: var(-shadow);
}

/* - Who grid (caption chips over the panorama) - */

.who-grid {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 14px;
 max-width: 980px;
 margin: 0 auto;
}
.who-card {
 background: #fff;
 border: 1px solid var(-line);
 border-radius: var(-radius);
 padding: 16px 18px;
 text-align: center;
 box-shadow: var(-shadow-soft);
}
.who-card strong {
 display: block;
 font-family: var(-font-display);
 font-weight: 700;
 color: var(-brand);
 margin-bottom: 2px;
}
.who-card span {
 color: var(-ink-mute);
 font-size: 0.85rem;
}

/* - Final CTA - */

.cta-inner {
 max-width: 520px;
 margin: 0 auto;
 text-align: center;
}
.cta-inner h2 {
 margin-bottom: 8px;
}
.cta-form {
 display: grid;
 gap: 10px;
 margin-top: 20px;
 text-align: left;
}
.cta-form input,
.cta-form textarea {
 width: 100%;
 font-family: inherit;
 font-size: 1rem;
 padding: 12px 14px;
 border: 1px solid var(-line);
 border-radius: var(-radius-sm);
 background: #fff;
 color: var(-ink);
 transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cta-form input:focus,
.cta-form textarea:focus {
 outline: none;
 border-color: var(-brand-3);
 box-shadow: 0 0 0 3px rgba(74, 155, 214, 0.18);
}
.cta-form textarea {
 resize: vertical;
 min-height: 60px;
}
.cta-form button {
 width: 100%;
}
.cta-disclaimer {
 font-size: 0.85rem;
 color: var(-ink-mute);
 text-align: center;
 margin: 4px 0 0;
}
.cta-success {
 font-size: 0.9rem;
 color: var(-ok);
 text-align: center;
 margin: 8px 0 0;
 padding: 10px;
 background: rgba(31, 157, 106, 0.08);
 border-radius: var(-radius-sm);
}

/* - Footer - */

.site-footer {
 background: var(-brand);
 color: #d6e3ee;
 padding: 48px 0 24px;
}
.site-footer p,
.site-footer a {
 color: #d6e3ee;
}
.footer-inner {
 display: grid;
 grid-template-columns: 1.2fr 2fr;
 gap: 32px;
 margin-bottom: 28px;
}
.footer-brand p {
 margin-top: 10px;
 color: #aac0d1;
 font-size: 0.92rem;
 max-width: 320px;
}
.footer-brand .brand {
 color: #fff;
}
.footer-brand .brand-mark {
 background: rgba(255, 255, 255, 0.12);
 color: #fff;
}
.footer-cols {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 32px;
}
.footer-cols > div {
 display: grid;
 gap: 6px;
 align-content: start;
}
.footer-cols a {
 font-size: 0.92rem;
 color: #d6e3ee;
}
.footer-cols a:hover {
 color: #fff;
}
.footer-bottom {
 border-top: 1px solid rgba(255, 255, 255, 0.1);
 padding-top: 18px;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 8px;
}
.footer-bottom p {
 margin: 0;
 font-size: 0.85rem;
 color: #aac0d1;
}
.footer-bottom .muted {
 color: #7e9ab0;
}

/* - Responsive - */

@media (max-width: 960px) {
 .hero-inner {
 grid-template-columns: 1fr;
 }
 .hero-visual {
 max-width: 640px;
 margin: 0 auto;
 }
 .hero-float-1 {
 left: 0;
 }
 .hero-float-2 {
 right: 0;
 }
 .feature-split {
 grid-template-columns: 1fr;
 }
 .feature-split-visual {
 order: -1;
 max-width: 320px;
 margin: 0 auto;
 }
 .who-grid {
 grid-template-columns: repeat(3, 1fr);
 }
 .problem-quick,
 .how-quick,
 .why-points {
 grid-template-columns: 1fr;
 }
}

@media (max-width: 720px) {
 .site-nav {
 display: none;
 }
 .site-header .btn {
 display: none;
 }
 .nav-toggle {
 display: flex;
 margin-left: auto;
 }
 .site-header.nav-open .site-nav {
 display: flex;
 position: absolute;
 top: 68px;
 left: 0;
 right: 0;
 background: #fff;
 flex-direction: column;
 padding: 16px 24px 20px;
 border-bottom: 1px solid var(-line);
 box-shadow: var(-shadow);
 margin: 0;
 }
 .site-header.nav-open .btn {
 display: inline-flex;
 width: 100%;
 justify-content: center;
 margin-top: 8px;
 }
 .hero-stats {
 grid-template-columns: 1fr 1fr 1fr;
 }
 .who-grid {
 grid-template-columns: repeat(2, 1fr);
 }
 .trust-inner {
 flex-direction: column;
 gap: 12px;
 }
 .footer-inner {
 grid-template-columns: 1fr;
 }
 .footer-cols {
 grid-template-columns: repeat(2, 1fr);
 }
}

@media (max-width: 480px) {
 .hero-stats {
 padding: 12px;
 }
 .stat-num {
 font-size: 1rem;
 }
 .stat-label {
 font-size: 0.7rem;
 }
 .who-grid {
 grid-template-columns: 1fr;
 }
 .footer-bottom {
 flex-direction: column;
 }
}

/* =============================================================
 LEGAL PAGES (privacy, terms, security, cookies)
 ============================================================= */
.legal-page {
 padding: 120px 0 80px;
 background: var(--bg, #f7f9fc);
 min-height: 100vh;
}
.legal-wrap {
 max-width: 760px;
 margin: 0 auto;
 background: #fff;
 border-radius: 16px;
 padding: 56px 64px;
 box-shadow: 0 8px 30px rgba(10, 31, 61, 0.06);
 border: 1px solid #e6ecf3;
}
.legal-wrap h1 {
 font-family: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
 font-size: 2.25rem;
 font-weight: 800;
 color: #0a1f3d;
 margin: 0 0 8px;
 letter-spacing: -0.02em;
}
.legal-wrap .legal-eyebrow {
 display: inline-block;
 font-size: 0.78rem;
 font-weight: 700;
 color: #2da9a9;
 text-transform: uppercase;
 letter-spacing: 0.12em;
 margin-bottom: 12px;
}
.legal-wrap .legal-updated {
 font-size: 0.92rem;
 color: #5a6b85;
 margin: 0 0 32px;
 padding-bottom: 24px;
 border-bottom: 1px solid #e6ecf3;
}
.legal-wrap h2 {
 font-family: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
 font-size: 1.3rem;
 font-weight: 700;
 color: #0a1f3d;
 margin: 36px 0 12px;
 letter-spacing: -0.01em;
}
.legal-wrap h3 {
 font-size: 1.05rem;
 font-weight: 700;
 color: #0a1f3d;
 margin: 24px 0 8px;
}
.legal-wrap p, .legal-wrap li {
 font-size: 1rem;
 line-height: 1.7;
 color: #2a3852;
 margin: 0 0 14px;
}
.legal-wrap ul, .legal-wrap ol {
 margin: 0 0 18px;
 padding-left: 22px;
}
.legal-wrap li {
 margin-bottom: 6px;
}
.legal-wrap a {
 color: #1f8a8a;
 text-decoration: underline;
 text-underline-offset: 2px;
}
.legal-wrap a:hover {
 color: #0a1f3d;
}
.legal-wrap .legal-callout {
 background: #f0f7f7;
 border-left: 3px solid #2da9a9;
 border-radius: 6px;
 padding: 16px 20px;
 margin: 20px 0 24px;
}
.legal-wrap .legal-callout p {
 margin: 0;
 font-size: 0.95rem;
}
.legal-wrap .legal-toc {
 background: #f7f9fc;
 border-radius: 10px;
 padding: 20px 24px;
 margin: 0 0 32px;
}
.legal-wrap .legal-toc h3 {
 margin: 0 0 12px;
 font-size: 0.9rem;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 color: #5a6b85;
}
.legal-wrap .legal-toc ul {
 list-style: none;
 padding: 0;
 margin: 0;
}
.legal-wrap .legal-toc li {
 margin: 0;
 font-size: 0.95rem;
}
.legal-wrap .legal-toc a {
 color: #0a1f3d;
 text-decoration: none;
}
.legal-wrap .legal-toc a:hover {
 color: #2da9a9;
 text-decoration: underline;
}
.legal-wrap .legal-back {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: 0.95rem;
 font-weight: 600;
 color: #1f8a8a;
 text-decoration: none;
 margin-bottom: 24px;
}
.legal-wrap .legal-back:hover {
 color: #0a1f3d;
}
.legal-wrap table {
 width: 100%;
 border-collapse: collapse;
 margin: 12px 0 20px;
 font-size: 0.95rem;
}
.legal-wrap th, .legal-wrap td {
 text-align: left;
 padding: 10px 12px;
 border-bottom: 1px solid #e6ecf3;
 vertical-align: top;
}
.legal-wrap th {
 background: #f7f9fc;
 color: #0a1f3d;
 font-weight: 700;
}
@media (max-width: 720px) {
 .legal-page {
 padding: 96px 12px 48px;
 }
 .legal-wrap {
 padding: 32px 24px;
 }
 .legal-wrap h1 {
 font-size: 1.75rem;
 }
 .legal-wrap h2 {
 font-size: 1.15rem;
 }
}