/* ── Nourictro Design System ── */
:root{--navy:#0B1F3B;--accent:#F2B705;--bg:#F5F7FA;--text:#1A1A1A;--muted:#6B7280;--border:#D1D5DB;--white:#fff;--font:'IBM Plex Sans',sans-serif;--mono:'IBM Plex Mono',monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);font-family:var(--font);color:var(--text);-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:var(--navy)}
a{text-decoration:none;color:inherit}
input,textarea,select,button{font-family:var(--font)}
img{max-width:100%;display:block}

/* ── Utilities ── */
.w{max-width:1200px;margin:0 auto;padding:0 40px}
.sec{padding:112px 0}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:16px}
.bar{display:block;width:36px;height:3px;background:var(--accent);margin-bottom:18px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.flex-c{display:flex;align-items:center}
.flex-col{display:flex;flex-direction:column}

/* ── Typography ── */
.h1{font-size:clamp(40px,6vw,78px);font-weight:700;line-height:1.02;letter-spacing:-.035em}
.h2{font-size:42px;font-weight:700;letter-spacing:-.025em;line-height:1.08}
.h3{font-size:22px;font-weight:700;letter-spacing:-.015em;line-height:1.2}
.sub{font-size:18px;color:rgba(245,247,250,.65);line-height:1.7;font-weight:300}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;letter-spacing:.04em;padding:17px 40px;border:none;cursor:pointer;transition:all .25s ease;line-height:1;gap:8px}
.btn-primary{background:var(--accent);color:var(--navy)}
.btn-primary:hover{background:#e0a904;transform:translateY(-2px);box-shadow:0 8px 24px rgba(242,183,5,.25)}
.btn-ghost{background:transparent;color:rgba(245,247,250,.75);border:1px solid rgba(245,247,250,.22);font-weight:400;font-size:14px;padding:17px 26px}
.btn-ghost:hover{border-color:rgba(245,247,250,.55);color:#F5F7FA}
.btn-outline{background:transparent;color:var(--navy);border:1.5px solid var(--navy);font-weight:500;font-size:14px;padding:14px 28px}
.btn-outline:hover{background:var(--navy);color:var(--bg)}

/* ── Nav ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.07);transition:all .3s ease}
.nav-link{font-size:13px;font-weight:500;letter-spacing:.04em;color:#F5F7FA;opacity:.65;transition:opacity .2s}
.nav-link:hover{opacity:1}

/* ── Cards ── */
.card{border:1px solid var(--border);background:var(--white);padding:48px 40px;transition:all .4s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}
.card:hover{border-color:var(--accent);box-shadow:0 20px 40px rgba(11,31,59,.08);transform:translateY(-8px)}
.card::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:var(--accent);transform:scaleX(0);transition:transform .4s ease;transform-origin:right}
.card:hover::after{transform:scaleX(1);transform-origin:left}

/* ── Sector cards ── */
.sector-card{position:relative;overflow:hidden;min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;padding:40px;border:1px solid rgba(255,255,255,.08);transition:all .5s cubic-bezier(.16,1,.3,1);cursor:pointer}
.sector-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(0,0,0,.3)}
.sector-card .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,31,59,.3) 0%,rgba(11,31,59,.85) 70%,rgba(11,31,59,.95) 100%);transition:all .4s ease;z-index:1}
.sector-card:hover .overlay{background:linear-gradient(180deg,rgba(11,31,59,.2) 0%,rgba(11,31,59,.75) 60%,rgba(11,31,59,.92) 100%)}
.sector-card .content{position:relative;z-index:2}
.sector-card .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s ease}
.sector-card:hover .bg{transform:scale(1.08)}

/* ── Form ── */
.field{width:100%;border:1px solid var(--border);background:var(--white);padding:14px 16px;font-size:14px;color:var(--text);outline:none;transition:border-color .2s;border-radius:0;line-height:1.4}
.field:focus{border-color:var(--navy)}

/* ── Tag ── */
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;background:#F0F2F5;color:var(--navy);padding:5px 12px;display:inline-block}

/* ── Animations ── */
@keyframes revealUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideRight{from{transform:translateX(-20px);opacity:0}to{transform:translateX(0);opacity:1}}
.reveal{animation:revealUp .8s cubic-bezier(.16,1,.3,1) both}
.reveal-d1{animation-delay:.1s}.reveal-d2{animation-delay:.2s}.reveal-d3{animation-delay:.3s}.reveal-d4{animation-delay:.4s}

/* ── Responsive ── */
@media(max-width:960px){
  .grid-2,.grid-3{grid-template-columns:1fr!important}
  .grid-4{grid-template-columns:1fr 1fr!important}
  .w{padding:0 24px}
}
@media(max-width:560px){
  .grid-4{grid-template-columns:1fr!important}
  .hide-m{display:none!important}
  .h1{font-size:36px!important}
  .h2{font-size:28px!important}
  .sec{padding:64px 0}
}