:root{
    --ink:#17262D;
    --teal:#00415A;
    --red:#B4141E;
    --orange:#F5AA1E;
    --paper:#F7F8F8;
    --white:#ffffff;
    --muted:#505F69;
    --line:#d9dde0;
    --soft:#edf2f4;
    --shadow:0 12px 30px rgba(18,56,74,.10);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family:"Montserrat", Arial, sans-serif;
    background:var(--paper);
    color:#1d2428;
    line-height:1.5;
  }
  header{
    min-height:78vh;
    display:grid;
    place-items:center;
    padding:56px 28px;
    background:
      radial-gradient(circle at 78% 20%, rgba(244,165,28,.30), transparent 18%),
      linear-gradient(135deg, #eef4f6 0%, #f8f3e7 55%, #f0e7d7 100%);
    position:relative;
    overflow:hidden;
  }
  header:before{
    content:"";
    position:absolute; inset:auto -10% -35% 15%;
    height:68%;
    background:linear-gradient(135deg,var(--teal),#17495a);
    transform:skewY(-7deg);
    opacity:.98;
  }
  .hero{
    width:min(1180px,94vw);
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:48px;
    align-items:center;
  }
  .eyebrow{
    display:inline-block;
    padding:7px 12px;
    border-radius:999px;
    background:rgba(185,47,57,.10);
    color:var(--red);
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    font-size:12px;
  }
  h1{font-size:clamp(42px,6.5vw,86px); line-height:.96; margin:18px 0 22px; color:var(--ink)}
  .hero p{font-size:clamp(18px,2vw,24px); color:#41515b; max-width:780px}
  .hero-card{
    background:rgba(255,255,255,.93);
    border:1px solid rgba(255,255,255,.8);
    padding:26px;
    border-radius:24px;
    box-shadow:var(--shadow);
    backdrop-filter:blur(8px);
  }
  .hero-card strong{color:var(--ink)}
  nav{
    position:sticky; top:0; z-index:20;
    display:flex; gap:10px; flex-wrap:wrap; align-items:center;
    padding:12px 18px;
    background:rgba(255,255,255,.94);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(10px);
  }
  nav a{
    text-decoration:none; color:var(--ink); font-weight:750; font-size:14px;
    padding:8px 11px; border-radius:10px;
  }
  nav a:hover{background:var(--soft)}
  .print{
    margin-left:auto; border:0; border-radius:10px; padding:9px 13px;
    background:var(--ink); color:white; font-weight:800; cursor:pointer;
  }
  main{width:min(1180px,92vw); margin:0 auto; padding:54px 0 100px}
  section{margin:0 0 72px}
  .section-kicker{color:var(--red); text-transform:uppercase; letter-spacing:.08em; font-weight:850; font-size:12px}
  h2{font-size:clamp(30px,4vw,52px); line-height:1.05; color:var(--ink); margin:8px 0 20px}
  h3{font-size:24px; color:var(--ink); margin:6px 0 10px}
  .lead{font-size:20px; color:#4a5962; max-width:920px}
  .grid{display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
  .card{
    background:var(--white);
    border:1px solid #e5e8ea;
    border-radius:18px;
    padding:22px;
    box-shadow:0 8px 22px rgba(18,56,74,.05);
  }
  .span-4{grid-column:span 4}.span-6{grid-column:span 6}.span-8{grid-column:span 8}.span-12{grid-column:span 12}
  .tag{display:inline-block; font-size:12px; font-weight:850; padding:6px 9px; border-radius:999px; background:#eef4f6; color:var(--teal); margin:0 6px 6px 0}
  .callout{
    border-left:6px solid var(--orange);
    background:#fff7e6;
    border-radius:14px;
    padding:18px 20px;
    font-size:20px;
  }
  .quote{
    background:var(--ink); color:white;
    border-radius:22px; padding:28px;
    font-size:clamp(24px,3vw,38px); line-height:1.18; font-weight:800;
  }
  .quote small{display:block; margin-top:12px; font-size:14px; font-weight:500; color:#d7e1e5}
  .ecosystem-wrap{
    background:linear-gradient(145deg,#133a4a,#1f6176);
    border-radius:28px; padding:32px; color:white; overflow:hidden;
  }
  .ecosystem{
    min-height:540px; position:relative; margin:auto; max-width:940px;
  }
  .center{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:220px; height:220px; border-radius:50%;
    display:grid; place-items:center; text-align:center;
    background:var(--orange); color:#172a33; font-weight:900; font-size:25px;
    box-shadow:0 14px 30px rgba(0,0,0,.18);
  }
  .node{
    position:absolute; width:180px; min-height:96px;
    border-radius:18px; padding:15px; display:grid; place-items:center; text-align:center;
    background:white; color:var(--ink); font-weight:850; box-shadow:0 10px 24px rgba(0,0,0,.14);
  }
  .node small{display:block; font-weight:600; color:#66727a}
  .n1{left:8%; top:8%}.n2{right:8%; top:8%}.n3{left:2%; top:42%}.n4{right:2%; top:42%}.n5{left:18%; bottom:3%}.n6{right:18%; bottom:3%}
  .ring-label{
    text-align:center; margin-top:8px; font-weight:800; color:#cfe0e7;
  }
  details{background:white; border:1px solid var(--line); border-radius:14px; margin:10px 0; overflow:hidden}
  summary{cursor:pointer; padding:16px 18px; font-weight:850; color:var(--ink); list-style:none}
  summary::-webkit-details-marker{display:none}
  details .body{padding:0 18px 18px}
  .route-builder{
    display:grid; grid-template-columns:1fr 1fr; gap:22px;
    background:white; border:1px solid var(--line); border-radius:22px; padding:24px;
  }
  .checks label{display:flex; gap:10px; align-items:center; padding:8px 4px; cursor:pointer}
  .checks input{width:18px;height:18px}
  .route{
    background:var(--soft); border-radius:16px; padding:18px; min-height:250px;
  }
  .route-step{
    display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #dbe3e6
  }
  .dot{width:12px;height:12px;border-radius:50%;background:var(--orange);flex:0 0 auto}
  table{width:100%; border-collapse:collapse; background:white; border-radius:16px; overflow:hidden; box-shadow:0 8px 22px rgba(18,56,74,.05)}
  th,td{padding:15px 16px; vertical-align:top; border-bottom:1px solid #e9ecee; text-align:left}
  th{background:#eef3f5; color:var(--ink); font-size:13px; text-transform:uppercase; letter-spacing:.05em}
  tr:last-child td{border-bottom:0}
  .mode{border-top:5px solid var(--teal)}
  .mode.onsite{border-top-color:var(--red)}
  .small{font-size:13px;color:#66727a}
  footer{background:#102f3c; color:#dce6ea; padding:34px 20px; text-align:center}
  code{background:#eef2f4;padding:2px 6px;border-radius:6px}
  @media (max-width:820px){
    .hero{grid-template-columns:1fr}
    .span-4,.span-6,.span-8{grid-column:span 12}
    .route-builder{grid-template-columns:1fr}
    .ecosystem{min-height:760px}
    .center{width:180px;height:180px}
    .node{width:150px;min-height:88px;font-size:14px}
    .n1{left:3%;top:5%}.n2{right:3%;top:5%}.n3{left:0;top:35%}.n4{right:0;top:35%}.n5{left:6%;bottom:2%}.n6{right:6%;bottom:2%}
  }
  @media print{
    nav,.print{display:none!important}
    body{background:white}
    header{min-height:auto; page-break-after:always}
    section{break-inside:avoid}
    details{break-inside:avoid}
  }


/* Innconcepts CI additions - based on Corporate Design Manual */
:root{
  --ic-blue:#00415A;
  --ic-grey:#505F69;
  --ic-orange:#F5AA1E;
  --ic-red:#B4141E;
}
.brandbar{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px clamp(18px,4vw,54px);background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)
}
.brandbar img{display:block;max-height:44px;width:auto;object-fit:contain}
.brandbar .ic-logo{max-width:215px}.brandbar .oracle-logo{max-width:235px}
.toolbar{
  position:sticky;top:73px;z-index:55;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:10px clamp(18px,4vw,54px);background:rgba(247,248,248,.97);border-bottom:1px solid var(--line)
}
.toolbar a,.toolbar button{border:0;border-radius:10px;padding:8px 11px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.toolbar a{color:var(--ic-blue);text-decoration:none;background:transparent}.toolbar a:hover{background:#EAF1F4}
.toolbar button{background:var(--ic-blue);color:white}.toolbar button.secondary{background:white;color:var(--ic-blue);border:1px solid var(--line)}
.toolbar .status{margin-left:auto;font-size:12px;color:var(--muted)}
.edit-hint{display:none;margin:0 0 22px;padding:12px 14px;background:#FFF3DA;border:1px solid #F5D89A;border-radius:12px;color:#5D4B20}
body.editing .edit-hint{display:block}
.editing [contenteditable="true"]{outline:2px dashed var(--ic-orange);outline-offset:4px;border-radius:4px}
.hero{background:radial-gradient(circle at 82% 20%, rgba(245,170,30,.20), transparent 23%),linear-gradient(135deg,#FFFFFF 0%,#F7F9F9 55%,#EDF3F5 100%)}
.quote{background:var(--ic-blue)}
.ecosystem-wrap{background:linear-gradient(145deg,#003A50,#00506D)}
.center{background:var(--ic-orange)}
@media(max-width:820px){.brandbar .ic-logo{max-width:150px}.brandbar .oracle-logo{max-width:175px}.toolbar{top:66px}}
@media print{.brandbar{position:static}.toolbar{display:none!important}.edit-hint{display:none!important}}