/*
  Phase 218 — Smart Blocks & Premium Card Language
  Purpose: replace harsh rectangular card feeling with softer, smarter, layered SaaS/EdTech blocks.
  Scope: public pages only. No business logic changes.
*/
:root{
  --sbp218-navy:#071B33;
  --sbp218-ink:#0B1F36;
  --sbp218-muted:#54677F;
  --sbp218-gold:#D7AD38;
  --sbp218-teal:#2F8F83;
  --sbp218-blue:#3B82F6;
  --sbp218-sky:#EAF4FA;
  --sbp218-warm:#FBF7EF;
  --sbp218-card:#FFFFFF;
  --sbp218-line:rgba(120,145,172,.18);
  --sbp218-shadow:0 22px 70px rgba(7,27,51,.075);
  --sbp218-soft-shadow:0 14px 44px rgba(7,27,51,.055);
}

/* Global public canvas: calmer but richer */
body.sr-public{
  background:
    radial-gradient(circle at 88% 8%, rgba(47,143,131,.12), transparent 30%),
    radial-gradient(circle at 12% 24%, rgba(215,173,56,.10), transparent 27%),
    linear-gradient(180deg,#fbfcfd 0%,#f4f8fb 44%,#fbf7ef 100%) !important;
}
body.sr-public .sr-page{
  background:
    linear-gradient(180deg,rgba(255,255,255,.50),rgba(255,255,255,.20)),
    radial-gradient(circle at 2% 38%,rgba(59,130,246,.045),transparent 24%),
    radial-gradient(circle at 98% 64%,rgba(47,143,131,.055),transparent 26%) !important;
}

/* Cleaner readable type hierarchy */
body.sr-public :where(h1,h2,h3){
  letter-spacing:-.15px !important;
  text-wrap:balance;
}
body.sr-public :where(p,li){
  color:var(--sbp218-muted) !important;
}

/* Premium section rhythm */
.sr-section{padding:38px 0 !important;}
.sr-section + .sr-section{padding-top:26px !important;}
.sr-section-soft{
  background:
    radial-gradient(circle at 15% 15%,rgba(215,173,56,.075),transparent 22%),
    radial-gradient(circle at 86% 45%,rgba(47,143,131,.085),transparent 28%),
    linear-gradient(135deg,rgba(238,246,252,.80),rgba(255,250,240,.72)) !important;
}
.sr-section-intro{margin-bottom:20px !important;}
.sr-section-intro h2{font-size:clamp(27px,2.7vw,38px)!important;line-height:1.34!important;}
.sr-section-intro p{max-width:760px;margin-inline:auto!important;font-size:16px!important;}

/* Hero visual depth without aggressive oversized blocks */
.sr-hero{
  padding:42px 0 38px!important;
  background:
    radial-gradient(circle at 82% 18%,rgba(47,143,131,.18),transparent 30%),
    radial-gradient(circle at 12% 74%,rgba(215,173,56,.14),transparent 26%),
    linear-gradient(135deg,#FCFDFE 0%,#EEF6FA 54%,#FFF8EC 100%) !important;
}
.sr-hero h1{font-size:clamp(33px,3.45vw,50px)!important;line-height:1.27!important;font-weight:820!important;}
.sr-page-app .sr-hero h1,.sr-page-app-protection .sr-hero h1{font-size:clamp(31px,3.15vw,46px)!important;}
.sr-hero-visual{isolation:isolate;}
.sr-hero-visual:before{
  content:"";position:absolute;inset:7% 0 0 6%;z-index:-1;border-radius:44px;
  background:linear-gradient(135deg,rgba(215,173,56,.12),rgba(47,143,131,.13),rgba(59,130,246,.10));
  filter:blur(2px);transform:rotate(-2deg);opacity:.75;
}

/* Buttons smoother and more intelligent */
.sr-btn,.sr-demo,.sr-login,.sr-lang-switch,.sr-menu-button{
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease !important;
}
.sr-btn:hover,.sr-demo:hover,.sr-login:hover,.sr-lang-switch:hover{
  transform:translateY(-2px);
}
.sr-btn-primary,.sr-demo{
  background:linear-gradient(135deg,#071B33,#0B3D4A) !important;
  box-shadow:0 16px 34px rgba(7,27,51,.16) !important;
}
.sr-btn-secondary,.sr-login{
  background:rgba(255,255,255,.82)!important;
  border:1px solid rgba(120,145,172,.22)!important;
  box-shadow:0 12px 28px rgba(7,27,51,.045)!important;
}

/* Core idea: smart blocks are layered panels, not boxes */
.sr-lane,
.sr-process-item,
.sr-pathway article,
.sr-price-band,
.sr-course-card,
.sr-form-card,
.sr-contact-panel,
.sr-panel,
.sr-copy-card,
.sr-compare-panel article,
.sr-role-list article,
.sr-value-ribbon,
.sr-scenario-card,
.sr-outcome-cloud,
.sr-module-nav a{
  position:relative;
  overflow:hidden;
  border:1px solid var(--sbp218-line)!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(248,252,255,.88)) padding-box,
    linear-gradient(135deg,rgba(215,173,56,.38),rgba(47,143,131,.28),rgba(59,130,246,.28)) border-box !important;
  box-shadow:var(--sbp218-soft-shadow)!important;
  backdrop-filter:blur(10px);
}
.sr-lane::after,
.sr-process-item::after,
.sr-pathway article::after,
.sr-price-band::after,
.sr-panel::after,
.sr-copy-card::after,
.sr-form-card::after,
.sr-contact-panel::after,
.sr-role-list article::after{
  content:"";
  position:absolute;
  inset:auto -12% -44% auto;
  width:210px;height:210px;border-radius:999px;
  background:radial-gradient(circle,rgba(47,143,131,.115),transparent 66%);
  pointer-events:none;
}
.sr-lane::before,
.sr-process-item::before,
.sr-pathway article::before,
.sr-price-band::before,
.sr-panel::before,
.sr-copy-card::before,
.sr-form-card::before,
.sr-contact-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(215,173,56,.42),rgba(47,143,131,.32),rgba(59,130,246,.42));
  height:3px;
  opacity:.85;
  pointer-events:none;
}
html[dir="rtl"] .sr-lane::before{left:0;right:0;width:auto!important;height:3px!important;}

