:root{
    --night:#101828;
    --night-2:#1d2939;
    --paper:#f8fafc;
    --white:#ffffff;
    --text:#182230;
    --muted:#667085;
    --border:#d0d5dd;
    --blue:#175cd3;
    --blue-soft:#eaf2ff;
    --lime:#b5f23c;
    --orange:#f79009;
    --danger:#d92d20;
    --shadow:0 28px 80px rgba(16,24,40,.14);
    --radius:26px
}

*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth
}

body{
    margin:0;
    background:var(--paper);
    color:var(--text);
    font-family:Arial,"Helvetica Neue",sans-serif;
    line-height:1.65
}

button,
input,
textarea{
    font:inherit
}

button{
    cursor:pointer
}

.tijd-frame{
    width:min(1180px,calc(100% - 36px));
    margin:auto
}

.tijd-skip{
    position:fixed;
    top:-70px;
    left:18px;
    z-index:99999;
    padding:10px 14px;
    border-radius:8px;
    background:var(--white);
    color:var(--night)
}

.tijd-skip:focus{
    top:18px
}

/* Header */
.tijd-header{
    position:sticky;
    top:0;
    z-index:80;
    border-bottom:1px solid rgba(255,255,255,.12);
    background:rgba(16,24,40,.94);
    backdrop-filter:blur(16px)
}

.tijd-header__row{
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px
}

.tijd-logo{
    display:inline-flex;
    align-items:center;
    gap:11px;
    color:var(--white);
    text-decoration:none;
    font-weight:900;
    letter-spacing:-.02em
}

.tijd-logo__mark{
    position:relative;
    width:37px;
    height:37px;
    display:block;
    border-radius:11px;
    background:var(--lime);
    transform:rotate(-4deg)
}

.tijd-logo__mark i,
.tijd-logo__mark b,
.tijd-logo__mark em{
    position:absolute;
    left:50%;
    bottom:50%;
    display:block;
    width:2px;
    border-radius:99px;
    background:var(--night);
    transform-origin:bottom
}

.tijd-logo__mark i{
    height:10px;
    transform:translateX(-50%) rotate(12deg)
}

.tijd-logo__mark b{
    height:13px;
    transform:translateX(-50%) rotate(112deg)
}

.tijd-logo__mark em{
    width:5px;
    height:5px;
    border-radius:50%;
    transform:translate(-50%,50%)
}

.tijd-nav{
    display:flex;
    align-items:center;
    gap:25px
}

.tijd-nav a{
    color:#d0d5dd;
    text-decoration:none;
    font-weight:700
}

.tijd-nav a:hover{
    color:var(--white)
}

.tijd-menu{
    display:none;
    border:0;
    background:transparent
}

.tijd-menu span{
    display:block;
    width:25px;
    height:2px;
    margin:6px 0;
    background:var(--white)
}

/* Intro */
.tijd-opening{
    padding:72px 0 52px;
    color:var(--white);
    background:
        radial-gradient(circle at 85% 0,rgba(181,242,60,.18),transparent 30%),
        linear-gradient(135deg,var(--night),#243b64)
}

.tijd-opening__layout{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(280px,.55fr);
    align-items:end;
    gap:64px
}

.tijd-kicker,
.tijd-heading p{
    margin:0;
    color:var(--blue);
    font-size:.76rem;
    font-weight:900;
    letter-spacing:.16em
}

.tijd-opening .tijd-kicker{
    color:var(--lime)
}

.tijd-opening h1{
    margin:12px 0 22px;
    max-width:780px;
    font-size:clamp(3.7rem,9vw,7.6rem);
    line-height:.88;
    letter-spacing:-.075em
}

.tijd-opening__copy>p:last-child{
    max-width:700px;
    margin:0;
    color:#d0d5dd;
    font-size:1.17rem
}

.tijd-live{
    padding:22px 24px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:18px;
    background:rgba(255,255,255,.07)
}

.tijd-live span,
.tijd-live small{
    display:block;
    color:#cbd5e1
}

.tijd-live span{
    margin-bottom:5px;
    font-size:.75rem;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase
}

.tijd-live strong{
    display:block;
    font-size:clamp(2.25rem,5vw,3.6rem);
    line-height:1.05;
    font-variant-numeric:tabular-nums
}

/* Clock */
.tijd-tool{
    padding:42px 0 84px;
    background:linear-gradient(var(--night) 0 118px,var(--paper) 118px)
}

.tijd-studio{
    overflow:hidden;
    display:grid;
    grid-template-columns:168px minmax(0,1fr);
    grid-template-rows:minmax(490px,auto) auto;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--white);
    box-shadow:var(--shadow)
}

