/* JENCSoft Light Edition V4 — friendly, bright, airy, performant.
   App product mock-ups are retained, with pastel showcases rather than dark panels.
   This file must load after style.css, experience.css and logo-theme.css. */
:root {
  color-scheme: light;
  --navy: #102b52;
  --navy2: #193f69;
  --ink: #1b3050;
  --muted: #64748b;
  --line: #e0eaf4;
  --off: #f5f9fe;
  --blue: #177de2;
  --cyan: #04aacf;
  --orange: #ffad2e;
  --coral: #f45b3a;
  --shadow: 0 19px 60px rgba(26,72,121,.095);
  --sunset: linear-gradient(115deg,#ffbf46,#ff9134 45%,#f45a40 100%);
}
html { scroll-padding-top: 86px }
body { color:var(--ink); background:#fff }
::selection { background:#fff0d4; color:#173459 }
a:focus-visible,button:focus-visible { outline-color:#0c89c8 }

/* White navigation has strong contrast and displays the approved logo directly. */
.site-header,
.site-header.is-scrolled {
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #e9eef6;
  box-shadow:0 5px 22px rgba(26,68,115,.035);
  backdrop-filter:blur(20px);
}
.site-header.is-scrolled { box-shadow:0 9px 32px rgba(26,68,115,.075) }
.nav-links>a { color:#465a76 }
.nav-links>a:hover,.nav-links>a[aria-current="page"] { color:#0a80bc }
.nav-links>a:not(.nav-cta)::after { background:linear-gradient(90deg,#16b0e4,#ff9c49) }
.nav-links .nav-cta {
  color:#123457;
  border:1px solid #d8e8f5;
  background:linear-gradient(120deg,#edf8ff,#fff8ec);
  box-shadow:0 4px 13px rgba(29,98,156,.04);
}
.nav-links .nav-cta span { color:#ef7932 }
.nav-links .nav-cta:hover { background:#fff1db; color:#123457; border-color:#ffce9b }
.nav-links .nav-cta:hover span { color:#ee7c30 }
.brand-art img.brand-symbol { filter:none }
.brand-art .brand-wordmark-panel,
.footer .brand-wordmark-panel {
  background:transparent; border:0; padding:0; box-shadow:none;
}
.nav-toggle { border:1px solid #dde8f3; background:#f7fbff }
.nav-toggle span { background:#173e68 }

/* Airy hero: dark ink text over a white / pale blue gradient. */
.hero {
  color:#122e52;
  background:
    radial-gradient(ellipse 34% 48% at 94% 31%,rgba(23,175,220,.12),transparent 81%),
    radial-gradient(ellipse 42% 65% at 4% 87%,rgba(255,159,89,.075),transparent 80%),
    linear-gradient(128deg,#fff 0%,#f8fcff 44%,#f0f9ff 100%);
  border-bottom:1px solid #e7f1fa;
}
.hero-grid { opacity:.42; background-image:linear-gradient(rgba(36,128,185,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(36,128,185,.09) 1px,transparent 1px); mask-image:linear-gradient(90deg,transparent 21%,#000 100%) }
.hero-noise { opacity:.2; background-image:radial-gradient(circle at 23% 26%,#2ca0df 0 1px,transparent 2px),radial-gradient(circle at 65% 14%,#efb476 0 1px,transparent 2px) }
.hero-glow-left { background:#ffc498; opacity:.19 }
.hero-glow-right { background:#9bdffb; opacity:.25 }
.hero-mouse-light { opacity:.28; background:radial-gradient(circle 440px at var(--hero-x,75%) var(--hero-y,50%),rgba(68,173,236,.16),transparent 73%) }
.eyebrow { color:#207eaa; font-weight:850 }
.eyebrow-dot,.live-dot { background:#f7a144; box-shadow:0 0 0 4px #fff2e0,0 0 14px rgba(251,150,49,.32) }
.eyebrow-line { background:linear-gradient(90deg,#e79757,transparent) }
.hero h1 { color:#133454; letter-spacing:-.065em }
.hero-line { color:#244466 }
.hero-gradient-word { background:linear-gradient(110deg,#067ebc 0%,#0dbac4 33%,#e39427 73%,#ef613d 100%); background-clip:text;-webkit-background-clip:text;filter:none }
.hero-gradient-word .accent-stop { color:#ef6841;-webkit-text-fill-color:#ef6841 }
.hero-copy>p { color:#5f7187 }
.hero-copy>p strong { color:#193e66 }
.btn { transition:transform .22s,box-shadow .22s,background .22s }
.btn-primary {
  background:linear-gradient(115deg,#ffbf46,#ffa138 45%,#ff7546 100%);
  color:#16304b;
  box-shadow:0 12px 25px rgba(255,155,64,.21);
}
.btn-primary:hover { box-shadow:0 16px 29px rgba(255,147,48,.29) }
.btn-ghost { color:#1d567f; background:#fff; border:1px solid #d8e6f2; box-shadow:0 5px 16px rgba(15,66,118,.045) }
.btn-ghost:hover { background:#f4fbff; border-color:#acd9ee }
.hero-metrics { border-top:1px solid #ddeaf5 }
.hero-metrics strong { color:#153858 }
.hero-metrics small,.hero-metric-tag { color:#75879c }
.metric-plus { color:#f2943a }
.hero-bottom { border-top:1px solid #e0ecf5; color:#7489a0 }
.hero-bottom a { color:#278cb6 }
.hero-bottom a:hover { color:#f1763e }
.footer-signal { background:#ffae46; box-shadow:0 0 0 3px #fff0d6 }

/* Retain the animated JS emblem in a bright floating studio card. */
.hero-aura { background:radial-gradient(circle,#92dcef 0%,rgba(168,220,248,.17) 41%,transparent 76%);opacity:.48 }
.halo-one { border-color:rgba(35,148,195,.22) }
.halo-two { border-color:rgba(245,155,72,.19) }
.orbit-spark { color:#0e8dc7 }
.orbit-spark.spark-b { color:#eda03c }
.orbit-spark.spark-c { color:#08a5bb }
.hero-center {
  background:linear-gradient(150deg,rgba(255,255,255,.99) 2%,rgba(237,249,255,.96) 58%,rgba(255,246,233,.91) 100%);
  border:1px solid #d6e8f6;
  box-shadow:0 32px 80px rgba(49,101,153,.15),inset 0 0 30px rgba(255,255,255,.66);
}
.hero-center::before { background:linear-gradient(130deg,rgba(255,255,255,.78),transparent 48%) }
.hero-center::after { background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent) }
.hero-center-top { color:#7996ad; border-bottom:1px solid #e5eff7 }
.hero-center-top i { background:#c0d8e7 }
.hero-center-top i:first-child { background:#ffa84a }
.hero-center-light { background:#89d0ed;opacity:.2 }
.hero-logo-glass { background:radial-gradient(circle,rgba(146,211,238,.25),transparent 75%) }
.hero-logo-glass::before { border-color:#e3edf6 }
.hero-center-caption { color:#547993 }
.hero-center-caption span { color:#ed9343 }
.hero-wave { opacity:.56 }
.hero-wave span { background:#31aacd }
.hero-wave span:nth-child(3n){background:#ffae45}
.hero-card {
  background:#fff; border:1px solid #edf1f6;
  box-shadow:0 17px 45px rgba(39,86,127,.13);
}
.hero-card:hover { box-shadow:0 21px 51px rgba(39,86,127,.19) }
.hero-card-left{border-bottom:3px solid #ffb35c}
.hero-card-right{border-bottom:3px solid #2fbad8}
.hero-mini-tile {
  background:rgba(255,255,255,.94); border:1px solid #dfeef6;
  color:#1b5273; box-shadow:0 10px 28px rgba(26,85,137,.11);
}
.hero-mini-tile:hover {border-color:#9bd4ed}
.hero-mini-menu svg {color:#20aa90}
.hero-mini-hms svg {color:#0a9bbd}

.ticker-strip { color:#39708e; background:#f0faff; border-color:#e0f0f8 }
.ticker-track b { color:#f09b3d }

/* Open white space and calm pastel project areas. */
.section-title { color:#1d3856 }
.section-title em { background:linear-gradient(100deg,#0d91c1,#09b2c3 48%,#f49a49);color:transparent;background-clip:text;-webkit-background-clip:text }
.section-kicker { color:#b66a31 }
.section-kicker::before { background:linear-gradient(90deg,#feb85a,#ff8659) }
.about-section { background:#fff }
.about-section::before { border-color:#e6f4fb }
.about-text>p,.section-head>p { color:#65768b }
.about-values span { background:#f1faff; border-color:#d9eff9; color:#247d9f }
.brand-signature { background:linear-gradient(115deg,#fff,#f8fcff); border-color:#e4eef7; box-shadow:0 10px 26px rgba(31,75,116,.05) }
.brand-signature-label { color:#7b93a8 }
.work-section { background:linear-gradient(180deg,#f3f9ff 0%,#f9fcff 100%) }
.portfolio-note { color:#8190a5 }
.filter-btn { border-color:#d9e7f3; color:#536d83; box-shadow:none }
.filter-btn:hover:not(.is-active) { background:#fff8ed; border-color:#ffd09d;color:#9a562a }
.filter-btn.is-active { background:#153e66;border-color:#153e66;color:#fff;box-shadow:0 6px 16px rgba(16,63,101,.12) }
.app-card { border:1px solid #e0eaf4; border-radius:26px; box-shadow:0 14px 44px rgba(23,75,122,.055) }
.app-card:hover { border-color:#bdddeb; box-shadow:0 24px 59px rgba(19,70,119,.12) }
.card-category { color:#147ead }
.card-arrow,.card-learn { color:#ed8a42 }
.app-card-body { background:#fff }
.service-section { background:#fff }
.service-card { background:#fff; border-color:#e5edf4; box-shadow:0 12px 38px rgba(33,79,120,.045) }
.service-card:hover { border-color:#cbdfea;box-shadow:0 21px 51px rgba(35,89,137,.1) }
.service-card::before { background:linear-gradient(90deg,#39c7de,#ffb55a,#fb805c) }
.service-icon { color:#178ac2 }

/* Soft-color preview frames rather than large dark rectangles. */
.visual-violet { --visual-bg-a:#ede8ff;--visual-bg-b:#dbe7ff;--visual-accent:#765adb }
.visual-amber { --visual-bg-a:#fff2e4;--visual-bg-b:#ffe2e0;--visual-accent:#e5a04b }
.visual-green { --visual-bg-a:#e4f9f1;--visual-bg-b:#dbf8ed;--visual-accent:#1da382 }
.visual-teal { --visual-bg-a:#e6f4ff;--visual-bg-b:#d7f7f7;--visual-accent:#1489ba }
.visual-glow { opacity:.1 }
.visual-orbit { border-color:rgba(37,108,163,.11) }
.visual-top-label { color:#52758d }
.visual-label { color:#234c70;opacity:.75 }
.preview-status-dot { background:#25c2a2;box-shadow:0 0 0 3px rgba(25,167,160,.1) }
.visual-square { color:#1c7098;background:rgba(255,255,255,.64);border-color:rgba(32,140,182,.17) }
.app-visual:hover .visual-square { background:#fff2db }
.demo-window { box-shadow:0 17px 45px rgba(46,75,128,.15) }
.app-card:hover .demo-window {box-shadow:0 23px 50px rgba(46,75,128,.2)}

/* Contact and footer are deliberately light for an inviting last impression. */
.contact-section { background:#fff }
.contact-panel {
  color:#163658;
  background:
    radial-gradient(circle at 89% 32%,rgba(85,205,237,.22),transparent 35%),
    radial-gradient(circle at 16% 91%,rgba(255,180,116,.13),transparent 37%),
    linear-gradient(120deg,#f1f9ff 0%,#fffaf3 100%);
  border:1px solid #e1ecf4;
  box-shadow:0 20px 60px rgba(44,89,132,.085);
}
.contact-panel::after { background-image:linear-gradient(rgba(47,146,190,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(47,146,190,.04) 1px,transparent 1px) }
.contact-panel .section-kicker { color:#bf6d34 }
.contact-panel h2,.contact-panel h2 em { color:#173b61 }
.contact-panel h2 em {color:#0d9fc0}
.contact-panel p {color:#647990}
.contact-placeholder { color:#426987; background:#fff; border:1px solid #dcecf6 }
.contact-dot {background:#f7a44c}
.contact-graphic-ring { border-color:rgba(24,155,187,.2) }
.contact-halo {background:#b9e9f8;opacity:.13}
.footer {
  background:#f6faff;
  color:#5b7188;
  border-top:1px solid #e8f0f7;
}
.footer-heading { color:#213f60 }
.footer-links a:hover {color:#ec843b}
.footer-bottom {border-top:1px solid #e1ebf4;color:#8697a9}

/* Project detail pages also follow the bright visual system. */
.detail-hero {
  color:#173759;
  background:linear-gradient(132deg,#fff 0%,#f1f9ff 70%,#fff9f1 100%);
  border-bottom:1px solid #e3edf5;
}
.detail-hero-glow {background:#9ad9ec;opacity:.18}
.breadcrumb {color:#4888a6}
.breadcrumb:hover {color:#f18144}
.detail-copy h1 {color:#153659;background:none;-webkit-text-fill-color:#153659}
.detail-copy h1 .accent-stop {color:#ed8841;-webkit-text-fill-color:#ed8841}
.detail-headline { color:#2b5975 }
.detail-desc { color:#647990 }
.detail-tags span {color:#3e708e;background:#fff;border-color:#d9eaf5}
.app-visual-large {border:1px solid rgba(26,124,165,.14);box-shadow:0 21px 51px rgba(30,86,129,.12)}
.detail-overview>div>p,.process-grid>div>p { color:#607589 }
.features-section {background:#f5faff}
.feature-item {border-color:#e1eaf3}
.feature-item:hover {border-color:#c9e7f4}
.feature-index {color:#168ac0}
.process-list span {color:#168ac0}
.tech-section {background:#f5faff}
.text-link {color:#0b8db8}

@media(max-width:650px) {
  .nav-links {background:rgba(255,255,255,.99); border-bottom:1px solid #e7eef5;box-shadow:0 17px 28px rgba(30,83,126,.13)}
  .nav-links>a {border-bottom:1px solid #edf2f7;color:#254564}
  .nav-links .nav-cta {color:#1d4a6e;border-color:#d4e6f3;background:#f3f9ff}
  .hero-inner {padding-top:58px}
  .hero h1 {font-size:clamp(38px,10.5vw,56px)}
  .hero-art {margin-top:12px}
  .ticker-strip {padding:13px 0}
  .contact-panel {border-radius:24px}
}
@media(prefers-reduced-motion:reduce) {
  .hero-art,.hero-copy {animation:none;opacity:1}
}