/* Northcom markedssider - premium seksjoner, animerte SVG-ikoner, glass-kort.
   Scoped under .nc-about. Lastes via mu-plugin nc-marketing-assets.php. */

.nc-about h1,.nc-about h2,.nc-about h3,.nc-about h4{letter-spacing:.01em}

/* ---- Hero ---- */
.nc-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#0a141e 0%,#0e2233 40%,#06303a 70%,#0a141e 100%);background-size:220% 220%;animation:ncShimmer 16s ease-in-out infinite}
.nc-hero__glow{position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(0,181,204,.18),transparent 45%),radial-gradient(circle at 85% 70%,rgba(0,181,204,.12),transparent 45%);pointer-events:none}
.nc-hero__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(57,212,230,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(57,212,230,.06) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(circle at 50% 40%,#000,transparent 75%);-webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 75%);animation:ncDrift 24s linear infinite}
.nc-hero__inner{position:relative;z-index:2;text-align:center;padding:98px 20px}
.nc-hero__eyebrow{display:inline-block;letter-spacing:.22em;font-size:.72rem;font-weight:700;color:#39d4e6;text-transform:uppercase;margin-bottom:14px;opacity:0;animation:ncUp .7s .05s forwards}
.nc-hero__title{color:#fff;font-size:clamp(2.4rem,6vw,4rem);line-height:1.05;margin:0 0 16px;text-transform:uppercase;opacity:0;animation:ncUp .8s .12s forwards}
.nc-hero__lead{color:#cfe0ea;font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.55;max-width:640px;margin:0 auto 26px;opacity:0;animation:ncUp .8s .2s forwards}
.nc-hero__cta{display:inline-flex;align-items:center;gap:9px;padding:13px 30px;border-radius:99px;border:2px solid #39d4e6;color:#fff;font-weight:600;text-decoration:none;transition:all .25s;opacity:0;animation:ncUp .8s .28s forwards}
.nc-hero__cta:hover{background:#39d4e6;color:#06222b;transform:translateY(-2px);box-shadow:0 10px 30px rgba(57,212,230,.35)}
.nc-hero__cta::after{content:"";width:18px;height:18px;background:currentColor;transition:transform .25s;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.nc-hero__cta:hover::after{transform:translateX(4px)}
.nc-hero__scroll{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width:24px;height:38px;border:2px solid rgba(255,255,255,.35);border-radius:14px;z-index:2}
.nc-hero__dot{position:absolute;left:50%;top:7px;width:4px;height:7px;background:#39d4e6;border-radius:2px;transform:translateX(-50%);animation:ncScroll 1.6s infinite}

/* ---- Kort-grid ---- */
.nc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:8px}
.nc-grid--3{grid-template-columns:repeat(3,1fr)}
.nc-grid--auto{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
@media(max-width:849px){.nc-grid,.nc-grid--3,.nc-grid--auto{grid-template-columns:repeat(2,1fr)}}
@media(max-width:549px){.nc-grid,.nc-grid--3,.nc-grid--auto{grid-template-columns:1fr}}
.nc-card__link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:#0099b3;font-weight:600;font-size:.9rem;text-decoration:none;transition:gap .2s,color .2s}
.nc-card__link::after{content:"";width:15px;height:15px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.nc-card__link:hover{gap:10px;color:#00b5cc}
.nc-card--left{text-align:left}
.nc-card--left .nc-ico,.nc-card--left .nc-line{margin-left:0;margin-right:auto}
.nc-card{position:relative;background:#fff;border:1px solid #e7ebf0;border-radius:16px;padding:30px 22px;text-align:center;overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s;opacity:0;transform:translateY(24px)}
.nc-card.is-in{opacity:1;transform:none}
.nc-card__bar{position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#00b5cc,#39d4e6);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.nc-card:hover{transform:translateY(-8px);box-shadow:0 22px 44px rgba(10,30,45,.14);border-color:#cfeef3}
.nc-card:hover .nc-card__bar{transform:scaleX(1)}
.nc-card:hover .nc-ico{transform:translateY(-3px)}
.nc-ico{width:60px;height:60px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:linear-gradient(135deg,rgba(0,181,204,.12),rgba(57,212,230,.05));transition:transform .3s;animation:ncFloat 5s ease-in-out infinite}
.nc-ico svg{width:32px;height:32px;stroke:#00b5cc;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nc-card:nth-child(2) .nc-ico{animation-delay:.6s}
.nc-card:nth-child(3) .nc-ico{animation-delay:1.2s}
.nc-card:nth-child(4) .nc-ico{animation-delay:1.8s}
.nc-card h4{margin:0 0 6px;font-size:1.08rem}
.nc-card .nc-line{width:34px;height:3px;background:#00b5cc;border-radius:2px;margin:0 auto 12px}
.nc-card p{color:#5a6b78;font-size:.92rem;line-height:1.55;margin:0}
.nc-card.is-in .nc-ico svg [data-draw]{stroke-dasharray:130;stroke-dashoffset:130;animation:ncDraw 1.5s ease forwards}
.nc-card:nth-child(2).is-in [data-draw]{animation-delay:.12s}
.nc-card:nth-child(3).is-in [data-draw]{animation-delay:.24s}
.nc-card:nth-child(4).is-in [data-draw]{animation-delay:.36s}

/* ---- Keyframes ---- */
@keyframes ncShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes ncDrift{to{background-position:44px 44px}}
@keyframes ncUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes ncFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes ncDraw{to{stroke-dashoffset:0}}
@keyframes ncScroll{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,10px)}100%{opacity:0}}

@media(prefers-reduced-motion:reduce){
  .nc-hero,.nc-ico,.nc-hero__dot,.nc-hero__grid,.nc-card.is-in .nc-ico svg [data-draw]{animation:none!important}
  .nc-card{opacity:1;transform:none}
  .nc-hero__eyebrow,.nc-hero__title,.nc-hero__lead,.nc-hero__cta{opacity:1;animation:none}
}