.tijd-studio__rail{
    grid-row:1 / 3;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:20px 16px;
    border-right:1px solid var(--border);
    background:#f2f4f7
}

.tijd-mode{
    width:100%;
    display:grid;
    gap:8px
}

.tijd-mode button{
    width:100%;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    border:1px solid transparent;
    border-radius:12px;
    padding:0 14px;
    background:transparent;
    color:var(--muted);
    font-weight:850;
    text-align:left
}

.tijd-mode button.is-selected{
    border-color:#b2ccff;
    background:var(--blue-soft);
    color:var(--blue)
}

.tijd-format{
    width:100%;
    min-height:48px;
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    align-items:center;
    justify-items:start;
    gap:9px;
    padding:0 10px;
    border:1px solid transparent;
    border-radius:12px;
    color:var(--muted);
    font-size:.83rem;
    font-weight:800
}

.tijd-format input{
    position:absolute;
    opacity:0;
    pointer-events:none
}

.tijd-format>span{
    position:relative;
    grid-column:1;
    grid-row:1;
    width:46px;
    height:26px;
    border-radius:99px;
    background:#cbd5e1;
    transition:.2s
}

.tijd-format>span i{
    position:absolute;
    top:3px;
    left:3px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--white);
    transition:.2s
}

.tijd-format input:checked+span{
    background:var(--blue)
}

.tijd-format input:checked+span i{
    transform:translateX(20px)
}

.tijd-format b{
    grid-column:2;
    grid-row:1;
    line-height:1;
    white-space:nowrap
}

.tijd-expand{
    display:grid;
    place-items:center;
    width:100%;
    height:46px;
    margin-top:auto;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--white);
    color:var(--night)
}

.tijd-expand svg{
    width:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9
}

.tijd-studio__canvas{
    min-width:0;
    display:grid;
    place-items:center;
    padding:48px
}

.tijd-display{
    width:100%
}

.tijd-display[hidden]{
    display:none!important
}

.tijd-digits{
    text-align:center
}

.tijd-digits time{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:.16em;
    white-space:nowrap
}

.tijd-digits time span{
    font-size:clamp(4.8rem,11vw,10.5rem);
    line-height:.88;
    font-weight:800;
    letter-spacing:-.07em;
    font-variant-numeric:tabular-nums
}

.tijd-digits time em{
    padding-bottom:.25em;
    color:var(--orange);
    font-size:1.4rem;
    font-style:normal;
    font-weight:900
}

.tijd-digits>p{
    margin:25px 0 14px;
    color:var(--night-2);
    font-size:1.25rem;
    font-weight:700
}

.tijd-chips{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px
}

.tijd-chips span{
    padding:7px 11px;
    border-radius:99px;
    background:#f2f4f7;
    color:var(--muted);
    font-size:.84rem
}

/* Analog */
.tijd-analog{
    text-align:center
}

