.elementor-24903 .elementor-element.elementor-element-b69633b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-24903 .elementor-element.elementor-element-0d86f42 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for container, class: .elementor-element-b69633b */:root{
    --orange:#E4590C;         /* KGRN main orange — PLACEHOLDER, confirm exact brand hex */
    --orange-deep:#B8420A;
    --secondary:#FFFAF7;      /* secondary color, as specified */
    --card:#FFFFFF;
    --line:#F0E1D2;
    --ink:#2B2118;            /* dark warm text color — never pure black */
    --slate:#7A6A58;
    --shadow: 0 20px 40px -20px rgba(43,33,24,0.22);
    --radius: 14px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--secondary); color:var(--ink);
    font-family:'Montserrat',sans-serif; -webkit-font-smoothing:antialiased; line-height:1.6;
  }
  h1,h2,h3,h4{ font-family:'Montserrat',sans-serif; letter-spacing:-0.01em; margin:0; color:var(--ink); font-weight:700; }
  .mono{ font-family:'Montserrat',sans-serif; letter-spacing:0.06em; font-weight:600; }
  a{color:inherit;}
  .body-link{ color:var(--orange-deep); text-decoration:underline; text-decoration-color:var(--line); font-weight:600; }
  .body-link:hover{ text-decoration-color:var(--orange-deep); }
  img{max-width:100%;display:block;}
  svg{display:block;}
  .wrap{max-width:1170px;margin:0 auto;padding:0 24px;}
  section{padding:64px 0;}
  @media (max-width:720px){ section{padding:44px 0;} }
  .icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

  /* ---------- Top bar ---------- */
  .topbar{ background:var(--orange); color:#fff; font-size:13.5px; }
  .topbar .wrap{ display:flex;align-items:center;justify-content:space-between; padding-top:10px;padding-bottom:10px; }
  .topbar .brand{font-weight:700;letter-spacing:0.02em;color:#fff;}
  .topbar .contact{display:flex;gap:18px;align-items:center;color:#FFE6D6;}
  .topbar .contact a{text-decoration:none;color:#fff;}
  .topbar .chip{ background:rgba(255,255,255,0.22);color:#fff;padding:3px 10px;border-radius:100px; font-size:11.5px;font-weight:600; }
  @media (max-width:640px){ .topbar .contact span:first-child{display:none;} }

  /* ---------- Hero ---------- */
  .hero{
    position:relative; overflow:hidden; padding:56px 0 48px;
    background: radial-gradient(ellipse 700px 420px at 82% -10%, rgba(228,89,12,0.08) 0%, transparent 60%), var(--secondary);
    border-bottom:1px solid var(--line);
  }
  .hero-grid{ display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center; }
  .hero .wrap{ max-width:1170px; }
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr;}
    .hero-grid .hero3d-card{margin-top:28px;}
  }
  .hero-top{ max-width:820px;margin-bottom:32px; }
  .hero3d-card.full{ width:100%;max-width:none; }
  .hero3d-card.medium{ padding:20px 18px 22px;width:100%;max-width:none; }
  .hero3d-card.medium .fc-legend{ font-size:11px;margin-top:12px; }
  .hero3d-card.medium .fivec-caption{ font-size:12px;margin-top:12px; }
  .hero3d-card.medium .hero3d-cta{ font-size:14px;padding:11px 20px;margin-top:14px; }

  /* Compact diagram overrides for the smaller hero placement */
  .fc-diagram.compact .fc-head{ font-size:8.5px;padding:4px 6px;line-height:1.2; }
  .fc-diagram.compact .fc-body{ font-size:7.5px;padding:3px 6px;line-height:1.25; }
  .fc-diagram.compact .fc-badge{ font-size:6.5px;padding:1px 4px; }
  .fc-diagram.compact .fc-mini-text{ font-size:6.5px; }
  .fc-diagram.compact .fc-mini-sub{ font-size:5.5px; }
  .fc-diagram.compact .fc-cyl-title{ font-size:8px; }
  .fc-diagram.compact .fc-cyl-sub{ font-size:5.5px; }
  .fc-diagram.compact .fc-caption{ font-size:6.5px; }
  .fc-diagram.compact .fc-einv-tag{ font-size:6.5px; }
  .fc-diagram.compact .fc-uae-label{ font-size:6.5px; }
  .fc-diagram.compact .fc-tag-label{ font-size:6.5px;padding:2px 4px; }
  .fc-diagram.compact .fc-tag-label.small:not(.mls){ display:none; }
  .fc-diagram.compact .fc-tag-label.mls{ font-size:7.5px; }

  .eyebrow{
    display:inline-flex;align-items:center;gap:8px; background:#fff;border:1px solid var(--line); padding:6px 14px;border-radius:100px;
    font-size:13px;font-weight:600;color:var(--orange-deep); margin-bottom:18px;
  }
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:#2E7D46;}

  .hero h1{ font-size:42px;font-weight:800;line-height:1.12; margin-bottom:16px; }
  .hero h1 em{ font-style:normal;color:var(--orange); }
  @media (max-width:640px){ .hero h1{font-size:30px;} }
  .hero p.lead{ font-size:17px;color:var(--slate);max-width:540px;margin-bottom:22px; }

  /* Hero flow teaser: Oracle ERP -> KGRN ASP -> Peppol -> FTA */
  .hero-flow{
    display:flex;align-items:center;gap:0; background:var(--orange); border-radius:12px; padding:16px 18px;
    margin-bottom:22px; max-width:560px; position:relative; overflow:hidden;
  }
  .hero-flow .hf-node{ display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;position:relative;z-index:1; }
  .hero-flow .hf-dot{ width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.35);border:2px solid rgba(255,255,255,0.5); }
  .hero-flow .hf-node.on .hf-dot{ background:#fff;border-color:#fff; box-shadow:0 0 0 5px rgba(255,255,255,0.25); }
  .hero-flow .hf-label{ font-size:10.5px;font-weight:600;color:rgba(255,255,255,0.65);text-align:center; }
  .hero-flow .hf-node.on .hf-label{ color:#fff; }
  .hero-flow .hf-line{ position:absolute;top:21px;left:6%;right:6%;height:2px;background:rgba(255,255,255,0.25); }
  .hero-flow .hf-progress{ position:absolute;top:21px;left:6%;height:2px;width:0%; background:#fff; animation:hfFill 6s ease-in-out infinite; }
  @keyframes hfFill{ 0%{width:0%;} 45%{width:88%;} 80%{width:88%;} 100%{width:0%;} }

  .deadline-strip{ display:inline-flex;align-items:center;gap:10px; background:var(--ink);color:#fff; padding:9px 16px;border-radius:10px; font-size:13px;margin-bottom:22px; }
  .deadline-strip .mono{color:#FFC79B;font-weight:600;}

  .trust-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
  .trust-pill{ display:flex;align-items:center;gap:8px; background:#fff;border:1px solid var(--line);border-radius:10px; padding:9px 13px;font-size:12.5px;font-weight:600;color:var(--slate); }
  .trust-pill b{color:var(--ink);}

  /* ---------- Form card ---------- */
  .form-card{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow); padding:26px 26px 22px; position:relative; }
  .form-card .badge-top{ position:absolute;top:-13px;left:24px; background:var(--orange);color:#fff; font-size:11.5px;font-weight:700;letter-spacing:0.03em; padding:5px 12px;border-radius:100px; text-transform:uppercase; }
  .form-card h3{font-size:19px;margin-bottom:4px;padding-top:6px;}
  .form-card .sub{font-size:13.5px;color:var(--slate);margin-bottom:18px;font-weight:400;}

  /* ---------- 5-Corner Model diagram (reusable: hero + full section) ---------- */
  .hero3d-card{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow); padding:22px 20px 24px; position:relative; text-align:center;
  }
  .h3-badge{
    display:inline-block;background:#FDF1E7;color:var(--orange-deep);font-size:12px;font-weight:700;
    padding:5px 12px;border-radius:100px;margin-bottom:16px;letter-spacing:0.02em;
  }
  .fivec-wrap{ width:100%;max-width:460px;aspect-ratio:460/280;margin:0 auto;perspective:900px; }
  .fivec-scene{
    position:relative;width:100%;height:100%;transform-style:preserve-3d;
    transform:rotateX(9deg) rotateY(-5deg);transition:transform .25s ease-out;
  }
  .fivec-svg{ position:absolute;inset:0;width:100%;height:100%;z-index:0; }
  .fivec-line{ stroke-dasharray:7 6; animation:fivecDash 1s linear infinite; }
  @keyframes fivecDash{ to{ stroke-dashoffset:-26; } }
  .fivec-line-dash{ }
  .corner-node{
    position:absolute;border-radius:12px;background:linear-gradient(160deg,#ffffff,#FFF3EA);
    border:1px solid var(--line); box-shadow:0 14px 26px -14px rgba(228,89,12,0.35);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;z-index:1;
    transform:translateZ(var(--z,0px)); animation:fivecFloat 4.5s ease-in-out infinite; animation-delay:var(--delay,0s);
    padding:4px;
  }
  .corner-node.highlight{ background:linear-gradient(160deg,#fff,#FFE3CC); border-color:var(--orange); }
  .corner-node.fta{ background:linear-gradient(160deg,#fff,#FDF1E7); }
  .cn-badge{
    font-size:10px;font-weight:800;color:#fff;background:var(--orange);border-radius:100px;
    padding:1px 8px;line-height:1.6;
  }
  .cn-label{ font-size:10px;font-weight:700;color:var(--ink);text-align:center;line-height:1.25;padding:0 4px; }
  .hub-node{
    position:absolute;border-radius:50%;background:var(--orange);color:#fff;z-index:1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    box-shadow:0 10px 20px -10px rgba(228,89,12,0.5);
    transform:translateZ(var(--z,0px)); animation:fivecFloat 4.5s ease-in-out infinite; animation-delay:var(--delay,0s);
  }
  .hub-label{ font-size:8.5px;font-weight:700; }
  @keyframes fivecFloat{
    0%,100%{ transform:translateZ(var(--z,0px)) translateY(0px); }
    50%{ transform:translateZ(var(--z,0px)) translateY(-6px); }
  }
  .fivec-caption{ margin-top:14px;font-size:13px;color:var(--slate);font-weight:500; }
  .fivec-caption b{color:var(--orange-deep);}
  .hero3d-cta{
    display:inline-block;margin-top:16px;background:var(--orange);color:#fff;font-weight:700;font-size:14.5px;
    padding:12px 22px;border-radius:9px;text-decoration:none;transition:background .15s ease, transform .15s ease;
  }
  .hero3d-cta:hover{background:var(--orange-deep);transform:translateY(-1px);}
  @media (max-width:520px){
    .fivec-scene{transform:rotateX(5deg) rotateY(-2deg);}
    .cn-badge{font-size:9px;padding:1px 6px;}
    .cn-label{font-size:8.5px;}
    .hub-label{font-size:7.5px;}
  }
  @media (prefers-reduced-motion: reduce){
    .corner-node, .hub-node{animation:none;}
  }

  /* Larger standalone instance used in the dedicated 5-Corner Model section */
  .fivec-wrap.large{ max-width:640px; }

  /* ---------- Full faithful 5-corner model diagram (from reference image) ---------- */
  .fc-diagram{ margin:8px auto 0; width:100%; max-width:100%; }
  .fc-canvas{ position:relative; width:100%; max-width:100%; aspect-ratio:1000/560; margin:0 auto; }
  .fc-svg{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
  .fc-line-blue{ stroke:#3B6FB0; stroke-width:2.2; }
  .fc-line-green{ stroke:#6FA179; stroke-width:2; stroke-dasharray:5 5; }
  .fc-line-orange{ stroke:var(--orange); stroke-width:2.2; }
  .fc-line-blue.thick{ stroke-width:2.6; }

  .fc-group-border{ position:absolute; border:2px dashed #9BC0A2; border-radius:16px; z-index:0; }

  .fc-card{
    position:absolute; background:#fff; border:1px solid var(--line); border-radius:10px;
    box-shadow:0 10px 22px -14px rgba(43,33,24,0.25); overflow:hidden; z-index:1;
    display:flex; flex-direction:column;
  }
  .fc-card.alt{ }
  .fc-head{
    background:var(--orange); color:#fff; font-size:clamp(9px,1.1vw,13px); font-weight:700;
    padding:6px 8px; display:flex; align-items:center; justify-content:space-between; gap:4px;
  }
  .fc-head-title{ flex:1 1 auto; min-width:0; }
  .fc-badge{
    flex:0 0 auto; white-space:nowrap;
    background:#fff; color:var(--orange-deep); border:1px solid var(--orange-deep);
    font-size:8px; font-weight:800; padding:1px 5px; border-radius:4px;
  }
  .fc-body{ padding:6px 8px; font-size:clamp(8px,1vw,11.5px); color:var(--slate); font-weight:400; line-height:1.35; flex:1; }
  .fc-body.center{ text-align:center; display:flex; align-items:center; justify-content:center; }

  .fc-mini{
    position:absolute; background:#fff; border:1px solid var(--line); border-radius:10px; z-index:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    box-shadow:0 8px 16px -10px rgba(43,33,24,0.2); text-align:center; padding:4px;
  }
  .fc-mini-icon{ color:#3B6FB0; }
  .fc-mini-text{ font-size:clamp(7px,0.9vw,10px); font-weight:700; color:var(--ink); }
  .fc-mini-sub{ font-size:clamp(5.5px,0.7vw,8px); font-weight:700; color:var(--slate); letter-spacing:0.05em; }

  .fc-tag-label{
    position:absolute; background:#fff; border:1px solid var(--line); border-radius:6px;
    font-size:clamp(7px,0.85vw,10.5px); font-weight:600; color:var(--slate); text-align:center;
    padding:3px 6px; z-index:1;
  }
  .fc-tag-label.small{ background:none; border:none; font-weight:700; color:#8FA893; letter-spacing:0.06em; text-transform:uppercase; }
  .fc-tag-label.mls{ color:#3B6FB0; font-weight:800; background:none; border:none; }

  .fc-cylinder{
    position:absolute; background:#fff; border:2px solid var(--orange); border-radius:50%/18% 18% 10% 10%;
    z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  }
  .fc-cyl-title{ font-size:clamp(8px,1vw,12px); font-weight:800; color:var(--ink); }
  .fc-cyl-sub{ font-size:clamp(6px,0.75vw,9px); color:var(--slate); text-align:center; line-height:1.2; }

  .fc-einv{
    position:absolute; background:var(--orange); border-radius:50%; z-index:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
    box-shadow:0 10px 20px -8px rgba(228,89,12,0.55);
  }
  .fc-einv-tag{ font-size:clamp(7px,0.8vw,9px); font-weight:800; color:#fff; }

  .fc-caption{
    position:absolute; font-size:clamp(7px,0.85vw,10.5px); font-weight:600; color:var(--orange-deep);
    text-align:center; z-index:1;
  }

  .fc-bldg{ position:absolute; color:var(--orange); z-index:1; }
  .fc-bldg .icon{ width:100%; height:100%; }
  .fc-uae-label{
    position:absolute; background:var(--orange); color:#fff; font-size:clamp(7px,0.85vw,10px);
    font-weight:800; border-radius:6px; display:flex; align-items:center; justify-content:center; z-index:1;
  }

  .fc-legend{ margin-top:16px; font-size:12.5px; color:var(--slate); text-align:center; font-weight:500; }
  .fc-note{ margin-top:8px; font-size:13px; color:var(--slate); text-align:center; font-weight:400; max-width:760px; margin-left:auto; margin-right:auto; }
  .lg-dot{ display:inline-block; width:16px; height:2px; margin:0 6px 0 14px; vertical-align:middle; }
  .lg-dot.blue{ background:#3B6FB0; margin-left:0; }
  .lg-dot.green{ background:#6FA179; }

  .corner-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px; }
  @media (max-width:860px){ .corner-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:600px){ .corner-grid{grid-template-columns:1fr;} }
  .corner-card{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px; }
  .corner-tag{ display:block;font-size:12px;font-weight:700;color:var(--orange-deep);margin-bottom:8px; }
  .corner-card p{ margin:0;font-size:13.5px;color:var(--slate);font-weight:400; }

  .corner2-block{
    margin-top:36px;background:#FDF6F0;border:1px solid var(--line);border-radius:var(--radius);
    padding:28px 26px;
  }
  .corner2-block h3{font-size:19px;margin-bottom:8px;}
  .corner2-block > p{color:var(--slate);font-size:14.5px;margin:0 0 18px;font-weight:400;}
  .corner2-block .checklist-grid{margin-top:0;}
  .corner2-block .checklist-item{border-bottom:1px solid var(--line);}

  .field{margin-bottom:12px;}
  .field label{display:block;font-size:12.5px;font-weight:600;color:var(--slate);margin-bottom:5px;}
  .field input, .field select{ width:100%;padding:10px 12px;border-radius:8px; border:1px solid var(--line);background:var(--secondary); font-family:'Montserrat',sans-serif;font-size:14px;color:var(--ink); }
  .field input:focus, .field select:focus{ outline:2px solid var(--orange);outline-offset:1px;border-color:var(--orange); }
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .submit-btn{ width:100%;padding:13px 16px;margin-top:6px; background:var(--orange);color:#fff;border:none;border-radius:9px; font-weight:700;font-size:15px; cursor:pointer;transition:background .15s ease, transform .15s ease; }
  .cta-btn-link{ display:block;text-align:center;text-decoration:none; }
  .cta-btn-link:hover{ background:var(--orange-deep); }
  .form-card.cta-only{ padding-bottom:24px; }
  .submit-btn:hover{background:var(--orange-deep);transform:translateY(-1px);}
  .form-foot{font-size:11.5px;color:var(--slate);text-align:center;margin-top:10px;}
  .form-foot strong{color:var(--ink);}

  /* ---------- Phrase breaker sections ---------- */
  .phrase{ text-align:center;padding:48px 0; }
  .phrase .wrap{max-width:780px;}
  .phrase p{ font-weight:800;font-size:27px;line-height:1.35;color:var(--ink);margin:0; }
  .phrase p em{font-style:normal;color:var(--orange);}
  .phrase.tinted{ background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line); }

  /* ---------- Section headers ---------- */
  .section-eyebrow{ font-size:12.5px;font-weight:700; color:var(--orange-deep);text-transform:uppercase;letter-spacing:0.06em; margin-bottom:10px; }
  .section-head{max-width:660px;margin-bottom:34px;}

  /* ---------- Decorative "define" banner (background icons behind text) ---------- */
  .define-banner{
    position:relative; overflow:hidden; border-radius:20px;
    background:linear-gradient(155deg, #FDF1E7 0%, var(--secondary) 55%, #FDF1E7 100%);
    border:1px solid var(--line);
    padding:44px 32px;
  }
  @media (max-width:640px){ .define-banner{padding:32px 20px;} }
  .define-content{ position:relative; z-index:1; }
  .db-icon{
    position:absolute; stroke:var(--orange); fill:none; stroke-width:1.2; opacity:0.09; z-index:0;
    pointer-events:none;
  }
  .db-1{ width:150px;height:150px; top:-30px; left:-20px; transform:rotate(-8deg); }
  .db-2{ width:110px;height:110px; top:60%; left:6%; transform:rotate(6deg); }
  .db-3{ width:130px;height:130px; top:-20px; right:8%; transform:rotate(10deg); }
  .db-4{ width:170px;height:170px; bottom:-40px; right:-30px; transform:rotate(-6deg); }
  .db-5{ width:100px;height:100px; bottom:8%; left:38%; transform:rotate(4deg); }
  .db-6{ width:90px;height:90px; top:20%; right:32%; transform:rotate(-10deg); }
  @media (max-width:780px){
    .db-1,.db-3,.db-6{ display:none; }
    .db-2,.db-4,.db-5{ opacity:0.07; }
  }
  .section-head h2{font-size:28px;font-weight:800;line-height:1.22;}
  .section-head p{color:var(--slate);font-size:15.5px;margin-top:10px;font-weight:400;}

  /* ---------- Value cards ---------- */
  .value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  @media (max-width:860px){ .value-grid{grid-template-columns:1fr;} }
  .value-card{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:24px; }
  .value-card .num{ font-size:12.5px;font-weight:700; color:var(--orange);margin-bottom:12px;display:block;letter-spacing:0.05em; }
  .value-card h3{font-size:17.5px;margin-bottom:8px;}
  .value-card p{font-size:14px;color:var(--slate);margin:0;font-weight:400;}

  /* ---------- Cost of waiting ---------- */
  .compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
  @media (max-width:780px){ .compare-grid{grid-template-columns:1fr;} }
  .compare-card{border-radius:var(--radius);padding:26px;border:1px solid var(--line);}
  .compare-card.wait{background:#fff;}
  .compare-card.start{background:var(--orange);color:#fff;}
  .compare-card h3{font-size:17px;margin-bottom:16px;}
  .compare-card.start h3{color:#fff;}
  .compare-card ul{margin:0;padding-left:20px;font-size:14px;}
  .compare-card.wait ul{color:var(--slate);}
  .compare-card.start ul{color:#FFE6D6;}
  .compare-card li{margin-bottom:10px;}
  .compare-card.start li::marker{color:#fff;}

  /* ---------- Storyboard (vector-animated, split) — renamed from "Storyboard" ---------- */
  .storyboard{ display:grid;grid-template-columns:0.85fr 1.15fr;gap:36px;align-items:stretch; }
  @media (max-width:900px){ .storyboard{grid-template-columns:1fr;} }

  .story-graphic{
    background:var(--orange);border-radius:20px;padding:30px 26px; display:flex;flex-direction:column;
    position:relative;overflow:hidden;
    background-image: radial-gradient(rgba(255,255,255,0.14) 1.5px, transparent 1.5px);
    background-size: 16px 16px;
  }
  .story-graphic::before{ content:""; position:absolute;inset:0; background:radial-gradient(ellipse 380px 280px at 15% 0%, rgba(255,255,255,0.18), transparent 60%); }
  .story-graphic-head{ position:relative;z-index:1;display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;padding:0 8px; }
  .story-graphic-head h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:0.05em;}
  .story-graphic-head .sg-count{color:rgba(255,255,255,0.75);font-size:12px;font-weight:600;}
  .story-line-wrap{position:relative;z-index:1;height:456px;}
  .story-vector{position:absolute;left:0;top:0;width:60px;height:100%;z-index:0;pointer-events:none;}
  .flow-path{stroke-dasharray:6 8;animation:flowDash 1.1s linear infinite;}
  @keyframes flowDash{ to{ stroke-dashoffset:-28; } }

  .story-node{ display:flex;align-items:center;gap:16px;min-height:76px;padding:0 8px;border-radius:10px;transition:background .3s ease;position:relative;z-index:1; }
  .story-node.active{background:rgba(255,255,255,0.16);}
  .story-node .sn-icon{
    width:44px;height:44px;flex-shrink:0;border-radius:50%;background:rgba(255,255,255,0.14);border:2px solid rgba(255,255,255,0.3);
    display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.75);transition:all .35s ease;
  }
  .story-node.active .sn-icon{ background:#fff;border-color:#fff;color:var(--orange); box-shadow:0 0 0 6px rgba(255,255,255,0.22); }
  .story-node .sn-text .sn-title{font-weight:700;font-size:14.5px;color:#fff;}
  .story-node .sn-text .sn-sub{font-size:12px;color:rgba(255,255,255,0.7);margin-top:2px;}
  .story-node.active .sn-text .sn-sub{color:rgba(255,255,255,0.95);}

  .story-content{display:flex;flex-direction:column;gap:10px;}
  .story-step{ border:1px solid var(--line);border-radius:12px;background:var(--card); padding:18px 20px;cursor:pointer;transition:border-color .25s ease, background .25s ease; }
  .story-step:hover{border-color:var(--orange);}
  .story-step.active{ border-color:var(--orange);background:#FFF3EA; }
  .story-step .st-head{display:flex;align-items:center;gap:12px;}
  .story-step .st-num{ font-weight:700;color:var(--orange);font-size:13px; }
  .story-step h4{font-size:16px;margin:0;}
  .story-step p{ font-size:13.5px;color:var(--slate);margin:8px 0 0 0;max-height:0;overflow:hidden;transition:max-height .25s ease;font-weight:400; }
  .story-step.active p{max-height:80px;}
  .story-cta{margin-top:6px;}
  .story-cta a{ display:inline-flex;align-items:center;gap:8px;color:var(--orange-deep);font-weight:700;font-size:14px; text-decoration:none;border-bottom:2px solid var(--line);padding-bottom:2px; }

  /* ---------- Relocated lead form section ---------- */
  .form-section{ background:#FDF6F0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
  .form-section-grid{ display:grid;grid-template-columns:1fr 0.9fr;gap:44px;align-items:center; }
  @media (max-width:900px){ .form-section-grid{grid-template-columns:1fr;} }
  .form-section h2{font-size:27px;margin-top:6px;}
  .form-section-sub{color:var(--slate);font-size:15.5px;margin:12px 0 20px;font-weight:400;}

  /* ---------- Readiness check checklist ---------- */
  .checklist-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;}
  @media (max-width:700px){ .checklist-grid{grid-template-columns:1fr;} }
  .checklist-item{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);}
  .checklist-item .ck-icon{ flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--orange);color:#fff; display:flex;align-items:center;justify-content:center; }
  .checklist-item p{margin:0;font-size:14.5px;color:var(--ink);font-weight:500;}

  /* ---------- Timeline / key facts table ---------- */
  .timeline-table{ width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; }
  .timeline-table th{ text-align:left;background:#FDF1E7;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--orange-deep);padding:14px 18px;border-bottom:1px solid var(--line); }
  .timeline-table td{ padding:16px 18px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink); }
  .timeline-table tr:last-child td{border-bottom:none;}
  .timeline-table td.date{font-weight:700;color:var(--orange-deep);white-space:nowrap;}
  @media (max-width:700px){ .timeline-table{font-size:13px;} .timeline-table th, .timeline-table td{padding:10px 12px;} }

  /* ---------- Oracle ERP environment cards ---------- */
  .env-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  @media (max-width:860px){ .env-grid{grid-template-columns:1fr;} }
  .env-card{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px; }
  .env-card .env-tag{ display:inline-block;font-size:11.5px;font-weight:700;color:var(--orange-deep);background:#FDF1E7;padding:3px 10px;border-radius:6px;margin-bottom:12px; }
  .env-card h3{font-size:16.5px;margin-bottom:8px;}
  .env-card p{font-size:13.5px;color:var(--slate);margin:0;font-weight:400;}

  /* ---------- Role-based section ---------- */
  .role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  @media (max-width:860px){ .role-grid{grid-template-columns:1fr;} }
  .role-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;}
  .role-card .role-tag{font-size:12px;font-weight:700;color:var(--orange-deep);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:10px;display:block;}
  .role-card p{margin:0;font-size:14.5px;color:var(--ink);font-weight:500;}

  /* ---------- Challenges (problem/solution) ---------- */
  .challenge-list{display:flex;flex-direction:column;gap:14px;}
  .challenge-item{ display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card); }
  @media (max-width:780px){ .challenge-item{grid-template-columns:1fr;} }
  .challenge-item .ch-problem, .challenge-item .ch-solution{padding:20px 22px;}
  .challenge-item .ch-problem{ background:#FBF3EC;border-right:1px solid var(--line); }
  @media (max-width:780px){ .challenge-item .ch-problem{border-right:none;border-bottom:1px solid var(--line);} }
  .ch-label{ font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:8px;display:block; }
  .ch-problem .ch-label{color:#A87A4A;}
  .ch-solution .ch-label{color:var(--orange-deep);}
  .challenge-item p{margin:0;font-size:14px;color:var(--ink);font-weight:400;}

  /* ---------- Value-added services ---------- */
  .vas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
  @media (max-width:900px){ .vas-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:640px){ .vas-grid{grid-template-columns:1fr;} }
  .vas-card{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px; }
  .vas-card .vas-icon{ width:38px;height:38px;border-radius:10px;background:#FDF1E7;color:var(--orange-deep); display:flex;align-items:center;justify-content:center;margin-bottom:14px; }
  .vas-card h3{font-size:16px;margin-bottom:8px;}
  .vas-card p{font-size:13.5px;color:var(--slate);margin:0;font-weight:400;}

  /* ---------- Implementation ---------- */
  .impl-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
  @media (max-width:780px){ .impl-grid{grid-template-columns:1fr;} }
  .impl-card{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:24px; }
  .impl-card .tag{ display:inline-block;font-size:11.5px;font-weight:700; color:#fff;background:var(--orange);padding:3px 10px;border-radius:6px;margin-bottom:14px; }
  .impl-card h3{font-size:18px;margin-bottom:10px;}
  .impl-card ul{margin:0;padding-left:18px;color:var(--slate);font-size:14px;font-weight:400;}
  .impl-card li{margin-bottom:6px;}

  /* ---------- Ongoing support ---------- */
  .support-flow{ display:flex;align-items:stretch;gap:0;position:relative; }
  @media (max-width:860px){ .support-flow{flex-direction:column;gap:14px;} }
  .support-card{ flex:1;background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:22px 20px;position:relative; }
  .support-card + .support-card{margin-left:-1px;}
  .support-card .sc-tag{ font-size:11px;font-weight:700;color:var(--orange-deep);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:8px;display:block; }
  .support-card h3{font-size:16.5px;margin-bottom:8px;}
  .support-card p{font-size:13.5px;color:var(--slate);margin:0;font-weight:400;}
  .support-arrow{ display:flex;align-items:center;justify-content:center;color:var(--orange);flex:0 0 30px; }
  @media (max-width:860px){ .support-arrow{transform:rotate(90deg);flex:none;height:20px;} }

  /* ---------- Credibility (elevated) ---------- */
  .cred{ background:var(--orange); color:#fff; position:relative; }
  .cred .section-eyebrow{color:#FFE6D6;}
  .cred .section-head h2{color:#fff;}
  .cred .section-head p{color:#FFE6D6;}
  .cred-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:rgba(255,255,255,0.25);border-radius:16px;overflow:hidden;}
  .cred-item{ background:var(--orange-deep);padding:26px 20px;text-align:left; }
  .cred-item .ci-icon{ color:#FFE6D6;margin-bottom:14px; }
  .cred-item .big{ font-weight:800;font-size:31px;color:#fff; }
  .cred-item .lab{font-size:12.5px;color:#FFE6D6;margin-top:4px;}

  /* ---------- FAQ ---------- */
  .faq-item{border-bottom:1px solid var(--line);padding:18px 0;}
  .faq-q{ display:flex;justify-content:space-between;align-items:center;cursor:pointer; font-weight:700;font-size:15.5px; }
  .faq-q .plus{color:var(--orange);font-size:20px;transition:transform .2s ease;}
  .faq-item.open .faq-q .plus{transform:rotate(45deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;font-size:14.5px;color:var(--slate);font-weight:400;}
  .faq-item.open .faq-a{max-height:220px;padding-top:10px;}

  /* ---------- Final CTA ---------- */
  .final-cta{ background:linear-gradient(135deg, var(--orange-deep), var(--orange)); border-radius:20px;margin:0 24px;padding:44px 32px;color:#fff;text-align:center; }
  @media (max-width:720px){ .final-cta{margin:0 12px;padding:34px 20px;} }
  .final-cta h2{color:#fff;font-size:27px;margin-bottom:12px;}
  .final-cta p{color:#FFE6D6;font-size:15px;margin-bottom:22px;font-weight:400;}
  .final-cta a.btn{ display:inline-block;background:#fff;color:var(--orange-deep); font-weight:700;padding:13px 28px;border-radius:9px; text-decoration:none; }

  footer{background:var(--ink);color:#D9CBBC;padding:28px 0;font-size:13px;}
  footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;align-items:center;}
  footer strong{color:#fff;}

  @media (prefers-reduced-motion: reduce){
    .hero-flow .hf-progress{animation:none;width:88%;}
    .flow-path{animation:none;}
  }
  /* ---------- Hero: cinematic invoice-journey storyboard ---------- */
  .zh-stage{ position:relative; width:100%; aspect-ratio:560/300; margin-top:4px; }
  .zh-scene{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; pointer-events:none;
  }
  .zh-scene.active{ opacity:1; transform:translateY(0); }
  .zh-caption{ margin-top:14px; font-size:13px; color:var(--slate); text-align:center; font-weight:500; }

  /* Scene 1 & loop: ERP invoice card */
  .zh-erp-window{
    width:88%; max-width:340px; background:var(--card); border:1px solid var(--line); border-radius:12px;
    overflow:hidden; box-shadow:0 14px 30px -16px rgba(43,33,24,0.25);
  }
  .zh-erp-bar{ display:flex; align-items:center; gap:5px; padding:8px 12px; background:var(--secondary); border-bottom:1px solid var(--line); }
  .zh-dot{ width:7px;height:7px;border-radius:50%; background:var(--line); }
  .zh-erp-name{ margin-left:auto; font-size:11px; font-weight:700; color:var(--slate); }
  .zh-inv-card{ padding:16px 18px 18px; }
  .zh-inv-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
  .zh-inv-id{ font-size:13.5px; font-weight:700; color:var(--ink); }
  .zh-badge{ font-size:10.5px; font-weight:700; background:#FDF1E7; color:var(--orange-deep); padding:3px 9px; border-radius:100px; white-space:nowrap; }
  .zh-inv-amount{ font-size:25px; font-weight:800; color:var(--orange); margin-bottom:14px; }
  .zh-btn-post{
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    background:var(--orange); color:#fff; font-weight:700; font-size:13px; padding:9px 18px; border-radius:8px;
  }
  .zh-btn-ring{ position:absolute; inset:-4px; border-radius:12px; border:2px solid var(--orange); opacity:0; }
  .zh-scene.active .zh-btn-ring{ animation:zhRing 1.3s ease-out 0.9s; }
  .zh-scene.active .zh-btn-post{ animation:zhPress 1.3s ease-out 0.9s; }
  @keyframes zhRing{ 0%{opacity:0.7;transform:scale(0.9);} 100%{opacity:0;transform:scale(1.3);} }
  @keyframes zhPress{ 0%,100%{transform:scale(1);} 15%{transform:scale(0.94);} 30%{transform:scale(1);} }

  /* Scene 2: KGRN processing checklist */
  .zh-kgrn-panel{
    width:88%; max-width:340px; background:var(--card); border:1px solid var(--line); border-radius:12px;
    padding:18px 20px; box-shadow:0 14px 30px -16px rgba(43,33,24,0.2);
  }
  .zh-kgrn-label{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; color:var(--orange-deep); margin-bottom:14px; }
  .zh-check-list{ display:flex; flex-direction:column; gap:12px; }
  .zh-check{
    display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:var(--slate);
    opacity:0; transform:translateX(-6px);
  }
  .zh-scene.active .zh-check{ animation:zhCheckIn .5s ease forwards; }
  .zh-scene.active .zh-check:nth-child(1){ animation-delay:0.1s; }
  .zh-scene.active .zh-check:nth-child(2){ animation-delay:0.7s; }
  .zh-scene.active .zh-check:nth-child(3){ animation-delay:1.3s; }
  @keyframes zhCheckIn{ to{ opacity:1; transform:translateX(0); color:var(--ink); } }
  .zh-check-dot{
    width:20px;height:20px;flex-shrink:0;border-radius:50%; background:var(--line);
    display:flex;align-items:center;justify-content:center;
  }
  .zh-scene.active .zh-check-dot{ animation:zhDotFill .3s ease forwards; }
  .zh-check:nth-child(1) .zh-check-dot{ animation-delay:0.45s !important; }
  .zh-check:nth-child(2) .zh-check-dot{ animation-delay:1.05s !important; }
  .zh-check:nth-child(3) .zh-check-dot{ animation-delay:1.65s !important; }
  @keyframes zhDotFill{ to{ background:var(--orange); } }

  /* Scene 3: two paths open */
  .zh-split{ position:relative; width:100%; height:100%; }
  .zh-split-node{
    position:absolute; left:5%; top:50%; transform:translateY(-50%); background:var(--orange); color:#fff;
    font-size:11px; font-weight:700; text-align:center; border-radius:50%; width:72px;height:72px;
    display:flex;align-items:center;justify-content:center; line-height:1.25; z-index:1;
    box-shadow:0 10px 20px -8px rgba(228,89,12,0.5);
  }
  .zh-split-svg{ position:absolute; inset:0; width:100%; height:100%; }
  .zh-split-label{
    position:absolute; font-size:11.5px; font-weight:700; color:var(--ink); background:#fff;
    border:1px solid var(--line); padding:4px 10px; border-radius:6px; white-space:nowrap;
  }
  .zh-label-top{ right:2%; top:10%; }
  .zh-label-bottom{ right:2%; bottom:10%; }

  /* Scene 4: delivery statuses */
  .zh-delivery-grid{ display:flex; flex-direction:column; gap:10px; width:88%; max-width:320px; }
  .zh-status-card{
    display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--card);
    border:1px solid var(--line); border-radius:10px; padding:11px 15px;
    opacity:0; transform:translateY(6px);
  }
  .zh-scene.active .zh-status-card{ animation:zhSlideUp .5s ease forwards; }
  .zh-status-card:nth-child(1){ animation-delay:0.1s; }
  .zh-status-card:nth-child(2){ animation-delay:0.5s; }
  .zh-status-card:nth-child(3){ animation-delay:0.9s; }
  @keyframes zhSlideUp{ to{ opacity:1; transform:translateY(0); } }
  .zh-status-card.highlight{ border-color:var(--orange); background:#FFF8F1; }
  .zh-status-tag{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; color:var(--orange-deep); }
  .zh-status-text{ font-size:13px; font-weight:600; color:var(--ink); }
  .zh-status-text::after{ content:" \2713"; color:#2E7D46; }

  @media (max-width:520px){
    .zh-inv-amount{ font-size:20px; }
    .zh-split-node{ width:60px;height:60px;font-size:10px; }
    .zh-split-label{ font-size:10px;padding:3px 7px; }
  }
  @media (prefers-reduced-motion: reduce){
    .zh-scene.active .zh-btn-ring, .zh-scene.active .zh-btn-post,
    .zh-scene.active .zh-check, .zh-scene.active .zh-check-dot,
    .zh-scene.active .zh-status-card{ animation:none; opacity:1; transform:none; }
  }
  
  .final-cta {
    max-width: 1170px;
    margin-left: auto !important;
    margin-right: auto !important;
}/* End custom CSS */