/* Content Monitor — Premium Homepage Design Patch | 2026-11-13
   Standalone visual layer; no changes to Laravel, routes or site.js. */
:root {
  --navy: #16276c;
  --deep: #0b173b;
  --blue: #0b92da;
  --sky: #38c3fa;
  --yellow: #f9e64b;
  --ink: #162349;
  --muted: #53647f;
  --r: 24px;
  --shadow: 0 22px 68px rgba(20,40,100,.10);
}
body { background: #f8faff; }
::selection {background:#fbe85f;color:#0b173b}
.container {width:min(calc(100% - 76px),1240px)}
.site-header {background:rgba(255,255,255,.94);border-bottom:1px solid #e8ecf4;box-shadow:0 7px 26px rgba(8,23,62,.035)}
.brand img{width:220px}
.desktop-navigation a {color:#23365d;font-size:13px;letter-spacing:-.01em}
.desktop-navigation a:hover {color:#008ccf}
.header-actions .btn-primary {background:#14246b;border-radius:12px;box-shadow:0 7px 17px rgba(18,36,107,.16)}
.header-actions .btn-primary:hover{background:#046da9}
.btn{border-radius:13px;transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease}
.btn:focus-visible {outline:3px solid #48bbef;outline-offset:3px}
/* HERO — deep color, large editorial type, glowing product visualization */
.hero {
  color:#fff;
  background:
    radial-gradient(ellipse 57% 79% at 94% 20%,rgba(30,187,245,.43) 0%,rgba(9,82,177,.16) 44%,transparent 78%),
    radial-gradient(ellipse 42% 55% at -15% 85%,rgba(93,68,194,.25),transparent 80%),
    linear-gradient(119deg,#0b1534 0%,#111f57 45%,#153b8d 100%);
  padding:70px 0 38px;
}
.hero::before {
  content:"";position:absolute;right:-180px;top:-285px;width:780px;height:780px;
  border:1px solid rgba(148,220,255,.26);border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 90px rgba(70,187,250,.045),0 0 0 192px rgba(88,188,255,.028);
}
.hero::after{content:"";position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f7e533 0 18%,#43d1ff 18% 47%,#667cfa 47% 75%,#a0eac7 75%)}
.hero-glow-a {border-color:rgba(52,172,251,.08)}
.hero-glow-b {border-color:rgba(237,225,90,.06)}
.hero-layout {grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);gap:40px;min-height:535px}
.hero-copy {padding-bottom:4px}
.hero .eyebrow {color:#c8d9ff;letter-spacing:.17em;font-size:11px;font-weight:780}
.hero .eyebrow-line{background:#f9e64b;width:30px;height:3px;border-radius:5px}
.hero h1 {font-size:clamp(51px,5.3vw,77px);line-height:1.07;letter-spacing:-.071em;max-width:720px;color:#fff;margin:24px 0 24px;font-weight:825}
.hero h1 em{color:#6bddff;background:linear-gradient(100deg,#69e0ff 0%,#41bbfa 59%,#b9c7ff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-lead {font-size:18px;color:#ced9f0;line-height:1.75;max-width:540px;margin-bottom:30px;letter-spacing:-.011em}
.hero .btn-primary {background:#f9e64b;color:#12204f;box-shadow:0 16px 34px rgba(2,8,28,.23);border:1px solid #ffed6f}
.hero .btn-primary:hover{background:#fff176;box-shadow:0 18px 42px rgba(2,8,28,.3)}
.hero .btn-outline {background:rgba(255,255,255,.065);color:#fff;border:1px solid rgba(219,237,255,.43);backdrop-filter:blur(8px)}
.hero .btn-outline:hover {background:rgba(255,255,255,.15);border-color:#fff}
.hero-note {color:#c5d5f0;margin-top:33px;font-size:12px}
.hero-note-icon {color:#102e63;background:#7fe5dc;box-shadow:0 0 0 5px rgba(90,225,218,.09)}
.hero-visual {padding:33px 5px 50px 18px}
.hero .mock-orbit.orbit-one {background:radial-gradient(circle at 37% 35%,rgba(88,220,255,.32),rgba(32,123,237,.055) 62%,transparent 72%);width:620px;height:620px;top:-100px;right:-125px}
.hero .mock-orbit.orbit-two {border:1px solid rgba(169,216,255,.23);width:695px;height:695px;right:-160px;top:-138px}
.hero .app-window {border:1px solid rgba(255,255,255,.43);border-radius:22px;box-shadow:0 36px 100px rgba(1,6,30,.37),0 0 0 11px rgba(255,255,255,.045);transform:rotate(-2deg)}
.hero .floating-note{box-shadow:0 18px 42px rgba(2,11,40,.22);border-radius:16px;transform:translateY(-5px)}
.hero .visual-disclaimer {color:#bed2ef}
.hero .scroll-prompt {border-top:1px solid rgba(215,235,255,.2);color:#bac9e6}
.hero .scroll-prompt svg {color:#f9e64b}
/* editorial value statement */
.intro-strip{background:#fff;border-bottom:1px solid #e8edf6;position:relative;overflow:hidden}
.intro-strip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,#15a7e3,#f5df35)}
.intro-strip-inner{padding-top:42px;padding-bottom:42px}
.intro-strip .eyebrow, .intro-strip-label {color:#087fb4}
.intro-claim {color:#152456;font-size:clamp(25px,2.1vw,34px);font-weight:780;letter-spacing:-.04em}
.intro-strip p {font-size:14px;line-height:1.8;color:#52647e}
/* Features — colorful bento palette, deliberately asymmetric */
.features{background:radial-gradient(ellipse 36% 20% at 96% 12%,#e7f5fe,transparent),#f8faff}
.features .section-head h2{font-weight:800;letter-spacing:-.056em;color:#111d4a}
.features .eyebrow,.audience .eyebrow,.faq .eyebrow {color:#078ebf}
.features-grid {gap:18px}
.features-grid>.feature-card{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid #e4ebf7;
  box-shadow:0 9px 25px rgba(24,47,90,.035);border-radius:24px;
  padding:32px 33px 27px;
  transition:transform .28s ease, box-shadow .28s ease,border-color .28s ease;
}
.features-grid>.feature-card:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(12,41,91,.12);border-color:#cae3f7}
.feature-card .feature-icon {border-radius:16px}
.feature-number{font-weight:830;letter-spacing:.135em;font-size:10px}
.feature-card h3{letter-spacing:-.045em;font-weight:800}
.feature-card p{line-height:1.73}
.features-grid>.feature-card:nth-child(1){background:linear-gradient(137deg,#142968 0%,#154da0 100%);color:#fff;border-color:rgba(255,255,255,.05)}
.features-grid>.feature-card:nth-child(1)::after{content:"";position:absolute;right:-70px;top:-70px;width:225px;height:225px;border-radius:50%;background:radial-gradient(circle,rgba(46,217,254,.22),transparent 70%);pointer-events:none}
.features-grid>.feature-card:nth-child(1) h3,.features-grid>.feature-card:nth-child(1) p{color:#fff}
.features-grid>.feature-card:nth-child(1) p{color:#d4e7ff}
.features-grid>.feature-card:nth-child(1) .feature-number{color:#88e6ff}
.features-grid>.feature-card:nth-child(1) .feature-icon{color:#1b4b8f;background:#f7e64e}
.features-grid>.feature-card:nth-child(1) .calendar-illustration{background:#fff;color:#182856;border:1px solid rgba(255,255,255,.8);border-radius:16px;box-shadow:0 20px 36px rgba(2,13,51,.18)}
.features-grid>.feature-card:nth-child(2){background:linear-gradient(145deg,#e4f7ff 0%,#f4fbff 100%);border-color:#ccecf7}
.features-grid>.feature-card:nth-child(2) .feature-icon{background:#c5eeff;color:#006a9b}
.features-grid>.feature-card:nth-child(3){background:linear-gradient(145deg,#fff4c7 0%,#fffbea 100%);border-color:#f4e8b4}
.features-grid>.feature-card:nth-child(3) .feature-icon{background:#ffdf63;color:#17315e}
.features-grid>.feature-card:nth-child(4){background:linear-gradient(135deg,#f0efff 0%,#fcfaff 100%);border-color:#e6e2ff}
.features-grid>.feature-card:nth-child(4) .feature-icon{background:#e0dcff;color:#4b46bd}
.features-grid>.feature-card:nth-child(5){background:linear-gradient(115deg,#dbf8f3 0%,#f0fffa 100%);border-color:#c6eee5}
.features-grid>.feature-card:nth-child(5) .feature-icon{background:#b8eee3;color:#076b79}
.feature-card .feature-foot {border-top-color:rgba(22,59,112,.12);font-weight:750}
.feature-card .feature-foot svg {color:#008fc8}
.feature-card .feature-tag {background:#fff;border:1px solid #a6e4d8;color:#124b64;font-weight:760}
/* Inhaakkalender — vivid section with professional illustrative UI */
.hook-section{position:relative;overflow:hidden;background:linear-gradient(132deg,#e9f8ff 0%,#f4fcff 49%,#d8f4ff 100%);padding:111px 0}
.hook-section::before{content:"";position:absolute;width:410px;height:410px;border-radius:50%;right:-180px;top:-190px;background:rgba(53,195,248,.15);box-shadow:0 0 0 72px rgba(53,195,248,.045)}
.hook-copy h2{font-weight:820;letter-spacing:-.06em;color:#101c4a}
.hook-copy h2 span{color:#008ec6}
.hook-step-n{background:#152c75;color:#fff;border-radius:13px;box-shadow:0 8px 15px rgba(17,42,112,.15)}
.hook-action.btn-primary{background:#182d7c;color:#fff;border-radius:13px;box-shadow:0 13px 30px rgba(18,39,110,.18)}
.hook-action.btn-primary:hover{background:#078fc5}
.hook-preview{position:relative;filter:drop-shadow(0 20px 40px rgba(23,56,117,.08))}
.hook-preview-top{background:#152665;color:#fff;border-color:#152665;border-radius:22px 22px 0 0}
.hook-preview-top>span:last-child{color:#b9cfff}
.hook-preview-body{border-color:#cbdff1;border-radius:0 0 22px 22px;box-shadow:0 22px 75px rgba(12,49,104,.14)}
.hook-date{background:linear-gradient(110deg,#f3f9ff,#fff);border-color:#d6e8f5}
.hook-date>span{background:linear-gradient(145deg,#19459c,#10245f)}
.hook-production{background:#eafff7;border-color:#bbebdb}
/* Workflow — refined connected timeline */
.workflow{background:#fff}
.workflow h2,.faq h2{color:#101d49;font-weight:810;letter-spacing:-.057em}
.workflow-step{border-radius:17px;transition:transform .2s ease,box-shadow .2s ease}
.workflow-step:nth-child(1)>b{background:#daefff;color:#096aa9}
.workflow-step:nth-child(2)>b{background:#fff1ab;color:#73570a}
.workflow-step:nth-child(3)>b{background:#e5e0ff;color:#4941ad}
.workflow-step:nth-child(4)>b{background:#d7f7e7;color:#217a58}
.workflow-step:hover{transform:translateX(4px)}
/* Audience — editorial dark navy showcase */
.audience{position:relative;overflow:hidden;background:linear-gradient(125deg,#0e1d4d 0%,#142b6a 65%,#163e86 100%)}
.audience::before{content:"";position:absolute;top:-200px;right:-100px;width:550px;height:550px;border:1px solid rgba(143,213,249,.2);border-radius:50%;box-shadow:0 0 0 90px rgba(64,139,234,.05);pointer-events:none}
.audience .eyebrow{color:#8bdcff}
.audience .section-head h2{color:#fff;font-weight:800}
.audience .section-head>p{color:#ccd9f6}
.audience-grid article{background:#fff;border:1px solid rgba(255,255,255,.35);border-radius:22px;box-shadow:0 14px 35px rgba(3,14,48,.17);transition:transform .25s ease}
.audience-grid article:hover{transform:translateY(-5px)}
.audience-grid article:nth-child(2){background:#f1f9ff}
.audience-grid article:nth-child(3){background:#fff9e5}
.audience-grid article:nth-child(1) .audience-icon{background:#dff4ff;color:#087ba9}
.audience-grid article:nth-child(2) .audience-icon{background:#deedff;color:#2955bb}
.audience-grid article:nth-child(3) .audience-icon{background:#ffefb4;color:#8c6614}
/* Security and FAQ */
.security{background:#e4f4fd;border-bottom:1px solid #d1e9f8}
.security h2{color:#101c49}
.security .security-eyebrow{color:#177eab}
.security .btn-light{background:#fff;color:#132e72;border:1px solid #d7e8f2}
.faq{background:#f9fbff}
.faq-items details{background:#fff;border:1px solid #e4ecf6;border-radius:15px;padding:0 22px;margin-bottom:12px;box-shadow:0 6px 14px rgba(22,49,92,.03)}
.faq-items summary{padding:23px 0}
.faq-items details[open]{border-color:#a5dff5;box-shadow:0 9px 22px rgba(27,125,183,.08)}
/* CTA / footer */
.cta-section{background:#f9fbff;padding:0 0 78px}
.cta-panel{border-radius:28px;background:radial-gradient(circle at 90% 10%,rgba(74,200,255,.37),transparent 37%),linear-gradient(115deg,#121e50,#1c4c9b);box-shadow:0 25px 62px rgba(19,44,103,.16);overflow:hidden}
.cta-panel .eyebrow{color:#a3e9ff}
.cta-panel h2{font-weight:830;letter-spacing:-.062em}
.cta-panel h2 em{color:#76dfff}
.cta-panel p{color:#d1def7}
.cta-panel .btn-primary{background:#f9e64b;color:#172454}
.cta-panel .btn-primary:hover{background:#fff17c}
.site-footer{background:#0a1537;color:#dae5f8}
.site-footer .footer-bottom{border-top-color:rgba(202,223,255,.15)}
.site-footer a:hover{color:#8be2ff}
/* Functional responsive overrides — no horizontal page drift */
@media (min-width:981px){
 .hero{padding-top:61px;padding-bottom:29px}
 .hero-layout{min-height:475px;gap:40px}
 .hero h1{font-size:clamp(49px,4.75vw,71px);margin:20px 0 23px}
 .hero-lead{font-size:17px}
 .hero-visual{padding:26px 6px 41px 15px}
 .features-grid>.feature-card{padding:30px 30px 28px}
}
@media (max-width:980px){
 .container{width:min(calc(100% - 46px),1240px)}
 .hero{padding:59px 0 26px}
 .hero-layout{grid-template-columns:1fr;gap:20px}
 .hero-copy{padding-bottom:0}
 .hero h1{font-size:clamp(44px,7.3vw,65px)}
 .hero .app-window{transform:rotate(-1deg)}
 .hook-section{padding:77px 0}
 .audience{padding:76px 0}
}
@media(max-width:690px){
 .container{width:min(calc(100% - 36px),1240px)}
 .site-header .brand img{width:193px;height:40px}
 .hero{padding:48px 0 26px}
 .hero::before{width:520px;height:520px;right:-320px;top:150px}
 .hero .eyebrow{font-size:9px;letter-spacing:.13em;gap:9px}
 .hero h1{font-size:clamp(39px,10.6vw,54px);line-height:1.1;letter-spacing:-.067em;margin:20px 0 19px}
 .hero-lead{font-size:15px;line-height:1.68;color:#d8e3f7}
 .hero-ctas{gap:10px}
 .hero-ctas .btn{min-height:50px;padding:13px 18px;font-size:13px}
 .hero-note{margin-top:23px;color:#cbdafa}
 .hero-visual{padding:24px 4px 42px 2px}
 .hero .mock-orbit.orbit-one{width:430px;height:430px;top:-8px;right:-90px}
 .hero .mock-orbit.orbit-two{width:480px;height:480px;top:-26px;right:-103px}
 .hero .app-window{transform:rotate(-.8deg);box-shadow:0 22px 50px rgba(0,4,25,.4),0 0 0 5px rgba(255,255,255,.035);border-radius:17px}
 .hero .floating-note{transform:none}
 .intro-strip-inner{padding-top:32px;padding-bottom:32px}
 .intro-claim{font-size:26px}
 .features{padding-top:65px;padding-bottom:64px}
 .features-grid>.feature-card{padding:24px 23px;border-radius:20px}
 .feature-card h3{font-size:23px}
 .features-grid>.feature-card:nth-child(1){padding:27px 23px}
 .hook-section{padding:66px 0}
 .hook-copy h2{font-size:37px}
 .workflow{padding-top:65px;padding-bottom:65px}
 .audience{padding:67px 0}
 .security{padding:44px 0}
 .faq{padding:67px 0}
 .faq-items details{padding:0 17px}
 .cta-section{padding-bottom:45px}
 .cta-panel{border-radius:23px;padding:44px 27px}
}
@media(max-width:375px){.hero h1{font-size:37px}.hero-ctas .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.feature-card,.audience-grid article,.workflow-step{transform:none!important}}