/* Kohre AI website styles.
   Most styling is inline in index.html, exactly as the design wrote it, so a
   future design version can be diffed against it line by line. This file holds
   the page-wide rules plus the hover/press/focus states the design declared on
   individual elements. Those states need !important because they have to beat
   the element's own inline style. */

/* ---- Page-wide (from the design) ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: #021A10; color: #ECFDF5; -webkit-font-smoothing: antialiased; }
a { color: #A5DBDC; }
a:hover { opacity: 0.85; }
::selection { background: rgba(165,219,220,0.25); }
@keyframes kUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.js [data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity 360ms cubic-bezier(0.16,1,0.3,1), transform 360ms cubic-bezier(0.16,1,0.3,1); }
.js [data-reveal].k-in { opacity: 1; transform: translateY(0); }
input::placeholder { color: #6B9E8A; }
select { -webkit-appearance: none; appearance: none; }
@media (min-width: 900px) { .k-navlink { display: inline-flex !important; } .k-menubtn { display: none !important; } }

/* The mobile menu is shown/hidden with the `hidden` attribute; its inline
   display:flex would otherwise override it. */
[hidden] { display: none !important; }

/* ---- Hover states ---- */
.hv-1:hover { opacity:1 !important; }
.hv-2:hover { transform:translateY(-1px) !important; opacity:1 !important; }
.hv-3:hover { transform:translateY(-1px) !important; box-shadow:0 6px 20px rgba(0,0,0,0.4) !important; opacity:1 !important; }
.hv-4:hover { border-color:rgba(165,219,220,0.5) !important; }
.hv-5:hover { box-shadow:0 12px 32px rgba(2,26,16,0.1) !important; }
.hv-6:hover { background:#065F46 !important; color:#ECFDF5 !important; opacity:1 !important; }
.hv-7:hover { box-shadow:0 24px 60px rgba(2,26,16,0.3) !important; }
.hv-8:hover { transform:translateY(-1px) !important; box-shadow:0 6px 18px rgba(0,0,0,0.35) !important; opacity:1 !important; }
.hv-9:hover { background:#065F46 !important; border-color:#065F46 !important; color:#ECFDF5 !important; }
.hv-10:hover { transform:translateY(-1px) !important; }

/* ---- Focus states ---- */
.fc-1:focus { border-color:#A5DBDC !important; }

/* ---- Press states ---- */
.ac-1:active { transform:translateY(1px) !important; box-shadow:none !important; }