/* secautomations — v5 dark */
@font-face{font-family:'Ticketing';src:url('fonts/ticketing.otf') format('opentype'),url('fonts/ticketing.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Compagnon';src:url('fonts/compagnon-medium.otf') format('opentype');font-weight:400 500;font-style:normal;font-display:swap}
:root{
  --bg:#0A0C10; --bg2:#0D1015; --panel:#10141B; --panel2:#141922; --line:#1E242E; --line2:#2A3240;
  --ink:#F3F5F7; --body:#A3ACB8; --mute:#6B7584;
  --mint:#00E5A0; --mint2:#5CFFC7; --mint-dim:#0FB07E; --mint-glow:rgba(0,229,160,.18);
  --red:#FF5E6C; --amber:#F5B041; --blue:#5AB0FF;
  --d:'Ticketing',monospace; --s:'Compagnon',Georgia,serif; --m:'Compagnon',Georgia,serif; --t:'Ticketing',monospace;
  --wrap:1160px; --gut:24px; --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--s);background:var(--bg);color:var(--ink);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
::selection{background:var(--mint);color:#04120C}
h1,h2,h3{font-family:var(--d);font-weight:400;letter-spacing:0;line-height:1.08}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.mint{color:var(--mint)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;border-radius:10px;background:var(--ink);color:#0A0C10;font-weight:500;font-size:15px;border:1px solid var(--ink);cursor:pointer;white-space:nowrap;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 30px -12px rgba(255,255,255,.35)}
.btn .arrow{transition:transform .2s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}
.btn.outline{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn.outline:hover{border-color:var(--ink);box-shadow:none}
.btn.mint{background:var(--mint);border-color:var(--mint);color:#04120C}
.btn.mint:hover{background:var(--mint2);border-color:var(--mint2);box-shadow:0 10px 30px -10px var(--mint-glow)}
.btn.sm{height:38px;padding:0 14px;font-size:13.5px;border-radius:8px}

/* hero */
.hero{position:relative;padding:64px 0 0;overflow:hidden}
.hero-glow{position:absolute;top:-320px;left:50%;transform:translateX(-50%);width:1200px;height:700px;background:radial-gradient(ellipse at center,rgba(0,229,160,.16),rgba(0,229,160,.04) 45%,transparent 70%);pointer-events:none}
.mark-wrap{position:relative;width:100%;margin:22px 0 32px;overflow:hidden}
.mark{font-family:var(--t);font-size:clamp(44px,10.6vw,152px);line-height:1;letter-spacing:-.01em;white-space:nowrap;text-align:center;
  display:flex;justify-content:center;
  clip-path:inset(-10% 100% -10% 0);animation:revealMark 1.5s .15s var(--ease) forwards}
@keyframes revealMark{to{clip-path:inset(-10% -2% -10% 0)}}
.mark span{display:inline-block}
.mark .m1{background:linear-gradient(90deg,#F3F5F7 0%,#F3F5F7 45%,#8CF5D3 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.mark .m2{color:#5CFFC7}
.mark .m3{color:#2DF0B3;filter:blur(.6px)}
.mark .m4{color:var(--mint);filter:blur(1.6px)}
.mark .m5{color:var(--mint);filter:blur(3px);opacity:.9}
.mark .m6{color:var(--mint);filter:blur(5px);opacity:.75}
.mark::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.12) 50%,transparent 100%);background-size:40% 100%;background-repeat:no-repeat;mix-blend-mode:screen;animation:shimmer 5s 2s linear infinite;pointer-events:none}
@keyframes shimmer{0%{background-position:-60% 0}100%{background-position:200% 0}}
.grid3{display:grid;grid-template-columns:1fr 1.15fr 1.25fr;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg2)}
.cell{padding:36px 34px;border-right:1px solid var(--line);min-width:0}
.cell:last-child{border-right:0}
.c1{display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.c1 h1{font-size:clamp(28px,2.7vw,36px);line-height:1.1}
.mono-lab{display:inline-flex;align-items:center;gap:9px;font-family:var(--t);font-size:15px;color:var(--mint);letter-spacing:.02em;text-transform:lowercase}
.mono-lab.center{justify-content:center}
.pt{padding-top:28px}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.mono-lab i{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint);animation:blink 1.8s infinite}
@keyframes blink{50%{opacity:.25}}
.c2{padding:0;background:#07090C;display:flex;align-items:stretch}
.console{width:100%;display:flex;flex-direction:column;min-height:330px}
.con-bar{display:flex;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line);font-family:var(--t);font-size:13px;color:var(--mute)}
.con-bar i{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.con-bar span{margin-left:8px}
.con-body{flex:1;padding:16px;font-family:var(--m);font-size:13.5px;line-height:1.75;color:#B8C1CC;white-space:pre-wrap;word-break:break-word;margin:0}
.con-body .g{color:var(--mint)} .con-body .r{color:var(--red)} .con-body .a{color:var(--amber)} .con-body .d{color:var(--mute)} .con-body .w{color:var(--ink)}
.con-body .cur{display:inline-block;width:7px;height:13px;background:var(--mint);vertical-align:-2px;animation:blink 1s steps(2) infinite}
.c3 .lede{font-size:16px;color:var(--body);line-height:1.65}
.diff{margin-top:24px;font-family:var(--m);font-size:14px;line-height:2}
.diff code{color:var(--mute);font-family:inherit}
.diff .add code{color:var(--body)}
.diff div{display:flex;gap:10px;align-items:baseline}
.diff span{width:12px;flex:0 0 auto}
.diff .del{color:var(--mute)}
.diff .del span{color:var(--red)}
.diff .del{text-decoration:line-through;text-decoration-color:rgba(255,94,108,.6)}
.diff .add{color:var(--ink);background:linear-gradient(90deg,rgba(0,229,160,.12),transparent 85%);border-radius:4px;padding-left:6px;margin-left:-6px}
.diff .add span{color:var(--mint)}
.cta-row{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.fine{margin-top:16px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute)}

/* stage: report window on grid floor */
.stage{position:relative;padding:130px 0 40px;overflow:hidden}
.center-head{text-align:center;max-width:720px;margin:0 auto 48px}
.center-head .mono-lab{margin-bottom:18px}
.center-head h2,.sec-head h2{font-size:clamp(28px,3.4vw,44px)}
.center-head p{margin-top:18px;font-size:17px;color:var(--body);line-height:1.6}
.window{position:relative;z-index:2;max-width:860px;margin:0 auto;background:var(--panel);border:1px solid var(--line2);border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,229,160,.06),0 40px 120px -40px rgba(0,229,160,.25),0 60px 120px -60px rgba(0,0,0,.9)}
.win-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 10px;border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tabs button{font-family:var(--m);font-size:13.5px;color:var(--mute);background:transparent;border:1px solid transparent;border-radius:8px;padding:7px 11px;cursor:pointer;transition:color .15s,background .15s,border-color .15s}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--ink);background:var(--panel2);border-color:var(--line2)}
.live{display:inline-flex;align-items:center;gap:6px;color:var(--mint);font-style:normal;font-family:var(--t);font-size:14px;padding-right:6px}
.live i{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint);animation:blink 1.6s infinite}
.case .row{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:18px 22px;border-bottom:1px solid var(--line);align-items:start}
.case .row:last-child{border-bottom:0;background:#0B0E13}
.case .k{font-family:var(--t);font-size:14px;color:var(--mute);padding-top:3px}
.case .v{font-size:15px;color:var(--ink);line-height:1.6;opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.case .v.on{opacity:1;transform:none}
.case .row:nth-child(2) .v{transition-delay:.08s}.case .row:nth-child(3) .v{transition-delay:.16s}.case .row:nth-child(4) .v{transition-delay:.24s}
.case .v q{color:var(--body);font-style:italic;quotes:"\201C" "\201D"}
.case .v b{color:var(--mint);font-weight:400;font-family:var(--t);font-size:14px}
.floor{position:relative;height:300px;margin-top:-60px;perspective:900px;perspective-origin:50% 0}
.floor-grid{position:absolute;left:-20%;right:-20%;top:0;height:520px;transform:rotateX(62deg);transform-origin:50% 0;
  background-image:linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px);background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 55% 70% at 50% 20%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 55% 70% at 50% 20%,#000 20%,transparent 75%);
  animation:floorMove 6s linear infinite}
@keyframes floorMove{to{background-position:0 72px,0 0}}
.chip{position:absolute;left:50%;top:150px;transform:translateX(-50%);width:76px;height:76px;border-radius:16px;background:linear-gradient(180deg,#1A2029,#0E1218);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 40px -10px var(--mint-glow)}
.chip .beam{position:absolute;left:50%;bottom:100%;width:2px;height:140px;background:linear-gradient(180deg,transparent,var(--mint));opacity:.7;transform:translateX(-50%)}
.chip::after{content:"";position:absolute;inset:-1px;border-radius:16px;box-shadow:0 0 0 0 var(--mint-glow);animation:ring 2.6s infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(0,229,160,.35)}100%{box-shadow:0 0 0 22px rgba(0,229,160,0)}}
.caption{text-align:center;color:var(--mute);font-size:14px;margin-top:8px}

/* sections */
.sec{padding:100px 0;border-top:1px solid var(--line)}
.sec-head{max-width:720px;margin-bottom:44px}
.sec-head .mono-lab{margin-bottom:16px}
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.on{opacity:1;transform:none}

/* cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg2)}
.card{padding:30px 26px;border-right:1px solid var(--line);display:flex;flex-direction:column;position:relative;transition:background .2s}
.card:last-child{border-right:0}
.card:hover{background:var(--panel)}
.card .ic{width:40px;height:40px;border-radius:10px;background:var(--panel2);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;margin-bottom:22px;color:var(--ink)}
.card .ic svg{width:20px;height:20px}
.card h3{font-size:18px}
.card p{margin-top:10px;font-size:14.5px;color:var(--body);line-height:1.6;flex:1}
.card .tag{margin-top:22px;font-family:var(--t);font-size:14px;color:var(--mint)}
.card.custom{background:linear-gradient(180deg,rgba(0,229,160,.08),transparent 60%),var(--bg2)}
.card .tag.link:hover{color:var(--mint2)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.step{padding:30px 28px 30px 0;border-right:1px solid var(--line);margin-right:28px}
.step:last-child{border-right:0;margin-right:0}
.step .num{font-family:var(--t);font-size:16px;color:var(--mint);margin-bottom:18px}
.step h3{font-size:20px}
.step p{margin-top:10px;font-size:15px;color:var(--body);line-height:1.6}
/* principles */
.rules{list-style:none;border-top:1px solid var(--line)}
.rules li{display:grid;grid-template-columns:72px 1fr;gap:24px;padding:30px 0;border-bottom:1px solid var(--line)}
.rules .n{font-family:var(--t);font-size:17px;color:var(--mint);padding-top:4px}
.rules h3{font-size:clamp(19px,2vw,24px)}
.rules p{margin-top:10px;font-size:15.5px;color:var(--body);line-height:1.6;max-width:62ch}

/* start */
.start{padding:120px 0;border-top:1px solid var(--line);position:relative;overflow:hidden;text-align:center}
.start::before{content:"";position:absolute;left:50%;bottom:-420px;transform:translateX(-50%);width:900px;height:700px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,229,160,.16),transparent);pointer-events:none}
.start-in{position:relative;max-width:720px;display:flex;flex-direction:column;align-items:center}
.start h2{font-size:clamp(28px,3.8vw,48px);margin-top:18px}
.start p{margin-top:18px;font-size:17px;color:var(--body);max-width:52ch;line-height:1.6}
.cta-row.center{justify-content:center;margin-top:32px}
.btn.lg{height:52px;padding:0 24px;font-size:15.5px}
.addr{margin-top:22px;font-family:var(--m);font-size:13px;color:var(--mute);border-bottom:1px solid var(--line2);transition:color .15s,border-color .15s}
.addr:hover{color:var(--ink);border-color:var(--ink)}

/* footer */
footer{border-top:1px solid var(--line);padding:28px 0}
.foot{display:flex;justify-content:center}
.copy{font-family:var(--t);font-size:14px;color:var(--mute)}

@media(max-width:1000px){
  .grid3{grid-template-columns:1fr 1fr}
  .c2{grid-column:1/-1;order:3;border-top:1px solid var(--line);border-right:0}
  .c1{border-right:1px solid var(--line)}
  .cards{grid-template-columns:1fr 1fr}
  .card:nth-child(2){border-right:0}
  .card:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:680px){
  .mark{font-size:11.2vw}
  .grid3{grid-template-columns:1fr}
  .c1{border-right:0;border-bottom:1px solid var(--line)}
  .c3{border-bottom:1px solid var(--line)}
  .cell{padding:26px 22px}
  .cards,.steps{grid-template-columns:1fr}
  .card{border-right:0;border-bottom:1px solid var(--line)}
  .card:last-child{border-bottom:0}
  .step{border-right:0;margin-right:0;border-bottom:1px solid var(--line);padding-right:0}
  .step:last-child{border-bottom:0}
  .cta-row.center .btn{width:100%;justify-content:center}
  .case .row{grid-template-columns:1fr;gap:6px}
  .win-bar{flex-wrap:wrap}
  .tabs{width:100%;order:2}
  .live{order:1;margin-left:auto}
  .rules li{grid-template-columns:1fr;gap:8px}
  .floor{height:220px}
  .cta-row .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  .mark{clip-path:none}
  .rv,.case .v{opacity:1;transform:none}
}