.tijd-face{
    position:relative;
    width:min(390px,75vw);
    aspect-ratio:1;
    margin:auto;
    border:8px solid var(--night);
    border-radius:50%;
    background:
        radial-gradient(circle at center,#fff 0 67%,#f2f4f7 68% 100%);
    box-shadow:0 20px 45px rgba(16,24,40,.15)
}

.tijd-number{
    position:absolute;
    top:50%;
    left:50%;
    width:30px;
    height:30px;
    margin:-15px;
    display:grid;
    place-items:center;
    color:var(--night);
    font-size:1rem;
    font-weight:900
}

.tijd-number--1{transform:rotate(30deg) translateY(-162px) rotate(-30deg)}
.tijd-number--2{transform:rotate(60deg) translateY(-162px) rotate(-60deg)}
.tijd-number--3{transform:rotate(90deg) translateY(-162px) rotate(-90deg)}
.tijd-number--4{transform:rotate(120deg) translateY(-162px) rotate(-120deg)}
.tijd-number--5{transform:rotate(150deg) translateY(-162px) rotate(-150deg)}
.tijd-number--6{transform:rotate(180deg) translateY(-162px) rotate(-180deg)}
.tijd-number--7{transform:rotate(210deg) translateY(-162px) rotate(-210deg)}
.tijd-number--8{transform:rotate(240deg) translateY(-162px) rotate(-240deg)}
.tijd-number--9{transform:rotate(270deg) translateY(-162px) rotate(-270deg)}
.tijd-number--10{transform:rotate(300deg) translateY(-162px) rotate(-300deg)}
.tijd-number--11{transform:rotate(330deg) translateY(-162px) rotate(-330deg)}
.tijd-number--12{transform:rotate(0deg) translateY(-162px) rotate(0deg)}

.tijd-hand{
    position:absolute;
    left:50%;
    bottom:50%;
    border-radius:99px;
    transform-origin:bottom
}

.tijd-hand--hour{
    width:7px;
    height:24%;
    background:var(--night)
}

.tijd-hand--minute{
    width:5px;
    height:34%;
    background:var(--blue)
}

.tijd-hand--second{
    width:2px;
    height:40%;
    background:var(--orange)
}

.tijd-hub{
    position:absolute;
    top:50%;
    left:50%;
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--lime);
    box-shadow:0 0 0 5px var(--night);
    transform:translate(-50%,-50%)
}

.tijd-analog__caption{
    margin-top:22px
}

.tijd-analog__caption strong{
    display:block;
    font-size:1.45rem;
    font-variant-numeric:tabular-nums
}

.tijd-analog__caption span{
    color:var(--muted)
}

.tijd-studio__status{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:14px 20px;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:.88rem
}

.tijd-studio__status span{
    display:flex;
    align-items:center;
    gap:8px
}

.tijd-studio__status span i{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#12b76a
}

.tijd-studio__status button{
    border:0;
    background:transparent;
    color:var(--blue);
    font-weight:850
}

/* Homepage lower content */
.tijd-highlights,
.tijd-content,
.tijd-faq{
    padding:72px 0
}

.tijd-heading{
    max-width:760px;
    margin-bottom:28px
}

.tijd-heading h2{
    margin:7px 0;
    font-size:clamp(2.1rem,4.7vw,3.8rem);
    line-height:1.05;
    letter-spacing:-.05em
}

.tijd-highlight-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px
}

.tijd-highlight-grid article{
    min-height:210px;
    padding:23px;
    border-radius:18px;
    background:var(--night);
    color:var(--white)
}

.tijd-highlight-grid article:nth-child(even){
    background:var(--blue)
}

.tijd-highlight-grid span{
    color:var(--lime);
    font-weight:900
}

.tijd-highlight-grid h3{
    margin:28px 0 7px
}

.tijd-highlight-grid p{
    margin:0;
    color:#d0d5dd
}

.tijd-highlight-grid article:nth-child(even) p{
    color:#eaf2ff
}

.tijd-prose{
    max-width:930px;
    margin:auto;
    padding:clamp(28px,5vw,56px);
    border:1px solid var(--border);
    border-radius:22px;
    background:var(--white)
}

.tijd-prose h2{
    margin:1.65em 0 .5em;
    font-size:2rem;
    line-height:1.2;
    letter-spacing:-.025em
}

.tijd-prose h2:first-child{
    margin-top:0
}

.tijd-prose p,
.tijd-prose li{
    color:#475467
}

.tijd-prose a{
    color:var(--blue)
}

.tijd-faq__list{
    max-width:930px
}

.tijd-faq details,
.tijd-side-faq details{
    margin:10px 0;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--white);
    padding:17px 19px
}

.tijd-faq summary,
.tijd-side-faq summary{
    display:flex;
    justify-content:space-between;
    gap:15px;
    cursor:pointer;
    font-weight:850
}

.tijd-faq details p,
.tijd-side-faq details p{
    color:var(--muted)
}