/* Editorial lanes: less rectangle, more product-led row */
.sr-lanes{display:grid;gap:12px!important;}
.sr-lane{
  border-radius:30px 44px 30px 44px!important;
  padding:20px 22px!important;
  display:grid!important;
  grid-template-columns:150px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:18px!important;
  min-height:118px;
}
.sr-lane.is-alt{border-radius:44px 30px 44px 30px!important;}
.sr-lane-index{
  width:auto!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}
.sr-lane-index b{
  display:grid;place-items:center;
  width:58px;height:58px;border-radius:22px;
  background:linear-gradient(135deg,#EEF5FB,#FFFFFF)!important;
  border:1px solid rgba(120,145,172,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
  font-size:24px!important;
}
.sr-lane-index span{
  background:linear-gradient(135deg,#FFF6DA,#FBF0C8)!important;
  border:1px solid rgba(215,173,56,.28);
  box-shadow:none!important;
}
.sr-lane-copy h3{font-size:clamp(21px,1.85vw,28px)!important;margin-bottom:4px!important;}
.sr-lane-copy p{font-size:15.6px!important;line-height:1.76!important;margin:0!important;}
.sr-lane-action a{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-width:104px;height:44px;border-radius:999px!important;
  background:#fff!important;color:#203A58!important;
}
.sr-lane-action a::after{content:"↗";font-size:14px;margin-inline-start:8px;opacity:.55;}
html[dir="rtl"] .sr-lane-action a::after{content:"↖";}
.sr-lane:hover{transform:translateY(-2px);box-shadow:var(--sbp218-shadow)!important;transition:all .24s ease;}

/* Process blocks: no longer generic cards */
.sr-process-item{
  border-radius:34px!important;
  padding:24px!important;
  min-height:190px;
}
.sr-process-number,
.sr-step-number{
  background:linear-gradient(135deg,#071B33,#114052)!important;
  color:#fff!important;
  box-shadow:0 12px 26px rgba(7,27,51,.16);
  border:none!important;
}
.sr-process-copy h3{font-size:clamp(21px,2vw,28px)!important;}

/* Role and pathway panels: softer, smarter, with floating indicators */
.sr-role-list,.sr-pathway{gap:14px!important;}
.sr-role-list article,
.sr-pathway article{
  border-radius:32px 44px 32px 32px!important;
  padding:24px!important;
}
.sr-role-list article:nth-child(2n),.sr-pathway article:nth-child(2n){border-radius:44px 32px 32px 44px!important;}
.sr-role-list article h3,.sr-pathway article h3{font-size:clamp(21px,1.8vw,27px)!important;}
.sr-role-list article:before,.sr-pathway article:before{height:4px!important;}

/* Panels and dark panels */
.sr-panel,.sr-copy-card{border-radius:36px!important;padding:28px!important;}
.sr-panel-dark{
  background:
    radial-gradient(circle at 18% 16%,rgba(215,173,56,.18),transparent 25%),
    radial-gradient(circle at 92% 78%,rgba(47,143,131,.18),transparent 30%),
    linear-gradient(135deg,#071B33,#0A2746 58%,#0B3D4A)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 28px 72px rgba(7,27,51,.18)!important;
}
.sr-panel-dark *{color:#fff!important}.sr-panel-dark p{color:#DCE8F5!important}
.sr-statement{font-size:clamp(22px,2vw,30px)!important;line-height:1.45!important;font-weight:850!important;}

/* Pricing and conversion bands */
.sr-price-band{
  border-radius:40px!important;
  padding:28px!important;
}
.sr-price-band.is-featured{
  background:
    radial-gradient(circle at 14% 20%,rgba(215,173,56,.20),transparent 25%),
    linear-gradient(135deg,#071B33,#0D3E4B)!important;
  color:#fff!important;
}
.sr-price-band.is-featured *{color:#fff!important}.sr-price-band.is-featured p{color:#E5EDF7!important}

/* Forms/contact: less sharp, more professional */
.sr-form-card,.sr-contact-panel{border-radius:38px!important;padding:30px!important;}
.sr-form-card input,.sr-form-card select,.sr-form-card textarea{
  background:#fff!important;
  border:1px solid rgba(120,145,172,.22)!important;
  border-radius:20px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86);
}
.sr-form-card input:focus,.sr-form-card select:focus,.sr-form-card textarea:focus{
  outline:none!important;
  border-color:rgba(47,143,131,.55)!important;
  box-shadow:0 0 0 4px rgba(47,143,131,.12)!important;
}

/* Module subpages: value ribbons/outcomes become softer smart chips */
.sr-module-nav{gap:10px!important;}
.sr-module-nav a{
  border-radius:999px!important;
  padding:11px 16px!important;
  background:rgba(255,255,255,.78)!important;
}
.sr-value-ribbon,.sr-scenario-card,.sr-outcome-cloud{
  border-radius:30px!important;
  padding:22px!important;
}
.sr-outcome-cloud span,
.sr-check-list li{
  background:rgba(255,255,255,.70)!important;
  border:1px solid rgba(120,145,172,.16)!important;
  border-radius:999px!important;
  padding:9px 13px!important;
}

/* Visual mockups: cleaner product feel */
.sr-dashboard-visual,.sr-product-map,.sr-install-visual,.sr-ai-visual{
  filter:drop-shadow(0 28px 54px rgba(7,27,51,.13))!important;
}
.sr-dash-window,.sr-product-map,.sr-ai-visual,.sr-phone-shell{
  border-radius:38px!important;
  border:1px solid rgba(255,255,255,.14)!important;
}
.sr-dash-feed em,.sr-phone-grid b,.sr-orbit-grid b{
  border-radius:20px!important;
}

/* Avoid over-carded grids; make them breathe but not sharp */
.sr-card-grid > *, .sr-feature-grid > *{
  border-radius:32px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(248,252,255,.82))!important;
  border:1px solid rgba(120,145,172,.16)!important;
  box-shadow:0 14px 42px rgba(7,27,51,.05)!important;
}

/* Nice hover that feels smart, not flashy */
.sr-lane,.sr-process-item,.sr-pathway article,.sr-role-list article,.sr-price-band,.sr-panel,.sr-copy-card,.sr-form-card,.sr-contact-panel,.sr-module-nav a{
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease;
}
.sr-process-item:hover,.sr-pathway article:hover,.sr-role-list article:hover,.sr-price-band:hover,.sr-panel:hover,.sr-copy-card:hover,.sr-contact-panel:hover,.sr-module-nav a:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 64px rgba(7,27,51,.085)!important;
  border-color:rgba(47,143,131,.24)!important;
}

/* Header minor polish to match smarter blocks */
.sr-menu a{font-size:16.5px!important;}
.sr-nav-wrap{height:78px!important;}
.sr-header{box-shadow:0 14px 42px rgba(7,27,51,.045)!important;}

@media (max-width:1100px){
  .sr-lane{grid-template-columns:120px 1fr!important;}
  .sr-lane-action{grid-column:2;}
  .sr-hero h1{font-size:clamp(31px,5vw,44px)!important;}
}
@media (max-width:760px){
  .sr-section{padding:30px 0!important;}
  .sr-section + .sr-section{padding-top:20px!important;}
  .sr-lane{grid-template-columns:1fr!important;border-radius:28px!important;min-height:unset;padding:18px!important;}
  .sr-lane-index b{width:50px;height:50px;border-radius:18px;font-size:21px!important;}
  .sr-lane-action{grid-column:auto;}
  .sr-lane-action a{width:100%;}
  .sr-process-item,.sr-pathway article,.sr-role-list article,.sr-panel,.sr-copy-card,.sr-form-card,.sr-contact-panel{border-radius:26px!important;padding:20px!important;}
  .sr-hero h1{font-size:clamp(27px,8.5vw,36px)!important;line-height:1.32!important;}
  .sr-section-intro h2{font-size:clamp(24px,7.2vw,31px)!important;}
}