/* NorSmart v3.2 FINAL — Styles */
:root{
  --blue:#007BFF; --cyan:#17A2B8; --gray-25:#fcfdff; --gray-50:#f8fafc; --gray-100:#F5F5F5;
  --gray-200:#e9eef5; --gray-500:#6b7280; --text:#16202c; --muted:#435064; --white:#FFFFFF;
  --radius:14px; --radius-lg:18px; --shadow:0 10px 28px rgba(2,12,27,.07); --shadow-lg:0 18px 44px rgba(2,12,27,.12);
  --trans:200ms cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);line-height:1.65;background:#fff}
h1,h2,h3{font-family:Poppins,Inter,system-ui,Arial,sans-serif; line-height:1.2; margin:0 0 .65rem}
h1{font-size:clamp(2.1rem,3.7vw,3.1rem)} h2{font-size:clamp(1.7rem,3vw,2.3rem)} h3{font-size:clamp(1.16rem,2vw,1.35rem)}
p{margin:0 0 1rem} .small{font-size:.92rem;color:var(--gray-500)} .muted{color:var(--muted)} .hidden{display:none}
.section-pad{padding:4.8rem 0} .container{width:min(1160px,92%); margin:0 auto}
.grid-2{display:grid; grid-template-columns:1.05fr 1fr; gap:2.1rem} @media (max-width:980px){.grid-2{grid-template-columns:1fr}}