/* Static pages */
.tijd-page-head{
    padding:64px 0 32px;
    color:var(--white);
    background:var(--night)
}

.tijd-crumbs{
    display:flex;
    gap:8px;
    margin-bottom:25px;
    color:#98a2b3
}

.tijd-crumbs a{
    color:var(--lime);
    text-decoration:none
}

.tijd-page-head h1{
    margin:10px 0 16px;
    max-width:900px;
    font-size:clamp(3rem,7vw,5.6rem);
    line-height:.94;
    letter-spacing:-.06em
}

.tijd-page-head__intro{
    max-width:760px;
    color:#d0d5dd;
    font-size:1.08rem
}

.tijd-document{
    padding:48px 0 88px
}

.tijd-document__layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 310px;
    gap:28px;
    align-items:start
}

.tijd-side-faq{
    position:sticky;
    top:95px
}

.tijd-contact{
    display:grid;
    gap:16px;
    margin-top:28px
}

.tijd-contact__row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px
}

.tijd-contact label{
    display:grid;
    gap:7px;
    font-weight:800
}

.tijd-contact input,
.tijd-contact textarea{
    width:100%;
    border:1px solid var(--border);
    border-radius:10px;
    background:#f9fafb;
    padding:12px
}

.tijd-primary{
    justify-self:start;
    border:0;
    border-radius:10px;
    background:var(--blue);
    color:var(--white);
    padding:12px 17px;
    font-weight:850
}

.hp-field{
    position:absolute;
    left:-9999px
}

.tijd-alert{
    padding:13px;
    border-radius:10px
}

.tijd-alert.is-success{
    background:#dcfae6;
    color:#05603a
}

.tijd-alert.is-error{
    background:#fee4e2;
    color:#912018
}

/* Footer */
.tijd-footer{
    padding:52px 0;
    background:var(--night);
    color:var(--white)
}

.tijd-footer__grid{
    display:grid;
    grid-template-columns:1.2fr .8fr 1fr;
    gap:36px
}

.tijd-footer__about p,
.tijd-footer__legal{
    color:#98a2b3
}

.tijd-footer__links{
    display:grid;
    gap:8px
}

.tijd-footer__links a{
    color:#e4e7ec;
    text-decoration:none
}

.tijd-footer__legal{
    text-align:right
}

/* Fullscreen */
.tijd-studio:fullscreen,
.tijd-studio.is-screen-mode{
    width:100vw;
    height:100dvh;
    border:0;
    border-radius:0;
    display:grid;
    grid-template-columns:168px minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) auto;
    background:var(--white)
}

.tijd-studio.is-screen-mode{
    position:fixed;
    inset:0;
    z-index:99999
}

.tijd-lock{
    overflow:hidden!important
}

.tijd-studio:fullscreen .tijd-studio__canvas,
.tijd-studio.is-screen-mode .tijd-studio__canvas{
    min-height:0
}

.tijd-studio:fullscreen .tijd-digits time span,
.tijd-studio.is-screen-mode .tijd-digits time span{
    font-size:clamp(7rem,16vw,16rem)
}

.tijd-studio:fullscreen .tijd-face,
.tijd-studio.is-screen-mode .tijd-face{
    width:min(68vh,68vw,720px)
}

/* Responsive */
@media(max-width:920px){
    .tijd-opening__layout,
    .tijd-document__layout,
    .tijd-footer__grid{
        grid-template-columns:1fr
    }

    .tijd-live{
        max-width:420px
    }

    .tijd-highlight-grid{
        grid-template-columns:repeat(2,1fr)
    }

    .tijd-side-faq{
        position:static
    }

    .tijd-footer__legal{
        text-align:left
    }
}

@media(max-width:720px){
    .tijd-menu{
        display:block
    }

    .tijd-nav{
        display:none;
        position:absolute;
        top:72px;
        left:18px;
        right:18px;
        flex-direction:column;
        align-items:stretch;
        padding:16px;
        border-radius:14px;
        background:var(--night-2);
        box-shadow:var(--shadow)
    }

    .tijd-nav.is-open{
        display:flex
    }

    .tijd-studio{
        grid-template-columns:1fr;
        grid-template-rows:auto minmax(430px,auto) auto
    }

    .tijd-studio__rail{
        grid-row:auto;
        flex-direction:row;
        align-items:center;
        gap:9px;
        padding:12px;
        border-right:0;
        border-bottom:1px solid var(--border)
    }

    .tijd-mode{
        flex:1;
        grid-template-columns:1fr 1fr;
        gap:4px
    }

    .tijd-mode button{
        text-align:center
    }

    .tijd-format{
        width:auto;
        min-height:0;
        display:flex;
        align-items:center;
        gap:6px;
        padding:0;
        border:0;
        white-space:nowrap
    }

    .tijd-format>span{
        grid-column:auto;
        grid-row:auto
    }

    .tijd-format b{
        grid-column:auto;
        grid-row:auto;
        font-size:.78rem
    }

    .tijd-expand{
        flex:0 0 42px;
        width:42px;
        height:42px;
        margin-top:0
    }

    .tijd-studio__canvas{
        padding:38px 18px
    }

    .tijd-contact__row{
        grid-template-columns:1fr
    }

    .tijd-studio:fullscreen,
    .tijd-studio.is-screen-mode{
        grid-template-columns:1fr;
        grid-template-rows:auto minmax(0,1fr) auto
    }
}

@media(max-width:520px){
    .tijd-frame{
        width:min(100% - 20px,1180px)
    }

    .tijd-opening{
        padding:52px 0 40px
    }

    .tijd-opening h1{
        font-size:clamp(3.2rem,18vw,5rem)
    }

    .tijd-studio__rail{
        gap:6px;
        padding:10px
    }

    .tijd-mode button{
        padding:10px 6px;
        font-size:.84rem
    }

    .tijd-format{
        gap:4px
    }

    .tijd-format>span{
        width:38px;
        height:22px
    }

    .tijd-format>span i{
        width:16px;
        height:16px
    }

    .tijd-format input:checked+span i{
        transform:translateX(16px)
    }

    .tijd-format b{
        font-size:.72rem
    }

    .tijd-expand{
        flex-basis:38px;
        width:38px;
        height:38px
    }

    .tijd-digits time span{
        font-size:clamp(3.3rem,18vw,5.2rem)
    }

    .tijd-digits time em{
        font-size:1rem
    }

    .tijd-highlight-grid{
        grid-template-columns:1fr
    }

    .tijd-studio__status{
        align-items:flex-start;
        flex-direction:column
    }

    .tijd-face{
        width:min(310px,82vw)
    }

    .tijd-number--1{transform:rotate(30deg) translateY(-128px) rotate(-30deg)}
    .tijd-number--2{transform:rotate(60deg) translateY(-128px) rotate(-60deg)}
    .tijd-number--3{transform:rotate(90deg) translateY(-128px) rotate(-90deg)}
    .tijd-number--4{transform:rotate(120deg) translateY(-128px) rotate(-120deg)}
    .tijd-number--5{transform:rotate(150deg) translateY(-128px) rotate(-150deg)}
    .tijd-number--6{transform:rotate(180deg) translateY(-128px) rotate(-180deg)}
    .tijd-number--7{transform:rotate(210deg) translateY(-128px) rotate(-210deg)}
    .tijd-number--8{transform:rotate(240deg) translateY(-128px) rotate(-240deg)}
    .tijd-number--9{transform:rotate(270deg) translateY(-128px) rotate(-270deg)}
    .tijd-number--10{transform:rotate(300deg) translateY(-128px) rotate(-300deg)}
    .tijd-number--11{transform:rotate(330deg) translateY(-128px) rotate(-330deg)}
    .tijd-number--12{transform:rotate(0deg) translateY(-128px) rotate(0deg)}

    .tijd-studio.is-screen-mode .tijd-studio__status,
    .tijd-studio:fullscreen .tijd-studio__status{
        display:none
    }
}

@supports(padding:max(0px)){
    .tijd-studio.is-screen-mode{
        padding-top:env(safe-area-inset-top);
        padding-right:env(safe-area-inset-right);
        padding-bottom:env(safe-area-inset-bottom);
        padding-left:env(safe-area-inset-left)
    }
}