/* Header */
.site-header{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.86); backdrop-filter:saturate(1.2) blur(12px); border-bottom:1px solid #eef2f7}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.85rem 0}
.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:#000; font-weight:700}
.brand span{font-family:Poppins; letter-spacing:.2px}
.nav ul{display:flex; gap:1rem; list-style:none; padding:0; margin:0; align-items:center}
.nav a{color:#222; text-decoration:none; padding:.55rem .85rem; border-radius:10px; transition:background var(--trans)}
.nav a:hover{background:#eef4ff}
.btn-small{padding:.45rem .9rem !important}
.nav-toggle{display:none; background:transparent; border:0; cursor:pointer}
.nav-toggle .bar{display:block; width:22px; height:2px; background:#333; margin:5px 0; border-radius:2px}
@media (max-width: 900px){
  .nav{position:absolute; right:1rem; top:64px; background:#fff; border:1px solid #eee; border-radius:12px; box-shadow:var(--shadow); padding:.6rem; display:none}
  .nav.open{display:block}
  .nav ul{flex-direction:column; align-items:stretch}
  .nav-toggle{display:block}
}

/* Buttons */
.btn{background:var(--blue);color:#fff;text-decoration:none;border-radius:12px;padding:.9rem 1.15rem;display:inline-block;font-weight:700;letter-spacing:.2px;box-shadow:0 10px 26px rgba(0,123,255,.22);border:2px solid var(--blue); transition:transform var(--trans), filter var(--trans)}
.btn:hover{filter:brightness(1.05); transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--blue);border:2px solid var(--blue);box-shadow:none}
.btn-outline{background:#fff;color:var(--blue);border:2px solid var(--blue)}

/* Hero */
.hero{background:radial-gradient(1200px 500px at 10% -20%, rgba(23,162,184,.18), transparent 60%),radial-gradient(900px 400px at 90% -10%, rgba(0,123,255,.18), transparent 60%),linear-gradient(180deg,#fbfdff,#fff)}
.pill{display:inline-block; padding:.38rem .65rem; font-size:.85rem; border-radius:999px;background:#eef7ff; border:1px solid #dfeeff; color:#2b4c7e; margin-bottom:.7rem}
.hero-grid{align-items:center}
.highlight{color:var(--blue)}
.lead{color:var(--muted); margin-bottom:1.25rem; max-width:58ch}
.cta-row{display:flex; gap:.95rem; margin:1.05rem 0 1.2rem}
.hero-bullets{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem 1rem; padding:0; margin:1.1rem 0 0; list-style:none}

/* Dashboard mock */
.dashboard{border:1px solid #e7eefb; border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden; background:#fff; transform:translateZ(0)}
.dash-head{display:flex; gap:.5rem; padding:.6rem; background:#eef5ff; border-bottom:1px solid #e7eefb}
.tab{padding:.42rem .72rem; border-radius:9px; background:#e6f0ff; color:#2b4c7e; font-weight:600; font-size:.92rem}
.tab.active{background:#cfe2ff}
.dash-body{display:grid; grid-template-columns:1fr 1.15fr}
.list{padding:1rem; border-right:1px solid #eef2f7; display:grid; gap:.55rem}
.item{padding:.6rem .75rem; border-radius:11px; background:#f8fbff; border:1px solid #e7eefb; font-size:.96rem}
.dot{width:8px; height:8px; border-radius:50%; background:#c9dcff; display:inline-block; margin-right:.5rem}
.dot-green{background:#22c55e}
.ai-pane{padding:1rem; display:grid; gap:.65rem}
.bubble{padding:.75rem .95rem; border-radius:12px; max-width:92%}
.bubble.user{background:#eef9ff; border:1px solid #d6f2ff}
.bubble.ai{background:#ebf7ff; border:1px solid #d6ecff}

/* Cards */
.card{padding:1.15rem; border:1px solid #e6eaf2; border-radius:16px; background:#fff; box-shadow:0 10px 24px rgba(0,0,0,.04); transition:transform var(--trans), box-shadow var(--trans)}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:1.05rem}
.icon{width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,var(--cyan),var(--blue)); display:grid; place-items:center; margin-bottom:.65rem}
.icon svg{width:22px; height:22px; fill:#fff}
@media (max-width: 980px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width: 560px){.cards{grid-template-columns:1fr}}

/* Services */
.services{background:var(--gray-50)}
.service-list{display:grid; grid-template-columns:repeat(4,1fr); gap:1.05rem}
.service ul{padding-left:1.1rem; margin:0 0 .7rem}
.link{font-weight:600; color:var(--blue); text-decoration:none}
.link:hover{text-decoration:underline}
@media (max-width: 1100px){.service-list{grid-template-columns:1fr 1fr}}
@media (max-width: 560px){.service-list{grid-template-columns:1fr}}

/* Pricing */
.pricing{background:#fff}
.price-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.05rem; align-items:stretch}
.price-card .tag{color:var(--gray-500); margin-top:-.2rem}
.price{font-size:1.12rem; margin:.5rem 0 .9rem}
.featured{border-color:var(--cyan); position:relative; box-shadow:0 14px 34px rgba(23,162,184,.15)}
.badge{position:absolute; top:-10px; right:14px; background:var(--cyan); color:#fff; padding:.3rem .58rem; border-radius:8px; font-size:.8rem}
.price-card ul{padding-left:1.1rem}
@media (max-width: 900px){.price-cards{grid-template-columns:1fr}}

/* FAQ */
.faq .accordion{display:grid; gap:.7rem}
details{border:1px solid #e6eaf2; border-radius:12px; padding:.8rem 1rem; background:#fff; transition:border-color var(--trans), background var(--trans)}
details[open]{background:#f8fbff; border-color:#cfe2ff}
details summary{cursor:pointer; font-weight:700; list-style:none; display:flex; align-items:center; gap:.6rem; margin-bottom:.45rem}
details summary::-webkit-details-marker{display:none}
summary .chev{width:18px; height:18px; border:2px solid var(--blue); border-left:0; border-top:0; transform:rotate(-45deg); transition:transform var(--trans)}
details[open] summary .chev{transform:rotate(135deg)}
details p{margin:.45rem 0 0; line-height:1.75; color:var(--muted)}

/* About */
.about{background:var(--gray-50)}
.orbs{position:relative; width:100%; height:260px; filter:saturate(110%)}
.orbs span{position:absolute; border-radius:50%; background:radial-gradient(circle at 30% 30%, var(--cyan), var(--blue)); opacity:.16}
.orbs span:nth-child(1){width:240px;height:240px;left:10%;top:20%}
.orbs span:nth-child(2){width:160px;height:160px;left:50%;top:0%; opacity:.12}
.orbs span:nth-child(3){width:120px;height:120px;right:10%;bottom:10%; opacity:.10}

/* Contact */
.contact{background:#fff}
.contact-list{list-style:none; padding:0; margin:0 0 1rem}
.contact-form{display:grid; gap:.75rem; background:#fff; border:1px solid #e6eaf2; border-radius:16px; box-shadow:var(--shadow)}
.contact-form input, .contact-form textarea{padding:.85rem .95rem; border-radius:12px; border:1px solid #d6dbe4; font:inherit}
.contact-form button{margin-top:.45rem}
.form-note{color:#5a677b}

/* Footer */
.site-footer{padding:2.2rem 0; background:#0a1421; color:#cde7ff; border-top:1px solid #0f2035}
.footer-grid{display:grid; grid-template-columns:1.2fr .8fr .6fr; gap:1rem; align-items:start}
.f-links{list-style:none; padding:0; margin:0; display:grid; gap:.35rem}
.f-links a{color:#cde7ff; text-decoration:none}
.f-links a:hover{text-decoration:underline}
.f-copy{text-align:right}
@media (max-width: 900px){.footer-grid{grid-template-columns:1fr}.f-copy{text-align:left}}

/* Cookie banner */
.cookie-banner{position:fixed; left:1rem; right:1rem; bottom:1rem; background:#fff; border:1px solid #e6eaf2; border-radius:14px; box-shadow:var(--shadow); padding:1rem; display:flex; gap:1rem; flex-wrap:wrap; align-items:center; z-index:9999}
.cookie-banner p{margin:0; flex:1; color:#334155}
.cookie-actions{display:flex; gap:.6rem}
.cookie-banner .btn{padding:.6rem .9rem; border-radius:10px}
.cookie-banner .btn-outline{background:#fff}
@media(max-width:600px){.cookie-banner{left:.75rem; right:.75rem}}